@formio/js 5.1.0-dev.6042.18ef5d3 → 5.1.0-dev.6042.603237d

package/lib/cjs/widgets/CalendarWidget.js

@@ -3,11 +3,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-const Formio_1 = require("../Formio");
-const InputWidget_1 = __importDefault(require("./InputWidget"));
-const utils_1 = require("../utils/utils");
 const moment_1 = __importDefault(require("moment"));
 const lodash_1 = __importDefault(require("lodash"));
+const Formio_1 = require("../Formio");
+const InputWidget_1 = __importDefault(require("./InputWidget"));
+const utils_1 = require("../utils");
 const DEFAULT_FORMAT = 'yyyy-MM-dd hh:mm a';
 const ISO_8601_FORMAT = 'yyyy-MM-ddTHH:mm:ssZ';
 const isIEBrowser = (0, utils_1.getBrowserInfo)().ie;
@@ -51,29 +51,6 @@ class CalendarWidget extends InputWidget_1.default {
         else if (this.settings.time_24hr) {
             this.settings.format = this.settings.format.replace(/hh:mm a$/g, 'HH:mm');
         }
-        this.zoneLoading = false;
-        this.timezonesUrl = `${Formio_1.Formio.cdn['moment-timezone']}/data/packed/latest.json`;
-    }
-    /**
-     * Load the timezones.
-     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
-     */
-    loadZones() {
-        const timezone = this.timezone;
-        if (this.zoneLoading) {
-            return true;
-        }
-        if (!(0, utils_1.zonesLoaded)() && (0, utils_1.shouldLoadZones)(timezone)) {
-            this.zoneLoading = true;
-            (0, utils_1.loadZones)(this.timezonesUrl, timezone).then(() => {
-                this.zoneLoading = false;
-                this.emit('redraw');
-            });
-            // Return zones are loading.
-            return true;
-        }
-        // Zones are already loaded.
-        return false;
     }
     attach(input) {
         var _a;
@@ -85,7 +62,7 @@ class CalendarWidget extends InputWidget_1.default {
         };
         this.closedOn = 0;
         this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;
-        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(this.valueFormat);
+        this.valueMomentFormat = (0, utils_1.convertFormatToDayjs)(this.valueFormat);
         const isReadOnly = this.settings.readOnly;
         this.settings.minDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.minDate);
         this.settings.maxDate = isReadOnly ? null : (0, utils_1.getDateSetting)(this.settings.maxDate);
@@ -249,9 +226,9 @@ class CalendarWidget extends InputWidget_1.default {
      */
     getDateValue(date, format, useTimezone) {
         if (useTimezone) {
-            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));
+            return (0, utils_1.dayjsDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToDayjs)(format));
         }
