[
    {
        "name": "FOUR-4408 B",
        "items": [
            {
                "label": "Rich Text",
                "config": {
                    "icon": "fas fa-pencil-ruler",
                    "label": null,
                    "content": "<p><strong>FORMATED DATA</strong></p>\n<p>{{{form_text_area_1}}}</p>",
                    "interactive": true,
                    "renderVarHtml": false
                },
                "component": "FormHtmlViewer",
                "inspector": [
                    {
                        "type": "FormTextArea",
                        "field": "content",
                        "config": {
                            "rows": 5,
                            "label": "Content",
                            "value": null,
                            "helper": "The HTML text to display"
                        }
                    },
                    {
                        "type": "FormCheckbox",
                        "field": "renderVarHtml",
                        "config": {
                            "label": "Render HTML from a Variable",
                            "value": null,
                            "helper": null
                        }
                    },
                    {
                        "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": "FormHtmlEditor",
                "editor-component": "FormHtmlEditor"
            },
            {
                "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"
            }
        ]
    }
]