@formio/js 5.0.0-rc.27 → 5.0.0-rc.27-dev.5543.40bb827

package/lib/mjs/components/selectboxes/SelectBoxes.form.js

@@ -1,19 +0,0 @@
-import radioEditForm from '../radio/Radio.form';
-import SelectBoxesEditValidation from './editForm/SelectBoxes.edit.validation';
-export default function (...extend) {
-    return radioEditForm([
-        {
-            key: 'data',
-            components: [
-                {
-                    key: 'dataType',
-                    ignore: true,
-                }
-            ]
-        },
-        {
-            key: 'validation',
-            components: SelectBoxesEditValidation
-        },
-    ], ...extend);
-}

package/lib/mjs/components/selectboxes/SelectBoxes.js

@@ -1,255 +0,0 @@
-import _ from 'lodash';
-import { componentValueTypes, getComponentSavedTypes, boolValue } from '../../utils/utils';
-import RadioComponent from '../radio/Radio';
-export default class SelectBoxesComponent extends RadioComponent {
-    static schema(...extend) {
-        return RadioComponent.schema({
-            type: 'selectboxes',
-            label: 'Select Boxes',
-            key: 'selectBoxes',
-            inline: false
-        }, ...extend);
-    }
-    static get builderInfo() {
-        return {
-            title: 'Select Boxes',
-            group: 'basic',
-            icon: 'plus-square',
-            weight: 60,
-            documentation: '/userguide/form-building/form-components#select-box',
-            schema: SelectBoxesComponent.schema()
-        };
-    }
-    static get serverConditionSettings() {
-        return SelectBoxesComponent.conditionOperatorsSettings;
-    }
-    static get conditionOperatorsSettings() {
-        return {
-            ...super.conditionOperatorsSettings,
-            valueComponent(classComp) {
-                return {
-                    type: 'select',
-                    dataSrc: 'custom',
-                    valueProperty: 'value',
-                    valueType: 'string',
-                    data: {
-                        custom: `values = ${classComp && classComp.values ? JSON.stringify(classComp.values) : []}`
-                    },
-                };
-            }
-        };
-    }
-    static savedValueTypes(schema) {
-        return getComponentSavedTypes(schema) || [componentValueTypes.object];
-    }
-    constructor(...args) {
-        super(...args);
-        this.validators = this.validators.concat('minSelectedCount', 'maxSelectedCount', 'availableValueProperty');
-    }
-    init() {
-        super.init();
-        this.component.inputType = 'checkbox';
-    }
-    get defaultSchema() {
-        return SelectBoxesComponent.schema();
-    }
-    get inputInfo() {
-        const info = super.elementInfo();
-        info.attr.name += '[]';
-        info.attr.type = 'checkbox';
-        info.attr.class = 'form-check-input';
-        return info;
-    }
-    get emptyValue() {
-        return this.component.values.reduce((prev, value) => {
-            if (value.value) {
-                prev[value.value] = false;
-            }
-            return prev;
-        }, {});
-    }
-    get defaultValue() {
-        let defaultValue = this.emptyValue;
-        if (!_.isEmpty(this.component.defaultValue)) {
-            defaultValue = this.component.defaultValue;
-        }
-        if (this.component.customDefaultValue && !this.options.preview) {
-            defaultValue = this.evaluate(this.component.customDefaultValue, { value: '' }, 'value');
-        }
-        return defaultValue;
-    }
-    /**
-     * Only empty if the values are all false.
-     *
-     * @param value
-     * @return {boolean}
-     */
-    isEmpty(value = this.dataValue) {
-        let empty = true;
-        for (const key in value) {
-            if (value.hasOwnProperty(key) && value[key]) {
-                empty = false;
-                break;
-            }
-        }
-        return empty;
-    }
-    getValue() {
-        if (this.viewOnly || !this.refs.input || !this.refs.input.length) {
-            return this.dataValue;
-        }
-        const value = {};
-        _.each(this.refs.input, (input) => {
-            value[input.value] = !!input.checked;
-        });
-        return value;
-    }
-    /**
-     * Normalize values coming into updateValue.
-     *
-     * @param value
-     * @return {*}
-     */
-    normalizeValue(value) {
-        value = value || {};
-        if (typeof value !== 'object') {
-            if (typeof value === 'string') {
-                value = {
-                    [value]: true
-                };
-            }
-            else {
-                value = {};
-            }
-        }
-        if (Array.isArray(value)) {
-            _.each(value, (val) => {
-                value[val] = true;
-            });
-        }
-        const checkedValues = _.keys(_.pickBy(value, (val) => val));
-        if (this.isSelectURL && this.templateData && _.every(checkedValues, (val) => this.templateData[val])) {
-            const submission = this.root.submission;
-            if (!submission.metadata.selectData) {
-                submission.metadata.selectData = {};
-            }
-            const selectData = [];
-            checkedValues.forEach((value) => selectData.push(this.templateData[value]));
-            _.set(submission.metadata.selectData, this.path, selectData);
-        }
-        return value;
-    }
-    /**
-     * Set the value of this component.
-     *
-     * @param value
-     * @param flags
-     */
-    setValue(value, flags = {}) {
-        const changed = this.updateValue(value, flags);
-        value = this.dataValue;
-        if (this.isHtmlRenderMode()) {
-            if (changed) {
-                this.redraw();
-            }
-        }
-        else {
-            _.each(this.refs.input, (input) => {
-                if (_.isUndefined(value[input.value])) {
-                    value[input.value] = false;
-                }
-                input.checked = !!value[input.value];
-            });
-        }
-        return changed;
-    }
-    getValueAsString(value) {
-        if (!value) {
-            return '';
-        }
-        if (this.isSelectURL) {
-            return _(value).pickBy((val) => val).keys().join(', ');
-        }
-        return _(this.component.values || [])
-            .filter((v) => value[v.value])
-            .map('label')
-            .join(', ');
-    }
-    setSelectedClasses() {
-        if (this.refs.wrapper) {
-            //add/remove selected option class
-            const value = this.dataValue;
-            const valuesKeys = Object.keys(value);
-            this.refs.wrapper.forEach((wrapper, index) => {
-                let key = valuesKeys[index];
-                const input = this.refs.input[index];
-                if (input?.value.toString() !== key) {
-                    key = valuesKeys.find((k) => input?.value.toString() === k);
-                }
-                const isChecked = value[key];
-                if ((isChecked && key) || (this.isSelectURL && !this.shouldLoad && this.listData && _.findIndex(this.selectData, this.listData[index]) !== -1)) {
-                    //add class to container when selected
-                    this.addClass(wrapper, this.optionSelectedClass);
-                    //change "checked" attribute
-                    input.setAttribute('checked', 'true');
-                }
-                else if (!isChecked && key) {
-                    this.removeClass(wrapper, this.optionSelectedClass);
-                    input.removeAttribute('checked');
-                }
-            });
-        }
-    }
-    setInputsDisabled(value, onlyUnchecked) {
-        if (this.refs.input) {
-            this.refs.input.forEach(item => {
-                if (onlyUnchecked && !item.checked || !onlyUnchecked) {
-                    item.disabled = value;
-                }
-            });
-        }
-    }
-    checkComponentValidity(data, dirty, rowData, options) {
-        const minCount = this.component.validate.minSelectedCount;
-        const maxCount = this.component.validate.maxSelectedCount;
-        if (!this.shouldSkipValidation(data, dirty, rowData)) {
-            const isValid = this.isValid(data, dirty);
-            if ((maxCount || minCount)) {
-                const count = Object.keys(this.validationValue).reduce((total, key) => {
-                    if (this.validationValue[key]) {
-                        total++;
-                    }
-                    return total;
-                }, 0);
-                // Disable the rest of inputs if the max amount is already checked
-                if (maxCount && count >= maxCount) {
-                    this.setInputsDisabled(true, true);
-                }
-                else if (maxCount && !this.shouldDisabled) {
-                    this.setInputsDisabled(false);
-                }
-                if (!isValid && maxCount && count > maxCount) {
-                    const message = this.t(this.component.maxSelectedCountMessage || 'You can only select up to {{maxCount}} items.', { maxCount });
-                    this.setCustomValidity(message, dirty);
-                    return false;
-                }
-                else if (!isValid && minCount && count < minCount) {
-                    this.setInputsDisabled(false);
-                    const message = this.t(this.component.minSelectedCountMessage || 'You must select at least {{minCount}} items.', { minCount });
-                    this.setCustomValidity(message, dirty);
-                    return false;
-                }
-            }
-        }
-        return super.checkComponentValidity(data, dirty, rowData, options);
-    }
-    validateValueAvailability(setting, value) {
-        if (!boolValue(setting) || !value) {
-            return true;
-        }
-        const values = this.component.values;
-        const availableValueKeys = (values || []).map(({ value: optionValue }) => optionValue);
-        const valueKeys = Object.keys(value);
-        return valueKeys.every((key) => availableValueKeys.includes(key));
-    }
-}

