@formio/js 5.0.0-rc.5

package/lib/cjs/components/number/Number.js

@@ -0,0 +1,192 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
+const lodash_1 = __importDefault(require("lodash"));
+const text_mask_addons_1 = require("@formio/text-mask-addons");
+const Input_1 = __importDefault(require("../_classes/input/Input"));
+const utils_1 = require("../../utils/utils");
+class NumberComponent extends Input_1.default {
+    static schema(...extend) {
+        return Input_1.default.schema({
+            type: 'number',
+            label: 'Number',
+            key: 'number',
+            validate: {
+                min: '',
+                max: '',
+                step: 'any',
+                integer: ''
+            }
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Number',
+            icon: 'hashtag',
+            group: 'basic',
+            documentation: '/userguide/form-building/form-components#number',
+            weight: 30,
+            schema: NumberComponent.schema()
+        };
+    }
+    constructor(...args) {
+        var _a, _b;
+        super(...args);
+        this.validators = this.validators.concat(['min', 'max']);
+        const separators = (0, utils_1.getNumberSeparators)(this.options.language || navigator.language);
+        this.decimalSeparator = this.options.decimalSeparator = this.options.decimalSeparator
+            || ((_a = this.options.properties) === null || _a === void 0 ? void 0 : _a.decimalSeparator)
+            || separators.decimalSeparator;
+        if (this.component.delimiter) {
+            if (this.options.hasOwnProperty('thousandsSeparator')) {
+                console.warn("Property 'thousandsSeparator' is deprecated. Please use i18n to specify delimiter.");
+            }
+            this.delimiter = ((_b = this.options.properties) === null || _b === void 0 ? void 0 : _b.thousandsSeparator) || this.options.thousandsSeparator || separators.delimiter;
+        }
+        else {
+            this.delimiter = '';
+        }
+        const requireDecimal = lodash_1.default.get(this.component, 'requireDecimal', false);
+        this.decimalLimit = (0, utils_1.getNumberDecimalLimit)(this.component, requireDecimal ? 2 : 20);
+        // Currencies to override BrowserLanguage Config. Object key {}
+        if (lodash_1.default.has(this.options, `languageOverride.${this.options.language}`)) {
+            const override = lodash_1.default.get(this.options, `languageOverride.${this.options.language}`);
+            this.decimalSeparator = override.decimalSeparator;
+            this.delimiter = override.delimiter;
+        }
+        this.numberMask = this.createNumberMask();
+    }
+    /**
+     * Creates the number mask for normal numbers.
+     *
+     * @return {*}
+     */
+    createNumberMask() {
+        return (0, text_mask_addons_1.createNumberMask)({
+            prefix: '',
+            suffix: '',
+            requireDecimal: lodash_1.default.get(this.component, 'requireDecimal', false),
+            thousandsSeparatorSymbol: lodash_1.default.get(this.component, 'thousandsSeparator', this.delimiter),
+            decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),
+            decimalLimit: lodash_1.default.get(this.component, 'decimalLimit', this.decimalLimit),
+            allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),
+            allowDecimal: this.isDecimalAllowed(),
+        });
+    }
+    get defaultSchema() {
+        return NumberComponent.schema();
+    }
+    get defaultValue() {
+        let defaultValue = super.defaultValue;
+        if (!defaultValue && this.component.defaultValue === 0) {
+            defaultValue = this.component.defaultValue;
+        }
+        if (!this.component.multiple && lodash_1.default.isArray(defaultValue)) {
+            defaultValue = !defaultValue[0] && defaultValue[0] !== 0 ? null : defaultValue[0];
+        }
+        return defaultValue;
+    }
+    isDecimalAllowed() {
+        return lodash_1.default.get(this.component, 'allowDecimal', !(this.component.validate && this.component.validate.integer));
+    }
+    parseNumber(value) {
+        // Remove delimiters and convert decimal separator to dot.
+        value = value.split(this.delimiter).join('').replace(this.decimalSeparator, '.');
+        if (this.component.validate && this.component.validate.integer) {
+            return parseInt(value, 10);
+        }
+        else {
+            return parseFloat(value);
+        }
+    }
+    setInputMask(input) {
+        let numberPattern = '[0-9';
+        numberPattern += this.decimalSeparator || '';
+        numberPattern += this.delimiter || '';
+        numberPattern += ']*';
+        input.setAttribute('pattern', numberPattern);
+        input.mask = (0, vanilla_text_mask_1.maskInput)({
+            inputElement: input,
+            mask: this.numberMask,
+            shadowRoot: this.root ? this.root.shadowRoot : null,
+        });
+    }
+    get inputInfo() {
+        const info = super.inputInfo;
+        if (this.component.mask) {
+            info.attr.type = 'password';
+        }
+        else {
+            info.attr.type = 'text';
+        }
+        info.attr.inputmode = this.isDecimalAllowed() ? 'decimal' : 'numeric';
+        info.changeEvent = 'input';
+        return info;
+    }
+    getValueAt(index) {
+        if (!this.refs.input.length || !this.refs.input[index]) {
+            return null;
+        }
+        const val = this.refs.input[index].value;
+        return val && val !== '-_' ? this.parseNumber(val) : null;
+    }
+    setValueAt(index, value, flags = {}) {
+        return super.setValueAt(index, this.formatValue(this.parseValue(value)), flags);
+    }
+    parseValue(input) {
+        if (typeof input === 'string') {
+            input = input.split(this.delimiter).join('').replace(this.decimalSeparator, '.');
+        }
+        let value = parseFloat(input);
+        if (!lodash_1.default.isNaN(value)) {
+            value = String(value).replace('.', this.decimalSeparator);
+        }
+        else {
+            value = null;
+        }
+        return value;
+    }
+    formatValue(value) {
+        if (this.component.requireDecimal && value && !value.includes(this.decimalSeparator)) {
+            return `${value}${this.decimalSeparator}${lodash_1.default.repeat('0', this.decimalLimit)}`;
+        }
+        else if (this.component.requireDecimal && value && value.includes(this.decimalSeparator)) {
+            return `${value}${lodash_1.default.repeat('0', this.decimalLimit - value.split(this.decimalSeparator)[1].length)}`;
+        }
+        return value;
+    }
+    focus() {
+        const input = this.refs.input[0];
+        if (input) {
+            super.focus.call(this);
+            input.setSelectionRange(0, input.value.length);
+        }
+    }
+    getMaskedValue(value) {
+        value = value === null ? '0' : value.toString();
+        if (value.includes('.') && '.' !== this.decimalSeparator) {
+            value = value.replace('.', this.decimalSeparator);
+        }
+        return (0, vanilla_text_mask_1.conformToMask)(this.formatValue(value), this.numberMask).conformedValue;
+    }
+    getValueAsString(value, options) {
+        if (!value && value !== 0) {
+            return '';
+        }
+        value = this.getWidgetValueAsString(value, options);
+        if (Array.isArray(value)) {
+            return value.map((val) => this.getMaskedValue(val)).join(', ');
+        }
+        return this.getMaskedValue(value);
+    }
+    addFocusBlurEvents(element) {
+        super.addFocusBlurEvents(element);
+        this.addEventListener(element, 'blur', () => {
+            element.value = this.getValueAsString(this.formatValue(this.parseValue(element.value)));
+        });
+    }
+}
+exports.default = NumberComponent;

