@formio/js 5.0.0-dev.5610.da13e39 → 5.0.0-dev.5613.3476921

package/lib/mjs/WebformBuilder.d.ts

@@ -22,6 +22,7 @@ export default class WebformBuilder extends Component {
     createForm(options: any): any;
     /**
      * Called when everything is ready.
+     *
      * @returns {Promise} - Wait for webform to be ready.
      */
     get ready(): Promise<any>;
@@ -51,15 +52,13 @@ export default class WebformBuilder extends Component {
     redraw(): Promise<void> | Promise<boolean>;
     set form(value: any);
     get form(): any;
-    get schema(): any;
     get container(): any;
     /**
      * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root
      * so we can calculate this correctly.
-     * @param {import('@formio/core').Component} component - The component to find the namespace root for.
-     * @returns {import('@formio/core').Component[]} - The components root for this namespace.
+     * @param component
      */
-    findNamespaceRoot(component: import('@formio/core').Component): import('@formio/core').Component[];
+    findNamespaceRoot(component: any): any;
     recurseNamespace(component: any): any;
     render(): any;
     attach(element: any): Promise<any>;
@@ -81,13 +80,12 @@ export default class WebformBuilder extends Component {
     highlightInvalidComponents(): void;
     /**
      * Called when a new component is saved.
-     * @param {Component} component - The component instance to save.
-     * @param {Component} parent - The parent component.
-     * @param {boolean} isNew - If this is a new component.
-     * @param {Component} original - The original component.
-     * @returns {boolean} - If the component was saved.
+     *
+     * @param parent
+     * @param component
+     * @return {boolean}
      */
-    saveComponent(component: Component, parent: Component, isNew: boolean, original: Component): boolean;
+    saveComponent(component: any, parent: any, isNew: any, original: any): boolean;
     isComponentCreated: boolean | undefined;
     emitSaveComponentEvent(schema: any, originalComp: any, parentComponentSchema: any, path: any, index: any, isNew: any, originalComponentSchema: any): void;
     attachEditComponentControls(component: any, parent: any, isNew: any, original: any, ComponentClass: any): void;
@@ -107,16 +105,16 @@ export default class WebformBuilder extends Component {
     addNewComponent(element: any): void;
     /**
      * Creates copy of component schema and stores it under sessionStorage.
-     * @param {Component} component - The component to copy.
-     * @returns {void}
+     * @param {Component} component
+     * @return {*}
      */
-    copyComponent(component: Component): void;
+    copyComponent(component: Component): any;
     /**
      * Paste copied component after the current component.
-     * @param {Component} component - The component to paste after.
-     * @returns {void}
+     * @param {Component} component
+     * @return {*}
      */
-    pasteComponent(component: Component): void;
+    pasteComponent(component: Component): any;
     isParentSaveChildMethod(parentComp: any): boolean;
     getParentElement(element: any): any;
     addBuilderComponentInfo(component: any): any;

package/lib/mjs/WebformBuilder.js

@@ -366,6 +366,7 @@ export default class WebformBuilder extends Component {
     }
     /**
      * Called when everything is ready.
+     *
      * @returns {Promise} - Wait for webform to be ready.
      */
     get ready() {
@@ -414,8 +415,7 @@ export default class WebformBuilder extends Component {
     /**
      * When a component sets its api key, we need to check if it is unique within its namespace. Find the namespace root
      * so we can calculate this correctly.
-     * @param {import('@formio/core').Component} component - The component to find the namespace root for.
-     * @returns {import('@formio/core').Component[]} - The components root for this namespace.
+     * @param component
      */
     findNamespaceRoot(component) {
         const path = getArrayFromComponentPath(component.path);
@@ -1104,24 +1104,19 @@ export default class WebformBuilder extends Component {
         let hasInvalidComponents = false;
         this.webform.everyComponent((comp) => {
             const path = comp.path;
-            const errors = comp.visibleErrors || [];
             if (repeatablePaths.includes(path)) {
-                comp.setCustomValidity(`API Key is not unique: ${comp.key}`);
+                comp.setCustomValidity(this.t('apiKey', { key: comp.key }));
                 hasInvalidComponents = true;
             }
-            else if (errors.length && errors[0].message?.startsWith('API Key is not unique')) {
-                comp.setCustomValidity('');
-            }
         });
         this.emit('builderFormValidityChange', hasInvalidComponents);
     }
     /**
      * Called when a new component is saved.
-     * @param {Component} component - The component instance to save.
-     * @param {Component} parent - The parent component.
-     * @param {boolean} isNew - If this is a new component.
-     * @param {Component} original - The original component.
-     * @returns {boolean} - If the component was saved.
+     *
+     * @param parent
+     * @param component
+     * @return {boolean}
      */
     saveComponent(component, parent, isNew, original) {
         this.editForm.detach();
@@ -1508,8 +1503,8 @@ export default class WebformBuilder extends Component {
     }
     /**
      * Creates copy of component schema and stores it under sessionStorage.
-     * @param {Component} component - The component to copy.
-     * @returns {void}
+     * @param {Component} component
+     * @return {*}
      */
     copyComponent(component) {
         if (!window.sessionStorage) {
@@ -1520,8 +1515,8 @@ export default class WebformBuilder extends Component {
     }
     /**
      * Paste copied component after the current component.
-     * @param {Component} component - The component to paste after.
-     * @returns {void}
+     * @param {Component} component
+     * @return {*}
      */
     pasteComponent(component) {
         if (!window.sessionStorage) {

package/lib/mjs/Wizard.d.ts

@@ -1,4 +1,13 @@
 declare class Wizard extends Webform {
+    /**
+     * Constructor for wizard based forms
+     * @param element Dom element to place this wizard.
+     * @param {Object} options Options object, supported options are:
+     *    - breadcrumbSettings.clickable: true (default) determines if the breadcrumb bar is clickable or not
+     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) determines if the button is shown or not
+     *    - allowPrevious: false (default) determines if the breadcrumb bar is clickable or not for visited tabs
+     */
+    constructor(...args: any[]);
     pages: any[];
     prefixComps: any[];
     suffixComps: any[];
@@ -19,9 +28,11 @@ declare class Wizard extends Webform {
     getPages(args?: {}): any[];
     get hasExtraPages(): boolean;
     get localData(): any;
+    isClickableDefined: any;
+    isSecondInit: boolean | undefined;
     get wizardKey(): string;
-    set wizard(form: object);
-    get wizard(): object;
+    set wizard(form: Object);
+    get wizard(): Object;
     get buttons(): {};
     get buttonOrder(): any;
     get renderContext(): {
@@ -36,37 +47,16 @@ declare class Wizard extends Webform {
     };
     prepareNavigationSettings(ctx: any): any;
     prepareHeaderSettings(ctx: any, headerType: any): any;
-    render(): any;
     redrawNavigation(): void;
     redrawHeader(): void;
-    /**
-     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,
-     * and emits a render event. It will initialize the wizard's index if necessary,
-     * attach event hooks, and make sure that the current page is rendered and displayed correctly.
-     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.
-     * @returns {Promise} A promise that resolves when all components have been successfully attached.
-     */
-    attach(element: HTMLElement): Promise<any>;
+    attach(element: any): Promise<void>;
     scrollPageToTop(): void;
     isBreadcrumbClickable(): any;
     isAllowPrevious(): any;
-    /**
-     * Handles navigate on 'Enter' key event in a wizard form.
-     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
-     */
-    handleNaviageteOnEnter(event: KeyboardEvent): void;
-    /**
-     * Handles save on 'Enter' key event in a wizard form.
-     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
-     */
-    handleSaveOnEnter(event: KeyboardEvent): void;
+    handleNaviageteOnEnter(event: any): void;
+    handleSaveOnEnter(event: any): void;
     attachNav(): void;
-    /**
-     * Emits an event indicating that a wizard page has been selected.
-     * @param {number} index - Index of the selected wizard page in the `pages` array.
-     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.
-     */
-    emitWizardPageSelected(index: number): void;
+    emitWizardPageSelected(index: any): void;
     attachHeader(): void;
     detachNav(): void;
     detachHeader(): void;
@@ -77,7 +67,7 @@ declare class Wizard extends Webform {
     }): any[];
     findRootPanel(component: any): any;
     setRootPanelId(component: any): void;
-    establishPages(data?: object): any[];
+    establishPages(data?: any): any[];
     updatePages(): void;
     addComponents(): void;
     setPage(num: any): Promise<void>;
@@ -94,9 +84,9 @@ declare class Wizard extends Webform {
     prevPage(): Promise<void>;
     cancel(noconfirm: any): Promise<void> | Promise<number>;
     getPageIndexByKey(key: any): number;
-    get schema(): object;
+    get schema(): Object;
     setComponentSchema(): void;
-    setForm(form: any, flags: any): Promise<any> | undefined;
+    setForm(form: any, flags: any): any;
     onSetForm(clonedForm: any, initialForm: any): void;
     setEditMode(submission: any): void;
     setValue(submission: any, flags: {} | undefined, ignoreEstablishment: any): any;
@@ -105,7 +95,7 @@ declare class Wizard extends Webform {
     pageId(page: any): any;
     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>;
+    focusOnComponent(key: any): any;
 }
 declare namespace Wizard {
     let setBaseUrl: any;

package/lib/mjs/Wizard.js

@@ -1,24 +1,24 @@
 import _ from 'lodash';
 import Webform from './Webform';
 import { Formio } from './Formio';
-import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, } from './utils/utils';
+import { fastCloneDeep, checkCondition, firstNonNil, uniqueKey, eachComponent, unescapeHTML } from './utils/utils';
 export default class Wizard extends Webform {
     /**
-     * Constructor for wizard-based forms.
-     * @param {HTMLElement | object | import('Form').FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
-     * @param {import('Form').FormOptions} [_options] - The options to create a new form instance.
-     *    - breadcrumbSettings.clickable: true (default) - determines if the breadcrumb bar is clickable.
-     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) - determines if the button is shown.
-     *    - allowPrevious: false (default) - determines if the breadcrumb bar is clickable for visited tabs.
+     * Constructor for wizard based forms
+     * @param element Dom element to place this wizard.
+     * @param {Object} options Options object, supported options are:
+     *    - breadcrumbSettings.clickable: true (default) determines if the breadcrumb bar is clickable or not
+     *    - buttonSettings.show*(Previous, Next, Cancel): true (default) determines if the button is shown or not
+     *    - allowPrevious: false (default) determines if the breadcrumb bar is clickable or not for visited tabs
      */
-    constructor(elementOrOptions = undefined, _options = undefined) {
+    constructor() {
         let element, options;
-        if (elementOrOptions instanceof HTMLElement || options) {
-            element = elementOrOptions;
-            options = _options || {};
+        if (arguments[0] instanceof HTMLElement || arguments[1]) {
+            element = arguments[0];
+            options = arguments[1] || {};
         }
         else {
-            options = elementOrOptions || {};
+            options = arguments[0] || {};
         }
         options.display = 'wizard';
         super(element, options);
@@ -90,6 +90,10 @@ export default class Wizard extends Webform {
             showSubmit: true,
             showCancel: !this.options.readOnly
         });
+        if (!this.isSecondInit) {
+            this.isClickableDefined = this.options?.breadcrumbSettings?.hasOwnProperty('clickable');
+            this.isSecondInit = true;
+        }
         this.options.breadcrumbSettings = _.defaults(this.options.breadcrumbSettings, {
             clickable: true
         });
@@ -235,13 +239,6 @@ export default class Wizard extends Webform {
             }
         }
     }
-    /**
-     * Attaches the wizard to the provided DOM element, initializes component references, sets up navigation,
-     * and emits a render event. It will initialize the wizard's index if necessary,
-     * attach event hooks, and make sure that the current page is rendered and displayed correctly.
-     * @param {HTMLElement} element - The DOM element to which the wizard will be attached.
-     * @returns {Promise} A promise that resolves when all components have been successfully attached.
-     */
     attach(element) {
         this.setElement(element);
         this.loadRefs(element, {
@@ -291,13 +288,7 @@ export default class Wizard extends Webform {
                 currentPage = page;
             }
         });
-        if (_.has(currentPage, 'component.breadcrumbClickable')) {
-            return _.get(currentPage, 'component.breadcrumbClickable');
-        }
-        if (_.has(this.options, 'breadcrumbSettings.clickable')) {
-            return this.options.breadcrumbSettings.clickable;
-        }
-        return true;
+        return this.isClickableDefined ? this.options.breadcrumbSettings.clickable : _.get(currentPage, 'component.breadcrumbClickable', true);
     }
     isAllowPrevious() {
         let currentPage = null;
@@ -308,10 +299,6 @@ export default class Wizard extends Webform {
         });
         return _.get(currentPage.component, 'allowPrevious', this.options.allowPrevious);
     }
-    /**
-     * Handles navigate on 'Enter' key event in a wizard form.
-     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
-     */
     handleNaviageteOnEnter(event) {
         if (event.keyCode === 13) {
             const clickEvent = new CustomEvent('click');
@@ -321,10 +308,6 @@ export default class Wizard extends Webform {
             }
         }
     }
-    /**
-     * Handles save on 'Enter' key event in a wizard form.
-     * @param {KeyboardEvent} event - The keyboard event object that triggered the handler.
-     */
     handleSaveOnEnter(event) {
         if (event.keyCode === 13) {
             const clickEvent = new CustomEvent('click');
@@ -359,11 +342,6 @@ export default class Wizard extends Webform {
             });
         });
     }
-    /**
-     * Emits an event indicating that a wizard page has been selected.
-     * @param {number} index - Index of the selected wizard page in the `pages` array.
-     * @fires emit - Emits the 'wizardPageSelected' event with the page object and index.
-     */
     emitWizardPageSelected(index) {
         this.emit('wizardPageSelected', this.pages[index], index);
     }
@@ -764,8 +742,7 @@ export default class Wizard extends Webform {
                     this.options.show = this.options.show || {};
                     this.options.show[item.key] = true;
                 }
-                else if (Object.prototype.hasOwnProperty.call(this.wizard, 'full')
-                    && !_.isEqual(this.originalOptions.show, this.options.show)) {
+                else if (this.wizard.hasOwnProperty('full') && !_.isEqual(this.originalOptions.show, this.options.show)) {
                     this.options.show = { ...(this.originalOptions.show || {}) };
                 }
             }

package/lib/mjs/WizardBuilder.d.ts

@@ -45,6 +45,6 @@ export default class WizardBuilder extends WebformBuilder {
         key: string;
         components: any[];
     };
-    pasteComponent(component: any): void;
+    pasteComponent(component: any): any;
 }
 import WebformBuilder from './WebformBuilder';

package/lib/mjs/addons/PasswordStrength/PasswordStrengthAddon.d.ts

@@ -680,26 +680,24 @@ export default class PasswordStrengthAddon extends FormioAddon {
     };
     /**
      * Determines is a password is secure enough to submit
-     * @returns {boolean} - returns TRUE if password is valid, FALSE if it is not.
+     * @return {boolean}
      */
     isValid(): boolean;
     /**
      * Handles the result of check and constructs a new error object or returns an amount of points to add to the current entropy
      * @param {boolean|number} valid - Determines if the validation was failed or an amount of points if it was passed
      * @param {*} validation - Validation configuration
+     * @param {string} value - Value which was validated
      * @param {string} message - Message which should be shown if validation was not passed
-     * @param {any[]} errors - The errors array (will be mutated)
-     * @returns {number} - Returns an amount of points to add to the current entropy
      */
-    handleRuleCheckResult(valid: boolean | number, validation: any, message: string, errors: any[]): number;
+    handleRuleCheckResult(valid: boolean | number, validation: any, message: string, errors: any): any;
     performChecks(value: any): {
         charactersPoolSize: number;
         errors: any[];
     };
     /**
      * Performs checks to validate password security
-     * @param {string} value - The password value to be checked.
-     * @returns {boolean} - Returns TRUE if password is strong enough, FALSE if it is not.
+     * @param {string} value - Suggested password
      */
     checkValidity(value: string): boolean;
     handleBlackListCheckResult(result: any, errors: any): void;
@@ -710,9 +708,8 @@ export default class PasswordStrengthAddon extends FormioAddon {
     /**
      * Finds the level which one the passed entropy suits
      * @param {number} entropy - Points of password's security
-     * @returns {object} - Returns the level object
      */
-    getLevel(entropy?: number): object;
+    getLevel(entropy?: number): any;
     /**
      * Update the current view of the password's security indicator
      */

package/lib/mjs/addons/PasswordStrength/PasswordStrengthAddon.js

@@ -198,7 +198,7 @@ export default class PasswordStrengthAddon extends FormioAddon {
     }
     /**
      * Determines is a password is secure enough to submit
-     * @returns {boolean} - returns TRUE if password is valid, FALSE if it is not.
+     * @return {boolean}
      */
     isValid() {
         const isValidCheck = this.settings.isValid;
@@ -215,9 +215,8 @@ export default class PasswordStrengthAddon extends FormioAddon {
      * Handles the result of check and constructs a new error object or returns an amount of points to add to the current entropy
      * @param {boolean|number} valid - Determines if the validation was failed or an amount of points if it was passed
      * @param {*} validation - Validation configuration
+     * @param {string} value - Value which was validated
      * @param {string} message - Message which should be shown if validation was not passed
-     * @param {any[]} errors - The errors array (will be mutated)
-     * @returns {number} - Returns an amount of points to add to the current entropy
      */
     handleRuleCheckResult(valid, validation, message, errors) {
         if (valid !== true) {
@@ -257,8 +256,7 @@ export default class PasswordStrengthAddon extends FormioAddon {
     }
     /**
      * Performs checks to validate password security
-     * @param {string} value - The password value to be checked.
-     * @returns {boolean} - Returns TRUE if password is strong enough, FALSE if it is not.
+     * @param {string} value - Suggested password
      */
     checkValidity(value) {
         const passwordLength = value.length;
@@ -356,7 +354,6 @@ export default class PasswordStrengthAddon extends FormioAddon {
     /**
      * Finds the level which one the passed entropy suits
      * @param {number} entropy - Points of password's security
-     * @returns {object} - Returns the level object
      */
     getLevel(entropy = this.entropy) {
         const lowestLevel = this.levels[0];

package/lib/mjs/components/Components.d.ts

@@ -258,11 +258,11 @@ export default class Components {
     static setComponent(name: any, comp: any): void;
     /**
      * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
+     *
+     * @param {Object} component - The component instance.
+     * @return {string} - The component's value path.
      */
-    static getComponentPath(component: Component): string;
+    static getComponentPath(component: Object): string;
     static create(component: any, options: any, data: any): any;
 }
 import BaseEditForm from './_classes/component/Component.form';
-import Component from './_classes/component/Component';

package/lib/mjs/components/Components.js

@@ -47,8 +47,9 @@ export default class Components {
     }
     /**
      * Return a path of component's value.
-     * @param {Component} component - The component instance.
-     * @returns {string} - The component's value path.
+     *
+     * @param {Object} component - The component instance.
+     * @return {string} - The component's value path.
      */
     static getComponentPath(component) {
         let path = '';
@@ -67,7 +68,6 @@ export default class Components {
             path += component.component.key;
             return _.trim(path, '.');
         }
-        return path;
     }
     static create(component, options, data) {
         let comp = null;