npm - @tsed/tailwind-formio - Versions diffs - 2.0.2 → 2.0.3 - Mend

@tsed/tailwind-formio 2.0.2 → 2.0.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (149) hide show

package/lib/templates/stories/builder.stories.js ADDED Viewed

@@ -0,0 +1,1905 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import FormioFormBuilder from "formiojs/FormBuilder.js";
+import { useEffect, useRef } from "react";
+function WrapperFormBuilder({ options, form }) {
+    const ref = useRef();
+    const initializeBuilder = (form, options) => {
+        options = Object.assign({}, options);
+        form = Object.assign({}, form);
+        const builder = new FormioFormBuilder(ref.current, form, options);
+        builder.ready.then(() => {
+            // onChange();
+            // builderEvents.forEach(({name, action}) => builder.instance.on(name, action));
+        });
+        return builder;
+    };
+    useEffect(() => {
+        const builder = initializeBuilder(form, options);
+        return () => builder.instance.destroy(true);
+    }, [form, options]);
+    return (_jsx("div", { children: _jsx("div", { ref: ref }, void 0) }, void 0));
+}
+export default {
+    title: "Formiojs/FormBuilder",
+    component: WrapperFormBuilder,
+    argTypes: {
+        display: {
+            control: {
+                type: "select",
+                options: ["form", "wizard"]
+            }
+        },
+        template: {
+            control: {
+                type: "select",
+                options: ["tailwind", "bootstrap", "semantic"]
+            }
+        },
+        iconset: {
+            control: {
+                type: "select",
+                options: ["bx", "fa"]
+            }
+        },
+        form: {
+            control: {
+                type: "object"
+            }
+        }
+    },
+    parameters: {
+        docs: {
+            source: {
+                type: "code"
+            }
+        }
+    }
+};
+export const Sandbox = (args) => {
+    return _jsx(WrapperFormBuilder, { form: { ...args.form, display: args.display }, options: { template: args.template, iconset: args.iconset } }, void 0);
+};
+Sandbox.args = {
+    form: {
+        _id: "6023f8fe4b1a2ab9a3aae096",
+        type: "form",
+        tags: [],
+        owner: "5d0797a382461b6656d2c790",
+        components: [
+            {
+                label: "Text Field",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                inputMask: "",
+                allowMultipleMasks: false,
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                showWordCount: false,
+                showCharCount: false,
+                mask: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: true,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                inputFormat: "plain",
+                protected: false,
+                dbIndex: false,
+                case: "",
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: true,
+                    pattern: "",
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    minLength: "",
+                    maxLength: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                errorLabel: "",
+                key: "textField",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "textfield",
+                input: true,
+                refreshOn: "",
+                inputType: "text",
+                id: "eqb1o4r",
+                defaultValue: ""
+            },
+            {
+                label: "Text Area",
+                labelPosition: "top",
+                placeholder: "Placeholder",
+                description: "description",
+                tooltip: "tooltip",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                editor: "",
+                autoExpand: false,
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                showWordCount: false,
+                showCharCount: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: true,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                inputFormat: "html",
+                protected: false,
+                dbIndex: false,
+                case: "",
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    pattern: "",
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    minLength: "",
+                    maxLength: "",
+                    minWords: "",
+                    maxWords: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                errorLabel: "",
+                key: "textArea",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                fixedSize: true,
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                attributes: {},
+                type: "textarea",
+                rows: 3,
+                wysiwyg: false,
+                input: true,
+                refreshOn: "",
+                allowMultipleMasks: false,
+                mask: false,
+                inputType: "text",
+                inputMask: "",
+                id: "e4jsrqc",
+                defaultValue: ""
+            },
+            {
+                label: "Number",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                mask: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                delimiter: false,
+                requireDecimal: false,
+                inputFormat: "plain",
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    min: "",
+                    max: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false,
+                    step: "any",
+                    integer: ""
+                },
+                errorLabel: "",
+                key: "number",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "number",
+                input: true,
+                unique: false,
+                refreshOn: "",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                id: "ex8zh8u",
+                defaultValue: null
+            },
+            {
+                label: "Password",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                showWordCount: false,
+                showCharCount: false,
+                mask: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                case: "",
+                redrawOn: "",
+                clearOnHide: true,
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    pattern: "",
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    minLength: "",
+                    maxLength: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                errorLabel: "",
+                key: "password",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "password",
+                input: true,
+                multiple: false,
+                defaultValue: null,
+                protected: true,
+                unique: false,
+                persistent: true,
+                refreshOn: "",
+                dbIndex: false,
+                customDefaultValue: "",
+                calculateValue: "",
+                encrypted: false,
+                allowMultipleMasks: false,
+                inputType: "text",
+                inputFormat: "plain",
+                inputMask: "",
+                id: "etqa5pm"
+            },
+            {
+                label: "Checkbox",
+                description: "description",
+                tooltip: "tooltip",
+                shortcut: "",
+                inputType: "checkbox",
+                customClass: "",
+                tabindex: "",
+                hidden: false,
+                hideLabel: false,
+                autofocus: false,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                defaultValue: false,
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                errorLabel: "",
+                key: "checkbox",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "checkbox",
+                name: "",
+                value: "",
+                input: true,
+                placeholder: "",
+                prefix: "",
+                suffix: "",
+                multiple: false,
+                unique: false,
+                refreshOn: "",
+                labelPosition: "right",
+                widget: null,
+                validateOn: "change",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                dataGridLabel: true,
+                id: "em8ln2m"
+            },
+            {
+                label: "Select Boxes",
+                labelPosition: "top",
+                optionsLabelPosition: "right",
+                description: "",
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                inline: false,
+                hidden: false,
+                hideLabel: false,
+                autofocus: false,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                values: [
+                    { label: "label", value: "label", shortcut: "" },
+                    {
+                        label: "lol",
+                        value: "lol",
+                        shortcut: ""
+                    }
+                ],
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                errorLabel: "",
+                minSelectedCountMessage: "",
+                maxSelectedCountMessage: "",
+                key: "selectBoxes",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "selectboxes",
+                input: true,
+                placeholder: "",
+                prefix: "",
+                suffix: "",
+                multiple: false,
+                unique: false,
+                refreshOn: "",
+                widget: null,
+                validateOn: "change",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                inputType: "checkbox",
+                fieldSet: false,
+                id: "esa4upt",
+                defaultValue: { "": false }
+            },
+            {
+                label: "Radio",
+                labelPosition: "top",
+                optionsLabelPosition: "right",
+                description: "",
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                inline: false,
+                hidden: false,
+                hideLabel: false,
+                autofocus: false,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                values: [
+                    { label: "data", value: "data", shortcut: "" },
+                    {
+                        label: "label",
+                        value: "label",
+                        shortcut: ""
+                    }
+                ],
+                dataType: "",
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                errorLabel: "",
+                key: "radio",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "radio",
+                input: true,
+                placeholder: "",
+                prefix: "",
+                suffix: "",
+                multiple: false,
+                unique: false,
+                refreshOn: "",
+                widget: null,
+                validateOn: "change",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                inputType: "radio",
+                fieldSet: false,
+                id: "edh7o6o",
+                defaultValue: ""
+            },
+            {
+                label: "Select",
+                labelPosition: "top",
+                widget: "choicesjs",
+                placeholder: "placeholder",
+                description: "",
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                hidden: false,
+                hideLabel: false,
+                uniqueOptions: false,
+                autofocus: false,
+                disabled: false,
+                tableView: true,
+                modalEdit: false,
+                multiple: false,
+                dataSrc: "values",
+                data: {
+                    values: [
+                        { label: "label", value: "label" },
+                        { label: "save", value: "save" }
+                    ],
+                    resource: "",
+                    json: "",
+                    url: "",
+                    custom: ""
+                },
+                valueProperty: "",
+                dataType: "",
+                idPath: "id",
+                template: "<span>{{ item.label }}</span>",
+                refreshOn: "",
+                refreshOnBlur: "",
+                clearOnRefresh: false,
+                searchEnabled: true,
+                selectThreshold: 0.3,
+                readOnlyValue: false,
+                customOptions: {},
+                useExactSearch: false,
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                errorLabel: "",
+                key: "select",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "select",
+                indexeddb: { filter: {} },
+                selectFields: "",
+                searchField: "",
+                minSearch: 0,
+                filter: "",
+                limit: 100,
+                redrawOn: "",
+                input: true,
+                prefix: "",
+                suffix: "",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                lazyLoad: true,
+                authenticate: false,
+                searchThreshold: 0.3,
+                fuseOptions: { include: "score", threshold: 0.3 },
+                id: "ebqtqd6",
+                defaultValue: ""
+            },
+            {
+                label: "Select",
+                labelPosition: "top",
+                widget: "html5",
+                placeholder: "placeholder",
+                description: "",
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                hidden: false,
+                hideLabel: false,
+                uniqueOptions: false,
+                autofocus: false,
+                disabled: false,
+                tableView: true,
+                modalEdit: false,
+                multiple: false,
+                dataSrc: "values",
+                data: {
+                    values: [{ label: "", value: "" }],
+                    resource: "",
+                    json: "",
+                    url: "",
+                    custom: ""
+                },
+                valueProperty: "",
+                dataType: "",
+                idPath: "id",
+                template: "<span>{{ item.label }}</span>",
+                refreshOn: "",
+                refreshOnBlur: "",
+                clearOnRefresh: false,
+                searchEnabled: true,
+                selectThreshold: 0.3,
+                readOnlyValue: false,
+                customOptions: {},
+                useExactSearch: false,
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                errorLabel: "",
+                key: "select1",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "select",
+                indexeddb: { filter: {} },
+                selectFields: "",
+                searchField: "",
+                minSearch: 0,
+                filter: "",
+                limit: 100,
+                redrawOn: "",
+                input: true,
+                prefix: "",
+                suffix: "",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                lazyLoad: true,
+                authenticate: false,
+                searchThreshold: 0.3,
+                fuseOptions: { include: "score", threshold: 0.3 },
+                id: "em8m4qk",
+                defaultValue: ""
+            },
+            {
+                label: "Email",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                mask: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: true,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                inputFormat: "plain",
+                protected: false,
+                dbIndex: false,
+                case: "",
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    pattern: "",
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    minLength: "",
+                    maxLength: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                kickbox: { enabled: false },
+                errorLabel: "",
+                key: "email",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "email",
+                input: true,
+                refreshOn: "",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                inputType: "email",
+                inputMask: "",
+                id: "epj8sj28",
+                defaultValue: null
+            },
+            {
+                label: "Url",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                mask: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: true,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                inputFormat: "plain",
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    pattern: "",
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    minLength: "",
+                    maxLength: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                errorLabel: "",
+                key: "url",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "url",
+                input: true,
+                refreshOn: "",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                inputType: "url",
+                inputMask: "",
+                id: "exw9p4",
+                defaultValue: null
+            },
+            {
+                label: "Phone Number",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                inputMask: "(999) 999-9999",
+                allowMultipleMasks: false,
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                mask: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: true,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                inputFormat: "plain",
+                protected: false,
+                dbIndex: false,
+                case: "",
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false,
+                    minLength: "",
+                    maxLength: "",
+                    pattern: ""
+                },
+                unique: false,
+                errorLabel: "",
+                key: "phoneNumber",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "phoneNumber",
+                input: true,
+                refreshOn: "",
+                showCharCount: false,
+                showWordCount: false,
+                inputType: "tel",
+                id: "e2c7lpl",
+                defaultValue: null
+            },
+            {
+                label: "Tags",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                hidden: false,
+                hideLabel: false,
+                autofocus: false,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                delimeter: ",",
+                maxTags: 0,
+                storeas: "string",
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                validateOn: "change",
+                errorLabel: "",
+                key: "tags",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "tags",
+                input: true,
+                prefix: "",
+                suffix: "",
+                multiple: false,
+                refreshOn: "",
+                widget: { type: "input" },
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                id: "ejc82t",
+                defaultValue: null
+            },
+            {
+                label: "Address",
+                labelPosition: "top",
+                enableManualMode: false,
+                disableClearIcon: false,
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                hidden: false,
+                hideLabel: false,
+                autofocus: false,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                provider: "google",
+                manualModeViewString: "",
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                validateOn: "change",
+                errorLabel: "",
+                key: "address",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "address",
+                switchToManualModeLabel: "Can't find address? Switch to manual mode.",
+                input: true,
+                prefix: "",
+                suffix: "",
+                refreshOn: "",
+                widget: null,
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                tree: true,
+                components: [
+                    {
+                        label: "Address 1",
+                        tableView: false,
+                        key: "address1",
+                        type: "textfield",
+                        input: true,
+                        customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                        placeholder: "",
+                        prefix: "",
+                        customClass: "",
+                        suffix: "",
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        hidden: false,
+                        clearOnHide: true,
+                        refreshOn: "",
+                        redrawOn: "",
+                        modalEdit: false,
+                        labelPosition: "top",
+                        description: "",
+                        errorLabel: "",
+                        tooltip: "",
+                        hideLabel: false,
+                        tabindex: "",
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: "",
+                        calculateValue: "",
+                        calculateServer: false,
+                        widget: { type: "input" },
+                        attributes: {},
+                        validateOn: "change",
+                        validate: {
+                            required: false,
+                            custom: "",
+                            customPrivate: false,
+                            strictDateValidation: false,
+                            multiple: false,
+                            unique: false,
+                            minLength: "",
+                            maxLength: "",
+                            pattern: ""
+                        },
+                        conditional: { show: null, when: null, eq: "" },
+                        overlay: { style: "", left: "", top: "", width: "", height: "" },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        mask: false,
+                        inputType: "text",
+                        inputFormat: "plain",
+                        inputMask: "",
+                        spellcheck: true,
+                        id: "eecfg6h"
+                    },
+                    {
+                        label: "Address 2",
+                        tableView: false,
+                        key: "address2",
+                        type: "textfield",
+                        input: true,
+                        customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                        placeholder: "",
+                        prefix: "",
+                        customClass: "",
+                        suffix: "",
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        hidden: false,
+                        clearOnHide: true,
+                        refreshOn: "",
+                        redrawOn: "",
+                        modalEdit: false,
+                        labelPosition: "top",
+                        description: "",
+                        errorLabel: "",
+                        tooltip: "",
+                        hideLabel: false,
+                        tabindex: "",
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: "",
+                        calculateValue: "",
+                        calculateServer: false,
+                        widget: { type: "input" },
+                        attributes: {},
+                        validateOn: "change",
+                        validate: {
+                            required: false,
+                            custom: "",
+                            customPrivate: false,
+                            strictDateValidation: false,
+                            multiple: false,
+                            unique: false,
+                            minLength: "",
+                            maxLength: "",
+                            pattern: ""
+                        },
+                        conditional: { show: null, when: null, eq: "" },
+                        overlay: { style: "", left: "", top: "", width: "", height: "" },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        mask: false,
+                        inputType: "text",
+                        inputFormat: "plain",
+                        inputMask: "",
+                        spellcheck: true,
+                        id: "eajhpuu"
+                    },
+                    {
+                        label: "City",
+                        tableView: false,
+                        key: "city",
+                        type: "textfield",
+                        input: true,
+                        customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                        placeholder: "",
+                        prefix: "",
+                        customClass: "",
+                        suffix: "",
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        hidden: false,
+                        clearOnHide: true,
+                        refreshOn: "",
+                        redrawOn: "",
+                        modalEdit: false,
+                        labelPosition: "top",
+                        description: "",
+                        errorLabel: "",
+                        tooltip: "",
+                        hideLabel: false,
+                        tabindex: "",
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: "",
+                        calculateValue: "",
+                        calculateServer: false,
+                        widget: { type: "input" },
+                        attributes: {},
+                        validateOn: "change",
+                        validate: {
+                            required: false,
+                            custom: "",
+                            customPrivate: false,
+                            strictDateValidation: false,
+                            multiple: false,
+                            unique: false,
+                            minLength: "",
+                            maxLength: "",
+                            pattern: ""
+                        },
+                        conditional: { show: null, when: null, eq: "" },
+                        overlay: { style: "", left: "", top: "", width: "", height: "" },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        mask: false,
+                        inputType: "text",
+                        inputFormat: "plain",
+                        inputMask: "",
+                        spellcheck: true,
+                        id: "efpnrca7"
+                    },
+                    {
+                        label: "State",
+                        tableView: false,
+                        key: "state",
+                        type: "textfield",
+                        input: true,
+                        customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                        placeholder: "",
+                        prefix: "",
+                        customClass: "",
+                        suffix: "",
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        hidden: false,
+                        clearOnHide: true,
+                        refreshOn: "",
+                        redrawOn: "",
+                        modalEdit: false,
+                        labelPosition: "top",
+                        description: "",
+                        errorLabel: "",
+                        tooltip: "",
+                        hideLabel: false,
+                        tabindex: "",
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: "",
+                        calculateValue: "",
+                        calculateServer: false,
+                        widget: { type: "input" },
+                        attributes: {},
+                        validateOn: "change",
+                        validate: {
+                            required: false,
+                            custom: "",
+                            customPrivate: false,
+                            strictDateValidation: false,
+                            multiple: false,
+                            unique: false,
+                            minLength: "",
+                            maxLength: "",
+                            pattern: ""
+                        },
+                        conditional: { show: null, when: null, eq: "" },
+                        overlay: { style: "", left: "", top: "", width: "", height: "" },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        mask: false,
+                        inputType: "text",
+                        inputFormat: "plain",
+                        inputMask: "",
+                        spellcheck: true,
+                        id: "eu3kksv"
+                    },
+                    {
+                        label: "Country",
+                        tableView: false,
+                        key: "country",
+                        type: "textfield",
+                        input: true,
+                        customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                        placeholder: "",
+                        prefix: "",
+                        customClass: "",
+                        suffix: "",
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        hidden: false,
+                        clearOnHide: true,
+                        refreshOn: "",
+                        redrawOn: "",
+                        modalEdit: false,
+                        labelPosition: "top",
+                        description: "",
+                        errorLabel: "",
+                        tooltip: "",
+                        hideLabel: false,
+                        tabindex: "",
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: "",
+                        calculateValue: "",
+                        calculateServer: false,
+                        widget: { type: "input" },
+                        attributes: {},
+                        validateOn: "change",
+                        validate: {
+                            required: false,
+                            custom: "",
+                            customPrivate: false,
+                            strictDateValidation: false,
+                            multiple: false,
+                            unique: false,
+                            minLength: "",
+                            maxLength: "",
+                            pattern: ""
+                        },
+                        conditional: { show: null, when: null, eq: "" },
+                        overlay: { style: "", left: "", top: "", width: "", height: "" },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        mask: false,
+                        inputType: "text",
+                        inputFormat: "plain",
+                        inputMask: "",
+                        spellcheck: true,
+                        id: "el39cu9"
+                    },
+                    {
+                        label: "Zip Code",
+                        tableView: false,
+                        key: "zip",
+                        type: "textfield",
+                        input: true,
+                        customConditional: "show = _.get(instance, 'parent.manualMode', false);",
+                        placeholder: "",
+                        prefix: "",
+                        customClass: "",
+                        suffix: "",
+                        multiple: false,
+                        defaultValue: null,
+                        protected: false,
+                        unique: false,
+                        persistent: true,
+                        hidden: false,
+                        clearOnHide: true,
+                        refreshOn: "",
+                        redrawOn: "",
+                        modalEdit: false,
+                        labelPosition: "top",
+                        description: "",
+                        errorLabel: "",
+                        tooltip: "",
+                        hideLabel: false,
+                        tabindex: "",
+                        disabled: false,
+                        autofocus: false,
+                        dbIndex: false,
+                        customDefaultValue: "",
+                        calculateValue: "",
+                        calculateServer: false,
+                        widget: { type: "input" },
+                        attributes: {},
+                        validateOn: "change",
+                        validate: {
+                            required: false,
+                            custom: "",
+                            customPrivate: false,
+                            strictDateValidation: false,
+                            multiple: false,
+                            unique: false,
+                            minLength: "",
+                            maxLength: "",
+                            pattern: ""
+                        },
+                        conditional: { show: null, when: null, eq: "" },
+                        overlay: { style: "", left: "", top: "", width: "", height: "" },
+                        allowCalculateOverride: false,
+                        encrypted: false,
+                        showCharCount: false,
+                        showWordCount: false,
+                        properties: {},
+                        allowMultipleMasks: false,
+                        mask: false,
+                        inputType: "text",
+                        inputFormat: "plain",
+                        inputMask: "",
+                        spellcheck: true,
+                        id: "epyac4"
+                    }
+                ],
+                providerOptions: { params: { key: "fze", region: "" } },
+                id: "er02e2gb",
+                defaultValue: {}
+            },
+            {
+                label: "Date / Time",
+                labelPosition: "top",
+                displayInTimezone: "viewer",
+                useLocaleSettings: false,
+                allowInput: true,
+                format: "yyyy-MM-dd hh:mm a",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                hidden: false,
+                hideLabel: false,
+                autofocus: false,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                enableDate: true,
+                enableMinDateInput: false,
+                datePicker: {
+                    minDate: null,
+                    maxDate: null,
+                    disable: "",
+                    disableFunction: "",
+                    disableWeekends: false,
+                    disableWeekdays: false,
+                    showWeeks: true,
+                    startingDay: 0,
+                    initDate: "",
+                    minMode: "day",
+                    maxMode: "year",
+                    yearRows: 4,
+                    yearColumns: 5
+                },
+                enableMaxDateInput: false,
+                enableTime: true,
+                timePicker: {
+                    showMeridian: true,
+                    hourStep: 1,
+                    minuteStep: 1,
+                    readonlyInput: false,
+                    mousewheel: true,
+                    arrowkeys: true
+                },
+                multiple: false,
+                defaultValue: "",
+                defaultDate: "",
+                customOptions: {},
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                unique: false,
+                validateOn: "change",
+                errorLabel: "",
+                key: "dateTime",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "datetime",
+                timezone: "",
+                input: true,
+                prefix: "",
+                suffix: "",
+                refreshOn: "",
+                widget: {
+                    type: "calendar",
+                    displayInTimezone: "viewer",
+                    locale: "en",
+                    useLocaleSettings: false,
+                    allowInput: true,
+                    mode: "single",
+                    enableTime: true,
+                    noCalendar: false,
+                    format: "yyyy-MM-dd hh:mm a",
+                    hourIncrement: 1,
+                    minuteIncrement: 1,
+                    minDate: null,
+                    disabledDates: "",
+                    disableWeekends: false,
+                    disableWeekdays: false,
+                    disableFunction: "",
+                    maxDate: null
+                },
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                datepickerMode: "day",
+                id: "el9idgl"
+            },
+            {
+                label: "Day",
+                hideInputLabels: false,
+                inputsLabelPosition: "top",
+                description: "",
+                useLocaleSettings: false,
+                tooltip: "",
+                customClass: "",
+                tabindex: "",
+                hidden: false,
+                hideLabel: false,
+                autofocus: false,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                fields: {
+                    day: {
+                        type: "number",
+                        placeholder: "",
+                        hide: false,
+                        required: false
+                    },
+                    month: {
+                        type: "select",
+                        placeholder: "",
+                        hide: false,
+                        required: false
+                    },
+                    year: {
+                        type: "number",
+                        placeholder: "",
+                        hide: false,
+                        required: false
+                    }
+                },
+                dayFirst: false,
+                persistent: true,
+                protected: false,
+                dbIndex: false,
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                maxDate: "",
+                minDate: "",
+                unique: false,
+                errorLabel: "",
+                validate: {
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    required: false,
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                key: "day",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "day",
+                input: true,
+                placeholder: "",
+                prefix: "",
+                suffix: "",
+                multiple: false,
+                refreshOn: "",
+                labelPosition: "top",
+                widget: null,
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                id: "ecgefls",
+                defaultValue: "00/00/0000"
+            },
+            {
+                label: "Currency",
+                labelPosition: "top",
+                placeholder: "",
+                description: "",
+                tooltip: "",
+                prefix: "",
+                suffix: "",
+                widget: { type: "input" },
+                customClass: "",
+                tabindex: "",
+                autocomplete: "",
+                hidden: false,
+                hideLabel: false,
+                mask: false,
+                autofocus: false,
+                spellcheck: true,
+                disabled: false,
+                tableView: false,
+                modalEdit: false,
+                multiple: false,
+                persistent: true,
+                currency: "USD",
+                inputFormat: "plain",
+                protected: false,
+                dbIndex: false,
+                case: "",
+                encrypted: false,
+                redrawOn: "",
+                clearOnHide: true,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                allowCalculateOverride: false,
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    customMessage: "",
+                    custom: "",
+                    customPrivate: false,
+                    json: "",
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false,
+                    min: "",
+                    max: "",
+                    step: "any",
+                    integer: ""
+                },
+                unique: false,
+                errorLabel: "",
+                key: "currency",
+                tags: [],
+                properties: {},
+                conditional: { show: null, when: null, eq: "", json: "" },
+                customConditional: "",
+                logic: [],
+                attributes: {},
+                overlay: {
+                    style: "",
+                    page: "",
+                    left: "",
+                    top: "",
+                    width: "",
+                    height: ""
+                },
+                type: "currency",
+                input: true,
+                refreshOn: "",
+                showCharCount: false,
+                showWordCount: false,
+                allowMultipleMasks: false,
+                delimiter: true,
+                id: "em22wkd",
+                defaultValue: null
+            },
+            {
+                type: "button",
+                label: "Submit",
+                key: "submit",
+                size: "md",
+                block: false,
+                action: "submit",
+                disableOnInvalid: true,
+                theme: "primary",
+                input: true,
+                placeholder: "",
+                prefix: "",
+                customClass: "",
+                suffix: "",
+                multiple: false,
+                defaultValue: null,
+                protected: false,
+                unique: false,
+                persistent: false,
+                hidden: false,
+                clearOnHide: true,
+                refreshOn: "",
+                redrawOn: "",
+                tableView: false,
+                modalEdit: false,
+                labelPosition: "top",
+                description: "",
+                errorLabel: "",
+                tooltip: "",
+                hideLabel: false,
+                tabindex: "",
+                disabled: false,
+                autofocus: false,
+                dbIndex: false,
+                customDefaultValue: "",
+                calculateValue: "",
+                calculateServer: false,
+                widget: { type: "input" },
+                attributes: {},
+                validateOn: "change",
+                validate: {
+                    required: false,
+                    custom: "",
+                    customPrivate: false,
+                    strictDateValidation: false,
+                    multiple: false,
+                    unique: false
+                },
+                conditional: { show: null, when: null, eq: "" },
+                overlay: { style: "", left: "", top: "", width: "", height: "" },
+                allowCalculateOverride: false,
+                encrypted: false,
+                showCharCount: false,
+                showWordCount: false,
+                properties: {},
+                allowMultipleMasks: false,
+                leftIcon: "",
+                rightIcon: "",
+                dataGridLabel: true,
+                id: "e08gq3l"
+            }
+        ],
+        revisions: "",
+        _vid: 0,
+        title: "text-field",
+        display: "form",
+        access: [
+            {
+                roles: ["5d0797bc872fc747da559858", "5d0797bc872fc71d05559859", "5d0797bc872fc7da3b55985a"],
+                type: "read_all"
+            }
+        ],
+        submissionAccess: [],
+        controller: "",
+        properties: {},
+        settings: {},
+        name: "textField",
+        path: "textfield",
+        project: "5d0797bc872fc7d140559857",
+        created: "2021-02-10T15:17:18.028Z",
+        modified: "2021-02-10T21:38:52.325Z",
+        machineName: "tcspjwhsevrzpcd:textField"
+    },
+    display: "form",
+    template: "tailwind",
+    iconset: "bx"
+};