@bpmn-io/form-js-viewer 1.8.7 → 1.9.1

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

@@ -49,6 +49,7 @@
   --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
   --color-layer: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
   --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
+  --color-background-pre: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
 
   --color-icon-base: var(--cds-icon-primary, var(--color-black));
   --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
@@ -66,6 +67,7 @@
   --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
   --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
   --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
+  --color-borders-pre: var(--cds-border-subtle, var(--color-grey-225-10-85));
 
   --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
   --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
@@ -833,6 +835,13 @@
   white-space: nowrap;
 }
 
+.fjs-container .fjs-form-field-html pre,
+.fjs-container .fjs-form-field-text pre {
+  border: 1px solid var(--color-borders-pre);
+  background: var(--color-background-pre);
+  padding: 4px;
+}
+
 .fjs-container .fjs-taglist-anchor,
 .fjs-container .fjs-select-anchor,
 .fjs-container .fjs-timepicker-anchor {

package/dist/assets/form-js.css

@@ -44,6 +44,7 @@
   --color-background-active: var(--cds-background-active, var(--color-grey-225-10-75));
   --color-layer: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
   --color-layer-accent: var(--cds-layer-accent, var(--color-grey-0-0-88));
+  --color-background-pre: var(--cds-layer, var(--cds-layer-01, var(--color-white)));
   --color-icon-base: var(--cds-icon-primary, var(--color-black));
   --color-icon-inverted: var(--cds-icon-inverse, var(--color-black));
   --color-text: var(--cds-text-primary, var(--color-grey-225-10-15));
@@ -59,6 +60,7 @@
   --color-borders-adornment: var(--cds-border-subtle, var(--cds-border-subtle-01, var(--color-grey-225-10-85)));
   --color-borders-readonly: var(--cds-border-subtle, var(--color-grey-225-10-75));
   --color-borders-inverted: var(--cds-border-inverse, var(--color-grey-225-10-90));
+  --color-borders-pre: var(--cds-border-subtle, var(--color-grey-225-10-85));
   --color-warning: var(--cds-text-error, var(--color-red-360-100-45));
   --color-warning-light: var(--cds-text-error, var(--color-red-360-100-92));
   --color-accent: var(--cds-link-primary, var(--color-blue-205-100-40));
@@ -793,6 +795,13 @@
   white-space: nowrap;
 }
 
