@formio/js 5.0.0-dev.5661.22d0f16 → 5.0.0-dev.5664.50b8944

package/lib/mjs/components/day/fixtures/comp7.js

@@ -0,0 +1,107 @@
+export default {
+    components: [
+        {
+            type: 'textfield',
+            key: 'firstName',
+            label: 'First Name',
+            placeholder: 'Enter your first name',
+            input: true
+        }, {
+            "label": "Day",
+            "placeholder": "Day",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "day2",
+            "type": "textfield",
+            "input": true
+        }, {
+            "label": "Month",
+            "placeholder": "Month",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "month2",
+            "type": "textfield",
+            "input": true
+        }, {
+            "label": "Year",
+            "placeholder": "Year",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "year2",
+            "type": "textfield",
+            "input": true
+        },
+        {
+            "label": "Day",
+            "hideInputLabels": false,
+            "inputsLabelPosition": "top",
+            "useLocaleSettings": false,
+            "tableView": false,
+            "fields": {
+                "day": {
+                    "placeholder": "Day",
+                    "hide": false
+                },
+                "month": {
+                    "type": "number",
+                    "placeholder": "Month",
+                    "hide": false
+                },
+                "year": {
+                    "placeholder": "Year",
+                    "hide": false
+                }
+            },
+            "key": "day",
+            "type": "day",
+            "input": true,
+            "defaultValue": "00/00/0000"
+        },
+        {
+            type: 'textfield',
+            key: 'lastName',
+            label: 'Last Name',
+            placeholder: 'Enter your last name',
+            input: true
+        },
+        {
+            type: 'survey',
+            key: 'questions',
+            label: 'Survey',
+            values: [
+                {
+                    label: 'Great',
+                    value: 'great'
+                },
+                {
+                    label: 'Good',
+                    value: 'good'
+                },
+                {
+                    label: 'Poor',
+                    value: 'poor'
+                }
+            ],
+            questions: [
+                {
+                    label: 'How would you rate the Form.io platform?',
+                    value: 'howWouldYouRateTheFormIoPlatform'
+                },
+                {
+                    label: 'How was Customer Support?',
+                    value: 'howWasCustomerSupport'
+                },
+                {
+                    label: 'Overall Experience?',
+                    value: 'overallExperience'
+                }
+            ]
+        },
+        {
+            type: 'button',
+            action: 'submit',
+            label: 'Submit',
+            theme: 'primary'
+        }
+    ]
+};

package/lib/mjs/components/day/fixtures/index.d.ts

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };

package/lib/mjs/components/day/fixtures/index.js

@@ -4,4 +4,5 @@ import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
-export { comp1, comp2, comp3, comp4, comp5, comp6 };
+import comp7 from './comp7';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };

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

@@ -83,7 +83,7 @@ export default class EditGridComponent extends NestedArrayComponent {
       {% if (!instance.options.readOnly && !instance.disabled) { %}
         <div class="col-sm-2">
           <div class="btn-group pull-right">
-            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('pen-fill') }}"></i></button>
+            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass('edit') }}"></i></button>
             {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
               <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass('trash') }}"></i></button>
             {% } %}
