@formio/js 5.6.1 → 5.7.0-api912.2

package/lib/mjs/PDF.js

@@ -13,10 +13,7 @@ const getIframeOrigin = (iframeElement) => {
 const isTrustedIframeMessage = (event, form) => {
     const iframeWindow = form?.iframeElement?.contentWindow;
     const iframeOrigin = form?.iframeElement && getIframeOrigin(form.iframeElement);
-    return Boolean(iframeWindow &&
-        iframeOrigin &&
-        event.source === iframeWindow &&
-        event.origin === iframeOrigin);
+    return Boolean(iframeWindow && iframeOrigin && event.source === iframeWindow && event.origin === iframeOrigin);
 };
 export default class PDF extends Webform {
     constructor(element, options) {
@@ -25,7 +22,9 @@ export default class PDF extends Webform {
         this.components = [];
     }
     init() {
+        this.options.pdfShell = true;
         super.init();
+        this.forwardRefreshEventsToIframe();
         // Handle an iframe submission.
         this.on('iframe-submission', (submission) => this.setValue(submission, {
             fromIframe: true,
@@ -56,6 +55,17 @@ export default class PDF extends Webform {
         // Re-emit pageEnd without the iframe- prefix for consumers tracking PDF scroll position.
         this.on('iframe-pageEnd', (data) => this.emit('pageEnd', data), true);
     }
+    // The iframe renders the components in its own realm with its own emitter, so an event they
+    // refresh on only reaches them across the bridge.
+    forwardRefreshEventsToIframe() {
+        const refreshEvents = new Set();
+        eachComponent(this.component.components, (component) => {
+            if (component.refreshOnEvent) {
+                refreshEvents.add(component.refreshOnEvent);
+            }
+        });
+        refreshEvents.forEach((event) => this.on(event, () => this.postMessage({ name: 'emit', data: event }), true));
+    }
     render() {
         this.submitButton = this.addComponent({
             disabled: this.form.disableWizardSubmit,
@@ -309,7 +319,13 @@ if (typeof window !== 'undefined') {
             if (eventData.compPath) {
                 const comp = form.getComponent(eventData.compPath);
                 if (comp) {
-                    comp.emit(eventData.name, eventData.data);
+                    // Emit component instance for focus/blur events to match payload of those events on other forms
+                    if (['focus', 'blur'].includes(eventData.name)) {
+                        comp.emit(eventData.name, comp);
+                    }
+                    else {
+                        comp.emit(eventData.name, eventData.data);
+                    }
                 }
             }
             else {

package/lib/mjs/PDFBuilder.d.ts

@@ -19,6 +19,7 @@ export default class PDFBuilder extends WebformBuilder {
                 file: boolean;
                 htmlelement: boolean;
                 signrequestsignature: boolean;
+                datasource: boolean;
             };
         };
         basic: boolean;

package/lib/mjs/PDFBuilder.js

@@ -46,6 +46,7 @@ export default class PDFBuilder extends WebformBuilder {
                     file: true,
                     htmlelement: true,
                     signrequestsignature: true,
+                    datasource: true,
                 },
             },
             basic: false,

package/lib/mjs/Webform.d.ts

@@ -293,8 +293,20 @@ declare class Webform extends NestedDataComponent {
     /**
      * Focus on selected component.
      * @param {string} key - The key of selected component.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
      */
-    focusOnComponent(key: string): void;
+    focusOnComponent(key: string, componentKey?: string | undefined): void;
+    /**
+     * Resolves the component that produced an error, to attach the error to it or to focus it from
+     * the error list. A checkbox with inputType 'radio' takes its `name` as its path, so several
+     * components can share `key`; the schema key of the component that produced the error tells them
+     * apart. The shared-path lookup is only consulted when `getComponent` picked another component,
+     * and only trusted when it finds the one with that schema key.
+     * @param {string} key - The path the error was reported at.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
+     * @returns {any} - The component that produced the error, if found.
+     */
+    getErrorComponent(key: string, componentKey?: string | undefined): any;
     /**
      * @returns {boolean} - Whether or not the draft submission is being edited
      */

package/lib/mjs/Webform.js

@@ -6,7 +6,7 @@ import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, eachComponent, } from './utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, eachComponent, resolveInstanceAtPath, } from './utils';
 // We need this here because dragula pulls in CustomEvent class that requires global to exist.
 if (typeof window !== 'undefined' && typeof window.global === 'undefined') {
     window.global = window;
@@ -979,16 +979,18 @@ export default class Webform extends NestedDataComponent {
         }
         this.loadRefs(this.alert, { errorRef: 'multiple' });
         if (this.refs.errorRef && this.refs.errorRef.length) {
-            this.refs.errorRef.forEach((el) => {
-                this.addEventListener(el, 'click', (e) => {
-                    const key = e.currentTarget.dataset.componentKey;
-                    this.focusOnComponent(key);
-                });
+            this.refs.errorRef.forEach((el, index) => {
+                // The Nth link renders the Nth error; a custom template that reorders or filters the list
+                // fails this check, and the link then resolves by its key alone.
+                const listItem = options?.errors?.[index];
+                const isLinkForListItem = !!listItem && listItem.keyOrPath === el.dataset.componentKey;
+                const componentKey = isLinkForListItem ? listItem.componentKey : undefined;
+                const focusOnLinkedComponent = (e) => this.focusOnComponent(e.currentTarget.dataset.componentKey, componentKey);
+                this.addEventListener(el, 'click', focusOnLinkedComponent);
                 this.addEventListener(el, 'keydown', (e) => {
                     if (e.keyCode === 13) {
                         e.preventDefault();
-                        const key = e.currentTarget.dataset.componentKey;
-                        this.focusOnComponent(key);
+                        focusOnLinkedComponent(e);
                     }
                 });
             });
@@ -998,16 +1000,36 @@ export default class Webform extends NestedDataComponent {
     /**
      * Focus on selected component.
      * @param {string} key - The key of selected component.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
      */
-    focusOnComponent(key) {
+    focusOnComponent(key, componentKey) {
         if (key) {
-            const component = this.getComponent(key);
+            const component = this.getErrorComponent(key, componentKey);
             if (component) {
                 component.focus();
                 component.scrollIntoView();
             }
         }
     }
+    /**
+     * Resolves the component that produced an error, to attach the error to it or to focus it from
+     * the error list. A checkbox with inputType 'radio' takes its `name` as its path, so several
+     * components can share `key`; the schema key of the component that produced the error tells them
+     * apart. The shared-path lookup is only consulted when `getComponent` picked another component,
+     * and only trusted when it finds the one with that schema key.
+     * @param {string} key - The path the error was reported at.
+     * @param {string} [componentKey] - The schema key of the component that produced the error, if known.
+     * @returns {any} - The component that produced the error, if found.
+     */
+    getErrorComponent(key, componentKey) {
+        const component = this.getComponent(key);
+        if (!componentKey || component?.component.key === componentKey) {
+            return component;
+        }
+        // GOTCHA(G-FJS06)
+        const componentWithKey = resolveInstanceAtPath(this.componentsMap, key, componentKey);
+        return componentWithKey?.component.key === componentKey ? componentWithKey : component;
+    }
     /**
      * @returns {boolean} - Whether or not the draft submission is being edited
      */
@@ -1041,23 +1063,23 @@ export default class Webform extends NestedDataComponent {
             return;
         }
         // Mark any components as invalid if in a custom message.
-        const componentErrors = {};
+        const errorsByComponent = new Map();
         errors.forEach((err) => {
             const path = getStringFromComponentPath(err.path) || err.context?.path || err.component?.key;
-            if (!componentErrors[path]) {
-                componentErrors[path] = [];
+            const component = path && this.getErrorComponent(path, err.component?.key);
+            if (!component) {
+                return;
             }
-            componentErrors[path].push(err);
+            if (!errorsByComponent.has(component)) {
+                errorsByComponent.set(component, []);
+            }
+            errorsByComponent.get(component).push(err);
         });
         // Iterate through all of our component errors and apply them to the components.
-        for (let path in componentErrors) {
-            const component = this.getComponent(path);
-            const errors = componentErrors[path];
-            if (component) {
-                component.serverErrors = errors.filter((err) => err.fromServer);
-                component.setCustomValidity(errors, true);
-            }
-        }
+        errorsByComponent.forEach((componentErrors, component) => {
+            component.serverErrors = componentErrors.filter((err) => err.fromServer);
+            component.setCustomValidity(componentErrors, true);
+        });
         const displayedErrors = [];
         if (errors.length) {
             errors = _.uniqBy(errors, (error) => [error.message, error.component?.id, error.context?.path].join());
@@ -1077,6 +1099,7 @@ export default class Webform extends NestedDataComponent {
                 return {
                     message: unescapeHTML(message),
                     keyOrPath: formattedKeyOrPath,
+                    componentKey: err.component?.key,
                 };
             };
             errors.forEach(({ message, context, fromServer, component }, index) => {
@@ -1090,7 +1113,7 @@ export default class Webform extends NestedDataComponent {
         // GOTCHA(G-FJS02)
         // Only paint the alert from a subform when the root won't double paint it to avoid a painful flicker
         if (this === this.root || !this.root?.submitted) {
-            this.root?.setAlert('danger', errorsList);
+            this.root?.setAlert('danger', errorsList, { errors: displayedErrors });
         }
         if (triggerEvent) {
             this.emit('error', errors);
@@ -1518,9 +1541,16 @@ export default class Webform extends NestedDataComponent {
         const translationsUrl = typeof this.options.i18n?.translationsUrl === 'string'
             ? this.options.i18n.translationsUrl
             : null;
+        // Translations can also live in a Form.io resource, one submission per language.
+        const languageResource = this.options.i18n?.resource;
+        const usesLanguageResource = Boolean(languageResource?.form);
         if (translationsUrl) {
             const url = this.sanitize(this.interpolate(translationsUrl, {}), this.shouldSanitizeValue);
-            Formio.makeStaticRequest(url, 'GET')
+            // Simple CORS GET: skip Content-Type / token so static hosts need no preflight.
+            Formio.makeStaticRequest(url, 'GET', null, {
+                headers: { Accept: 'application/json' },
+                noToken: true,
+            })
                 .then((response) => {
                 let languages = response;
                 try {
@@ -1547,6 +1577,27 @@ export default class Webform extends NestedDataComponent {
                 translationsLoadResolve();
             });
         }
+        else if (usesLanguageResource) {
+            const { form: resourceId, codeComponent, mapComponent } = languageResource;
+            const language = this.i18next?.originalLanguage || this.options.language;
+            const languageQuery = `data.${codeComponent}=${encodeURIComponent(language)}`;
+            // The resource is addressed by id, so it needs the /form/ route — the bare
+            // `{project}/{alias}` route resolves by path only and would 404 on an id.
+            const url = `${Formio.getProjectUrl()}/form/${resourceId}/submission?${languageQuery}&limit=1`;
+            Formio.makeStaticRequest(url, 'GET')
+                .then((submissions) => {
+                const translations = submissions?.[0]?.data?.[mapComponent];
+                // No submission for this language just leaves the form in its default language.
+                if (translations) {
+                    this.addLanguage(language, translations, true);
+                }
+                translationsLoadResolve();
+            })
+                .catch((err) => {
+                console.warn(err);
+                translationsLoadResolve();
+            });
+        }
         else {
             translationsLoadResolve();
         }

package/lib/mjs/Wizard.d.ts

@@ -112,7 +112,7 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
-    focusOnComponent(key: any): void | Promise<void>;
+    focusOnComponent(key: any, componentKey: any): void | Promise<void>;
     triggerButtonCaptcha(page: any): void;
 }
 declare namespace Wizard {

package/lib/mjs/Wizard.js

@@ -122,9 +122,15 @@ export default class Wizard extends Webform {
             { name: 'cancel', method: 'cancel' },
             { name: 'previous', method: 'prevPage' },
             { name: 'next', method: 'nextPage' },
-            { name: 'submit', method: 'submit', args: [false, {
+            {
+                name: 'submit',
+                method: 'submit',
+                args: [
+                    false,
+                    {
                         state: 'submitted',
-                    }],
+                    },
+                ],
             },
         ].forEach((button) => {
             if (this.hasButton(button.name)) {
@@ -1004,8 +1010,8 @@ export default class Wizard extends Webform {
     get errors() {
         return !this.isLastPage() && !this.submitted ? this.currentPage.errors : super.errors;
     }
-    focusOnComponent(key) {
-        const component = this.getComponent(key);
+    focusOnComponent(key, componentKey) {
+        const component = this.getErrorComponent(key, componentKey);
         if (component) {
             let topPanel = component.parent;
             while (!(topPanel.parent instanceof Wizard)) {
@@ -1015,11 +1021,11 @@ export default class Wizard extends Webform {
             if (pageIndex >= 0) {
                 const page = this.pages[pageIndex];
                 if (page && page !== this.currentPage) {
-                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key));
+                    return this.setPage(pageIndex).then(() => super.focusOnComponent(key, componentKey));
                 }
             }
         }
-        return super.focusOnComponent(key);
+        return super.focusOnComponent(key, componentKey);
     }
     triggerButtonCaptcha(page) {
         if (!page.components) {

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

@@ -2595,19 +2595,6 @@ export default class Component extends Element {
                 return Promise.resolve(editor);
             }
             else {
-                // Due to an issue with ckeditor not loading styles in the shadowdom (https://github.com/ckeditor/ckeditor5/issues/15824), we need to copy cke-styles to the shadowdom
-                let current = element;
-                while (current) {
-                    if (current instanceof ShadowRoot) {
-                        const ckeStyles = document.querySelector('style[data-cke="true"]');
-                        const clone = document.createElement('style');
-                        clone.setAttribute('data-cke', 'true');
-                        clone.textContent = ckeStyles.textContent;
-                        current.prepend(clone);
-                        break;
-                    }
-                    current = current.parentNode || current.host;
-                }
                 return ClassicEditor.create(element, settings).then((editor) => {
                     editor.model.document.on('change', () => onChange(editor.data.get()));
                     return editor;
@@ -2634,58 +2621,6 @@ export default class Component extends Element {
                     return Promise.reject();
                 }
                 this.quill = new Quill(element, isIEBrowser ? { ...settings, modules: {} } : settings);
-                const root = element.getRootNode();
-                if (root instanceof ShadowRoot && root.getSelection) {
-                    const sel = this.quill.selection;
-                    // 1. getNativeRange: read selection from shadowRoot instead of document
-                    sel.getNativeRange = () => {
-                        const shadowSelection = root.getSelection();
-                        if (shadowSelection == null || shadowSelection.rangeCount <= 0)
-                            return null;
-                        const nativeRange = shadowSelection.getRangeAt(0);
-                        if (nativeRange == null)
-                            return null;
-                        return sel.normalizeNative(nativeRange);
-                    };
-                    // 2. hasFocus: check shadowRoot.activeElement instead of document.activeElement
-                    sel.hasFocus = () => {
-                        return (root.activeElement === sel.root ||
-                            (root.activeElement != null && sel.root.contains(root.activeElement)));
-                    };
-                    // 3. setNativeRange: use shadowRoot's selection to add/remove ranges
-                    const origSetNativeRange = sel.setNativeRange.bind(sel);
-                    sel.setNativeRange = (startNode, startOffset, endNode, endOffset, force) => {
-                        // Delegate to original logic for the null case (blur)
-                        if (startNode == null) {
-                            origSetNativeRange(null);
-                            return;
-                        }
-                        if (!sel.hasFocus()) {
-                            sel.root.focus({ preventScroll: true });
-                        }
-                        const shadowSelection = root.getSelection();
-                        if (shadowSelection == null)
-                            return;
-                        const { native } = sel.getNativeRange() || {};
-                        endNode = endNode ?? startNode;
-                        endOffset = endOffset ?? startOffset;
-                        if (native == null ||
-                            force ||
-                            startNode !== native.startContainer ||
-                            startOffset !== native.startOffset ||
-                            endNode !== native.endContainer ||
-                            endOffset !== native.endOffset) {
-                            const range = document.createRange();
-                            range.setStart(startNode, startOffset);
-                            range.setEnd(endNode, endOffset);
-                            shadowSelection.removeAllRanges();
-                            shadowSelection.addRange(range);
-                        }
-                    };
-                    document.addEventListener('selectionchange', () => {
-                        sel.update();
-                    });
-                }
                 /** This block of code adds the [source] capabilities.  See https://codepen.io/anon/pen/ZyEjrQ */
                 const txtArea = document.createElement('textarea');
                 txtArea.setAttribute('class', 'quill-source-code');

package/lib/mjs/components/_classes/nested/NestedComponent.form.js

@@ -6,6 +6,19 @@ import Components from '../../Components';
  */
 export default function (...extend) {
     return Components.baseEditForm([
+        {
+            key: 'display',
+            components: [
+                {
+                    key: 'labelWidth',
+                    ignore: true,
+                },
+                {
+                    key: 'labelMargin',
+                    ignore: true,
+                },
+            ],
+        },
         {
             key: 'data',
             ignore: true,

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -826,6 +826,10 @@ export default class NestedComponent extends Field {
         // if no value is provided and noDefault flag, set empty value
         else if (flags.noDefault && component.allowData) {
             flags.resetValue = true;
+            //  Preserve the live value instead of wiping it, so client-side calculations that read it don't blank out.
+            if (component.component.persistent === 'client-only') {
+                return false;
+            }
             return component.setValue(component.emptyValue, flags);
         }
         else if ((!this.rootPristine || component.visible) &&

package/lib/mjs/components/content/editForm/Content.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/currency/editForm/Currency.edit.display.js

@@ -3,10 +3,30 @@ export default [
         key: 'inputMask',
         ignore: true,
     },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
     {
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/day/editForm/Day.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         weight: 15,
         type: 'checkbox',

package/lib/mjs/components/editgrid/EditGrid.d.ts

@@ -48,6 +48,7 @@ export default class EditGridComponent extends NestedArrayComponent {
     setVariableTypeComponents(): void;
     variableTypeComponentsIndexes: any[] | undefined;
     isOpen(editRow: any): boolean;
+    shouldBlockUnsavedOpenRows(): boolean;
     isComponentVisibleInSomeRow(component: any): any;
     visibleInHeader: any;
     flattenRowDataValue(dataValue: any): {};

package/lib/mjs/components/editgrid/EditGrid.js

@@ -310,6 +310,24 @@ export default class EditGridComponent extends NestedArrayComponent {
     isOpen(editRow) {
         return [EditRowState.New, EditRowState.Editing, EditRowState.Viewing].includes(editRow.state);
     }
+    shouldBlockUnsavedOpenRows() {
+        const openRows = this.editRows.filter((editRow) => this.isOpen(editRow));
+        if (!openRows.length) {
+            return false;
+        }
+        const isOnlyPristineOpenWhenEmptyRow = this.component.openWhenEmpty &&
+            openRows.length === 1 &&
+            openRows.every((row) => row.state === EditRowState.New) &&
+            openRows.every((row) => {
+                let isPristine = true;
+                eachComponent(row.components, (comp) => {
+                    isPristine =
+                        comp.type === 'form' ? _.isEqual(comp.emptyValue, comp.dataValue) : comp.pristine;
+                });
+                return isPristine;
+            });
+        return !isOnlyPristineOpenWhenEmptyRow;
+    }
     isComponentVisibleInSomeRow(component) {
         const rows = this.editRows;
         const savedStates = [EditRowState.Saved, EditRowState.Editing, EditRowState.Draft];
@@ -1070,7 +1088,7 @@ export default class EditGridComponent extends NestedArrayComponent {
             if (valid === null) {
                 editRow.errors.push({
                     type: 'error',
-                    message: this.t('componentInvalidRowValidation', { componentKey: this.key })
+                    message: this.t('componentInvalidRowValidation', { componentKey: this.key }),
                 });
             }
         }
@@ -1142,7 +1160,9 @@ export default class EditGridComponent extends NestedArrayComponent {
             }
             return false;
         }
-        else if (rowsEditing && this.saveEditMode && !this.component.openWhenEmpty) {
+        else if (rowsEditing &&
+            this.saveEditMode &&
+            (this.shouldBlockUnsavedOpenRows() || this.errors.length)) {
             this._errors = this.setCustomValidity(this.t(this.errorMessage('unsavedRowsError')), dirty);
             errors.push(...this._errors);
             return false;

package/lib/mjs/components/email/editForm/Email.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/fieldset/editForm/Fieldset.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/mjs/components/file/editForm/File.edit.file.js

@@ -290,7 +290,7 @@ export default [
         key: 'imageSize',
         label: 'Image Size',
         placeholder: '100',
-        tooltip: 'The image size, in square pixels, for previewing images.',
+        tooltip: 'The image size, in square pixels, for previewing images. If explicitly set, the frame of the component must be large enough to allow for the specified size.',
         weight: 40,
         clearOnHide: false,
         conditional: {

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

@@ -269,7 +269,7 @@ export default class FormComponent extends Component {
             return super.attach(element);
         }
         return super.attach(element).then(() => {
-            if (this.isSubFormLazyLoad() && !this.hasLoadedForm && !this.subFormLoading) {
+            if (this.isSubFormLazyLoad() && !this.subForm && !this.subFormLoading) {
                 this.createSubForm(true);
             }
             if (!this.subFormReady) {
@@ -366,6 +366,26 @@ export default class FormComponent extends Component {
         }
         return super.redraw();
     }
+    /**
+     * Get Row Index. Declared so the setter below does not shadow the inherited getter.
+     * @returns {number} - The row index.
+     */
+    get rowIndex() {
+        return super.rowIndex;
+    }
+    /**
+     * Set Row Index to row and pass it down to the subform so that its components
+     * regenerate their paths. Unlike NestedComponent, the subform is not part of
+     * this.components, so the row index has to be forwarded explicitly.
+     * @param {number} value - The row index.
+     * @returns {void}
+     */
+    set rowIndex(value) {
+        super.rowIndex = value;
+        if (this.subForm) {
+            this.subForm.rowIndex = value;
+        }
+    }
     /**
      * Pass everyComponent to subform.
      * @param {any[]} args - Arguments to pass through to the subform's everyComponent method.

package/lib/mjs/components/hidden/Hidden.d.ts

@@ -10,7 +10,6 @@ export default class HiddenComponent extends Input {
     };
     get inputInfo(): any;
     labelIsHidden(): boolean;
-    get emptyValue(): string;
     setValue(value: any, flags?: {}): boolean;
 }
 import Input from '../_classes/input/Input';

package/lib/mjs/components/hidden/Hidden.js

@@ -43,7 +43,7 @@ export default class HiddenComponent extends Input {
         return true;
     }
     get emptyValue() {
-        return '';
+        return null;
     }
     setValue(value, flags = {}) {
         return this.updateValue(value, flags);