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

ASW Form Builder Pro 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 b

{"version":3,"file":"asoftwareworld-form-builder-pro-form-builder.mjs","sources":["../../src/components/form-builder/default-controls.ts","../../src/components/form-builder/drag-drop.service.ts","../../src/components/form-builder/drag-drop/drag-drop.ts","../../src/components/form-builder/drag-drop/drag-drop.html","../../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-pro-form-builder.ts"],"sourcesContent":["/**\n * @license\n * Copyright ASW (A Software World) All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file\n */\n\nexport const SIMPLE_CONTROLS = [\n    {\n        id: '',\n        guid: '',\n        icon: 'title',\n        displayName: 'Header',\n        controlType: 'header',\n        subtype: 'h1',\n        style: 'asw-text-start',\n        label: 'Header'\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'textFields',\n        displayName: 'Text field',\n        controlType: 'textfield',\n        tooltip: 'Enter Text',\n        value: '',\n        label: 'Text field',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        maxlength: 50,\n        minlength: 0\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'shortText',\n        displayName: 'Text area',\n        controlType: 'textarea',\n        tooltip: 'Enter Text',\n        value: '',\n        label: 'Text area',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        maxlength: 50,\n        minlength: 0\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'subject',\n        displayName: 'Paragraph',\n        controlType: 'paragraph',\n        label: 'Paragraph'\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'remove',\n        displayName: 'Divider',\n        controlType: 'divider'\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'toggleOn',\n        displayName: 'Slide Toggle',\n        controlType: 'slide-toggle',\n        label: 'Slide me!',\n        value: false,\n        color: 'primary',\n        isRequired: false,\n        isDisabled: false\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'smartButton',\n        displayName: 'Button',\n        controlType: 'button',\n        tooltip: 'Click button',\n        label: 'Submit',\n        type: 'button',\n        color: 'primary',\n        style: 'mat-raised-button'\n    }\n];\n\nexport const CHOICE_CONTROLS = [\n    {\n        id: '',\n        guid: '',\n        icon: 'corporateFare',\n        displayName: 'Autocomplete',\n        controlType: 'autocomplete',\n        tooltip: 'Select one',\n        label: 'Autocomplete',\n        value: '',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        options: [\n            { key: 'option-1', value: 'Option 1', isChecked: false },\n            { key: 'option-2', value: 'Option 2', isChecked: false },\n            { key: 'option-3', value: 'Option 3', isChecked: false }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'factCheck',\n        displayName: 'Select',\n        controlType: 'select',\n        tooltip: 'Select option',\n        label: 'Select',\n        style: 'outline',\n        value: '',\n        isRequired: false,\n        isDisabled: false,\n        options: [\n            { key: 'option-1', value: 'Option 1', isChecked: false },\n            { key: 'option-2', value: 'Option 2', isChecked: false },\n            { key: 'option-3', value: 'Option 3', isChecked: false }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'checklist',\n        displayName: 'Multi select',\n        controlType: 'multi-select',\n        tooltip: 'Select options',\n        label: 'Multi select',\n        value: '',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        options: [\n            { key: 'option-1', value: 'Option 1', isChecked: false },\n            { key: 'option-2', value: 'Option 2', isChecked: false },\n            { key: 'option-3', value: 'Option 3', isChecked: false }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'radioButtonChecked',\n        displayName: 'Radio Button',\n        controlType: 'radio',\n        tooltip: 'radio',\n        label: 'Radio Button',\n        value: '',\n        isRequired: false,\n        isDisabled: false,\n        labelType: 'text-editor',\n        options: [\n            { key: 'option-1', value: 'Option 1', isChecked: false },\n            { key: 'option-2', value: 'Option 2', isChecked: false },\n            { key: 'option-3', value: 'Option 3', isChecked: false }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'checkbox',\n        displayName: 'Checkbox',\n        controlType: 'checkbox',\n        tooltip: 'checkbox',\n        label: 'Checkbox',\n        isRequired: false,\n        isDisabled: false,\n        labelType: 'text-editor',\n        options: [\n            { key: 'option-1', value: 'Option 1', isChecked: false },\n            { key: 'option-2', value: 'Option 2', isChecked: false },\n            { key: 'option-3', value: 'Option 3', isChecked: false }\n        ]\n    }\n];\n\nexport const ADVANCED_CONTROLS = [\n    {\n        id: '',\n        guid: '',\n        icon: 'numbers',\n        displayName: 'Number',\n        controlType: 'number',\n        tooltip: 'Enter Number',\n        value: '',\n        label: 'Number',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        maxlength: 50,\n        minlength: 0\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'rupee',\n        displayName: 'Currency',\n        controlType: 'currency',\n        tooltip: 'Enter currency',\n        value: '',\n        currencySymbol: '₹',\n        label: 'Currency',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        maxlength: 50,\n        minlength: 0\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'calculate',\n        displayName: 'Calculation',\n        controlType: 'calculation',\n        tooltip: 'Enter calculation',\n        value: '',\n        label: 'Calculation',\n        placeholder: 'Field 1 + Field 2 = ',\n        style: 'outline',\n        operations: []\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'email',\n        displayName: 'Email',\n        controlType: 'email',\n        tooltip: 'Enter email',\n        value: '',\n        label: 'Email',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        maxlength: 50,\n        minlength: 0\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'call',\n        displayName: 'Phone number',\n        controlType: 'phone-number',\n        tooltip: 'Enter phone number',\n        value: '',\n        label: 'Phone number',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        maxlength: 15,\n        minlength: 0\n    },\n    // {\n    //     id: '',\n    //     guid: '',\n    //     icon: 'tag',\n    //     displayName: 'Tags',\n    //     controlType: 'tags',\n    //     tooltip: 'Select tags',\n    //     label: 'Tags',\n    //     value: [],\n    //     style: 'outline',\n    //     isRequired: false,\n    //     isDisabled: false\n    // },\n    {\n        id: '',\n        guid: '',\n        icon: 'link',\n        displayName: 'Url',\n        controlType: 'url',\n        tooltip: 'Enter url',\n        value: '',\n        label: 'Url',\n        style: 'outline',\n        isRequired: false,\n        isDisabled: false,\n        minlength: 0\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'event',\n        displayName: 'Datepicker',\n        controlType: 'datepicker',\n        value: '',\n        tooltip: 'Choose a date',\n        label: 'Datepicker',\n        style: 'outline',\n        type: 'date',\n        mode: 'auto',\n        defaultView: 'month',\n        yearSelector: true,\n        twelveHour: true,\n        isRequired: false,\n        isDisabled: false,\n        isDisableWeekendDates: false\n    },\n    // {\n    //     id: '',\n    //     guid: '',\n    //     icon: 'dateRange',\n    //     displayName: 'Date Range',\n    //     controlType: 'daterange',\n    //     value: '',\n    //     tooltip: 'Choose a date range',\n    //     label: 'Date Range',\n    //     style: 'outline',\n    //     isRequired: false,\n    //     isDisabled: false,\n    //     isDisableWeekendDates: false\n    // },\n    {\n        id: '',\n        guid: '',\n        icon: 'sharedLocation',\n        displayName: 'GPS',\n        controlType: 'gps',\n        label: 'GPS',\n        tooltip: 'Enter Location',\n        latitude: '',\n        longitude: '',\n        style: 'outline',\n        value: '',\n        isRequired: false,\n        isDisabled: false\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'fileUpload',\n        displayName: 'File Upload',\n        controlType: 'fileupload',\n        label: 'File Upload',\n        value: [],\n        minSize: '',\n        maxSize: '',\n        fileTypes: 'rar, zip, png, PNG, pdf, jpg, JPG, jpeg, JPEG, doc, docx, gif, pptx, mp4, mov, flv, avi, mp3, xlsx, xls, csv, MOV',\n        allowMultipleFile: '2',\n        isRequired: false\n    }\n];\n\nexport const DIGITAL_CONTROLS = [\n    {\n        id: '',\n        guid: '',\n        icon: 'image',\n        displayName: 'Image',\n        controlType: 'image',\n        label: 'Image',\n        class: 'asw-text-start',\n        imageShape: 'asw-original',\n        height: 150,\n        width: 150,\n        imageUrl: '',\n        isUploadHide: true\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'gesture',\n        displayName: 'Signature',\n        controlType: 'signature',\n        label: 'Signature',\n        class: 'asw-text-start',\n        imageUrl:\n            'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',\n        height: '80',\n        width: '120',\n        isUploadHide: true\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'draw',\n        displayName: 'Drawing',\n        controlType: 'drawing',\n        label: 'Image',\n        class: 'asw-text-start',\n        imageUrl:\n            'data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4gIoSUNDX1BST0ZJTEUAAQEAAAIYAAAAAAQwAABtbnRyUkdCIFhZWiAAAAAAAAAAAAAAAABhY3NwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAA9tYAAQAAAADTLQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAlkZXNjAAAA8AAAAHRyWFlaAAABZAAAABRnWFlaAAABeAAAABRiWFlaAAABjAAAABRyVFJDAAABoAAAAChnVFJDAAABoAAAAChiVFJDAAABoAAAACh3dHB0AAAByAAAABRjcHJ0AAAB3AAAADxtbHVjAAAAAAAAAAEAAAAMZW5VUwAAAFgAAAAcAHMAUgBHAEIAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAFhZWiAAAAAAAABvogAAOPUAAAOQWFlaIAAAAAAAAGKZAAC3hQAAGNpYWVogAAAAAAAAJKAAAA+EAAC2z3BhcmEAAAAAAAQAAAACZmYAAPKnAAANWQAAE9AAAApbAAAAAAAAAABYWVogAAAAAAAA9tYAAQAAAADTLW1sdWMAAAAAAAAAAQAAAAxlblVTAAAAIAAAABwARwBvAG8AZwBsAGUAIABJAG4AYwAuACAAMgAwADEANv/bAEMABgQFBgUEBgYFBgcHBggKEAoKCQkKFA4PDBAXFBgYFxQWFhodJR8aGyMcFhYgLCAjJicpKikZHy0wLSgwJSgpKP/bAEMBBwcHCggKEwoKEygaFhooKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKCgoKP/AABEIATgDUgMBIgACEQEDEQH/xAAVAAEBAAAAAAAAAAAAAAAAAAAACP/EABQQAQAAAAAAAAAAAAAAAAAAAAD/xAAUAQEAAAAAAAAAAAAAAAAAAAAA/8QAFBEBAAAAAAAAAAAAAAAAAAAAAP/aAAwDAQACEQMRAD8AqkAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAH//2Q==',\n        isRequired: false,\n        height: '200',\n        width: '600',\n        isUploadHide: true\n    },\n    {\n        id: '',\n        guid: '',\n        icon: 'qrCode',\n        displayName: 'QR Code',\n        controlType: 'qr-code',\n        density: {\n            errorCorrectionLevel: 'Q',\n            mode: 'Byte',\n            typeNumber: 0\n        },\n        logoStyle: {\n            hideBackgroundCircle: true,\n            logoSize: 0.3,\n            logoMargin: 0\n        },\n        backgroundColor: '#ffffff',\n        middleShape: {\n            color: '#000',\n            type: 'smooth'\n        },\n        cornerInnerShape: {\n            color: '#000',\n            type: ''\n        },\n        cornerOuterShape: {\n            color: '#000',\n            type: ''\n        },\n        logo: '',\n        width: 200,\n        height: 200,\n        type: 'canvas',\n        outerMargin: 0,\n        value: ''\n    }\n];\n\nexport const LAYOUT_CONTROLS = [\n    {\n        id: '',\n        guid: '',\n        label: 'Columns',\n        icon: 'column2',\n        displayName: '2 Column',\n        controlType: 'columns',\n        isColumnHidden: false,\n        columns: [\n            {\n                components: [],\n                size: 'md',\n                width: 6\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 6\n            }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        label: 'Columns',\n        icon: 'column3',\n        displayName: '3 Column',\n        controlType: 'columns',\n        isColumnHidden: false,\n        columns: [\n            {\n                components: [],\n                size: 'md',\n                width: 4\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 4\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 4\n            }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        label: 'Columns',\n        icon: 'column4',\n        displayName: '4 Column',\n        controlType: 'columns',\n        isColumnHidden: false,\n        columns: [\n            {\n                components: [],\n                size: 'md',\n                width: 3\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 3\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 3\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 3\n            }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        label: 'Columns',\n        icon: 'leftSplit',\n        displayName: 'Left Split',\n        controlType: 'columns',\n        isColumnHidden: false,\n        columns: [\n            {\n                components: [],\n                size: 'md',\n                width: 8\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 4\n            }\n        ]\n    },\n    {\n        id: '',\n        guid: '',\n        label: 'Columns',\n        icon: 'rightSplit',\n        displayName: 'Right Split',\n        controlType: 'columns',\n        isColumnHidden: false,\n        columns: [\n            {\n                components: [],\n                size: 'md',\n                width: 4\n            },\n            {\n                components: [],\n                size: 'md',\n                width: 8\n            }\n        ]\n    }\n];\n","import { CdkDragMove, CdkDragRelease, CdkDropList } from '@angular/cdk/drag-drop';\nimport { DOCUMENT } from '@angular/common';\nimport { Inject, Injectable } from '@angular/core';\n\n@Injectable({\n    providedIn: 'root'\n})\nexport class DragDropService {\n    dropLists: CdkDropList[] = [];\n    currentHoverDropListId?: string;\n\n    constructor(@Inject(DOCUMENT) private document: Document) {}\n\n    /**\n     * Register adds a new drop list to the dropList array that is used by each cdkDropList.\n     */\n    public register(dropList: CdkDropList): void {\n        this.dropLists.push(dropList);\n    }\n\n    /**\n     * DragMoved determines the correct cdkDropList beneath the mouse pointer.\n     */\n    dragMoved(event: CdkDragMove<any>): void {\n        const elementFromPoint = this.document.elementFromPoint(event.pointerPosition.x, event.pointerPosition.y);\n\n        if (!elementFromPoint) {\n            this.currentHoverDropListId = undefined;\n            return;\n        }\n\n        const dropList = elementFromPoint.classList.contains('cdk-drop-list') ? elementFromPoint : elementFromPoint.closest('.cdk-drop-list');\n\n        if (!dropList) {\n            this.currentHoverDropListId = undefined;\n            return;\n        }\n\n        this.currentHoverDropListId = dropList.id;\n    }\n\n    dragReleased(event: CdkDragRelease): void {\n        this.currentHoverDropListId = undefined;\n    }\n}\n","/**\n * @license\n * Copyright ASW (A Software World) All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file\n */\n\nimport { Component, EventEmitter, Input, Output } from '@angular/core';\nimport { ControlOption, CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';\n\n@Component({\n    selector: 'asw-drag-drop',\n    templateUrl: './drag-drop.html'\n})\nexport class AswDragDrop {\n    @Input() control: any;\n    @Input() formContainer: any[] = [];\n    @Input() CSSFramework: CSSFrameworkEnum = CSSFrameworkEnum.Material;\n    @Input() propertyPersonalization: string[] = [];\n    @Input() patterns: ControlOption[] = [];\n    @Output() controlUpdated = new EventEmitter<any>();\n    @Output() controlDeleted = new EventEmitter<number>();\n    @Output() controlDuplicate = new EventEmitter<any>();\n    @Output() controlChange = new EventEmitter<any>();\n    @Output() buttonClick = new EventEmitter<string>();\n\n    updatedControl(control: any): void {\n        this.controlUpdated.emit(control);\n    }\n\n    deleteControl(control: any): void {\n        this.controlDeleted.emit(control);\n    }\n\n    duplicateControl(control: any): void {\n        this.controlDuplicate.emit(control);\n    }\n\n    onSelectionChange(control: any): void {\n        this.controlChange.emit(control);\n    }\n\n    buttonClicked(type: string): void {\n        this.buttonClick.emit(type);\n    }\n}\n","<ng-container *ngIf=\"control as control\">\r\n    <ng-container [ngSwitch]=\"control.controlType\">\r\n        <ng-container *ngSwitchCase=\"'autocomplete'\">\r\n            <asw-autocomplete [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [formControls]=\"formContainer\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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=\"'tags'\">\r\n            <asw-tags [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [patterns]=\"patterns\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\r\n                (tagsUpdateEvent)=\"updatedControl($event)\"\r\n                (tagsDeleteEvent)=\"deleteControl($event)\"\r\n                (selectionChange)=\"onSelectionChange($event)\"\r\n                (duplicateControl)=\"duplicateControl($event)\">\r\n            </asw-tags>\r\n        </ng-container>\r\n        <ng-container *ngSwitchCase=\"'header'\">\r\n            <asw-header [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [patterns]=\"patterns\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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=\"'email'\">\r\n            <asw-textfield [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [patterns]=\"patterns\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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=\"'url'\">\r\n            <asw-textfield [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [patterns]=\"patterns\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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=\"'currency'\">\r\n            <asw-number [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [patterns]=\"patterns\"\r\n                [formControls]=\"formContainer\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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=\"'phone-number'\">\r\n            <asw-textfield [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [patterns]=\"patterns\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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-textfield [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [patterns]=\"patterns\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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=\"'number'\">\r\n            <asw-number [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [patterns]=\"patterns\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [formControls]=\"formContainer\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [formControls]=\"formContainer\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [formControls]=\"formContainer\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [formControls]=\"formContainer\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [formControls]=\"formContainer\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [formControls]=\"formContainer\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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=\"'daterange'\">\r\n            <asw-datepicker [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [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                [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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\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                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\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 *ngSwitchCase=\"'fileupload'\">\r\n            <asw-fileupload [control]=\"control\"\r\n                [isPreviewTemplate]=\"true\"\r\n                [CSSFramework]=\"CSSFramework\"\r\n                [propertyPersonalization]=\"propertyPersonalization\"\r\n                (fileUploadUpdateEvent)=\"updatedControl($event)\"\r\n                (fileUploadDeleteEvent)=\"deleteControl($event)\"\r\n                (duplicateControl)=\"duplicateControl($event)\">\r\n            </asw-fileupload>\r\n        </ng-container>\r\n    </ng-container>\r\n</ng-container>\r\n","/**\n * @license\n * Copyright ASW (A Software World) All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file\n */\n\nimport { CdkDrag, CdkDragDrop, CdkDragMove, CdkDragRelease, CdkDropList, moveItemInArray, transferArrayItem } from '@angular/cdk/drag-drop';\nimport { AfterViewInit, Component, EventEmitter, Input, OnChanges, OnInit, Output, ViewChild } from '@angular/core';\nimport { MatDialog } from '@angular/material/dialog';\nimport { Constants, Icons, NotificationService } from '@asoftwareworld/form-builder-pro/common';\nimport { AswTranslateService } from '@asoftwareworld/form-builder-pro/core';\nimport { AswJsonPreviewDialog } from '@asoftwareworld/form-builder-pro/form-control/json-preview-dialog';\nimport { ObjectUtils } from '@asoftwareworld/form-builder-pro/utils';\nimport { ControlOption, CSSFrameworkEnum } from '@asoftwareworld/form-builder-pro/api';\nimport { ADVANCED_CONTROLS, CHOICE_CONTROLS, DIGITAL_CONTROLS, LAYOUT_CONTROLS, SIMPLE_CONTROLS } from './default-controls';\nimport { DragDropService } from './drag-drop.service';\n\n@Component({\n    selector: 'asw-form-builder',\n    templateUrl: './form-builder.html',\n    styleUrls: ['./form-builder.scss']\n})\nexport class AswFormBuilder implements OnInit, AfterViewInit, OnChanges {\n    step = 0;\n    constants: any = Constants;\n\n    // Control list\n    simpleControls: any[] = [];\n    choiceControls: any[] = [];\n    advancedControls: any[] = [];\n    digitalControls: any[] = [];\n    layoutControls: any[] = [];\n    controls: any[] = [];\n\n    // drop items\n    formContainer: any[] = [];\n    icons = Icons;\n\n    @Input() currentLanguage = 'en';\n    @Input() uploadData: any[] = [];\n    @Input() isShowPreviewButton = true;\n    @Input() isShowJsonDataButton = true;\n    @Input() isShowPublishButton = true;\n    @Input() cssFramework: CSSFrameworkEnum = CSSFrameworkEnum.Material;\n    @Input() controlPersonalization: string[] = [];\n    @Input() propertyPersonalization: string[] = [];\n    @Input() controlCollectionName: string = '';\n    @Input() patterns: ControlOption[] = [];\n\n    @Output() previewClick = new EventEmitter<any[]>();\n    @Output() publishClick = new EventEmitter<any[]>();\n\n    @Output() buttonClick = new EventEmitter<any[]>();\n    @Output() aswModelChange = new EventEmitter<any>();\n\n    @ViewChild(CdkDropList) dropList?: CdkDropList;\n    selectedControlId = '';\n\n    allowDropPredicate = (drag: CdkDrag, drop: CdkDropList) => {\n        return this.isDropAllowed(drag, drop);\n    };\n\n    constructor(\n        public translate: AswTranslateService,\n        public dialog: MatDialog,\n        private notificationService: NotificationService,\n        public dragDropService: DragDropService\n    ) {}\n\n    ngOnInit(): void {\n        this.translate.setDefaultLang('en');\n        this.translate.use(this.currentLanguage);\n        this.getControlConfig();\n    }\n\n    private getControlConfig(): void {\n        this.simpleControls = this.excludeControl(SIMPLE_CONTROLS);\n        this.choiceControls = this.excludeControl(CHOICE_CONTROLS);\n        this.advancedControls = this.excludeControl(ADVANCED_CONTROLS);\n        this.digitalControls = this.excludeControl(DIGITAL_CONTROLS);\n        this.layoutControls = this.excludeControl(LAYOUT_CONTROLS);\n        if (!this.isNullOrEmptyOrWhitespace(this.controlCollectionName)) {\n            this.setSingleControlCollection(this.simpleControls);\n            this.setSingleControlCollection(this.choiceControls);\n            this.setSingleControlCollection(this.advancedControls);\n            this.setSingleControlCollection(this.digitalControls);\n            this.setSingleControlCollection(this.layoutControls);\n        }\n    }\n\n    private setSingleControlCollection(controlCollections: any[]): void {\n        controlCollections.forEach((x) => {\n            this.controls.push(x);\n        });\n    }\n\n    isNullOrEmptyOrWhitespace(str: string): boolean {\n        // Check if the string is null or undefined\n        if (str === null || str === undefined) {\n            return true;\n        }\n\n        // Trim the string to remove leading and trailing whitespace, then check if it's empty\n        if (str.trim() === '') {\n            return true;\n        }\n\n        // If none of the above conditions are met, the string is not null, undefined, empty, or whitespace\n        return false;\n    }\n\n    private excludeControl(controls: any[]) {\n        if (this.controlPersonalization.length === 0) return controls;\n        return controls.filter((control) => !this.controlPersonalization.includes(control.controlType));\n    }\n\n    ngAfterViewInit(): void {\n        if (this.dropList) {\n            this.dragDropService.register(this.dropList);\n        }\n    }\n\n    setStep(index: number): void {\n        this.step = index;\n    }\n\n    changeLanguage(): void {\n        this.translate.use(this.currentLanguage);\n    }\n\n    ngOnChanges(): void {\n        this.controls = [];\n        if (this.uploadData.length) {\n            this.formContainer = this.uploadData;\n        }\n        this.getControlConfig();\n    }\n\n    /**\n     * Drops a draggable item inside a drop container.\n     */\n    dropped(event: CdkDragDrop<any[]>): void {\n        const draggedItem = event.item.data;\n        if (event.previousContainer === event.container) {\n            moveItemInArray(event.container.data, event.previousIndex, event.currentIndex);\n        } else {\n            const previousContainerData = JSON.parse(JSON.stringify(event.previousContainer.data));\n            if (draggedItem) {\n                this.addRemoveControlFromContainer(draggedItem);\n            }\n            this.setGuidId(previousContainerData, event.previousIndex);\n            transferArrayItem(previousContainerData, event.container.data, event.previousIndex, event.currentIndex);\n        }\n    }\n\n    /**\n     * Set id and guid for newly dropped control.\n     * @param previousContainer list of control\n     * @param index control index\n     */\n    private setGuidId(previousContainer: any[], index: number): void {\n        let droppedControl = previousContainer[index];\n        droppedControl = ObjectUtils.generateUUID(droppedControl);\n    }\n\n    private addRemoveControlFromContainer(draggedItem: any, controlAction = 'delete'): void {\n        this.formContainer.filter((control: any, index: number) => {\n            if (control.guid === draggedItem.guid) {\n                switch (controlAction) {\n                    case 'delete':\n                        this.formContainer.splice(index, 1);\n                        break;\n                    case 'update':\n                        this.formContainer.splice(index, 1, draggedItem);\n                        break;\n                    case 'duplicate':\n                        this.formContainer.push(this.resetDuplicateControl(draggedItem));\n                        break;\n                }\n            } else {\n                this.removedChildControl(control, draggedItem, controlAction);\n            }\n        });\n    }\n\n    private removedChildControl(control: any, draggedItem: any, controlAction: string): void {\n        control.columns?.forEach((column: any) => {\n            column.components.forEach((component: any, childIndex: number) => {\n                if (component.guid === draggedItem.guid) {\n                    switch (controlAction) {\n                        case 'delete':\n                            column.components.splice(childIndex, 1);\n                            break;\n                        case 'update':\n                            column.components.splice(childIndex, 1, draggedItem);\n                            break;\n                        case 'duplicate':\n                            column.components.push(this.resetDuplicateControl(draggedItem));\n                            break;\n                    }\n                }\n                if (component.controlType === 'columns') {\n                    this.removedChildControl(component, draggedItem, controlAction);\n                }\n            });\n        });\n    }\n\n    /**\n     * Reset the id, guid, and value of the duplicated control.\n     * @param duplicateControl duplicated control\n     * @returns Refreshed control\n     */\n    private resetDuplicateControl(duplicateControl: any): any {\n        const id = ObjectUtils.UUID();\n        duplicateControl.id = id;\n        duplicateControl.guid = id;\n        if (duplicateControl.controlType === 'fileupload') {\n            duplicateControl.value = [];\n        } else if (duplicateControl.controlType !== 'qr-code') {\n            duplicateControl.value = duplicateControl.controlType === 'slide-toggle' ? false : '';\n        }\n        return duplicateControl;\n    }\n\n    /**\n     * Cdk material is not able to determine the correct drop list. If there is a wrong drop list selected by cdk,\n     * we just disallow the drop by returning false. In that case, cdk automatically selects the next possible\n     * cdkDropList which is the correct.\n     */\n    isDropAllowed(drag: CdkDrag, drop: CdkDropList): boolean {\n        if (this.dragDropService.currentHoverDropListId == null) {\n            return true;\n        }\n        return drop.id === this.dragDropService.currentHoverDropListId;\n    }\n\n    /**\n     * Whenever a cdkDrag is moved, dragMoved determines the correct cdkDropList.\n     */\n    dragMoved(event: CdkDragMove<any>): void {\n        this.dragDropService.dragMoved(event);\n    }\n\n    /**\n     * Whenever a cdkDrag is released, reset the determined cdkDropList\n     */\n    dragReleased(event: CdkDragRelease): void {\n        this.dragDropService.dragReleased(event);\n    }\n\n    /**\n     * Update control from the container\n     * @param control data need to be update\n     *