package/lib/cjs/components/number/editForm/Number.edit.data.d.ts

@@ -0,0 +1,18 @@
+declare const _default: ({
+    type: string;
+    input: boolean;
+    weight: number;
+    key: string;
+    label: string;
+    tooltip: string;
+    ignore?: undefined;
+} | {
+    key: string;
+    ignore: boolean;
+    type?: undefined;
+    input?: undefined;
+    weight?: undefined;
+    label?: undefined;
+    tooltip?: undefined;
+})[];
+export default _default;

package/lib/cjs/components/number/editForm/Number.edit.data.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        type: 'checkbox',
+        input: true,
+        weight: 70,
+        key: 'delimiter',
+        label: 'Use Thousands Separator',
+        tooltip: 'Separate thousands by local delimiter.'
+    },
+    {
+        type: 'number',
+        input: true,
+        weight: 80,
+        key: 'decimalLimit',
+        label: 'Decimal Places',
+        tooltip: 'The maximum number of decimal places.'
+    },
+    {
+        type: 'checkbox',
+        input: true,
+        weight: 90,
+        key: 'requireDecimal',
+        label: 'Require Decimal',
+        tooltip: 'Always show decimals, even if trailing zeros.'
+    },
+    {
+        key: 'case',
+        ignore: true,
+    },
+];

package/lib/cjs/components/number/editForm/Number.edit.display.d.ts

@@ -0,0 +1,5 @@
+declare const _default: {
+    key: string;
+    ignore: boolean;
+}[];
+export default _default;

package/lib/cjs/components/number/editForm/Number.edit.display.js

