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

package/lib/cjs/WebformBuilder.js

@@ -208,8 +208,7 @@ class WebformBuilder extends Component_1.default {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components',
-                'tags__ne': 'noBuilderResource'
+                select: '_id,title,name,components'
             }
         };
         if (this.options && this.options.resourceTag) {
@@ -231,7 +230,7 @@ class WebformBuilder extends Component_1.default {
                 }
             }
         }).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;
@@ -334,18 +333,18 @@ class WebformBuilder extends Component_1.default {
             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);
@@ -354,15 +353,15 @@ class WebformBuilder extends Component_1.default {
         }
         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;
@@ -808,18 +807,31 @@ class WebformBuilder extends Component_1.default {
         // 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 = ((_a = this.groups[group]) === null || _a === void 0 ? void 0 : _a.components[compKey]) || {};
-        if (draggableComponent.disableSiblings || draggableComponent.uniqueComponent) {
+        if (draggableComponent.disableSiblings) {
             let isCompAlreadyExists = false;
             (0, formUtils_1.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: lodash_1.default.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;
+            (0, formUtils_1.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;
             }
         }
@@ -1250,8 +1262,7 @@ class WebformBuilder extends Component_1.default {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
-                const editFormData = (_a = this.editForm.submission) === null || _a === void 0 ? void 0 : _a.data;
-                this.updateComponent((editFormData === null || editFormData === void 0 ? void 0 : editFormData.componentJson) || editFormData || component);
+                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1516,7 +1527,7 @@ class WebformBuilder extends Component_1.default {
      */
     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));
@@ -1528,7 +1539,7 @@ class WebformBuilder extends Component_1.default {
      */
     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/cjs/Wizard.js

@@ -613,7 +613,7 @@ class Wizard extends Webform_1.default {
             this.redraw();
             return Promise.resolve();
         }
-        return Promise.reject(this.t('pageNotFound'));
+        return Promise.reject('Page not found');
     }
     pageFieldLogic(page) {
         var _a;

package/lib/cjs/WizardBuilder.js

@@ -223,7 +223,7 @@ class WizardBuilder extends WebformBuilder_1.default {
         const isSiblingAnAddPageButton = sibling === null || sibling === void 0 ? void 0 : 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/cjs/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/cjs/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/cjs/components/_classes/component/Component.js

@@ -22,15 +22,6 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
-    function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
-    return new (P || (P = Promise))(function (resolve, reject) {
-        function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
-        function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
-        function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
-        step((generator = generator.apply(thisArg, _arguments || [])).next());
-    });
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
@@ -545,10 +536,7 @@ class Component extends Element_1.default {
                 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;
@@ -600,7 +588,7 @@ class Component extends Element_1.default {
         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;
@@ -695,7 +683,7 @@ class Component extends Element_1.default {
         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() {
@@ -861,7 +849,7 @@ class Component extends Element_1.default {
         const name = names[names.length - 1];
         const templatesByName = Templates_1.default.defaultTemplates[name];
         if (!templatesByName) {
-            return { template: this.t('unknownTemplate', { name }) };
+            return { template: `Unknown template: ${name}` };
         }
         const templateByMode = this.checkTemplateMode(templatesByName, modes);
         if (templateByMode) {
@@ -918,7 +906,9 @@ class Component extends Element_1.default {
         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;
@@ -1104,7 +1094,7 @@ class Component extends Element_1.default {
     /**
      * 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 || {});
@@ -1121,7 +1111,7 @@ class Component extends Element_1.default {
             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,
         });
@@ -1146,7 +1136,7 @@ class Component extends Element_1.default {
      * @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) {
@@ -1173,7 +1163,7 @@ class Component extends Element_1.default {
      * 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');
@@ -2442,15 +2432,6 @@ class Component extends Element_1.default {
             return editor;
         });
     }
-    getDragula() {
-        return __awaiter(this, void 0, void 0, function* () {
-            return new Promise((resolve) => {
-                return Formio_1.Formio.requireLibrary('dragula', 'dragula', `${Formio_1.Formio.cdn.dragula}/dragula.js`, true, (ready) => {
-                    return ready.then(resolve);
-                });
-            });
-        });
-    }
     get tree() {
         return this.component.tree || false;
     }
@@ -2575,7 +2556,7 @@ class Component extends Element_1.default {
             }
             return value;
         };
-        if (Array.isArray(this.defaultMask) ? this.defaultMask.length > 0 : this.defaultMask) {
+        if (this.defaultMask) {
             if (Array.isArray(defaultValue)) {
                 defaultValue = defaultValue.map(checkMask);
             }
@@ -3344,7 +3325,7 @@ class Component extends Element_1.default {
     }
     // 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() {
@@ -3479,10 +3460,6 @@ class Component extends Element_1.default {
                             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/cjs/components/_classes/component/editForm/Component.edit.conditional.js

@@ -50,6 +50,6 @@ exports.default = [
     },
     utils_1.default.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>', utils_1.default.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/cjs/components/_classes/component/editForm/Component.edit.data.js

@@ -140,7 +140,7 @@ exports.default = [
         input: true
     },
     utils_1.default.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>'),
-    utils_1.default.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>', utils_1.default.tokenVariableDescription()),
+    utils_1.default.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/cjs/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/cjs/components/_classes/component/editForm/utils.js

@@ -37,9 +37,6 @@ const EditFormUtils = {
         }
         return lodash_1.default.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/cjs/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/cjs/components/_classes/component/fixtures/comp1.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/_classes/component/fixtures/comp2.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/_classes/component/fixtures/comp3.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    label: 'Text Field',
+    tableView: true,
+    modalEdit: true,
+    multiple: true,
+    validate: {
+        multiple: true
+    },
+    key: 'textField',
+    type: 'textfield',
+    input: true
+};

package/lib/cjs/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/cjs/components/_classes/component/fixtures/comp4.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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/cjs/components/_classes/component/fixtures/comp5.js

@@ -0,0 +1,26 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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
+        }
+    ],
+};