@bpmn-io/properties-panel 0.9.0 → 0.10.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (180) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/index.esm.js +1607 -0
  3. package/dist/index.esm.js.map +1 -0
  4. package/dist/index.js +1648 -0
  5. package/dist/index.js.map +1 -0
  6. package/package.json +16 -7
  7. package/preact/LICENSE +21 -0
  8. package/preact/README.md +185 -0
  9. package/preact/compat/dist/compat.js +2 -0
  10. package/preact/compat/dist/compat.js.map +1 -0
  11. package/preact/compat/dist/compat.mjs +2 -0
  12. package/preact/compat/dist/compat.module.js +2 -0
  13. package/preact/compat/dist/compat.module.js.map +1 -0
  14. package/preact/compat/dist/compat.umd.js +2 -0
  15. package/preact/compat/dist/compat.umd.js.map +1 -0
  16. package/preact/compat/jsx-dev-runtime.js +1 -0
  17. package/preact/compat/jsx-dev-runtime.mjs +1 -0
  18. package/preact/compat/jsx-runtime.js +1 -0
  19. package/preact/compat/jsx-runtime.mjs +1 -0
  20. package/preact/compat/package.json +19 -0
  21. package/preact/compat/server.js +15 -0
  22. package/preact/compat/server.mjs +4 -0
  23. package/preact/compat/src/Children.js +21 -0
  24. package/preact/compat/src/PureComponent.js +15 -0
  25. package/preact/compat/src/forwardRef.js +51 -0
  26. package/preact/compat/src/index.d.ts +140 -0
  27. package/preact/compat/src/index.js +175 -0
  28. package/preact/compat/src/internal.d.ts +47 -0
  29. package/preact/compat/src/memo.js +34 -0
  30. package/preact/compat/src/portals.js +80 -0
  31. package/preact/compat/src/render.js +219 -0
  32. package/preact/compat/src/scheduler.js +24 -0
  33. package/preact/compat/src/suspense-list.d.ts +14 -0
  34. package/preact/compat/src/suspense-list.js +126 -0
  35. package/preact/compat/src/suspense.d.ts +15 -0
  36. package/preact/compat/src/suspense.js +270 -0
  37. package/preact/compat/src/util.js +28 -0
  38. package/preact/compat/test-utils.js +1 -0
  39. package/preact/debug/dist/debug.js +2 -0
  40. package/preact/debug/dist/debug.js.map +1 -0
  41. package/preact/debug/dist/debug.mjs +2 -0
  42. package/preact/debug/dist/debug.module.js +2 -0
  43. package/preact/debug/dist/debug.module.js.map +1 -0
  44. package/preact/debug/dist/debug.umd.js +2 -0
  45. package/preact/debug/dist/debug.umd.js.map +1 -0
  46. package/preact/debug/package.json +18 -0
  47. package/preact/debug/src/check-props.js +54 -0
  48. package/preact/debug/src/component-stack.js +146 -0
  49. package/preact/debug/src/constants.js +3 -0
  50. package/preact/debug/src/debug.js +442 -0
  51. package/preact/debug/src/index.js +6 -0
  52. package/preact/debug/src/internal.d.ts +82 -0
  53. package/preact/debug/src/util.js +11 -0
  54. package/preact/devtools/dist/devtools.js +2 -0
  55. package/preact/devtools/dist/devtools.js.map +1 -0
  56. package/preact/devtools/dist/devtools.mjs +2 -0
  57. package/preact/devtools/dist/devtools.module.js +2 -0
  58. package/preact/devtools/dist/devtools.module.js.map +1 -0
  59. package/preact/devtools/dist/devtools.umd.js +2 -0
  60. package/preact/devtools/dist/devtools.umd.js.map +1 -0
  61. package/preact/devtools/package.json +16 -0
  62. package/preact/devtools/src/devtools.js +10 -0
  63. package/preact/devtools/src/index.d.ts +8 -0
  64. package/preact/devtools/src/index.js +15 -0
  65. package/preact/dist/preact.js +2 -0
  66. package/preact/dist/preact.js.map +1 -0
  67. package/preact/dist/preact.min.js +2 -0
  68. package/preact/dist/preact.min.js.map +1 -0
  69. package/preact/dist/preact.mjs +2 -0
  70. package/preact/dist/preact.module.js +2 -0
  71. package/preact/dist/preact.module.js.map +1 -0
  72. package/preact/dist/preact.umd.js +2 -0
  73. package/preact/dist/preact.umd.js.map +1 -0
  74. package/preact/hooks/dist/hooks.js +2 -0
  75. package/preact/hooks/dist/hooks.js.map +1 -0
  76. package/preact/hooks/dist/hooks.mjs +2 -0
  77. package/preact/hooks/dist/hooks.module.js +2 -0
  78. package/preact/hooks/dist/hooks.module.js.map +1 -0
  79. package/preact/hooks/dist/hooks.umd.js +2 -0
  80. package/preact/hooks/dist/hooks.umd.js.map +1 -0
  81. package/preact/hooks/package.json +26 -0
  82. package/preact/hooks/src/index.d.ts +130 -0
  83. package/preact/hooks/src/index.js +386 -0
  84. package/preact/hooks/src/internal.d.ts +75 -0
  85. package/preact/jsx-runtime/dist/jsxRuntime.js +2 -0
  86. package/preact/jsx-runtime/dist/jsxRuntime.js.map +1 -0
  87. package/preact/jsx-runtime/dist/jsxRuntime.mjs +2 -0
  88. package/preact/jsx-runtime/dist/jsxRuntime.module.js +2 -0
  89. package/preact/jsx-runtime/dist/jsxRuntime.module.js.map +1 -0
  90. package/preact/jsx-runtime/dist/jsxRuntime.umd.js +2 -0
  91. package/preact/jsx-runtime/dist/jsxRuntime.umd.js.map +1 -0
  92. package/preact/jsx-runtime/package.json +19 -0
  93. package/preact/jsx-runtime/src/index.d.ts +50 -0
  94. package/preact/jsx-runtime/src/index.js +72 -0
  95. package/preact/package.json +268 -0
  96. package/preact/src/cjs.js +3 -0
  97. package/preact/src/clone-element.js +39 -0
  98. package/preact/src/component.js +225 -0
  99. package/preact/src/constants.js +3 -0
  100. package/preact/src/create-context.js +68 -0
  101. package/preact/src/create-element.js +100 -0
  102. package/preact/src/diff/catch-error.js +38 -0
  103. package/preact/src/diff/children.js +347 -0
  104. package/preact/src/diff/index.js +516 -0
  105. package/preact/src/diff/props.js +158 -0
  106. package/preact/src/index.d.ts +310 -0
  107. package/preact/src/index.js +13 -0
  108. package/preact/src/internal.d.ts +147 -0
  109. package/preact/src/jsx.d.ts +955 -0
  110. package/preact/src/options.js +17 -0
  111. package/preact/src/render.js +74 -0
  112. package/preact/src/util.js +23 -0
  113. package/preact/test-utils/dist/testUtils.js +2 -0
  114. package/preact/test-utils/dist/testUtils.js.map +1 -0
  115. package/preact/test-utils/dist/testUtils.mjs +2 -0
  116. package/preact/test-utils/dist/testUtils.module.js +2 -0
  117. package/preact/test-utils/dist/testUtils.module.js.map +1 -0
  118. package/preact/test-utils/dist/testUtils.umd.js +2 -0
  119. package/preact/test-utils/dist/testUtils.umd.js.map +1 -0
  120. package/preact/test-utils/package.json +19 -0
  121. package/preact/test-utils/src/index.d.ts +3 -0
  122. package/preact/test-utils/src/index.js +117 -0
  123. package/lib/PropertiesPanel.js +0 -166
  124. package/lib/PropertiesPanel.js.map +0 -1
  125. package/lib/components/DropdownButton.js +0 -109
  126. package/lib/components/DropdownButton.js.map +0 -1
  127. package/lib/components/Group.js +0 -75
  128. package/lib/components/Group.js.map +0 -1
  129. package/lib/components/Header.js +0 -49
  130. package/lib/components/Header.js.map +0 -1
  131. package/lib/components/HeaderButton.js +0 -16
  132. package/lib/components/HeaderButton.js.map +0 -1
  133. package/lib/components/ListGroup.js +0 -167
  134. package/lib/components/ListGroup.js.map +0 -1
  135. package/lib/components/ListItem.js +0 -37
  136. package/lib/components/ListItem.js.map +0 -1
  137. package/lib/components/entries/Checkbox.js +0 -83
  138. package/lib/components/entries/Checkbox.js.map +0 -1
  139. package/lib/components/entries/Collapsible.js +0 -48
  140. package/lib/components/entries/Collapsible.js.map +0 -1
  141. package/lib/components/entries/Description.js +0 -26
  142. package/lib/components/entries/Description.js.map +0 -1
  143. package/lib/components/entries/List.js +0 -204
  144. package/lib/components/entries/List.js.map +0 -1
  145. package/lib/components/entries/NumberField.js +0 -110
  146. package/lib/components/entries/NumberField.js.map +0 -1
  147. package/lib/components/entries/Select.js +0 -110
  148. package/lib/components/entries/Select.js.map +0 -1
  149. package/lib/components/entries/Simple.js +0 -56
  150. package/lib/components/entries/Simple.js.map +0 -1
  151. package/lib/components/entries/TextArea.js +0 -98
  152. package/lib/components/entries/TextArea.js.map +0 -1
  153. package/lib/components/entries/TextField.js +0 -123
  154. package/lib/components/entries/TextField.js.map +0 -1
  155. package/lib/components/entries/ToggleSwitch.js +0 -91
  156. package/lib/components/entries/ToggleSwitch.js.map +0 -1
  157. package/lib/components/icons/index.js +0 -51
  158. package/lib/components/icons/index.js.map +0 -1
  159. package/lib/context/DescriptionContext.js +0 -7
  160. package/lib/context/DescriptionContext.js.map +0 -1
  161. package/lib/context/LayoutContext.js +0 -9
  162. package/lib/context/LayoutContext.js.map +0 -1
  163. package/lib/context/index.js +0 -3
  164. package/lib/context/index.js.map +0 -1
  165. package/lib/features/debounce-input/debounceInput.js +0 -14
  166. package/lib/features/debounce-input/debounceInput.js.map +0 -1
  167. package/lib/features/debounce-input/index.js +0 -5
  168. package/lib/features/debounce-input/index.js.map +0 -1
  169. package/lib/hooks/index.js +0 -5
  170. package/lib/hooks/index.js.map +0 -1
  171. package/lib/hooks/useDescriptionContext.js +0 -25
  172. package/lib/hooks/useDescriptionContext.js.map +0 -1
  173. package/lib/hooks/useKeyFactory.js +0 -39
  174. package/lib/hooks/useKeyFactory.js.map +0 -1
  175. package/lib/hooks/useLayoutState.js +0 -36
  176. package/lib/hooks/useLayoutState.js.map +0 -1
  177. package/lib/hooks/usePrevious.js +0 -16
  178. package/lib/hooks/usePrevious.js.map +0 -1
  179. package/lib/index.js +0 -2
  180. package/lib/index.js.map +0 -1
