@bpmn-io/form-js-viewer 1.0.0-alpha.0 → 1.0.0-alpha.1

package/dist/assets/form-js-base.css

@@ -250,6 +250,9 @@
 .fjs-container .fjs-form-field-label {
   display: flex;
   align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  color: var(--color-text-light);
 }
 
 .fjs-container .fjs-incollapsible-label {
@@ -264,10 +267,6 @@
   letter-spacing: var(--letter-spacing-label);
 }
 
-.fjs-container .fjs-form-field-label {
-  color: var(--color-text-light);
-}
-
 .fjs-container .fjs-form-field-description {
   color: var(--color-text-lighter);
 }

package/dist/assets/form-js.css

@@ -234,6 +234,9 @@
 .fjs-container .fjs-form-field-label {
   display: flex;
   align-items: center;
+  white-space: nowrap;
+  overflow: hidden;
+  color: var(--color-text-light);
 }
 
 .fjs-container .fjs-incollapsible-label {
@@ -248,10 +251,6 @@
   letter-spacing: var(--letter-spacing-label);
 }
 
-.fjs-container .fjs-form-field-label {
-  color: var(--color-text-light);
-}
-
 .fjs-container .fjs-form-field-description {
   color: var(--color-text-lighter);
 }

package/dist/index.cjs

@@ -1342,8 +1342,8 @@ function createFormContainer(prefix = 'fjs') {
   return container;
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'source', 'readonly', 'text'];
-const TEMPLATE_PROPERTIES = ['text'];
+const EXPRESSION_PROPERTIES = ['alt', 'description', 'label', 'source', 'readonly', 'text'];
+const TEMPLATE_PROPERTIES = ['description', 'label', 'text'];
 function findErrors(errors, path) {
   return errors[pathStringify(path)];
 }
@@ -1697,16 +1697,162 @@ const FormContext = preact.createContext({
 });
 var FormContext$1 = FormContext;
 
