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

package/dist/index.cjs

@@ -1202,7 +1202,37 @@ EditorExpressionField.config = {
   escapeGridRender: false
 };
 
-const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField];
+function EditorDocumentPreview(props) {
+  const {
+    field,
+    domId
+  } = props;
+  const {
+    label
+  } = field;
+  const Icon = formJsViewer.iconsByType(field.type);
+  return jsxRuntime.jsxs("div", {
+    class: editorFormFieldClasses(field.type),
+    children: [jsxRuntime.jsx(formJsViewer.Label, {
+      id: domId,
+      label: label
+    }), jsxRuntime.jsx("div", {
+      class: "fjs-documentPreview-placeholder",
+      id: domId,
+      children: jsxRuntime.jsxs("p", {
+        class: "fjs-documentPreview-placeholder-text",
+        children: [jsxRuntime.jsx(Icon, {
+          width: "32",
+          height: "24",
+          viewBox: "0 0 56 56"
+        }), "Document preview"]
+      })
+    })]
+  });
+}
+EditorDocumentPreview.config = formJsViewer.DocumentPreview.config;
+
+const editorFormFields = [EditorIFrame, EditorText, EditorHtml, EditorTable, EditorExpressionField, EditorDocumentPreview];
 
 class EditorFormFields extends formJsViewer.FormFields {
   constructor() {
@@ -9499,7 +9529,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) {
@@ -10346,7 +10376,7 @@ function LabelEntry(props) {
       return field.type === 'datetime' && (field.subtype === formJsViewer.DATETIME_SUBTYPES.TIME || field.subtype === formJsViewer.DATETIME_SUBTYPES.DATETIME);
     }
   });
-  const isSimplyLabled = field => {
+  const isSimplyLabeled = field => {
     return [...INPUTS.filter(input => input !== 'datetime'), ...LABELED_NON_INPUTS].includes(field.type);
   };
   entries.push({
@@ -10355,7 +10385,7 @@ function LabelEntry(props) {
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: isSimplyLabled
+    isDefaultVisible: isSimplyLabeled
   });
   return entries;
 }
@@ -10459,6 +10489,7 @@ function getLabelText(type) {
     case 'table':
       return 'Table label';
     case 'iframe':
+    case 'documentPreview':
       return 'Title';
     default:
       return 'Field label';
@@ -10515,7 +10546,7 @@ function Height(props) {
     id,
     getValue,
     setValue,
-    validate: validate$7
+    validate: validate$a
   });
 }
 
@@ -10525,7 +10556,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.';
   }
@@ -10590,7 +10621,7 @@ function Url(props) {
     setValue,
     singleLine: true,
     tooltip: getTooltip$1(),
-    validate: validate$6,
+    validate: validate$9,
     variables
   });
 }
@@ -10617,7 +10648,7 @@ function getTooltip$1() {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$6 = value => {
+const validate$9 = value => {
   if (!value || value.startsWith('=')) {
     return;
   }
@@ -10708,7 +10739,7 @@ function Text(props) {
   };
   return FeelTemplatingEntry({
     debounce,
-    description: description$2,
+    description: description$4,
     element: field,
     getValue,
     id,
@@ -10718,7 +10749,7 @@ function Text(props) {
     variables
   });
 }
-const description$2 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$4 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports markdown and templating.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-text/",
     target: "_blank",
@@ -10760,13 +10791,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
   });
@@ -10774,7 +10805,7 @@ function Content(props) {
 
 // helpers //////////
 
-const description$1 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$3 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["Supports HTML, styling, and templating. Styles are automatically scoped to the HTML component.", ' ', jsxRuntime.jsx("a", {
     href: "https://docs.camunda.io/docs/components/modeler/forms/form-element-library/forms-element-library-html/",
     target: "_blank",
@@ -10786,7 +10817,7 @@ const description$1 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
  * @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;
@@ -11625,7 +11656,7 @@ function InputValuesKey(props) {
     id,
     label: 'Input values key',
     setValue,
-    validate: validate$4
+    validate: validate$7
   });
 }
 
@@ -11635,7 +11666,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.';
   }
@@ -12078,7 +12109,7 @@ function Source(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$3
+    validate: validate$6
   });
 }
 
