@formio/js 5.0.0-rc.43 → 5.0.0-rc.45

package/lib/mjs/Webform.js

@@ -1,12 +1,13 @@
 import _ from 'lodash';
 import moment from 'moment';
 import { compareVersions } from 'compare-versions';
+import { Component } from '@formio/core';
 import EventEmitter from './EventEmitter';
 import i18nDefaults from './i18n';
 import { Formio } from './Formio';
 import Components from './components/Components';
 import NestedDataComponent from './components/_classes/nesteddata/NestedDataComponent';
-import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, interpolateErrors } from './utils/utils';
+import { fastCloneDeep, currentTimezone, unescapeHTML, getStringFromComponentPath, searchComponents, convertStringToHTMLElement, getArrayFromComponentPath, } from './utils/utils';
 import { eachComponent } from './utils/formUtils';
 // Initialize the available forms.
 Formio.forms = {};
@@ -34,32 +35,113 @@ function getOptions(options) {
     }
     return options;
 }
+/**
+ * Represents a JSON value.
+ * @typedef {(string | number | boolean | null | JSONArray | JSONObject)} JSON
+ */
+/**
+ * Represents a JSON array.
+ * @typedef {Array<JSON>} JSONArray
+ */
+/**
+ * Represents a JSON object.
+ * @typedef {{[key: string]: JSON}} JSONObject
+ */
+/**
+ * @typedef {Object} FormioHooks
+ * @property {function} [beforeSubmit]
+ * @property {function} [beforeCancel]
+ * @property {function} [beforeNext]
+ * @property {function} [beforePrev]
+ * @property {function} [attachComponent]
+ * @property {function} [setDataValue]
+ * @property {function} [addComponents]
+ * @property {function} [addComponent]
+ * @property {function} [customValidation]
+ * @property {function} [attachWebform]
+ */
+/**
+ * @typedef {Object} SanitizeConfig
+ * @property {string[]} [addAttr]
+ * @property {string[]} [addTags]
+ * @property {string[]} [allowedAttrs]
+ * @property {string[]} [allowedTags]
+ * @property {string[]} [allowedUriRegex]
+ * @property {string[]} [addUriSafeAttr]
+ */
+/**
+ * @typedef {Object} ButtonSettings
+ * @property {boolean} [showPrevious]
+ * @property {boolean} [showNext]
+ * @property {boolean} [showCancel]
+ * @property {boolean} [showSubmit]
+ */
+/**
+ * @typedef {Object} FormOptions
+ * @property {boolean} [saveDraft] - Enable the save draft feature.
+ * @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 {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.
+ * @property {EventEmitter} [events] - The EventEmitter for this form.
+ * @property {string} [language] - The language to render this form in.
+ * @property {{[key: string]: string}} [i18next] - The i18next configuration for this form.
+ * @property {boolean} [viewAsHtml] - View the form as raw HTML.
+ * @property {'form' | 'html' | 'flat' | 'builder' | 'pdf'} [renderMode] - The render mode for this form.
+ * @property {boolean} [highlightErrors] - Highlight any errors on the form.
+ * @property {string} [componentErrorClass] - The error class for components.
+ * @property {any} [templates] - The templates for this form.
+ * @property {string} [iconset] - The iconset for this form.
+ * @property {Component[]} [components] - The components for this form.
+ * @property {{[key: string]: boolean}} [disabled] - Disabled components for this form.
+ * @property {boolean} [showHiddenFields] - Show hidden fields.
+ * @property {{[key: string]: boolean}} [hide] - Hidden components for this form.
+ * @property {{[key: string]: boolean}} [show] - Components to show for this form.
+ * @property {Formio} [formio] - The Formio instance for this form.
+ * @property {string} [decimalSeparator] - The decimal separator for this form.
+ * @property {string} [thousandsSeparator] - The thousands separator for this form.
+ * @property {FormioHooks} [hooks] - The hooks for this form.
+ * @property {boolean} [alwaysDirty] - Always be dirty.
+ * @property {boolean} [skipDraftRestore] - Skip restoring a draft.
+ * @property {'form' | 'wizard' | 'pdf'} [display] - The display for this form.
+ * @property {string} [cdnUrl] - The CDN url for this form.
+ * @property {boolean} [flatten] - Flatten the form.
+ * @property {boolean} [sanitize] - Sanitize the form.
+ * @property {SanitizeConfig} [sanitizeConfig] - The sanitize configuration for this form.
+ * @property {ButtonSettings} [buttonSettings] - The button settings for this form.
+ * @property {Object} [breadCrumbSettings] - The breadcrumb settings for this form.
+ * @property {boolean} [allowPrevious] - Allow the previous button (for Wizard forms).
+ * @property {string[]} [wizardButtonOrder] - The order of the buttons (for Wizard forms).
+ * @property {boolean} [showCheckboxBackground] - Show the checkbox background.
+ * @property {number} [zoom] - The zoom for PDF forms.
+ */
 /**
  * Renders a Form.io form within the webpage.
  */
 export default class Webform extends NestedDataComponent {
+    /**
+     * @type {FormOptions} - the options for this Webform.
+     */
+    options;
     /**
      * Creates a new Form instance.
      *
-     * @param {Object} options - The options to create a new form instance.
-     * @param {boolean} options.saveDraft - Set this if you would like to enable the save draft feature.
-     * @param {boolean} options.saveDraftThrottle - The throttle for the save draft feature.
-     * @param {boolean} options.readOnly - Set this form to readOnly
-     * @param {boolean} options.noAlerts - Set to true to disable the alerts dialog.
-     * @param {boolean} options.i18n - The translation file for this rendering. @see https://github.com/formio/formio.js/blob/master/i18n.js
-     * @param {boolean} options.template - Provides a way to inject custom logic into the creation of every element rendered within the form.
+     * @param {HTMLElement | Object | FormOptions} [elementOrOptions] - The DOM element to render this form within or the options to create this form instance.
+     * @param {FormOptions} [options] - The options to create a new form instance.
      */
-    /* eslint-disable max-statements */
-    constructor() {
-        let element, options;
-        if (arguments[0] instanceof HTMLElement || arguments[1]) {
-            element = arguments[0];
-            options = arguments[1];
+    constructor(elementOrOptions, options) {
+        let element, formOptions;
+        if (elementOrOptions instanceof HTMLElement || options) {
+            element = elementOrOptions;
+            formOptions = options;
         }
         else {
-            options = arguments[0];
+            formOptions = elementOrOptions;
         }
-        super(null, getOptions(options));
+        super(null, getOptions(formOptions));
         this.setElement(element);
         // Keep track of all available forms globally.
         Formio.forms[this.id] = this;

package/lib/mjs/WebformBuilder.d.ts

@@ -0,0 +1,126 @@
+export default class WebformBuilder extends Component {
+    constructor(...args: any[]);
+    dragulaLib: any;
+    builderHeight: number;
+    schemas: {};
+    repeatablePaths: any[];
+    sideBarScroll: any;
+    sideBarScrollOffset: any;
+    dragDropEnabled: boolean;
+    builder: any;
+    groups: {};
+    groupOrder: any[];
+    webform: any;
+    pathComponentsMapping: {};
+    arrayDataComponentPaths: any[];
+    nestedDataComponents: any[];
+    arrayDataComponents: any[];
+    allowDrop(): boolean;
+    addExistingResourceFields(resources: any): void;
+    attachTooltip(component: any, title: any): import("tippy.js").Instance<import("tippy.js").Props>[];
+    attachComponent(element: any, component: any): any;
+    createForm(options: any): any;
+    /**
+     * Called when everything is ready.
+     *
+     * @returns {Promise} - Wait for webform to be ready.
+     */
+    get ready(): Promise<any>;
+    get defaultGroups(): {
+        basic: {
+            title: string;
+            weight: number;
+            default: boolean;
+        };
+        advanced: {
+            title: string;
+            weight: number;
+        };
+        layout: {
+            title: string;
+            weight: number;
+        };
+        data: {
+            title: string;
+            weight: number;
+        };
+        premium: {
+            title: string;
+            weight: number;
+        };
+    };
+    redraw(): Promise<void> | Promise<boolean>;
+    set form(value: any);
+    get form(): 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 component
+     */
+    findNamespaceRoot(component: any): any;
+    recurseNamespace(component: any): any;
+    render(): any;
+    attach(element: any): Promise<any>;
+    searchFields(searchString?: string): void;
+    orderComponents(groupInfo: any, foundComponents: any): void;
+    updateDragAndDrop(): any;
+    initDragula(): void;
+    dragula: any;
+    getComponentInfo(key: any, group: any): any;
+    getComponentsPath(component: any, parent: any): string;
+    onDrop(element: any, target: any, source: any, sibling: any): any;
+    setForm(form: any): any;
+    keyboardActionsEnabled: any;
+    populateRecaptchaSettings(form: any): void;
+    removeComponent(component: any, parent: any, original: any, componentInstance: any): boolean | undefined;
+    replaceDoubleQuotes(data: any, fieldsToRemoveDoubleQuotes?: any[]): any;
+    updateComponent(component: any, changed: any): void;
+    findRepeatablePaths(): any[];
+    highlightInvalidComponents(): void;
+    /**
+     * Called when a new component is saved.
+     *
+     * @param parent
+     * @param component
+     * @return {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;
+    saved: boolean | undefined;
+    showPreview: any;
+    editComponent(component: any, parent: any, isNew: any, isJsonEdit: any, original: any, flags?: {}): void;
+    editForm: Webform | undefined;
+    preview: Webform | null | undefined;
+    componentEdit: any;
+    dialog: any;
+    updateComponentKey(data: any): any;
+    moveComponent(component: any): void;
+    selectedComponent: any;
+    moveHandler: (e: any) => void;
+    updateComponentPlacement(direction: any): void;
+    stopMoving(comp: any): void;
+    addNewComponent(element: any): void;
+    /**
+     * Creates copy of component schema and stores it under sessionStorage.
+     * @param {Component} component
+     * @return {*}
+     */
+    copyComponent(component: Component): any;
+    /**
+     * Paste copied component after the current component.
+     * @param {Component} component
+     * @return {*}
+     */
+    pasteComponent(component: Component): any;
+    isParentSaveChildMethod(parentComp: any): boolean;
+    getParentElement(element: any): any;
+    addBuilderComponentInfo(component: any): any;
+    addBuilderGroup(name: any, group: any): void;
+    updateBuilderGroup(name: any, group: any): void;
+    generateKey(info: any): any;
+}
+import Component from './components/_classes/component/Component';
+import Webform from './Webform';

package/lib/mjs/WebformBuilder.js

@@ -157,7 +157,7 @@ export default class WebformBuilder extends Component {
                 return element;
             }
             // Attach container and component to element for later reference.
-            const containerElement = element.querySelector(`[ref="${component.component.key}-container"]`) || element;
+            const containerElement = element.querySelector(`[${this._referenceAttributeName}="${component.component.key}-container"]`) || element;
             containerElement.formioContainer = container;
             containerElement.formioComponent = component;
             // Add container to draggable list.
@@ -1009,7 +1009,7 @@ export default class WebformBuilder extends Component {
             };
             const fieldsToRemoveDoubleQuotes = ['label', 'tooltip'];
             this.preview.form.components.forEach(component => this.replaceDoubleQuotes(component, fieldsToRemoveDoubleQuotes));
-            const previewElement = this.componentEdit.querySelector('[ref="preview"]');
+            const previewElement = this.componentEdit.querySelector(`[${this._referenceAttributeName}="preview"]`);
             if (previewElement) {
                 this.setContent(previewElement, this.preview.render(), null, sanitizeConfig);
                 this.preview.attach(previewElement);
@@ -1176,7 +1176,7 @@ export default class WebformBuilder extends Component {
         this.emit('saveComponent', schema, originalComp, parentComponentSchema, path, index, isNew, originalComponentSchema);
     }
     attachEditComponentControls(component, parent, isNew, original, ComponentClass) {
-        const cancelButtons = this.componentEdit.querySelectorAll('[ref="cancelButton"]');
+        const cancelButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="cancelButton"]`);
         cancelButtons.forEach((cancelButton) => {
             this.editForm.addEventListener(cancelButton, 'click', (event) => {
                 event.preventDefault();
@@ -1186,7 +1186,7 @@ export default class WebformBuilder extends Component {
                 this.highlightInvalidComponents();
             });
         });
-        const removeButtons = this.componentEdit.querySelectorAll('[ref="removeButton"]');
+        const removeButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="removeButton"]`);
         removeButtons.forEach((removeButton) => {
             this.editForm.addEventListener(removeButton, 'click', (event) => {
                 event.preventDefault();
@@ -1198,7 +1198,7 @@ export default class WebformBuilder extends Component {
                 this.highlightInvalidComponents();
             });
         });
-        const saveButtons = this.componentEdit.querySelectorAll('[ref="saveButton"]');
+        const saveButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="saveButton"]`);
         saveButtons.forEach((saveButton) => {
             this.editForm.addEventListener(saveButton, 'click', (event) => {
                 event.preventDefault();
@@ -1214,7 +1214,7 @@ export default class WebformBuilder extends Component {
                 this.saveComponent(component, parent, isNew, original);
             });
         });
-        const previewButtons = this.componentEdit.querySelectorAll('[ref="previewButton"]');
+        const previewButtons = this.componentEdit.querySelectorAll(`[${this._referenceAttributeName}="previewButton"]`);
         previewButtons.forEach((previewButton) => {
             this.editForm.addEventListener(previewButton, 'click', (event) => {
                 event.preventDefault();
@@ -1227,7 +1227,7 @@ export default class WebformBuilder extends Component {
                     showPreview: this.showPreview,
                     helplinks: this.helplinks,
                 }));
-                this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+                this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
                 this.attachEditComponentControls(component, parent, isNew, original, ComponentClass);
             });
         });
@@ -1326,7 +1326,7 @@ export default class WebformBuilder extends Component {
         }));
         this.dialog = this.createModal(this.componentEdit, _.get(this.options, 'dialogAttr', {}));
         // This is the attach step.
-        this.editForm.attach(this.componentEdit.querySelector('[ref="editForm"]'));
+        this.editForm.attach(this.componentEdit.querySelector(`[${this._referenceAttributeName}="editForm"]`));
         this.hook('editFormWrapper');
         this.updateComponent(componentCopy);
         this.editForm.on('change', (event) => {

package/lib/mjs/Wizard.d.ts

@@ -0,0 +1,106 @@
+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[];
+    components: any[];
+    originalComponents: any[];
+    page: number;
+    currentPanel: any;
+    currentPanels: any[] | null;
+    currentNextPage: number;
+    _seenPages: number[];
+    subWizards: any[];
+    allPages: any[];
+    lastPromise: Promise<void>;
+    enabledIndex: number;
+    editMode: boolean;
+    originalOptions: any;
+    isLastPage(): any;
+    getPages(args?: {}): any[];
+    get hasExtraPages(): boolean;
+    get localData(): any;
+    isClickableDefined: any;
+    isSecondInit: boolean | undefined;
+    get wizardKey(): string;
+    set wizard(form: Object);
+    get wizard(): Object;
+    get buttons(): {};
+    get buttonOrder(): any;
+    get renderContext(): {
+        disableWizardSubmit: any;
+        wizardKey: string;
+        isBreadcrumbClickable: any;
+        isSubForm: boolean;
+        panels: any[];
+        buttons: {};
+        currentPage: number;
+        buttonOrder: any;
+    };
+    prepareNavigationSettings(ctx: any): any;
+    prepareHeaderSettings(ctx: any, headerType: any): any;
+    redrawNavigation(): void;
+    redrawHeader(): void;
+    attach(element: any): Promise<void>;
+    scrollPageToTop(): void;
+    isBreadcrumbClickable(): any;
+    isAllowPrevious(): any;
+    handleNaviageteOnEnter(event: any): void;
+    handleSaveOnEnter(event: any): void;
+    attachNav(): void;
+    emitWizardPageSelected(index: any): void;
+    attachHeader(): void;
+    detachNav(): void;
+    detachHeader(): void;
+    transformPages(): void;
+    getSortedComponents({ components, originalComponents }: {
+        components: any;
+        originalComponents: any;
+    }): any[];
+    findRootPanel(component: any): any;
+    setRootPanelId(component: any): void;
+    establishPages(data?: any): any[];
+    updatePages(): void;
+    addComponents(): void;
+    setPage(num: any): Promise<void>;
+    pageFieldLogic(page: any): void;
+    get currentPage(): any;
+    getNextPage(): number | null;
+    getPreviousPage(): number;
+    beforeSubmit(): Promise<any[]>;
+    beforePage(next: any): Promise<any>;
+    emitNextPage(): void;
+    nextPage(): Promise<void>;
+    validateCurrentPage(flags?: {}): any;
+    emitPrevPage(): void;
+    prevPage(): Promise<void>;
+    cancel(noconfirm: any): Promise<void> | Promise<number>;
+    getPageIndexByKey(key: any): number;
+    get schema(): Object;
+    setComponentSchema(): void;
+    setForm(form: any, flags: any): any;
+    onSetForm(clonedForm: any, initialForm: any): void;
+    setEditMode(submission: any): void;
+    setValue(submission: any, flags: {} | undefined, ignoreEstablishment: any): any;
+    isClickable(page: any, index: any): any;
+    hasButton(name: any, nextPage?: number | null): any;
+    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): any;
+}
+declare namespace Wizard {
+    let setBaseUrl: any;
+    let setApiUrl: any;
+    let setAppUrl: any;
+}
+export default Wizard;
+import Webform from './Webform';

package/lib/mjs/WizardBuilder.d.ts

@@ -0,0 +1,50 @@
+export default class WizardBuilder extends WebformBuilder {
+    _form: {
+        components: {
+            title: string;
+            label: string;
+            type: string;
+            key: string;
+            components: any[];
+        }[];
+    };
+    page: number;
+    removeComponent(component: any, parent: any, original: any): boolean | undefined;
+    allowDrop(element: any): boolean;
+    get pages(): any;
+    get currentPage(): any;
+    setForm(value: any): void;
+    set form(value: {
+        components: {
+            title: string;
+            label: string;
+            type: string;
+            key: string;
+            components: any[];
+        }[];
+    });
+    get form(): {
+        components: {
+            title: string;
+            label: string;
+            type: string;
+            key: string;
+            components: any[];
+        }[];
+    };
+    navigationDragula: any;
+    rebuild(): Promise<void> | Promise<boolean>;
+    addPage(page: any): Promise<void> | Promise<boolean>;
+    removePage(pageIndex: any, componentIndex: any): Promise<void> | Promise<boolean> | undefined;
+    onReorder(element: any, _target: any, _source: any, sibling: any): Promise<void> | undefined;
+    setPage(index: any): Promise<void> | Promise<boolean> | undefined;
+    getPageConfig(index: any, components?: any[]): {
+        title: string;
+        label: string;
+        type: string;
+        key: string;
+        components: any[];
+    };
+    pasteComponent(component: any): any;
+}
+import WebformBuilder from './WebformBuilder';

package/lib/mjs/addons/FormioAddon.d.ts

@@ -0,0 +1,19 @@
+export default class FormioAddon extends Element {
+    static get info(): {
+        supportedComponents: never[];
+        name: string;
+        components: never[];
+        label: string;
+        defaultSettings: {};
+    };
+    constructor(settings: any, componentInstance: any);
+    get defaultSettings(): {};
+    get element(): any;
+    namespace: string;
+    component: any;
+    settings: any;
+    attach(element: any): Promise<void>;
+    _element: any;
+    destroy(): void;
+}
+import Element from '../Element';