@bpmn-io/properties-panel 0.9.0 → 0.10.0

package/lib/components/entries/List.js

@@ -1,204 +0,0 @@
-import { useEffect, useRef, useState } from 'preact/hooks';
-import { query as domQuery } from 'min-dom';
-import { isFunction } from 'min-dash';
-import { useKeyFactory, usePrevious } from '../../hooks';
-import classnames from 'classnames';
-import { ArrowIcon, CreateIcon, DeleteIcon } from '../icons';
-/**
- * Entry for handling lists represented as nested entries.
- *
- * @template Item
- * @param {object} props
- * @param {string} props.id
- * @param {*} props.element
- * @param {Function} props.onAdd
- * @param {(item: Item, index: number, isNew: boolean) => JSX.Element} props.renderItem
- * @param {string} [props.label='<empty>']
- * @param {Function} [props.onRemove]
- * @param {Item[]} [props.items]
- * @param {boolean} [props.open]
- * @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input
- * @param {(a: Item, b: Item) => -1 | 0 | 1} [props.compareFn]
- * @returns
- */
-
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { jsxs as _jsxs } from "preact/jsx-runtime";
-export default function List(props) {
-  const {
-    id,
-    element,
-    items = [],
-    renderItem,
-    label = '<empty>',
-    open: shouldOpen,
-    onAdd,
-    onRemove,
-    autoFocusEntry,
-    compareFn
-  } = props;
-  const [open, setOpen] = useState(!!shouldOpen);
-  const hasItems = !!items.length;
-
-  const toggleOpen = () => hasItems && setOpen(!open);
-
-  const opening = !usePrevious(open) && open;
-  const elementChanged = usePrevious(element) !== element;
-  const shouldReset = opening || elementChanged;
-  const sortedItems = useSortedItems(items, compareFn, shouldReset);
-  const newItems = useNewItems(items, elementChanged);
-  useEffect(() => {
-    if (open && !hasItems) {
-      setOpen(false);
-    }
-  }, [open, hasItems]);
-  /**
-   * @param {MouseEvent} event
-   */
-
-  function addItem(event) {
-    event.stopPropagation();
-    onAdd();
-
-    if (!open) {
-      setOpen(true);
-    }
-  }
-
-  return _jsxs("div", {
-    "data-entry-id": id,
-    class: classnames('bio-properties-panel-entry', 'bio-properties-panel-list-entry', hasItems ? '' : 'empty', open ? 'open' : ''),
-    children: [_jsxs("div", {
-      class: "bio-properties-panel-list-entry-header",
-      onClick: toggleOpen,
-      children: [_jsx("div", {
-        title: label,
-        class: classnames('bio-properties-panel-list-entry-header-title', open && 'open'),
-        children: label
-      }), _jsxs("div", {
-        class: "bio-properties-panel-list-entry-header-buttons",
-        children: [_jsxs("button", {
-          title: "Create new list item",
-          onClick: addItem,
-          class: "bio-properties-panel-add-entry",
-          children: [_jsx(CreateIcon, {}), !hasItems ? _jsx("span", {
-            class: "bio-properties-panel-add-entry-label",
-            children: "Create"
-          }) : null]
-        }), hasItems && _jsx("div", {
-          title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
-          class: "bio-properties-panel-list-badge",
-          children: items.length
-        }), hasItems && _jsx("button", {
-          title: "Toggle list item",
-          class: "bio-properties-panel-arrow",
-          children: _jsx(ArrowIcon, {
-            class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
-          })
-        })]
-      })]
-    }), hasItems && _jsx(ItemsList, {
-      autoFocusEntry: autoFocusEntry,
-      id: id,
-      open: open,
-      items: sortedItems,
-      newItems: newItems,
-      onRemove: onRemove,
-      renderItem: renderItem
-    })]
-  });
-}
-
-function ItemsList(props) {
-  const {
-    autoFocusEntry,
-    id,
-    items,
-    newItems,
-    open,
-    onRemove,
-    renderItem
-  } = props;
-  const getKey = useKeyFactory();
-  const newItem = newItems[0];
-  useEffect(() => {
-    if (newItem && autoFocusEntry) {
-      // (0) select the parent entry (containing all list items)
-      const entry = domQuery(`[data-entry-id="${id}"]`); // (1) select the first input or a custom element to be focussed
-
-      const selector = typeof autoFocusEntry === 'boolean' ? '.bio-properties-panel-input' : autoFocusEntry;
-      const focusableInput = domQuery(selector, entry); // (2) set focus
-
-      if (focusableInput) {
-        if (isFunction(focusableInput.select)) {
-          focusableInput.select();
-        } else if (isFunction(focusableInput.focus)) {
-          focusableInput.focus();
-        }
-      }
-    }
-  }, [newItem, autoFocusEntry, id]);
-  return _jsx("ol", {
-    class: classnames('bio-properties-panel-list-entry-items', open ? 'open' : ''),
-    children: items.map((item, index) => {
-      const key = getKey(item);
-      return _jsxs("li", {
-        class: "bio-properties-panel-list-entry-item",
-        children: [renderItem(item, index, item === newItem), onRemove && _jsx("button", {
-          type: "button",
-          title: "Delete item",
-          class: "bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry",
-          onClick: () => onRemove && onRemove(item),
-          children: _jsx(DeleteIcon, {})
-        })]
-      }, key);
-    })
-  });
-}
-/**
- * Place new items in the beginning of the list and sort the rest with provided function.
- *
- * @template Item
- * @param {Item[]} currentItems
- * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items
- * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook
- * @returns {Item[]}
- */
-
-
-function useSortedItems(currentItems, compareFn, shouldReset = false) {
-  const itemsRef = useRef(currentItems.slice()); // (1) Reset and optionally sort.
-
-  if (shouldReset) {
-    itemsRef.current = currentItems.slice();
-
-    if (compareFn) {
-      itemsRef.current.sort(compareFn);
-    }
-  } else {
-    const items = itemsRef.current; // (2) Add new item to the list.
-
-    for (const item of currentItems) {
-      if (!items.includes(item)) {
-        // Unshift or push depending on whether we have a compareFn
-        compareFn ? items.unshift(item) : items.push(item);
-      }
-    } // (3) Filter out removed items.
-
-
-    itemsRef.current = items.filter(item => currentItems.includes(item));
-  }
-
-  return itemsRef.current;
-}
-
-function useNewItems(items = [], shouldReset) {
-  const previousItems = usePrevious(items.slice()) || [];
-
-  if (shouldReset) {
-    return [];
-  }
-
-  return previousItems ? items.filter(item => !previousItems.includes(item)) : [];
-}
-//# sourceMappingURL=List.js.map

