@asoftwareworld/form-builder
Version:
ASW Form Builder helps you with rapid development and designed web forms which includes several controls. The key feature of Form Builder is to make your content attractive and effective. We can customize our control at run time and preview the same befor
319 lines (311 loc) • 47.4 kB
JavaScript
import * as i0 from '@angular/core';
import { Component, Inject, EventEmitter, Input, Output, NgModule } from '@angular/core';
import { AswConfirmDialog, AswConfirmDialogModule } from '@asoftwareworld/form-builder/form-control/confirm-dialog';
import { Constants } from '@asoftwareworld/form-builder/form-control/core';
import * as i1 from '@angular/forms';
import { Validators, FormsModule, ReactiveFormsModule } from '@angular/forms';
import * as i2 from '@angular/material/dialog';
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i4 from '@angular/material/input';
import { MatInputModule } from '@angular/material/input';
import * as i5 from '@angular/material/form-field';
import * as i6 from '@angular/material/select';
import { MatSelectModule } from '@angular/material/select';
import * as i7 from '@angular/material/core';
import * as i8 from '@angular/material/slide-toggle';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import * as i9 from '@angular/material/tooltip';
import { MatTooltipModule } from '@angular/material/tooltip';
import * as i10 from '@asoftwareworld/qrcode';
import { AswQrCodeModule } from '@asoftwareworld/qrcode';
import * as i11 from '@angular/material/slider';
import { MatSliderModule } from '@angular/material/slider';
import * as i12 from '@angular/material/expansion';
import { MatExpansionModule } from '@angular/material/expansion';
import * as i4$1 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i6$1 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import { MatDividerModule } from '@angular/material/divider';
/**
* @license
* Copyright ASW (A Software World) All Rights Reserved.
*
* Use of this source code is governed by an MIT-style license that can be
* found in the LICENSE file
*/
class AswQrCodeDialog {
formBuilder;
dialogRef;
control;
constants = Constants;
value = 0.4;
errorCorrectionLevels = ['L', 'M', 'Q', 'H'];
modes = ['Numeric', 'Alphanumeric', 'Byte', 'Kanji'];
aswFormatForm;
aswDensityForm;
aswQrLogoStyleForm;
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.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;
});
}
validateFormBuilder() {
this.aswFormatForm = this.formBuilder.group({
value: [''],
width: [200, [Validators.required]],
height: [200, [Validators.required]],
outerMargin: [0],
column: ['']
});
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]
});
}
setData() {
this.aswFormatForm.setValue({
value: this.control.value,
width: this.control.width,
height: this.control.height,
outerMargin: this.control.outerMargin,
column: this.control.column
});
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
});
}
confirm() {
const option = JSON.parse(JSON.stringify({
width: this.aswFormatForm.value.width,
value: this.aswFormatForm.value.value,
height: this.aswFormatForm.value.height,
column: this.aswFormatForm.value.column,
outerMargin: this.aswFormatForm.value.outerMargin,
logo: this.control.logo,
density: this.control.density,
logoStyle: this.control.logoStyle,
controlType: this.control.controlType
}));
this.dialogRef.close(option);
}
insertImage(event) {
this.control.logo = event.target.value;
}
onNoClick() {
this.dialogRef.close();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", 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.11", type: AswQrCodeDialog, selector: "asw-qrcode-dialog", ngImport: i0, template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<mat-dialog-content class=\"mat-typography\">\r\n <div class=\"row p-2\">\r\n <div class=\"col-md-4\">\r\n <div class=\"sticky-top\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <h4 class=\"text-center\">Preview</h4>\r\n </div>\r\n <div class=\"col-md-12 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\" [allowEmptyString]=\"true\"\r\n [density]=\"control.density\" \r\n [logoStyle]=\"control.logoStyle\">\r\n </asw-qr-code>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"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 Format\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswFormatForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Data</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-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Width</mat-label>\r\n <input matInput type=\"number\" name=\"width\" min=\"100\" max=\"600\" placeholder=\"QR code width\"\r\n matTooltip=\"Enter QR code width\" formControlName=\"width\" required>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.width\">\r\n <ng-container *ngIf=\"aswFormatForm.get('width')?.hasError(validation.type) && (aswFormatForm.get('width')?.dirty || aswFormatForm.get('width')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Height</mat-label>\r\n <input matInput type=\"number\" name=\"height\" min=\"100\" max=\"600\"\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.height\">\r\n <ng-container *ngIf=\"aswFormatForm.get('height')?.hasError(validation.type) && (aswFormatForm.get('height')?.dirty || aswFormatForm.get('height')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Outer Margin</mat-label>\r\n <input matInput type=\"number\" name=\"margin\" min=\"0\" max=\"30\" placeholder=\"QR code margin\"\r\n matTooltip=\"Enter QR code margin\" formControlName=\"outerMargin\" required>\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 Density\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswDensityForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">Type Number</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=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Error Correction Level</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=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Mode</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 \r\n \r\n <mat-expansion-panel>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n Logo\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswQrLogoStyleForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Logo url</mat-label>\r\n <input matInput type=\"text\" name=\"logo\" placeholder=\"Logo\"\r\n (change)=\"insertImage($event)\"\r\n matTooltip=\"Enter Logo\" formControlName=\"logo\">\r\n </mat-form-field>\r\n </div>\r\n <ng-container *ngIf=\"control.logo\">\r\n <div class=\"col-md-12\">\r\n <mat-slide-toggle color=\"primary\" formControlName=\"hideBackgroundCircle\">\r\n Hide Background Dots\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"asw-label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">Logo Size</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=\"col-md-12\">\r\n <div class=\"label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">Logo Margin</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=\"btn btn-danger mr-2 me-2 mb-1\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial (click)=\"confirm()\">\r\n Yes\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: "directive", type: i4.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: i5.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i5.MatLabel, selector: "mat-label" }, { kind: "directive", type: i5.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "component", type: i6.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: i7.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }, { kind: "component", type: i8.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: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i10.AswQrCodeComponent, selector: "asw-qr-code", inputs: ["type", "width", "height", "outerMargin", "qrData", "logo", "allowEmptyString", "density", "logoStyle", "middleShape", "backgroundColor", "cornerInnerShape", "cornerOuterShape"], outputs: ["qrCodeURL"] }, { kind: "component", type: i11.MatSlider, selector: "mat-slider", inputs: ["disabled", "discrete", "showTickMarks", "min", "color", "disableRipple", "max", "step", "displayWith"], exportAs: ["matSlider"] }, { kind: "directive", type: i11.MatSliderThumb, selector: "input[matSliderThumb]", inputs: ["value"], outputs: ["valueChange", "dragStart", "dragEnd"], exportAs: ["matSliderThumb"] }, { kind: "directive", type: i12.MatAccordion, selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i12.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i12.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i12.MatExpansionPanelTitle, selector: "mat-panel-title" }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswQrCodeDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-qrcode-dialog', template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<mat-dialog-content class=\"mat-typography\">\r\n <div class=\"row p-2\">\r\n <div class=\"col-md-4\">\r\n <div class=\"sticky-top\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <h4 class=\"text-center\">Preview</h4>\r\n </div>\r\n <div class=\"col-md-12 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\" [allowEmptyString]=\"true\"\r\n [density]=\"control.density\" \r\n [logoStyle]=\"control.logoStyle\">\r\n </asw-qr-code>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n <div class=\"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 Format\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswFormatForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Data</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-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Width</mat-label>\r\n <input matInput type=\"number\" name=\"width\" min=\"100\" max=\"600\" placeholder=\"QR code width\"\r\n matTooltip=\"Enter QR code width\" formControlName=\"width\" required>\r\n <mat-error *ngFor=\"let validation of constants.accountValidationMessages.width\">\r\n <ng-container *ngIf=\"aswFormatForm.get('width')?.hasError(validation.type) && (aswFormatForm.get('width')?.dirty || aswFormatForm.get('width')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Height</mat-label>\r\n <input matInput type=\"number\" name=\"height\" min=\"100\" max=\"600\"\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.height\">\r\n <ng-container *ngIf=\"aswFormatForm.get('height')?.hasError(validation.type) && (aswFormatForm.get('height')?.dirty || aswFormatForm.get('height')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Outer Margin</mat-label>\r\n <input matInput type=\"number\" name=\"margin\" min=\"0\" max=\"30\" placeholder=\"QR code margin\"\r\n matTooltip=\"Enter QR code margin\" formControlName=\"outerMargin\" required>\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 Density\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswDensityForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <div class=\"label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">Type Number</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=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Error Correction Level</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=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Mode</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 \r\n \r\n <mat-expansion-panel>\r\n <mat-expansion-panel-header>\r\n <mat-panel-title>\r\n Logo\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <form [formGroup]=\"aswQrLogoStyleForm\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Logo url</mat-label>\r\n <input matInput type=\"text\" name=\"logo\" placeholder=\"Logo\"\r\n (change)=\"insertImage($event)\"\r\n matTooltip=\"Enter Logo\" formControlName=\"logo\">\r\n </mat-form-field>\r\n </div>\r\n <ng-container *ngIf=\"control.logo\">\r\n <div class=\"col-md-12\">\r\n <mat-slide-toggle color=\"primary\" formControlName=\"hideBackgroundCircle\">\r\n Hide Background Dots\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"col-md-12\">\r\n <div class=\"asw-label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">Logo Size</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=\"col-md-12\">\r\n <div class=\"label-container\">\r\n <label id=\"asw-name-label\" class=\"asw-name-label\">Logo Margin</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=\"btn btn-danger mr-2 me-2 mb-1\"\r\n (click)=\"onNoClick()\">\r\n No\r\n </button>\r\n <button type=\"submit\"\r\n class=\"btn btn-primary mb-1\"\r\n cdkFocusInitial (click)=\"confirm()\">\r\n Yes\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: () => [{ 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;
/**
* QR Code control
*/
control = null;
/**
* QR Code control index to help update or delete button from drop area
*/
controlIndex;
isPreviewTemplate = false;
qrCodeUpdateEvent = new EventEmitter();
qrCodeDeleteEvent = new EventEmitter();
duplicateControl = new EventEmitter();
constructor(dialog) {
this.dialog = dialog;
}
deleteQrCodeDialog(control, controlIndex) {
const dialogRef = this.dialog.open(AswConfirmDialog, {
width: '350px',
data: { name: control.controlType, message: this.constants.messages.waringMessage }
});
dialogRef.afterClosed().subscribe(result => {
if (result !== undefined) {
this.qrCodeDeleteEvent.emit(controlIndex);
}
});
}
editQrCodeDialog(control, controlIndex) {
const dialogRef = this.dialog.open(AswQrCodeDialog, {
disableClose: true,
width: '80%',
minWidth: '80vw',
data: control
});
dialogRef.afterClosed().subscribe(result => {
if (result !== undefined) {
this.qrCodeUpdateEvent.emit({ control: result, index: controlIndex });
}
});
}
duplicateQrCodeControl(control) {
this.duplicateControl.emit(control);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswQrCode, deps: [{ token: i2.MatDialog }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: AswQrCode, selector: "asw-qrcode", inputs: { control: "control", controlIndex: "controlIndex", isPreviewTemplate: "isPreviewTemplate" }, outputs: { qrCodeUpdateEvent: "qrCodeUpdateEvent", qrCodeDeleteEvent: "qrCodeDeleteEvent", duplicateControl: "duplicateControl" }, ngImport: i0, template: "<ng-container *ngIf=\"control as control\">\r\n <asw-qr-code #parent [width]=\"control.width\" \r\n [height]=\"control.height\"\r\n [qrData]=\"control.value\" \r\n [outerMargin]=\"control.outerMargin\"\r\n [logo]=\"control.logo\" [allowEmptyString]=\"true\"\r\n [density]=\"control.density\" \r\n [logoStyle]=\"control.logoStyle\">\r\n </asw-qr-code>\r\n <ng-template [ngIf]=\"isPreviewTemplate\">\r\n <div class=\"row mb-2\">\r\n <div class=\"col-md-12\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Duplicate\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateQrCodeControl(control)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Edit\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editQrCodeDialog(control, controlIndex)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Delete\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteQrCodeDialog(control, controlIndex)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div> \r\n </div>\r\n </ng-template>\r\n</ng-container>", dependencies: [{ kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i9.MatTooltip, selector: "[matTooltip]", inputs: ["matTooltipPosition", "matTooltipPositionAtOrigin", "matTooltipDisabled", "matTooltipShowDelay", "matTooltipHideDelay", "matTooltipTouchGestures", "matTooltip", "matTooltipClass"], exportAs: ["matTooltip"] }, { kind: "component", type: i4$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i10.AswQrCodeComponent, selector: "asw-qr-code", inputs: ["type", "width", "height", "outerMargin", "qrData", "logo", "allowEmptyString", "density", "logoStyle", "middleShape", "backgroundColor", "cornerInnerShape", "cornerOuterShape"], outputs: ["qrCodeURL"] }, { kind: "component", type: i6$1.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswQrCode, decorators: [{
type: Component,
args: [{ selector: 'asw-qrcode', template: "<ng-container *ngIf=\"control as control\">\r\n <asw-qr-code #parent [width]=\"control.width\" \r\n [height]=\"control.height\"\r\n [qrData]=\"control.value\" \r\n [outerMargin]=\"control.outerMargin\"\r\n [logo]=\"control.logo\" [allowEmptyString]=\"true\"\r\n [density]=\"control.density\" \r\n [logoStyle]=\"control.logoStyle\">\r\n </asw-qr-code>\r\n <ng-template [ngIf]=\"isPreviewTemplate\">\r\n <div class=\"row mb-2\">\r\n <div class=\"col-md-12\">\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Duplicate\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"duplicateQrCodeControl(control)\">\r\n <mat-icon>content_copy</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Edit\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"editQrCodeDialog(control, controlIndex)\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n <button mat-icon-button \r\n type=\"button\" \r\n matTooltip=\"Delete\" \r\n [matTooltipPosition]=\"'below'\" \r\n (click)=\"deleteQrCodeDialog(control, controlIndex)\">\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </div> \r\n </div>\r\n </ng-template>\r\n</ng-container>" }]
}], ctorParameters: () => [{ type: i2.MatDialog }], propDecorators: { control: [{
type: Input
}], controlIndex: [{
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: "18.2.11", ngImport: i0, type: QrCodeModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.11", ngImport: i0, type: QrCodeModule, declarations: [AswQrCode,
AswQrCodeDialog], imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatSelectModule,
MatDialogModule,
MatSlideToggleModule,
MatTooltipModule,
MatDividerModule,
MatIconModule,
AswConfirmDialogModule,
AswQrCodeModule,
MatButtonModule,
MatSliderModule,
MatExpansionModule], exports: [AswQrCode,
AswQrCodeDialog] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: QrCodeModule, imports: [CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatSelectModule,
MatDialogModule,
MatSlideToggleModule,
MatTooltipModule,
MatDividerModule,
MatIconModule,
AswConfirmDialogModule,
AswQrCodeModule,
MatButtonModule,
MatSliderModule,
MatExpansionModule] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: QrCodeModule, decorators: [{
type: NgModule,
args: [{
imports: [
CommonModule,
FormsModule,
ReactiveFormsModule,
MatInputModule,
MatSelectModule,
MatDialogModule,
MatSlideToggleModule,
MatTooltipModule,
MatDividerModule,
MatIconModule,
AswConfirmDialogModule,
AswQrCodeModule,
MatButtonModule,
MatSliderModule,
MatExpansionModule
],
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-form-control-qrcode.mjs.map