@formio/js 5.0.0-bb.dev.1

package/lib/cjs/components/content/Content.js

@@ -0,0 +1,79 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const Component_1 = __importDefault(require("../_classes/component/Component"));
+const lodash_1 = __importDefault(require("lodash"));
+class ContentComponent extends Component_1.default {
+    static schema(...extend) {
+        return Component_1.default.schema({
+            label: 'Content',
+            type: 'content',
+            key: 'content',
+            input: false,
+            html: ''
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Content',
+            group: 'layout',
+            icon: 'html5',
+            preview: false,
+            showPreview: false,
+            documentation: '/userguide/form-building/layout-components#content',
+            weight: 5,
+            schema: ContentComponent.schema()
+        };
+    }
+    static savedValueTypes() {
+        return [];
+    }
+    get defaultSchema() {
+        return ContentComponent.schema();
+    }
+    get content() {
+        if (this.builderMode) {
+            return this.component.html || 'Content';
+        }
+        const submission = lodash_1.default.get(this.root, 'submission', {});
+        return this.component.html ? this.interpolate(this.component.html, {
+            metadata: submission.metadata || {},
+            submission: submission,
+            data: this.rootValue,
+            row: this.data
+        }) : '';
+    }
+    render() {
+        return super.render(this.renderTemplate('html', {
+            tag: 'div',
+            attrs: [],
+            content: this.content,
+        }));
+    }
+    get dataReady() {
+        var _a;
+        return ((_a = this.root) === null || _a === void 0 ? void 0 : _a.submissionReady) || Promise.resolve();
+    }
+    attach(element) {
+        this.loadRefs(element, { html: 'single' });
+        this.dataReady.then(() => {
+            if (this.refs.html) {
+                this.setContent(this.refs.html, this.content);
+            }
+        });
+        if (this.component.refreshOnChange) {
+            this.on('change', () => {
+                if (this.refs.html) {
+                    this.setContent(this.refs.html, this.content);
+                }
+            }, true);
+        }
+        return super.attach(element);
+    }
+    get emptyValue() {
+        return '';
+    }
+}
+exports.default = ContentComponent;

package/lib/cjs/components/content/editForm/Content.edit.display.d.ts

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

package/lib/cjs/components/content/editForm/Content.edit.display.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'labelPosition',
+        ignore: true
+    },
+    {
+        key: 'placeholder',
+        ignore: true
+    },
+    {
+        key: 'description',
+        ignore: true
+    },
+    {
+        key: 'tooltip',
+        ignore: true
+    },
+    {
+        key: 'hideLabel',
+        ignore: true
+    },
+    {
+        key: 'autofocus',
+        ignore: true
+    },
+    {
+        key: 'disabled',
+        ignore: true
+    },
+    {
+        key: 'tabindex',
+        ignore: true
+    },
+    {
+        key: 'tableView',
+        ignore: true
+    },
+    {
+        weight: 700,
+        type: 'checkbox',
+        label: 'Refresh On Change',
+        tooltip: 'Rerender the field whenever a value on the form changes.',
+        key: 'refreshOnChange',
+        input: true
+    },
+];

package/lib/cjs/components/content/editForm/Content.edit.logic.d.ts

@@ -0,0 +1,48 @@
+declare const _default: {
+    key: string;
+    components: {
+        key: string;
+        components: {
+            key: string;
+            components: ({
+                data: {
+                    json: ({
+                        label: string;
+                        value: string;
+                        type: string;
+                        component?: undefined;
+                    } | {
+                        label: string;
+                        value: string;
+                        type: string;
+                        component: string;
+                    })[];
+                };
+                key: string;
+                type?: undefined;
+                editor?: undefined;
+                rows?: undefined;
+                as?: undefined;
+                label?: undefined;
+                tooltip?: undefined;
+                defaultValue?: undefined;
+                weight?: undefined;
+                input?: undefined;
+            } | {
+                type: string;
+                editor: string;
+                rows: number;
+                as: string;
+                label: string;
+                tooltip: string;
+                defaultValue: string;
+                key: string;
+                weight: number;
+                input: boolean;
+                customConditional(context: any): any;
+                data?: undefined;
+            })[];
+        }[];
+    }[];
+}[];
+export default _default;

package/lib/cjs/components/content/editForm/Content.edit.logic.js

