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

package/lib/mjs/components/_classes/component/fixtures/comp5.d.ts

@@ -0,0 +1,26 @@
+declare namespace _default {
+    let type: string;
+    let display: string;
+    let components: ({
+        label: string;
+        description: string;
+        tooltip: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        description?: undefined;
+        tooltip?: undefined;
+        applyMaskOn?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/_classes/component/fixtures/index.d.ts

@@ -0,0 +1,6 @@
+import comp1 from './comp1';
+import comp2 from './comp2';
+import comp3 from './comp3';
+import comp4 from './comp4';
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

package/lib/mjs/components/_classes/componentModal/ComponentModal.d.ts

@@ -0,0 +1,47 @@
+export default class ComponentModal {
+    static render(component: any, data: any, topLevel: any): any;
+    constructor(component: any, element: any, isOpened: any, currentValue: any, referenceAttributeName?: string);
+    _referenceAttributeName: string;
+    isOpened: any;
+    component: any;
+    element: any;
+    currentValue: any;
+    dataLoaded: boolean;
+    get refs(): any;
+    init(): void;
+    openModalListener: ((event: any) => void) | undefined;
+    showDialogListener: ((event: any) => void) | undefined;
+    closeModalListener: ((event: any) => void) | undefined;
+    saveModalListener: ((event: any) => void) | undefined;
+    closeDialogListener: ((event: any) => void) | undefined;
+    saveDialogListener: ((event: any) => void) | undefined;
+    setValue(value: any): void;
+    setOpenModalElement(template: any): void;
+    openModalTemplate: any;
+    get templateRefs(): {
+        modalOverlay: string;
+        modalContents: string;
+        modalClose: string;
+        openModalWrapper: string;
+        openModal: string;
+        modalSave: string;
+        modalWrapper: string;
+    };
+    loadRefs(): void;
+    removeEventListeners(): void;
+    setEventListeners(): void;
+    isValueChanged(): boolean;
+    setOpenEventListener(): void;
+    openModalHandler(event: any): void;
+    positionOverElement(): void;
+    openModal(): void;
+    updateView(): void;
+    closeModal(): void;
+    closeModalHandler(event: any): void;
+    showDialog(): void;
+    dialogElement: any;
+    dialog: any;
+    closeDialog(event: any): void;
+    saveDialog(event: any): void;
+    saveModalValueHandler(event: any): void;
+}

package/lib/mjs/components/_classes/componentModal/ComponentModal.js

@@ -8,7 +8,8 @@ export default class ComponentModal {
             children,
         });
     }
-    constructor(component, element, isOpened, currentValue) {
+    constructor(component, element, isOpened, currentValue, referenceAttributeName = 'ref') {
+        this._referenceAttributeName = referenceAttributeName;
         this.isOpened = isOpened;
         this.component = component;
         this.element = element;
@@ -142,10 +143,10 @@ export default class ComponentModal {
     showDialog() {
         this.dialogElement = this.component.ce('div');
         const dialogContent = `
-      <h3 ref="dialogHeader">${this.component.t('Do you want to clear changes?')}</h3>
+      <h3 ${this._referenceAttributeName}="dialogHeader">${this.component.t('Do you want to clear changes?')}</h3>
       <div style="display:flex; justify-content: flex-end;">
-        <button ref="dialogCancelButton" class="btn btn-secondary">${this.component.t('Cancel')}</button>
-        <button ref="dialogYesButton" class="btn btn-danger">${this.component.t('Yes, delete it')}</button>
+        <button ${this._referenceAttributeName}="dialogCancelButton" class="btn btn-secondary">${this.component.t('Cancel')}</button>
+        <button ${this._referenceAttributeName}="dialogYesButton" class="btn btn-danger">${this.component.t('Yes, delete it')}</button>
       </div>
     `;
         this.dialogElement.innerHTML = dialogContent;

package/lib/mjs/components/_classes/field/Field.d.ts

@@ -0,0 +1,5 @@
+export default class Field extends Component {
+    render(element: any): any;
+    saveCaretPosition(element: any, index: any): void;
+}
+import Component from '../component/Component';

package/lib/mjs/components/_classes/input/Input.d.ts

@@ -0,0 +1,42 @@
+export default class Input extends Multivalue {
+    constructor(component: any, options: any, data: any);
+    triggerUpdateValueAt: any;
+    get inputInfo(): {
+        id: any;
+        type: string;
+        changeEvent: string;
+        content: string;
+        attr: {
+            name: any;
+            type: any;
+            class: string;
+            lang: any;
+        };
+    };
+    get autocompleteDisableAttrName(): string;
+    get maskOptions(): any;
+    get isMultipleMasksField(): any;
+    getMaskByName(maskName: any): any;
+    setInputMask(input: any, inputMask: any): void;
+    getMaskOptions(): any;
+    getWordCount(value: any): any;
+    get remainingWords(): number;
+    get prefix(): any;
+    get suffix(): any;
+    renderElement(value: any, index: any): any;
+    setCounter(type: any, element: any, count: any, max: any): void;
+    updateValueAt(value: any, flags: any, index: any): void;
+    getValueAt(index: any): any;
+    updateValue(value: any, flags: any, index: any): boolean;
+    parseValue(value: any): any;
+    formatValue(value: any): any;
+    getWidget(index: any): any;
+    attachElement(element: any, index: any): Promise<void>;
+    /**
+     * Creates an instance of a widget for this component.
+     *
+     * @return {null}
+     */
+    createWidget(index: any): null;
+}
+import Multivalue from '../multivalue/Multivalue';

package/lib/mjs/components/_classes/input/Input.js

@@ -101,7 +101,7 @@ export default class Input extends Multivalue {
             }).trim();
             if (this.component.prefix !== calendarIcon) {
                 // converting string to HTML markup to render correctly DateTime component in portal.form.io
-                return convertStringToHTMLElement(calendarIcon, '[ref="icon"]');
+                return convertStringToHTMLElement(calendarIcon, `[${this._referenceAttributeName}="icon"]`);
             }
         }
         return this.component.suffix;

package/lib/mjs/components/_classes/list/ListComponent.d.ts

@@ -0,0 +1,18 @@
+export default class ListComponent extends Field {
+    get isSelectURL(): boolean;
+    get selectData(): any;
+    get shouldLoad(): any;
+    getTemplateKeys(): void;
+    templateKeys: any[] | undefined;
+    get requestHeaders(): any;
+    setItems(): void;
+    updateCustomItems(): void;
+    loadItems(): void;
+    getOptionTemplate(data: any, value: any, index: any): any;
+    itemTemplate(data: any, value: any, index: any): any;
+    handleLoadingError(err: any): void;
+    loading: boolean | undefined;
+    networkError: boolean | undefined;
+    updateItems(searchInput: any, forceUpdate: any): void;
+}
+import Field from '../field/Field';

package/lib/mjs/components/_classes/list/ListComponent.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/mjs/components/_classes/list/editForm/ListComponent.edit.data.d.ts

@@ -0,0 +1,189 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    weight: number;
+    tooltip: string;
+    key: string;
+    defaultValue: string;
+    label: string;
+    dataSrc: string;
+    placeholder?: undefined;
+    conditional?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+    calculateValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    weight: number;
+    label: string;
+    placeholder: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            in?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+    calculateValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    label: string;
+    key: string;
+    tooltip: string;
+    weight: number;
+    components: {
+        label: string;
+        key: string;
+        input: boolean;
+        type: string;
+    }[];
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            in?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+    calculateValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    label: string;
+    key: string;
+    skipMerge: boolean;
+    clearOnHide: boolean;
+    weight: number;
+    description: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            in: (string[] | {
+                var: string;
+            })[];
+            '==='?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+    calculateValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    editor: string;
+    as: string;
+    rows: number;
+    weight: number;
+    tooltip: string;
+    allowCalculateOverride: boolean;
+    calculateValue: (context: any) => any;
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    conditional?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    weight: number;
+    key: string;
+    label: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            '===': (string | {
+                var: string;
+            })[];
+            in?: undefined;
+            or?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+    calculateValue?: undefined;
+} | {
+    type: string;
+    input: boolean;
+    weight: number;
+    key: string;
+    label: string;
+    tooltip: string;
+    conditional: {
+        json: {
+            or: {
+                '===': (string | {
+                    var: string;
+                })[];
+            }[];
+            '==='?: undefined;
+            in?: undefined;
+        };
+    };
+    defaultValue?: undefined;
+    dataSrc?: undefined;
+    placeholder?: undefined;
+    components?: undefined;
+    skipMerge?: undefined;
+    clearOnHide?: undefined;
+    description?: undefined;
+    editor?: undefined;
+    as?: undefined;
+    rows?: undefined;
+    allowCalculateOverride?: undefined;
+    calculateValue?: undefined;
+})[];
+export default _default;

package/lib/mjs/components/_classes/multivalue/Multivalue.d.ts

@@ -0,0 +1,29 @@
+export default class Multivalue extends Field {
+    get addAnother(): any;
+    useWrapper(): any;
+    render(): any;
+    renderElement(): string;
+    renderRow(value: any, index: any): any;
+    attach(dom: any): Promise<any[]>;
+    /**
+     * Attach inputs to the element.
+     *
+     * @param element
+     * @param index
+     */
+    attachElement(element: any, index: any): void;
+    onSelectMaskHandler(event: any): void;
+    getMaskPattern(maskName: any): any;
+    multiMasks: {} | undefined;
+    attachMultiMask(index: any): boolean;
+    updateMask(input: any, mask: any): void;
+    /**
+     * Adds a new empty value to the data array.
+     */
+    addNewValue(value: any): void;
+    /**
+     * Adds a new empty value to the data array, and add a new row to contain it.
+     */
+    addValue(): void;
+}
+import Field from '../field/Field';

package/lib/mjs/components/_classes/multivalue/Multivalue.js

@@ -32,7 +32,7 @@ export default class Multivalue extends Field {
     render() {
         // If single value field.
         if (!this.useWrapper()) {
-            return super.render(`<div ref="element">
+            return super.render(`<div ${this._referenceAttributeName}="element">
           ${this.renderElement(this.component.type !== 'hidden' ? this.dataValue : '')}
         </div>`);
         }

package/lib/mjs/components/_classes/nested/NestedComponent.d.ts

@@ -0,0 +1,152 @@
+export default class NestedComponent extends Field {
+    constructor(component: any, options: any, data: any);
+    type: string;
+    _collapsed: boolean;
+    set collapsed(value: boolean);
+    get collapsed(): boolean;
+    collapse(value: any): Promise<void>;
+    get ready(): Promise<any[]>;
+    set rowIndex(value: any);
+    get rowIndex(): any;
+    _rowIndex: any;
+    componentContext(): any;
+    getComponents(): any;
+    /**
+     * Perform a deep iteration over every component, including those
+     * within other container based components.
+     *
+     * @param {function} fn - Called for every component.
+     */
+    everyComponent(fn: Function, options: any): void;
+    hasComponent(component: any): boolean;
+    flattenComponents(): {};
+    /**
+     * Perform an iteration over each component within this container component.
+     *
+     * @param {function} fn - Called for each component
+     */
+    eachComponent(fn: Function): void;
+    /**
+     * Returns a component provided a key. This performs a deep search within the
+     * component tree.
+     *
+     * @param {string} key - The key of the component to retrieve.
+     * @param {function} [fn] - Called with the component once found.
+     * @param {string} [originalPath] - The original path to the component.
+     * @return {Component} - The component that is located.
+     */
+    getComponent(path: any, fn?: Function | undefined, originalPath?: string | undefined): Component;
+    /**
+     * Return a component provided the Id of the component.
+     *
+     * @param {string} id - The Id of the component.
+     * @param {function} fn - Called with the component once it is retrieved.
+     * @return {Object} - The component retrieved.
+     */
+    getComponentById(id: string, fn: Function): Object;
+    /**
+     * Create a new component and add it to the components array.
+     *
+     * @param component
+     * @param data
+     */
+    createComponent(component: any, options: any, data: any, before: any, replacedComp: any): any;
+    getContainer(): any;
+    get componentComponents(): any;
+    get nestedKey(): string;
+    get templateName(): string;
+    components: any;
+    /**
+     *
+     * @param element
+     * @param data
+     */
+    addComponents(data: any, options: any): void;
+    /**
+     * Add a new component to the components array.
+     *
+     * @param {Object} component - The component JSON schema to add.
+     * @param {Object} data - The submission data object to house the data for this component.
+     * @param {HTMLElement} before - A DOM element to insert this element before.
+     * @return {Component} - The created component instance.
+     */
+    addComponent(component: Object, data: Object, before: HTMLElement, noAdd: any): Component;
+    beforeFocus(): void;
+    renderComponents(components: any): any;
+    attach(element: any): Promise<[void, void]>;
+    attachComponentsLogic(components: any): void;
+    attachComponents(element: any, components: any, container: any): Promise<any>;
+    /**
+     * Remove a component from the components array and from the children object
+     *
+     * @param {Component} component - The component to remove from the components.
+     * @param {Array<Component>} components - An array of components to remove this component from.
+     */
+    removeComponent(component: Component, components: Array<Component>, all?: boolean): void;
+    /**
+     * Removes a component provided the API key of that component.
+     *
+     * @param {string} key - The API key of the component to remove.
+     * @param {function} fn - Called once the component is removed.
+     * @return {null}
+     */
+    removeComponentByKey(key: string, fn: Function): null;
+    /**
+     * Removes a component provided the Id of the component.
+     *
+     * @param {string} id - The Id of the component to remove.
+     * @param {function} fn - Called when the component is removed.
+     * @return {null}
+     */
+    removeComponentById(id: string, fn: Function): null;
+    updateValue(value: any, flags?: {}): any;
+    shouldSkipValidation(data: any, row: any, flags: any): boolean;
+    checkData(data: any, flags: any, row: any, components: any): true | undefined;
+    checkConditions(data: any, flags: any, row: any): boolean;
+    clearOnHide(show: any): void;
+    restoreComponentsContext(): void;
+    /**
+     * Allow components to hook into the next page trigger to perform their own logic.
+     *
+     * @return {*}
+     */
+    beforePage(next: any): any;
+    calculateValue(data: any, flags: any, row: any): any;
+    isLastPage(): boolean;
+    isValid(data: any, dirty: any): any;
+    validationProcessor({ scope, data, row, instance }: {
+        scope: any;
+        data: any;
+        row: any;
+        instance: any;
+    }, flags: any): void;
+    /**
+     * Perform a validation on all child components of this nested component.
+     * @param {*} components
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validateComponents(components: any, data: any, flags?: any): any;
+    /**
+     * Validate a nested component with data, or its own internal data.
+     * @param {*} data
+     * @param {*} flags
+     * @returns
+     */
+    validate(data: any, flags?: any): any;
+    checkComponentValidity(data: any, dirty: any, row: any, flags?: {}, allErrors?: any[]): boolean;
+    checkValidity(data: any, dirty: any, row: any, silentCheck: any, childErrors?: any[]): boolean;
+    checkAsyncValidity(data: any, dirty: any, row: any, silentCheck: any): Promise<any>;
+    setPristine(pristine: any): void;
+    get isPristine(): any;
+    destroyComponents(all?: boolean): void;
+    get visibleErrors(): any;
+    get errors(): any;
+    get dataReady(): Promise<any[]>;
+    setNestedValue(component: any, value: any, flags?: {}): any;
+    setValue(value: any, flags?: {}): any;
+    get lazyLoad(): any;
+}
+import Field from '../field/Field';
+import Component from '../component/Component';

package/lib/mjs/components/_classes/nested/NestedComponent.form.d.ts

@@ -0,0 +1,3 @@
+export default function _default(...extend: any[]): {
+    components: any;
+};

package/lib/mjs/components/_classes/nested/NestedComponent.js

@@ -3,6 +3,7 @@ import _ from 'lodash';
 import Field from '../field/Field';
 import Components from '../../Components';
 import { getArrayFromComponentPath, getStringFromComponentPath, getRandomComponentId } from '../../../utils/utils';
+import Component from '../component/Component';
 import { process as processAsync, processSync } from '@formio/core/process';
 export default class NestedComponent extends Field {
     static schema(...extend) {
@@ -184,8 +185,9 @@ export default class NestedComponent extends Field {
      * component tree.
      *
      * @param {string} key - The key of the component to retrieve.
-     * @param {function} fn - Called with the component once found.
-     * @return {Object} - The component that is located.
+     * @param {function} [fn] - Called with the component once found.
+     * @param {string} [originalPath] - The original path to the component.
+     * @return {Component} - The component that is located.
      */
     getComponent(path, fn, originalPath) {
         originalPath = originalPath || getStringFromComponentPath(path);

package/lib/mjs/components/_classes/nested/fixtures/comp1.d.ts

@@ -0,0 +1,8 @@
+declare namespace _default {
+    let components: {
+        type: string;
+        key: string;
+        input: boolean;
+    }[];
+}
+export default _default;