ngx-image-cropper 8.0.0 → 8.1.0

package/fesm2022/ngx-image-cropper.mjs

@@ -1,63 +1,434 @@
 import * as i0 from '@angular/core';
-import { Injectable, EventEmitter, isDevMode, Component, ChangeDetectionStrategy, Optional, Inject, ViewChild, Input, HostBinding, Output, HostListener } from '@angular/core';
-import * as i4 from '@angular/platform-browser';
-import { HAMMER_LOADER } from '@angular/platform-browser';
+import { signal, EventEmitter, Component, ChangeDetectionStrategy, ViewChild, Input, HostBinding, Output, HostListener } from '@angular/core';
 import { takeUntil, first } from 'rxjs/operators';
-import { merge, fromEvent } from 'rxjs';
+import { Subject, merge, fromEvent } from 'rxjs';
 import { NgIf } from '@angular/common';
+import * as i1 from '@angular/platform-browser';
 
-class CropperSettings {
+function checkCropperPosition(cropperPosition, cropperState, maintainSize) {
+    cropperPosition = checkCropperSizeRestriction(cropperPosition, cropperState);
+    return checkCropperWithinMaxSizeBounds(cropperPosition, cropperState, maintainSize);
+}
+function checkCropperSizeRestriction(cropperPosition, cropperState) {
+    let cropperWidth = cropperPosition.x2 - cropperPosition.x1;
+    let cropperHeight = cropperPosition.y2 - cropperPosition.y1;
+    const centerX = cropperPosition.x1 + cropperWidth / 2;
+    const centerY = cropperPosition.y1 + cropperHeight / 2;
+    if (cropperState.options.cropperStaticHeight && cropperState.options.cropperStaticWidth) {
+        cropperWidth = cropperState.maxSize.width > cropperState.options.cropperStaticWidth
+            ? cropperState.options.cropperStaticWidth
+            : cropperState.maxSize.width;
+        cropperHeight = cropperState.maxSize.height > cropperState.options.cropperStaticHeight
+            ? cropperState.options.cropperStaticHeight
+            : cropperState.maxSize.height;
+    }
+    else {
+        cropperWidth = Math.max(cropperState.cropperScaledMinWidth, Math.min(cropperWidth, cropperState.cropperScaledMaxWidth, cropperState.maxSize.width));
+        cropperHeight = Math.max(cropperState.cropperScaledMinHeight, Math.min(cropperHeight, cropperState.cropperScaledMaxHeight, cropperState.maxSize.height));
+        if (cropperState.options.maintainAspectRatio) {
+            if (cropperState.maxSize.width / cropperState.options.aspectRatio < cropperState.maxSize.height) {
+                cropperHeight = cropperWidth / cropperState.options.aspectRatio;
+            }
+            else {
+                cropperWidth = cropperHeight * cropperState.options.aspectRatio;
+            }
+        }
+    }
+    const x1 = centerX - cropperWidth / 2;
+    const x2 = x1 + cropperWidth;
+    const y1 = centerY - cropperHeight / 2;
+    const y2 = y1 + cropperHeight;
+    return { x1, x2, y1, y2 };
+}
+function checkCropperWithinMaxSizeBounds(position, cropperState, maintainSize = false) {
+    if (position.x1 < 0) {
+        position = {
+            ...position,
+            x1: 0,
+            x2: position.x2 - (maintainSize ? position.x1 : 0)
+        };
+    }
+    if (position.y1 < 0) {
+        position = {
+            ...position,
+            y2: position.y2 - (maintainSize ? position.y1 : 0),
+            y1: 0
+        };
+    }
+    if (position.x2 > cropperState.maxSize.width) {
+        position = {
+            ...position,
+            x1: position.x1 - (maintainSize ? (position.x2 - cropperState.maxSize.width) : 0),
+            x2: cropperState.maxSize.width
+        };
+    }
+    if (position.y2 > cropperState.maxSize.height) {
+        position = {
+            ...position,
+            y1: position.y1 - (maintainSize ? (position.y2 - cropperState.maxSize.height) : 0),
+            y2: cropperState.maxSize.height
+        };
+    }
+    return position;
+}
+function moveCropper(event, moveStart) {
+    const diffX = getClientX(event) - moveStart.clientX;
+    const diffY = getClientY(event) - moveStart.clientY;
+    return {
+        x1: moveStart.cropper.x1 + diffX,
+        y1: moveStart.cropper.y1 + diffY,
+        x2: moveStart.cropper.x2 + diffX,
+        y2: moveStart.cropper.y2 + diffY
+    };
+}
+function resizeCropper(event, moveStart, cropperState) {
+    const cropperPosition = { ...cropperState.cropper };
+    const moveX = getClientX(event) - moveStart.clientX;
+    const moveY = getClientY(event) - moveStart.clientY;
+    switch (moveStart.position) {
+        case 'left':
+            cropperPosition.x1 = Math.min(Math.max(moveStart.cropper.x1 + moveX, cropperPosition.x2 - cropperState.cropperScaledMaxWidth), cropperPosition.x2 - cropperState.cropperScaledMinWidth);
+            break;
+        case 'topleft':
+            cropperPosition.x1 = Math.min(Math.max(moveStart.cropper.x1 + moveX, cropperPosition.x2 - cropperState.cropperScaledMaxWidth), cropperPosition.x2 - cropperState.cropperScaledMinWidth);
+            cropperPosition.y1 = Math.min(Math.max(moveStart.cropper.y1 + moveY, cropperPosition.y2 - cropperState.cropperScaledMaxHeight), cropperPosition.y2 - cropperState.cropperScaledMinHeight);
+            break;
+        case 'top':
+            cropperPosition.y1 = Math.min(Math.max(moveStart.cropper.y1 + moveY, cropperPosition.y2 - cropperState.cropperScaledMaxHeight), cropperPosition.y2 - cropperState.cropperScaledMinHeight);
+            break;
+        case 'topright':
+            cropperPosition.x2 = Math.max(Math.min(moveStart.cropper.x2 + moveX, cropperPosition.x1 + cropperState.cropperScaledMaxWidth), cropperPosition.x1 + cropperState.cropperScaledMinWidth);
+            cropperPosition.y1 = Math.min(Math.max(moveStart.cropper.y1 + moveY, cropperPosition.y2 - cropperState.cropperScaledMaxHeight), cropperPosition.y2 - cropperState.cropperScaledMinHeight);
+            break;
+        case 'right':
+            cropperPosition.x2 = Math.max(Math.min(moveStart.cropper.x2 + moveX, cropperPosition.x1 + cropperState.cropperScaledMaxWidth), cropperPosition.x1 + cropperState.cropperScaledMinWidth);
+            break;
+        case 'bottomright':
+            cropperPosition.x2 = Math.max(Math.min(moveStart.cropper.x2 + moveX, cropperPosition.x1 + cropperState.cropperScaledMaxWidth), cropperPosition.x1 + cropperState.cropperScaledMinWidth);
+            cropperPosition.y2 = Math.max(Math.min(moveStart.cropper.y2 + moveY, cropperPosition.y1 + cropperState.cropperScaledMaxHeight), cropperPosition.y1 + cropperState.cropperScaledMinHeight);
+            break;
+        case 'bottom':
+            cropperPosition.y2 = Math.max(Math.min(moveStart.cropper.y2 + moveY, cropperPosition.y1 + cropperState.cropperScaledMaxHeight), cropperPosition.y1 + cropperState.cropperScaledMinHeight);
+            break;
+        case 'bottomleft':
+            cropperPosition.x1 = Math.min(Math.max(moveStart.cropper.x1 + moveX, cropperPosition.x2 - cropperState.cropperScaledMaxWidth), cropperPosition.x2 - cropperState.cropperScaledMinWidth);
+            cropperPosition.y2 = Math.max(Math.min(moveStart.cropper.y2 + moveY, cropperPosition.y1 + cropperState.cropperScaledMaxHeight), cropperPosition.y1 + cropperState.cropperScaledMinHeight);
+            break;
+        case 'center':
+            const scale = 'scale' in event ? event.scale : 1;
+            const newWidth = Math.min(Math.max(cropperState.cropperScaledMinWidth, (Math.abs(moveStart.cropper.x2 - moveStart.cropper.x1)) * scale), cropperState.cropperScaledMaxWidth);
+            const newHeight = Math.min(Math.max(cropperState.cropperScaledMinHeight, (Math.abs(moveStart.cropper.y2 - moveStart.cropper.y1)) * scale), cropperState.cropperScaledMaxHeight);
+            cropperPosition.x1 = moveStart.clientX - newWidth / 2;
+            cropperPosition.x2 = moveStart.clientX + newWidth / 2;
+            cropperPosition.y1 = moveStart.clientY - newHeight / 2;
+            cropperPosition.y2 = moveStart.clientY + newHeight / 2;
+            if (cropperPosition.x1 < 0) {
+                cropperPosition.x2 -= cropperPosition.x1;
+                cropperPosition.x1 = 0;
+            }
+            else if (cropperPosition.x2 > cropperState.maxSize.width) {
+                cropperPosition.x1 -= (cropperPosition.x2 - cropperState.maxSize.width);
+                cropperPosition.x2 = cropperState.maxSize.width;
+            }
+            if (cropperPosition.y1 < 0) {
+                cropperPosition.y2 -= cropperPosition.y1;
+                cropperPosition.y1 = 0;
+            }
+            else if (cropperPosition.y2 > cropperState.maxSize.height) {
+                cropperPosition.y1 -= (cropperPosition.y2 - cropperState.maxSize.height);
+                cropperPosition.y2 = cropperState.maxSize.height;
+            }
+            break;
+    }
+    if (cropperState.options.maintainAspectRatio) {
+        return checkAspectRatio(moveStart.position, cropperPosition, cropperState);
+    }
+    else {
+        return cropperPosition;
+    }
+}
+function checkAspectRatio(position, cropperPosition, cropperState) {
+    cropperPosition = { ...cropperPosition };
+    let overflowX = 0;
+    let overflowY = 0;
+    switch (position) {
+        case 'top':
+            cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
+            overflowY = Math.max(0 - cropperPosition.y1, 0);
+            if (overflowX > 0 || overflowY > 0) {
+                cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
+                cropperPosition.y1 += (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
+            }
+            break;
+        case 'bottom':
+            cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
+            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            if (overflowX > 0 || overflowY > 0) {
+                cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
+                cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : (overflowX / cropperState.options.aspectRatio);
+            }
+            break;
+        case 'topleft':
+            cropperPosition.y1 = cropperPosition.y2 - (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
+            overflowX = Math.max(0 - cropperPosition.x1, 0);
+            overflowY = Math.max(0 - cropperPosition.y1, 0);
+            if (overflowX > 0 || overflowY > 0) {
+                cropperPosition.x1 += (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
+                cropperPosition.y1 += (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
+            }
+            break;
+        case 'topright':
+            cropperPosition.y1 = cropperPosition.y2 - (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
+            overflowY = Math.max(0 - cropperPosition.y1, 0);
+            if (overflowX > 0 || overflowY > 0) {
+                cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
+                cropperPosition.y1 += (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
+            }
+            break;
+        case 'right':
+        case 'bottomright':
+            cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
+            overflowX = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
+            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            if (overflowX > 0 || overflowY > 0) {
+                cropperPosition.x2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
+                cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
+            }
+            break;
+        case 'left':
+        case 'bottomleft':
+            cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
+            overflowX = Math.max(0 - cropperPosition.x1, 0);
+            overflowY = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            if (overflowX > 0 || overflowY > 0) {
+                cropperPosition.x1 += (overflowY * cropperState.options.aspectRatio) > overflowX ? (overflowY * cropperState.options.aspectRatio) : overflowX;
+                cropperPosition.y2 -= (overflowY * cropperState.options.aspectRatio) > overflowX ? overflowY : overflowX / cropperState.options.aspectRatio;
+            }
+            break;
+        case 'center':
+            cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * cropperState.options.aspectRatio;
+            cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / cropperState.options.aspectRatio;
+            const overflowX1 = Math.max(0 - cropperPosition.x1, 0);
+            const overflowX2 = Math.max(cropperPosition.x2 - cropperState.maxSize.width, 0);
+            const overflowY1 = Math.max(cropperPosition.y2 - cropperState.maxSize.height, 0);
+            const overflowY2 = Math.max(0 - cropperPosition.y1, 0);
+            if (overflowX1 > 0 || overflowX2 > 0 || overflowY1 > 0 || overflowY2 > 0) {
+                cropperPosition.x1 += (overflowY1 * cropperState.options.aspectRatio) > overflowX1 ? (overflowY1 * cropperState.options.aspectRatio) : overflowX1;
+                cropperPosition.x2 -= (overflowY2 * cropperState.options.aspectRatio) > overflowX2 ? (overflowY2 * cropperState.options.aspectRatio) : overflowX2;
+                cropperPosition.y1 += (overflowY2 * cropperState.options.aspectRatio) > overflowX2 ? overflowY2 : overflowX2 / cropperState.options.aspectRatio;
+                cropperPosition.y2 -= (overflowY1 * cropperState.options.aspectRatio) > overflowX1 ? overflowY1 : overflowX1 / cropperState.options.aspectRatio;
+            }
+            break;
+    }
+    return cropperPosition;
+}
+function getClientX(event) {
+    if ('touches' in event && event.touches[0]) {
+        return event.touches[0].clientX;
+    }
+    else if ('clientX' in event) {
+        return event.clientX;
+    }
+    return 0;
+}
+function getClientY(event) {
+    if ('touches' in event && event.touches[0]) {
+        return event.touches[0].clientY;
+    }
+    else if ('clientX' in event) {
+        return event.clientY;
+    }
+    return 0;
+}
+
+class CropperState {
     constructor() {
-        // From options
-        this.format = 'png';
-        this.output = 'blob';
-        this.maintainAspectRatio = true;
+        this.options = {
+            format: 'png',
+            output: 'blob',
+            autoCrop: true,
+            maintainAspectRatio: true,
+            aspectRatio: 1,
+            resetCropOnAspectRatioChange: true,
+            resizeToWidth: 0,
+            resizeToHeight: 0,
+            cropperMinWidth: 0,
+            cropperMinHeight: 0,
+            cropperMaxHeight: 0,
+            cropperMaxWidth: 0,
+            cropperStaticWidth: 0,
+            cropperStaticHeight: 0,
+            canvasRotation: 0,
+            roundCropper: false,
+            onlyScaleDown: false,
+            imageQuality: 92,
+            backgroundColor: null,
+            containWithinAspectRatio: false,
+            hideResizeSquares: false,
+            alignImage: 'center',
+            cropperFrameAriaLabel: undefined,
+            checkImageType: true
+        };
+        this.cropper = { x1: 0, x2: 0, y1: 0, y2: 0 };
         this.transform = {};
-        this.aspectRatio = 1;
-        this.resetCropOnAspectRatioChange = true;
-        this.resizeToWidth = 0;
-        this.resizeToHeight = 0;
-        this.cropperMinWidth = 0;
-        this.cropperMinHeight = 0;
-        this.cropperMaxHeight = 0;
-        this.cropperMaxWidth = 0;
-        this.cropperStaticWidth = 0;
-        this.cropperStaticHeight = 0;
-        this.canvasRotation = 0;
-        this.initialStepSize = 3;
-        this.roundCropper = false;
-        this.onlyScaleDown = false;
-        this.imageQuality = 92;
-        this.autoCrop = true;
-        this.backgroundColor = null;
-        this.containWithinAspectRatio = false;
-        this.hideResizeSquares = false;
-        this.alignImage = 'center';
-        this.cropperFrameAriaLabel = 'Crop photo';
         // Internal
         this.cropperScaledMinWidth = 20;
         this.cropperScaledMinHeight = 20;
         this.cropperScaledMaxWidth = 20;
         this.cropperScaledMaxHeight = 20;
-        this.stepSize = this.initialStepSize;
-    }
-    setOptions(options) {
-        Object.keys(options)
-            .filter((k) => k in this)
-            .forEach((k) => this[k] = options[k]);
-        this.validateOptions();
+        this.stepSize = 3;
     }
     setOptionsFromChanges(changes) {
-        Object.keys(changes)
-            .filter((k) => k in this)
-            .forEach((k) => this[k] = changes[k].currentValue);
+        if (changes['options']?.currentValue) {
+            this.setOptions(changes['options'].currentValue);
+        }
+        const options = Object.entries(changes)
+            .filter(([key]) => key in this.options)
+            .reduce((acc, [key, change]) => ({
+            ...acc,
+            [key]: change.currentValue
+        }), {});
+        if (Object.keys(options).length > 0) {
+            this.setOptions(options);
+        }
+    }
+    setOptions(options) {
+        this.options = {
+            ...this.options,
+            ...(options || {})
+        };
         this.validateOptions();
+        if (!this.loadedImage?.transformed.image.complete || !this.maxSize) {
+            return;
+        }
+        let positionPossiblyChanged = false;
+        if ((this.options.maintainAspectRatio && options['aspectRatio']) || options['maintainAspectRatio']) {
+            this.setCropperScaledMinSize();
+            this.setCropperScaledMaxSize();
+            if (this.options.maintainAspectRatio && (this.options.resetCropOnAspectRatioChange || !this.aspectRatioIsCorrect())) {
+                this.cropper = this.maxSizeCropperPosition();
+                positionPossiblyChanged = true;
+            }
+        }
+        else {
+            if (options['cropperMinWidth'] || options['cropperMinHeight']) {
+                this.setCropperScaledMinSize();
+                positionPossiblyChanged = true;
+            }
+            if (options['cropperMaxWidth'] || options['cropperMaxHeight']) {
+                this.setCropperScaledMaxSize();
+                positionPossiblyChanged = true;
+            }
+            if (options['cropperStaticWidth'] || options['cropperStaticHeight']) {
+                positionPossiblyChanged = true;
+            }
+        }
+        if (positionPossiblyChanged) {
+            this.cropper = checkCropperPosition(this.cropper, this, false);
+        }
     }
     validateOptions() {
-        if (this.maintainAspectRatio && !this.aspectRatio) {
+        if (this.options.maintainAspectRatio && !this.options.aspectRatio) {
             throw new Error('`aspectRatio` should > 0 when `maintainAspectRatio` is enabled');
         }
     }
+    setMaxSize(width, height) {
+        this.maxSize = { width, height };
+        this.setCropperScaledMinSize();
+        this.setCropperScaledMaxSize();
+    }
+    setCropperScaledMinSize() {
+        if (this.loadedImage?.transformed.size) {
+            this.setCropperScaledMinWidth();
+            this.setCropperScaledMinHeight();
+        }
+        else {
+            this.cropperScaledMinWidth = 20;
+            this.cropperScaledMinHeight = 20;
+        }
+    }
+    setCropperScaledMinWidth() {
+        this.cropperScaledMinWidth = this.options.cropperMinWidth > 0
+            ? Math.max(20, this.options.cropperMinWidth / this.loadedImage.transformed.size.width * this.maxSize.width)
+            : 20;
+    }
+    setCropperScaledMinHeight() {
+        if (this.options.maintainAspectRatio) {
+            this.cropperScaledMinHeight = Math.max(20, this.cropperScaledMinWidth / this.options.aspectRatio);
+        }
+        else if (this.options.cropperMinHeight > 0) {
+            this.cropperScaledMinHeight = Math.max(20, this.options.cropperMinHeight / this.loadedImage.transformed.size.height * this.maxSize.height);
+        }
+        else {
+            this.cropperScaledMinHeight = 20;
+        }
+    }
+    setCropperScaledMaxSize() {
+        if (this.loadedImage?.transformed.size) {
+            const ratio = this.loadedImage.transformed.size.width / this.maxSize.width;
+            this.cropperScaledMaxWidth = this.options.cropperMaxWidth > 20 ? this.options.cropperMaxWidth / ratio : this.maxSize.width;
+            this.cropperScaledMaxHeight = this.options.cropperMaxHeight > 20 ? this.options.cropperMaxHeight / ratio : this.maxSize.height;
+            if (this.options.maintainAspectRatio) {
+                if (this.cropperScaledMaxWidth > this.cropperScaledMaxHeight * this.options.aspectRatio) {
+                    this.cropperScaledMaxWidth = this.cropperScaledMaxHeight * this.options.aspectRatio;
+                }
+                else if (this.cropperScaledMaxWidth < this.cropperScaledMaxHeight * this.options.aspectRatio) {
+                    this.cropperScaledMaxHeight = this.cropperScaledMaxWidth / this.options.aspectRatio;
+                }
+            }
+        }
+        else {
+            this.cropperScaledMaxWidth = this.maxSize.width;
+            this.cropperScaledMaxHeight = this.maxSize.height;
+        }
+    }
+    equalsCropperPosition(cropper) {
+        return this.cropper == null && cropper == null
+            || this.cropper != null && cropper != null
+                && this.cropper.x1.toFixed(3) === cropper.x1.toFixed(3)
+                && this.cropper.y1.toFixed(3) === cropper.y1.toFixed(3)
+                && this.cropper.x2.toFixed(3) === cropper.x2.toFixed(3)
+                && this.cropper.y2.toFixed(3) === cropper.y2.toFixed(3);
+    }
+    equalsTransformTranslate(transform) {
+        return (this.transform.translateH ?? 0) === (transform.translateH ?? 0)
+            && (this.transform.translateV ?? 0) === (transform.translateV ?? 0);
+    }
+    equalsTransform(transform) {
+        return this.equalsTransformTranslate(transform)
+            && (this.transform.scale ?? 1) === (transform.scale ?? 1)
+            && (this.transform.rotate ?? 0) === (transform.rotate ?? 0)
+            && (this.transform.flipH ?? false) === (transform.flipH ?? false)
+            && (this.transform.flipV ?? false) === (transform.flipV ?? false);
+    }
+    aspectRatioIsCorrect() {
+        const currentCropAspectRatio = (this.cropper.x2 - this.cropper.x1) / (this.cropper.y2 - this.cropper.y1);
+        return currentCropAspectRatio === this.options.aspectRatio;
+    }
+    resizeCropperPosition(oldMaxSize) {
+        if (!this.cropper) {
+            return;
+        }
+        if (oldMaxSize.width !== this.maxSize.width || oldMaxSize.height !== this.maxSize.height) {
+            this.cropper = {
+                x1: this.cropper.x1 * this.maxSize.width / oldMaxSize.width,
+                x2: this.cropper.x2 * this.maxSize.width / oldMaxSize.width,
+                y1: this.cropper.y1 * this.maxSize.height / oldMaxSize.height,
+                y2: this.cropper.y2 * this.maxSize.height / oldMaxSize.height
+            };
+        }
+    }
+    maxSizeCropperPosition() {
+        return {
+            x1: 0,
+            y1: 0,
+            x2: this.maxSize.width,
+            y2: this.maxSize.height
+        };
+    }
 }
 
 var MoveTypes;
@@ -68,46 +439,6 @@ var MoveTypes;
     MoveTypes["Pinch"] = "pinch";
 })(MoveTypes || (MoveTypes = {}));
 
-function getPositionForKey(key) {
-    switch (key) {
-        case 'ArrowUp':
-            return 'top';
-        case 'ArrowRight':
-            return 'right';
-        case 'ArrowDown':
-            return 'bottom';
-        case 'ArrowLeft':
-        default:
-            return 'left';
-    }
-}
-function getInvertedPositionForKey(key) {
-    switch (key) {
-        case 'ArrowUp':
-            return 'bottom';
-        case 'ArrowRight':
-            return 'left';
-        case 'ArrowDown':
-            return 'top';
-        case 'ArrowLeft':
-        default:
-            return 'right';
-    }
-}
-function getEventForKey(key, stepSize) {
-    switch (key) {
-        case 'ArrowUp':
-            return { clientX: 0, clientY: stepSize * -1 };
-        case 'ArrowRight':
-            return { clientX: stepSize, clientY: 0 };
-        case 'ArrowDown':
-            return { clientX: 0, clientY: stepSize };
-        case 'ArrowLeft':
-        default:
-            return { clientX: stepSize * -1, clientY: 0 };
-    }
-}
-
 /*
  * Hermite resize - fast image resize/resample using Hermite filter.
  * https://github.com/viliusle/Hermite-resize
@@ -188,8 +519,8 @@ function percentage(percent, totalValue) {
 }
 
 class CropService {
-    crop(loadedImage, cropper, settings, output, maxSize) {
-        const imagePosition = this.getImagePosition(loadedImage, cropper, settings, maxSize);
+    crop(cropperState, output) {
+        const imagePosition = this.getImagePosition(cropperState);
         const width = imagePosition.x2 - imagePosition.x1;
         const height = imagePosition.y2 - imagePosition.y1;
         const cropCanvas = document.createElement('canvas');
@@ -199,344 +530,130 @@ class CropService {
         if (!ctx) {
             return null;
         }
-        if (settings.backgroundColor != null) {
-            ctx.fillStyle = settings.backgroundColor;
+        if (cropperState.options.backgroundColor != null) {
+            ctx.fillStyle = cropperState.options.backgroundColor;
             ctx.fillRect(0, 0, width, height);
         }
-        const scaleX = (settings.transform.scale || 1) * (settings.transform.flipH ? -1 : 1);
-        const scaleY = (settings.transform.scale || 1) * (settings.transform.flipV ? -1 : 1);
-        const { translateH, translateV } = this.getCanvasTranslate(loadedImage, settings, maxSize);
-        const transformedImage = loadedImage.transformed;
+        const scaleX = (cropperState.transform.scale || 1) * (cropperState.transform.flipH ? -1 : 1);
+        const scaleY = (cropperState.transform.scale || 1) * (cropperState.transform.flipV ? -1 : 1);
+        const { translateH, translateV } = this.getCanvasTranslate(cropperState);
+        const transformedImage = cropperState.loadedImage.transformed;
         ctx.setTransform(scaleX, 0, 0, scaleY, transformedImage.size.width / 2 + translateH, transformedImage.size.height / 2 + translateV);
         ctx.translate(-imagePosition.x1 / scaleX, -imagePosition.y1 / scaleY);
-        ctx.rotate((settings.transform.rotate || 0) * Math.PI / 180);
+        ctx.rotate((cropperState.transform.rotate || 0) * Math.PI / 180);
         ctx.drawImage(transformedImage.image, -transformedImage.size.width / 2, -transformedImage.size.height / 2);
         const result = {
             width, height,
             imagePosition,
-            cropperPosition: { ...cropper }
+            cropperPosition: { ...cropperState.cropper }
         };
-        if (settings.containWithinAspectRatio) {
-            result.offsetImagePosition = this.getOffsetImagePosition(loadedImage, cropper, settings, maxSize);
+        if (cropperState.options.containWithinAspectRatio) {
+            result.offsetImagePosition = this.getOffsetImagePosition(cropperState);
         }
-        const resizeRatio = this.getResizeRatio(width, height, settings);
+        const resizeRatio = this.getResizeRatio(width, height, cropperState.options);
         if (resizeRatio !== 1) {
             result.width = Math.round(width * resizeRatio);
-            result.height = settings.maintainAspectRatio
-                ? Math.round(result.width / settings.aspectRatio)
+            result.height = cropperState.options.maintainAspectRatio
+                ? Math.round(result.width / cropperState.options.aspectRatio)
                 : Math.round(height * resizeRatio);
             resizeCanvas(cropCanvas, result.width, result.height);
         }
         if (output === 'blob') {
-            return this.cropToBlob(result, cropCanvas, settings);
+            return this.cropToBlob(result, cropCanvas, cropperState);
         }
         else {
-            result.base64 = cropCanvas.toDataURL('image/' + settings.format, this.getQuality(settings));
+            result.base64 = cropCanvas.toDataURL('image/' + cropperState.options.format, this.getQuality(cropperState.options));
             return result;
         }
     }
-    async cropToBlob(output, cropCanvas, settings) {
-        output.blob = await new Promise(resolve => cropCanvas.toBlob(resolve, 'image/' + settings.format, this.getQuality(settings)));
+    async cropToBlob(output, cropCanvas, cropperState) {
+        output.blob = await new Promise(resolve => cropCanvas.toBlob(resolve, 'image/' + cropperState.options.format, this.getQuality(cropperState.options)));
         if (output.blob) {
             output.objectUrl = URL.createObjectURL(output.blob);
         }
         return output;
     }
-    getCanvasTranslate(loadedImage, settings, maxSize) {
-        if (settings.transform.translateUnit === 'px') {
-            const ratio = this.getRatio(loadedImage, maxSize);
+    getCanvasTranslate(cropperState) {
+        if (cropperState.transform.translateUnit === 'px') {
+            const ratio = this.getRatio(cropperState);
             return {
-                translateH: (settings.transform.translateH || 0) * ratio,
-                translateV: (settings.transform.translateV || 0) * ratio
+                translateH: (cropperState.transform.translateH || 0) * ratio,
+                translateV: (cropperState.transform.translateV || 0) * ratio
             };
         }
         else {
             return {
-                translateH: settings.transform.translateH ? percentage(settings.transform.translateH, loadedImage.transformed.size.width) : 0,
-                translateV: settings.transform.translateV ? percentage(settings.transform.translateV, loadedImage.transformed.size.height) : 0
+                translateH: cropperState.transform.translateH ? percentage(cropperState.transform.translateH, cropperState.loadedImage.transformed.size.width) : 0,
+                translateV: cropperState.transform.translateV ? percentage(cropperState.transform.translateV, cropperState.loadedImage.transformed.size.height) : 0
             };
         }
     }
-    getRatio(loadedImage, maxSize) {
-        return loadedImage.transformed.size.width / maxSize.width;
+    getRatio(cropperState) {
+        return cropperState.loadedImage.transformed.size.width / cropperState.maxSize.width;
     }
-    getImagePosition(loadedImage, cropper, settings, maxSize) {
-        const ratio = this.getRatio(loadedImage, maxSize);
+    getImagePosition(cropperState) {
+        const ratio = this.getRatio(cropperState);
         const out = {
-            x1: Math.round(cropper.x1 * ratio),
-            y1: Math.round(cropper.y1 * ratio),
-            x2: Math.round(cropper.x2 * ratio),
-            y2: Math.round(cropper.y2 * ratio)
+            x1: Math.round(cropperState.cropper.x1 * ratio),
+            y1: Math.round(cropperState.cropper.y1 * ratio),
+            x2: Math.round(cropperState.cropper.x2 * ratio),
+            y2: Math.round(cropperState.cropper.y2 * ratio)
         };
-        if (!settings.containWithinAspectRatio) {
+        if (!cropperState.options.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
             out.y1 = Math.max(out.y1, 0);
-            out.x2 = Math.min(out.x2, loadedImage.transformed.size.width);
-            out.y2 = Math.min(out.y2, loadedImage.transformed.size.height);
+            out.x2 = Math.min(out.x2, cropperState.loadedImage.transformed.size.width);
+            out.y2 = Math.min(out.y2, cropperState.loadedImage.transformed.size.height);
         }
         return out;
     }
-    getOffsetImagePosition(loadedImage, cropper, settings, maxSize) {
-        const canvasRotation = settings.canvasRotation + loadedImage.exifTransform.rotate;
-        const ratio = this.getRatio(loadedImage, maxSize);
+    getOffsetImagePosition(cropperState) {
+        const canvasRotation = cropperState.options.canvasRotation + cropperState.loadedImage.exifTransform.rotate;
+        const ratio = this.getRatio(cropperState);
         let offsetX;
         let offsetY;
         if (canvasRotation % 2) {
-            offsetX = (loadedImage.transformed.size.width - loadedImage.original.size.height) / 2;
-            offsetY = (loadedImage.transformed.size.height - loadedImage.original.size.width) / 2;
+            offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.height) / 2;
+            offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.width) / 2;
         }
         else {
-            offsetX = (loadedImage.transformed.size.width - loadedImage.original.size.width) / 2;
-            offsetY = (loadedImage.transformed.size.height - loadedImage.original.size.height) / 2;
+            offsetX = (cropperState.loadedImage.transformed.size.width - cropperState.loadedImage.original.size.width) / 2;
+            offsetY = (cropperState.loadedImage.transformed.size.height - cropperState.loadedImage.original.size.height) / 2;
         }
         const out = {
-            x1: Math.round(cropper.x1 * ratio) - offsetX,
-            y1: Math.round(cropper.y1 * ratio) - offsetY,
-            x2: Math.round(cropper.x2 * ratio) - offsetX,
-            y2: Math.round(cropper.y2 * ratio) - offsetY
+            x1: Math.round(cropperState.cropper.x1 * ratio) - offsetX,
+            y1: Math.round(cropperState.cropper.y1 * ratio) - offsetY,
+            x2: Math.round(cropperState.cropper.x2 * ratio) - offsetX,
+            y2: Math.round(cropperState.cropper.y2 * ratio) - offsetY
         };
-        if (!settings.containWithinAspectRatio) {
+        if (!cropperState.options.containWithinAspectRatio) {
             out.x1 = Math.max(out.x1, 0);
             out.y1 = Math.max(out.y1, 0);
-            out.x2 = Math.min(out.x2, loadedImage.transformed.size.width);
-            out.y2 = Math.min(out.y2, loadedImage.transformed.size.height);
+            out.x2 = Math.min(out.x2, cropperState.loadedImage.transformed.size.width);
+            out.y2 = Math.min(out.y2, cropperState.loadedImage.transformed.size.height);
         }
         return out;
     }
-    getResizeRatio(width, height, settings) {
-        const ratioWidth = settings.resizeToWidth / width;
-        const ratioHeight = settings.resizeToHeight / height;
+    getResizeRatio(width, height, options) {
+        const ratioWidth = options.resizeToWidth / width;
+        const ratioHeight = options.resizeToHeight / height;
         const ratios = new Array();
-        if (settings.resizeToWidth > 0) {
+        if (options.resizeToWidth > 0) {
             ratios.push(ratioWidth);
         }
-        if (settings.resizeToHeight > 0) {
+        if (options.resizeToHeight > 0) {
             ratios.push(ratioHeight);
         }
         const result = ratios.length === 0 ? 1 : Math.min(...ratios);
-        if (result > 1 && !settings.onlyScaleDown) {
+        if (result > 1 && !options.onlyScaleDown) {
             return result;
         }
         return Math.min(result, 1);
     }
-    getQuality(settings) {
-        return Math.min(1, Math.max(0, settings.imageQuality / 100));
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CropService, providedIn: 'root' }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CropService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
-
-class CropperPositionService {
-    resetCropperPosition(sourceImage, cropperPosition, settings, maxSize) {
-        if (!sourceImage?.nativeElement) {
-            return;
-        }
-        if (settings.cropperStaticHeight && settings.cropperStaticWidth) {
-            cropperPosition.x1 = 0;
-            cropperPosition.x2 = maxSize.width > settings.cropperStaticWidth ?
-                settings.cropperStaticWidth : maxSize.width;
-            cropperPosition.y1 = 0;
-            cropperPosition.y2 = maxSize.height > settings.cropperStaticHeight ?
-                settings.cropperStaticHeight : maxSize.height;
-        }
-        else {
-            const cropperWidth = Math.min(settings.cropperScaledMaxWidth, maxSize.width);
-            const cropperHeight = Math.min(settings.cropperScaledMaxHeight, maxSize.height);
-            if (!settings.maintainAspectRatio) {
-                cropperPosition.x1 = 0;
-                cropperPosition.x2 = cropperWidth;
-                cropperPosition.y1 = 0;
-                cropperPosition.y2 = cropperHeight;
-            }
-            else if (maxSize.width / settings.aspectRatio < maxSize.height) {
-                cropperPosition.x1 = 0;
-                cropperPosition.x2 = cropperWidth;
-                const cropperHeightWithAspectRatio = cropperWidth / settings.aspectRatio;
-                cropperPosition.y1 = (maxSize.height - cropperHeightWithAspectRatio) / 2;
-                cropperPosition.y2 = cropperPosition.y1 + cropperHeightWithAspectRatio;
-            }
-            else {
-                cropperPosition.y1 = 0;
-                cropperPosition.y2 = cropperHeight;
-                const cropperWidthWithAspectRatio = cropperHeight * settings.aspectRatio;
-                cropperPosition.x1 = (maxSize.width - cropperWidthWithAspectRatio) / 2;
-                cropperPosition.x2 = cropperPosition.x1 + cropperWidthWithAspectRatio;
-            }
-        }
-    }
-    move(event, moveStart, cropperPosition) {
-        const diffX = this.getClientX(event) - moveStart.clientX;
-        const diffY = this.getClientY(event) - moveStart.clientY;
-        cropperPosition.x1 = moveStart.x1 + diffX;
-        cropperPosition.y1 = moveStart.y1 + diffY;
-        cropperPosition.x2 = moveStart.x2 + diffX;
-        cropperPosition.y2 = moveStart.y2 + diffY;
-    }
-    resize(event, moveStart, cropperPosition, maxSize, settings) {
-        const moveX = this.getClientX(event) - moveStart.clientX;
-        const moveY = this.getClientY(event) - moveStart.clientY;
-        switch (moveStart.position) {
-            case 'left':
-                cropperPosition.x1 = Math.min(Math.max(moveStart.x1 + moveX, cropperPosition.x2 - settings.cropperScaledMaxWidth), cropperPosition.x2 - settings.cropperScaledMinWidth);
-                break;
-            case 'topleft':
-                cropperPosition.x1 = Math.min(Math.max(moveStart.x1 + moveX, cropperPosition.x2 - settings.cropperScaledMaxWidth), cropperPosition.x2 - settings.cropperScaledMinWidth);
-                cropperPosition.y1 = Math.min(Math.max(moveStart.y1 + moveY, cropperPosition.y2 - settings.cropperScaledMaxHeight), cropperPosition.y2 - settings.cropperScaledMinHeight);
-                break;
-            case 'top':
-                cropperPosition.y1 = Math.min(Math.max(moveStart.y1 + moveY, cropperPosition.y2 - settings.cropperScaledMaxHeight), cropperPosition.y2 - settings.cropperScaledMinHeight);
-                break;
-            case 'topright':
-                cropperPosition.x2 = Math.max(Math.min(moveStart.x2 + moveX, cropperPosition.x1 + settings.cropperScaledMaxWidth), cropperPosition.x1 + settings.cropperScaledMinWidth);
-                cropperPosition.y1 = Math.min(Math.max(moveStart.y1 + moveY, cropperPosition.y2 - settings.cropperScaledMaxHeight), cropperPosition.y2 - settings.cropperScaledMinHeight);
-                break;
-            case 'right':
-                cropperPosition.x2 = Math.max(Math.min(moveStart.x2 + moveX, cropperPosition.x1 + settings.cropperScaledMaxWidth), cropperPosition.x1 + settings.cropperScaledMinWidth);
-                break;
-            case 'bottomright':
-                cropperPosition.x2 = Math.max(Math.min(moveStart.x2 + moveX, cropperPosition.x1 + settings.cropperScaledMaxWidth), cropperPosition.x1 + settings.cropperScaledMinWidth);
-                cropperPosition.y2 = Math.max(Math.min(moveStart.y2 + moveY, cropperPosition.y1 + settings.cropperScaledMaxHeight), cropperPosition.y1 + settings.cropperScaledMinHeight);
-                break;
-            case 'bottom':
-                cropperPosition.y2 = Math.max(Math.min(moveStart.y2 + moveY, cropperPosition.y1 + settings.cropperScaledMaxHeight), cropperPosition.y1 + settings.cropperScaledMinHeight);
-                break;
-            case 'bottomleft':
-                cropperPosition.x1 = Math.min(Math.max(moveStart.x1 + moveX, cropperPosition.x2 - settings.cropperScaledMaxWidth), cropperPosition.x2 - settings.cropperScaledMinWidth);
-                cropperPosition.y2 = Math.max(Math.min(moveStart.y2 + moveY, cropperPosition.y1 + settings.cropperScaledMaxHeight), cropperPosition.y1 + settings.cropperScaledMinHeight);
-                break;
-            case 'center':
-                const scale = event.scale;
-                const newWidth = Math.min(Math.max(settings.cropperScaledMinWidth, (Math.abs(moveStart.x2 - moveStart.x1)) * scale), settings.cropperScaledMaxWidth);
-                const newHeight = Math.min(Math.max(settings.cropperScaledMinHeight, (Math.abs(moveStart.y2 - moveStart.y1)) * scale), settings.cropperScaledMaxHeight);
-                cropperPosition.x1 = moveStart.clientX - newWidth / 2;
-                cropperPosition.x2 = moveStart.clientX + newWidth / 2;
-                cropperPosition.y1 = moveStart.clientY - newHeight / 2;
-                cropperPosition.y2 = moveStart.clientY + newHeight / 2;
-                if (cropperPosition.x1 < 0) {
-                    cropperPosition.x2 -= cropperPosition.x1;
-                    cropperPosition.x1 = 0;
-                }
-                else if (cropperPosition.x2 > maxSize.width) {
-                    cropperPosition.x1 -= (cropperPosition.x2 - maxSize.width);
-                    cropperPosition.x2 = maxSize.width;
-                }
-                if (cropperPosition.y1 < 0) {
-                    cropperPosition.y2 -= cropperPosition.y1;
-                    cropperPosition.y1 = 0;
-                }
-                else if (cropperPosition.y2 > maxSize.height) {
-                    cropperPosition.y1 -= (cropperPosition.y2 - maxSize.height);
-                    cropperPosition.y2 = maxSize.height;
-                }
-                break;
-        }
-        if (settings.maintainAspectRatio) {
-            this.checkAspectRatio(moveStart.position, cropperPosition, maxSize, settings);
-        }
-    }
-    checkAspectRatio(position, cropperPosition, maxSize, settings) {
-        let overflowX = 0;
-        let overflowY = 0;
-        switch (position) {
-            case 'top':
-                cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * settings.aspectRatio;
-                overflowX = Math.max(cropperPosition.x2 - maxSize.width, 0);
-                overflowY = Math.max(0 - cropperPosition.y1, 0);
-                if (overflowX > 0 || overflowY > 0) {
-                    cropperPosition.x2 -= (overflowY * settings.aspectRatio) > overflowX ? (overflowY * settings.aspectRatio) : overflowX;
-                    cropperPosition.y1 += (overflowY * settings.aspectRatio) > overflowX ? overflowY : overflowX / settings.aspectRatio;
-                }
-                break;
-            case 'bottom':
-                cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * settings.aspectRatio;
-                overflowX = Math.max(cropperPosition.x2 - maxSize.width, 0);
-                overflowY = Math.max(cropperPosition.y2 - maxSize.height, 0);
-                if (overflowX > 0 || overflowY > 0) {
-                    cropperPosition.x2 -= (overflowY * settings.aspectRatio) > overflowX ? (overflowY * settings.aspectRatio) : overflowX;
-                    cropperPosition.y2 -= (overflowY * settings.aspectRatio) > overflowX ? overflowY : (overflowX / settings.aspectRatio);
-                }
-                break;
-            case 'topleft':
-                cropperPosition.y1 = cropperPosition.y2 - (cropperPosition.x2 - cropperPosition.x1) / settings.aspectRatio;
-                overflowX = Math.max(0 - cropperPosition.x1, 0);
-                overflowY = Math.max(0 - cropperPosition.y1, 0);
-                if (overflowX > 0 || overflowY > 0) {
-                    cropperPosition.x1 += (overflowY * settings.aspectRatio) > overflowX ? (overflowY * settings.aspectRatio) : overflowX;
-                    cropperPosition.y1 += (overflowY * settings.aspectRatio) > overflowX ? overflowY : overflowX / settings.aspectRatio;
-                }
-                break;
-            case 'topright':
-                cropperPosition.y1 = cropperPosition.y2 - (cropperPosition.x2 - cropperPosition.x1) / settings.aspectRatio;
-                overflowX = Math.max(cropperPosition.x2 - maxSize.width, 0);
-                overflowY = Math.max(0 - cropperPosition.y1, 0);
-                if (overflowX > 0 || overflowY > 0) {
-                    cropperPosition.x2 -= (overflowY * settings.aspectRatio) > overflowX ? (overflowY * settings.aspectRatio) : overflowX;
-                    cropperPosition.y1 += (overflowY * settings.aspectRatio) > overflowX ? overflowY : overflowX / settings.aspectRatio;
-                }
-                break;
-            case 'right':
-            case 'bottomright':
-                cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / settings.aspectRatio;
-                overflowX = Math.max(cropperPosition.x2 - maxSize.width, 0);
-                overflowY = Math.max(cropperPosition.y2 - maxSize.height, 0);
-                if (overflowX > 0 || overflowY > 0) {
-                    cropperPosition.x2 -= (overflowY * settings.aspectRatio) > overflowX ? (overflowY * settings.aspectRatio) : overflowX;
-                    cropperPosition.y2 -= (overflowY * settings.aspectRatio) > overflowX ? overflowY : overflowX / settings.aspectRatio;
-                }
-                break;
-            case 'left':
-            case 'bottomleft':
-                cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / settings.aspectRatio;
-                overflowX = Math.max(0 - cropperPosition.x1, 0);
-                overflowY = Math.max(cropperPosition.y2 - maxSize.height, 0);
-                if (overflowX > 0 || overflowY > 0) {
-                    cropperPosition.x1 += (overflowY * settings.aspectRatio) > overflowX ? (overflowY * settings.aspectRatio) : overflowX;
-                    cropperPosition.y2 -= (overflowY * settings.aspectRatio) > overflowX ? overflowY : overflowX / settings.aspectRatio;
-                }
-                break;
-            case 'center':
-                cropperPosition.x2 = cropperPosition.x1 + (cropperPosition.y2 - cropperPosition.y1) * settings.aspectRatio;
-                cropperPosition.y2 = cropperPosition.y1 + (cropperPosition.x2 - cropperPosition.x1) / settings.aspectRatio;
-                const overflowX1 = Math.max(0 - cropperPosition.x1, 0);
-                const overflowX2 = Math.max(cropperPosition.x2 - maxSize.width, 0);
-                const overflowY1 = Math.max(cropperPosition.y2 - maxSize.height, 0);
-                const overflowY2 = Math.max(0 - cropperPosition.y1, 0);
-                if (overflowX1 > 0 || overflowX2 > 0 || overflowY1 > 0 || overflowY2 > 0) {
-                    cropperPosition.x1 += (overflowY1 * settings.aspectRatio) > overflowX1 ? (overflowY1 * settings.aspectRatio) : overflowX1;
-                    cropperPosition.x2 -= (overflowY2 * settings.aspectRatio) > overflowX2 ? (overflowY2 * settings.aspectRatio) : overflowX2;
-                    cropperPosition.y1 += (overflowY2 * settings.aspectRatio) > overflowX2 ? overflowY2 : overflowX2 / settings.aspectRatio;
-                    cropperPosition.y2 -= (overflowY1 * settings.aspectRatio) > overflowX1 ? overflowY1 : overflowX1 / settings.aspectRatio;
-                }
-                break;
-        }
+    getQuality(options) {
+        return Math.min(1, Math.max(0, options.imageQuality / 100));
     }
-    getClientX(event) {
-        if ('touches' in event && event.touches[0])
-            return event.touches[0].clientX;
-        else if ('clientX' in event) {
-            return event.clientX;
-        }
-        return 0;
-    }
-    getClientY(event) {
-        if ('touches' in event && event.touches[0])
-            return event.touches[0].clientY;
-        else if ('clientX' in event) {
-            return event.clientY;
-        }
-        return 0;
-    }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CropperPositionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CropperPositionService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: CropperPositionService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
 
 // Black 2x1 JPEG, with the following meta information set:
 // - EXIF Orientation: 6 (Rotated 90° CCW)
@@ -623,7 +740,10 @@ class LoadImageService {
     }
     async loadImageFile(file, cropperSettings) {
         const arrayBuffer = await file.arrayBuffer();
-        return await this.checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, file.type, cropperSettings);
+        if (cropperSettings.options.checkImageType) {
+            return await this.checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, file.type, cropperSettings);
+        }
+        return await this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings);
     }
     checkImageTypeAndLoadImageFromArrayBuffer(arrayBuffer, imageType, cropperSettings) {
         if (!this.isValidImageType(imageType)) {
@@ -632,7 +752,7 @@ class LoadImageService {
         return this.loadImageFromArrayBuffer(arrayBuffer, cropperSettings, imageType);
     }
     isValidImageType(type) {
-        return /image\/(png|jpg|jpeg|bmp|gif|tiff|svg|webp|x-icon|vnd.microsoft.icon)/.test(type);
+        return /image\/(png|jpg|jpeg|heic|bmp|gif|tiff|svg|webp|x-icon|vnd.microsoft.icon)/.test(type);
     }
     async loadImageFromURL(url, cropperSettings) {
         const res = await fetch(url);
@@ -654,7 +774,7 @@ class LoadImageService {
         }
         return bytes.buffer;
     }
-    async loadImageFromArrayBuffer(arrayBuffer, cropperSettings, imageType) {
+    async loadImageFromArrayBuffer(arrayBuffer, cropperState, imageType) {
         const res = await new Promise(async (resolve, reject) => {
             try {
                 const blob = new Blob([arrayBuffer], imageType ? { type: imageType } : undefined);
@@ -675,7 +795,7 @@ class LoadImageService {
                 reject(e);
             }
         });
-        return await this.transformImageFromArrayBuffer(res, cropperSettings, res.originalImageSize != null);
+        return await this.transformImageFromArrayBuffer(res, cropperState, res.originalImageSize != null);
     }
     async getSvgImageSize(blob) {
         const parser = new DOMParser();
@@ -719,10 +839,10 @@ class LoadImageService {
         };
         return this.transformLoadedImage(loadedImage, cropperSettings, forceTransform);
     }
-    async transformLoadedImage(loadedImage, cropperSettings, forceTransform = false) {
-        const canvasRotation = cropperSettings.canvasRotation + loadedImage.exifTransform.rotate;
+    async transformLoadedImage(loadedImage, cropperState, forceTransform = false) {
+        const canvasRotation = cropperState.options.canvasRotation + loadedImage.exifTransform.rotate;
         const originalSize = loadedImage.original.size;
-        if (!forceTransform && canvasRotation === 0 && !loadedImage.exifTransform.flip && !cropperSettings.containWithinAspectRatio) {
+        if (!forceTransform && canvasRotation === 0 && !loadedImage.exifTransform.flip && !cropperState.options.containWithinAspectRatio) {
             return {
                 original: {
                     objectUrl: loadedImage.original.objectUrl,
@@ -737,7 +857,7 @@ class LoadImageService {
                 exifTransform: loadedImage.exifTransform
             };
         }
-        const transformedSize = this.getTransformedSize(originalSize, loadedImage.exifTransform, cropperSettings);
+        const transformedSize = this.getTransformedSize(originalSize, loadedImage.exifTransform, cropperState);
         const canvas = document.createElement('canvas');
         canvas.width = transformedSize.width;
         canvas.height = transformedSize.height;
@@ -745,7 +865,7 @@ class LoadImageService {
         ctx?.setTransform(loadedImage.exifTransform.flip ? -1 : 1, 0, 0, 1, canvas.width / 2, canvas.height / 2);
         ctx?.rotate(Math.PI * (canvasRotation / 2));
         ctx?.drawImage(loadedImage.original.image, -originalSize.width / 2, -originalSize.height / 2);
-        const blob = await new Promise(resolve => canvas.toBlob(resolve, cropperSettings.format));
+        const blob = await new Promise(resolve => canvas.toBlob(resolve, cropperState.options.format));
         if (!blob) {
             throw new Error('Failed to get Blob for transformed image.');
         }
@@ -776,20 +896,20 @@ class LoadImageService {
             image.src = objectUrl;
         }));
     }
-    getTransformedSize(originalSize, exifTransform, cropperSettings) {
-        const canvasRotation = cropperSettings.canvasRotation + exifTransform.rotate;
-        if (cropperSettings.containWithinAspectRatio) {
+    getTransformedSize(originalSize, exifTransform, cropperState) {
+        const canvasRotation = cropperState.options.canvasRotation + exifTransform.rotate;
+        if (cropperState.options.containWithinAspectRatio) {
             if (canvasRotation % 2) {
-                const minWidthToContain = originalSize.width * cropperSettings.aspectRatio;
-                const minHeightToContain = originalSize.height / cropperSettings.aspectRatio;
+                const minWidthToContain = originalSize.width * cropperState.options.aspectRatio;
+                const minHeightToContain = originalSize.height / cropperState.options.aspectRatio;
                 return {
                     width: Math.max(originalSize.height, minWidthToContain),
                     height: Math.max(originalSize.width, minHeightToContain)
                 };
             }
             else {
-                const minWidthToContain = originalSize.height * cropperSettings.aspectRatio;
-                const minHeightToContain = originalSize.width / cropperSettings.aspectRatio;
+                const minWidthToContain = originalSize.height * cropperState.options.aspectRatio;
+                const minHeightToContain = originalSize.width / cropperState.options.aspectRatio;
                 return {
                     width: Math.max(originalSize.width, minWidthToContain),
                     height: Math.max(originalSize.height, minHeightToContain)
@@ -807,65 +927,68 @@ class LoadImageService {
             height: originalSize.height
         };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
-    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadImageService, providedIn: 'root' }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: LoadImageService, decorators: [{
-            type: Injectable,
-            args: [{ providedIn: 'root' }]
-        }] });
+
+function getPositionForKey(key) {
+    switch (key) {
+        case 'ArrowUp':
+            return 'top';
+        case 'ArrowRight':
+            return 'right';
+        case 'ArrowDown':
+            return 'bottom';
+        case 'ArrowLeft':
+        default:
+            return 'left';
+    }
+}
+function getInvertedPositionForKey(key) {
+    switch (key) {
+        case 'ArrowUp':
+            return 'bottom';
+        case 'ArrowRight':
+            return 'left';
+        case 'ArrowDown':
+            return 'top';
+        case 'ArrowLeft':
+        default:
+            return 'right';
+    }
+}
+function getEventForKey(key, stepSize) {
+    switch (key) {
+        case 'ArrowUp':
+            return { clientX: 0, clientY: stepSize * -1 };
+        case 'ArrowRight':
+            return { clientX: stepSize, clientY: 0 };
+        case 'ArrowDown':
+            return { clientX: 0, clientY: stepSize };
+        case 'ArrowLeft':
+        default:
+            return { clientX: stepSize * -1, clientY: 0 };
+    }
+}
 
 class ImageCropperComponent {
-    constructor(cropService, cropperPositionService, loadImageService, sanitizer, cd, zone, hammerLoader) {
-        this.cropService = cropService;
-        this.cropperPositionService = cropperPositionService;
-        this.loadImageService = loadImageService;
+    get alignImageStyle() {
+        return this.state.options.alignImage;
+    }
+    constructor(sanitizer, cd, zone) {
         this.sanitizer = sanitizer;
         this.cd = cd;
         this.zone = zone;
-        this.hammerLoader = hammerLoader;
-        this.settings = new CropperSettings();
+        this.pinchStart$ = new Subject();
+        this.cropService = new CropService();
+        this.loadImageService = new LoadImageService();
         this.setImageMaxSizeRetries = 0;
         this.resizedWhileHidden = false;
-        this.marginLeft = '0px';
-        this.maxSize = {
-            width: 0,
-            height: 0
-        };
         this.moveTypes = MoveTypes;
+        this.state = new CropperState();
+        this.safeImgDataUrl = signal(undefined);
+        this.marginLeft = '0px';
         this.imageVisible = false;
-        this.cropperFrameAriaLabel = this.settings.cropperFrameAriaLabel;
-        this.output = this.settings.output;
-        this.format = this.settings.format;
-        this.transform = {};
-        this.maintainAspectRatio = this.settings.maintainAspectRatio;
-        this.aspectRatio = this.settings.aspectRatio;
-        this.resetCropOnAspectRatioChange = this.settings.resetCropOnAspectRatioChange;
-        this.resizeToWidth = this.settings.resizeToWidth;
-        this.resizeToHeight = this.settings.resizeToHeight;
-        this.cropperMinWidth = this.settings.cropperMinWidth;
-        this.cropperMinHeight = this.settings.cropperMinHeight;
-        this.cropperMaxHeight = this.settings.cropperMaxHeight;
-        this.cropperMaxWidth = this.settings.cropperMaxWidth;
-        this.cropperStaticWidth = this.settings.cropperStaticWidth;
-        this.cropperStaticHeight = this.settings.cropperStaticHeight;
-        this.canvasRotation = this.settings.canvasRotation;
-        this.initialStepSize = this.settings.initialStepSize;
-        this.roundCropper = this.settings.roundCropper;
-        this.onlyScaleDown = this.settings.onlyScaleDown;
-        this.imageQuality = this.settings.imageQuality;
-        this.autoCrop = this.settings.autoCrop;
-        this.backgroundColor = this.settings.backgroundColor;
-        this.containWithinAspectRatio = this.settings.containWithinAspectRatio;
-        this.hideResizeSquares = this.settings.hideResizeSquares;
         this.allowMoveImage = false;
-        this.cropper = {
-            x1: -100,
-            y1: -100,
-            x2: 10000,
-            y2: 10000
-        };
-        this.alignImage = this.settings.alignImage;
+        this.checkImageType = true;
         this.disabled = false;
         this.hidden = false;
         this.imageCropped = new EventEmitter();
@@ -874,34 +997,42 @@ class ImageCropperComponent {
         this.cropperReady = new EventEmitter();
         this.loadImageFailed = new EventEmitter();
         this.transformChange = new EventEmitter();
+        this.cropperChange = new EventEmitter();
         this.reset();
     }
+    ngOnInit() {
+        this.state.stepSize = this.initialStepSize || this.state.stepSize;
+    }
     ngOnChanges(changes) {
-        this.onChangesUpdateSettings(changes);
+        const previousCropperPosition = this.state.cropper;
+        const previousTransform = this.state.transform;
+        const previousBackgroundColor = this.state.options.backgroundColor;
+        this.state.setOptionsFromChanges(changes);
         this.onChangesInputImage(changes);
-        if (this.loadedImage?.original.image.complete && (changes['containWithinAspectRatio'] || changes['canvasRotation'])) {
+        if (changes['transform'] && this.transform) {
+            this.state.transform = this.transform;
+            this.setCssTransform();
+        }
+        if (!this.state.loadedImage?.transformed.image.complete || !this.state.maxSize) {
+            return;
+        }
+        if ((this.containWithinAspectRatio && changes['aspectRatio']) || changes['containWithinAspectRatio'] || changes['canvasRotation']) {
             this.loadImageService
-                .transformLoadedImage(this.loadedImage, this.settings)
+                .transformLoadedImage(this.state.loadedImage, this.state)
                 .then((res) => this.setLoadedImage(res))
                 .catch((err) => this.loadImageError(err));
+            return;
         }
-        if (changes['cropper'] || changes['maintainAspectRatio'] || changes['aspectRatio']) {
-            this.setMaxSize();
-            this.setCropperScaledMinSize();
-            this.setCropperScaledMaxSize();
-            if (this.maintainAspectRatio &&
-                (this.resetCropOnAspectRatioChange || !this.aspectRatioIsCorrect()) &&
-                (changes['maintainAspectRatio'] || changes['aspectRatio'])) {
-                this.resetCropperPosition();
-            }
-            else if (changes['cropper']) {
-                this.checkCropperPosition(false);
-                this.doAutoCrop();
-            }
+        if (changes['cropper'] && this.cropper) {
+            this.state.cropper = checkCropperPosition(this.cropper, this.state, true);
         }
-        if (changes['transform']) {
-            this.transform = this.transform || {};
-            this.setCssTransform();
+        const cropperChanged = !this.state.equalsCropperPosition(previousCropperPosition);
+        if (cropperChanged && (!this.cropper || !this.state.equalsCropperPosition(this.cropper))) {
+            this.cropperChange.emit(this.state.cropper);
+        }
+        if (cropperChanged
+            || !this.state.equalsTransform(previousTransform)
+            || this.state.options.backgroundColor !== previousBackgroundColor) {
             this.doAutoCrop();
         }
         if (changes['hidden'] && this.resizedWhileHidden && !this.hidden) {
@@ -911,20 +1042,6 @@ class ImageCropperComponent {
             });
         }
     }
-    onChangesUpdateSettings(changes) {
-        this.settings.setOptionsFromChanges(changes);
-        if (this.settings.cropperStaticHeight && this.settings.cropperStaticWidth) {
-            this.hideResizeSquares = true;
-            this.settings.setOptions({
-                hideResizeSquares: true,
-                cropperMinWidth: this.settings.cropperStaticWidth,
-                cropperMinHeight: this.settings.cropperStaticHeight,
-                cropperMaxHeight: this.settings.cropperStaticHeight,
-                cropperMaxWidth: this.settings.cropperStaticWidth,
-                maintainAspectRatio: false
-            });
-        }
-    }
     onChangesInputImage(changes) {
         if (changes['imageChangedEvent'] || changes['imageURL'] || changes['imageBase64'] || changes['imageFile']) {
             this.reset();
@@ -946,73 +1063,50 @@ class ImageCropperComponent {
         const files = this.imageChangedEvent?.target?.files;
         return files instanceof FileList && files.length > 0;
     }
-    setCssTransform() {
-        const translateUnit = this.transform?.translateUnit || '%';
-        this.safeTransformStyle = this.sanitizer.bypassSecurityTrustStyle(`translate(${this.transform.translateH || 0}${translateUnit}, ${this.transform.translateV || 0}${translateUnit})` +
-            ' scaleX(' + (this.transform.scale || 1) * (this.transform.flipH ? -1 : 1) + ')' +
-            ' scaleY(' + (this.transform.scale || 1) * (this.transform.flipV ? -1 : 1) + ')' +
-            ' rotate(' + (this.transform.rotate || 0) + 'deg)');
-    }
-    ngOnInit() {
-        this.settings.stepSize = this.initialStepSize;
-        this.activatePinchGesture();
-    }
     reset() {
-        this.imageVisible = false;
-        this.loadedImage = undefined;
-        this.safeImgDataUrl = 'data:image/png;base64,iVBORw0KGg'
+        this.safeImgDataUrl.set('data:image/png;base64,iVBORw0KGg'
             + 'oAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVQYV2NgAAIAAAU'
-            + 'AAarVyFEAAAAASUVORK5CYII=';
-        this.moveStart = {
-            active: false,
-            type: null,
-            position: null,
-            x1: 0,
-            y1: 0,
-            x2: 0,
-            y2: 0,
-            clientX: 0,
-            clientY: 0
-        };
-        this.maxSize = {
-            width: 0,
-            height: 0
-        };
-        this.cropper.x1 = -100;
-        this.cropper.y1 = -100;
-        this.cropper.x2 = 10000;
-        this.cropper.y2 = 10000;
+            + 'AAarVyFEAAAAASUVORK5CYII=');
+        this.state.loadedImage = undefined;
+        this.state.maxSize = undefined;
+        this.imageVisible = false;
     }
     loadImageFile(file) {
         this.loadImageService
-            .loadImageFile(file, this.settings)
+            .loadImageFile(file, this.state)
             .then((res) => this.setLoadedImage(res))
             .catch((err) => this.loadImageError(err));
     }
     loadBase64Image(imageBase64) {
         this.loadImageService
-            .loadBase64Image(imageBase64, this.settings)
+            .loadBase64Image(imageBase64, this.state)
             .then((res) => this.setLoadedImage(res))
             .catch((err) => this.loadImageError(err));
     }
     loadImageFromURL(url) {
         this.loadImageService
-            .loadImageFromURL(url, this.settings)
+            .loadImageFromURL(url, this.state)
             .then((res) => this.setLoadedImage(res))
             .catch((err) => this.loadImageError(err));
     }
     setLoadedImage(loadedImage) {
-        this.loadedImage = loadedImage;
-        this.safeImgDataUrl = this.sanitizer.bypassSecurityTrustResourceUrl(loadedImage.transformed.objectUrl);
-        this.cd.markForCheck();
+        this.state.loadedImage = loadedImage;
+        this.safeImgDataUrl.set(this.sanitizer.bypassSecurityTrustResourceUrl(loadedImage.transformed.objectUrl));
     }
     loadImageError(error) {
         console.error(error);
         this.loadImageFailed.emit();
     }
+    setCssTransform() {
+        const translateUnit = this.state.transform?.translateUnit || '%';
+        this.safeTransformStyle = this.sanitizer.bypassSecurityTrustStyle(`translate(${this.state.transform.translateH || 0}${translateUnit}, ${this.state.transform.translateV || 0}${translateUnit})` +
+            ' scaleX(' + (this.state.transform.scale || 1) * (this.state.transform.flipH ? -1 : 1) + ')' +
+            ' scaleY(' + (this.state.transform.scale || 1) * (this.state.transform.flipV ? -1 : 1) + ')' +
+            ' rotate(' + (this.state.transform.rotate || 0) + 'deg)');
+    }
     imageLoadedInView() {
-        if (this.loadedImage != null) {
-            this.imageLoaded.emit(this.loadedImage);
+        if (this.state.loadedImage != null) {
+            this.imageLoaded.emit(this.state.loadedImage);
             this.setImageMaxSizeRetries = 0;
             setTimeout(() => this.checkImageMaxSizeRecursively());
         }
@@ -1023,10 +1117,17 @@ class ImageCropperComponent {
         }
         else if (this.sourceImageLoaded()) {
             this.setMaxSize();
-            this.setCropperScaledMinSize();
-            this.setCropperScaledMaxSize();
-            this.resetCropperPosition();
-            this.cropperReady.emit({ ...this.maxSize });
+            if (this.cropper && (!this.maintainAspectRatio || this.state.aspectRatioIsCorrect())) {
+                this.state.cropper = checkCropperPosition(this.cropper, this.state, true);
+                this.emitCropperPositionChange(this.cropper);
+            }
+            else {
+                this.state.cropper = checkCropperPosition(this.state.maxSizeCropperPosition(), this.state, true);
+                this.cropperChange.emit(this.state.cropper);
+            }
+            this.imageVisible = true;
+            this.cropperReady.emit({ ...this.state.maxSize });
+            this.doAutoCrop();
             this.cd.markForCheck();
         }
         else {
@@ -1035,51 +1136,22 @@ class ImageCropperComponent {
         }
     }
     sourceImageLoaded() {
-        return this.sourceImage?.nativeElement?.offsetWidth > 0;
+        return this.sourceImage?.nativeElement?.offsetWidth > 1;
     }
     onResize() {
-        if (!this.loadedImage) {
+        if (!this.state.loadedImage) {
             return;
         }
         if (this.hidden) {
             this.resizedWhileHidden = true;
         }
         else {
-            const oldMaxSize = { ...this.maxSize };
+            const oldMaxSize = { ...this.state.maxSize };
             this.setMaxSize();
-            this.resizeCropperPosition(oldMaxSize);
-            this.setCropperScaledMinSize();
-            this.setCropperScaledMaxSize();
-        }
-    }
-    async activatePinchGesture() {
-        // Loads HammerJS via angular APIs if configured
-        await this.hammerLoader?.();
-        const Hammer = window?.['Hammer'] || null;
-        if (Hammer) {
-            const hammer = new Hammer(this.wrapper.nativeElement);
-            hammer.get('pinch').set({ enable: true });
-            hammer.on('pinchmove', this.onPinch.bind(this));
-            hammer.on('pinchend', this.pinchStop.bind(this));
-            hammer.on('pinchstart', this.startPinch.bind(this));
-        }
-        else if (isDevMode()) {
-            console.warn('[NgxImageCropper] Could not find HammerJS - Pinch Gesture won\'t work');
-        }
-    }
-    resizeCropperPosition(oldMaxSize) {
-        if (oldMaxSize.width !== this.maxSize.width || oldMaxSize.height !== this.maxSize.height) {
-            this.cropper.x1 = this.cropper.x1 * this.maxSize.width / oldMaxSize.width;
-            this.cropper.x2 = this.cropper.x2 * this.maxSize.width / oldMaxSize.width;
-            this.cropper.y1 = this.cropper.y1 * this.maxSize.height / oldMaxSize.height;
-            this.cropper.y2 = this.cropper.y2 * this.maxSize.height / oldMaxSize.height;
+            this.state.resizeCropperPosition(oldMaxSize);
+            this.cd.markForCheck();
         }
     }
-    resetCropperPosition() {
-        this.cropperPositionService.resetCropperPosition(this.sourceImage, this.cropper, this.settings, this.maxSize);
-        this.doAutoCrop();
-        this.imageVisible = true;
-    }
     keyboardAccess(event) {
         this.changeKeyboardStepSize(event);
         this.keyboardMoveCropper(event);
@@ -1087,7 +1159,7 @@ class ImageCropperComponent {
     changeKeyboardStepSize(event) {
         const key = +event.key;
         if (key >= 1 && key <= 9) {
-            this.settings.stepSize = key;
+            this.state.stepSize = key;
         }
     }
     keyboardMoveCropper(event) {
@@ -1097,10 +1169,18 @@ class ImageCropperComponent {
         }
         const moveType = event.shiftKey ? MoveTypes.Resize : MoveTypes.Move;
         const position = event.altKey ? getInvertedPositionForKey(event.key) : getPositionForKey(event.key);
-        const moveEvent = getEventForKey(event.key, this.settings.stepSize);
+        const moveEvent = getEventForKey(event.key, this.state.stepSize);
         event.preventDefault();
         event.stopPropagation();
-        this.startMove({ clientX: 0, clientY: 0 }, moveType, position);
+        this.moveStart = {
+            active: true,
+            type: moveType,
+            position,
+            clientX: 0,
+            clientY: 0,
+            transform: this.state.transform,
+            cropper: this.state.cropper
+        };
         this.handleMouseMove(moveEvent);
         this.handleMouseUp();
     }
@@ -1117,16 +1197,15 @@ class ImageCropperComponent {
             active: true,
             type: moveType,
             position,
-            transform: { ...this.transform },
-            clientX: this.cropperPositionService.getClientX(event),
-            clientY: this.cropperPositionService.getClientY(event),
-            ...this.cropper
+            clientX: getClientX(event),
+            clientY: getClientY(event),
+            transform: this.state.transform,
+            cropper: this.state.cropper
         };
         this.initMouseMove();
     }
     initMouseMove() {
-        merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove')).pipe(takeUntil(merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend')).pipe(first())))
-            .subscribe({
+        merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove')).pipe(takeUntil(merge(fromEvent(document, 'mouseup'), fromEvent(document, 'touchend'), this.pinchStart$).pipe(first()))).subscribe({
             next: (event) => this.zone.run(() => {
                 this.handleMouseMove(event);
                 this.cd.markForCheck();
@@ -1137,162 +1216,125 @@ class ImageCropperComponent {
             })
         });
     }
-    startPinch(event) {
-        if (!this.safeImgDataUrl) {
+    handleMouseMove(event) {
+        if (!this.moveStart?.active) {
             return;
         }
-        if (event.preventDefault) {
+        if ('stopPropagation' in event) {
+            event.stopPropagation();
+        }
+        if ('preventDefault' in event) {
             event.preventDefault();
         }
-        this.moveStart = {
-            active: true,
-            type: MoveTypes.Pinch,
-            position: 'center',
-            clientX: this.cropper.x1 + (this.cropper.x2 - this.cropper.x1) / 2,
-            clientY: this.cropper.y1 + (this.cropper.y2 - this.cropper.y1) / 2,
-            ...this.cropper
-        };
-    }
-    handleMouseMove(event) {
-        if (this.moveStart.active) {
-            if ('stopPropagation' in event) {
-                event.stopPropagation();
-            }
-            if ('preventDefault' in event) {
-                event.preventDefault();
-            }
-            if (this.moveStart.type === MoveTypes.Move) {
-                this.cropperPositionService.move(event, this.moveStart, this.cropper);
-                this.checkCropperPosition(true);
-            }
-            else if (this.moveStart.type === MoveTypes.Resize) {
-                if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
-                    this.cropperPositionService.resize(event, this.moveStart, this.cropper, this.maxSize, this.settings);
-                }
-                this.checkCropperPosition(false);
-            }
-            else if (this.moveStart.type === MoveTypes.Drag) {
-                const diffX = this.cropperPositionService.getClientX(event) - this.moveStart.clientX;
-                const diffY = this.cropperPositionService.getClientY(event) - this.moveStart.clientY;
-                this.transform = {
-                    ...this.transform,
-                    translateH: (this.moveStart.transform?.translateH || 0) + diffX,
-                    translateV: (this.moveStart.transform?.translateV || 0) + diffY
-                };
-                this.setCssTransform();
+        if (this.moveStart.type === MoveTypes.Move) {
+            this.state.cropper = checkCropperWithinMaxSizeBounds(moveCropper(event, this.moveStart), this.state, true);
+        }
+        else if (this.moveStart.type === MoveTypes.Resize) {
+            if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
+                this.state.cropper = checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false);
             }
         }
+        else if (this.moveStart.type === MoveTypes.Drag) {
+            const diffX = getClientX(event) - this.moveStart.clientX;
+            const diffY = getClientY(event) - this.moveStart.clientY;
+            this.state.transform = {
+                ...this.state.transform,
+                translateH: (this.moveStart.transform?.translateH || 0) + diffX,
+                translateV: (this.moveStart.transform?.translateV || 0) + diffY
+            };
+            this.setCssTransform();
+        }
     }
-    onPinch(event) {
-        if (this.moveStart.active) {
-            if (event.stopPropagation) {
-                event.stopPropagation();
-            }
-            if (event.preventDefault) {
-                event.preventDefault();
+    handleMouseUp() {
+        if (!this.moveStart?.active || this.moveStart?.type === MoveTypes.Pinch) {
+            return;
+        }
+        if (!this.state.equalsCropperPosition(this.moveStart.cropper) || this.moveStart.transform && !this.state.equalsTransform(this.moveStart.transform)) {
+            if (this.moveStart.type === MoveTypes.Drag) {
+                this.transformChange.emit(this.state.transform);
             }
-            if (this.moveStart.type === MoveTypes.Pinch) {
-                this.cropperPositionService.resize(event, this.moveStart, this.cropper, this.maxSize, this.settings);
-                this.checkCropperPosition(false);
+            else {
+                this.cropperChange.emit(this.state.cropper);
             }
-            this.cd.markForCheck();
-        }
-    }
-    setMaxSize() {
-        if (this.sourceImage) {
-            const sourceImageStyle = getComputedStyle(this.sourceImage.nativeElement);
-            this.maxSize.width = parseFloat(sourceImageStyle.width);
-            this.maxSize.height = parseFloat(sourceImageStyle.height);
-            this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.maxSize.width / 2 + 'px)');
+            this.doAutoCrop();
         }
+        this.moveStart = undefined;
     }
-    setCropperScaledMinSize() {
-        if (this.loadedImage?.transformed?.image) {
-            this.setCropperScaledMinWidth();
-            this.setCropperScaledMinHeight();
+    startPinch(event) {
+        if (this.disabled || !this.sourceImageLoaded() || event.touches.length < 2) {
+            return;
         }
-        else {
-            this.settings.cropperScaledMinWidth = 20;
-            this.settings.cropperScaledMinHeight = 20;
+        if ('preventDefault' in event) {
+            event.preventDefault();
         }
+        this.moveStart = {
+            active: true,
+            type: MoveTypes.Pinch,
+            position: 'center',
+            clientX: this.state.cropper.x1 + (this.state.cropper.x2 - this.state.cropper.x1) / 2,
+            clientY: this.state.cropper.y1 + (this.state.cropper.y2 - this.state.cropper.y1) / 2,
+            cropper: this.state.cropper
+        };
+        this.initPinch();
     }
-    setCropperScaledMinWidth() {
-        this.settings.cropperScaledMinWidth = this.cropperMinWidth > 0
-            ? Math.max(20, this.cropperMinWidth / this.loadedImage.transformed.image.width * this.maxSize.width)
-            : 20;
+    initPinch() {
+        this.pinchStart$.next();
+        fromEvent(document, 'touchmove')
+            .pipe(takeUntil(fromEvent(document, 'touchend')))
+            .subscribe({
+            next: (event) => this.zone.run(() => {
+                this.handlePinchMove(event);
+                this.cd.markForCheck();
+            }),
+            complete: () => this.zone.run(() => {
+                this.handlePinchStop();
+                this.cd.markForCheck();
+            })
+        });
     }
-    setCropperScaledMinHeight() {
-        if (this.maintainAspectRatio) {
-            this.settings.cropperScaledMinHeight = Math.max(20, this.settings.cropperScaledMinWidth / this.aspectRatio);
-        }
-        else if (this.cropperMinHeight > 0) {
-            this.settings.cropperScaledMinHeight = Math.max(20, this.cropperMinHeight / this.loadedImage.transformed.image.height * this.maxSize.height);
+    handlePinchMove(event) {
+        if (!this.moveStart?.active) {
+            return;
         }
-        else {
-            this.settings.cropperScaledMinHeight = 20;
+        if (event.preventDefault) {
+            event.preventDefault();
         }
-    }
-    setCropperScaledMaxSize() {
-        if (this.loadedImage?.transformed?.image) {
-            const ratio = this.loadedImage.transformed.size.width / this.maxSize.width;
-            this.settings.cropperScaledMaxWidth = this.cropperMaxWidth > 20 ? this.cropperMaxWidth / ratio : this.maxSize.width;
-            this.settings.cropperScaledMaxHeight = this.cropperMaxHeight > 20 ? this.cropperMaxHeight / ratio : this.maxSize.height;
-            if (this.maintainAspectRatio) {
-                if (this.settings.cropperScaledMaxWidth > this.settings.cropperScaledMaxHeight * this.aspectRatio) {
-                    this.settings.cropperScaledMaxWidth = this.settings.cropperScaledMaxHeight * this.aspectRatio;
-                }
-                else if (this.settings.cropperScaledMaxWidth < this.settings.cropperScaledMaxHeight * this.aspectRatio) {
-                    this.settings.cropperScaledMaxHeight = this.settings.cropperScaledMaxWidth / this.aspectRatio;
-                }
+        if (this.moveStart.type === MoveTypes.Pinch) {
+            if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
+                this.state.cropper = checkCropperWithinMaxSizeBounds(resizeCropper(event, this.moveStart, this.state), this.state, false);
             }
         }
-        else {
-            this.settings.cropperScaledMaxWidth = this.maxSize.width;
-            this.settings.cropperScaledMaxHeight = this.maxSize.height;
-        }
+        this.cd.markForCheck();
     }
-    checkCropperPosition(maintainSize = false) {
-        if (this.cropper.x1 < 0) {
-            this.cropper.x2 -= maintainSize ? this.cropper.x1 : 0;
-            this.cropper.x1 = 0;
-        }
-        if (this.cropper.y1 < 0) {
-            this.cropper.y2 -= maintainSize ? this.cropper.y1 : 0;
-            this.cropper.y1 = 0;
-        }
-        if (this.cropper.x2 > this.maxSize.width) {
-            this.cropper.x1 -= maintainSize ? (this.cropper.x2 - this.maxSize.width) : 0;
-            this.cropper.x2 = this.maxSize.width;
+    handlePinchStop() {
+        if (!this.moveStart?.active) {
+            return;
         }
-        if (this.cropper.y2 > this.maxSize.height) {
-            this.cropper.y1 -= maintainSize ? (this.cropper.y2 - this.maxSize.height) : 0;
-            this.cropper.y2 = this.maxSize.height;
+        if (!this.state.equalsCropperPosition(this.moveStart.cropper)) {
+            this.emitCropperPositionChange(this.moveStart.cropper);
+            this.doAutoCrop();
         }
+        this.moveStart = undefined;
     }
-    handleMouseUp() {
-        if (this.moveStart.active) {
-            this.moveStart.active = false;
-            if (this.moveStart?.type === MoveTypes.Drag) {
-                this.transformChange.emit(this.transform);
-            }
-            else {
-                this.doAutoCrop();
-            }
+    setMaxSize() {
+        if (this.sourceImage) {
+            const sourceImageStyle = getComputedStyle(this.sourceImage.nativeElement);
+            this.state.setMaxSize(parseFloat(sourceImageStyle.width), parseFloat(sourceImageStyle.height));
+            this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.state.maxSize.width / 2 + 'px)');
         }
     }
-    pinchStop() {
-        if (this.moveStart.active) {
-            this.moveStart.active = false;
-            this.doAutoCrop();
+    emitCropperPositionChange(previousPosition) {
+        if (!this.state.equalsCropperPosition(previousPosition)) {
+            this.cropperChange.emit(this.state.cropper);
         }
     }
     doAutoCrop() {
-        if (this.autoCrop) {
+        if (this.state.options.autoCrop) {
             void this.crop();
         }
     }
-    crop(output = this.settings.output) {
-        if (this.loadedImage?.transformed?.image != null) {
+    crop(output = this.state.options.output) {
+        if (this.state.loadedImage?.transformed?.image != null) {
             this.startCropImage.emit();
             if (output === 'blob') {
                 return this.cropToBlob();
@@ -1305,7 +1347,7 @@ class ImageCropperComponent {
     }
     cropToBlob() {
         return new Promise((resolve, reject) => this.zone.run(async () => {
-            const result = await this.cropService.crop(this.loadedImage, this.cropper, this.settings, 'blob', this.maxSize);
+            const result = await this.cropService.crop(this.state, 'blob');
             if (result) {
                 this.imageCropped.emit(result);
                 resolve(result);
@@ -1316,29 +1358,23 @@ class ImageCropperComponent {
         }));
     }
     cropToBase64() {
-        const result = this.cropService.crop(this.loadedImage, this.cropper, this.settings, 'base64', this.maxSize);
+        const result = this.cropService.crop(this.state, 'base64');
         if (result) {
             this.imageCropped.emit(result);
             return result;
         }
         return null;
     }
-    aspectRatioIsCorrect() {
-        const currentCropAspectRatio = (this.cropper.x2 - this.cropper.x1) / (this.cropper.y2 - this.cropper.y1);
-        return currentCropAspectRatio === this.aspectRatio;
+    ngOnDestroy() {
+        this.pinchStart$.complete();
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageCropperComponent, deps: [{ token: CropService }, { token: CropperPositionService }, { token: LoadImageService }, { token: i4.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }, { token: HAMMER_LOADER, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageCropperComponent, isStandalone: true, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", imageAltText: "imageAltText", cropperFrameAriaLabel: "cropperFrameAriaLabel", output: "output", format: "format", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resetCropOnAspectRatioChange: "resetCropOnAspectRatioChange", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", cropperMinWidth: "cropperMinWidth", cropperMinHeight: "cropperMinHeight", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", canvasRotation: "canvasRotation", initialStepSize: "initialStepSize", roundCropper: "roundCropper", onlyScaleDown: "onlyScaleDown", imageQuality: "imageQuality", autoCrop: "autoCrop", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", cropper: "cropper", alignImage: "alignImage", disabled: "disabled", hidden: "hidden" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "style.text-align": "this.alignImage", "class.disabled": "this.disabled", "class.ngx-ix-hidden": "this.hidden" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "sourceImage", first: true, predicate: ["sourceImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [style.background]=\"imageVisible && backgroundColor\"\n  #wrapper\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl\"\n    [src]=\"safeImgDataUrl\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"maxSize.width\"\n    [style.height.px]=\"maxSize.height\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div class=\"ngx-ic-cropper\"\n       *ngIf=\"imageVisible\"\n       [class.ngx-ic-round]=\"roundCropper\"\n       [attr.aria-label]=\"cropperFrameAriaLabel\"\n       [style.top.px]=\"cropper.y1\"\n       [style.left.px]=\"cropper.x1\"\n       [style.width.px]=\"cropper.x2 - cropper.x1\"\n       [style.height.px]=\"cropper.y2 - cropper.y1\"\n       [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n       [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n       (keydown)=\"keyboardAccess($event)\"\n       tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container *ngIf=\"!hideResizeSquares\">\n            <span class=\"ngx-ic-resize ngx-ic-topleft\"\n                  role=\"presentation\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-topright\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottomright\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottomleft\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-top\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-right\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-left\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n            </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ix-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageCropperComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: ImageCropperComponent, isStandalone: true, selector: "image-cropper", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", imageAltText: "imageAltText", options: "options", cropperFrameAriaLabel: "cropperFrameAriaLabel", output: "output", format: "format", autoCrop: "autoCrop", cropper: "cropper", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", resetCropOnAspectRatioChange: "resetCropOnAspectRatioChange", resizeToWidth: "resizeToWidth", resizeToHeight: "resizeToHeight", cropperMinWidth: "cropperMinWidth", cropperMinHeight: "cropperMinHeight", cropperMaxHeight: "cropperMaxHeight", cropperMaxWidth: "cropperMaxWidth", cropperStaticWidth: "cropperStaticWidth", cropperStaticHeight: "cropperStaticHeight", canvasRotation: "canvasRotation", initialStepSize: "initialStepSize", roundCropper: "roundCropper", onlyScaleDown: "onlyScaleDown", imageQuality: "imageQuality", backgroundColor: "backgroundColor", containWithinAspectRatio: "containWithinAspectRatio", hideResizeSquares: "hideResizeSquares", allowMoveImage: "allowMoveImage", checkImageType: "checkImageType", alignImage: "alignImage", disabled: "disabled", hidden: "hidden" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange", cropperChange: "cropperChange" }, host: { listeners: { "window:resize": "onResize()" }, properties: { "class.disabled": "this.disabled", "class.ngx-ic-hidden": "this.hidden", "style.text-align": "this.alignImageStyle" } }, viewQueries: [{ propertyName: "wrapper", first: true, predicate: ["wrapper"], descendants: true, static: true }, { propertyName: "sourceImage", first: true, predicate: ["sourceImage"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div\n  [style.background]=\"imageVisible && state.options.backgroundColor\"\n  (touchstart)=\"startPinch($event)\"\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl() as src\"\n    [src]=\"src\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"state.maxSize?.width || 0\"\n    [style.height.px]=\"state.maxSize?.height || 0\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div\n    class=\"ngx-ic-cropper\"\n    *ngIf=\"imageVisible\"\n    [class.ngx-ic-round]=\"state.options.roundCropper\"\n    [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n    [style.top.px]=\"state.cropper.y1\"\n    [style.left.px]=\"state.cropper.x1\"\n    [style.width.px]=\"state.cropper.x2 - state.cropper.x1\"\n    [style.height.px]=\"state.cropper.y2 - state.cropper.y1\"\n    [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    (keydown)=\"keyboardAccess($event)\"\n    tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container\n      *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n      <span\n        class=\"ngx-ic-resize ngx-ic-topleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-topright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-top\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-right\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-left\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      ></span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:var(--cropper-move-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ic-hidden{display:none}\n"], dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: ImageCropperComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  [style.background]=\"imageVisible && backgroundColor\"\n  #wrapper\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl\"\n    [src]=\"safeImgDataUrl\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"maxSize.width\"\n    [style.height.px]=\"maxSize.height\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div class=\"ngx-ic-cropper\"\n       *ngIf=\"imageVisible\"\n       [class.ngx-ic-round]=\"roundCropper\"\n       [attr.aria-label]=\"cropperFrameAriaLabel\"\n       [style.top.px]=\"cropper.y1\"\n       [style.left.px]=\"cropper.x1\"\n       [style.width.px]=\"cropper.x2 - cropper.x1\"\n       [style.height.px]=\"cropper.y2 - cropper.y1\"\n       [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n       [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n       (keydown)=\"keyboardAccess($event)\"\n       tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container *ngIf=\"!hideResizeSquares\">\n            <span class=\"ngx-ic-resize ngx-ic-topleft\"\n                  role=\"presentation\"\n                  (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n                  (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-topright\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottomright\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottomleft\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n                <span class=\"ngx-ic-square\"></span>\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-top\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-right\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\n            </span>\n      <span class=\"ngx-ic-resize-bar ngx-ic-left\"\n            role=\"presentation\"\n            (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n            (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\n            </span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ix-hidden{display:none}\n"] }]
-        }], ctorParameters: function () { return [{ type: CropService }, { type: CropperPositionService }, { type: LoadImageService }, { type: i4.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
-                    type: Optional
-                }, {
-                    type: Inject,
-                    args: [HAMMER_LOADER]
-                }] }]; }, propDecorators: { wrapper: [{
+            args: [{ selector: 'image-cropper', changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, imports: [NgIf], template: "<div\n  [style.background]=\"imageVisible && state.options.backgroundColor\"\n  (touchstart)=\"startPinch($event)\"\n>\n  <img\n    #sourceImage\n    class=\"ngx-ic-source-image\"\n    role=\"presentation\"\n    *ngIf=\"safeImgDataUrl() as src\"\n    [src]=\"src\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    [style.transform]=\"safeTransformStyle\"\n    [class.ngx-ic-draggable]=\"!disabled && allowMoveImage\"\n    [attr.alt]=\"imageAltText\"\n    (load)=\"imageLoadedInView()\"\n    (mousedown)=\"startMove($event, moveTypes.Drag)\"\n    (touchstart)=\"startMove($event, moveTypes.Drag)\"\n    (error)=\"loadImageError($event)\"\n  >\n  <div\n    class=\"ngx-ic-overlay\"\n    [style.width.px]=\"state.maxSize?.width || 0\"\n    [style.height.px]=\"state.maxSize?.height || 0\"\n    [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\n  ></div>\n  <div\n    class=\"ngx-ic-cropper\"\n    *ngIf=\"imageVisible\"\n    [class.ngx-ic-round]=\"state.options.roundCropper\"\n    [attr.aria-label]=\"state.options.cropperFrameAriaLabel\"\n    [style.top.px]=\"state.cropper.y1\"\n    [style.left.px]=\"state.cropper.x1\"\n    [style.width.px]=\"state.cropper.x2 - state.cropper.x1\"\n    [style.height.px]=\"state.cropper.y2 - state.cropper.y1\"\n    [style.margin-left]=\"state.options.alignImage === 'center' ? marginLeft : null\"\n    [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\"\n    (keydown)=\"keyboardAccess($event)\"\n    tabindex=\"0\"\n  >\n    <div\n      (mousedown)=\"startMove($event, moveTypes.Move)\"\n      (touchstart)=\"startMove($event, moveTypes.Move)\"\n      class=\"ngx-ic-move\"\n      role=\"presentation\">\n    </div>\n    <ng-container\n      *ngIf=\"!state.options.hideResizeSquares && !(state.options.cropperStaticWidth && state.options.cropperStaticHeight)\">\n      <span\n        class=\"ngx-ic-resize ngx-ic-topleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-top\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-topright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-right\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomright\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-bottom\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize ngx-ic-bottomleft\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\n      >\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span class=\"ngx-ic-resize ngx-ic-left\">\n        <span class=\"ngx-ic-square\"></span>\n      </span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-top\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-right\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-bottom\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\"\n      ></span>\n      <span\n        class=\"ngx-ic-resize-bar ngx-ic-left\"\n        role=\"presentation\"\n        (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\n        (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\"\n      ></span>\n    </ng-container>\n  </div>\n</div>\n", styles: [":host{display:flex;position:relative;width:100%;max-width:100%;max-height:100%;overflow:hidden;padding:5px;text-align:center}:host>div{width:100%;position:relative}:host>div img.ngx-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.ngx-ic-source-image.ngx-ic-draggable{user-drag:none;-webkit-user-drag:none;user-select:none;-moz-user-select:none;-webkit-user-select:none;-ms-user-select:none;cursor:grab}:host .ngx-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .ngx-ic-cropper{position:absolute;display:flex;color:#53535c;background:transparent;outline:rgba(255,255,255,.3) solid 100vw;outline:var(--cropper-outline-color, rgba(255, 255, 255, .3)) solid 100vw;touch-action:none}@media (orientation: portrait){:host .ngx-ic-cropper{outline-width:100vh}}:host .ngx-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .ngx-ic-cropper .ngx-ic-move{width:100%;cursor:move;border:var(--cropper-move-border, 1px solid rgba(255, 255, 255, .5))}:host .ngx-ic-cropper:focus .ngx-ic-move{border-color:#1e90ff;border-width:2px}:host .ngx-ic-cropper .ngx-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize .ngx-ic-square{display:inline-block;background:#53535c;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .ngx-ic-cropper .ngx-ic-resize.ngx-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar{position:absolute;z-index:1}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .ngx-ic-cropper .ngx-ic-resize-bar.ngx-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .ngx-ic-cropper.ngx-ic-round{outline-color:transparent}:host .ngx-ic-cropper.ngx-ic-round:after{border-radius:100%;box-shadow:0 0 0 100vw #ffffff4d;box-shadow:0 0 0 100vw var(--cropper-outline-color, rgba(255, 255, 255, .3))}@media (orientation: portrait){:host .ngx-ic-cropper.ngx-ic-round:after{box-shadow:0 0 0 100vh #ffffff4d;box-shadow:0 0 0 100vh var(--cropper-outline-color, rgba(255, 255, 255, .3))}}:host .ngx-ic-cropper.ngx-ic-round .ngx-ic-move{border-radius:100%}:host.disabled .ngx-ic-cropper .ngx-ic-resize,:host.disabled .ngx-ic-cropper .ngx-ic-resize-bar,:host.disabled .ngx-ic-cropper .ngx-ic-move{display:none}:host.ngx-ic-hidden{display:none}\n"] }]
+        }], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { wrapper: [{
                 type: ViewChild,
                 args: ['wrapper', { static: true }]
             }], sourceImage: [{
@@ -1354,12 +1390,18 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], imageAltText: [{
                 type: Input
+            }], options: [{
+                type: Input
             }], cropperFrameAriaLabel: [{
                 type: Input
             }], output: [{
                 type: Input
             }], format: [{
                 type: Input
+            }], autoCrop: [{
+                type: Input
+            }], cropper: [{
+                type: Input
             }], transform: [{
                 type: Input
             }], maintainAspectRatio: [{
@@ -1394,8 +1436,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], imageQuality: [{
                 type: Input
-            }], autoCrop: [{
-                type: Input
             }], backgroundColor: [{
                 type: Input
             }], containWithinAspectRatio: [{
@@ -1404,12 +1444,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], allowMoveImage: [{
                 type: Input
-            }], cropper: [{
+            }], checkImageType: [{
                 type: Input
             }], alignImage: [{
-                type: HostBinding,
-                args: ['style.text-align']
-            }, {
                 type: Input
             }], disabled: [{
                 type: HostBinding,
@@ -1418,7 +1455,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Input
             }], hidden: [{
                 type: HostBinding,
-                args: ['class.ngx-ix-hidden']
+                args: ['class.ngx-ic-hidden']
             }, {
                 type: Input
             }], imageCropped: [{
@@ -1433,6 +1470,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImpo
                 type: Output
             }], transformChange: [{
                 type: Output
+            }], cropperChange: [{
+                type: Output
+            }], alignImageStyle: [{
+                type: HostBinding,
+                args: ['style.text-align']
             }], onResize: [{
                 type: HostListener,
                 args: ['window:resize']
@@ -1454,5 +1496,5 @@ function base64ToFile(base64Image) {
  * Generated bundle index. Do not edit.
  */
 
-export { CropService, CropperSettings, ImageCropperComponent, LoadImageService, base64ToFile, resizeCanvas };
+export { CropService, ImageCropperComponent, LoadImageService, base64ToFile, resizeCanvas };
 //# sourceMappingURL=ngx-image-cropper.mjs.map