@formio/js 5.0.0-rc.5

package/lib/cjs/components/textarea/fixtures/comp2.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    export const tags: never[];
+    export const type: string;
+    export namespace validate {
+        const custom: string;
+        const pattern: string;
+        const maxLength: string;
+        const minLength: string;
+        const required: boolean;
+    }
+    export const wysiwyg: boolean;
+    export const persistent: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const defaultValue: string;
+    export const multiple: boolean;
+    export const rows: number;
+    export const suffix: string;
+    export const prefix: string;
+    export const placeholder: string;
+    export const key: string;
+    export const label: string;
+    export const editor: string;
+    export const as: string;
+    export const tableView: boolean;
+    export const spellcheck: boolean;
+    export const input: boolean;
+}
+export default _default;

package/lib/cjs/components/textarea/fixtures/comp2.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'tags': [],
+    'type': 'textarea',
+    'validate': {
+        'custom': '',
+        'pattern': '',
+        'maxLength': '',
+        'minLength': '',
+        'required': false
+    },
+    'wysiwyg': false,
+    'persistent': true,
+    'protected': false,
+    'defaultValue': '',
+    'multiple': false,
+    'rows': 3,
+    'suffix': '',
+    'prefix': '',
+    'placeholder': '',
+    'key': 'textArea',
+    'label': 'Text Area',
+    'editor': 'ace',
+    'as': 'json',
+    'tableView': true,
+    'spellcheck': true,
+    'input': true
+};

package/lib/cjs/components/textarea/fixtures/comp3.d.ts

@@ -0,0 +1,27 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        autoExpand: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        autoExpand?: undefined;
+    })[];
+    const revisions: string;
+    const _vid: number;
+    const title: string;
+    const display: string;
+    const name: string;
+    const path: string;
+}
+export default _default;

package/lib/cjs/components/textarea/fixtures/comp3.js

@@ -0,0 +1,29 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    components: [
+        {
+            label: 'Text Area',
+            autoExpand: false,
+            tableView: true,
+            key: 'textArea',
+            type: 'textarea',
+            input: true
+        },
+        {
+            label: 'Submit',
+            showValidations: false,
+            tableView: false,
+            key: 'submit',
+            type: 'button',
+            input: true
+        }
+    ],
+    revisions: '',
+    _vid: 0,
+    title: 'text area tests',
+    display: 'form',
+    name: 'textAriaTests',
+    path: 'textAriaTests',
+};

package/lib/cjs/components/textarea/fixtures/index.d.ts

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

package/lib/cjs/components/textarea/fixtures/index.js

@@ -0,0 +1,12 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+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"));
+exports.comp2 = comp2_1.default;
+const comp3_1 = __importDefault(require("./comp3"));
+exports.comp3 = comp3_1.default;

package/lib/cjs/components/textarea/fixtures/values.d.ts

@@ -0,0 +1,2 @@
+declare const _default: string[];
+export default _default;

package/lib/cjs/components/textarea/fixtures/values.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    '<p>asdf</p>',
+    '<div>foobar</div>',
+];

package/lib/cjs/components/textfield/TextField.d.ts

@@ -0,0 +1,38 @@
+export default class TextFieldComponent extends Input {
+    static get builderInfo(): {
+        title: string;
+        icon: string;
+        group: string;
+        documentation: string;
+        weight: number;
+        schema: any;
+    };
+    get emptyValue(): string;
+    /**
+     * Returns the mask value object.
+     *
+     * @param value
+     * @param flags
+     * @return {*}
+     */
+    maskValue(value: any, flags?: {}): any;
+    /**
+     * Normalize the value set in the data object.
+     *
+     * @param value
+     * @param flags
+     * @return {*}
+     */
+    normalizeValue(value: any, flags?: {}): any;
+    unmaskValue(value: any, format?: any): any;
+    /**
+     * Returns the value at this index.
+     *
+     * @param index
+     * @return {*}
+     */
+    getValueAt(index: any): any;
+    isHtmlRenderMode(): any;
+    truncateMultipleSpaces(value: any): any;
+}
+import Input from '../_classes/input/Input';

package/lib/cjs/components/textfield/TextField.form.d.ts

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

package/lib/cjs/components/textfield/TextField.form.js

@@ -0,0 +1,26 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Components_1 = __importDefault(require("../Components"));
+const TextField_edit_data_1 = __importDefault(require("./editForm/TextField.edit.data"));
+const TextField_edit_display_1 = __importDefault(require("./editForm/TextField.edit.display"));
+const TextField_edit_validation_1 = __importDefault(require("./editForm/TextField.edit.validation"));
+function default_1(...extend) {
+    return Components_1.default.baseEditForm([
+        {
+            key: 'display',
+            components: TextField_edit_display_1.default
+        },
+        {
+            key: 'data',
+            components: TextField_edit_data_1.default
+        },
+        {
+            key: 'validation',
+            components: TextField_edit_validation_1.default
+        },
+    ], ...extend);
+}
+exports.default = default_1;

package/lib/cjs/components/textfield/TextField.js

