@formio/js 5.0.0-dev.5633.8d2b30d → 5.0.0-dev.5633.fde3bc9

package/lib/cjs/components/_classes/component/editForm/Component.edit.display.js

@@ -190,13 +190,5 @@ exports.default = [
         key: 'tableView',
         input: true
     },
-    {
-        weight: 1600,
-        type: 'checkbox',
-        label: 'Modal Edit',
-        tooltip: 'Opens up a modal to edit the value of this component.',
-        key: 'modalEdit',
-        input: true
-    },
 ];
 /* eslint-enable max-len */

package/lib/cjs/components/_classes/component/editForm/Component.edit.validation.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const utils_1 = __importDefault(require("./utils"));
-const Evaluator_1 = __importDefault(require("../../../../utils/Evaluator"));
+const Evaluator_1 = require("../../../../utils/Evaluator");
 /* eslint-disable quotes, max-len */
 exports.default = [
     {
@@ -74,7 +74,7 @@ exports.default = [
         key: 'custom-validation-js',
         weight: 300,
         customConditional() {
-            return !Evaluator_1.default.noeval || Evaluator_1.default.protectedEval;
+            return !Evaluator_1.Evaluator.noeval || Evaluator_1.Evaluator.protectedEval;
         },
         components: [
             utils_1.default.logicVariablesTable('<tr><th>input</th><td>The value that was input into this component</td></tr>'),

package/lib/cjs/components/_classes/component/editForm/utils.js

@@ -4,7 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
-const Evaluator_1 = __importDefault(require("../../../../utils/Evaluator"));
+const Evaluator_1 = require("../../../../utils/Evaluator");
 const EditFormUtils = {
     sortAndFilterComponents(components) {
         return lodash_1.default.filter(lodash_1.default.sortBy(components, 'weight'), (item) => !item.ignore);
@@ -72,7 +72,7 @@ const EditFormUtils = {
                 style: { 'margin-bottom': '10px' },
                 key: `${property}-js`,
                 customConditional() {
-                    return !Evaluator_1.default.noeval || Evaluator_1.default.protectedEval;
+                    return !Evaluator_1.Evaluator.noeval || Evaluator_1.Evaluator.protectedEval;
                 },
                 components: [
                     {

package/lib/cjs/components/_classes/component/fixtures/comp6.d.ts

@@ -0,0 +1,77 @@
+declare namespace _default {
+    let components: ({
+        label: string;
+        applyMaskOn: string;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+        mask?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        truncateMultipleSpaces?: undefined;
+        widget?: undefined;
+        data?: undefined;
+        action?: undefined;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        applyMaskOn: string;
+        mask: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        truncateMultipleSpaces: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: number;
+        widget?: undefined;
+        data?: undefined;
+        action?: undefined;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        widget: string;
+        tableView: boolean;
+        data: {
+            values: {
+                label: string;
+                value: string;
+            }[];
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+        applyMaskOn?: undefined;
+        mask?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        truncateMultipleSpaces?: undefined;
+        action?: undefined;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        action: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        applyMaskOn?: undefined;
+        defaultValue?: undefined;
+        mask?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        truncateMultipleSpaces?: undefined;
+        widget?: undefined;
+        data?: undefined;
+    })[];
+}
+export default _default;

package/lib/cjs/components/_classes/component/fixtures/comp6.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    "components": [
+        {
+            "label": "Text Field",
+            "applyMaskOn": "change",
+            "tableView": true,
+            "key": "textField",
+            "type": "textfield",
+            "input": true,
+            "defaultValue": "test"
+        },
+        {
+            "label": "Number",
+            "applyMaskOn": "change",
+            "mask": false,
+            "tableView": false,
+            "delimiter": false,
+            "requireDecimal": false,
+            "inputFormat": "plain",
+            "truncateMultipleSpaces": false,
+            "key": "number",
+            "type": "number",
+            "input": true,
+            "defaultValue": 123
+        },
+        {
+            "label": "Select",
+            "widget": "choicesjs",
+            "tableView": true,
+            "data": {
+                "values": [
+                    {
+                        "label": "a",
+                        "value": "a"
+                    },
+                    {
+                        "label": "b",
+                        "value": "b"
+                    }
+                ]
+            },
+            "key": "select",
+            "type": "select",
+            "input": true,
+            "defaultValue": "a"
+        },
+        {
+            "label": "Reset",
+            "action": "reset",
+            "showValidations": false,
+            "tableView": false,
+            "key": "reset",
+            "type": "button",
+            "input": true
+        },
+    ]
+};

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

@@ -3,4 +3,5 @@ import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
 import comp5 from './comp5';
-export { comp1, comp2, comp3, comp4, comp5 };
+import comp6 from './comp6';
+export { comp1, comp2, comp3, comp4, comp5, comp6 };

package/lib/cjs/components/_classes/component/fixtures/index.js

@@ -3,7 +3,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
+exports.comp6 = exports.comp5 = exports.comp4 = exports.comp3 = exports.comp2 = exports.comp1 = void 0;
 const comp1_1 = __importDefault(require("./comp1"));
 exports.comp1 = comp1_1.default;
 const comp2_1 = __importDefault(require("./comp2"));
@@ -14,3 +14,5 @@ const comp4_1 = __importDefault(require("./comp4"));
 exports.comp4 = comp4_1.default;
 const comp5_1 = __importDefault(require("./comp5"));
 exports.comp5 = comp5_1.default;
+const comp6_1 = __importDefault(require("./comp6"));
+exports.comp6 = comp6_1.default;

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

@@ -1,5 +1,14 @@
 export default class Field extends Component {
-    render(element: any): any;
-    saveCaretPosition(element: any, index: any): void;
+    /**
+     * @param {object} element - The component to create.
+     * @returns {Field} - The created field.
+     */
+    render(element: object): Field;
+    /**
+    /* Saves current caret position to restore it after the component is redrawn
+     * @param {HTMLElement} element - The element to save the caret position for.
+     * @param {number} index - The index of the element.
+     */
+    saveCaretPosition(element: HTMLElement, index: number): void;
 }
 import Component from '../component/Component';

package/lib/cjs/components/_classes/field/Field.js

@@ -4,7 +4,15 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("../component/Component"));
+/*
+ * Field class is a base class for all fields.
+ * @extends Component
+ */
 class Field extends Component_1.default {
+    /**
+     * @param {object} element - The component to create.
+     * @returns {Field} - The created field.
+     */
     render(element) {
         if (this.noField) {
             return super.render(element);
@@ -19,7 +27,11 @@ class Field extends Component_1.default {
             }));
         }
     }
-    // Saves current caret position to restore it after the component is redrawn
+    /**
+    /* Saves current caret position to restore it after the component is redrawn
+     * @param {HTMLElement} element - The element to save the caret position for.
+     * @param {number} index - The index of the element.
+     */
     saveCaretPosition(element, index) {
         var _a, _b;
         if (((_b = (_a = this.root) === null || _a === void 0 ? void 0 : _a.focusedComponent) === null || _b === void 0 ? void 0 : _b.path) === this.path) {

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

@@ -30,13 +30,14 @@ export default class Input extends Multivalue {
     updateValue(value: any, flags: any, index: any): boolean;
     parseValue(value: any): any;
     formatValue(value: any): any;
+    attach(element: any): Promise<any>;
     getWidget(index: any): any;
     attachElement(element: any, index: any): Promise<void>;
     /**
      * Creates an instance of a widget for this component.
-     *
-     * @return {null}
+     * @param {number} index - The index of the widget.
+     * @returns {*} - The widget instance.
      */
-    createWidget(index: any): null;
+    createWidget(index: number): any;
 }
 import Multivalue from '../multivalue/Multivalue';

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

@@ -151,13 +151,15 @@ class Input extends Multivalue_1.default {
             else {
                 this.addClass(element, 'text-danger');
             }
-            this.setContent(element, this.t(`{{ remaining }} ${type} remaining.`, {
-                remaining: remaining
+            this.setContent(element, this.t(`typeRemaining`, {
+                remaining: remaining,
+                type: type
             }));
         }
         else {
-            this.setContent(element, this.t(`{{ count }} ${type}`, {
-                count: count
+            this.setContent(element, this.t(`typeCount`, {
+                count: count,
+                type: type
             }));
         }
     }
@@ -244,8 +246,8 @@ class Input extends Multivalue_1.default {
     }
     /**
      * Creates an instance of a widget for this component.
-     *
-     * @return {null}
+     * @param {number} index - The index of the widget.
+     * @returns {*} - The widget instance.
      */
     createWidget(index) {
         var _a, _b;

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

@@ -1,9 +1,9 @@
 export default class ListComponent extends Field {
     get isSelectURL(): boolean;
     get selectData(): any;
-    get shouldLoad(): any;
+    get shouldLoad(): boolean;
     getTemplateKeys(): void;
-    templateKeys: any[] | undefined;
+    templateKeys: string[] | undefined;
     get requestHeaders(): any;
     setItems(): void;
     updateCustomItems(): void;

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

@@ -1,3 +1,6 @@
-export default function _default(...extend: any[]): {
-    components: any;
-};
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
+export default function _default(...extend: any[]): import('@formio/core').Component[];

package/lib/cjs/components/_classes/list/ListComponent.form.js

@@ -5,6 +5,11 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 const Components_1 = __importDefault(require("../../Components"));
 const ListComponent_edit_data_1 = __importDefault(require("./editForm/ListComponent.edit.data"));
+/**
+ * The Edit Form function.
+ * @param {...any} extend - The components that extend the edit form.
+ * @returns {import('@formio/core').Component[]} - The edit form components.
+ */
 function default_1(...extend) {
     return Components_1.default.baseEditForm([
         {

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

@@ -1,24 +1,55 @@
 export default class Multivalue extends Field {
-    get addAnother(): any;
+    get addAnother(): string;
     useWrapper(): any;
-    render(): any;
+    /**
+     * @returns {Field} - The created field.
+     */
+    render(): Field;
     renderElement(): string;
-    renderRow(value: any, index: any): any;
-    attach(dom: any): Promise<any[]>;
+    /**
+     * Renders a single row for multi-value components.
+     * @param {any} value - The value associated with the row to render.
+     * @param {number} index - The index of the row in the multi-value list.
+     * @returns {any} Returns the HTML string representation of the row.
+     */
+    renderRow(value: any, index: number): any;
+    /**
+     * @param {HTMLElement} dom - The DOM element to which the component will attach.
+     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.
+     */
+    attach(dom: HTMLElement): Promise<any>;
     /**
      * Attach inputs to the element.
-     *
-     * @param element
-     * @param index
+     * @param {HTMLElement} element - The element to attach.
+     * @param {number} index - The index of the element to attach.
+     */
+    attachElement(element: HTMLElement, index: number): void;
+    /**
+     * Event handler for selecting a mask from a dropdown.
+     * @param {Event} event - Event triggered by changing the selected option in mask.
+     */
+    onSelectMaskHandler(event: Event): void;
+    /**
+     * Retrieves the mask pattern for a given mask name
+     * @param {string} maskName - The name of the mask to retrieve.
+     * @returns {any} The mask pattern associated with the given mask name.
      */
-    attachElement(element: any, index: any): void;
-    onSelectMaskHandler(event: any): void;
-    getMaskPattern(maskName: any): any;
+    getMaskPattern(maskName: string): any;
     multiMasks: {} | undefined;
-    attachMultiMask(index: any): boolean;
-    updateMask(input: any, mask: any): void;
+    /**
+     * Attaches a selectable mask to an input field based on its configuration.
+     * @param {number} index - The index of the select or input in component array.
+     * @returns {boolean} - Returns true if the mask was successfully attached
+     */
+    attachMultiMask(index: number): boolean;
+    /**
+     * @param {any} input - The input element on which the mask is to be applied.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     */
+    updateMask(input: any, mask: string): void;
     /**
      * Adds a new empty value to the data array.
+     * @param {any} value -A value to be added to the data array.
      */
     addNewValue(value: any): void;
     /**

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

@@ -34,6 +34,9 @@ class Multivalue extends Field_1.default {
     useWrapper() {
         return this.component.hasOwnProperty('multiple') && this.component.multiple;
     }
+    /**
+     * @returns {Field} - The created field.
+     */
     render() {
         // If single value field.
         if (!this.useWrapper()) {
@@ -56,6 +59,12 @@ class Multivalue extends Field_1.default {
     renderElement() {
         return '';
     }
+    /**
+     * Renders a single row for multi-value components.
+     * @param {any} value - The value associated with the row to render.
+     * @param {number} index - The index of the row in the multi-value list.
+     * @returns {any} Returns the HTML string representation of the row.
+     */
     renderRow(value, index) {
         return this.renderTemplate('multiValueRow', {
             index,
@@ -63,6 +72,10 @@ class Multivalue extends Field_1.default {
             element: `${this.renderElement(value, index)}`,
         });
     }
+    /**
+     * @param {HTMLElement} dom - The DOM element to which the component will attach.
+     * @returns {Promise} - Promise that resolves when all asynchronous tasks that have finished.
+     */
     attach(dom) {
         const superAttach = super.attach(dom);
         this.loadRefs(dom, {
@@ -96,6 +109,9 @@ class Multivalue extends Field_1.default {
             return Promise.all(promises);
         });
     }
+    /**
+     * Remove all event handlers.
+     */
     detach() {
         if (this.refs.input && this.refs.input.length) {
             this.refs.input.forEach((input) => {
@@ -118,9 +134,8 @@ class Multivalue extends Field_1.default {
     }
     /**
      * Attach inputs to the element.
-     *
-     * @param element
-     * @param index
+     * @param {HTMLElement} element - The element to attach.
+     * @param {number} index - The index of the element to attach.
      */
     attachElement(element, index) {
         this.addEventListener(element, this.inputInfo.changeEvent, () => {
@@ -182,9 +197,18 @@ class Multivalue extends Field_1.default {
             }
         }
     }
+    /**
+     * Event handler for selecting a mask from a dropdown.
+     * @param {Event} event - Event triggered by changing the selected option in mask.
+     */
     onSelectMaskHandler(event) {
         this.updateMask(event.target.maskInput, this.getMaskPattern(event.target.value));
     }
+    /**
+     * Retrieves the mask pattern for a given mask name
+     * @param {string} maskName - The name of the mask to retrieve.
+     * @returns {any} The mask pattern associated with the given mask name.
+     */
     getMaskPattern(maskName) {
         if (!this.multiMasks) {
             this.multiMasks = {};
@@ -196,6 +220,11 @@ class Multivalue extends Field_1.default {
         this.multiMasks[maskName] = mask ? mask.mask : this.component.inputMasks[0].mask;
         return this.multiMasks[maskName];
     }
+    /**
+     * Attaches a selectable mask to an input field based on its configuration.
+     * @param {number} index - The index of the select or input in component array.
+     * @returns {boolean} - Returns true if the mask was successfully attached
+     */
     attachMultiMask(index) {
         if (!(this.isMultipleMasksField && this.component.inputMasks.length && this.refs.input.length)) {
             return false;
@@ -206,6 +235,10 @@ class Multivalue extends Field_1.default {
         this.setInputMask(maskSelect.maskInput, this.component.inputMasks[0].mask);
         return true;
     }
+    /**
+     * @param {any} input - The input element on which the mask is to be applied.
+     * @param {string} mask - The mask pattern to apply to the input element. Exit early if no mask.
+     */
     updateMask(input, mask) {
         if (!mask) {
             return;
@@ -215,6 +248,7 @@ class Multivalue extends Field_1.default {
     }
     /**
      * Adds a new empty value to the data array.
+     * @param {any} value -A value to be added to the data array.
      */
     addNewValue(value) {
         if (value === undefined) {