@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
467 lines (465 loc) • 90.1 kB
JavaScript
import * as i4 from '@angular/cdk/drag-drop';
import { moveItemInArray, transferArrayItem, DragDropModule } from '@angular/cdk/drag-drop';
import * as i0 from '@angular/core';
import { EventEmitter, Component, Input, Output, NgModule } from '@angular/core';
import * as i2 from '@asoftwareworld/form-builder/form-control/core';
import { Constants, ObjectUtils, NotificationService } from '@asoftwareworld/form-builder/form-control/core';
import { AswJsonPreviewDialog, AswJsonPreviewDialogModule } from '@asoftwareworld/form-builder/form-control/json-preview-dialog';
import * as i1 from '@angular/material/dialog';
import { MatDialogModule } from '@angular/material/dialog';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import * as i5 from '@angular/material/icon';
import { MatIconModule } from '@angular/material/icon';
import * as i6 from '@asoftwareworld/form-builder/form-control/autocomplete';
import { AswAutocompleteModule } from '@asoftwareworld/form-builder/form-control/autocomplete';
import * as i7 from '@asoftwareworld/form-builder/form-control/button';
import { AswButtonModule } from '@asoftwareworld/form-builder/form-control/button';
import * as i8 from '@asoftwareworld/form-builder/form-control/checkbox';
import { AswCheckboxModule } from '@asoftwareworld/form-builder/form-control/checkbox';
import * as i9 from '@asoftwareworld/form-builder/form-control/datepicker';
import { AswDatepickerModule } from '@asoftwareworld/form-builder/form-control/datepicker';
import * as i10 from '@asoftwareworld/form-builder/form-control/divider';
import { AswDividerModule } from '@asoftwareworld/form-builder/form-control/divider';
import * as i11 from '@asoftwareworld/form-builder/form-control/drawing';
import { AswDrawingModule } from '@asoftwareworld/form-builder/form-control/drawing';
import * as i12 from '@asoftwareworld/form-builder/form-control/gps';
import { AswGpsModule } from '@asoftwareworld/form-builder/form-control/gps';
import * as i13 from '@asoftwareworld/form-builder/form-control/header';
import { AswHeaderModule } from '@asoftwareworld/form-builder/form-control/header';
import * as i14 from '@asoftwareworld/form-builder/form-control/image';
import { AswImageModule } from '@asoftwareworld/form-builder/form-control/image';
import * as i15 from '@asoftwareworld/form-builder/form-control/multi-select';
import { AswMultiSelectModule } from '@asoftwareworld/form-builder/form-control/multi-select';
import * as i16 from '@asoftwareworld/form-builder/form-control/paragraph';
import { AswParagraphModule } from '@asoftwareworld/form-builder/form-control/paragraph';
import * as i17 from '@asoftwareworld/form-builder/form-control/select';
import { AswSelectModule } from '@asoftwareworld/form-builder/form-control/select';
import * as i18 from '@asoftwareworld/form-builder/form-control/signature';
import { AswSignatureModule } from '@asoftwareworld/form-builder/form-control/signature';
import * as i19 from '@asoftwareworld/form-builder/form-control/slide-toggle';
import { AswSlideToggleModule } from '@asoftwareworld/form-builder/form-control/slide-toggle';
import * as i20 from '@asoftwareworld/form-builder/form-control/textarea';
import { AswTextareaModule } from '@asoftwareworld/form-builder/form-control/textarea';
import * as i21 from '@asoftwareworld/form-builder/form-control/textfield';
import { AswTextFieldModule } from '@asoftwareworld/form-builder/form-control/textfield';
import * as i22 from '@asoftwareworld/form-builder/form-control/radio-button';
import { AswRadioButtonModule } from '@asoftwareworld/form-builder/form-control/radio-button';
import * as i23 from '@asoftwareworld/form-builder/form-control/qrcode';
import { QrCodeModule } from '@asoftwareworld/form-builder/form-control/qrcode';
import * as i24 from '@asoftwareworld/form-builder/form-control/number';
import { AswNumberModule } from '@asoftwareworld/form-builder/form-control/number';
import * as i25 from '@asoftwareworld/form-builder/form-control/calculation';
import { AswCalculationModule } from '@asoftwareworld/form-builder/form-control/calculation';
import * as i26 from '@angular/material/expansion';
import { MatExpansionModule } from '@angular/material/expansion';
import * as i27 from '@angular/material/card';
import { MatCardModule } from '@angular/material/card';
import { ClipboardModule } from '@angular/cdk/clipboard';
import { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
/**
* @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
*/
const SIMPLE_CONTROLS = [
{
icon: 'title',
displayName: 'Header',
controlType: 'header',
subtype: 'h1',
style: 'text-left',
label: 'Header',
column: 'col-md-12',
},
{
id: '1',
icon: 'text_fields',
displayName: 'Text Field',
controlType: 'textfield',
tooltip: 'Enter Text',
value: '',
label: 'Text Field',
style: 'outline',
column: 'col-md-6',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
id: '1',
icon: 'short_text',
displayName: 'Text Area',
controlType: 'textarea',
tooltip: 'Enter Text',
value: '',
label: 'Text Area',
style: 'outline',
column: 'col-md-6',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
id: '1',
icon: 'numbers',
displayName: 'Number',
controlType: 'number',
tooltip: 'Enter Number',
value: '',
label: 'Number',
style: 'outline',
column: 'col-md-6',
isRequired: false,
isDisabled: false,
maxlength: 50,
minlength: 0
},
{
icon: 'calculate',
displayName: 'Calculation',
controlType: 'calculation',
tooltip: 'Enter calculation',
value: '',
label: 'Calculation',
placeholder: 'Field 1 + Field 2 = ',
style: 'outline',
column: 'col-md-6',
operations: []
},
{
id: '1',
icon: 'subject',
displayName: 'Paragraph',
controlType: 'paragraph',
label: 'Paragraph',
column: 'col-md-12',
subtype: 'p',
style: 'text-left'
},
{
icon: 'horizontal_rule',
displayName: 'Divider',
controlType: 'divider',
column: 'col-md-12'
},
{
icon: 'toggle_on',
displayName: 'Slide Toggle',
controlType: 'slide-toggle',
label: 'Slide me!',
value: false,
color: 'primary',
column: 'col-md-2',
isRequired: false,
isDisabled: false
},
{
id: '1',
icon: 'touch_app',
displayName: 'Button',
controlType: 'button',
tooltip: 'Click button',
label: 'Submit',
type: 'button',
column: 'col-md-2',
color: 'primary',
style: 'mat-raised-button'
}
];
const CHOICE_CONTROLS = [
{
id: '1',
icon: 'corporate_fare',
displayName: 'Autocomplete',
controlType: 'autocomplete',
tooltip: 'Select one',
label: 'Autocomplete',
column: 'col-md-6',
style: 'outline',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '1',
icon: 'fact_check',
displayName: 'Select',
controlType: 'select',
tooltip: 'Select option',
label: 'Select',
style: 'outline',
column: 'col-md-6',
value: '',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '1',
icon: 'checklist',
displayName: 'Multi Select',
controlType: 'multi-select',
tooltip: 'Select options',
label: 'Multi Select',
column: 'col-md-6',
value: '',
style: 'outline',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '1',
icon: 'radio_button_checked',
displayName: 'Radio Button',
controlType: 'radio',
tooltip: 'radio',
label: 'Radio',
value: 'option-1',
column: 'col-md-6',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
},
{
id: '1',
icon: 'check_box',
displayName: 'Checkbox',
controlType: 'checkbox',
tooltip: 'checkbox',
label: 'Checkbox',
column: 'col-md-6',
isRequired: false,
isDisabled: false,
options: [
{ key: 'option-1', value: 'Option 1', isChecked: false },
{ key: 'option-2', value: 'Option 2', isChecked: false },
{ key: 'option-3', value: 'Option 3', isChecked: false }
]
}
];
const DATE_AND_GPS_CONTROLS = [
{
id: '1',
icon: 'event',
displayName: 'Datepicker',
controlType: 'datepicker',
value: '',
tooltip: 'Choose a date',
label: 'Date Picker',
style: 'outline',
column: 'col-md-6',
isRequired: false,
isWeekendsDisable: false,
isDisabled: false,
},
{
id: '1',
icon: 'near_me',
displayName: 'GPS',
controlType: 'gps',
label: 'Gps',
tooltip: 'Enter Location',
latitude: '',
longitude: '',
style: 'outline',
column: 'col-md-6',
value: '',
isRequired: false,
isDisabled: false,
}
];
const DIGITAL_CONTROLS = [
{
icon: 'image',
displayName: 'Image',
controlType: 'image',
label: 'Image',
column: 'col-md-12',
class: 'text-left text-start',
imageShape: 'asw-original',
height: 150,
width: 150,
imageUrl: ''
},
{
icon: 'gesture',
displayName: 'Signature',
controlType: 'signature',
label: 'Signature',
class: 'text-left text-start',
imageUrl: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',
column: 'col-md-12',
height: '80',
width: '120'
},
{
icon: 'draw',
displayName: 'Drawing',
controlType: 'drawing',
label: 'Image',
class: 'text-left text-start',
imageUrl: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',
column: 'col-md-12',
isRequired: false,
height: '200',
width: '600'
}
];
const OTHERS_CONTROLS = [
{
id: '',
guid: '',
icon: 'qrCode',
displayName: 'QR Code',
controlType: 'qr-code',
density: {
errorCorrectionLevel: 'Q',
mode: 'Byte',
typeNumber: 0
},
logoStyle: {
hideBackgroundCircle: true,
logoSize: 0.3,
logoMargin: 0
},
logo: '',
width: 200,
height: 200,
outerMargin: 0,
value: '',
column: 'col-md-12',
}
];
/**
* @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 AswFormBuilder {
dialog;
notificationService;
step = 0;
constants = Constants;
simpleControls = [];
choiceControls = [];
dateAndGpsControls = [];
digitalControls = [];
othersControls = [];
formContainer = [];
viewInitialized = false;
uploadData = [];
isShowPreviewButton = true;
isShowJsonDataButton = true;
isShowPublishButton = true;
allowedTypes = 'all';
previewClick = new EventEmitter();
publishClick = new EventEmitter();
buttonClick = new EventEmitter();
aswModelChange = new EventEmitter();
constructor(dialog, notificationService) {
this.dialog = dialog;
this.notificationService = notificationService;
}
ngOnInit() {
this.simpleControls = this.showAllowedTypes(SIMPLE_CONTROLS);
this.choiceControls = this.showAllowedTypes(CHOICE_CONTROLS);
this.dateAndGpsControls = this.showAllowedTypes(DATE_AND_GPS_CONTROLS);
this.digitalControls = this.showAllowedTypes(DIGITAL_CONTROLS);
this.othersControls = this.showAllowedTypes(OTHERS_CONTROLS);
}
showAllowedTypes(controls) {
if (this.allowedTypes === 'all')
return controls;
return controls.filter((control) => control.controlType.includes(this.allowedTypes));
}
setStep(index) {
this.step = index;
}
ngOnChanges() {
if (this.uploadData.length) {
this.formContainer = this.uploadData;
}
}
drop(event) {
if (event.previousContainer === event.container) {
moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);
}
else {
transferArrayItem(JSON.parse(JSON.stringify(event.previousContainer.data)), event.container.data, event.previousIndex, event.currentIndex);
}
}
updatedControl(data) {
this.formContainer.splice(data.index, 1, data.control);
}
deleteControl(index) {
this.formContainer.splice(index, 1);
}
previewTemplate() {
this.previewClick.emit(this.formContainer);
}
previewJsonData() {
const dialogRef = this.dialog.open(AswJsonPreviewDialog, {
disableClose: true,
width: '744px',
data: this.formContainer
});
dialogRef.afterClosed();
}
publishTemplate() {
this.publishClick.emit(this.formContainer);
}
buttonClicked(type) {
if (type === 'reset') {
this.formContainer = ObjectUtils.resetForm(this.formContainer);
}
else {
const data = ObjectUtils.validateForm(this.formContainer);
if (!data.isFormValid) {
this.notificationService.openNotification('Please fill in the following required fields.'
+ ' \n \n' + data.labels.toString(), 'Close');
}
else {
this.buttonClick.emit(this.formContainer);
}
}
}
onSelectionChange(control) {
this.aswModelChange.emit(control);
}
duplicateControl(control) {
const duplicatedControl = JSON.parse(JSON.stringify(control));
if (duplicatedControl.controlType === 'fileupload') {
duplicatedControl.value = [];
}
else if (duplicatedControl.controlType !== 'qr-code') {
duplicatedControl.value = duplicatedControl.controlType === 'slide-toggle' ? false : '';
}
this.formContainer.push(duplicatedControl);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.11", ngImport: i0, type: AswFormBuilder, deps: [{ token: i1.MatDialog }, { token: i2.NotificationService }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.11", type: AswFormBuilder, selector: "asw-form-builder", inputs: { uploadData: "uploadData", isShowPreviewButton: "isShowPreviewButton", isShowJsonDataButton: "isShowJsonDataButton", isShowPublishButton: "isShowPublishButton", allowedTypes: "allowedTypes" }, outputs: { previewClick: "previewClick", publishClick: "publishClick", buttonClick: "buttonClick", aswModelChange: "aswModelChange" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"container-fluid\">\r\n <div class=\"row\">\r\n <div class=\"col-md-12 text-right float-right text-end\">\r\n <button type=\"button\" *ngIf=\"isShowPreviewButton\"\r\n class=\"btn btn-primary btn-sm mr-1 mb-2 me-1\"\r\n (click)=\"previewTemplate()\">Preview</button>\r\n <button type=\"button\" *ngIf=\"isShowJsonDataButton\"\r\n class=\"btn btn-secondary btn-sm mr-1 mb-2 me-1\"\r\n (click)=\"previewJsonData()\">Json Data</button>\r\n <button class=\"btn btn-success btn-sm mb-2 me-1\"\r\n type=\"button\" *ngIf=\"isShowPublishButton\"\r\n (click)=\"publishTemplate()\">Publish</button>\r\n </div>\r\n </div>\r\n <div class=\"row\" cdkDropListGroup>\r\n <div class=\"col-md-3\">\r\n <mat-accordion>\r\n <mat-expansion-panel *ngIf=\"simpleControls.length > 0\" [expanded]=\"step === 0\" (opened)=\"setStep(0)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n Basic Controls\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"simpleControls\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let item of simpleControls\">\r\n <div class=\"col-md-12\">\r\n <div class=\"alert alert-primary d-flex asw-alert-primary align-items-center\" cdkDrag>\r\n <mat-icon class=\"asw-icon mr-1 me-1\">{{item.icon}}</mat-icon>\r\n {{item.displayName}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"choiceControls.length > 0\" [expanded]=\"step === 1\" (opened)=\"setStep(1)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n Choice Controls\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"choiceControls\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let item of choiceControls\">\r\n <div class=\"col-md-12\">\r\n <div class=\"alert alert-primary d-flex asw-alert-primary align-items-center\" cdkDrag>\r\n <mat-icon class=\"asw-icon mr-1 me-1\">{{item.icon}}</mat-icon>\r\n {{item.displayName}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"dateAndGpsControls.length > 0\" [expanded]=\"step === 2\" (opened)=\"setStep(2)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n Date and GPS Controls\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"dateAndGpsControls\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let item of dateAndGpsControls\">\r\n <div class=\"col-md-12\">\r\n <div class=\"alert alert-primary d-flex asw-alert-primary align-items-center\" cdkDrag>\r\n <mat-icon class=\"asw-icon mr-1 me-1\">{{item.icon}}</mat-icon>\r\n {{item.displayName}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"digitalControls.length > 0\" [expanded]=\"step === 3\" (opened)=\"setStep(3)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n Digital Controls\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"digitalControls\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let item of digitalControls\">\r\n <div class=\"col-md-12\">\r\n <div class=\"alert alert-primary d-flex asw-alert-primary align-items-center\" cdkDrag>\r\n <mat-icon class=\"asw-icon mr-1 me-1\">{{item.icon}}</mat-icon>\r\n {{item.displayName}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n <mat-expansion-panel *ngIf=\"othersControls.length > 0\" [expanded]=\"step === 4\" (opened)=\"setStep(4)\" hideToggle>\r\n <mat-expansion-panel-header class=\"asw-expansion-panel-header\">\r\n <mat-panel-title>\r\n Other Controls\r\n </mat-panel-title>\r\n </mat-expansion-panel-header>\r\n <div cdkDropList\r\n [cdkDropListData]=\"othersControls\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let item of othersControls\">\r\n <div class=\"col-md-12\">\r\n <div class=\"alert alert-primary d-flex asw-alert-primary align-items-center\" cdkDrag>\r\n <mat-icon class=\"asw-icon mr-1 me-1\">{{item.icon}}</mat-icon>\r\n {{item.displayName}}\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-expansion-panel>\r\n </mat-accordion>\r\n </div>\r\n <div class=\"col-md-9\">\r\n <mat-card>\r\n <h2 class=\"asw-card-header text-center alert-info asw-alert-info\">Drag and Drop a form component</h2>\r\n <mat-card-content> \r\n <div cdkDropList\r\n [cdkDropListData]=\"formContainer\"\r\n class=\"asw-list\"\r\n (cdkDropListDropped)=\"drop($event)\">\r\n <div class=\"row\">\r\n <ng-container *ngFor=\"let control of formContainer; let i = index\">\r\n <div class=\"asw-box\" [ngClass]=\"control.column\" cdkDrag>\r\n <ng-container [ngSwitch]=\"control.controlType\" class=\"asw-full-width\">\r\n <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n <asw-autocomplete [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (autocompleteUpdateEvent)=\"updatedControl($event)\"\r\n (autocompleteDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-autocomplete>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'header'\">\r\n <asw-header [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (headerUpdateEvent)=\"updatedControl($event)\"\r\n (headerDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-header>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'qr-code'\">\r\n <asw-qrcode [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (qrCodeUpdateEvent)=\"updatedControl($event)\"\r\n (qrCodeDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-qrcode>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <asw-image [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (imageUpdateEvent)=\"updatedControl($event)\"\r\n (imageDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-image>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textfield'\">\r\n <asw-textfield [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (textFieldUpdateEvent)=\"updatedControl($event)\"\r\n (textFieldDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-textfield>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'textarea'\">\r\n <asw-textarea [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (textAreaUpdateEvent)=\"updatedControl($event)\"\r\n (textAreaDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-textarea>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'number'\">\r\n <asw-number [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n [formControls]=\"formContainer\"\r\n (numberUpdateEvent)=\"updatedControl($event)\"\r\n (numberDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-number>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'calculation'\">\r\n <asw-calculation [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [formControls]=\"formContainer\"\r\n [isPreviewTemplate]=\"true\"\r\n (calculationUpdateEvent)=\"updatedControl($event)\"\r\n (calculationDeleteEvent)=\"deleteControl($event)\"\r\n (aswModelChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-calculation>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'select'\">\r\n <asw-select [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (selectUpdateEvent)=\"updatedControl($event)\"\r\n (selectDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'multi-select'\">\r\n <asw-multi-select [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (multiSelectUpdateEvent)=\"updatedControl($event)\"\r\n (multiSelectDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-multi-select>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'radio'\">\r\n <asw-radio-button [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (radioButtonUpdateEvent)=\"updatedControl($event)\"\r\n (radioButtonDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-radio-button>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'checkbox'\">\r\n <asw-checkbox [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (checkboxUpdateEvent)=\"updatedControl($event)\"\r\n (checkboxDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-checkbox>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'datepicker'\">\r\n <asw-datepicker [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (datepickerUpdateEvent)=\"updatedControl($event)\"\r\n (datepickerDeleteEvent)=\"deleteControl($event)\"\r\n (dateChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-datepicker>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <asw-button [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (buttonUpdateEvent)=\"updatedControl($event)\"\r\n (buttonDeleteEvent)=\"deleteControl($event)\"\r\n (buttonClickEvent)=\"buttonClicked($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-button> \r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'paragraph'\">\r\n <asw-paragraph [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (paragraphUpdateEvent)=\"updatedControl($event)\"\r\n (paragraphDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-paragraph>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'divider'\">\r\n <asw-divider [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (dividerDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-divider>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'slide-toggle'\">\r\n <asw-slide-toggle [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (slidetoggleUpdateEvent)=\"updatedControl($event)\"\r\n (slidetoggleDeleteEvent)=\"deleteControl($event)\"\r\n (selectionChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-slide-toggle>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'gps'\">\r\n <asw-gps [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (gpsUpdateEvent)=\"updatedControl($event)\"\r\n (gpsDeleteEvent)=\"deleteControl($event)\"\r\n (gpsAddressChange)=\"onSelectionChange($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-gps>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'signature'\">\r\n <asw-signature [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (signatureUpdateEvent)=\"updatedControl($event)\"\r\n (signatureDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-signature>\r\n </ng-container>\r\n <ng-container *ngSwitchCase=\"'drawing'\">\r\n <asw-drawing [control]=\"control\"\r\n [controlIndex]=\"i\"\r\n [isPreviewTemplate]=\"true\"\r\n (drawingUpdateEvent)=\"updatedControl($event)\"\r\n (drawingDeleteEvent)=\"deleteControl($event)\"\r\n (duplicateControl)=\"duplicateControl($event)\">\r\n </asw-drawing>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </mat-card-content>\r\n </mat-card>\r\n </div>\r\n </div>\r\n</div>", styles: ["h2{margin:0}.asw-list{min-height:595px;border-radius:4px;display:block}.asw-expansion-panel-header{background-color:#00000008!important;border-bottom:1px solid rgba(0,0,0,.125);font-weight:450;height:48px;border-radius:initial}:host ::ng-deep .mat-expansion-panel-body{padding:16px 24px!important}.asw-box{padding:7px 14px;border-bottom:solid 1px #ccc;color:#000000de;flex-direction:row;align-items:center;justify-content:space-between;box-sizing:border-box;cursor:move;background:#fff;font-size:14px}.alert{padding:.4rem!important;margin-bottom:.4rem!important}.asw-alert-primary{color:#fff!important;background-color:#2780e3!important;border-color:#2780e3!important;cursor:move}.asw-card-header{padding:.5rem 1rem;margin-bottom:0;background-color:#00000008;border-bottom:1px solid rgba(0,0,0,.125)}.asw-alert-info{color:#502c61!important;background-color:#ebddf1!important;border-color:#e2cfec!important}.cdk-drag-preview{box-sizing:border-box;border-radius:4px;box-shadow:0