@schukai/monster 3.51.5 → 3.52.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (360) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/README.md +15 -12
  3. package/example/components/form/button.mjs +10 -0
  4. package/example/components/form/select.mjs +25 -0
  5. package/example/components/form/tree-select.mjs +27 -0
  6. package/example/components/host/host.mjs +0 -0
  7. package/example/components/notify/message.mjs +4 -0
  8. package/example/components/notify/notify.mjs +4 -0
  9. package/example/components/state/log.mjs +0 -0
  10. package/example/components/state/state.mjs +0 -0
  11. package/package.json +6 -2
  12. package/source/components/constants.mjs +132 -0
  13. package/source/components/datatable/columnbar.mjs +310 -0
  14. package/source/components/datatable/constants.mjs +121 -0
  15. package/source/components/datatable/dataset.mjs +219 -0
  16. package/source/components/datatable/datasource/dom.mjs +186 -0
  17. package/source/components/datatable/datasource/namespace.mjs +13 -0
  18. package/source/components/datatable/datasource/rest.mjs +400 -0
  19. package/source/components/datatable/datasource.mjs +102 -0
  20. package/source/components/datatable/datatable/header.mjs +268 -0
  21. package/source/components/datatable/datatable/namespace.mjs +13 -0
  22. package/source/components/datatable/datatable.mjs +789 -0
  23. package/source/components/datatable/embedded-pagination.mjs +113 -0
  24. package/source/components/datatable/filter/abstract-base.mjs +31 -0
  25. package/source/components/datatable/filter/date-range.mjs +1041 -0
  26. package/source/components/datatable/filter/input.mjs +175 -0
  27. package/source/components/datatable/filter/namespace.mjs +13 -0
  28. package/source/components/datatable/filter/range.mjs +671 -0
  29. package/source/components/datatable/filter/select.mjs +65 -0
  30. package/source/components/datatable/filter/settings.mjs +116 -0
  31. package/source/components/datatable/filter-button.mjs +98 -0
  32. package/source/components/datatable/filter.mjs +929 -0
  33. package/source/components/datatable/namespace.mjs +11 -0
  34. package/source/components/datatable/pagination.mjs +456 -0
  35. package/source/components/datatable/style/column-bar.pcss +123 -0
  36. package/source/components/datatable/style/dataset.pcss +13 -0
  37. package/source/components/datatable/style/datasource.pcss +16 -0
  38. package/source/components/datatable/style/datatable.pcss +239 -0
  39. package/source/components/datatable/style/embedded-pagination.pcss +101 -0
  40. package/source/components/datatable/style/filter-button.pcss +22 -0
  41. package/source/components/datatable/style/filter-controls-defaults.pcss +46 -0
  42. package/source/components/datatable/style/filter-date-range.pcss +9 -0
  43. package/source/components/datatable/style/filter-range.pcss +5 -0
  44. package/source/components/datatable/style/filter.pcss +156 -0
  45. package/source/components/datatable/style/pagination.pcss +59 -0
  46. package/source/components/datatable/style/select-filter.pcss +27 -0
  47. package/source/components/datatable/stylesheet/column-bar.mjs +33 -0
  48. package/source/components/datatable/stylesheet/dataset.mjs +33 -0
  49. package/source/components/datatable/stylesheet/datasource.mjs +33 -0
  50. package/source/components/datatable/stylesheet/datatable.mjs +33 -0
  51. package/source/components/datatable/stylesheet/embedded-pagination.mjs +33 -0
  52. package/source/components/datatable/stylesheet/filter-button.mjs +33 -0
  53. package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +33 -0
  54. package/source/components/datatable/stylesheet/filter-date-range.mjs +33 -0
  55. package/source/components/datatable/stylesheet/filter-range.mjs +33 -0
  56. package/source/components/datatable/stylesheet/filter.mjs +33 -0
  57. package/source/components/datatable/stylesheet/namespace.mjs +13 -0
  58. package/source/components/datatable/stylesheet/pagination.mjs +33 -0
  59. package/source/components/datatable/stylesheet/select-filter.mjs +33 -0
  60. package/source/components/datatable/util.mjs +60 -0
  61. package/source/components/form/action-button.mjs +262 -0
  62. package/source/components/form/api-button.mjs +515 -0
  63. package/source/components/form/button-bar.mjs +739 -0
  64. package/source/components/form/button.mjs +350 -0
  65. package/source/components/form/confirm-button.mjs +330 -0
  66. package/source/components/form/constants.mjs +111 -0
  67. package/source/components/form/context-help.mjs +123 -0
  68. package/source/components/form/events.mjs +84 -0
  69. package/source/components/form/form.mjs +601 -0
  70. package/source/components/form/message-state-button.mjs +396 -0
  71. package/source/components/form/namespace.mjs +13 -0
  72. package/source/components/form/popper-button.mjs +435 -0
  73. package/source/components/form/popper.mjs +487 -0
  74. package/source/components/form/reload.mjs +360 -0
  75. package/source/components/form/select.mjs +2314 -0
  76. package/source/components/form/shadow-reload.mjs +137 -0
  77. package/source/components/form/state-button.mjs +182 -0
  78. package/source/components/form/style/action-button.pcss +41 -0
  79. package/source/components/form/style/api-button.pcss +0 -0
  80. package/source/components/form/style/button-bar.pcss +51 -0
  81. package/source/components/form/style/button.pcss +8 -0
  82. package/source/components/form/style/confirm-button.pcss +17 -0
  83. package/source/components/form/style/context-help.pcss +16 -0
  84. package/source/components/form/style/form.pcss +10 -0
  85. package/source/components/form/style/message-state-button.pcss +10 -0
  86. package/source/components/form/style/popper-button.pcss +16 -0
  87. package/source/components/form/style/popper.pcss +8 -0
  88. package/source/components/form/style/select.pcss +265 -0
  89. package/source/components/form/style/state-button.pcss +116 -0
  90. package/source/components/form/style/tabs.pcss +170 -0
  91. package/source/components/form/style/tree-select.pcss +81 -0
  92. package/source/components/form/stylesheet/action-button.mjs +33 -0
  93. package/source/components/form/stylesheet/api-button.mjs +33 -0
  94. package/source/components/form/stylesheet/button-bar.mjs +33 -0
  95. package/source/components/form/stylesheet/button.mjs +33 -0
  96. package/source/components/form/stylesheet/confirm-button.mjs +33 -0
  97. package/source/components/form/stylesheet/context-help.mjs +33 -0
  98. package/source/components/form/stylesheet/form.mjs +33 -0
  99. package/source/components/form/stylesheet/message-state-button.mjs +33 -0
  100. package/source/components/form/stylesheet/namespace.mjs +13 -0
  101. package/source/components/form/stylesheet/popper-button.mjs +33 -0
  102. package/source/components/form/stylesheet/popper.mjs +33 -0
  103. package/source/components/form/stylesheet/select.mjs +33 -0
  104. package/source/components/form/stylesheet/state-button.mjs +33 -0
  105. package/source/components/form/stylesheet/tabs.mjs +33 -0
  106. package/source/components/form/stylesheet/tree-select.mjs +33 -0
  107. package/source/components/form/tabs.mjs +1011 -0
  108. package/source/components/form/template.mjs +373 -0
  109. package/source/components/form/tree-select.mjs +527 -0
  110. package/source/components/form/types/namespace.mjs +13 -0
  111. package/source/components/form/types/state.mjs +93 -0
  112. package/source/components/form/util/fetch.mjs +133 -0
  113. package/source/components/form/util/floating-ui.mjs +245 -0
  114. package/source/components/form/util/namespace.mjs +13 -0
  115. package/source/components/form/util/popper.mjs +49 -0
  116. package/source/components/host/call-button.mjs +236 -0
  117. package/source/components/host/collapse.mjs +526 -0
  118. package/source/components/host/config-manager.mjs +304 -0
  119. package/source/components/host/constants.mjs +18 -0
  120. package/source/components/host/details.mjs +268 -0
  121. package/source/components/host/events.mjs +131 -0
  122. package/source/components/host/host.mjs +420 -0
  123. package/source/components/host/namespace.mjs +13 -0
  124. package/source/components/host/overlay.mjs +339 -0
  125. package/source/components/host/style/call-button.pcss +36 -0
  126. package/source/components/host/style/collapse.pcss +67 -0
  127. package/source/components/host/style/config-manager.pcss +5 -0
  128. package/source/components/host/style/details.pcss +68 -0
  129. package/source/components/host/style/host.pcss +43 -0
  130. package/source/components/host/style/overlay.pcss +73 -0
  131. package/source/components/host/style/toggle-button.pcss +36 -0
  132. package/source/components/host/style/viewer.pcss +13 -0
  133. package/source/components/host/stylesheet/call-button.mjs +33 -0
  134. package/source/components/host/stylesheet/collapse.mjs +33 -0
  135. package/source/components/host/stylesheet/config-manager.mjs +33 -0
  136. package/source/components/host/stylesheet/details.mjs +33 -0
  137. package/source/components/host/stylesheet/host.mjs +33 -0
  138. package/source/components/host/stylesheet/namespace.mjs +13 -0
  139. package/source/components/host/stylesheet/overlay.mjs +33 -0
  140. package/source/components/host/stylesheet/toggle-button.mjs +33 -0
  141. package/source/components/host/stylesheet/viewer.mjs +33 -0
  142. package/source/components/host/toggle-button.mjs +88 -0
  143. package/source/components/host/util.mjs +23 -0
  144. package/source/components/host/viewer.mjs +309 -0
  145. package/source/components/namespace.mjs +14 -0
  146. package/source/components/notify/constants.mjs +15 -0
  147. package/source/components/notify/events.mjs +15 -0
  148. package/source/components/notify/message.mjs +374 -0
  149. package/source/components/notify/namespace.mjs +15 -0
  150. package/source/components/notify/notify.mjs +236 -0
  151. package/source/components/notify/style/message.pcss +57 -0
  152. package/source/components/notify/style/notify.pcss +118 -0
  153. package/source/components/notify/stylesheet/message.mjs +33 -0
  154. package/source/components/notify/stylesheet/namespace.mjs +15 -0
  155. package/source/components/notify/stylesheet/notify.mjs +33 -0
  156. package/source/components/state/log/entry.mjs +126 -0
  157. package/source/components/state/log/namespace.mjs +13 -0
  158. package/source/components/state/log.mjs +275 -0
  159. package/source/components/state/namespace.mjs +13 -0
  160. package/source/components/state/state.mjs +131 -0
  161. package/source/components/state/style/log.pcss +111 -0
  162. package/source/components/state/style/state.pcss +113 -0
  163. package/source/components/state/stylesheet/log.mjs +33 -0
  164. package/source/components/state/stylesheet/state.mjs +33 -0
  165. package/source/components/style/badge.pcss +92 -0
  166. package/source/components/style/border.pcss +77 -0
  167. package/source/components/style/button.pcss +105 -0
  168. package/source/components/style/card.pcss +108 -0
  169. package/source/components/style/color.pcss +257 -0
  170. package/source/components/style/common.pcss +103 -0
  171. package/source/components/style/control.pcss +11 -0
  172. package/source/components/style/data-grid.pcss +43 -0
  173. package/source/components/style/display.pcss +42 -0
  174. package/source/components/style/floating-ui.pcss +33 -0
  175. package/source/components/style/form.pcss +5 -0
  176. package/source/components/style/host.pcss +15 -0
  177. package/source/components/style/link.pcss +63 -0
  178. package/source/components/style/mixin/badge.pcss +18 -0
  179. package/source/components/style/mixin/button.pcss +54 -0
  180. package/source/components/style/mixin/form.pcss +247 -0
  181. package/source/components/style/mixin/hover.pcss +8 -0
  182. package/source/components/style/mixin/media.pcss +107 -0
  183. package/source/components/style/mixin/property.pcss +288 -0
  184. package/source/components/style/mixin/skeleton.pcss +26 -0
  185. package/source/components/style/mixin/spinner.pcss +24 -0
  186. package/source/components/style/mixin/typography.pcss +52 -0
  187. package/source/components/style/normalize.pcss +14 -0
  188. package/source/components/style/popper.pcss +78 -0
  189. package/source/components/style/property.pcss +17 -0
  190. package/source/components/style/ripple.pcss +14 -0
  191. package/source/components/style/skeleton.pcss +28 -0
  192. package/source/components/style/space.pcss +47 -0
  193. package/source/components/style/spinner.pcss +6 -0
  194. package/source/components/style/table.pcss +46 -0
  195. package/source/components/style/theme.pcss +119 -0
  196. package/source/components/style/typography.pcss +131 -0
  197. package/source/components/stylesheet/badge.mjs +33 -0
  198. package/source/components/stylesheet/border.mjs +33 -0
  199. package/source/components/stylesheet/button.mjs +33 -0
  200. package/source/components/stylesheet/card.mjs +33 -0
  201. package/source/components/stylesheet/color.mjs +33 -0
  202. package/source/components/stylesheet/common.mjs +33 -0
  203. package/source/components/stylesheet/control.mjs +33 -0
  204. package/source/components/stylesheet/data-grid.mjs +33 -0
  205. package/source/components/stylesheet/display.mjs +33 -0
  206. package/source/components/stylesheet/floating-ui.mjs +33 -0
  207. package/source/components/stylesheet/form.mjs +33 -0
  208. package/source/components/stylesheet/host.mjs +33 -0
  209. package/source/components/stylesheet/link.mjs +33 -0
  210. package/source/components/stylesheet/namespace.mjs +13 -0
  211. package/source/components/stylesheet/normalize.mjs +33 -0
  212. package/source/components/stylesheet/popper.mjs +33 -0
  213. package/source/components/stylesheet/property.mjs +33 -0
  214. package/source/components/stylesheet/ripple.mjs +33 -0
  215. package/source/components/stylesheet/skeleton.mjs +33 -0
  216. package/source/components/stylesheet/space.mjs +33 -0
  217. package/source/components/stylesheet/spinner.mjs +33 -0
  218. package/source/components/stylesheet/table.mjs +33 -0
  219. package/source/components/stylesheet/theme.mjs +33 -0
  220. package/source/components/stylesheet/tree-menu.mjs +33 -0
  221. package/source/components/stylesheet/typography.mjs +33 -0
  222. package/source/components/tree-menu/namespace.mjs +13 -0
  223. package/source/components/tree-menu/style/tree-menu.pcss +107 -0
  224. package/source/components/tree-menu/stylesheet/namespace.mjs +13 -0
  225. package/source/components/tree-menu/stylesheet/tree-menu.mjs +33 -0
  226. package/source/components/tree-menu/tree-menu.mjs +660 -0
  227. package/source/constraints/abstract.mjs +17 -24
  228. package/source/constraints/abstractoperator.mjs +27 -22
  229. package/source/constraints/andoperator.mjs +20 -17
  230. package/source/constraints/invalid.mjs +17 -17
  231. package/source/constraints/isarray.mjs +20 -20
  232. package/source/constraints/isobject.mjs +20 -20
  233. package/source/constraints/oroperator.mjs +45 -45
  234. package/source/constraints/valid.mjs +17 -17
  235. package/source/data/buildmap.mjs +108 -103
  236. package/source/data/buildtree.mjs +59 -57
  237. package/source/data/datasource/dom.mjs +80 -84
  238. package/source/data/datasource/namespace.mjs +1 -1
  239. package/source/data/datasource/server/restapi/data-fetch-error.mjs +27 -25
  240. package/source/data/datasource/server/restapi/writeerror.mjs +34 -32
  241. package/source/data/datasource/server/restapi.mjs +176 -177
  242. package/source/data/datasource/server/webconnect.mjs +150 -156
  243. package/source/data/datasource/server.mjs +58 -59
  244. package/source/data/datasource/storage/localstorage.mjs +25 -24
  245. package/source/data/datasource/storage/sessionstorage.mjs +28 -25
  246. package/source/data/datasource/storage.mjs +74 -73
  247. package/source/data/datasource.mjs +176 -167
  248. package/source/data/diff.mjs +98 -97
  249. package/source/data/extend.mjs +42 -42
  250. package/source/data/pathfinder.mjs +301 -288
  251. package/source/data/pipe.mjs +36 -36
  252. package/source/data/transformer.mjs +742 -726
  253. package/source/dom/assembler.mjs +44 -44
  254. package/source/dom/attributes.mjs +142 -122
  255. package/source/dom/constants.mjs +62 -58
  256. package/source/dom/customcontrol.mjs +299 -299
  257. package/source/dom/customelement.mjs +843 -806
  258. package/source/dom/dimension.mjs +56 -46
  259. package/source/dom/events.mjs +74 -69
  260. package/source/dom/focusmanager.mjs +175 -175
  261. package/source/dom/locale.mjs +28 -28
  262. package/source/dom/ready.mjs +13 -13
  263. package/source/dom/resource/data.mjs +117 -111
  264. package/source/dom/resource/link/stylesheet.mjs +16 -16
  265. package/source/dom/resource/link.mjs +94 -96
  266. package/source/dom/resource/script.mjs +72 -74
  267. package/source/dom/resource.mjs +174 -172
  268. package/source/dom/resourcemanager.mjs +152 -156
  269. package/source/dom/slotted.mjs +78 -80
  270. package/source/dom/template.mjs +126 -112
  271. package/source/dom/theme.mjs +35 -35
  272. package/source/dom/updater.mjs +673 -651
  273. package/source/dom/util/extract-keys.mjs +34 -22
  274. package/source/dom/util/init-options-from-attributes.mjs +46 -38
  275. package/source/dom/util/namespace.mjs +13 -0
  276. package/source/dom/util/set-option-from-attribute.mjs +35 -29
  277. package/source/dom/util.mjs +112 -81
  278. package/source/dom/worker/factory.mjs +83 -83
  279. package/source/i18n/formatter.mjs +75 -73
  280. package/source/i18n/locale.mjs +146 -144
  281. package/source/i18n/provider.mjs +70 -64
  282. package/source/i18n/providers/embed.mjs +136 -127
  283. package/source/i18n/providers/fetch.mjs +84 -76
  284. package/source/i18n/translations.mjs +205 -195
  285. package/source/logging/handler/console.mjs +36 -36
  286. package/source/logging/handler.mjs +140 -140
  287. package/source/logging/logentry.mjs +25 -25
  288. package/source/logging/logger.mjs +177 -175
  289. package/source/math/random.mjs +63 -59
  290. package/source/monster.mjs +223 -103
  291. package/source/net/webconnect/message.mjs +31 -31
  292. package/source/net/webconnect.mjs +278 -271
  293. package/source/text/bracketed-key-value-hash.mjs +182 -179
  294. package/source/text/formatter.mjs +235 -210
  295. package/source/text/generate-range-comparison-expression.mjs +56 -34
  296. package/source/text/namespace.mjs +1 -1
  297. package/source/types/base.mjs +69 -61
  298. package/source/types/basewithoptions.mjs +46 -46
  299. package/source/types/binary.mjs +20 -20
  300. package/source/types/dataurl.mjs +96 -90
  301. package/source/types/global.mjs +45 -39
  302. package/source/types/id.mjs +25 -25
  303. package/source/types/internal.mjs +115 -114
  304. package/source/types/is.mjs +56 -40
  305. package/source/types/mediatype.mjs +119 -119
  306. package/source/types/namespace.mjs +1 -1
  307. package/source/types/node.mjs +160 -150
  308. package/source/types/nodelist.mjs +94 -96
  309. package/source/types/noderecursiveiterator.mjs +50 -50
  310. package/source/types/observablequeue.mjs +73 -73
  311. package/source/types/observer.mjs +104 -104
  312. package/source/types/observerlist.mjs +66 -66
  313. package/source/types/proxyobserver.mjs +210 -210
  314. package/source/types/queue.mjs +63 -63
  315. package/source/types/randomid.mjs +13 -13
  316. package/source/types/regex.mjs +3 -1
  317. package/source/types/stack.mjs +64 -64
  318. package/source/types/tokenlist.mjs +206 -205
  319. package/source/types/typeof.mjs +12 -10
  320. package/source/types/uniquequeue.mjs +48 -48
  321. package/source/types/uuid.mjs +32 -32
  322. package/source/types/validate.mjs +67 -67
  323. package/source/types/version.mjs +115 -105
  324. package/source/util/clone.mjs +103 -91
  325. package/source/util/comparator.mjs +97 -97
  326. package/source/util/deadmansswitch.mjs +40 -44
  327. package/source/util/freeze.mjs +10 -9
  328. package/source/util/namespace.mjs +1 -1
  329. package/source/util/processing.mjs +104 -105
  330. package/source/util/runtime.mjs +56 -44
  331. package/source/util/trimspaces.mjs +24 -24
  332. package/test/cases/components/form/button.mjs +122 -0
  333. package/test/cases/components/form/confirm-button.mjs +127 -0
  334. package/test/cases/components/form/form.mjs +317 -0
  335. package/test/cases/components/form/reload.mjs +188 -0
  336. package/test/cases/components/form/select.mjs +229 -0
  337. package/test/cases/components/form/state-button.mjs +130 -0
  338. package/test/cases/components/form/tabs.mjs +98 -0
  339. package/test/cases/components/form/template.mjs +189 -0
  340. package/test/cases/components/form/tree-select.mjs +216 -0
  341. package/test/cases/components/host/details.mjs +68 -0
  342. package/test/cases/components/host/host.mjs +70 -0
  343. package/test/cases/components/host/overlay.mjs +60 -0
  344. package/test/cases/components/host/util.mjs +79 -0
  345. package/test/cases/components/notify/message.mjs +39 -0
  346. package/test/cases/components/notify/notify.mjs +89 -0
  347. package/test/cases/dom/customcontrol.mjs +5 -4
  348. package/test/cases/math/random.mjs +0 -1
  349. package/test/cases/monster.mjs +1 -1
  350. package/test/cases/net/webconnect/message.mjs +0 -1
  351. package/test/cases/types/node.mjs +1 -1
  352. package/test/util/chai-dom.mjs +2 -2
  353. package/test/util/intersection-mock.mjs +69 -0
  354. package/test/util/jsdom.mjs +41 -25
  355. package/test/util/localstorage.mjs +1 -0
  356. package/test/util/resize-observer.mjs +29 -0
  357. package/test/util/websocket.mjs +4 -1
  358. package/test/web/import.js +16 -1
  359. package/test/web/test.html +28 -5
  360. package/test/web/tests.js +30398 -17879