-        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));
+        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToDayjs)(format));
     }
     /**
      * Return the value of the selected date.
@@ -283,13 +260,15 @@ class CalendarWidget extends InputWidget_1.default {
     setValue(value) {
         const saveAsText = (this.settings.saveAs === 'text');
         if (!this.calendar) {
-            value = value ? (0, utils_1.formatDate)(this.timezonesUrl, value, (0, utils_1.convertFormatToMoment)(this.settings.format), this.timezone, (0, utils_1.convertFormatToMoment)(this.valueMomentFormat)) : value;
+            value = value ? (0, utils_1.formatDate)(value, (0, utils_1.convertFormatToDayjs)(this.settings.format), this.timezone, (0, utils_1.convertFormatToDayjs)(this.valueMomentFormat)) : value;
             return super.setValue(value);
         }
-        const zonesLoading = this.loadZones();
+        // If the component is a textfield that does not have timezone information included in the string value then skip
+        // the timezone offset
+        this.settings.skipOffset = this.component.type === 'textfield' && !(0, utils_1.hasEncodedTimezone)(value);
         if (value) {
-            if (!saveAsText && this.settings.readOnly && !zonesLoading) {
-                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);
+            if (!saveAsText && this.settings.readOnly) {
+                this.calendar.setDate((0, utils_1.dayjsDate)(value, this.valueFormat, this.timezone).format(), false);
             }
             else if (this.isValueISO8601(value)) {
                 this.calendar.setDate(value, false);
@@ -302,13 +281,13 @@ class CalendarWidget extends InputWidget_1.default {
             this.calendar.clear(false);
         }
     }
-    getValueAsString(value, format) {
+    getValueAsString(value, format = '') {
         const inputFormat = format || this.dateFormat;
         const valueFormat = this.calendar ? this.valueFormat : this.settings.dateFormat;
         if (this.settings.saveAs === 'text' && this.componentInstance.parent && !this.settings.readOnly) {
-            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));
+            return (0, moment_1.default)(value, (0, utils_1.convertFormatToDayjs)(valueFormat)).format((0, utils_1.convertFormatToDayjs)(valueFormat));
         }
-        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));
+        return (0, utils_1.formatDate)(value, inputFormat, this.timezone, (0, utils_1.convertFormatToDayjs)(valueFormat));
     }
     setErrorClasses(hasErrors) {
         if (!this.input) {
@@ -401,7 +380,7 @@ class CalendarWidget extends InputWidget_1.default {
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {
                 const inputValue = this.calendar.input.value;
-                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;
+                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToDayjs)(this.valueFormat)).toDate() : inputValue;
                 this.calendar.setDate(dateValue, true, this.settings.altFormat);
             }
             else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
@@ -453,14 +432,14 @@ class CalendarWidget extends InputWidget_1.default {
         return (date, format) => {
             // Only format this if this is the altFormat and the form is readOnly.
             if (this.settings.readOnly && (format === this.settings.altFormat)) {
-                if (!this.settings.enableTime || this.loadZones()) {
+                if (!this.settings.enableTime || this.settings.skipOffset) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());
                 if (currentValue.toString() === date.toString()) {
-                    return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
+                    return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), new Date(this.componentValue), format, this.timezone);
                 }
-                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
+                return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
             }
             return Flatpickr.formatDate(date, format);
         };

package/lib/mjs/Element.js

@@ -1,10 +1,10 @@
-import EventEmitter from './EventEmitter';
-import { Formio } from './Formio';
-import * as FormioUtils from './utils/utils';
-import { I18n } from '@formio/core';
 import _ from 'lodash';
 import moment from 'moment';
 import maskInput from '@formio/vanilla-text-mask';
+import EventEmitter from './EventEmitter';
+import { Formio } from './Formio';
+import FormioUtils from './utils';
+import { I18n } from '@formio/core';
 import enTranslation from './translations/en';
 /**
  * The root component for all elements within the Form.io renderer.
@@ -525,9 +525,9 @@ export default class Element {
         if (this.component.filter === string && !this.options.building) {
             const evalContext = this.evalContext(data);
             evalContext.data = _.mapValues(evalContext.data, (val) => _.isString(val) ? encodeURIComponent(val) : val);
-            return FormioUtils.interpolate(string, evalContext, options);
+            return FormioUtils.Evaluator.interpolate(string, evalContext, options);
         }
-        return FormioUtils.interpolate(string, this.evalContext(data), options);
+        return FormioUtils.Evaluator.interpolate(string, this.evalContext(data), options);
     }
     /**
      * Performs an evaluation using the evaluation context of this component.

package/lib/mjs/EventEmitter.js

@@ -1,5 +1,5 @@
 import { EventEmitter as EventEmitter3 } from 'eventemitter3';
-import * as utils from './utils/utils';
+import { observeOverload } from './utils';
 export default class EventEmitter extends EventEmitter3 {
     constructor(conf = {}) {
         const { loadLimit = 1000, eventsSafeInterval = 300 } = conf;
@@ -7,7 +7,7 @@ export default class EventEmitter extends EventEmitter3 {
         const overloadHandler = () => {
             console.warn(`There were more than ${loadLimit} events emitted in ${eventsSafeInterval} ms. It might be caused by events' infinite loop`, this.id);
         };
-        const dispatch = utils.observeOverload(overloadHandler, {
+        const dispatch = observeOverload(overloadHandler, {
             limit: loadLimit,
             delay: eventsSafeInterval
         });

package/lib/mjs/Form.js

@@ -2,7 +2,7 @@ import Element from './Element';
 import { Formio } from './Formio';
 import Displays from './displays';
 import templates from './templates';
-import * as FormioUtils from './utils/utils';
+import FormioUtils from './utils';
 export default class Form extends Element {
     /**
      * Represents a JSON value.

package/lib/mjs/PDF.js

@@ -1,6 +1,6 @@
 import { Formio } from './Formio';
 import Webform from './Webform';
-import { fastCloneDeep, eachComponent } from './utils/utils';
+import { fastCloneDeep, eachComponent } from './utils';
 export default class PDF extends Webform {
     constructor(element, options) {
         options.display = 'pdf';

package/lib/mjs/PDFBuilder.js

@@ -1,8 +1,7 @@
 import _ from 'lodash';
 import { Formio } from './Formio';
 import WebformBuilder from './WebformBuilder';
-import { fastCloneDeep, getElementRect, getBrowserInfo } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import { fastCloneDeep, getElementRect, getBrowserInfo, eachComponent } from './utils';
 import BuilderUtils from './utils/builder';
 import PDF from './PDF';
 export default class PDFBuilder extends WebformBuilder {

package/lib/mjs/Webform.js

@@ -1,13 +1,12 @@
 import _ from 'lodash';
-import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
 import enTranslation from './translations/en';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
-import { eachComponent } from './utils/formUtils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, convertStringToHTMLElement, getArrayFromComponentPath, eachComponent } from './utils';
+import dayjs from "dayjs";
 // 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;
@@ -659,7 +658,9 @@ export default class Webform extends NestedDataComponent {
         const rebuild = this.rebuild() || Promise.resolve();
         return rebuild.then(() => {
             this.emit('formLoad', form);
-            this.triggerCaptcha();
+            if (!this.options.server) {
+                this.triggerCaptcha();
+            }
             // Make sure to trigger onChange after a render event occurs to speed up form rendering.
             setTimeout(() => {
                 this.onChange(flags);
@@ -1315,7 +1316,7 @@ export default class Webform extends NestedDataComponent {
         submission.metadata = submission.metadata || {};
         _.defaults(submission.metadata, {
             timezone: _.get(this, '_submission.metadata.timezone', currentTimezone()),
-            offset: parseInt(_.get(this, '_submission.metadata.offset', moment().utcOffset()), 10),
+            offset: parseInt(_.get(this, '_submission.metadata.offset', dayjs().utcOffset()), 10),
             origin: document.location.origin,
             referrer: document.referrer,
             browserName: navigator.appName,

package/lib/mjs/WebformBuilder.d.ts

@@ -77,6 +77,7 @@ export default class WebformBuilder extends Component {
     removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
     replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
     updateComponent(component: any, changed: any): void;
+    originalDefaultValue: any;
     findRepeatablePaths(): any[];
     highlightInvalidComponents(): void;
     /**

package/lib/mjs/WebformBuilder.js

@@ -3,8 +3,7 @@ import Component from './components/_classes/component/Component';
 import tippy from 'tippy.js';
 import Components from './components/Components';
 import { Formio } from './Formio';
-import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath } from './utils/utils';
-import { eachComponent, getComponent } from './utils/formUtils';
+import { fastCloneDeep, bootstrapVersion, getArrayFromComponentPath, getStringFromComponentPath, eachComponent, getComponent, componentInfo } from './utils';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
 import autoScroll from 'dom-autoscroller';
@@ -1054,6 +1053,16 @@ export default class WebformBuilder extends Component {
                     'fields.month.required',
                     'fields.year.required',
                 ]));
+                if (defaultValueComponent.component.components) {
+                    if (!this.originalDefaultValue) {
+                        this.originalDefaultValue = fastCloneDeep(defaultValueComponent.component);
+                    }
+                    eachComponent(defaultValueComponent.component.components, (comp => {
+                        if (comp.validate?.required) {
+                            comp.validate.required = false;
+                        }
+                    }));
+                }
                 const parentComponent = defaultValueComponent.parent;
                 let tabIndex = -1;
                 let index = -1;
@@ -1103,11 +1112,14 @@ export default class WebformBuilder extends Component {
         const repeatablePaths = [];
         const keys = new Map();
         eachComponent(this.form.components, (comp, path, components, parent, paths) => {
-            if (keys.has(paths.dataPath)) {
-                repeatablePaths.push(paths.dataPath);
-            }
-            else {
-                keys.set(paths.dataPath, true);
+            const isLayout = componentInfo(comp).layout;
+            if (!isLayout) {
+                if (keys.has(paths.dataPath)) {
+                    repeatablePaths.push(paths.dataPath);
+                }
+                else {
+                    keys.set(paths.dataPath, true);
+                }
             }
         }, true);
         return repeatablePaths;
@@ -1115,12 +1127,22 @@ export default class WebformBuilder extends Component {
     highlightInvalidComponents() {
         const repeatablePaths = this.findRepeatablePaths();
         let hasInvalidComponents = false;
+        // Matches anything expect letters and  '_' at the beginning of the key and anything except of letters, numbers,
+        // '-', '.' and '_' in the rest of the key
+        const badCharacters = /^[^A-Za-z_]+|[^A-Za-z0-9\-._]+/g;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
             if (repeatablePaths.includes(path)) {
                 comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
+            else if (comp.key.replace(badCharacters, '') === '') {
+                comp.setCustomValidity(this.t('apiKeyNotValid', { key: comp.key }));
+                hasInvalidComponents = true;
+            }
+            else {
+                comp.setCustomValidity();
+            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }
@@ -1145,6 +1167,9 @@ export default class WebformBuilder extends Component {
         if (index !== -1) {
             let submissionData = this.editForm.submission.data;
             submissionData = submissionData.componentJson || submissionData;
+            if (submissionData.components && this.originalDefaultValue) {
+                submissionData.components = this.originalDefaultValue.components;
+            }
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.replaceDoubleQuotes(submissionData, fieldsToRemoveDoubleQuotes);
             this.hook('beforeSaveComponentSettings', submissionData);

package/lib/mjs/Wizard.d.ts

@@ -6,7 +6,6 @@ declare class Wizard extends Webform {
     originalComponents: any[];
     page: number;
     currentPanel: any;
-    currentPanels: any[] | null;
     currentNextPage: number;
     _seenPages: number[];
     subWizards: any[];
@@ -17,7 +16,7 @@ declare class Wizard extends Webform {
     originalOptions: any;
     isLastPage(): any;
     getPages(args?: {}): any[];
-    get hasExtraPages(): boolean;
+    get hasSubWizards(): boolean;
     get localData(): any;
     get wizardKey(): string;
     set wizard(form: object);

package/lib/mjs/Wizard.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils/utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils';
 export default class Wizard extends Webform {
     /**
      * Constructor for wizard-based forms.
@@ -29,7 +29,6 @@ export default class Wizard extends Webform {
         this.originalComponents = [];
         this.page = 0;
         this.currentPanel = null;
-        this.currentPanels = null;
         this.currentNextPage = 0;
         this._seenPages = [0];
         this.subWizards = [];
@@ -48,12 +47,12 @@ export default class Wizard extends Webform {
     }
     getPages(args = {}) {
         const { all = false } = args;
-        const pages = this.hasExtraPages ? this.components : this.pages;
+        const pages = this.hasSubWizards ? this.components : this.pages;
         const filteredPages = pages
             .filter(all ? _.identity : (p, index) => this._seenPages.includes(index));
         return filteredPages;
     }
-    get hasExtraPages() {
+    get hasSubWizards() {
         return !_.isEmpty(this.subWizards);
     }
     get data() {
@@ -177,9 +176,9 @@ export default class Wizard extends Webform {
     }
     render() {
         const ctx = this.renderContext;
-        if (this.component.key) {
-            ctx.panels.map(panel => {
-                if (panel.key === this.component.key) {
+        if (this.component.id) {
+            ctx.panels.forEach(panel => {
+                if (panel.id === this.component.id) {
                     this.currentPanel = panel;
                     ctx.wizardPageTooltip = this.getFormattedTooltip(panel.tooltip);
                 }
@@ -580,7 +579,7 @@ export default class Wizard extends Webform {
             this.pageFieldLogic(num);
             this.getNextPage();
             let parentNum = num;
-            if (this.hasExtraPages) {
+            if (this.hasSubWizards) {
                 const pageFromPages = this.pages[num];
                 const pageFromComponents = this.components[num];
                 if (!pageFromComponents || pageFromPages?.id !== pageFromComponents.id) {
@@ -869,23 +868,18 @@ export default class Wizard extends Webform {
             this.showErrors(errors, true, true);
         }
         // If the pages change, need to redraw the header.
-        let currentPanels;
-        let panels;
+        const currentPanels = this.pages;
+        // calling this.establishPages() updates/mutates this.pages to be the current pages
+        this.establishPages();
+        const newPanels = this.pages;
         const currentNextPage = this.currentNextPage;
-        if (this.hasExtraPages) {
-            currentPanels = this.pages.map(page => page.component.key);
-            this.establishPages();
-            panels = this.pages.map(page => page.component.key);
-        }
-        else {
-            currentPanels = this.currentPanels || this.pages.map(page => page.component.key);
-            panels = this.establishPages().map(panel => panel.key);
-            this.currentPanels = panels;
-            if (this.currentPanel?.key && this.currentPanels?.length) {
-                this.setPage(this.currentPanels.findIndex(panel => panel === this.currentPanel.key));
-            }
+        const panelsUpdated = !_.isEqual(newPanels, currentPanels);
+        if (this.currentPanel?.id && this.pages.length && (!this.hasSubWizards || (this.hasSubWizards && panelsUpdated))) {
+            const newIndex = this.pages.findIndex(page => page.id === this.currentPanel.id);
+            if (newIndex !== -1)
+                this.setPage(newIndex);
         }
-        if (!_.isEqual(panels, currentPanels) || (flags && flags.fromSubmission)) {
+        if (panelsUpdated || (flags && flags.fromSubmission)) {
             this.redrawHeader();
         }
         // If the next page changes, then make sure to redraw navigation.

package/lib/mjs/WizardBuilder.js

@@ -2,7 +2,7 @@ import WebformBuilder from './WebformBuilder';
 import Webform from './Webform';
 import BuilderUtils from './utils/builder';
 import _ from 'lodash';
-import { fastCloneDeep } from './utils/utils';
+import { fastCloneDeep } from './utils';
 export default class WizardBuilder extends WebformBuilder {
     constructor() {
         let element, options;

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

@@ -163,8 +163,17 @@ declare class Component extends Element {
      */
     info: any;
     get componentsMap(): object;
