@acorex/components 22.0.0 → 22.0.1-next.0

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

@@ -1,24 +1,21 @@
 import { AXComponent, MXBaseComponent, MXInputBaseValueComponent, MXLookComponent, AXFocusableComponent, AXValuableComponent } from '@acorex/cdk/common';
 import * as i1 from '@acorex/components/decorators';
 import { AXDecoratorModule, AXDecoratorIconComponent } from '@acorex/components/decorators';
-import { AXLoadingSpinnerComponent, AXLoadingModule } from '@acorex/components/loading';
+import { AXLoadingSpinnerComponent } from '@acorex/components/loading';
+import { AXTranslatorPipe } from '@acorex/core/translation';
+import { isPlatformBrowser, AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { signal, Injectable, input, inject, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, afterNextRender, ViewEncapsulation, Component, linkedSignal, contentChild, forwardRef, HostBinding, output, computed, NgModule } from '@angular/core';
+import { signal, Injectable, input, inject, NgZone, ElementRef, viewChild, Renderer2, PLATFORM_ID, effect, untracked, afterNextRender, ChangeDetectionStrategy, ViewEncapsulation, Component, DestroyRef, contentChild, forwardRef, output, computed, NgModule } from '@angular/core';
 import * as i1$1 from '@angular/forms';
 import { NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
 import { classes } from 'polytype';
-import { isPlatformBrowser, AsyncPipe } from '@angular/common';
-import { AXButtonComponent, AXButtonModule } from '@acorex/components/button';
+import { AXButtonComponent } from '@acorex/components/button';
 import * as i2 from '@acorex/components/tooltip';
 import { AXTooltipModule, AXTooltipDirective } from '@acorex/components/tooltip';
-import { AXTranslatorPipe } from '@acorex/core/translation';
 import * as i2$1 from '@acorex/components/toolbar';
 import { AXToolBarModule } from '@acorex/components/toolbar';
-import { AXColorBoxComponent, AXColorBoxModule } from '@acorex/components/color-box';
-import { AXRangeSliderComponent, AXRangeSliderModule } from '@acorex/components/range-slider';
-import { AXDialogModule } from '@acorex/components/dialog';
-import { AXPopoverModule } from '@acorex/components/popover';
-import { AXSelectBoxModule } from '@acorex/components/select-box';
+import { AXColorBoxComponent } from '@acorex/components/color-box';
+import { AXRangeSliderComponent } from '@acorex/components/range-slider';
 
 class AXImageEditorService {
     constructor() {
@@ -38,6 +35,8 @@ class AXImageEditorService {
         ...(ngDevMode ? [{ debugName: "rotate" }] : /* istanbul ignore next */ []));
         this.isImageLoad = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isImageLoad" }] : /* istanbul ignore next */ []));
+        this.loadError = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadError" }] : /* istanbul ignore next */ []));
         this.newImage = null;
         this.initialImage = null;
         this.imageBlob = signal([], /* @ts-ignore */
@@ -46,6 +45,10 @@ class AXImageEditorService {
         ...(ngDevMode ? [{ debugName: "undoPressed" }] : /* istanbul ignore next */ []));
         this.redoPressed = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "redoPressed" }] : /* istanbul ignore next */ []));
+        this.canUndo = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canUndo" }] : /* istanbul ignore next */ []));
+        this.canRedo = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canRedo" }] : /* istanbul ignore next */ []));
         this.cropperRatio = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cropperRatio" }] : /* istanbul ignore next */ []));
         this.cropperSize = signal(150, /* @ts-ignore */
@@ -54,6 +57,7 @@ class AXImageEditorService {
     toggleTool(tool) {
         if (this.activeToolState() === tool) {
             this.activeToolState.set(null);
+            this.penType.set(null);
             return;
         }
         this.activateTool(tool);
@@ -62,7 +66,49 @@ class AXImageEditorService {
         this.activeToolState.set(tool);
         if (tool === 'pen' || tool === 'highlight') {
             this.penType.set(tool);
+            return;
+        }
+        this.penType.set(null);
+    }
+    undo() {
+        if (!this.canUndo()) {
+            return;
+        }
+        this.undoPressed.set(true);
+    }
+    redo() {
+        if (!this.canRedo()) {
+            return;
+        }
+        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 }); }
@@ -91,63 +137,42 @@ class AXImageEditorCropperWindowComponent {
         this.elementRef = inject(ElementRef);
         this.cropperWindow = viewChild('r', /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "cropperWindow" }] : /* istanbul ignore next */ []));
-        this.currentX = signal(-45, /* @ts-ignore */
+        this.currentX = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentX" }] : /* istanbul ignore next */ []));
-        this.currentY = signal(-45, /* @ts-ignore */
+        this.currentY = signal(0, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "currentY" }] : /* istanbul ignore next */ []));
-        this.prevX = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "prevX" }] : /* istanbul ignore next */ []));
-        this.prevY = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "prevY" }] : /* istanbul ignore next */ []));
-        this.aspectWidth = signal(0, /* @ts-ignore */
+        this.aspectWidth = signal(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "aspectWidth" }] : /* istanbul ignore next */ []));
-        this.aspectHeight = signal(0, /* @ts-ignore */
+        this.aspectHeight = signal(1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "aspectHeight" }] : /* istanbul ignore next */ []));
         this.isMousePressed = signal(false, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "isMousePressed" }] : /* istanbul ignore next */ []));
         this.renderer = inject(Renderer2);
         this.platformID = inject(PLATFORM_ID);
-        this.#eff = effect(() => {
+        this.positioned = false;
+        this.#sizeEffect = effect(() => {
             const host = this.elementRef.nativeElement;
-            let width;
-            let height;
             const scale = this.size() ?? this.service.cropperSize();
-            switch (this.service.cropperRatio()) {
-                case '1:1':
-                    width = 1;
-                    height = 1;
-                    break;
-                case '16:9':
-                    width = 1.777777777777778;
-                    height = 1;
-                    break;
-                case null:
-                    width = 1;
-                    height = 1;
-                    break;
-                default:
-                    [width, height] = this.service.cropperRatio().split(':').map(Number);
-            }
-            if (width >= height) {
-                const aspect = width / height;
-                width = aspect;
-                height = 1;
-                this.aspectWidth.set(aspect);
-                this.aspectHeight.set(1);
-            }
-            else {
-                const aspect = height / width;
-                width = 1;
-                height = aspect;
-                this.aspectWidth.set(1);
-                this.aspectHeight.set(aspect);
+            const ratio = this.service.cropperRatio();
+            const { width, height } = this.normalizeRatio(ratio);
+            this.aspectWidth.set(width);
+            this.aspectHeight.set(height);
+            const parent = host.parentElement;
+            const maxW = parent?.clientWidth || scale * width;
+            const maxH = parent?.clientHeight || scale * height;
+            const nextWidth = Math.min(width * scale, maxW * 0.9);
+            const nextHeight = (nextWidth * height) / width;
+            host.style.width = `${Math.max(20, nextWidth)}px`;
+            host.style.height = `${Math.max(20, Math.min(nextHeight, maxH * 0.9))}px`;
+            if (this.positioned) {
+                untracked(() => this.clampToParent());
             }
-            host.style.width = `${width * scale}px`;
-            host.style.height = `${height * scale}px`;
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        ...(ngDevMode ? [{ debugName: "#sizeEffect" }] : /* istanbul ignore next */ []));
         this.#init = afterNextRender(() => {
             const host = this.elementRef.nativeElement;
+            this.centerOnParent();
+            this.positioned = true;
             this.ngZone.runOutsideAngular(() => {
                 this.mouseMoveEvent = this.renderer.listen(document, 'pointermove', this.changeSizeHandler.bind(this));
                 this.mouseUpEvent = this.renderer.listen(document, 'pointerup', this.clearSelector.bind(this));
@@ -156,34 +181,26 @@ class AXImageEditorCropperWindowComponent {
                 this.mouseUpEvent2 = this.renderer.listen(host, 'pointerup', this.panUp.bind(this));
             });
         });
