@asoftwareworld/form-builder
Version:
ASW Form Builder 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 befor
320 lines (316 loc) • 55.3 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Inject, EventEmitter, Input, Output, NgModule } from '@angular/core';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder/form-control/confirm-dialog';
import { Constants, ObjectUtils } from '@asoftwareworld/form-builder/form-control/core';
import * as i1 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i5 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i6 from '@angular/material/form-field';
import { MatFormFieldModule } from '@angular/material/form-field';
import * as i7 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i8 from '@angular/material/core';
import * as i9 from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import * as i10 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i4$1 from '@asoftwareworld/form-builder/image-crop';
import { AswImageCropModule } from '@asoftwareworld/form-builder/image-crop';
import * as i5$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
/**
* @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 AswImageDialog {
formBuilder;
dialogRef;
control;
constants = Constants;
aswImageForm;
objectUtils = ObjectUtils;
constructor(formBuilder, dialogRef, control) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.control = control;
}
ngOnInit() {
this.validateFormBuilder();
this.editProperty(this.control);
}
validateFormBuilder() {
this.aswImageForm = this.formBuilder.group({
label: ['', [Validators.required, Validators.minLength(5)]],
column: [],
class: [],
imageUrl: [],
imageShape: [],
height: ['', [Validators.max(600), Validators.min(0)]],
width: ['', [Validators.max(600), Validators.min(0)]]
});
}
editProperty(control) {
this.aswImageForm.setValue({
label: control.label,
class: control.class,
column: control.column,
imageUrl: control.imageUrl,
imageShape: control.imageShape,
width: control.width,
height: control.height
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswImageForm.invalid) {
return;
}
this.aswImageForm.value.controlType = this.control.controlType;
this.dialogRef.close(this.aswImageForm.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswImageDialog, deps: [{ token: i1.FormBuilder }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: AswImageDialog, selector: "asw-image-dialog", ngImport: i0, template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<form [formGroup]=\"aswImageForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-full-width\"><br>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Label</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter label\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"label\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswImageForm.get('label')?.hasError(validation.type) && (aswImageForm.get('label')?.dirty || aswImageForm.get('label')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Image url</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter image url\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"imageUrl\">\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Height</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n min=\"0\" \r\n max=\"600\"\r\n placeholder=\"Height\"\r\n (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n matTooltip=\"Height\"\r\n formControlName=\"height\">\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.height\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswImageForm.get('height')?.hasError(validation.type) && (aswImageForm.get('height')?.dirty || aswImageForm.get('height')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Width</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n min=\"0\" \r\n max=\"600\"\r\n placeholder=\"Width\"\r\n (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n matTooltip=\"Width\"\r\n formControlName=\"width\">\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.width\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswImageForm.get('width')?.hasError(validation.type) && (aswImageForm.get('width')?.dirty || aswImageForm.get('width')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Select image shape</mat-label>\r\n <mat-select formControlName=\"imageShape\" matTooltip=\"Select image shape\">\r\n <mat-option value=\"asw-circular-square\">Circle</mat-option>\r\n <mat-option value=\"asw-original\">Square</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n Text style: \r\n <mat-button-toggle-group formControlName=\"class\" name=\"fontStyle\" aria-label=\"Font Style\">\r\n <mat-button-toggle value=\"text-left text-start\" aria-label=\"Text align left\">\r\n <mat-icon>format_align_left</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"text-center\" aria-label=\"Text align center\">\r\n <mat-icon>format_align_center</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"text-right text-end\" aria-label=\"Text align right\">\r\n <mat-icon>format_align_right</mat-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\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=\"btn btn-danger mr-2 mb-1 me-2\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\r\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.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: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i6.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i6.MatLabel, selector: "mat-label" }, { kind: "directive", type: i6.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i7.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i8.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i9.MatButtonToggleGroup, selector: "mat-button-toggle-group", inputs: ["appearance", "name", "vertical", "value", "multiple", "disabled", "disabledInteractive", "hideSingleSelectionIndicator", "hideMultipleSelectionIndicator"], outputs: ["valueChange", "change"], exportAs: ["matButtonToggleGroup"] }, { kind: "component", type: i9.MatButtonToggle, selector: "mat-button-toggle", inputs: ["aria-label", "aria-labelledby", "id", "name", "value", "tabIndex", "disableRipple", "appearance", "checked", "disabled", "disabledInteractive"], outputs: ["change"], exportAs: ["matButtonToggle"] }, { kind: "directive", type: i10.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly"], exportAs: ["matInput"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswImageDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-image-dialog', template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<form [formGroup]=\"aswImageForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-full-width\"><br>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Label</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter label\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"label\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswImageForm.get('label')?.hasError(validation.type) && (aswImageForm.get('label')?.dirty || aswImageForm.get('label')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Image url</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter image url\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"imageUrl\">\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Height</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n min=\"0\" \r\n max=\"600\"\r\n placeholder=\"Height\"\r\n (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n matTooltip=\"Height\"\r\n formControlName=\"height\">\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.height\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswImageForm.get('height')?.hasError(validation.type) && (aswImageForm.get('height')?.dirty || aswImageForm.get('height')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Width</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n min=\"0\" \r\n max=\"600\"\r\n placeholder=\"Width\"\r\n (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n matTooltip=\"Width\"\r\n formControlName=\"width\">\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.width\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswImageForm.get('width')?.hasError(validation.type) && (aswImageForm.get('width')?.dirty || aswImageForm.get('width')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Select image shape</mat-label>\r\n <mat-select formControlName=\"imageShape\" matTooltip=\"Select image shape\">\r\n <mat-option value=\"asw-circular-square\">Circle</mat-option>\r\n <mat-option value=\"asw-original\">Square</mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n Text style: \r\n <mat-button-toggle-group formControlName=\"class\" name=\"fontStyle\" aria-label=\"Font Style\">\r\n <mat-button-toggle value=\"text-left text-start\" aria-label=\"Text align left\">\r\n <mat-icon>format_align_left</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"text-center\" aria-label=\"Text align center\">\r\n <mat-icon>format_align_center</mat-icon>\r\n </mat-button-toggle>\r\n <mat-button-toggle value=\"text-right text-end\" aria-label=\"Text align right\">\r\n <mat-icon>format_align_right</mat-icon>\r\n </mat-button-toggle>\r\n </mat-button-toggle-group>\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=\"btn btn-danger mr-2 mb-1 me-2\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\r\n" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }] });
/**
* @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 AswImageUploadDialog {
formBuilder;
dialogRef;
control;
constants = Constants;
aswImageCropForm;
imageChangedEvent = '';
croppedImage = '';
canvasRotation = 0;
rotation = 0;
scale = 1;
showCropper = false;
isImageLoaded = false;
containWithinAspectRatio = false;
transform = {};
constructor(formBuilder, dialogRef, control) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.control = control;
}
ngOnInit() {
this.validateFormBuilder();
this.editProperty(this.control);
this.croppedImage = this.control.imageUrl;
this.isImageLoaded = this.control.imageUrl ? false : true;
}
fileChangeEvent(event) {
this.isImageLoaded = true;
this.imageChangedEvent = event;
}
removeImage() {
this.isImageLoaded = true;
this.imageChangedEvent = null;
}
imageCropped(event) {
this.croppedImage = event.base64;
}
imageLoaded() {
this.showCropper = true;
}
cropperReady(sourceImageDimensions) {
this.isImageLoaded = false;
}
loadImageFailed() {
console.log('Load failed');
}
rotateLeft() {
this.isImageLoaded = true;
setTimeout(() => {
this.canvasRotation--;
this.flipAfterRotate();
});
}
rotateRight() {
this.isImageLoaded = true;
setTimeout(() => {
this.canvasRotation++;
this.flipAfterRotate();
});
}
flipAfterRotate() {
const flippedH = this.transform.flipH;
const flippedV = this.transform.flipV;
this.transform = {
...this.transform,
flipH: flippedV,
flipV: flippedH
};
}
flipHorizontal() {
this.transform = {
...this.transform,
flipH: !this.transform.flipH
};
}
flipVertical() {
this.transform = {
...this.transform,
flipV: !this.transform.flipV
};
}
resetImage() {
this.scale = 1;
this.rotation = 0;
this.canvasRotation = 0;
this.transform = {};
}
zoomOut() {
this.scale -= .1;
this.transform = {
...this.transform,
scale: this.scale
};
}
zoomIn() {
this.scale += .1;
this.transform = {
...this.transform,
scale: this.scale
};
}
toggleContainWithinAspectRatio() {
this.containWithinAspectRatio = !this.containWithinAspectRatio;
}
updateRotation() {
this.transform = {
...this.transform,
rotate: this.rotation
};
}
onNoClick() {
this.dialogRef.close();
}
validateFormBuilder() {
this.aswImageCropForm = this.formBuilder.group({
file: [null]
});
}
editProperty(control) {
if (control.event) {
this.isImageLoaded = false;
}
this.aswImageCropForm.setValue({
file: control.imageUrl
});
}
onSubmit() {
if (this.aswImageCropForm.invalid) {
return;
}
this.aswImageCropForm.value.displayName = this.control.displayName;
this.aswImageCropForm.value.controlType = this.control.controlType;
this.aswImageCropForm.value.label = this.control.label;
this.aswImageCropForm.value.class = this.control.class;
this.aswImageCropForm.value.column = this.control.column;
this.aswImageCropForm.value.imageUrl = this.croppedImage;
this.aswImageCropForm.value.imageShape = this.control.imageShape;
this.aswImageCropForm.value.height = this.control.height;
this.aswImageCropForm.value.width = this.control.width;
this.aswImageCropForm.value.event = this.imageChangedEvent;
this.dialogRef.close(this.aswImageCropForm.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswImageUploadDialog, deps: [{ token: i1.FormBuilder }, { token: i2.MatDialogRef }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: AswImageUploadDialog, selector: "asw-image-upload-dialog", ngImport: i0, template: "<h4 mat-dialog-title>Crop Uploaded Image</h4>\r\n<form [formGroup]=\"aswImageCropForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2\">\r\n <div class=\"text-center btn-toolbar mt-2\" role=\"toolbar\" aria-label=\"Image controls toolbar\">\r\n <div class=\"btn-group-vertical\" role=\"group\" aria-label=\"toolbar\">\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n (click)=\"fileInput.click()\"\r\n matTooltip=\"Load image\" \r\n *ngIf=\"isImageLoaded\">\r\n <input style=\"display: none\" \r\n type=\"file\" \r\n #fileInput \r\n (change)=\"fileChangeEvent($event)\"\r\n id=\"imageUpload\" \r\n accept=\".png, .jpg, .jpeg\">\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Remove image\"\r\n matTooltipPosition=\"right\"\r\n *ngIf=\"!isImageLoaded\" \r\n (click)=\"removeImage()\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n [disabled]=\"isImageLoaded\" \r\n matTooltip=\"Left rotate\"\r\n matTooltipPosition=\"right\"\r\n (click)=\"rotateLeft()\">\r\n <mat-icon>rotate_left</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n matTooltip=\"Right rotate\"\r\n matTooltipPosition=\"right\"\r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"rotateRight()\">\r\n <mat-icon>rotate_right</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Swap horizontal\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"flipHorizontal()\">\r\n <mat-icon>swap_horiz</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Swap vertical\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"flipVertical()\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n matTooltip=\"{{containWithinAspectRatio?'Fill Aspect Ratio':'Contain Within Aspect Ratio'}}\"\r\n matTooltipPosition=\"right\"\r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"toggleContainWithinAspectRatio()\">\r\n <mat-icon>\r\n {{containWithinAspectRatio?'crop_free':'crop_din'}}\r\n </mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n [disabled]=\"isImageLoaded\"\r\n matTooltip=\"Reset image\"\r\n matTooltipPosition=\"right\" \r\n (click)=\"resetImage()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Zoom out\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"zoomOut()\">\r\n <mat-icon>zoom_out</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Zoom in\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"zoomIn()\">\r\n <mat-icon>zoom_in</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-10\">\r\n <asw-image-crop\r\n [imageChangedEvent]=\"imageChangedEvent\"\r\n [imageBase64]=\"control.imageUrl\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n [aspectRatio]=\"1\"\r\n [resizeToWidth]=\"256\"\r\n [onlyScaleDown]=\"true\" \r\n [roundCropper]=\"false\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n format=\"png\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded()\"\r\n (cropperReady)=\"cropperReady($event)\"\r\n (loadImageFailed)=\"loadImageFailed()\">\r\n </asw-image-crop>\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=\"btn btn-danger mr-2 mb-1 me-2\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: i4$1.AswImageCropComponent, selector: "asw-image-crop", inputs: ["imageChangedEvent", "imageURL", "imageBase64", "imageFile", "format", "transform", "maintainAspectRatio", "aspectRatio", "resizeToWidth", "resizeToHeight", "cropperMinWidth", "cropperMinHeight", "cropperMaxHeight", "cropperMaxWidth", "cropperStaticWidth", "cropperStaticHeight", "canvasRotation", "initialStepSize", "roundCropper", "onlyScaleDown", "imageQuality", "autoCrop", "backgroundColor", "containWithinAspectRatio", "hideResizeSquares", "cropper", "alignImage", "disabled"], outputs: ["imageCropped", "startCropImage", "imageLoaded", "cropperReady", "loadImageFailed"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswImageUploadDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-image-upload-dialog', template: "<h4 mat-dialog-title>Crop Uploaded Image</h4>\r\n<form [formGroup]=\"aswImageCropForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"row\">\r\n <div class=\"col-md-2\">\r\n <div class=\"text-center btn-toolbar mt-2\" role=\"toolbar\" aria-label=\"Image controls toolbar\">\r\n <div class=\"btn-group-vertical\" role=\"group\" aria-label=\"toolbar\">\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n (click)=\"fileInput.click()\"\r\n matTooltip=\"Load image\" \r\n *ngIf=\"isImageLoaded\">\r\n <input style=\"display: none\" \r\n type=\"file\" \r\n #fileInput \r\n (change)=\"fileChangeEvent($event)\"\r\n id=\"imageUpload\" \r\n accept=\".png, .jpg, .jpeg\">\r\n <mat-icon>attach_file</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Remove image\"\r\n matTooltipPosition=\"right\"\r\n *ngIf=\"!isImageLoaded\" \r\n (click)=\"removeImage()\">\r\n <mat-icon>clear</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n [disabled]=\"isImageLoaded\" \r\n matTooltip=\"Left rotate\"\r\n matTooltipPosition=\"right\"\r\n (click)=\"rotateLeft()\">\r\n <mat-icon>rotate_left</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n matTooltip=\"Right rotate\"\r\n matTooltipPosition=\"right\"\r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"rotateRight()\">\r\n <mat-icon>rotate_right</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Swap horizontal\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"flipHorizontal()\">\r\n <mat-icon>swap_horiz</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Swap vertical\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"flipVertical()\">\r\n <mat-icon>swap_vert</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n matTooltip=\"{{containWithinAspectRatio?'Fill Aspect Ratio':'Contain Within Aspect Ratio'}}\"\r\n matTooltipPosition=\"right\"\r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"toggleContainWithinAspectRatio()\">\r\n <mat-icon>\r\n {{containWithinAspectRatio?'crop_free':'crop_din'}}\r\n </mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\" \r\n [disabled]=\"isImageLoaded\"\r\n matTooltip=\"Reset image\"\r\n matTooltipPosition=\"right\" \r\n (click)=\"resetImage()\">\r\n <mat-icon>refresh</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Zoom out\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"zoomOut()\">\r\n <mat-icon>zoom_out</mat-icon>\r\n </button>\r\n <button type=\"button\" \r\n class=\"asw-btn btn btn-outline-primary\"\r\n matTooltip=\"Zoom in\"\r\n matTooltipPosition=\"right\" \r\n [disabled]=\"isImageLoaded\" \r\n (click)=\"zoomIn()\">\r\n <mat-icon>zoom_in</mat-icon>\r\n </button>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"col-md-10\">\r\n <asw-image-crop\r\n [imageChangedEvent]=\"imageChangedEvent\"\r\n [imageBase64]=\"control.imageUrl\"\r\n [maintainAspectRatio]=\"true\"\r\n [containWithinAspectRatio]=\"containWithinAspectRatio\"\r\n [aspectRatio]=\"1\"\r\n [resizeToWidth]=\"256\"\r\n [onlyScaleDown]=\"true\" \r\n [roundCropper]=\"false\"\r\n [canvasRotation]=\"canvasRotation\"\r\n [transform]=\"transform\"\r\n [alignImage]=\"'center'\"\r\n [style.display]=\"showCropper ? null : 'none'\"\r\n format=\"png\"\r\n (imageCropped)=\"imageCropped($event)\"\r\n (imageLoaded)=\"imageLoaded()\"\r\n (cropperReady)=\"cropperReady($event)\"\r\n (loadImageFailed)=\"loadImageFailed()\">\r\n </asw-image-crop>\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=\"btn btn-danger mr-2 mb-1 me-2\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>" }]
}], ctorParameters: () => [{ type: i1.FormBuilder }, { type: i2.MatDialogRef }, { type: undefined, decorators: [{
type: Inject,
args: [MAT_DIALOG_DATA]
}] }] });
/**
* @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 AswImage {
dialog;
constants = Constants;
control;
controlIndex;
isPreviewTemplate = false;
imageUpdateEvent = new EventEmitter();
imageDeleteEvent = new EventEmitter();
duplicateControl = new EventEmitter();
constructor(dialog) {
this.dialog = dialog;
}
deleteImageDialog(control, controlIndex) {
const dialogRef = this.dialog.open(AswConfirmDialog, {
width: '350px',
data: { name: control.controlType, message: this.constants.messages.waringMessage }
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.imageDeleteEvent.emit(controlIndex);
}
});
}
editImageDialog(control, controlIndex) {
const dialogRef = this.dialog.open(AswImageDialog, {
disableClose: true,
width: '50%',
data: control
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
this.imageUpdateEvent.emit({ control: result, index: controlIndex });
}
});
}
uploadImageDialog(control, controlIndex) {
const dialogRef = this.dialog.open(AswImageUploadDialog, {
disableClose: true,
width: '80%',
minWidth: '70vw',
data: control
});
dialogRef.afterClosed().subscribe(result => {
if (result) {
console.log(result);
this.imageUpdateEvent.emit({ control: result, index: controlIndex });
}
});
}
duplicateImageControl(control) {
this.duplicateControl.emit(control);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswImage, deps: [{ token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: AswImage, selector: "asw-image", inputs: { control: "control", controlIndex: "controlIndex", isPreviewTemplate: "isPreviewTemplate" }, outputs: { imageUpdateEvent: "imageUpdateEvent", imageDeleteEvent: "imageDeleteEvent", duplicateControl: "duplicateControl" }, ngImport: i0, template: "<div class=\"{{control.class}}\">\r\n <img class=\"{{control.imageShape}}\" [src]=\"control.imageUrl ? control.imageUrl : constants.defaultImage\" height=\"{{control.height}}\" width=\"{{control.width}}\" />\r\n <div class=\"asw-pt-10\">\r\n <button mat-flat-button color=\"warn\" type=\"button\"\r\n (click)=\"uploadImageDialog(control, controlIndex)\"\r\n matTooltip=\"Upload\"> \r\n Upload\r\n </button>\r\n </div>\r\n</div>\r\n\r\n<div class=\"row\" *ngIf=\"isPreviewTemplate\">\r\n <div class=\"col-md-12\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Duplicate\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateImageControl(control)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Edit\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editImageDialog(control, controlIndex)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Delete\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteImageDialog(control, controlIndex)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div>\r\n</div>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i4.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i5.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i5$1.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswImage, decorators: [{
type: Component,