@bpmn-io/form-js-viewer 1.24.1 → 1.26.0

package/dist/index.es.js

@@ -16,6 +16,46 @@ import { parseExpression, parseUnaryTests, evaluate, unaryTest } from '@bpmn-io/
 import { evaluate as evaluate$1, parseToSimpleTree } from 'feelers';
 import { marked } from 'marked';
 
+/**
+ * @typedef { {
+ *   [key: string]: string;
+ * } } TranslateReplacements
+ */
+
+/**
+ * A simple translation stub to be used for multi-language support
+ * in diagrams. Can be easily replaced with a more sophisticated
+ * solution.
+ *
+ * @example
+ *
+ * ```javascript
+ * // use it inside any diagram component by injecting `translate`.
+ *
+ * function MyService(translate) {
+ *   alert(translate('HELLO {you}', { you: 'You!' }));
+ * }
+ * ```
+ *
+ * @param {string} template to interpolate
+ * @param {TranslateReplacements} [replacements] a map with substitutes
+ *
+ * @return {string} the translated string
+ */
+function translate(template, replacements) {
+  replacements = replacements || {};
+  return template.replace(/{([^}]+)}/g, function (_, key) {
+    return replacements[key] || '{' + key + '}';
+  });
+}
+
+/**
+ * @type { import('didi').ModuleDeclaration }
+ */
+var TranslateModule = {
+  translate: ['value', translate]
+};
+
 const getFlavouredFeelVariableNames = (feelString, feelFlavour = 'expression', options = {}) => {
   const {
     depth = 0,
@@ -1940,10 +1980,13 @@ function Label(props) {
     class: classNames('fjs-form-field-label', {
       'fjs-incollapsible-label': !collapseOnEmpty
     }, props['class']),
-    children: [props.children, evaluatedLabel, required && jsx("span", {
-      class: "fjs-asterix",
-      "aria-hidden": true,
-      children: "*"
+    children: [props.children, jsxs("span", {
+      class: "fjs-label-content",
+      children: [evaluatedLabel, required && jsx("span", {
+        class: "fjs-asterix",
+        "aria-hidden": true,
+        children: "*"
+      })]
     })]
   });
 }
@@ -3044,6 +3087,7 @@ function Datetime(props) {
   const {
     formId
   } = useContext(FormContext);
+  const translate = useService('translate');
 
   /** @type {import("preact").RefObject<HTMLDivElement>} */
   const dateTimeGroupRef = useRef();
@@ -3134,8 +3178,8 @@ function Datetime(props) {
   const allErrors = useMemo(() => {
     if (required || subtype !== DATETIME_SUBTYPES.DATETIME) return errors;
     const isOnlyOneFieldSet = isValidDate(dateTime.date) && !isValidTime(dateTime.time) || !isValidDate(dateTime.date) && isValidTime(dateTime.time);
-    return isOnlyOneFieldSet ? ['Date and time must both be entered.', ...errors] : errors;
-  }, [required, subtype, dateTime, errors]);
+    return isOnlyOneFieldSet ? [translate('Date and time must both be entered.'), ...errors] : errors;
+  }, [required, subtype, dateTime, errors, translate]);
   const setDate = useCallback(date => {
     setDateTimeUpdateRequest(prev => prev ? {
       ...prev,
@@ -3297,6 +3341,7 @@ function IFrame(props) {
   const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
     debug: true
   });
+  const translate = useService('translate');
   const [sandbox, allow] = useSecurityAttributesMap(security);
   const [iframeRefresh, setIframeRefresh] = useState(0);
 
@@ -3313,7 +3358,7 @@ function IFrame(props) {
       htmlFor: domId,
       label: evaluatedLabel
     }), !evaluatedUrl && jsx(IFramePlaceholder, {
-      text: "No content to show."
+      text: translate('No content to show.')
     }), evaluatedUrl && safeUrl && jsx("iframe", {
       src: safeUrl,
       title: evaluatedLabel,
@@ -3323,7 +3368,7 @@ function IFrame(props) {
       sandbox: sandbox,
       allow
     }, 'iframe-' + iframeRefresh), evaluatedUrl && !safeUrl && jsx(IFramePlaceholder, {
-      text: "External content couldn't be loaded."
+      text: translate("External content couldn't be loaded.")
     })]
   });
 }
@@ -3911,6 +3956,7 @@ function Numberfield(props) {
   const {
     required
   } = validate;
+  const translate = useService('translate');
 
   /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
@@ -4084,7 +4130,7 @@ function Numberfield(props) {
           children: [jsx("button", {
             type: "button",
             class: "fjs-number-arrow-up",
-            "aria-label": "Increment",
+            "aria-label": translate('Increment'),
             onClick: () => increment(),
             tabIndex: -1,
             children: jsx(SvgAngelUp, {})
@@ -4093,7 +4139,7 @@ function Numberfield(props) {
           }), jsx("button", {
             type: "button",
             class: "fjs-number-arrow-down",
-            "aria-label": "Decrement",
+            "aria-label": translate('Decrement'),
             onClick: () => decrement(),
             tabIndex: -1,
             children: jsx(SvgAngelDown, {})
@@ -4776,6 +4822,7 @@ function Taglist(props) {
   /** @type {import("preact").RefObject<HTMLInputElement>} */
   const inputRef = useRef();
   const eventBus = useService('eventBus');
+  const translate = useService('translate');
   const {
     loadState,
     options
@@ -4909,7 +4956,7 @@ function Taglist(props) {
       htmlFor: domId
     }), !disabled && !readonly && !!values.length && jsx(SkipLink, {
       className: "fjs-taglist-skip-link",
-      label: "Skip to search",
+      label: translate('Skip to search'),
       onSkip: onSkipToSearch
     }), jsxs("div", {
       class: classNames('fjs-taglist', {
@@ -4930,7 +4977,7 @@ function Taglist(props) {
               children: getLabelCorrelation(entry)
             }), !disabled && !readonly && jsx("button", {
               type: "button",
-              title: "Remove tag",
+              title: translate('Remove tag'),
               class: "fjs-taglist-tag-remove",
               onFocus: onElementFocus,
               onBlur: onElementBlur,
@@ -4948,7 +4995,7 @@ function Taglist(props) {
         onChange: onInputChange,
         type: "text",
         value: filter,
-        placeholder: disabled || readonly ? undefined : 'Search',
+        placeholder: disabled || readonly ? undefined : translate('Search'),
         autoComplete: "off",
         onKeyDown: onInputKeyDown,
         onMouseDown: () => setIsEscapeClose(false),
@@ -4964,7 +5011,7 @@ function Taglist(props) {
         values: filteredOptions,
         getLabel: option => option.label,
         onValueSelected: option => selectValue(option.value),
-        emptyListMessage: hasOptionsLeft ? 'No results' : 'All values selected',
+        emptyListMessage: hasOptionsLeft ? translate('No results') : translate('All values selected'),
         listenerElement: inputRef.current
       })
     }), jsx(Description, {
@@ -5567,6 +5614,8 @@ var SvgCaretRight = function SvgCaretRight(props) {
 const type$2 = 'table';
 
 /**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ *
  * @typedef {('asc'|'desc')} Direction
  *
  * @typedef Sorting
@@ -5616,6 +5665,7 @@ function Table(props) {
   const chunkedData = isNumber(rowCount) ? chunk(sortedData, rowCount) : [sortedData];
   const [currentPage, setCurrentPage] = useState(0);
   const currentChunk = chunkedData[currentPage] || [];
+  const translate = useService('translate');
   useEffect(() => {
     setCurrentPage(0);
   }, [rowCount, sortBy]);
@@ -5647,7 +5697,7 @@ function Table(props) {
       class: classNames('fjs-table-middle-container', {
         'fjs-table-empty': evaluatedColumns.length === 0
       }),
-      children: [evaluatedColumns.length === 0 ? 'Nothing to show.' : jsx("div", {
+      children: [evaluatedColumns.length === 0 ? translate('Nothing to show.') : jsx("div", {
         class: "fjs-table-inner-container",
         children: jsxs("table", {
           class: "fjs-table",
@@ -5672,7 +5722,7 @@ function Table(props) {
                       toggleSortBy(key);
                     }
                   },
-                  "aria-label": getHeaderAriaLabel(sortBy, key, displayLabel),
+                  "aria-label": getHeaderAriaLabel(sortBy, key, displayLabel, translate),
                   children: jsxs("span", {
                     class: "fjs-table-th-label",
                     children: [displayLabel, sortBy !== null && sortBy.key === key ? jsx(Fragment, {
@@ -5693,7 +5743,7 @@ function Table(props) {
               children: jsx("td", {
                 class: "fjs-table-td",
                 colSpan: evaluatedColumns.length,
-                children: "Nothing to show."
+                children: translate('Nothing to show.')
               })
             })
           }) : jsx("tbody", {
@@ -5709,9 +5759,13 @@ function Table(props) {
         })
       }), isNumber(rowCount) && chunkedData.length > 1 && evaluatedColumns.length > 0 ? jsxs("nav", {
         class: "fjs-table-nav",
-        children: [jsxs("span", {
+        children: [jsx("span", {
           class: "fjs-table-nav-label",
-          children: [currentPage + 1, " of ", chunkedData.length]
+          children: translate('{page} of {total}', {
+            // stringify: see Validator.js
+            page: (currentPage + 1).toString(),
+            total: chunkedData.length.toString()
+          })
         }), jsx("button", {
           type: "button",
           class: "fjs-table-nav-button",
@@ -5719,7 +5773,7 @@ function Table(props) {
             setCurrentPage(page => Math.max(page - 1, 0));
           },
           disabled: currentPage === 0,
-          "aria-label": "Previous page",
+          "aria-label": translate('Previous page'),
           children: jsx(SvgCaretLeft, {})
         }), jsx("button", {
           type: "button",
@@ -5728,7 +5782,7 @@ function Table(props) {
             setCurrentPage(page => Math.min(page + 1, chunkedData.length - 1));
           },
           disabled: currentPage >= chunkedData.length - 1,
-          "aria-label": "Next page",
+          "aria-label": translate('Next page'),
           children: jsx(SvgCaretRight, {})
         })]
       }) : null]
@@ -5878,15 +5932,20 @@ function sortByColumn(array, key, direction) {
  * @param {null|Sorting} sortBy
  * @param {string} key
  * @param {string} label
+ * @param {Translate} translate
  */
-function getHeaderAriaLabel(sortBy, key, label) {
+function getHeaderAriaLabel(sortBy, key, label, translate) {
   if (sortBy === null || sortBy.key !== key) {
-    return `Click to sort by ${label} descending`;
+    return translate('Click to sort by {value} descending', {
+      value: label
+    });
   }
   if (sortBy.direction === 'asc') {
-    return 'Click to remove sorting';
+    return translate('Click to remove sorting');
   }
-  return `Click to sort by ${label} ascending`;
+  return translate('Click to sort by {value} ascending', {
+    value: label
+  });
 }
 
 /**
@@ -5957,6 +6016,7 @@ function FilePicker(props) {
   const errorMessageId = `${domId}-error-message`;
   /** @type {File[]} */
   const selectedFiles = fileRegistry === null ? EMPTY_ARRAY$1 : fileRegistry.getFiles(filesKey);
+  const translate = useService('translate');
   useEffect(() => {
     if (filesKey && fileRegistry !== null && !fileRegistry.hasKey(filesKey)) {
       onChange({
@@ -6027,7 +6087,7 @@ function FilePicker(props) {
         children: "Browse"
       }), jsx("span", {
         className: "fjs-form-field-label",
-        children: getSelectedFilesLabel(selectedFiles)
+        children: getSelectedFilesLabel(selectedFiles, translate)
       })]
     }), jsx(Errors, {
       id: errorMessageId,
@@ -6050,16 +6110,19 @@ FilePicker.config = {
 
 /**
  * @param {File[]} files
+ * @param {Translate} translate
  * @returns {string}
  */
-function getSelectedFilesLabel(files) {
+function getSelectedFilesLabel(files, translate) {
   if (files.length === 0) {
-    return 'No files selected';
+    return translate('No files selected');
   }
   if (files.length === 1) {
     return files[0].name;
   }
-  return `${files.length} files selected`;
+  return translate('{value} files selected', {
+    value: files.length.toString()
+  });
 }
 
 var _path$4;
@@ -6082,6 +6145,10 @@ var SvgDownload = function SvgDownload(props) {
 
 const type = 'documentPreview';
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 /**
  * @typedef DocumentEndpointBuilder
  * @property {(document: DocumentMetadata) => string} [buildUrl]
@@ -6127,6 +6194,7 @@ function DocumentPreview(props) {
   const evaluatedLabel = useSingleLineTemplateEvaluation(label, {
     debug: true
   });
+  const translate = useService('translate');
   return jsxs("div", {
     class: formFieldClasses(type),
     children: [jsx(Label, {
@@ -6152,7 +6220,7 @@ function DocumentPreview(props) {
       id: errorMessageId,
       errors: getErrors({
         dataSource
-      })
+      }, translate)
     })]
   });
 }
@@ -6174,15 +6242,16 @@ DocumentPreview.config = {
  * @property {string|undefined} dataSource
  *
  * @param {GetErrorOptions} options
+ * @param {Translate} translate
  * @returns {string[]}
  */
-function getErrors(options) {
+function getErrors(options, translate) {
   const {
     dataSource
   } = options;
   let errors = [];
   if (!isString(dataSource) || dataSource.length < 1) {
-    errors.push('Document reference is not defined.');
+    errors.push(translate('Document reference is not defined.'));
   }
   return errors;
 }
@@ -6235,6 +6304,7 @@ function PdfRenderer(props) {
   /** @type {ReturnType<typeof import("preact/hooks").useState<null | string>>} */
   const [pdfObjectUrl, setPdfObjectUrl] = useState(null);
   const [hasError, setHasError] = useState(false);
+  const translate = useService('translate');
   useEffect(() => {
     /** @type {null | string} */
     let objectUrl = null;
@@ -6268,7 +6338,7 @@ function PdfRenderer(props) {
       class: `fjs-${type}-pdf-viewer`
     }) : null, hasError ? jsx(Errors, {
       id: errorMessageId,
-      errors: ['Unable to download document']
+      errors: [translate('Unable to download document')]
     }) : null]
   });
 }
@@ -6348,9 +6418,10 @@ function DocumentRenderer(props) {
   const isInViewport = useInViewport(ref);
   const onError = useCallback(() => setHasError(true), []);
   const requestInit = useMemo(() => getDocumentRequestInit(documentEndpointBuilder, documentMetadata), [documentEndpointBuilder, documentMetadata]);
+  const translate = useService('translate');
   const singleDocumentContainerClassName = `fjs-${type}-single-document-container`;
   const errorMessageId = `${domId}-error-message`;
-  const errorMessage = 'Unable to download document';
+  const errorMessage = translate('Unable to download document');
   const isContentTypePresent = typeof metadata.contentType === 'string';
   if (isContentTypePresent && metadata.contentType.toLowerCase().startsWith('image/') && isInViewport) {
     return jsxs("div", {
@@ -6428,6 +6499,7 @@ function DownloadButton(props) {
     onDownloadError,
     requestInit
   } = props;
+  const translate = useService('translate');
   const handleDownload = async () => {
     try {
       const response = await fetch(endpoint, requestInit);
@@ -6450,7 +6522,9 @@ function DownloadButton(props) {
     type: "button",
     onClick: handleDownload,
     class: classNames(`fjs-${type}-download-button`),
-    "aria-label": `Download ${fileName}`,
+    "aria-label": translate('Download {fileName}', {
+      fileName
+    }),
     children: jsx(SvgDownload, {})
   });
 }
@@ -7796,6 +7870,7 @@ class RepeatRenderManager {
     const {
       data
     } = this._form._getState();
+    const translate = useService('translate');
     const dataPath = this._pathRegistry.getValuePath(repeaterField, {
       indexes
     });
@@ -7852,16 +7927,18 @@ class RepeatRenderManager {
         ref: addButtonRef,
         onClick: onAddItem,
         children: jsxs(Fragment, {
-          children: [jsx(SvgAdd, {}), " ", 'Add new']
+          children: [jsx(SvgAdd, {}), " ", translate('Add new')]
         })
       }) : null, collapseEnabled ? jsx("button", {
         type: "button",
         class: "fjs-repeat-render-collapse",
         onClick: toggle,
         children: isCollapsed ? jsxs(Fragment, {
-          children: [jsx(SvgExpand, {}), " ", `Expand all (${values.length - 1})`]
+          children: [jsx(SvgExpand, {}), " ", translate('Expand all ({value})', {
+            value: values.length - 1
+          })]
         }) : jsxs(Fragment, {
-          children: [jsx(SvgCollapse, {}), " ", 'Collapse']
+          children: [jsx(SvgCollapse, {}), " ", translate('Collapse')]
         })
       }) : null]
     });
@@ -8494,11 +8571,12 @@ const EMAIL_PATTERN = /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9](?:[a-zA-Z0-
 const PHONE_PATTERN = /(\+|00)(297|93|244|1264|358|355|376|971|54|374|1684|1268|61|43|994|257|32|229|226|880|359|973|1242|387|590|375|501|1441|591|55|1246|673|975|267|236|1|61|41|56|86|225|237|243|242|682|57|269|238|506|53|5999|61|1345|357|420|49|253|1767|45|1809|1829|1849|213|593|20|291|212|34|372|251|358|679|500|33|298|691|241|44|995|44|233|350|224|590|220|245|240|30|1473|299|502|594|1671|592|852|504|385|509|36|62|44|91|246|353|98|964|354|972|39|1876|44|962|81|76|77|254|996|855|686|1869|82|383|965|856|961|231|218|1758|423|94|266|370|352|371|853|590|212|377|373|261|960|52|692|389|223|356|95|382|976|1670|258|222|1664|596|230|265|60|262|264|687|227|672|234|505|683|31|47|977|674|64|968|92|507|64|51|63|680|675|48|1787|1939|850|351|595|970|689|974|262|40|7|250|966|249|221|65|500|4779|677|232|503|378|252|508|381|211|239|597|421|386|46|268|1721|248|963|1649|235|228|66|992|690|993|670|676|1868|216|90|688|886|255|256|380|598|1|998|3906698|379|1784|58|1284|1340|84|678|681|685|967|27|260|263)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)\d{4,20}$/;
 const VALIDATE_FEEL_PROPERTIES = ['min', 'max', 'minLength', 'maxLength'];
 class Validator {
-  constructor(expressionLanguage, conditionChecker, form, formFieldRegistry) {
+  constructor(expressionLanguage, conditionChecker, form, formFieldRegistry, translate) {
     this._expressionLanguage = expressionLanguage;
     this._conditionChecker = conditionChecker;
     this._form = form;
     this._formFieldRegistry = formFieldRegistry;
+    this._translate = translate;
   }
 
   /**
@@ -8513,13 +8591,13 @@ class Validator {
     } = field;
     let errors = [];
     if (type === 'number') {
-      errors = [...errors, ...runNumberValidation(field, value)];
+      errors = [...errors, ...runNumberValidation(field, value, this._translate)];
     }
     if (!validate) {
       return errors;
     }
     const evaluatedValidation = oldEvaluateFEELValues(validate, this._expressionLanguage, this._conditionChecker, this._form);
-    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value)];
+    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value, this._translate)];
     return errors;
   }
 
@@ -8546,31 +8624,39 @@ class Validator {
     } = field;
     let errors = [];
     if (type === 'number') {
-      errors = [...errors, ...runNumberValidation(field, value)];
+      errors = [...errors, ...runNumberValidation(field, value, this._translate)];
     }
     if (!validate) {
       return errors;
     }
     const evaluatedValidation = evaluateFEELValues(validate, this._expressionLanguage, expressionContextInfo);
-    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value)];
+    errors = [...errors, ...runPresetValidation(field, evaluatedValidation, value, this._translate)];
     return errors;
   }
 }
-Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form', 'formFieldRegistry'];
+Validator.$inject = ['expressionLanguage', 'conditionChecker', 'form', 'formFieldRegistry', 'translate'];
 
 // helpers //////////
 
-function runNumberValidation(field, value) {
+function runNumberValidation(field, value, translate) {
   const {
     decimalDigits,
     increment
   } = field;
   const errors = [];
   if (value === 'NaN') {
-    errors.push('Value is not a number.');
+    errors.push(translate('Value is not a number.'));
   } else if (value) {
     if (decimalDigits >= 0 && countDecimals(value) > decimalDigits) {
-      errors.push('Value is expected to ' + (decimalDigits === 0 ? 'be an integer' : `have at most ${decimalDigits} decimal digit${decimalDigits > 1 ? 's' : ''}`) + '.');
+      if (decimalDigits === 0) {
+        errors.push(translate('Value is expected to be an integer.'));
+      } else if (decimalDigits === 1) {
+        errors.push(translate('Value is expected to have at most 1 decimal digit.'));
+      } else {
+        errors.push(translate('Value is expected to have at most {value} decimal digits.', {
+          value: decimalDigits.toString()
+        }));
+      }
     }
     if (increment) {
       const bigValue = Big(value);
@@ -8579,54 +8665,69 @@ function runNumberValidation(field, value) {
       if (offset.cmp(0) !== 0) {
         const previousValue = bigValue.minus(offset);
         const nextValue = previousValue.plus(bigIncrement);
-        errors.push(`Please select a valid value, the two nearest valid values are ${previousValue} and ${nextValue}.`);
+        errors.push(translate('Please select a valid value, the two nearest valid values are {previousValue} and {nextValue}.', {
+          previousValue: previousValue,
+          nextValue: nextValue
+        }));
       }
     }
   }
   return errors;
 }
-function runPresetValidation(field, validation, value) {
+function runPresetValidation(field, validation, value, translate) {
   const errors = [];
   if (validation.pattern && value && !new RegExp(validation.pattern).test(value)) {
-    errors.push(validation.patternErrorMessage || `Field must match pattern ${validation.pattern}.`);
+    errors.push(validation.patternErrorMessage || translate('Field must match pattern {value}.', {
+      value: validation.pattern
+    }));
   }
   if (validation.required) {
     const isUncheckedCheckbox = field.type === 'checkbox' && value === false;
     const isUnsetValue = isNil(value) || value === '';
     const isEmptyMultiselect = Array.isArray(value) && value.length === 0;
     if (isUncheckedCheckbox || isUnsetValue || isEmptyMultiselect) {
-      errors.push('Field is required.');
+      errors.push(translate('Field is required.'));
     }
   }
+
+  // stringify: `translate` falls back to the raw placeholder for a falsy replacement, so 0 must not be passed as a number
   if ('min' in validation && (value || value === 0)) {
     try {
       if (Big(value).lt(Big(validation.min))) {
-        errors.push(`Field must have minimum value of ${validation.min}.`);
+        errors.push(translate('Field must have minimum value of {value}.', {
+          value: validation.min.toString()
+        }));
       }
     } catch {
-      errors.push('Min validation value is not a valid number.');
+      errors.push(translate('Min validation value is not a valid number.'));
     }
   }
   if ('max' in validation && (value || value === 0)) {
     try {
       if (Big(value).gt(Big(validation.max))) {
-        errors.push(`Field must have maximum value of ${validation.max}.`);
+        errors.push(translate('Field must have maximum value of {value}.', {
+          value: validation.max.toString()
+        }));
       }
     } catch {
-      errors.push('Max validation value is not a valid number.');
+      errors.push(translate('Max validation value is not a valid number.'));
     }
   }
   if ('minLength' in validation && value && value.trim().length < validation.minLength) {
-    errors.push(`Field must have minimum length of ${validation.minLength}.`);
+    errors.push(translate('Field must have minimum length of {value}.', {
+      value: validation.minLength.toString()
+    }));
   }
   if ('maxLength' in validation && value && value.trim().length > validation.maxLength) {
-    errors.push(`Field must have maximum length of ${validation.maxLength}.`);
+    errors.push(translate('Field must have maximum length of {value}.', {
+      value: validation.maxLength.toString()
+    }));
   }
   if ('validationType' in validation && value && validation.validationType === 'phone' && !PHONE_PATTERN.test(value)) {
-    errors.push('Field must be a valid  international phone number. (e.g. +4930664040900)');
+    errors.push(translate('Field must be a valid international phone number. (e.g. +4930664040900)'));
   }
   if ('validationType' in validation && value && validation.validationType === 'email' && !EMAIL_PATTERN.test(value)) {
-    errors.push('Field must be a valid email.');
+    errors.push(translate('Field must be a valid email.'));
   }
   return errors;
 }
@@ -8784,17 +8885,24 @@ class Importer {
 }
 Importer.$inject = ['formFieldRegistry', 'pathRegistry', 'fieldFactory', 'formLayouter'];
 
+/**
+ * @typedef { import('diagram-js/lib/i18n/translate/translate').default } Translate
+ */
+
 class FieldFactory {
   /**
    * @constructor
    *
-   * @param  formFieldRegistry
-   * @param  formFields
+   * @param formFieldRegistry
+   * @param pathRegistry
+   * @param formFields
+   * @param {Translate} translate
    */
-  constructor(formFieldRegistry, pathRegistry, formFields) {
+  constructor(formFieldRegistry, pathRegistry, formFields, translate) {
     this._formFieldRegistry = formFieldRegistry;
     this._pathRegistry = pathRegistry;
     this._formFields = formFields;
+    this._translate = translate;
   }
   create(attrs, isNewField = true) {
     const {
@@ -8827,13 +8935,17 @@ class FieldFactory {
       isClosed: true,
       knownAncestorIds
     })) {
-      throw new Error(`binding path '${[...parentPath, key].join('.')}' is already claimed`);
+      throw new Error(this._translate("binding path '{value}' is already claimed", {
+        value: [...parentPath, key].join('.')
+      }));
     }
     if (config.pathed && path && !this._pathRegistry.canClaimPath([...parentPath, ...path.split('.')], {
       isRepeatable: config.repeatable,
       knownAncestorIds
     })) {
-      throw new Error(`binding path '${[...parentPath, ...path.split('.')].join('.')}' is already claimed`);
+      throw new Error(this._translate("binding path '{value}' is already claimed", {
+        value: [...parentPath, ...path.split('.')].join('.')
+      }));
     }
     const field = config.create({
       ...(config.label ? {
@@ -8894,7 +9006,7 @@ class FieldFactory {
     return `${field.type}_${random}`;
   }
 }
-FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields'];
+FieldFactory.$inject = ['formFieldRegistry', 'pathRegistry', 'formFields', 'translate'];
 
 /**
  * The PathRegistry class manages a hierarchical structure of paths associated with form fields.
@@ -9904,7 +10016,7 @@ class Form {
       config: ['value', enrichedConfig]
     }, {
       form: ['value', this]
-    }, CoreModule, ...modules, ...additionalModules]);
+    }, TranslateModule, CoreModule, ...modules, ...additionalModules]);
   }
 
   /**