-        this.#positionChange = effect(() => {
-            this.setPosition(this.currentX(), this.currentY());
-        }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#positionChange" }] : /* istanbul ignore next */ []));
+        this.startX = 0;
+        this.startY = 0;
+        this.startWidth = 0;
+        this.startHeight = 0;
+        this.startLeft = 0;
+        this.startTop = 0;
     }
-    #eff;
+    #sizeEffect;
     #init;
     ngOnDestroy() {
-        if (isPlatformBrowser(this.platformID) && this.mouseMoveEvent) {
-            this.mouseMoveEvent();
-        }
-        if (isPlatformBrowser(this.platformID) && this.mouseUpEvent) {
-            this.mouseUpEvent();
-        }
-        if (isPlatformBrowser(this.platformID) && this.mouseDownEvent) {
-            this.mouseDownEvent();
-        }
-        if (isPlatformBrowser(this.platformID) && this.mouseMoveEvent2) {
-            this.mouseMoveEvent2();
-        }
-        if (isPlatformBrowser(this.platformID) && this.mouseUpEvent2) {
-            this.mouseUpEvent2();
-        }
-        if (isPlatformBrowser(this.platformID) && this.mouseLeaveEvent) {
-            this.mouseLeaveEvent();
+        if (!isPlatformBrowser(this.platformID)) {
+            return;
         }
+        this.mouseMoveEvent?.();
+        this.mouseUpEvent?.();
+        this.mouseDownEvent?.();
+        this.mouseMoveEvent2?.();
+        this.mouseUpEvent2?.();
+        this.mouseLeaveEvent?.();
     }
-    #positionChange;
     panMove(e) {
         if (!this.isMousePressed())
             return;
@@ -191,39 +208,27 @@ class AXImageEditorCropperWindowComponent {
             return;
         if (!this.panState())
             return;
-        const currentX = e.clientX;
-        const currentY = e.clientY;
-        const deltaX = currentX - this.prevX();
-        const deltaY = currentY - this.prevY();
-        this.currentX.update((prev) => prev + deltaX);
-        this.currentY.update((prev) => prev + deltaY);
-        this.prevX.set(currentX);
-        this.prevY.set(currentY);
+        this.currentX.update((prev) => prev + e.movementX);
+        this.currentY.update((prev) => prev + e.movementY);
+        this.clampToParent();
     }
     panDown(e) {
-        this.isMousePressed.set(true);
         if (this.selectedHandle())
             return;
+        this.isMousePressed.set(true);
         this.panState.set(true);
-        this.prevX.set(e.clientX);
-        this.prevY.set(e.clientY);
+        e.currentTarget?.setPointerCapture?.(e.pointerId);
     }
     panUp() {
         this.isMousePressed.set(false);
-        if (this.selectedHandle())
-            return;
         this.panState.set(false);
     }
     getCropperArea() {
         return this.elementRef.nativeElement.getBoundingClientRect();
     }
-    setPosition(posX, posY) {
-        const el = this.elementRef.nativeElement;
-        el.style.transform = `translate(${posX}px, ${posY}px)`;
-    }
     handleSelector(e, value) {
-        if (this.panState())
-            return;
+        e.stopPropagation();
+        e.preventDefault();
         const host = this.elementRef.nativeElement;
         this.startX = e.clientX;
         this.startY = e.clientY;
@@ -232,6 +237,8 @@ class AXImageEditorCropperWindowComponent {
         this.startLeft = host.offsetLeft;
         this.startTop = host.offsetTop;
         this.selectedHandle.set(value);
+        this.isMousePressed.set(true);
+        e.currentTarget?.setPointerCapture?.(e.pointerId);
     }
     changeSizeHandler(e) {
         if (!this.isMousePressed())
@@ -243,164 +250,176 @@ class AXImageEditorCropperWindowComponent {
         const host = this.elementRef.nativeElement;
         const dy = e.clientY - this.startY;
         const dx = e.clientX - this.startX;
-        let newWidth;
-        let newHeight;
         const minSize = 20;
+        const locked = !!this.service.cropperRatio();
+        const aspect = this.aspectWidth() / this.aspectHeight();
+        let width = this.startWidth;
+        let height = this.startHeight;
+        let left = this.startLeft;
+        let top = this.startTop;
         switch (this.selectedHandle()) {
             case 'right':
-                newWidth = Math.max(minSize, this.startWidth + dx);
-                host.style.width = `${newWidth}px`;
+                width = Math.max(minSize, this.startWidth + dx);
                 break;
             case 'top':
-                newHeight = Math.max(minSize, this.startHeight - dy);
-                host.style.height = `${newHeight}px`;
-                host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
+                height = Math.max(minSize, this.startHeight - dy);
+                top = this.startTop + (this.startHeight - height);
                 break;
             case 'left':
-                newWidth = Math.max(minSize, this.startWidth - dx);
-                host.style.width = `${newWidth}px`;
-                host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
+                width = Math.max(minSize, this.startWidth - dx);
+                left = this.startLeft + (this.startWidth - width);
                 break;
             case 'bottom':
-                newHeight = Math.max(minSize, this.startHeight + dy);
-                host.style.height = `${newHeight}px`;
+                height = Math.max(minSize, this.startHeight + dy);
                 break;
             case 'right-top':
-                if (this.service.cropperRatio()) {
-                    newWidth = Math.max(minSize, this.startWidth + dx);
-                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
-                    if (newHeight < minSize) {
-                        newHeight = minSize;
-                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
-                    }
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
-                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
-                }
-                else {
-                    newWidth = Math.max(minSize, this.startWidth + dx);
-                    newHeight = Math.max(minSize, this.startHeight - dy);
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
-                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
+                width = Math.max(minSize, this.startWidth + dx);
+                height = locked ? width / aspect : Math.max(minSize, this.startHeight - dy);
+                if (locked && height < minSize) {
+                    height = minSize;
+                    width = height * aspect;
                 }
+                top = this.startTop + (this.startHeight - height);
                 break;
             case 'bottom-right':
-                if (this.service.cropperRatio()) {
-                    newWidth = Math.max(minSize, this.startWidth + dx);
-                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
-                    if (newHeight < minSize) {
-                        newHeight = minSize;
-                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
-                    }
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
-                }
-                else {
-                    newWidth = Math.max(minSize, this.startWidth + dx);
-                    newHeight = Math.max(minSize, this.startHeight + dy);
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
+                width = Math.max(minSize, this.startWidth + dx);
+                height = locked ? width / aspect : Math.max(minSize, this.startHeight + dy);
+                if (locked && height < minSize) {
+                    height = minSize;
+                    width = height * aspect;
                 }
                 break;
             case 'bottom-left':
-                if (this.service.cropperRatio()) {
-                    newWidth = Math.max(minSize, this.startWidth - dx);
-                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
-                    if (newHeight < minSize) {
-                        newHeight = minSize;
-                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
-                    }
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
-                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
-                }
-                else {
-                    newWidth = Math.max(minSize, this.startWidth - dx);
-                    newHeight = Math.max(minSize, this.startHeight + dy);
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
-                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
+                width = Math.max(minSize, this.startWidth - dx);
+                height = locked ? width / aspect : Math.max(minSize, this.startHeight + dy);
+                if (locked && height < minSize) {
+                    height = minSize;
+                    width = height * aspect;
                 }
+                left = this.startLeft + (this.startWidth - width);
                 break;
             case 'left-top':
-                if (this.service.cropperRatio()) {
-                    newWidth = Math.max(minSize, this.startWidth - dx);
-                    newHeight = (newWidth * this.aspectHeight()) / this.aspectWidth();
-                    if (newHeight < minSize) {
-                        newHeight = minSize;
-                        newWidth = (newHeight * this.aspectWidth()) / this.aspectHeight();
-                    }
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
-                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
-                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
-                }
-                else {
-                    newWidth = Math.max(minSize, this.startWidth - dx);
-                    newHeight = Math.max(minSize, this.startHeight - dy);
-                    host.style.width = `${newWidth}px`;
-                    host.style.height = `${newHeight}px`;
-                    host.style.left = `${this.startLeft + (this.startWidth - newWidth)}px`;
-                    host.style.top = `${this.startTop + (this.startHeight - newHeight)}px`;
+                width = Math.max(minSize, this.startWidth - dx);
+                height = locked ? width / aspect : Math.max(minSize, this.startHeight - dy);
+                if (locked && height < minSize) {
+                    height = minSize;
+                    width = height * aspect;
                 }
+                left = this.startLeft + (this.startWidth - width);
+                top = this.startTop + (this.startHeight - height);
                 break;
         }
+        host.style.width = `${width}px`;
+        host.style.height = `${height}px`;
+        this.currentX.set(left);
+        this.currentY.set(top);
+        this.clampToParent();
     }
     clearSelector() {
-        if (this.panState())
-            return;
         this.selectedHandle.set(null);
+        this.isMousePressed.set(false);
+        this.panState.set(false);
+    }
+    normalizeRatio(ratio) {
+        let width = 1;
+        let height = 1;
+        if (ratio && ratio.includes(':')) {
+            const [rawW, rawH] = ratio.split(':').map(Number);
+            if (rawW > 0 && rawH > 0) {
+                width = rawW;
+                height = rawH;
+            }
+        }
+        if (width >= height) {
+            return { width: width / height, height: 1 };
+        }
+        return { width: 1, height: height / width };
+    }
+    centerOnParent() {
+        const host = this.elementRef.nativeElement;
+        const parent = host.parentElement;
+        if (!parent) {
+            return;
+        }
+        const left = Math.max(0, (parent.clientWidth - host.offsetWidth) / 2);
+        const top = Math.max(0, (parent.clientHeight - host.offsetHeight) / 2);
+        this.currentX.set(left);
+        this.currentY.set(top);
+        this.applyPosition();
+    }
+    clampToParent() {
+        const host = this.elementRef.nativeElement;
+        const parent = host.parentElement;
+        if (!parent) {
+            this.applyPosition();
+            return;
+        }
+        const maxX = Math.max(0, parent.clientWidth - host.offsetWidth);
+        const maxY = Math.max(0, parent.clientHeight - host.offsetHeight);
+        this.currentX.set(Math.min(Math.max(0, this.currentX()), maxX));
+        this.currentY.set(Math.min(Math.max(0, this.currentY()), maxY));
+        this.applyPosition();
+    }
+    applyPosition() {
+        const host = this.elementRef.nativeElement;
+        host.style.left = `${this.currentX()}px`;
+        host.style.top = `${this.currentY()}px`;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropperWindowComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;touch-action:none;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;display:grid;height:100%;cursor:move;grid-template-columns:repeat(3,minmax(0,1fr));outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:color-mix(in srgb,#000 70%,transparent);--tw-outline-style: solid;outline-style:solid}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black, #000) 70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:color-mix(in srgb,#fff 50%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{position:absolute;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-white, #fff);background-color:var(--color-gray-500, oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(var(--spacing, .25rem) * -2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing, .25rem) * -2);bottom:calc(var(--spacing, .25rem) * -2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing, .25rem) * -2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing, .25rem) * -2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing, .25rem) * -2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(50% - .5rem);cursor:n-resize}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorCropperWindowComponent, isStandalone: true, selector: "ax-image-editor-cropper-window", inputs: { showGrid: { classPropertyName: "showGrid", publicName: "showGrid", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], viewQueries: [{ propertyName: "cropperWindow", first: true, predicate: ["r"], descendants: true, isSignal: true }], ngImport: i0, template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-image-editor-cropper-window{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);touch-action:none;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;display:grid;height:100%;cursor:move;grid-template-columns:repeat(3,minmax(0,1fr));outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:color-mix(in srgb,#000 70%,transparent);--tw-outline-style: solid;outline-style:solid}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black, #000) 70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:color-mix(in srgb,#fff 50%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{position:absolute;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-white, #fff);background-color:var(--color-gray-500, oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(var(--spacing, .25rem) * -2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing, .25rem) * -2);bottom:calc(var(--spacing, .25rem) * -2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing, .25rem) * -2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing, .25rem) * -2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing, .25rem) * -2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(50% - .5rem);cursor:n-resize}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropperWindowComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-image-editor-cropper-window{position:absolute;top:45%;left:45%;touch-action:none;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;display:grid;height:100%;cursor:move;grid-template-columns:repeat(3,minmax(0,1fr));outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:color-mix(in srgb,#000 70%,transparent);--tw-outline-style: solid;outline-style:solid}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black, #000) 70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:color-mix(in srgb,#fff 50%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{position:absolute;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-white, #fff);background-color:var(--color-gray-500, oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(var(--spacing, .25rem) * -2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing, .25rem) * -2);bottom:calc(var(--spacing, .25rem) * -2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing, .25rem) * -2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing, .25rem) * -2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing, .25rem) * -2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(50% - .5rem);cursor:n-resize}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'ax-image-editor-cropper-window', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropperWindowComponent }], template: "<div [style.border]=\"!showGrid() ? '1px dashed white' : null\" #r class=\"ax-image-cropper-window-container\">\n  @if (!service.cropperRatio()) {\n    <div (pointerdown)=\"handleSelector($event, 'right')\" class=\"ax-image-right-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'top')\" class=\"ax-image-top-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'left')\" class=\"ax-image-left-handle ax-handle-shape\"></div>\n    <div (pointerdown)=\"handleSelector($event, 'bottom')\" class=\"ax-image-bottom-handle ax-handle-shape\"></div>\n  }\n\n  <div (pointerdown)=\"handleSelector($event, 'right-top')\" class=\"ax-image-right-top-handle ax-handle-shape\"></div>\n  <div\n    (pointerdown)=\"handleSelector($event, 'bottom-right')\"\n    class=\"ax-image-bottom-right-handle ax-handle-shape\"\n  ></div>\n  <div (pointerdown)=\"handleSelector($event, 'bottom-left')\" class=\"ax-image-bottom-left-handle ax-handle-shape\"></div>\n  <div (pointerdown)=\"handleSelector($event, 'left-top')\" class=\"ax-image-left-top-handle ax-handle-shape\"></div>\n\n  @if (showGrid()) {\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n    <div class=\"ax-grid-item\"></div>\n  }\n</div>\n", styles: ["@layer properties;@layer components{ax-image-editor-cropper-window{position:absolute;top:calc(var(--spacing, .25rem) * 0);left:calc(var(--spacing, .25rem) * 0);touch-action:none;-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-cropper-window-container{position:relative;display:grid;height:100%;cursor:move;grid-template-columns:repeat(3,minmax(0,1fr));outline-style:var(--tw-outline-style);outline-width:100vmax;outline-color:color-mix(in srgb,#000 70%,transparent);--tw-outline-style: solid;outline-style:solid}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container{outline-color:color-mix(in oklab,var(--color-black, #000) 70%,transparent)}}ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:color-mix(in srgb,#fff 50%,transparent)}@supports (color: color-mix(in lab,red,red)){ax-image-editor-cropper-window .ax-image-cropper-window-container .ax-grid-item{border-color:color-mix(in oklab,var(--color-white, #fff) 50%,transparent)}}ax-image-editor-cropper-window .ax-handle-shape{position:absolute;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 4);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:var(--color-white, #fff);background-color:var(--color-gray-500, oklch(55.1% .027 264.364));-webkit-user-select:none;user-select:none}ax-image-editor-cropper-window .ax-image-right-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(var(--spacing, .25rem) * -2);cursor:ne-resize}ax-image-editor-cropper-window .ax-image-bottom-right-handle{right:calc(var(--spacing, .25rem) * -2);bottom:calc(var(--spacing, .25rem) * -2);cursor:se-resize}ax-image-editor-cropper-window .ax-image-right-handle{top:calc(50% - .5rem);right:calc(var(--spacing, .25rem) * -2);cursor:e-resize}ax-image-editor-cropper-window .ax-image-bottom-left-handle{bottom:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:sw-resize}ax-image-editor-cropper-window .ax-image-left-top-handle{top:calc(var(--spacing, .25rem) * -2);left:calc(var(--spacing, .25rem) * -2);cursor:nw-resize}ax-image-editor-cropper-window .ax-image-bottom-handle{right:calc(50% - .5rem);bottom:calc(var(--spacing, .25rem) * -2);cursor:s-resize}ax-image-editor-cropper-window .ax-image-left-handle{top:calc(50% - .5rem);left:calc(var(--spacing, .25rem) * -2);cursor:w-resize}ax-image-editor-cropper-window .ax-image-top-handle{top:calc(var(--spacing, .25rem) * -2);right:calc(50% - .5rem);cursor:n-resize}}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@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-outline-style: solid;--tw-border-style: solid}}}\n/*! tailwindcss v4.1.16 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { showGrid: [{ type: i0.Input, args: [{ isSignal: true, alias: "showGrid", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], cropperWindow: [{ type: i0.ViewChild, args: ['r', { isSignal: true }] }] } });
 
-class AXImageEditorViewComponent extends MXBaseComponent {
-    /** @ignore */
-    resizeWindow() {
-        this.canvasResponsive(this.service.newImage);
-    }
-    /** @ignore */
-    canvasResponsive(image) {
-        const imageWidth = image.width;
-        const imageHeight = image.height;
-        this.originalWidth.set(imageWidth);
-        this.originalHeight.set(imageHeight);
-        if (imageWidth > imageHeight) {
-            this.canvasElem().nativeElement.width = imageWidth;
-            this.canvasElem().nativeElement.height = imageWidth;
-        }
-        else {
-            this.canvasElem().nativeElement.width = imageHeight;
-            this.canvasElem().nativeElement.height = imageHeight;
+const IMAGE_EDITOR_MAX_BUFFER = 4096;
+const IMAGE_EDITOR_EXPORT_QUALITY = 1;
+function loadHtmlImage(src) {
+    return new Promise((resolve, reject) => {
+        const image = new Image();
+        if (!src.startsWith('data:') && !src.startsWith('blob:')) {
+            image.crossOrigin = 'anonymous';
         }
-        requestAnimationFrame(() => {
-            //recalculate width after canvas size change
-            const recalculateWidth = this.canvasElem().nativeElement.getClientRects()[0]?.width;
-            let scale;
-            if (imageWidth > imageHeight) {
-                scale = this.originalWidth() / recalculateWidth;
-            }
-            else {
-                scale = this.originalHeight() / recalculateWidth;
-            }
-            this.scale.set(scale);
-            this.canvasElem().nativeElement.width = recalculateWidth;
-            this.canvasElem().nativeElement.height = recalculateWidth;
-            if (imageWidth > imageHeight) {
-                this.ctx().drawImage(image, 0, recalculateWidth / 2 - this.originalHeight() / scale / 2, recalculateWidth, this.originalHeight() / scale);
-            }
-            else {
-                this.ctx().drawImage(image, recalculateWidth / 2 - this.originalWidth() / scale / 2, 0, this.originalWidth() / scale, recalculateWidth);
+        image.onload = () => resolve(image);
+        image.onerror = () => reject(new Error('Failed to load image'));
+        image.src = src;
+    });
+}
+function canvasToBlob(canvas, type, quality) {
+    return new Promise((resolve, reject) => {
+        canvas.toBlob((blob) => {
+            if (blob) {
+                resolve(blob);
+                return;
             }
-        });
+            reject(new Error(`toBlob returned null for type ${type}`));
+        }, type, quality);
+    });
+}
+async function canvasToEditorBlobs(canvas) {
+    const jpeg = await canvasToBlob(canvas, 'image/jpeg', IMAGE_EDITOR_EXPORT_QUALITY);
+    const extra = await Promise.allSettled([
+        canvasToBlob(canvas, 'image/png'),
+        canvasToBlob(canvas, 'image/webp', IMAGE_EDITOR_EXPORT_QUALITY),
+    ]);
+    const blobs = [jpeg];
+    for (const result of extra) {
+        if (result.status === 'fulfilled') {
+            blobs.push(result.value);
+        }
     }
-    /** @ignore */
+    return blobs;
+}
+function bufferSizeForImage(width, height, max = IMAGE_EDITOR_MAX_BUFFER) {
+    const scale = Math.min(1, max / Math.max(width, height, 1));
+    return {
+        width: Math.max(1, Math.round(width * scale)),
+        height: Math.max(1, Math.round(height * scale)),
+    };
+}
+
+class AXImageEditorViewComponent extends MXBaseComponent {
     constructor() {
         super();
         /**
@@ -442,44 +461,80 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         ...(ngDevMode ? [{ debugName: "isDrawRectangleCreated" }] : /* istanbul ignore next */ []));
         /** @ignore */
         this.parent = inject(AXImageEditorContainerComponent);
-        /** @ignore */
-        this.renderer = inject(Renderer2);
+        this.destroyRef = inject(DestroyRef);
+        this.host = inject((ElementRef));
         /** @ignore */
         this.imageEditorHistory = signal([], /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "imageEditorHistory" }] : /* istanbul ignore next */ []));
         /** @ignore */
-        this.imageEditorHistoryPointer = linkedSignal(() => this.imageEditorHistory().length - 1, /* @ts-ignore */
+        this.imageEditorHistoryPointer = signal(-1, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "imageEditorHistoryPointer" }] : /* istanbul ignore next */ []));
-        this.originalWidth = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "originalWidth" }] : /* istanbul ignore next */ []));
-        this.originalHeight = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "originalHeight" }] : /* istanbul ignore next */ []));
-        this.scale = signal(0, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "scale" }] : /* istanbul ignore next */ []));
+        this.canvasReady = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canvasReady" }] : /* istanbul ignore next */ []));
+        this.drawing = false;
+        this.didDraw = false;
+        this.highlightSnapshot = null;
+        this.highlightPoints = [];
+        this.persistGeneration = 0;
+        this.sourceToken = 0;
         afterNextRender(() => {
-            this.resizeEventListener = this.renderer.listen(window, 'resize', this.resizeWindow.bind(this));
-            //set canvas options
-            this.ctx.set(this.canvasElem().nativeElement.getContext('2d', { willReadFrequently: true }));
-            this.ctx().lineJoin = 'round';
-            this.ctx().lineCap = 'round';
+            const canvas = this.canvasElem()?.nativeElement;
+            if (!canvas) {
+                return;
+            }
+            const ctx = canvas.getContext('2d', { willReadFrequently: true });
+            if (!ctx) {
+                return;
+            }
+            ctx.lineJoin = 'round';
+            ctx.lineCap = 'round';
+            this.ctx.set(ctx);
+            this.canvasReady.set(true);
+            const onResize = () => this.fitCanvasDisplay();
+            window.addEventListener('resize', onResize);
+            this.destroyRef.onDestroy(() => window.removeEventListener('resize', onResize));
         });
         effect(() => {
-            this.setInitialImage(this.src());
+            const src = this.src();
+            const ready = this.canvasReady();
+            if (!ready) {
+                return;
+            }
+            untracked(() => void this.loadSource(src));
         });
         effect(() => {
             if (!this.service.undoPressed()) {
-                this.imageChanged();
+                return;
             }
+            untracked(() => {
+                this.applyUndo();
+                this.service.undoPressed.set(false);
+            });
         });
         effect(() => {
             if (!this.service.redoPressed()) {
-                this.imageChanged();
+                return;
             }
+            untracked(() => {
+                this.applyRedo();
+                this.service.redoPressed.set(false);
+            });
+        });
+        effect(() => {
+            const rotate = this.service.rotate();
+            const ctx = this.ctx();
+            if (!rotate.userInteract || !ctx) {
+                return;
+            }
+            untracked(() => void this.rotateImage());
         });
         effect(() => {
-            if (!this.service.rotate().userInteract || !this.ctx())
+            if (!this.service.isImageLoad()) {
                 return;
-            this.rotateImage();
+            }
+            untracked(() => {
+                requestAnimationFrame(() => this.fitCanvasDisplay());
+            });
         });
         effect(() => {
             const size = this.cropperSize();
@@ -489,167 +544,363 @@ class AXImageEditorViewComponent extends MXBaseComponent {
         });
     }
     /** @ignore */
