@formio/js 5.0.0-rc.5

package/lib/cjs/components/form/fixtures/formModalEdit.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    '_id': '5ed8d0f9b507cf407c61f2d6',
+    'type': 'form',
+    'owner': '5e05a6b7549cdc2ece30c6b0',
+    'components': [
+        {
+            'label': 'Form',
+            'tableView': true,
+            'modalEdit': true,
+            'components': [
+                {
+                    'label': 'Nested Text Field',
+                    'tableView': true,
+                    'key': 'nestedTextField',
+                    'type': 'textfield',
+                    'input': true
+                }
+            ],
+            'key': 'form',
+            'type': 'form',
+            'input': true
+        },
+        {
+            'type': 'button',
+            'label': 'Submit',
+            'key': 'submit',
+            'disableOnInvalid': true,
+            'input': true,
+            'tableView': false
+        }
+    ],
+    'controller': '',
+    'revisions': '',
+    '_vid': 0,
+    'title': 'nestedModal',
+    'display': 'form',
+    'access': [
+        {
+            'roles': [
+                '5e96e79ee1c3ad3178454100',
+                '5e96e79ee1c3ad3178454101',
+                '5e96e79ee1c3ad3178454102'
+            ],
+            'type': 'read_all'
+        }
+    ],
+    'name': 'nestedModal',
+    'path': 'nestedmodal',
+};

package/lib/cjs/components/form/fixtures/index.d.ts

@@ -0,0 +1,8 @@
+import formModalEdit from './formModalEdit';
+import comp1 from './comp1';
+import comp2 from './comp2';
+import comp3 from './comp3';
+import comp4 from './comp4';
+import comp5 from './comp5';
+import comp6 from './comp6';
+export { formModalEdit, comp1, comp2, comp3, comp4, comp5, comp6 };

package/lib/cjs/components/form/fixtures/index.js

@@ -0,0 +1,20 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = exports.formModalEdit = void 0;
+const formModalEdit_1 = __importDefault(require("./formModalEdit"));
+exports.formModalEdit = formModalEdit_1.default;
+const comp1_1 = __importDefault(require("./comp1"));
+exports.comp1 = comp1_1.default;
+const comp2_1 = __importDefault(require("./comp2"));
+exports.comp2 = comp2_1.default;
+const comp3_1 = __importDefault(require("./comp3"));
+exports.comp3 = comp3_1.default;
+const comp4_1 = __importDefault(require("./comp4"));
+exports.comp4 = comp4_1.default;
+const comp5_1 = __importDefault(require("./comp5"));
+exports.comp5 = comp5_1.default;
+const comp6_1 = __importDefault(require("./comp6"));
+exports.comp6 = comp6_1.default;

package/lib/cjs/components/form/fixtures/values.d.ts

@@ -0,0 +1,6 @@
+declare const _default: {
+    data: {
+        foo: string;
+    };
+}[];
+export default _default;

package/lib/cjs/components/form/fixtures/values.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        data: {
+            foo: 'bar',
+        },
+    },
+];

package/lib/cjs/components/hidden/Hidden.d.ts

@@ -0,0 +1,25 @@
+export default class HiddenComponent extends Input {
+    static get builderInfo(): {
+        title: string;
+        group: string;
+        icon: string;
+        weight: number;
+        documentation: string;
+        schema: any;
+    };
+    get inputInfo(): {
+        type: string;
+        component: any;
+        changeEvent: string;
+        attr: {
+            name: any;
+            type: any;
+            class: string;
+            lang: any;
+        };
+    };
+    labelIsHidden(): boolean;
+    get emptyValue(): string;
+    setValue(value: any, flags?: {}): boolean;
+}
+import Input from '../_classes/input/Input';

