@asoftwareworld/form-builder/fesm2022/asoftwareworld-form-builder-form-builder.mjs.map

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

{"version":3,"file":"asoftwareworld-form-builder-form-builder.mjs","sources":["../../src/components/form-builder/default-controls.ts","../../src/components/form-builder/form-builder.ts","../../src/components/form-builder/form-builder.html","../../src/components/form-builder/form-builder.module.ts","../../src/components/form-builder/public_api.ts","../../src/components/form-builder/asoftwareworld-form-builder-form-builder.ts"],"sourcesContent":["/**\r\n * @license\r\n * Copyright ASW (A Software World) All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file\r\n */\r\n\r\nexport const SIMPLE_CONTROLS = [\r\n    {\r\n        icon: 'title',\r\n        displayName: 'Header',\r\n        controlType: 'header',\r\n        subtype: 'h1',\r\n        style: 'text-left',\r\n        label: 'Header',\r\n        column: 'col-md-12',\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'text_fields',\r\n        displayName: 'Text Field',\r\n        controlType: 'textfield',\r\n        tooltip: 'Enter Text',\r\n        value: '',\r\n        label: 'Text Field',\r\n        style: 'outline',\r\n        column: 'col-md-6',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        maxlength: 50,\r\n        minlength: 0\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'short_text',\r\n        displayName: 'Text Area',\r\n        controlType: 'textarea',\r\n        tooltip: 'Enter Text',\r\n        value: '',\r\n        label: 'Text Area',\r\n        style: 'outline',\r\n        column: 'col-md-6',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        maxlength: 50,\r\n        minlength: 0\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'numbers',\r\n        displayName: 'Number',\r\n        controlType: 'number',\r\n        tooltip: 'Enter Number',\r\n        value: '',\r\n        label: 'Number',\r\n        style: 'outline',\r\n        column: 'col-md-6',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        maxlength: 50,\r\n        minlength: 0\r\n    },\r\n    {\r\n        icon: 'calculate',\r\n        displayName: 'Calculation',\r\n        controlType: 'calculation',\r\n        tooltip: 'Enter calculation',\r\n        value: '',\r\n        label: 'Calculation',\r\n        placeholder: 'Field 1 + Field 2 = ',\r\n        style: 'outline',\r\n        column: 'col-md-6',\r\n        operations: []\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'subject',\r\n        displayName: 'Paragraph',\r\n        controlType: 'paragraph',\r\n        label: 'Paragraph',\r\n        column: 'col-md-12',\r\n        subtype: 'p',\r\n        style: 'text-left'\r\n    },\r\n    {\r\n        icon: 'horizontal_rule',\r\n        displayName: 'Divider',\r\n        controlType: 'divider',\r\n        column: 'col-md-12'\r\n    },\r\n    {\r\n        icon: 'toggle_on',\r\n        displayName: 'Slide Toggle',\r\n        controlType: 'slide-toggle',\r\n        label: 'Slide me!',\r\n        value: false,\r\n        color: 'primary',\r\n        column: 'col-md-2',\r\n        isRequired: false,\r\n        isDisabled: false\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'touch_app',\r\n        displayName: 'Button',\r\n        controlType: 'button',\r\n        tooltip: 'Click button',\r\n        label: 'Submit',\r\n        type: 'button',\r\n        column: 'col-md-2',\r\n        color: 'primary',\r\n        style: 'mat-raised-button'\r\n    }\r\n];\r\n\r\nexport const CHOICE_CONTROLS = [\r\n    {\r\n        id: '1',\r\n        icon: 'corporate_fare',\r\n        displayName: 'Autocomplete',\r\n        controlType: 'autocomplete',\r\n        tooltip: 'Select one',\r\n        label: 'Autocomplete',\r\n        column: 'col-md-6',\r\n        style: 'outline',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        options: [\r\n            { key: 'option-1', value: 'Option 1', isChecked: false },\r\n            { key: 'option-2', value: 'Option 2', isChecked: false },\r\n            { key: 'option-3', value: 'Option 3', isChecked: false }\r\n        ]\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'fact_check',\r\n        displayName: 'Select',\r\n        controlType: 'select',\r\n        tooltip: 'Select option',\r\n        label: 'Select',\r\n        style: 'outline',\r\n        column: 'col-md-6',\r\n        value: '',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        options: [\r\n            { key: 'option-1', value: 'Option 1', isChecked: false },\r\n            { key: 'option-2', value: 'Option 2', isChecked: false },\r\n            { key: 'option-3', value: 'Option 3', isChecked: false }\r\n        ]\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'checklist',\r\n        displayName: 'Multi Select',\r\n        controlType: 'multi-select',\r\n        tooltip: 'Select options',\r\n        label: 'Multi Select',\r\n        column: 'col-md-6',\r\n        value: '',\r\n        style: 'outline',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        options: [\r\n            { key: 'option-1', value: 'Option 1', isChecked: false },\r\n            { key: 'option-2', value: 'Option 2', isChecked: false },\r\n            { key: 'option-3', value: 'Option 3', isChecked: false }\r\n        ]\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'radio_button_checked',\r\n        displayName: 'Radio Button',\r\n        controlType: 'radio',\r\n        tooltip: 'radio',\r\n        label: 'Radio',\r\n        value: 'option-1',\r\n        column: 'col-md-6',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        options: [\r\n            { key: 'option-1', value: 'Option 1', isChecked: false },\r\n            { key: 'option-2', value: 'Option 2', isChecked: false },\r\n            { key: 'option-3', value: 'Option 3', isChecked: false }\r\n        ]\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'check_box',\r\n        displayName: 'Checkbox',\r\n        controlType: 'checkbox',\r\n        tooltip: 'checkbox',\r\n        label: 'Checkbox',\r\n        column: 'col-md-6',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n        options: [\r\n            { key: 'option-1', value: 'Option 1', isChecked: false },\r\n            { key: 'option-2', value: 'Option 2', isChecked: false },\r\n            { key: 'option-3', value: 'Option 3', isChecked: false }\r\n        ]\r\n    }\r\n];\r\n\r\nexport const DATE_AND_GPS_CONTROLS = [\r\n    {\r\n        id: '1',\r\n        icon: 'event',\r\n        displayName: 'Datepicker',\r\n        controlType: 'datepicker',\r\n        value: '',\r\n        tooltip: 'Choose a date',\r\n        label: 'Date Picker',\r\n        style: 'outline',\r\n        column: 'col-md-6',\r\n        isRequired: false,\r\n        isWeekendsDisable: false,\r\n        isDisabled: false,\r\n    },\r\n    {\r\n        id: '1',\r\n        icon: 'near_me',\r\n        displayName: 'GPS',\r\n        controlType: 'gps',\r\n        label: 'Gps',\r\n        tooltip: 'Enter Location',\r\n        latitude: '',\r\n        longitude: '',\r\n        style: 'outline',\r\n        column: 'col-md-6',\r\n        value: '',\r\n        isRequired: false,\r\n        isDisabled: false,\r\n    }\r\n];\r\n\r\nexport const DIGITAL_CONTROLS = [\r\n    {\r\n        icon: 'image',\r\n        displayName: 'Image',\r\n        controlType: 'image',\r\n        label: 'Image',\r\n        column: 'col-md-12',\r\n        class: 'text-left text-start',\r\n        imageShape: 'asw-original',\r\n        height: 150,\r\n        width: 150,\r\n        imageUrl: ''\r\n    },\r\n    {\r\n        icon: 'gesture',\r\n        displayName: 'Signature',\r\n        controlType: 'signature',\r\n        label: 'Signature',\r\n        class: 'text-left text-start',\r\n        imageUrl: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',\r\n        column: 'col-md-12',\r\n        height: '80',\r\n        width: '120'\r\n    },\r\n    {\r\n        icon: 'draw',\r\n        displayName: 'Drawing',\r\n        controlType: 'drawing',\r\n        label: 'Image',\r\n        class: 'text-left text-start',\r\n        imageUrl: 'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',\r\n        column: 'col-md-12',\r\n        isRequired: false,\r\n        height: '200',\r\n        width: '600'\r\n    }\r\n];\r\n\r\nexport const OTHERS_CONTROLS = [\r\n    {\r\n        id: '',\r\n        guid: '',\r\n        icon: 'qrCode',\r\n        displayName: 'QR Code',\r\n        controlType: 'qr-code',\r\n        density: {\r\n            errorCorrectionLevel: 'Q',\r\n            mode: 'Byte',\r\n            typeNumber: 0\r\n        },\r\n        logoStyle: {\r\n            hideBackgroundCircle: true,\r\n            logoSize: 0.3,\r\n            logoMargin: 0\r\n        },\r\n        logo: '',\r\n        width: 200,\r\n        height: 200,\r\n        outerMargin: 0,\r\n        value: '',\r\n        column: 'col-md-12',\r\n    }\r\n];\r\n","/**\r\n * @license\r\n * Copyright ASW (A Software World) All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file\r\n */\r\n\r\nimport { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';\r\nimport { Component, EventEmitter, Input, OnChanges, OnInit, Output } from '@angular/core';\r\nimport { MatDialog } from '@angular/material/dialog';\r\nimport { Constants, NotificationService, ObjectUtils } from '@asoftwareworld/form-builder/form-control/core';\r\nimport { AswJsonPreviewDialog } from '@asoftwareworld/form-builder/form-control/json-preview-dialog';\r\nimport { CHOICE_CONTROLS, DATE_AND_GPS_CONTROLS, DIGITAL_CONTROLS, OTHERS_CONTROLS, SIMPLE_CONTROLS } from './default-controls';\r\n\r\n@Component({\r\n    selector: 'asw-form-builder',\r\n    templateUrl: './form-builder.html',\r\n    styleUrls: ['./form-builder.scss']\r\n})\r\nexport class AswFormBuilder implements OnInit, OnChanges {\r\n    step = 0;\r\n    constants: any = Constants;\r\n    simpleControls: any[] = [];\r\n    choiceControls: any[] = [];\r\n    dateAndGpsControls: any[] = [];\r\n    digitalControls: any[] = [];\r\n    othersControls: any[] = [];\r\n    formContainer: any[] = [];\r\n    viewInitialized = false;\r\n    @Input() uploadData: any[] = [];\r\n    @Input() isShowPreviewButton = true;\r\n    @Input() isShowJsonDataButton = true;\r\n    @Input() isShowPublishButton = true;\r\n    @Input() allowedTypes: 'number' | 'text' | 'all' = 'all';\r\n\r\n    @Output() previewClick = new EventEmitter<any[]>();\r\n    @Output() publishClick = new EventEmitter<any[]>();\r\n\r\n    @Output() buttonClick = new EventEmitter<any[]>();\r\n    @Output() aswModelChange = new EventEmitter<any>();\r\n\r\n    constructor(\r\n        public dialog: MatDialog,\r\n        private notificationService: NotificationService) { }\r\n\r\n    ngOnInit(): void {\r\n        this.simpleControls = this.showAllowedTypes(SIMPLE_CONTROLS);\r\n        this.choiceControls = this.showAllowedTypes(CHOICE_CONTROLS);\r\n        this.dateAndGpsControls = this.showAllowedTypes(DATE_AND_GPS_CONTROLS);\r\n        this.digitalControls = this.showAllowedTypes(DIGITAL_CONTROLS);\r\n        this.othersControls = this.showAllowedTypes(OTHERS_CONTROLS);\r\n    }\r\n\r\n    private showAllowedTypes(controls: any[]) {\r\n        if (this.allowedTypes === 'all') return controls\r\n\r\n        return controls.filter((control) => control.controlType.includes(this.allowedTypes))\r\n    }\r\n\r\n    setStep(index: number): void {\r\n        this.step = index;\r\n    }\r\n\r\n    ngOnChanges(): void {\r\n        if (this.uploadData.length) {\r\n            this.formContainer = this.uploadData;\r\n        }\r\n    }\r\n\r\n    drop(event: CdkDragDrop<string[]>): void {\r\n        if (event.previousContainer === event.container) {\r\n            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\r\n        } else {\r\n            transferArrayItem(JSON.parse(JSON.stringify(event.previousContainer.data)),\r\n                event.container.data,\r\n                event.previousIndex,\r\n                event.currentIndex);\r\n        }\r\n    }\r\n\r\n    updatedControl(data: any): void {\r\n        this.formContainer.splice(data.index, 1, data.control);\r\n    }\r\n\r\n    deleteControl(index: any): void {\r\n        this.formContainer.splice(index, 1);\r\n    }\r\n\r\n    previewTemplate(): void {\r\n        this.previewClick.emit(this.formContainer);\r\n    }\r\n\r\n    previewJsonData(): void {\r\n        const dialogRef = this.dialog.open(AswJsonPreviewDialog, {\r\n            disableClose: true,\r\n            width: '744px',\r\n            data: this.formContainer\r\n        });\r\n        dialogRef.afterClosed();\r\n    }\r\n\r\n    publishTemplate(): void {\r\n        this.publishClick.emit(this.formContainer);\r\n    }\r\n\r\n    buttonClicked(type: string): void {\r\n        if (type === 'reset') {\r\n            this.formContainer = ObjectUtils.resetForm(this.formContainer);\r\n        } else {\r\n            const data = ObjectUtils.validateForm(this.formContainer);\r\n            if (!data.isFormValid) {\r\n                this.notificationService.openNotification('Please fill in the following required fields.'\r\n                    + ' \\n \\n' + data.labels.toString(), 'Close');\r\n            } else {\r\n                this.buttonClick.emit(this.formContainer);\r\n            }\r\n        }\r\n    }\r\n\r\n    onSelectionChange(control: any): void {\r\n        this.aswModelChange.emit(control);\r\n    }\r\n\r\n    duplicateControl(control: any): void {\r\n        const duplicatedControl = JSON.parse(JSON.stringify(control));\r\n        if (duplicatedControl.controlType === 'fileupload') {\r\n            duplicatedControl.value = [];\r\n        } else if (duplicatedControl.controlType !== 'qr-code') {\r\n            duplicatedControl.value = duplicatedControl.controlType === 'slide-toggle' ? false : '';\r\n        }\r\n        this.formContainer.push(duplicatedControl);\r\n    }\r\n}\r\n","<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>","/**\r\n * @license\r\n * Copyright ASW (A Software World) All Rights Reserved.\r\n *\r\n * Use of this source code is governed by an MIT-style license that can be\r\n * found in the LICENSE file\r\n */\r\n\r\nimport { ClipboardModule } from '@angular/cdk/clipboard';\r\nimport { DragDropModule } from '@angular/cdk/drag-drop';\r\nimport { CommonModule } from '@angular/common';\r\nimport { provideHttpClient, withInterceptorsFromDi } from '@angular/common/http';\r\nimport { NgModule } from '@angular/core';\r\nimport { FormsModule, ReactiveFormsModule } from '@angular/forms';\r\nimport { MatCardModule } from '@angular/material/card';\r\nimport { MatDialogModule } from '@angular/material/dialog';\r\nimport { MatExpansionModule } from '@angular/material/expansion';\r\nimport { MatIconModule } from '@angular/material/icon';\r\nimport { AswAutocompleteModule } from '@asoftwareworld/form-builder/form-control/autocomplete';\r\nimport { AswButtonModule } from '@asoftwareworld/form-builder/form-control/button';\r\nimport { AswCalculationModule } from '@asoftwareworld/form-builder/form-control/calculation';\r\nimport { AswCheckboxModule } from '@asoftwareworld/form-builder/form-control/checkbox';\r\nimport { NotificationService } from '@asoftwareworld/form-builder/form-control/core';\r\nimport { AswDatepickerModule } from '@asoftwareworld/form-builder/form-control/datepicker';\r\nimport { AswDividerModule } from '@asoftwareworld/form-builder/form-control/divider';\r\nimport { AswDrawingModule } from '@asoftwareworld/form-builder/form-control/drawing';\r\nimport { AswGpsModule } from '@asoftwareworld/form-builder/form-control/gps';\r\nimport { AswHeaderModule } from '@asoftwareworld/form-builder/form-control/header';\r\nimport { AswImageModule } from '@asoftwareworld/form-builder/form-control/image';\r\nimport { AswJsonPreviewDialogModule } from '@asoftwareworld/form-builder/form-control/json-preview-dialog';\r\nimport { AswMultiSelectModule } from '@asoftwareworld/form-builder/form-control/multi-select';\r\nimport { AswNumberModule } from '@asoftwareworld/form-builder/form-control/number';\r\nimport { AswParagraphModule } from '@asoftwareworld/form-builder/form-control/paragraph';\r\nimport { QrCodeModule } from '@asoftwareworld/form-builder/form-control/qrcode';\r\nimport { AswRadioButtonModule } from '@asoftwareworld/form-builder/form-control/radio-button';\r\nimport { AswSelectModule } from '@asoftwareworld/form-builder/form-control/select';\r\nimport { AswSignatureModule } from '@asoftwareworld/form-builder/form-control/signature';\r\nimport { AswSlideToggleModule } from '@asoftwareworld/form-builder/form-control/slide-toggle';\r\nimport { AswTextareaModule } from '@asoftwareworld/form-builder/form-control/textarea';\r\nimport { AswTextFieldModule } from '@asoftwareworld/form-builder/form-control/textfield';\r\nimport { AswFormBuilder } from './form-builder';\r\n\r\n@NgModule({ declarations: [\n        AswFormBuilder\n    ],\n    exports: [AswFormBuilder], imports: [CommonModule,\n        FormsModule,\n        ReactiveFormsModule,\n        MatDialogModule,\n        DragDropModule,\n        ClipboardModule,\n        MatIconModule,\n        AswAutocompleteModule,\n        AswButtonModule,\n        AswCheckboxModule,\n        AswDatepickerModule,\n        AswDividerModule,\n        AswDrawingModule,\n        AswGpsModule,\n        AswHeaderModule,\n        AswImageModule,\n        AswMultiSelectModule,\n