@formio/js 5.0.0-dev.5684.206e5cd → 5.0.0-dev.5687.07dacac

package/lib/cjs/components/_classes/component/editForm/Component.edit.display.js

@@ -190,5 +190,13 @@ exports.default = [
         key: 'tableView',
         input: true
     },
+    {
+        weight: 1600,
+        type: 'checkbox',
+        label: 'Modal Edit',
+        tooltip: 'Opens up a modal to edit the value of this component.',
+        key: 'modalEdit',
+        input: true
+    }
 ];
 /* eslint-enable max-len */

package/lib/cjs/components/datagrid/DataGrid.js

@@ -351,9 +351,6 @@ class DataGridComponent extends NestedArrayComponent_1.default {
         dataValue.splice(newPosition, 0, draggedRowData);
         //remove element from old position (if was moved above, after insertion it's at +1 index)
         dataValue.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
-        // When components are reordered we need to set the dataGrid and form pristine properties to false
-        this.root.pristine = false;
-        this.pristine = false;
         //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();

package/lib/cjs/components/day/fixtures/comp8.d.ts

@@ -0,0 +1,41 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+                required: boolean;
+            };
+            month: {
+                hide: boolean;
+                required: boolean;
+            };
+            year: {
+                hide: boolean;
+                required: boolean;
+            };
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        fields?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/day/fixtures/comp8.js

@@ -0,0 +1,40 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "components": [
+        {
+            "label": "Day - Table",
+            "hideInputLabels": false,
+            "inputsLabelPosition": "top",
+            "useLocaleSettings": false,
+            "alwaysEnabled": false,
+            "tableView": false,
+            "fields": {
+                "day": {
+                    "hide": false,
+                    "required": true
+                },
+                "month": {
+                    "hide": false,
+                    "required": true
+                },
+                "year": {
+                    "hide": false,
+                    "required": true
+                }
+            },
+            "key": "dayTable",
+            "type": "day",
+            "input": true
+        },
+        {
+            "label": "Submit",
+            "showValidations": false,
+            "alwaysEnabled": false,
+            "tableView": false,
+            "key": "submit",
+            "type": "button",
+            "input": true
+        }
+    ]
+};

package/lib/cjs/components/day/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/cjs/components/day/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp8 = exports.comp7 = exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -18,3 +18,5 @@ const comp6_1 = __importDefault(require("./comp6"));
 exports.comp6 = comp6_1.default;
 const comp7_1 = __importDefault(require("./comp7"));
 exports.comp7 = comp7_1.default;
+const comp8_1 = __importDefault(require("./comp8"));
+exports.comp8 = comp8_1.default;

package/lib/cjs/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/cjs/providers/address/GoogleAddressProvider.js

@@ -8,6 +8,9 @@ exports.GoogleAddressProvider = void 0;
 const Formio_1 = require("../../Formio");
 const lodash_1 = __importDefault(require("lodash"));
 const AddressProvider_1 = require("./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.
@@ -55,10 +58,11 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
         var _a;
         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 ((_a = options.params) === null || _a === void 0 ? void 0 : _a.key) {
             src += `&key=${options.params.key}`;
         }
+        this.tryRemoveLibrary(options);
         Formio_1.Formio.requireLibrary(this.getLibraryName(), 'google.maps.places', src);
     }
     /**
@@ -185,5 +189,23 @@ class GoogleAddressProvider extends AddressProvider_1.AddressProvider {
             : this.alternativeDisplayValueProperty;
         return lodash_1.default.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 = {}) {
+        var _a, _b, _c;
+        if (!Formio_1.Formio.libraries[this.getLibraryName()]) {
+            return;
+        }
+        const existingScript = document.querySelector(`script[src^="${GOOGLE_MAPS_JS_URL}"]`);
+        if (existingScript && ((_a = options.params) === null || _a === void 0 ? void 0 : _a.key) && !existingScript.attributes.src.value.endsWith(options.params.key)) {
+            const googleMapsScripts = (_b = document.querySelectorAll(`script[src^="${GOOGLE_MAPS_BASE_URL}"]`)) !== null && _b !== void 0 ? _b : [];
+            googleMapsScripts.forEach(script => script.parentNode.removeChild(script));
+            delete Formio_1.Formio.libraries[this.getLibraryName()];
+            (_c = global === null || global === void 0 ? void 0 : global.google) === null || _c === void 0 ? true : delete _c.maps;
+            delete global[`${this.getLibraryName()}Callback`];
+        }
+    }
 }
 exports.GoogleAddressProvider = GoogleAddressProvider;

package/lib/cjs/translations/en.d.ts

@@ -74,5 +74,8 @@ declare namespace _default {
     let apiKey: string;
     let typeRemaining: string;
     let typeCount: string;
+    let requiredDayField: string;
+    let requiredMonthField: string;
+    let requiredYearField: string;
 }
 export default _default;

package/lib/cjs/translations/en.js

@@ -75,5 +75,8 @@ exports.default = {
     reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
     apiKey: 'API Key is not unique: {{key}}',
     typeRemaining: '{{ remaining }} {{ type }} remaining.',
-    typeCount: '{{ count }} {{ type }}'
+    typeCount: '{{ count }} {{ type }}',
+    requiredDayField: '{{ field }} is required',
+    requiredMonthField: '{{ field }} is required',
+    requiredYearField: '{{ field }} is required'
 };

package/lib/cjs/utils/utils.js

@@ -34,7 +34,6 @@ exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.unique
 exports.isSelectResourceWithObjectValue = exports.getItemTemplateKeys = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
-const fetch_ponyfill_1 = __importDefault(require("fetch-ponyfill"));
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
 exports.jsonLogic = json_logic_js_1.default;
 const moment_timezone_1 = __importDefault(require("moment-timezone/moment-timezone"));
@@ -48,9 +47,6 @@ const conditionOperators_1 = __importDefault(require("./conditionOperators"));
 exports.ConditionOperators = conditionOperators_1.default;
 const interpolate = Evaluator_1.Evaluator.interpolate;
 exports.interpolate = interpolate;
-const { fetch } = (0, fetch_ponyfill_1.default)({
-    Promise: Promise
-});
 __exportStar(require("./formUtils"), exports);
 // Configure JsonLogic
 operators_1.lodashOperators.forEach((name) => json_logic_js_1.default.add_operation(`_${name}`, lodash_1.default[name]));

package/lib/mjs/components/_classes/component/editForm/Component.edit.display.js

@@ -187,5 +187,13 @@ export default [
         key: 'tableView',
         input: true
     },
+    {
+        weight: 1600,
+        type: 'checkbox',
+        label: 'Modal Edit',
+        tooltip: 'Opens up a modal to edit the value of this component.',
+        key: 'modalEdit',
+        input: true
+    }
 ];
 /* eslint-enable max-len */