@@ -0,0 +1,100 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = [
+    {
+        key: 'logic',
+        components: [
+            {
+                key: 'actions',
+                components: [
+                    {
+                        key: 'actionPanel',
+                        components: [
+                            {
+                                data: {
+                                    json: [
+                                        {
+                                            label: 'Hidden',
+                                            value: 'hidden',
+                                            type: 'boolean',
+                                        },
+                                        {
+                                            label: 'Required',
+                                            value: 'validate.required',
+                                            type: 'boolean',
+                                        },
+                                        {
+                                            label: 'Disabled',
+                                            value: 'disabled',
+                                            type: 'boolean',
+                                        },
+                                        {
+                                            label: 'Label',
+                                            value: 'label',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Title',
+                                            value: 'title',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Tooltip',
+                                            value: 'tooltip',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Description',
+                                            value: 'description',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Placeholder',
+                                            value: 'placeholder',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'CSS Class',
+                                            value: 'className',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Container Custom Class',
+                                            value: 'customClass',
+                                            type: 'string',
+                                        },
+                                        {
+                                            label: 'Content',
+                                            value: 'html',
+                                            type: 'string',
+                                            component: 'content',
+                                        },
+                                    ],
+                                },
+                                key: 'property',
+                            },
+                            {
+                                type: 'textarea',
+                                editor: 'ace',
+                                rows: 10,
+                                as: 'html',
+                                label: 'Content',
+                                tooltip: 'The content of this HTML element.',
+                                defaultValue: '<div class="well">Content</div>',
+                                key: 'content',
+                                weight: 30,
+                                input: true,
+                                customConditional(context) {
+                                    return (context.row.type === 'property' &&
+                                        context.row.hasOwnProperty('property') &&
+                                        context.row.property.type === 'string' &&
+                                        context.row.property.component === 'content');
+                                },
+                            },
+                        ],
+                    },
+                ],
+            },
+        ],
+    },
+];

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

@@ -0,0 +1,13 @@
+declare namespace _default {
+    namespace conditional {
+        const eq: string;
+        const when: null;
+        const show: string;
+    }
+    const tags: never[];
+    const type: string;
+    const html: string;
+    const input: boolean;
+    const key: string;
+}
+export default _default;

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

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.default = {
+    'conditional': {
+        'eq': '',
+        'when': null,
+        'show': ''
+    },
+    'tags': [],
+    'type': 'content',
+    'html': '<h1>This is a test</h1>\n',
+    'input': false,
+    'key': 'content1'
+};

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

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

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

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.comp1 = void 0;
+const comp1_1 = __importDefault(require("./comp1"));
+exports.comp1 = comp1_1.default;

package/lib/cjs/components/currency/Currency.d.ts

@@ -0,0 +1,8 @@
+export default class CurrencyComponent extends NumberComponent {
+    constructor(component: any, options: any, data: any);
+    currencyPrefix: any;
+    currencySuffix: any;
+    addZerosAndFormatValue(value: any): any;
+    stripPrefixSuffix(value: any): any;
+}
+import NumberComponent from '../number/Number';

package/lib/cjs/components/currency/Currency.form.d.ts

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

package/lib/cjs/components/currency/Currency.form.js

@@ -0,0 +1,46 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const TextField_form_1 = __importDefault(require("../textfield/TextField.form"));
+const Currency_edit_display_1 = __importDefault(require("./editForm/Currency.edit.display"));
+const Currency_edit_data_1 = __importDefault(require("./editForm/Currency.edit.data"));
+function default_1(...extend) {
+    return (0, TextField_form_1.default)([
+        {
+            key: 'display',
+            components: Currency_edit_display_1.default
+        },
+        {
+            key: 'data',
+            components: Currency_edit_data_1.default
+        },
+        {
+            key: 'validation',
+            components: [
+                {
+                    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,
+                },
+            ]
+        },
+    ], ...extend);
+}
+exports.default = default_1;

package/lib/cjs/components/currency/Currency.js

