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

package/lib/mjs/components/editgrid/fixtures/comp-with-custom-default-value.d.ts

@@ -0,0 +1,190 @@
+declare namespace _default {
+    const type: string;
+    const components: ({
+        label: string;
+        conditionalAddButton: string;
+        tableView: boolean;
+        templates: {
+            header: string;
+            row: string;
+        };
+        addAnother: string;
+        saveRow: string;
+        inlineEdit: boolean;
+        customDefaultValue: string;
+        validate: {
+            minLength: number;
+        };
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        input: boolean;
+        components: ({
+            label: string;
+            columns: ({
+                components: {
+                    label: string;
+                    widget: string;
+                    tableView: boolean;
+                    dataSrc: string;
+                    data: {
+                        custom: string;
+                    };
+                    template: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    type: string;
+                    input: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            } | {
+                components: {
+                    label: string;
+                    widget: string;
+                    tableView: boolean;
+                    dataSrc: string;
+                    data: {
+                        custom: string;
+                    };
+                    template: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    logic: {
+                        name: string;
+                        trigger: {
+                            type: string;
+                            javascript: string;
+                        };
+                        actions: {
+                            name: string;
+                            type: string;
+                            property: {
+                                label: string;
+                                value: string;
+                                type: string;
+                            };
+                            state: boolean;
+                        }[];
+                    }[];
+                    type: string;
+                    input: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            })[];
+            key: string;
+            type: string;
+            tableView: boolean;
+            input: boolean;
+            hideOnChildrenHidden: boolean;
+        } | {
+            label: string;
+            columns: ({
+                components: {
+                    label: string;
+                    widget: string;
+                    tableView: boolean;
+                    data: {
+                        values: {
+                            label: string;
+                            value: string;
+                        }[];
+                    };
+                    refreshOn: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    logic: {
+                        name: string;
+                        trigger: {
+                            type: string;
+                            javascript: string;
+                        };
+                        actions: {
+                            name: string;
+                            type: string;
+                            property: {
+                                label: string;
+                                value: string;
+                                type: string;
+                            };
+                            state: boolean;
+                        }[];
+                    }[];
+                    type: string;
+                    input: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            } | {
+                components: {
+                    label: string;
+                    mask: boolean;
+                    spellcheck: boolean;
+                    tableView: boolean;
+                    currency: string;
+                    inputFormat: string;
+                    validate: {
+                        required: boolean;
+                    };
+                    key: string;
+                    type: string;
+                    input: boolean;
+                    delimiter: boolean;
+                    hideOnChildrenHidden: boolean;
+                }[];
+                width: number;
+                offset: number;
+                push: number;
+                pull: number;
+                size: string;
+                currentWidth: number;
+            })[];
+            key: string;
+            type: string;
+            input: boolean;
+            tableView: boolean;
+            hideOnChildrenHidden: boolean;
+        })[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        conditionalAddButton?: undefined;
+        templates?: undefined;
+        addAnother?: undefined;
+        saveRow?: undefined;
+        inlineEdit?: undefined;
+        customDefaultValue?: undefined;
+        validate?: undefined;
+        rowDrafts?: undefined;
+        components?: undefined;
+    })[];
+    const display: string;
+}
+export default _default;

package/lib/mjs/components/editgrid/fixtures/comp-with-custom-default-value.js

@@ -0,0 +1,225 @@
+export default {
+    type: 'form',
+    components: [
+        {
+            label: 'Selected Funds',
+            conditionalAddButton: 'show = !instance.hasOpenRows();',
+            tableView: false,
+            templates: {
+                header: "<div class=\"row\">\r\n  {% util.eachComponent(components, function(component) {\r\n    if (component.key === 'loadTypeFundCode') { %}\r\n      <div class=\"col-sm-2\">\r\n        <strong>Fund Code</strong>\r\n      </div>\r\n      <div class=\"col-sm-2\">\r\n        <strong>Load Type</strong>\r\n      </div>    \r\n    {% } else if (component.key !== 'fundClass') { \r\n      if (component.key === 'fundName2') { %}\r\n      <div class=\"col-sm-2\">\r\n      {% } else { %}\r\n      <div class=\"col-sm-2\">\r\n      {% } %}\r\n      <strong>{{ component.label }}</strong>\r\n      </div>\r\n      {% }\r\n  }) %}\r\n</div>",
+                row: "<div class=\"row\">\r\n  {% console.dir(row);\r\n  util.eachComponent(components, function(component) { \r\n    if (component.key === 'loadTypeFundCode') { \r\n      var fundCode = '';\r\n      var loadType = '';\r\n      var item = component.data.values.find(item=>item.value==row[component.key]);\r\n      if (!!item) {\r\n\t      var itemParts = item.label.split('/');\r\n        loadType = itemParts [0];\r\n\t      if (itemParts.length > 1) { \r\n\t        fundCode = itemParts [1];\r\n        }\r\n      }\r\n    %}\r\n    <div class=\"col-sm-2\">{{ fundCode }}</div>\r\n    <div class=\"col-sm-2\">{{ loadType }}</div>\r\n    {% } else if (component.key !== 'fundClass') { \r\n      if (component.key === 'fundName2') { %}\r\n      <div class=\"col-sm-2\">\r\n      {% } else { %}\r\n      <div class=\"col-sm-2\">\r\n      {% } \r\n      if (!!component.data && !!Array.isArray(component.data.values)) { \r\n        var item = component.data.values.find(item=>item.value==row[component.key]);\r\n        if (!!item) { %}\r\n          {{item.label}}\r\n        {% } else { %}\r\n          {{ row[component.key] }}\r\n        {% } \r\n      } else { %}\r\n        {{ row[component.key] }}\r\n      {% } %}\r\n    </div>\r\n    {% }\r\n  }) %}\r\n  <div class=\"col-sm-2\">\r\n    <div class=\"btn-group pull-right\">\r\n      {% if (!instance.hasOpenRows()) { %}\r\n      <div class=\"btn btn-default btn-sm editRow\"><i class=\"fa fa-edit\"></i></div>\r\n      <div class=\"btn btn-danger btn-sm removeRow\"><i class=\"fa fa-trash\"></i></div>\r\n      {% } %}\r\n    </div>\r\n  </div>\r\n</div>"
+            },
+            addAnother: 'Add Another Fund',
+            saveRow: 'Save Fund',
+            inlineEdit: true,
+            customDefaultValue: "value = [\n  {\n    fundClass: 'Class1',\n    fundName2: 'Name1',\n    loadTypeFundCode: 'dsc602',\n    allocationAmount2: 100\n  },\n  {\n    fundClass: 'Class2',\n    fundName2: 'Name2',\n    loadTypeFundCode: 'll1202',\n    allocationAmount2: 200\n  },\n  {\n    fundClass: 'Class3',\n    fundName2: 'Name2',\n    loadTypeFundCode: 'll1202',\n    allocationAmount2: 100\n  },\n  {\n    fundClass: 'Class3',\n    fundName2: 'Name2',\n    loadTypeFundCode: 'll1202',\n    allocationAmount2: 100\n  }  ,\n  {\n    fundClass: 'Class3',\n    fundName2: 'Name2',\n    loadTypeFundCode: 'll1202',\n    allocationAmount2: 100\n  }\n];",
+            validate: {
+                minLength: 1
+            },
+            rowDrafts: false,
+            key: 'selectedFunds2',
+            type: 'editgrid',
+            input: true,
+            components: [
+                {
+                    label: 'Columns',
+                    columns: [
+                        {
+                            components: [
+                                {
+                                    label: 'Fund Class',
+                                    widget: 'choicesjs',
+                                    tableView: true,
+                                    dataSrc: 'custom',
+                                    data: {
+                                        custom: "values = ['Class1', 'Class2', 'Class3'];"
+                                    },
+                                    template: '<span>{{ item }}</span>',
+                                    validate: {
+                                        required: true
+                                    },
+                                    key: 'fundClass',
+                                    type: 'select',
+                                    input: true,
+                                    hideOnChildrenHidden: false
+                                }
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6
+                        },
+                        {
+                            components: [
+                                {
+                                    label: 'Fund Name',
+                                    widget: 'choicesjs',
+                                    tableView: true,
+                                    dataSrc: 'custom',
+                                    data: {
+                                        custom: "values = ['Name1', 'Name2'];"
+                                    },
+                                    template: '<span>{{ item }}</span>',
+                                    validate: {
+                                        required: true
+                                    },
+                                    key: 'fundName2',
+                                    logic: [
+                                        {
+                                            name: 'Disable',
+                                            trigger: {
+                                                type: 'javascript',
+                                                javascript: "result = !row['fundClass'];"
+                                            },
+                                            actions: [
+                                                {
+                                                    name: 'Disable',
+                                                    type: 'property',
+                                                    property: {
+                                                        label: 'Disabled',
+                                                        value: 'disabled',
+                                                        type: 'boolean'
+                                                    },
+                                                    state: true
+                                                }
+                                            ]
+                                        }
+                                    ],
+                                    type: 'select',
+                                    input: true,
+                                    hideOnChildrenHidden: false
+                                }
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6
+                        }
+                    ],
+                    key: 'columns1',
+                    type: 'columns',
+                    tableView: false,
+                    input: false,
+                    hideOnChildrenHidden: false
+                },
+                {
+                    label: 'Columns',
+                    columns: [
+                        {
+                            components: [
+                                {
+                                    label: 'Load Type / Fund Code',
+                                    widget: 'choicesjs',
+                                    tableView: true,
+                                    data: {
+                                        values: [
+                                            {
+                                                label: 'DSC/602',
+                                                value: 'dsc602'
+                                            },
+                                            {
+                                                label: 'NL/702',
+                                                value: 'nl702'
+                                            },
+                                            {
+                                                label: 'LL/1202',
+                                                value: 'll1202'
+                                            },
+                                            {
+                                                label: 'NL-CB/3002',
+                                                value: 'nlCb3002'
+                                            },
+                                            {
+                                                label: 'NL-CB5/5002',
+                                                value: 'nlCb55002'
+                                            }
+                                        ]
+                                    },
+                                    refreshOn: 'editGrid1.fundName2',
+                                    validate: {
+                                        required: true
+                                    },
+                                    key: 'loadTypeFundCode',
+                                    logic: [
+                                        {
+                                            name: 'Disable',
+                                            trigger: {
+                                                type: 'javascript',
+                                                javascript: "result = !row['fundName2'];"
+                                            },
+                                            actions: [
+                                                {
+                                                    name: 'Disable',
+                                                    type: 'property',
+                                                    property: {
+                                                        label: 'Disabled',
+                                                        value: 'disabled',
+                                                        type: 'boolean'
+                                                    },
+                                                    state: true
+                                                }
+                                            ]
+                                        }
+                                    ],
+                                    type: 'select',
+                                    input: true,
+                                    hideOnChildrenHidden: false
+                                }
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6
+                        },
+                        {
+                            components: [
+                                {
+                                    label: 'Amount',
+                                    mask: false,
+                                    spellcheck: true,
+                                    tableView: false,
+                                    currency: 'USD',
+                                    inputFormat: 'plain',
+                                    validate: {
+                                        required: true
+                                    },
+                                    key: 'allocationAmount2',
+                                    type: 'currency',
+                                    input: true,
+                                    delimiter: true,
+                                    hideOnChildrenHidden: false
+                                }
+                            ],
+                            width: 6,
+                            offset: 0,
+                            push: 0,
+                            pull: 0,
+                            size: 'md',
+                            currentWidth: 6
+                        }
+                    ],
+                    key: 'columns',
+                    type: 'columns',
+                    input: false,
+                    tableView: false,
+                    hideOnChildrenHidden: false
+                }
+            ]
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ],
+    display: 'form',
+};

package/lib/mjs/components/editgrid/fixtures/comp15.d.ts

@@ -0,0 +1,54 @@
+declare namespace _default {
+    const type: string;
+    const display: string;
+    const components: ({
+        label: string;
+        tableView: boolean;
+        validate: {
+            minLength: number;
+        };
+        rowDrafts: boolean;
+        key: string;
+        type: string;
+        displayAsTable: boolean;
+        input: boolean;
+        components: ({
+            label: string;
+            applyMaskOn: string;
+            tableView: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+            mask?: undefined;
+            delimiter?: undefined;
+            requireDecimal?: undefined;
+            inputFormat?: undefined;
+            truncateMultipleSpaces?: undefined;
+        } | {
+            label: string;
+            applyMaskOn: string;
+            mask: boolean;
+            tableView: boolean;
+            delimiter: boolean;
+            requireDecimal: boolean;
+            inputFormat: string;
+            truncateMultipleSpaces: boolean;
+            key: string;
+            type: string;
+            input: boolean;
+        })[];
+        disableOnInvalid?: undefined;
+    } | {
+        type: string;
+        label: string;
+        key: string;
+        disableOnInvalid: boolean;
+        input: boolean;
+        tableView: boolean;
+        validate?: undefined;
+        rowDrafts?: undefined;
+        displayAsTable?: undefined;
+        components?: undefined;
+    })[];
+}
+export default _default;

package/lib/mjs/components/editgrid/fixtures/comp15.js

@@ -0,0 +1,49 @@
+export default {
+    type: 'form',
+    display: 'form',
+    components: [
+        {
+            label: 'Edit Grid',
+            tableView: false,
+            validate: {
+                minLength: 6
+            },
+            rowDrafts: false,
+            key: 'editGrid',
+            type: 'editgrid',
+            displayAsTable: false,
+            input: true,
+            components: [
+                {
+                    label: 'Text',
+                    applyMaskOn: 'change',
+                    tableView: true,
+                    key: 'text',
+                    type: 'textfield',
+                    input: true
+                },
+                {
+                    label: 'Number',
+                    applyMaskOn: 'change',
+                    mask: false,
+                    tableView: false,
+                    delimiter: false,
+                    requireDecimal: false,
+                    inputFormat: 'plain',
+                    truncateMultipleSpaces: false,
+                    key: 'number',
+                    type: 'number',
+                    input: true
+                }
+            ]
+        },
+        {
+            type: 'button',
+            label: 'Submit',
+            key: 'submit',
+            disableOnInvalid: true,
+            input: true,
+            tableView: false
+        }
+    ]
+};

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

@@ -6,6 +6,7 @@ import comp11 from './comp11';
 import comp12 from './comp12';
 import comp13 from './comp13';
 import comp14 from './comp14';
+import comp15 from './comp15';
 import comp4 from './comp4';
 import comp5 from './comp5';
 import comp6 from './comp6';
@@ -14,4 +15,5 @@ import comp8 from './comp8';
 import comp9 from './comp9';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions };
+import compWithCustomDefaultValue from './comp-with-custom-default-value';
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue };

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

@@ -12,6 +12,8 @@ import comp11 from './comp11';
 import comp12 from './comp12';
 import comp13 from './comp13';
 import comp14 from './comp14';
+import comp15 from './comp15';
 import withOpenWhenEmptyAndConditions from './comp-with-conditions-and-openWhenEmpty';
 import compOpenWhenEmpty from './comp-openWhenEmpty';
-export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions };
+import compWithCustomDefaultValue from './comp-with-custom-default-value';
+export { comp1, comp2, comp3, comp10, comp11, comp12, comp13, comp14, comp15, comp4, comp5, comp6, comp7, comp8, comp9, compOpenWhenEmpty, withOpenWhenEmptyAndConditions, compWithCustomDefaultValue };

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

@@ -4,6 +4,7 @@ export default class FieldsetComponent extends NestedComponent {
         icon: string;
         group: string;
         documentation: string;
+        showPreview: boolean;
         weight: number;
         schema: any;
     };

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

@@ -17,6 +17,7 @@ export default class FieldsetComponent extends NestedComponent {
             icon: 'th-large',
             group: 'layout',
             documentation: '/userguide/form-building/layout-components#field-set',
+            showPreview: false,
             weight: 20,
             schema: FieldsetComponent.schema()
         };

package/lib/mjs/components/file/File.d.ts

@@ -18,6 +18,7 @@ export default class FileComponent extends Field {
     statuses: any[] | undefined;
     set fileDropHidden(arg: any);
     get fileDropHidden(): any;
+    get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
     getValueAsString(value: any): any;
@@ -27,23 +28,24 @@ export default class FileComponent extends Field {
     render(): any;
     getVideoStream(constraints: any): any;
     stopVideoStream(videoStream: any): void;
-    getFrame(videoPlayer: any): any;
+    getFrame(videoPlayer: any): Promise<any>;
     startVideo(): void;
     videoStream: any;
     stopVideo(): void;
     takePicture(): void;
-    browseFiles(attrs?: {}): any;
+    browseFiles(attrs?: {}): Promise<any>;
     _cameraMode: any;
     get useWebViewCamera(): any;
     get imageUpload(): boolean;
     get browseOptions(): {
         multiple: boolean;
+        capture: any;
         accept: any;
     };
     deleteFile(fileInfo: any): void;
-    filesReady: any;
-    filesReadyResolve: any;
-    filesReadyReject: any;
+    filesReady: Promise<any> | undefined;
+    filesReadyResolve: ((value: any) => void) | undefined;
+    filesReadyReject: ((reason?: any) => void) | undefined;
     fileSize(a: any, b: any, c: any, d: any, e: any): string;
     globStringToRegex(str: any): any;
     translateScalars(str: any): any;