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

package/lib/mjs/components/datetime/DateTime.js

@@ -1,187 +0,0 @@
-import _ from 'lodash';
-import moment from 'moment';
-import FormioUtils from '../../utils';
-import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
-import Input from '../_classes/input/Input';
-export default class DateTimeComponent extends Input {
-    static schema(...extend) {
-        return Input.schema({
-            type: 'datetime',
-            label: 'Date / Time',
-            key: 'dateTime',
-            format: 'yyyy-MM-dd hh:mm a',
-            useLocaleSettings: false,
-            allowInput: true,
-            enableDate: true,
-            enableTime: true,
-            defaultValue: '',
-            defaultDate: '',
-            displayInTimezone: 'viewer',
-            timezone: '',
-            datepickerMode: 'day',
-            datePicker: {
-                showWeeks: true,
-                startingDay: 0,
-                initDate: '',
-                minMode: 'day',
-                maxMode: 'year',
-                yearRows: 4,
-                yearColumns: 5,
-                minDate: null,
-                maxDate: null
-            },
-            timePicker: {
-                hourStep: 1,
-                minuteStep: 1,
-                showMeridian: true,
-                readonlyInput: false,
-                mousewheel: true,
-                arrowkeys: true
-            },
-            customOptions: {},
-        }, ...extend);
-    }
-    static get builderInfo() {
-        return {
-            title: 'Date / Time',
-            group: 'advanced',
-            icon: 'calendar',
-            documentation: '/userguide/form-building/advanced-components#date-and-time',
-            weight: 40,
-            schema: DateTimeComponent.schema()
-        };
-    }
-    static get serverConditionSettings() {
-        return DateTimeComponent.conditionOperatorsSettings;
-    }
-    static get conditionOperatorsSettings() {
-        return {
-            ...super.conditionOperatorsSettings,
-            operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'],
-            valueComponent(classComp) {
-                return {
-                    ...classComp,
-                    type: 'datetime',
-                };
-            }
-        };
-    }
-    static savedValueTypes(schema) {
-        schema = schema || {};
-        return getComponentSavedTypes(schema) || [componentValueTypes.date];
-    }
-    constructor(component, options, data) {
-        super(component, options, data);
-        const timezone = (this.component.timezone || this.options.timezone);
-        const time24hr = !_.get(this.component, 'timePicker.showMeridian', true);
-        // Change the format to map to the settings.
-        if (!this.component.enableDate) {
-            this.component.format = this.component.format.replace(/yyyy-MM-dd /g, '');
-        }
-        else if (this.component.enableDate && !/[yMd]/.test(this.component.format) && this.builderMode) {
-            this.component.format = `yyyy-MM-dd ${this.component.format}`;
-        }
-        if (!this.component.enableTime) {
-            this.component.format = this.component.format.replace(/ hh:mm a$/g, '');
-        }
-        else if (this.component.enableTime && !/[mhH]/.test(this.component.format) && this.builderMode) {
-            this.component.format = `${this.component.format} hh:mm a`;
-        }
-        else if (time24hr) {
-            this.component.format = this.component.format.replace(/hh:mm a$/g, 'HH:mm');
-        }
-        else {
-            this.component.format = this.component.format.replace(/HH:mm$/g, 'hh:mm a');
-        }
-        let customOptions = this.component.customOptions || {};
-        if (typeof customOptions === 'string') {
-            try {
-                customOptions = JSON.parse(customOptions);
-            }
-            catch (err) {
-                console.warn(err.message);
-                customOptions = {};
-            }
-        }
-        /* eslint-disable camelcase */
-        this.component.widget = {
-            type: 'calendar',
-            timezone,
-            displayInTimezone: _.get(this.component, 'displayInTimezone', 'viewer'),
-            locale: this.options.language,
-            useLocaleSettings: _.get(this.component, 'useLocaleSettings', false),
-            allowInput: _.get(this.component, 'allowInput', true),
-            mode: 'single',
-            enableTime: _.get(this.component, 'enableTime', true),
-            noCalendar: !_.get(this.component, 'enableDate', true),
-            format: this.component.format,
-            hourIncrement: _.get(this.component, 'timePicker.hourStep', 1),
-            minuteIncrement: _.get(this.component, 'timePicker.minuteStep', 5),
-            time_24hr: time24hr,
-            readOnly: this.options.readOnly,
-            minDate: _.get(this.component, 'datePicker.minDate'),
-            disabledDates: _.get(this.component, 'datePicker.disable'),
-            disableWeekends: _.get(this.component, 'datePicker.disableWeekends'),
-            disableWeekdays: _.get(this.component, 'datePicker.disableWeekdays'),
-            disableFunction: _.get(this.component, 'datePicker.disableFunction'),
-            maxDate: _.get(this.component, 'datePicker.maxDate'),
-            ...customOptions,
-        };
-        /* eslint-enable camelcase */
-        // Add the validators date.
-        this.validators.push('date');
-    }
-    get defaultSchema() {
-        return DateTimeComponent.schema();
-    }
-    get defaultValue() {
-        let defaultValue = super.defaultValue;
-        if (!defaultValue && this.component.defaultDate) {
-            defaultValue = FormioUtils.getDateSetting(this.component.defaultDate);
-            defaultValue = defaultValue ? defaultValue.toISOString() : '';
-        }
-        return defaultValue;
-    }
-    get emptyValue() {
-        return '';
-    }
-    get momentFormat() {
-        return FormioUtils.convertFormatToMoment(this.component.format);
-    }
-    isEmpty(value = this.dataValue) {
-        if (value && (value.toString() === 'Invalid Date')) {
-            return true;
-        }
-        return super.isEmpty(value);
-    }
-    formatValue(input) {
-        const result = moment.utc(input).toISOString();
-        return result === 'Invalid date' ? input : result;
-    }
-    isEqual(valueA, valueB = this.dataValue) {
-        return (this.isEmpty(valueA) && this.isEmpty(valueB))
-            || moment.utc(valueA).format(this.momentFormat) === moment.utc(valueB).format(this.momentFormat);
-    }
-    createWrapper() {
-        return false;
-    }
-    checkValidity(data, dirty, rowData) {
-        if (this.refs.input) {
-            this.refs.input.forEach((input) => {
-                if (input.widget && input.widget.enteredDate) {
-                    dirty = true;
-                }
-            });
-        }
-        return super.checkValidity(data, dirty, rowData);
-    }
-    getValueAsString(value) {
-        let format = FormioUtils.convertFormatToMoment(this.component.format);
-        format += format.match(/z$/) ? '' : ' z';
-        const timezone = this.timezone;
-        if (value && !this.attached && timezone) {
-            return _.trim(FormioUtils.momentDate(value, format, timezone).format(format));
-        }
-        return (value ? _.trim(moment(value).format(format)) : value) || '';
-    }
-}

