@formio/js 5.0.0-dev.5646.8734cf4 → 5.0.0-dev.5650.cd53187

package/lib/cjs/widgets/CalendarWidget.d.ts

@@ -26,8 +26,7 @@ export default class CalendarWidget extends InputWidget {
     timezonesUrl: string;
     /**
      * Load the timezones.
-     *
-     * @return {boolean} TRUE if the zones are loading, FALSE otherwise.
+     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
      */
     loadZones(): boolean;
     attach(input: any): Promise<any>;
@@ -71,18 +70,18 @@ export default class CalendarWidget extends InputWidget {
     get dateTimeFormat(): string;
     get dateFormat(): any;
     /**
-     * Return the date value.
-     *
-     * @param date
-     * @param format
-     * @return {string}
+     * Return the date value as a string.
+     * @param {string|Date} date - The date object or a date string that is momentjs compatible.
+     * @param {string} format - The DateParser code format.
+     * @param {boolean} [useTimezone] - If the timezone should be used.
+     * @returns {string} - Returns the formatted date string.
      */
-    getDateValue(date: any, format: any, useTimezone: any): string;
+    getDateValue(date: string | Date, format: string, useTimezone?: boolean | undefined): string;
     isValueISO8601(value: any): any;
     /**
      * Set the selected date value.
-     *
-     * @param value
+     * @param {*} value - The value to set.
+     * @returns {void}
      */
     setValue(value: any): void;
     getValueAsString(value: any, format: any): string;

package/lib/cjs/widgets/CalendarWidget.js

@@ -56,8 +56,7 @@ class CalendarWidget extends InputWidget_1.default {
     }
     /**
      * Load the timezones.
-     *
-     * @return {boolean} TRUE if the zones are loading, FALSE otherwise.
+     * @returns {boolean} TRUE if the zones are loading, FALSE otherwise.
      */
     loadZones() {
         const timezone = this.timezone;
@@ -103,14 +102,8 @@ class CalendarWidget extends InputWidget_1.default {
         this.settings.dateFormat = (0, utils_1.convertFormatToFlatpickr)(this.settings.dateFormat);
         this.settings.position = 'auto center';
         this.settings.onChange = () => {
-            if (this.settings.allowInput) {
-                if (this.settings.isManuallyOverriddenValue && this.settings.enableTime) {
-                    this.calendar._input.value = this.settings.manualInputValue;
-                }
-                else {
-                    this.settings.manualInputValue = '';
-                }
-                this.settings.isManuallyOverriddenValue = false;
+            if (this.settings.allowInput && this.settings.enableTime) {
+                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
             }
             this.emit('update');
         };
@@ -119,8 +112,7 @@ class CalendarWidget extends InputWidget_1.default {
             this.hook('onCalendarClose');
             this.closedOn = Date.now();
             if (this.settings.allowInput && this.settings.enableTime) {
-                this.calendar._input.value = this.settings.manualInputValue || this.calendar._input.value;
-                this.settings.isManuallyOverriddenValue = false;
+                this.calendar._input.value = this.settings.isManuallyOverriddenValue ? this.settings.manualInputValue : this.calendar.altInput.value;
                 this.emit('update');
             }
             if (this.settings.wasDefaultValueChanged) {
@@ -132,7 +124,7 @@ class CalendarWidget extends InputWidget_1.default {
             }
         };
         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']}/flatpickr.min.css` }
         ], true);
         if (this.component.shortcutButtons) {
             this.component.shortcutButtons = this.component.shortcutButtons.filter((btn) => btn.label && btn.onClick);
@@ -150,7 +142,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)
+            return Formio_1.Formio.requireLibrary('flatpickr', 'flatpickr', `${Formio_1.Formio.cdn['flatpickr']}/flatpickr.min.js`, true)
                 .then((Flatpickr) => {
                 var _a;
                 if (((_a = this.component.shortcutButtons) === null || _a === void 0 ? void 0 : _a.length) && ShortcutButtonsPlugin) {
@@ -160,7 +152,7 @@ class CalendarWidget extends InputWidget_1.default {
                 if (this._input) {
                     const { locale } = this.settings;
                     if (locale && locale.length >= 2 && locale !== 'en') {
-                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr-${locale}`, `${Formio_1.Formio.cdn['flatpickr-formio']}/l10n/flatpickr-${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
+                        return Formio_1.Formio.requireLibrary(`flatpickr-${locale}`, `flatpickr.l10ns.${locale}`, `${Formio_1.Formio.cdn['flatpickr']}/l10n/${locale}.js`, true).then(() => this.initFlatpickr(Flatpickr));
                     }
                     else {
                         this.initFlatpickr(Flatpickr);
@@ -255,11 +247,11 @@ class CalendarWidget extends InputWidget_1.default {
         return lodash_1.default.get(this.settings, 'format', DEFAULT_FORMAT);
     }
     /**
-     * Return the date value.
-     *
-     * @param date
-     * @param format
-     * @return {string}
+     * Return the date value as a string.
+     * @param {string|Date} date - The date object or a date string that is momentjs compatible.
+     * @param {string} format - The DateParser code format.
+     * @param {boolean} [useTimezone] - If the timezone should be used.
+     * @returns {string} - Returns the formatted date string.
      */
     getDateValue(date, format, useTimezone) {
         if (useTimezone) {
@@ -269,8 +261,7 @@ class CalendarWidget extends InputWidget_1.default {
     }
     /**
      * Return the value of the selected date.
-     *
-     * @return {*}
+     * @returns {*} - The value of the selected date.
      */
     getValue() {
         // Standard output format.
@@ -292,8 +283,8 @@ class CalendarWidget extends InputWidget_1.default {
     }
     /**
      * Set the selected date value.
-     *
-     * @param value
+     * @param {*} value - The value to set.
+     * @returns {void}
      */
     setValue(value) {
         const saveAsText = (this.settings.saveAs === 'text');
@@ -360,9 +351,14 @@ class CalendarWidget extends InputWidget_1.default {
         this.calendar = new Flatpickr(this._input, Object.assign(Object.assign({}, this.settings), { disableMobile: true }));
         this.addEventListener(this.calendar.altInput, 'input', (event) => {
             if (this.settings.allowInput && this.settings.currentValue !== event.target.value) {
+                if (event.target.mask) {
+                    event.target.mask.textMaskInputElement.update();
+                }
                 this.settings.manualInputValue = event.target.value;
+                this._input.value = this.settings.manualInputValue;
                 this.settings.isManuallyOverriddenValue = true;
                 this.settings.currentValue = event.target.value;
+                this.emit('update');
             }
             if (event.target.value === '' && this.calendar.selectedDates.length > 0) {
                 this.settings.wasDefaultValueChanged = true;
@@ -373,6 +369,18 @@ class CalendarWidget extends InputWidget_1.default {
                 this.settings.wasDefaultValueChanged = false;
             }
         });
+        if (this.calendar.daysContainer) {
+            this.calendar.daysContainer.addEventListener('click', () => {
+                this.settings.isManuallyOverriddenValue = false;
+                this.calendar.updateValue(false);
+            });
+        }
+        if (this.calendar.timeContainer) {
+            this.calendar.timeContainer.addEventListener('click', () => {
+                this.settings.isManuallyOverriddenValue = false;
+                this.calendar.updateValue(false);
+            });
+        }
         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.
@@ -399,6 +407,10 @@ 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;
+            // If we have manually overridden the value then we shouldn't call setDate because this will fill the input mask
+            if (this.settings.isManuallyOverriddenValue) {
+                return;
+            }
             const activeElement = this.settings.shadowRoot ? this.settings.shadowRoot.activeElement : document.activeElement;
             const relatedTarget = event.relatedTarget ? event.relatedTarget : activeElement;
             if (!(isIEBrowser && !relatedTarget) && !this.isCalendarElement(relatedTarget)) {

package/lib/mjs/CDN.d.ts

@@ -10,10 +10,11 @@ declare class CDN {
         bootstrap: string;
         bootstrap4: string;
         bootstrap5: string;
+        bootswatch: string;
         'bootstrap-icons': string;
         ckeditor: string;
+        dragula: string;
         flatpickr: string;
-        'flatpickr-formio': string;
         'font-awesome': string;
         grid: string;
         'moment-timezone': string;

package/lib/mjs/CDN.js

@@ -10,13 +10,14 @@ class CDN {
         this.libs = {
             'js': '',
             'ace': '1.4.12',
-            'bootstrap': '5.3.2',
+            'bootstrap': '5.3.3',
             'bootstrap4': '4.6.2',
-            'bootstrap5': '5.3.2',
+            'bootstrap5': '5.3.3',
+            'bootswatch': '5.3.3',
             'bootstrap-icons': '1.11.1',
             'ckeditor': '19.0.0',
-            'flatpickr': '4.6.8',
-            'flatpickr-formio': '4.6.13-formio.3',
+            'dragula': '3.7.3',
+            'flatpickr': '4.6.13',
             'font-awesome': '4.7.0',
             'grid': 'latest',
             'moment-timezone': 'latest',
@@ -60,7 +61,8 @@ class CDN {
         if (lib) {
             url += `/${lib}`;
         }
-        if (version && version !== 'latest') {
+        // Only attach the version if this is the hosted cdn.
+        if (cdnUrl.match(/cdn\.(test-)?form.io/) && version && version !== 'latest') {
             url += `/${version}`;
         }
         return url;

package/lib/mjs/Element.d.ts

@@ -22,20 +22,17 @@ export default class Element {
     i18next: any;
     /**
      * An instance of the EventEmitter class to handle the emitting and registration of events.
-     *
      * @type {EventEmitter}
      */
     events: EventEmitter;
     defaultMask: any[] | null;
     /**
      * Conditional to show or hide helplinks in editForm
-     *
      * @type {*|boolean}
      */
     helplinks: any | boolean;
     /**
      * Register for a new event within this component.
-     *
      * @example
      * let component = new BaseComponent({
      *   type: 'textfield',
@@ -45,212 +42,205 @@ export default class Element {
      * component.on('componentChange', (changed) => {
      *   console.log('this element is changed.');
      * });
-     *
-     *
      * @param {string} event - The event you wish to register the handler for.
-     * @param {function} cb - The callback handler to handle this event.
+     * @param {Function} cb - The callback handler to handle this event.
      * @param {boolean} [internal] - This is an internal event handler.
      * @param {boolean} [once] - This event should only fire once.
+     * @returns {EventEmitter | void} - The event emitter instance.
      */
-    on(event: string, cb: Function, internal?: boolean | undefined, once?: boolean | undefined): EventEmitter | undefined;
+    on(event: string, cb: Function, internal?: boolean | undefined, once?: boolean | undefined): EventEmitter | void;
     /**
      * Register for a new single-fire event within this component.
-     *
      * @param {string} event - The event you wish to register the handler for.
-     * @param {function} cb - The callback handler to handle this event.
+     * @param {Function} cb - The callback handler to handle this event.
+     * @param {boolean} internal - This is an internal event handler.
+     * @returns {EventEmitter} - The event emitter instance.
      */
-    once(event: string, cb: Function, internal: any): EventEmitter | undefined;
+    once(event: string, cb: Function, internal: boolean): EventEmitter;
     /**
      * Allow catching any event.
-     *
-     * @param cb
-     * @returns {this}
+     * @param {Function} cb - The callback handler to handle this event.
+     * @returns {EventEmitter | void} - The event emitter instance.
      */
-    onAny(cb: any): this;
+    onAny(cb: Function): EventEmitter | void;
     /**
      * Removes the listener that will be fired when any event is emitted.
-     *
-     * @param cb
-     * @returns {this}
+     * @param {Function} cb - The callback handler to handle this event.
+     * @returns {EventEmitter | void} - The event emitter instance.
      */
-    offAny(cb: any): this;
+    offAny(cb: Function): EventEmitter | void;
     /**
      * Removes a listener for a certain event. Not passing the 2nd arg will remove all listeners for that event.
-     *
      * @param {string} event - The event you wish to register the handler for.
-     * @param {function|undefined} cb - The callback handler to handle this event.
+     * @param {Function | undefined} cb - The callback handler to handle this event.
      */
     off(event: string, cb: Function | undefined): void;
     /**
      * Emit a new event.
-     *
      * @param {string} event - The event to emit.
-     * @param {Object} data - The data to emit with the handler.
+     * @param {object} data - The data to emit with the handler.
      */
-    emit(event: string, ...data: Object): void;
+    emit(event: string, ...data: object): void;
     /**
      * Check if the component has an event handler set up for the event.
-     *
      * @param {string} event - The event name.
-     * @returns {boolean}
+     * @returns {boolean} - TRUE if the event is registered, FALSE otherwise.
      */
     hasEventHandler(event: string): boolean;
     /**
      * Wrapper method to add an event listener to an HTML element.
-     *
-     * @param obj
-     *   The DOM element to add the event to.
-     * @param type
-     *   The event name to add.
-     * @param func
-     *   The callback function to be executed when the listener is triggered.
-     * @param persistent
-     *   If this listener should persist beyond "destroy" commands.
+     * @param {HtmlElement} obj - The DOM element to add the event to.
+     * @param {string} type - The event name to add.
+     * @param {Function} func - The callback function to be executed when the listener is triggered.
+     * @param {boolean} persistent - If this listener should persist beyond "destroy" commands.
+     * @param {boolean} capture - If this listener should be executed in the capture phase.
+     * @returns {void | this} - The instance of the element.
      */
-    addEventListener(obj: any, type: any, func: any, persistent: any, capture: any): this | undefined;
+    addEventListener(obj: HtmlElement, type: string, func: Function, persistent: boolean, capture: boolean): void | this;
     /**
      * Remove an event listener from the object.
-     *
-     * @param obj
-     * @param type
+     * @param {HTMLElement} obj - The DOM element to remove the event from.
+     * @param {string} type - The event name to remove.
+     * @param {Function} func - The callback function to remove.
+     * @returns {this | void} - The instance of the element.
      */
-    removeEventListener(obj: any, type: any, func?: null): this | undefined;
+    removeEventListener(obj: HTMLElement, type: string, func?: Function): this | void;
     removeEventListeners(): void;
     removeAllEvents(includeExternal: any): void;
     teardown(): void;
     /**
      * Removes all event listeners attached to this component.
+     * @param {boolean} all - If all events should be removed, including external events.
      */
     destroy(all?: boolean): void;
     /**
      * Append an HTML DOM element to a container.
-     *
-     * @param element
-     * @param container
+     * @param {HTMLElement} element - The DOM element to append.
+     * @param {HTMLElement} container - The DOM element that is the container of the element getting appended.
+     * @returns {this} - The instance of the element.
      */
-    appendTo(element: any, container: any): this;
+    appendTo(element: HTMLElement, container: HTMLElement): this;
     /**
      * Prepend an HTML DOM element to a container.
-     *
      * @param {HTMLElement} element - The DOM element to prepend.
      * @param {HTMLElement} container - The DOM element that is the container of the element getting prepended.
+     * @returns {this} - The instance of the element.
      */
     prependTo(element: HTMLElement, container: HTMLElement): this;
     /**
      * Removes an HTML DOM element from its bounding container.
-     *
      * @param {HTMLElement} element - The element to remove.
      * @param {HTMLElement} container - The DOM element that is the container of the element to remove.
+     * @returns {this} - The instance of the element.
      */
     removeChildFrom(element: HTMLElement, container: HTMLElement): this;
     /**
      * Alias for document.createElement.
-     *
      * @param {string} type - The type of element to create
-     * @param {Object} attr - The element attributes to add to the created element.
+     * @param {object} attr - The element attributes to add to the created element.
      * @param {Various} children - Child elements. Can be a DOM Element, string or array of both.
-     *
-     * @return {HTMLElement} - The created element.
+     * @returns {HTMLElement} - The created element.
      */
-    ce(type: string, attr: Object, children?: Various): HTMLElement;
+    ce(type: string, attr: object, children?: Various): HTMLElement;
     /**
      * Append different types of children.
-     *
-     * @param child
+     * @param {HTMLElement} element - The element to append to.
+     * @param {HTMLElement} child - The child element to append.
+     * @returns {this} - The instance of the element.
      */
-    appendChild(element: any, child: any): this;
+    appendChild(element: HTMLElement, child: HTMLElement): this;
     /**
      * Creates a new input mask placeholder.
      * @param {HTMLElement} mask - The input mask.
      * @returns {string} - The placeholder that will exist within the input as they type.
      */
     maskPlaceholder(mask: HTMLElement): string;
-    get placeholderChar(): any;
+    /**
+     * Get the placeholder character for the input mask.
+     * @returns {string} - The placeholder character.
+     */
+    get placeholderChar(): string;
     /**
      * Sets the input mask for an input.
-     *
      * @param {HTMLElement} input - The html input to apply the mask to.
-     * @param {String} inputMask - The input mask to add to this input.
-     * @param {Boolean} usePlaceholder - Set the mask placeholder on the input.
+     * @param {string} inputMask - The input mask to add to this input.
+     * @param {boolean} usePlaceholder - Set the mask placeholder on the input.
      */
     setInputMask(input: HTMLElement, inputMask: string, usePlaceholder: boolean): void;
     /**
      * Translate a text using the i18n system.
-     *
      * @param {string|Array<string>} text - The i18n identifier.
-     * @param {Object} params - The i18n parameters to use for translation.
+     * @param {...any} args - The arguments to pass to the i18n translation.
+     * @returns {string} - The translated text.
      */
-    t(text: string | Array<string>, ...args: any[]): any;
+    t(text: string | Array<string>, ...args: any[]): string;
     /**
      * Alias to create a text node.
-     * @param text
-     * @returns {Text}
+     * @param {string} text - The text to create.
+     * @returns {HtmlElement} - The created text node.
      */
-    text(text: any): Text;
+    text(text: string): HtmlElement;
     /**
      * Adds an object of attributes onto an element.
      * @param {HtmlElement} element - The element to add the attributes to.
-     * @param {Object} attr - The attributes to add to the input element.
+     * @param {object} attr - The attributes to add to the input element.
      */
-    attr(element: HtmlElement, attr: Object): void;
+    attr(element: HtmlElement, attr: object): void;
     /**
      * Determines if an element has a class.
      *
      * Taken from jQuery https://j11y.io/jquery/#v=1.5.0&fn=jQuery.fn.hasClass
+     * @param {HTMLElement} element - The element to check for the class.
+     * @param {string} className - The class to check for.
+     * @returns {boolean} - TRUE if the element has the class, FALSE otherwise.
      */
-    hasClass(element: any, className: any): boolean;
+    hasClass(element: HTMLElement, className: string): boolean;
     /**
      * Adds a class to a DOM element.
-     *
-     * @param element
-     *   The element to add a class to.
-     * @param className
-     *   The name of the class to add.
+     * @param {HTMLElement} element - The element to add a class to.
+     * @param {string} className - The name of the class to add.
+     * @returns {this} - The instance of the element.
      */
-    addClass(element: any, className: any): this;
+    addClass(element: HTMLElement, className: string): this;
     /**
      * Remove a class from a DOM element.
-     *
-     * @param element
-     *   The DOM element to remove the class from.
-     * @param className
-     *   The name of the class that is to be removed.
+     * @param {HTMLElement} element - The DOM element to remove the class from.
+     * @param {string} className - The name of the class that is to be removed.
+     * @returns {this} - The instance of the element.
      */
-    removeClass(element: any, className: any): this;
+    removeClass(element: HTMLElement, className: string): this;
     /**
      * Empty's an HTML DOM element.
-     *
      * @param {HTMLElement} element - The element you wish to empty.
      */
     empty(element: HTMLElement): void;
     /**
      * Create an evaluation context for all script executions and interpolations.
-     *
-     * @param additional
-     * @return {*}
+     * @param {object} additional - Additional context to apply to the evaluation context.
+     * @returns {*} - The evaluation context.
      */
-    evalContext(additional: any): any;
+    evalContext(additional: object): any;
     /**
      * Performs an interpolation using the evaluation context of this component.
-     *
-     * @param string
-     * @param data
-     * @return {XML|string|*|void}
+     * @param {string} string - The string to interpolate.
+     * @param {object} data - The data to use in the interpolation.
+     * @param {object} options - The options to pass to the interpolation.
+     * @returns {XML|string|*|void} - The interpolated string.
      */
-    interpolate(string: any, data: any, options?: {}): XML | string | any | void;
+    interpolate(string: string, data: object, options?: object): XML | string | any | void;
     /**
      * Performs an evaluation using the evaluation context of this component.
-     *
-     * @param func
-     * @param args
-     * @param ret
-     * @param tokenize
-     * @return {*}
+     * @param {string|Function|object} func - The function or string to evaluate.
+     * @param {object} args - The arguments to pass to the evaluation.
+     * @param {string} ret - The name of the variable within the evaluation context to return.
+     * @param {boolean} interpolate - Determines if it should replace all {{ }} token references with actual data.
+     * @param {import('@formio/core').EvaluatorOptions} options - The options to pass to the evaluation.
+     * @returns {*} - The result of the evaluation.
      */
-    evaluate(func: any, args: any, ret: any, tokenize: any): any;
+    evaluate(func: string | Function | object, args: object, ret: string, interpolate: boolean, options?: import('@formio/core').EvaluatorOptions): any;
     /**
      * Allow for options to hook into the functionality of this renderer.
-     * @return {*}
+     * @returns {*} - The result of the hook function.
      */
     hook(...args: any[]): any;
 }