@formio/js 5.4.1 → 5.4.2

package/lib/mjs/WebformBuilder.js

@@ -202,14 +202,10 @@ export default class WebformBuilder extends Component {
             },
         };
         if (this.options && this.options.resourceTag) {
-            query.params.tags = [
-                this.options.resourceTag,
-            ];
+            query.params.tags = [this.options.resourceTag];
         }
         else if (!this.options || !this.options.hasOwnProperty('resourceTag')) {
-            query.params.tags = [
-                'builder',
-            ];
+            query.params.tags = ['builder'];
         }
         const formio = new Formio(Formio.projectUrl);
         const isResourcesDisabled = this.options.builder && this.options.builder.resource === false;
@@ -229,7 +225,7 @@ export default class WebformBuilder extends Component {
             }
         })
             .catch((err) => {
-            console.warn(`Could not load project settings: ${err.message || err}`);
+            console.warn(`${this.t('loadingProjectSettingsError')}: ${err.message || err}`);
         });
         if (!formio.noProject && !isResourcesDisabled && formio.formsUrl) {
             const resourceOptions = this.options.builder && this.options.builder.resource;
@@ -318,10 +314,7 @@ export default class WebformBuilder extends Component {
             allowHTML: true,
             trigger: 'mouseenter focus',
             placement: 'top',
-            delay: [
-                200,
-                0,
-            ],
+            delay: [200, 0],
             zIndex: 10000,
             content: title,
         });