package/lib/mjs/components/datetime/editForm/DateTime.edit.data.d.ts

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

package/lib/mjs/components/datetime/editForm/DateTime.edit.data.js

@@ -1,21 +0,0 @@
-export default [
-    {
-        type: 'textfield',
-        input: true,
-        key: 'defaultDate',
-        label: 'Default Date',
-        placeholder: 'moment()',
-        tooltip: 'You can use Moment.js functions to set the default value to a specific date. For example: \n \n moment().subtract(10, \'days\')',
-        weight: 6
-    }, {
-        type: 'textarea',
-        as: 'json',
-        editor: 'ace',
-        weight: 28,
-        input: true,
-        key: 'customOptions',
-        label: 'Flatpickr options',
-        tooltip: 'A raw JSON object to use as options for the Date / Time component (Flatpickr).',
-        defaultValue: {},
-    },
-];

package/lib/mjs/components/datetime/editForm/DateTime.edit.date.d.ts

@@ -1,61 +0,0 @@
-declare const _default: ({
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    weight: number;
-    tooltip: string;
-    placeholder?: undefined;
-    validate?: undefined;
-    title?: undefined;
-    collapsible?: undefined;
-    collapsed?: undefined;
-    style?: undefined;
-    components?: undefined;
-} | {
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    placeholder: string;
-    tooltip: string;
-    validate: {
-        custom: string;
-    };
-    weight: number;
-    title?: undefined;
-    collapsible?: undefined;
-    collapsed?: undefined;
-    style?: undefined;
-    components?: undefined;
-} | {
-    type: string;
-    title: string;
-    collapsible: boolean;
-    collapsed: boolean;
-    style: {
-        'margin-bottom': string;
-    };
-    key: string;
-    customConditional(): boolean;
-    components: ({
-        type: string;
-        tag: string;
-        content: string;
-    } | {
-        type: string;
-        input: boolean;
-        editor: string;
-        key: string;
-        label: string;
-        description: string;
-        weight: number;
-    })[];
-    input?: undefined;
-    label?: undefined;
-    weight?: undefined;
-    tooltip?: undefined;
-    placeholder?: undefined;
-    validate?: undefined;
-})[];
-export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.date.js