+function useService(type, strict) {
+  const {
+    getService
+  } = hooks.useContext(FormContext$1);
+  return getService(type, strict);
+}
+
+/**
+ * Returns the conditionally filtered data of a form reactively.
+ * Memoised to minimize re-renders
+ *
+ */
+function useFilteredFormData() {
+  const {
+    initialData,
+    data
+  } = useService('form')._getState();
+  const conditionChecker = useService('conditionChecker', false);
+  return hooks.useMemo(() => {
+    const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
+    return {
+      ...initialData,
+      ...newData
+    };
+  }, [conditionChecker, data, initialData]);
+}
+
+/**
+ * Evaluate if condition is met reactively based on the conditionChecker and form data.
+ *
+ * @param {string | undefined} condition
+ *
+ * @returns {boolean} true if condition is met or no condition or condition checker exists
+ */
+function useCondition(condition) {
+  const conditionChecker = useService('conditionChecker', false);
+  const filteredData = useFilteredFormData();
+  return hooks.useMemo(() => {
+    return conditionChecker ? conditionChecker.check(condition, filteredData) : null;
+  }, [conditionChecker, condition, filteredData]);
+}
+
+/**
+ * Evaluate a string reactively based on the expressionLanguage and form data.
+ * If the string is not an expression, it is returned as is.
+ * Memoised to minimize re-renders.
+ *
+ * @param {string} value
+ *
+ */
+function useExpressionEvaluation(value) {
+  const formData = useFilteredFormData();
+  const expressionLanguage = useService('expressionLanguage');
+  return hooks.useMemo(() => {
+    if (expressionLanguage && expressionLanguage.isExpression(value)) {
+      return expressionLanguage.evaluate(value, formData);
+    }
+    return value;
+  }, [expressionLanguage, formData, value]);
+}
+
+function useKeyDownAction(targetKey, action, listenerElement = window) {
+  function downHandler({
+    key
+  }) {
+    if (key === targetKey) {
+      action();
+    }
+  }
+  hooks.useEffect(() => {
+    listenerElement.addEventListener('keydown', downHandler);
+    return () => {
+      listenerElement.removeEventListener('keydown', downHandler);
+    };
+  });
+}
+
+/**
+ * Retrieve readonly value of a form field, given it can be an
+ * expression optionally or configured globally.
+ *
+ * @typedef { import('../../types').FormProperties } FormProperties
+ *
+ * @param {any} formField
+ * @param {FormProperties} properties
+ *
+ * @returns {boolean}
+ */
+function useReadonly(formField, properties = {}) {
+  const expressionLanguage = useService('expressionLanguage');
+  const conditionChecker = useService('conditionChecker', false);
+  const filteredData = useFilteredFormData();
+  const {
+    readonly
+  } = formField;
+  if (properties.readOnly) {
+    return true;
+  }
+  if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
+    return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
+  }
+  return readonly || false;
+}
+
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} options
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
+ */
+function useTemplateEvaluation(value, options) {
+  const filteredData = useFilteredFormData();
+  const templating = useService('templating');
+  return hooks.useMemo(() => {
+    if (templating && templating.isTemplate(value)) {
+      return templating.evaluate(value, filteredData, options);
+    }
+    return value;
+  }, [filteredData, templating, value, options]);
+}
+
+/**
+ * Template a string reactively based on form data. If the string is not a template, it is returned as is.
+ * If the string contains multiple lines, only the first line is returned.
+ * Memoised to minimize re-renders
+ *
+ * @param {string} value
+ * @param {Object} [options]
+ * @param {boolean} [options.debug = false]
+ * @param {boolean} [options.strict = false]
+ * @param {Function} [options.buildDebugString]
+ *
+ */
+function useSingleLineTemplateEvaluation(value, options = {}) {
+  const evaluatedTemplate = useTemplateEvaluation(value, options);
+  return hooks.useMemo(() => evaluatedTemplate && evaluatedTemplate.split('\n')[0], [evaluatedTemplate]);
+}
+
 function Description(props) {
   const {
     description
   } = props;
-  if (!description) {
+  const evaluatedDescription = useSingleLineTemplateEvaluation(description || '', {
+    debug: true
+  });
+  if (!evaluatedDescription) {
     return null;
   }
   return jsxRuntime.jsx("div", {
     class: "fjs-form-field-description",
-    children: description
+    children: evaluatedDescription
   });
 }
 
@@ -1739,12 +1885,15 @@ function Label(props) {
     collapseOnEmpty = true,
     required = false
   } = props;
+  const evaluatedLabel = useSingleLineTemplateEvaluation(label || '', {
+    debug: true
+  });
   return jsxRuntime.jsxs("label", {
     for: id,
     class: classNames('fjs-form-field-label', {
       'fjs-incollapsible-label': !collapseOnEmpty
     }, props['class']),
-    children: [props.children, label || '', required && jsxRuntime.jsx("span", {
+    children: [props.children, evaluatedLabel, required && jsxRuntime.jsx("span", {
       class: "fjs-asterix",
       children: "*"
     })]
@@ -1871,13 +2020,6 @@ function _isValueSomething(value) {
   return value || value === 0 || value === false;
 }
 
-function useService(type, strict) {
-  const {
-    getService
-  } = hooks.useContext(FormContext$1);
-  return getService(type, strict);
-}
-
 /**
  * @enum { String }
  */
@@ -2251,125 +2393,6 @@ Checklist.config = {
   }
 };
 
-/**
- * Returns the conditionally filtered data of a form reactively.
- * Memoised to minimize re-renders
- *
- */
-function useFilteredFormData() {
-  const {
-    initialData,
-    data
-  } = useService('form')._getState();
-  const conditionChecker = useService('conditionChecker', false);
-  return hooks.useMemo(() => {
-    const newData = conditionChecker ? conditionChecker.applyConditions(data, data) : data;
-    return {
-      ...initialData,
-      ...newData
-    };
-  }, [conditionChecker, data, initialData]);
-}
-
-/**
- * Evaluate if condition is met reactively based on the conditionChecker and form data.
- *
- * @param {string | undefined} condition
- *
- * @returns {boolean} true if condition is met or no condition or condition checker exists
- */
-function useCondition(condition) {
-  const conditionChecker = useService('conditionChecker', false);
-  const filteredData = useFilteredFormData();
-  return hooks.useMemo(() => {
-    return conditionChecker ? conditionChecker.check(condition, filteredData) : null;
-  }, [conditionChecker, condition, filteredData]);
-}
-
-/**
- * Evaluate a string reactively based on the expressionLanguage and form data.
- * If the string is not an expression, it is returned as is.
- * Memoised to minimize re-renders.
- *
- * @param {string} value
- *
- */
-function useExpressionEvaluation(value) {
-  const formData = useFilteredFormData();
-  const expressionLanguage = useService('expressionLanguage');
-  return hooks.useMemo(() => {
-    if (expressionLanguage && expressionLanguage.isExpression(value)) {
-      return expressionLanguage.evaluate(value, formData);
-    }
-    return value;
-  }, [expressionLanguage, formData, value]);
-}
-
-function useKeyDownAction(targetKey, action, listenerElement = window) {
-  function downHandler({
-    key
-  }) {
-    if (key === targetKey) {
-      action();
-    }
-  }
-  hooks.useEffect(() => {
-    listenerElement.addEventListener('keydown', downHandler);
-    return () => {
-      listenerElement.removeEventListener('keydown', downHandler);
-    };
-  });
-}
-
-/**
- * Retrieve readonly value of a form field, given it can be an
- * expression optionally or configured globally.
- *
- * @typedef { import('../../types').FormProperties } FormProperties
- *
- * @param {any} formField
- * @param {FormProperties} properties
- *
- * @returns {boolean}
- */
-function useReadonly(formField, properties = {}) {
-  const expressionLanguage = useService('expressionLanguage');
-  const conditionChecker = useService('conditionChecker', false);
-  const filteredData = useFilteredFormData();
-  const {
-    readonly
-  } = formField;
-  if (properties.readOnly) {
-    return true;
-  }
-  if (expressionLanguage && expressionLanguage.isExpression(readonly)) {
-    return conditionChecker ? conditionChecker.check(readonly, filteredData) : false;
-  }
-  return readonly || false;
-}
-
-/**
- * Template a string reactively based on form data. If the string is not a template, it is returned as is.
- * Memoised to minimize re-renders
- *
- * @param {string} value
- * @param {Object} options
- * @param {boolean} [options.debug = false]
- * @param {boolean} [options.strict = false]
- * @param {Function} [options.buildDebugString]
- *
- */
-function useTemplateEvaluation(value, options) {
-  const filteredData = useFilteredFormData();
-  const templating = useService('templating');
-  return hooks.useMemo(() => {
-    if (templating.isTemplate(value)) {
-      return templating.evaluate(value, filteredData, options);
-    }
-    return value;
-  }, [filteredData, templating, value, options]);
-}
-
 const noop$1 = () => false;
 function FormField(props) {
   const {