@asoftwareworld/form-builder-pro
Version:
ASW Form Builder Pro helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same b
349 lines (343 loc) • 38.4 kB
JavaScript
import * as i2 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i0 from '@angular/core';
import { EventEmitter, Output, Input, Inject, Component, 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: "18.2.8", 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: "18.2.8", 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 | aswTranslate}}</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<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-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]", exportAs: ["matButton"] }, { kind: "directive", type: i5.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i5.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], 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.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i7.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i8.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "pipe", type: i9.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i10.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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 | aswTranslate}}</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<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-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: () => [{ 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: "18.2.8", ngImport: i0, type: AswImageDrawingModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.8", ngImport: i0, type: AswImageDrawingModule, declarations: [AswImageDrawing], imports: [CommonModule, FormsModule, MaterialModule, AswTranslateModule, AswPipeModule], exports: [AswImageDrawing] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswImageDrawingModule, imports: [CommonModule, FormsModule, MaterialModule, AswTranslateModule, AswPipeModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", 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