@@ -1,70 +0,0 @@
-import Evaluator from '../../../utils/Evaluator';
-import EditFormUtils from '../../_classes/component/editForm/utils';
-export default [
-    {
-        type: 'checkbox',
-        input: true,
-        key: 'enableDate',
-        label: 'Enable Date Input',
-        weight: 0,
-        tooltip: 'Enables date input for this field.'
-    },
-    {
-        type: 'tags',
-        input: true,
-        key: 'datePicker.disable',
-        label: 'Disable specific dates or dates by range',
-        placeholder: '(yyyy-MM-dd) or (yyyy-MM-dd - yyyy-MM-dd)',
-        tooltip: 'Add dates that you want to blacklist. For example: \n \n 2025-02-21',
-        validate: {
-            custom: 'if (_.isEmpty(input)) {\n  return true;\n}\nconst dates = _.isArray(input) ?\ninput : input.split(component.delimeter);\nconst isValid = _.every(dates, (data) => \n  !!data.match(/\\d{4}-\\d{2}-\\d{2}/g));\nvalid = isValid || \'Invalid date\';'
-        },
-        weight: 21
-    },
-    {
-        type: 'panel',
-        title: 'Custom Disabled Dates',
-        collapsible: true,
-        collapsed: true,
-        style: { 'margin-bottom': '10px' },
-        key: 'panel-disable-function',
-        customConditional() {
-            return !Evaluator.noeval || Evaluator.protectedEval;
-        },
-        components: [
-            EditFormUtils.logicVariablesTable('<tr><th>date</th><td>The date object.</td></tr>'),
-            {
-                type: 'textarea',
-                input: true,
-                editor: 'ace',
-                key: 'datePicker.disableFunction',
-                label: 'Disabling dates by a function',
-                description: 'For more information check out the <a href="https://flatpickr.js.org/examples/#disabling-dates" target="_blank" rel="noopener noreferrer">Docs</a>',
-                weight: 22
-            },
-            {
-                type: 'htmlelement',
-                tag: 'div',
-                content: '<h4>Example</h4>' +
-                    `<pre>// Disable all weekends<br>date.getDay() === 0 || date.getDay() === 6</pre>
-          `
-            }
-        ]
-    },
-    {
-        type: 'checkbox',
-        input: true,
-        key: 'datePicker.disableWeekends',
-        label: 'Disable weekends',
-        tooltip: 'Check to disable weekends',
-        weight: 23
-    },
-    {
-        type: 'checkbox',
-        input: true,
-        key: 'datePicker.disableWeekdays',
-        label: 'Disable weekdays',
-        tooltip: 'Check to disable weekdays',
-        weight: 23
-    }
-];

package/lib/mjs/components/datetime/editForm/DateTime.edit.display.d.ts

