@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
477 lines (471 loc) • 131 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, Inject, NgModule } from '@angular/core';
import * as i1 from '@angular/material/snack-bar';
import * as i1$1 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 '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i10$1 from '@angular/material/button-toggle';
import { MatButtonToggleModule } from '@angular/material/button-toggle';
import * as i11 from '@angular/material/button';
import { MatButtonModule } from '@angular/material/button';
import * as i12 from '@angular/material/radio';
import { MatRadioModule } from '@angular/material/radio';
import * as i12$1 from '@angular/material/checkbox';
import { MatCheckboxModule } from '@angular/material/checkbox';
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
*/
function getConstatnts() {
const defaultImage = 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==';
const titleMessages = {
homeTitle: 'ASW | Form Builder',
aboutUsTitle: 'ASW | About Us',
contactUsTitle: 'ASW | Contact Us',
};
const accountValidationMessages = {
name: [
{ type: 'required', message: 'Name is required.' },
{ type: 'minlength', message: 'Name must be at least 5 characters long.' },
{ type: 'maxlength', message: 'Name cannot be more than 25 characters long.' },
{ type: 'pattern', message: 'Your username must contain only numbers and letters.' }
],
emailAddress: [
{ type: 'required', message: 'Email is required.' },
{ type: 'email', message: 'Please enter a valid email address.' },
{ type: 'pattern', message: 'Email format should be xyz@example.com.' }
],
phoneNumber: [
{ type: 'required', message: 'Phone number is required.' },
{ type: 'minlength', message: 'Phone number must be at least 10 characters long.' },
{ type: 'maxlength', message: 'Phone number cannot be more than 10 characters long.' },
],
message: [
{ type: 'required', message: 'Message is required.' },
{ type: 'minlength', message: 'Message must be at least 6 characters long.' },
{ type: 'maxlength', message: 'Message cannot be more than 255 characters long.' },
],
label: [
{ type: 'required', message: 'Label is required.' },
{ type: 'minlength', message: 'Label must be at least 5 characters long.' },
{ type: 'maxlength', message: 'Label cannot be more than 25 characters long.' }
],
maxlength: [
{ type: 'required', message: 'Maxlength is required.' },
{ type: 'pattern', message: 'Maxlength must contain only numbers.' },
],
minlength: [
{ type: 'required', message: 'Minlength is required.' },
{ type: 'pattern', message: 'Minlength must contain only numbers.' },
],
key: [
{ type: 'required', message: 'Option key is required.' },
{ type: 'minlength', message: 'Sorry, your option key must be between 1 and 50 characters long.' },
{ type: 'pattern', message: 'Sorry, only letters (a-z), numbers (0-9), and periods (- and _) are allowed.' },
{ type: 'unique', message: 'Option key is already exist. Try another.' }
],
value: [
{ type: 'required', message: 'Option value is required.' },
{ type: 'minlength', message: 'Sorry, your option value must be between 1 and 999 characters long.' }
],
searchAddress: [
{ type: 'unique', message: 'Searched address not found.' }
],
id: [
{ type: 'required', message: 'Unique id is required.' }
],
operationValue: [
{ type: 'required', message: 'Operation is required.' }
],
control: [
{ type: 'required', message: 'Operator is required.' },
],
width: [
{ type: 'required', messages: 'Width is required.' },
{ type: 'max', message: 'Please enter a value between 0 and 600' }
],
height: [
{ type: 'required', messages: 'Height is required.' },
{ type: 'max', message: 'Please enter a value between 0 and 600' }
]
};
const columns = [
{
value: 'col-md-1',
label: 'Column 1'
},
{
value: 'col-md-2',
label: 'Column 2'
},
{
value: 'col-md-3',
label: 'Column 3'
},
{
value: 'col-md-4',
label: 'Column 4'
},
{
value: 'col-md-5',
label: 'Column 5'
},
{
value: 'col-md-6',
label: 'Column 6'
},
{
value: 'col-md-7',
label: 'Column 7'
},
{
value: 'col-md-8',
label: 'Column 8'
},
{
value: 'col-md-9',
label: 'Column 9'
},
{
value: 'col-md-10',
label: 'Column 10'
},
{
value: 'col-md-11',
label: 'Column 11'
},
{
value: 'col-md-12',
label: 'Column 12'
}
];
const operations = [
{
value: '+',
label: 'Addition'
},
{
value: '-',
label: 'Subtraction'
},
{
value: '*',
label: 'Multiplication'
},
{
value: '/',
label: 'Division'
},
{
value: 'x̄',
label: 'Average'
},
];
const dataTypes = {
dataTypeString: 'string',
dataTypeNumber: 'number',
dataTypeBoolean: 'boolean'
};
const cssClass = {
cssClassCardHidden: 'quote-card-hidden',
cssClassCardVisible: 'quote-card-visible'
};
const matchPattern = {
emailPattern: '^[a-zA-Z0-9_.+-]+@[a-zA-Z0-9-]+.[a-zA-Z0-9-.]+$',
passwordPattern: '((?=.*\\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[@#$%]).{8,20})',
phonePattern: '[6-9]\\d{9}',
numberPattern: '^[0-9]*$'
};
const notificationMessage = {
notificationDisplayDuration: 10000,
errorNotification: 'There is some problem. Please contact to administrator',
emailSuccessNotification: 'Thank you! Your message has been sent successfully.'
};
const messages = {
waringMessage: 'Are you sure you want to remove this field?',
optionKeyValidationMessage: 'That option key is already exist. Try another.'
};
const applicationConstants = {
applicationTitle: 'ASW Form Build',
titleMessages,
accountValidationMessages,
cssClass,
dataTypes,
matchPattern,
notificationMessage,
messages,
columns,
operations,
defaultImage
};
return applicationConstants;
}
const Constants = getConstatnts();
/**
* @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 NotificationService {
snackBar;
constructor(snackBar) {
this.snackBar = snackBar;
}
/* Method used notify message to user */
openNotification(message, action) {
this.snackBar.open(message, action, {
duration: 15000
});
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NotificationService, deps: [{ token: i1.MatSnackBar }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NotificationService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: NotificationService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.MatSnackBar }] });
/**
* @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 ObjectUtils {
static keyPressNumbersWithDecimal(event) {
const charCode = (event.which) ? event.which : event.keyCode;
if (charCode !== 46 && charCode > 31
&& (charCode < 48 || charCode > 57)) {
event.preventDefault();
return false;
}
return true;
}
static resetForm(formContainer) {
formContainer.forEach(control => {
control.value = '';
if (control.controlType === 'select'
|| control.controlType === 'multi-select'
|| control.controlType === 'radio'
|| control.controlType === 'checkbox'
|| control.controlType === 'autocomplete') {
control.options.forEach((option) => {
option.isChecked = false;
});
}
});
return formContainer;
}
static validateForm(formContainer) {
let isFormValid = true;
const data = formContainer.filter(x => x.isRequired);
const labels = [];
data.forEach(control => {
if (!control.value?.length) {
isFormValid = false;
labels.push(' ' + control.label);
}
});
return { isFormValid, labels };
}
static calculateValue(operations) {
if (operations.length) {
let sum = Number(operations[0].value);
operations.forEach((operation, index) => {
if (index !== 0) {
switch (operation.operationValue) {
case '+':
sum += Number(operation.value);
break;
case '-':
sum -= operation.value;
break;
case '*':
sum *= operation.value;
break;
case '/':
sum /= operation.value;
break;
case 'x̄':
sum /= index;
break;
}
}
});
return sum;
}
return 0;
}
}
/**
* @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 AswTextDialog {
formBuilder;
dialogRef;
control;
constants = Constants;
aswEditTextForm;
status;
disabled;
constructor(formBuilder, dialogRef, control) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.control = control;
}
ngOnInit() {
this.validateFormBuilder();
this.editProperty(this.control);
}
validateFormBuilder() {
this.aswEditTextForm = this.formBuilder.group({
id: ['', [Validators.required]],
tooltip: ['', []],
label: ['', [Validators.required, Validators.minLength(2)]],
value: ['', []],
style: ['', [Validators.required]],
column: [''],
pattern: [''],
customClass: [''],
customErrorMsg: [''],
maxlength: [''],
minlength: ['', [Validators.required,
Validators.minLength(1), Validators.maxLength(3),
Validators.pattern(this.constants.matchPattern.numberPattern)]],
isRequired: [false],
isDisabled: [false]
});
}
editProperty(control) {
this.aswEditTextForm.setValue({
id: control.id,
tooltip: control.tooltip,
label: control.label,
pattern: control.pattern ?? '',
customClass: control.customClass ?? '',
customErrorMsg: control.customErrorMsg ?? '',
value: control.value ?? '',
maxlength: control.maxlength,
minlength: control.minlength,
column: control.column,
style: control.style,
isRequired: control.isRequired,
isDisabled: control.isDisabled ?? false
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswEditTextForm.invalid) {
return;
}
this.aswEditTextForm.value.controlType = this.control.controlType;
this.aswEditTextForm.value.guid = this.control.guid;
this.dialogRef.close(this.aswEditTextForm.value);
}
onStatusChange(event) {
this.status = event.checked ? true : false;
}
onChange(event) {
this.disabled = event.checked ? true : false;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswTextDialog, deps: [{ token: i1$1.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: AswTextDialog, selector: "asw-text-dialog", ngImport: i0, template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<form [formGroup]=\"aswEditTextForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-full-width\"><br>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Unique Id</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"id\"\r\n placeholder=\"Enter Unique Id\"\r\n matTooltip=\"Enter Unique Id\"\r\n formControlName=\"id\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditTextForm.get('id')?.hasError(validation.type) && (aswEditTextForm.get('id')?.dirty || aswEditTextForm.get('id')?.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>Label</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter label\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"label\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditTextForm.get('label')?.hasError(validation.type) && (aswEditTextForm.get('label')?.dirty || aswEditTextForm.get('label')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Custom CSS Class</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"customClass\"\r\n placeholder=\"Custom CSS Class\"\r\n matTooltip=\"Custom CSS Class\"\r\n formControlName=\"customClass\">\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>Tooltip</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"tooltip\"\r\n placeholder=\"Enter tooltip\"\r\n matTooltip=\"Enter tooltip\"\r\n formControlName=\"tooltip\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Input Mask</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"pattern\"\r\n placeholder=\"Input Mask\"\r\n matTooltip=\"Input Mask\"\r\n formControlName=\"pattern\">\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>Input Mask Custom Error Msg</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"customErrorMsg\"\r\n placeholder=\"Input Mask Custom Error Msg\"\r\n matTooltip=\"Input Mask Custom Error Msg\"\r\n formControlName=\"customErrorMsg\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Value</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"value\"\r\n placeholder=\"Enter value\"\r\n matTooltip=\"Enter value\"\r\n 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>TextField Style</mat-label>\r\n <mat-select formControlName=\"style\" matTooltip=\"Select textbox style\">\r\n <mat-option value=\"fill\">Fill</mat-option>\r\n <mat-option value=\"outline\">Outline</mat-option> \r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Min Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"minlength\"\r\n placeholder=\"Enter minlength\"\r\n matTooltip=\"Enter minlength\"\r\n maxlength=\"3\"\r\n minlength=\"1\"\r\n pattern=\"^[0-9]*$\"\r\n formControlName=\"minlength\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.minlength\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditTextForm.get('minlength')?.hasError(validation.type)\">\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>Max Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"maxlength\"\r\n placeholder=\"Enter maxlength\"\r\n matTooltip=\"Enter maxlength\"\r\n formControlName=\"maxlength\">\r\n </mat-form-field>\r\n </div>\r\n </div> \r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isActive\r\n formControlName=\"isRequired\"\r\n (change)=\"onStatusChange($event)\">\r\n <ng-container *ngIf=\"status; else not\">\r\n NotRequired\r\n </ng-container>\r\n <ng-template #not>\r\n Required\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisable\r\n formControlName=\"isDisabled\"\r\n (change)=\"onChange($event)\">\r\n <ng-container *ngIf=\"disabled; else enabled\">\r\n Enabled\r\n </ng-container>\r\n <ng-template #enabled>\r\n Disabled\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions align=\"end\">\r\n <button type=\"button\"\r\n class=\"btn btn-danger mr-2 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>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\r\n", dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i3.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1$1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1$1.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$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1$1.MinLengthValidator, selector: "[minlength][formControlName],[minlength][formControl],[minlength][ngModel]", inputs: ["minlength"] }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.PatternValidator, selector: "[pattern][formControlName],[pattern][formControl],[pattern][ngModel]", inputs: ["pattern"] }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.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"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswTextDialog, decorators: [{
type: Component,
args: [{ selector: 'asw-text-dialog', template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<form [formGroup]=\"aswEditTextForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-full-width\"><br>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Unique Id</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"id\"\r\n placeholder=\"Enter Unique Id\"\r\n matTooltip=\"Enter Unique Id\"\r\n formControlName=\"id\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.id\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditTextForm.get('id')?.hasError(validation.type) && (aswEditTextForm.get('id')?.dirty || aswEditTextForm.get('id')?.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>Label</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter label\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"label\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.label\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditTextForm.get('label')?.hasError(validation.type) && (aswEditTextForm.get('label')?.dirty || aswEditTextForm.get('label')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Custom CSS Class</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"customClass\"\r\n placeholder=\"Custom CSS Class\"\r\n matTooltip=\"Custom CSS Class\"\r\n formControlName=\"customClass\">\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>Tooltip</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"tooltip\"\r\n placeholder=\"Enter tooltip\"\r\n matTooltip=\"Enter tooltip\"\r\n formControlName=\"tooltip\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Input Mask</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"pattern\"\r\n placeholder=\"Input Mask\"\r\n matTooltip=\"Input Mask\"\r\n formControlName=\"pattern\">\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>Input Mask Custom Error Msg</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"customErrorMsg\"\r\n placeholder=\"Input Mask Custom Error Msg\"\r\n matTooltip=\"Input Mask Custom Error Msg\"\r\n formControlName=\"customErrorMsg\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Value</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"value\"\r\n placeholder=\"Enter value\"\r\n matTooltip=\"Enter value\"\r\n 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>TextField Style</mat-label>\r\n <mat-select formControlName=\"style\" matTooltip=\"Select textbox style\">\r\n <mat-option value=\"fill\">Fill</mat-option>\r\n <mat-option value=\"outline\">Outline</mat-option> \r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Min Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"minlength\"\r\n placeholder=\"Enter minlength\"\r\n matTooltip=\"Enter minlength\"\r\n maxlength=\"3\"\r\n minlength=\"1\"\r\n pattern=\"^[0-9]*$\"\r\n formControlName=\"minlength\" required>\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.minlength\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswEditTextForm.get('minlength')?.hasError(validation.type)\">\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>Max Length</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"maxlength\"\r\n placeholder=\"Enter maxlength\"\r\n matTooltip=\"Enter maxlength\"\r\n formControlName=\"maxlength\">\r\n </mat-form-field>\r\n </div>\r\n </div> \r\n <div class=\"row\">\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isActive\r\n formControlName=\"isRequired\"\r\n (change)=\"onStatusChange($event)\">\r\n <ng-container *ngIf=\"status; else not\">\r\n NotRequired\r\n </ng-container>\r\n <ng-template #not>\r\n Required\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n <div class=\"col-md-4\">\r\n <mat-slide-toggle color=\"primary\"\r\n #isDisable\r\n formControlName=\"isDisabled\"\r\n (change)=\"onChange($event)\">\r\n <ng-container *ngIf=\"disabled; else enabled\">\r\n Enabled\r\n </ng-container>\r\n <ng-template #enabled>\r\n Disabled\r\n </ng-template>\r\n </mat-slide-toggle>\r\n </div>\r\n </div>\r\n </div>\r\n </mat-dialog-content>\r\n <mat-dialog-actions align=\"end\">\r\n <button type=\"button\"\r\n class=\"btn btn-danger mr-2 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>\r\n Yes\r\n </button>\r\n </mat-dialog-actions>\r\n</form>\r\n\r\n" }]
}], ctorParameters: () => [{ type: i1$1.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 AswDigitalDialog {
formBuilder;
dialogRef;
control;
constants = Constants;
aswDigitalForm;
objectUtils = ObjectUtils;
constructor(formBuilder, dialogRef, control) {
this.formBuilder = formBuilder;
this.dialogRef = dialogRef;
this.control = control;
}
ngOnInit() {
this.validateFormBuilder();
this.editProperty(this.control);
}
validateFormBuilder() {
this.aswDigitalForm = this.formBuilder.group({
label: [],
column: [],
class: [],
imageUrl: [],
height: ['', [Validators.max(600), Validators.min(0)]],
width: ['', [Validators.max(600), Validators.min(0)]]
});
}
editProperty(control) {
this.aswDigitalForm.setValue({
label: control.label,
class: control.class,
column: control.column,
imageUrl: control.imageUrl,
width: control.width,
height: control.height
});
}
onNoClick() {
this.dialogRef.close();
}
onSubmit() {
if (this.aswDigitalForm.invalid) {
return;
}
this.aswDigitalForm.value.controlType = this.control.controlType;
this.dialogRef.close(this.aswDigitalForm.value);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswDigitalDialog, deps: [{ token: i1$1.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: AswDigitalDialog, selector: "asw-digital-dialog", ngImport: i0, template: "<h4 mat-dialog-title>Edit Property</h4>\r\n<form [formGroup]=\"aswDigitalForm\" (ngSubmit)=\"onSubmit()\">\r\n <mat-dialog-content class=\"mat-typography\">\r\n <div class=\"asw-full-width\"><br>\r\n <div class=\"row\">\r\n <div class=\"col-md-12\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Label</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter label\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"label\">\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Image url</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n placeholder=\"Enter image url\"\r\n matTooltip=\"Enter label\"\r\n formControlName=\"imageUrl\">\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Column Size</mat-label>\r\n <mat-select formControlName=\"column\" matTooltip=\"Select column size\">\r\n <mat-option *ngFor=\"let column of constants.columns\" [value]=\"column.value\">\r\n {{column.label}}\r\n </mat-option>\r\n </mat-select>\r\n </mat-form-field>\r\n </div>\r\n </div>\r\n <div class=\"row\">\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Height</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n min=\"0\" \r\n max=\"600\"\r\n placeholder=\"Height\"\r\n (keypress)=\"objectUtils.keyPressNumbersWithDecimal($event)\"\r\n matTooltip=\"Height\"\r\n formControlName=\"height\">\r\n <mat-error class=\"asw-mat-error\" *ngFor=\"let validation of constants.accountValidationMessages.height\">\r\n <ng-container class=\"asw-mat-error\" *ngIf=\"aswDigitalForm.get('height')?.hasError(validation.type) && (aswDigitalForm.get('height')?.dirty || aswDigitalForm.get('height')?.touched)\">\r\n {{validation.message}}\r\n </ng-container>\r\n </mat-error>\r\n </mat-form-field>\r\n </div>\r\n <div class=\"col-md-6\">\r\n <mat-form-field appearance=\"outline\" class=\"asw-mat-form-field\">\r\n <mat-label>Width</mat-label>\r\n <input matInput type=\"text\"\r\n name=\"label\"\r\n min=\"0\" \r\n max=\"600\"\r\n