@formio/js 5.4.0-api98.1 → 5.4.0

package/dist/formio.utils.min.js.LICENSE.txt

@@ -18,9 +18,9 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.2.4 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.2.4/LICENSE */
+/*! @license DOMPurify 3.4.0 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.0/LICENSE */
 
-/*! formiojs v5.4.0-api98.1 | https://unpkg.com/formiojs@5.4.0-api98.1/LICENSE.txt */
+/*! formiojs v5.4.0 | https://unpkg.com/formiojs@5.4.0/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Element.d.ts

@@ -210,6 +210,17 @@ export default class Element {
      * @returns {this} - The instance of the element.
      */
     removeClass(element: HTMLElement, className: string): this;
+    /**
+     * Idempotently add or remove a class on a DOM element based on a boolean.
+     * Skips the mutation when the element is already in the desired state, so
+     * callers can safely invoke it on every change without triggering redundant
+     * CSS transitions or attribute writes.
+     * @param {HTMLElement} element - The DOM element to toggle the class on.
+     * @param {string} className - The class name to add or remove.
+     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.
+     * @returns {this} - The instance of the element.
+     */
+    toggleClass(element: HTMLElement, className: string, want: boolean): this;
     /**
      * Empty's an HTML DOM element.
      * @param {HTMLElement} element - The element you wish to empty.

package/lib/cjs/Element.js

@@ -487,6 +487,30 @@ class Element {
         }
         return this;
     }
+    /**
+     * Idempotently add or remove a class on a DOM element based on a boolean.
+     * Skips the mutation when the element is already in the desired state, so
+     * callers can safely invoke it on every change without triggering redundant
+     * CSS transitions or attribute writes.
+     * @param {HTMLElement} element - The DOM element to toggle the class on.
+     * @param {string} className - The class name to add or remove.
+     * @param {boolean} want - TRUE to ensure the class is present, FALSE to ensure it is absent.
+     * @returns {this} - The instance of the element.
+     */
+    toggleClass(element, className, want) {
+        var _a;
+        if (!element || !className || !(element instanceof HTMLElement)) {
+            return this;
+        }
+        const has = !!((_a = element.classList) === null || _a === void 0 ? void 0 : _a.contains(className));
+        if (want && !has) {
+            this.addClass(element, className);
+        }
+        else if (!want && has) {
+            this.removeClass(element, className);
+        }
+        return this;
+    }
     /**
      * Empty's an HTML DOM element.
      * @param {HTMLElement} element - The element you wish to empty.

package/lib/cjs/Embed.js

@@ -273,6 +273,7 @@ class Formio {
         });
     }
     static init(element, options = {}, builder = false) {
+        var _b;
         return __awaiter(this, void 0, void 0, function* () {
             _a.cdn = new CDN_js_1.default(_a.config.cdn, _a.config.cdnUrls || {});
             _a.config.libs = _a.config.libs || {
@@ -352,6 +353,25 @@ class Formio {
                 };
             });
             const id = _a.config.id || `formio-${Math.random().toString(36).substring(7)}`;
+            const hasQuillComponent = (components = []) => {
+                if (!Array.isArray(components)) {
+                    return false;
+                }
+                return components.some((component) => {
+                    var _b, _c;
+                    if (!component || typeof component !== 'object') {
+                        return false;
+                    }
+                    const isQuillTextarea = component.type === 'textarea' &&
+                        component.wysiwyg === true &&
+                        component.editor === 'quill';
+                    return (isQuillTextarea ||
+                        hasQuillComponent(component.components) ||
+                        hasQuillComponent((_b = component.columns) === null || _b === void 0 ? void 0 : _b.flatMap((column) => column.components || [])) ||
+                        hasQuillComponent((_c = component.rows) === null || _c === void 0 ? void 0 : _c.flatMap((row) => row.flatMap((cell) => cell.components || []))));
+                });
+            };
+            const disableShadowForQuill = hasQuillComponent((_b = _a.config.form) === null || _b === void 0 ? void 0 : _b.components);
             // Create a new wrapper and add the element inside of a new wrapper.
             let wrapper = _a.createElement('div', {
                 id: `${id}-wrapper`,
@@ -360,6 +380,7 @@ class Formio {
             // If we include the libraries, then we will attempt to run this in shadow dom.
             const useShadowDom = _a.config.includeLibs &&
                 !_a.config.noshadow &&
+                !disableShadowForQuill &&
                 typeof wrapper.attachShadow === 'function';
             if (useShadowDom) {
                 wrapper = wrapper.attachShadow({
@@ -368,7 +389,7 @@ class Formio {
                 options.shadowRoot = wrapper;
                 // Due to an issue with quill not loading styles in the shadowdom, we need to add quill styles and js to the shadowdom
                 const quill = {
-                    js: `${_a.cdn.quill}/quill.min.js`,
+                    js: `${_a.cdn.quill}/quill.js`,
                     css: `${_a.cdn.quill}/quill.snow.css`
                 };
                 yield _a.addLibrary(wrapper, quill, 'quill');
@@ -487,7 +508,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.4.0-api98.1';
+Formio.version = '5.4.0';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Form.d.ts

@@ -238,7 +238,7 @@ export type FormOptions = {
     /**
      * - The render mode for this form.
      */