@@ -1,128 +0,0 @@
-declare const _default: ({
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    weight: number;
-    defaultValue: string;
-    dataSrc: string;
-    data: {
-        values: {
-            label: string;
-            value: string;
-        }[];
-        url?: undefined;
-    };
-    lazyLoad?: undefined;
-    valueProperty?: undefined;
-    template?: undefined;
-    conditional?: undefined;
-    placeholder?: undefined;
-    description?: undefined;
-    templates?: undefined;
-    components?: undefined;
-} | {
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    weight: number;
-    lazyLoad: boolean;
-    defaultValue: string;
-    valueProperty: string;
-    dataSrc: string;
-    data: {
-        url: string;
-        values?: undefined;
-    };
-    template: string;
-    conditional: {
-        json: {
-            '===': (string | {
-                var: string;
-            })[];
-        };
-    };
-    placeholder?: undefined;
-    description?: undefined;
-    templates?: undefined;
-    components?: undefined;
-} | {
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    tooltip: string;
-    weight: number;
-    defaultValue?: undefined;
-    dataSrc?: undefined;
-    data?: undefined;
-    lazyLoad?: undefined;
-    valueProperty?: undefined;
-    template?: undefined;
-    conditional?: undefined;
-    placeholder?: undefined;
-    description?: undefined;
-    templates?: undefined;
-    components?: undefined;
-} | {
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    placeholder: string;
-    description: string;
-    tooltip: string;
-    weight: number;
-    defaultValue?: undefined;
-    dataSrc?: undefined;
-    data?: undefined;
-    lazyLoad?: undefined;
-    valueProperty?: undefined;
-    template?: undefined;
-    conditional?: undefined;
-    templates?: undefined;
-    components?: undefined;
-} | {
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    description: string;
-    templates: {
-        header: string;
-        row: string;
-    };
-    components: ({
-        label: string;
-        key: string;
-        type: string;
-        input: boolean;
-        validate: {
-            required: boolean;
-        };
-        editor?: undefined;
-    } | {
-        label: string;
-        key: string;
-        type: string;
-        editor: string;
-        input: boolean;
-        validate: {
-            required: boolean;
-        };
-    })[];
-    defaultValue: never[];
-    tooltip?: undefined;
-    weight?: undefined;
-    dataSrc?: undefined;
-    data?: undefined;
-    lazyLoad?: undefined;
-    valueProperty?: undefined;
-    template?: undefined;
-    conditional?: undefined;
-    placeholder?: undefined;
-})[];
-export default _default;

package/lib/mjs/components/datetime/editForm/DateTime.edit.display.js

