@formio/js 5.3.6 → 5.4.0

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

@@ -57,10 +57,6 @@ export default class DayComponent extends Field {
         value: string;
         label: any;
     }[];
-    _days: {
-        value: string;
-        label: any;
-    }[] | undefined;
     get months(): ({
         value: string;
         label: any;
@@ -68,21 +64,10 @@ export default class DayComponent extends Field {
         value: number;
         label: string;
     })[];
-    _months: ({
-        value: string;
-        label: any;
-    } | {
-        value: number;
-        label: string;
-    })[] | undefined;
     get years(): {
         value: string;
         label: any;
     }[];
-    _years: {
-        value: string;
-        label: any;
-    }[] | undefined;
     setErrorClasses(elements: any, dirty: any, hasError: any): void;
     dayFirst: any;
     render(): string;

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

@@ -166,25 +166,19 @@ class DayComponent extends Field_1.default {
         };
     }
     get days() {
-        if (this._days) {
-            return this._days;
-        }
-        this._days = [
+        const days = [
             { value: '', label: lodash_1.default.get(this.component, 'fields.day.placeholder', '') },
         ];
         for (let x = 1; x <= 31; x++) {
-            this._days.push({
+            days.push({
                 value: x,
                 label: x.toString(),
             });
         }
-        return this._days;
+        return days;
     }
     get months() {
-        if (this._months) {
-            return this._months;
-        }
-        this._months = [
+        const months = [
             {
                 value: '',
                 label: lodash_1.default.get(this.component, 'fields.month.placeholder') ||
@@ -203,24 +197,21 @@ class DayComponent extends Field_1.default {
             { value: 11, label: 'November' },
             { value: 12, label: 'December' },
         ];
-        return this._months;
+        return months;
     }
     get years() {
-        if (this._years) {
-            return this._years;
-        }
-        this._years = [
+        const years = [
             { value: '', label: lodash_1.default.get(this.component, 'fields.year.placeholder', '') },
         ];
         const minYears = lodash_1.default.get(this.component, 'fields.year.minYear', 1900) || 1900;
         const maxYears = lodash_1.default.get(this.component, 'fields.year.maxYear', 2030) || 2030;
         for (let x = minYears; x <= maxYears; x++) {
-            this._years.push({
+            years.push({
                 value: x,
                 label: x.toString(),
             });
         }
-        return this._years;
+        return years;
     }
     setErrorClasses(elements, dirty, hasError) {
         super.setErrorClasses(elements, dirty, hasError);

package/lib/cjs/components/editgrid/EditGrid.js

@@ -545,7 +545,7 @@ class EditGridComponent extends NestedArrayComponent_1.default {
                 getView: (component, data) => {
                     var _a, _b;
                     const instance = flattenedComponents[component.key];
-                    const view = instance ? instance.getView(data || instance.dataValue) : '';
+                    const view = instance ? instance.getView(instance.dataValue) : '';
                     // If there is an html tag in view, don't allow it to be injected in template
                     const htmlTagRegExp = new RegExp('<(.*?)>');
                     return typeof view === 'string' &&
@@ -960,9 +960,19 @@ class EditGridComponent extends NestedArrayComponent_1.default {
             }
             const column = lodash_1.default.clone(col);
             const options = lodash_1.default.clone(this.options);
+            const rootSubmissionTz = lodash_1.default.get(this.root, 'options.submissionTimezone');
+            if (rootSubmissionTz && !options.submissionTimezone) {
+                options.submissionTimezone = rootSubmissionTz;
+            }
             options.name += `[${rowIndex}]`;
             options.row = `${rowIndex}-${colIndex}`;
             options.rowIndex = rowIndex;
+            if (this.submissionTimezone) {
+                options.submissionTimezone = this.submissionTimezone;
+                if (column.type === 'datetime') {
+                    column.widget = Object.assign(Object.assign({}, column.widget), { submissionTimezone: this.submissionTimezone });
+                }
+            }
             options.onChange = (flags = {}, changed, modified) => {
                 var _a, _b, _c, _d;
                 if (((_a = changed.instance.root) === null || _a === void 0 ? void 0 : _a.id) && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.id) !== changed.instance.root.id) {

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

@@ -12,6 +12,7 @@ class FieldsetComponent extends NestedComponent_1.default {
             type: 'fieldset',
             legend: '',
             components: [],
+            clearOnHide: false,
             input: false,
             persistent: false,
         }, ...extend);

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

@@ -30,6 +30,8 @@ export default class FileComponent extends Field {
     } | undefined;
     isSyncing: boolean | undefined;
     abortUploads: any[] | undefined;
+    pendingfiles: any;
+    resolvedFiles: any[] | undefined;
     get dataReady(): Promise<any>;
     loadImage(fileInfo: any): any;
     get emptyValue(): never[];
@@ -147,7 +149,7 @@ export default class FileComponent extends Field {
     getMultipartOptions(fileToSync: any): any;
     uploadFile(fileToSync: any): Promise<any>;
     upload(): Promise<void | {
-        fileToSync: never;
+        fileToSync: any;
         fileInfo: any;
     }[]>;
     syncFiles(): Promise<void>;

package/lib/cjs/components/file/File.js

@@ -107,6 +107,8 @@ class FileComponent extends Field_1.default {
         };
         this.isSyncing = false;
         this.abortUploads = [];
+        this.pendingfiles = [];
+        this.resolvedFiles = [];
     }
     get dataReady() {
         return this.filesReady || Promise.resolve();
@@ -700,22 +702,42 @@ class FileComponent extends Field_1.default {
             };
         }
         // Check file minimum size
-        if (this.component.fileMinSize && !this.validateMinSize(file, this.component.fileMinSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too small; it must be at least {{ size }}', {
-                    size: this.component.fileMinSize,
-                }),
-            };
+        if (this.component.fileMinSize) {
+            const interpolatedMinSize = this.interpolate(this.component.fileMinSize, this.evalContext());
+            // This case is when the user entered fileMinSize expression, but did not enter or made a typo when
+            // setting the fileMinSize variable in the config of the project
+            if (!interpolatedMinSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMinSize(file, interpolatedMinSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooSmall', {
+                        size: interpolatedMinSize,
+                    }),
+                };
+            }
         }
         // Check file maximum size
-        if (this.component.fileMaxSize && !this.validateMaxSize(file, this.component.fileMaxSize)) {
-            return {
-                status: 'error',
-                message: this.t('File is too big; it must be at most {{ size }}', {
-                    size: this.component.fileMaxSize,
-                }),
-            };
+        if (this.component.fileMaxSize) {
+            const interpolatedMaxSize = this.interpolate(this.component.fileMaxSize, this.evalContext());
+            if (!interpolatedMaxSize) {
+                return {
+                    status: 'error',
+                    message: 'Please, check the entered parameters',
+                };
+            }
+            if (!this.validateMaxSize(file, interpolatedMaxSize)) {
+                return {
+                    status: 'error',
+                    message: this.t('fileTooBig', {
+                        size: interpolatedMaxSize,
+                    }),
+                };
+            }
         }
         return {};
     }
@@ -973,7 +995,23 @@ class FileComponent extends Field_1.default {
                             fileInfo,
                         };
                     }
-                    fileInfo = yield this.uploadFile(fileToSync);
+                    if (fileToSync.status === "success") {
+                        const uploadedFile = this.resolvedFiles.find(x => x.fileToSync.originalName === fileToSync.originalName);
+                        return {
+                            fileToSync: uploadedFile.fileToSync,
+                            fileInfo: uploadedFile.fileInfo,
+                        };
+                    }
+                    const pendingFile = this.pendingfiles.find(x => x.name === fileToSync.name);
+                    if (pendingFile) {
+                        fileInfo = yield pendingFile.fileInfoProm;
+                    }
+                    else {
+                        const promInfo = this.uploadFile(fileToSync);
+                        this.pendingfiles.push({ name: fileToSync.name, fileInfoProm: promInfo });
+                        fileInfo = yield promInfo;
+                    }
+                    this.pendingfiles = this.pendingfiles.filter(x => x.name !== fileToSync.name);
                     fileToSync.status = 'success';
                     fileToSync.message = this.t('Succefully uploaded');
                     fileInfo.originalName = fileToSync.originalName;
@@ -998,6 +1036,10 @@ class FileComponent extends Field_1.default {
                 finally {
                     delete fileToSync.progress;
                     this.redraw();
+                    const fileExists = this.resolvedFiles.find(x => x.fileInfo.originalName === fileToSync.originalName);
+                    if (!fileExists && fileToSync.status !== 'error') {
+                        this.resolvedFiles.push({ fileToSync, fileInfo });
+                    }
                 }
                 return {
                     fileToSync,
@@ -1007,7 +1049,7 @@ class FileComponent extends Field_1.default {
         });
     }
     syncFiles() {
-        var _a;
+        var _a, _b, _c;
         return __awaiter(this, void 0, void 0, function* () {
             this.isSyncing = true;
             this.fileDropHidden = true;
@@ -1017,6 +1059,9 @@ class FileComponent extends Field_1.default {
                     this.delete(),
                     this.upload(),
                 ]);
+                if (filesToUpload.length !== ((_b = (_a = this.filesToSync) === null || _a === void 0 ? void 0 : _a.filesToUpload) === null || _b === void 0 ? void 0 : _b.length)) {
+                    return;
+                }
                 this.filesToSync.filesToDelete = filesToDelete
                     .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'error'; })
                     .map((file) => file.fileToSync);
@@ -1030,7 +1075,7 @@ class FileComponent extends Field_1.default {
                     .filter((file) => { var _a; return ((_a = file.fileToSync) === null || _a === void 0 ? void 0 : _a.status) === 'success'; })
                     .map((file) => file.fileInfo);
                 this.dataValue.push(...data);
-                (_a = this.triggerChange) === null || _a === void 0 ? void 0 : _a.call(this, {
+                (_c = this.triggerChange) === null || _c === void 0 ? void 0 : _c.call(this, {
                     modified: true,
                 });
                 return Promise.resolve();

package/lib/cjs/components/form/Form.js

@@ -571,9 +571,11 @@ class FormComponent extends Component_1.default {
      * @returns {*|boolean} - TRUE if the subform should be submitted, FALSE if it should not.
      */
     get shouldSubmit() {
+        const hiddenByJsonOnly = !this.hasCondition() && this.component.hidden;
         return (this.subFormReady &&
             (!this.component.hasOwnProperty('reference') || this.component.reference) &&
-            !this.shouldConditionallyClear());
+            !this.shouldConditionallyClear() &&
+            !(hiddenByJsonOnly && this.component.clearOnHide));
     }
     /**
      * Returns the data for the subform.

package/lib/cjs/components/number/Number.d.ts

@@ -34,6 +34,7 @@ export default class NumberComponent extends Input {
      * @returns {number} a parsed number
      */
     parseNumber(value: string): number;
+    normalizeValue(value: any, flags?: {}, emptyValue?: null): any;
     setInputMask(input: any): void;
     getValueAt(index: any): number | null;
     setValueAt(index: any, value: any, flags?: {}): void;

package/lib/cjs/components/number/Number.js

@@ -143,6 +143,24 @@ class NumberComponent extends Input_1.default {
             return parseFloat(value);
         }
     }
+    normalizeValue(value, flags = {}, emptyValue = this.emptyValue) {
+        var _a;
+        if (typeof value === 'string') {
+            const result = this.parseNumber(value);
+            value = lodash_1.default.isNaN(result) ? this.emptyValue : result;
+        }
+        if (((_a = this.component) === null || _a === void 0 ? void 0 : _a.multiple) && Array.isArray(value)) {
+            const normilizedValues = value.map((val) => {
+                if (typeof val === 'string') {
+                    const result = this.parseNumber(val);
+                    return lodash_1.default.isNaN(result) ? this.emptyValue : result;
+                }
+                return val;
+            });
+            value = normilizedValues;
+        }
+        return super.normalizeValue(value, flags, emptyValue);
+    }
     setInputMask(input) {
         let numberPattern = '[0-9';
         numberPattern += this.decimalSeparator || '';

package/lib/cjs/components/select/Select.js

@@ -519,7 +519,7 @@ class SelectComponent extends ListComponent_1.default {
                     noUpdateEvent: true,
                 });
             }
-            else if (this.shouldAddDefaultValue && !this.options.readOnly) {
+            else if (this.shouldAddDefaultValue && !this.options.readOnly && this.root && !this.root.submissionSet) {
                 // If a default value is provided then select it.
                 const defaultValue = this.defaultValue;
                 if (!this.isEmpty(defaultValue)) {
@@ -1339,6 +1339,10 @@ class SelectComponent extends ListComponent_1.default {
             }
             lodash_1.default.set(submission.metadata.selectData, this.path, templateData);
         }
+        else if (!this.templateData[templateValue] &&
+            this.isEmpty(value)) {
+            lodash_1.default.unset(this.root.submission, `metadata.selectData.${this.path}`);
+        }
         if (flags.resetValue && ((_b = this.root) === null || _b === void 0 ? void 0 : _b.submission) && !this.options.readOnly) {
             const submission = this.root.submission;
             if (!submission.metadata) {

package/lib/cjs/components/signature/Signature.js

@@ -49,7 +49,7 @@ class SignatureComponent extends Input_1.default {
         ]);
     }
     init() {
-        var _a, _b, _c, _d, _e;
+        var _a, _b, _c, _d;
         super.init();
         this.currentWidth = 0;
         this.scale = 1;
@@ -60,10 +60,10 @@ class SignatureComponent extends Input_1.default {
             this.component.height = '200px';
         }
         if (this.component.keepOverlayRatio &&
-            ((_a = this.options) === null || _a === void 0 ? void 0 : _a.display) === 'pdf' &&
-            ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.width) &&
-            ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.height)) {
-            this.ratio = ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.width) / ((_e = this.component.overlay) === null || _e === void 0 ? void 0 : _e.height);
+            this.options.pdf &&
+            ((_a = this.component.overlay) === null || _a === void 0 ? void 0 : _a.width) &&
+            ((_b = this.component.overlay) === null || _b === void 0 ? void 0 : _b.height)) {
+            this.ratio = ((_c = this.component.overlay) === null || _c === void 0 ? void 0 : _c.width) / ((_d = this.component.overlay) === null || _d === void 0 ? void 0 : _d.height);
             this.component.width = '100%';
             this.component.height = 'auto';
         }

package/lib/cjs/components/signature/editForm/Signature.edit.display.d.ts

@@ -7,7 +7,6 @@ declare const _default: ({
     placeholder: string;
     weight: number;
     conditional?: undefined;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     type: string;
@@ -24,7 +23,6 @@ declare const _default: ({
         };
     };
     weight: number;
-    customConditional?: undefined;
     ignore?: undefined;
 } | {
     weight: number;
@@ -32,9 +30,6 @@ declare const _default: ({
     label: string;
     tooltip: string;
     key: string;
-    customConditional: ({ options }: {
-        options: any;
-    }) => boolean;
     input: boolean;
     placeholder?: undefined;
     conditional?: undefined;
@@ -49,6 +44,5 @@ declare const _default: ({
     placeholder?: undefined;
     weight?: undefined;
     conditional?: undefined;
-    customConditional?: undefined;
 })[];
 export default _default;

package/lib/cjs/components/signature/editForm/Signature.edit.display.js

@@ -48,7 +48,6 @@ exports.default = [
         label: 'Keep Overlay Aspect Ratio',
         tooltip: 'If checked, the field will have the same aspect ratio as its preview.',
         key: 'keepOverlayRatio',
-        customConditional: ({ options }) => { var _a; return ((_a = options === null || options === void 0 ? void 0 : options.editForm) === null || _a === void 0 ? void 0 : _a.display) === 'pdf'; },
         input: true,
     },
     {

package/lib/cjs/components/table/editForm/Table.edit.display.d.ts

@@ -10,6 +10,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -27,6 +29,8 @@ declare const _default: ({
     autofocus: boolean;
     overrideEditForm: boolean;
     ignore?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -42,6 +46,25 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
+    dataSrc?: undefined;
+    data?: undefined;
+    defaultValue?: undefined;
+} | {
+    label: string;
+    multiple: boolean;
+    key: string;
+    type: string;
+    input: boolean;
+    tooltip: string;
+    customConditional: string;
+    weight: number;
+    ignore?: undefined;
+    placeholder?: undefined;
+    validate?: undefined;
+    autofocus?: undefined;
+    overrideEditForm?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -57,6 +80,8 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
     dataSrc?: undefined;
     data?: undefined;
     defaultValue?: undefined;
@@ -80,5 +105,7 @@ declare const _default: ({
     validate?: undefined;
     autofocus?: undefined;
     overrideEditForm?: undefined;
+    multiple?: undefined;
+    customConditional?: undefined;
 })[];
 export default _default;

package/lib/cjs/components/table/editForm/Table.edit.display.js

@@ -69,6 +69,16 @@ exports.default = [
         placeholder: 'Number of Columns',
         tooltip: 'Enter the number or columns that should be displayed by this table.',
     },
+    {
+        label: "Column Headers",
+        multiple: true,
+        key: "header",
+        type: "textfield",
+        input: true,
+        tooltip: 'Enter header names for the columns',
+        customConditional: "if(instance && instance.dataValue && Array.isArray(instance.dataValue)) {\r\n  const isAllowToAddHeader = instance.dataValue.length < data.numCols;\r\n  const addBtn = _.get(instance, 'refs.addButton[0]', null);\r\n  if(addBtn) {\r\n    isAllowToAddHeader? addBtn.removeAttribute('disabled'):  addBtn.setAttribute('disabled', 'disabled');\r\n  }\r\n} ",
+        weight: 3,
+    },
     {
         type: 'checkbox',
         label: 'Clone Row Components',

package/lib/cjs/formio.form.js

@@ -132,12 +132,9 @@ function registerModule(mod, defaultFn = null, options = {}) {
                 break;
             default:
                 if (defaultFn) {
-                    if (!defaultFn(key, mod)) {
-                        console.warn('Unknown module option', key);
-                    }
+                    defaultFn(key, mod);
                     break;
                 }
-                console.log('Unknown module option', key);
         }
     }
 }
@@ -151,7 +148,7 @@ function useModule(defaultFn = null) {
         plugins = lodash_1.default.isArray(plugins)
             ? plugins
             : [
-                plugins,
+                plugins
             ];
         plugins.forEach((plugin) => {
             if (Array.isArray(plugin)) {

package/lib/cjs/package.json

@@ -1,4 +1,4 @@
 {
     "type": "commonjs",
-    "version": "5.3.6"
+    "version": "5.4.0"
 }

package/lib/cjs/providers/storage/azure.js

@@ -35,9 +35,15 @@ function azure(formio) {
         downloadFile(file) {
             return formio.makeRequest('file', `${formio.formUrl}/storage/azure?name=${xhr_1.default.trim(file.name)}`, 'GET');
         },
-        deleteFile: function deleteFile(fileInfo) {
-            var url = `${formio.formUrl}/storage/azure?name=${xhr_1.default.trim(fileInfo.name)}&key=${xhr_1.default.trim(fileInfo.key)}`;
-            return formio.makeRequest('', url, 'delete');
+        deleteFile(fileInfo, options) {
+            const name = xhr_1.default.trim(fileInfo.name);
+            const key = xhr_1.default.trim(fileInfo.key);
+            return formio.makeRequest('', `${formio.formUrl}/storage/azure?name=${encodeURIComponent(name)}&key=${encodeURIComponent(key)}`, 'delete').then((response) => {
+                return {
+                    success: true,
+                    key: (response === null || response === void 0 ? void 0 : response.key) || key,
+                };
+            });
         },
     };
 }

package/lib/cjs/templates/index.d.ts

@@ -20,6 +20,9 @@ declare namespace _default {
         wizardHeaderVertical: {
             form: string;
         };
+        wizardHeaderStepIndicator: {
+            form: string;
+        };
         wizardNav: {
             form: string;
         };

package/lib/cjs/translations/en.d.ts

@@ -76,5 +76,7 @@ declare namespace _default {
     let requiredDayEmpty: string;
     let requiredMonthField: string;
     let requiredYearField: string;
+    let fileTooSmall: string;
+    let fileTooBig: string;
 }
 export default _default;

package/lib/cjs/translations/en.js

@@ -78,4 +78,6 @@ exports.default = {
     requiredDayEmpty: '{{ field }} is required',
     requiredMonthField: '{{ field }} is required',
     requiredYearField: '{{ field }} is required',
+    fileTooSmall: 'File is too small; it must be at least {{ size }}',
+    fileTooBig: 'File is too big; it must be at most {{ size }}'
 };

package/lib/cjs/utils/i18n.d.ts

@@ -7,6 +7,7 @@ export class I18n {
     constructor(languages?: {});
     languages: {};
     language: string;
+    originalLanguage: string;
     currentLanguage: any;
     setLanguages(languages: any): void;
     dir(lang?: string): "rtl" | "ltr";

package/lib/cjs/utils/i18n.js

@@ -19,6 +19,7 @@ class I18n {
     constructor(languages = {}) {
         this.languages = i18Defaults;
         this.language = 'en';
+        this.originalLanguage = 'en';
         this.currentLanguage = i18Defaults.en;
         this.setLanguages(languages);
         this.changeLanguage(this.language);
@@ -72,6 +73,7 @@ class I18n {
         return new I18n();
     }
     changeLanguage(language, ready = null) {
+        this.originalLanguage = language;
         if (!this.languages[language]) {
             language = 'en';
         }

package/lib/cjs/utils/index.d.ts

@@ -94,7 +94,7 @@ declare const FormioUtils: {
     offsetDate(date: Date, timezone: string): Date;
     zonesLoaded(): boolean;
     shouldLoadZones(timezone: string): boolean;
-    loadZones(url: string, timezone: string): any;
+    loadZones(url: string, _timezone: any): any;
     momentDate(value: string | Date, format: string, timezone: string, options: object): Date;
     formatDate(timezonesUrl: string, value: string | Date, format: string, timezone: string, flatPickrInputFormat: string): string;
     formatOffset(timezonesUrl: string, formatFn: Function, date: string | Date, format: string, timezone: string): string;

package/lib/cjs/utils/utils.d.ts

@@ -202,7 +202,7 @@ export function shouldLoadZones(timezone: string): boolean;
  * @param {string} timezone - The timezone to load.
  * @returns {Promise<any> | *} - Resolves when the zones for this timezone are loaded.
  */
-export function loadZones(url: string, timezone: string): Promise<any> | any;
+export function loadZones(url: string, _timezone: any): Promise<any> | any;
 /**
  * Get the moment date object for translating dates with timezones.
  * @param {string|Date} value - The value to convert into a moment date.