package/lib/mjs/components/selectboxes/editForm/SelectBoxes.edit.validation.d.ts

@@ -1,9 +0,0 @@
-declare const _default: {
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    weight: number;
-}[];
-export default _default;

package/lib/mjs/components/selectboxes/editForm/SelectBoxes.edit.validation.js

@@ -1,34 +0,0 @@
-export default [
-    {
-        type: 'number',
-        input: true,
-        key: 'validate.minSelectedCount',
-        label: 'Minimum checked number',
-        tooltip: 'Minimum checkboxes required before form can be submitted.',
-        weight: 250
-    },
-    {
-        type: 'number',
-        input: true,
-        key: 'validate.maxSelectedCount',
-        label: 'Maximum checked number',
-        tooltip: 'Maximum checkboxes possible before form can be submitted.',
-        weight: 250
-    },
-    {
-        type: 'textfield',
-        input: true,
-        key: 'minSelectedCountMessage',
-        label: 'Minimum checked error message',
-        tooltip: 'Error message displayed if minimum number of items not checked.',
-        weight: 250
-    },
-    {
-        type: 'textfield',
-        input: true,
-        key: 'maxSelectedCountMessage',
-        label: 'Maximum checked error message',
-        tooltip: 'Error message displayed if maximum number of items checked.',
-        weight: 250
-    }
-];