package/lib/cjs/components/hidden/Hidden.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/cjs/components/hidden/Hidden.form.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Components_1 = __importDefault(require("../Components"));
+const Hidden_edit_display_1 = __importDefault(require("./editForm/Hidden.edit.display"));
+const Hidden_edit_data_1 = __importDefault(require("./editForm/Hidden.edit.data"));
+function default_1(...extend) {
+    return Components_1.default.baseEditForm([
+        {
+            key: 'display',
+            components: Hidden_edit_display_1.default
+        },
+        {
+            key: 'data',
+            components: Hidden_edit_data_1.default
+        },
+        {
+            key: 'validation',
+            ignore: true
+        },
+        {
+            key: 'conditional',
+            ignore: true
+        },
+    ], ...extend);
+}
+exports.default = default_1;

package/lib/cjs/components/hidden/Hidden.js

@@ -0,0 +1,60 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Input_1 = __importDefault(require("../_classes/input/Input"));
+class HiddenComponent extends Input_1.default {
+    static schema(...extend) {
+        return Input_1.default.schema({
+            type: 'hidden',
+            tableView: false,
+            inputType: 'hidden'
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Hidden',
+            group: 'data',
+            icon: 'user-secret',
+            weight: 0,
+            documentation: '/userguide/form-building/data-components#hidden',
+            schema: HiddenComponent.schema()
+        };
+    }
+    get defaultSchema() {
+        return HiddenComponent.schema();
+    }
+    get inputInfo() {
+        const info = super.elementInfo();
+        info.type = 'input';
+        info.attr.type = 'hidden';
+        info.changeEvent = 'change';
+        return info;
+    }
+    get skipInEmail() {
+        return true;
+    }
+    /**
+     * Check if a component is eligible for multiple validation
+     *
+     * @return {boolean}
+     */
+    validateMultiple() {
+        // Since "arrays" are able to be stored in hidden components, we need to turn off multiple validation.
+        return false;
+    }
+    labelIsHidden() {
+        return true;
+    }
+    get emptyValue() {
+        return '';
+    }
+    setValue(value, flags = {}) {
+        return this.updateValue(value, flags);
+    }
+    getValue() {
+        return this.dataValue;
+    }
+}
+exports.default = HiddenComponent;

package/lib/cjs/components/hidden/editForm/Hidden.edit.data.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    key: string;
+    ignore: boolean;
+}[];
+export default _default;

package/lib/cjs/components/hidden/editForm/Hidden.edit.data.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'multiple',
+        ignore: true
+    },
+    {
+        key: 'clearOnHide',
+        ignore: true
+    },
+    {
+        key: 'allowCalculateOverride',
+        ignore: true
+    },
+];

package/lib/cjs/components/hidden/editForm/Hidden.edit.display.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    key: string;
+    ignore: boolean;
+}[];
+export default _default;

package/lib/cjs/components/hidden/editForm/Hidden.edit.display.js

@@ -0,0 +1,44 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'labelPosition',
+        ignore: true
+    },
+    {
+        key: 'placeholder',
+        ignore: true
+    },
+    {
+        key: 'description',
+        ignore: true
+    },
+    {
+        key: 'tooltip',
+        ignore: true
+    },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        key: 'autofocus',
+        ignore: true
+    },
+    {
+        key: 'tabindex',
+        ignore: true
+    },
+    {
+        key: 'hidden',
+        ignore: true
+    },
+    {
+        key: 'tableView',
+        ignore: true
+    },
+    {
+        key: 'disabled',
+        ignore: true
+    },
+];

package/lib/cjs/components/hidden/fixtures/comp1.d.ts

@@ -0,0 +1,18 @@
+declare namespace _default {
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export const tags: never[];
+    export const type: string;
+    export const persistent: boolean;
+    export const unique: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const label: string;
+    export const key: string;
+    export const tableView: boolean;
+    export const input: boolean;
+}
+export default _default;

package/lib/cjs/components/hidden/fixtures/comp1.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    'type': 'hidden',
+    'persistent': true,
+    'unique': false,
+    'protected': false,
+    'label': 'Secret',
+    'key': 'secret',
+    'tableView': true,
+    'input': true
+};

package/lib/cjs/components/hidden/fixtures/index.d.ts

@@ -0,0 +1,2 @@
+export { comp1 };
+import comp1 from './comp1';