@@ -12088,7 +12119,7 @@ function Source(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$3 = value => {
+const validate$6 = value => {
   if (!minDash.isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12192,7 +12223,7 @@ function RowCount(props) {
     id,
     getValue,
     setValue,
-    validate: validate$2
+    validate: validate$5
   });
 }
 
@@ -12202,7 +12233,7 @@ function RowCount(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$2 = value => {
+const validate$5 = value => {
   if (minDash.isNil(value)) {
     return null;
   }
@@ -12376,7 +12407,7 @@ function ColumnsExpression(props) {
     setValue,
     singleLine: true,
     variables,
-    validate: validate$1
+    validate: validate$4
   });
 }
 
@@ -12386,7 +12417,7 @@ function ColumnsExpression(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-const validate$1 = value => {
+const validate$4 = value => {
   if (!minDash.isString(value) || value.length === 0 || value === '=') {
     return 'Must not be empty.';
   }
@@ -12484,7 +12515,7 @@ function Key(props) {
     id,
     label: 'Key',
     setValue,
-    validate
+    validate: validate$3
   });
 }
 
@@ -12494,7 +12525,7 @@ function Key(props) {
  * @param {string|void} value
  * @returns {string|null}
  */
-function validate(value) {
+function validate$3(value) {
   if (!minDash.isString(value) || value.length === 0) {
     return 'Must not be empty.';
   }
@@ -12632,13 +12663,13 @@ function Accept(props) {
     singleLine: true,
     setValue,
     variables,
-    description
+    description: description$2
   });
 }
 
 // helpers //////////
 
-const description = jsxRuntime.jsxs(jsxRuntime.Fragment, {
+const description$2 = jsxRuntime.jsxs(jsxRuntime.Fragment, {
   children: ["A comma-separated list of", ' ', jsxRuntime.jsx("a", {
     href: "https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#unique_file_type_specifiers",
     target: "_blank",
@@ -12692,6 +12723,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 minDash.get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const schema = `[
+  {
+    "documentId": "u123",
+    "metadata": {
+      "fileName": "Document.pdf",
+      "contentType": "application/pdf"
+    }
+  }
+]`;
+  const tooltip = jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx("p", {
+      children: "A source is a JSON object containing metadata for a document or an array of documents."
+    }), jsxRuntime.jsx("p", {
+      children: "Each entry must include a document ID, name, and MIME type."
+    }), jsxRuntime.jsx("p", {
+      children: "Additional details are optional. The expected format is as follows:"
+    }), jsxRuntime.jsx("pre", {
+      children: jsxRuntime.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 minDash.get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const tooltip = jsxRuntime.jsxs("div", {
+    children: [jsxRuntime.jsx("p", {
+      children: "Enter a context key that generates a string with the API endpoint to download a document."
+    }), jsxRuntime.jsxs("p", {
+      children: ["The string must contain ", jsxRuntime.jsx("code", {
+        children: '{ documentId }'
+      }), ", which will be replaced with the document ID from the document's reference."]
+    }), jsxRuntime.jsx("p", {
+      children: "If you're using the Camunda Tasklist, this variable is automatically added to the context for you."
+    }), jsxRuntime.jsxs("p", {
+      children: ["For more details, see the", ' ', jsxRuntime.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 = jsxRuntime.jsx(jsxRuntime.Fragment, {
+  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 minDash.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 = jsxRuntime.jsx(jsxRuntime.Fragment, {
+  children: "Documents with height that exceeds the defined value will be vertically scrollable"
+});
+
 function GeneralGroup(field, editField, getService) {
   const entries = [...IdEntry({
     field,
@@ -12779,6 +13040,9 @@ function GeneralGroup(field, editField, getService) {
   }), ...RowCountEntry({
     field,
     editField
+  }), ...DocumentsDataSourceEntry({
+    field,
+    editField
   })];
   if (entries.length === 0) {
     return null;
@@ -13236,6 +13500,9 @@ function AppearanceGroup(field, editField, getService) {
   }), ...LayouterAppearanceEntry({
     field,
     editField
+  }), ...MaxHeightEntry({
+    field,
+    editField
   })];
   if (!entries.length) {
     return null;
@@ -13404,6 +13671,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;
@@ -13439,7 +13721,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