package/lib/mjs/components/selectboxes/fixtures/comp1.d.ts

@@ -1,24 +0,0 @@
-declare namespace _default {
-    export namespace conditional {
-        const eq: string;
-        const when: null;
-        const show: string;
-    }
-    export const type: string;
-    export namespace validate {
-        const required: boolean;
-    }
-    export const persistent: boolean;
-    const _protected: boolean;
-    export { _protected as protected };
-    export const inline: boolean;
-    export const values: {
-        label: string;
-        value: string;
-    }[];
-    export const key: string;
-    export const label: string;
-    export const tableView: boolean;
-    export const input: boolean;
-}
-export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp1.js

@@ -1,52 +0,0 @@
-export default {
-    'conditional': {
-        'eq': '',
-        'when': null,
-        'show': ''
-    },
-    'type': 'selectboxes',
-    'validate': {
-        'required': false
-    },
-    'persistent': true,
-    'protected': false,
-    'inline': false,
-    'values': [
-        {
-            'label': 'Red',
-            'value': 'red'
-        },
-        {
-            'label': 'Blue',
-            'value': 'blue'
-        },
-        {
-            'label': 'Green',
-            'value': 'green'
-        },
-        {
-            'label': 'Orange',
-            'value': 'orange'
-        },
-        {
-            'label': 'Yellow',
-            'value': 'yellow'
-        },
-        {
-            'label': 'Purple',
-            'value': 'purple'
-        },
-        {
-            'label': 'Black',
-            'value': 'black'
-        },
-        {
-            'label': 'White',
-            'value': 'white'
-        }
-    ],
-    'key': 'favoriteColors',
-    'label': 'Favorite Colors',
-    'tableView': true,
-    'input': true
-};

package/lib/mjs/components/selectboxes/fixtures/comp2.d.ts

@@ -1,24 +0,0 @@
-declare namespace _default {
-    export namespace conditional {
-        const eq: string;
-        const when: null;
-        const show: string;
-    }
-    export const type: string;
-    export namespace validate {
-        const required: boolean;
-    }
-    export const persistent: boolean;
-    const _protected: boolean;
-    export { _protected as protected };
-    export const inline: boolean;
-    export const values: {
-        label: string;
-        value: string;
-    }[];
-    export const key: string;
-    export const label: string;
-    export const tableView: boolean;
-    export const input: boolean;
-}
-export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp2.js

@@ -1,52 +0,0 @@
-export default {
-    'conditional': {
-        'eq': '',
-        'when': null,
-        'show': ''
-    },
-    'type': 'selectboxes',
-    'validate': {
-        'required': true
-    },
-    'persistent': true,
-    'protected': false,
-    'inline': false,
-    'values': [
-        {
-            'label': 'Red',
-            'value': 'red'
-        },
-        {
-            'label': 'Blue',
-            'value': 'blue'
-        },
-        {
-            'label': 'Green',
-            'value': 'green'
-        },
-        {
-            'label': 'Orange',
-            'value': 'orange'
-        },
-        {
-            'label': 'Yellow',
-            'value': 'yellow'
-        },
-        {
-            'label': 'Purple',
-            'value': 'purple'
-        },
-        {
-            'label': 'Black',
-            'value': 'black'
-        },
-        {
-            'label': 'White',
-            'value': 'white'
-        }
-    ],
-    'key': 'favoriteColors',
-    'label': 'Favorite Colors',
-    'tableView': true,
-    'input': true
-};