package/lib/cjs/components/hidden/fixtures/index.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.comp1 = void 0;
+const comp1_1 = __importDefault(require("./comp1"));
+exports.comp1 = comp1_1.default;

package/lib/cjs/components/hidden/fixtures/values.d.ts

@@ -0,0 +1,2 @@
+declare const _default: (string | number)[];
+export default _default;

package/lib/cjs/components/hidden/fixtures/values.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    'one',
+    1,
+];

package/lib/cjs/components/html/HTML.d.ts

@@ -0,0 +1,16 @@
+export default class HTMLComponent extends Component {
+    static get builderInfo(): {
+        title: string;
+        group: string;
+        icon: string;
+        weight: number;
+        documentation: string;
+        schema: any;
+    };
+    get content(): any;
+    get singleTags(): string[];
+    checkRefreshOn(changed: any): void;
+    renderContent(): any;
+    render(): any;
+}
+import Component from '../_classes/component/Component';

package/lib/cjs/components/html/HTML.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/cjs/components/html/HTML.form.js

@@ -0,0 +1,29 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Components_1 = __importDefault(require("../Components"));
+const HTML_edit_display_1 = __importDefault(require("./editForm/HTML.edit.display"));
+const HTML_edit_logic_1 = __importDefault(require("./editForm/HTML.edit.logic"));
+function default_1(...extend) {
+    return Components_1.default.baseEditForm([
+        {
+            key: 'display',
+            components: HTML_edit_display_1.default,
+        },
+        {
+            key: 'data',
+            ignore: true,
+        },
+        {
+            key: 'validation',
+            ignore: true,
+        },
+        {
+            key: 'logic',
+            components: HTML_edit_logic_1.default,
+        },
+    ], ...extend);
+}
+exports.default = default_1;

package/lib/cjs/components/html/HTML.js

