import * as i0 from '@angular/core';
import { Component, Inject, EventEmitter, Input, Output, NgModule } from '@angular/core';
import * as i2 from '@angular/material/dialog';
import { MAT_DIALOG_DATA } from '@angular/material/dialog';
import { CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';
import * as i17 from '@asoftwareworld/form-builder-pro/common';
import { Constants, Icons, MaterialModule, AswPipeModule, AswColorPickerModule } 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 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/divider';
import * as i7 from '@angular/material/expansion';
import * as i8 from '@angular/material/input';
import * as i9 from '@angular/material/form-field';
import * as i10 from '@angular/material/select';
import * as i11 from '@angular/material/slide-toggle';
import * as i12 from '@angular/material/tooltip';
import * as i13 from '@angular/material/slider';
import * as i14 from '@angular/material/menu';
import * as i15 from '@asoftwareworld/qrcode';
import { AswQrCodeModule } from '@asoftwareworld/qrcode';
import * as i16 from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import { AswFileUploadModule } from '@asoftwareworld/form-builder-pro/form-control/fileupload';
import * as i18 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: "16.2.2", 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: "16.2.2", 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}}</h1>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n        <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n    </button>\r\n</div>\r\n<mat-divider></mat-divider>\r\n<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-divider></mat-divider>\r\n<mat-dialog-actions align=\"end\">\r\n    <button type=\"button\"\r\n            class=\"asw-button asw-button-danger asw-me-2 asw-mb-1\"\r\n            (click)=\"onNoClick()\">\r\n        {{'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", exportAs: ["matOption"] }, { kind: "component", type: i5.MatButton, selector: "    button[mat-button], button[mat-raised-button], button[mat-flat-button],    button[mat-stroked-button]  ", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "component", type: i5.MatMiniFabButton, selector: "button[mat-mini-fab]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "component", type: i6.MatDivider, selector: "mat-divider", inputs: ["vertical", "inset"] }, { kind: "directive", type: i7.MatAccordion, selector: "mat-accordion", inputs: ["multi", "hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i7.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["disabled", "expanded", "hideToggle", "togglePosition"], outputs: ["opened", "closed", "expandedChange", "afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i7.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["tabIndex", "expandedHeight", "collapsedHeight"] }, { kind: "directive", type: i7.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "directive", type: i8.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: i9.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i9.MatLabel, selector: "mat-label" }, { kind: "component", type: i10.MatSelect, selector: "mat-select", inputs: ["disabled", "disableRipple", "tabIndex", "panelWidth", "hideSingleSelectionIndicator"], exportAs: ["matSelect"] }, { kind: "component", type: i11.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["disabled", "disableRipple", "color", "tabIndex"], exportAs: ["matSlideToggle"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i13.MatSlider, selector: "mat-slider", inputs: ["color", "disableRipple", "disabled", "discrete", "showTickMarks", "min", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i13.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "component", type: i14.MatMenu, selector: "mat-menu", exportAs: ["matMenu"] }, { kind: "directive", type: i14.MatMenuTrigger, selector: "[mat-menu-trigger-for], [matMenuTriggerFor]", exportAs: ["matMenuTrigger"] }, { kind: "component", type: i15.AswQrCodeComponent, selector: "asw-qr-code", inputs: ["type", "width", "height", "outerMargin", "qrData", "logo", "allowEmptyString", "density", "logoStyle", "middleShape", "backgroundColor", "cornerInnerShape", "cornerOuterShape"], outputs: ["qrCodeURL"] }, { kind: "component", type: i16.AswFileUpload, selector: "asw-fileupload", inputs: ["control", "CSSFramework", "isPreviewTemplate", "propertyPersonalization"], outputs: ["fileUploadUpdateEvent", "fileUploadDeleteEvent", "onfileUploadChange", "duplicateControl"] }, { kind: "component", type: i17.AswColorPicker, selector: "asw-color-picker", inputs: ["isEditor", "textColor", "backgroundColor"], outputs: ["colorChange"] }, { kind: "pipe", type: i18.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i17.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", 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}}</h1>\r\n            </div>\r\n        </div>\r\n    </div>\r\n    <button mat-icon-button (click)=\"onNoClick()\" aria-label=\"Close dialog\" class=\"asw-mt-2 asw-me-2\">\r\n        <div [innerHTML]=\"icons.close | aswSafeHtml\"></div>\r\n    </button>\r\n</div>\r\n<mat-divider></mat-divider>\r\n<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-divider></mat-divider>\r\n<mat-dialog-actions align=\"end\">\r\n    <button type=\"button\"\r\n            class=\"asw-button asw-button-danger asw-me-2 asw-mb-1\"\r\n            (click)=\"onNoClick()\">\r\n        {{'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"] }]
        }], ctorParameters: function () { return [{ 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 AswQrCode {
    dialog;
    constants = Constants;
    icons = Icons;
    /**
     * QR Code control
     */
    control = null;
    CSSFramework = CSSFrameworkEnum.Material;
    isPreviewTemplate = false;
    qrCodeUpdateEvent = new EventEmitter();
    qrCodeDeleteEvent = new EventEmitter();
    duplicateControl = new EventEmitter();
    constructor(dialog) {
        this.dialog = dialog;
    }
    deleteQrCodeDialog(control) {
        const dialogRef = this.dialog.open(AswConfirmDialog, {
            width: '350px',
            data: { name: control.controlType, message: this.constants.messages.waringMessage }
        });
        dialogRef.afterClosed().subscribe((result) => {
            if (result !== undefined) {
                this.qrCodeDeleteEvent.emit(control);
            }
        });
    }
    editQrCodeDialog(control) {
        const dialogRef = this.dialog.open(AswQrCodeDialog, {
            width: '80%',
            disableClose: true,
            data: control
        });
        dialogRef.afterClosed().subscribe((result) => {
            if (result !== undefined) {
                this.qrCodeUpdateEvent.emit(result);
                // this.control = JSON.parse(JSON.stringify(result));
            }
        });
    }
    duplicateQrCodeControl(control) {
        this.duplicateControl.emit(control);
    }
    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswQrCode, deps: [{ token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.2", type: AswQrCode, selector: "asw-qrcode", inputs: { control: "control", CSSFramework: "CSSFramework", isPreviewTemplate: "isPreviewTemplate" }, outputs: { qrCodeUpdateEvent: "qrCodeUpdateEvent", qrCodeDeleteEvent: "qrCodeDeleteEvent", duplicateControl: "duplicateControl" }, ngImport: i0, template: "<ng-container *ngIf=\"control as control\">\r\n    <asw-qr-code #parent [qrData]=\"control.value\" \r\n        [width]=\"control.width\" \r\n        [height]=\"control.height\"\r\n        [outerMargin]=\"control.outerMargin\" \r\n        [type]=\"control.type\" \r\n        [allowEmptyString]=\"true\"\r\n        [logo]=\"control.logo\"\r\n        [density]=\"control.density\" \r\n        [backgroundColor]=\"control.backgroundColor\"\r\n        [logoStyle]=\"control.logoStyle\" \r\n        [middleShape]=\"control.middleShape\"\r\n        [cornerInnerShape]=\"control.cornerInnerShape\" \r\n        [cornerOuterShape]=\"control.cornerOuterShape\">\r\n    </asw-qr-code>\r\n    <div class=\"asw-row\" *ngIf=\"isPreviewTemplate\">\r\n        <div class=\"asw-col-md-12\" align=\"right\">\r\n            <button mat-icon-button \r\n                    type=\"button\" \r\n                    matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n                    [matTooltipPosition]=\"'below'\" \r\n                    (click)=\"duplicateQrCodeControl(control)\">\r\n                <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n            </button>\r\n            <button mat-icon-button \r\n                    type=\"button\" \r\n                    matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n                    [matTooltipPosition]=\"'below'\" \r\n                    (click)=\"editQrCodeDialog(control)\">\r\n                <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n            </button>\r\n            <button mat-icon-button \r\n                    type=\"button\" \r\n                    matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n                    [matTooltipPosition]=\"'below'\" \r\n                    (click)=\"deleteQrCodeDialog(control)\">\r\n                <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button]", inputs: ["disabled", "disableRipple", "color"], exportAs: ["matButton"] }, { kind: "directive", type: i12.MatTooltip, selector: "[matTooltip]", exportAs: ["matTooltip"] }, { kind: "component", type: i15.AswQrCodeComponent, selector: "asw-qr-code", inputs: ["type", "width", "height", "outerMargin", "qrData", "logo", "allowEmptyString", "density", "logoStyle", "middleShape", "backgroundColor", "cornerInnerShape", "cornerOuterShape"], outputs: ["qrCodeURL"] }, { kind: "pipe", type: i18.AswTranslatePipe, name: "aswTranslate" }, { kind: "pipe", type: i17.AswSafeHtmlPipe, name: "aswSafeHtml" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.2", ngImport: i0, type: AswQrCode, decorators: [{
            type: Component,
            args: [{ selector: 'asw-qrcode', template: "<ng-container *ngIf=\"control as control\">\r\n    <asw-qr-code #parent [qrData]=\"control.value\" \r\n        [width]=\"control.width\" \r\n        [height]=\"control.height\"\r\n        [outerMargin]=\"control.outerMargin\" \r\n        [type]=\"control.type\" \r\n        [allowEmptyString]=\"true\"\r\n        [logo]=\"control.logo\"\r\n        [density]=\"control.density\" \r\n        [backgroundColor]=\"control.backgroundColor\"\r\n        [logoStyle]=\"control.logoStyle\" \r\n        [middleShape]=\"control.middleShape\"\r\n        [cornerInnerShape]=\"control.cornerInnerShape\" \r\n        [cornerOuterShape]=\"control.cornerOuterShape\">\r\n    </asw-qr-code>\r\n    <div class=\"asw-row\" *ngIf=\"isPreviewTemplate\">\r\n        <div class=\"asw-col-md-12\" align=\"right\">\r\n            <button mat-icon-button \r\n                    type=\"button\" \r\n                    matTooltip=\"{{'FormControl.Duplicate' | aswTranslate}}\" \r\n                    [matTooltipPosition]=\"'below'\" \r\n                    (click)=\"duplicateQrCodeControl(control)\">\r\n                <div [innerHTML]=\"icons.contentCopy | aswSafeHtml\"></div>\r\n            </button>\r\n            <button mat-icon-button \r\n                    type=\"button\" \r\n                    matTooltip=\"{{'FormControl.Edit' | aswTranslate}}\" \r\n                    [matTooltipPosition]=\"'below'\" \r\n                    (click)=\"editQrCodeDialog(control)\">\r\n                <div [innerHTML]=\"icons.edit | aswSafeHtml\"></div>\r\n            </button>\r\n            <button mat-icon-button \r\n                    type=\"button\" \r\n                    matTooltip=\"{{'FormControl.Delete' | aswTranslate}}\" \r\n                    [matTooltipPosition]=\"'below'\" \r\n                    (click)=\"deleteQrCodeDialog(control)\">\r\n                <div [innerHTML]=\"icons.delete2 | aswSafeHtml\"></div>\r\n            </button>\r\n        </div>\r\n    </div>\r\n</ng-container>" }]
        }], ctorParameters: function () { return [{ type: i2.MatDialog }]; }, propDecorators: { control: [{
                type: Input
            }], CSSFramework: [{
                type: Input
            }], isPreviewTemplate: [{
                type: Input
            }], qrCodeUpdateEvent: [{
                type: Output
            }], qrCodeDeleteEvent: [{
                type: Output
            }], duplicateControl: [{
                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
 */

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

/**
 * @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 { AswQrCode, AswQrCodeDialog, QrCodeModule };
//# sourceMappingURL=asoftwareworld-form-builder-pro-form-control-qrcode.mjs.map