@@ -0,0 +1,515 @@
1
+ /**
2
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
3
+ * Node module: @schukai/monster
4
+ * This file is licensed under the AGPLv3 License.
5
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
6
+ */
7
+ import { instanceSymbol } from "../../constants.mjs";
8
+ import { buildMap } from "../../data/buildmap.mjs";
9
+ import { Pathfinder } from "../../data/pathfinder.mjs";
10
+ import { addAttributeToken } from "../../dom/attributes.mjs";
11
+ import {
12
+ ATTRIBUTE_ERRORMESSAGE,
13
+ ATTRIBUTE_ROLE,
14
+ } from "../../dom/constants.mjs";
15
+ import {
16
+ assembleMethodSymbol,
17
+ registerCustomElement,
18
+ } from "../../dom/customelement.mjs";
19
+ import {
20
+ findTargetElementFromEvent,
21
+ fireCustomEvent,
22
+ } from "../../dom/events.mjs";
23
+ import { isArray, isPrimitive, isIterable } from "../../types/is.mjs";
24
+ import { validateString } from "../../types/validate.mjs";
25
+ import { ActionButton } from "./action-button.mjs";
26
+ import { ApiButtonStyleSheet } from "./stylesheet/api-button.mjs";
27
+ import { isObject, isFunction } from "../../types/is.mjs";
28
+ import { getGlobal } from "../../types/global.mjs";
29
+ import { Formatter } from "../../text/formatter.mjs";
30
+
31
+ export { ApiButton };
32
+
33
+ /**
34
+ * @private
35
+ * @type {symbol}
36
+ */
37
+ const containerElementSymbol = Symbol("containerElement");
38
+
39
+ /**
40
+ * The ApiButton is a button that opens a popper element with possible actions.
41
+ *
42
+ * <img src="./images/api-button.png">
43
+ *
44
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
45
+ * as well as [pooperjs](https://popper.js.org/docs/v2/).
46
+ *
47
+ * You can create this control either by specifying the HTML tag <monster-action-button />` directly in the HTML or using
48
+ * Javascript via the `document.createElement('monster-action-button');` method.
49
+ *
50
+ * ```html
51
+ * <monster-action-button></monster-action-button>
52
+ * ```
53
+ *
54
+ * Or you can create this CustomControl directly in Javascript:
55
+ *
56
+ * ```js
57
+ * import {PopperButton} from '@schukai/component-form/source/action-button.js';
58
+ * document.createElement('monster-action-button');
59
+ * ```
60
+ *
61
+ * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
62
+ *
63
+ * @startuml api-button.png
64
+ * skinparam monochrome true
65
+ * skinparam shadowing false
66
+ * HTMLElement <|-- CustomElement
67
+ * CustomElement <|-- CustomControl
68
+ * CustomControl <|-- Button
69
+ * Button <|-- ActionButton
70
+ * ActionButton <|-- ApiButton
71
+ * @enduml
72
+ *
73
+ * @since 3.32.0
74
+ * @copyright schukai GmbH
75
+ * @memberOf Monster.Components.Form
76
+ * @summary A button that opens a popper element with possible actions.
77
+ */
78
+ class ApiButton extends ActionButton {
79
+ /**
80
+ * This method is called by the `instanceof` operator.
81
+ * @returns {symbol}
82
+ */
83
+ static get [instanceSymbol]() {
84
+ return Symbol.for("@schukai/component-form/api-button@@instance");
85
+ }
86
+
87
+ /**
88
+ * To set the options via the html tag the attribute `data-monster-options` must be used.
89
+ * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
90
+ *
91
+ * The individual configuration values can be found in the table.
92
+ *
93
+ * @property {object} mapping - The mapping object.
94
+ * @property {string} mapping.selector - The selector to find the buttons in the response.
95
+ * @property {string} mapping.labelSelector - The selector to find the label for the button.
96
+ * @property {string} mapping.labelTemplate - The template to create the label for the button.
97
+ * @property {string} mapping.apiTemplate - The template to create the api for the button.
98
+ * @property {string} mapping.urlTemplate - The template to create the url for the button.
99
+ * @property {function} mapping.filter - The filter function to filter the buttons.
100
+ * @property {string} url - The url to fetch the data.
101
+ * @property {object} api - The api options.
102
+ * @property {object} api.fetch - The fetch options.
103
+ * @property {string} api.body - The body template.
104
+ * @property {object} callbacks - The callbacks object.
105
+ * @property {function} callbacks.beforeApi - The beforeApi callback.
106
+ * @property {object} fetch - The fetch options.
107
+ * @property {string} fetch.redirect - The redirect option.
108
+ * @property {string} fetch.method - The method option.
109
+ * @property {string} fetch.mode - The mode option.
110
+ * @property {string} fetch.credentials - The credentials option.
111
+ * @property {object} fetch.headers - The headers option.
112
+ * @property {string} fetch.headers.accept - The accept option.
113
+ * @extends {ActionButton.defaults}
114
+ */
115
+ get defaults() {
116
+ const opts = Object.assign({}, super.defaults, {
117
+ mapping: {
118
+ selector: "*",
119
+ labelSelector: "",
120
+ labelTemplate: "",
121
+ apiTemplate: "",
122
+ urlTemplate: "",
123
+ filter: "",
124
+ },
125
+ api: {
126
+ fetch: {
127
+ method: "POST",
128
+ redirect: "error",
129
+ mode: "same-origin",
130
+ credentials: "same-origin",
131
+ headers: {
132
+ accept: "application/json",
133
+ },
134
+ },
135
+ body: {},
136
+ },
137
+ url: "",
138
+ callbacks: {
139
+ beforeApi: null,
140
+ },
141
+ fetch: {
142
+ redirect: "error",
143
+ method: "GET",
144
+ mode: "same-origin",
145
+ credentials: "same-origin",
146
+ headers: {
147
+ accept: "application/json",
148
+ },
149
+ },
150
+ });
151
+
152
+ opts["actions"]["execute"] = executeAPIButton.bind(self);
153
+
154
+ return opts;
155
+ }
156
+
157
+ /**
158
+ *
159
+ * @return {Promise}
160
+ */
161
+ fetch(url) {;
162
+
163
+ if (url instanceof URL) {
164
+ url = url.toString();
165
+ }
166
+
167
+ if (url !== undefined) {
168
+ url = validateString(url);
169
+ }
170
+
171
+ return fetchData.call(this, url).then((map) => {
172
+ if (
173
+ isObject(map) ||
174
+ isArray(map) | (map instanceof Set) ||
175
+ map instanceof Map
176
+ ) {
177
+ this.importButtons(map);
178
+ }
179
+ });
180
+ }
181
+
182
+ /**
183
+ * Import buttons from a map.
184
+ *
185
+ * @since 0.16.0
186
+ * @param {array|object|Map|Set} data
187
+ * @return {Monster.Components.Form.ApiButton}
188
+ * @throws {Error} map is not iterable
189
+ * @throws {Error} missing label configuration
190
+ */
191
+ importButtons(data) {;
192
+
193
+ const mappingOptions = this.getOption("mapping", {});
194
+ const selector = mappingOptions?.["selector"];
195
+ const labelSelector = mappingOptions?.["labelSelector"];
196
+ const labelTemplate = mappingOptions?.["labelTemplate"];
197
+ const apiTemplate = mappingOptions?.["apiTemplate"];
198
+ let urlTemplate = mappingOptions?.["urlTemplate"];
199
+ const filter = mappingOptions?.["filter"];
200
+
201
+ let flag = false;
202
+ let apiEqualUrl = false;
203
+ if (labelTemplate === "") {
204
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "empty label template");
205
+ flag = true;
206
+ }
207
+
208
+ if (apiTemplate === "") {
209
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "empty api template");
210
+ flag = true;
211
+ }
212
+
213
+ if (urlTemplate === "") {
214
+ urlTemplate = apiTemplate;
215
+ apiEqualUrl = true;
216
+ }
217
+
218
+ if (flag === true) {
219
+ throw new Error("missing label or api configuration");
220
+ }
221
+
222
+ if (isPrimitive(labelSelector) && labelSelector !== "") {
223
+ const finder = new Pathfinder(data);
224
+ const label = finder.getVia(labelSelector);
225
+ this.setOption("labels.button", label);
226
+ this.value = label;
227
+ }
228
+
229
+ let labelMap;
230
+ const urlMap = buildMap(data, selector, urlTemplate, apiTemplate, filter);
231
+ if (apiEqualUrl === true) {
232
+ labelMap = urlMap;
233
+ } else {
234
+ labelMap = buildMap(data, selector, labelTemplate, apiTemplate, filter);
235
+ }
236
+
237
+ const buttons = [];
238
+ if (!isIterable(urlMap)) {
239
+ throw new Error("map is not iterable");
240
+ }
241
+
242
+ for (const [iterKey] of urlMap) {
243
+ const vmUrl = urlMap.get(iterKey);
244
+ const vmLabel = labelMap.get(iterKey);
245
+ buttons.push({
246
+ label: vmLabel,
247
+ class: "monster-button-outline-primary monster-border-0",
248
+ action: this.getOption("actions.execute"),
249
+ url: vmUrl,
250
+ cmd: iterKey,
251
+ });
252
+ }
253
+
254
+ try {
255
+ this.updateI18n();
256
+ } catch (e) {
257
+ addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
258
+ }
259
+
260
+ this.setOption("buttons", buttons);
261
+
262
+ fireCustomEvent(this, "monster-button-set", {
263
+ buttons: buttons,
264
+ });
265
+
266
+ return this;
267
+ }
268
+
269
+ /**
270
+ *
271
+ * @return {Monster.Components.Form.Popper}
272
+ */
273
+ [assembleMethodSymbol]() {
274
+ super[assembleMethodSymbol]();;
275
+ initControlReferences.call(this);
276
+ initEventHandler.call(this);
277
+
278
+ return this;
279
+ }
280
+
281
+ /**
282
+ * @return {string}
283
+ */
284
+ static getTag() {
285
+ return "monster-api-button";
286
+ }
287
+
288
+ /**
289
+ * @return {Array<CSSStyleSheet>}
290
+ */
291
+ static getCSSStyleSheet() {
292
+ const styles = super.getCSSStyleSheet();
293
+ styles.push(ApiButtonStyleSheet);
294
+ return styles;
295
+ }
296
+ }
297
+
298
+ /**
299
+ *
300
+ * @param {Event} event
301
+ * @param {HTMLElement} button
302
+ * @param {Monster.Components.Form.ApiButton} element
303
+ */
304
+ function executeAPIButton(event, button, element) {
305
+ const self = element;
306
+
307
+ const fetchOptions = self.getOption("api.fetch", {});
308
+
309
+ const callback = self.getOption("callbacks.beforeApi");
310
+ if (isFunction(callback)) {
311
+ callback.call(self, fetchOptions);
312
+ }
313
+
314
+ let url = undefined;
315
+ let label = undefined;
316
+ let key = undefined;
317
+
318
+ const attr = button.getAttribute("data-monster-insert-reference");
319
+ if (attr) {
320
+ const index = attr.split("-")[1];
321
+ const b = self.getOption("buttons." + index);
322
+
323
+ url = b?.["url"];
324
+ label = b?.["label"];
325
+ key = b?.["cmd"];
326
+ }
327
+
328
+ const body = self.getOption("api.body");
329
+ if (isObject(body)) {
330
+ const bodyString = JSON.stringify(body);
331
+
332
+ const obj = {
333
+ url: url,
334
+ label: label,
335
+ value: self.getOption("value"),
336
+ key: key,
337
+ id: self.getOption("id"),
338
+ };
339
+
340
+ fetchOptions.body = new Formatter(obj, {}).format(bodyString);
341
+ }
342
+
343
+ if (button instanceof HTMLElement) {
344
+ button.setState("activity");
345
+ }
346
+
347
+ fireCustomEvent(self, "monster-api-button-click", {
348
+ button,
349
+ });
350
+
351
+ const global = getGlobal();
352
+ global
353
+ .fetch(url, fetchOptions)
354
+ .then((response) => {
355
+ if (!response.ok) {
356
+ if (button instanceof HTMLElement) {
357
+ button.setState("successful", 4000);
358
+ }
359
+ return Promise.reject(response);
360
+ }
361
+
362
+ const contentType = response?.headers?.get("content-type");
363
+ if (contentType && contentType.indexOf("application/json") !== -1) {
364
+ return response
365
+ .text()
366
+ .then((text) => {
367
+ try {
368
+ const data = JSON.parse(text); // Try to parse the response as JSON
369
+
370
+ if (button instanceof HTMLElement) {
371
+ button.setState("successful", 4000);
372
+ }
373
+
374
+ fireCustomEvent(self, "monster-api-button-successful", {
375
+ button,
376
+ data,
377
+ response,
378
+ contentType: response.headers.get("Content-Type"),
379
+ });
380
+ } catch (error) {
381
+ if (button instanceof HTMLElement) {
382
+ button.setState("failed", 4000);
383
+ button.setMessage(error.message).showMessage(2000);
384
+ }
385
+
386
+ fireCustomEvent(self, "monster-api-button-failed", {
387
+ button,
388
+ error,
389
+ response,
390
+ contentType: response.headers.get("Content-Type"),
391
+ });
392
+ }
393
+ })
394
+ .catch((error) => {
395
+ if (button instanceof HTMLElement) {
396
+ button.setState("failed", 4000);
397
+ button.setMessage("request failed").showMessage(2000);
398
+ }
399
+
400
+ fireCustomEvent(self, "monster-api-button-failed", {
401
+ button,
402
+ error,
403
+ response,
404
+ contentType: response.headers.get("Content-Type"),
405
+ });
406
+ });
407
+ } else {
408
+ return response
409
+ .blob()
410
+ .then((data) => {
411
+ fireCustomEvent(self, "monster-api-button-successful", {
412
+ button,
413
+ data,
414
+ response,
415
+ contentType: response.headers.get("Content-Type"),
416
+ });
417
+ })
418
+ .catch((error) => {
419
+ if (button instanceof HTMLElement) {
420
+ button.setState("failed", 4000);
421
+ button.setMessage("request failed").showMessage(2000);
422
+ }
423
+
424
+ fireCustomEvent(self, "monster-api-button-failed", {
425
+ button,
426
+ error,
427
+ response,
428
+ contentType: response.headers.get("Content-Type"),
429
+ });
430
+ });
431
+ }
432
+ })
433
+ .catch((error) => {
434
+ if (button instanceof HTMLElement) {
435
+ button.setState("failed", 4000);
436
+ button.setMessage(error.message).showMessage(2000);
437
+ }
438
+
439
+ fireCustomEvent(self, "monster-api-button-failed", {
440
+ button,
441
+ error,
442
+ });
443
+ });
444
+ }
445
+
446
+ /**
447
+ * @private
448
+ * @param {string} url
449
+ * @return {Promise}
450
+ * @throws {TypeError} the result cannot be parsed
451
+ * @throws {TypeError} unsupported response
452
+ */
453
+ function fetchData(url) {;
454
+
455
+ if (!url) url = this.getOption("url");
456
+ if (!url) return Promise.resolve();
457
+
458
+ const fetchOptions = this.getOption("fetch", {});
459
+
460
+ const global = getGlobal();
461
+ return global
462
+ .fetch(url, fetchOptions)
463
+ .then((response) => {
464
+ const contentType = response.headers.get("content-type");
465
+ if (contentType && contentType.indexOf("application/json") !== -1) {
466
+ return response.text();
467
+ }
468
+
469
+ throw new TypeError(`unsupported response ${contentType}`);
470
+ })
471
+ .then((text) => {
472
+ try {
473
+ return Promise.resolve(JSON.parse(text));
474
+ } catch (e) {
475
+ throw new TypeError("the result cannot be parsed");
476
+ }
477
+ });
478
+ }
479
+
480
+ /**
481
+ * @private
482
+ * @return {Monster.Components.Form.Popper}
483
+ */
484
+ function initEventHandler() {;
485
+
486
+ this[containerElementSymbol].addEventListener("click", (event) => {
487
+ const element = findTargetElementFromEvent(
488
+ event,
489
+ "data-monster-insert-reference",
490
+ );
491
+ const attr = element.getAttribute("data-monster-insert-reference");
492
+ if (attr) {
493
+ const index = attr.split("-")[1];
494
+ const b = this.getOption("buttons." + index);
495
+ if (isObject(b) && isFunction(b?.action)) {
496
+ b.action(event, element, this);
497
+ }
498
+ }
499
+ });
500
+
501
+ return this;
502
+ }
503
+
504
+ /**
505
+ * @private
506
+ * @return {Monster.Components.Form.ApiButton}
507
+ */
508
+ function initControlReferences() {
509
+ this[containerElementSymbol] = this.shadowRoot.querySelector(
510
+ `[${ATTRIBUTE_ROLE}=container]`,
511
+ );
512
+ return this;
513
+ }
514
+
515
+ registerCustomElement(ApiButton);