package/lib/mjs/components/datagrid/DataGrid.js

@@ -348,9 +348,6 @@ export default class DataGridComponent extends NestedArrayComponent {
         dataValue.splice(newPosition, 0, draggedRowData);
         //remove element from old position (if was moved above, after insertion it's at +1 index)
         dataValue.splice(movedBelow ? oldPosition : oldPosition + 1, 1);
-        // When components are reordered we need to set the dataGrid and form pristine properties to false
-        this.root.pristine = false;
-        this.pristine = false;
         //need to re-build rows to re-calculate indexes and other indexed fields for component instance (like rows for ex.)
         this.setValue(dataValue, { isReordered: true });
         this.rebuild();

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

@@ -0,0 +1,41 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+                required: boolean;
+            };
+            month: {
+                hide: boolean;
+                required: boolean;
+            };
+            year: {
+                hide: boolean;
+                required: boolean;
+            };
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        alwaysEnabled: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        hideInputLabels?: undefined;
+        inputsLabelPosition?: undefined;
+        useLocaleSettings?: undefined;
+        fields?: undefined;
+    })[];
+}
+export default _default;

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

@@ -0,0 +1,38 @@
+export default {
+    "components": [
+        {
+            "label": "Day - Table",
+            "hideInputLabels": false,
+            "inputsLabelPosition": "top",
+            "useLocaleSettings": false,
+            "alwaysEnabled": false,
+            "tableView": false,
+            "fields": {
+                "day": {
+                    "hide": false,
+                    "required": true
+                },
+                "month": {
+                    "hide": false,
+                    "required": true
+                },
+                "year": {
+                    "hide": false,
+                    "required": true
+                }
+            },
+            "key": "dayTable",
+            "type": "day",
+            "input": true
+        },
+        {
+            "label": "Submit",
+            "showValidations": false,
+            "alwaysEnabled": false,
+            "tableView": false,
+            "key": "submit",
+            "type": "button",
+            "input": true
+        }
+    ]
+};

package/lib/mjs/components/day/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/day/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/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/translations/en.d.ts

@@ -74,5 +74,8 @@ declare namespace _default {
     let apiKey: string;
     let typeRemaining: string;
     let typeCount: string;
+    let requiredDayField: string;
+    let requiredMonthField: string;
+    let requiredYearField: string;
 }
 export default _default;

package/lib/mjs/translations/en.js

@@ -73,5 +73,8 @@ export default {
     reCaptchaTokenNotSpecifiedError: 'ReCAPTCHA: Token is not specified in submission',
     apiKey: 'API Key is not unique: {{key}}',
     typeRemaining: '{{ remaining }} {{ type }} remaining.',
-    typeCount: '{{ count }} {{ type }}'
+    typeCount: '{{ count }} {{ type }}',
+    requiredDayField: '{{ field }} is required',
+    requiredMonthField: '{{ field }} is required',
+    requiredYearField: '{{ field }} is required'
 };

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.5684.206e5cd",
+  "version": "5.0.0-dev.5687.07dacac",
   "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",