+    /**
+     * Returns if the parent should conditionally clear.
+     * @returns {boolean} - If the parent should conditionally clear.
+     */
     parentShouldConditionallyClear(): boolean;
     parentConditionallyHidden(): boolean;
+    /**
+     * Returns true if any of the parents default their component "hidden" property to true.
+     * @returns {boolean} - If any parent defaults the hidden property to true.
+     */
+    anyParentDefaultsHidden(): boolean;
     set data(value: any);
     get data(): any;
     mergeSchema(component?: {}): any;
@@ -228,8 +237,23 @@ declare class Component extends Element {
     get visible(): boolean;
     get logicallyHidden(): any;
     _logicallyHidden: any;
-    shouldConditionallyClear(skipParent?: boolean): boolean;
-    conditionallyHidden(skipParent?: boolean): boolean;
+    /**
+     * Determines if the component should clear its value when the root form is pristine.
+     * @returns {boolean} - If the component should clear its value when the root form is pristine.
+     */
+    shouldConditionallyClearOnPristine(): boolean;
+    /**
+     * Returns if the component should clear its value when conditionally hidden.
+     * @returns {boolean} - If the component should clear its value when conditionally hidden.
+     */
+    shouldConditionallyClear(): boolean;
+    _conditionallyClear: boolean | undefined;
+    /**
+     * Returns if the component is conditionally hidden.
+     * @returns {boolean} - If the component is conditionally hidden.
+     */
+    conditionallyHidden(): boolean;
+    _conditionallyHidden: boolean | undefined;
     set currentForm(instance: any);
     get currentForm(): any;
     _currentForm: any;