@formio/js 5.0.0-rc.20 → 5.0.0-rc.22

package/lib/mjs/Webform.js

@@ -131,7 +131,7 @@ export default class Webform extends NestedDataComponent {
          * @type {Promise}
          *
          * @example
-         * import Webform from 'formiojs/Webform';
+         * import Webform from '@formio/js/Webform';
          * let form = new Webform(document.getElementById('formio'));
          * form.formReady.then(() => {
          *   console.log('The form is ready!');
@@ -157,7 +157,7 @@ export default class Webform extends NestedDataComponent {
          * @type {Promise}
          *
          * @example
-         * import Webform from 'formiojs/Webform';
+         * import Webform from '@formio/js/Webform';
          * let form = new Webform(document.getElementById('formio'));
          * form.submissionReady.then(() => {
          *   console.log('The submission is ready!');
@@ -368,7 +368,7 @@ export default class Webform extends NestedDataComponent {
      * @param {string} value - The value of the form embed url.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.formReady.then(() => {
      *   console.log('The form is formReady!');
@@ -473,7 +473,7 @@ export default class Webform extends NestedDataComponent {
      * Sets the JSON schema for the form to be rendered.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.setForm({
      *   components: [
@@ -606,7 +606,7 @@ export default class Webform extends NestedDataComponent {
      * Sets the submission of a form.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.src = 'https://examples.form.io/example';
      * form.submission = {data: {
@@ -1340,7 +1340,7 @@ export default class Webform extends NestedDataComponent {
      * Submits the form.
      *
      * @example
-     * import Webform from 'formiojs/Webform';
+     * import Webform from '@formio/js/Webform';
      * let form = new Webform(document.getElementById('formio'));
      * form.src = 'https://examples.form.io/example';
      * form.submission = {data: {

package/lib/mjs/WebformBuilder.js

@@ -393,7 +393,7 @@ export default class WebformBuilder extends Component {
             premium: {
                 title: 'Premium',
                 weight: 40
-            },
+            }
         };
     }
     redraw() {

package/lib/mjs/components/_classes/component/Component.d.ts

@@ -4,6 +4,21 @@
  */
 declare class Component extends Element {
     static schema(...sources: any[]): any;
+    /**
+     * Return the simple condition settings as part of the component.
+     *
+     * @return {Object}
+     *
+     */
+    static get conditionOperatorsSettings(): Object;
+    /**
+     * Return the array of possible types of component value absed on its schema.
+     *
+     * @param schema
+     * @return {Array}
+     *
+     */
+    static savedValueTypes(schema: any): any[];
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
      * method of your instance.
@@ -12,12 +27,7 @@ declare class Component extends Element {
      * @param options
      */
     static tableView(value: any, options: any): void;
-    static get serverConditionSettings(): {
-        operators: string[];
-        valueComponent(): {
-            type: string;
-        };
-    };
+    static get serverConditionSettings(): Object;
     /**
      * Initialize a new Component.
      *

package/lib/mjs/components/_classes/component/Component.js

@@ -172,6 +172,31 @@ export default class Component extends Element {
     static get Validator() {
         return Validator;
     }
+    /**
+     * Return the simple condition settings as part of the component.
+     *
+     * @return {Object}
+     *
+     */
+    static get conditionOperatorsSettings() {
+        return {
+            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
+            valueComponent() {
+                return { type: 'textfield' };
+            }
+        };
+    }
+    /**
+     * Return the array of possible types of component value absed on its schema.
+     *
+     * @param schema
+     * @return {Array}
+     *
+     */
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return FormioUtils.getComponentSavedTypes(schema) || [FormioUtils.componentValueTypes.any];
+    }
     /**
      * Provides a table view for this component. Override if you wish to do something different than using getView
      * method of your instance.
@@ -1370,12 +1395,7 @@ export default class Component extends Element {
         return customCSS;
     }
     static get serverConditionSettings() {
-        return {
-            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
-            valueComponent() {
-                return { type: 'textfield' };
-            },
-        };
+        return Component.conditionOperatorsSettings;
     }
     get isMobile() {
         return isMobile();

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.d.ts

@@ -1,4 +1,5 @@
 export default class NestedArrayComponent extends NestedDataComponent {
+    static savedValueTypes(): string[];
     componentContext(component: any): any;
     get iteratableRows(): void;
     prevHasAddButton: any;

package/lib/mjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -1,5 +1,6 @@
 'use strict';
 import _ from 'lodash';
+import { componentValueTypes } from '../../../utils/utils';
 import Component from '../component/Component';
 import NestedDataComponent from '../nesteddata/NestedDataComponent';
 export default class NestedArrayComponent extends NestedDataComponent {
@@ -8,6 +9,9 @@ export default class NestedArrayComponent extends NestedDataComponent {
             disableAddingRemovingRows: false
         }, ...extend);
     }
+    static savedValueTypes() {
+        return [componentValueTypes.array];
+    }
     componentContext(component) {
         return this.iteratableRows[component.rowIndex].data;
     }

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.d.ts

@@ -1,4 +1,5 @@
 export default class NestedDataComponent extends NestedComponent {
+    static savedValueTypes(schema: any): string[];
     hasChanged(newValue: any, oldValue: any): boolean;
     get allowData(): boolean;
     get emptyValue(): {};

package/lib/mjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -2,6 +2,7 @@
 import Component from '../component/Component';
 import NestedComponent from '../nested/NestedComponent';
 import _ from 'lodash';
+import { componentValueTypes, getComponentSavedTypes } from '../../../utils/utils';
 export default class NestedDataComponent extends NestedComponent {
     hasChanged(newValue, oldValue) {
         // If we do not have a value and are getting set to anything other than undefined or null, then we changed.
@@ -12,6 +13,9 @@ export default class NestedDataComponent extends NestedComponent {
         }
         return !_.isEqual(newValue, oldValue);
     }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     get allowData() {
         return true;
     }

package/lib/mjs/components/address/Address.js

@@ -5,6 +5,7 @@ import { GoogleAddressProvider } from '../../providers/address/GoogleAddressProv
 import Field from '../_classes/field/Field';
 import NestedComponent from '../_classes/nested/NestedComponent';
 import ContainerComponent from '../container/Container';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 export const AddressComponentMode = {
     Autocomplete: 'autocomplete',
     Manual: 'manual',
@@ -76,6 +77,10 @@ export default class AddressComponent extends ContainerComponent {
             ],
         }, ...extend);
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     static get builderInfo() {
         return {
             title: 'Address',

package/lib/mjs/components/button/Button.d.ts

@@ -7,6 +7,7 @@ export default class ButtonComponent extends Field {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(schema: any): string[];
     constructor(component: any, options: any, data: any);
     filesUploading: any[];
     get inputInfo(): {

package/lib/mjs/components/button/Button.js

@@ -1,7 +1,7 @@
 import _ from 'lodash';
 import Field from '../_classes/field/Field';
 import Input from '../_classes/input/Input';
-import { eachComponent, getArrayFromComponentPath } from '../../utils/utils';
+import { componentValueTypes, eachComponent, getArrayFromComponentPath, getComponentSavedTypes } from '../../utils/utils';
 export default class ButtonComponent extends Field {
     static schema(...extend) {
         return Input.schema({
@@ -29,6 +29,9 @@ export default class ButtonComponent extends Field {
             schema: ButtonComponent.schema()
         };
     }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.boolean];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.filesUploading = [];

package/lib/mjs/components/checkbox/Checkbox.d.ts

@@ -19,7 +19,35 @@ export default class CheckBoxComponent extends Field {
             };
             type: string;
         };
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+        valueComponent(): {
+            valueType: string;
+            data: {
+                values: {
+                    label: string;
+                    value: string;
+                }[];
+            };
+            type: string;
+        };
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): string[] | null;
     get labelClass(): string;
     get inputInfo(): {
         type: string;

package/lib/mjs/components/checkbox/Checkbox.js

@@ -1,4 +1,5 @@
 import _ from 'lodash';
+import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Field from '../_classes/field/Field';
 export default class CheckBoxComponent extends Field {
     static schema(...extend) {
@@ -24,8 +25,11 @@ export default class CheckBoxComponent extends Field {
         };
     }
     static get serverConditionSettings() {
+        return CheckBoxComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
+            ...super.conditionOperatorsSettings,
             operators: ['isEqual'],
             valueComponent() {
                 return {
@@ -36,11 +40,22 @@ export default class CheckBoxComponent extends Field {
                             { label: 'Not Checked', value: 'false' },
                         ]
                     },
-                    type: 'select',
+                    type: 'select'
                 };
-            },
+            }
         };
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        const types = getComponentSavedTypes(schema);
+        if (_.isArray(types)) {
+            return types;
+        }
+        if (schema.inputType === 'radio') {
+            return [componentValueTypes.string];
+        }
+        return [componentValueTypes.boolean];
+    }
     get defaultSchema() {
         return CheckBoxComponent.schema();
     }

package/lib/mjs/components/columns/Columns.d.ts

@@ -8,6 +8,7 @@ export default class ColumnsComponent extends NestedComponent {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     rows: any[];
     get columnKey(): string;
     columns: any[] | undefined;

package/lib/mjs/components/columns/Columns.js

@@ -28,6 +28,9 @@ export default class ColumnsComponent extends NestedComponent {
             schema: ColumnsComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.rows = [];

package/lib/mjs/components/container/Container.js

@@ -1,5 +1,5 @@
 import _ from 'lodash';
-import { getFocusableElements } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, getFocusableElements } from '../../utils/utils';
 import Component from '../_classes/component/Component';
 import Field from '../_classes/field/Field';
 import NestedDataComponent from '../_classes/nesteddata/NestedDataComponent';
@@ -31,6 +31,9 @@ export default class ContainerComponent extends NestedDataComponent {
         super(...args);
         this.type = 'container';
     }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     addComponents(data, options) {
         return super.addComponents(this.dataValue, options);
     }

package/lib/mjs/components/content/Content.d.ts

@@ -8,6 +8,7 @@ export default class ContentComponent extends Component {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     get content(): any;
     render(): any;
     get dataReady(): any;

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

@@ -21,6 +21,9 @@ export default class ContentComponent extends Component {
             schema: ContentComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return ContentComponent.schema();
     }

package/lib/mjs/components/datamap/DataMap.d.ts

@@ -1,4 +1,5 @@
 export default class DataMapComponent extends DataGridComponent {
+    static savedValueTypes(schema: any): string[];
     constructor(component: any, options: any, data: any);
     get emptyValue(): {};
     set dataValue(arg: any);

package/lib/mjs/components/datamap/DataMap.js

@@ -2,7 +2,7 @@ import Component from '../_classes/component/Component';
 import DataGridComponent from '../datagrid/DataGrid';
 import _ from 'lodash';
 import EventEmitter from 'eventemitter3';
-import { uniqueKey } from '../../utils/utils';
+import { componentValueTypes, getComponentSavedTypes, uniqueKey } from '../../utils/utils';
 export default class DataMapComponent extends DataGridComponent {
     static schema(...extend) {
         return Component.schema({
@@ -44,6 +44,9 @@ export default class DataMapComponent extends DataGridComponent {
         }
         return _.omit(schema, 'components');
     }
+    static savedValueTypes(schema) {
+        return getComponentSavedTypes(schema) || [componentValueTypes.object];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.type = 'datamap';

package/lib/mjs/components/datetime/DateTime.d.ts

@@ -10,7 +10,26 @@ export default class DateTimeComponent extends Input {
     static get serverConditionSettings(): {
         operators: string[];
         valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
     };
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+        valueComponent(classComp: any): any;
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): string[];
     get emptyValue(): string;
     get momentFormat(): string;
     createWrapper(): boolean;

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

@@ -1,6 +1,7 @@
 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) {
@@ -51,26 +52,24 @@ export default class DateTimeComponent extends Input {
         };
     }
     static get serverConditionSettings() {
+        return DateTimeComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
         return {
-            ...super.serverConditionSettings,
-            operators: [
-                'isDateEqual',
-                'isNotDateEqual',
-                'isEmpty',
-                'isNotEmpty',
-                'dateLessThan',
-                'dateGreaterThan',
-                'dateLessThanOrEqual',
-                'dateGreaterThanOrEqual',
-            ],
+            ...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);

package/lib/mjs/components/day/Day.d.ts

@@ -7,6 +7,27 @@ export default class DayComponent extends Field {
         weight: number;
         schema: any;
     };
+    static get conditionOperatorsSettings(): {
+        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
+    static savedValueTypes(schema: any): string[];
+    static get serverConditionSettings(): {
+        operators: string[];
+        constructor: Function;
+        toString(): string;
+        toLocaleString(): string;
+        valueOf(): Object;
+        hasOwnProperty(v: PropertyKey): boolean;
+        isPrototypeOf(v: Object): boolean;
+        propertyIsEnumerable(v: PropertyKey): boolean;
+    };
     constructor(component: any, options: any, data: any);
     /**
      * The empty value for day component.

package/lib/mjs/components/day/Day.js

@@ -1,7 +1,8 @@
 import _ from 'lodash';
 import moment from 'moment';
 import Field from '../_classes/field/Field';
-import { boolValue, getLocaleDateFormatInfo } from '../../utils/utils';
+import Input from '../_classes/input/Input';
+import { boolValue, componentValueTypes, getComponentSavedTypes, getLocaleDateFormatInfo } from '../../utils/utils';
 export default class DayComponent extends Field {
     static schema(...extend) {
         return Field.schema({
@@ -38,6 +39,16 @@ export default class DayComponent extends Field {
             schema: DayComponent.schema()
         };
     }
+    static get conditionOperatorsSettings() {
+        return {
+            ...super.conditionOperatorsSettings,
+            operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'],
+        };
+    }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return getComponentSavedTypes(schema) || [componentValueTypes.string];
+    }
     constructor(component, options, data) {
         if (component.maxDate) {
             component.maxDate = moment(component.maxDate, 'YYYY-MM-DD').toISOString();
@@ -48,19 +59,7 @@ export default class DayComponent extends Field {
         super(component, options, data);
     }
     static get serverConditionSettings() {
-        return {
-            ...super.serverConditionSettings,
-            operators: [
-                'isDateEqual',
-                'isNotDateEqual',
-                'isEmpty',
-                'isNotEmpty',
-                'dateLessThan',
-                'dateGreaterThan',
-                'dateLessThanOrEqual',
-                'dateGreaterThanOrEqual',
-            ],
-        };
+        return DayComponent.conditionOperatorsSettings;
     }
     /**
      * The empty value for day component.
@@ -291,6 +290,9 @@ export default class DayComponent extends Field {
             this.addEventListener(this.refs.input, this.info.changeEvent, () => this.updateValue(null, {
                 modified: true
             }));
+            [this.refs.day, this.refs.month, this.refs.year].forEach((element) => {
+                Input.prototype.addFocusBlurEvents.call(this, element);
+            });
         }
         this.setValue(this.dataValue);
         // Force the disabled state with getters and setters.

package/lib/mjs/components/day/fixtures/comp5.d.ts

@@ -0,0 +1,29 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: {
+        label: string;
+        hideInputLabels: boolean;
+        inputsLabelPosition: string;
+        useLocaleSettings: boolean;
+        tableView: boolean;
+        fields: {
+            day: {
+                hide: boolean;
+                required: boolean;
+            };
+            month: {
+                hide: boolean;
+            };
+            year: {
+                hide: boolean;
+            };
+        };
+        validateOn: string;
+        key: string;
+        type: string;
+        input: boolean;
+        defaultValue: string;
+    }[];
+}
+export default _default;

package/lib/mjs/components/day/fixtures/comp5.js

@@ -0,0 +1,30 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Day',
+            hideInputLabels: false,
+            inputsLabelPosition: 'top',
+            useLocaleSettings: false,
+            tableView: false,
+            fields: {
+                day: {
+                    hide: false,
+                    required: true
+                },
+                month: {
+                    hide: false
+                },
+                year: {
+                    hide: false
+                }
+            },
+            validateOn: 'blur',
+            key: 'day',
+            type: 'day',
+            input: true,
+            defaultValue: '00/00/0000'
+        },
+    ]
+};

package/lib/mjs/components/day/fixtures/index.d.ts

@@ -2,4 +2,5 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

package/lib/mjs/components/day/fixtures/index.js

@@ -2,4 +2,5 @@ import comp1 from './comp1';
 import comp2 from './comp2';
 import comp3 from './comp3';
 import comp4 from './comp4';
-export { comp1, comp2, comp3, comp4 };
+import comp5 from './comp5';
+export { comp1, comp2, comp3, comp4, comp5 };

package/lib/mjs/components/fieldset/Fieldset.d.ts

@@ -8,6 +8,7 @@ export default class FieldsetComponent extends NestedComponent {
         weight: number;
         schema: any;
     };
+    static savedValueTypes(): never[];
     constructor(...args: any[]);
     noField: boolean;
 }

package/lib/mjs/components/fieldset/Fieldset.js

@@ -22,6 +22,9 @@ export default class FieldsetComponent extends NestedComponent {
             schema: FieldsetComponent.schema()
         };
     }
+    static savedValueTypes() {
+        return [];
+    }
     get defaultSchema() {
         return FieldsetComponent.schema();
     }