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

package/lib/cjs/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/cjs/Element.js

@@ -29,10 +29,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
 const Formio_1 = require("./Formio");
 const FormioUtils = __importStar(require("./utils/utils"));
-const i18n_1 = require("./utils/i18n");
+const core_1 = require("@formio/core");
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const vanilla_text_mask_1 = __importDefault(require("@formio/vanilla-text-mask"));
+const en_1 = __importDefault(require("./translations/en"));
 /**
  * The root component for all elements within the Form.io renderer.
  */
@@ -67,7 +68,7 @@ class Element {
         if ((_a = this.options) === null || _a === void 0 ? void 0 : _a.language) {
             this.options.i18n.language = this.options.language;
         }
-        this.options.i18next = this.i18next = this.options.i18next || i18n_1.I18n.init(this.options.i18n);
+        this.options.i18next = this.i18next = this.options.i18next || core_1.I18n.init(Object.assign({ en: en_1.default }, this.options.i18n));
         /**
          * An instance of the EventEmitter class to handle the emitting and registration of events.
          * @type {EventEmitter}
@@ -415,11 +416,12 @@ 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/cjs/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/cjs/Webform.js

@@ -7,7 +7,7 @@ const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const compare_versions_1 = require("compare-versions");
 const EventEmitter_1 = __importDefault(require("./EventEmitter"));
-const i18n_1 = __importDefault(require("./i18n"));
+const en_1 = __importDefault(require("./translations/en"));
 const Formio_1 = require("./Formio");
 const Components_1 = __importDefault(require("./components/Components"));
 const NestedDataComponent_1 = __importDefault(require("./components/_classes/nesteddata/NestedDataComponent"));
@@ -100,7 +100,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.
@@ -370,7 +370,7 @@ class Webform extends NestedDataComponent_1.default {
      */
     addLanguage(code, lang, active = false) {
         if (this.i18next) {
-            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(i18n_1.default.resources.en.translation), lang);
+            var translations = lodash_1.default.assign((0, utils_1.fastCloneDeep)(en_1.default), lang);
             this.i18next.addResourceBundle(code, 'translation', translations, true, true);
             if (active) {
                 this.language = code;
@@ -661,7 +661,9 @@ class Webform extends NestedDataComponent_1.default {
         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);
@@ -1157,11 +1159,8 @@ class Webform extends NestedDataComponent_1.default {
             };
             errors.forEach(({ message, context, fromServer, component }, index) => {
                 const text = !(component === null || component === void 0 ? void 0 : component.label) || (context === null || context === void 0 ? void 0 : context.hasLabel) || fromServer
-                    ? this.t('alertMessage', { message: this.t(message) })
-                    : this.t('alertMessageWithLabel', {
-                        label: this.t(component === null || component === void 0 ? void 0 : component.label),
-                        message: this.t(message),
-                    });
+                    ? this.t(message)
+                    : `${this.t(component === null || component === void 0 ? void 0 : component.label)}: ${this.t(message)}`;
                 displayedErrors.push(createListItem(text, index));
             });
         }
@@ -1322,6 +1321,7 @@ class Webform extends NestedDataComponent_1.default {
             userAgent: navigator.userAgent,
             pathName: window.location.pathname,
             onLine: navigator.onLine,
+            language: this.language,
         });
     }
     submitForm(options = {}, local = false) {

package/lib/cjs/WebformBuilder.js

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

package/lib/cjs/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/cjs/Wizard.js

@@ -602,7 +602,7 @@ class Wizard extends Webform_1.default {
             }
             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);
@@ -670,6 +670,7 @@ class Wizard extends Webform_1.default {
     beforeSubmit() {
         const pages = this.getPages({ all: true });
         return Promise.all(pages.map((page) => {
+            this.triggerButtonCaptcha(page);
             page.options.beforeSubmit = true;
             return page.beforeSubmit();
         }));
@@ -726,10 +727,13 @@ class Wizard extends Webform_1.default {
         }
     }
     validateCurrentPage(flags = {}) {
-        var _a, _b;
+        var _a, _b, _c, _d;
         const components = (_a = this.currentPage) === null || _a === void 0 ? void 0 : _a.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 (_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent.validateComponents(components, this.root.data, flags);
+        if ((_b = this.currentPage) === null || _b === void 0 ? void 0 : _b.parent) {
+            return (_c = this.currentPage) === null || _c === void 0 ? void 0 : _c.parent.validateComponents(components, this.root.data, flags);
+        }
+        return (_d = this.currentPage) === null || _d === void 0 ? void 0 : _d.validateComponents(components, this.root ? this.root.data : this.data, flags);
     }
     emitPrevPage() {
         this.emit('prevPage', { page: this.page, submission: this.submission });
@@ -942,6 +946,22 @@ class Wizard extends Webform_1.default {
         }
         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`);
+        }
+    }
 }
 exports.default = Wizard;
 Wizard.setBaseUrl = Formio_1.Formio.setBaseUrl;

package/lib/cjs/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;