@formio/js 5.1.0-dev.6040.debc859 → 5.1.0-dev.6042.6e62a7a

package/lib/cjs/utils/utils.js

@@ -19,7 +19,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.firstNonNil = exports.unfold = exports.bootstrapVersion = exports.uniqueKey = exports.iterateKey = exports.delay = exports.fieldData = exports.getCurrencyAffixes = exports.getNumberDecimalLimit = exports.getNumberSeparators = exports.matchInputMask = exports.unmaskValue = exports.getInputMask = exports.convertFormatToMask = exports.convertFormatToMoment = exports.convertFormatToFlatpickr = exports.getLocaleDateFormatInfo = exports.formatOffset = exports.formatDate = exports.momentDate = exports.loadZones = exports.shouldLoadZones = exports.zonesLoaded = exports.offsetDate = exports.currentTimezone = exports.isValidDate = exports.getDateSetting = exports.guid = exports.uniqueName = exports.convertStringToHTMLElement = exports.unescapeHTML = exports.removeHTML = exports.setActionProperty = exports.checkTrigger = exports.checkCondition = exports.checkJsonConditional = exports.checkCustomConditional = exports.getComponentActualValue = exports.checkSimpleConditional = exports.checkCalculated = exports.isMongoId = exports.boolValue = exports.getScriptPlugin = exports.getElementRect = exports.getPropertyValue = exports.getRandomComponentId = exports.evaluate = exports.moment = exports.ConditionOperators = exports.jsonLogic = void 0;
-exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isInsideScopingComponent = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
+exports.hasEncodedTimezone = exports.interpolateErrors = exports.getComponentSavedTypes = exports.componentValueTypes = exports._ = exports.getFocusableElements = exports.isPromise = exports.getDataParentComponent = exports.getComponentPath = exports.getComponentPathWithoutIndicies = exports.getBrowserInfo = exports.getIEBrowserVersion = exports.round = exports.getStringFromComponentPath = exports.isChildOf = exports.getArrayFromComponentPath = exports.isInputComponent = exports.interpolate = exports.Evaluator = exports.fastCloneDeep = exports.sanitize = exports.translateHTMLTemplate = exports.getContextButtons = exports.getContextComponents = exports.observeOverload = exports.withSwitch = void 0;
 const lodash_1 = __importDefault(require("lodash"));
 exports._ = lodash_1.default;
 const json_logic_js_1 = __importDefault(require("json-logic-js"));
@@ -34,6 +34,7 @@ const Evaluator_1 = require("./Evaluator");
 Object.defineProperty(exports, "Evaluator", { enumerable: true, get: function () { return Evaluator_1.Evaluator; } });
 const conditionOperators_1 = __importDefault(require("./conditionOperators"));
 exports.ConditionOperators = conditionOperators_1.default;
+const core_1 = require("@formio/core");
 const interpolate = Evaluator_1.Evaluator.interpolate;
 exports.interpolate = interpolate;
 __exportStar(require("./formUtils"), exports);
@@ -271,7 +272,7 @@ function checkSimpleConditional(component, condition, row, data, instance) {
             default:
                 result = lodash_1.default.every(conditionsResult.flat(), res => !!res);
         }
-        return show ? result : !result;
+        return (0, core_1.convertShowToBoolean)(show) ? result : !result;
     }
 }
 exports.checkSimpleConditional = checkSimpleConditional;
@@ -1593,27 +1594,6 @@ function isPromise(value) {
         && Object.prototype.toString.call(value) === '[object Promise]';
 }
 exports.isPromise = isPromise;
