@formio/js 5.1.0-dev.6094.c49181e → 5.1.0-dev.6096.8115e4f

package/lib/cjs/widgets/CalendarWidget.js

@@ -51,6 +51,29 @@ 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;
@@ -62,7 +85,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.convertFormatToDayjs)(this.valueFormat);
+        this.valueMomentFormat = (0, utils_1.convertFormatToMoment)(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);
@@ -226,9 +249,9 @@ class CalendarWidget extends InputWidget_1.default {
      */
     getDateValue(date, format, useTimezone) {
         if (useTimezone) {
-            return (0, utils_1.dayjsDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToDayjs)(format));
+            return (0, utils_1.momentDate)(date, this.valueFormat, this.timezone).format((0, utils_1.convertFormatToMoment)(format));
         }
-        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToDayjs)(format));
+        return (0, moment_1.default)(date).format((0, utils_1.convertFormatToMoment)(format));
     }
     /**
      * Return the value of the selected date.
@@ -260,7 +283,7 @@ class CalendarWidget extends InputWidget_1.default {
     setValue(value) {
         const saveAsText = (this.settings.saveAs === 'text');
         if (!this.calendar) {
-            value = value ? (0, utils_1.formatDate)(value, (0, utils_1.convertFormatToDayjs)(this.settings.format), this.timezone, (0, utils_1.convertFormatToDayjs)(this.valueMomentFormat)) : value;
+            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;
             return super.setValue(value);
         }
         // If the component is a textfield that does not have timezone information included in the string value then skip
@@ -268,9 +291,10 @@ class CalendarWidget extends InputWidget_1.default {
         if (this.component.type === 'textfield' && !(0, utils_1.hasEncodedTimezone)(value)) {
             this.settings.skipOffset = true;
         }
+        const zonesLoading = this.loadZones();
         if (value) {
-            if (!saveAsText && this.settings.readOnly) {
-                this.calendar.setDate((0, utils_1.dayjsDate)(value, this.valueFormat, this.timezone).format(), false);
+            if (!saveAsText && this.settings.readOnly && !zonesLoading) {
+                this.calendar.setDate((0, utils_1.momentDate)(value, this.valueFormat, this.timezone).format(), false);
             }
             else if (this.isValueISO8601(value)) {
                 this.calendar.setDate(value, false);
@@ -287,9 +311,9 @@ class CalendarWidget extends InputWidget_1.default {
         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.convertFormatToDayjs)(valueFormat)).format((0, utils_1.convertFormatToDayjs)(valueFormat));
+            return (0, moment_1.default)(value, (0, utils_1.convertFormatToMoment)(valueFormat)).format((0, utils_1.convertFormatToMoment)(valueFormat));
         }
-        return (0, utils_1.formatDate)(value, inputFormat, this.timezone, (0, utils_1.convertFormatToDayjs)(valueFormat));
+        return (0, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));
     }
     setErrorClasses(hasErrors) {
         if (!this.input) {
@@ -382,7 +406,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.convertFormatToDayjs)(this.valueFormat)).toDate() : inputValue;
+                const dateValue = inputValue ? (0, moment_1.default)(this.calendar.input.value, (0, utils_1.convertFormatToMoment)(this.valueFormat)).toDate() : inputValue;
                 this.calendar.setDate(dateValue, true, this.settings.altFormat);
             }
             else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
@@ -434,14 +458,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.settings.skipOffset) {
+                if (!this.settings.enableTime || this.loadZones() || this.settings.skipOffset) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());
                 if (currentValue.toString() === date.toString()) {
-                    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), new Date(this.componentValue), format, this.timezone);
                 }
-                return (0, utils_1.formatOffset)(Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
+                return (0, utils_1.formatOffset)(this.timezonesUrl, Flatpickr.formatDate.bind(Flatpickr), date, format, this.timezone);
             }
             return Flatpickr.formatDate(date, format);
         };

package/lib/mjs/Webform.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
 import i18nDefaults from './i18n';
@@ -7,7 +8,6 @@ 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 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;
@@ -1317,7 +1317,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', dayjs().utcOffset()), 10),
+            offset: parseInt(_.get(this, '_submission.metadata.offset', moment().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

@@ -1054,6 +1054,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;
@@ -1145,6 +1155,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/components/button/Button.d.ts

@@ -9,7 +9,7 @@ export default class ButtonComponent extends Field {
     };
     static savedValueTypes(schema: any): string[];
     constructor(component: any, options: any, data: any);
-    filesUploading: any[];
+    filesUploading: number;
     get inputInfo(): any;
     get labelInfo(): {
         hidden: boolean;

package/lib/mjs/components/button/Button.js

@@ -34,7 +34,7 @@ export default class ButtonComponent extends Field {
     }
     constructor(component, options, data) {
         super(component, options, data);
-        this.filesUploading = [];
+        this.filesUploading = 0;
     }
     get defaultSchema() {
         return ButtonComponent.schema();
@@ -142,16 +142,13 @@ export default class ButtonComponent extends Field {
                 this.addClass(this.refs.buttonMessageContainer, 'has-error');
                 this.setContent(this.refs.buttonMessage, resultMessage);
             }, true);
-            this.on('fileUploadingStart', (filePromise) => {
-                this.filesUploading.push(filePromise);
+            this.on('fileUploadingStart', () => {
+                this.filesUploading++;
                 this.disabled = true;
                 this.setDisabled(this.refs.button, this.disabled);
             }, true);
-            this.on('fileUploadingEnd', (filePromise) => {
-                const index = this.filesUploading.indexOf(filePromise);
-                if (index !== -1) {
-                    this.filesUploading.splice(index, 1);
-                }
+            this.on('fileUploadingEnd', () => {
+                this.filesUploading--;
                 this.disabled = this.shouldDisabled ? true : false;
                 this.setDisabled(this.refs.button, this.disabled);
             }, true);
@@ -247,7 +244,7 @@ export default class ButtonComponent extends Field {
         }
     }
     get shouldDisabled() {
-        return super.shouldDisabled || !!this.filesUploading?.length || this.isDisabledOnInvalid;
+        return super.shouldDisabled || this.filesUploading > 0 || this.isDisabledOnInvalid;
     }
     attach(element) {
         this.loadRefs(element, {

package/lib/mjs/components/datetime/DateTime.d.ts

@@ -17,7 +17,7 @@ export default class DateTimeComponent extends Input {
     };
     static savedValueTypes(schema: any): string[];
     get emptyValue(): string;
-    get dayjsFormat(): string;
+    get momentFormat(): string;
     createWrapper(): boolean;
     checkValidity(data: any, dirty: any, rowData: any): boolean;
     getValueAsString(value: any, options: any): any;

package/lib/mjs/components/datetime/DateTime.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import dayjs from 'dayjs';
+import moment from 'moment';
 import FormioUtils from '../../utils';
 import { componentValueTypes, fastCloneDeep, getComponentSavedTypes } from '../../utils/utils';
 import Input from '../_classes/input/Input';
@@ -147,8 +147,8 @@ export default class DateTimeComponent extends Input {
     get emptyValue() {
         return '';
     }
-    get dayjsFormat() {
-        return FormioUtils.convertFormatToDayjs(this.component.format);
+    get momentFormat() {
+        return FormioUtils.convertFormatToMoment(this.component.format);
     }
     isEmpty(value = this.dataValue) {
         if (value && (value.toString() === 'Invalid Date')) {
@@ -157,14 +157,12 @@ export default class DateTimeComponent extends Input {
         return super.isEmpty(value);
     }
     formatValue(input) {
-        if (dayjs(input).isValid()) {
-            return dayjs.utc(input).toISOString();
-        }
-        return input;
+        const result = moment.utc(input).toISOString();
+        return result === 'Invalid date' ? input : result;
     }
     isEqual(valueA, valueB = this.dataValue) {
         return (this.isEmpty(valueA) && this.isEmpty(valueB))
-            || dayjs.utc(valueA).format(this.dayjsFormat) === dayjs.utc(valueB).format(this.dayjsFormat);
+            || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
     }
     createWrapper() {
         return false;
@@ -180,18 +178,18 @@ export default class DateTimeComponent extends Input {
         return super.checkValidity(data, dirty, rowData);
     }
     getValueAsString(value, options) {
-        let format = FormioUtils.convertFormatToDayjs(this.component.format);
+        let format = FormioUtils.convertFormatToMoment(this.component.format);
+        format += format.match(/z$/) ? '' : ' z';
         const timezone = this.timezone;
         if (value && !this.attached && timezone) {
-            format += format.match(/z$/) ? '' : ' z';
             if (Array.isArray(value) && this.component.multiple) {
-                return value.map(item => _.trim(FormioUtils.dayjsDate(item, format, timezone, options).format(format))).join(', ');
+                return value.map(item => _.trim(FormioUtils.momentDate(item, format, timezone, options).format(format))).join(', ');
             }
-            return _.trim(FormioUtils.dayjsDate(value, format, timezone, options).format(format));
+            return _.trim(FormioUtils.momentDate(value, format, timezone, options).format(format));
         }
         if (Array.isArray(value) && this.component.multiple) {
-            return value.map(item => _.trim(dayjs(item).format(format))).join(', ');
+            return value.map(item => _.trim(moment(item).format(format))).join(', ');
         }
-        return (value ? _.trim(dayjs(value).format(format)) : value) || '';
+        return (value ? _.trim(moment(value).format(format)) : value) || '';
     }
 }

package/lib/mjs/components/file/File.js

@@ -903,17 +903,16 @@ export default class FileComponent extends Field {
         } : false;
     }
     async uploadFile(fileToSync) {
-        const filePromise = this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
+        return await this.fileService.uploadFile(fileToSync.storage, fileToSync.file, fileToSync.name, fileToSync.dir, 
         // Progress callback
         this.updateProgress.bind(this, fileToSync), fileToSync.url, fileToSync.options, fileToSync.fileKey, fileToSync.groupPermissions, fileToSync.groupResourceId, () => {
-            this.emit('fileUploadingStart', filePromise);
+            this.emit('fileUploadingStart');
         }, 
         // Abort upload callback
         (abort) => this.abortUploads.push({
             id: fileToSync.id,
             abort,
         }), this.getMultipartOptions(fileToSync));
-        return await filePromise;
     }
     async upload() {
         if (!this.filesToSync.filesToUpload.length) {
@@ -933,7 +932,7 @@ export default class FileComponent extends Field {
                 fileToSync.message = this.t('succefullyUploaded');
                 fileInfo.originalName = fileToSync.originalName;
                 fileInfo.hash = fileToSync.hash;
-                this.emit('fileUploadingEnd', Promise.resolve(fileInfo));
+                this.emit('fileUploadingEnd');
             }
             catch (response) {
                 fileToSync.status = 'error';
@@ -943,7 +942,7 @@ export default class FileComponent extends Field {
                     : response.type === 'abort'
                         ? this.t('Request was aborted')
                         : response.toString();
-                this.emit('fileUploadingEnd', Promise.reject(response));
+                this.emit('fileUploadingEnd');
                 this.emit('fileUploadError', {
                     fileToSync,
                     response,

package/lib/mjs/providers/storage/uploadAdapter.js

@@ -24,7 +24,7 @@ class FormioUploadAdapter {
                 null,
                 null
             ];
-            const uploadPromise = this.fileService.uploadFile(...uploadParams, () => this.component.emit('fileUploadingStart', uploadPromise)).then((result) => {
+            this.fileService.uploadFile(...uploadParams, () => this.component.emit('fileUploadingStart')).then((result) => {
                 return this.fileService.downloadFile(result);
             }).then((result) => {
                 return resolve({
@@ -34,7 +34,7 @@ class FormioUploadAdapter {
                 console.warn('An Error occured while uploading file', err);
                 reject(err);
             }).finally(() => {
-                this.component.emit('fileUploadingEnd', uploadPromise);
+                this.component.emit('fileUploadingEnd');
             });
         }));
     }

package/lib/mjs/utils/utils.d.ts

@@ -164,9 +164,9 @@ export function guid(): string;
 /**
  * Return a translated date setting.
  * @param {string|Date} date - The date to translate.
- * @returns {(null|dayjs.Dayjs)} - The translated date.
+ * @returns {(null|Date)} - The translated date.
  */