@@ -341,18 +334,18 @@ export default class WebformBuilder extends Component {
             editJson: 'single',
         });
         if (component.refs.copyComponent) {
-            this.attachTooltip(component.refs.copyComponent, this.t('Copy'));
+            this.attachTooltip(component.refs.copyComponent, this.t('copy'));
             component.addEventListener(component.refs.copyComponent, 'click', () => this.copyComponent(component));
         }
         if (component.refs.pasteComponent) {
-            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('Paste below'));
+            const pasteToolTip = this.attachTooltip(component.refs.pasteComponent, this.t('pasteBelow'));
             component.addEventListener(component.refs.pasteComponent, 'click', () => {
                 pasteToolTip.hide();
                 this.pasteComponent(component);
             });
         }
         if (component.refs.moveComponent) {
-            this.attachTooltip(component.refs.moveComponent, this.t('Move'));
+            this.attachTooltip(component.refs.moveComponent, this.t('move'));
             if (this.keyboardActionsEnabled) {
                 component.addEventListener(component.refs.moveComponent, 'click', () => {
                     this.moveComponent(component);
@@ -361,20 +354,20 @@ export default class WebformBuilder extends Component {
         }
         const parent = this.getParentElement(element);
         if (component.refs.editComponent) {
-            this.attachTooltip(component.refs.editComponent, this.t('Edit'));
+            this.attachTooltip(component.refs.editComponent, this.t('edit'));
             component.addEventListener(component.refs.editComponent, 'click', () => this.editComponent(component.schema, parent, false, false, component.component, {
                 inDataGrid: component.isInDataGrid,
                 editComponentPath: component.path,
             }));
         }
         if (component.refs.editJson) {
-            this.attachTooltip(component.refs.editJson, this.t('Edit JSON'));
+            this.attachTooltip(component.refs.editJson, this.t('editJson'));
             component.addEventListener(component.refs.editJson, 'click', () => this.editComponent(component.schema, parent, false, true, component.component, {
                 editComponentPath: component.path,
             }));
         }
         if (component.refs.removeComponent) {
-            this.attachTooltip(component.refs.removeComponent, this.t('Remove'));
+            this.attachTooltip(component.refs.removeComponent, this.t('remove'));
             component.addEventListener(component.refs.removeComponent, 'click', () => this.removeComponent(component.schema, parent, component.component, component));
         }
         return element;
@@ -457,10 +450,7 @@ export default class WebformBuilder extends Component {
         const componentSchema = component.component;
         // If the current component is the namespace, we don't need to find it again.
         if (namespaceKey === component.key) {
-            return [
-                ...componentSchema.components,
-                componentSchema,
-            ];
+            return [...componentSchema.components, componentSchema];
         }
         // Get the namespace component so we have the original object.
         const namespaceComponent = getComponent(this.form.components, namespaceKey, true);
@@ -472,14 +462,7 @@ export default class WebformBuilder extends Component {
             return null;
         }
         // Some components are their own namespace.
-        if ([
-            'address',
-            'container',
-            'datagrid',
-            'editgrid',
-            'dynamicWizard',
-            'tree',
-        ].includes(component.type) ||
+        if (['address', 'container', 'datagrid', 'editgrid', 'dynamicWizard', 'tree'].includes(component.type) ||
             component.tree ||
             component.arrayTree) {
             return component.key;
@@ -546,15 +529,11 @@ export default class WebformBuilder extends Component {
                 };
                 const hideShow = (group, forceShow, toggle = false) => {
                     if (forceShow || (toggle && !Array.from(group.classList).includes('show'))) {
-                        group.classList.add([
-                            'show',
-                        ]);
+                        group.classList.add(['show']);
                         group.style.display = 'inherit';
                     }
                     else {
-                        group.classList.remove([
-                            'show',
-                        ]);
+                        group.classList.remove(['show']);
                         group.style.display = 'none';
                     }
                 };
@@ -598,9 +577,7 @@ export default class WebformBuilder extends Component {
             }
             const drake = this.dragula;
             if (this.refs.form) {
-                autoScroll([
-                    window,
-                ], {
+                autoScroll([window], {
                     margin: 20,
                     maxSpeed: 6,
                     scrollWhenOutside: true,
@@ -852,7 +829,7 @@ export default class WebformBuilder extends Component {
             }, true);
             if (isCompAlreadyExists) {
                 this.webform.redraw();
-                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.key} component to one page.`);
+                this.webform.setAlert('danger', this.t('builderUniqueError', { componentKeyOrTitle: draggableComponent.key }));
                 return;
             }
         }
@@ -866,7 +843,7 @@ export default class WebformBuilder extends Component {
             }, true);
             if (isCompAlreadyExists) {
                 this.webform.redraw();
-                this.webform.setAlert('danger', `You cannot add more than one ${draggableComponent.title} component to one page.`);
+                this.webform.setAlert('danger', this.t('builderUniqueError', { componentKeyOrTitle: draggableComponent.title }));
                 return;
             }
         }
@@ -946,7 +923,7 @@ export default class WebformBuilder extends Component {
                     path,
                     fromIndex: index,
                     toIndex,
-                    timestamp: new Date()
+                    timestamp: new Date(),
                 };
                 // New event that allows explicit tracking of reordering
                 this.emit('moveComponent', payload);
@@ -1036,8 +1013,8 @@ export default class WebformBuilder extends Component {
                 (Array.isArray(component.columns) && component.columns.length));
         if (this.options.alwaysConfirmComponentRemoval || removingComponentsGroup) {
             const message = removingComponentsGroup
-                ? 'Removing this component will also remove all of its children. Are you sure you want to do this?'
-                : 'Are you sure you want to remove this component?';
+                ? 'confirmComponentRemoveWithChildren'
+                : 'confirmComponentRemove';
             remove = window.confirm(this.t(message));
         }
         if (!original) {
@@ -1106,10 +1083,7 @@ export default class WebformBuilder extends Component {
                 config: this.options.formConfig || {},
                 sanitizeConfig,
             };
-            const fieldsToRemoveDoubleQuotes = [
-                'label',
-                'tooltip',
-            ];
+            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.preview.form.components.forEach((component) => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
             const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}="preview"]`);
             if (previewElement) {
@@ -1279,10 +1253,7 @@ export default class WebformBuilder extends Component {
                 submissionData.components = this.originalDefaultValue.components;
                 this.originalDefaultValue = null;
             }
-            const fieldsToRemoveDoubleQuotes = [
-                'label',
-                'tooltip',
-            ];
+            const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);
             this.hook('beforeSaveComponentSettings', submissionData);
             let comp = null;
@@ -1411,13 +1382,7 @@ export default class WebformBuilder extends Component {
         editFormOptions.flags = flags;
         this.hook('editComponentParentInstance', editFormOptions, parent);
         this.editForm = new Webform({
-            ..._.omit(this.options, [
-                'hooks',
-                'builder',
-                'events',
-                'attachMode',
-                'skipInit',
-            ]),
+            ..._.omit(this.options, ['hooks', 'builder', 'events', 'attachMode', 'skipInit']),
             language: this.options.language,
             ...editFormOptions,
             evalContext: {
@@ -1510,16 +1475,10 @@ export default class WebformBuilder extends Component {
                 }
                 let isComponentLabelChanged = false;
                 if (event.changed.instance) {
-                    isComponentLabelChanged = [
-                        'label',
-                        'title',
-                    ].includes(event.changed.instance.path);
+                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.instance.path);
                 }
                 else if (event.changed.component) {
-                    isComponentLabelChanged = [
-                        'label',
-                        'title',
-                    ].includes(event.changed.component.key);
+                    isComponentLabelChanged = ['label', 'title'].includes(event.changed.component.key);
                 }
                 if (isComponentLabelChanged) {
                     // Ensure this component has a key.
@@ -1680,7 +1639,7 @@ export default class WebformBuilder extends Component {
      */
     copyComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn('Session storage is not supported in this browser.');
+            return console.warn(this.t('sessionStorageSupportError'));
         }
         this.addClass(this.refs.form, 'builder-paste-mode');
         window.sessionStorage.setItem('formio.clipboard', JSON.stringify(component.schema));
@@ -1692,7 +1651,7 @@ export default class WebformBuilder extends Component {
      */
     pasteComponent(component) {
         if (!window.sessionStorage) {
-            return console.warn('Session storage is not supported in this browser.');
+            return console.warn(this.t('sessionStorageSupportError'));
         }
         this.removeClass(this.refs.form, 'builder-paste-mode');
         if (window.sessionStorage) {

package/lib/mjs/Wizard.d.ts

@@ -84,6 +84,7 @@ declare class Wizard extends Webform {
     get currentPage(): any;
     getNextPage(): number | null;
     getPreviousPage(): number;
+    mergeDefaultsFromSchema(data: any): void;
     beforeSubmit(): Promise<any[]>;
     beforePage(next: any): Promise<any>;
     emitNextPage(): void;

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, screenReaderSpeech } from './utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, getModelType, screenReaderSpeech, } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -30,9 +30,7 @@ export default class Wizard extends Webform {
         this.page = 0;
         this.currentPanel = null;
         this.currentNextPage = 0;
-        this._seenPages = [
-            0,
-        ];
+        this._seenPages = [0];
         this.subWizards = [];
         this.allPages = [];
         this.lastPromise = Promise.resolve();
@@ -101,6 +99,7 @@ export default class Wizard extends Webform {
         this.on('subWizardsUpdated', (subForm) => {
             const subWizard = this.subWizards.find((subWizard) => subForm?.id && subWizard.subForm?.id === subForm?.id);
             if (this.subWizards.length && subWizard) {
+                // GOTCHA(G-FJS01)
                 subWizard.subForm.setValue(subForm._submission, {}, true);
                 this.establishPages();
                 this.redraw();
@@ -132,12 +131,7 @@ export default class Wizard extends Webform {
         return buttons;
     }
     get buttonOrder() {
-        const defaultButtonOrder = [
-            'cancel',
-            'previous',
-            'next',
-            'submit',
-        ];
+        const defaultButtonOrder = ['cancel', 'previous', 'next', 'submit'];
         return (this.options.properties?.wizardButtonOrder?.toLowerCase().split(', ') ?? defaultButtonOrder);
     }
     get renderContext() {
@@ -200,7 +194,7 @@ export default class Wizard extends Webform {
             wizardNav,
             components: this.renderComponents([
                 ...this.prefixComps,
-                ...this.currentPage?.components || [],
+                ...(this.currentPage?.components || []),
                 ...this.suffixComps,
             ]),
         }, this.builderMode ? 'builder' : 'form');
@@ -262,7 +256,7 @@ export default class Wizard extends Webform {
         this.hook('attachWebform', element, this);
         const promises = this.attachComponents(this.refs[this.wizardKey], [
             ...this.prefixComps,
-            ...this.currentPage?.components || [],
+            ...(this.currentPage?.components || []),
             ...this.suffixComps,
         ]);
         this.attachNav();
@@ -414,11 +408,7 @@ export default class Wizard extends Webform {
         // Get all components including all nested components and line up in the correct order
         const getAllComponents = (nestedComp, compsArr, pushAllowed = true) => {
             const nestedPages = [];
-            const dataArrayComponents = [
-                'datagrid',
-                'editgrid',
-                'dynamicWizard',
-            ];
+            const dataArrayComponents = ['datagrid', 'editgrid', 'dynamicWizard'];
             const currentComponents = nestedComp?.subForm
                 ? this.getSortedComponents(nestedComp.subForm)
                 : nestedComp?.components || [];
@@ -537,7 +527,7 @@ export default class Wizard extends Webform {
                     const forceShow = this.shouldForceShow(item);
                     const forceHide = this.shouldForceHide(item);
                     let isVisible = !page
-                        ? (checkCondition(item, data, data, this.component, this) && !item.hidden)
+                        ? checkCondition(item, data, data, this.component, this) && !item.hidden
                         : page.visible;
                     if (forceShow) {
                         isVisible = true;
@@ -621,7 +611,7 @@ export default class Wizard extends Webform {
             this.redraw();
             return Promise.resolve();
         }
-        return Promise.reject('Page not found');
+        return Promise.reject(this.t('pageNotFound'));
     }
     pageFieldLogic(page) {
         if (this.pages?.[page]) {
@@ -674,7 +664,33 @@ export default class Wizard extends Webform {
     getPreviousPage() {
         return this.page - 1;
     }
+    mergeDefaultsFromSchema(data) {
+        const components = this.form?.components;
+        if (!components || !data || this.options?.readOnly) {
+            return;
+        }
+        eachComponent(components, (component, _path, _c, _parent, compPaths) => {
+            if (!component?.key ||
+                component.type === 'button' ||
+                component.persistent === 'client-only' ||
+                !component.hasOwnProperty('clearOnHide') ||
+                component.clearOnHide !== false ||
+                !component.hasOwnProperty('defaultValue')) {
+                return;
+            }
+            const modelType = getModelType(component);
+            if (modelType === 'none' || modelType === 'content' || component.input === false) {
+                return;
+            }
+            const dataPath = compPaths?.dataPath || component.key;
+            if (!dataPath || _.get(data, dataPath) != null) {
+                return;
+            }
+            _.set(data, dataPath, component.defaultValue);
+        }, true);
+    }
     beforeSubmit() {
+        this.mergeDefaultsFromSchema(this.data);
         const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
             this.triggerButtonCaptcha(page);
@@ -820,9 +836,7 @@ export default class Wizard extends Webform {
                 key: 'page1',
                 components: this.component.components,
             };
-            this.component.components = [
-                newPage,
-            ];
+            this.component.components = [newPage];
             this.originalComponents.push(_.clone(newPage));
         }
     }
@@ -833,7 +847,8 @@ export default class Wizard extends Webform {
         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) {
@@ -865,10 +880,7 @@ export default class Wizard extends Webform {
     }
     isClickable(page, index) {
         return (this.page !== index &&
-            firstNonNil([
-                _.get(page, 'breadcrumbClickable'),
-                this.options.breadcrumbSettings.clickable,
-            ]));
+            firstNonNil([_.get(page, 'breadcrumbClickable'), this.options.breadcrumbSettings.clickable]));
     }
     hasButton(name, nextPage = this.getNextPage()) {
         // get page options with global options as default values

package/lib/mjs/WizardBuilder.js

@@ -18,9 +18,7 @@ export default class WizardBuilder extends WebformBuilder {
         options.display = 'wizard';
         super(element, options);
         this._form = {
-            components: [
-                this.getPageConfig(1),
-            ],
+            components: [this.getPageConfig(1)],
         };
         this.page = 0;
         // Need to create a component order for each group.
@@ -101,9 +99,7 @@ export default class WizardBuilder extends WebformBuilder {
         }
         if (this.pages.length === 0) {
             const components = this._form.components.filter((component) => component.type !== 'button');
-            this._form.components = [
-                this.getPageConfig(1, components),
-            ];
+            this._form.components = [this.getPageConfig(1, components)];
         }
         else {
             const components = this._form.components.filter((component) => component.type !== 'button' || component.action !== 'submit');
@@ -154,9 +150,7 @@ export default class WizardBuilder extends WebformBuilder {
             page.parentNode.dragInfo = { index };
         });
         if (this.dragulaLib) {
-            this.navigationDragula = this.dragulaLib([
-                this.element.querySelector('.wizard-pages'),
-            ], {
+            this.navigationDragula = this.dragulaLib([this.element.querySelector('.wizard-pages')], {
                 moves: (el) => !el.classList.contains('wizard-add-page'),
                 accepts: (el, target, source, sibling) => (sibling ? true : false),
             }).on('drop', this.onReorder.bind(this));
@@ -187,11 +181,7 @@ export default class WizardBuilder extends WebformBuilder {
         this.webform.setForm({
             display: 'form',
             type: 'form',
-            components: page
-                ? [
-                    page,
-                ]
-                : [],
+            components: page ? [page] : [],
             controller: this._form?.controller || '',
         }, { keepAsReference: true });
         return this.redraw();
@@ -225,7 +215,7 @@ export default class WizardBuilder extends WebformBuilder {
         const isSiblingAnAddPageButton = sibling?.classList.contains('wizard-add-page');
         // We still can paste before Add Page button
         if (!element.dragInfo || (sibling && !sibling.dragInfo && !isSiblingAnAddPageButton)) {
-            console.warn('There is no Drag Info available for either dragged or sibling element');
+            console.warn(this.t('noDragInfoError'));
             return;
         }
         const oldPosition = element.dragInfo.index;

package/lib/mjs/addons/PasswordStrength/PasswordStrengthAddon.form.js

@@ -8,9 +8,7 @@ export default [
         enableRowGroups: false,
         initEmpty: false,
         tableView: false,
-        defaultValue: [
-            {},
-        ],
+        defaultValue: [{}],
         key: 'levels',
         type: 'editgrid',
         input: true,
@@ -121,9 +119,7 @@ export default [
         enableRowGroups: false,
         initEmpty: false,
         tableView: false,
-        defaultValue: [
-            {},
-        ],
+        defaultValue: [{}],
         key: 'rulesSettings',
         type: 'datagrid',
         input: true,

package/lib/mjs/addons/PasswordStrength/PasswordStrengthAddon.js

@@ -4,9 +4,7 @@ import PasswordStrengthEditForm from './PasswordStrengthAddon.form';
 export default class PasswordStrengthAddon extends FormioAddon {
     static get info() {
         return {
-            supportedComponents: [
-                'password',
-            ],
+            supportedComponents: ['password'],
             name: 'passwordStrength',
             components: PasswordStrengthEditForm,
             label: 'Password Strength',
@@ -166,9 +164,7 @@ export default class PasswordStrengthAddon extends FormioAddon {
         return this.component.sanitize(view);
     }
     checkBlackList(value) {
-        const blackList = [
-            ...this.settings.blackList,
-        ];
+        const blackList = [...this.settings.blackList];
         let customBlacklistedWords = this.settings.customBlacklistedWords;
         if (customBlacklistedWords && typeof customBlacklistedWords === 'string') {
             customBlacklistedWords = this.evaluate(customBlacklistedWords, this.component.evalContext({ value }), 'values');
@@ -304,9 +300,7 @@ export default class PasswordStrengthAddon extends FormioAddon {
     constructor(settings, componentInstance) {
         super(settings, componentInstance);
         this._entropy = 0; // Set initial value of entropy
-        this.levels = [
-            ...(this.settings.levels || this.defaultSettings.levels),
-        ];
+        this.levels = [...(this.settings.levels || this.defaultSettings.levels)];
         this.levels.sort((a, b) => a.maxEntropy - b.maxEntropy); // Sort levels from the lowest one to the highest
         this.level = this.levels[0]; // Set currnt level to the lowest one
         this.maxEntropy = this.levels[this.levels.length - 1].maxEntropy; // Set maximal amount of security points based on the highest level

package/lib/mjs/addons/index.js

@@ -1,7 +1,5 @@
 import PasswordStrengthAddon from './PasswordStrength/PasswordStrengthAddon';
-export const editForms = [
-    PasswordStrengthAddon.info,
-].map(({ components, name, defaultSettings }) => ({
+export const editForms = [PasswordStrengthAddon.info].map(({ components, name, defaultSettings }) => ({
     type: 'form',
     key: 'settings',
     display: 'form',

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

@@ -539,10 +539,10 @@ declare class Component extends Element {
     /**
      * Uses the widget to determine the output string.
      * @param {any} value - The current value of the component.
-     * @param {any} options - The options for getValueAsString.
+     * @param {any} _options - The options for getValueAsString.
      * @returns {any|Array<any>} - The value as a string.
      */
-    getWidgetValueAsString(value: any, options: any): any | Array<any>;
+    getWidgetValueAsString(value: any, _options: any): any | Array<any>;
     /**
      * Returns the value of the component as a string.
      * @param {any} value - The value for this component.
@@ -942,9 +942,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.