package/lib/components/entries/List.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/entries/List.js"],"names":["useEffect","useRef","useState","query","domQuery","isFunction","useKeyFactory","usePrevious","classnames","ArrowIcon","CreateIcon","DeleteIcon","List","props","id","element","items","renderItem","label","open","shouldOpen","onAdd","onRemove","autoFocusEntry","compareFn","setOpen","hasItems","length","toggleOpen","opening","elementChanged","shouldReset","sortedItems","useSortedItems","newItems","useNewItems","addItem","event","stopPropagation","ItemsList","getKey","newItem","entry","selector","focusableInput","select","focus","map","item","index","key","currentItems","itemsRef","slice","current","sort","includes","unshift","push","filter","previousItems"],"mappings":"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","sourcesContent":["import {\n  useEffect,\n  useRef,\n  useState\n} from 'preact/hooks';\n\nimport {\n  query as domQuery\n} from 'min-dom';\n\nimport { isFunction } from 'min-dash';\n\nimport {\n  useKeyFactory,\n  usePrevious\n} from '../../hooks';\n\nimport classnames from 'classnames';\n\nimport {\n  ArrowIcon,\n  CreateIcon,\n  DeleteIcon\n} from '../icons';\n\n/**\n * Entry for handling lists represented as nested entries.\n *\n * @template Item\n * @param {object} props\n * @param {string} props.id\n * @param {*} props.element\n * @param {Function} props.onAdd\n * @param {(item: Item, index: number, isNew: boolean) => JSX.Element} props.renderItem\n * @param {string} [props.label='<empty>']\n * @param {Function} [props.onRemove]\n * @param {Item[]} [props.items]\n * @param {boolean} [props.open]\n * @param {string|boolean} [props.autoFocusEntry] either a custom selector string or true to focus the first input\n * @param {(a: Item, b: Item) => -1 | 0 | 1} [props.compareFn]\n * @returns\n */\nexport default function List(props) {\n  const {\n    id,\n    element,\n    items = [],\n    renderItem,\n    label = '<empty>',\n    open: shouldOpen,\n    onAdd,\n    onRemove,\n    autoFocusEntry,\n    compareFn\n  } = props;\n\n  const [ open, setOpen ] = useState(!!shouldOpen);\n\n  const hasItems = !!items.length;\n  const toggleOpen = () => hasItems && setOpen(!open);\n\n  const opening = !usePrevious(open) && open;\n  const elementChanged = usePrevious(element) !== element;\n  const shouldReset = opening || elementChanged;\n  const sortedItems = useSortedItems(items, compareFn, shouldReset);\n\n  const newItems = useNewItems(items, elementChanged);\n\n  useEffect(() => {\n    if (open && !hasItems) {\n      setOpen(false);\n    }\n  }, [ open, hasItems ]);\n\n  /**\n   * @param {MouseEvent} event\n   */\n  function addItem(event) {\n    event.stopPropagation();\n    onAdd();\n\n    if (!open) {\n      setOpen(true);\n    }\n  }\n\n  return (\n    <div\n      data-entry-id={ id }\n      class={ classnames(\n        'bio-properties-panel-entry',\n        'bio-properties-panel-list-entry',\n        hasItems ? '' : 'empty',\n        open ? 'open' : ''\n      ) }>\n      <div class=\"bio-properties-panel-list-entry-header\" onClick={ toggleOpen }>\n        <div\n          title={ label }\n          class={ classnames(\n            'bio-properties-panel-list-entry-header-title',\n            open && 'open'\n          ) }>\n          { label }\n        </div>\n        <div\n          class=\"bio-properties-panel-list-entry-header-buttons\"\n        >\n          <button\n            title=\"Create new list item\"\n            onClick={ addItem }\n            class=\"bio-properties-panel-add-entry\"\n          >\n            <CreateIcon />\n            {\n              !hasItems ? (\n                <span class=\"bio-properties-panel-add-entry-label\">Create</span>\n              )\n                : null\n            }\n          </button>\n          {\n            hasItems && (\n              <div\n                title={ `List contains ${items.length} item${items.length != 1 ? 's' : ''}` }\n                class=\"bio-properties-panel-list-badge\"\n              >\n                { items.length }\n              </div>\n            )\n          }\n          {\n            hasItems && (\n              <button\n                title=\"Toggle list item\"\n                class=\"bio-properties-panel-arrow\"\n              >\n                <ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n              </button>\n            )\n          }\n        </div>\n      </div>\n      {\n        hasItems && (\n          <ItemsList\n            autoFocusEntry={ autoFocusEntry }\n            id={ id }\n            open={ open }\n            items={ sortedItems }\n            newItems={ newItems }\n            onRemove={ onRemove }\n            renderItem={ renderItem }\n          />\n        )\n      }\n    </div>\n  );\n}\n\nfunction ItemsList(props) {\n  const {\n    autoFocusEntry,\n    id,\n    items,\n    newItems,\n    open,\n    onRemove,\n    renderItem\n  } = props;\n\n  const getKey = useKeyFactory();\n\n  const newItem = newItems[0];\n\n  useEffect(() => {\n    if (newItem && autoFocusEntry) {\n\n      // (0) select the parent entry (containing all list items)\n      const entry = domQuery(`[data-entry-id=\"${id}\"]`);\n\n      // (1) select the first input or a custom element to be focussed\n      const selector = typeof(autoFocusEntry) === 'boolean' ?\n        '.bio-properties-panel-input' :\n        autoFocusEntry;\n      const focusableInput = domQuery(selector, entry);\n\n      // (2) set focus\n      if (focusableInput) {\n\n        if (isFunction(focusableInput.select)) {\n          focusableInput.select();\n        } else if (isFunction(focusableInput.focus)) {\n          focusableInput.focus();\n        }\n\n      }\n    }\n  }, [ newItem, autoFocusEntry, id ]);\n\n  return (\n    <ol class={ classnames(\n      'bio-properties-panel-list-entry-items',\n      open ? 'open' : ''\n    ) }>\n      {\n        items.map((item, index) => {\n          const key = getKey(item);\n\n          return (<li class=\"bio-properties-panel-list-entry-item\" key={ key }>\n            { renderItem(item, index, item === newItem) }\n            {\n              onRemove && (\n                <button\n                  type=\"button\"\n                  title=\"Delete item\"\n                  class=\"bio-properties-panel-remove-entry bio-properties-panel-remove-list-entry\"\n                  onClick={ () => onRemove && onRemove(item) }\n                ><DeleteIcon /></button>\n              )\n            }\n          </li>);\n        })\n      }\n    </ol>);\n}\n\n/**\n * Place new items in the beginning of the list and sort the rest with provided function.\n *\n * @template Item\n * @param {Item[]} currentItems\n * @param {(a: Item, b: Item) => 0 | 1 | -1} [compareFn] function used to sort items\n * @param {boolean} [shouldReset=false] set to `true` to reset state of the hook\n * @returns {Item[]}\n */\nfunction useSortedItems(currentItems, compareFn, shouldReset = false) {\n  const itemsRef = useRef(currentItems.slice());\n\n  // (1) Reset and optionally sort.\n  if (shouldReset) {\n    itemsRef.current = currentItems.slice();\n\n    if (compareFn) {\n      itemsRef.current.sort(compareFn);\n    }\n  } else {\n    const items = itemsRef.current;\n\n    // (2) Add new item to the list.\n    for (const item of currentItems) {\n      if (!items.includes(item)) {\n\n        // Unshift or push depending on whether we have a compareFn\n        compareFn ? items.unshift(item) : items.push(item);\n      }\n    }\n\n    // (3) Filter out removed items.\n    itemsRef.current = items.filter(item => currentItems.includes(item));\n  }\n\n  return itemsRef.current;\n}\n\nfunction useNewItems(items = [], shouldReset) {\n  const previousItems = usePrevious(items.slice()) || [];\n\n  if (shouldReset) {\n    return [];\n  }\n\n  return previousItems ? items.filter(item => !previousItems.includes(item)) : [];\n}\n"],"file":"List.js"}