@@ -0,0 +1,243 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Input_1 = __importDefault(require("../_classes/input/Input"));
+const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
+const FormioUtils = __importStar(require("../../utils/utils"));
+const native_promise_only_1 = __importDefault(require("native-promise-only"));
+class TextFieldComponent extends Input_1.default {
+    static schema(...extend) {
+        return Input_1.default.schema({
+            label: 'Text Field',
+            key: 'textField',
+            type: 'textfield',
+            mask: false,
+            inputType: 'text',
+            inputFormat: 'plain',
+            inputMask: '',
+            displayMask: '',
+            tableView: true,
+            spellcheck: true,
+            truncateMultipleSpaces: false,
+            validate: {
+                minLength: '',
+                maxLength: '',
+                pattern: ''
+            }
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Text Field',
+            icon: 'terminal',
+            group: 'basic',
+            documentation: '/userguide/form-building/form-components#text-field',
+            weight: 0,
+            schema: TextFieldComponent.schema()
+        };
+    }
+    get defaultSchema() {
+        return TextFieldComponent.schema();
+    }
+    get inputInfo() {
+        const info = super.inputInfo;
+        info.type = 'input';
+        if (this.component.hasOwnProperty('spellcheck')) {
+            info.attr.spellcheck = this.component.spellcheck;
+        }
+        if (this.component.mask) {
+            info.attr.type = 'password';
+        }
+        else {
+            info.attr.type = (this.component.inputType === 'password') ? 'password' : 'text';
+        }
+        info.changeEvent = (this.component.applyMaskOn === 'blur') ? 'blur' : 'input';
+        return info;
+    }
+    get emptyValue() {
+        return '';
+    }
+    constructor(component, options, data) {
+        var _a, _b, _c;
+        super(component, options, data);
+        const timezone = (((_a = this.component.widget) === null || _a === void 0 ? void 0 : _a.timezone) || this.options.timezone);
+        const displayInTimezone = (((_b = this.component.widget) === null || _b === void 0 ? void 0 : _b.displayInTimezone) || 'viewer');
+        if (((_c = this.component.widget) === null || _c === void 0 ? void 0 : _c.type) === 'calendar') {
+            this.component.widget = Object.assign(Object.assign({}, this.component.widget), { readOnly: this.options.readOnly, timezone,
+                displayInTimezone, locale: this.component.widget.locale || this.options.language, saveAs: 'text' });
+        }
+    }
+    attach(element) {
+        this.loadRefs(element, {
+            valueMaskInput: 'single',
+        });
+        return super.attach(element);
+    }
+    /**
+     * Returns the mask value object.
+     *
+     * @param value
+     * @param flags
+     * @return {*}
+     */
+    maskValue(value, flags = {}) {
+        // Convert it into the correct format.
+        if (!value || (typeof value !== 'object')) {
+            value = {
+                value,
+                maskName: this.component.inputMasks[0].label
+            };
+        }
+        // If no value is provided, then set the defaultValue.
+        if (!value.value) {
+            const defaultValue = flags.noDefault ? this.emptyValue : this.defaultValue;
+            value.value = Array.isArray(defaultValue) ? defaultValue[0] : defaultValue;
+        }
+        return value;
+    }
+    /**
+     * Normalize the value set in the data object.
+     *
+     * @param value
+     * @param flags
+     * @return {*}
+     */
+    normalizeValue(value, flags = {}) {
+        if (!this.isMultipleMasksField) {
+            return super.normalizeValue(value);
+        }
+        if (Array.isArray(value)) {
+            return super.normalizeValue(value.map((val) => this.maskValue(val, flags)));
+        }
+        return super.normalizeValue(this.maskValue(value, flags));
+    }
+    /**
+     * Sets the value at this index.
+     *
+     * @param index
+     * @param value
+     * @param flags
+     */
+    setValueAt(index, value, flags = {}) {
+        if (!this.isMultipleMasksField) {
+            return super.setValueAt(index, value, flags);
+        }
+        value = this.maskValue(value, flags);
+        const textValue = value.value || '';
+        const textInput = this.refs.mask ? this.refs.mask[index] : null;
+        const maskInput = this.refs.select ? this.refs.select[index] : null;
+        const mask = this.getMaskPattern(value.maskName);
+        if (textInput && maskInput && mask) {
+            const placeholderChar = this.placeholderChar;
+            textInput.value = (0, vanilla_text_mask_1.conformToMask)(textValue, FormioUtils.getInputMask(mask), { placeholderChar }).conformedValue;
+            maskInput.value = value.maskName;
+        }
+        else {
+            return super.setValueAt(index, textValue, flags);
+        }
+    }
+    unmaskValue(value, format = this.component.displayMask) {
+        const mask = FormioUtils.getInputMask(format, this.placeholderChar);
+        return FormioUtils.unmaskValue(value, mask, this.placeholderChar);
+    }
+    /**
+     * Returns the value at this index.
+     *
+     * @param index
+     * @return {*}
+     */
+    getValueAt(index) {
+        var _a, _b;
+        if (!this.isMultipleMasksField) {
+            const value = super.getValueAt(index);
+            const valueMask = this.component.inputMask;
+            const displayMask = this.component.displayMask;
+            // If the input has only the valueMask or the displayMask is the same as the valueMask,
+            // just return the value which is already formatted
+            if (valueMask && !displayMask || displayMask === valueMask) {
+                return value;
+            }
+            // If there is only the displayMask, return the raw (unmasked) value
+            if (displayMask && !valueMask) {
+                return this.unmaskValue(value, displayMask);
+            }
+            if ((_a = this.refs.valueMaskInput) === null || _a === void 0 ? void 0 : _a.mask) {
+                this.refs.valueMaskInput.mask.textMaskInputElement.update(value);
+                return (_b = this.refs.valueMaskInput) === null || _b === void 0 ? void 0 : _b.value;
+            }
+            return value;
+        }
+        const textInput = this.refs.mask ? this.refs.mask[index] : null;
+        const maskInput = this.refs.select ? this.refs.select[index] : null;
+        return {
+            value: textInput ? textInput.value : undefined,
+            maskName: maskInput ? maskInput.value : undefined
+        };
+    }
+    getValueAsString(value, options) {
+        if (value && this.component.inputFormat === 'plain' && /<[^<>]+>/g.test(value)) {
+            value = value.replaceAll('<', '&lt;').replaceAll('>', '&gt;');
+        }
+        return super.getValueAsString(value, options);
+    }
+    isHtmlRenderMode() {
+        return super.isHtmlRenderMode() ||
+            ((this.options.readOnly || this.disabled) &&
+                this.component.inputFormat === 'html' &&
+                this.type === 'textfield');
+    }
+    isEmpty(value = this.dataValue) {
+        if (!this.isMultipleMasksField) {
+            return super.isEmpty((value || '').toString().trim());
+        }
+        return super.isEmpty(value) || (this.component.multiple ? value.length === 0 : (!value.maskName || !value.value));
+    }
+    truncateMultipleSpaces(value) {
+        if (value) {
+            return value.trim().replace(/\s{2,}/g, ' ');
+        }
+        return value;
+    }
+    get validationValue() {
+        const value = super.validationValue;
+        if (value && this.component.truncateMultipleSpaces) {
+            return this.truncateMultipleSpaces(value);
+        }
+        return value;
+    }
+    beforeSubmit() {
+        let value = this.dataValue;
+        if (!this.component.truncateMultipleSpaces || !value) {
+            return native_promise_only_1.default.resolve(value);
+        }
+        value = this.truncateMultipleSpaces(value);
+        this.dataValue = value;
+        return native_promise_only_1.default.resolve(value).then(() => super.beforeSubmit());
+    }
+}
+exports.default = TextFieldComponent;

package/lib/cjs/components/textfield/editForm/TextField.edit.data.d.ts

@@ -0,0 +1,46 @@
+declare const _default: ({
+    type: string;
+    label: string;
+    key: string;
+    weight: number;
+    placeholder: string;
+    tooltip: string;
+    template: string;
+    data: {
+        values: {
+            value: string;
+            label: string;
+        }[];
+    };
+    defaultValue: string;
+    input: boolean;
+    values?: undefined;
+} | {
+    weight: number;
+    type: string;
+    label: string;
+    key: string;
+    tooltip: string;
+    input: boolean;
+    values: {
+        value: string;
+        label: string;
+    }[];
+    placeholder?: undefined;
+    template?: undefined;
+    data?: undefined;
+    defaultValue?: undefined;
+} | {
+    weight: number;
+    type: string;
+    input: boolean;
+    key: string;
+    label: string;
+    placeholder?: undefined;
+    tooltip?: undefined;
+    template?: undefined;
+    data?: undefined;
+    defaultValue?: undefined;
+    values?: undefined;
+})[];
+export default _default;

package/lib/cjs/components/textfield/editForm/TextField.edit.data.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        type: 'select',
+        label: 'Input Format',
+        key: 'inputFormat',
+        weight: 105,
+        placeholder: 'Input Format',
+        tooltip: 'Force the output of this field to be sanitized in a specific format.',
+        template: '<span>{{ item.label }}</span>',
+        data: {
+            values: [
+                {
+                    value: 'plain',
+                    label: 'Plain'
+                },
+                {
+                    value: 'html',
+                    label: 'HTML'
+                }, {
+                    value: 'raw',
+                    label: 'Raw (Insecure)'
+                }
+            ]
+        },
+        defaultValue: 'plain',
+        input: true
+    },
+    {
+        weight: 200,
+        type: 'radio',
+        label: 'Text Case',
+        key: 'case',
+        tooltip: 'When data is entered, you can change the case of the value.',
+        input: true,
+        values: [
+            {
+                value: 'mixed',
+                label: 'Mixed (Allow upper and lower case)'
+            },
+            {
+                value: 'uppercase',
+                label: 'Uppercase'
+            }, {
+                value: 'lowercase',
+                label: 'Lowercase'
+            }
+        ]
+    },
+    {
+        weight: 205,
+        type: 'checkbox',
+        input: true,
+        key: 'truncateMultipleSpaces',
+        label: 'Truncate Multiple Spaces',
+    },
+];