-    renderMode?: "builder" | "form" | "html" | "flat" | "pdf" | undefined;
+    renderMode?: "form" | "builder" | "html" | "flat" | "pdf" | undefined;
     /**
      * - Highlight any errors on the form.
      */

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.4.0-api98.1';
+sdk_1.Formio.version = '5.4.0';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/cjs/PDFBuilder.js

@@ -233,7 +233,12 @@ class PDFBuilder extends WebformBuilder_1.default {
                 nonFillableConversionUsed: autoConversionComponentsAssigned && result.data.formfields.nonFillableConversionUsed,
             });
             this.emit('pdfUploaded', result.data);
-            this.redraw();
+            if (autoConversionComponentsAssigned) {
+                this.rebuild();
+            }
+            else {
+                this.redraw();
+            }
         })
             .catch((err) => this.setUploadError(err));
     }

package/lib/cjs/Webform.d.ts

@@ -259,7 +259,6 @@ declare class Webform extends NestedDataComponent {
      * @returns {Promise} - The promise that is triggered when the submission is set.
      */
     setSubmission(submission: any, flags?: any): Promise<any>;
-    _submission: any;
     handleDraftError(errName: any, errDetails: any, restoreDraft: any): void;
     saveDraft(): void;
     /**
@@ -270,6 +269,7 @@ declare class Webform extends NestedDataComponent {
     get schema(): any;
     mergeData(_this: any, _that: any): void;
     editing: boolean | undefined;
+    _submission: any;
     /**
      * Build the form.
      * @returns {Promise} - The promise that is triggered when the form is built.

package/lib/cjs/Webform.js

@@ -659,8 +659,6 @@ class Webform extends NestedDataComponent_1.default {
             if (resolveFlags) {
                 flags = Object.assign(Object.assign({}, flags), resolveFlags);
             }
-            this._submission = {};
-            this._data = {};
             this.onSetSubmission(submission, flags);
             return this.submissionReadyResolve(submission);
         }, (err) => this.submissionReadyReject(err))
@@ -1034,7 +1032,7 @@ class Webform extends NestedDataComponent_1.default {
      * @returns {void|Array} - The errors that were set.
      */
     showErrors(errors, triggerEvent) {
-        var _a;
+        var _a, _b;
         this.loading = false;
         if (!Array.isArray(errors)) {
             errors = [
@@ -1107,7 +1105,10 @@ class Webform extends NestedDataComponent_1.default {
             });
         }
         const errorsList = this.renderTemplate('errorsList', { errors: displayedErrors });
-        (_a = this.root) === null || _a === void 0 ? void 0 : _a.setAlert('danger', errorsList);
+        // Only paint the alert from a subform when the root won't double paint it to avoid a painful flicker
+        if (this === this.root || !((_a = this.root) === null || _a === void 0 ? void 0 : _a.submitted)) {
+            (_b = this.root) === null || _b === void 0 ? void 0 : _b.setAlert('danger', errorsList);
+        }
         if (triggerEvent) {
             this.emit('error', errors);
         }
@@ -1207,7 +1208,7 @@ class Webform extends NestedDataComponent_1.default {
      * @param {any} changes - The changes that have occured in the form.
      */
     onChange(flags, changed, modified, changes) {
-        var _a;
+        var _a, _b;
         flags = flags || {};
         let isChangeEventEmitted = false;
         if (((_a = this.parent) === null || _a === void 0 ? void 0 : _a.subForm) === this) {
@@ -1227,7 +1228,7 @@ class Webform extends NestedDataComponent_1.default {
             flags.fromIframe ||
             (flags.fromSubmission && this.rootPristine && this.pristine && flags.changed);
         const errors = shouldValidate
-            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change' }))
+            ? this.validate(value.data, Object.assign(Object.assign({}, flags), { noValidate: false, process: 'change', dirty: (_b = flags.dirty) !== null && _b !== void 0 ? _b : this.submitted }))
             : [];
         value.isValid = (errors || []).filter((err) => !err.fromServer).length === 0;
         this.loading = false;
@@ -1285,6 +1286,7 @@ class Webform extends NestedDataComponent_1.default {
         }
     }
     setMetadata(submission) {
+        var _a, _b;
         // Add in metadata about client submitting the form
         submission.metadata = submission.metadata || {};
         lodash_1.default.defaults(submission.metadata, {
@@ -1296,6 +1298,7 @@ class Webform extends NestedDataComponent_1.default {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: ((_a = this.i18next) === null || _a === void 0 ? void 0 : _a.originalLanguage) || this.options.language || ((_b = this.i18next) === null || _b === void 0 ? void 0 : _b.language),
         });
     }
     submitForm(options = {}, local = false) {

package/lib/cjs/WebformBuilder.js

@@ -379,11 +379,14 @@ class WebformBuilder extends Component_1.default {
             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,
+                editComponentPath: component.path,
             }));
         }
         if (component.refs.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));
+            component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component, {
+                editComponentPath: component.path,
+            }));
         }
         if (component.refs.removeComponent) {
             this.attachTooltip(component.refs.removeComponent, this.t('Remove'));
@@ -1095,10 +1098,19 @@ class WebformBuilder extends Component_1.default {
         }
     }
     updateComponent(component, changed) {
+        var _a, _b;
         const sanitizeConfig = lodash_1.default.get(this.webform, 'form.settings.sanitizeConfig') ||
             lodash_1.default.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
+            if (((_a = changed === null || changed === void 0 ? void 0 : changed.instance) === null || _a === void 0 ? void 0 : _a.key) === 'allowMultipleMasks' && (changed === null || changed === void 0 ? void 0 : changed.value) === false) {
+                const changedComp = (_b = this.preview) === null || _b === void 0 ? void 0 : _b.getComponent(component.key);
+                if (changedComp) {
+                    const emptyValue = changedComp.emptyValue;
+                    changedComp.dataValue = emptyValue;
+                    component.defaultValue = emptyValue;
+                }
+            }
             this.preview.form = {
                 components: [
                     lodash_1.default.omit(Object.assign({}, component), [
@@ -1418,6 +1430,7 @@ class WebformBuilder extends Component_1.default {
         // Pass along the form being edited.
         editFormOptions.editForm = this.form;
         editFormOptions.editComponent = component;
+        editFormOptions.editComponentPath = flags.editComponentPath;
         editFormOptions.flags = flags;
         this.hook('editComponentParentInstance', editFormOptions, parent);
         this.editForm = new Webform_1.default(Object.assign(Object.assign(Object.assign(Object.assign({}, lodash_1.default.omit(this.options, [

package/lib/cjs/Wizard.js

@@ -188,6 +188,7 @@ class Wizard extends Webform_1.default {
         return this.renderTemplate(headerType, ctx);
     }
     render() {
+        var _a;
         const ctx = this.renderContext;
         if (this.component.id) {
             ctx.panels.forEach((panel) => {
@@ -206,7 +207,7 @@ class Wizard extends Webform_1.default {
             wizardHeaderLocation,
             wizardNav, components: this.renderComponents([
                 ...this.prefixComps,
-                ...this.currentPage.components,
+                ...((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components) || [],
                 ...this.suffixComps,
             ]) }), this.builderMode ? 'builder' : 'form');
     }
@@ -250,7 +251,7 @@ class Wizard extends Webform_1.default {
      * @returns {Promise} A promise that resolves when all components have been successfully attached.
      */
     attach(element) {
-        var _a;
+        var _a, _b;
         this.setElement(element);
         this.loadRefs(element, {
             [this.wizardKey]: 'single',
@@ -268,7 +269,7 @@ class Wizard extends Webform_1.default {
         this.hook('attachWebform', element, this);
         const promises = this.attachComponents(this.refs[this.wizardKey], [
             ...this.prefixComps,
-            ...this.currentPage.components,
+            ...((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.components) || [],
             ...this.suffixComps,
         ]);
         this.attachNav();
@@ -296,7 +297,8 @@ class Wizard extends Webform_1.default {
     isBreadcrumbClickable() {
         let currentPage = null;
         this.pages.map((page) => {
-            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {
+            var _a;
+            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {
                 currentPage = page;
             }
         });
@@ -311,11 +313,12 @@ class Wizard extends Webform_1.default {
     isAllowPrevious() {
         let currentPage = null;
         this.pages.map((page) => {
-            if (lodash_1.default.isEqual(this.currentPage.component, page.component)) {
+            var _a;
+            if (lodash_1.default.isEqual((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.component, page.component)) {
                 currentPage = page;
             }
         });
-        return lodash_1.default.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);
+        return lodash_1.default.get(currentPage === null || currentPage === void 0 ? void 0 : currentPage.component, 'allowPrevious', this.options.allowPrevious);
     }
     /**
      * Handles navigate on 'Enter' key event in a wizard form.
@@ -544,7 +547,7 @@ class Wizard extends Webform_1.default {
                     const forceShow = this.shouldForceShow(item);
                     const forceHide = this.shouldForceHide(item);
                     let isVisible = !page
-                        ? (0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden
+                        ? ((0, utils_1.checkCondition)(item, data, data, this.component, this) && !item.hidden)
                         : page.visible;
                     if (forceShow) {
                         isVisible = true;
@@ -615,8 +618,9 @@ class Wizard extends Webform_1.default {
                 this._seenPages = this._seenPages.concat(parentNum);
             }
             return this.redraw().then(() => {
+                var _a;
                 this.checkData(this.submission.data);
-                this.triggerCaptcha(this.currentPage.components);
+                this.triggerCaptcha((_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components);
                 const errors = this.submitted
                     ? this.validate(this.localData, { dirty: true })
                     : this.validateCurrentPage();
@@ -844,8 +848,7 @@ class Wizard extends Webform_1.default {
         return super.setForm(form, flags);
     }
     onSetForm(clonedForm, initialForm) {
-        this.component.components =
-            (this.parent ? initialForm.components : clonedForm.components) || [];
+        this.component.components = (this.parent ? initialForm.components : clonedForm.components) || [];
         this.setComponentSchema();
     }
     setEditMode(submission) {
@@ -955,11 +958,12 @@ class Wizard extends Webform_1.default {
         return super.rebuild().then(setCurrentPage);
     }
     checkValidity(data, dirty, row, currentPageOnly, childErrors = []) {
+        var _a;
         if (!this.checkCondition(row, data)) {
             this.setCustomValidity('');
             return true;
         }
-        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : this.currentPage.components;
+        const components = !currentPageOnly || this.isLastPage() ? this.getComponents() : (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.components;
         return components.reduce((check, comp) => comp.checkValidity(data, dirty, row, currentPageOnly, childErrors) && check, true);
     }
     get errors() {

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;

package/lib/cjs/components/Components.js

@@ -69,7 +69,9 @@ class Components {
             comp = new Component_1.default(component, options, data);
         }
         if (comp.path) {
-            comp.componentsMap[comp.path] = comp;
+            comp.eachRootChildComponentsMap((map) => {
+                map[comp.path] = comp;
+            });
         }
         // Reset the componentMatches on the root element if any new component is created.
         let parent = comp.parent;

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

@@ -163,6 +163,14 @@ declare class Component extends Element {
      */
     info: any;
     get componentsMap(): object;
+    /**
+     * Walks this component's root chain, invoking `fn` with each ancestor root's
+     * `childComponentsMap`. Component registration is propagated up the wizard /
+     * nested-form chain at create time, so any code that mutates a registration
+     * (creation, removal, path-driven re-key) must update every map in the chain.
+     * @param {(map: object) => void} fn - Called once per root that exposes a `childComponentsMap`.
+     */
+    eachRootChildComponentsMap(fn: (map: object) => void): void;
     /**
      * Returns if the parent should conditionally clear.
      *