@formio/js 5.3.6 → 5.4.0

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

@@ -20,7 +20,7 @@
 
 /*! @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.3.6 | https://unpkg.com/formiojs@5.3.6/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/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,12 +380,19 @@ 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({
                     mode: 'open',
                 });
                 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.js`,
+                    css: `${_a.cdn.quill}/quill.snow.css`
+                };
+                yield _a.addLibrary(wrapper, quill, 'quill');
             }
             element.parentNode.removeChild(element);
             wrapper.appendChild(element);
@@ -481,7 +508,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.3.6';
+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

@@ -45,7 +45,7 @@
  * @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 {{[key: string]: string} | { translationsUrl: 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.
@@ -202,6 +202,8 @@ export type FormOptions = {
      */
     i18n?: {
         [key: string]: string;
+    } | {
+        translationsUrl: string;
     } | undefined;
     /**
      * - Custom logic for creation of elements.
@@ -236,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/Form.js

@@ -56,7 +56,7 @@ const utils_1 = __importDefault(require("./utils"));
  * @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 {{[key: string]: string} | { translationsUrl: 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.
@@ -360,7 +360,7 @@ class Form extends Element_1.default {
             return Promise.resolve(this.instance);
         }
         this.form.display = display;
-        this.instance.destroy();
+        this.instance.destroy(true);
         this.instance = this.create(display);
         return this.setForm(this.form).then(() => {
             this.instance.emit('setDisplay', this.form.display);

package/lib/cjs/FormBuilder.d.ts

@@ -73,11 +73,11 @@ export default class FormBuilder extends Form {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */
-    constructor(element: HTMLElement, form: string | object, options: {
+    constructor(element: HTMLElement, form: string | object | undefined, options: {
         /**
          * - An array of "keys" of components that should be disabled within the form builder. Example: ['firstName', 'lastName']
          */

package/lib/cjs/FormBuilder.js

@@ -10,7 +10,7 @@ class FormBuilder extends Form_1.default {
     /**
      * Creates a new form builder.
      * @param {HTMLElement} element - The HTML element to place the form builder.
-     * @param {string | object} form - The form to pass to the builder
+     * @param {string | object | undefined} form - The form to pass to the builder
      * @param {FormBuilderOptions} options - The options to create this builder.
      * @returns {FormBuilder} - The form builder instance.
      */

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.3.6';
+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/PDF.js

@@ -17,9 +17,11 @@ class PDF extends Webform_1.default {
         // Handle an iframe submission.
         this.on('iframe-submission', (submission) => this.setValue(submission, {
             fromIframe: true,
+            noDefault: true
         }), true);
         this.on('iframe-change', (submission) => this.setValue(submission, {
             fromIframe: true,
+            noDefault: true
         }), true);
         this.on('iframe-getIframePositions', (query) => {
             const iframe = document.getElementById(`iframe-${query.formId}`);

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

@@ -372,6 +372,7 @@ declare class Webform extends NestedDataComponent {
     submit(before?: boolean, options?: any): Promise<any>;
     submitUrl(URL: any, headers: any): void;
     triggerCaptcha(components?: null): void;
+    loadTranslations(): Promise<any>;
     _nosubmit: any;
     get conditions(): any;
     get variables(): any;

package/lib/cjs/Webform.js

@@ -575,7 +575,9 @@ class Webform extends NestedDataComponent_1.default {
         }
         this.initialized = false;
         const rebuild = this.rebuild() || Promise.resolve();
-        return rebuild.then(() => {
+        return this.loadTranslations()
+            .then(() => rebuild)
+            .then(() => {
             this.emit('formLoad', form);
             if (!this.options.server) {
                 this.triggerCaptcha();
@@ -1125,6 +1127,7 @@ class Webform extends NestedDataComponent_1.default {
         this.setPristine(true);
         // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.
         this.setValue((0, utils_1.fastCloneDeep)(submission), {
+            noDefault: true,
             noValidate: true,
             noCheck: true,
         });
@@ -1283,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, {
@@ -1294,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) {
@@ -1526,6 +1531,50 @@ class Webform extends NestedDataComponent_1.default {
             captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }
+    loadTranslations() {
+        var _a;
+        // We only need a resolve since if translations cannot load, we still want to proceed and render the for
+        let translationsLoadResolve;
+        const promise = new Promise((resolve) => {
+            translationsLoadResolve = resolve;
+        });
+        const translationsUrl = typeof ((_a = this.options.i18n) === null || _a === void 0 ? void 0 : _a.translationsUrl) === 'string'
+            ? this.options.i18n.translationsUrl
+            : null;
+        if (translationsUrl) {
+            const url = this.sanitize(this.interpolate(translationsUrl, {}), this.shouldSanitizeValue);
+            Formio_1.Formio.makeStaticRequest(url, 'GET')
+                .then((response) => {
+                let languages = response;
+                try {
+                    if (typeof languages == 'string') {
+                        languages = JSON.parse(languages);
+                    }
+                    this.i18next.setLanguages(languages);
+                    this.i18next.changeLanguage(this.i18next.originalLanguage, (err) => {
+                        if (err) {
+                            return;
+                        }
+                        this.emit('languageChanged');
+                    });
+                    this.redraw();
+                    translationsLoadResolve();
+                }
+                catch (err) {
+                    console.warn(err.message);
+                    translationsLoadResolve();
+                }
+            })
+                .catch((err) => {
+                console.warn(err);
+                translationsLoadResolve();
+            });
+        }
+        else {
+            translationsLoadResolve();
+        }
+        return promise;
+    }
     set nosubmit(value) {
         this._nosubmit = !!value;
         this.emit('nosubmit', this._nosubmit);

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'));
@@ -949,7 +952,22 @@ class WebformBuilder extends Component_1.default {
             rebuild = Promise.resolve();
         }
         return rebuild.then(() => {
+            // Get the updated `toIndex` after the component has been inserted/rebuilt
+            const toIndex = lodash_1.default.findIndex(target.formioContainer, { key: info.key });
             this.emit('addComponent', info, parent, path, index, isNew && !this.options.noNewEdit && !info.noNewEdit);
+            // If this is not a new component — it means it was moved
+            if (!isNew) {
+                const payload = {
+                    component: info,
+                    parent,
+                    path,
+                    fromIndex: index,
+                    toIndex,
+                    timestamp: new Date()
+                };
+                // New event that allows explicit tracking of reordering
+                this.emit('moveComponent', payload);
+            }
             if (!isNew || this.options.noNewEdit || info.noNewEdit) {
                 this.emit('change', this.form);
             }
@@ -1080,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), [
@@ -1403,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.d.ts

@@ -90,6 +90,7 @@ declare class Wizard extends Webform {
     nextPage(): Promise<void>;
     validateCurrentPage(flags?: {}): any;
     emitPrevPage(): void;
+    announceCurrentPage(): void;
     prevPage(): Promise<void>;
     cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;

package/lib/cjs/Wizard.js

@@ -715,6 +715,7 @@ class Wizard extends Webform_1.default {
     }
     emitNextPage() {
         this.emit('nextPage', { page: this.page, submission: this.submission });
+        this.announceCurrentPage();
     }
     nextPage() {
         // Read-only forms should not worry about validation before going to next page, nor should they submit.
@@ -760,6 +761,16 @@ class Wizard extends Webform_1.default {
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
+        this.announceCurrentPage();
+    }
+    announceCurrentPage() {
+        if (lodash_1.default.get(this.form, 'settings.wizardHeaderType', '') === 'StepIndicator') {
+            (0, utils_1.screenReaderSpeech)(`Now on step ${this.page + 1} of ${this.pages.length}: ${lodash_1.default.get(this.currentPage, 'component.title')}`);
+            const currentLink = lodash_1.default.get(this.refs, `${this.wizardKey}-link.[${this.page}]`);
+            if (currentLink) {
+                currentLink.focus();
+            }
+        }
     }
     prevPage() {
         return this.beforePage().then(() => {

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/_classes/component/Component.d.ts

@@ -177,6 +177,7 @@ declare class Component extends Element {
      * @returns {boolean} - If the parent should conditionally clear.
      */
     parentShouldConditionallyClear(): boolean;
+    hasCondionallyHiddenLayoutParent(): boolean;
     parentConditionallyHidden(): boolean;
     /**
      * Returns true if any of the parents default their component "hidden" property to true.
@@ -593,6 +594,15 @@ declare class Component extends Element {
      * @returns {string} - The custom style
      */
     get customStyle(): string;
+    /**
+     * Build custom styles from the styles form option or global config.
+     * @param {string[]} templateNames - The possible template names.
+     * @returns {{ [refName: string]: string[] }} - The custom styles object for the named template.
+     * @todo - Rename this to a better method name that doesn't clash
+     */
+    getCustomStyles(templateNames: string[]): {
+        [refName: string]: string[];
+    };
     /**
      * Returns if the application is on a mobile device.
      * @returns {boolean} - TRUE if the application is on a mobile device.
@@ -927,9 +937,9 @@ declare class Component extends Element {
      */
     get hasDefaultValue(): boolean;
     /**
-     * Determine if we should add a default value for this component.
-     * @returns {boolean} - TRUE if a default value should be set
-     */
+    * Determine if we should add a default value for this component.
+    * @returns {boolean} - TRUE if a default value should be set
+    */
     get shouldAddDefaultValue(): boolean;
     /**
      * Get the default value of this component.