-    ngOnDestroy() {
-        if (this.resizeEventListener) {
-            this.resizeEventListener();
-        }
-        if (this.imageLoadEventListener) {
-            this.imageLoadEventListener();
-        }
+    resizeWindow() {
+        this.fitCanvasDisplay();
     }
-    setInitialImage(src, replaceHistory = true) {
-        this.service.initialImage = new Image();
-        this.service.initialImage.src = src;
-        this.service.initialImage.crossOrigin = 'anonymous';
-        this.imageLoadEventListener = this.renderer.listen(this.service.initialImage, 'load', () => {
-            this.service.newImage = this.service.initialImage;
-            this.service.isImageLoad.set(true);
-            this.canvasResponsive(this.service.initialImage);
-            if (replaceHistory) {
-                this.imageEditorHistory.set([this.service.initialImage]);
+    /** @ignore */
+    canvasResponsive(image) {
+        this.paintImage(image);
+    }
+    async loadSource(src) {
+        const token = ++this.sourceToken;
+        this.service.loadError.set(false);
+        this.service.isImageLoad.set(false);
+        this.service.imageBlob.set([]);
+        this.service.newImage = null;
+        this.service.initialImage = null;
+        if (!src) {
+            return;
+        }
+        try {
+            const image = await loadHtmlImage(src);
+            if (token !== this.sourceToken) {
+                return;
             }
-            else {
-                this.imageEditorHistory.update((prev) => [...prev, this.service.initialImage]);
+            this.service.initialImage = image;
+            this.service.newImage = image;
+            this.replaceHistory(image);
+            this.paintImage(image);
+            this.service.isImageLoad.set(true);
+        }
+        catch {
+            if (token !== this.sourceToken) {
+                return;
             }
-        });
+            this.service.loadError.set(true);
+            this.service.isImageLoad.set(false);
+        }
     }
-    /** @ignore */
-    imageChanged() {
-        if (this.service.undoPressed() && this.imageEditorHistoryPointer() >= 1) {
-            this.imageEditorHistoryPointer.update((prev) => prev - 1);
-            this.service.newImage = this.imageEditorHistory()[this.imageEditorHistoryPointer()];
-            this.canvasResponsive(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+    paintImage(image) {
+        const canvas = this.canvasElem()?.nativeElement;
+        const ctx = this.ctx();
+        if (!canvas || !ctx || !image) {
+            return;
         }
-        if (this.service.redoPressed() && this.imageEditorHistoryPointer() < this.imageEditorHistory().length - 1) {
-            this.imageEditorHistoryPointer.update((prev) => prev + 1);
-            this.service.newImage = this.imageEditorHistory()[this.imageEditorHistoryPointer()];
-            this.canvasResponsive(this.imageEditorHistory()[this.imageEditorHistoryPointer()]);
+        const buffer = bufferSizeForImage(image.naturalWidth || image.width, image.naturalHeight || image.height);
+        canvas.width = buffer.width;
+        canvas.height = buffer.height;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.globalAlpha = 1;
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
+        this.fitCanvasDisplay();
+    }
+    fitCanvasDisplay() {
+        const canvas = this.canvasElem()?.nativeElement;
+        if (!canvas?.width || !canvas.height) {
+            return;
         }
-        this.service.undoPressed.set(false);
-        this.service.redoPressed.set(false);
+        const parent = this.host.nativeElement;
+        const maxW = Math.max(parent?.clientWidth || 0, 240);
+        const maxH = Math.min(window.innerHeight * 0.55, 560);
+        const scale = Math.min(maxW / canvas.width, maxH / canvas.height, 1);
+        canvas.style.width = `${Math.max(1, Math.round(canvas.width * scale))}px`;
+        canvas.style.height = `${Math.max(1, Math.round(canvas.height * scale))}px`;
+    }
+    replaceHistory(image) {
+        this.imageEditorHistory.set([image]);
+        this.imageEditorHistoryPointer.set(0);
+        this.syncHistoryFlags();
+    }
+    pushHistory(image) {
+        const pointer = this.imageEditorHistoryPointer();
+        const next = this.imageEditorHistory().slice(0, pointer + 1);
+        next.push(image);
+        this.imageEditorHistory.set(next);
+        this.imageEditorHistoryPointer.set(next.length - 1);
+        this.syncHistoryFlags();
+    }
+    syncHistoryFlags() {
+        const pointer = this.imageEditorHistoryPointer();
+        const length = this.imageEditorHistory().length;
+        this.service.canUndo.set(pointer > 0);
+        this.service.canRedo.set(pointer >= 0 && pointer < length - 1);
+    }
+    applyUndo() {
+        const pointer = this.imageEditorHistoryPointer();
+        if (pointer < 1) {
+            this.syncHistoryFlags();
+            return;
+        }
+        const nextPointer = pointer - 1;
+        const image = this.imageEditorHistory()[nextPointer];
+        this.imageEditorHistoryPointer.set(nextPointer);
+        this.service.newImage = image;
+        this.paintImage(image);
+        this.syncHistoryFlags();
+        void this.persistCanvas({ skipHistory: true });
+    }
+    applyRedo() {
+        const history = this.imageEditorHistory();
+        const pointer = this.imageEditorHistoryPointer();
+        if (pointer >= history.length - 1) {
+            this.syncHistoryFlags();
+            return;
+        }
+        const nextPointer = pointer + 1;
+        const image = history[nextPointer];
+        this.imageEditorHistoryPointer.set(nextPointer);
+        this.service.newImage = image;
+        this.paintImage(image);
+        this.syncHistoryFlags();
+        void this.persistCanvas({ skipHistory: true });
+    }
+    canvasPoint(event) {
+        const canvas = this.canvasElem().nativeElement;
+        const rect = canvas.getBoundingClientRect();
+        const width = rect.width || 1;
+        const height = rect.height || 1;
+        return {
+            x: ((event.clientX - rect.left) / width) * canvas.width,
+            y: ((event.clientY - rect.top) / height) * canvas.height,
+        };
+    }
+    isDrawTool() {
+        const tool = this.service.penType();
+        return tool === 'pen' || tool === 'highlight';
     }
     /** @ignore */
     penConfigHandler(penType) {
+        const ctx = this.ctx();
+        if (!ctx) {
+            return;
+        }
+        ctx.lineJoin = 'round';
+        ctx.lineCap = 'round';
         switch (penType) {
             case 'pen':
-                this.ctx().globalAlpha = 1;
-                this.ctx().strokeStyle = this.service.penColor();
-                this.ctx().lineWidth = this.service.penWidth();
+                ctx.globalAlpha = 1;
+                ctx.globalCompositeOperation = 'source-over';
+                ctx.strokeStyle = this.service.penColor();
+                ctx.lineWidth = this.service.penWidth();
                 break;
             case 'highlight':
-                this.ctx().globalAlpha = 0.008;
-                this.ctx().strokeStyle = this.service.highlightColor();
-                this.ctx().lineWidth = this.service.highlightWidth();
+                ctx.globalAlpha = 0.4;
+                ctx.globalCompositeOperation = 'multiply';
+                ctx.strokeStyle = this.service.highlightColor();
+                ctx.lineWidth = this.service.highlightWidth();
                 break;
         }
     }
+    strokeHighlight(points) {
+        const ctx = this.ctx();
+        if (!ctx || points.length === 0) {
+            return;
+        }
+        this.penConfigHandler('highlight');
+        ctx.beginPath();
+        ctx.moveTo(points[0].x, points[0].y);
+        for (let i = 1; i < points.length; i++) {
+            ctx.lineTo(points[i].x, points[i].y);
+        }
+        if (points.length === 1) {
+            ctx.lineTo(points[0].x, points[0].y);
+        }
+        ctx.stroke();
+    }
     /** @ignore */
-    mouseDownHandler(e) {
-        this.isMouseDown.set(true);
-        if (!this.service.penType())
+    historyKeyDown(event) {
+        if (this.parent.disabled) {
             return;
-        this.penConfigHandler(this.service.penType());
-        this.ctx().beginPath();
-        this.ctx().moveTo(e.offsetX, e.offsetY);
-        this.ctx().lineTo(e.offsetX, e.offsetY);
-        this.ctx().stroke();
+        }
+        this.service.handleHistoryShortcut(event);
     }
     /** @ignore */
-    mouseMoveHandler(e) {
-        if (!this.isMouseDown())
+    focusCanvas() {
+        this.canvasElem()?.nativeElement.focus({ preventScroll: true });
+    }
+    /** @ignore */
+    mouseDownHandler(event) {
+        this.focusCanvas();
+        if (!this.isDrawTool() || this.parent.disabled) {
             return;
-        if (!this.service.penType())
+        }
+        const ctx = this.ctx();
+        const canvas = this.canvasElem()?.nativeElement;
+        const penType = this.service.penType();
+        if (!ctx || !canvas || !penType) {
             return;
-        this.ctx().lineTo(e.offsetX, e.offsetY);
-        this.ctx().stroke();
+        }
+        event.preventDefault();
+        canvas.setPointerCapture(event.pointerId);
+        this.isMouseDown.set(true);
+        this.drawing = true;
+        this.didDraw = false;
+        const point = this.canvasPoint(event);
+        this.penConfigHandler(penType);
+        if (penType === 'highlight') {
+            this.highlightSnapshot = ctx.getImageData(0, 0, canvas.width, canvas.height);
+            this.highlightPoints = [point];
+            this.strokeHighlight(this.highlightPoints);
+        }
+        else {
+            ctx.beginPath();
+            ctx.moveTo(point.x, point.y);
+            ctx.lineTo(point.x, point.y);
+            ctx.stroke();
+        }
+        this.didDraw = true;
     }
     /** @ignore */
-    mouseUpHandler() {
-        this.isMouseDown.set(false);
-        this.ctx().closePath();
-        this.saveImageChange();
+    mouseMoveHandler(event) {
+        if (!this.drawing || !this.isDrawTool()) {
+            return;
+        }
+        const ctx = this.ctx();
+        const canvas = this.canvasElem()?.nativeElement;
+        const penType = this.service.penType();
+        if (!ctx || !canvas || !penType) {
+            return;
+        }
+        const point = this.canvasPoint(event);
+        if (penType === 'highlight' && this.highlightSnapshot) {
+            ctx.putImageData(this.highlightSnapshot, 0, 0);
+            this.highlightPoints.push(point);
+            this.strokeHighlight(this.highlightPoints);
+        }
+        else {
+            ctx.lineTo(point.x, point.y);
+            ctx.stroke();
+        }
+        this.didDraw = true;
     }
     /** @ignore */
+    mouseUpHandler(event) {
+        const canvas = this.canvasElem()?.nativeElement;
+        if (event && canvas?.hasPointerCapture(event.pointerId)) {
+            canvas.releasePointerCapture(event.pointerId);
+        }
+        const wasDrawing = this.drawing && this.didDraw;
+        this.drawing = false;
+        this.didDraw = false;
+        this.isMouseDown.set(false);
+        this.highlightSnapshot = null;
+        this.highlightPoints = [];
+        const ctx = this.ctx();
+        if (ctx) {
+            ctx.closePath();
+            ctx.globalAlpha = 1;
+            ctx.globalCompositeOperation = 'source-over';
+        }
+        if (wasDrawing) {
+            void this.persistCanvas();
+        }
+    }
+    /** Applies the current cropper selection. */
     async crop() {
         const cropper = this.cropperWindow();
-        if (this.service.activeToolState() !== 'crop' || !cropper) {
+        const ctx = this.ctx();
+        const canvas = this.canvasElem()?.nativeElement;
+        if (this.service.activeToolState() !== 'crop' || !cropper || !ctx || !canvas) {
             return;
         }
         const cropRect = cropper.getCropperArea();
-        const canvas = this.canvasElem().nativeElement;
         const canvasRect = canvas.getBoundingClientRect();
-        const scaleX = canvas.width / canvasRect.width;
-        const scaleY = canvas.height / canvasRect.height;
-        const dx = (cropRect.x - canvasRect.x) * scaleX;
-        const dy = (cropRect.y - canvasRect.y) * scaleY;
-        const cropWidth = cropRect.width * scaleX;
-        const cropHeight = cropRect.height * scaleY;
-        const imageData = this.ctx().getImageData(Math.round(dx), Math.round(dy), Math.round(cropWidth), Math.round(cropHeight));
-        canvas.width = Math.round(cropWidth);
-        canvas.height = Math.round(cropHeight);
-        this.ctx().putImageData(imageData, 0, 0);
-        const cropImage = this.canvasElem().nativeElement.toDataURL('image/jpeg', 1);
-        await this.saveImageChange();
-        this.setInitialImage(cropImage, false);
+        const scaleX = canvas.width / (canvasRect.width || 1);
+        const scaleY = canvas.height / (canvasRect.height || 1);
+        const dx = Math.max(0, Math.round((cropRect.x - canvasRect.x) * scaleX));
+        const dy = Math.max(0, Math.round((cropRect.y - canvasRect.y) * scaleY));
+        const cropWidth = Math.max(1, Math.round(cropRect.width * scaleX));
+        const cropHeight = Math.max(1, Math.round(cropRect.height * scaleY));
+        const width = Math.min(cropWidth, canvas.width - dx);
+        const height = Math.min(cropHeight, canvas.height - dy);
+        const imageData = ctx.getImageData(dx, dy, width, height);
+        canvas.width = width;
+        canvas.height = height;
+        ctx.putImageData(imageData, 0, 0);
+        this.fitCanvasDisplay();
         this.service.activeToolState.set(null);
+        this.service.penType.set(null);
+        await this.persistCanvas();
     }
-    /** @ignore */
-    rotateImage() {
-        this.ctx().globalAlpha = 1;
-        this.ctx().save();
-        this.ctx().clearRect(0, 0, this.canvasElem().nativeElement.width, this.canvasElem().nativeElement.height);
-        // Calculate scale factor to fit rotated image within canvas
-        const rotationAngle = (this.service.rotate().state * Math.PI) / 180;
-        const cos = Math.abs(Math.cos(rotationAngle));
-        const sin = Math.abs(Math.sin(rotationAngle));
-        const rotatedWidth = this.service.newImage.width * cos + this.service.newImage.height * sin;
-        const rotatedHeight = this.service.newImage.width * sin + this.service.newImage.height * cos;
-        const scaleX = this.canvasElem().nativeElement.width / rotatedWidth;
-        const scaleY = this.canvasElem().nativeElement.height / rotatedHeight;
-        const scale = Math.min(scaleX, scaleY);
-        this.ctx().translate(this.canvasElem().nativeElement.width / 2, this.canvasElem().nativeElement.height / 2);
-        this.ctx().rotate(rotationAngle);
-        this.ctx().scale(scale, scale);
-        this.ctx().drawImage(this.service.newImage, -this.service.newImage.width / 2, -this.service.newImage.height / 2);
-        this.ctx().restore();
-        this.saveImageChange();
-        this.service.rotate.update((prev) => {
-            return { state: prev.state, userInteract: false };
-        });
+    /** Encodes the current canvas into JPEG, PNG, and WebP blobs. */
+    async commitChanges() {
+        await this.persistCanvas();
+        return this.service.imageBlob();
     }
     /** @ignore */
-    async saveImageChange() {
-        const canvas = this.canvasElem().nativeElement;
-        const newImage = new Image();
-        newImage.crossOrigin = 'anonymous';
-        newImage.src = canvas.toDataURL('image/jpeg', 1);
-        this.service.newImage = newImage;
-        this.imageEditorHistory.update((prev) => [...prev, newImage]);
-        const canvasToBlob = (type, quality) => {
-            return new Promise((resolve, reject) => {
-                canvas.toBlob((blob) => {
-                    if (blob) {
-                        resolve(blob);
-                    }
-                    else {
-                        reject(new Error(`toBlob returned null for type ${type}`));
-                    }
-                }, type, quality);
-            });
-        };
-        const blobs = await Promise.all([
-            canvasToBlob('image/jpeg', 1),
-            canvasToBlob('image/png', 1),
-            canvasToBlob('image/webp', 1),
-        ]);
-        this.service.imageBlob.set(blobs);
+    async rotateImage() {
+        const canvas = this.canvasElem()?.nativeElement;
+        const ctx = this.ctx();
+        if (!canvas || !ctx || !canvas.width || !canvas.height) {
+            this.service.rotate.update((prev) => ({ state: prev.state, userInteract: false }));
+            return;
+        }
+        const source = document.createElement('canvas');
+        source.width = canvas.width;
+        source.height = canvas.height;
+        const sourceCtx = source.getContext('2d');
+        if (!sourceCtx) {
+            this.service.rotate.update((prev) => ({ state: prev.state, userInteract: false }));
+            return;
+        }
+        sourceCtx.drawImage(canvas, 0, 0);
+        const degrees = this.service.rotate().state;
+        const radians = (degrees * Math.PI) / 180;
+        const cos = Math.abs(Math.cos(radians));
+        const sin = Math.abs(Math.sin(radians));
+        const rotatedWidth = Math.max(1, Math.round(source.width * cos + source.height * sin));
+        const rotatedHeight = Math.max(1, Math.round(source.width * sin + source.height * cos));
+        canvas.width = rotatedWidth;
+        canvas.height = rotatedHeight;
+        ctx.setTransform(1, 0, 0, 1, 0, 0);
+        ctx.globalAlpha = 1;
+        ctx.globalCompositeOperation = 'source-over';
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        ctx.save();
+        ctx.translate(canvas.width / 2, canvas.height / 2);
+        ctx.rotate(radians);
+        ctx.drawImage(source, -source.width / 2, -source.height / 2);
+        ctx.restore();
+        this.fitCanvasDisplay();
+        await this.persistCanvas();
+        this.service.rotate.update((prev) => ({ state: prev.state, userInteract: false }));
+    }
+    async persistCanvas(options) {
+        const canvas = this.canvasElem()?.nativeElement;
+        if (!canvas?.width || !canvas.height) {
+            return;
+        }
+        const generation = ++this.persistGeneration;
+        try {
+            const blobs = await canvasToEditorBlobs(canvas);
+            if (generation !== this.persistGeneration) {
+                return;
+            }
+            this.service.imageBlob.set(blobs);
+            const dataUrl = canvas.toDataURL('image/jpeg', 1);
+            const image = await loadHtmlImage(dataUrl);
+            if (generation !== this.persistGeneration) {
+                return;
+            }
+            this.service.newImage = image;
+            if (!options?.skipHistory) {
+                this.pushHistory(image);
+            }
+        }
+        catch {
+            if (generation !== this.persistGeneration) {
+                return;
+            }
+        }
     }
     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: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\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-canvas-element{cursor:crosshair;background-color:var(--color-black, #000)}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"] }], 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', encapsulation: ViewEncapsulation.None, imports: [AXImageEditorCropperWindowComponent], providers: [{ provide: AXComponent, useExisting: AXImageEditorViewComponent }], template: "<canvas\n  tabindex=\"1\"\n  (pointerdown)=\"mouseDownHandler($event)\"\n  (pointerup)=\"mouseUpHandler()\"\n  (pointermove)=\"mouseMoveHandler($event)\"\n  class=\"ax-canvas-element\"\n  #canvasElem\n></canvas>\n\n@if (this.service.activeToolState() === 'crop') {\n  <ax-image-editor-cropper-window [showGrid]=\"showGrid()\" #f></ax-image-editor-cropper-window>\n}\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-canvas-element{cursor:crosshair;background-color:var(--color-black, #000)}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 }] }] } });
 
 /**
@@ -658,25 +909,36 @@ 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 */
         ...(ngDevMode ? [{ debugName: "view" }] : /* istanbul ignore next */ []));
-        this.#eff = effect(() => {
-            void this.service.imageBlob();
-            if (this.service.imageBlob().length) {
-                this.commitValue(this.service.imageBlob(), true);
+        this.#syncValue = effect(() => {
+            const blobs = this.service.imageBlob();
+            if (blobs.length) {
+                this.commitValue(blobs, true);
             }
             else {
                 this.commitValue(null);
             }
         }, /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
+        ...(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 });
     }
-    #eff;
     /** Applies the current cropper selection. */
     async crop() {
         const oldValue = this.value;
@@ -686,16 +948,45 @@ class AXImageEditorContainerComponent extends classes((MXInputBaseValueComponent
             this.commitValue(blobs, true);
         }
     }
-    get __hostClass() {
-        if (this.disabled)
-            return 'ax-state-disabled';
-        return '';
+    /** @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);
     }
-    get __hostName() {
-        return this.name;
+    /** Encodes the current canvas into JPEG, PNG, and WebP blobs. */
+    async commitChanges() {
+        const view = this.view();
+        if (!view) {
+            return this.service.imageBlob();
+        }
+        if (this.service.activeToolState() === 'crop') {
+            await view.crop();
+        }
+        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": "this.__hostClass", "attr.name": "this.__hostName" } }, 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 },
@@ -705,11 +996,16 @@ 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: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\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  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\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-loading-spinner-container{display:flex;align-items:center;justify-content: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"] }], 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', encapsulation: ViewEncapsulation.None, outputs: ['onValueChanged'], inputs: ['look', 'disabled'], providers: [
+            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 },
                         { provide: AXFocusableComponent, useExisting: AXImageEditorContainerComponent },
@@ -719,14 +1015,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                             useExisting: forwardRef(() => AXImageEditorContainerComponent),
                             multi: true,
                         },
-                    ], imports: [AXDecoratorModule, AXLoadingSpinnerComponent], template: "@if (service.isImageLoad()) {\n  <div #f class=\"ax-editor-container ax-default {{ look }}\">\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  <div class=\"ax-error-container\"></div>\n} @else {\n  <div class=\"ax-loading-spinner-container\">\n    <ax-loading-spinner [size]=\"16\" color=\"primary\" text=\"Loading Image ...\"></ax-loading-spinner>\n  </div>\n}\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-loading-spinner-container{display:flex;align-items:center;justify-content: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 }] }], __hostClass: [{
-                type: HostBinding,
-                args: ['class']
-            }], __hostName: [{
-                type: HostBinding,
-                args: ['attr.name']
-            }] } });
+                    ], 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) {
@@ -801,7 +1091,7 @@ class AXImageEditorCropComponent extends AXImageEditorToolComponent {
         this.container.crop();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('crop')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'crop'\"\n  [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXImageEditorCropComponent, isStandalone: true, selector: "ax-image-editor-crop", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null } }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.crop' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('crop')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'crop'\"\n  [color]=\"service.activeToolState() === 'crop' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-crop\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropComponent, decorators: [{
             type: Component,
@@ -818,7 +1108,7 @@ class AXImageEditorHighlightComponent extends AXImageEditorToolComponent {
         this.tool = 'highlight';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('highlight')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'highlight'\"\n  [color]=\"service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHighlightComponent, isStandalone: true, selector: "ax-image-editor-highlight", providers: [{ provide: AXComponent, useExisting: AXImageEditorHighlightComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.highlight' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('highlight')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'highlight'\"\n  [color]=\"service.activeToolState() === 'highlight' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-highlight\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHighlightComponent, decorators: [{
             type: Component,
@@ -834,17 +1124,17 @@ class AXImageEditorHistoryComponent {
         this.service = inject(AXImageEditorService);
     }
     UndoHandler() {
-        this.service.undoPressed.set(true);
+        this.service.undo();
     }
     RedoHandler() {
-        this.service.redoPressed.set(true);
+        this.service.redo();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorHistoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorHistoryComponent, isStandalone: true, selector: "ax-image-editor-history", providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], ngImport: i0, template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canUndo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canRedo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { 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: AXImageEditorHistoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'ax-image-editor-history', encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n" }]
+            args: [{ selector: 'ax-image-editor-history', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXButtonComponent, AXDecoratorModule, AXTooltipDirective, AsyncPipe, AXTranslatorPipe, AXTooltipModule], providers: [{ provide: AXComponent, useExisting: AXImageEditorHistoryComponent }], template: "<div class=\"flex\">\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.undo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"UndoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canUndo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-undo\"></ax-icon>\n  </ax-button>\n\n  <ax-button\n    class=\"ax-sm\"\n    [axTooltip]=\"'@acorex:image-editor.redo' | translate | async\"\n    axTooltipPlacement=\"top\"\n    (onClick)=\"RedoHandler()\"\n    look=\"blank\"\n    [disabled]=\"!service.canRedo()\"\n  >\n    <ax-icon class=\"ax-icon ax-icon-redo\"></ax-icon>\n  </ax-button>\n</div>\n" }]
         }] });
 
 /**
@@ -857,7 +1147,7 @@ class AXImageEditorPenComponent extends AXImageEditorToolComponent {
         this.tool = 'pen';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('pen')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'pen'\"\n  [color]=\"service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorPenComponent, isStandalone: true, selector: "ax-image-editor-pen", providers: [{ provide: AXComponent, useExisting: AXImageEditorPenComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:paint.tools.pen' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('pen')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'pen'\"\n  [color]=\"service.activeToolState() === 'pen' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <ax-icon class=\"ax-icon ax-icon-pen\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorPenComponent, decorators: [{
             type: Component,
@@ -874,7 +1164,7 @@ class AXImageEditorRotateComponent extends AXImageEditorToolComponent {
         this.tool = 'rotate';
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('rotate')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'rotate'\"\n  [color]=\"service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: 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: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateComponent, isStandalone: true, selector: "ax-image-editor-rotate", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateComponent }], usesInheritance: true, ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (onClick)=\"service.toggleTool('rotate')\"\n  look=\"blank\"\n  [selected]=\"service.activeToolState() === 'rotate'\"\n  [color]=\"service.activeToolState() === 'rotate' ? 'primary' : 'default'\"\n  class=\"ax-sm\"\n>\n  <i class=\"fa-solid fa-rotate\"></i>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateComponent, decorators: [{
             type: Component,
@@ -905,7 +1195,7 @@ class AXImageEditorCropOptionsComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n  @for (item of aspectRatios(); track item) {\n    <ax-button\n      [selected]=\"service.cropperRatio() === item\"\n      [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n      (click)=\"ratioHandler(item)\"\n      class=\"ax-crop-save ax-sm\"\n      [text]=\"item\"\n    ></ax-button>\n  } @empty {\n    <ax-button\n      [selected]=\"service.cropperRatio() === '1:1'\"\n      [color]=\"service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('1:1')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"1:1\"\n    ></ax-button>\n    <ax-button\n      [selected]=\"service.cropperRatio() === '16:9'\"\n      [color]=\"service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('16:9')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"16:9\"\n    ></ax-button>\n  }\n</div>\n\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n", dependencies: [{ kind: "component", type: 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: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXImageEditorCropOptionsComponent, isStandalone: true, selector: "ax-image-editor-crop-options", inputs: { aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { cropPressed: "cropPressed" }, providers: [{ provide: AXComponent, useExisting: AXImageEditorCropOptionsComponent }], ngImport: i0, template: "<div class=\"ax-image-editor-crop-ratios\">\n  @for (item of aspectRatios(); track item) {\n    <ax-button\n      [selected]=\"service.cropperRatio() === item\"\n      [color]=\"service.cropperRatio() === item ? 'primary' : 'default'\"\n      (click)=\"ratioHandler(item)\"\n      class=\"ax-crop-save ax-sm\"\n      [text]=\"item\"\n    ></ax-button>\n  } @empty {\n    <ax-button\n      [selected]=\"service.cropperRatio() === '1:1'\"\n      [color]=\"service.cropperRatio() === '1:1' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('1:1')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"1:1\"\n    ></ax-button>\n    <ax-button\n      [selected]=\"service.cropperRatio() === '16:9'\"\n      [color]=\"service.cropperRatio() === '16:9' ? 'primary' : 'default'\"\n      (click)=\"ratioHandler('16:9')\"\n      class=\"ax-crop-save ax-sm\"\n      text=\"16:9\"\n    ></ax-button>\n  }\n</div>\n\n<ax-button\n  (click)=\"cropButtonHandler()\"\n  class=\"ax-crop-save ax-sm\"\n  [text]=\"'@acorex:image-editor.crop' | translate | async\"\n  color=\"primary\"\n></ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorCropOptionsComponent, decorators: [{
             type: Component,
@@ -976,7 +1266,7 @@ class AXImageEditorRotateOptionsComponent {
         this.service.rotate.set({ state: -90, userInteract: true });
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateOptionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateOptionsComponent, isStandalone: true, selector: "ax-image-editor-rotate-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateOptionsComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: 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: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: AXImageEditorRotateOptionsComponent, isStandalone: true, selector: "ax-image-editor-rotate-options", providers: [{ provide: AXComponent, useExisting: AXImageEditorRotateOptionsComponent }], ngImport: i0, template: "<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-left' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateLeftHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-left\"></ax-icon>\n</ax-button>\n\n<ax-button\n  [axTooltip]=\"'@acorex:image-editor.rotate-right' | translate | async\"\n  axTooltipPlacement=\"top\"\n  (click)=\"rotateRightHandler()\"\n  look=\"blank\"\n>\n  <ax-icon class=\"ax-icon ax-icon-arrow-turn-right\"></ax-icon>\n</ax-button>\n", dependencies: [{ kind: "component", type: AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorRotateOptionsComponent, decorators: [{
             type: Component,
@@ -1061,7 +1351,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                     ], providers: [{ provide: AXComponent, useExisting: AXImageEditorToolSelectorComponent }], template: "<ax-image-editor-tools-bar>\n  <ax-image-editor-pen></ax-image-editor-pen>\n  <ax-image-editor-highlight></ax-image-editor-highlight>\n  <ax-image-editor-crop [aspectRatio]=\"aspectRatio()\"></ax-image-editor-crop>\n  <ax-image-editor-rotate></ax-image-editor-rotate>\n</ax-image-editor-tools-bar>\n" }]
         }], propDecorators: { aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }] } });
 
-const COMPONENT = [
+const PUBLIC_COMPONENTS = [
     AXImageEditorViewComponent,
     AXImageEditorContainerComponent,
     AXImageEditorCropComponent,
@@ -1073,28 +1363,9 @@ const COMPONENT = [
     AXImageEditorRotateComponent,
     AXImageEditorCropperWindowComponent,
 ];
-const MODULES = [
-    AXButtonModule,
-    FormsModule,
-    AXRangeSliderModule,
-    AXSelectBoxModule,
-    AXColorBoxModule,
-    AXPopoverModule,
-    AXDecoratorModule,
-    AXLoadingModule,
-    AXDialogModule,
-];
 class AXImageEditorModule {
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, imports: [AXButtonModule,
-            FormsModule,
-            AXRangeSliderModule,
-            AXSelectBoxModule,
-            AXColorBoxModule,
-            AXPopoverModule,
-            AXDecoratorModule,
-            AXLoadingModule,
-            AXDialogModule, AXImageEditorViewComponent,
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, imports: [AXImageEditorViewComponent,
             AXImageEditorContainerComponent,
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,
@@ -1113,7 +1384,7 @@ class AXImageEditorModule {
             AXImageEditorHighlightComponent,
             AXImageEditorRotateComponent,
             AXImageEditorCropperWindowComponent] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, imports: [MODULES, AXImageEditorContainerComponent,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, imports: [AXImageEditorContainerComponent,
             AXImageEditorCropComponent,
             AXImageEditorHistoryComponent,
             AXImageEditorToolSelectorComponent,
@@ -1125,9 +1396,8 @@ class AXImageEditorModule {
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXImageEditorModule, decorators: [{
             type: NgModule,
             args: [{
-                    imports: [...MODULES, ...COMPONENT],
-                    exports: [...COMPONENT],
-                    providers: [],
+                    imports: [...PUBLIC_COMPONENTS],
+                    exports: [...PUBLIC_COMPONENTS],
                 }]
         }] });