import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Inject, Input, Output, NgModule } from '@angular/core';
import * as i3 from '@angular/forms';
import { FormsModule } from '@angular/forms';
import * as i10 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, MaterialModule, AswPipeModule } from '@asoftwareworld/form-builder-pro/common';
import * as i9 from '@asoftwareworld/form-builder-pro/core';
import { AswTranslateModule } from '@asoftwareworld/form-builder-pro/core';
import * as i1 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { fabric } from 'fabric';
import * as i4 from '@angular/material/button';
import * as i5 from '@angular/material/button-toggle';
import * as i6 from '@angular/material/card';
import * as i7 from '@angular/material/divider';
import * as i8 from '@angular/material/tooltip';

/**
 * @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 AswImageDrawing {
    dialogRef;
    control;
    src;
    width = 680;
    height = 250;
    forceSizeCanvas = true;
    forceSizeExport = true;
    enableRemoveImage = true;
    enableLoadAnotherImage = true;
    enableTooltip = true;
    showCancelButton = true;
    /* @deprecated Use i18n.saveBtn */
    saveBtnText = 'Save';
    /* @deprecated Use i18n.cancelBtn */
    cancelBtnText = 'Cancel';
    /* @deprecated Use i18n.loading */
    loadingText = 'Loading…';
    loadingTemplate;
    errorTemplate;
    outputMimeType = 'image/jpeg';
    outputQuality = 0.8;
    save = new EventEmitter();
    cancel = new EventEmitter();
    constant = Constants;
    icons = Icons;
    currentTool = 'brush';
    currentSize = 3;
    currentColor = '#000105';
    canUndo = false;
    canRedo = false;
    isLoading = false;
    hasError = false;
    errorMessage = '';
    canvas;
    stack = [];
    colorsName = [];
    imageUsed;
    constructor(dialogRef, control) {
        this.dialogRef = dialogRef;
        this.control = control;
    }
    ngOnInit() {
        if (this.control.controlType === 'signature') {
            this.enableLoadAnotherImage = false;
        }
        this.src = this.control.imageUrl;
        this.colorsName = Object.keys(this.constant.colors);
        this.canvas = new fabric.Canvas('aswCanvas', {
            hoverCursor: 'pointer',
            isDrawingMode: true
        });
        this.canvas.backgroundColor = 'white';
        if (this.src) {
            this.importPhotoFromSrc(this.src);
        }
        else {
            if (!this.width || !this.height) {
                throw new Error('No width or hight given !');
            }
            this.canvas.setWidth(this.width);
            this.canvas.setHeight(this.height);
        }
        this.canvas.on('path:created', () => {
            this.stack = [];
            this.setUndoRedo();
        });
        this.selectTool(this.currentTool);
        this.selectColor(this.currentColor);
        this.selectDrawingSize(this.currentSize);
    }
    // Tools
    selectTool(tool) {
        this.currentTool = tool;
    }
    selectDrawingSize(size) {
        this.currentSize = size;
        if (this.canvas) {
            this.canvas.freeDrawingBrush.width = size;
        }
    }
    selectColor(color) {
        this.currentColor = color;
        if (this.canvas) {
            this.canvas.freeDrawingBrush.color = color;
        }
    }
    /**
     * Change color from input
     */
    changeColorManual(color) {
        const isValid = /(^#[0-9A-F]{6}$)|(^#[0-9A-F]{3}$)/i.test(color);
        if (isValid) {
            this.currentColor = color;
            this.selectColor(this.currentColor);
        }
    }
    // Actions
    undo() {
        if (this.canUndo) {
            const lastId = this.canvas.getObjects().length - 1;
            const lastObj = this.canvas.getObjects()[lastId];
            this.stack.push(lastObj);
            this.canvas.remove(lastObj);
            this.setUndoRedo();
        }
    }
    redo() {
        if (this.canRedo) {
            const firstInStack = this.stack.splice(-1, 1)[0];
            if (firstInStack) {
                this.canvas.insertAt(firstInStack, this.canvas.getObjects().length - 1, false);
            }
            this.setUndoRedo();
        }
    }
    clearCanvas() {
        if (this.canvas) {
            this.canvas.remove(...this.canvas.getObjects());
            this.setUndoRedo();
        }
    }
    saveImage() {
        this.canvas.getElement().toBlob((data) => {
            const reader = new FileReader();
            reader.readAsDataURL(data);
            reader.onloadend = () => {
                const base64data = reader.result;
                this.control.imageUrl = base64data;
            };
        }, this.outputMimeType, this.outputQuality);
    }
    setUndoRedo() {
        this.canUndo = this.canvas.getObjects().length > 0;
        this.canRedo = this.stack.length > 0;
        // this.canvas.renderAll();
    }
    importPhotoFromFile(event) {
        if (event.target.files && event.target.files.length > 0) {
            const file = event.target.files[0];
            if (file.type.match('image.*')) {
                this.importPhotoFromBlob(file);
            }
            else {
                throw new Error('Not an image !');
            }
        }
    }
    removeImage() {
        if (this.imageUsed) {
            this.imageUsed.dispose();
            this.imageUsed = null;
        }
        this.canvas.backgroundImage = null;
        if (this.width && this.height) {
            this.canvas.setWidth(this.width);
            this.canvas.setHeight(this.height);
        }
        this.canvas.renderAll();
    }
    get hasImage() {
        return !!this.canvas.backgroundImage;
    }
    importPhotoFromSrc(src) {
        this.isLoading = true;
        let isFirstTry = true;
        const imgEl = new Image();
        imgEl.setAttribute('crossOrigin', 'anonymous');
        imgEl.src = src;
        imgEl.onerror = () => {
            // Retry with cors proxy
            if (isFirstTry) {
                imgEl.src = 'https://cors-anywhere.herokuapp.com/' + this.src;
                isFirstTry = false;
            }
            else {
                this.isLoading = false;
                this.hasError = true;
                // this.errorMessage = this.getTextTranslated('loadError').replace('%@', this.src as string);
            }
        };
        imgEl.onload = () => {
            this.isLoading = false;
            this.imageUsed = new fabric.Image(imgEl);
            this.imageUsed.cloneAsImage((image) => {
                let width = imgEl.width;
                let height = imgEl.height;
                const ratio = 640 / width < 480 / height ? 640 / width : 480 / width;
                width = width * ratio;
                height = height * ratio;
                image.scaleToWidth(width, false);
                image.scaleToHeight(height, false);
                this.canvas.setBackgroundImage(image, (img) => {
                    if (img) {
                        if (this.forceSizeCanvas) {
                            this.canvas.setWidth(width);
                            this.canvas.setHeight(height);
                        }
                        else {
                            this.canvas.setWidth(image.getScaledWidth());
                            this.canvas.setHeight(image.getScaledHeight());
                        }
                    }
                }, {
                    crossOrigin: 'anonymous',
                    originX: 'left',
                    originY: 'top'
                });
            });
        };
    }
    importPhotoFromBlob(file) {
        const reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (evtReader) => {
            if (evtReader.target.readyState === FileReader.DONE) {
                this.importPhotoFromSrc(evtReader.target.result);
            }
        };
    }
    ngOnChanges(changes) {
        if (changes.src && !changes.src.firstChange && changes.src.currentValue) {
            if (typeof changes.src.currentValue === 'string') {
                this.importPhotoFromSrc(changes.src.currentValue);
            }
            else if (changes.src.currentValue instanceof Blob) {
                this.importPhotoFromBlob(changes.src.currentValue);
            }
        }
    }
    onNoClick() {
        this.dialogRef.close();
    }
    onSubmit(aswEditPropertyForm) {
        if (aswEditPropertyForm.invalid) {
            return;
        }
        this.saveImage();
        this.dialogRef.close(this.control);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageDrawing, deps: [{ token: i1.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AswImageDrawing, selector: "asw-image-drawing", inputs: { src: "src", width: "width", height: "height", forceSizeCanvas: "forceSizeCanvas", forceSizeExport: "forceSizeExport", enableRemoveImage: "enableRemoveImage", enableLoadAnotherImage: "enableLoadAnotherImage", enableTooltip: "enableTooltip", showCancelButton: "showCancelButton", saveBtnText: "saveBtnText", cancelBtnText: "cancelBtnText", loadingText: "loadingText", loadingTemplate: "loadingTemplate", errorTemplate: "errorTemplate", outputMimeType: "outputMimeType", outputQuality: "outputQuality" }, outputs: { save: "save", cancel: "cancel" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"asw-dialog-header\">\r\n    <div class=\"asw-edit-row-dialog\">\r\n        <div class=\"asw-dialog-header clearfix\">\r\n            <div class=\"asw-dialog-about\">\r\n                <h1 mat-dialog-title class=\"asw-m-0\">{{'FormControl.Edit' | aswTranslate}} {{control.label}}</h1>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n        <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n    </button>\r\n</div>\r\n<mat-divider></mat-divider>\r\n<form #aswEditPropertyForm=\"ngForm\" (ngSubmit)=\"onSubmit(aswEditPropertyForm)\" novalidate>\r\n    <mat-dialog-content class=\"mat-typography\">\r\n        <div class=\"asw-row asw-p-2\">\r\n            <div class=\"asw-col-md-9\">\r\n                <mat-card>\r\n                    <mat-card-content>\r\n                        <div class=\"loading\" *ngIf=\"isLoading\">\r\n                            <ng-container *ngTemplateOutlet=\"loadingTemplate ? loadingTemplate : defaultLoading\"></ng-container>\r\n                        </div>\r\n                        <div class=\"error\" *ngIf=\"hasError\">\r\n                            <ng-container *ngTemplateOutlet=\"errorTemplate ? errorTemplate : defaultError\"></ng-container>\r\n                        </div>                        \r\n                        <ng-template #defaultLoading><p>{{ loadingText }}</p></ng-template>\r\n                        <ng-template #defaultError> <p>{{ errorMessage }}</p> </ng-template>\r\n                        <canvas #aswCanvas id=\"aswCanvas\" class=\"asw-drawing-canvas\"></canvas>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n            </div>\r\n            <div class=\"asw-col-md-3\" *ngIf=\"!isLoading\">\r\n                <div class=\"asw-sticky-top\">\r\n                    <mat-card>\r\n                        <mat-card-content>\r\n                            <h6 class=\"asw-fs-6 asw-my-2\">{{'FormControl.Options' | aswTranslate}}:</h6>\r\n                            <div class=\"asw-row\">\r\n                                <div class=\"asw-col-md-12 asw-d-grid\">\r\n                                    <button class=\"asw-button asw-button-primary\" type=\"button\"\r\n                                        *ngIf=\"enableLoadAnotherImage && !hasImage\" \r\n                                        (click)=\"fileInput.click();\"\r\n                                        matTooltip=\"{{'FormControl.LoadImage' | aswTranslate}}\">\r\n                                        <input style=\"display: none\" \r\n                                            type=\"file\" \r\n                                            #fileInput \r\n                                            (change)=\"importPhotoFromFile($event)\"\r\n                                            accept=\"image/*\"/>\r\n                                        {{'FormControl.LoadImage' | aswTranslate}}\r\n                                    </button>\r\n                                    <button class=\"asw-button asw-button-primary\" type=\"button\"\r\n                                        *ngIf=\"enableRemoveImage && hasImage\" \r\n                                        (click)=\"removeImage()\"\r\n                                        matTooltip=\"{{'FormControl.RemoveImage' | aswTranslate}}\">\r\n                                        {{'FormControl.RemoveImage' | aswTranslate}}\r\n                                    </button>\r\n                                </div>\r\n                                <h6 class=\"asw-fs-6 asw-my-2\">{{'FormControl.BrushSize' | aswTranslate}}:</h6>\r\n                                <ul class=\"asw-options\">\r\n                                    <li class=\"option tool\" style=\"display: none\"\r\n                                        [class.selected]=\"currentTool == 'brush'\" \r\n                                        (click)=\"selectTool('brush')\"\r\n                                        id=\"brush\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14.445\" height=\"14.462\" viewBox=\"0 0 14.445 14.462\">\r\n                                            <path id=\"Path_153\" data-name=\"Path 153\" d=\"M8.319,8.378l6.014-6.535a.4.4,0,0,0-.024-.577L13.155.111a.4.4,0,0,0-.553,0L6.066,6.125a.4.4,0,0,0,0,.577L7.742,8.378a.4.4,0,0,0,.577,0Zm-3.44-.89,2.093,2.1a.8.8,0,0,1,.249.457v.393a3.208,3.208,0,0,1-.938,2.277,6.223,6.223,0,0,1-4.739,1.732,2.326,2.326,0,0,1-1.427-.481.4.4,0,0,1-.048-.505,4.772,4.772,0,0,0,.714-2.609A3.626,3.626,0,0,1,1.744,8.17a3.208,3.208,0,0,1,2.269-.938,3.134,3.134,0,0,1,.393,0A.874.874,0,0,1,4.879,7.488Z\" fill=\"#5a6168\" fill-rule=\"evenodd\"/>\r\n                                        </svg>\r\n                                        <span>{{'FormControl.Brush' | aswTranslate}}</span>\r\n                                    </li>\r\n                                    <li class=\"option\">\r\n                                        <input type=\"range\" \r\n                                            [(ngModel)]=\"currentSize\"\r\n                                            #input=\"ngModel\"\r\n                                            name=\"sliders\"\r\n                                            id=\"size-slider\"\r\n                                            (change)=\"selectDrawingSize(currentSize)\"\r\n                                            max=\"30\">\r\n                                    </li>\r\n                                </ul>\r\n                            </div>\r\n                            <br>\r\n                            <div class=\"asw-pb-2\">\r\n                                <mat-button-toggle-group class=\"asw-width-100\">\r\n                                    <mat-button-toggle matTooltip=\"{{'editor.Undo' | aswTranslate}}\"\r\n                                            [disabled]=\"!canUndo\"\r\n                                            class=\"asw-width-100\"\r\n                                            (change)=\"undo()\">\r\n                                            <span [ngClass]=\"{'asw-icon-disabled': !canUndo }\" [innerHTML]=\"icons.undo | aswSafeHtml\"></span>\r\n                                        {{'editor.Undo' | aswTranslate}}\r\n                                    </mat-button-toggle>\r\n                                    <mat-button-toggle matTooltip=\"{{'editor.Redo' | aswTranslate}}\"\r\n                                            [disabled]=\"!canRedo\"\r\n                                            class=\"asw-width-100\"\r\n                                            (change)=\"redo()\">\r\n                                            <span [ngClass]=\"{'asw-icon-disabled': !canRedo }\" [innerHTML]=\"icons.redo | aswSafeHtml\"></span>\r\n                                        {{'editor.Redo' | aswTranslate}}\r\n                                    </mat-button-toggle>\r\n                                </mat-button-toggle-group>\r\n                            </div>\r\n                            <mat-divider></mat-divider>\r\n                            <h6 class=\"asw-fs-6 asw-my-2\">{{'FormControl.Colors' | aswTranslate}}:</h6>\r\n                            <div class=\"asw-color-picker\">\r\n                                <div class=\"opened\">\r\n                                    <div class=\"colors\">\r\n                                        <div [ngClass]=\"colorName\" \r\n                                            [class.selected]=\"currentColor == constant.colors[colorName]\"\r\n                                            (click)=\"selectColor(constant.colors[colorName])\" \r\n                                            *ngFor=\"let colorName of colorsName\" \r\n                                            class=\"circle\"\r\n                                            [style.background]=\"constant.colors[colorName]\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"asw-hex-code\">\r\n                                        <p>Hex Code</p>\r\n                                        <div class=\"asw-input\">\r\n                                        <input type=\"text\" maxlength=\"7\" [value]=\"currentColor\"\r\n                                                (keyup)=\"changeColorManual(paintInput.value)\"\r\n                                                #paintInput/>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <mat-divider></mat-divider>\r\n                            <div class=\"asw-row asw-pt-2\">\r\n                                <div class=\"asw-col-md-12  asw-d-grid\">\r\n                                    <button class=\"asw-button asw-button-outline-secondary\" \r\n                                        type=\"button\"\r\n                                        matTooltip=\"{{'FormControl.ClearCanvas' | aswTranslate}}\"\r\n                                        (click)=\"clearCanvas()\">\r\n                                        {{'FormControl.ClearCanvas' | aswTranslate}}\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </mat-card-content>\r\n                    </mat-card>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n    <mat-divider></mat-divider>\r\n    <mat-dialog-actions align=\"end\">\r\n        <button type=\"button\"\r\n                class=\"asw-button asw-button-danger asw-me-2 asw-mb-1\"\r\n                (click)=\"onNoClick()\">\r\n            No\r\n        </button>\r\n        <button type=\"submit\"\r\n                class=\"asw-button asw-button-primary asw-mb-1\"\r\n                cdkFocusInitial>\r\n            Yes\r\n        </button>\r\n    </mat-dialog-actions>\r\n</form>\r\n", styles: [".asw-drawing-canvas{border:1.5px #d6d6d6 dashed;border-radius:7px}.asw-row .asw-options{list-style:none;margin:0}.asw-row .asw-options .option{display:flex;-webkit-user-select:none;user-select:none;cursor:pointer;align-items:center;margin-bottom:10px}.asw-row .asw-options .option img{width:17px}.option:is(:hover,.active) img{filter:invert(17%) sepia(90%) saturate(3000%) hue-rotate(900deg) brightness(100%) contrast(100%)}.option :where(span,label){color:#5a6168;cursor:pointer;padding-left:10px}.option:is(:hover,.active) :where(span,label){color:#4a98f7}.option #fill-color{height:15px;width:15px;cursor:pointer}#fill-color:checked~label{color:#4a98f7}.option #size-slider{width:100%;height:5px;margin-top:10px}\n"], dependencies: [{ kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i2.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i2.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i3.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i3.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3.RangeValueAccessor, selector: "input[type=range][formControlName],input[type=range][formControl],input[type=range][ngModel]" }, { kind: "directive", type: i3.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i3.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i3.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["disableRipple", "aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "appearance", "checked", "disabled"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "component", type: i6.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i6.MatCardContent, selector: "mat-card-content" }, { kind: "directive", type: i1.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i1.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "pipe", type: i9.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i10.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageDrawing, decorators: [{
            type: Component,
            args: [{ selector: 'asw-image-drawing', template: "<div class=\"asw-dialog-header\">\r\n    <div class=\"asw-edit-row-dialog\">\r\n        <div class=\"asw-dialog-header clearfix\">\r\n            <div class=\"asw-dialog-about\">\r\n                <h1 mat-dialog-title class=\"asw-m-0\">{{'FormControl.Edit' | aswTranslate}} {{control.label}}</h1>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n        <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n    </button>\r\n</div>\r\n<mat-divider></mat-divider>\r\n<form #aswEditPropertyForm=\"ngForm\" (ngSubmit)=\"onSubmit(aswEditPropertyForm)\" novalidate>\r\n    <mat-dialog-content class=\"mat-typography\">\r\n        <div class=\"asw-row asw-p-2\">\r\n            <div class=\"asw-col-md-9\">\r\n                <mat-card>\r\n                    <mat-card-content>\r\n                        <div class=\"loading\" *ngIf=\"isLoading\">\r\n                            <ng-container *ngTemplateOutlet=\"loadingTemplate ? loadingTemplate : defaultLoading\"></ng-container>\r\n                        </div>\r\n                        <div class=\"error\" *ngIf=\"hasError\">\r\n                            <ng-container *ngTemplateOutlet=\"errorTemplate ? errorTemplate : defaultError\"></ng-container>\r\n                        </div>                        \r\n                        <ng-template #defaultLoading><p>{{ loadingText }}</p></ng-template>\r\n                        <ng-template #defaultError> <p>{{ errorMessage }}</p> </ng-template>\r\n                        <canvas #aswCanvas id=\"aswCanvas\" class=\"asw-drawing-canvas\"></canvas>\r\n                    </mat-card-content>\r\n                </mat-card>\r\n            </div>\r\n            <div class=\"asw-col-md-3\" *ngIf=\"!isLoading\">\r\n                <div class=\"asw-sticky-top\">\r\n                    <mat-card>\r\n                        <mat-card-content>\r\n                            <h6 class=\"asw-fs-6 asw-my-2\">{{'FormControl.Options' | aswTranslate}}:</h6>\r\n                            <div class=\"asw-row\">\r\n                                <div class=\"asw-col-md-12 asw-d-grid\">\r\n                                    <button class=\"asw-button asw-button-primary\" type=\"button\"\r\n                                        *ngIf=\"enableLoadAnotherImage && !hasImage\" \r\n                                        (click)=\"fileInput.click();\"\r\n                                        matTooltip=\"{{'FormControl.LoadImage' | aswTranslate}}\">\r\n                                        <input style=\"display: none\" \r\n                                            type=\"file\" \r\n                                            #fileInput \r\n                                            (change)=\"importPhotoFromFile($event)\"\r\n                                            accept=\"image/*\"/>\r\n                                        {{'FormControl.LoadImage' | aswTranslate}}\r\n                                    </button>\r\n                                    <button class=\"asw-button asw-button-primary\" type=\"button\"\r\n                                        *ngIf=\"enableRemoveImage && hasImage\" \r\n                                        (click)=\"removeImage()\"\r\n                                        matTooltip=\"{{'FormControl.RemoveImage' | aswTranslate}}\">\r\n                                        {{'FormControl.RemoveImage' | aswTranslate}}\r\n                                    </button>\r\n                                </div>\r\n                                <h6 class=\"asw-fs-6 asw-my-2\">{{'FormControl.BrushSize' | aswTranslate}}:</h6>\r\n                                <ul class=\"asw-options\">\r\n                                    <li class=\"option tool\" style=\"display: none\"\r\n                                        [class.selected]=\"currentTool == 'brush'\" \r\n                                        (click)=\"selectTool('brush')\"\r\n                                        id=\"brush\">\r\n                                        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"14.445\" height=\"14.462\" viewBox=\"0 0 14.445 14.462\">\r\n                                            <path id=\"Path_153\" data-name=\"Path 153\" d=\"M8.319,8.378l6.014-6.535a.4.4,0,0,0-.024-.577L13.155.111a.4.4,0,0,0-.553,0L6.066,6.125a.4.4,0,0,0,0,.577L7.742,8.378a.4.4,0,0,0,.577,0Zm-3.44-.89,2.093,2.1a.8.8,0,0,1,.249.457v.393a3.208,3.208,0,0,1-.938,2.277,6.223,6.223,0,0,1-4.739,1.732,2.326,2.326,0,0,1-1.427-.481.4.4,0,0,1-.048-.505,4.772,4.772,0,0,0,.714-2.609A3.626,3.626,0,0,1,1.744,8.17a3.208,3.208,0,0,1,2.269-.938,3.134,3.134,0,0,1,.393,0A.874.874,0,0,1,4.879,7.488Z\" fill=\"#5a6168\" fill-rule=\"evenodd\"/>\r\n                                        </svg>\r\n                                        <span>{{'FormControl.Brush' | aswTranslate}}</span>\r\n                                    </li>\r\n                                    <li class=\"option\">\r\n                                        <input type=\"range\" \r\n                                            [(ngModel)]=\"currentSize\"\r\n                                            #input=\"ngModel\"\r\n                                            name=\"sliders\"\r\n                                            id=\"size-slider\"\r\n                                            (change)=\"selectDrawingSize(currentSize)\"\r\n                                            max=\"30\">\r\n                                    </li>\r\n                                </ul>\r\n                            </div>\r\n                            <br>\r\n                            <div class=\"asw-pb-2\">\r\n                                <mat-button-toggle-group class=\"asw-width-100\">\r\n                                    <mat-button-toggle matTooltip=\"{{'editor.Undo' | aswTranslate}}\"\r\n                                            [disabled]=\"!canUndo\"\r\n                                            class=\"asw-width-100\"\r\n                                            (change)=\"undo()\">\r\n                                            <span [ngClass]=\"{'asw-icon-disabled': !canUndo }\" [innerHTML]=\"icons.undo | aswSafeHtml\"></span>\r\n                                        {{'editor.Undo' | aswTranslate}}\r\n                                    </mat-button-toggle>\r\n                                    <mat-button-toggle matTooltip=\"{{'editor.Redo' | aswTranslate}}\"\r\n                                            [disabled]=\"!canRedo\"\r\n                                            class=\"asw-width-100\"\r\n                                            (change)=\"redo()\">\r\n                                            <span [ngClass]=\"{'asw-icon-disabled': !canRedo }\" [innerHTML]=\"icons.redo | aswSafeHtml\"></span>\r\n                                        {{'editor.Redo' | aswTranslate}}\r\n                                    </mat-button-toggle>\r\n                                </mat-button-toggle-group>\r\n                            </div>\r\n                            <mat-divider></mat-divider>\r\n                            <h6 class=\"asw-fs-6 asw-my-2\">{{'FormControl.Colors' | aswTranslate}}:</h6>\r\n                            <div class=\"asw-color-picker\">\r\n                                <div class=\"opened\">\r\n                                    <div class=\"colors\">\r\n                                        <div [ngClass]=\"colorName\" \r\n                                            [class.selected]=\"currentColor == constant.colors[colorName]\"\r\n                                            (click)=\"selectColor(constant.colors[colorName])\" \r\n                                            *ngFor=\"let colorName of colorsName\" \r\n                                            class=\"circle\"\r\n                                            [style.background]=\"constant.colors[colorName]\">\r\n                                        </div>\r\n                                    </div>\r\n                                    <div class=\"asw-hex-code\">\r\n                                        <p>Hex Code</p>\r\n                                        <div class=\"asw-input\">\r\n                                        <input type=\"text\" maxlength=\"7\" [value]=\"currentColor\"\r\n                                                (keyup)=\"changeColorManual(paintInput.value)\"\r\n                                                #paintInput/>\r\n                                        </div>\r\n                                    </div>\r\n                                </div>\r\n                            </div>\r\n                            <mat-divider></mat-divider>\r\n                            <div class=\"asw-row asw-pt-2\">\r\n                                <div class=\"asw-col-md-12  asw-d-grid\">\r\n                                    <button class=\"asw-button asw-button-outline-secondary\" \r\n                                        type=\"button\"\r\n                                        matTooltip=\"{{'FormControl.ClearCanvas' | aswTranslate}}\"\r\n                                        (click)=\"clearCanvas()\">\r\n                                        {{'FormControl.ClearCanvas' | aswTranslate}}\r\n                                    </button>\r\n                                </div>\r\n                            </div>\r\n                        </mat-card-content>\r\n                    </mat-card>\r\n                </div>\r\n            </div>\r\n        </div>\r\n    </mat-dialog-content>\r\n    <mat-divider></mat-divider>\r\n    <mat-dialog-actions align=\"end\">\r\n        <button type=\"button\"\r\n                class=\"asw-button asw-button-danger asw-me-2 asw-mb-1\"\r\n                (click)=\"onNoClick()\">\r\n            No\r\n        </button>\r\n        <button type=\"submit\"\r\n                class=\"asw-button asw-button-primary asw-mb-1\"\r\n                cdkFocusInitial>\r\n            Yes\r\n        </button>\r\n    </mat-dialog-actions>\r\n</form>\r\n", styles: [".asw-drawing-canvas{border:1.5px #d6d6d6 dashed;border-radius:7px}.asw-row .asw-options{list-style:none;margin:0}.asw-row .asw-options .option{display:flex;-webkit-user-select:none;user-select:none;cursor:pointer;align-items:center;margin-bottom:10px}.asw-row .asw-options .option img{width:17px}.option:is(:hover,.active) img{filter:invert(17%) sepia(90%) saturate(3000%) hue-rotate(900deg) brightness(100%) contrast(100%)}.option :where(span,label){color:#5a6168;cursor:pointer;padding-left:10px}.option:is(:hover,.active) :where(span,label){color:#4a98f7}.option #fill-color{height:15px;width:15px;cursor:pointer}#fill-color:checked~label{color:#4a98f7}.option #size-slider{width:100%;height:5px;margin-top:10px}\n"] }]
        }], ctorParameters: function () { return [{ type: i1.MatDialogRef }, { type: undefined, decorators: [{
                    type: Inject,
                    args: [MAT_DIALOG_DATA]
                }] }]; }, propDecorators: { src: [{
                type: Input
            }], width: [{
                type: Input
            }], height: [{
                type: Input
            }], forceSizeCanvas: [{
                type: Input
            }], forceSizeExport: [{
                type: Input
            }], enableRemoveImage: [{
                type: Input
            }], enableLoadAnotherImage: [{
                type: Input
            }], enableTooltip: [{
                type: Input
            }], showCancelButton: [{
                type: Input
            }], saveBtnText: [{
                type: Input
            }], cancelBtnText: [{
                type: Input
            }], loadingText: [{
                type: Input
            }], loadingTemplate: [{
                type: Input
            }], errorTemplate: [{
                type: Input
            }], outputMimeType: [{
                type: Input
            }], outputQuality: [{
                type: Input
            }], save: [{
                type: Output
            }], cancel: [{
                type: Output
            }] } });

/**
 * @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 AswImageDrawingModule {
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageDrawingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
    static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.2", ngImport: i0, type: AswImageDrawingModule, declarations: [AswImageDrawing], imports: [CommonModule, FormsModule, MaterialModule, AswTranslateModule, AswPipeModule], exports: [AswImageDrawing] });
    static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageDrawingModule, imports: [CommonModule, FormsModule, MaterialModule, AswTranslateModule, AswPipeModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswImageDrawingModule, decorators: [{
            type: NgModule,
            args: [{
                    declarations: [AswImageDrawing],
                    exports: [AswImageDrawing],
                    imports: [CommonModule, FormsModule, MaterialModule, AswTranslateModule, AswPipeModule]
                }]
        }] });

/**
 * @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 { AswImageDrawing, AswImageDrawingModule };
//# sourceMappingURL=asoftwareworld-form-builder-pro-image-drawing.mjs.map
