@formio/js 5.2.3 → 5.2.4-rc.0

package/lib/cjs/widgets/CalendarWidget.js

@@ -12,7 +12,6 @@ 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;
 class CalendarWidget extends InputWidget_1.default {
-    /* eslint-disable camelcase */
     static get defaultSettings() {
         return {
             type: 'calendar',
@@ -35,10 +34,9 @@ class CalendarWidget extends InputWidget_1.default {
             timezone: '',
             disable: [],
             minDate: '',
-            maxDate: ''
+            maxDate: '',
         };
     }
-    /* eslint-enable camelcase */
     constructor(settings, component, instance, index) {
         super(settings, component, instance, index);
         // Change the format to map to the settings.
@@ -81,20 +79,24 @@ class CalendarWidget extends InputWidget_1.default {
         const dateFormatInfo = (0, utils_1.getLocaleDateFormatInfo)(this.settings.language);
         this.defaultFormat = {
             date: dateFormatInfo.dayFirst ? 'd/m/Y ' : 'm/d/Y ',
-            time: 'G:i K'
+            time: 'G:i K',
         };
         this.closedOn = 0;
-        this.valueFormat = (this.settings.saveAs === 'date') ? ISO_8601_FORMAT : this.settings.dateFormat || ISO_8601_FORMAT;
+        this.valueFormat =
+            this.settings.saveAs === 'date'
+                ? ISO_8601_FORMAT
+                : this.settings.dateFormat || ISO_8601_FORMAT;
         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);
+        if (this.settings.maxDate || this.settings.minDate) {
+            this.settings.allowInvalidPreload = true;
+        }
         this.settings.disable = this.disabledDates;
         this.settings.disableWeekends ? this.settings.disable.push(this.disableWeekends) : '';
         this.settings.disableWeekdays ? this.settings.disable.push(this.disableWeekdays) : '';
         this.settings.disableFunction ? this.settings.disable.push(this.disableFunction) : '';
-        this.settings.wasDefaultValueChanged = false;
-        this.settings.defaultValue = '';
         this.settings.manualInputValue = '';
         this.settings.isManuallyOverriddenValue = false;
         this.settings.currentValue = '';
@@ -122,23 +124,22 @@ class CalendarWidget extends InputWidget_1.default {
                 this.settings.isManuallyOverriddenValue = false;
                 this.emit('update');
             }
-            if (this.settings.wasDefaultValueChanged) {
-                this.calendar._input.value = this.settings.defaultValue;
-                this.settings.wasDefaultValueChanged = false;
-            }
             if (this.calendar) {
                 this.emit('blur');
             }
         };
         Formio_1.Formio.requireLibrary('flatpickr-css', 'flatpickr', [
-            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` }
+            { type: 'styles', src: `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.css` },
         ], true);
         if (this.component.shortcutButtons) {
             this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);
         }
         if ((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) {
             Formio_1.Formio.requireLibrary('shortcut-buttons-flatpickr-css', 'ShortcutButtonsPlugin', [
-                { type: 'styles', src: `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/themes/light.min.css` }
+                {
+                    type: 'styles',
+                    src: `${Formio_1.Formio.cdn['shortcut-buttons-flatpickr']}/themes/light.min.css`,
+                },
             ], true);
         }
         return superAttach
@@ -149,8 +150,7 @@ class CalendarWidget extends InputWidget_1.default {
             }
         })
             .then((ShortcutButtonsPlugin) => {
-            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true)
-                .then((Flatpickr) => {
+            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr-formio']}/flatpickr.min.js`, true).then((Flatpickr) => {
                 var _a;
                 if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {
                     this.initShortcutButtonsPlugin(ShortcutButtonsPlugin);
@@ -180,7 +180,7 @@ class CalendarWidget extends InputWidget_1.default {
     }
     get disableWeekends() {
         return function (date) {
-            return (date.getDay() === 0 || date.getDay() === 6);
+            return date.getDay() === 0 || date.getDay() === 6;
         };
     }
     get disableWeekdays() {
@@ -188,7 +188,7 @@ class CalendarWidget extends InputWidget_1.default {
     }
     get disableFunction() {
         return (date) => this.evaluate(`return ${this.settings.disableFunction}`, {
-            date
+            date,
         });
     }
     get timezone() {
@@ -201,7 +201,7 @@ class CalendarWidget extends InputWidget_1.default {
         this.addEventListener(suffix, 'click', () => {
             setTimeout(() => {
                 if (this.calendar) {
-                    if (!this.calendar.isOpen && ((Date.now() - this.closedOn) > 200)) {
+                    if (!this.calendar.isOpen && Date.now() - this.closedOn > 200) {
                         this.calendar.open();
                     }
                     else if (this.calendar.isOpen) {
@@ -235,10 +235,12 @@ class CalendarWidget extends InputWidget_1.default {
                 const dateMask = /\d{4}-\d{2}-\d{2}/g;
                 const dates = item.match(dateMask);
                 if (dates && dates.length) {
-                    return dates.length === 1 ? item.match(dateMask)[0] : {
-                        from: item.match(dateMask)[0],
-                        to: item.match(dateMask)[1],
-                    };
+                    return dates.length === 1
+                        ? item.match(dateMask)[0]
+                        : {
+                            from: item.match(dateMask)[0],
+                            to: item.match(dateMask)[1],
+                        };
                 }
             });
         }
@@ -255,7 +257,9 @@ class CalendarWidget extends InputWidget_1.default {
         return format;
     }
     get dateTimeFormat() {
-        return this.settings.useLocaleSettings ? this.localeFormat : (0, utils_1.convertFormatToFlatpickr)(this.dateFormat);
+        return this.settings.useLocaleSettings
+            ? this.localeFormat
+            : (0, utils_1.convertFormatToFlatpickr)(this.dateFormat);
     }
     get dateFormat() {
         return lodash_1.default.get(this.settings, 'format', DEFAULT_FORMAT);
@@ -290,10 +294,10 @@ class CalendarWidget extends InputWidget_1.default {
         if (!(dates[0] instanceof Date)) {
             return 'Invalid Date';
         }
-        return this.getDateValue(dates[0], this.valueFormat, (this.settings.saveAs === 'date'));
+        return this.getDateValue(dates[0], this.valueFormat, this.settings.saveAs === 'date');
     }
     isValueISO8601(value) {
-        return value && (typeof value === 'string') && value.match(/-[0-9]{2}T[0-9]{2}:/);
+        return value && typeof value === 'string' && value.match(/-[0-9]{2}T[0-9]{2}:/);
     }
     /**
      * Set the selected date value.
@@ -301,11 +305,16 @@ class CalendarWidget extends InputWidget_1.default {
      * @returns {void}
      */
     setValue(value) {
-        const saveAsText = (this.settings.saveAs === 'text');
+        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)(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
+        // the timezone offset
+        this.settings.skipOffset = this.component.type === 'textfield' && !(0, utils_1.hasEncodedTimezone)(value);
         const zonesLoading = this.loadZones();
         if (value) {
             if (!saveAsText && this.settings.readOnly && !zonesLoading) {
@@ -325,7 +334,9 @@ class CalendarWidget extends InputWidget_1.default {
     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) {
+        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, utils_1.formatDate)(this.timezonesUrl, value, inputFormat, this.timezone, (0, utils_1.convertFormatToMoment)(valueFormat));
@@ -348,7 +359,7 @@ class CalendarWidget extends InputWidget_1.default {
         if (typeof value === 'string') {
             return new Date(value);
         }
-        return value.map(val => new Date(val));
+        return value.map((val) => new Date(val));
     }
     isCalendarElement(element) {
         var _a, _b, _c, _d, _e;
@@ -369,14 +380,6 @@ class CalendarWidget extends InputWidget_1.default {
                 this.settings.isManuallyOverriddenValue = true;
                 this.settings.currentValue = event.target.value;
             }
-            if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
-                this.settings.wasDefaultValueChanged = true;
-                this.settings.defaultValue = event.target.value;
-                this.calendar.clear();
-            }
-            else {
-                this.settings.wasDefaultValueChanged = false;
-            }
         });
         // Move input attributes to altInput.
         const labelledbyIds = this.calendar.input.getAttribute('aria-labelledby');
@@ -387,8 +390,11 @@ class CalendarWidget extends InputWidget_1.default {
         this._input.removeAttribute('id');
         this._input.removeAttribute('aria-labelledby');
         this._input.removeAttribute('aria-required');
-        const excludedFromMaskFormats = ['MMMM'];
-        if (!this.settings.readOnly && !lodash_1.default.some(excludedFromMaskFormats, format => lodash_1.default.includes(this.settings.format, format))) {
+        const excludedFromMaskFormats = [
+            'MMMM',
+        ];
+        if (!this.settings.readOnly &&
+            !lodash_1.default.some(excludedFromMaskFormats, (format) => lodash_1.default.includes(this.settings.format, format))) {
             // Enforce the input mask of the format.
             this.setInputMask(this.calendar._input, (0, utils_1.convertFormatToMask)(this.settings.format));
         }
@@ -400,7 +406,9 @@ class CalendarWidget extends InputWidget_1.default {
             this.calendar._input.removeEventListener('blur', originalBlurListener.handler);
             // Add the same event listener as in the original library, but with workaround for IE11 issue
             this.addEventListener(this.calendar._input, 'blur', (event) => {
-                const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
+                const activeElement = this.settings.shadowRoot
+                    ? this.settings.shadowRoot.activeElement
+                    : document.activeElement;
                 const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
                 const isInput = event.target === this.calendar._input;
                 if (isInput && !this.isCalendarElement(relatedTarget)) {
@@ -413,15 +421,22 @@ class CalendarWidget extends InputWidget_1.default {
         // Make sure we commit the value after a blur event occurs.
         this.addEventListener(this.calendar._input, 'blur', (event) => {
             var _a, _b, _c, _d;
-            const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
+            const activeElement = this.settings.shadowRoot
+                ? this.settings.shadowRoot.activeElement
+                : document.activeElement;
             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.convertFormatToMoment)(this.valueFormat)).toDate()
+                    : inputValue;
                 this.calendar.setDate(dateValue, true, this.settings.altFormat);
             }
             else if (!this.calendar.input.value && this.calendar.config.noCalendar) {
-                const value = (0, moment_1.default)({ hour: (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.defaultHour, minute: (_d = (_c = this.calendar) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultMinute }).toDate();
+                const value = (0, moment_1.default)({
+                    hour: (_b = (_a = this.calendar) === null || _a === void 0 ? void 0 : _a.config) === null || _b === void 0 ? void 0 : _b.defaultHour,
+                    minute: (_d = (_c = this.calendar) === null || _c === void 0 ? void 0 : _c.config) === null || _d === void 0 ? void 0 : _d.defaultMinute,
+                }).toDate();
                 this.calendar.setDate(value, true, this.settings.format);
             }
         });
@@ -448,15 +463,17 @@ class CalendarWidget extends InputWidget_1.default {
     }
     initShortcutButtonsPlugin(ShortcutButtonsPlugin) {
         this.settings.plugins = [
-            // eslint-disable-next-line new-cap
             ShortcutButtonsPlugin({
-                button: this.component.shortcutButtons.map((btn) => ({ label: btn.label, attributes: btn.attribute })),
+                button: this.component.shortcutButtons.map((btn) => ({
+                    label: btn.label,
+                    attributes: btn.attribute,
+                })),
                 onClick: (index) => {
                     const getValue = this.component.shortcutButtons[index].onClick;
                     const date = this.evaluate(getValue, { date: new Date() }, 'date');
                     this.calendar.setDate(date, true);
-                }
-            })
+                },
+            }),
         ];
     }
     get componentValue() {
@@ -469,8 +486,8 @@ class CalendarWidget extends InputWidget_1.default {
     getFlatpickrFormatDate(Flatpickr) {
         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.readOnly && format === this.settings.altFormat) {
+                if (!this.settings.enableTime || this.loadZones() || this.settings.skipOffset) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());

package/lib/cjs/widgets/InputWidget.js

@@ -8,7 +8,7 @@ const Element_1 = __importDefault(require("../Element"));
 class InputWidget extends Element_1.default {
     static get defaultSettings() {
         return {
-            type: 'input'
+            type: 'input',
         };
     }
     constructor(settings, component, instance, index) {
@@ -63,9 +63,11 @@ class InputWidget extends Element_1.default {
             data: this.componentInstance.rootValue,
             value: this.componentInstance.dataValue,
             t: this.t.bind(this),
-            submission: (this.componentInstance.root ? this.componentInstance.root._submission : {
-                data: this.componentInstance.rootValue
-            }),
+            submission: this.componentInstance.root
+                ? this.componentInstance.root._submission
+                : {
+                    data: this.componentInstance.rootValue,
+                },
             form: this.componentInstance.root ? this.componentInstance.root._form : {},
             options: this.options,
         }, additional));

package/lib/cjs/widgets/index.js

@@ -7,5 +7,5 @@ const InputWidget_1 = __importDefault(require("./InputWidget"));
 const CalendarWidget_1 = __importDefault(require("./CalendarWidget"));
 exports.default = {
     input: InputWidget_1.default,
-    calendar: CalendarWidget_1.default
+    calendar: CalendarWidget_1.default,
 };

package/lib/mjs/CDN.js

@@ -8,23 +8,23 @@ class CDN {
         this.baseUrl = baseUrl || CDN.defaultCDN;
         this.overrides = overrides;
         this.libs = {
-            'js': '',
-            'ace': '1.4.12',
-            'bootstrap': '5.3.3',
-            'bootstrap4': '4.6.2',
-            'bootstrap5': '5.3.3',
-            'bootswatch': '5.3.3',
+            js: '',
+            ace: '1.4.12',
+            bootstrap: '5.3.3',
+            bootstrap4: '4.6.2',
+            bootstrap5: '5.3.3',
+            bootswatch: '5.3.3',
             'bootstrap-icons': '1.11.1',
-            'ckeditor': '19.0.0',
-            'flatpickr': '4.6.8',
+            ckeditor: '19.0.0',
+            flatpickr: '4.6.8',
             'flatpickr-formio': '4.6.13-formio.3',
             'font-awesome': '4.7.0',
-            'grid': 'latest',
+            grid: 'latest',
             'moment-timezone': 'latest',
-            'quill': '2.0.0-dev.3',
+            quill: '2.0.0-dev.3',
             'shortcut-buttons-flatpickr': '0.4.0',
-            'uswds': '2.4.8',
-            'core': ''
+            uswds: '2.4.8',
+            core: '',
         };
         this.updateUrls();
     }

package/lib/mjs/Element.d.ts

@@ -1,13 +1,14 @@
 /**
  * The root component for all elements within the Form.io renderer.
+ * @property {object} options - The options for this component. Subclasses should override this type with more specific options.
  */
 export default class Element {
     constructor(options: any);
     /**
      * The options for this component.
-     * @type {{}}
+     * @type {object}
      */
-    options: {};
+    options: object;
     /**
      * The ID of this component. This value is auto-generated when the component is created, but
      * can also be provided from the component.id value passed into the constructor.

package/lib/mjs/Element.js

@@ -7,12 +7,13 @@ import { I18n } from './utils/i18n';
 import FormioUtils from './utils';
 /**
  * The root component for all elements within the Form.io renderer.
+ * @property {object} options - The options for this component. Subclasses should override this type with more specific options.
  */
 export default class Element {
     constructor(options) {
         /**
          * The options for this component.
-         * @type {{}}
+         * @type {object}
          */
         this.options = Object.assign({
             language: 'en',
@@ -20,7 +21,7 @@ export default class Element {
             componentErrorClass: 'formio-error-wrapper',
             componentWarningClass: 'formio-warning-wrapper',
             row: '',
-            namespace: 'formio'
+            namespace: 'formio',
         }, options || {});
         /**
          * The ID of this component. This value is auto-generated when the component is created, but
@@ -43,13 +44,14 @@ export default class Element {
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          * @type {EventEmitter}
          */
-        this.events = (options && options.events) ? options.events : new EventEmitter();
+        this.events = options && options.events ? options.events : new EventEmitter();
         this.defaultMask = null;
         /**
          * Conditional to show or hide helplinks in editForm
          * @type {*|boolean}
          */
-        this.helplinks = (this.options.helplinks === 'false') ? false : (this.options.helplinks || 'https://help.form.io');
+        this.helplinks =
+            this.options.helplinks === 'false' ? false : this.options.helplinks || 'https://help.form.io';
     }
     /**
      * Register for a new event within this component.
@@ -198,10 +200,10 @@ export default class Element {
             return;
         }
         this.eventHandlers.forEach((handler, index) => {
-            if ((handler.id === this.id)
-                && obj.removeEventListener
-                && (handler.type === type)
-                && (!func || handler.func === func)) {
+            if (handler.id === this.id &&
+                obj.removeEventListener &&
+                handler.type === type &&
+                (!func || handler.func === func)) {
                 obj.removeEventListener(type, handler.func);
                 indexes.push(index);
             }
@@ -212,8 +214,11 @@ export default class Element {
         return this;
     }
     removeEventListeners() {
-        this.eventHandlers.forEach(handler => {
-            if ((this.id === handler.id) && handler.type && handler.obj && handler.obj.removeEventListener) {
+        this.eventHandlers.forEach((handler) => {
+            if (this.id === handler.id &&
+                handler.type &&
+                handler.obj &&
+                handler.obj.removeEventListener) {
                 handler.obj.removeEventListener(handler.type, handler.func);
             }
         });
@@ -223,7 +228,7 @@ export default class Element {
         if (this.events) {
             _.each(this.events._events, (events, type) => {
                 _.each(events, (listener) => {
-                    if (listener && (this.id === listener.id) && (includeExternal || listener.internal)) {
+                    if (listener && this.id === listener.id && (includeExternal || listener.internal)) {
                         this.events.off(type, listener);
                     }
                 });
@@ -338,7 +343,7 @@ export default class Element {
      * @returns {string} - The placeholder that will exist within the input as they type.
      */
     maskPlaceholder(mask) {
-        return mask.map((char) => (char instanceof RegExp) ? this.placeholderChar : char).join('');
+        return mask.map((char) => (char instanceof RegExp ? this.placeholderChar : char)).join('');
     }
     /**
      * Get the placeholder character for the input mask.
@@ -366,7 +371,7 @@ export default class Element {
                     inputElement: input,
                     mask,
                     placeholderChar: this.placeholderChar,
-                    shadowRoot: this.root ? this.root.shadowRoot : null
+                    shadowRoot: this.root ? this.root.shadowRoot : null,
                 });
             }
             catch (e) {
@@ -435,7 +440,7 @@ export default class Element {
         }
         // Allow templates to intercept.
         className = ` ${className} `;
-        return ((` ${element.className} `).replace(/[\n\t\r]/g, ' ').indexOf(className) > -1);
+        return ` ${element.className} `.replace(/[\n\t\r]/g, ' ').indexOf(className) > -1;
     }
     /**
      * Adds a class to a DOM element.
@@ -498,7 +503,7 @@ export default class Element {
             instance: this,
             self: this,
             token: Formio.getToken({
-                decode: true
+                decode: true,
             }),
             options: this.options,
             config: this.root && this.root.form && this.root.form.config
@@ -516,8 +521,9 @@ export default class Element {
      * @returns {XML|string|*|void} - The interpolated string.
      */
     interpolate(string, data, options = {}) {
-        if (typeof string !== 'function' && (this.component.content || this.component.html)
-            && !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
+        if (typeof string !== 'function' &&
+            (this.component.content || this.component.html) &&
+            !FormioUtils.Evaluator.templateSettings.interpolate.test(string)) {
             string = FormioUtils.translateHTMLTemplate(String(string), (value) => this.t(value));
         }
         if (this.component.filter === string && !this.options.building) {
@@ -545,14 +551,14 @@ export default class Element {
      */
     hook() {
         const name = arguments[0];
-        if (this.options &&
-            this.options.hooks &&
-            this.options.hooks[name]) {
+        if (this.options && this.options.hooks && this.options.hooks[name]) {
             return this.options.hooks[name].apply(this, Array.prototype.slice.call(arguments, 1));
         }
         else {
             // If this is an async hook instead of a sync.
-            const fn = (typeof arguments[arguments.length - 1] === 'function') ? arguments[arguments.length - 1] : null;
+            const fn = typeof arguments[arguments.length - 1] === 'function'
+                ? arguments[arguments.length - 1]
+                : null;
             if (fn) {
                 return fn(null, arguments[1]);
             }