@@ -0,0 +1,24 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'spellcheck',
+        ignore: true
+    },
+    {
+        key: 'inputMask',
+        ignore: true
+    },
+    {
+        key: 'allowMultipleMasks',
+        ignore: true
+    },
+    {
+        key: 'showWordCount',
+        ignore: true,
+    },
+    {
+        key: 'showCharCount',
+        ignore: true,
+    }
+];

package/lib/cjs/components/number/editForm/Number.edit.validation.d.ts

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

package/lib/cjs/components/number/editForm/Number.edit.validation.js

@@ -0,0 +1,46 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'unique',
+        ignore: true
+    },
+    {
+        key: 'validate.minLength',
+        ignore: true
+    },
+    {
+        key: 'validate.maxLength',
+        ignore: true
+    },
+    {
+        key: 'validate.minWords',
+        ignore: true
+    },
+    {
+        key: 'validate.maxWords',
+        ignore: true
+    },
+    {
+        key: 'validate.pattern',
+        ignore: true
+    },
+    {
+        type: 'number',
+        label: 'Minimum Value',
+        key: 'validate.min',
+        input: true,
+        placeholder: 'Minimum Value',
+        tooltip: 'The minimum value this field must have before the form can be submitted.',
+        weight: 150
+    },
+    {
+        type: 'number',
+        label: 'Maximum Value',
+        key: 'validate.max',
+        input: true,
+        placeholder: 'Maximum Value',
+        tooltip: 'The maximum value this field can have before the form can be submitted.',
+        weight: 160
+    }
+];

package/lib/cjs/components/number/fixtures/comp1.d.ts

@@ -0,0 +1,33 @@
+declare namespace _default {
+    export const multiple: boolean;
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export const tags: never[];
+    export const type: string;
+    export namespace validate {
+        export const custom: string;
+        const multiple_1: string;
+        export { multiple_1 as multiple };
+        export const integer: string;
+        export const step: string;
+        export const max: string;
+        export const min: string;
+        export const required: boolean;
+    }
+    export const persistent: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const defaultValue: string;
+    export const suffix: string;
+    export const prefix: string;
+    export const placeholder: string;
+    export const key: string;
+    export const label: string;
+    export const inputType: string;
+    export const tableView: boolean;
+    export const input: boolean;
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp1.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'multiple': true,
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    'type': 'number',
+    'validate': {
+        'custom': '',
+        'multiple': '',
+        'integer': '',
+        'step': 'any',
+        'max': '',
+        'min': '',
+        'required': false
+    },
+    'persistent': true,
+    'protected': false,
+    'defaultValue': '',
+    'suffix': 'USD',
+    'prefix': '$',
+    'placeholder': 'Enter some money!',
+    'key': 'money',
+    'label': 'Money',
+    'inputType': 'number',
+    'tableView': true,
+    'input': true
+};

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

@@ -0,0 +1,32 @@
+declare namespace _default {
+    export const multiple: boolean;
+    export namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    export const tags: never[];
+    export const type: string;
+    export namespace validate {
+        export const custom: string;
+        const multiple_1: string;
+        export { multiple_1 as multiple };
+        export const integer: string;
+        export const step: string;
+        export const max: string;
+        export const min: string;
+        export const required: boolean;
+    }
+    export const persistent: boolean;
+    const _protected: boolean;
+    export { _protected as protected };
+    export const defaultValue: string;
+    export const placeholder: string;
+    export const key: string;
+    export const label: string;
+    export const inputType: string;
+    export const tableView: boolean;
+    export const delimiter: boolean;
+    export const input: boolean;
+}
+export default _default;

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

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'multiple': false,
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    'type': 'number',
+    'validate': {
+        'custom': '',
+        'multiple': '',
+        'integer': '',
+        'step': 'any',
+        'max': '',
+        'min': '',
+        'required': false
+    },
+    'persistent': true,
+    'protected': false,
+    'defaultValue': '',
+    'placeholder': 'Enter a number',
+    'key': 'number',
+    'label': 'Number',
+    'inputType': 'number',
+    'tableView': true,
+    'delimiter': true,
+    'input': true
+};

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

@@ -0,0 +1,14 @@
+declare namespace _default {
+    const label: string;
+    const mask: boolean;
+    const tableView: boolean;
+    const alwaysEnabled: boolean;
+    const type: string;
+    const input: boolean;
+    const key: string;
+    const delimiter: boolean;
+    const requireDecimal: boolean;
+    const encrypted: boolean;
+    const defaultValue: number;
+}
+export default _default;

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

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    label: 'Number',
+    mask: false,
+    tableView: true,
+    alwaysEnabled: false,
+    type: 'number',
+    input: true,
+    key: 'number',
+    delimiter: false,
+    requireDecimal: false,
+    encrypted: false,
+    defaultValue: 42
+};

