@bpmn-io/form-js-editor 1.5.0-alpha.0 → 1.5.0

package/dist/index.es.js

@@ -1,9 +1,9 @@
-import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, Text as Text$1, FormFields, sanitizeImageSource, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, VALUES_SOURCES, VALUES_SOURCES_PATHS, 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, getValuesSource, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
+import { FormFieldRegistry as FormFieldRegistry$1, iconsByType, IFrame, Text as Text$1, FormFields, sanitizeImageSource, FormContext, FormRenderContext, FormComponent, Importer, PathRegistry, FormLayouter, FieldFactory, runRecursively, clone, VALUES_SOURCES, VALUES_SOURCES_PATHS, 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, getValuesSource, VALUES_SOURCES_DEFAULTS, VALUES_SOURCES_LABELS, FeelExpressionLanguage, createFormContainer, createInjector, MarkdownModule, schemaVersion } from '@bpmn-io/form-js-viewer';
 export { schemaVersion } from '@bpmn-io/form-js-viewer';
 import Ids from 'ids';
 import { isArray, isFunction, isNumber, bind, assign, debounce, forEach, get, isObject, uniqueBy, sortBy, find, isString, set as set$1, reduce, isUndefined, without, has } from 'min-dash';
-import classnames from 'classnames';
 import { jsx, jsxs, Fragment as Fragment$1 } from 'preact/jsx-runtime';
+import classnames from 'classnames';
 import { useContext, useRef, useEffect, useMemo, useState, useCallback, useLayoutEffect } from 'preact/hooks';
 import { createContext, Fragment, render, createElement } from 'preact';
 import * as React from 'preact/compat';
@@ -644,6 +644,25 @@ function calculateMaxColumnsWithAuto(autoCols) {
   return MAX_COLUMNS_PER_ROW - autoCols * 2;
 }
 