@@ -0,0 +1,180 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const text_mask_addons_1 = require("@formio/text-mask-addons");
+const vanilla_text_mask_1 = require("@formio/vanilla-text-mask");
+const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils/utils");
+const Number_1 = __importDefault(require("../number/Number"));
+class CurrencyComponent extends Number_1.default {
+    static schema(...extend) {
+        return Number_1.default.schema({
+            type: 'currency',
+            label: 'Currency',
+            key: 'currency'
+        }, ...extend);
+    }
+    static get builderInfo() {
+        return {
+            title: 'Currency',
+            group: 'advanced',
+            icon: 'usd',
+            documentation: '/userguide/form-building/advanced-components#currency',
+            weight: 70,
+            schema: CurrencyComponent.schema()
+        };
+    }
+    constructor(component, options, data) {
+        // Currency should default to have a delimiter unless otherwise specified.
+        if (component && !component.hasOwnProperty('delimiter')) {
+            component.delimiter = true;
+        }
+        super(component, options, data);
+    }
+    /**
+     * Creates the number mask for currency numbers.
+     *
+     * @return {*}
+     */
+    createNumberMask() {
+        const decimalLimit = lodash_1.default.get(this.component, 'decimalLimit', 2);
+        const affixes = (0, utils_1.getCurrencyAffixes)({
+            currency: this.component.currency,
+            decimalLimit: decimalLimit,
+            decimalSeparator: this.decimalSeparator,
+            lang: this.options.language
+        });
+        this.currencyPrefix = this.options.prefix || affixes.prefix;
+        this.currencySuffix = this.options.suffix || affixes.suffix;
+        return (0, text_mask_addons_1.createNumberMask)({
+            prefix: this.currencyPrefix,
+            suffix: this.currencySuffix,
+            thousandsSeparatorSymbol: lodash_1.default.get(this.component, 'thousandsSeparator', this.delimiter),
+            decimalSymbol: lodash_1.default.get(this.component, 'decimalSymbol', this.decimalSeparator),
+            decimalLimit: decimalLimit,
+            allowNegative: lodash_1.default.get(this.component, 'allowNegative', true),
+            allowDecimal: this.isDecimalAllowed(),
+        });
+    }
+    isDecimalAllowed() {
+        return lodash_1.default.get(this.component, 'allowDecimal', true);
+    }
+    setInputMask(input) {
+        const affixes = (0, utils_1.getCurrencyAffixes)({
+            currency: this.component.currency,
+            decimalSeparator: this.decimalSeparator,
+            lang: this.options.language,
+        });
+        let numberPattern = `${affixes.prefix}[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 || '',
+            pipe: (conformedValue) => {
+                if (conformedValue === '$0._') {
+                    // Delay to allow mask to update first.
+                    setTimeout(() => {
+                        const caretPosition = input.value.length - 1;
+                        input.setSelectionRange(caretPosition, caretPosition);
+                    });
+                }
+                return conformedValue;
+            },
+            shadowRoot: this.root ? this.root.shadowRoot : null
+        });
+    }
+    get defaultSchema() {
+        return CurrencyComponent.schema();
+    }
+    parseNumber(value) {
+        return super.parseNumber(this.stripPrefixSuffix(value));
+    }
+    parseValue(value) {
+        return super.parseValue(this.stripPrefixSuffix(value));
+    }
+    addZerosAndFormatValue(value) {
+        if (!value && value !== 0)
+            return;
+        const decimalLimit = lodash_1.default.get(this.component, 'decimalLimit', 2);
+        let integerPart;
+        let decimalPart = '';
+        let decimalPartNumbers = [];
+        const negativeValueSymbol = '-';
+        const hasPrefix = this.currencyPrefix ? value.includes(this.currencyPrefix) : false;
+        const hasSuffix = this.currencySuffix ? value.includes(this.currencySuffix) : false;
+        const isNegative = value.includes(negativeValueSymbol) || false;
+        value = this.stripPrefixSuffix(isNegative ? value.replace(negativeValueSymbol, '') : value);
+        if (value.includes(this.decimalSeparator)) {
+            [integerPart, decimalPart] = value.split(this.decimalSeparator);
+            decimalPartNumbers = [...decimalPart.split('')];
+        }
+        else {
+            integerPart = value;
+        }
+        if (decimalPart.length < decimalLimit) {
+            while (decimalPartNumbers.length < decimalLimit) {
+                decimalPartNumbers.push('0');
+            }
+        }
+        const formattedValue = `${isNegative ? negativeValueSymbol : ''}${hasPrefix ? this.currencyPrefix : ''}${integerPart}${this.decimalSeparator}${decimalPartNumbers.join('')}${hasSuffix ? this.currencySuffix : ''}`;
+        return super.formatValue(formattedValue);
+    }
+    getValueAsString(value, options) {
+        const stringValue = super.getValueAsString(value, options);
+        // eslint-disable-next-line eqeqeq
+        if (value || value == '0') {
+            if (Array.isArray(value)) {
+                return value.map((val) => this.addZerosAndFormatValue(super.getValueAsString(val, options))).join(', ');
+            }
+            return this.addZerosAndFormatValue(stringValue);
+        }
+        return stringValue;
+    }
+    formatValue(value) {
+        if (value || value === '0') {
+            return this.addZerosAndFormatValue(value);
+        }
+        return super.formatValue(value);
+    }
+    stripPrefixSuffix(value) {
+        if (typeof value === 'string') {
+            try {
+                const hasPrefix = this.currencyPrefix ? value.includes(this.currencyPrefix) : false;
+                const hasSuffix = this.currencySuffix ? value.includes(this.currencySuffix) : false;
+                const hasDelimiter = value.includes(this.delimiter);
+                const hasDecimalSeparator = value.includes(this.decimalSeparator);
+                if (this.currencyPrefix) {
+                    value = value.replace(this.currencyPrefix, '');
+                }
+                if (this.currencySuffix) {
+                    value = value.replace(this.currencySuffix, '');
+                }
+                //when we enter $ in the field using dashboard, it contains '_' that is NaN
+                if ((hasPrefix || hasSuffix) && !hasDelimiter && !hasDecimalSeparator && (Number.isNaN(+value) || !value)) {
+                    value = '0';
+                }
+            }
+            catch (err) {
+                // If value doesn't have a replace method, continue on as before.
+            }
+        }
+        return value;
+    }
+    addFocusBlurEvents(element) {
+        super.addFocusBlurEvents(element);
+        this.addEventListener(element, 'focus', () => {
+            if (element.defaultValue === element.value) {
+                element.setSelectionRange(0, element.defaultValue.length);
+            }
+        });
+        this.addEventListener(element, 'blur', () => {
+            element.value = this.getValueAsString(this.addZerosAndFormatValue(this.parseValue(element.value)));
+        });
+    }
+}
+exports.default = CurrencyComponent;

package/lib/cjs/components/currency/editForm/Currency.edit.data.d.ts

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