@@ -0,0 +1,89 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component_1 = __importDefault(require("../_classes/component/Component"));
+const lodash_1 = __importDefault(require("lodash"));
+class HTMLComponent extends Component_1.default {
+    static schema(...extend) {
+        return Component_1.default.schema({
+            label: 'HTML',
+            type: 'htmlelement',
+            tag: 'p',
+            attrs: [],
+            content: '',
+            input: false,
+            persistent: false
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'HTML Element',
+            group: 'layout',
+            icon: 'code',
+            weight: 0,
+            documentation: '/userguide/form-building/layout-components#html-element',
+            schema: HTMLComponent.schema()
+        };
+    }
+    get defaultSchema() {
+        return HTMLComponent.schema();
+    }
+    get content() {
+        if (this.builderMode) {
+            return this.component.content;
+        }
+        // i18n returns error exactly with word 'select', spaces will be trimmed
+        if (this.component.content.replace(/(<(\/?[^>]+)>)/g, '').trim() === 'select') {
+            return ` ${this.component.content} `;
+        }
+        const submission = lodash_1.default.get(this.root, 'submission', {});
+        const content = this.component.content ? this.interpolate(this.component.content, {
+            metadata: submission.metadata || {},
+            submission: submission,
+            data: this.rootValue,
+            row: this.data
+        }) : '';
+        return this.sanitize(content, this.shouldSanitizeValue);
+    }
+    get singleTags() {
+        return ['br', 'img', 'hr'];
+    }
+    checkRefreshOn(changed) {
+        super.checkRefreshOn(changed);
+        if (!this.builderMode && this.component.refreshOnChange && this.element &&
+            !lodash_1.default.isUndefined(changed) && ((lodash_1.default.isBoolean(changed) && changed) || !lodash_1.default.isEmpty(changed)) &&
+            this.conditionallyVisible(this.data, this.row)) {
+            this.setContent(this.element, this.renderContent());
+        }
+    }
+    renderContent() {
+        const submission = lodash_1.default.get(this.root, 'submission', {});
+        return this.renderTemplate('html', {
+            component: this.component,
+            tag: this.component.tag,
+            attrs: (this.component.attrs || []).map((attr) => {
+                return {
+                    attr: attr.attr,
+                    value: this.interpolate(attr.value, {
+                        metadata: submission.metadata || {},
+                        submission: submission,
+                        data: this.rootValue,
+                        row: this.data
+                    })
+                };
+            }),
+            content: this.content,
+            singleTags: this.singleTags,
+        });
+    }
+    render() {
+        return super.render(this.renderContent());
+    }
+    attach(element) {
+        this.loadRefs(element, { html: 'single' });
+        return super.attach(element);
+    }
+}
+exports.default = HTMLComponent;

package/lib/cjs/components/html/editForm/HTML.edit.display.d.ts

@@ -0,0 +1,77 @@
+declare const _default: ({
+    key: string;
+    ignore: boolean;
+    type?: undefined;
+    input?: undefined;
+    weight?: undefined;
+    label?: undefined;
+    placeholder?: undefined;
+    tooltip?: undefined;
+    components?: undefined;
+    editor?: undefined;
+    rows?: undefined;
+    as?: undefined;
+    defaultValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    weight: number;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    ignore?: undefined;
+    components?: undefined;
+    editor?: undefined;
+    rows?: undefined;
+    as?: undefined;
+    defaultValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    label: string;
+    key: string;
+    tooltip: string;
+    weight: number;
+    components: {
+        label: string;
+        key: string;
+        input: boolean;
+        type: string;
+    }[];
+    ignore?: undefined;
+    placeholder?: undefined;
+    editor?: undefined;
+    rows?: undefined;
+    as?: undefined;
+    defaultValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    editor: string;
+    rows: number;
+    as: string;
+    label: string;
+    tooltip: string;
+    defaultValue: string;
+    key: string;
+    weight: number;
+    ignore?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+} | {
+    weight: number;
+    type: string;
+    label: string;
+    tooltip: string;
+    key: string;
+    input: boolean;
+    ignore?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+    editor?: undefined;
+    rows?: undefined;
+    as?: undefined;
+    defaultValue?: undefined;
+})[];
+export default _default;

package/lib/cjs/components/html/editForm/HTML.edit.display.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'labelPosition',
+        ignore: true
+    },
+    {
+        key: 'placeholder',
+        ignore: true
+    },
+    {
+        key: 'description',
+        ignore: true
+    },
+    {
+        key: 'tooltip',
+        ignore: true
+    },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        key: 'autofocus',
+        ignore: true
+    },
+    {
+        key: 'disabled',
+        ignore: true
+    },
+    {
+        key: 'tabindex',
+        ignore: true
+    },
+    {
+        key: 'tableView',
+        ignore: true
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'tag',
+        weight: 50,
+        label: 'HTML Tag',
+        placeholder: 'HTML Element Tag',
+        tooltip: 'The tag of this HTML element.'
+    },
+    {
+        type: 'textfield',
+        input: true,
+        key: 'className',
+        weight: 60,
+        label: 'CSS Class',
+        placeholder: 'CSS Class',
+        tooltip: 'The CSS class for this HTML element.'
+    },
+    {
+        type: 'datagrid',
+        input: true,
+        label: 'Attributes',
+        key: 'attrs',
+        tooltip: 'The attributes for this HTML element. Only safe attributes are allowed, such as src, href, and title.',
+        weight: 70,
+        components: [
+            {
+                label: 'Attribute',
+                key: 'attr',
+                input: true,
+                type: 'textfield'
+            },
+            {
+                label: 'Value',
+                key: 'value',
+                input: true,
+                type: 'textfield'
+            }
+        ]
+    },
+    {
+        type: 'textarea',
+        input: true,
+        editor: 'ace',
+        rows: 10,
+        as: 'html',
+        label: 'Content',
+        tooltip: 'The content of this HTML element.',
+        defaultValue: '<div class="well">Content</div>',
+        key: 'content',
+        weight: 80
+    },
+    {
+        weight: 85,
+        type: 'checkbox',
+        label: 'Refresh On Change',
+        tooltip: 'Rerender the field whenever a value on the form changes.',
+        key: 'refreshOnChange',
+        input: true
+    },
+];