-/**
- * Determines if the component has a scoping parent in tree (a component which scopes its children and manages its
- * changes by itself, e.g. EditGrid)
- * @param {Component} componentInstance - The component to check for the scoping parent.
- * @param {boolean} firstPass - Whether it is the first pass of the function
- * @returns {boolean|*} - TRUE if the component has a scoping parent; FALSE otherwise
- */
-function isInsideScopingComponent(componentInstance, firstPass = true) {
-    if (!firstPass && (componentInstance === null || componentInstance === void 0 ? void 0 : componentInstance.hasScopedChildren)) {
-        return true;
-    }
-    const dataParent = getDataParentComponent(componentInstance);
-    if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.hasScopedChildren) {
-        return true;
-    }
-    else if (dataParent === null || dataParent === void 0 ? void 0 : dataParent.parent) {
-        return isInsideScopingComponent(dataParent.parent, false);
-    }
-    return false;
-}
-exports.isInsideScopingComponent = isInsideScopingComponent;
 /**
  * Returns all the focusable elements within the provided dom element.
  * @param {HTMLElement} element - The element to get the focusable elements from.
@@ -1666,3 +1646,18 @@ const interpolateErrors = (component, errors, interpolateFn) => {
     });
 };
 exports.interpolateErrors = interpolateErrors;
+/**
+ * Checks if a string has timezone information encoded in it
+ * Example: 2024-01-01T00:00:00Z -> true
+ * Example: 2024-01-01T00:00:00+03:00 -> true
+ * Example: 2011-05-03T00:00:00 -> false
+ * @param {string} value the string value to check
+ * @returns {boolean} if value has encoded timezone
+ */
+function hasEncodedTimezone(value) {
+    if (typeof value !== 'string') {
+        return false;
+    }
+    return (value.substring(value.length - 1) === 'z' || value.substring(value.length - 1) === 'Z' || value.match(/[+|-][0-9]{2}:[0-9]{2}$/));
+}
+exports.hasEncodedTimezone = hasEncodedTimezone;

package/lib/cjs/widgets/CalendarWidget.js

@@ -286,6 +286,11 @@ class CalendarWidget extends InputWidget_1.default {
             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
+        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 && !zonesLoading) {
@@ -453,7 +458,7 @@ 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.loadZones() || this.settings.skipOffset) {
                     return Flatpickr.formatDate(date, format);
                 }
                 const currentValue = new Date(this.getValue());

package/lib/mjs/Element.d.ts

@@ -170,10 +170,11 @@ export default class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text: string | Array<string>, ...args: any[]): string;
+    t(text: string | Array<string>, data: any, ...args: any[]): string;
     /**
      * Alias to create a text node.
      * @param {string} text - The text to create.

package/lib/mjs/Element.js

@@ -1,10 +1,11 @@
 import EventEmitter from './EventEmitter';
 import { Formio } from './Formio';
 import * as FormioUtils from './utils/utils';
-import { I18n } from './utils/i18n';
+import { I18n } from '@formio/core';
 import _ from 'lodash';
 import moment from 'moment';
 import maskInput from '@formio/vanilla-text-mask';
+import enTranslation from './translations/en';
 /**
  * The root component for all elements within the Form.io renderer.
  */
