@formio/js 5.1.0-dev.6002.16f1966 → 5.1.0-rc.10

package/lib/mjs/WebformBuilder.js

@@ -187,8 +187,7 @@ export default class WebformBuilder extends Component {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components',
-                'tags__ne': 'noBuilderResource'
+                select: '_id,title,name,components'
             }
         };
         if (this.options && this.options.resourceTag) {
@@ -210,7 +209,7 @@ export default class WebformBuilder extends Component {
                 }
             }
         }).catch((err) => {
-            console.warn(`${this.t('loadingProjectSettingsError')}: ${err.message || err}`);
+            console.warn(`Could not load project settings: ${err.message || err}`);
         });
         if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {
             const resourceOptions = this.options.builder && this.options.builder.resource;
@@ -320,18 +319,18 @@ export default class WebformBuilder extends Component {
             editJson: 'single'
         });
         if (component.refs.copyComponent) {
-            this.attachTooltip(component.refs.copyComponent, this.t('copy'));
+            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));
             component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));
         }
         if (component.refs.pasteComponent) {
-            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('pasteBelow'));
+            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));
             component.addEventListener(component.refs.pasteComponent, 'click', () => {
                 pasteToolTip.hide();
                 this.pasteComponent(component);
             });
         }
         if (component.refs.moveComponent) {
-            this.attachTooltip(component.refs.moveComponent, this.t('move'));
+            this.attachTooltip(component.refs.moveComponent, this.t('Move'));
             if (this.keyboardActionsEnabled) {
                 component.addEventListener(component.refs.moveComponent, 'click', () => {
                     this.moveComponent(component);
@@ -340,15 +339,15 @@ export default class WebformBuilder extends Component {
         }
         const parent = this.getParentElement(element);
         if (component.refs.editComponent) {
-            this.attachTooltip(component.refs.editComponent, this.t('edit'));
+            this.attachTooltip(component.refs.editComponent, this.t('Edit'));
             component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, { inDataGrid: component.isInDataGrid }));
         }
         if (component.refs.editJson) {
-            this.attachTooltip(component.refs.editJson, this.t('editJson'));
+            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));
             component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component));
         }
         if (component.refs.removeComponent) {
-            this.attachTooltip(component.refs.removeComponent, this.t('remove'));
+            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));
             component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));
         }
         return element;