+.fjs-container .fjs-form-field-html pre,
+.fjs-container .fjs-form-field-text pre {
+  border: 1px solid var(--color-borders-pre);
+  background: var(--color-background-pre);
+  padding: 4px;
+}
+
 .fjs-container .fjs-taglist-anchor,
 .fjs-container .fjs-select-anchor,
 .fjs-container .fjs-timepicker-anchor {

package/dist/index.cjs

@@ -8,6 +8,7 @@ var jsxRuntime = require('preact/jsx-runtime');
 var hooks = require('preact/hooks');
 var preact = require('preact');
 var isEqual = require('lodash/isEqual');
+var luxon = require('luxon');
 var flatpickr = require('flatpickr');
 var React = require('preact/compat');
 var DOMPurify = require('dompurify');
@@ -602,40 +603,6 @@ function prefixId(id, formId, indexes) {
   return result;
 }
 
-const type$h = 'button';
-function Button(props) {
-  const {
-    disabled,
-    onFocus,
-    onBlur,
-    field
-  } = props;
-  const {
-    action = 'submit'
-  } = field;
-  return jsxRuntime.jsx("div", {
-    class: formFieldClasses(type$h),
-    children: jsxRuntime.jsx("button", {
-      class: "fjs-button",
-      type: action,
-      disabled: disabled,
-      onFocus: () => onFocus && onFocus(),
-      onBlur: () => onBlur && onBlur(),
-      children: field.label
-    })
-  });
-}
-Button.config = {
-  type: type$h,
-  keyed: false,
-  label: 'Button',
-  group: 'action',
-  create: (options = {}) => ({
-    action: 'submit',
-    ...options
-  })
-};
-
 const FormRenderContext = preact.createContext({
   Empty: props => {
     return null;
@@ -1472,16 +1439,16 @@ function parseIsoTime(isoTimeString) {
     return parseBasicMinutes(isoTimeString);
   }
 }
+
+/**
+ * Returns the date object as a simple 'YYYY-MM-DD' formatted date in the local timezone.
+ *
+ * @param {*} date The date object to serialize.
+ * @returns {string} The serialized date.
+ */
 function serializeDate(date) {
-  var d = new Date(date),
-    month = '' + (d.getMonth() + 1),
-    day = '' + d.getDate(),
-    year = d.getFullYear();
-  if (month.length < 2) month = '0' + month;
-  if (day.length < 2) day = '0' + day;
-  return [year, month, day].join('-');
+  return luxon.DateTime.fromJSDate(date).toISODate();
 }
-
 // this method is used to make the `new Date(value)` parsing behavior stricter
 function isDateTimeInputInformationSufficient(value) {
   if (!value || typeof value !== 'string') return false;
@@ -1709,6 +1676,43 @@ function useCleanupMultiSelectValue(props) {
   }, [field, options, onChange, memoizedValues, loadState]);
 }
 
+const type$h = 'button';
+function Button(props) {
+  const {
+    disabled,
+    onFocus,
+    onBlur,
+    field
+  } = props;
+  const {
+    action = 'submit'
+  } = field;
+  const evaluatedLabel = useSingleLineTemplateEvaluation(field.label || '', {
+    debug: true
+  });
+  return jsxRuntime.jsx("div", {
+    class: formFieldClasses(type$h),
+    children: jsxRuntime.jsx("button", {
+      class: "fjs-button",
+      type: action,
+      disabled: disabled,
+      onFocus: () => onFocus && onFocus(),
+      onBlur: () => onBlur && onBlur(),
+      children: evaluatedLabel
+    })
+  });
+}
+Button.config = {
+  type: type$h,
+  keyed: false,
+  label: 'Button',
+  group: 'action',
+  create: (options = {}) => ({
+    action: 'submit',
+    ...options
+  })
+};
+
 function Description(props) {
   const {
     description,
@@ -2864,7 +2868,7 @@ function Datetime(props) {
     switch (subtype) {
       case DATETIME_SUBTYPES.DATE:
         {
-          date = new Date(Date.parse(value));
+          date = typeof value === 'string' ? luxon.DateTime.fromISO(value).toJSDate() : new Date(NaN);
           break;
         }
       case DATETIME_SUBTYPES.TIME:
@@ -5744,7 +5748,7 @@ class FormFields {
   }
 }
 
-const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression'];
+const EXPRESSION_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'conditional.hide', 'description', 'label', 'source', 'readonly', 'text', 'validate.min', 'validate.max', 'validate.minLength', 'validate.maxLength', 'valuesExpression', 'url', 'dataSource', 'columnsExpression', 'expression'];
 const TEMPLATE_PROPERTIES = ['alt', 'appearance.prefixAdorner', 'appearance.suffixAdorner', 'description', 'label', 'source', 'text', 'content', 'url'];
 
 /**
@@ -6953,7 +6957,10 @@ const RepetitionScaffold = props => {
   const localExpressionContextInfo = hooks.useMemo(() => ({
     data: parentExpressionContextInfo.data,
     this: itemValue,
-    parent: buildExpressionContext(parentExpressionContextInfo),
+    parent: buildExpressionContext({
+      ...parentExpressionContextInfo,
+      data: parentExpressionContextInfo.this
+    }),
     i: [...parentExpressionContextInfo.i, itemIndex + 1]
   }), [itemIndex, parentExpressionContextInfo, itemValue]);
   return !showRemove ? jsxRuntime.jsx(LocalExpressionContext.Provider, {
@@ -7865,13 +7872,11 @@ class FieldFactory {
       if (config.repeatable) {
         this._enforceDefaultPath(field);
       }
-      if (field.path) {
-        this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
-          isRepeatable: config.repeatable,
-          claimerId: field.id,
-          knownAncestorIds: getAncestryList(_parent, this._formFieldRegistry)
-        });
-      }
+      this._pathRegistry.claimPath(this._pathRegistry.getValuePath(field), {
+        isRepeatable: config.repeatable,
+        claimerId: field.id,
+        knownAncestorIds: getAncestryList(_parent, this._formFieldRegistry)
+      });
     }
     return field;
   }