@formio/js 5.3.6 → 5.4.0

package/lib/cjs/utils/utils.js

@@ -206,6 +206,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             return true;
         }
         const conditionsResult = lodash_1.default.map(conditions, (cond) => {
+            var _a;
             const { value: comparedValue, operator, component: conditionComponentPath } = cond;
             if (!conditionComponentPath) {
                 return true;
@@ -232,6 +233,16 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             }
             else {
                 const value = getComponentActualValue(conditionComponentPath, data, row);
+                // When inside a DataGrid/EditGrid, construct a row-indexed path so that
+                // operators like isEmpty can look up the correct row's component instance.
+                let operatorPath = conditionComponentPath;
+                const dataParent = getDataParentComponent(instance);
+                if (dataParent && !lodash_1.default.isNil(instance === null || instance === void 0 ? void 0 : instance.rowIndex)) {
+                    const parentPath = (_a = dataParent.paths) === null || _a === void 0 ? void 0 : _a.localPath;
+                    if (parentPath && conditionComponentPath.startsWith(`${parentPath}.`)) {
+                        operatorPath = conditionComponentPath.replace(`${parentPath}.`, `${parentPath}[${instance.rowIndex}].`);
+                    }
+                }
                 const СonditionOperator = conditionOperators_1.default[operator];
                 return СonditionOperator
                     ? new СonditionOperator().getResult({
@@ -239,7 +250,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
                         comparedValue,
                         instance,
                         component,
-                        path: conditionComponentPath,
+                        path: operatorPath,
                     })
                     : true;
             }
@@ -292,7 +303,11 @@ exports.getComponentActualValue = getComponentActualValue;
  */
 function checkCustomConditional(component, custom, row, data, form, variable, onError, instance) {
     if (typeof custom === 'string') {
-        custom = `var ${variable} = true; ${custom}; return ${variable};`;
+        custom = `
+      var ${variable} = true; 
+      ${custom}; 
+      return ${variable};
+    `;
     }
     const value = instance && instance.evaluate
         ? instance.evaluate(custom, { row, data, form })
@@ -640,14 +655,16 @@ exports.shouldLoadZones = shouldLoadZones;
  * @param {string} timezone - The timezone to load.
  * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
  */
-function loadZones(url, timezone) {
-    if (timezone && !shouldLoadZones(timezone)) {
-        // Return non-resolving promise.
-        return new Promise(lodash_1.default.noop);
+function loadZones(url, _timezone) {
+    if (moment_timezone_1.default.zonesLoaded) {
+        return Promise.resolve();
     }
     if (moment_timezone_1.default.zonesPromise) {
         return moment_timezone_1.default.zonesPromise;
     }
+    // Always load the full packed dataset once. The previous optimization skipped fetch when the
+    // display timezone matched the runtime zone, but moment-timezone still needs `tz.load()` for
+    // `.tz(ianaName)` and `z` formatting to work; otherwise conversions silently match server local time.
     return (moment_timezone_1.default.zonesPromise = fetch(url).then((resp) => resp.json().then((zones) => {
         moment_timezone_1.default.tz.load(zones);
         moment_timezone_1.default.zonesLoaded = true;

package/lib/cjs/widgets/CalendarWidget.js

@@ -61,7 +61,7 @@ class CalendarWidget extends InputWidget_1.default {
         if (this.zoneLoading) {
             return true;
         }
-        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {
+        if (!(0, utils_1.zonesLoaded)()) {
             this.zoneLoading = true;
             (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {
                 this.zoneLoading = false;

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.3.6';
+    static version = '5.4.0';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {
@@ -340,6 +340,24 @@ export class Formio {
             };
         });
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
+        const hasQuillComponent = (components = []) => {
+            if (!Array.isArray(components)) {
+                return false;
+            }
+            return components.some((component) => {
+                if (!component || typeof component !== 'object') {
+                    return false;
+                }
+                const isQuillTextarea = component.type === 'textarea' &&
+                    component.wysiwyg === true &&
+                    component.editor === 'quill';
+                return (isQuillTextarea ||
+                    hasQuillComponent(component.components) ||
+                    hasQuillComponent(component.columns?.flatMap((column) => column.components || [])) ||
+                    hasQuillComponent(component.rows?.flatMap((row) => row.flatMap((cell) => cell.components || []))));
+            });
+        };
+        const disableShadowForQuill = hasQuillComponent(Formio.config.form?.components);
         // Create a new wrapper and add the element inside of a new wrapper.
         let wrapper = Formio.createElement('div', {
             id: `${id}-wrapper`,
@@ -348,12 +366,19 @@ export class Formio {
         // If we include the libraries, then we will attempt to run this in shadow dom.
         const useShadowDom = Formio.config.includeLibs &&
             !Formio.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: `${Formio.cdn.quill}/quill.js`,
+                css: `${Formio.cdn.quill}/quill.snow.css`
+            };
+            await Formio.addLibrary(wrapper, quill, 'quill');
         }
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);

package/lib/mjs/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/mjs/Form.js

@@ -50,7 +50,7 @@ import FormioUtils from './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.
@@ -354,7 +354,7 @@ export default class Form extends Element {
             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/mjs/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/mjs/FormBuilder.js

@@ -25,7 +25,7 @@ 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.
      */

package/lib/mjs/Formio.js

@@ -4,7 +4,7 @@ import CDN from './CDN';
 import Providers from './providers';
 FormioCore.cdn = new CDN();
 FormioCore.Providers = Providers;
-FormioCore.version = '5.3.6';
+FormioCore.version = '5.4.0';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/mjs/PDF.js

@@ -12,9 +12,11 @@ export default class PDF extends Webform {
         // 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/mjs/PDFBuilder.js

@@ -227,7 +227,12 @@ export default class PDFBuilder extends WebformBuilder {
                 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/mjs/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/mjs/Webform.js

@@ -569,7 +569,9 @@ export default class Webform extends NestedDataComponent {
         }
         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();
@@ -1115,6 +1117,7 @@ export default class Webform extends NestedDataComponent {
         this.setPristine(true);
         // We want to return the submitted submission and setValue will mutate the submission so cloneDeep it here.
         this.setValue(fastCloneDeep(submission), {
+            noDefault: true,
             noValidate: true,
             noCheck: true,
         });
@@ -1288,6 +1291,7 @@ export default class Webform extends NestedDataComponent {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.i18next?.originalLanguage || this.options.language || this.i18next?.language,
         });
     }
     submitForm(options = {}, local = false) {
@@ -1517,6 +1521,49 @@ export default class Webform extends NestedDataComponent {
             captchaComponent[0].verify(`${this.form.name ? this.form.name : 'form'}Load`);
         }
     }
+    loadTranslations() {
+        // 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 this.options.i18n?.translationsUrl === 'string'
+            ? this.options.i18n.translationsUrl
+            : null;
+        if (translationsUrl) {
+            const url = this.sanitize(this.interpolate(translationsUrl, {}), this.shouldSanitizeValue);
+            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/mjs/WebformBuilder.js

@@ -364,11 +364,14 @@ export default class WebformBuilder extends Component {
             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'));
@@ -932,7 +935,22 @@ export default class WebformBuilder extends Component {
             rebuild = Promise.resolve();
         }
         return rebuild.then(() => {
+            // Get the updated `toIndex` after the component has been inserted/rebuilt
+            const toIndex = _.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);
             }
@@ -1066,6 +1084,14 @@ export default class WebformBuilder extends Component {
             _.get(this.webform, 'form.globalSettings.sanitizeConfig');
         // Update the preview.
         if (this.preview) {
+            if (changed?.instance?.key === 'allowMultipleMasks' && changed?.value === false) {
+                const changedComp = this.preview?.getComponent(component.key);
+                if (changedComp) {
+                    const emptyValue = changedComp.emptyValue;
+                    changedComp.dataValue = emptyValue;
+                    component.defaultValue = emptyValue;
+                }
+            }
             this.preview.form = {
                 components: [
                     _.omit({ ...component }, [
@@ -1381,6 +1407,7 @@ export default class WebformBuilder extends Component {
         // 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({

package/lib/mjs/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/mjs/Wizard.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent } from './utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, screenReaderSpeech } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -701,6 +701,7 @@ export default class Wizard extends Webform {
     }
     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.
@@ -745,6 +746,16 @@ export default class Wizard extends Webform {
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
+        this.announceCurrentPage();
+    }
+    announceCurrentPage() {
+        if (_.get(this.form, 'settings.wizardHeaderType', '') === 'StepIndicator') {
+            screenReaderSpeech(`Now on step ${this.page + 1} of ${this.pages.length}: ${_.get(this.currentPage, 'component.title')}`);
+            const currentLink = _.get(this.refs, `${this.wizardKey}-link.[${this.page}]`);
+            if (currentLink) {
+                currentLink.focus();
+            }
+        }
     }
     prevPage() {
         return this.beforePage().then(() => {

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.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.