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

package/lib/cjs/Form.js

@@ -44,7 +44,7 @@ class Form extends Element_1.default {
      * @param {boolean} options.template - Provides a way to inject custom logic into the creation of every element rendered within the form.
      *
      * @example
-     * import Form from 'formiojs/Form';
+     * import Form from '@formio/js/Form';
      * const form = new Form(document.getElementById('formio'), 'https://examples.form.io/example');
      * form.build();
      */

package/lib/cjs/Webform.d.ts

@@ -65,7 +65,7 @@ declare 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!');
@@ -90,7 +90,7 @@ declare 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!');
@@ -140,7 +140,7 @@ declare 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!');
@@ -207,7 +207,7 @@ declare 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: [
@@ -257,7 +257,7 @@ declare 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: {
@@ -372,7 +372,7 @@ declare 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/cjs/Webform.js

@@ -163,7 +163,7 @@ class Webform extends NestedDataComponent_1.default {
          * @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!');
@@ -189,7 +189,7 @@ class Webform extends NestedDataComponent_1.default {
          * @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!');
@@ -373,7 +373,7 @@ class Webform extends NestedDataComponent_1.default {
      * @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!');
@@ -478,7 +478,7 @@ class Webform extends NestedDataComponent_1.default {
      * 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: [
@@ -612,7 +612,7 @@ class Webform extends NestedDataComponent_1.default {
      * 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: {
@@ -1342,7 +1342,7 @@ class Webform extends NestedDataComponent_1.default {
      * 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/cjs/WebformBuilder.js

@@ -407,7 +407,7 @@ class WebformBuilder extends Component_1.default {
             premium: {
                 title: 'Premium',
                 weight: 40
-            },
+            }
         };
     }
     redraw() {

package/lib/cjs/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/cjs/components/_classes/component/Component.js

@@ -200,6 +200,31 @@ class Component extends Element_1.default {
     static get Validator() {
         return Validator_1.default;
     }
+    /**
+     * 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.
@@ -1404,12 +1429,7 @@ class Component extends Element_1.default {
         return customCSS;
     }
     static get serverConditionSettings() {
-        return {
-            operators: ['isEqual', 'isNotEqual', 'isEmpty', 'isNotEmpty'],
-            valueComponent() {
-                return { type: 'textfield' };
-            },
-        };
+        return Component.conditionOperatorsSettings;
     }
     get isMobile() {
         return (0, ismobilejs_1.default)();

package/lib/cjs/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/cjs/components/_classes/nestedarray/NestedArrayComponent.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../../utils/utils");
 const Component_1 = __importDefault(require("../component/Component"));
 const NestedDataComponent_1 = __importDefault(require("../nesteddata/NestedDataComponent"));
 class NestedArrayComponent extends NestedDataComponent_1.default {
@@ -12,6 +13,9 @@ class NestedArrayComponent extends NestedDataComponent_1.default {
             disableAddingRemovingRows: false
         }, ...extend);
     }
+    static savedValueTypes() {
+        return [utils_1.componentValueTypes.array];
+    }
     componentContext(component) {
         return this.iteratableRows[component.rowIndex].data;
     }

package/lib/cjs/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/cjs/components/_classes/nesteddata/NestedDataComponent.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const Component_1 = __importDefault(require("../component/Component"));
 const NestedComponent_1 = __importDefault(require("../nested/NestedComponent"));
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../../utils/utils");
 class NestedDataComponent extends NestedComponent_1.default {
     hasChanged(newValue, oldValue) {
         // If we do not have a value and are getting set to anything other than undefined or null, then we changed.
@@ -16,6 +17,9 @@ class NestedDataComponent extends NestedComponent_1.default {
         }
         return !lodash_1.default.isEqual(newValue, oldValue);
     }
+    static savedValueTypes(schema) {
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
+    }
     get allowData() {
         return true;
     }

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

@@ -11,6 +11,7 @@ const GoogleAddressProvider_1 = require("../../providers/address/GoogleAddressPr
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 const NestedComponent_1 = __importDefault(require("../_classes/nested/NestedComponent"));
 const Container_1 = __importDefault(require("../container/Container"));
+const utils_1 = require("../../utils/utils");
 exports.AddressComponentMode = {
     Autocomplete: 'autocomplete',
     Manual: 'manual',
@@ -82,6 +83,10 @@ class AddressComponent extends Container_1.default {
             ],
         }, ...extend);
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
+    }
     static get builderInfo() {
         return {
             title: 'Address',

package/lib/cjs/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/cjs/components/button/Button.js

@@ -34,6 +34,9 @@ class ButtonComponent extends Field_1.default {
             schema: ButtonComponent.schema()
         };
     }
+    static savedValueTypes(schema) {
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.boolean];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.filesUploading = [];

package/lib/cjs/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/cjs/components/checkbox/Checkbox.js

@@ -4,6 +4,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
+const utils_1 = require("../../utils/utils");
 const Field_1 = __importDefault(require("../_classes/field/Field"));
 class CheckBoxComponent extends Field_1.default {
     static schema(...extend) {
@@ -29,7 +30,10 @@ class CheckBoxComponent extends Field_1.default {
         };
     }
     static get serverConditionSettings() {
-        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: ['isEqual'], valueComponent() {
+        return CheckBoxComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isEqual'], valueComponent() {
                 return {
                     valueType: 'boolean',
                     data: {
@@ -38,10 +42,21 @@ class CheckBoxComponent extends Field_1.default {
                             { label: 'Not Checked', value: 'false' },
                         ]
                     },
-                    type: 'select',
+                    type: 'select'
                 };
             } });
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        const types = (0, utils_1.getComponentSavedTypes)(schema);
+        if (lodash_1.default.isArray(types)) {
+            return types;
+        }
+        if (schema.inputType === 'radio') {
+            return [utils_1.componentValueTypes.string];
+        }
+        return [utils_1.componentValueTypes.boolean];
+    }
     get defaultSchema() {
         return CheckBoxComponent.schema();
     }

package/lib/cjs/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/cjs/components/columns/Columns.js

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

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

@@ -36,6 +36,9 @@ class ContainerComponent extends NestedDataComponent_1.default {
         super(...args);
         this.type = 'container';
     }
+    static savedValueTypes(schema) {
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
+    }
     addComponents(data, options) {
         return super.addComponents(this.dataValue, options);
     }

package/lib/cjs/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/cjs/components/content/Content.js

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

package/lib/cjs/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/cjs/components/datamap/DataMap.js

@@ -49,6 +49,9 @@ class DataMapComponent extends DataGrid_1.default {
         }
         return lodash_1.default.omit(schema, 'components');
     }
+    static savedValueTypes(schema) {
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.object];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         this.type = 'datamap';

package/lib/cjs/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/cjs/components/datetime/DateTime.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const utils_1 = __importDefault(require("../../utils"));
+const utils_2 = require("../../utils/utils");
 const Input_1 = __importDefault(require("../_classes/input/Input"));
 class DateTimeComponent extends Input_1.default {
     static schema(...extend) {
@@ -56,19 +57,17 @@ class DateTimeComponent extends Input_1.default {
         };
     }
     static get serverConditionSettings() {
-        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: [
-                'isDateEqual',
-                'isNotDateEqual',
-                'isEmpty',
-                'isNotEmpty',
-                'dateLessThan',
-                'dateGreaterThan',
-                'dateLessThanOrEqual',
-                'dateGreaterThanOrEqual',
-            ], valueComponent(classComp) {
+        return DateTimeComponent.conditionOperatorsSettings;
+    }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'], valueComponent(classComp) {
                 return Object.assign(Object.assign({}, classComp), { type: 'datetime' });
             } });
     }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return (0, utils_2.getComponentSavedTypes)(schema) || [utils_2.componentValueTypes.date];
+    }
     constructor(component, options, data) {
         super(component, options, data);
         const timezone = (this.component.timezone || this.options.timezone);

package/lib/cjs/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/cjs/components/day/Day.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const lodash_1 = __importDefault(require("lodash"));
 const moment_1 = __importDefault(require("moment"));
 const Field_1 = __importDefault(require("../_classes/field/Field"));
+const Input_1 = __importDefault(require("../_classes/input/Input"));
 const utils_1 = require("../../utils/utils");
 class DayComponent extends Field_1.default {
     static schema(...extend) {
@@ -43,6 +44,13 @@ class DayComponent extends Field_1.default {
             schema: DayComponent.schema()
         };
     }
+    static get conditionOperatorsSettings() {
+        return Object.assign(Object.assign({}, super.conditionOperatorsSettings), { operators: ['isDateEqual', 'isNotDateEqual', 'isEmpty', 'isNotEmpty', 'dateLessThan', 'dateGreaterThan', 'dateLessThanOrEqual', 'dateGreaterThanOrEqual'] });
+    }
+    static savedValueTypes(schema) {
+        schema = schema || {};
+        return (0, utils_1.getComponentSavedTypes)(schema) || [utils_1.componentValueTypes.string];
+    }
     constructor(component, options, data) {
         if (component.maxDate) {
             component.maxDate = (0, moment_1.default)(component.maxDate, 'YYYY-MM-DD').toISOString();
@@ -53,16 +61,7 @@ class DayComponent extends Field_1.default {
         super(component, options, data);
     }
     static get serverConditionSettings() {
-        return Object.assign(Object.assign({}, super.serverConditionSettings), { operators: [
-                'isDateEqual',
-                'isNotDateEqual',
-                'isEmpty',
-                'isNotEmpty',
-                'dateLessThan',
-                'dateGreaterThan',
-                'dateLessThanOrEqual',
-                'dateGreaterThanOrEqual',
-            ] });
+        return DayComponent.conditionOperatorsSettings;
     }
     /**
      * The empty value for day component.
@@ -293,6 +292,9 @@ class DayComponent extends Field_1.default {
             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_1.default.prototype.addFocusBlurEvents.call(this, element);
+            });
         }
         this.setValue(this.dataValue);
         // Force the disabled state with getters and setters.

package/lib/cjs/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/cjs/components/day/fixtures/comp5.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.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/cjs/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 };