package/lib/components/entries/NumberField.js

@@ -1,110 +0,0 @@
-import { useMemo } from 'preact/hooks';
-import Description from './Description';
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { jsxs as _jsxs } from "preact/jsx-runtime";
-
-function NumberField(props) {
-  const {
-    debounce,
-    disabled,
-    id,
-    label,
-    max,
-    min,
-    onInput,
-    step,
-    value = ''
-  } = props;
-  const handleInput = useMemo(() => {
-    return debounce(event => {
-      const {
-        validity,
-        value
-      } = event.target;
-
-      if (validity.valid) {
-        onInput(value ? parseFloat(value) : undefined);
-      }
-    });
-  }, [onInput, debounce]);
-  return _jsxs("div", {
-    class: "bio-properties-panel-numberfield",
-    children: [_jsx("label", {
-      for: prefixId(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), _jsx("input", {
-      id: prefixId(id),
-      type: "number",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      max: max,
-      min: min,
-      onInput: handleInput,
-      step: step,
-      value: value
-    })]
-  });
-}
-/**
- * @param {Object} props
- * @param {Boolean} props.debounce
- * @param {String} props.description
- * @param {Boolean} props.disabled
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {String} props.label
- * @param {String} props.max
- * @param {String} props.min
- * @param {Function} props.setValue
- * @param {String} props.step
- */
-
-
-export default function NumberFieldEntry(props) {
-  const {
-    debounce,
-    description,
-    disabled,
-    element,
-    getValue,
-    id,
-    label,
-    max,
-    min,
-    setValue,
-    step
-  } = props;
-  const value = getValue(element);
-  return _jsxs("div", {
-    class: "bio-properties-panel-entry",
-    "data-entry-id": id,
-    children: [_jsx(NumberField, {
-      debounce: debounce,
-      disabled: disabled,
-      id: id,
-      label: label,
-      onInput: setValue,
-      max: max,
-      min: min,
-      step: step,
-      value: value
-    }), _jsx(Description, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-export function isEdited(node) {
-  return node && !!node.value;
-} // helpers /////////////////
-
-function prefixId(id) {
-  return `bio-properties-panel-${id}`;
-}
-//# sourceMappingURL=NumberField.js.map

package/lib/components/entries/NumberField.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/entries/NumberField.js"],"names":["useMemo","Description","NumberField","props","debounce","disabled","id","label","max","min","onInput","step","value","handleInput","event","validity","target","valid","parseFloat","undefined","prefixId","NumberFieldEntry","description","element","getValue","setValue","isEdited","node"],"mappings":"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","sourcesContent":["import {\n  useMemo\n} from 'preact/hooks';\n\nimport Description from './Description';\n\nfunction NumberField(props) {\n\n  const {\n    debounce,\n    disabled,\n    id,\n    label,\n    max,\n    min,\n    onInput,\n    step,\n    value = ''\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(event => {\n\n      const {\n        validity,\n        value\n      } = event.target;\n\n      if (validity.valid) {\n        onInput(value ? parseFloat(value) : undefined);\n      }\n    });\n  }, [ onInput, debounce ]);\n\n  return (\n    <div class=\"bio-properties-panel-numberfield\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <input\n        id={ prefixId(id) }\n        type=\"number\"\n        name={ id }\n        spellCheck=\"false\"\n        autoComplete=\"off\"\n        disabled={ disabled }\n        class=\"bio-properties-panel-input\"\n        max={ max }\n        min={ min }\n        onInput={ handleInput }\n        step={ step }\n        value={ value } />\n    </div>\n  );\n}\n\n/**\n * @param {Object} props\n * @param {Boolean} props.debounce\n * @param {String} props.description\n * @param {Boolean} props.disabled\n * @param {Object} props.element\n * @param {Function} props.getValue\n * @param {String} props.id\n * @param {String} props.label\n * @param {String} props.max\n * @param {String} props.min\n * @param {Function} props.setValue\n * @param {String} props.step\n */\nexport default function NumberFieldEntry(props) {\n  const {\n    debounce,\n    description,\n    disabled,\n    element,\n    getValue,\n    id,\n    label,\n    max,\n    min,\n    setValue,\n    step\n  } = props;\n\n  const value = getValue(element);\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <NumberField\n        debounce={ debounce }\n        disabled={ disabled }\n        id={ id }\n        label={ label }\n        onInput={ setValue }\n        max={ max }\n        min={ min }\n        step={ step }\n        value={ value } />\n      <Description forId={ id } element={ element } value={ description } />\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"NumberField.js"}

package/lib/components/entries/Select.js

@@ -1,110 +0,0 @@
-import Description from './Description';
-/**
- * @typedef { { value: string, label: string, disabled: boolean } } Option
- */
-
-/**
- * Provides basic select input.
- *
- * @param {object} props
- * @param {string} props.id
- * @param {string} props.label
- * @param {Function} props.onChange
- * @param {Array<Option>} [props.options]
- * @param {string} props.value
- * @param {boolean} [props.disabled]
- */
-
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { jsxs as _jsxs } from "preact/jsx-runtime";
-
-function Select(props) {
-  const {
-    id,
-    label,
-    onChange,
-    options = [],
-    value,
-    disabled
-  } = props;
-
-  const handleChange = ({
-    target
-  }) => {
-    onChange(target.value);
-  };
-
-  return _jsxs("div", {
-    class: "bio-properties-panel-select",
-    children: [_jsx("label", {
-      for: prefixId(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), _jsx("select", {
-      id: prefixId(id),
-      name: id,
-      class: "bio-properties-panel-input",
-      onInput: handleChange,
-      value: value,
-      disabled: disabled,
-      children: options.map((option, idx) => {
-        return _jsx("option", {
-          value: option.value,
-          disabled: option.disabled,
-          children: option.label
-        }, idx);
-      })
-    })]
-  });
-}
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} [props.description]
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {Function} props.getOptions
- * @param {boolean} [props.disabled]
- */
-
-
-export default function SelectEntry(props) {
-  const {
-    element,
-    id,
-    description,
-    label,
-    getValue,
-    setValue,
-    getOptions,
-    disabled
-  } = props;
-  const value = getValue(element);
-  const options = getOptions(element);
-  return _jsxs("div", {
-    class: "bio-properties-panel-entry",
-    "data-entry-id": id,
-    children: [_jsx(Select, {
-      id: id,
-      label: label,
-      value: value,
-      onChange: setValue,
-      options: options,
-      disabled: disabled
-    }), _jsx(Description, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-export function isEdited(node) {
-  return node && !!node.value;
-} // helpers /////////////////
-
-function prefixId(id) {
-  return `bio-properties-panel-${id}`;
-}
-//# sourceMappingURL=Select.js.map

package/lib/components/entries/Select.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/entries/Select.js"],"names":["Description","Select","props","id","label","onChange","options","value","disabled","handleChange","target","prefixId","map","option","idx","SelectEntry","element","description","getValue","setValue","getOptions","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;;;AACA,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AACrB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,OAAO,GAAG,EAJN;AAKJC,IAAAA,KALI;AAMJC,IAAAA;AANI,MAOFN,KAPJ;;AASA,QAAMO,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCL,IAAAA,QAAQ,CAACK,MAAM,CAACH,KAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,6BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGI,QAAQ,CAACR,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGO,QAAQ,CAACR,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,KAAK,EAAC,4BAHR;AAIE,MAAA,OAAO,EAAGM,YAJZ;AAKE,MAAA,KAAK,EAAGF,KALV;AAME,MAAA,QAAQ,EAAGC,QANb;AAAA,gBASIF,OAAO,CAACM,GAAR,CAAY,CAACC,MAAD,EAASC,GAAT,KAAiB;AAC3B,eACE;AAEE,UAAA,KAAK,EAAGD,MAAM,CAACN,KAFjB;AAGE,UAAA,QAAQ,EAAGM,MAAM,CAACL,QAHpB;AAAA,oBAIIK,MAAM,CAACT;AAJX,WACQU,GADR,CADF;AAQD,OATD;AATJ,MAFF;AAAA,IADF;AA0BD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,WAAT,CAAqBb,KAArB,EAA4B;AACzC,QAAM;AACJc,IAAAA,OADI;AAEJb,IAAAA,EAFI;AAGJc,IAAAA,WAHI;AAIJb,IAAAA,KAJI;AAKJc,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJC,IAAAA,UAPI;AAQJZ,IAAAA;AARI,MASFN,KATJ;AAWA,QAAMK,KAAK,GAAGW,QAAQ,CAACF,OAAD,CAAtB;AACA,QAAMV,OAAO,GAAGc,UAAU,CAACJ,OAAD,CAA1B;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBb,EAAxD;AAAA,eACE,KAAC,MAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGG,KAHV;AAIE,MAAA,QAAQ,EAAGY,QAJb;AAKE,MAAA,OAAO,EAAGb,OALZ;AAME,MAAA,QAAQ,EAAGE;AANb,MADF,EAQE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGL,EAArB;AAA0B,MAAA,OAAO,EAAGa,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MARF;AAAA,IADF;AAYD;AAED,OAAO,SAASI,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACf,KAAtB;AACD,C,CAED;;AAEA,SAASI,QAAT,CAAkBR,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\n/**\n * @typedef { { value: string, label: string, disabled: boolean } } Option\n */\n\n/**\n * Provides basic select input.\n *\n * @param {object} props\n * @param {string} props.id\n * @param {string} props.label\n * @param {Function} props.onChange\n * @param {Array<Option>} [props.options]\n * @param {string} props.value\n * @param {boolean} [props.disabled]\n */\nfunction Select(props) {\n  const {\n    id,\n    label,\n    onChange,\n    options = [],\n    value,\n    disabled\n  } = props;\n\n  const handleChange = ({ target }) => {\n    onChange(target.value);\n  };\n\n  return (\n    <div class=\"bio-properties-panel-select\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <select\n        id={ prefixId(id) }\n        name={ id }\n        class=\"bio-properties-panel-input\"\n        onInput={ handleChange }\n        value={ value }\n        disabled={ disabled }\n      >\n        {\n          options.map((option, idx) => {\n            return (\n              <option\n                key={ idx }\n                value={ option.value }\n                disabled={ option.disabled }>\n                { option.label }\n              </option>\n            );\n          })\n        }\n      </select>\n    </div>\n  );\n}\n\n/**\n * @param {object} props\n * @param {object} props.element\n * @param {string} props.id\n * @param {string} [props.description]\n * @param {string} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {Function} props.getOptions\n * @param {boolean} [props.disabled]\n */\nexport default function SelectEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    label,\n    getValue,\n    setValue,\n    getOptions,\n    disabled\n  } = props;\n\n  const value = getValue(element);\n  const options = getOptions(element);\n\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <Select\n        id={ id }\n        label={ label }\n        value={ value }\n        onChange={ setValue }\n        options={ options }\n        disabled={ disabled } />\n      <Description forId={ id } element={ element } value={ description } />\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"Select.js"}

package/lib/components/entries/Simple.js

@@ -1,56 +0,0 @@
-import { useMemo } from 'preact/hooks';
-/**
- * @param {Object} props
- * @param {Function} props.debounce
- * @param {Boolean} [props.disabled]
- * @param {Object} props.element
- * @param {Function} props.getValue
- * @param {String} props.id
- * @param {Function} [props.onBlur]
- * @param {Function} [props.onFocus]
- * @param {Function} props.setValue
- */
-
-import { jsx as _jsx } from "preact/jsx-runtime";
-export default function Simple(props) {
-  const {
-    debounce,
-    disabled,
-    element,
-    getValue,
-    id,
-    onBlur,
-    onFocus,
-    setValue
-  } = props;
-  const handleInput = useMemo(() => {
-    return debounce(({
-      target
-    }) => setValue(target.value.length ? target.value : undefined));
-  }, [setValue, debounce]);
-  const value = getValue(element);
-  return _jsx("div", {
-    class: "bio-properties-panel-simple",
-    children: _jsx("input", {
-      id: prefixId(id),
-      type: "text",
-      name: id,
-      spellCheck: "false",
-      autoComplete: "off",
-      disabled: disabled,
-      class: "bio-properties-panel-input",
-      onInput: handleInput,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      value: value || ''
-    })
-  });
-}
-export function isEdited(node) {
-  return node && !!node.value;
-} // helpers /////////////////
-
-function prefixId(id) {
-  return `bio-properties-panel-${id}`;
-}
-//# sourceMappingURL=Simple.js.map

package/lib/components/entries/Simple.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/entries/Simple.js"],"names":["useMemo","Simple","props","debounce","disabled","element","getValue","id","onBlur","onFocus","setValue","handleInput","target","value","length","undefined","prefixId","isEdited","node"],"mappings":"AAAA,SACEA,OADF,QAEO,cAFP;AAIA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,MAAT,CAAgBC,KAAhB,EAAuB;AACpC,QAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA,QAFI;AAGJC,IAAAA,OAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,EALI;AAMJC,IAAAA,MANI;AAOJC,IAAAA,OAPI;AAQJC,IAAAA;AARI,MASFR,KATJ;AAWA,QAAMS,WAAW,GAAGX,OAAO,CAAC,MAAM;AAChC,WAAOG,QAAQ,CAAC,CAAC;AAAES,MAAAA;AAAF,KAAD,KAAgBF,QAAQ,CAACE,MAAM,CAACC,KAAP,CAAaC,MAAb,GAAsBF,MAAM,CAACC,KAA7B,GAAqCE,SAAtC,CAAzB,CAAf;AACD,GAF0B,EAExB,CAAEL,QAAF,EAAYP,QAAZ,CAFwB,CAA3B;AAIA,QAAMU,KAAK,GAAGP,QAAQ,CAACD,OAAD,CAAtB;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,6BAAX;AAAA,cACE;AACE,MAAA,EAAE,EAAGW,QAAQ,CAACT,EAAD,CADf;AAEE,MAAA,IAAI,EAAC,MAFP;AAGE,MAAA,IAAI,EAAGA,EAHT;AAIE,MAAA,UAAU,EAAC,OAJb;AAKE,MAAA,YAAY,EAAC,KALf;AAME,MAAA,QAAQ,EAAGH,QANb;AAOE,MAAA,KAAK,EAAC,4BAPR;AAQE,MAAA,OAAO,EAAGO,WARZ;AASE,MAAA,OAAO,EAAGF,OATZ;AAUE,MAAA,MAAM,EAAGD,MAVX;AAWE,MAAA,KAAK,EAAGK,KAAK,IAAI;AAXnB;AADF,IADF;AAgBD;AAED,OAAO,SAASI,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACL,KAAtB;AACD,C,CAGD;;AAEA,SAASG,QAAT,CAAkBT,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import {\n  useMemo\n} from 'preact/hooks';\n\n/**\n * @param {Object} props\n * @param {Function} props.debounce\n * @param {Boolean} [props.disabled]\n * @param {Object} props.element\n * @param {Function} props.getValue\n * @param {String} props.id\n * @param {Function} [props.onBlur]\n * @param {Function} [props.onFocus]\n * @param {Function} props.setValue\n */\nexport default function Simple(props) {\n  const {\n    debounce,\n    disabled,\n    element,\n    getValue,\n    id,\n    onBlur,\n    onFocus,\n    setValue\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(({ target }) => setValue(target.value.length ? target.value : undefined));\n  }, [ setValue, debounce ]);\n\n  const value = getValue(element);\n\n  return (\n    <div class=\"bio-properties-panel-simple\">\n      <input\n        id={ prefixId(id) }\n        type=\"text\"\n        name={ id }\n        spellCheck=\"false\"\n        autoComplete=\"off\"\n        disabled={ disabled }\n        class=\"bio-properties-panel-input\"\n        onInput={ handleInput }\n        onFocus={ onFocus }\n        onBlur={ onBlur }\n        value={ value || '' } />\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"Simple.js"}

package/lib/components/entries/TextArea.js

@@ -1,98 +0,0 @@
-import Description from './Description';
-import { useMemo } from 'preact/hooks';
-import classnames from 'classnames';
-import { jsx as _jsx } from "preact/jsx-runtime";
-import { jsxs as _jsxs } from "preact/jsx-runtime";
-
-function TextArea(props) {
-  const {
-    id,
-    label,
-    rows = 2,
-    debounce,
-    onInput,
-    value = '',
-    disabled,
-    monospace
-  } = props;
-  const handleInput = useMemo(() => {
-    return debounce(({
-      target
-    }) => onInput(target.value.length ? target.value : undefined));
-  }, [onInput, debounce]);
-  return _jsxs("div", {
-    class: "bio-properties-panel-textarea",
-    children: [_jsx("label", {
-      for: prefixId(id),
-      class: "bio-properties-panel-label",
-      children: label
-    }), _jsx("textarea", {
-      id: prefixId(id),
-      name: id,
-      spellCheck: "false",
-      class: classnames('bio-properties-panel-input', monospace ? 'bio-properties-panel-input-monospace' : ''),
-      onInput: handleInput,
-      onFocus: props.onFocus,
-      onBlur: props.onBlur,
-      rows: rows,
-      value: value,
-      disabled: disabled
-    })]
-  });
-}
-/**
- * @param {object} props
- * @param {object} props.element
- * @param {string} props.id
- * @param {string} props.description
- * @param {boolean} props.debounce
- * @param {string} props.label
- * @param {Function} props.getValue
- * @param {Function} props.setValue
- * @param {number} props.rows
- * @param {boolean} props.monospace
- * @param {boolean} [props.disabled]
- */
-
-
-export default function TextAreaEntry(props) {
-  const {
-    element,
-    id,
-    description,
-    debounce,
-    label,
-    getValue,
-    setValue,
-    rows,
-    monospace,
-    disabled
-  } = props;
-  const value = getValue(element);
-  return _jsxs("div", {
-    class: "bio-properties-panel-entry",
-    "data-entry-id": id,
-    children: [_jsx(TextArea, {
-      id: id,
-      label: label,
-      value: value,
-      onInput: setValue,
-      rows: rows,
-      debounce: debounce,
-      monospace: monospace,
-      disabled: disabled
-    }), _jsx(Description, {
-      forId: id,
-      element: element,
-      value: description
-    })]
-  });
-}
-export function isEdited(node) {
-  return node && !!node.value;
-} // helpers /////////////////
-
-function prefixId(id) {
-  return `bio-properties-panel-${id}`;
-}
-//# sourceMappingURL=TextArea.js.map

package/lib/components/entries/TextArea.js.map

@@ -1 +0,0 @@
-{"version":3,"sources":["../../../src/components/entries/TextArea.js"],"names":["Description","useMemo","classnames","TextArea","props","id","label","rows","debounce","onInput","value","disabled","monospace","handleInput","target","length","undefined","prefixId","onFocus","onBlur","TextAreaEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;AAEA,SACEC,OADF,QAEO,cAFP;AAIA,OAAOC,UAAP,MAAuB,YAAvB;;;;AAEA,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AAEvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,IAAI,GAAG,CAHH;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,OALI;AAMJC,IAAAA,KAAK,GAAG,EANJ;AAOJC,IAAAA,QAPI;AAQJC,IAAAA;AARI,MASFR,KATJ;AAWA,QAAMS,WAAW,GAAGZ,OAAO,CAAC,MAAM;AAChC,WAAOO,QAAQ,CAAC,CAAC;AAAEM,MAAAA;AAAF,KAAD,KAAgBL,OAAO,CAACK,MAAM,CAACJ,KAAP,CAAaK,MAAb,GAAsBD,MAAM,CAACJ,KAA7B,GAAqCM,SAAtC,CAAxB,CAAf;AACD,GAF0B,EAExB,CAAEP,OAAF,EAAWD,QAAX,CAFwB,CAA3B;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AAAO,MAAA,GAAG,EAAGS,QAAQ,CAACZ,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MADF,EAEE;AACE,MAAA,EAAE,EAAGW,QAAQ,CAACZ,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,UAAU,EAAC,OAHb;AAIE,MAAA,KAAK,EAAGH,UAAU,CAChB,4BADgB,EAEhBU,SAAS,GAAG,sCAAH,GAA4C,EAFrC,CAJpB;AAQE,MAAA,OAAO,EAAGC,WARZ;AASE,MAAA,OAAO,EAAGT,KAAK,CAACc,OATlB;AAUE,MAAA,MAAM,EAAGd,KAAK,CAACe,MAVjB;AAWE,MAAA,IAAI,EAAGZ,IAXT;AAYE,MAAA,KAAK,EAAGG,KAZV;AAaE,MAAA,QAAQ,EAAGC;AAbb,MAFF;AAAA,IADF;AAmBD;AAED;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASS,aAAT,CAAuBhB,KAAvB,EAA8B;AAC3C,QAAM;AACJiB,IAAAA,OADI;AAEJhB,IAAAA,EAFI;AAGJiB,IAAAA,WAHI;AAIJd,IAAAA,QAJI;AAKJF,IAAAA,KALI;AAMJiB,IAAAA,QANI;AAOJC,IAAAA,QAPI;AAQJjB,IAAAA,IARI;AASJK,IAAAA,SATI;AAUJD,IAAAA;AAVI,MAWFP,KAXJ;AAaA,QAAMM,KAAK,GAAGa,QAAQ,CAACF,OAAD,CAAtB;AACA,SACE;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgBhB,EAAxD;AAAA,eACE,KAAC,QAAD;AACE,MAAA,EAAE,EAAGA,EADP;AAEE,MAAA,KAAK,EAAGC,KAFV;AAGE,MAAA,KAAK,EAAGI,KAHV;AAIE,MAAA,OAAO,EAAGc,QAJZ;AAKE,MAAA,IAAI,EAAGjB,IALT;AAME,MAAA,QAAQ,EAAGC,QANb;AAOE,MAAA,SAAS,EAAGI,SAPd;AAQE,MAAA,QAAQ,EAAGD;AARb,MADF,EAUE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGN,EAArB;AAA0B,MAAA,OAAO,EAAGgB,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAVF;AAAA,IADF;AAcD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAAChB,KAAtB;AACD,C,CAGD;;AAEA,SAASO,QAAT,CAAkBZ,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\nimport {\n  useMemo\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nfunction TextArea(props) {\n\n  const {\n    id,\n    label,\n    rows = 2,\n    debounce,\n    onInput,\n    value = '',\n    disabled,\n    monospace\n  } = props;\n\n  const handleInput = useMemo(() => {\n    return debounce(({ target }) => onInput(target.value.length ? target.value : undefined));\n  }, [ onInput, debounce ]);\n\n  return (\n    <div class=\"bio-properties-panel-textarea\">\n      <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n      <textarea\n        id={ prefixId(id) }\n        name={ id }\n        spellCheck=\"false\"\n        class={ classnames(\n          'bio-properties-panel-input',\n          monospace ? 'bio-properties-panel-input-monospace' : '')\n        }\n        onInput={ handleInput }\n        onFocus={ props.onFocus }\n        onBlur={ props.onBlur }\n        rows={ rows }\n        value={ value }\n        disabled={ disabled } />\n    </div>\n  );\n}\n\n/**\n * @param {object} props\n * @param {object} props.element\n * @param {string} props.id\n * @param {string} props.description\n * @param {boolean} props.debounce\n * @param {string} props.label\n * @param {Function} props.getValue\n * @param {Function} props.setValue\n * @param {number} props.rows\n * @param {boolean} props.monospace\n * @param {boolean} [props.disabled]\n */\nexport default function TextAreaEntry(props) {\n  const {\n    element,\n    id,\n    description,\n    debounce,\n    label,\n    getValue,\n    setValue,\n    rows,\n    monospace,\n    disabled\n  } = props;\n\n  const value = getValue(element);\n  return (\n    <div class=\"bio-properties-panel-entry\" data-entry-id={ id }>\n      <TextArea\n        id={ id }\n        label={ label }\n        value={ value }\n        onInput={ setValue }\n        rows={ rows }\n        debounce={ debounce }\n        monospace={ monospace }\n        disabled={ disabled } />\n      <Description forId={ id } element={ element } value={ description } />\n    </div>\n  );\n}\n\nexport function isEdited(node) {\n  return node && !!node.value;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n  return `bio-properties-panel-${ id }`;\n}\n"],"file":"TextArea.js"}