@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
269 lines (268 loc) • 72.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Inject, Component, EventEmitter, Output, Input, NgModule } from '@angular/core';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import * as i18 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, MaterialModule, AswPipeModule } from '@asoftwareworld/form-builder-pro/common';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder-pro/form-control/confirm-dialog';
import * as i1 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/material/core';
import * as i5 from '@angular/material/button';
import * as i6 from '@angular/material/expansion';
import * as i7 from '@angular/material/input';
import * as i8 from '@angular/material/form-field';
import * as i9 from '@angular/material/select';
import * as i10 from '@angular/material/slide-toggle';
import * as i11 from '@angular/material/tooltip';
import * as i12 from '@angular/material/slider';
import * as i13 from '@angular/material/menu';
import * as i14 from '@asoftwareworld/qrcode';
import { AswQrCodeModule } from '@asoftwareworld/qrcode';
import * as i15 from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import { AswFileUploadModule } from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import * as i16 from '@asoftwareworld/form-builder-pro/color-picker';
import { AswColorPickerModule } from '@asoftwareworld/form-builder-pro/color-picker';
import * as i17 from '@asoftwareworld/form-builder-pro/core';
import { AswTranslateModule } from '@asoftwareworld/form-builder-pro/core';
/**
* @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 AswQrCodeDialog {
formBuilder;
dialogRef;
control;
constants = Constants;
icons = Icons;
value = 0.4;
backgroundColor = '#ffffff';
cornerOuterShapeColor = '#000000';
cornerInnerShapeColor = '#000000';
middleShapeColor = '#000000';
errorCorrectionLevels = ['L', 'M', 'Q', 'H'];
modes = ['Numeric', 'Alphanumeric', 'Byte', 'Kanji'];
drawTpes = [
{ label: 'SVG', value: 'svg' },
{ label: 'Canvas', value: 'canvas' }
];
middleShapeTypes = [
{ label: 'Circle', value: 'circle' },
{ label: 'Rounded', value: 'rounded' },
{ label: 'Smooth', value: 'smooth' },
{ label: 'Smooth Rounded', value: 'smooth-rounded' },
{ label: 'Square', value: 'square' },
{ label: 'Thin Rounded', value: 'thin-rounded' }
];
cornerInnerShapeTypes = [
{ label: 'None', value: '' },
{ label: 'Circle', value: 'circle' },
{ label: 'Square', value: 'square' }
];
cornerOuterShapeTypes = [
{ label: 'None', value: '' },
{ label: 'Circle', value: 'circle' },
{ label: 'Square', value: 'square' },
{ label: 'Rounded', value: 'rounded' }
];
aswFormatForm;
aswDensityForm;
aswQrLogoStyleForm;
aswMiddleShapeForm;
aswCornerInnerShapeForm;
aswCornerOuterShapeForm;
constructor(formBuilder, dialogRef, control) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.control = control;
}
ngOnInit() {
this.validateFormBuilder();
if (this.control) {
this.setData();
}
this.aswFormatForm.valueChanges.subscribe((val) => {
if (this.aswFormatForm.invalid) {
return;
}
this.control.width = val.width;
this.control.height = val.height;
this.control.outerMargin = val.outerMargin;
this.control.type = val.type;
this.control.value = val.value;
});
this.aswQrLogoStyleForm.valueChanges.subscribe((val) => {
if (this.aswQrLogoStyleForm.invalid) {
return;
}
this.control.logoStyle = val;
});
this.aswDensityForm.valueChanges.subscribe((val) => {
if (this.aswQrLogoStyleForm.invalid) {
return;
}
this.control.density = val;
});
this.aswMiddleShapeForm.valueChanges.subscribe((val) => {
if (this.aswMiddleShapeForm.invalid) {
return;
}
this.control.middleShape = {
color: this.middleShapeColor,
type: val.type
};
});
this.aswCornerInnerShapeForm.valueChanges.subscribe((val) => {
if (this.aswCornerInnerShapeForm.invalid) {
return;
}
this.control.cornerInnerShape = {
color: this.cornerInnerShapeColor,
type: val.type
};
});
this.aswCornerOuterShapeForm.valueChanges.subscribe((val) => {
if (this.aswCornerOuterShapeForm.invalid) {
return;
}
this.control.cornerOuterShape = {
color: this.cornerOuterShapeColor,
type: val.type
};
});
}
validateFormBuilder() {
this.aswFormatForm = this.formBuilder.group({
value: [''],
width: [200, [Validators.required]],
height: [200, [Validators.required]],
outerMargin: [0],
type: ['canvas']
});
this.aswDensityForm = this.formBuilder.group({
typeNumber: [0, [Validators.required]],
mode: ['Byte', [Validators.required]],
errorCorrectionLevel: ['Q']
});
this.aswQrLogoStyleForm = this.formBuilder.group({
hideBackgroundCircle: [true],
logoSize: [0.4, [Validators.required]],
logoMargin: [0]
});
this.aswMiddleShapeForm = this.formBuilder.group({
type: ['circle'],
color: ['#fff']
});
this.aswCornerInnerShapeForm = this.formBuilder.group({
type: ['circle'],
color: ['#fff']
});
this.aswCornerOuterShapeForm = this.formBuilder.group({
type: ['circle'],
color: ['#fff']
});
}
setData() {
this.aswFormatForm.setValue({
value: this.control.value,
width: this.control.width,
height: this.control.height,
type: this.control.type,
outerMargin: this.control.outerMargin
});
this.aswDensityForm.patchValue({
typeNumber: this.control.density.typeNumber,
mode: this.control.density.mode,
errorCorrectionLevel: this.control.density.errorCorrectionLevel
});
this.aswQrLogoStyleForm.patchValue({
hideBackgroundCircle: this.control.logoStyle.hideBackgroundCircle,
logoSize: this.control.logoStyle.logoSize,
logoMargin: this.control.logoStyle.logoMargin
});
this.aswMiddleShapeForm.patchValue({
type: this.control.middleShape.type
});
this.aswCornerInnerShapeForm.patchValue({
type: this.control.cornerInnerShape.type
});
this.aswCornerOuterShapeForm.patchValue({
type: this.control.cornerOuterShape.type
});
this.backgroundColor = this.control.backgroundColor;
this.middleShapeColor = this.control.middleShape.color;
this.cornerInnerShapeColor = this.control.cornerInnerShape.color;
this.cornerOuterShapeColor = this.control.cornerOuterShape.color;
}
middleShapeColorChange(item) {
this.control.middleShape = {
color: item.colorCode,
type: this.aswMiddleShapeForm.value.type
};
this.middleShapeColor = item.colorCode;
}
cornerInnerShapeColorChange(item) {
this.control.cornerInnerShape = {
color: item.colorCode,
type: this.aswCornerInnerShapeForm.value.type
};
this.cornerInnerShapeColor = item.colorCode;
}
cornerOuterShapeColorChange(item) {
this.control.cornerOuterShape = {
color: item.colorCode,
type: this.aswCornerOuterShapeForm.value.type
};
this.cornerOuterShapeColor = item.colorCode;
}
backgroundColorChange(item) {
this.control.backgroundColor = item.colorCode;
this.backgroundColor = item.colorCode;
}
confirm() {
const option = JSON.parse(JSON.stringify({
width: this.aswFormatForm.value.width,
value: this.aswFormatForm.value.value,
height: this.aswFormatForm.value.height,
type: this.aswFormatForm.value.type,
outerMargin: this.aswFormatForm.value.outerMargin,
logo: this.control.logo,
density: this.control.density,
backgroundColor: this.control.backgroundColor,
logoStyle: this.control.logoStyle,
cornerInnerShape: this.control.cornerInnerShape,
cornerOuterShape: this.control.cornerOuterShape,
middleShape: this.control.middleShape
}));
this.dialogRef.close(option);
}
insertImage(url) {
this.control.logo = url;
}
onNoClick() {
this.dialogRef.close();
}
fileChange(file) {
if (file) {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () => {
this.control.logo = reader.result;
};
}
else {
delete this.control.logo;
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswQrCodeDialog, 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.8", type: AswQrCodeDialog, selector: "asw-qrcode-dialog", 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.displayName | 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<mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-row asw-p-2\">\r\n <div class=\"asw-col-md-4\">\r\n <div class=\"asw-sticky-top\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <h4 class=\"asw-text-center\">{{'FormBuilder.Preview' | aswTranslate}}</h4>\r\n </div>\r\n <div class=\"asw-col-md-12 asw-d-flex align-items-center justify-content-center\">\r\n <asw-qr-code #child [width]=\"control.width\" \r\n [height]=\"control.height\"\r\n [qrData]=\"control.value\" \r\n [outerMargin]=\"control.outerMargin\"\r\n [logo]=\"control.logo\"\r\n [type]=\"control.type\" [allowEmptyString]=\"true\"\r\n [density]=\"control.density\" [backgroundColor]=\"control.backgroundColor\"\r\n [logoStyle]=\"control.logoStyle\" [middleShape]=\"control.middleShape\"\r\n [cornerInnerShape]=\"control.cornerInnerShape\" [cornerOuterShape]=\"control.cornerOuterShape\">\r\n </asw-qr-code>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-8\">\r\n <mat-accordion class=\"example-headers-align\" multi>\r\n <mat-expansion-panel expanded=\"true\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{'FormControl.Format' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswFormatForm\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Data' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\" name=\"value\" placeholder=\"QR code data\"\r\n matTooltip=\"Enter QR code data\" formControlName=\"value\">\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Width' | aswTranslate}}</mat-label>\r\n <input matInput type=\"number\" name=\"width\" min=\"100\" max=\"10000\" placeholder=\"QR code width\"\r\n matTooltip=\"Enter QR code width\" formControlName=\"width\" required>\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Height' | aswTranslate}}</mat-label>\r\n <input matInput type=\"number\" name=\"height\" min=\"100\" max=\"10000\"\r\n placeholder=\"QR code height\" matTooltip=\"Enter QR code height\" formControlName=\"height\"\r\n required>\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.DrawType' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"type\" matTooltip=\"Select QR code draw type\">\r\n <mat-option *ngFor=\"let drawTpe of drawTpes\" [value]=\"drawTpe.value\">\r\n {{drawTpe.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.OuterMargin' | aswTranslate}}</mat-label>\r\n <input matInput type=\"number\" name=\"margin\" min=\"0\" max=\"10000\" placeholder=\"QR code margin\"\r\n matTooltip=\"Enter QR code margin\" formControlName=\"outerMargin\" required>\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </form>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{'FormControl.Density' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswDensityForm\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">{{'FormControl.TypeNumber' | aswTranslate}}</label>\r\n <label class=\"asw-value-label\">{{aswDensityForm.value.typeNumber}}</label>\r\n </div>\r\n <mat-slider min=\"0\" max=\"40\" step=\"1\" discrete class=\"asw-width-99\">\r\n <input matSliderThumb formControlName=\"typeNumber\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.ErrorCorrectionLevel' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"errorCorrectionLevel\"\r\n matTooltip=\"Select error correction level\">\r\n <mat-option *ngFor=\"let ecl of errorCorrectionLevels\" [value]=\"ecl\">\r\n {{ecl}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Mode' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"mode\" matTooltip=\"Select qr code mode\">\r\n <mat-option *ngFor=\"let m of modes\" [value]=\"m\">\r\n {{m}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </form>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{'FormControl.Style' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-4\">\r\n <form [formGroup]=\"aswMiddleShapeForm\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.MiddleShape' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"type\" matTooltip=\"Select middle shape\">\r\n <mat-option *ngFor=\"let dt of middleShapeTypes\" [value]=\"dt.value\">\r\n {{dt.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <form [formGroup]=\"aswCornerInnerShapeForm\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.CornerInnerShape' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"type\" matTooltip=\"Select corner inner shape\">\r\n <mat-option *ngFor=\"let dt of cornerInnerShapeTypes\" [value]=\"dt.value\">\r\n {{dt.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n <div class=\"asw-col-md-4\">\r\n <form [formGroup]=\"aswCornerOuterShapeForm\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.CornerOuterShape' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"type\" matTooltip=\"Select corner outer shape\">\r\n <mat-option *ngFor=\"let dt of cornerOuterShapeTypes\" [value]=\"dt.value\">\r\n {{dt.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </form>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{'FormControl.Color' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-3\">\r\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"backgroundColorMenu\">\r\n <button class=\"asw-mini-fab\" \r\n mat-mini-fab [style.color]=\"'#ffffff'\" \r\n [style.background]=\"backgroundColor\">\r\n </button>\r\n {{'FormControl.Background' | aswTranslate}}\r\n </button>\r\n <mat-menu #backgroundColorMenu=\"matMenu\">\r\n <asw-color-picker (click)=\"$event.stopPropagation();\"\r\n [backgroundColor]=\"backgroundColor\"\r\n (colorChange)=\"backgroundColorChange($event)\">\r\n </asw-color-picker>\r\n </mat-menu>\r\n </div>\r\n <div class=\"asw-col-md-3\">\r\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"middleShapeColorMenu\">\r\n <button class=\"asw-mini-fab\" mat-mini-fab \r\n [style.color]=\"'#ffffff'\" \r\n [style.background]=\"middleShapeColor\">\r\n </button>\r\n {{'FormControl.MiddleShape' | aswTranslate}}\r\n </button>\r\n <mat-menu #middleShapeColorMenu=\"matMenu\">\r\n <asw-color-picker (click)=\"$event.stopPropagation();\"\r\n [backgroundColor]=\"middleShapeColor\"\r\n (colorChange)=\"middleShapeColorChange($event)\">\r\n </asw-color-picker>\r\n </mat-menu>\r\n </div>\r\n <div class=\"asw-col-md-3\">\r\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"cornerInnerShapeColorMenu\">\r\n <button class=\"asw-mini-fab\" mat-mini-fab \r\n [style.color]=\"'#ffffff'\" \r\n [style.background]=\"cornerInnerShapeColor\">\r\n </button>\r\n {{'FormControl.CornerInner' | aswTranslate}}\r\n </button>\r\n <mat-menu #cornerInnerShapeColorMenu=\"matMenu\">\r\n <asw-color-picker (click)=\"$event.stopPropagation();\"\r\n [backgroundColor]=\"cornerInnerShapeColor\"\r\n (colorChange)=\"cornerInnerShapeColorChange($event)\">\r\n </asw-color-picker>\r\n </mat-menu>\r\n </div>\r\n <div class=\"asw-col-md-3\">\r\n <button mat-button type=\"button\" [matMenuTriggerFor]=\"cornerOuterShapeColorMenu\">\r\n <button class=\"asw-mini-fab\" mat-mini-fab \r\n [style.color]=\"'#ffffff'\" \r\n [style.background]=\"cornerOuterShapeColor\">\r\n </button>\r\n {{'FormControl.CornerOuter' | aswTranslate}}\r\n </button>\r\n <mat-menu #cornerOuterShapeColorMenu=\"matMenu\">\r\n <asw-color-picker (click)=\"$event.stopPropagation();\"\r\n [backgroundColor]=\"cornerOuterShapeColor\"\r\n (colorChange)=\"cornerOuterShapeColorChange($event)\">\r\n </asw-color-picker>\r\n </mat-menu>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{'FormControl.Logo' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswQrLogoStyleForm\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <asw-fileupload [control]=\"constants.qrCodeImageUpload\"\r\n (onfileUploadChange)=\"fileChange($event)\">\r\n </asw-fileupload>\r\n </div>\r\n <ng-container *ngIf=\"control.logo\">\r\n <div class=\"asw-col-md-12\">\r\n <mat-slide-toggle color=\"primary\" formControlName=\"hideBackgroundCircle\">\r\n {{'FormControl.HideBackgroundDots' | aswTranslate}}\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">{{'FormControl.LogoSize' | aswTranslate}}</label>\r\n <label class=\"asw-value-label\">{{aswQrLogoStyleForm.value.logoSize}}</label>\r\n </div>\r\n <mat-slider min=\"0\" max=\"1\" step=\"0.1\" discrete class=\"asw-width-99\">\r\n <input matSliderThumb formControlName=\"logoSize\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">{{'FormControl.LogoMargin' | aswTranslate}}</label>\r\n <label class=\"asw-value-label\">{{aswQrLogoStyleForm.value.logoMargin}}</label>\r\n </div>\r\n <mat-slider min=\"0\" max=\"10\" step=\"1\" discrete class=\"asw-width-99\">\r\n <input matSliderThumb formControlName=\"logoMargin\">\r\n </mat-slider>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </form>\r\n </mat-expansion-panel>\r\n </mat-accordion>\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 {{'FormControl.No' | aswTranslate}}\r\n </button>\r\n <button type=\"submit\"\r\n class=\"asw-button asw-button-primary asw-mb-1\"\r\n cdkFocusInitial (click)=\"confirm()\">\r\n {{'FormControl.Yes' | aswTranslate}}\r\n </button>\r\n</mat-dialog-actions>\r\n\r\n", styles: [".asw-label-container{display:flex;justify-content:space-between}.asw-result-card .asw-value-label{font-weight:600}.asw-default-image{display:flex;justify-content:center}.asw-default-image img{margin-left:5px;margin-right:5px;cursor:pointer}.asw-mini-fab{height:24px!important;width:24px!important;border-radius:4px!important;padding-top:10px}.asw-sticky-top{top:25%!important}.asw-width-99{width:99%!important}\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.NumberValueAccessor, selector: "input[type=number][formControlName],input[type=number][formControl],input[type=number][ngModel]" }, { 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.MinValidator, selector: "input[type=number][min][formControlName],input[type=number][min][formControl],input[type=number][min][ngModel]", inputs: ["min"] }, { kind: "directive", type: i1.MaxValidator, selector: "input[type=number][max][formControlName],input[type=number][max][formControl],input[type=number][max][ngModel]", inputs: ["max"] }, { 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: "component", type: i4.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { 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: "directive", type: i6.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i6.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i6.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i6.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i7.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"] }, { kind: "component", type: i8.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i8.MatLabel, selector: "mat-label" }, { kind: "component", type: i9.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: i10.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i11.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i12.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i12.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i13.MatMenu, selector: "mat-menu", inputs: ["backdropClass", "aria-label", "aria-labelledby", "aria-describedby", "xPosition", "yPosition", "overlapTrigger", "hasBackdrop", "class", "classList"], outputs: ["closed", "close"], exportAs: ["matMenu"] }, { kind: "directive", type: i13.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", inputs: ["mat-menu-trigger-for", "matMenuTriggerFor", "matMenuTriggerData", "matMenuTriggerRestoreFocus"], outputs: ["menuOpened", "onMenuOpen", "menuClosed", "onMenuClose"], exportAs: ["matMenuTrigger"] }, { kind: "component", type: i14.AswQrCodeComponent, selector: "asw-qr-code", inputs: ["type", "width", "height", "outerMargin", "qrData", "logo", "allowEmptyString", "density", "logoStyle", "middleShape", "backgroundColor", "cornerInnerShape", "cornerOuterShape"], outputs: ["qrCodeURL"] }, { kind: "component", type: i15.AswFileUpload, selector: "asw-fileupload", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["fileUploadUpdateEvent", "fileUploadDeleteEvent", "onfileUploadChange", "duplicateControl"] }, { kind: "component", type: i16.AswColorPicker, selector: "asw-color-picker", inputs: ["isEditor", "textColor", "backgroundColor"], outputs: ["colorChange"] }, { kind: "pipe", type: i17.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i18.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.8", ngImport: i0, type: AswQrCodeDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-qrcode-dialog', 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.displayName | 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<mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-row asw-p-2\">\r\n <div class=\"asw-col-md-4\">\r\n <div class=\"asw-sticky-top\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <h4 class=\"asw-text-center\">{{'FormBuilder.Preview' | aswTranslate}}</h4>\r\n </div>\r\n <div class=\"asw-col-md-12 asw-d-flex align-items-center justify-content-center\">\r\n <asw-qr-code #child [width]=\"control.width\" \r\n [height]=\"control.height\"\r\n [qrData]=\"control.value\" \r\n [outerMargin]=\"control.outerMargin\"\r\n [logo]=\"control.logo\"\r\n [type]=\"control.type\" [allowEmptyString]=\"true\"\r\n [density]=\"control.density\" [backgroundColor]=\"control.backgroundColor\"\r\n [logoStyle]=\"control.logoStyle\" [middleShape]=\"control.middleShape\"\r\n [cornerInnerShape]=\"control.cornerInnerShape\" [cornerOuterShape]=\"control.cornerOuterShape\">\r\n </asw-qr-code>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"asw-col-md-8\">\r\n <mat-accordion class=\"example-headers-align\" multi>\r\n <mat-expansion-panel expanded=\"true\">\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{'FormControl.Format' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswFormatForm\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Data' | aswTranslate}}</mat-label>\r\n <input matInput type=\"text\" name=\"value\" placeholder=\"QR code data\"\r\n matTooltip=\"Enter QR code data\" formControlName=\"value\">\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Width' | aswTranslate}}</mat-label>\r\n <input matInput type=\"number\" name=\"width\" min=\"100\" max=\"10000\" placeholder=\"QR code width\"\r\n matTooltip=\"Enter QR code width\" formControlName=\"width\" required>\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.Height' | aswTranslate}}</mat-label>\r\n <input matInput type=\"number\" name=\"height\" min=\"100\" max=\"10000\"\r\n placeholder=\"QR code height\" matTooltip=\"Enter QR code height\" formControlName=\"height\"\r\n required>\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.DrawType' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"type\" matTooltip=\"Select QR code draw type\">\r\n <mat-option *ngFor=\"let drawTpe of drawTpes\" [value]=\"drawTpe.value\">\r\n {{drawTpe.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.OuterMargin' | aswTranslate}}</mat-label>\r\n <input matInput type=\"number\" name=\"margin\" min=\"0\" max=\"10000\" placeholder=\"QR code margin\"\r\n matTooltip=\"Enter QR code margin\" formControlName=\"outerMargin\" required>\r\n <!-- <mat-error *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container *ngIf=\"aswDatepickerForm.get('id')?.hasError(validation.type) && (aswDatepickerForm.get('id')?.dirty || aswDatepickerForm.get('id')?.touched)\">\r\n {{validation.message | aswTranslate}}\r\n </ng-container>\r\n </mat-error> -->\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n </form>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n {{'FormControl.Density' | aswTranslate}}\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswDensityForm\">\r\n <div class=\"asw-row\">\r\n <div class=\"asw-col-md-12\">\r\n <div class=\"asw-label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">{{'FormControl.TypeNumber' | aswTranslate}}</label>\r\n <label class=\"asw-value-label\">{{aswDensityForm.value.typeNumber}}</label>\r\n </div>\r\n <mat-slider min=\"0\" max=\"40\" step=\"1\" discrete class=\"asw-width-99\">\r\n <input matSliderThumb formControlName=\"typeNumber\">\r\n </mat-slider>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-width-100\">\r\n <mat-label>{{'FormControl.ErrorCorrectionLevel' | aswTranslate}}</mat-label>\r\n <mat-select formControlName=\"errorCorrectionLevel\"\r\n matTooltip=\"Select error correction level\">\r\n <mat-option *ngFor=\"let ecl of errorCorrectionLevels\" [value]=\"ecl\">\r\n {{ecl}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"asw-col-md-6\">\r\n