@formio/js 5.6.1 → 5.7.0

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

@@ -5,10 +5,30 @@ exports.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/cjs/components/day/editForm/Day.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         weight: 15,
         type: 'checkbox',

package/lib/cjs/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/cjs/components/editgrid/EditGrid.js

@@ -315,6 +315,24 @@ class EditGridComponent extends NestedArrayComponent_1.default {
     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;
+                (0, utils_1.eachComponent)(row.components, (comp) => {
+                    isPristine =
+                        comp.type === 'form' ? lodash_1.default.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];
@@ -1079,7 +1097,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             if (valid === null) {
                 editRow.errors.push({
                     type: 'error',
-                    message: this.t('componentInvalidRowValidation', { componentKey: this.key })
+                    message: this.t('componentInvalidRowValidation', { componentKey: this.key }),
                 });
             }
         }
@@ -1152,7 +1170,9 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
             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/cjs/components/email/editForm/Email.edit.display.js

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

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

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

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

@@ -295,7 +295,7 @@ exports.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/cjs/components/form/Form.js

@@ -273,7 +273,7 @@ class FormComponent extends Component_1.default {
             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) {
@@ -372,6 +372,26 @@ class FormComponent extends Component_1.default {
         }
         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/cjs/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/cjs/components/hidden/Hidden.js

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

package/lib/cjs/components/hidden/editForm/Hidden.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/cjs/components/html/editForm/HTML.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/cjs/components/number/Number.d.ts

@@ -51,5 +51,16 @@ export default class NumberComponent extends Input {
     focus(): void;
     getMaskedValue(value: any): any;
     getValueAsString(value: any, options: any): any;
+    setErrorClasses(elements: any, dirty: any, hasErrors: any, hasMessages: any, element?: any): void;
+    /**
+     * Points the invalid inputs at the rendered error messages through `aria-describedby`, so a
+     * screen reader announces what is wrong with the value. The base class only marks the input
+     * `aria-invalid`, which says the value was rejected but not why.
+     * @param {Array<HTMLElement>} elements - The input elements the errors apply to.
+     * @param {boolean} hasErrors - TRUE if the component currently has errors.
+     * @returns {void}
+     */
+    linkErrorMessages(elements: Array<HTMLElement>, hasErrors: boolean): void;
+    errorMessageIds: any[] | undefined;
 }
 import Input from '../_classes/input/Input';

package/lib/cjs/components/number/Number.js

@@ -271,5 +271,40 @@ class NumberComponent extends Input_1.default {
             element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));
         });
     }
+    setErrorClasses(elements, dirty, hasErrors, hasMessages, element = this.element) {
+        super.setErrorClasses(elements, dirty, hasErrors, hasMessages, element);
+        this.linkErrorMessages(elements, hasErrors);
+    }
+    /**
+     * Points the invalid inputs at the rendered error messages through `aria-describedby`, so a
+     * screen reader announces what is wrong with the value. The base class only marks the input
+     * `aria-invalid`, which says the value was rejected but not why.
+     * @param {Array<HTMLElement>} elements - The input elements the errors apply to.
+     * @param {boolean} hasErrors - TRUE if the component currently has errors.
+     * @returns {void}
+     */
+    linkErrorMessages(elements, hasErrors) {
+        var _a;
+        const previousIds = this.errorMessageIds || [];
+        const renderedMessages = Array.from(((_a = this.refs.messageContainer) === null || _a === void 0 ? void 0 : _a.children) || []);
+        const errorIds = hasErrors ? renderedMessages.map((message) => message.id).filter(Boolean) : [];
+        const invalidInputs = hasErrors ? Array.from(elements || []) : [];
+        const isOwnErrorId = (id) => previousIds.includes(id) || errorIds.includes(id);
+        Array.from(this.refs.input || []).forEach((input) => {
+            const describedBy = (input.getAttribute('aria-describedby') || '')
+                .split(' ')
+                .filter((id) => id && !isOwnErrorId(id));
+            if (invalidInputs.includes(input)) {
+                describedBy.push(...errorIds);
+            }
+            if (describedBy.length) {
+                input.setAttribute('aria-describedby', describedBy.join(' '));
+            }
+            else {
+                input.removeAttribute('aria-describedby');
+            }
+        });
+        this.errorMessageIds = errorIds;
+    }
 }
 exports.default = NumberComponent;

