@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.
- package/CHANGELOG.md +17 -0
- package/README.md +15 -12
- package/example/components/form/button.mjs +10 -0
- package/example/components/form/select.mjs +25 -0
- package/example/components/form/tree-select.mjs +27 -0
- package/example/components/host/host.mjs +0 -0
- package/example/components/notify/message.mjs +4 -0
- package/example/components/notify/notify.mjs +4 -0
- package/example/components/state/log.mjs +0 -0
- package/example/components/state/state.mjs +0 -0
- package/package.json +6 -2
- package/source/components/constants.mjs +132 -0
- package/source/components/datatable/columnbar.mjs +310 -0
- package/source/components/datatable/constants.mjs +121 -0
- package/source/components/datatable/dataset.mjs +219 -0
- package/source/components/datatable/datasource/dom.mjs +186 -0
- package/source/components/datatable/datasource/namespace.mjs +13 -0
- package/source/components/datatable/datasource/rest.mjs +400 -0
- package/source/components/datatable/datasource.mjs +102 -0
- package/source/components/datatable/datatable/header.mjs +268 -0
- package/source/components/datatable/datatable/namespace.mjs +13 -0
- package/source/components/datatable/datatable.mjs +789 -0
- package/source/components/datatable/embedded-pagination.mjs +113 -0
- package/source/components/datatable/filter/abstract-base.mjs +31 -0
- package/source/components/datatable/filter/date-range.mjs +1041 -0
- package/source/components/datatable/filter/input.mjs +175 -0
- package/source/components/datatable/filter/namespace.mjs +13 -0
- package/source/components/datatable/filter/range.mjs +671 -0
- package/source/components/datatable/filter/select.mjs +65 -0
- package/source/components/datatable/filter/settings.mjs +116 -0
- package/source/components/datatable/filter-button.mjs +98 -0
- package/source/components/datatable/filter.mjs +929 -0
- package/source/components/datatable/namespace.mjs +11 -0
- package/source/components/datatable/pagination.mjs +456 -0
- package/source/components/datatable/style/column-bar.pcss +123 -0
- package/source/components/datatable/style/dataset.pcss +13 -0
- package/source/components/datatable/style/datasource.pcss +16 -0
- package/source/components/datatable/style/datatable.pcss +239 -0
- package/source/components/datatable/style/embedded-pagination.pcss +101 -0
- package/source/components/datatable/style/filter-button.pcss +22 -0
- package/source/components/datatable/style/filter-controls-defaults.pcss +46 -0
- package/source/components/datatable/style/filter-date-range.pcss +9 -0
- package/source/components/datatable/style/filter-range.pcss +5 -0
- package/source/components/datatable/style/filter.pcss +156 -0
- package/source/components/datatable/style/pagination.pcss +59 -0
- package/source/components/datatable/style/select-filter.pcss +27 -0
- package/source/components/datatable/stylesheet/column-bar.mjs +33 -0
- package/source/components/datatable/stylesheet/dataset.mjs +33 -0
- package/source/components/datatable/stylesheet/datasource.mjs +33 -0
- package/source/components/datatable/stylesheet/datatable.mjs +33 -0
- package/source/components/datatable/stylesheet/embedded-pagination.mjs +33 -0
- package/source/components/datatable/stylesheet/filter-button.mjs +33 -0
- package/source/components/datatable/stylesheet/filter-controls-defaults.mjs +33 -0
- package/source/components/datatable/stylesheet/filter-date-range.mjs +33 -0
- package/source/components/datatable/stylesheet/filter-range.mjs +33 -0
- package/source/components/datatable/stylesheet/filter.mjs +33 -0
- package/source/components/datatable/stylesheet/namespace.mjs +13 -0
- package/source/components/datatable/stylesheet/pagination.mjs +33 -0
- package/source/components/datatable/stylesheet/select-filter.mjs +33 -0
- package/source/components/datatable/util.mjs +60 -0
- package/source/components/form/action-button.mjs +262 -0
- package/source/components/form/api-button.mjs +515 -0
- package/source/components/form/button-bar.mjs +739 -0
- package/source/components/form/button.mjs +350 -0
- package/source/components/form/confirm-button.mjs +330 -0
- package/source/components/form/constants.mjs +111 -0
- package/source/components/form/context-help.mjs +123 -0
- package/source/components/form/events.mjs +84 -0
- package/source/components/form/form.mjs +601 -0
- package/source/components/form/message-state-button.mjs +396 -0
- package/source/components/form/namespace.mjs +13 -0
- package/source/components/form/popper-button.mjs +435 -0
- package/source/components/form/popper.mjs +487 -0
- package/source/components/form/reload.mjs +360 -0
- package/source/components/form/select.mjs +2314 -0
- package/source/components/form/shadow-reload.mjs +137 -0
- package/source/components/form/state-button.mjs +182 -0
- package/source/components/form/style/action-button.pcss +41 -0
- package/source/components/form/style/api-button.pcss +0 -0
- package/source/components/form/style/button-bar.pcss +51 -0
- package/source/components/form/style/button.pcss +8 -0
- package/source/components/form/style/confirm-button.pcss +17 -0
- package/source/components/form/style/context-help.pcss +16 -0
- package/source/components/form/style/form.pcss +10 -0
- package/source/components/form/style/message-state-button.pcss +10 -0
- package/source/components/form/style/popper-button.pcss +16 -0
- package/source/components/form/style/popper.pcss +8 -0
- package/source/components/form/style/select.pcss +265 -0
- package/source/components/form/style/state-button.pcss +116 -0
- package/source/components/form/style/tabs.pcss +170 -0
- package/source/components/form/style/tree-select.pcss +81 -0
- package/source/components/form/stylesheet/action-button.mjs +33 -0
- package/source/components/form/stylesheet/api-button.mjs +33 -0
- package/source/components/form/stylesheet/button-bar.mjs +33 -0
- package/source/components/form/stylesheet/button.mjs +33 -0
- package/source/components/form/stylesheet/confirm-button.mjs +33 -0
- package/source/components/form/stylesheet/context-help.mjs +33 -0
- package/source/components/form/stylesheet/form.mjs +33 -0
- package/source/components/form/stylesheet/message-state-button.mjs +33 -0
- package/source/components/form/stylesheet/namespace.mjs +13 -0
- package/source/components/form/stylesheet/popper-button.mjs +33 -0
- package/source/components/form/stylesheet/popper.mjs +33 -0
- package/source/components/form/stylesheet/select.mjs +33 -0
- package/source/components/form/stylesheet/state-button.mjs +33 -0
- package/source/components/form/stylesheet/tabs.mjs +33 -0
- package/source/components/form/stylesheet/tree-select.mjs +33 -0
- package/source/components/form/tabs.mjs +1011 -0
- package/source/components/form/template.mjs +373 -0
- package/source/components/form/tree-select.mjs +527 -0
- package/source/components/form/types/namespace.mjs +13 -0
- package/source/components/form/types/state.mjs +93 -0
- package/source/components/form/util/fetch.mjs +133 -0
- package/source/components/form/util/floating-ui.mjs +245 -0
- package/source/components/form/util/namespace.mjs +13 -0
- package/source/components/form/util/popper.mjs +49 -0
- package/source/components/host/call-button.mjs +236 -0
- package/source/components/host/collapse.mjs +526 -0
- package/source/components/host/config-manager.mjs +304 -0
- package/source/components/host/constants.mjs +18 -0
- package/source/components/host/details.mjs +268 -0
- package/source/components/host/events.mjs +131 -0
- package/source/components/host/host.mjs +420 -0
- package/source/components/host/namespace.mjs +13 -0
- package/source/components/host/overlay.mjs +339 -0
- package/source/components/host/style/call-button.pcss +36 -0
- package/source/components/host/style/collapse.pcss +67 -0
- package/source/components/host/style/config-manager.pcss +5 -0
- package/source/components/host/style/details.pcss +68 -0
- package/source/components/host/style/host.pcss +43 -0
- package/source/components/host/style/overlay.pcss +73 -0
- package/source/components/host/style/toggle-button.pcss +36 -0
- package/source/components/host/style/viewer.pcss +13 -0
- package/source/components/host/stylesheet/call-button.mjs +33 -0
- package/source/components/host/stylesheet/collapse.mjs +33 -0
- package/source/components/host/stylesheet/config-manager.mjs +33 -0
- package/source/components/host/stylesheet/details.mjs +33 -0
- package/source/components/host/stylesheet/host.mjs +33 -0
- package/source/components/host/stylesheet/namespace.mjs +13 -0
- package/source/components/host/stylesheet/overlay.mjs +33 -0
- package/source/components/host/stylesheet/toggle-button.mjs +33 -0
- package/source/components/host/stylesheet/viewer.mjs +33 -0
- package/source/components/host/toggle-button.mjs +88 -0
- package/source/components/host/util.mjs +23 -0
- package/source/components/host/viewer.mjs +309 -0
- package/source/components/namespace.mjs +14 -0
- package/source/components/notify/constants.mjs +15 -0
- package/source/components/notify/events.mjs +15 -0
- package/source/components/notify/message.mjs +374 -0
- package/source/components/notify/namespace.mjs +15 -0
- package/source/components/notify/notify.mjs +236 -0
- package/source/components/notify/style/message.pcss +57 -0
- package/source/components/notify/style/notify.pcss +118 -0
- package/source/components/notify/stylesheet/message.mjs +33 -0
- package/source/components/notify/stylesheet/namespace.mjs +15 -0
- package/source/components/notify/stylesheet/notify.mjs +33 -0
- package/source/components/state/log/entry.mjs +126 -0
- package/source/components/state/log/namespace.mjs +13 -0
- package/source/components/state/log.mjs +275 -0
- package/source/components/state/namespace.mjs +13 -0
- package/source/components/state/state.mjs +131 -0
- package/source/components/state/style/log.pcss +111 -0
- package/source/components/state/style/state.pcss +113 -0
- package/source/components/state/stylesheet/log.mjs +33 -0
- package/source/components/state/stylesheet/state.mjs +33 -0
- package/source/components/style/badge.pcss +92 -0
- package/source/components/style/border.pcss +77 -0
- package/source/components/style/button.pcss +105 -0
- package/source/components/style/card.pcss +108 -0
- package/source/components/style/color.pcss +257 -0
- package/source/components/style/common.pcss +103 -0
- package/source/components/style/control.pcss +11 -0
- package/source/components/style/data-grid.pcss +43 -0
- package/source/components/style/display.pcss +42 -0
- package/source/components/style/floating-ui.pcss +33 -0
- package/source/components/style/form.pcss +5 -0
- package/source/components/style/host.pcss +15 -0
- package/source/components/style/link.pcss +63 -0
- package/source/components/style/mixin/badge.pcss +18 -0
- package/source/components/style/mixin/button.pcss +54 -0
- package/source/components/style/mixin/form.pcss +247 -0
- package/source/components/style/mixin/hover.pcss +8 -0
- package/source/components/style/mixin/media.pcss +107 -0
- package/source/components/style/mixin/property.pcss +288 -0
- package/source/components/style/mixin/skeleton.pcss +26 -0
- package/source/components/style/mixin/spinner.pcss +24 -0
- package/source/components/style/mixin/typography.pcss +52 -0
- package/source/components/style/normalize.pcss +14 -0
- package/source/components/style/popper.pcss +78 -0
- package/source/components/style/property.pcss +17 -0
- package/source/components/style/ripple.pcss +14 -0
- package/source/components/style/skeleton.pcss +28 -0
- package/source/components/style/space.pcss +47 -0
- package/source/components/style/spinner.pcss +6 -0
- package/source/components/style/table.pcss +46 -0
- package/source/components/style/theme.pcss +119 -0
- package/source/components/style/typography.pcss +131 -0
- package/source/components/stylesheet/badge.mjs +33 -0
- package/source/components/stylesheet/border.mjs +33 -0
- package/source/components/stylesheet/button.mjs +33 -0
- package/source/components/stylesheet/card.mjs +33 -0
- package/source/components/stylesheet/color.mjs +33 -0
- package/source/components/stylesheet/common.mjs +33 -0
- package/source/components/stylesheet/control.mjs +33 -0
- package/source/components/stylesheet/data-grid.mjs +33 -0
- package/source/components/stylesheet/display.mjs +33 -0
- package/source/components/stylesheet/floating-ui.mjs +33 -0
- package/source/components/stylesheet/form.mjs +33 -0
- package/source/components/stylesheet/host.mjs +33 -0
- package/source/components/stylesheet/link.mjs +33 -0
- package/source/components/stylesheet/namespace.mjs +13 -0
- package/source/components/stylesheet/normalize.mjs +33 -0
- package/source/components/stylesheet/popper.mjs +33 -0
- package/source/components/stylesheet/property.mjs +33 -0
- package/source/components/stylesheet/ripple.mjs +33 -0
- package/source/components/stylesheet/skeleton.mjs +33 -0
- package/source/components/stylesheet/space.mjs +33 -0
- package/source/components/stylesheet/spinner.mjs +33 -0
- package/source/components/stylesheet/table.mjs +33 -0
- package/source/components/stylesheet/theme.mjs +33 -0
- package/source/components/stylesheet/tree-menu.mjs +33 -0
- package/source/components/stylesheet/typography.mjs +33 -0
- package/source/components/tree-menu/namespace.mjs +13 -0
- package/source/components/tree-menu/style/tree-menu.pcss +107 -0
- package/source/components/tree-menu/stylesheet/namespace.mjs +13 -0
- package/source/components/tree-menu/stylesheet/tree-menu.mjs +33 -0
- package/source/components/tree-menu/tree-menu.mjs +660 -0
- package/source/constraints/abstract.mjs +17 -24
- package/source/constraints/abstractoperator.mjs +27 -22
- package/source/constraints/andoperator.mjs +20 -17
- package/source/constraints/invalid.mjs +17 -17
- package/source/constraints/isarray.mjs +20 -20
- package/source/constraints/isobject.mjs +20 -20
- package/source/constraints/oroperator.mjs +45 -45
- package/source/constraints/valid.mjs +17 -17
- package/source/data/buildmap.mjs +108 -103
- package/source/data/buildtree.mjs +59 -57
- package/source/data/datasource/dom.mjs +80 -84
- package/source/data/datasource/namespace.mjs +1 -1
- package/source/data/datasource/server/restapi/data-fetch-error.mjs +27 -25
- package/source/data/datasource/server/restapi/writeerror.mjs +34 -32
- package/source/data/datasource/server/restapi.mjs +176 -177
- package/source/data/datasource/server/webconnect.mjs +150 -156
- package/source/data/datasource/server.mjs +58 -59
- package/source/data/datasource/storage/localstorage.mjs +25 -24
- package/source/data/datasource/storage/sessionstorage.mjs +28 -25
- package/source/data/datasource/storage.mjs +74 -73
- package/source/data/datasource.mjs +176 -167
- package/source/data/diff.mjs +98 -97
- package/source/data/extend.mjs +42 -42
- package/source/data/pathfinder.mjs +301 -288
- package/source/data/pipe.mjs +36 -36
- package/source/data/transformer.mjs +742 -726
- package/source/dom/assembler.mjs +44 -44
- package/source/dom/attributes.mjs +142 -122
- package/source/dom/constants.mjs +62 -58
- package/source/dom/customcontrol.mjs +299 -299
- package/source/dom/customelement.mjs +843 -806
- package/source/dom/dimension.mjs +56 -46
- package/source/dom/events.mjs +74 -69
- package/source/dom/focusmanager.mjs +175 -175
- package/source/dom/locale.mjs +28 -28
- package/source/dom/ready.mjs +13 -13
- package/source/dom/resource/data.mjs +117 -111
- package/source/dom/resource/link/stylesheet.mjs +16 -16
- package/source/dom/resource/link.mjs +94 -96
- package/source/dom/resource/script.mjs +72 -74
- package/source/dom/resource.mjs +174 -172
- package/source/dom/resourcemanager.mjs +152 -156
- package/source/dom/slotted.mjs +78 -80
- package/source/dom/template.mjs +126 -112
- package/source/dom/theme.mjs +35 -35
- package/source/dom/updater.mjs +673 -651
- package/source/dom/util/extract-keys.mjs +34 -22
- package/source/dom/util/init-options-from-attributes.mjs +46 -38
- package/source/dom/util/namespace.mjs +13 -0
- package/source/dom/util/set-option-from-attribute.mjs +35 -29
- package/source/dom/util.mjs +112 -81
- package/source/dom/worker/factory.mjs +83 -83
- package/source/i18n/formatter.mjs +75 -73
- package/source/i18n/locale.mjs +146 -144
- package/source/i18n/provider.mjs +70 -64
- package/source/i18n/providers/embed.mjs +136 -127
- package/source/i18n/providers/fetch.mjs +84 -76
- package/source/i18n/translations.mjs +205 -195
- package/source/logging/handler/console.mjs +36 -36
- package/source/logging/handler.mjs +140 -140
- package/source/logging/logentry.mjs +25 -25
- package/source/logging/logger.mjs +177 -175
- package/source/math/random.mjs +63 -59
- package/source/monster.mjs +223 -103
- package/source/net/webconnect/message.mjs +31 -31
- package/source/net/webconnect.mjs +278 -271
- package/source/text/bracketed-key-value-hash.mjs +182 -179
- package/source/text/formatter.mjs +235 -210
- package/source/text/generate-range-comparison-expression.mjs +56 -34
- package/source/text/namespace.mjs +1 -1
- package/source/types/base.mjs +69 -61
- package/source/types/basewithoptions.mjs +46 -46
- package/source/types/binary.mjs +20 -20
- package/source/types/dataurl.mjs +96 -90
- package/source/types/global.mjs +45 -39
- package/source/types/id.mjs +25 -25
- package/source/types/internal.mjs +115 -114
- package/source/types/is.mjs +56 -40
- package/source/types/mediatype.mjs +119 -119
- package/source/types/namespace.mjs +1 -1
- package/source/types/node.mjs +160 -150
- package/source/types/nodelist.mjs +94 -96
- package/source/types/noderecursiveiterator.mjs +50 -50
- package/source/types/observablequeue.mjs +73 -73
- package/source/types/observer.mjs +104 -104
- package/source/types/observerlist.mjs +66 -66
- package/source/types/proxyobserver.mjs +210 -210
- package/source/types/queue.mjs +63 -63
- package/source/types/randomid.mjs +13 -13
- package/source/types/regex.mjs +3 -1
- package/source/types/stack.mjs +64 -64
- package/source/types/tokenlist.mjs +206 -205
- package/source/types/typeof.mjs +12 -10
- package/source/types/uniquequeue.mjs +48 -48
- package/source/types/uuid.mjs +32 -32
- package/source/types/validate.mjs +67 -67
- package/source/types/version.mjs +115 -105
- package/source/util/clone.mjs +103 -91
- package/source/util/comparator.mjs +97 -97
- package/source/util/deadmansswitch.mjs +40 -44
- package/source/util/freeze.mjs +10 -9
- package/source/util/namespace.mjs +1 -1
- package/source/util/processing.mjs +104 -105
- package/source/util/runtime.mjs +56 -44
- package/source/util/trimspaces.mjs +24 -24
- package/test/cases/components/form/button.mjs +122 -0
- package/test/cases/components/form/confirm-button.mjs +127 -0
- package/test/cases/components/form/form.mjs +317 -0
- package/test/cases/components/form/reload.mjs +188 -0
- package/test/cases/components/form/select.mjs +229 -0
- package/test/cases/components/form/state-button.mjs +130 -0
- package/test/cases/components/form/tabs.mjs +98 -0
- package/test/cases/components/form/template.mjs +189 -0
- package/test/cases/components/form/tree-select.mjs +216 -0
- package/test/cases/components/host/details.mjs +68 -0
- package/test/cases/components/host/host.mjs +70 -0
- package/test/cases/components/host/overlay.mjs +60 -0
- package/test/cases/components/host/util.mjs +79 -0
- package/test/cases/components/notify/message.mjs +39 -0
- package/test/cases/components/notify/notify.mjs +89 -0
- package/test/cases/dom/customcontrol.mjs +5 -4
- package/test/cases/math/random.mjs +0 -1
- package/test/cases/monster.mjs +1 -1
- package/test/cases/net/webconnect/message.mjs +0 -1
- package/test/cases/types/node.mjs +1 -1
- package/test/util/chai-dom.mjs +2 -2
- package/test/util/intersection-mock.mjs +69 -0
- package/test/util/jsdom.mjs +41 -25
- package/test/util/localstorage.mjs +1 -0
- package/test/util/resize-observer.mjs +29 -0
- package/test/util/websocket.mjs +4 -1
- package/test/web/import.js +16 -1
- package/test/web/test.html +28 -5
- 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);
|