@@ -1,98 +0,0 @@
-export default [
-    {
-        type: 'select',
-        input: true,
-        key: 'displayInTimezone',
-        label: 'Display in Timezone',
-        tooltip: 'This will display the captured date time in the select timezone.',
-        weight: 30,
-        defaultValue: 'viewer',
-        dataSrc: 'values',
-        data: {
-            values: [
-                { label: 'of Viewer', value: 'viewer' },
-                { label: 'of Submission', value: 'submission' },
-                { label: 'of Location', value: 'location' },
-                { label: 'UTC', value: 'utc' }
-            ]
-        }
-    },
-    {
-        type: 'select',
-        input: true,
-        key: 'timezone',
-        label: 'Select Timezone',
-        tooltip: 'Select the timezone you wish to display this Date',
-        weight: 31,
-        lazyLoad: true,
-        defaultValue: '',
-        valueProperty: 'name',
-        dataSrc: 'url',
-        data: {
-            url: '{{options.cdnUrl}}/timezones.json'
-        },
-        template: '<span>{{ item.label }}</span>',
-        conditional: {
-            json: { '===': [{ var: 'data.displayInTimezone' }, 'location'] }
-        }
-    },
-    {
-        type: 'checkbox',
-        input: true,
-        key: 'useLocaleSettings',
-        label: 'Use Locale Settings',
-        tooltip: 'Use locale settings to display date and time.',
-        weight: 51
-    },
-    {
-        type: 'checkbox',
-        input: true,
-        key: 'allowInput',
-        label: 'Allow Manual Input',
-        tooltip: 'Check this if you would like to allow the user to manually enter in the date.',
-        weight: 51
-    },
-    {
-        type: 'textfield',
-        input: true,
-        key: 'format',
-        label: 'Format',
-        placeholder: 'Format',
-        description: 'Use formats provided by <a href="https://github.com/angular-ui/bootstrap/tree/master/src/dateparser/docs#uibdateparsers-format-codes" target="_blank" rel="noopener noreferrer">DateParser Codes</a>',
-        tooltip: 'The date format for displaying the datetime value.',
-        weight: 52
-    },
-    {
-        type: 'editgrid',
-        input: true,
-        key: 'shortcutButtons',
-        label: 'Shortcut Buttons',
-        description: 'You can specify few buttons which will be shown above the calendar. Use Label to specify the name of the button and onClick to specify which date/time will be set when user clicks the button. E.g, date = new Date()',
-        templates: {
-            header: '<div class="row">\n  <div class="col-sm-3">Label</div>\n  <div class="col-sm-6">onClick</div>\n</div>',
-            row: '<div class="row">\n      <div class="col-sm-3">\n        {{ flattenedComponents.label.getView(row.label) }}\n      </div>\n      <div class="col-sm-6">\n        {{ flattenedComponents.onClick.getView(row.onClick) }}\n      </div>\n      {% if (!instance.disabled) { %}\n        <div class="col-sm-3">\n          <div class="btn-group pull-right">\n            <button class="btn btn-default btn-light btn-sm editRow"><i class="{{ iconClass("edit") }}"></i></button>\n            {% if (!instance.hasRemoveButtons || instance.hasRemoveButtons()) { %}\n              <button class="btn btn-danger btn-sm removeRow"><i class="{{ iconClass("trash") }}"></i></button>\n            {% } %}\n          </div>\n        </div>\n      {% } %}\n    </div>'
-        },
-        components: [
-            {
-                label: 'Label',
-                key: 'label',
-                type: 'textfield',
-                input: true,
-                validate: {
-                    required: true
-                }
-            },
-            {
-                label: 'onClick',
-                key: 'onClick',
-                type: 'textarea',
-                editor: 'ace',
-                input: true,
-                validate: {
-                    required: true
-                }
-            }
-        ],
-        defaultValue: []
-    }
-];

package/lib/mjs/components/datetime/editForm/DateTime.edit.time.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/datetime/editForm/DateTime.edit.time.js

@@ -1,34 +0,0 @@
-export default [
-    {
-        type: 'checkbox',
-        input: true,
-        key: 'enableTime',
-        label: 'Enable Time Input',
-        tooltip: 'Enables time input for this field.',
-        weight: 0
-    },
-    {
-        type: 'number',
-        input: true,
-        key: 'timePicker.hourStep',
-        label: 'Hour Step Size',
-        tooltip: 'The number of hours to increment/decrement in the time picker.',
-        weight: 10
-    },
-    {
-        type: 'number',
-        input: true,
-        key: 'timePicker.minuteStep',
-        label: 'Minute Step Size',
-        tooltip: 'The number of minutes to increment/decrement in the time picker.',
-        weight: 20
-    },
-    {
-        type: 'checkbox',
-        input: true,
-        key: 'timePicker.showMeridian',
-        label: '12 Hour Time (AM/PM)',
-        tooltip: 'Display time in 12 hour time with AM/PM.',
-        weight: 30
-    }
-];

package/lib/mjs/components/datetime/editForm/DateTime.edit.validation.d.ts

@@ -1,40 +0,0 @@
-declare const _default: ({
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    persistent: boolean;
-    weight: number;
-    tooltip: string;
-    skipMerge?: undefined;
-    enableTime?: undefined;
-} | {
-    type: string;
-    input: boolean;
-    key: string;
-    label: string;
-    skipMerge: boolean;
-    weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): boolean;
-    persistent?: undefined;
-    enableTime?: undefined;
-} | {
-    type: string;
-    input: boolean;
-    enableTime: boolean;
-    key: string;
-    skipMerge: boolean;
-    label: string;
-    weight: number;
-    tooltip: string;
-    customConditional({ data, component }: {
-        data: any;
-        component: any;
-    }): any;
-    persistent?: undefined;
-})[];
-export default _default;