@@ -38,7 +39,7 @@ export default class Element {
         if (this.options?.language) {
             this.options.i18n.language = this.options.language;
         }
-        this.options.i18next = this.i18next = this.options.i18next || I18n.init(this.options.i18n);
+        this.options.i18next = this.i18next = this.options.i18next || I18n.init({ en: enTranslation, ...this.options.i18n });
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          * @type {EventEmitter}
@@ -385,11 +386,12 @@ export default class Element {
     /**
      * Translate a text using the i18n system.
      * @param {string|Array<string>} text - The i18n identifier.
+     * @param {any} data - contextual data object containing data, component, row, etc.
      * @param {...any} args - The arguments to pass to the i18n translation.
      * @returns {string} - The translated text.
      */
-    t(text, ...args) {
-        return this.i18next ? this.i18next.t(text, ...args) : text;
+    t(text, data, ...args) {
+        return this.i18next ? this.i18next.t(text, data, ...args) : text;
     }
     /**
      * Alias to create a text node.

package/lib/mjs/Webform.d.ts

@@ -45,7 +45,7 @@
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -586,7 +586,7 @@ export type FormOptions = {
     /**
      * - The translation file for this rendering.
      */
-    i18n?: {
+    enTranslation?: {
         [key: string]: string;
     } | undefined;
     /**

package/lib/mjs/Webform.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import moment from 'moment';
 import { compareVersions } from 'compare-versions';
 import EventEmitter from './EventEmitter';
-import i18nDefaults from './i18n';
+import enTranslation from './translations/en';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
@@ -95,7 +95,7 @@ function getOptions(options) {
  * @property {number} [saveDraftThrottle] - The throttle for the save draft feature.
  * @property {boolean} [readOnly] - Set this form to readOnly.
  * @property {boolean} [noAlerts] - Disable the alerts dialog.
- * @property {{[key: string]: string}} [i18n] - The translation file for this rendering.
+ * @property {{[key: string]: string}} [enTranslation] - The translation file for this rendering.
  * @property {string} [template] - Custom logic for creation of elements.
  * @property {boolean} [noDefaults] - Exclude default values from the settings.
  * @property {any} [fileService] - The file service for this form.
@@ -342,7 +342,7 @@ export default class Webform extends NestedDataComponent {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = _.assign(fastCloneDeep(i18nDefaults.resources.en.translation), lang);
+            var translations = _.assign(fastCloneDeep(enTranslation), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -659,7 +659,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);
@@ -1158,11 +1160,8 @@ export default class Webform extends NestedDataComponent {
             };
             errors.forEach(({ message, context, fromServer, component }, index) => {
                 const text = !component?.label || context?.hasLabel || fromServer
-                    ? this.t('alertMessage', { message: this.t(message) })
-                    : this.t('alertMessageWithLabel', {
-                        label: this.t(component?.label),
-                        message: this.t(message),
-                    });
+                    ? this.t(message)
+                    : `${this.t(component?.label)}: ${this.t(message)}`;
                 displayedErrors.push(createListItem(text, index));
             });
         }
@@ -1325,6 +1324,7 @@ export default class Webform extends NestedDataComponent {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.language,
         });
     }
     submitForm(options = {}, local = false) {

package/lib/mjs/WebformBuilder.js

@@ -1626,7 +1626,11 @@ export default class WebformBuilder extends Component {
             info.type);
     }
     hasEditTabs(type) {
-        const editTabs = getComponent(Components.components[type].editForm().components, 'tabs', true).components;
+        // If the component type does not exist then it has no edit tabs
+        if (!Components.components[type === 'custom' ? 'unknown' : type]) {
+            return false;
+        }
+        const editTabs = getComponent(Components.components[type === 'custom' ? 'unknown' : type].editForm().components, 'tabs', true).components;
         const hiddenEditTabs = _.filter(_.get(this.options, `editForm.${type}`, []), 'ignore');
         return _.intersectionBy(editTabs, hiddenEditTabs, 'key').length !== editTabs.length;
     }

package/lib/mjs/Wizard.d.ts

@@ -106,6 +106,7 @@ declare class Wizard extends Webform {
     onChange(flags: any, changed: any, modified: any, changes: any): void;
     checkValidity(data: any, dirty: any, row: any, currentPageOnly: any, childErrors?: any[]): any;
     focusOnComponent(key: any): void | Promise<void>;
+    triggerButtonCaptcha(page: any): void;
 }
 declare namespace Wizard {
     let setBaseUrl: any;

package/lib/mjs/Wizard.js

@@ -594,7 +594,7 @@ export default class Wizard extends Webform {
             }
             this.redraw().then(() => {
                 this.checkData(this.submission.data);
-                this.triggerCaptcha(this.currentPanel.components);
+                this.triggerCaptcha(this.currentPage.components);
                 const errors = this.submitted ? this.validate(this.localData, { dirty: true }) : this.validateCurrentPage();
                 if (this.alert) {
                     this.showErrors(errors, true, true);
@@ -660,6 +660,7 @@ export default class Wizard extends Webform {
     beforeSubmit() {
         const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
+            this.triggerButtonCaptcha(page);
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
@@ -718,7 +719,10 @@ export default class Wizard extends Webform {
     validateCurrentPage(flags = {}) {
         const components = this.currentPage?.components.map((component) => component.component);
         // Accessing the parent ensures the right instance (whether it's the parent Wizard or a nested Wizard) performs its validation
-        return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
+        if (this.currentPage?.parent) {
+            return this.currentPage?.parent.validateComponents(components, this.root.data, flags);
+        }
+        return this.currentPage?.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -930,6 +934,22 @@ export default class Wizard extends Webform {
         }
         return super.focusOnComponent(key);
     }
+    triggerButtonCaptcha(page) {
+        if (!page.components) {
+            return;
+        }
+        let captchaComponent;
+        page.eachComponent((component) => {
+            if (/^(re)?captcha$/.test(component.component.type) &&
+                component.component.eventType === 'buttonClick' &&
+                component.component.buttonKey === 'submit') {
+                captchaComponent = component;
+            }
+        });
+        if (captchaComponent) {
+            captchaComponent.verify(`submitClick`);
+        }
+    }
 }
 Wizard.setBaseUrl = Formio.setBaseUrl;
 Wizard.setApiUrl = Formio.setApiUrl;

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

@@ -119,13 +119,6 @@ declare class Component extends Element {
      */
     paths: import('@formio/core').ComponentPaths;
     _path: string;
-    /**
-     * Determines if this component is conditionally hidden. Should generally not be set outside of conditional logic pipeline.
-     * This is necessary because of clearOnHide behavior that only clears when conditionally hidden - we need to track
-     * conditionallyHidden separately from "regular" visibility.
-     */
-    _parentConditionallyHidden: any;
-    _conditionallyHidden: any;
     /**
      * Determines if this component is visible, or not.
      */
@@ -170,6 +163,18 @@ 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;
@@ -231,14 +236,25 @@ declare class Component extends Element {
      * @returns {boolean} - Whether the component is visible or not.
      */
     get visible(): boolean;
-    get conditionallyHidden(): any;
+    get logicallyHidden(): any;
+    _logicallyHidden: any;
     /**
-     * Evaluates whether the component is conditionally hidden (as opposed to intentionally hidden, e.g. via the `hidden` component schema property).
-     * @param {object} data - The data object to evaluate the condition against.
-     * @param {object} row - The row object to evaluate the condition against.
-     * @returns {boolean} - Whether the component is conditionally hidden.
+     * 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.
      */
-    checkConditionallyHidden(data?: object, row?: object): boolean;
+    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;
@@ -789,6 +805,10 @@ declare class Component extends Element {
      * @returns {void}
      */
     setElementInvalid(element: HTMLElement, invalid: boolean): void;
+    /**
+     * Clear any conditionally hidden components for this component only.
+     */
+    clearComponentOnHide(): void;
     /**
      * Clears the components data if it is conditionally hidden AND clearOnHide is set to true for this component.
      */
@@ -893,7 +913,20 @@ declare class Component extends Element {
      */
     deleteValue(): void;
     getCustomDefaultValue(defaultValue: any): any;
-    get shouldAddDefaultValue(): any;
+    /**
+     * Returns if a component has a default value set.
+     * @returns {boolean} - TRUE if a default value is set.
+     */
+    get hasDefaultValue(): boolean;
+    /**
+     * Determine if we should add a default value for this component.
+     * @returns {boolean} - TRUE if a default value should be set
+     */
+    get shouldAddDefaultValue(): boolean;
+    /**
+     * Get the default value of this component.
+     * @returns {*} - The default value for this component.
+     */
     get defaultValue(): any;
     /**
      * Get the input value of this component.
@@ -1003,9 +1036,10 @@ declare class Component extends Element {
      * @param {boolean} dirty - If the component is dirty.
      * @param {boolean} ignoreCondition - If conditions for the component should be ignored when checking validity.
      * @param {*} row - Contextual row data for this component.
+     * @param {*} options - Additional options for validation.
      * @returns {string} - The message to show when the component is invalid.
      */
-    invalidMessage(data: any, dirty: boolean, ignoreCondition: boolean, row: any): string;
+    invalidMessage(data: any, dirty: boolean, ignoreCondition: boolean, row: any, options?: any): string;
     /**
      * Returns if the component is valid or not.
      * @param {*} data - The data to check if the component is valid.
@@ -1067,6 +1101,7 @@ declare class Component extends Element {
      * @returns {void|boolean} - TRUE if no check should be performed on the component.
      */
     checkData(data?: any, flags?: any, row?: any): void | boolean;
+    checkingData: boolean | undefined;
     checkModal(errors?: any[], dirty?: boolean): void;
     get validationValue(): any;
     isEmpty(value?: any): any;