@formio/js 5.0.2-rc.3 → 5.1.0-dev.5522.066969f

package/lib/cjs/WebformBuilder.d.ts

@@ -77,6 +77,7 @@ export default class WebformBuilder extends Component {
     removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
+    originalDefaultValue: any;
     findRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**
@@ -123,6 +124,7 @@ export default class WebformBuilder extends Component {
     addBuilderGroup(name: any, group: any): void;
     updateBuilderGroup(name: any, group: any): void;
     generateKey(info: any): any;
+    hasEditTabs(type: any): boolean;
 }
 import Component from './components/_classes/component/Component';
 import Webform from './Webform';

package/lib/cjs/WebformBuilder.js

@@ -8,8 +8,7 @@ const Component_1 = __importDefault(require("./components/_classes/component/Com
 const tippy_js_1 = __importDefault(require("tippy.js"));
 const Components_1 = __importDefault(require("./components/Components"));
 const Formio_1 = require("./Formio");
-const utils_1 = require("./utils/utils");
-const formUtils_1 = require("./utils/formUtils");
+const utils_1 = require("./utils");
 const builder_1 = __importDefault(require("./utils/builder"));
 const lodash_1 = __importDefault(require("lodash"));
 const dom_autoscroller_1 = __importDefault(require("dom-autoscroller"));
@@ -123,7 +122,7 @@ class WebformBuilder extends Component_1.default {
         }
         this.options.hooks = this.options.hooks || {};
         this.options.hooks.renderComponent = (html, { component, self }) => {
-            var _a, _b;
+            var _a, _b, _c;
             if (self.type === 'form' && !self.key) {
                 const template = this.hook('renderComponentFormTemplate', html.replace('formio-component-form', ''));
                 // The main webform shouldn't have this class as it adds extra styles.
@@ -136,7 +135,9 @@ class WebformBuilder extends Component_1.default {
                 html,
                 disableBuilderActions: (_a = self === null || self === void 0 ? void 0 : self.component) === null || _a === void 0 ? void 0 : _a.disableBuilderActions,
                 childComponent: component,
-                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design
+                design: (_b = self === null || self === void 0 ? void 0 : self.options) === null || _b === void 0 ? void 0 : _b.design,
+                editJson: (_c = self === null || self === void 0 ? void 0 : self.options) === null || _c === void 0 ? void 0 : _c.editJson,
+                editComponent: this.hasEditTabs(component.type)
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -208,7 +209,8 @@ class WebformBuilder extends Component_1.default {
             params: {
                 type: 'resource',
                 limit: 1000000,
-                select: '_id,title,name,components'
+                select: '_id,title,name,components',
+                'tags__ne': 'noBuilderResource'
             }
         };
         if (this.options && this.options.resourceTag) {
@@ -230,7 +232,7 @@ class WebformBuilder extends Component_1.default {
                 }
             }
         }).catch((err) => {
-            console.warn(`Could not load project settings: ${err.message || err}`);
+            console.warn(`${this.t('loadingProjectSettingsError')}: ${err.message || err}`);
         });
         if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {
             const resourceOptions = this.options.builder && this.options.builder.resource;
@@ -281,7 +283,7 @@ class WebformBuilder extends Component_1.default {
                 componentOrder: [],
                 default: index === 0,
             };
-            (0, formUtils_1.eachComponent)(resource.components, (component) => {
+            (0, utils_1.eachComponent)(resource.components, (component) => {
                 if (component.type === 'button')
                     return;
                 if (this.options &&
@@ -333,18 +335,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('Paste below'));
+            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('pasteBelow'));
             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);
@@ -353,15 +355,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('Edit JSON'));
+            this.attachTooltip(component.refs.editJson, this.t('editJson'));
             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;
@@ -447,7 +449,7 @@ class WebformBuilder extends Component_1.default {
             return [...componentSchema.components, componentSchema];
         }
         // Get the namespace component so we have the original object.
-        const namespaceComponent = (0, formUtils_1.getComponent)(this.form.components, namespaceKey, true);
+        const namespaceComponent = (0, utils_1.getComponent)(this.form.components, namespaceKey, true);
         return namespaceComponent ? namespaceComponent.components : comp.components;
     }
     recurseNamespace(component) {
@@ -807,31 +809,18 @@ 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) {
+        if (draggableComponent.disableSiblings || draggableComponent.uniqueComponent) {
             let isCompAlreadyExists = false;
-            (0, formUtils_1.eachComponent)(this.webform.components, (component) => {
-                if (component.type === draggableComponent.schema.type) {
+            (0, utils_1.eachComponent)(this.webform.components, (component) => {
+                if ((draggableComponent.disableSiblings && component.type === draggableComponent.schema.type) ||
+                    (draggableComponent.uniqueComponent && component.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.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.`);
+                this.webform.setAlert('danger', this.t('builderUniqueError', { componentKeyOrTitle: lodash_1.default.get(draggableComponent, draggableComponent.uniqueComponent ? 'title' : 'key') }));
                 return;
             }
         }
@@ -867,7 +856,11 @@ class WebformBuilder extends Component_1.default {
             parent.addChildComponent(info, element, target, source, sibling);
         }
         const componentInDataGrid = parent.type === 'datagrid';
-        if (isNew && !this.options.noNewEdit && !info.noNewEdit && !(this.options.design && info.type === 'reviewpage')) {
+        if (isNew
+            && !this.options.noNewEdit
+            && !info.noNewEdit
+            && this.hasEditTabs(info.type)
+            && !(this.options.design && info.type === 'reviewpage')) {
             this.editComponent(info, target, isNew, null, null, { inDataGrid: componentInDataGrid });
         }
         // Only rebuild the parts needing to be rebuilt.
@@ -953,7 +946,7 @@ class WebformBuilder extends Component_1.default {
         //populate isEnabled for captcha form settings
         let isCaptchaEnabled = false;
         if (this.form.components) {
-            (0, formUtils_1.eachComponent)(form.components, component => {
+            (0, utils_1.eachComponent)(form.components, component => {
                 if (isCaptchaEnabled) {
                     return;
                 }
@@ -1048,7 +1041,7 @@ class WebformBuilder extends Component_1.default {
             }
         }
         // Change the "default value" field to be reflective of this component.
-        const defaultValueComponent = (0, formUtils_1.getComponent)(this.editForm.components, 'defaultValue', true);
+        const defaultValueComponent = (0, utils_1.getComponent)(this.editForm.components, 'defaultValue', true);
         if (defaultValueComponent && component.type !== 'hidden') {
             const defaultChanged = changed && ((changed.component && changed.component.key === 'defaultValue')
                 || (changed.instance && defaultValueComponent.hasComponent && defaultValueComponent.hasComponent(changed.instance)));
@@ -1076,6 +1069,17 @@ class WebformBuilder extends Component_1.default {
                     'fields.month.required',
                     'fields.year.required',
                 ]));
+                if (defaultValueComponent.component.components) {
+                    if (!this.originalDefaultValue) {
+                        this.originalDefaultValue = (0, utils_1.fastCloneDeep)(defaultValueComponent.component);
+                    }
+                    (0, utils_1.eachComponent)(defaultValueComponent.component.components, (comp => {
+                        var _a;
+                        if ((_a = comp.validate) === null || _a === void 0 ? void 0 : _a.required) {
+                            comp.validate.required = false;
+                        }
+                    }));
+                }
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
                 let index = -1;
@@ -1124,33 +1128,38 @@ class WebformBuilder extends Component_1.default {
     findRepeatablePaths() {
         const repeatablePaths = [];
         const keys = new Map();
-        (0, formUtils_1.eachComponent)(this.form.components, (comp, path) => {
-            if (!comp.key) {
-                return;
-            }
-            if (keys.has(comp.key)) {
-                if (keys.get(comp.key).includes(path)) {
-                    repeatablePaths.push(path);
+        (0, utils_1.eachComponent)(this.form.components, (comp, path, components, parent, paths) => {
+            const isLayout = (0, utils_1.componentInfo)(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    repeatablePaths.push(paths.dataPath);
                 }
                 else {
-                    keys.set(comp.key, [...keys.get(comp.key), path]);
+                    keys.set(paths.dataPath, true);
                 }
             }
-            else {
-                keys.set(comp.key, [path]);
-            }
         }, true);
         return repeatablePaths;
     }
     highlightInvalidComponents() {
         const repeatablePaths = this.findRepeatablePaths();
         let hasInvalidComponents = false;
+        // Matches anything expect letters and  '_' at the beginning of the key and anything except of letters, numbers,
+        // '-', '.' and '_' in the rest of the key
+        const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
             if (repeatablePaths.includes(path)) {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
+            else if (comp.key.replace(badCharacters, '') === '') {
+                comp.setCustomValidity(this.t('apiKeyNotValid', { key: comp.key }));
+                hasInvalidComponents = true;
+            }
+            else {
+                comp.setCustomValidity();
+            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }
@@ -1175,6 +1184,9 @@ class WebformBuilder extends Component_1.default {
         if (index !== -1) {
             let submissionData = this.editForm.submission.data;
             submissionData = submissionData.componentJson || submissionData;
+            if (submissionData.components && this.originalDefaultValue) {
+                submissionData.components = this.originalDefaultValue.components;
+            }
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);
             this.hook('beforeSaveComponentSettings', submissionData);
@@ -1270,7 +1282,8 @@ class WebformBuilder extends Component_1.default {
                     helplinks: this.helplinks,
                 }));
                 this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
-                this.updateComponent((_a = this.editForm.submission.data) !== null && _a !== void 0 ? _a : component);
+                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.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1535,7 +1548,7 @@ class WebformBuilder extends Component_1.default {
      */
     copyComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn('Session storage is not supported in this browser.');
+            return console.warn(this.t('sessionStorageSupportError'));
         }
         this.addClass(this.refs.form, 'builder-paste-mode');
         window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));
@@ -1547,7 +1560,7 @@ class WebformBuilder extends Component_1.default {
      */
     pasteComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn('Session storage is not supported in this browser.');
+            return console.warn(this.t('sessionStorageSupportError'));
         }
         this.removeClass(this.refs.form, 'builder-paste-mode');
         if (window.sessionStorage) {
@@ -1635,5 +1648,14 @@ class WebformBuilder extends Component_1.default {
             info.placeholder ||
             info.type);
     }
+    hasEditTabs(type) {
+        // If the component type does not exist then it has no edit tabs
+        if (!Components_1.default.components[type === 'custom' ? 'unknown' : type]) {
+            return false;
+        }
+        const editTabs = (0, utils_1.getComponent)(Components_1.default.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;
+        const hiddenEditTabs = lodash_1.default.filter(lodash_1.default.get(this.options, `editForm.${type}`, []), 'ignore');
+        return lodash_1.default.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;
+    }
 }
 exports.default = WebformBuilder;

package/lib/cjs/Wizard.d.ts

@@ -6,7 +6,6 @@ declare class Wizard extends Webform {
     originalComponents: any[];
     page: number;
     currentPanel: any;
-    currentPanels: any[] | null;
     currentNextPage: number;
     _seenPages: number[];
     subWizards: any[];
@@ -17,7 +16,7 @@ declare class Wizard extends Webform {
     originalOptions: any;
     isLastPage(): any;
     getPages(args?: {}): any[];
-    get hasExtraPages(): boolean;
+    get hasSubWizards(): boolean;
     get localData(): any;
     get wizardKey(): string;
     set wizard(form: object);
@@ -106,6 +105,7 @@ declare class Wizard extends Webform {
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
     focusOnComponent(key: any): void | Promise<void>;
+    triggerButtonCaptcha(page: any): void;
 }
 declare namespace Wizard {
     let setBaseUrl: any;

package/lib/cjs/Wizard.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const Webform_1 = __importDefault(require("./Webform"));
 const Formio_1 = require("./Formio");
-const utils_1 = require("./utils/utils");
+const utils_1 = require("./utils");
 class Wizard extends Webform_1.default {
     /**
      * Constructor for wizard-based forms.
@@ -34,7 +34,6 @@ class Wizard extends Webform_1.default {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -53,12 +52,12 @@ class Wizard extends Webform_1.default {
     }
     getPages(args = {}) {
         const { all = false } = args;
-        const pages = this.hasExtraPages ? this.components : this.pages;
+        const pages = this.hasSubWizards ? this.components : this.pages;
         const filteredPages = pages
             .filter(all ? lodash_1.default.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !lodash_1.default.isEmpty(this.subWizards);
     }
     get data() {
@@ -187,9 +186,9 @@ class Wizard extends Webform_1.default {
     }
     render() {
         const ctx = this.renderContext;
-        if (this.component.key) {
-            ctx.panels.map(panel => {
-                if (panel.key === this.component.key) {
+        if (this.component.id) {
+            ctx.panels.forEach(panel => {
+                if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
                 }
@@ -375,11 +374,11 @@ class Wizard extends Webform_1.default {
         this.emit('wizardPageSelected', this.pages[index], index);
     }
     attachHeader() {
-        var _a;
+        var _a, _b;
         const isAllowPrevious = this.isAllowPrevious();
-        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], this.currentPanel.tooltip);
+        this.attachTooltips(this.refs[`${this.wizardKey}-tooltip`], (_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.tooltip);
         if (this.isBreadcrumbClickable() || isAllowPrevious) {
-            (_a = this.refs[`${this.wizardKey}-link`]) === null || _a === void 0 ? void 0 : _a.forEach((link, index) => {
+            (_b = this.refs[`${this.wizardKey}-link`]) === null || _b === void 0 ? void 0 : _b.forEach((link, index) => {
                 if (!isAllowPrevious || index <= this.enabledIndex) {
                     this.addEventListener(link, 'click', (event) => {
                         this.emit('wizardNavigationClicked', this.pages[index]);
@@ -587,7 +586,7 @@ class Wizard extends Webform_1.default {
             this.pageFieldLogic(num);
             this.getNextPage();
             let parentNum = num;
-            if (this.hasExtraPages) {
+            if (this.hasSubWizards) {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || (pageFromPages === null || pageFromPages === void 0 ? void 0 : pageFromPages.id) !== pageFromComponents.id) {
@@ -602,6 +601,7 @@ class Wizard extends Webform_1.default {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
+                this.triggerCaptcha(this.currentPage.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
@@ -613,7 +613,7 @@ class Wizard extends Webform_1.default {
             this.redraw();
             return Promise.resolve();
         }
-        return Promise.reject('Page not found');
+        return Promise.reject(this.t('pageNotFound'));
     }
     pageFieldLogic(page) {
         var _a;
@@ -667,8 +667,9 @@ class Wizard extends Webform_1.default {
         return this.page - 1;
     }
     beforeSubmit() {
-        const pages = this.getPages();
+        const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
+            this.triggerButtonCaptcha(page);
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
@@ -725,10 +726,13 @@ class Wizard extends Webform_1.default {
         }
     }
     validateCurrentPage(flags = {}) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.currentPage.parent.data, flags);
+        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {
+            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);
+        }
+        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -868,7 +872,7 @@ class Wizard extends Webform_1.default {
         }
     }
     onChange(flags, changed, modified, changes) {
-        var _a, _b;
+        var _a;
         super.onChange(flags, changed, modified, changes);
         // The onChange loop doesn't need all components for wizards
         const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
@@ -876,23 +880,18 @@ class Wizard extends Webform_1.default {
             this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
-        let currentPanels;
-        let panels;
+        const currentPanels = this.pages;
+        // calling this.establishPages() updates/mutates this.pages to be the current pages
+        this.establishPages();
+        const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
-        if (this.hasExtraPages) {
-            currentPanels = this.pages.map(page => page.component.key);
-            this.establishPages();
-            panels = this.pages.map(page => page.component.key);
-        }
-        else {
-            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
-            panels = this.establishPages().map(panel => panel.key);
-            this.currentPanels = panels;
-            if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.key) && ((_b = this.currentPanels) === null || _b === void 0 ? void 0 : _b.length)) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !lodash_1.default.isEqual(newPanels, currentPanels);
+        if (((_a = this.currentPanel) === null || _a === void 0 ? void 0 : _a.id) && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+            if (newIndex !== -1)
+                this.setPage(newIndex);
         }
-        if (!lodash_1.default.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.
@@ -903,13 +902,6 @@ class Wizard extends Webform_1.default {
             this.redraw();
         }
     }
-    redraw() {
-        var _a, _b;
-        if ((_b = (_a = this.parent) === null || _a === void 0 ? void 0 : _a.component) === null || _b === void 0 ? void 0 : _b.modalEdit) {
-            return this.parent.redraw();
-        }
-        return super.redraw();
-    }
     rebuild() {
         const currentPage = this.page;
         const setCurrentPage = () => this.setPage(currentPage);
@@ -948,6 +940,22 @@ class Wizard extends Webform_1.default {
         }
         return super.focusOnComponent(key);
     }
+    triggerButtonCaptcha(page) {
+        if (!page.components) {
+            return;
+        }
+        let captchaComponent;
+        page.eachComponent((component) => {
+            if (/^(re)?captcha$/.test(component.component.type) &&
+                component.component.eventType === 'buttonClick' &&
+                component.component.buttonKey === 'submit') {
+                captchaComponent = component;
+            }
+        });
+        if (captchaComponent) {
+            captchaComponent.verify(`submitClick`);
+        }
+    }
 }
 exports.default = Wizard;
 Wizard.setBaseUrl = Formio_1.Formio.setBaseUrl;

package/lib/cjs/WizardBuilder.js

@@ -7,7 +7,7 @@ const WebformBuilder_1 = __importDefault(require("./WebformBuilder"));
 const Webform_1 = __importDefault(require("./Webform"));
 const builder_1 = __importDefault(require("./utils/builder"));
 const lodash_1 = __importDefault(require("lodash"));
-const utils_1 = require("./utils/utils");
+const utils_1 = require("./utils");
 class WizardBuilder extends WebformBuilder_1.default {
     constructor() {
         let element, options;
@@ -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('There is no Drag Info available for either dragged or sibling element');
+            console.warn(this.t('noDragInfoError'));
             return;
         }
         const oldPosition = element.dragInfo.index;
@@ -261,10 +261,23 @@ class WizardBuilder extends WebformBuilder_1.default {
         if (component instanceof WizardBuilder) {
             return;
         }
+        if (!window.sessionStorage) {
+            return console.warn(this.t('sessionStorageSupportError'));
+        }
+        // If pasting after the Wizard's page, check if a full Wizard page was copied and pass it to addPage method
         if (this._form.components.find(comp => lodash_1.default.isEqual(component.component, comp))) {
-            this.addPage(component);
+            const data = window.sessionStorage.getItem('formio.clipboard');
+            if (data) {
+                const schema = JSON.parse(data);
+                // If the copied component is not a Wizard's page, do nothing since we can't paste outside the panel in Wizard
+                if (schema.type !== 'panel') {
+                    return;
+                }
+                this.addPage(schema);
+            }
         }
         else {
+            // If we are not trying to paster after the current Wizard's page, just pass it to the WebformBuilder
             return super.pasteComponent(component);
         }
     }

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

@@ -2,6 +2,7 @@ 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;
@@ -86,6 +87,7 @@ 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;
@@ -169,6 +171,7 @@ 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;
@@ -256,13 +259,6 @@ export default class Components {
     static setComponents(comps: any): void;
     static addComponent(name: any, comp: any): void;
     static setComponent(name: any, comp: any): void;
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component: Component): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';
-import Component from './_classes/component/Component';

package/lib/cjs/components/Components.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("./_classes/component/Component"));
 const utils_1 = __importDefault(require("./_classes/component/editForm/utils"));
 const Component_form_1 = __importDefault(require("./_classes/component/Component.form"));
-const utils_2 = require("../utils/utils");
 const lodash_1 = __importDefault(require("lodash"));
 class Components {
     static set EditFormUtils(value) {
@@ -49,35 +48,6 @@ class Components {
     static setComponent(name, comp) {
         Components.components[name] = comp;
     }
-    /**
-     * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
-     */
-    static getComponentPath(component) {
-        var _a;
-        let path = '';
-        const componentKey = (0, utils_2.getComponentKey)(component.component);
-        if (componentKey) {
-            let thisPath = ((_a = component.options) === null || _a === void 0 ? void 0 : _a.parent) || component;
-            while (thisPath && !thisPath.allowData && thisPath.parent) {
-                thisPath = thisPath.parent;
-            }
-            // TODO: any component that is nested in e.g. a Data Grid or an Edit Grid is going to receive a row prop; the problem
-            // is that options.row is passed to each further nested component, which results in erroneous paths like
-            // `editGrid[0].container[0].textField` rather than `editGrid[0].container.textField`. This should be adapted for other
-            // components with a tree-like data model
-            const rowIndex = component.row;
-            const rowIndexPath = rowIndex && !['container'].includes(thisPath.component.type) ? `[${Number.parseInt(rowIndex)}]` : '';
-            path = `${thisPath.path}${rowIndexPath}.`;
-            if (rowIndexPath && (0, utils_2.getModelType)(thisPath) === 'nestedDataArray') {
-                path = `${path}data.`;
-            }
-            path += componentKey;
-            return lodash_1.default.trim(path, '.');
-        }
-        return path;
-    }
     static create(component, options, data) {
         let comp = null;
         if (component.type && Components.components.hasOwnProperty(component.type)) {
@@ -102,9 +72,7 @@ class Components {
         else {
             comp = new Component_1.default(component, options, data);
         }
-        const path = Components.getComponentPath(comp);
-        if (path) {
-            comp.path = path;
+        if (comp.path) {
             comp.componentsMap[comp.path] = comp;
         }
         return comp;