@bpmn-io/form-js-editor 1.12.0 → 1.13.0

package/dist/index.es.js

@@ -1,5 +1,5 @@
 import Ids from 'ids';
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Label as Label$3, IFrame, Text as Text$1, Html, Table, ExpressionField, DocumentPreview, FormFields, sanitizeImageSource, getAncestryList, FormContext, FormRenderContext, FormComponent, getScrollContainer, Importer, PathRegistry, FormLayouter, FieldFactory, FeelExpressionLanguage, OPTIONS_SOURCES, OPTIONS_SOURCES_PATHS, clone, runRecursively, getSchemaVariables, DATETIME_SUBTYPES, DATE_LABEL_PATH, TIME_LABEL_PATH, DATETIME_SUBTYPE_PATH, DATETIME_SUBTYPES_LABELS, TIME_SERIALISING_FORMAT_PATH, TIME_SERIALISING_FORMATS, TIME_INTERVAL_PATH, TIME_USE24H_PATH, DATE_DISALLOW_PAST_PATH, TIME_SERIALISINGFORMAT_LABELS, getOptionsSource, OPTIONS_SOURCES_DEFAULTS, OPTIONS_SOURCES_LABELS, SECURITY_ATTRIBUTES_DEFINITIONS, createFormContainer, createInjector, MarkdownRendererModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, isString, uniqueBy, isObject, get, isDefined, set as set$1, reduce, without, isNil, has } from 'min-dash';
 import classnames from 'classnames';
@@ -1182,7 +1182,37 @@ EditorExpressionField.config = {
   escapeGridRender: false
 };
 
