[
    {
        "name": "simple_form_screen",
        "items": [
            {
                "label": "Line Input",
                "config": {
                    "icon": "far fa-square",
                    "name": "form_input_1",
                    "type": "text",
                    "label": "New Input",
                    "helper": null,
                    "dataFormat": "string",
                    "validation": null,
                    "placeholder": null
                },
                "component": "FormInput",
                "inspector": [
                    {
                        "type": "FormInput",
                        "field": "name",
                        "config": {
                            "name": "Variable Name",
                            "label": "Variable Name",
                            "helper": "A variable name is a symbolic name to reference information.",
                            "validation": "regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "label",
                        "config": {
                            "label": "Label",
                            "helper": "The label describes the field's name"
                        }
                    },
                    {
                        "type": "FormMultiselect",
                        "field": "dataFormat",
                        "config": {
                            "name": "Data Type",
                            "label": "Data Type",
                            "helper": "The data type specifies what kind of data is stored in the variable.",
                            "options": [
                                {
                                    "value": "string",
                                    "content": "Text"
                                },
                                {
                                    "value": "int",
                                    "content": "Integer"
                                },
                                {
                                    "value": "currency",
                                    "content": "Currency"
                                },
                                {
                                    "value": "percentage",
                                    "content": "Percentage"
                                },
                                {
                                    "value": "float",
                                    "content": "Decimal"
                                },
                                {
                                    "value": "datetime",
                                    "content": "Datetime"
                                },
                                {
                                    "value": "date",
                                    "content": "Date"
                                },
                                {
                                    "value": "password",
                                    "content": "Password"
                                }
                            ],
                            "validation": "required"
                        }
                    },
                    {
                        "type": {
                            "extends": {
                                "props": [
                                    "label",
                                    "error",
                                    "options",
                                    "helper",
                                    "name",
                                    "value",
                                    "selectedControl"
                                ],
                                "mixins": [
                                    {
                                        "props": {
                                            "validation": {
                                                "type": null
                                            },
                                            "validationData": {
                                                "type": null
                                            },
                                            "validationField": {
                                                "type": null
                                            },
                                            "validationMessages": {
                                                "type": null
                                            }
                                        },
                                        "watch": {
                                            "validationData": {
                                                "deep": true
                                            }
                                        },
                                        "mixins": [
                                            {
                                                "methods": []
                                            }
                                        ],
                                        "methods": [],
                                        "computed": []
                                    }
                                ],
                                "methods": [],
                                "computed": [],
                                "_compiled": true,
                                "inheritAttrs": false,
                                "staticRenderFns": []
                            },
                            "computed": [],
                            "_compiled": true,
                            "staticRenderFns": []
                        },
                        "field": "dataMask",
                        "config": {
                            "name": "Data Format",
                            "label": "Data Format",
                            "helper": "The data format for the selected type."
                        }
                    },
                    {
                        "type": "ValidationSelect",
                        "field": "validation",
                        "config": {
                            "label": "Validation Rules",
                            "helper": "The validation rules needed for this field"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "placeholder",
                        "config": {
                            "label": "Placeholder Text",
                            "helper": "The placeholder is what is shown in the field when no value is provided yet"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "helper",
                        "config": {
                            "label": "Helper Text",
                            "helper": "Help text is meant to provide additional guidance on the field's value"
                        }
                    },
                    {
                        "type": "FormCheckbox",
                        "field": "readonly",
                        "config": {
                            "label": "Read Only"
                        }
                    },
                    {
                        "type": "ColorSelect",
                        "field": "color",
                        "config": {
                            "label": "Text Color",
                            "helper": "Set the element's text color",
                            "options": [
                                {
                                    "value": "text-primary",
                                    "content": "primary"
                                },
                                {
                                    "value": "text-secondary",
                                    "content": "secondary"
                                },
                                {
                                    "value": "text-success",
                                    "content": "success"
                                },
                                {
                                    "value": "text-danger",
                                    "content": "danger"
                                },
                                {
                                    "value": "text-warning",
                                    "content": "warning"
                                },
                                {
                                    "value": "text-info",
                                    "content": "info"
                                },
                                {
                                    "value": "text-light",
                                    "content": "light"
                                },
                                {
                                    "value": "text-dark",
                                    "content": "dark"
                                }
                            ]
                        }
                    },
                    {
                        "type": "ColorSelect",
                        "field": "bgcolor",
                        "config": {
                            "label": "Background Color",
                            "helper": "Set the element's background color",
                            "options": [
                                {
                                    "value": "alert alert-primary",
                                    "content": "primary"
                                },
                                {
                                    "value": "alert alert-secondary",
                                    "content": "secondary"
                                },
                                {
                                    "value": "alert alert-success",
                                    "content": "success"
                                },
                                {
                                    "value": "alert alert-danger",
                                    "content": "danger"
                                },
                                {
                                    "value": "alert alert-warning",
                                    "content": "warning"
                                },
                                {
                                    "value": "alert alert-info",
                                    "content": "info"
                                },
                                {
                                    "value": "alert alert-light",
                                    "content": "light"
                                },
                                {
                                    "value": "alert alert-dark",
                                    "content": "dark"
                                }
                            ]
                        }
                    },
                    {
                        "type": "default-value-editor",
                        "field": "defaultValue",
                        "config": {
                            "label": "Default Value",
                            "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "conditionalHide",
                        "config": {
                            "label": "Visibility Rule",
                            "helper": "This control is hidden until this expression is true"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "customFormatter",
                        "config": {
                            "label": "Custom Format String",
                            "helper": "Use the Mask Pattern format <br> Date ##/##/#### <br> SSN ###-##-#### <br> Phone (###) ###-####",
                            "validation": null
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "customCssSelector",
                        "config": {
                            "label": "CSS Selector Name",
                            "helper": "Use this in your custom css rules",
                            "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "ariaLabel",
                        "config": {
                            "label": "Aria Label",
                            "helper": "Attribute designed to help assistive technology (e.g. screen readers) attach a label"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "tabindex",
                        "config": {
                            "label": "Tab Order",
                            "helper": "Order in which a user will move focus from one control to another by pressing the Tab key",
                            "validation": "regex: [0-9]*"
                        }
                    }
                ],
                "editor-control": "FormInput",
                "editor-component": "FormInput"
            },
            {
                "label": "Line Input",
                "config": {
                    "icon": "far fa-square",
                    "name": "form_input_2",
                    "type": "text",
                    "label": "New Input",
                    "helper": null,
                    "dataFormat": "string",
                    "validation": null,
                    "placeholder": null
                },
                "component": "FormInput",
                "inspector": [
                    {
                        "type": "FormInput",
                        "field": "name",
                        "config": {
                            "name": "Variable Name",
                            "label": "Variable Name",
                            "helper": "A variable name is a symbolic name to reference information.",
                            "validation": "regex:/^([a-zA-Z]([a-zA-Z0-9_]?)+\\.?)+(?<!\\.)$/|required|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "label",
                        "config": {
                            "label": "Label",
                            "helper": "The label describes the field's name"
                        }
                    },
                    {
                        "type": "FormMultiselect",
                        "field": "dataFormat",
                        "config": {
                            "name": "Data Type",
                            "label": "Data Type",
                            "helper": "The data type specifies what kind of data is stored in the variable.",
                            "options": [
                                {
                                    "value": "string",
                                    "content": "Text"
                                },
                                {
                                    "value": "int",
                                    "content": "Integer"
                                },
                                {
                                    "value": "currency",
                                    "content": "Currency"
                                },
                                {
                                    "value": "percentage",
                                    "content": "Percentage"
                                },
                                {
                                    "value": "float",
                                    "content": "Decimal"
                                },
                                {
                                    "value": "datetime",
                                    "content": "Datetime"
                                },
                                {
                                    "value": "date",
                                    "content": "Date"
                                },
                                {
                                    "value": "password",
                                    "content": "Password"
                                }
                            ],
                            "validation": "required"
                        }
                    },
                    {
                        "type": {
                            "extends": {
                                "props": [
                                    "label",
                                    "error",
                                    "options",
                                    "helper",
                                    "name",
                                    "value",
                                    "selectedControl"
                                ],
                                "mixins": [
                                    {
                                        "props": {
                                            "validation": {
                                                "type": null
                                            },
                                            "validationData": {
                                                "type": null
                                            },
                                            "validationField": {
                                                "type": null
                                            },
                                            "validationMessages": {
                                                "type": null
                                            }
                                        },
                                        "watch": {
                                            "validationData": {
                                                "deep": true
                                            }
                                        },
                                        "mixins": [
                                            {
                                                "methods": []
                                            }
                                        ],
                                        "methods": [],
                                        "computed": []
                                    }
                                ],
                                "methods": [],
                                "computed": [],
                                "_compiled": true,
                                "inheritAttrs": false,
                                "staticRenderFns": []
                            },
                            "computed": [],
                            "_compiled": true,
                            "staticRenderFns": []
                        },
                        "field": "dataMask",
                        "config": {
                            "name": "Data Format",
                            "label": "Data Format",
                            "helper": "The data format for the selected type."
                        }
                    },
                    {
                        "type": "ValidationSelect",
                        "field": "validation",
                        "config": {
                            "label": "Validation Rules",
                            "helper": "The validation rules needed for this field"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "placeholder",
                        "config": {
                            "label": "Placeholder Text",
                            "helper": "The placeholder is what is shown in the field when no value is provided yet"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "helper",
                        "config": {
                            "label": "Helper Text",
                            "helper": "Help text is meant to provide additional guidance on the field's value"
                        }
                    },
                    {
                        "type": "FormCheckbox",
                        "field": "readonly",
                        "config": {
                            "label": "Read Only"
                        }
                    },
                    {
                        "type": "ColorSelect",
                        "field": "color",
                        "config": {
                            "label": "Text Color",
                            "helper": "Set the element's text color",
                            "options": [
                                {
                                    "value": "text-primary",
                                    "content": "primary"
                                },
                                {
                                    "value": "text-secondary",
                                    "content": "secondary"
                                },
                                {
                                    "value": "text-success",
                                    "content": "success"
                                },
                                {
                                    "value": "text-danger",
                                    "content": "danger"
                                },
                                {
                                    "value": "text-warning",
                                    "content": "warning"
                                },
                                {
                                    "value": "text-info",
                                    "content": "info"
                                },
                                {
                                    "value": "text-light",
                                    "content": "light"
                                },
                                {
                                    "value": "text-dark",
                                    "content": "dark"
                                }
                            ]
                        }
                    },
                    {
                        "type": "ColorSelect",
                        "field": "bgcolor",
                        "config": {
                            "label": "Background Color",
                            "helper": "Set the element's background color",
                            "options": [
                                {
                                    "value": "alert alert-primary",
                                    "content": "primary"
                                },
                                {
                                    "value": "alert alert-secondary",
                                    "content": "secondary"
                                },
                                {
                                    "value": "alert alert-success",
                                    "content": "success"
                                },
                                {
                                    "value": "alert alert-danger",
                                    "content": "danger"
                                },
                                {
                                    "value": "alert alert-warning",
                                    "content": "warning"
                                },
                                {
                                    "value": "alert alert-info",
                                    "content": "info"
                                },
                                {
                                    "value": "alert alert-light",
                                    "content": "light"
                                },
                                {
                                    "value": "alert alert-dark",
                                    "content": "dark"
                                }
                            ]
                        }
                    },
                    {
                        "type": "default-value-editor",
                        "field": "defaultValue",
                        "config": {
                            "label": "Default Value",
                            "helper": "The default value is pre populated using the existing request data. This feature will allow you to modify the value displayed on screen load if needed."
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "conditionalHide",
                        "config": {
                            "label": "Visibility Rule",
                            "helper": "This control is hidden until this expression is true"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "customFormatter",
                        "config": {
                            "label": "Custom Format String",
                            "helper": "Use the Mask Pattern format <br> Date ##/##/#### <br> SSN ###-##-#### <br> Phone (###) ###-####",
                            "validation": null
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "customCssSelector",
                        "config": {
                            "label": "CSS Selector Name",
                            "helper": "Use this in your custom css rules",
                            "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "ariaLabel",
                        "config": {
                            "label": "Aria Label",
                            "helper": "Attribute designed to help assistive technology (e.g. screen readers) attach a label"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "tabindex",
                        "config": {
                            "label": "Tab Order",
                            "helper": "Order in which a user will move focus from one control to another by pressing the Tab key",
                            "validation": "regex: [0-9]*"
                        }
                    }
                ],
                "editor-control": "FormInput",
                "editor-component": "FormInput"
            },
            {
                "label": "Submit Button",
                "config": {
                    "icon": "fas fa-share-square",
                    "name": null,
                    "event": "submit",
                    "label": "New Submit",
                    "tooltip": [],
                    "variant": "primary",
                    "fieldValue": null,
                    "defaultSubmit": true
                },
                "component": "FormButton",
                "inspector": [
                    {
                        "type": "FormInput",
                        "field": "label",
                        "config": {
                            "label": "Label",
                            "helper": "The label describes the button's text"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "name",
                        "config": {
                            "name": "Variable Name",
                            "label": "Variable Name",
                            "helper": "A variable name is a symbolic name to reference information.",
                            "validation": "regex:/^(?:[A-Za-z])(?:[0-9A-Z_.a-z])*(?<![.])$/|not_in:null,break,case,catch,continue,debugger,default,delete,do,else,finally,for,function,if,in,instanceof,new,return,switch,this,throw,try,typeof,var,void,while,with,class,const,enum,export,extends,import,super,true,false"
                        }
                    },
                    {
                        "type": "FormMultiselect",
                        "field": "event",
                        "config": {
                            "label": "Type",
                            "helper": "Choose whether the button should submit the form",
                            "options": [
                                {
                                    "value": "submit",
                                    "content": "Submit Button"
                                },
                                {
                                    "value": "script",
                                    "content": "Regular Button"
                                }
                            ]
                        }
                    },
                    {
                        "type": {
                            "props": [
                                "label",
                                "value",
                                "helper"
                            ],
                            "watch": {
                                "value": {
                                    "immediate": true
                                }
                            },
                            "methods": [],
                            "computed": [],
                            "_compiled": true,
                            "inheritAttrs": false,
                            "staticRenderFns": []
                        },
                        "field": "tooltip",
                        "config": {
                            "label": "Tooltip"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "fieldValue",
                        "config": {
                            "label": "Value",
                            "helper": "The value being submitted"
                        }
                    },
                    {
                        "type": "FormMultiselect",
                        "field": "variant",
                        "config": {
                            "label": "Button Variant Style",
                            "helper": "The variant determines the appearance of the button",
                            "options": [
                                {
                                    "value": "primary",
                                    "content": "Primary"
                                },
                                {
                                    "value": "secondary",
                                    "content": "Secondary"
                                },
                                {
                                    "value": "success",
                                    "content": "Success"
                                },
                                {
                                    "value": "danger",
                                    "content": "Danger"
                                },
                                {
                                    "value": "warning",
                                    "content": "Warning"
                                },
                                {
                                    "value": "info",
                                    "content": "Info"
                                },
                                {
                                    "value": "light",
                                    "content": "Light"
                                },
                                {
                                    "value": "dark",
                                    "content": "Dark"
                                },
                                {
                                    "value": "link",
                                    "content": "Link"
                                }
                            ]
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "conditionalHide",
                        "config": {
                            "label": "Visibility Rule",
                            "helper": "This control is hidden until this expression is true"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "customFormatter",
                        "config": {
                            "label": "Custom Format String",
                            "helper": "Use the Mask Pattern format <br> Date ##/##/#### <br> SSN ###-##-#### <br> Phone (###) ###-####",
                            "validation": null
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "customCssSelector",
                        "config": {
                            "label": "CSS Selector Name",
                            "helper": "Use this in your custom css rules",
                            "validation": "regex: [-?[_a-zA-Z]+[_-a-zA-Z0-9]*]"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "ariaLabel",
                        "config": {
                            "label": "Aria Label",
                            "helper": "Attribute designed to help assistive technology (e.g. screen readers) attach a label"
                        }
                    },
                    {
                        "type": "FormInput",
                        "field": "tabindex",
                        "config": {
                            "label": "Tab Order",
                            "helper": "Order in which a user will move focus from one control to another by pressing the Tab key",
                            "validation": "regex: [0-9]*"
                        }
                    }
                ],
                "editor-control": "FormSubmit",
                "editor-component": "FormButton"
            }
        ]
    }
]