@@ -104,7 +104,7 @@ export default class EditGridComponent extends NestedArrayComponent {
         {% if (!instance.options.readOnly && !instance.disabled) { %}
           <td class="editgrid-table-column">
             <div class="btn-group">
-              <button class="btn btn-default btn-light btn-sm editRow" aria-label="{{ t('Edit row') }}"><i class="{{ iconClass('pen-fill') }}"></i></button>
+              <button class="btn btn-default btn-light btn-sm editRow" aria-label="{{ t('Edit row') }}"><i class="{{ iconClass('edit') }}"></i></button>
               {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}
               <button class="btn btn-danger btn-sm removeRow" aria-label="{{ t('Remove row') }}"><i class="{{ iconClass('trash') }}"></i></button>
               {% } %}

package/lib/mjs/components/form/Form.d.ts

@@ -90,6 +90,13 @@ export default class FormComponent extends Component {
     isHidden(): boolean;
     setValue(submission: any, flags?: {}): boolean;
     setSubFormValue(submission: any, flags: any): void;
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission: object | null | undefined, flags: object | null | undefined): void;
     areAllComponentsEmpty(data: any): boolean;
     updateSubFormVisibility(): void;
     /**

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

@@ -639,9 +639,18 @@ export default class FormComponent extends Component {
             });
         }
         else {
-            this.subForm.setValue(submission, flags);
+            this.onSetSubFormValue(submission, flags);
         }
     }
+    /**
+     * Sets the subform value
+     * @param {object|null|undefined} submission - The submission to set.
+     * @param {object|null|undefined} flags - Any flags to apply when setting the submission.
+     * @returns {void}
+     */
+    onSetSubFormValue(submission, flags) {
+        this.subForm.setValue(submission, flags);
+    }
     isEmpty(value = this.dataValue) {
         return value === null || _.isEqual(value, this.emptyValue) || (this.areAllComponentsEmpty(value?.data) && !value?._id);
     }

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

@@ -46,7 +46,7 @@ export default class NumberComponent extends Input {
     constructor(...args) {
         super(...args);
         const separators = getNumberSeparators(this.options.language || navigator.language);
-        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+        this.decimalSeparator = this.options.decimalSeparator = this.component.decimalSymbol || this.options.decimalSeparator
             || this.options.properties?.decimalSeparator
             || separators.decimalSeparator;
         if (this.component.delimiter) {

package/lib/mjs/components/number/fixtures/comp8.d.ts

@@ -0,0 +1,32 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        decimalSymbol: string;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        applyMaskOn?: undefined;
+        mask?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        truncateMultipleSpaces?: undefined;
+        decimalSymbol?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/number/fixtures/comp8.js

@@ -0,0 +1,26 @@
+export default {
+    components: [
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": false,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "decimalSymbol": "-"
+        },
+        {
+            "type": "button",
+            "label": "Submit",
+            "key": "submit",
+            "disableOnInvalid": true,
+            "input": true,
+            "tableView": false
+        }
+    ]
+};

package/lib/mjs/components/number/fixtures/index.d.ts

@@ -5,4 +5,5 @@ import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
+import comp8 from './comp8';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

package/lib/mjs/components/number/fixtures/index.js

@@ -5,4 +5,5 @@ import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
 import comp7 from './comp7';
-export { comp1, comp2, comp3, comp4, comp5, comp6, comp7 };
+import comp8 from './comp8';
+export { comp1, comp2, comp3, comp4, comp5, comp6, comp7, comp8 };

package/lib/mjs/components/phonenumber/fixtures/comp2.d.ts

@@ -0,0 +1,16 @@
+declare namespace _default {
+    let components: {
+        label: string;
+        applyMaskOn: string;
+        allowMultipleMasks: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        inputMasks: {
+            label: string;
+            mask: string;
+        }[];
+        input: boolean;
+    }[];
+}
+export default _default;

package/lib/mjs/components/phonenumber/fixtures/comp2.js

@@ -0,0 +1,23 @@
+export default {
+    components: [
+        {
+            "label": "Phone Number",
+            "applyMaskOn": "change",
+            "allowMultipleMasks": true,
+            "tableView": true,
+            "key": "phoneNumber",
+            "type": "phoneNumber",
+            "inputMasks": [
+                {
+                    "label": "Canada",
+                    "mask": "(999) 999-9999"
+                },
+                {
+                    "label": "Other",
+                    "mask": ""
+                }
+            ],
+            "input": true
+        }
+    ]
+};

package/lib/mjs/components/phonenumber/fixtures/index.d.ts

@@ -1,2 +1,3 @@
-export { comp1 };
 import comp1 from './comp1';
+import comp2 from './comp2';
+export { comp1, comp2 };

package/lib/mjs/components/phonenumber/fixtures/index.js

@@ -1,2 +1,3 @@
 import comp1 from './comp1';
-export { comp1 };
+import comp2 from './comp2';
+export { comp1, comp2 };

package/lib/mjs/components/select/Select.js

@@ -1,7 +1,6 @@
 import _ from 'lodash';
 import { Formio } from '../../Formio';
 import ListComponent from '../_classes/list/ListComponent';
-import Input from '../_classes/input/Input';
 import Form from '../../Form';
 import { getRandomComponentId, boolValue, isPromise, componentValueTypes, getComponentSavedTypes, isSelectResourceWithObjectValue, removeHTML } from '../../utils/utils';
 import Choices from '../../utils/ChoicesWrapper';
@@ -863,7 +862,7 @@ export default class SelectComponent extends ListComponent {
                 this.choices.containerOuter.element.setAttribute('tabIndex', '-1');
                 this.addEventListener(this.choices.containerOuter.element, 'focus', () => this.focusableElement.focus());
             }
-            Input.prototype.addFocusBlurEvents.call(this, this.focusableElement);
+            this.addFocusBlurEvents(this.choices.input.element);
             if (this.itemsFromUrl && !this.component.noRefreshOnScroll) {
                 this.scrollList = this.choices.choiceList.element;
                 this.addEventListener(this.scrollList, 'scroll', () => this.onScroll());

package/lib/mjs/components/signature/Signature.d.ts

@@ -22,7 +22,6 @@ export default class SignatureComponent extends Input {
     showCanvas(show: any): void;
     onDisabled(): void;
     checkSize(force: any, scale: any): void;
-    getModalPreviewTemplate(): any;
     signaturePad: SignaturePad | null | undefined;
     observer: any;
     getValueAsString(value: any): "" | "Yes" | "No";

package/lib/mjs/components/signature/Signature.js

@@ -169,7 +169,7 @@ export default class SignatureComponent extends Input {
         return false;
     }
     getModalPreviewTemplate() {
-        return this.renderTemplate('modalPreview', {
+        return this.renderModalPreview({
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
                 this.t('Click to Sign')

package/lib/mjs/providers/address/GoogleAddressProvider.d.ts

@@ -82,6 +82,11 @@ export class GoogleAddressProvider extends AddressProvider {
     search(): Promise<void>;
     makeRequest(): Promise<void>;
     getDisplayValue(address: any): any;
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options?: ProviderOptions): void;
 }
 export type AutocompleteOptions = {
     /**

package/lib/mjs/providers/address/GoogleAddressProvider.js

@@ -2,6 +2,9 @@
 import { Formio } from '../../Formio';
 import _ from 'lodash';
 import { AddressProvider } from './AddressProvider';
+const GOOGLE_MAPS_BASE_URL = 'https://maps.googleapis.com';
+const GOOGLE_MAPS_JS_URL = `${GOOGLE_MAPS_BASE_URL}/maps/api/js`;
+const GOOGLE_MAPS_JS_WITH_PARAMS_URL = `${GOOGLE_MAPS_JS_URL}?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback`;
 /**
  * @typedef {object} AutocompleteOptions
  * @property {string[]} fields - The fields to include in the autocomplete response.
@@ -48,10 +51,11 @@ export class GoogleAddressProvider extends AddressProvider {
     constructor(options = {}) {
         super(options);
         this.setAutocompleteOptions();
-        let src = 'https://maps.googleapis.com/maps/api/js?v=quarterly&libraries=places&loading=async&callback=googleMapsCallback';
+        let src = GOOGLE_MAPS_JS_WITH_PARAMS_URL;
         if (options.params?.key) {
             src += `&key=${options.params.key}`;
         }
+        this.tryRemoveLibrary(options);
         Formio.requireLibrary(this.getLibraryName(), 'google.maps.places', src);
     }
     /**
@@ -178,4 +182,21 @@ export class GoogleAddressProvider extends AddressProvider {
             : this.alternativeDisplayValueProperty;
         return _.get(address, displayedProperty, '');
     }
+    /**
+     * Tries to remove the library if api key for loaded script is different.
+     * @param {ProviderOptions} options - The options for the provider.
+     */
+    tryRemoveLibrary(options = {}) {
+        if (!Formio.libraries[this.getLibraryName()]) {
+            return;
+        }
+        const existingScript = document.querySelector(`script[src^="${GOOGLE_MAPS_JS_URL}"]`);
+        if (existingScript && options.params?.key && !existingScript.attributes.src.value.endsWith(options.params.key)) {
+            const googleMapsScripts = document.querySelectorAll(`script[src^="${GOOGLE_MAPS_BASE_URL}"]`) ?? [];
+            googleMapsScripts.forEach(script => script.parentNode.removeChild(script));
+            delete Formio.libraries[this.getLibraryName()];
+            delete global?.google?.maps;
+            delete global[`${this.getLibraryName()}Callback`];
+        }
+    }
 }

package/lib/mjs/utils/utils.js

@@ -1,6 +1,5 @@
 /* global jQuery */
 import _ from 'lodash';
-import fetchPonyfill from 'fetch-ponyfill';
 import jsonLogic from 'json-logic-js';
 import moment from 'moment-timezone/moment-timezone';
 import jtz from 'jstimezonedetect';
@@ -10,9 +9,6 @@ import { getValue } from './formUtils';
 import { Evaluator } from './Evaluator';
 import ConditionOperators from './conditionOperators';
 const interpolate = Evaluator.interpolate;
-const { fetch } = fetchPonyfill({
-    Promise: Promise
-});
 export * from './formUtils';
 // Configure JsonLogic
 lodashOperators.forEach((name) => jsonLogic.add_operation(`_${name}`, _[name]));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formio/js",
-  "version": "5.0.0-dev.5661.22d0f16",
+  "version": "5.0.0-dev.5664.50b8944",
   "description": "JavaScript powered Forms with JSON Form Builder",
   "main": "lib/cjs/index.js",
   "exports": {
@@ -99,7 +99,6 @@
     "eventemitter3": "^5.0.1",
     "fast-deep-equal": "^3.1.3",
     "fast-json-patch": "^3.1.1",
-    "fetch-ponyfill": "^7.1.0",
     "idb": "^7.1.1",
     "inputmask": "^5.0.8",
     "ismobilejs": "^1.1.1",