@@ -1,75 +0,0 @@
1
- import { useEffect, useState } from 'preact/hooks';
2
- import classnames from 'classnames';
3
- import { query as domQuery } from 'min-dom';
4
- import { isFunction } from 'min-dash';
5
- import { useLayoutState } from '../hooks';
6
- import { ArrowIcon } from './icons';
7
- /**
8
- * @param {import('../PropertiesPanel').GroupDefinition} props
9
- */
10
-
11
- import { jsx as _jsx } from "preact/jsx-runtime";
12
- import { jsxs as _jsxs } from "preact/jsx-runtime";
13
- export default function Group(props) {
14
- const {
15
- id,
16
- entries = [],
17
- label
18
- } = props;
19
- const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
20
-
21
- const toggleOpen = () => setOpen(!open);
22
-
23
- const [edited, setEdited] = useState(false); // set edited state depending on all entries
24
-
25
- useEffect(() => {
26
- const hasOneEditedEntry = entries.find(entry => {
27
- const {
28
- id,
29
- isEdited
30
- } = entry;
31
- const entryNode = domQuery(`[data-entry-id="${id}"]`);
32
-
33
- if (!isFunction(isEdited) || !entryNode) {
34
- return false;
35
- }
36
-
37
- const inputNode = domQuery('.bio-properties-panel-input', entryNode);
38
- return isEdited(inputNode);
39
- });
40
- setEdited(hasOneEditedEntry);
41
- }, [entries]);
42
- return _jsxs("div", {
43
- class: "bio-properties-panel-group",
44
- "data-group-id": 'group-' + id,
45
- children: [_jsxs("div", {
46
- class: classnames('bio-properties-panel-group-header', edited ? '' : 'empty', open ? 'open' : ''),
47
- onClick: toggleOpen,
48
- children: [_jsx("div", {
49
- title: label,
50
- class: "bio-properties-panel-group-header-title",
51
- children: label
52
- }), _jsxs("div", {
53
- class: "bio-properties-panel-group-header-buttons",
54
- children: [edited && _jsx(DataMarker, {}), _jsx("button", {
55
- title: "Toggle section",
56
- class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
57
- children: _jsx(ArrowIcon, {
58
- class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
59
- })
60
- })]
61
- })]
62
- }), _jsx("div", {
63
- class: classnames('bio-properties-panel-group-entries', open ? 'open' : ''),
64
- children: entries.map(e => e.component)
65
- })]
66
- });
67
- }
68
-
69
- function DataMarker() {
70
- return _jsx("div", {
71
- title: "Section contains data",
72
- class: "bio-properties-panel-dot"
73
- });
74
- }
75
- //# sourceMappingURL=Group.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Group.js"],"names":["useEffect","useState","classnames","query","domQuery","isFunction","useLayoutState","ArrowIcon","Group","props","id","entries","label","open","setOpen","toggleOpen","edited","setEdited","hasOneEditedEntry","find","entry","isEdited","entryNode","inputNode","map","e","component","DataMarker"],"mappings":"AAAA,SACEA,SADF,EAEEC,QAFF,QAGO,cAHP;AAKA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,KAAK,IAAIC,QADX,QAEO,SAFP;AAIA,SACEC,UADF,QAEO,UAFP;AAIA,SACEC,cADF,QAEO,UAFP;AAIA,SAASC,SAAT,QAA0B,SAA1B;AAEA;AACA;AACA;;;;AACA,eAAe,SAASC,KAAT,CAAeC,KAAf,EAAsB;AACnC,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,OAAO,GAAG,EAFN;AAGJC,IAAAA;AAHI,MAIFH,KAJJ;AAMA,QAAM,CAAEI,IAAF,EAAQC,OAAR,IAAoBR,cAAc,CACtC,CAAE,QAAF,EAAYI,EAAZ,EAAgB,MAAhB,CADsC,EAEtC,KAFsC,CAAxC;;AAIA,QAAMK,UAAU,GAAG,MAAMD,OAAO,CAAC,CAACD,IAAF,CAAhC;;AAEA,QAAM,CAAEG,MAAF,EAAUC,SAAV,IAAwBhB,QAAQ,CAAC,KAAD,CAAtC,CAbmC,CAenC;;AACAD,EAAAA,SAAS,CAAC,MAAM;AACd,UAAMkB,iBAAiB,GAAGP,OAAO,CAACQ,IAAR,CAAaC,KAAK,IAAI;AAC9C,YAAM;AACJV,QAAAA,EADI;AAEJW,QAAAA;AAFI,UAGFD,KAHJ;AAKA,YAAME,SAAS,GAAGlB,QAAQ,CAAE,mBAAkBM,EAAG,IAAvB,CAA1B;;AAEA,UAAI,CAACL,UAAU,CAACgB,QAAD,CAAX,IAAyB,CAACC,SAA9B,EAAyC;AACvC,eAAO,KAAP;AACD;;AAED,YAAMC,SAAS,GAAGnB,QAAQ,CAAC,6BAAD,EAAgCkB,SAAhC,CAA1B;AAEA,aAAOD,QAAQ,CAACE,SAAD,CAAf;AACD,KAfyB,CAA1B;AAiBAN,IAAAA,SAAS,CAACC,iBAAD,CAAT;AACD,GAnBQ,EAmBN,CAAEP,OAAF,CAnBM,CAAT;AAqBA,SAAO;AAAK,IAAA,KAAK,EAAC,4BAAX;AAAwC,qBAAgB,WAAWD,EAAnE;AAAA,eACL;AAAK,MAAA,KAAK,EAAGR,UAAU,CACrB,mCADqB,EAErBc,MAAM,GAAG,EAAH,GAAQ,OAFO,EAGrBH,IAAI,GAAE,MAAF,GAAW,EAHM,CAAvB;AAII,MAAA,OAAO,EAAGE,UAJd;AAAA,iBAKE;AAAK,QAAA,KAAK,EAAGH,KAAb;AAAqB,QAAA,KAAK,EAAC,yCAA3B;AAAA,kBACIA;AADJ,QALF,EAQE;AAAK,QAAA,KAAK,EAAC,2CAAX;AAAA,mBAEII,MAAM,IAAI,KAAC,UAAD,KAFd,EAIE;AACE,UAAA,KAAK,EAAC,gBADR;AAEE,UAAA,KAAK,EAAC,qEAFR;AAAA,oBAIE,KAAC,SAAD;AAAW,YAAA,KAAK,EAAGH,IAAI,GAAG,iCAAH,GAAuC;AAA9D;AAJF,UAJF;AAAA,QARF;AAAA,MADK,EAqBL;AAAK,MAAA,KAAK,EAAGX,UAAU,CACrB,oCADqB,EAErBW,IAAI,GAAG,MAAH,GAAY,EAFK,CAAvB;AAAA,gBAKIF,OAAO,CAACa,GAAR,CAAYC,CAAC,IAAIA,CAAC,CAACC,SAAnB;AALJ,MArBK;AAAA,IAAP;AA8BD;;AAED,SAASC,UAAT,GAAsB;AACpB,SACE;AAAK,IAAA,KAAK,EAAC,uBAAX;AAAmC,IAAA,KAAK,EAAC;AAAzC,IADF;AAGD","sourcesContent":["import {\n useEffect,\n useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n query as domQuery\n} from 'min-dom';\n\nimport {\n isFunction\n} from 'min-dash';\n\nimport {\n useLayoutState\n} from '../hooks';\n\nimport { ArrowIcon } from './icons';\n\n/**\n * @param {import('../PropertiesPanel').GroupDefinition} props\n */\nexport default function Group(props) {\n const {\n id,\n entries = [],\n label\n } = props;\n\n const [ open, setOpen ] = useLayoutState(\n [ 'groups', id, 'open' ],\n false\n );\n const toggleOpen = () => setOpen(!open);\n\n const [ edited, setEdited ] = useState(false);\n\n // set edited state depending on all entries\n useEffect(() => {\n const hasOneEditedEntry = entries.find(entry => {\n const {\n id,\n isEdited\n } = entry;\n\n const entryNode = domQuery(`[data-entry-id=\"${id}\"]`);\n\n if (!isFunction(isEdited) || !entryNode) {\n return false;\n }\n\n const inputNode = domQuery('.bio-properties-panel-input', entryNode);\n\n return isEdited(inputNode);\n });\n\n setEdited(hasOneEditedEntry);\n }, [ entries ]);\n\n return <div class=\"bio-properties-panel-group\" data-group-id={ 'group-' + id }>\n <div class={ classnames(\n 'bio-properties-panel-group-header',\n edited ? '' : 'empty',\n open? 'open' : ''\n ) } onClick={ toggleOpen }>\n <div title={ label } class=\"bio-properties-panel-group-header-title\">\n { label }\n </div>\n <div class=\"bio-properties-panel-group-header-buttons\">\n {\n edited && <DataMarker />\n }\n <button\n title=\"Toggle section\"\n class=\"bio-properties-panel-group-header-button bio-properties-panel-arrow\"\n >\n <ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n </button>\n </div>\n </div>\n <div class={ classnames(\n 'bio-properties-panel-group-entries',\n open ? 'open' : ''\n ) }>\n {\n entries.map(e => e.component)\n }\n </div>\n </div>;\n}\n\nfunction DataMarker() {\n return (\n <div title=\"Section contains data\" class=\"bio-properties-panel-dot\"></div>\n );\n}"],"file":"Group.js"}
@@ -1,49 +0,0 @@
1
- import { jsx as _jsx } from "preact/jsx-runtime";
2
- import { jsxs as _jsxs } from "preact/jsx-runtime";
3
-
4
- /**
5
- * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider
6
- */
7
-
8
- /**
9
- * @param {Object} props
10
- * @param {Object} props.element,
11
- * @param {HeaderProvider} props.headerProvider
12
- */
13
- export default function Header(props) {
14
- const {
15
- element,
16
- headerProvider
17
- } = props;
18
- const {
19
- getElementLabel,
20
- getTypeLabel,
21
- getElementIcon
22
- } = headerProvider;
23
- const label = getElementLabel(element);
24
- const type = getTypeLabel(element);
25
- const ElementIcon = getElementIcon(element);
26
- return _jsxs("div", {
27
- class: "bio-properties-panel-header",
28
- children: [_jsx("div", {
29
- class: "bio-properties-panel-header-icon",
30
- children: ElementIcon && _jsx(ElementIcon, {
31
- width: "32",
32
- height: "32",
33
- viewBox: "0 0 32 32"
34
- })
35
- }), _jsxs("div", {
36
- class: "bio-properties-panel-header-labels",
37
- children: [_jsx("div", {
38
- title: type,
39
- class: "bio-properties-panel-header-type",
40
- children: type
41
- }), getElementLabel(element) ? _jsx("div", {
42
- title: label,
43
- class: "bio-properties-panel-header-label",
44
- children: label
45
- }) : null]
46
- })]
47
- });
48
- }
49
- //# sourceMappingURL=Header.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/Header.js"],"names":["Header","props","element","headerProvider","getElementLabel","getTypeLabel","getElementIcon","label","type","ElementIcon"],"mappings":";;;AAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA,eAAe,SAASA,MAAT,CAAgBC,KAAhB,EAAuB;AAEpC,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA;AAFI,MAGFF,KAHJ;AAKA,QAAM;AACJG,IAAAA,eADI;AAEJC,IAAAA,YAFI;AAGJC,IAAAA;AAHI,MAIFH,cAJJ;AAMA,QAAMI,KAAK,GAAGH,eAAe,CAACF,OAAD,CAA7B;AACA,QAAMM,IAAI,GAAGH,YAAY,CAACH,OAAD,CAAzB;AACA,QAAMO,WAAW,GAAGH,cAAc,CAACJ,OAAD,CAAlC;AAEA,SAAQ;AAAK,IAAA,KAAK,EAAC,6BAAX;AAAA,eACN;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBACIO,WAAW,IAAI,KAAC,WAAD;AAAa,QAAA,KAAK,EAAC,IAAnB;AAAwB,QAAA,MAAM,EAAC,IAA/B;AAAoC,QAAA,OAAO,EAAC;AAA5C;AADnB,MADM,EAIN;AAAK,MAAA,KAAK,EAAC,oCAAX;AAAA,iBACE;AAAK,QAAA,KAAK,EAAGD,IAAb;AAAoB,QAAA,KAAK,EAAC,kCAA1B;AAAA,kBAA+DA;AAA/D,QADF,EAEIJ,eAAe,CAACF,OAAD,CAAf,GACA;AAAK,QAAA,KAAK,EAAGK,KAAb;AAAqB,QAAA,KAAK,EAAC,mCAA3B;AAAA,kBAAiEA;AAAjE,QADA,GAEA,IAJJ;AAAA,MAJM;AAAA,IAAR;AAYD","sourcesContent":["/**\n * @typedef { { getElementLabel: Function, getTypeLabel: Function, getElementIcon: Function } } HeaderProvider\n */\n\n/**\n * @param {Object} props\n * @param {Object} props.element,\n * @param {HeaderProvider} props.headerProvider\n */\nexport default function Header(props) {\n\n const {\n element,\n headerProvider\n } = props;\n\n const {\n getElementLabel,\n getTypeLabel,\n getElementIcon\n } = headerProvider;\n\n const label = getElementLabel(element);\n const type = getTypeLabel(element);\n const ElementIcon = getElementIcon(element);\n\n return (<div class=\"bio-properties-panel-header\">\n <div class=\"bio-properties-panel-header-icon\">\n { ElementIcon && <ElementIcon width=\"32\" height=\"32\" viewBox=\"0 0 32 32\" /> }\n </div>\n <div class=\"bio-properties-panel-header-labels\">\n <div title={ type } class=\"bio-properties-panel-header-type\">{ type }</div>\n { getElementLabel(element) ?\n <div title={ label } class=\"bio-properties-panel-header-label\">{ label }</div> :\n null\n }\n </div>\n </div>);\n}"],"file":"Header.js"}
@@ -1,16 +0,0 @@
1
- import classnames from 'classnames';
2
- import { jsx as _jsx } from "preact/jsx-runtime";
3
- export function HeaderButton(props) {
4
- const {
5
- children = null,
6
- class: classname,
7
- onClick = () => {},
8
- ...otherProps
9
- } = props;
10
- return _jsx("button", { ...otherProps,
11
- onClick: onClick,
12
- class: classnames('bio-properties-panel-group-header-button', classname),
13
- children: children
14
- });
15
- }
16
- //# sourceMappingURL=HeaderButton.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/HeaderButton.js"],"names":["classnames","HeaderButton","props","children","class","classname","onClick","otherProps"],"mappings":"AAAA,OAAOA,UAAP,MAAuB,YAAvB;;AAEA,OAAO,SAASC,YAAT,CAAsBC,KAAtB,EAA6B;AAClC,QAAM;AACJC,IAAAA,QAAQ,GAAG,IADP;AAEJC,IAAAA,KAAK,EAAEC,SAFH;AAGJC,IAAAA,OAAO,GAAG,MAAM,CAAE,CAHd;AAIJ,OAAGC;AAJC,MAKFL,KALJ;AAOA,SAAO,oBACAK,UADA;AAEL,IAAA,OAAO,EAAGD,OAFL;AAGL,IAAA,KAAK,EAAGN,UAAU,CAAC,0CAAD,EAA6CK,SAA7C,CAHb;AAAA,cAIHF;AAJG,IAAP;AAMD","sourcesContent":["import classnames from 'classnames';\n\nexport function HeaderButton(props) {\n const {\n children = null,\n class: classname,\n onClick = () => {},\n ...otherProps\n } = props;\n\n return <button\n { ...otherProps }\n onClick={ onClick }\n class={ classnames('bio-properties-panel-group-header-button', classname) }>\n { children }\n </button>;\n}\n"],"file":"HeaderButton.js"}
@@ -1,167 +0,0 @@
1
- import { useEffect, useState } from 'preact/hooks';
2
- import classnames from 'classnames';
3
- import { find, sortBy } from 'min-dash';
4
- import { useLayoutState, usePrevious } from '../hooks';
5
- import ListItem from './ListItem';
6
- import { ArrowIcon, CreateIcon } from './icons';
7
- import { jsx as _jsx } from "preact/jsx-runtime";
8
- import { jsxs as _jsxs } from "preact/jsx-runtime";
9
-
10
- const noop = () => {};
11
- /**
12
- * @param {import('../PropertiesPanel').ListGroupDefinition} props
13
- */
14
-
15
-
16
- export default function ListGroup(props) {
17
- const {
18
- element,
19
- id,
20
- items,
21
- label,
22
- add,
23
- shouldSort = true,
24
- shouldOpen = true
25
- } = props;
26
- const [open, setOpen] = useLayoutState(['groups', id, 'open'], false);
27
- const [ordering, setOrdering] = useState([]);
28
- const [newItemAdded, setNewItemAdded] = useState(false);
29
- const prevItems = usePrevious(items);
30
- const prevElement = usePrevious(element);
31
- const elementChanged = element !== prevElement;
32
- const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen); // reset initial ordering when element changes (before first render)
33
-
34
- if (elementChanged) {
35
- setOrdering(createOrdering(shouldSort ? sortItems(items) : items));
36
- } // keep ordering in sync to items - and open changes
37
- // (0) set initial ordering from given items
38
-
39
-
40
- useEffect(() => {
41
- if (!prevItems || !shouldSort) {
42
- setOrdering(createOrdering(items));
43
- }
44
- }, [items, element]); // (1) items were added
45
-
46
- useEffect(() => {
47
- if (shouldHandleEffects && prevItems && items.length > prevItems.length) {
48
- let add = [];
49
- items.forEach(item => {
50
- if (!ordering.includes(item.id)) {
51
- add.push(item.id);
52
- }
53
- });
54
- let newOrdering = ordering; // open if not open and configured
55
-
56
- if (!open && shouldOpen) {
57
- toggleOpen(); // if I opened and I should sort, then sort items
58
-
59
- if (shouldSort) {
60
- newOrdering = createOrdering(sortItems(items));
61
- }
62
- } // add new items on top or bottom depending on sorting behavior
63
-
64
-
65
- newOrdering = newOrdering.filter(item => !add.includes(item));
66
-
67
- if (shouldSort) {
68
- newOrdering.unshift(...add);
69
- } else {
70
- newOrdering.push(...add);
71
- }
72
-
73
- setOrdering(newOrdering);
74
- setNewItemAdded(true);
75
- } else {
76
- setNewItemAdded(false);
77
- }
78
- }, [items, open, shouldHandleEffects]); // (2) sort items on open if shouldSort is set
79
-
80
- useEffect(() => {
81
- if (shouldSort && open && !newItemAdded) {
82
- setOrdering(createOrdering(sortItems(items)));
83
- }
84
- }, [open, shouldSort]); // (3) items were deleted
85
-
86
- useEffect(() => {
87
- if (shouldHandleEffects && prevItems && items.length < prevItems.length) {
88
- let keep = [];
89
- ordering.forEach(o => {
90
- if (getItem(items, o)) {
91
- keep.push(o);
92
- }
93
- });
94
- setOrdering(keep);
95
- }
96
- }, [items, shouldHandleEffects]);
97
-
98
- const toggleOpen = () => setOpen(!open);
99
-
100
- const hasItems = !!items.length;
101
- return _jsxs("div", {
102
- class: "bio-properties-panel-group",
103
- "data-group-id": 'group-' + id,
104
- children: [_jsxs("div", {
105
- class: classnames('bio-properties-panel-group-header', hasItems ? '' : 'empty', hasItems && open ? 'open' : ''),
106
- onClick: hasItems ? toggleOpen : noop,
107
- children: [_jsx("div", {
108
- title: label,
109
- class: "bio-properties-panel-group-header-title",
110
- children: label
111
- }), _jsxs("div", {
112
- class: "bio-properties-panel-group-header-buttons",
113
- children: [add ? _jsxs("button", {
114
- title: "Create new list item",
115
- class: "bio-properties-panel-group-header-button bio-properties-panel-add-entry",
116
- onClick: add,
117
- children: [_jsx(CreateIcon, {}), !hasItems ? _jsx("span", {
118
- class: "bio-properties-panel-add-entry-label",
119
- children: "Create"
120
- }) : null]
121
- }) : null, hasItems ? _jsx("div", {
122
- title: `List contains ${items.length} item${items.length != 1 ? 's' : ''}`,
123
- class: "bio-properties-panel-list-badge",
124
- children: items.length
125
- }) : null, hasItems ? _jsx("button", {
126
- title: "Toggle section",
127
- class: "bio-properties-panel-group-header-button bio-properties-panel-arrow",
128
- children: _jsx(ArrowIcon, {
129
- class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
130
- })
131
- }) : null]
132
- })]
133
- }), _jsx("div", {
134
- class: classnames('bio-properties-panel-list', open && hasItems ? 'open' : ''),
135
- children: ordering.map((o, index) => {
136
- const item = getItem(items, o);
137
-
138
- if (!item) {
139
- return;
140
- }
141
-
142
- return _jsx(ListItem, {
143
- // if item was added, open first or last item based on ordering
144
- autoOpen: newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1),
145
- ...item
146
- }, item.id);
147
- })
148
- })]
149
- });
150
- } // helpers ////////////////////
151
-
152
- /**
153
- * Sorts given items alphanumeric by label
154
- */
155
-
156
- function sortItems(items) {
157
- return sortBy(items, i => i.label.toLowerCase());
158
- }
159
-
160
- function getItem(items, id) {
161
- return find(items, i => i.id === id);
162
- }
163
-
164
- function createOrdering(items) {
165
- return items.map(i => i.id);
166
- }
167
- //# sourceMappingURL=ListGroup.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/ListGroup.js"],"names":["useEffect","useState","classnames","find","sortBy","useLayoutState","usePrevious","ListItem","ArrowIcon","CreateIcon","noop","ListGroup","props","element","id","items","label","add","shouldSort","shouldOpen","open","setOpen","ordering","setOrdering","newItemAdded","setNewItemAdded","prevItems","prevElement","elementChanged","shouldHandleEffects","createOrdering","sortItems","length","forEach","item","includes","push","newOrdering","toggleOpen","filter","unshift","keep","o","getItem","hasItems","map","index","i","toLowerCase"],"mappings":"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","sourcesContent":["import {\n useEffect,\n useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n find,\n sortBy\n} from 'min-dash';\n\nimport {\n useLayoutState,\n usePrevious\n} from '../hooks';\n\nimport ListItem from './ListItem';\n\nimport {\n ArrowIcon,\n CreateIcon\n} from './icons';\n\nconst noop = () => {};\n\n/**\n * @param {import('../PropertiesPanel').ListGroupDefinition} props\n */\nexport default function ListGroup(props) {\n const {\n element,\n id,\n items,\n label,\n add,\n shouldSort = true,\n shouldOpen = true\n } = props;\n\n\n const [ open, setOpen ] = useLayoutState(\n [ 'groups', id, 'open' ],\n false\n );\n\n const [ ordering, setOrdering ] = useState([]);\n const [ newItemAdded, setNewItemAdded ] = useState(false);\n\n const prevItems = usePrevious(items);\n const prevElement = usePrevious(element);\n\n const elementChanged = element !== prevElement;\n const shouldHandleEffects = !elementChanged && (shouldSort || shouldOpen);\n\n // reset initial ordering when element changes (before first render)\n if (elementChanged) {\n setOrdering(createOrdering(shouldSort ? sortItems(items) : items));\n }\n\n // keep ordering in sync to items - and open changes\n\n // (0) set initial ordering from given items\n useEffect(() => {\n if (!prevItems || !shouldSort) {\n setOrdering(createOrdering(items));\n }\n }, [ items, element ]);\n\n // (1) items were added\n useEffect(() => {\n if (shouldHandleEffects && prevItems && items.length > prevItems.length) {\n\n let add = [];\n\n items.forEach(item => {\n if (!ordering.includes(item.id)) {\n add.push(item.id);\n }\n });\n\n let newOrdering = ordering;\n\n // open if not open and configured\n if (!open && shouldOpen) {\n toggleOpen();\n\n // if I opened and I should sort, then sort items\n if (shouldSort) {\n newOrdering = createOrdering(sortItems(items));\n }\n }\n\n // add new items on top or bottom depending on sorting behavior\n newOrdering = newOrdering.filter(item => !add.includes(item));\n if (shouldSort) {\n newOrdering.unshift(...add);\n } else {\n newOrdering.push(...add);\n }\n\n setOrdering(newOrdering);\n setNewItemAdded(true);\n } else {\n setNewItemAdded(false);\n }\n }, [ items, open, shouldHandleEffects ]);\n\n // (2) sort items on open if shouldSort is set\n useEffect(() => {\n\n if (shouldSort && open && !newItemAdded) {\n setOrdering(createOrdering(sortItems(items)));\n }\n }, [ open, shouldSort ]);\n\n // (3) items were deleted\n useEffect(() => {\n if (shouldHandleEffects && prevItems && items.length < prevItems.length) {\n let keep = [];\n\n ordering.forEach(o => {\n if (getItem(items, o)) {\n keep.push(o);\n }\n });\n\n setOrdering(keep);\n }\n }, [ items, shouldHandleEffects ]);\n\n const toggleOpen = () => setOpen(!open);\n\n const hasItems = !!items.length;\n\n return <div class=\"bio-properties-panel-group\" data-group-id={ 'group-' + id }>\n <div\n class={ classnames(\n 'bio-properties-panel-group-header',\n hasItems ? '' : 'empty',\n (hasItems && open) ? 'open' : ''\n ) }\n onClick={ hasItems ? toggleOpen : noop }>\n <div\n title={ label }\n class=\"bio-properties-panel-group-header-title\"\n >\n { label }\n </div>\n <div class=\"bio-properties-panel-group-header-buttons\">\n {\n add\n ? (\n <button\n title=\"Create new list item\"\n class=\"bio-properties-panel-group-header-button bio-properties-panel-add-entry\"\n onClick={ add }\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 : null\n }\n {\n hasItems\n ? (\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 : null\n }\n {\n hasItems\n ? (\n <button\n title=\"Toggle section\"\n class=\"bio-properties-panel-group-header-button bio-properties-panel-arrow\"\n >\n <ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n </button>\n )\n : null\n }\n </div>\n </div>\n <div class={ classnames(\n 'bio-properties-panel-list',\n open && hasItems ? 'open' : ''\n ) }>\n {\n ordering.map((o, index) => {\n const item = getItem(items, o);\n\n if (!item) {\n return;\n }\n\n return (\n <ListItem\n key={ item.id }\n\n // if item was added, open first or last item based on ordering\n autoOpen={ newItemAdded && (shouldSort ? index === 0 : index === ordering.length - 1) }\n { ...item } />\n );\n })\n }\n </div>\n </div>;\n}\n\n\n// helpers ////////////////////\n\n/**\n * Sorts given items alphanumeric by label\n */\nfunction sortItems(items) {\n return sortBy(items, i => i.label.toLowerCase());\n}\n\nfunction getItem(items, id) {\n return find(items, i => i.id === id);\n}\n\nfunction createOrdering(items) {\n return items.map(i => i.id);\n}\n"],"file":"ListGroup.js"}
@@ -1,37 +0,0 @@
1
- import { useEffect } from 'preact/hooks';
2
- import { query as domQuery } from 'min-dom';
3
- import { isFunction } from 'min-dash';
4
- import CollapsibleEntry from './entries/Collapsible';
5
- /**
6
- * @param {import('../PropertiesPanel').ListItemDefinition} props
7
- */
8
-
9
- import { jsx as _jsx } from "preact/jsx-runtime";
10
- export default function ListItem(props) {
11
- const {
12
- autoOpen,
13
- autoFocusEntry
14
- } = props; // focus specified entry on auto open
15
-
16
- useEffect(() => {
17
- if (autoOpen && autoFocusEntry) {
18
- const entry = domQuery(`[data-entry-id="${autoFocusEntry}"]`);
19
- const focusableInput = domQuery('.bio-properties-panel-input', entry);
20
-
21
- if (focusableInput) {
22
- if (isFunction(focusableInput.select)) {
23
- focusableInput.select();
24
- } else if (isFunction(focusableInput.focus)) {
25
- focusableInput.focus();
26
- }
27
- }
28
- }
29
- }, [autoOpen, autoFocusEntry]);
30
- return _jsx("div", {
31
- class: "bio-properties-panel-list-item",
32
- children: _jsx(CollapsibleEntry, { ...props,
33
- open: autoOpen
34
- })
35
- });
36
- }
37
- //# sourceMappingURL=ListItem.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../src/components/ListItem.js"],"names":["useEffect","query","domQuery","isFunction","CollapsibleEntry","ListItem","props","autoOpen","autoFocusEntry","entry","focusableInput","select","focus"],"mappings":"AAAA,SACEA,SADF,QAEO,cAFP;AAIA,SACEC,KAAK,IAAIC,QADX,QAEO,SAFP;AAIA,SAASC,UAAT,QAA2B,UAA3B;AAEA,OAAOC,gBAAP,MAA6B,uBAA7B;AAEA;AACA;AACA;;;AACA,eAAe,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AACtC,QAAM;AACJC,IAAAA,QADI;AAEJC,IAAAA;AAFI,MAGFF,KAHJ,CADsC,CAMtC;;AACAN,EAAAA,SAAS,CAAC,MAAM;AACd,QAAIO,QAAQ,IAAIC,cAAhB,EAAgC;AAC9B,YAAMC,KAAK,GAAGP,QAAQ,CAAE,mBAAkBM,cAAe,IAAnC,CAAtB;AAEA,YAAME,cAAc,GAAGR,QAAQ,CAAC,6BAAD,EAAgCO,KAAhC,CAA/B;;AAEA,UAAIC,cAAJ,EAAoB;AAElB,YAAIP,UAAU,CAACO,cAAc,CAACC,MAAhB,CAAd,EAAuC;AACrCD,UAAAA,cAAc,CAACC,MAAf;AACD,SAFD,MAEO,IAAIR,UAAU,CAACO,cAAc,CAACE,KAAhB,CAAd,EAAsC;AAC3CF,UAAAA,cAAc,CAACE,KAAf;AACD;AAEF;AACF;AACF,GAhBQ,EAgBN,CAAEL,QAAF,EAAYC,cAAZ,CAhBM,CAAT;AAmBA,SACE;AAAK,IAAA,KAAK,EAAC,gCAAX;AAAA,cACE,KAAC,gBAAD,OAAuBF,KAAvB;AAA+B,MAAA,IAAI,EAAGC;AAAtC;AADF,IADF;AAMD","sourcesContent":["import {\n useEffect\n} from 'preact/hooks';\n\nimport {\n query as domQuery\n} from 'min-dom';\n\nimport { isFunction } from 'min-dash';\n\nimport CollapsibleEntry from './entries/Collapsible';\n\n/**\n * @param {import('../PropertiesPanel').ListItemDefinition} props\n */\nexport default function ListItem(props) {\n const {\n autoOpen,\n autoFocusEntry\n } = props;\n\n // focus specified entry on auto open\n useEffect(() => {\n if (autoOpen && autoFocusEntry) {\n const entry = domQuery(`[data-entry-id=\"${autoFocusEntry}\"]`);\n\n const focusableInput = domQuery('.bio-properties-panel-input', entry);\n\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 }, [ autoOpen, autoFocusEntry ]);\n\n\n return (\n <div class=\"bio-properties-panel-list-item\">\n <CollapsibleEntry { ...props } open={ autoOpen } />\n </div>\n );\n\n}\n"],"file":"ListItem.js"}
@@ -1,83 +0,0 @@
1
- import Description from './Description';
2
- import { jsx as _jsx } from "preact/jsx-runtime";
3
- import { jsxs as _jsxs } from "preact/jsx-runtime";
4
-
5
- function Checkbox(props) {
6
- const {
7
- id,
8
- label,
9
- onChange,
10
- disabled,
11
- value = false
12
- } = props;
13
-
14
- const handleChange = ({
15
- target
16
- }) => {
17
- onChange(target.checked);
18
- };
19
-
20
- return _jsxs("div", {
21
- class: "bio-properties-panel-checkbox",
22
- children: [_jsx("input", {
23
- id: prefixId(id),
24
- name: id,
25
- type: "checkbox",
26
- class: "bio-properties-panel-input",
27
- onChange: handleChange,
28
- checked: value,
29
- disabled: disabled
30
- }), _jsx("label", {
31
- for: prefixId(id),
32
- class: "bio-properties-panel-label",
33
- children: label
34
- })]
35
- });
36
- }
37
- /**
38
- * @param {Object} props
39
- * @param {Object} props.element
40
- * @param {String} props.id
41
- * @param {String} props.description
42
- * @param {String} props.label
43
- * @param {Function} props.getValue
44
- * @param {Function} props.setValue
45
- * @param {boolean} [props.disabled]
46
- */
47
-
48
-
49
- export default function CheckboxEntry(props) {
50
- const {
51
- element,
52
- id,
53
- description,
54
- label,
55
- getValue,
56
- setValue,
57
- disabled
58
- } = props;
59
- const value = getValue(element);
60
- return _jsxs("div", {
61
- class: "bio-properties-panel-entry bio-properties-panel-checkbox-entry",
62
- "data-entry-id": id,
63
- children: [_jsx(Checkbox, {
64
- id: id,
65
- label: label,
66
- onChange: setValue,
67
- value: value,
68
- disabled: disabled
69
- }), _jsx(Description, {
70
- forId: id,
71
- element: element,
72
- value: description
73
- })]
74
- });
75
- }
76
- export function isEdited(node) {
77
- return node && !!node.checked;
78
- } // helpers /////////////////
79
-
80
- function prefixId(id) {
81
- return `bio-properties-panel-${id}`;
82
- }
83
- //# sourceMappingURL=Checkbox.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/entries/Checkbox.js"],"names":["Description","Checkbox","props","id","label","onChange","disabled","value","handleChange","target","checked","prefixId","CheckboxEntry","element","description","getValue","setValue","isEdited","node"],"mappings":"AAAA,OAAOA,WAAP,MAAwB,eAAxB;;;;AAEA,SAASC,QAAT,CAAkBC,KAAlB,EAAyB;AACvB,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA,QAHI;AAIJC,IAAAA,QAJI;AAKJC,IAAAA,KAAK,GAAG;AALJ,MAMFL,KANJ;;AAQA,QAAMM,YAAY,GAAG,CAAC;AAAEC,IAAAA;AAAF,GAAD,KAAgB;AACnCJ,IAAAA,QAAQ,CAACI,MAAM,CAACC,OAAR,CAAR;AACD,GAFD;;AAIA,SACE;AAAK,IAAA,KAAK,EAAC,+BAAX;AAAA,eACE;AACE,MAAA,EAAE,EAAGC,QAAQ,CAACR,EAAD,CADf;AAEE,MAAA,IAAI,EAAGA,EAFT;AAGE,MAAA,IAAI,EAAC,UAHP;AAIE,MAAA,KAAK,EAAC,4BAJR;AAKE,MAAA,QAAQ,EAAGK,YALb;AAME,MAAA,OAAO,EAAGD,KANZ;AAOE,MAAA,QAAQ,EAAGD;AAPb,MADF,EASE;AAAO,MAAA,GAAG,EAAGK,QAAQ,CAACR,EAAD,CAArB;AAA4B,MAAA,KAAK,EAAC,4BAAlC;AAAA,gBAAiEC;AAAjE,MATF;AAAA,IADF;AAaD;AAGD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASQ,aAAT,CAAuBV,KAAvB,EAA8B;AAC3C,QAAM;AACJW,IAAAA,OADI;AAEJV,IAAAA,EAFI;AAGJW,IAAAA,WAHI;AAIJV,IAAAA,KAJI;AAKJW,IAAAA,QALI;AAMJC,IAAAA,QANI;AAOJV,IAAAA;AAPI,MAQFJ,KARJ;AAUA,QAAMK,KAAK,GAAGQ,QAAQ,CAACF,OAAD,CAAtB;AAEA,SACE;AAAK,IAAA,KAAK,EAAC,gEAAX;AAA4E,qBAAgBV,EAA5F;AAAA,eACE,KAAC,QAAD;AAAU,MAAA,EAAE,EAAGA,EAAf;AAAoB,MAAA,KAAK,EAAGC,KAA5B;AAAoC,MAAA,QAAQ,EAAGY,QAA/C;AAA0D,MAAA,KAAK,EAAGT,KAAlE;AAA0E,MAAA,QAAQ,EAAGD;AAArF,MADF,EAEE,KAAC,WAAD;AAAa,MAAA,KAAK,EAAGH,EAArB;AAA0B,MAAA,OAAO,EAAGU,OAApC;AAA8C,MAAA,KAAK,EAAGC;AAAtD,MAFF;AAAA,IADF;AAMD;AAED,OAAO,SAASG,QAAT,CAAkBC,IAAlB,EAAwB;AAC7B,SAAOA,IAAI,IAAI,CAAC,CAACA,IAAI,CAACR,OAAtB;AACD,C,CAGD;;AAEA,SAASC,QAAT,CAAkBR,EAAlB,EAAsB;AACpB,SAAQ,wBAAwBA,EAAI,EAApC;AACD","sourcesContent":["import Description from './Description';\n\nfunction Checkbox(props) {\n const {\n id,\n label,\n onChange,\n disabled,\n value = false\n } = props;\n\n const handleChange = ({ target }) => {\n onChange(target.checked);\n };\n\n return (\n <div class=\"bio-properties-panel-checkbox\">\n <input\n id={ prefixId(id) }\n name={ id }\n type=\"checkbox\"\n class=\"bio-properties-panel-input\"\n onChange={ handleChange }\n checked={ value }\n disabled={ disabled } />\n <label for={ prefixId(id) } class=\"bio-properties-panel-label\">{ label }</label>\n </div>\n );\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 {boolean} [props.disabled]\n */\nexport default function CheckboxEntry(props) {\n const {\n element,\n id,\n description,\n label,\n getValue,\n setValue,\n disabled\n } = props;\n\n const value = getValue(element);\n\n return (\n <div class=\"bio-properties-panel-entry bio-properties-panel-checkbox-entry\" data-entry-id={ id }>\n <Checkbox id={ id } label={ label } onChange={ setValue } value={ value } disabled={ disabled } />\n <Description forId={ id } element={ element } value={ description } />\n </div>\n );\n}\n\nexport function isEdited(node) {\n return node && !!node.checked;\n}\n\n\n// helpers /////////////////\n\nfunction prefixId(id) {\n return `bio-properties-panel-${ id }`;\n}\n"],"file":"Checkbox.js"}
@@ -1,48 +0,0 @@
1
- import { useState } from 'preact/hooks';
2
- import classnames from 'classnames';
3
- import { ArrowIcon, DeleteIcon } from '../icons';
4
- import { jsx as _jsx } from "preact/jsx-runtime";
5
- import { jsxs as _jsxs } from "preact/jsx-runtime";
6
- export default function CollapsibleEntry(props) {
7
- const {
8
- id,
9
- entries = [],
10
- label,
11
- remove,
12
- open: shouldOpen
13
- } = props;
14
- const [open, setOpen] = useState(shouldOpen);
15
-
16
- const toggleOpen = () => setOpen(!open); // todo(pinussilvestrus): translate once we have a translate mechanism for the core
17
-
18
-
19
- const placeholderLabel = '<empty>';
20
- return _jsxs("div", {
21
- "data-entry-id": id,
22
- class: classnames('bio-properties-panel-collapsible-entry', open ? 'open' : ''),
23
- children: [_jsxs("div", {
24
- class: "bio-properties-panel-collapsible-entry-header",
25
- onClick: toggleOpen,
26
- children: [_jsx("div", {
27
- title: label || placeholderLabel,
28
- class: classnames('bio-properties-panel-collapsible-entry-header-title', !label && 'empty'),
29
- children: label || placeholderLabel
30
- }), _jsx("button", {
31
- title: "Toggle list item",
32
- class: "bio-properties-panel-arrow bio-properties-panel-collapsible-entry-arrow",
33
- children: _jsx(ArrowIcon, {
34
- class: open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right'
35
- })
36
- }), remove ? _jsx("button", {
37
- title: "Delete item",
38
- class: "bio-properties-panel-remove-entry",
39
- onClick: remove,
40
- children: _jsx(DeleteIcon, {})
41
- }) : null]
42
- }), _jsx("div", {
43
- class: classnames('bio-properties-panel-collapsible-entry-entries', open ? 'open' : ''),
44
- children: entries.map(e => e.component)
45
- })]
46
- });
47
- }
48
- //# sourceMappingURL=Collapsible.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/entries/Collapsible.js"],"names":["useState","classnames","ArrowIcon","DeleteIcon","CollapsibleEntry","props","id","entries","label","remove","open","shouldOpen","setOpen","toggleOpen","placeholderLabel","map","e","component"],"mappings":"AAAA,SACEA,QADF,QAEO,cAFP;AAIA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,SACEC,SADF,EAEEC,UAFF,QAGO,UAHP;;;AAMA,eAAe,SAASC,gBAAT,CAA0BC,KAA1B,EAAiC;AAC9C,QAAM;AACJC,IAAAA,EADI;AAEJC,IAAAA,OAAO,GAAG,EAFN;AAGJC,IAAAA,KAHI;AAIJC,IAAAA,MAJI;AAKJC,IAAAA,IAAI,EAAEC;AALF,MAMFN,KANJ;AAQA,QAAM,CAAEK,IAAF,EAAQE,OAAR,IAAoBZ,QAAQ,CAACW,UAAD,CAAlC;;AAEA,QAAME,UAAU,GAAG,MAAMD,OAAO,CAAC,CAACF,IAAF,CAAhC,CAX8C,CAa9C;;;AACA,QAAMI,gBAAgB,GAAG,SAAzB;AAEA,SACE;AACE,qBAAgBR,EADlB;AAEE,IAAA,KAAK,EAAGL,UAAU,CAChB,wCADgB,EAEhBS,IAAI,GAAG,MAAH,GAAY,EAFA,CAFpB;AAAA,eAME;AAAK,MAAA,KAAK,EAAC,+CAAX;AAA2D,MAAA,OAAO,EAAGG,UAArE;AAAA,iBACE;AACE,QAAA,KAAK,EAAGL,KAAK,IAAIM,gBADnB;AAEE,QAAA,KAAK,EAAGb,UAAU,CAChB,qDADgB,EAEhB,CAACO,KAAD,IAAU,OAFM,CAFpB;AAAA,kBAMIA,KAAK,IAAIM;AANb,QADF,EASE;AACE,QAAA,KAAK,EAAC,kBADR;AAEE,QAAA,KAAK,EAAC,0EAFR;AAAA,kBAIE,KAAC,SAAD;AAAW,UAAA,KAAK,EAAGJ,IAAI,GAAG,iCAAH,GAAuC;AAA9D;AAJF,QATF,EAgBID,MAAM,GAGF;AAAQ,QAAA,KAAK,EAAC,aAAd;AAA4B,QAAA,KAAK,EAAC,mCAAlC;AAAsE,QAAA,OAAO,EAAGA,MAAhF;AAAA,kBACE,KAAC,UAAD;AADF,QAHE,GAOF,IAvBR;AAAA,MANF,EAgCE;AAAK,MAAA,KAAK,EAAGR,UAAU,CACrB,gDADqB,EAErBS,IAAI,GAAG,MAAH,GAAY,EAFK,CAAvB;AAAA,gBAKIH,OAAO,CAACQ,GAAR,CAAYC,CAAC,IAAIA,CAAC,CAACC,SAAnB;AALJ,MAhCF;AAAA,IADF;AA2CD","sourcesContent":["import {\n useState\n} from 'preact/hooks';\n\nimport classnames from 'classnames';\n\nimport {\n ArrowIcon,\n DeleteIcon,\n} from '../icons';\n\n\nexport default function CollapsibleEntry(props) {\n const {\n id,\n entries = [],\n label,\n remove,\n open: shouldOpen\n } = props;\n\n const [ open, setOpen ] = useState(shouldOpen);\n\n const toggleOpen = () => setOpen(!open);\n\n // todo(pinussilvestrus): translate once we have a translate mechanism for the core\n const placeholderLabel = '<empty>';\n\n return (\n <div\n data-entry-id={ id }\n class={ classnames(\n 'bio-properties-panel-collapsible-entry',\n open ? 'open' : ''\n ) }>\n <div class=\"bio-properties-panel-collapsible-entry-header\" onClick={ toggleOpen }>\n <div\n title={ label || placeholderLabel }\n class={ classnames(\n 'bio-properties-panel-collapsible-entry-header-title',\n !label && 'empty'\n ) }>\n { label || placeholderLabel }\n </div>\n <button\n title=\"Toggle list item\"\n class=\"bio-properties-panel-arrow bio-properties-panel-collapsible-entry-arrow\"\n >\n <ArrowIcon class={ open ? 'bio-properties-panel-arrow-down' : 'bio-properties-panel-arrow-right' } />\n </button>\n {\n remove\n ?\n (\n <button title=\"Delete item\" class=\"bio-properties-panel-remove-entry\" onClick={ remove }>\n <DeleteIcon />\n </button>\n )\n : null\n }\n </div>\n <div class={ classnames(\n 'bio-properties-panel-collapsible-entry-entries',\n open ? 'open' : ''\n ) }>\n {\n entries.map(e => e.component)\n }\n </div>\n </div>\n );\n}"],"file":"Collapsible.js"}
@@ -1,26 +0,0 @@
1
- import { useDescriptionContext } from '../../hooks';
2
- /**
3
- * @param {Object} props
4
- * @param {Object} props.element
5
- * @param {String} props.forId - id of the entry the description is used for
6
- * @param {String} props.value
7
- */
8
-
9
- import { jsx as _jsx } from "preact/jsx-runtime";
10
- export default function Description(props) {
11
- const {
12
- element,
13
- forId,
14
- value
15
- } = props;
16
- const contextDescription = useDescriptionContext(forId, element);
17
- const description = value || contextDescription;
18
-
19
- if (description) {
20
- return _jsx("div", {
21
- class: "bio-properties-panel-description",
22
- children: description
23
- });
24
- }
25
- }
26
- //# sourceMappingURL=Description.js.map
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../../../src/components/entries/Description.js"],"names":["useDescriptionContext","Description","props","element","forId","value","contextDescription","description"],"mappings":"AAAA,SACEA,qBADF,QAEO,aAFP;AAIA;AACA;AACA;AACA;AACA;AACA;;;AACA,eAAe,SAASC,WAAT,CAAqBC,KAArB,EAA4B;AACzC,QAAM;AACJC,IAAAA,OADI;AAEJC,IAAAA,KAFI;AAGJC,IAAAA;AAHI,MAIFH,KAJJ;AAMA,QAAMI,kBAAkB,GAAGN,qBAAqB,CAACI,KAAD,EAAQD,OAAR,CAAhD;AAEA,QAAMI,WAAW,GAAGF,KAAK,IAAIC,kBAA7B;;AAEA,MAAIC,WAAJ,EAAiB;AACf,WACE;AAAK,MAAA,KAAK,EAAC,kCAAX;AAAA,gBACIA;AADJ,MADF;AAKD;AACF","sourcesContent":["import {\n useDescriptionContext\n} from '../../hooks';\n\n/**\n * @param {Object} props\n * @param {Object} props.element\n * @param {String} props.forId - id of the entry the description is used for\n * @param {String} props.value\n */\nexport default function Description(props) {\n const {\n element,\n forId,\n value\n } = props;\n\n const contextDescription = useDescriptionContext(forId, element);\n\n const description = value || contextDescription;\n\n if (description) {\n return (\n <div class=\"bio-properties-panel-description\">\n { description }\n </div>\n );\n }\n}\n"],"file":"Description.js"}