@formio/js 5.1.0-dev.6059.845a6e3 → 5.1.0-dev.6060.19e3bfc

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

@@ -156,7 +156,9 @@ export default class SignatureComponent extends Input {
             if (this.dataValue) {
                 this.setDataToSigaturePad();
             }
-            this.showCanvas(true);
+            if (!this.disabled) {
+                this.showCanvas(true);
+            }
         }
     }
     renderElement(value, index) {
@@ -172,7 +174,7 @@ export default class SignatureComponent extends Input {
         return this.renderModalPreview({
             previewText: this.dataValue ?
                 `<img src=${this.dataValue} ${this._referenceAttributeName}='openModal' style="width: 100%;height: 100%;" />` :
-                this.t('Click to Sign')
+                this.t('clickToSign')
         });
     }
     attach(element) {
@@ -240,7 +242,7 @@ export default class SignatureComponent extends Input {
         if (_.isUndefined(value) && this.inDataTable) {
             return '';
         }
-        return value ? 'Yes' : 'No';
+        return this.t(value ? 'yes' : 'no');
     }
     focus() {
         this.refs.padBody.focus();

package/lib/mjs/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/mjs/components/signature/editForm/Signature.edit.display.js

@@ -37,7 +37,6 @@ export default [
         label: 'Keep Overlay Aspect Ratio',
         tooltip: 'If checked, the field will have the same aspect ratio as its preview.',
         key: 'keepOverlayRatio',
-        customConditional: ({ options }) => (options?.editForm?.display === 'pdf'),
         input: true
     },
     {

package/lib/mjs/components/survey/Survey.js

@@ -126,8 +126,8 @@ export default class SurveyComponent extends Field {
         <table border="1" style="width:100%">
           <thead>
             <tr>
-              <th>Question</th>
-              <th>Value</th>
+              <th>${this.t('surveyQuestion')}</th>
+              <th>${this.t('surveyQuestionValue')}</th>
             </tr>
           </thead>
           <tbody>

package/lib/mjs/components/tabs/editForm/Tabs.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/components/tags/Tags.d.ts

@@ -24,4 +24,4 @@ export default class TagsComponent extends Input {
     getValueAsString(value: any): any;
 }
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';

package/lib/mjs/components/tags/Tags.js

@@ -1,6 +1,6 @@
 import { componentValueTypes, getComponentSavedTypes } from '../../utils/utils';
 import Input from '../_classes/input/Input';
-import Choices from '@formio/choices.js';
+import Choices from 'choices.js';
 export default class TagsComponent extends Input {
     static schema(...extend) {
         return Input.schema({
@@ -127,7 +127,7 @@ export default class TagsComponent extends Input {
         const changed = super.setValue(value, flags);
         if (this.choices) {
             let dataValue = this.dataValue;
-            this.choices.removeActiveItems();
+            this.choices.clearStore();
             if (dataValue) {
                 if (typeof dataValue === 'string') {
                     dataValue = dataValue.split(this.delimiter).filter(result => result);

package/lib/mjs/components/textarea/TextArea.js

@@ -131,7 +131,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 case 'quill':
                     // Normalize the configurations for quill.
                     if (settings.hasOwnProperty('toolbarGroups') || settings.hasOwnProperty('toolbar')) {
-                        console.warn('The WYSIWYG settings are configured for CKEditor. For this renderer, you will need to use configurations for the Quill Editor. See https://quilljs.com/docs/configuration for more information.');
+                        console.warn(this.t('needConfigurationForQuill'));
                         settings = this.wysiwygDefault.quill;
                     }
                     // Add the quill editor.
@@ -203,7 +203,7 @@ export default class TextAreaComponent extends TextFieldComponent {
     imageHandler(moduleInstance, range, files) {
         const quillInstance = moduleInstance.quill;
         if (!files || !files.length) {
-            console.warn('No files selected');
+            console.warn(this.t('noFilesSelected'));
             return;
         }
         quillInstance.enable(false);
@@ -228,7 +228,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 alt: JSON.stringify(requestData),
             }), Quill.sources.USER);
         }).catch(error => {
-            console.warn('Quill image upload failed');
+            console.warn(this.t('quillImageUploadFailed'));
             console.warn(error);
             quillInstance.enable(true);
         });
@@ -523,7 +523,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                     }
                     this.element.scrollIntoView();
                 }).catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }
@@ -532,7 +532,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                     this.editors[0].focus();
                     this.element.scrollIntoView();
                 }).catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }
@@ -540,7 +540,7 @@ export default class TextAreaComponent extends TextFieldComponent {
                 this.editorsReady[0]?.then(() => {
                     this.editors[0].focus();
                 }).catch((err) => {
-                    console.warn('An editor did not initialize properly when trying to focus:', err);
+                    console.warn(this.t('editorFocusError'), err);
                 });
                 break;
             }

package/lib/mjs/components/textarea/editForm/TextArea.edit.display.js

@@ -9,10 +9,22 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
     {
         key: 'mask',
         ignore: true
     },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         type: 'number',
         input: true,

package/lib/mjs/components/url/editForm/Url.edit.display.js

@@ -7,6 +7,18 @@ export default [
         key: 'allowMultipleMasks',
         ignore: true
     },
+    {
+        key: 'inputMasks',
+        ignore: true
+    },
+    {
+        key: 'widget.type',
+        ignore: true
+    },
+    {
+        key: 'widget',
+        ignore: true
+    },
     {
         key: 'showWordCount',
         ignore: true,

package/lib/mjs/components/well/editForm/Well.edit.display.js

@@ -3,6 +3,14 @@ export default [
         key: 'labelPosition',
         ignore: true
     },
+    {
+        key: 'labelWidth',
+        ignore: true
+    },
+    {
+        key: 'labelMargin',
+        ignore: true
+    },
     {
         key: 'placeholder',
         ignore: true

package/lib/mjs/formio.form.js

@@ -12,6 +12,7 @@ import { Evaluator } from './utils/Evaluator';
 import Licenses from './licenses';
 import EventEmitter from './EventEmitter';
 import Webform from './Webform';
+import { I18n } from './utils/i18n';
 Formio.loadModules = (path = `${Formio.getApiUrl()}/externalModules.js`, name = 'externalModules') => {
     Formio.requireLibrary(name, name, path, true)
         .then((modules) => {
@@ -56,6 +57,7 @@ export function registerModule(mod, defaultFn = null, options = {}) {
             case 'templates':
                 for (const framework of Object.keys(mod.templates)) {
                     Formio.Templates.extendTemplate(framework, mod.templates[framework]);
+                    Formio.Templates.defaultTemplates = _.defaults(mod.templates[framework], Formio.Templates.defaultTemplates);
                 }
                 if (mod.templates[current]) {
                     Formio.Templates.current = mod.templates[current];
@@ -83,6 +85,9 @@ export function registerModule(mod, defaultFn = null, options = {}) {
             case 'evaluator':
                 Formio.Evaluator.registerEvaluator(mod.evaluator);
                 break;
+            case 'translations':
+                I18n.setDefaultTranslations(mod.translations);
+                break;
             case 'library':
                 options.license
                     ? Formio.Licenses.addLicense(mod.library, options.license)

package/lib/mjs/providers/storage/googleDrive.js

@@ -50,10 +50,11 @@ function googledrive(formio) {
                 xhr.send(fd);
             }));
         },
-        downloadFile(file) {
+        downloadFile(file, component) {
             const token = formio.getToken();
+            // Constructed the url with the fileId, fileName, displayImage, imageSize if applicable
             file.url =
-                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}`;
+                `${formio.formUrl}/storage/gdrive?fileId=${file.id}&fileName=${file.originalName}${token ? `&x-jwt-token=${token}` : ''}${component.image ? '&displayImage=true' : ''}${component.imageSize ? `&imageSize=${component.imageSize}` : ''}`;
             return Promise.resolve(file);
         },
         deleteFile: function deleteFile(fileInfo) {

package/lib/mjs/providers/storage/s3.js

@@ -75,7 +75,7 @@ function s3(formio) {
             const { changeMessage } = multipart;
             changeMessage('Completing AWS S3 multipart upload...');
             const token = formio.getToken();
-            const response = await fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {
+            const response = await XHR.fetch(`${formio.formUrl}/storage/s3/multipart/complete`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -96,7 +96,7 @@ function s3(formio) {
         abortMultipartUpload(serverResponse) {
             const { uploadId, key } = serverResponse;
             const token = formio.getToken();
-            fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {
+            XHR.fetch(`${formio.formUrl}/storage/s3/multipart/abort`, {
                 method: 'POST',
                 headers: {
                     'Content-Type': 'application/json',
@@ -113,7 +113,7 @@ function s3(formio) {
                 const start = i * partSize;
                 const end = (i + 1) * partSize;
                 const blob = i < urls.length ? file.slice(start, end) : file.slice(start);
-                const promise = fetch(urls[i], {
+                const promise = XHR.fetch(urls[i], {
                     method: 'PUT',
                     headers,
                     body: blob,

package/lib/mjs/providers/storage/xhr.d.ts

@@ -3,6 +3,7 @@ export default XHR;
 declare namespace XHR {
     function trim(text: any): any;
     function path(items: any): any;
+    function fetch(url: any, options: any): Promise<Response>;
     function upload(formio: any, type: any, xhrCallback: any, file: any, fileName: any, dir: any, progressCallback: any, groupPermissions: any, groupId: any, abortCallback: any, multipartOptions: any): Promise<any>;
     function makeXhrRequest(formio: any, xhrCallback: any, serverResponse: any, progressCallback: any, abortCallback: any): Promise<any>;
 }

package/lib/mjs/providers/storage/xhr.js

@@ -1,4 +1,5 @@
 import _trim from 'lodash/trim';
+import { Formio } from '../../Formio';
 export const setXhrHeaders = (formio, xhr) => {
     const { headers } = formio.options;
     if (headers) {
@@ -20,12 +21,16 @@ const XHR = {
     path(items) {
         return items.filter(item => !!item).map(XHR.trim).join('/');
     },
+    fetch(url, options) {
+        options = Formio.pluginAlter('requestOptions', options, url);
+        return fetch(url, options);
+    },
     async upload(formio, type, xhrCallback, file, fileName, dir, progressCallback, groupPermissions, groupId, abortCallback, multipartOptions) {
         // make request to Form.io server
         const token = formio.getToken();
         let response;
         try {
-            response = await fetch(`${formio.formUrl}/storage/${type}`, {
+            response = await XHR.fetch(`${formio.formUrl}/storage/${type}`, {
                 method: 'POST',
                 headers: {
                     'Accept': 'application/json',

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

@@ -1,82 +1,235 @@
-declare namespace _default {
-    let unsavedRowsError: string;
-    let invalidRowsError: string;
-    let invalidRowError: string;
-    let invalidOption: string;
-    let invalidDay: string;
-    let alertMessageWithLabel: string;
-    let alertMessage: string;
-    let complete: string;
-    let error: string;
-    let errorListHotkey: string;
-    let errorsListNavigationMessage: string;
-    let submitError: string;
-    let required: string;
-    let unique: string;
-    let array: string;
-    let array_nonempty: string;
-    let nonarray: string;
-    let select: string;
-    let pattern: string;
-    let minLength: string;
-    let maxLength: string;
-    let minWords: string;
-    let maxWords: string;
-    let min: string;
-    let max: string;
-    let maxDate: string;
-    let minDate: string;
-    let maxYear: string;
-    let minYear: string;
-    let minSelectedCount: string;
-    let maxSelectedCount: string;
-    let invalid_email: string;
-    let invalid_url: string;
-    let invalid_regex: string;
-    let invalid_date: string;
-    let invalid_day: string;
-    let invalidValueProperty: string;
-    let mask: string;
-    let valueIsNotAvailable: string;
-    let stripe: string;
-    let month: string;
-    let day: string;
-    let year: string;
-    let january: string;
-    let february: string;
-    let march: string;
-    let april: string;
-    let may: string;
-    let june: string;
-    let july: string;
-    let august: string;
-    let september: string;
-    let october: string;
-    let november: string;
-    let december: string;
-    let next: string;
-    let previous: string;
-    let cancel: string;
-    let submit: string;
-    let confirmCancel: string;
-    let saveDraftInstanceError: string;
-    let saveDraftAuthError: string;
-    let restoreDraftInstanceError: string;
-    let saveDraftError: string;
-    let restoreDraftError: string;
-    let time: string;
-    let cancelButtonAriaLabel: string;
-    let previousButtonAriaLabel: string;
-    let nextButtonAriaLabel: string;
-    let submitButtonAriaLabel: string;
-    let reCaptchaTokenValidationError: string;
-    let reCaptchaTokenNotSpecifiedError: string;
-    let apiKey: string;
-    let typeRemaining: string;
-    let typeCount: string;
-    let requiredDayField: string;
-    let requiredDayEmpty: string;
-    let requiredMonthField: string;
-    let requiredYearField: string;
-}
+declare const _default: {
+    unsavedRowsError: string;
+    invalidRowsError: string;
+    invalidRowError: string;
+    invalidOption: string;
+    invalidDay: string;
+    alertMessageWithLabel: string;
+    alertMessage: string;
+    complete: string;
+    error: string;
+    errorListHotkey: string;
+    errorsListNavigationMessage: string;
+    submitError: string;
+    required: string;
+    unique: string;
+    array: string;
+    array_nonempty: string;
+    nonarray: string;
+    select: string;
+    pattern: string;
+    minLength: string;
+    maxLength: string;
+    minWords: string;
+    maxWords: string;
+    min: string;
+    max: string;
+    maxDate: string;
+    minDate: string;
+    maxYear: string;
+    minYear: string;
+    minSelectedCount: string;
+    maxSelectedCount: string;
+    invalid_email: string;
+    invalid_url: string;
+    invalid_regex: string;
+    invalid_date: string;
+    invalid_day: string;
+    invalidValueProperty: string;
+    mask: string;
+    valueIsNotAvailable: string;
+    stripe: string;
+    month: string;
+    day: string;
+    year: string;
+    january: string;
+    february: string;
+    march: string;
+    april: string;
+    may: string;
+    june: string;
+    july: string;
+    august: string;
+    september: string;
+    october: string;
+    november: string;
+    december: string;
+    next: string;
+    previous: string;
+    cancel: string;
+    submit: string;
+    confirmCancel: string;
+    saveDraftInstanceError: string;
+    saveDraftAuthError: string;
+    restoreDraftInstanceError: string;
+    saveDraftError: string;
+    restoreDraftError: string;
+    time: string;
+    cancelButtonAriaLabel: string;
+    previousButtonAriaLabel: string;
+    nextButtonAriaLabel: string;
+    submitButtonAriaLabel: string;
+    reCaptchaTokenValidationError: string;
+    reCaptchaTokenNotSpecifiedError: string;
+    apiKey: string;
+    typeRemaining: string;
+    typeCount: string;
+    requiredDayField: string;
+    requiredDayEmpty: string;
+    requiredMonthField: string;
+    requiredYearField: string;
+    formNotReady: string;
+    noFormElement: string;
+    notUniqueKey: string;
+    newFormSchema: string;
+    missingUrl: string;
+    urlNotAttachedToBtn: string;
+    loadingProjectSettingsError: string;
+    sessionStorageSupportError: string;
+    builderUniqueError: string;
+    pageNotFound: string;
+    noDragInfoError: string;
+    addonSupportTypeError: string;
+    setPathError: string;
+    calculatedPathDeprecation: string;
+    unknownTemplate: string;
+    unknownComponent: string;
+    renderTemplateFunctionDeprecation: string;
+    whenReadyDeprecation: string;
+    loadResourcesError: string;
+    noSelectDataConfiguration: string;
+    indexedDBSupportError: string;
+    caretPositionSavingError: string;
+    iteratableRowsError: string;
+    checkRowDeprecation: string;
+    noOAuthBtn: string;
+    noOAuthConfiguration: string;
+    oAuthErrorsTitle: string;
+    noOAuthFormUrl: string;
+    oAuthStateError: string;
+    componentInvalidRowValidation: string;
+    videoPlayerNotFound: string;
+    synchronizationFailed: string;
+    fileWithDuplicatedNameInProgress: string;
+    fileWithDuplicatedNameLoaded: string;
+    nestedForm: string;
+    noDataProvided: string;
+    subformSubmissionLoadingError: string;
+    noDelimiterSet: string;
+    noSiteKey: string;
+    failedToNormalize: string;
+    failedToCompareItems: string;
+    editorFocusError: string;
+    quillImageUploadFailed: string;
+    noFilesSelected: string;
+    needConfigurationForQuill: string;
+    waitPdfConverting: string;
+    uploading: string;
+    pasteBelow: string;
+    copy: string;
+    move: string;
+    edit: string;
+    editJson: string;
+    remove: string;
+    clickToSetValue: string;
+    words: string;
+    characters: string;
+    addAnother: string;
+    yes: string;
+    no: string;
+    wantToClearData: string;
+    yesDelete: string;
+    waitFileProcessing: string;
+    wrongFileType: string;
+    fileTooSmall: string;
+    fileTooBig: string;
+    noFileService: string;
+    fileProcessingFailed: string;
+    readyForUpload: string;
+    readyForRemovingFromStorage: string;
+    preparingFileToRemove: string;
+    succefullyRemoved: string;
+    succefullyUploaded: string;
+    maxSelectItems: string;
+    minSelectItems: string;
+    clickToSign: string;
+    surveyQuestion: string;
+    surveyQuestionValue: string;
+    success: string;
+    noResultsFound: string;
+    noChoices: string;
+    typeToSearch: string;
+    loading: string;
+    help: string;
+    component: string;
+    save: string;
+    preview: string;
+    dragAndDropComponent: string;
+    searchFields: string;
+    noMatchesFound: string;
+    fileName: string;
+    size: string;
+    type: string;
+    gallery: string;
+    camera: string;
+    dropFilesToAttach: string;
+    useCamera: string;
+    browse: string;
+    takePicture: string;
+    switchToFileUpload: string;
+    completeStatus: string;
+    noStorageSet: string;
+    noFileApiSupport: string;
+    noFormDataSupport: string;
+    noProgressSupport: string;
+    close: string;
+    addResource: string;
+    autocomplete: string;
+    showPreview: string;
+    hidePreview: string;
+    createPage: string;
+    page: string;
+    closeBtnDescription: string;
+    cancelBtnDescription: string;
+    saveBtnDescription: string;
+    addOrRemove: string;
+    anyFileTypesAllowed: string;
+    allowedFileTypes: string;
+    syncing: string;
+    syncNow: string;
+    pressToOpen: string;
+    browseToAttachFileFor: string;
+    or: string;
+    numericOnly: string;
+    uploadPdfFile: string;
+    dropToStart: string;
+    expand: string;
+    collapse: string;
+    add: string;
+    delete: string;
+    revert: string;
+    removeBtnPressToRemove: string;
+    file: string;
+    captureVideo: string;
+    captureAudio: string;
+    captureImage: string;
+    browseFiles: string;
+    noComponentsSetInGrid: string;
+    sortAscending: string;
+    sortDescending: string;
+    filter: string;
+    clear: string;
+    showItemsWithValue: string;
+    gridItemsPerPage: string;
+    gridAllItems: string;
+    recordsSelectedOnPage: string;
+    recordsSelectedInTable: string;
+    gridSelectAll: string;
+    itemsInTable: string;
+    clearSelection: string;
+    editGridRow: string;
+    deleteGridRow: string;
+    selected: string;
+    actions: string;
+};
 export default _default;