+function EditorIFrame(props) {
+  const {
+    field
+  } = props;
+  const Icon = iconsByType(field.type);
+  return jsx("div", {
+    class: "fjs-iframe-placeholder",
+    children: jsxs("p", {
+      class: "fjs-iframe-placeholder-text",
+      children: [jsx(Icon, {
+        width: "32",
+        height: "24",
+        viewBox: "0 0 56 56"
+      }), "iFrame"]
+    })
+  });
+}
+EditorIFrame.config = IFrame.config;
+
 const emptyImage = createEmptyImage();
 function editorFormFieldClasses(type, {
   disabled = false
@@ -979,7 +998,7 @@ function EditorText(props) {
 }
 EditorText.config = Text$1.config;
 
-const editorFormFields = [EditorText];
+const editorFormFields = [EditorIFrame, EditorText];
 
 class EditorFormFields extends FormFields {
   constructor() {
@@ -1278,6 +1297,9 @@ const PALETTE_GROUPS = [{
 }, {
   label: 'Presentation',
   id: 'presentation'
+}, {
+  label: 'Containers',
+  id: 'container'
 }, {
   label: 'Action',
   id: 'action'
@@ -9551,6 +9573,8 @@ function simpleBoolEntryFactory(options) {
     description,
     path,
     props,
+    getValue,
+    setValue,
     isDefaultVisible
   } = options;
   const {
@@ -9565,8 +9589,10 @@ function simpleBoolEntryFactory(options) {
     editField,
     description,
     component: SimpleBoolComponent,
-    isEdited: isEdited$5,
-    isDefaultVisible
+    isEdited: isEdited$8,
+    isDefaultVisible,
+    getValue,
+    setValue
   };
 }
 const SimpleBoolComponent = props => {
@@ -9576,16 +9602,17 @@ const SimpleBoolComponent = props => {
     path,
     field,
     editField,
+    getValue = () => get(field, path, ''),
+    setValue = value => editField(field, path, value || false),
     description
   } = props;
-  const getValue = () => get(field, path, '');
-  const setValue = value => editField(field, path, value || false);
-  return CheckboxEntry({
+  return ToggleSwitchEntry({
     element: field,
     getValue,
     id,
     label,
     setValue,
+    inline: true,
     description
   });
 };
@@ -9641,7 +9668,7 @@ function LabelEntry(props) {
     editField,
     field,
     isEdited: isEdited$6,
-    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group'
+    isDefaultVisible: field => INPUTS.includes(field.type) || field.type === 'button' || field.type === 'group' || field.type === 'iframe'
   });
   return entries;
 }
@@ -9662,7 +9689,7 @@ function Label$1(props) {
   const setValue = value => {
     return editField(field, path, value || '');
   };
-  const label = field.type === 'group' ? 'Group label' : 'Field label';
+  const label = getLabelText(field);
   return FeelTemplatingEntry({
     debounce,
     element: field,
@@ -9731,6 +9758,165 @@ function TimeLabel(props) {
   });
 }
 
+// helpers //////////
+
+function getLabelText(field) {
+  const {
+    type
+  } = field;
+  if (type === 'group') {
+    return 'Group label';
+  }
+  if (type === 'iframe') {
+    return 'Title';
+  }
+  return 'Field label';
+}
+
+function HeightEntry(props) {
+  const {
+    editField,
+    field,
+    id,
+    description,
+    isDefaultVisible,
+    defaultValue
+  } = props;
+  const entries = [];
+  entries.push({
+    id: id + '-height',
+    component: Height,
+    description,
+    isEdited: isEdited$7,
+    editField,
+    field,
+    defaultValue,
+    isDefaultVisible: field => {
+      if (isFunction(isDefaultVisible)) {
+        return isDefaultVisible(field);
+      }
+      return field.type === 'spacer';
+    }
+  });
+  return entries;
+}
+function Height(props) {
+  const {
+    description,
+    editField,
+    field,
+    id,
+    defaultValue = 60 // default value for spacer
+  } = props;
+  const debounce = useService('debounce');
+  const getValue = e => get(field, ['height'], defaultValue);
+  const setValue = (value, error) => {
+    if (error) {
+      return;
+    }
+    editField(field, ['height'], value);
+  };
+  return NumberFieldEntry({
+    debounce,
+    description,
+    label: 'Height',
+    element: field,
+    id,
+    getValue,
+    setValue,
+    validate: value => {
+      if (value === undefined || value === null) return;
+      if (value < 1) return 'Should be greater than zero.';
+      if (!Number.isInteger(value)) return 'Should be an integer.';
+    }
+  });
+}
+
+function IFrameHeightEntry(props) {
+  return [...HeightEntry({
+    ...props,
+    defaultValue: 300,
+    description: 'Height of the container in pixels.',
+    isDefaultVisible: field => field.type === 'iframe'
+  })];
+}
+
+const HTTPS_PATTERN = /^(https):\/\/*/i; // eslint-disable-line no-useless-escape
+
+function IFrameUrlEntry(props) {
+  const {
+    editField,
+    field
+  } = props;
+  const entries = [];
+  entries.push({
+    id: 'url',
+    component: Url,
+    editField: editField,
+    field: field,
+    isEdited: isEdited$6,
+    isDefaultVisible: field => field.type === 'iframe'
+  });
+  return entries;
+}
+function Url(props) {
+  const {
+    editField,
+    field,
+    id
+  } = props;
+  const debounce = useService('debounce');
+  const variables = useVariables().map(name => ({
+    name
+  }));
+  const path = ['url'];
+  const getValue = () => {
+    return get(field, path, '');
+  };
+  const setValue = value => {
+    return editField(field, path, value);
+  };
+  const validate = value => {
+    if (!value) {
+      return;
+    }
+    if (!HTTPS_PATTERN.test(value)) {
+      return 'For security reasons the URL must start with "https".';
+    }
+  };
+  return FeelTemplatingEntry({
+    debounce,
+    element: field,
+    feel: 'optional',
+    getValue,
+    id,
+    label: 'URL',
+    setValue,
+    singleLine: true,
+    tooltip: getTooltip(),
+    validate,
+    variables
+  });
+}
+
+// helper //////////////////////
+
+function getTooltip() {
+  return jsxs(Fragment$1, {
+    children: [jsx("p", {
+      children: "Enter a HTTPS URL to a source or populate it dynamically via a template or an expression (e.g., to pass a value from the variable)."
+    }), jsx("p", {
+      children: "Please make sure that the URL is safe as it might impose security risks."
+    }), jsxs("p", {
+      children: ["Not all external sources can be displayed in the iFrame. Read more about it in the ", jsx("a", {
+        target: "_blank",
+        href: "https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options",
+        children: "X-FRAME-OPTIONS documentation"
+      }), "."]
+    })]
+  });
+}
+
 function SourceEntry(props) {
   const {
     editField,
@@ -9843,52 +10029,6 @@ function Text(props) {
   });
 }
 
-function SpacerEntry(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const entries = [];
-  entries.push({
-    id: id + '-height',
-    component: SpacerHeight,
-    isEdited: isEdited$7,
-    editField,
-    field,
-    isDefaultVisible: field => field.type === 'spacer'
-  });
-  return entries;
-}
-function SpacerHeight(props) {
-  const {
-    editField,
-    field,
-    id
-  } = props;
-  const debounce = useService('debounce');
-  const getValue = e => get(field, ['height']);
-  const setValue = (value, error) => {
-    if (error) {
-      return;
-    }
-    editField(field, ['height'], value);
-  };
-  return NumberFieldEntry({
-    debounce,
-    label: 'Height',
-    element: field,
-    id,
-    getValue,
-    setValue,
-    validate: value => {
-      if (value === undefined || value === null) return;
-      if (value < 1) return 'Should be greater than zero.';
-      if (!Number.isInteger(value)) return 'Should be an integer.';
-    }
-  });
-}
-
 function NumberEntries(props) {
   const {
     editField,
@@ -10959,7 +11099,13 @@ function GeneralGroup(field, editField, getService) {
     field,
     editField,
     getService
-  }), ...SpacerEntry({
+  }), ...IFrameUrlEntry({
+    field,
+    editField
+  }), ...IFrameHeightEntry({
+    field,
+    editField
+  }), ...HeightEntry({
     field,
     editField
   }), ...NumberEntries({