package/lib/cjs/components/number/editForm/Number.edit.display.js

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

package/lib/cjs/components/password/editForm/Password.edit.display.js

@@ -13,4 +13,16 @@ exports.default = [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
 ];

package/lib/cjs/components/phonenumber/PhoneNumber.form.js

@@ -23,6 +23,14 @@ function default_1(...extend) {
                     key: 'showCharCount',
                     ignore: true,
                 },
+                {
+                    key: 'widget.type',
+                    ignore: true,
+                },
+                {
+                    key: 'widget',
+                    ignore: true,
+                },
             ],
         },
         {

package/lib/cjs/components/select/editForm/Select.edit.data.d.ts

@@ -1057,6 +1057,7 @@ declare const _default: ({
     alwaysEnabled?: undefined;
 } | {
     key: string;
+    type: string;
     conditional: {
         json: {
             and: ({
@@ -1107,7 +1108,6 @@ declare const _default: ({
         };
     };
     data?: undefined;
-    type?: undefined;
     as?: undefined;
     editor?: undefined;
     weight?: undefined;

package/lib/cjs/components/select/editForm/Select.edit.data.js

@@ -625,6 +625,7 @@ exports.default = [
     },
     {
         key: 'selectData',
+        type: 'hidden',
         conditional: {
             json: {
                 and: [

package/lib/cjs/components/tabs/editForm/Tabs.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/cjs/components/textarea/editForm/TextArea.edit.display.js

@@ -14,10 +14,22 @@ exports.default = [
         key: 'allowMultipleMasks',
         ignore: true,
     },
+    {
+        key: 'inputMasks',
+        ignore: true,
+    },
     {
         key: 'mask',
         ignore: true,
     },
+    {
+        key: 'widget.type',
+        ignore: true,
+    },
+    {
+        key: 'widget',
+        ignore: true,
+    },
     {
         type: 'number',
         input: true,

package/lib/cjs/components/url/editForm/Url.edit.display.js

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

package/lib/cjs/components/well/editForm/Well.edit.display.js

@@ -5,6 +5,14 @@ exports.default = [
         key: 'labelPosition',
         ignore: true,
     },
+    {
+        key: 'labelWidth',
+        ignore: true,
+    },
+    {
+        key: 'labelMargin',
+        ignore: true,
+    },
     {
         key: 'placeholder',
         ignore: true,

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.6.1"
+    "version": "5.7.0"
 }

package/lib/cjs/utils/utils.js

@@ -474,9 +474,7 @@ function setActionProperty(component, action, result, row, data, instance) {
         case 'string': {
             const safeData = escapeInterpolationDataStrings(data);
             const safeRow = escapeInterpolationDataStrings(row);
-            const safeResult = typeof result === 'string'
-                ? lodash_1.default.escape(result)
-                : escapeInterpolationDataStrings(result);
+            const safeResult = typeof result === 'string' ? lodash_1.default.escape(result) : escapeInterpolationDataStrings(result);
             const evalData = {
                 data: safeData,
                 row: safeRow,
@@ -1777,21 +1775,11 @@ function getScreenReaderMessage(component, type, value) {
             }
         }
     }
-    else if (typeof value === 'number' || value === null) {
-        if (value != null && value !== '') {
-            if (!isNaN(max) && value > max) {
-                message += `Number cannot be greater than ${max}. `;
-            }
-            if (!isNaN(min) && value < min) {
-                message += `Number cannot be less than ${min}.`;
-            }
-        }
-        else {
-            if (!isNaN(min))
-                message += `Minimum value ${min}. `;
-            if (!isNaN(max))
-                message += `Maximum value ${max}. `;
-        }
+    else if (value === null) {
+        if (!isNaN(min))
+            message += `Minimum value ${min}. `;
+        if (!isNaN(max))
+            message += `Maximum value ${max}. `;
     }
     return message.trim();
 }

package/lib/mjs/Embed.js

@@ -14,7 +14,7 @@ export class Formio {
         Formio._formioReady = ready;
         Formio._formioReadyReject = reject;
     });
-    static version = '5.6.1';
+    static version = '5.7.0';
     static setLicense(license, norecurse = false) {
         Formio.license = license;
         if (!norecurse && Formio.FormioClass) {
@@ -332,7 +332,10 @@ export class Formio {
             };
         });
         const id = Formio.config.id || `formio-${Math.random().toString(36).substring(7)}`;
-        const hasQuillComponent = (components = []) => {
+        // Quill and CKEditor cannot run in the shadow DOM (https://github.com/quilljs/quill/issues/2021,
+        // https://github.com/ckeditor/ckeditor5/issues/15824), so fall back to the light DOM when the
+        // form contains one of them.
+        const hasShadowIncompatibleEditor = (components) => {
             if (!Array.isArray(components)) {
                 return false;
             }
@@ -340,16 +343,38 @@ export class Formio {
                 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 || []))));
+                if (component.type === 'textarea') {
+                    // A textarea with `wysiwyg` set and no explicit `editor` defaults to CKEditor at render time.
+                    const editor = component.editor || (component.wysiwyg ? 'ckeditor' : '');
+                    if (['quill', 'ckeditor'].includes(editor)) {
+                        return true;
+                    }
+                }
+                const children = (component.components || []).concat(component.columns?.flatMap((column) => column.components || []) || [], component.rows?.flatMap((row) => row.flatMap((cell) => cell.components || [])) || []);
+                return hasShadowIncompatibleEditor(children);
             });
         };
-        const disableShadowForQuill = hasQuillComponent(Formio.config.form?.components);
+        const shouldSkipShadowDom = async () => {
+            if (Formio.config.form?.components) {
+                return hasShadowIncompatibleEditor(Formio.config.form.components);
+            }
+            const formUrl = Formio.config.src || (typeof Formio.config.form === 'string' ? Formio.config.form : '');
+            if (!formUrl) {
+                return false;
+            }
+            try {
+                const response = await fetch(formUrl);
+                if (!response.ok) {
+                    throw new Error(`Request failed with status ${response.status}`);
+                }
+                const form = await response.json();
+                return hasShadowIncompatibleEditor(form?.components);
+            }
+            catch (err) {
+                Formio.debug('Could not load the form to check for shadow DOM support', err);
+                return false;
+            }
+        };
         // Create a new wrapper and add the element inside of a new wrapper.
         let wrapper = Formio.createElement('div', {
             id: `${id}-wrapper`,
@@ -358,20 +383,8 @@ 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');
-        }
+            typeof wrapper.attachShadow === 'function' &&
+            !(await shouldSkipShadowDom());
         element.parentNode.removeChild(element);
         wrapper.appendChild(element);
         // If this is inside of shadow dom, then we need to add the styles and scripts to the shadow dom.

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} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string } | { resource: { form: string, codeComponent: string, mapComponent: string } }} [i18n] - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
  * @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.
@@ -198,12 +198,18 @@ export type FormOptions = {
      */
     noAlerts?: boolean | undefined;
     /**
-     * - The translation file for this rendering.
+     * - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
      */
     i18n?: {
         [key: string]: string;
     } | {
         translationsUrl: string;
+    } | {
+        resource: {
+            form: string;
+            codeComponent: string;
+            mapComponent: string;
+        };
     } | undefined;
     /**
      * - Custom logic for creation of elements.

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} | { translationsUrl: string }} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string} | { translationsUrl: string } | { resource: { form: string, codeComponent: string, mapComponent: string } }} [i18n] - The translations for this rendering: inline, a hosted file, or a Form.io language resource (one submission per language).
  * @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.

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.6.1';
+FormioCore.version = '5.7.0';
 CDN.defaultCDN = FormioCore.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/mjs/PDF.d.ts

@@ -2,6 +2,7 @@ export default class PDF extends Webform {
     constructor(element: any, options: any);
     components: any[];
     init(): void;
+    forwardRefreshEventsToIframe(): void;
     render(): any;
     submitButton: any;
     attachComponents(element: any, components: any, container: any): Promise<void>;