@formio/js 5.4.4-api99.0 → 5.5.1-api99.0

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

@@ -18,9 +18,9 @@
  * MIT licensed
  */
 
-/*! @license DOMPurify 3.4.11 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.11/LICENSE */
+/*! @license DOMPurify 3.4.12 | (c) Cure53 and other contributors | Released under the Apache license 2.0 and Mozilla Public License 2.0 | github.com/cure53/DOMPurify/blob/3.4.12/LICENSE */
 
-/*! formiojs v5.4.4-api99.0 | https://unpkg.com/formiojs@5.4.4-api99.0/LICENSE.txt */
+/*! formiojs v5.5.1-api99.0 | https://unpkg.com/formiojs@5.5.1-api99.0/LICENSE.txt */
 
 /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
 

package/lib/cjs/Embed.js

@@ -500,7 +500,7 @@ Formio.formioReady = new Promise((ready, reject) => {
     _a._formioReady = ready;
     _a._formioReadyReject = reject;
 });
-Formio.version = '5.4.4-api99.0';
+Formio.version = '5.5.1-api99.0';
 // Create a report.
 Formio.Report = {
     create: (element, submission, options = {}) => __awaiter(void 0, void 0, void 0, function* () {

package/lib/cjs/Formio.js

@@ -11,7 +11,7 @@ const CDN_1 = __importDefault(require("./CDN"));
 const providers_1 = __importDefault(require("./providers"));
 sdk_1.Formio.cdn = new CDN_1.default();
 sdk_1.Formio.Providers = providers_1.default;
-sdk_1.Formio.version = '5.4.4-api99.0';
+sdk_1.Formio.version = '5.5.1-api99.0';
 CDN_1.default.defaultCDN = sdk_1.Formio.version.includes('rc')
     ? 'https://cdn.test-form.io'
     : 'https://cdn.form.io';

package/lib/cjs/PDF.js

@@ -59,6 +59,8 @@ class PDF extends Webform_1.default {
         });
         // Trigger when this form is ready.
         this.on('iframe-ready', () => this.iframeReadyResolve(), true);
+        // Re-emit pageEnd without the iframe- prefix for consumers tracking PDF scroll position.
+        this.on('iframe-pageEnd', (data) => this.emit('pageEnd', data), true);
     }
     render() {
         this.submitButton = this.addComponent({

package/lib/cjs/Wizard.js

@@ -129,7 +129,10 @@ class Wizard extends Webform_1.default {
             { name: 'cancel', method: 'cancel' },
             { name: 'previous', method: 'prevPage' },
             { name: 'next', method: 'nextPage' },
-            { name: 'submit', method: 'submit' },
+            { name: 'submit', method: 'submit', args: [false, {
+                        state: 'submitted',
+                    }],
+            },
         ].forEach((button) => {
             if (this.hasButton(button.name)) {
                 buttons[button.name] = button;
@@ -355,7 +358,7 @@ class Wizard extends Webform_1.default {
                 buttonElement.setAttribute('disabled', 'disabled');
                 this.setLoading(buttonElement, true);
                 // Call the button method, then re-enable the button.
-                this[button.method]()
+                this[button.method](...(button.args || []))
                     .then(() => {
                     buttonElement.removeAttribute('disabled');
                     this.setLoading(buttonElement, false);

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

@@ -196,7 +196,14 @@ declare class Component extends Element {
         tooltipClass: string;
         for: any;
     };
+    getFieldsetLegendData(): {
+        legendIds: string[];
+        legendLabels: string[];
+    };
     getFieldsetLegendIds(): string;
+    getViewAccessibleLabel(): string;
+    getFormattedViewAccessibleLabel(): string;
+    applyViewAccessibleAriaLabel(attributes?: {}): void;
     init(): void;
     /**
      * Disable this component.

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

@@ -530,17 +530,43 @@ class Component extends Element_1.default {
         }
         return label;
     }
-    getFieldsetLegendIds() {
+    getFieldsetLegendData() {
         var _a, _b;
         const legendIds = [];
+        const legendLabels = [];
         let currentParent = this.parent;
         while (currentParent) {
             if (((_a = currentParent.component) === null || _a === void 0 ? void 0 : _a.type) === 'fieldset' && ((_b = currentParent.component) === null || _b === void 0 ? void 0 : _b.legend)) {
                 legendIds.push(`l-${currentParent.id}-legend`);
+                legendLabels.push(this.t(currentParent.component.legend, { _userInput: true }));
             }
             currentParent = currentParent.parent;
         }
-        return legendIds.reverse().join(' ');
+        legendIds.reverse();
+        legendLabels.reverse();
+        return { legendIds, legendLabels };
+    }
+    getFieldsetLegendIds() {
+        return this.getFieldsetLegendData().legendIds.join(' ');
+    }
+    getViewAccessibleLabel() {
+        const { legendLabels } = this.getFieldsetLegendData();
+        if (legendLabels.length === 0) {
+            return '';
+        }
+        return legendLabels.join(', ');
+    }
+    getFormattedViewAccessibleLabel() {
+        const label = this.getViewAccessibleLabel();
+        return label ? this.getFormattedAttribute(label) : '';
+    }
+    applyViewAccessibleAriaLabel(attributes = {}) {
+        if ((this.options.readOnly || this.options.pdf) && !attributes['aria-label']) {
+            const viewAccessibleLabel = this.getFormattedViewAccessibleLabel();
+            if (viewAccessibleLabel) {
+                attributes['aria-label'] = viewAccessibleLabel;
+            }
+        }
     }
     init() {
         var _a;
@@ -2253,12 +2279,17 @@ class Component extends Element_1.default {
                     break;
                 }
                 case 'mergeComponentSchema': {
+                    const safeData = utils_1.default.escapeInterpolationDataStrings(data);
+                    const safeRow = utils_1.default.escapeInterpolationDataStrings(row);
+                    const safeResult = typeof result === 'string'
+                        ? lodash_1.default.escape(result)
+                        : utils_1.default.escapeInterpolationDataStrings(result);
                     const schema = this.evaluate(action.schemaDefinition, {
                         value: lodash_1.default.clone(this.getValue()),
-                        data,
-                        row,
+                        data: safeData,
+                        row: safeRow,
                         component: newComponent,
-                        result,
+                        result: safeResult,
                     }, 'schema');
                     lodash_1.default.assign(newComponent, schema);
                     if (!lodash_1.default.isEqual(this.component, newComponent)) {
@@ -3784,6 +3815,7 @@ class Component extends Element_1.default {
         if (this.disabled) {
             attributes.disabled = 'disabled';
         }
+        this.applyViewAccessibleAriaLabel(attributes);
         lodash_1.default.defaults(attributes, this.component.attributes);
         return {
             type: 'input',

package/lib/cjs/components/_classes/input/Input.js

@@ -47,6 +47,7 @@ class Input extends Multivalue_1.default {
         if (this.component.autocomplete) {
             attr.autocomplete = this.component.autocomplete;
         }
+        this.applyViewAccessibleAriaLabel(attr);
         lodash_1.default.defaults(attr, this.component.attributes);
         return {
             id: this.key,

package/lib/cjs/components/address/Address.d.ts

@@ -73,6 +73,8 @@ export default class AddressComponent extends ContainerComponent {
     onSelectAddress(address: any, element: any, index: any): void;
     addRow(): void;
     attach(element: any): Promise<void>;
+    googlePlacesCleanups: any[] | undefined;
+    autocompleterWidget: import("autocompleter").AutocompleteResult | undefined;
     addChildComponent(component: any): void;
     clearAddress(element: any, index: any): void;
     getDisplayValue(value?: any): any;

package/lib/cjs/components/address/Address.js

@@ -414,33 +414,28 @@ class AddressComponent extends Container_1.default {
             const target = shadowRoot.querySelector('.formio-form-wrapper');
             target.appendChild(container);
         }
-        else {
-            container = document.createElement('div');
-            document.body.appendChild(container);
-        }
         this.searchInput.forEach((element, index) => {
             if (!this.builderMode && element && this.provider) {
                 if (this.component.provider === 'google') {
-                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this));
+                    this.googlePlacesCleanups = [];
+                    this.provider.attachAutocomplete(element, index, this.onSelectAddress.bind(this))
+                        .then((cleanup) => {
+                        if (typeof cleanup === 'function') {
+                            this.googlePlacesCleanups.push(cleanup);
+                        }
+                    });
                 }
                 else {
-                    (0, autocompleter_1.default)({
-                        input: element,
-                        container,
-                        debounceWaitMs: 300,
-                        fetch: (text, update) => {
+                    this.autocompleterWidget = (0, autocompleter_1.default)(Object.assign(Object.assign({ input: element }, (container ? { container } : {})), { debounceWaitMs: 300, fetch: (text, update) => {
                             const query = text;
                             this.provider.search(query).then(update);
-                        },
-                        render: (address) => {
+                        }, render: (address) => {
                             const div = this.ce('div');
                             div.textContent = this.getDisplayValue(address);
                             return div;
-                        },
-                        onSelect: (address) => {
+                        }, onSelect: (address) => {
                             this.onSelectAddress(address, element, index);
-                        },
-                    });
+                        } }));
                 }
                 this.addEventListener(element, 'blur', () => {
                     if (!element) {
@@ -515,6 +510,16 @@ class AddressComponent extends Container_1.default {
         }
         return result;
     }
+    detach() {
+        if (this.autocompleterWidget && typeof this.autocompleterWidget.destroy === 'function') {
+            this.autocompleterWidget.destroy();
+        }
+        ;
+        (this.googlePlacesCleanups || []).forEach((cleanup) => {
+            cleanup();
+        });
+        super.detach();
+    }
     addChildComponent(component) {
         component.customConditional = ChildConditional;
     }

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

@@ -527,6 +527,18 @@ class EditGridComponent extends NestedArrayComponent_1.default {
         else {
             const flattenedComponents = this.flattenComponents(rowIndex);
             const rowTemplate = this.rowTemplate;
+            lodash_1.default.each(flattenedComponents, (instance) => {
+                const needsItemLoad = instance &&
+                    instance.itemsFromUrl &&
+                    !instance.editGridItemsRequested &&
+                    !instance.isEmpty(instance.dataValue) &&
+                    lodash_1.default.isEmpty(instance.selectData);
+                if (needsItemLoad) {
+                    instance.editGridItemsRequested = true;
+                    instance.triggerUpdate(null, true);
+                    instance.itemsLoaded.then(() => this.redraw());
+                }
+            });
             return this.renderString(rowTemplate, {
                 row: dataValue[rowIndex] || {},
                 data: this.data,
@@ -977,7 +989,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 if (this.inlineEditMode) {
                     return;
                 }
-                const editRow = this.editRows[rowIndex];
+                const editRow = this.editRows[this.type === 'datatable' ? 0 : rowIndex];
                 if (editRow) {
                     this.processRow('checkData', null, Object.assign(Object.assign({}, flags), { changed }), editRow.data, editRow.components);
                     this.validateRow(editRow, false, false);

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

@@ -288,7 +288,16 @@ class FormComponent extends Component_1.default {
                     }, this.text(this.formObj.title)));
                     return;
                 }
-                this.setContent(element, this.render());
+                // element is already this component's wrapper — inject the sub-form directly
+                // instead of re-rendering the component into itself (which duplicates the id).
+                let content;
+                if (this.component.modalEdit) {
+                    content = this.render();
+                }
+                else {
+                    content = this.subForm ? this.subForm.render() : this.renderTemplate('loading');
+                }
+                this.setContent(element, content);
                 const postAttach = () => {
                     if (!this.builderMode && this.component.modalEdit) {
                         const modalShouldBeOpened = this.componentModal ? this.componentModal.isOpened : false;

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

@@ -9,99 +9,15 @@ declare const _default: ({
         custom?: undefined;
     };
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
-    reorder?: undefined;
-    components?: undefined;
-    dataSrc?: undefined;
-    authenticate?: undefined;
-    template?: undefined;
-    valueProperty?: undefined;
-    clearOnHide?: undefined;
-    lazyLoad?: undefined;
-    skipMerge?: undefined;
-    refreshOn?: undefined;
-    onSetItems?: undefined;
-    onChange?: undefined;
-    placeholder?: undefined;
-    validate?: undefined;
-    delimiter?: undefined;
-    requireDecimal?: undefined;
-    encrypted?: undefined;
-    rows?: undefined;
-    mask?: undefined;
-    tableView?: undefined;
-    alwaysEnabled?: undefined;
-} | {
-    type: string;
-    weight: number;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    conditional: {
-        json: {
-            '===': (string | {
-                var: string;
-            })[];
-            and?: undefined;
-            in?: undefined;
-        };
-    };
-    data?: undefined;
-    as?: undefined;
-    editor?: undefined;
+    conditional?: undefined;
     defaultValue?: undefined;
-    description?: undefined;
-    reorder?: undefined;
-    components?: undefined;
-    dataSrc?: undefined;
-    authenticate?: undefined;
-    template?: undefined;
-    valueProperty?: undefined;
-    clearOnHide?: undefined;
-    lazyLoad?: undefined;
-    skipMerge?: undefined;
-    refreshOn?: undefined;
-    onSetItems?: undefined;
-    onChange?: undefined;
-    placeholder?: undefined;
-    validate?: undefined;
-    delimiter?: undefined;
-    requireDecimal?: undefined;
-    encrypted?: undefined;
-    rows?: undefined;
-    mask?: undefined;
-    tableView?: undefined;
-    alwaysEnabled?: undefined;
-} | {
-    type: string;
-    as: string;
-    editor: string;
-    weight: number;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    defaultValue: {};
-    conditional: {
-        json: {
-            '===': (string | {
-                var: string;
-            })[];
-            and?: undefined;
-            in?: undefined;
-        };
-    };
-    data?: undefined;
-    description?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -303,8 +219,8 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     skipMerge?: undefined;
@@ -412,8 +328,8 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     placeholder?: undefined;
@@ -443,11 +359,11 @@ declare const _default: ({
         url?: undefined;
         custom?: undefined;
     };
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
@@ -475,11 +391,52 @@ declare const _default: ({
     placeholder: string;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
+    description?: undefined;
+    conditional?: undefined;
     defaultValue?: undefined;
+    reorder?: undefined;
+    components?: undefined;
+    dataSrc?: undefined;
+    authenticate?: undefined;
+    template?: undefined;
+    valueProperty?: undefined;
+    clearOnHide?: undefined;
+    lazyLoad?: undefined;
+    skipMerge?: undefined;
+    refreshOn?: undefined;
+    onSetItems?: undefined;
+    onChange?: undefined;
+    validate?: undefined;
+    delimiter?: undefined;
+    requireDecimal?: undefined;
+    encrypted?: undefined;
+    rows?: undefined;
+    mask?: undefined;
+    tableView?: undefined;
+    alwaysEnabled?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    tooltip: string;
+    weight: number;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            and?: undefined;
+            in?: undefined;
+        };
+    };
+    data?: undefined;
+    as?: undefined;
+    editor?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -492,6 +449,7 @@ declare const _default: ({
     refreshOn?: undefined;
     onSetItems?: undefined;
     onChange?: undefined;
+    placeholder?: undefined;
     validate?: undefined;
     delimiter?: undefined;
     requireDecimal?: undefined;
@@ -710,8 +668,8 @@ declare const _default: ({
     };
     data?: undefined;
     as?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -759,8 +717,8 @@ declare const _default: ({
     };
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     authenticate?: undefined;
@@ -831,10 +789,10 @@ declare const _default: ({
     defaultValue: boolean;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -927,10 +885,10 @@ declare const _default: ({
     weight: number;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -973,8 +931,8 @@ declare const _default: ({
     data?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1003,11 +961,11 @@ declare const _default: ({
     label: string;
     tooltip: string;
     data?: undefined;
-    conditional?: undefined;
     as?: undefined;
     editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    conditional?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1040,8 +998,8 @@ declare const _default: ({
     tooltip: string;
     defaultValue: {};
     data?: undefined;
-    conditional?: undefined;
     description?: undefined;
+    conditional?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1069,15 +1027,15 @@ declare const _default: ({
     onChange(context: any): void;
     data?: undefined;
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
+    description?: undefined;
     conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
     defaultValue?: undefined;
-    description?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1150,14 +1108,14 @@ declare const _default: ({
     };
     data?: undefined;
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
-    as?: undefined;
-    editor?: undefined;
-    defaultValue?: undefined;
     description?: undefined;
+    defaultValue?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;
@@ -1184,15 +1142,15 @@ declare const _default: ({
     onChange(context: any): void;
     data?: undefined;
     type?: undefined;
+    as?: undefined;
+    editor?: undefined;
     weight?: undefined;
     input?: undefined;
     label?: undefined;
     tooltip?: undefined;
+    description?: undefined;
     conditional?: undefined;
-    as?: undefined;
-    editor?: undefined;
     defaultValue?: undefined;
-    description?: undefined;
     reorder?: undefined;
     components?: undefined;
     dataSrc?: undefined;

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

@@ -62,48 +62,6 @@ exports.default = [
             ],
         },
     },
-    {
-        type: 'textfield',
-        weight: 10,
-        input: true,
-        key: 'indexeddb.database',
-        label: 'Database name',
-        tooltip: 'The name of the indexeddb database.',
-        conditional: {
-            json: {
-                '===': [{ var: 'data.dataSrc' }, 'indexeddb'],
-            },
-        },
-    },
-    {
-        type: 'textfield',
-        input: true,
-        key: 'indexeddb.table',
-        label: 'Table name',
-        weight: 16,
-        tooltip: 'The name of table in the indexeddb database.',
-        conditional: {
-            json: {
-                '===': [{ var: 'data.dataSrc' }, 'indexeddb'],
-            },
-        },
-    },
-    {
-        type: 'textarea',
-        as: 'json',
-        editor: 'ace',
-        weight: 18,
-        input: true,
-        key: 'indexeddb.filter',
-        label: 'Row Filter',
-        tooltip: 'Filter table items that match the object.',
-        defaultValue: {},
-        conditional: {
-            json: {
-                '===': [{ var: 'data.dataSrc' }, 'indexeddb'],
-            },
-        },
-    },
     {
         type: 'textarea',
         as: 'json',

package/lib/cjs/components/textarea/TextArea.js

@@ -62,6 +62,9 @@ class TextAreaComponent extends TextField_1.default {
         info.content = value;
         if ((this.options.readOnly || this.disabled) && !this.isHtmlRenderMode()) {
             const elementStyle = this.info.attr.style || '';
+            const viewAccessibleLabel = (this.options.readOnly || this.options.pdf)
+                ? this.getFormattedViewAccessibleLabel()
+                : '';
             const children = `
         <div ${this._referenceAttributeName}="input"
           class="formio-editor-read-only-content"
@@ -69,6 +72,7 @@ class TextAreaComponent extends TextField_1.default {
           role="textbox"
           aria-multiline="true"
           aria-readonly="true"
+          ${viewAccessibleLabel ? `aria-label='${viewAccessibleLabel}'` : ''}
         >
         </div>`;
             return this.renderTemplate('well', {