package/lib/mjs/components/selectboxes/fixtures/comp3.d.ts

@@ -1,23 +0,0 @@
-declare namespace _default {
-    const _id: string;
-    const label: string;
-    const optionsLabelPosition: string;
-    const hideLabel: boolean;
-    const tableView: boolean;
-    const values: {
-        label: string;
-        value: string;
-        shortcut: string;
-    }[];
-    namespace validate {
-        const required: boolean;
-    }
-    const key: string;
-    const type: string;
-    const input: boolean;
-    const inputType: string;
-    const title: string;
-    const name: string;
-    const path: string;
-}
-export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp3.js

@@ -1,19 +0,0 @@
-export default {
-    _id: '61135ec3e4188f021c7ad390',
-    label: 'Select Boxes',
-    optionsLabelPosition: 'right',
-    hideLabel: true,
-    tableView: false,
-    values: [
-        { label: '55', value: '55', shortcut: '' },
-        { label: '77', value: '77', shortcut: '' },
-    ],
-    validate: { required: true },
-    key: 'selectBoxes',
-    type: 'selectboxes',
-    input: true,
-    inputType: 'checkbox',
-    title: 'FIO-2959',
-    name: 'fio2959',
-    path: 'fio2959',
-};

package/lib/mjs/components/selectboxes/fixtures/comp4.d.ts

@@ -1,66 +0,0 @@
-declare namespace _default {
-    const _id: string;
-    const title: string;
-    const name: string;
-    const path: string;
-    const type: string;
-    const display: string;
-    const components: ({
-        label: string;
-        tableView: boolean;
-        key: string;
-        type: string;
-        input: boolean;
-        conditional?: undefined;
-        components?: undefined;
-        disableOnInvalid?: undefined;
-    } | {
-        label: string;
-        tableView: boolean;
-        key: string;
-        conditional: {
-            show: boolean;
-            conjunction: string;
-            conditions: {
-                component: string;
-                operator: string;
-                value: boolean;
-            }[];
-        };
-        type: string;
-        input: boolean;
-        components: {
-            label: string;
-            optionsLabelPosition: string;
-            tableView: boolean;
-            defaultValue: {
-                '1': boolean;
-                '2': boolean;
-                '3': boolean;
-            };
-            values: {
-                label: string;
-                value: string;
-                shortcut: string;
-            }[];
-            validate: {
-                minSelectedCount: number;
-            };
-            key: string;
-            type: string;
-            input: boolean;
-            inputType: string;
-        }[];
-        disableOnInvalid?: undefined;
-    } | {
-        type: string;
-        label: string;
-        key: string;
-        disableOnInvalid: boolean;
-        input: boolean;
-        tableView: boolean;
-        conditional?: undefined;
-        components?: undefined;
-    })[];
-}
-export default _default;

package/lib/mjs/components/selectboxes/fixtures/comp4.js

@@ -1,79 +0,0 @@
-export default {
-    _id: '638743c823671dec2ace618b',
-    title: '5685',
-    name: '5685',
-    path: '5685',
-    type: 'form',
-    display: 'form',
-    components: [
-        {
-            label: 'Checkbox',
-            tableView: false,
-            key: 'checkbox',
-            type: 'checkbox',
-            input: true
-        },
-        {
-            label: 'Container',
-            tableView: false,
-            key: 'container',
-            conditional: {
-                show: true,
-                conjunction: 'all',
-                conditions: [
-                    {
-                        component: 'checkbox',
-                        operator: 'isEqual',
-                        value: true
-                    }
-                ]
-            },
-            type: 'container',
-            input: true,
-            components: [
-                {
-                    label: 'Select Boxes',
-                    optionsLabelPosition: 'right',
-                    tableView: false,
-                    defaultValue: {
-                        '1': false,
-                        '2': false,
-                        '3': false
-                    },
-                    values: [
-                        {
-                            label: '1',
-                            value: '1',
-                            shortcut: ''
-                        },
-                        {
-                            label: '2',
-                            value: '2',
-                            shortcut: ''
-                        },
-                        {
-                            label: '3',
-                            value: '3',
-                            shortcut: ''
-                        }
-                    ],
-                    validate: {
-                        minSelectedCount: 1
-                    },
-                    key: 'selectBoxes',
-                    type: 'selectboxes',
-                    input: true,
-                    inputType: 'checkbox'
-                }
-            ]
-        },
-        {
-            type: 'button',
-            label: 'Submit',
-            key: 'submit',
-            disableOnInvalid: true,
-            input: true,
-            tableView: false
-        }
-    ]
-};