-export function getDateSetting(date: string | Date): (null | dayjs.Dayjs);
+export function getDateSetting(date: string | Date): (null | Date);
 /**
  * Returns true if the date is a valid date. False otherwise.
  * @param {Date|string} date - The date to check for validity.
@@ -182,45 +182,56 @@ export function currentTimezone(): string;
  * Get an offset date provided a date object and timezone object.
  * @param {Date} date - The date to offset.
  * @param {string} timezone - The timezone to offset the date to.
- * @returns {{date: Date, abbr: string}} - The offset date.
+ * @returns {Date} - The offset date.
  */
-export function offsetDate(date: Date, timezone: string): {
-    date: Date;
-    abbr: string;
-};
+export function offsetDate(date: Date, timezone: string): Date;
+/**
+ * Returns if the zones are loaded.
+ * @returns {boolean} - TRUE if the zones are loaded; FALSE otherwise.
+ */
+export function zonesLoaded(): boolean;
 /**
- * Returns if we should handle a timezone difference.
+ * Returns if we should load the zones.
  * @param {string} timezone - The timezone to check if we should load the zones.
- * @returns {boolean} - TRUE if we should handle timezones; FALSE otherwise.
+ * @returns {boolean} - TRUE if we should load the zones; FALSE otherwise.
+ */
+export function shouldLoadZones(timezone: string): boolean;
+/**
+ * Externally load the timezone data.
+ * @param {string} url - The URL to load the timezone data from.
+ * @param {string} timezone - The timezone to load.
+ * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
  */
