import * as i5 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { Injectable, EventEmitter, isDevMode, Component, ChangeDetectionStrategy, ViewChild, Input, HostBinding, Output, HostListener, NgModule } from '@angular/core';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i4 from '@angular/platform-browser';
import { CropperSettings, MoveTypes } from '@asoftwareworld/form-builder-pro/api';
import { resizeCanvas, percentage, supportsAutomaticRotation, getTransformationsFromExifData, getInvertedPositionForKey, getPositionForKey, getEventForKey } from '@asoftwareworld/form-builder-pro/utils';
import { merge, fromEvent } from 'rxjs';

/**
 * @license
 * Copyright ASW (A Software World) All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */
class CropService {
    crop(sourceImage, loadedImage, cropper, settings) {
        const imagePosition = this.getImagePosition(sourceImage, loadedImage, cropper, settings);
        const width = imagePosition.x2 - imagePosition.x1;
        const height = imagePosition.y2 - imagePosition.y1;
        const cropCanvas = document.createElement('canvas');
        cropCanvas.width = width;
        cropCanvas.height = height;
        const ctx = cropCanvas.getContext('2d');
        if (!ctx) {
            return null;
        }
        if (settings.backgroundColor != null) {
            ctx.fillStyle = settings.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(sourceImage, loadedImage, settings);
        const transformedImage = 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.drawImage(transformedImage.image, -transformedImage.size.width / 2, -transformedImage.size.height / 2);
        const output = {
            width,
            height,
            imagePosition,
            cropperPosition: { ...cropper }
        };
        if (settings.containWithinAspectRatio) {
            output.offsetImagePosition = this.getOffsetImagePosition(sourceImage, loadedImage, cropper, settings);
        }
        const resizeRatio = this.getResizeRatio(width, height, settings);
        if (resizeRatio !== 1) {
            output.width = Math.round(width * resizeRatio);
            output.height = settings.maintainAspectRatio ? Math.round(output.width / settings.aspectRatio) : Math.round(height * resizeRatio);
            resizeCanvas(cropCanvas, output.width, output.height);
        }
        output.base64 = cropCanvas.toDataURL('image/' + settings.format, this.getQuality(settings));
        return output;
    }
    getCanvasTranslate(sourceImage, loadedImage, settings) {
        if (settings.transform.translateUnit === 'px') {
            const ratio = this.getRatio(sourceImage, loadedImage);
            return {
                translateH: (settings.transform.translateH || 0) * ratio,
                translateV: (settings.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
            };
        }
    }
    getRatio(sourceImage, loadedImage) {
        const sourceImageElement = sourceImage.nativeElement;
        return loadedImage.transformed.size.width / sourceImageElement.offsetWidth;
    }
    getImagePosition(sourceImage, loadedImage, cropper, settings) {
        const ratio = this.getRatio(sourceImage, loadedImage);
        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)
        };
        if (!settings.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);
        }
        return out;
    }
    getOffsetImagePosition(sourceImage, loadedImage, cropper, settings) {
        const canvasRotation = settings.canvasRotation + loadedImage.exifTransform.rotate;
        const sourceImageElement = sourceImage.nativeElement;
        const ratio = loadedImage.transformed.size.width / sourceImageElement.offsetWidth;
        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;
        }
        else {
            offsetX = (loadedImage.transformed.size.width - loadedImage.original.size.width) / 2;
            offsetY = (loadedImage.transformed.size.height - 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
        };
        if (!settings.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);
        }
        return out;
    }
    getResizeRatio(width, height, settings) {
        const ratioWidth = settings.resizeToWidth / width;
        const ratioHeight = settings.resizeToHeight / height;
        const ratios = new Array();
        if (settings.resizeToWidth > 0) {
            ratios.push(ratioWidth);
        }
        if (settings.resizeToHeight > 0) {
            ratios.push(ratioHeight);
        }
        const result = ratios.length === 0 ? 1 : Math.min(...ratios);
        if (result > 1 && !settings.onlyScaleDown) {
            return result;
        }
        return Math.min(result, 1);
    }
    getQuality(settings) {
        return Math.min(1, Math.max(0, settings.imageQuality / 100));
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CropService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CropService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CropService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

/**
 * @license
 * Copyright ASW (A Software World) All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */
class CropperPositionService {
    resetCropperPosition(sourceImage, cropperPosition, settings) {
        if (!sourceImage?.nativeElement) {
            return;
        }
        const sourceImageElement = sourceImage.nativeElement;
        if (settings.cropperStaticHeight && settings.cropperStaticWidth) {
            cropperPosition.x1 = 0;
            cropperPosition.x2 = sourceImageElement.offsetWidth > settings.cropperStaticWidth ? settings.cropperStaticWidth : sourceImageElement.offsetWidth;
            cropperPosition.y1 = 0;
            cropperPosition.y2 = sourceImageElement.offsetHeight > settings.cropperStaticHeight ? settings.cropperStaticHeight : sourceImageElement.offsetHeight;
        }
        else {
            const cropperWidth = Math.min(settings.cropperScaledMaxWidth, sourceImageElement.offsetWidth);
            const cropperHeight = Math.min(settings.cropperScaledMaxHeight, sourceImageElement.offsetHeight);
            if (!settings.maintainAspectRatio) {
                cropperPosition.x1 = 0;
                cropperPosition.x2 = cropperWidth;
                cropperPosition.y1 = 0;
                cropperPosition.y2 = cropperHeight;
            }
            else if (sourceImageElement.offsetWidth / settings.aspectRatio < sourceImageElement.offsetHeight) {
                cropperPosition.x1 = 0;
                cropperPosition.x2 = cropperWidth;
                const cropperHeightWithAspectRatio = cropperWidth / settings.aspectRatio;
                cropperPosition.y1 = (sourceImageElement.offsetHeight - cropperHeightWithAspectRatio) / 2;
                cropperPosition.y2 = cropperPosition.y1 + cropperHeightWithAspectRatio;
            }
            else {
                cropperPosition.y1 = 0;
                cropperPosition.y2 = cropperHeight;
                const cropperWidthWithAspectRatio = cropperHeight * settings.aspectRatio;
                cropperPosition.x1 = (sourceImageElement.offsetWidth - 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) {
            // tslint:disable-next-line:no-non-null-assertion
            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;
        }
    }
    getClientX(event) {
        return event.touches?.[0].clientX || event.clientX || 0;
    }
    getClientY(event) {
        return event.touches?.[0].clientY || event.clientY || 0;
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CropperPositionService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CropperPositionService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: CropperPositionService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

/**
 * @license
 * Copyright ASW (A Software World) All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */
class LoadImageService {
    autoRotateSupported = supportsAutomaticRotation();
    loadImageFile(file, cropperSettings) {
        return new Promise((resolve, reject) => {
            const fileReader = new FileReader();
            fileReader.onload = (event) => {
                this.loadImage(event.target.result, file.type, cropperSettings).then(resolve).catch(reject);
            };
            fileReader.readAsDataURL(file);
        });
    }
    loadImage(imageBase64, imageType, cropperSettings) {
        if (!this.isValidImageType(imageType)) {
            return Promise.reject(new Error('Invalid image type'));
        }
        return this.loadBase64Image(imageBase64, cropperSettings);
    }
    isValidImageType(type) {
        return /image\/(png|jpg|jpeg|bmp|gif|tiff|webp|x-icon|vnd.microsoft.icon)/.test(type);
    }
    loadImageFromURL(url, cropperSettings) {
        return new Promise((resolve, reject) => {
            const img = new Image();
            img.onerror = () => reject;
            img.onload = () => {
                const canvas = document.createElement('canvas');
                const context = canvas.getContext('2d');
                canvas.width = img.width;
                canvas.height = img.height;
                context?.drawImage(img, 0, 0);
                this.loadBase64Image(canvas.toDataURL(), cropperSettings).then(resolve);
            };
            img.crossOrigin = 'anonymous';
            img.src = url;
        });
    }
    loadBase64Image(imageBase64, cropperSettings) {
        return new Promise((resolve, reject) => {
            const originalImage = new Image();
            originalImage.onload = () => resolve({
                originalImage,
                originalBase64: imageBase64
            });
            originalImage.onerror = reject;
            originalImage.src = imageBase64;
        }).then((res) => this.transformImageBase64(res, cropperSettings));
    }
    async transformImageBase64(res, cropperSettings) {
        const autoRotate = await this.autoRotateSupported;
        const exifTransform = await getTransformationsFromExifData(autoRotate ? -1 : res.originalBase64);
        if (!res.originalImage || !res.originalImage.complete) {
            return Promise.reject(new Error('No image loaded'));
        }
        const loadedImage = {
            original: {
                base64: res.originalBase64,
                image: res.originalImage,
                size: {
                    width: res.originalImage.naturalWidth,
                    height: res.originalImage.naturalHeight
                }
            },
            exifTransform
        };
        return this.transformLoadedImage(loadedImage, cropperSettings);
    }
    async transformLoadedImage(loadedImage, cropperSettings) {
        // tslint:disable-next-line:no-non-null-assertion
        const canvasRotation = cropperSettings.canvasRotation + loadedImage.exifTransform.rotate;
        const originalSize = {
            // tslint:disable-next-line:no-non-null-assertion
            width: loadedImage.original.image.naturalWidth,
            // tslint:disable-next-line:no-non-null-assertion
            height: loadedImage.original.image.naturalHeight
        };
        // tslint:disable-next-line:no-non-null-assertion
        if (canvasRotation === 0 && !loadedImage.exifTransform.flip && !cropperSettings.containWithinAspectRatio) {
            return {
                original: {
                    // tslint:disable-next-line:no-non-null-assertion
                    base64: loadedImage.original.base64,
                    // tslint:disable-next-line:no-non-null-assertion
                    image: loadedImage.original.image,
                    size: { ...originalSize }
                },
                transformed: {
                    // tslint:disable-next-line:no-non-null-assertion
                    base64: loadedImage.original.base64,
                    // tslint:disable-next-line:no-non-null-assertion
                    image: loadedImage.original.image,
                    size: { ...originalSize }
                },
                // tslint:disable-next-line:no-non-null-assertion
                exifTransform: loadedImage.exifTransform
            };
        }
        // tslint:disable-next-line:no-non-null-assertion
        const transformedSize = this.getTransformedSize(originalSize, loadedImage.exifTransform, cropperSettings);
        const canvas = document.createElement('canvas');
        canvas.width = transformedSize.width;
        canvas.height = transformedSize.height;
        const ctx = canvas.getContext('2d');
        ctx?.setTransform(
        // tslint:disable-next-line:no-non-null-assertion
        loadedImage.exifTransform.flip ? -1 : 1, 0, 0, 1, canvas.width / 2, canvas.height / 2);
        ctx?.rotate(Math.PI * (canvasRotation / 2));
        ctx?.drawImage(
        // tslint:disable-next-line:no-non-null-assertion
        loadedImage.original.image, -originalSize.width / 2, -originalSize.height / 2);
        const transformedBase64 = canvas.toDataURL();
        const transformedImage = await this.loadImageFromBase64(transformedBase64);
        return {
            original: {
                // tslint:disable-next-line:no-non-null-assertion
                base64: loadedImage.original.base64,
                // tslint:disable-next-line:no-non-null-assertion
                image: loadedImage.original.image,
                size: { ...originalSize }
            },
            transformed: {
                base64: transformedBase64,
                image: transformedImage,
                size: {
                    width: transformedImage.width,
                    height: transformedImage.height
                }
            },
            // tslint:disable-next-line:no-non-null-assertion
            exifTransform: loadedImage.exifTransform
        };
    }
    loadImageFromBase64(imageBase64) {
        return new Promise((resolve, reject) => {
            const image = new Image();
            image.onload = () => resolve(image);
            image.onerror = reject;
            image.src = imageBase64;
        });
    }
    getTransformedSize(originalSize, exifTransform, cropperSettings) {
        const canvasRotation = cropperSettings.canvasRotation + exifTransform.rotate;
        if (cropperSettings.containWithinAspectRatio) {
            if (canvasRotation % 2) {
                const minWidthToContain = originalSize.width * cropperSettings.aspectRatio;
                const minHeightToContain = originalSize.height / cropperSettings.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;
                return {
                    width: Math.max(originalSize.width, minWidthToContain),
                    height: Math.max(originalSize.height, minHeightToContain)
                };
            }
        }
        if (canvasRotation % 2) {
            return {
                height: originalSize.width,
                width: originalSize.height
            };
        }
        return {
            width: originalSize.width,
            height: originalSize.height
        };
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LoadImageService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
    static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LoadImageService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: LoadImageService, decorators: [{
            type: Injectable,
            args: [{ providedIn: 'root' }]
        }] });

/**
 * @license
 * Copyright ASW (A Software World) All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */
class AswImageCropComponent {
    cropService;
    cropperPositionService;
    loadImageService;
    sanitizer;
    cd;
    ngZone;
    Hammer = window.Hammer || null;
    settings = new CropperSettings();
    setImageMaxSizeRetries = 0;
    moveStart;
    loadedImage;
    mouseAndTouchmoveSubscription;
    safeImgDataUrl;
    safeTransformStyle;
    marginLeft = '0px';
    maxSize = {
        width: 0,
        height: 0
    };
    moveTypes = MoveTypes;
    imageVisible = false;
    wrapper;
    sourceImage;
    imageChangedEvent;
    imageURL;
    imageBase64;
    imageFile;
    format = this.settings.format;
    transform = {};
    maintainAspectRatio = this.settings.maintainAspectRatio;
    aspectRatio = this.settings.aspectRatio;
    resizeToWidth = this.settings.resizeToWidth;
    resizeToHeight = this.settings.resizeToHeight;
    cropperMinWidth = this.settings.cropperMinWidth;
    cropperMinHeight = this.settings.cropperMinHeight;
    cropperMaxHeight = this.settings.cropperMaxHeight;
    cropperMaxWidth = this.settings.cropperMaxWidth;
    cropperStaticWidth = this.settings.cropperStaticWidth;
    cropperStaticHeight = this.settings.cropperStaticHeight;
    canvasRotation = this.settings.canvasRotation;
    initialStepSize = this.settings.initialStepSize;
    roundCropper = this.settings.roundCropper;
    onlyScaleDown = this.settings.onlyScaleDown;
    imageQuality = this.settings.imageQuality;
    autoCrop = this.settings.autoCrop;
    backgroundColor = this.settings.backgroundColor;
    containWithinAspectRatio = this.settings.containWithinAspectRatio;
    hideResizeSquares = this.settings.hideResizeSquares;
    allowMoveImage = false;
    cropper = {
        x1: -100,
        y1: -100,
        x2: 10000,
        y2: 10000
    };
    alignImage = this.settings.alignImage;
    disabled = false;
    imageCropped = new EventEmitter();
    startCropImage = new EventEmitter();
    imageLoaded = new EventEmitter();
    cropperReady = new EventEmitter();
    loadImageFailed = new EventEmitter();
    transformChange = new EventEmitter();
    constructor(cropService, cropperPositionService, loadImageService, sanitizer, cd, ngZone) {
        this.cropService = cropService;
        this.cropperPositionService = cropperPositionService;
        this.loadImageService = loadImageService;
        this.sanitizer = sanitizer;
        this.cd = cd;
        this.ngZone = ngZone;
        this.reset();
    }
    ngOnChanges(changes) {
        this.onChangesUpdateSettings(changes);
        this.onChangesInputImage(changes);
        if (this.loadedImage?.original.image.complete && (changes.containWithinAspectRatio || changes.canvasRotation)) {
            this.loadImageService
                .transformLoadedImage(this.loadedImage, this.settings)
                .then((res) => this.setLoadedImage(res))
                .catch((err) => this.loadImageError(err));
        }
        if (changes.cropper || changes.maintainAspectRatio || changes.aspectRatio) {
            this.setMaxSize();
            this.setCropperScaledMinSize();
            this.setCropperScaledMaxSize();
            if (this.maintainAspectRatio && (changes.maintainAspectRatio || changes.aspectRatio)) {
                this.resetCropperPosition();
            }
            else if (changes.cropper) {
                this.checkCropperPosition(false);
                this.doAutoCrop();
            }
            this.cd.markForCheck();
        }
        if (changes.transform) {
            this.transform = this.transform || {};
            this.setCssTransform();
            this.doAutoCrop();
            this.cd.markForCheck();
        }
    }
    onChangesUpdateSettings(changes) {
        this.settings.setOptionsFromChanges(changes);
        if (this.settings.cropperStaticHeight && this.settings.cropperStaticWidth) {
            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();
        }
        if (changes.imageChangedEvent && this.isValidImageChangedEvent()) {
            this.loadImageFile(this.imageChangedEvent.target.files[0]);
        }
        if (changes.imageURL && this.imageURL) {
            this.loadImageFromURL(this.imageURL);
        }
        if (changes.imageBase64 && this.imageBase64) {
            this.loadBase64Image(this.imageBase64);
        }
        if (changes.imageFile && this.imageFile) {
            this.loadImageFile(this.imageFile);
        }
    }
    isValidImageChangedEvent() {
        return this.imageChangedEvent?.target?.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.ngZone.runOutsideAngular(() => {
            this.activatePinchGesture();
            this.mouseAndTouchmoveSubscription = merge(fromEvent(document, 'mousemove'), fromEvent(document, 'touchmove')).subscribe(this.moveImg.bind(this));
        });
    }
    reset() {
        this.imageVisible = false;
        this.loadedImage = undefined;
        this.safeImgDataUrl = '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;
    }
    loadImageFile(file) {
        this.loadImageService
            .loadImageFile(file, this.settings)
            .then((res) => this.setLoadedImage(res))
            .catch((err) => this.loadImageError(err));
    }
    loadBase64Image(imageBase64) {
        this.loadImageService
            .loadBase64Image(imageBase64, this.settings)
            .then((res) => this.setLoadedImage(res))
            .catch((err) => this.loadImageError(err));
    }
    loadImageFromURL(url) {
        this.loadImageService
            .loadImageFromURL(url, this.settings)
            .then((res) => this.setLoadedImage(res))
            .catch((err) => this.loadImageError(err));
    }
    setLoadedImage(loadedImage) {
        this.loadedImage = loadedImage;
        this.safeImgDataUrl = this.sanitizer.bypassSecurityTrustResourceUrl(loadedImage.transformed.base64);
        this.cd.markForCheck();
    }
    loadImageError(error) {
        console.error(error);
        this.loadImageFailed.emit();
    }
    imageLoadedInView() {
        if (this.loadedImage != null) {
            this.imageLoaded.emit(this.loadedImage);
            this.setImageMaxSizeRetries = 0;
            setTimeout(() => this.checkImageMaxSizeRecursively());
        }
    }
    checkImageMaxSizeRecursively() {
        if (this.setImageMaxSizeRetries > 40) {
            this.loadImageFailed.emit();
        }
        else if (this.sourceImageLoaded()) {
            this.setMaxSize();
            this.setCropperScaledMinSize();
            this.setCropperScaledMaxSize();
            this.resetCropperPosition();
            this.cropperReady.emit({ ...this.maxSize });
            this.cd.markForCheck();
        }
        else {
            this.setImageMaxSizeRetries++;
            setTimeout(() => this.checkImageMaxSizeRecursively(), 50);
        }
    }
    sourceImageLoaded() {
        return this.sourceImage?.nativeElement?.offsetWidth > 0;
    }
    onResize() {
        if (!this.loadedImage) {
            return;
        }
        this.resizeCropperPosition();
        this.setMaxSize();
        this.setCropperScaledMinSize();
        this.setCropperScaledMaxSize();
    }
    activatePinchGesture() {
        if (this.Hammer) {
            const hammer = new this.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("[AswImageCropper] Could not find HammerJS - Pinch Gesture won't work");
        }
    }
    resizeCropperPosition() {
        const sourceImageElement = this.sourceImage.nativeElement;
        if (this.maxSize.width !== sourceImageElement.offsetWidth || this.maxSize.height !== sourceImageElement.offsetHeight) {
            this.cropper.x1 = (this.cropper.x1 * sourceImageElement.offsetWidth) / this.maxSize.width;
            this.cropper.x2 = (this.cropper.x2 * sourceImageElement.offsetWidth) / this.maxSize.width;
            this.cropper.y1 = (this.cropper.y1 * sourceImageElement.offsetHeight) / this.maxSize.height;
            this.cropper.y2 = (this.cropper.y2 * sourceImageElement.offsetHeight) / this.maxSize.height;
        }
    }
    resetCropperPosition() {
        this.cropperPositionService.resetCropperPosition(this.sourceImage, this.cropper, this.settings);
        this.doAutoCrop();
        this.imageVisible = true;
    }
    keyboardAccess(event) {
        this.changeKeyboardStepSize(event);
        this.keyboardMoveCropper(event);
    }
    changeKeyboardStepSize(event) {
        const key = +event.key;
        if (key >= 1 && key <= 9) {
            this.settings.stepSize = key;
        }
    }
    keyboardMoveCropper(event) {
        const keyboardWhiteList = ['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'];
        if (!keyboardWhiteList.includes(event.key)) {
            return;
        }
        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);
        event.preventDefault();
        event.stopPropagation();
        this.startMove({ clientX: 0, clientY: 0 }, moveType, position);
        this.moveImg(moveEvent);
        this.moveStop();
    }
    startMove(event, moveType, position = null) {
        if (this.disabled || (this.moveStart?.active && this.moveStart?.type === MoveTypes.Pinch) || (moveType === MoveTypes.Drag && !this.allowMoveImage)) {
            return;
        }
        if (event.preventDefault) {
            event.preventDefault();
        }
        this.moveStart = {
            active: true,
            type: moveType,
            position,
            transform: { ...this.transform },
            clientX: this.cropperPositionService.getClientX(event),
            clientY: this.cropperPositionService.getClientY(event),
            ...this.cropper
        };
    }
    startPinch(event) {
        if (!this.safeImgDataUrl) {
            return;
        }
        if (event.preventDefault) {
            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
        };
    }
    moveImg(event) {
        // tslint:disable-next-line:no-non-null-assertion
        if (this.moveStart.active) {
            if (event.stopPropagation) {
                event.stopPropagation();
            }
            if (event.preventDefault) {
                event.preventDefault();
            }
            // tslint:disable-next-line:no-non-null-assertion
            if (this.moveStart.type === MoveTypes.Move) {
                // tslint:disable-next-line:no-non-null-assertion
                this.cropperPositionService.move(event, this.moveStart, this.cropper);
                this.checkCropperPosition(true);
                // tslint:disable-next-line:no-non-null-assertion
            }
            else if (this.moveStart.type === MoveTypes.Resize) {
                if (!this.cropperStaticWidth && !this.cropperStaticHeight) {
                    // tslint:disable-next-line:no-non-null-assertion
                    this.cropperPositionService.resize(event, this.moveStart, this.cropper, this.maxSize, this.settings);
                }
                this.checkCropperPosition(false);
                // tslint:disable-next-line:no-non-null-assertion
            }
            else if (this.moveStart.type === MoveTypes.Drag) {
                // tslint:disable-next-line:no-non-null-assertion
                const diffX = this.cropperPositionService.getClientX(event) - this.moveStart.clientX;
                // tslint:disable-next-line:no-non-null-assertion
                const diffY = this.cropperPositionService.getClientY(event) - this.moveStart.clientY;
                this.transform = {
                    ...this.transform,
                    // tslint:disable-next-line:no-non-null-assertion
                    translateH: (this.moveStart.transform?.translateH || 0) + diffX,
                    // tslint:disable-next-line:no-non-null-assertion
                    translateV: (this.moveStart.transform?.translateV || 0) + diffY
                };
                this.setCssTransform();
            }
            this.cd.detectChanges();
        }
    }
    onPinch(event) {
        // tslint:disable-next-line:no-non-null-assertion
        if (this.moveStart.active) {
            if (event.stopPropagation) {
                event.stopPropagation();
            }
            if (event.preventDefault) {
                event.preventDefault();
            }
            // tslint:disable-next-line:no-non-null-assertion
            if (this.moveStart.type === MoveTypes.Pinch) {
                // tslint:disable-next-line:no-non-null-assertion
                this.cropperPositionService.resize(event, this.moveStart, this.cropper, this.maxSize, this.settings);
                this.checkCropperPosition(false);
            }
            this.cd.detectChanges();
        }
    }
    setMaxSize() {
        if (this.sourceImage) {
            const sourceImageElement = this.sourceImage.nativeElement;
            this.maxSize.width = sourceImageElement.offsetWidth;
            this.maxSize.height = sourceImageElement.offsetHeight;
            this.marginLeft = this.sanitizer.bypassSecurityTrustStyle('calc(50% - ' + this.maxSize.width / 2 + 'px)');
        }
    }
    setCropperScaledMinSize() {
        if (this.loadedImage?.transformed?.image) {
            this.setCropperScaledMinWidth();
            this.setCropperScaledMinHeight();
        }
        else {
            this.settings.cropperScaledMinWidth = 20;
            this.settings.cropperScaledMinHeight = 20;
        }
    }
    setCropperScaledMinWidth() {
        this.settings.cropperScaledMinWidth =
            this.cropperMinWidth > 0
                ? // tslint:disable-next-line:no-non-null-assertion
                    Math.max(20, (this.cropperMinWidth / this.loadedImage.transformed.image.width) * this.maxSize.width)
                : 20;
    }
    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, 
            // tslint:disable-next-line:no-non-null-assertion
            (this.cropperMinHeight / this.loadedImage.transformed.image.height) * this.maxSize.height);
        }
        else {
            this.settings.cropperScaledMinHeight = 20;
        }
    }
    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;
                }
            }
        }
        else {
            this.settings.cropperScaledMaxWidth = this.maxSize.width;
            this.settings.cropperScaledMaxHeight = this.maxSize.height;
        }
    }
    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;
        }
        if (this.cropper.y2 > this.maxSize.height) {
            this.cropper.y1 -= maintainSize ? this.cropper.y2 - this.maxSize.height : 0;
            this.cropper.y2 = this.maxSize.height;
        }
    }
    moveStop() {
        // tslint:disable-next-line:no-non-null-assertion
        if (this.moveStart.active) {
            // tslint:disable-next-line:no-non-null-assertion
            this.moveStart.active = false;
            if (this.moveStart?.type === MoveTypes.Drag) {
                this.transformChange.emit(this.transform);
            }
            else {
                this.doAutoCrop();
            }
        }
    }
    pinchStop() {
        // tslint:disable-next-line:no-non-null-assertion
        if (this.moveStart.active) {
            // tslint:disable-next-line:no-non-null-assertion
            this.moveStart.active = false;
            this.doAutoCrop();
        }
    }
    doAutoCrop() {
        if (this.autoCrop) {
            this.crop();
        }
    }
    crop() {
        if (this.loadedImage?.transformed?.image != null) {
            this.startCropImage.emit();
            const output = this.cropService.crop(this.sourceImage, this.loadedImage, this.cropper, this.settings);
            if (output != null) {
                this.imageCropped.emit(output);
            }
            return output;
        }
        return null;
    }
    ngOnDestroy() {
        if (this.mouseAndTouchmoveSubscription) {
            this.mouseAndTouchmoveSubscription.unsubscribe();
        }
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageCropComponent, deps: [{ token: CropService }, { token: CropperPositionService }, { token: LoadImageService }, { token: i4.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AswImageCropComponent, selector: "asw-image-crop", inputs: { imageChangedEvent: "imageChangedEvent", imageURL: "imageURL", imageBase64: "imageBase64", imageFile: "imageFile", format: "format", transform: "transform", maintainAspectRatio: "maintainAspectRatio", aspectRatio: "aspectRatio", 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" }, outputs: { imageCropped: "imageCropped", startCropImage: "startCropImage", imageLoaded: "imageLoaded", cropperReady: "cropperReady", loadImageFailed: "loadImageFailed", transformChange: "transformChange" }, host: { listeners: { "window:resize": "onResize()", "document:mouseup": "moveStop()", "document:touchend": "moveStop()" }, properties: { "style.text-align": "this.alignImage", "class.disabled": "this.disabled" } }, 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 [style.background]=\"imageVisible && backgroundColor\" #wrapper>\r\n    <img #sourceImage class=\"asw-ic-source-image\" *ngIf=\"safeImgDataUrl\" [src]=\"safeImgDataUrl\"\r\n        [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\" [style.transform]=\"safeTransformStyle\"\r\n        [class.asw-ic-draggable]=\"!disabled && allowMoveImage\" (load)=\"imageLoadedInView()\"\r\n        (mousedown)=\"startMove($event, moveTypes.Drag)\" (touchstart)=\"startMove($event, moveTypes.Drag)\">\r\n    <div class=\"asw-ic-overlay\" [style.width.px]=\"maxSize.width\" [style.height.px]=\"maxSize.height\"\r\n        [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"></div>\r\n    <div class=\"asw-ic-cropper\" *ngIf=\"imageVisible\" [class.asw-ic-round]=\"roundCropper\" [style.top.px]=\"cropper.y1\"\r\n        [style.left.px]=\"cropper.x1\" [style.width.px]=\"cropper.x2 - cropper.x1\"\r\n        [style.height.px]=\"cropper.y2 - cropper.y1\" [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\r\n        [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\" (keydown)=\"keyboardAccess($event)\" tabindex=\"0\">\r\n        <div (mousedown)=\"startMove($event, moveTypes.Move)\" (touchstart)=\"startMove($event, moveTypes.Move)\"\r\n            class=\"asw-ic-move\">\r\n        </div>\r\n        <ng-container *ngIf=\"!hideResizeSquares\">\r\n            <span class=\"asw-ic-resize asw-ic-topleft\" (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-top\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-topright\" (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-right\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-bottomright\"\r\n                (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-bottom\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-bottomleft\"\r\n                (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-left\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-top\" (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-right\" (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-bottom\" (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-left\" (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n</div>", 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.asw-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.asw-ic-source-image.asw-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 .asw-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .asw-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 .asw-ic-cropper{outline-width:100vh}}:host .asw-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .asw-ic-cropper .asw-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .asw-ic-cropper:focus .asw-ic-move{border-color:#1e90ff;border-width:2px}:host .asw-ic-cropper .asw-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .asw-ic-cropper .asw-ic-resize .asw-ic-square{display:inline-block;background:#53535C;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .asw-ic-cropper .asw-ic-resize.asw-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .asw-ic-cropper .asw-ic-resize-bar{position:absolute;z-index:1}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .asw-ic-cropper.asw-ic-round{outline-color:transparent}:host .asw-ic-cropper.asw-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 .asw-ic-cropper.asw-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 .asw-ic-cropper.asw-ic-round .asw-ic-move{border-radius:100%}:host.disabled .asw-ic-cropper .asw-ic-resize,:host.disabled .asw-ic-cropper .asw-ic-resize-bar,:host.disabled .asw-ic-cropper .asw-ic-move{display:none}\n"], dependencies: [{ kind: "directive", type: i5.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageCropComponent, decorators: [{
            type: Component,
            args: [{ selector: 'asw-image-crop', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div [style.background]=\"imageVisible && backgroundColor\" #wrapper>\r\n    <img #sourceImage class=\"asw-ic-source-image\" *ngIf=\"safeImgDataUrl\" [src]=\"safeImgDataUrl\"\r\n        [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\" [style.transform]=\"safeTransformStyle\"\r\n        [class.asw-ic-draggable]=\"!disabled && allowMoveImage\" (load)=\"imageLoadedInView()\"\r\n        (mousedown)=\"startMove($event, moveTypes.Drag)\" (touchstart)=\"startMove($event, moveTypes.Drag)\">\r\n    <div class=\"asw-ic-overlay\" [style.width.px]=\"maxSize.width\" [style.height.px]=\"maxSize.height\"\r\n        [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"></div>\r\n    <div class=\"asw-ic-cropper\" *ngIf=\"imageVisible\" [class.asw-ic-round]=\"roundCropper\" [style.top.px]=\"cropper.y1\"\r\n        [style.left.px]=\"cropper.x1\" [style.width.px]=\"cropper.x2 - cropper.x1\"\r\n        [style.height.px]=\"cropper.y2 - cropper.y1\" [style.margin-left]=\"alignImage === 'center' ? marginLeft : null\"\r\n        [style.visibility]=\"imageVisible ? 'visible' : 'hidden'\" (keydown)=\"keyboardAccess($event)\" tabindex=\"0\">\r\n        <div (mousedown)=\"startMove($event, moveTypes.Move)\" (touchstart)=\"startMove($event, moveTypes.Move)\"\r\n            class=\"asw-ic-move\">\r\n        </div>\r\n        <ng-container *ngIf=\"!hideResizeSquares\">\r\n            <span class=\"asw-ic-resize asw-ic-topleft\" (mousedown)=\"startMove($event, moveTypes.Resize, 'topleft')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'topleft')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-top\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-topright\" (mousedown)=\"startMove($event, moveTypes.Resize, 'topright')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'topright')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-right\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-bottomright\"\r\n                (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomright')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomright')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-bottom\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-bottomleft\"\r\n                (mousedown)=\"startMove($event, moveTypes.Resize, 'bottomleft')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'bottomleft')\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize asw-ic-left\">\r\n                <span class=\"asw-ic-square\"></span>\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-top\" (mousedown)=\"startMove($event, moveTypes.Resize, 'top')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'top')\">\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-right\" (mousedown)=\"startMove($event, moveTypes.Resize, 'right')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'right')\">\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-bottom\" (mousedown)=\"startMove($event, moveTypes.Resize, 'bottom')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'bottom')\">\r\n            </span>\r\n            <span class=\"asw-ic-resize-bar asw-ic-left\" (mousedown)=\"startMove($event, moveTypes.Resize, 'left')\"\r\n                (touchstart)=\"startMove($event, moveTypes.Resize, 'left')\">\r\n            </span>\r\n        </ng-container>\r\n    </div>\r\n</div>", 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.asw-ic-source-image{max-width:100%;max-height:100%;transform-origin:center}:host>div img.asw-ic-source-image.asw-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 .asw-ic-overlay{position:absolute;pointer-events:none;touch-action:none;outline:var(--cropper-overlay-color, white) solid 100vw;top:0;left:0}:host .asw-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 .asw-ic-cropper{outline-width:100vh}}:host .asw-ic-cropper:after{position:absolute;content:\"\";inset:0;pointer-events:none;border:dashed 1px;opacity:.75;color:inherit;z-index:1}:host .asw-ic-cropper .asw-ic-move{width:100%;cursor:move;border:1px solid rgba(255,255,255,.5)}:host .asw-ic-cropper:focus .asw-ic-move{border-color:#1e90ff;border-width:2px}:host .asw-ic-cropper .asw-ic-resize{position:absolute;display:inline-block;line-height:6px;padding:8px;opacity:.85;z-index:1}:host .asw-ic-cropper .asw-ic-resize .asw-ic-square{display:inline-block;background:#53535C;width:6px;height:6px;border:1px solid rgba(255,255,255,.5);box-sizing:content-box}:host .asw-ic-cropper .asw-ic-resize.asw-ic-topleft{top:-12px;left:-12px;cursor:nwse-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-top{top:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-topright{top:-12px;right:-12px;cursor:nesw-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-right{top:calc(50% - 12px);right:-12px;cursor:ew-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-bottomright{bottom:-12px;right:-12px;cursor:nwse-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-bottom{bottom:-12px;left:calc(50% - 12px);cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-bottomleft{bottom:-12px;left:-12px;cursor:nesw-resize}:host .asw-ic-cropper .asw-ic-resize.asw-ic-left{top:calc(50% - 12px);left:-12px;cursor:ew-resize}:host .asw-ic-cropper .asw-ic-resize-bar{position:absolute;z-index:1}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-top{top:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-right{top:11px;right:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-bottom{bottom:-11px;left:11px;width:calc(100% - 22px);height:22px;cursor:ns-resize}:host .asw-ic-cropper .asw-ic-resize-bar.asw-ic-left{top:11px;left:-11px;height:calc(100% - 22px);width:22px;cursor:ew-resize}:host .asw-ic-cropper.asw-ic-round{outline-color:transparent}:host .asw-ic-cropper.asw-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 .asw-ic-cropper.asw-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 .asw-ic-cropper.asw-ic-round .asw-ic-move{border-radius:100%}:host.disabled .asw-ic-cropper .asw-ic-resize,:host.disabled .asw-ic-cropper .asw-ic-resize-bar,:host.disabled .asw-ic-cropper .asw-ic-move{display:none}\n"] }]
        }], ctorParameters: function () { return [{ type: CropService }, { type: CropperPositionService }, { type: LoadImageService }, { type: i4.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: i0.NgZone }]; }, propDecorators: { wrapper: [{
                type: ViewChild,
                args: ['wrapper', { static: true }]
            }], sourceImage: [{
                type: ViewChild,
                args: ['sourceImage', { static: false }]
            }], imageChangedEvent: [{
                type: Input
            }], imageURL: [{
                type: Input
            }], imageBase64: [{
                type: Input
            }], imageFile: [{
                type: Input
            }], format: [{
                type: Input
            }], transform: [{
                type: Input
            }], maintainAspectRatio: [{
                type: Input
            }], aspectRatio: [{
                type: Input
            }], resizeToWidth: [{
                type: Input
            }], resizeToHeight: [{
                type: Input
            }], cropperMinWidth: [{
                type: Input
            }], cropperMinHeight: [{
                type: Input
            }], cropperMaxHeight: [{
                type: Input
            }], cropperMaxWidth: [{
                type: Input
            }], cropperStaticWidth: [{
                type: Input
            }], cropperStaticHeight: [{
                type: Input
            }], canvasRotation: [{
                type: Input
            }], initialStepSize: [{
                type: Input
            }], roundCropper: [{
                type: Input
            }], onlyScaleDown: [{
                type: Input
            }], imageQuality: [{
                type: Input
            }], autoCrop: [{
                type: Input
            }], backgroundColor: [{
                type: Input
            }], containWithinAspectRatio: [{
                type: Input
            }], hideResizeSquares: [{
                type: Input
            }], allowMoveImage: [{
                type: Input
            }], cropper: [{
                type: Input
            }], alignImage: [{
                type: HostBinding,
                args: ['style.text-align']
            }, {
                type: Input
            }], disabled: [{
                type: HostBinding,
                args: ['class.disabled']
            }, {
                type: Input
            }], imageCropped: [{
                type: Output
            }], startCropImage: [{
                type: Output
            }], imageLoaded: [{
                type: Output
            }], cropperReady: [{
                type: Output
            }], loadImageFailed: [{
                type: Output
            }], transformChange: [{
                type: Output
            }], onResize: [{
                type: HostListener,
                args: ['window:resize']
            }], moveStop: [{
                type: HostListener,
                args: ['document:mouseup']
            }, {
                type: HostListener,
                args: ['document:touchend']
            }] } });

/**
 * @license
 * Copyright ASW (A Software World) All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */
class AswImageCropModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageCropModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: AswImageCropModule, declarations: [AswImageCropComponent], imports: [CommonModule, FormsModule, ReactiveFormsModule], exports: [AswImageCropComponent] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageCropModule, imports: [CommonModule, FormsModule, ReactiveFormsModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageCropModule, decorators: [{
            type: NgModule,
            args: [{
                    imports: [CommonModule, FormsModule, ReactiveFormsModule],
                    declarations: [AswImageCropComponent],
                    exports: [AswImageCropComponent]
                }]
        }] });

/**
 * @license
 * Copyright ASW (A Software World) All Rights Reserved.
 *
 * Use of this source code is governed by an MIT-style license that can be
 * found in the LICENSE file
 */

/**
 * Generated bundle index. Do not edit.
 */

export { AswImageCropComponent, AswImageCropModule };
//# sourceMappingURL=asoftwareworld-form-builder-pro-image-crop.mjs.map