@@ -793,18 +792,31 @@ export default class WebformBuilder extends Component {
         // Show an error if siblings are disabled for a component and such a component already exists.
         const compKey = (group === 'resource') ? `component-${key}` : key;
         const draggableComponent = this.groups[group]?.components[compKey] || {};
-        if (draggableComponent.disableSiblings || draggableComponent.uniqueComponent) {
+        if (draggableComponent.disableSiblings) {
             let isCompAlreadyExists = false;
             eachComponent(this.webform.components, (component) => {
-                if ((draggableComponent.disableSiblings && component.type === draggableComponent.schema.type) ||
-                    (draggableComponent.uniqueComponent && component.component.key === draggableComponent.schema.key)) {
+                if (component.type === draggableComponent.schema.type) {
                     isCompAlreadyExists = true;
                     return;
                 }
             }, true);
             if (isCompAlreadyExists) {
                 this.webform.redraw();
-                this.webform.setAlert('danger', this.t('builderUniqueError', { componentKeyOrTitle: _.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key') }));
+                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);
+                return;
+            }
+        }
+        if (draggableComponent.uniqueComponent) {
+            let isCompAlreadyExists = false;
+            eachComponent(this.webform.components, (component) => {
+                if (component.key === draggableComponent.schema.key) {
+                    isCompAlreadyExists = true;
+                    return;
+                }
+            }, true);
+            if (isCompAlreadyExists) {
+                this.webform.redraw();
+                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
                 return;
             }
         }
@@ -1233,8 +1245,7 @@ export default class WebformBuilder extends Component {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
-                const editFormData = this.editForm.submission?.data;
-                this.updateComponent(editFormData?.componentJson || editFormData || component);
+                this.updateComponent(this.editForm.submission.data ?? component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1519,7 +1530,7 @@ export default class WebformBuilder extends Component {
      */
     copyComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn(this.t('sessionStorageSupportError'));
+            return console.warn('Session storage is not supported in this browser.');
         }
         this.addClass(this.refs.form, 'builder-paste-mode');
         window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));
@@ -1531,7 +1542,7 @@ export default class WebformBuilder extends Component {
      */
     pasteComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn(this.t('sessionStorageSupportError'));
+            return console.warn('Session storage is not supported in this browser.');
         }
         this.removeClass(this.refs.form, 'builder-paste-mode');
         if (window.sessionStorage) {

package/lib/mjs/Wizard.js

@@ -605,7 +605,7 @@ export default class Wizard extends Webform {
             this.redraw();
             return Promise.resolve();
         }
-        return Promise.reject(this.t('pageNotFound'));
+        return Promise.reject('Page not found');
     }
     pageFieldLogic(page) {
         if (this.pages?.[page]) {

package/lib/mjs/WizardBuilder.js

@@ -217,7 +217,7 @@ export default class WizardBuilder extends WebformBuilder {
         const isSiblingAnAddPageButton = sibling?.classList.contains('wizard-add-page');
         // We still can paste before Add Page button
         if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {
-            console.warn(this.t('noDragInfoError'));
+            console.warn('There is no Drag Info available for either dragged or sibling element');
             return;
         }
         const oldPosition = element.dragInfo.index;

package/lib/mjs/components/Components.d.ts

@@ -2,7 +2,6 @@ export default class Components {
     static _editFormUtils: {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
-        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;
@@ -87,7 +86,6 @@ export default class Components {
     static set EditFormUtils(value: {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
-        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;
@@ -171,7 +169,6 @@ export default class Components {
     static get EditFormUtils(): {
         sortAndFilterComponents(components: any): any;
         unifyComponents(objValue: any, srcValue: any): any;
-        tokenVariableDescription(): string;
         logicVariablesTable(additional: any): {
             type: string;
             tag: string;

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -378,7 +378,7 @@ declare class Component extends Element {
     /**
      * Renders a modal preview template and returns the markup as a string
      * @param {object|null|undefined} ctx - The rendering context
-     * @returns {string} - The modal preview markup
+     * @return {string} - The modal preview markup
      */
     renderModalPreview(ctx: object | null | undefined): string;
     /**
@@ -404,7 +404,7 @@ declare class Component extends Element {
      * Creates the tooltip instance using tippy.js and returns it
      * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
      * @param {object|null|undefined} settings - tippy.js options
-     * @returns {import('tippy.js').Tippy} - tippy.js instance
+     * @return {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl: HTMLElement, settings?: object | null | undefined): import('tippy.js').Tippy;
     /**
@@ -862,7 +862,6 @@ declare class Component extends Element {
     quill: any;
     get shouldSanitizeValue(): boolean;
     addAce(element: any, settings: any, onChange: any): any;
-    getDragula(): Promise<any>;
     get tree(): any;
     /**
      * The empty value for this component.

package/lib/mjs/components/_classes/component/Component.js

@@ -509,10 +509,7 @@ export default class Component extends Element {
                 this.addons.push(addon);
             }
             else {
-                console.warn(this.t('addonSupportTypeError', {
-                    type: this.component.type,
-                    label: name.label
-                }));
+                console.warn(`Addon ${name.label} does not support component of type ${this.component.type}.`);
             }
         }
         return addon;
@@ -564,7 +561,7 @@ export default class Component extends Element {
         return this.paths.dataPath;
     }
     set path(path) {
-        throw new Error(this.t('setPathError'));
+        throw new Error('Should not be setting the path of a component.');
     }
     set parentVisible(value) {
         this._parentVisible = value;
@@ -659,7 +656,7 @@ export default class Component extends Element {
         return this.options.attachMode === 'builder';
     }
     get calculatedPath() {
-        console.error(this.t('calculatedPathDeprecation'));
+        console.error('component.calculatedPath was deprecated, use component.path instead.');
         return this.path;
     }
     get labelPosition() {
@@ -825,7 +822,7 @@ export default class Component extends Element {
         const name = names[names.length - 1];
         const templatesByName = Templates.defaultTemplates[name];
         if (!templatesByName) {
-            return { template: this.t('unknownTemplate', { name }) };
+            return { template: `Unknown template: ${name}` };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
@@ -882,7 +879,9 @@ export default class Component extends Element {
         data.disabled = this.disabled;
         data.builder = this.builderMode;
         data.render = (...args) => {
-            console.warn(this.t('renderTemplateFunctionDeprecation'));
+            console.warn(`Form.io 'render' template function is deprecated.
+      If you need to render template (template A) inside of another template (template B),
+      pass pre-compiled template A (use this.renderTemplate('template_A_name') as template context variable for template B`);
             return this.renderTemplate(...args);
         };
         data.label = data.labelInfo || this.labelInfo;
@@ -1066,7 +1065,7 @@ export default class Component extends Element {
     /**
      * Renders a modal preview template and returns the markup as a string
      * @param {object|null|undefined} ctx - The rendering context
-     * @returns {string} - The modal preview markup
+     * @return {string} - The modal preview markup
      */
     renderModalPreview(ctx) {
         return this.renderTemplate('modalPreview', ctx || {});
@@ -1082,7 +1081,7 @@ export default class Component extends Element {
             modalLabel = { className: 'field-required' };
         }
         return this.renderModalPreview({
-            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('clickToSetValue'),
+            previewText: this.getValueAsString(dataValue, { modalPreview: true }) || this.t('Click to set value'),
             messages: '',
             labelInfo: modalLabel,
         });
@@ -1107,7 +1106,7 @@ export default class Component extends Element {
      * @param {boolean} topLevel - If this is the topmost component that is being rendered.
      * @returns {string} - The rendered HTML string of a component.
      */
-    render(children = this.t('unknownComponent', { type: this.component.type }), topLevel = false) {
+    render(children = `Unknown component: ${this.component.type}`, topLevel = false) {
         const isVisible = this.visible;
         this.rendered = true;
         if (!this.builderMode && !this.previewMode && this.component.modalEdit) {
@@ -1134,7 +1133,7 @@ export default class Component extends Element {
      * Creates the tooltip instance using tippy.js and returns it
      * @param {HTMLElement} tooltipEl - HTML element to attach the tooltip
      * @param {object|null|undefined} settings - tippy.js options
-     * @returns {import('tippy.js').Tippy} - tippy.js instance
+     * @return {import('tippy.js').Tippy} - tippy.js instance
      */
     createTooltip(tooltipEl, settings = {}) {
         const tooltipAttribute = tooltipEl.getAttribute('data-tooltip');
@@ -2413,13 +2412,6 @@ export default class Component extends Element {
             return editor;
         });
     }
-    async getDragula() {
-        return new Promise((resolve) => {
-            return Formio.requireLibrary('dragula', 'dragula', `${Formio.cdn.dragula}/dragula.js`, true, (ready) => {
-                return ready.then(resolve);
-            });
-        });
-    }
     get tree() {
         return this.component.tree || false;
     }
@@ -2544,7 +2536,7 @@ export default class Component extends Element {
             }
             return value;
         };
-        if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {
+        if (this.defaultMask) {
             if (Array.isArray(defaultValue)) {
                 defaultValue = defaultValue.map(checkMask);
             }
@@ -3307,7 +3299,7 @@ export default class Component extends Element {
     }
     // Maintain reverse compatibility.
     whenReady() {
-        console.warn(this.t('whenReadyDeprecation'));
+        console.warn('The whenReady() method has been deprecated. Please use the dataReady property instead.');
         return this.dataReady;
     }
     get dataReady() {
@@ -3442,10 +3434,6 @@ export default class Component extends Element {
                             const disabled = this.shouldDisabled;
                             // Change states which won't be recalculated during redrawing
                             if (this.visible !== visible) {
-                                // If the logic is triggered by an event and the action sets the hidden state then the original
-                                // component definition must be changed so that the components hidden state does not get flipped back by
-                                // the fieldLogic function
-                                this.originalComponent.hidden = !visible;
                                 this.visible = visible;
                             }
                             if (this.disabled !== disabled) {

package/lib/mjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -45,6 +45,6 @@ export default [
     },
     EditFormUtils.javaScriptValue('Advanced Conditions', 'customConditional', 'conditional.json', 110, '<p>You must assign the <strong>show</strong> variable a boolean result.</p>' +
         '<p><strong>Note: Advanced Conditional logic will override the results of the Simple Conditional logic.</strong></p>' +
-        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', EditFormUtils.tokenVariableDescription())
+        '<h5>Example</h5><pre>show = !!data.showMe;</pre>', '<p><a href="https://help.form.io/userguide/form-building/logic-and-conditions" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>')
 ];
 /* eslint-enable quotes, max-len */

package/lib/mjs/components/_classes/component/editForm/Component.edit.data.js

@@ -135,7 +135,7 @@ export default [
         input: true
     },
     EditFormUtils.javaScriptValue('Custom Default Value', 'customDefaultValue', 'customDefaultValue', 1000, '<p><h4>Example:</h4><pre>value = data.firstName + " " + data.lastName;</pre></p>', '<p><h4>Example:</h4><pre>{"cat": [{"var": "data.firstName"}, " ", {"var": "data.lastName"}]}</pre>'),
-    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', EditFormUtils.tokenVariableDescription()),
+    EditFormUtils.javaScriptValue('Calculated Value', 'calculateValue', 'calculateValue', 1100, '<p><h4>Example:</h4><pre>value = data.a + data.b + data.c;</pre></p>', '<p><h4>Example:</h4><pre>{"+": [{"var": "data.a"}, {"var": "data.b"}, {"var": "data.c"}]}</pre><p><a href="https://help.form.io/userguide/form-building/logic-and-conditions#calculated-values" target="_blank" rel="noopener noreferrer">Click here for an example</a></p>', '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>'),
     {
         type: 'checkbox',
         input: true,

package/lib/mjs/components/_classes/component/editForm/utils.d.ts

@@ -2,7 +2,6 @@ export default EditFormUtils;
 declare namespace EditFormUtils {
     function sortAndFilterComponents(components: any): any;
     function unifyComponents(objValue: any, srcValue: any): any;
-    function tokenVariableDescription(): string;
     function logicVariablesTable(additional: any): {
         type: string;
         tag: string;

package/lib/mjs/components/_classes/component/editForm/utils.js

@@ -32,9 +32,6 @@ const EditFormUtils = {
         }
         return _.isEqual(objValue, srcValue);
     },
-    tokenVariableDescription() {
-        return '<tr><th>token</th><td>The decoded JWT token for the authenticated user.</td></tr>';
-    },
     logicVariablesTable(additional) {
         additional = additional || '';
         return {

package/lib/mjs/components/_classes/component/fixtures/comp1.d.ts

@@ -0,0 +1,33 @@
+declare namespace _default {
+    export let tags: never[];
+    export let type: string;
+    export namespace conditional {
+        let eq: string;
+        let when: null;
+        let show: string;
+    }
+    export namespace validate {
+        let customPrivate: boolean;
+        let custom: string;
+        let pattern: string;
+        let maxLength: number;
+        let minLength: number;
+        let required: boolean;
+    }
+    export let persistent: boolean;
+    export let unique: boolean;
+    let _protected: boolean;
+    export { _protected as protected };
+    export let defaultValue: string;
+    export let multiple: boolean;
+    export let suffix: string;
+    export let prefix: string;
+    export let placeholder: string;
+    export let key: string;
+    export let label: string;
+    export let inputMask: string;
+    export let inputType: string;
+    export let tableView: boolean;
+    export let input: boolean;
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/comp1.js

@@ -0,0 +1,31 @@
+export default {
+    'tags': [],
+    'type': 'textfield',
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'validate': {
+        'customPrivate': false,
+        'custom': '',
+        'pattern': '',
+        'maxLength': 0,
+        'minLength': 0,
+        'required': false
+    },
+    'persistent': true,
+    'unique': false,
+    'protected': false,
+    'defaultValue': '',
+    'multiple': false,
+    'suffix': '',
+    'prefix': '',
+    'placeholder': '',
+    'key': 'firstName',
+    'label': 'First Name',
+    'inputMask': '',
+    'inputType': 'text',
+    'tableView': true,
+    'input': true
+};

package/lib/mjs/components/_classes/component/fixtures/comp2.d.ts

@@ -0,0 +1,33 @@
+declare namespace _default {
+    export let tags: never[];
+    export let type: string;
+    export namespace conditional {
+        let eq: string;
+        let when: null;
+        let show: string;
+    }
+    export namespace validate {
+        let customPrivate: boolean;
+        let custom: string;
+        let pattern: string;
+        let maxLength: number;
+        let minLength: number;
+        let required: boolean;
+    }
+    export let persistent: boolean;
+    export let unique: boolean;
+    let _protected: boolean;
+    export { _protected as protected };
+    export let defaultValue: string;
+    export let multiple: boolean;
+    export let suffix: string;
+    export let prefix: string;
+    export let placeholder: string;
+    export let key: string;
+    export let label: string;
+    export let inputMask: string;
+    export let inputType: string;
+    export let tableView: boolean;
+    export let input: boolean;
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/comp2.js

@@ -0,0 +1,31 @@
+export default {
+    'tags': [],
+    'type': 'textfield',
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'validate': {
+        'customPrivate': false,
+        'custom': '',
+        'pattern': '',
+        'maxLength': 0,
+        'minLength': 0,
+        'required': false
+    },
+    'persistent': true,
+    'unique': false,
+    'protected': false,
+    'defaultValue': '',
+    'multiple': true,
+    'suffix': '',
+    'prefix': '',
+    'placeholder': '',
+    'key': 'names',
+    'label': 'Names',
+    'inputMask': '',
+    'inputType': 'text',
+    'tableView': true,
+    'input': true
+};

package/lib/mjs/components/_classes/component/fixtures/comp3.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    let label: string;
+    let tableView: boolean;
+    let modalEdit: boolean;
+    let multiple: boolean;
+    namespace validate {
+        let multiple_1: boolean;
+        export { multiple_1 as multiple };
+    }
+    let key: string;
+    let type: string;
+    let input: boolean;
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/comp3.js

@@ -0,0 +1,12 @@
+export default {
+    label: 'Text Field',
+    tableView: true,
+    modalEdit: true,
+    multiple: true,
+    validate: {
+        multiple: true
+    },
+    key: 'textField',
+    type: 'textfield',
+    input: true
+};

package/lib/mjs/components/_classes/component/fixtures/comp4.d.ts

@@ -0,0 +1,17 @@
+declare namespace _default {
+    let _id: string;
+    let label: string;
+    let tableView: boolean;
+    let modalEdit: boolean;
+    namespace validate {
+        let required: boolean;
+    }
+    let key: string;
+    let type: string;
+    let input: boolean;
+    let title: string;
+    let display: string;
+    let name: string;
+    let path: string;
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/comp4.js

@@ -0,0 +1,16 @@
+export default {
+    _id: '611389eae1215a4dadc1099d',
+    label: 'Text Field',
+    tableView: true,
+    modalEdit: true,
+    validate: {
+        required: true
+    },
+    key: 'textField',
+    type: 'textfield',
+    input: true,
+    title: 'FIO-3631',
+    display: 'form',
+    name: 'fio3631',
+    path: 'fio3631',
+};

package/lib/mjs/components/_classes/component/fixtures/comp5.d.ts

@@ -0,0 +1,26 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        description: string;
+        tooltip: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        description?: undefined;
+        tooltip?: undefined;
+        applyMaskOn?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/comp5.js

@@ -0,0 +1,24 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Text Field',
+            description: "<img <img src='https://somesite' onerror='var _ee = 2' >",
+            tooltip: "<img src='https://somesite' onerror='var _ee = 1 >",
+            applyMaskOn: 'change',
+            tableView: true,
+            key: 'textField',
+            type: 'textfield',
+            input: true
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+};