@acorex/components 22.2.9 → 22.2.10

package/fesm2022/acorex-components-image-editor.mjs

@@ -82,6 +82,34 @@ class AXImageEditorService {
         }
         this.redoPressed.set(true);
     }
+    /** Handles Ctrl/Cmd+Z and Ctrl/Cmd+Y history shortcuts. Returns true when handled. */
+    handleHistoryShortcut(event) {
+        const modifier = event.ctrlKey || event.metaKey;
+        if (!modifier) {
+            return false;
+        }
+        const isUndo = event.code === 'KeyZ' && !event.shiftKey;
+        const isRedo = event.code === 'KeyY' || (event.code === 'KeyZ' && event.shiftKey);
+        if (isUndo) {
+            if (!this.canUndo()) {
+                return false;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.undo();
+            return true;
+        }
+        if (isRedo) {
+            if (!this.canRedo()) {
+                return false;
+            }
+            event.preventDefault();
+            event.stopPropagation();
+            this.redo();
+            return true;
+        }
+        return false;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
     static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorService }); }
 }
@@ -682,7 +710,19 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         ctx.stroke();
     }
     /** @ignore */
+    historyKeyDown(event) {
+        if (this.parent.disabled) {
+            return;
+        }
+        this.service.handleHistoryShortcut(event);
+    }
+    /** @ignore */
+    focusCanvas() {
+        this.canvasElem()?.nativeElement.focus({ preventScroll: true });
+    }
+    /** @ignore */
     mouseDownHandler(event) {
+        this.focusCanvas();
         if (!this.isDrawTool() || this.parent.disabled) {
             return;
         }
@@ -856,11 +896,11 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorViewComponent, isStandalone: true, selector: "ax-image-editor-view", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, cropperSize: { classPropertyName: "cropperSize", publicName: "cropperSize", isSignal: true, isRequired: false, transformFunction: null }, src: { classPropertyName: "src", publicName: "src", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], viewQueries: [{ propertyName: "canvasElem", first: true, predicate: ["canvasElem"], descendants: true, isSignal: true }, { propertyName: "cropperWindow", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXImageEditorCropperWindowComponent, selector: "ax-image-editor-cropper-window", inputs: ["showGrid", "size"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorViewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-view', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<div class=\"ax-image-editor-stage\">\n  <canvas\n    tabindex=\"0\"\n    (pointerdown)=\"mouseDownHandler($event)\"\n    (pointerup)=\"mouseUpHandler($event)\"\n    (pointercancel)=\"mouseUpHandler($event)\"\n    (pointermove)=\"mouseMoveHandler($event)\"\n    (keydown)=\"historyKeyDown($event)\"\n    class=\"ax-canvas-element\"\n    #canvasElem\n  ></canvas>\n\n  @if (service.activeToolState() === 'crop') {\n    <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n  }\n</div>\n", styles: ["@layer components{ax-image-editor-view{position:relative;display:flex;width:100%;touch-action:none;align-items:center;justify-content:center;overflow:hidden;background-color:var(--color-white, #fff)}ax-image-editor-view .ax-image-editor-stage{position:relative;display:inline-flex;max-height:100%;max-width:100%;align-items:center;justify-content:center}ax-image-editor-view .ax-canvas-element{max-height:100%;max-width:100%;cursor:crosshair;background-color:var(--color-black, #000);touch-action:none}ax-image-editor-view .ax-crop-save{position:absolute;top:calc(var(--spacing, .25rem) * 0);right:calc(var(--spacing, .25rem) * 0);margin:calc(var(--spacing, .25rem) * 4)}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], ctorParameters: () => [], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], cropperSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "cropperSize", required: false }] }], src: [{ type: i0.Input, args: [{ isSignal: true, alias: "src", required: false }] }], canvasElem: [{ type: i0.ViewChild, args: ['canvasElem', { isSignal: true }] }], cropperWindow: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }] } });
 
 /**
@@ -869,9 +909,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
  */
 class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent), MXLookComponent) {
     constructor() {
-        super(...arguments);
+        super();
         /** @ignore */
         this.service = inject(AXImageEditorService);
+        this.host = inject((ElementRef));
+        this.destroyRef = inject(DestroyRef);
         this.imageEditorContainer = viewChild('f', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "imageEditorContainer" }] : /* istanbul ignore next */ []));
         this.view = contentChild(AXImageEditorViewComponent, /* @ts-ignore */
@@ -886,8 +928,17 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
             }
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "#syncValue" }] : /* istanbul ignore next */ []));
+        afterNextRender(() => {
+            const onKeyDown = (event) => this.handleHistoryShortcut(event);
+            document.addEventListener('keydown', onKeyDown, true);
+            this.destroyRef.onDestroy(() => document.removeEventListener('keydown', onKeyDown, true));
+        });
     }
     #syncValue;
