@formio/js 5.1.0-dev.5976.b0f317d → 5.1.0-dev.5976.f61da27

package/lib/cjs/components/form/Form.js

@@ -380,10 +380,11 @@ class FormComponent extends Component_1.default {
     /**
      * Create a subform instance.
      * @param {boolean} [fromAttach] - This function is being called from an `attach` method.
+     * @param {boolean} [beforeSubmit] - This function is being called from a `beforeSubmit` method.
      * @returns {*} - The subform instance.
      */
-    createSubForm(fromAttach) {
-        this.subFormReady = this.loadSubForm(fromAttach).then((form) => {
+    createSubForm(fromAttach, beforeSubmit) {
+        this.subFormReady = this.loadSubForm(fromAttach, beforeSubmit).then((form) => {
             if (!form) {
                 return;
             }
@@ -440,11 +441,13 @@ class FormComponent extends Component_1.default {
     /**
      * Load the subform.
      * @param {boolean} fromAttach - This function is being called from an `attach` method.
+     * @param {boolean} beforeSubmit - This function is being called from a `beforeSubmit` method.
      * @returns {Promise} - The promise that resolves when the subform is loaded.
      */
-    loadSubForm(fromAttach) {
+    loadSubForm(fromAttach, beforeSubmit) {
         var _a, _b, _c, _d, _e;
-        if (this.builderMode || this.conditionallyHidden || (this.isSubFormLazyLoad() && !fromAttach)) {
+        const loadHiddenForm = beforeSubmit && !this.component.clearOnHide;
+        if (this.builderMode || (this.conditionallyHidden && !loadHiddenForm) || (this.isSubFormLazyLoad() && !fromAttach)) {
             return Promise.resolve();
         }
         if (this.hasLoadedForm && !this.isRevisionChanged &&
@@ -516,7 +519,7 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
-        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && !this.conditionallyHidden;
+        return this.subFormReady && (!this.component.hasOwnProperty('reference') || this.component.reference) && (!this.conditionallyHidden || !this.component.clearOnHide);
     }
     /**
      * Returns the data for the subform.
@@ -587,11 +590,23 @@ class FormComponent extends Component_1.default {
             this.dataValue = submission;
             return Promise.resolve(this.dataValue);
         }
-        return this.submitSubForm(false)
-            .then(() => {
-            return this.dataValue;
-        })
-            .then(() => super.beforeSubmit());
+        // we need to load a hidden form (when clearOnHide is disabled) in order to get and submit (if needed) its data
+        const loadHiddenForm = !this.subForm && !this.component.clearOnHide;
+        if ((this.isSubFormLazyLoad() || loadHiddenForm) && !this.subFormLoading) {
+            return this.createSubForm(true, true)
+                .then(this.submitSubForm(false))
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
+        else {
+            return this.submitSubForm(false)
+                .then(() => {
+                return this.dataValue;
+            })
+                .then(() => super.beforeSubmit());
+        }
     }
     isSubFormLazyLoad() {
         var _a, _b;

package/lib/cjs/components/form/editForm/Form.edit.data.js

@@ -11,7 +11,7 @@ exports.default = [
     {
         weight: 140,
         type: 'checkbox',
-        label: 'Clear Value When Hidden',
+        label: 'Omit Value From Submission Data When Conditionally Hidden',
         key: 'clearOnHide',
         defaultValue: true,
         tooltip: 'When a field is hidden, clear the value.',

package/lib/cjs/components/form/editForm/Form.edit.form.js

@@ -69,7 +69,7 @@ exports.default = [
         input: true,
         weight: 20,
         key: 'reference',
-        label: 'Save as reference',
-        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.'
+        label: 'Submit as reference',
+        tooltip: 'When "Submit as reference" is enabled, the form submission will be recorded against the Parent Form as well as the Child Form. When a submission recorded with "Submit as reference" is edited, the update is applied to each submission made against the Parent Form and Child Form.'
     }
 ];

package/lib/cjs/components/select/Select.js

@@ -770,7 +770,7 @@ class SelectComponent extends ListComponent_1.default {
                 containerOuter: ['choices', 'form-group', 'formio-choices'],
                 containerInner: this.transform('class', 'form-control ui fluid selection dropdown').split(' '),
             }, addItemText: false, allowHTML: true, placeholder: !!this.component.placeholder, placeholderValue: placeholderValue, noResultsText: this.t('noResultsFound'), noChoicesText: this.t('noChoices'), searchPlaceholderValue: this.t('typeToSearch'), shouldSort: false, position: (this.component.dropdown || 'auto'), searchEnabled: useSearch, searchChoices: !this.component.searchField, searchFields: lodash_1.default.get(this, 'component.searchFields', ['label']), shadowRoot: this.root ? this.root.shadowRoot : null, fuseOptions: this.component.useExactSearch
-                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false }, customOptions);
+                ? Object.assign({ tokenize: true, matchAllTokens: true }, commonFuseOptions) : Object.assign({}, lodash_1.default.get(this, 'component.fuseOptions', {}), Object.assign({ include: 'score', threshold: lodash_1.default.get(this, 'component.selectThreshold', 0.3) }, commonFuseOptions)), valueComparer: lodash_1.default.isEqual, resetScrollPosition: false, duplicateItemsAllowed: false }, customOptions);
     }
     /* eslint-disable max-statements */
     attach(element) {

package/lib/cjs/components/select/editForm/Select.edit.data.js

@@ -641,8 +641,8 @@ exports.default = [
         input: true,
         weight: 25,
         key: 'reference',
-        label: 'Save as reference',
-        tooltip: 'Using this option will save this field as a reference and link its value to the value of the origin record.',
+        label: 'Submit as reference',
+        tooltip: 'Using this option will submit this field as a reference id and link its value to the value of the origin record.',
         conditional: {
             json: { '===': [{ var: 'data.dataSrc' }, 'resource'] },
         },

package/lib/cjs/components/tags/Tags.d.ts

@@ -24,4 +24,4 @@ export default class TagsComponent extends Input {
     getValueAsString(value: any): any;
 }
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';

package/lib/cjs/components/tags/Tags.js

@@ -5,7 +5,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = require("../../utils/utils");
 const Input_1 = __importDefault(require("../_classes/input/Input"));
-const choices_js_1 = __importDefault(require("@formio/choices.js"));
+const choices_js_1 = __importDefault(require("choices.js"));
 class TagsComponent extends Input_1.default {
     static schema(...extend) {
         return Input_1.default.schema({

package/lib/cjs/providers/storage/googleDrive.js

@@ -52,10 +52,11 @@ function googledrive(formio) {
                 xhr.send(fd);
             }));
         },
-        downloadFile(file) {
+        downloadFile(file, component) {
             const token = formio.getToken();
+            // Constructed the url with the fileId, fileName, displayImage, imageSize if applicable
             file.url =
-                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}`;
+                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}${component.image ? '&displayImage=true' : ''}${component.imageSize ? `&imageSize=${component.imageSize}` : ''}`;
             return Promise.resolve(file);
         },
         deleteFile: function deleteFile(fileInfo) {

package/lib/cjs/providers/storage/s3.js

@@ -115,7 +115,7 @@ function s3(formio) {
                 const { changeMessage } = multipart;
                 changeMessage('Completing AWS S3 multipart upload...');
                 const token = formio.getToken();
-                const response = yield fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {
+                const response = yield xhr_1.default.fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {
                     method: 'POST',
                     headers: Object.assign({ 'Content-Type': 'application/json' }, (token ? { 'x-jwt-token': token } : {})),
                     body: JSON.stringify({ parts, uploadId: serverResponse.uploadId, key: serverResponse.key })
@@ -134,7 +134,7 @@ function s3(formio) {
         abortMultipartUpload(serverResponse) {
             const { uploadId, key } = serverResponse;
             const token = formio.getToken();
-            fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {
+            xhr_1.default.fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {
                 method: 'POST',
                 headers: Object.assign({ 'Content-Type': 'application/json' }, (token ? { 'x-jwt-token': token } : {})),
                 body: JSON.stringify({ uploadId, key })
@@ -148,7 +148,7 @@ function s3(formio) {
                 const start = i * partSize;
                 const end = (i + 1) * partSize;
                 const blob = i < urls.length ? file.slice(start, end) : file.slice(start);
-                const promise = fetch(urls[i], {
+                const promise = xhr_1.default.fetch(urls[i], {
                     method: 'PUT',
                     headers,
                     body: blob,

package/lib/cjs/providers/storage/xhr.d.ts

@@ -3,6 +3,7 @@ export default XHR;
 declare namespace XHR {
     function trim(text: any): any;
     function path(items: any): any;
+    function fetch(url: any, options: any): Promise<Response>;
     function upload(formio: any, type: any, xhrCallback: any, file: any, fileName: any, dir: any, progressCallback: any, groupPermissions: any, groupId: any, abortCallback: any, multipartOptions: any): Promise<any>;
     function makeXhrRequest(formio: any, xhrCallback: any, serverResponse: any, progressCallback: any, abortCallback: any): Promise<any>;
 }

package/lib/cjs/providers/storage/xhr.js

@@ -14,6 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setXhrHeaders = void 0;
 const trim_1 = __importDefault(require("lodash/trim"));
+const Formio_1 = require("../../Formio");
 const setXhrHeaders = (formio, xhr) => {
     const { headers } = formio.options;
     if (headers) {
@@ -36,13 +37,17 @@ const XHR = {
     path(items) {
         return items.filter(item => !!item).map(XHR.trim).join('/');
     },
+    fetch(url, options) {
+        options = Formio_1.Formio.pluginAlter('requestOptions', options, url);
+        return fetch(url, options);
+    },
     upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {
         return __awaiter(this, void 0, void 0, function* () {
             // make request to Form.io server
             const token = formio.getToken();
             let response;
             try {
-                response = yield fetch(`${formio.formUrl}/storage/${type}`, {
+                response = yield XHR.fetch(`${formio.formUrl}/storage/${type}`, {
                     method: 'POST',
                     headers: Object.assign({ 'Accept': 'application/json', 'Content-Type': 'application/json; charset=UTF-8' }, (token ? { 'x-jwt-token': token } : {})),
                     body: JSON.stringify({

package/lib/cjs/utils/ChoicesWrapper.d.ts

@@ -14,4 +14,4 @@ declare class ChoicesWrapper extends Choices {
     showDropdown(...args: any[]): void;
     hideDropdown(...args: any[]): void;
 }
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';

package/lib/cjs/utils/ChoicesWrapper.js

@@ -23,7 +23,7 @@ var __importStar = (this && this.__importStar) || function (mod) {
     return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const choices_js_1 = __importStar(require("@formio/choices.js"));
+const choices_js_1 = __importStar(require("choices.js"));
 const ExtendedKeyCodeMap = Object.assign(Object.assign({}, choices_js_1.KeyCodeMap), { TAB_KEY: 9 });
 class ChoicesWrapper extends choices_js_1.default {
     constructor(...args) {

package/lib/cjs/utils/utils.d.ts

@@ -208,9 +208,10 @@ export function loadZones(url: string, timezone: string): Promise<any> | any;
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-export function momentDate(value: string | Date, format: string, timezone: string): Date;
+export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
 /**
  * Format a date provided a value, format, and timezone object.
  * @param {string} timezonesUrl - The URL to load the timezone data from.

package/lib/cjs/utils/utils.js

@@ -687,9 +687,10 @@ exports.loadZones = loadZones;
  * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
+ * @param {object} options - The options object
  * @returns {Date} - The moment date object.
  */
-function momentDate(value, format, timezone) {
+function momentDate(value, format, timezone, options) {
     const momentDate = (0, moment_timezone_1.default)(value);
     if (!timezone) {
         return momentDate;
@@ -697,7 +698,7 @@ function momentDate(value, format, timezone) {
     if (timezone === 'UTC') {
         timezone = 'Etc/UTC';
     }
-    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && moment_timezone_1.default.zonesLoaded) {
+    if ((timezone !== currentTimezone() || (format && format.match(/\s(z$|z\s)/))) && (moment_timezone_1.default.zonesLoaded || (options === null || options === void 0 ? void 0 : options.email))) {
         return momentDate.tz(timezone);
     }
     return momentDate;

package/lib/cjs/widgets/CalendarWidget.js

@@ -93,8 +93,6 @@ class CalendarWidget extends InputWidget_1.default {
         this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';
         this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';
         this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';
-        this.settings.wasDefaultValueChanged = false;
-        this.settings.defaultValue = '';
         this.settings.manualInputValue = '';
         this.settings.isManuallyOverriddenValue = false;
         this.settings.currentValue = '';
@@ -115,10 +113,6 @@ class CalendarWidget extends InputWidget_1.default {
                 this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
                 this.emit('update');
             }
-            if (this.settings.wasDefaultValueChanged) {
-                this.calendar._input.value = this.settings.defaultValue;
-                this.settings.wasDefaultValueChanged = false;
-            }
             if (this.calendar) {
                 this.emit('blur');
             }
@@ -360,14 +354,6 @@ class CalendarWidget extends InputWidget_1.default {
                 this.settings.currentValue = event.target.value;
                 this.emit('update');
             }
-            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
-                this.settings.wasDefaultValueChanged = true;
-                this.settings.defaultValue = event.target.value;
-                this.calendar.clear();
-            }
-            else {
-                this.settings.wasDefaultValueChanged = false;
-            }
         });
         if (this.calendar.daysContainer) {
             this.calendar.daysContainer.addEventListener('click', () => {

package/lib/mjs/Form.d.ts

@@ -48,7 +48,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.
@@ -117,9 +117,7 @@ export default class Form extends Element {
         /**
          * - The translation file for this rendering.
          */
-        i18n?: {
-            [key: string]: string;
-        } | undefined;
+        i18n?: Record<string, Record<string, string>> | undefined;
         /**
          * - Custom logic for creation of elements.
          */

package/lib/mjs/Form.js

@@ -51,7 +51,7 @@ export default class Form extends Element {
      * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
      * @property {boolean} [readOnly] - Set this form to readOnly.
      * @property {boolean} [noAlerts] - Disable the alerts dialog.
-     * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+     * @property {Record<string, Record<string, string>>} [i18n] - The translation file for this rendering.
      * @property {string} [template] - Custom logic for creation of elements.
      * @property {boolean} [noDefaults] - Exclude default values from the settings.
      * @property {any} [fileService] - The file service for this form.
@@ -350,7 +350,9 @@ export default class Form extends Element {
         this.form.display = display;
         this.instance.destroy();
         this.instance = this.create(display);
-        return this.setForm(this.form);
+        return this.setForm(this.form).then(() => {
+            this.instance.emit('setDisplay', this.form.display);
+        });
     }
     empty() {
         if (this.element) {

package/lib/mjs/PDFBuilder.js

@@ -294,7 +294,7 @@ export default class PDFBuilder extends WebformBuilder {
                     height: schema.height,
                     width: schema.width
                 };
-                if (!this.options.noNewEdit && !component.component.noNewEdit) {
+                if (!this.options.noNewEdit && !component.component.noNewEdit && this.hasEditTabs(component.type)) {
                     this.editComponent(component.component, this.getParentContainer(component), isNew);
                 }
                 this.emit('updateComponent', component.component);
@@ -318,7 +318,7 @@ export default class PDFBuilder extends WebformBuilder {
         });
         this.webform.on('iframe-componentClick', schema => {
             const component = this.webform.getComponentById(schema.id);
-            if (component) {
+            if (component && this.hasEditTabs(component.type)) {
                 this.editComponent(component.component, this.getParentContainer(component));
             }
         }, true);

package/lib/mjs/Webform.d.ts

@@ -190,7 +190,10 @@ declare class Webform extends NestedDataComponent {
     get language(): string;
     root: this;
     localRoot: this;
+    beforeInit(): void;
+    executeFormController: any;
     get emptyValue(): null;
+    get shouldCallFormController(): any;
     get shadowRoot(): any;
     /**
      * Add a language for translations
@@ -360,7 +363,7 @@ declare class Webform extends NestedDataComponent {
      * @returns {Promise} - The promise that is triggered when the form is built.
      */
     init(): Promise<any>;
-    executeFormController(): false | undefined;
+    _executeFormController(): void;
     build(element: any): Promise<any>;
     getClassName(): string;
     render(): string;
@@ -452,7 +455,7 @@ declare class Webform extends NestedDataComponent {
      */
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
-    triggerCaptcha(): void;
+    triggerCaptcha(components?: null): void;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/mjs/Webform.js

@@ -287,12 +287,24 @@ export default class Webform extends NestedDataComponent {
         this.localRoot = this;
     }
     /* eslint-enable max-statements */
+    beforeInit() {
+        this.executeFormController = _.once(this._executeFormController);
+    }
     get language() {
         return this.options.language;
     }
     get emptyValue() {
         return null;
     }
+    get shouldCallFormController() {
+        // If no controller value or
+        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
+        return (this.form &&
+            this.form.controller &&
+            !((!this.visible || this.component.hidden) &&
+                this.component.clearOnHide &&
+                !this.rootPristine));
+    }
     componentContext() {
         return this._data;
     }
@@ -902,19 +914,12 @@ export default class Webform extends NestedDataComponent {
         this.on('resetForm', () => this.resetValue(), true);
         this.on('deleteSubmission', () => this.deleteSubmission(), true);
         this.on('refreshData', () => this.updateValue(), true);
-        this.executeFormController();
+        if (this.shouldCallFormController) {
+            this.executeFormController();
+        }
         return this.formReady;
     }
-    executeFormController() {
-        // If no controller value or
-        // hidden and set to clearOnHide (Don't calculate a value for a hidden field set to clear when hidden)
-        if (!this.form ||
-            !this.form.controller ||
-            ((!this.visible || this.component.hidden) &&
-                this.component.clearOnHide &&
-                !this.rootPristine)) {
-            return false;
-        }
+    _executeFormController() {
         this.formReady.then(() => {
             this.evaluate(this.form.controller, {
                 components: this.components,
@@ -1529,18 +1534,28 @@ export default class Webform extends NestedDataComponent {
             return console.warn(message);
         }
     }
-    triggerCaptcha() {
-        if (!this || !this.components) {
+    triggerCaptcha(components = null) {
+        if (!this || !this.components || this.options.preview) {
             return;
         }
         const captchaComponent = [];
-        this.eachComponent((component) => {
+        eachComponent(components || this.components, (component) => {
             if (/^(re)?captcha$/.test(component.type) && component.component.eventType === 'formLoad') {
                 captchaComponent.push(component);
             }
-        });
+        }, true);
         if (captchaComponent.length > 0) {
-            captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+            if (captchaComponent[0].component.provider === 'google' && components) {
+                return;
+            }
+            if (this.parent) {
+                this.parent.subFormReady.then(() => {
+                    captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+                });
+            }
+            else {
+                captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
+            }
         }
     }
     set nosubmit(value) {

package/lib/mjs/WebformBuilder.d.ts

@@ -123,6 +123,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/mjs/WebformBuilder.js

@@ -115,7 +115,9 @@ export default class WebformBuilder extends Component {
                 html,
                 disableBuilderActions: self?.component?.disableBuilderActions,
                 childComponent: component,
-                design: self?.options?.design
+                design: self?.options?.design,
+                editJson: self?.options?.editJson,
+                editComponent: this.hasEditTabs(component.type)
             });
         };
         this.options.hooks.renderComponents = (html, { components, self }) => {
@@ -840,7 +842,11 @@ export default class WebformBuilder extends Component {
             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.
@@ -1619,4 +1625,9 @@ export default class WebformBuilder extends Component {
             info.placeholder ||
             info.type);
     }
+    hasEditTabs(type) {
+        const editTabs = getComponent(Components.components[type].editForm().components, 'tabs', true).components;
+        const hiddenEditTabs = _.filter(_.get(this.options, `editForm.${type}`, []), 'ignore');
+        return _.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;
+    }
 }

package/lib/mjs/Wizard.js

@@ -594,6 +594,7 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
+                this.triggerCaptcha(this.currentPanel.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
@@ -657,7 +658,7 @@ export default class Wizard extends Webform {
         return this.page - 1;
     }
     beforeSubmit() {
-        const pages = this.getPages();
+        const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
             page.options.beforeSubmit = true;
             return page.beforeSubmit();

package/lib/mjs/WizardBuilder.js

@@ -255,10 +255,23 @@ export default class WizardBuilder extends WebformBuilder {
         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 => _.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/mjs/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;

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

@@ -161,6 +161,7 @@ export default class Component extends Element {
             properties: {},
             allowMultipleMasks: false,
             addons: [],
+            serverOverride: {},
         }, ...sources);
     }
     /**
@@ -418,6 +419,9 @@ export default class Component extends Element {
         // Allow anyone to hook into the component creation.
         this.hook('component');
         if (!this.options.skipInit) {
+            if (typeof this.beforeInit === 'function') {
+                this.beforeInit();
+            }
             this.init();
         }
     }
@@ -1264,7 +1268,7 @@ export default class Component extends Element {
     detach() {
         // First iterate through each ref and delete the component so there are no dangling component references.
         _.each(this.refs, (ref) => {
-            if (typeof ref === NodeList) {
+            if (ref instanceof NodeList) {
                 ref.forEach((elem) => {
                     delete elem.component;
                 });
@@ -1914,15 +1918,21 @@ export default class Component extends Element {
         }
         // Check advanced conditions (and cache the result)
         const isConditionallyHidden = this.checkConditionallyHidden(data, row) || this._parentConditionallyHidden;
+        let shouldClear = false;
         if (isConditionallyHidden !== this._conditionallyHidden) {
             this._conditionallyHidden = isConditionallyHidden;
-            this.clearOnHide();
+            shouldClear = true;
         }
         // Check visibility
         const visible = (this.hasCondition() ? !this.conditionallyHidden : !this.component.hidden);
         if (this.visible !== visible) {
             this.visible = visible;
         }
+        // Wait for visibility to update for nested components, so the component state is up-to-date when
+        // calling clearOnHide
+        if (shouldClear) {
+            this.clearOnHide();
+        }
         return visible;
     }
     /**

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>')
+        '<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())
 ];
 /* eslint-enable quotes, max-len */