package/lib/cjs/components/number/fixtures/comp4.d.ts

@@ -0,0 +1,14 @@
+declare namespace _default {
+    const label: string;
+    const mask: boolean;
+    const spellcheck: boolean;
+    const tableView: boolean;
+    const delimiter: boolean;
+    const requireDecimal: boolean;
+    const inputFormat: string;
+    const key: string;
+    const type: string;
+    const decimalLimit: number;
+    const input: boolean;
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp4.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'label': 'Number',
+    'mask': false,
+    'spellcheck': true,
+    'tableView': true,
+    'delimiter': true,
+    'requireDecimal': true,
+    'inputFormat': 'plain',
+    'key': 'number',
+    'type': 'number',
+    'decimalLimit': 2,
+    'input': true
+};

package/lib/cjs/components/number/fixtures/comp5.d.ts

@@ -0,0 +1,20 @@
+declare namespace _default {
+    const label: string;
+    const mask: boolean;
+    const spellcheck: boolean;
+    const tableView: boolean;
+    const multiple: boolean;
+    const delimiter: boolean;
+    const requireDecimal: boolean;
+    const inputFormat: string;
+    const calculateServer: boolean;
+    namespace validate {
+        const multiple_1: boolean;
+        export { multiple_1 as multiple };
+    }
+    const key: string;
+    const type: string;
+    const input: boolean;
+    const defaultValue: null[];
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp5.js

@@ -0,0 +1,20 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'label': 'Number',
+    'mask': false,
+    'spellcheck': true,
+    'tableView': false,
+    'multiple': true,
+    'delimiter': false,
+    'requireDecimal': false,
+    'inputFormat': 'plain',
+    'calculateServer': false,
+    'validate': {
+        'multiple': true
+    },
+    'key': 'number',
+    'type': 'number',
+    'input': true,
+    'defaultValue': [null]
+};

package/lib/cjs/components/number/fixtures/comp6.d.ts

@@ -0,0 +1,40 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        mask: boolean;
+        spellcheck: boolean;
+        tableView: boolean;
+        delimiter: boolean;
+        requireDecimal: boolean;
+        inputFormat: string;
+        validate: {
+            min: number;
+            max: number;
+        };
+        key: string;
+        type: string;
+        input: boolean;
+        showValidations?: undefined;
+    } | {
+        label: string;
+        showValidations: boolean;
+        tableView: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        mask?: undefined;
+        spellcheck?: undefined;
+        delimiter?: undefined;
+        requireDecimal?: undefined;
+        inputFormat?: undefined;
+        validate?: 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/number/fixtures/comp6.js

@@ -0,0 +1,27 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    type: 'form',
+    components: [
+        {
+            label: 'Number',
+            mask: false,
+            spellcheck: true,
+            tableView: false,
+            delimiter: false,
+            requireDecimal: false,
+            inputFormat: 'plain',
+            validate: { min: 20, max: 555 },
+            key: 'number',
+            type: 'number',
+            input: true
+        },
+        { label: 'Submit', showValidations: false, tableView: false, key: 'submit', type: 'button', input: true }
+    ],
+    revisions: '',
+    _vid: 0,
+    title: 'number tests',
+    display: 'form',
+    name: 'numberTests',
+    path: 'numbertests',
+};

package/lib/cjs/components/number/fixtures/comp7.d.ts

@@ -0,0 +1,15 @@
+declare namespace _default {
+    const label: string;
+    const mask: boolean;
+    const tableView: boolean;
+    const modalEdit: boolean;
+    const multiple: boolean;
+    const delimiter: boolean;
+    const requireDecimal: boolean;
+    const inputFormat: string;
+    const truncateMultipleSpaces: boolean;
+    const key: string;
+    const type: string;
+    const input: boolean;
+}
+export default _default;

package/lib/cjs/components/number/fixtures/comp7.js

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    label: 'Number',
+    mask: false,
+    tableView: false,
+    modalEdit: true,
+    multiple: true,
+    delimiter: false,
+    requireDecimal: false,
+    inputFormat: 'plain',
+    truncateMultipleSpaces: false,
+    key: 'number',
+    type: 'number',
+    input: true
+};