+    /** @ignore */
+    focusEditor() {
+        this.host.nativeElement.focus({ preventScroll: true });
+    }
     /** Applies the current cropper selection. */
     async crop() {
         const oldValue = this.value;
@@ -897,6 +948,32 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
             this.commitValue(blobs, true);
         }
     }
+    /** @ignore */
+    onEditorPointerDown(event) {
+        const target = event.target;
+        if (target instanceof Element && target.closest('canvas.ax-canvas-element')) {
+            return;
+        }
+        this.focusEditor();
+    }
+    /** @ignore */
+    handleHistoryShortcut(event) {
+        if (this.disabled) {
+            return;
+        }
+        const root = this.host.nativeElement;
+        const activeElement = document.activeElement;
+        const isInsideEditor = root.contains(activeElement) || event.composedPath().some((node) => node === root);
+        if (!isInsideEditor) {
+            return;
+        }
+        const target = (event.target ?? activeElement);
+        if (target instanceof HTMLElement &&
+            (target.isContentEditable || target.closest('input, textarea, select, [contenteditable="true"]'))) {
+            return;
+        }
+        this.service.handleHistoryShortcut(event);
+    }
     /** Encodes the current canvas into JPEG, PNG, and WebP blobs. */
     async commitChanges() {
         const view = this.view();
@@ -908,8 +985,8 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
         }
         return view.commitChanges();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look", disabled: "disabled" }, outputs: { onValueChanged: "onValueChanged" }, host: { properties: { "class.ax-state-disabled": "disabled", "attr.name": "name" } }, providers: [
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorContainerComponent, isStandalone: true, selector: "ax-image-editor-container", inputs: { look: "look", disabled: "disabled" }, outputs: { onValueChanged: "onValueChanged" }, host: { attributes: { "tabindex": "-1" }, listeners: { "keydown": "handleHistoryShortcut($event)" }, properties: { "class.ax-state-disabled": "disabled", "attr.name": "name" } }, providers: [
             AXImageEditorService,
             { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
             { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
@@ -919,13 +996,15 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
                 useExisting: forwardRef(() => AXImageEditorContainerComponent),
                 multi: true,
             },
-        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div #f class=\"ax-editor-container ax-default {{ look }}\" [class.ax-image-editor-pending]=\"!service.isImageLoad()\">\n  <ng-content select=\"ax-header\"></ng-content>\n\n  <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n@if (!service.isImageLoad()) {\n  @if (service.loadError()) {\n    <div class=\"ax-error-container\">{{ '@acorex:image-editor.load-error' | translate | async }}</div>\n  } @else {\n    <div class=\"ax-loading-spinner-container\">\n      <ax-loading-spinner\n        [size]=\"16\"\n        color=\"primary\"\n        [text]=\"('@acorex:image-editor.loading' | translate | async) || ''\"\n      ></ax-loading-spinner>\n    </div>\n  }\n}\n\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{position:relative;display:block;width:fit-content}ax-image-editor-container.ax-state-disabled{opacity:50%}ax-image-editor-container .ax-disable-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);height:100%;width:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;padding:calc(var(--spacing, .25rem) * 0)}ax-image-editor-container>.ax-editor-container.ax-image-editor-pending{position:absolute;height:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 0);overflow:hidden;opacity:0%}ax-image-editor-container .ax-loading-spinner-container,ax-image-editor-container .ax-error-container{display:flex;min-height:calc(var(--spacing, .25rem) * 40);align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center}ax-image-editor-container ax-footer{width:100%}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "view", first: true, predicate: AXImageEditorViewComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "imageEditorContainer", first: true, predicate: ["f"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div\n  #f\n  class=\"ax-editor-container ax-default {{ look }}\"\n  [class.ax-image-editor-pending]=\"!service.isImageLoad()\"\n  (pointerdown)=\"onEditorPointerDown($event)\"\n>\n  <ng-content select=\"ax-header\"></ng-content>\n\n  <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n@if (!service.isImageLoad()) {\n  @if (service.loadError()) {\n    <div class=\"ax-error-container\">{{ '@acorex:image-editor.load-error' | translate | async }}</div>\n  } @else {\n    <div class=\"ax-loading-spinner-container\">\n      <ax-loading-spinner\n        [size]=\"16\"\n        color=\"primary\"\n        [text]=\"('@acorex:image-editor.loading' | translate | async) || ''\"\n      ></ax-loading-spinner>\n    </div>\n  }\n}\n\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{position:relative;display:block;width:fit-content}ax-image-editor-container.ax-state-disabled{opacity:50%}ax-image-editor-container .ax-disable-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);height:100%;width:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;padding:calc(var(--spacing, .25rem) * 0)}ax-image-editor-container>.ax-editor-container.ax-image-editor-pending{position:absolute;height:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 0);overflow:hidden;opacity:0%}ax-image-editor-container .ax-loading-spinner-container,ax-image-editor-container .ax-error-container{display:flex;min-height:calc(var(--spacing, .25rem) * 40);align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center}ax-image-editor-container ax-footer{width:100%}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: AXLoadingSpinnerComponent, selector: "ax-loading-spinner", inputs: ["text", "color", "size", "stroke"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorContainerComponent, decorators: [{
             type: Component,
             args: [{ selector: 'ax-image-editor-container', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], inputs: ['look', 'disabled'], host: {
                         '[class.ax-state-disabled]': 'disabled',
                         '[attr.name]': 'name',
+                        tabindex: '-1',
+                        '(keydown)': 'handleHistoryShortcut($event)',
                     }, providers: [
                         AXImageEditorService,
                         { provide: AXComponent, useExisting: AXImageEditorContainerComponent },
@@ -936,8 +1015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => AXImageEditorContainerComponent),
                             multi: true,
                         },
-                    ], imports: [AXDecoratorModule, AXLoadingSpinnerComponent, AsyncPipe, AXTranslatorPipe], template: "<div #f class=\"ax-editor-container ax-default {{ look }}\" [class.ax-image-editor-pending]=\"!service.isImageLoad()\">\n  <ng-content select=\"ax-header\"></ng-content>\n\n  <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n@if (!service.isImageLoad()) {\n  @if (service.loadError()) {\n    <div class=\"ax-error-container\">{{ '@acorex:image-editor.load-error' | translate | async }}</div>\n  } @else {\n    <div class=\"ax-loading-spinner-container\">\n      <ax-loading-spinner\n        [size]=\"16\"\n        color=\"primary\"\n        [text]=\"('@acorex:image-editor.loading' | translate | async) || ''\"\n      ></ax-loading-spinner>\n    </div>\n  }\n}\n\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{position:relative;display:block;width:fit-content}ax-image-editor-container.ax-state-disabled{opacity:50%}ax-image-editor-container .ax-disable-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);height:100%;width:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;padding:calc(var(--spacing, .25rem) * 0)}ax-image-editor-container>.ax-editor-container.ax-image-editor-pending{position:absolute;height:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 0);overflow:hidden;opacity:0%}ax-image-editor-container .ax-loading-spinner-container,ax-image-editor-container .ax-error-container{display:flex;min-height:calc(var(--spacing, .25rem) * 40);align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center}ax-image-editor-container ax-footer{width:100%}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }] } });
+                    ], imports: [AXDecoratorModule, AXLoadingSpinnerComponent, AsyncPipe, AXTranslatorPipe], template: "<div\n  #f\n  class=\"ax-editor-container ax-default {{ look }}\"\n  [class.ax-image-editor-pending]=\"!service.isImageLoad()\"\n  (pointerdown)=\"onEditorPointerDown($event)\"\n>\n  <ng-content select=\"ax-header\"></ng-content>\n\n  <ng-content select=\"ax-image-editor-view\"> </ng-content>\n\n  <ng-content select=\"ax-footer\"></ng-content>\n</div>\n\n@if (!service.isImageLoad()) {\n  @if (service.loadError()) {\n    <div class=\"ax-error-container\">{{ '@acorex:image-editor.load-error' | translate | async }}</div>\n  } @else {\n    <div class=\"ax-loading-spinner-container\">\n      <ax-loading-spinner\n        [size]=\"16\"\n        color=\"primary\"\n        [text]=\"('@acorex:image-editor.loading' | translate | async) || ''\"\n      ></ax-loading-spinner>\n    </div>\n  }\n}\n\n<div class=\"ax-error-container\"></div>\n<ng-content select=\"ax-validation-rule\"> </ng-content>\n\n@if (disabled) {\n  <div class=\"ax-disable-overlay\"></div>\n}\n", styles: ["@layer components{ax-image-editor-container{position:relative;display:block;width:fit-content}ax-image-editor-container.ax-state-disabled{opacity:50%}ax-image-editor-container .ax-disable-overlay{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);height:100%;width:100%;cursor:not-allowed}ax-image-editor-container>.ax-editor-container{display:block;height:auto!important;padding:calc(var(--spacing, .25rem) * 0)}ax-image-editor-container>.ax-editor-container.ax-image-editor-pending{position:absolute;height:calc(var(--spacing, .25rem) * 0);width:calc(var(--spacing, .25rem) * 0);overflow:hidden;opacity:0%}ax-image-editor-container .ax-loading-spinner-container,ax-image-editor-container .ax-error-container{display:flex;min-height:calc(var(--spacing, .25rem) * 40);align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center}ax-image-editor-container ax-footer{width:100%}ax-image-editor-container ax-header{width:100%}ax-image-editor-container ax-header ax-toolbar{justify-content:space-between}ax-image-editor-container ax-header .ax-start-toolbar-divider{display:none}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { imageEditorContainer: [{ type: i0.ViewChild, args: ['f', { isSignal: true }] }], view: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXImageEditorViewComponent), { isSignal: true }] }] } });
 
 const IMAGE_EDITOR_ASPECT_RATIO_ACTIVE_SUFFIX = ':active';
 function parseAspectRatioItem(item) {