-export function shouldHandleTimezone(timezone: string): boolean;
+export function loadZones(url: string, timezone: string): Promise<any> | any;
 /**
- * Get the Dayjs date object for translating dates with timezones.
- * @param {string|Date} value - The value to convert into a dayjs date.
+ * Get the moment date object for translating dates with timezones.
+ * @param {string|Date} value - The value to convert into a moment date.
  * @param {string} format - The format to convert the date to.
  * @param {string} timezone - The timezone to convert the date to.
  * @param {object} options - The options object
- * @returns {dayjs.Dayjs} - The dayjs date object.
+ * @returns {Date} - The moment date object.
  */
-export function dayjsDate(value: string | Date, format: string, timezone: string, options: object): dayjs.Dayjs;
+export function momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
 /**
  * Format a date provided a value, format, and timezone object.
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
  * @param {string|Date} value - The value to format.
  * @param {string} format - The format to format the date to.
  * @param {string} timezone - The timezone to format the date to.
  * @param {string} flatPickrInputFormat - The format to use for flatpickr input.
  * @returns {string} - The formatted date.
  */
-export function formatDate(value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
+export function formatDate(timezonesUrl: string, value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
 /**
  * Pass a format function to format within a timezone.
+ * @param {string} timezonesUrl - The URL to load the timezone data from.
  * @param {Function} formatFn - The format function to use.
  * @param {Date|string} date - The date to format.
  * @param {string} format - The format to format the date to.
  * @param {string} timezone - The timezone to format the date to.
  * @returns {string} - The formatted date.
  */
-export function formatOffset(formatFn: Function, date: Date | string, format: string, timezone: string): string;
+export function formatOffset(timezonesUrl: string, formatFn: Function, date: Date | string, format: string, timezone: string): string;
 /**
  * Returns the local date format information.
  * @param {Intl.LocalesArgument} locale - The locale to get the date format for.
@@ -238,7 +249,7 @@ export function convertFormatToFlatpickr(format: string): string;
  * @param {string} format - The format to convert.
  * @returns {string} - The converted format.
  */
-export function convertFormatToDayjs(format: string): string;
+export function convertFormatToMoment(format: string): string;
 /**
  * Convert the format from the angular-datepicker module to mask format.
  * @param {string} format - The format to convert.
@@ -505,7 +516,6 @@ export namespace componentValueTypes {
     let any: string;
 }
 export function interpolateErrors(component: Component, errors: FieldError[], interpolateFn: Function): [];
-import dayjs from "dayjs";
 import ConditionOperators from './conditionOperators';
 import { Evaluator } from './Evaluator';
 export const interpolate: typeof Evaluator.interpolate;