-const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField];
+function EditorDocumentPreview(props) {
+  const {
+    field,
+    domId
+  } = props;
+  const {
+    label
+  } = field;
+  const Icon = iconsByType(field.type);
+  return jsxs("div", {
+    class: editorFormFieldClasses(field.type),
+    children: [jsx(Label$3, {
+      id: domId,
+      label: label
+    }), jsx("div", {
+      class: "fjs-documentPreview-placeholder",
+      id: domId,
+      children: jsxs("p", {
+        class: "fjs-documentPreview-placeholder-text",
+        children: [jsx(Icon, {
+          width: "32",
+          height: "24",
+          viewBox: "0 0 56 56"
+        }), "Document preview"]
+      })
+    })]
+  });
+}
+EditorDocumentPreview.config = DocumentPreview.config;
+
+const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField, EditorDocumentPreview];
 
 class EditorFormFields extends FormFields {
   constructor() {
@@ -9479,7 +9509,7 @@ function isProhibitedPath(path) {
   const prohibitedSegments = ['__proto__', 'prototype', 'constructor'];
   return path.split('.').some(segment => prohibitedSegments.includes(segment));
 }
-const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table'];
+const LABELED_NON_INPUTS = ['button', 'group', 'dynamiclist', 'iframe', 'table', 'documentPreview'];
 const INPUTS = ['checkbox', 'checklist', 'datetime', 'number', 'radio', 'select', 'taglist', 'textfield', 'textarea', 'filepicker'];
 const OPTIONS_INPUTS = ['checklist', 'radio', 'select', 'taglist'];
 function hasEntryConfigured(formFieldDefinition, entryId) {
@@ -10326,7 +10356,7 @@ function LabelEntry(props) {
       return field.type === 'datetime' && (field.subtype === DATETIME_SUBTYPES.TIME || field.subtype === DATETIME_SUBTYPES.DATETIME);
     }
   });
-  const isSimplyLabled = field => {
+  const isSimplyLabeled = field => {
     return [...INPUTS.filter(input => input !== 'datetime'), ...LABELED_NON_INPUTS].includes(field.type);
   };
   entries.push({
@@ -10335,7 +10365,7 @@ function LabelEntry(props) {
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: isSimplyLabled
+    isDefaultVisible: isSimplyLabeled
   });
   return entries;
 }
@@ -10439,6 +10469,7 @@ function getLabelText(type) {
     case 'table':
       return 'Table label';
     case 'iframe':
+    case 'documentPreview':
       return 'Title';
     default:
       return 'Field label';
@@ -10495,7 +10526,7 @@ function Height(props) {
     id,
     getValue,
     setValue,
-    validate: validate$7
+    validate: validate$a
   });
 }
 
@@ -10505,7 +10536,7 @@ function Height(props) {
  * @param {number|void} value
  * @returns {string|null}
  */
-const validate$7 = value => {
+const validate$a = value => {
   if (typeof value !== 'number') {
     return 'A number is required.';
   }
@@ -10570,7 +10601,7 @@ function Url(props) {
     setValue,
     singleLine: true,
     tooltip: getTooltip$1(),
-    validate: validate$6,
+    validate: validate$9,
     variables
   });
 }
@@ -10597,7 +10628,7 @@ function getTooltip$1() {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$6 = value => {
+const validate$9 = value => {
   if (!value || value.startsWith('=')) {
     return;
   }
@@ -10688,7 +10719,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$2,
+    description: description$4,
     element: field,
     getValue,
     id,
@@ -10698,7 +10729,7 @@ function Text(props) {
     variables
   });
 }
-const description$2 = jsxs(Fragment$1, {
+const description$4 = jsxs(Fragment$1, {
   children: ["Supports markdown and templating.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
@@ -10740,13 +10771,13 @@ function Content(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$1,
+    description: description$3,
     element: field,
     getValue,
     id,
     label: 'Content',
     hostLanguage: 'html',
-    validate: validate$5,
+    validate: validate$8,
     setValue,
     variables
   });
@@ -10754,7 +10785,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description$1 = jsxs(Fragment$1, {
+const description$3 = jsxs(Fragment$1, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
@@ -10766,7 +10797,7 @@ const description$1 = jsxs(Fragment$1, {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$5 = value => {
+const validate$8 = value => {
   // allow empty state
   if (typeof value !== 'string' || value === '') {
     return null;
@@ -11605,7 +11636,7 @@ function InputValuesKey(props) {
     id,
     label: 'Input values key',
     setValue,
-    validate: validate$4
+    validate: validate$7
   });
 }
 
@@ -11615,7 +11646,7 @@ function InputValuesKey(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$4 = value => {
+const validate$7 = value => {
   if (typeof value !== 'string' || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12058,7 +12089,7 @@ function Source(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$3
+    validate: validate$6
   });
 }
 
@@ -12068,7 +12099,7 @@ function Source(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$3 = value => {
+const validate$6 = value => {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12172,7 +12203,7 @@ function RowCount(props) {
     id,
     getValue,
     setValue,
-    validate: validate$2
+    validate: validate$5
   });
 }
 
@@ -12182,7 +12213,7 @@ function RowCount(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$2 = value => {
+const validate$5 = value => {
   if (isNil(value)) {
     return null;
   }
@@ -12356,7 +12387,7 @@ function ColumnsExpression(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$1
+    validate: validate$4
   });
 }
 
@@ -12366,7 +12397,7 @@ function ColumnsExpression(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$1 = value => {
+const validate$4 = value => {
   if (!isString(value) || value.length === 0 || value === '=') {
     return 'Must not be empty.';
   }
@@ -12464,7 +12495,7 @@ function Key(props) {
     id,
     label: 'Key',
     setValue,
-    validate
+    validate: validate$3
   });
 }
 
@@ -12474,7 +12505,7 @@ function Key(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-function validate(value) {
+function validate$3(value) {
   if (!isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12612,13 +12643,13 @@ function Accept(props) {
     singleLine: true,
     setValue,
     variables,
-    description
+    description: description$2
   });
 }
 
 // helpers //////////
 
-const description = jsxs(Fragment$1, {
+const description$2 = jsxs(Fragment$1, {
   children: ["A comma-separated list of", ' ', jsx("a", {
     href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
     target: "_blank",
@@ -12672,6 +12703,236 @@ function Multiple(props) {
   });
 }
 
+function DocumentsDataSourceEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'dataSource',
+    component: DocumentsDataSource,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'documentPreview'
+  });
+  return entries;
+}
+function DocumentsDataSource(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['dataSource'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const schema = `[
+  {
+    "documentId": "u123",
+    "metadata": {
+      "fileName": "Document.pdf",
+      "contentType": "application/pdf"
+    }
+  }
+]`;
+  const tooltip = jsxs("div", {
+    children: [jsx("p", {
+      children: "A source is a JSON object containing metadata for a document or an array of documents."
+    }), jsx("p", {
+      children: "Each entry must include a document ID, name, and MIME type."
+    }), jsx("p", {
+      children: "Additional details are optional. The expected format is as follows:"
+    }), jsx("pre", {
+      children: jsx("code", {
+        children: schema
+      })
+    })]
+  });
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Document reference',
+    feel: 'required',
+    singleLine: true,
+    setValue,
+    variables,
+    tooltip,
+    validate: validate$2
+  });
+}
+
+// helpers //////////
+
+/**
+ * @param {string|undefined} value
+ * @returns {string|null}
+ */
+const validate$2 = value => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return 'The document data source is required.';
+  }
+};
+
+function EndpointKeyEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'endpointKey',
+    component: EndpointKey,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'documentPreview'
+  });
+  return entries;
+}
+function EndpointKey(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['endpointKey'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const tooltip = jsxs("div", {
+    children: [jsx("p", {
+      children: "Enter a context key that generates a string with the API endpoint to download a document."
+    }), jsxs("p", {
+      children: ["The string must contain ", jsx("code", {
+        children: '{ documentId }'
+      }), ", which will be replaced with the document ID from the document's reference."]
+    }), jsx("p", {
+      children: "If you're using the Camunda Tasklist, this variable is automatically added to the context for you."
+    }), jsxs("p", {
+      children: ["For more details, see the", ' ', jsx("a", {
+        href: "https://docs.camunda.io",
+        rel: "noopener noreferrer",
+        target: "_blank",
+        children: "Camunda documentation"
+      })]
+    })]
+  });
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    getValue,
+    id,
+    label: 'Document URL',
+    feel: 'required',
+    singleLine: true,
+    setValue,
+    variables,
+    description: description$1,
+    tooltip,
+    validate: validate$1
+  });
+}
+
+// helpers //////////
+
+/**
+ * @param {string|undefined} value
+ * @returns {string|null}
+ */
+const validate$1 = value => {
+  if (typeof value !== 'string' || value.length === 0) {
+    return 'The document reference is required.';
+  }
+};
+const description$1 = jsx(Fragment$1, {
+  children: "Define an API URL for downloading a document"
+});
+
+function MaxHeightEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'maxHeight',
+    component: MaxHeight,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$7,
+    isDefaultVisible: field => field.type === 'documentPreview'
+  });
+  return entries;
+}
+function MaxHeight(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const path = ['maxHeight'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    label: 'Max height of preview container',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate,
+    description
+  });
+}
+
+// helpers //////////
+
+/**
+ * @param {string|number|undefined} value
+ * @returns {string|null}
+ */
+const validate = value => {
+  if (value === undefined || value === '') {
+    return null;
+  }
+  if (typeof value === 'string') {
+    return 'Value must be a number.';
+  }
+  if (!Number.isInteger(value)) {
+    return 'Should be an integer.';
+  }
+  if (value < 1) {
+    return 'Should be greater than zero.';
+  }
+};
+const description = jsx(Fragment$1, {
+  children: "Documents with height that exceeds the defined value will be vertically scrollable"
+});
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -12759,6 +13020,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...RowCountEntry({
     field,
     editField
+  }), ...DocumentsDataSourceEntry({
+    field,
+    editField
   })];
   if (entries.length === 0) {
     return null;
@@ -13216,6 +13480,9 @@ function AppearanceGroup(field, editField, getService) {
   }), ...LayouterAppearanceEntry({
     field,
     editField
+  }), ...MaxHeightEntry({
+    field,
+    editField
   })];
   if (!entries.length) {
     return null;
@@ -13384,6 +13651,21 @@ const TOOLTIP_TEXT = `"List of items" defines a constant, predefined set of form
 "Expression" defines options that are populated from a FEEL expression.
 `;
 
+function DownloadSettings(field, editField) {
+  const entries = [...EndpointKeyEntry({
+    field,
+    editField
+  })];
+  if (!entries.length) {
+    return null;
+  }
+  return {
+    id: 'downloadSettings',
+    label: 'Download settings',
+    entries
+  };
+}
+
 class PropertiesProvider {
   constructor(propertiesPanel, injector) {
     this._injector = injector;
@@ -13419,7 +13701,7 @@ class PropertiesProvider {
         return groups;
       }
       const getService = (type, strict = true) => this._injector.get(type, strict);
-      groups = [...groups, GeneralGroup(field, editField, getService), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
+      groups = [...groups, GeneralGroup(field, editField, getService), DownloadSettings(field, editField), ...OptionsGroups(field, editField, getService), ...TableHeaderGroups(field, editField), SecurityAttributesGroup(field, editField), ConditionGroup(field, editField), LayoutGroup(field, editField), AppearanceGroup(field, editField), SerializationGroup(field, editField), ConstraintsGroup(field, editField), ValidationGroup(field, editField), CustomPropertiesGroup(field, editField)].filter(group => group != null);
       this._filterVisibleEntries(groups, field, getService);
 
       // contract: if a group has no entries or items, it should not be displayed at all