@schukai/monster 1.17.1 → 1.20.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (145) hide show
  1. package/CHANGELOG +32 -0
  2. package/README.md +4 -4
  3. package/dist/modules/constants.js +1 -1
  4. package/dist/modules/constraints/abstract.js +1 -1
  5. package/dist/modules/constraints/abstractoperator.js +1 -1
  6. package/dist/modules/constraints/andoperator.js +1 -1
  7. package/dist/modules/constraints/invalid.js +1 -1
  8. package/dist/modules/constraints/isarray.js +1 -1
  9. package/dist/modules/constraints/isobject.js +1 -1
  10. package/dist/modules/constraints/namespace.js +1 -1
  11. package/dist/modules/constraints/oroperator.js +1 -1
  12. package/dist/modules/constraints/valid.js +1 -1
  13. package/dist/modules/data/buildmap.js +1 -1
  14. package/dist/modules/data/diff.js +2 -2
  15. package/dist/modules/data/extend.js +1 -1
  16. package/dist/modules/data/namespace.js +1 -1
  17. package/dist/modules/data/pathfinder.js +1 -1
  18. package/dist/modules/data/pipe.js +1 -1
  19. package/dist/modules/data/transformer.js +1 -1
  20. package/dist/modules/dom/assembler.js +1 -1
  21. package/dist/modules/dom/attributes.js +1 -1
  22. package/dist/modules/dom/constants.js +1 -1
  23. package/dist/modules/dom/customcontrol.js +1 -1
  24. package/dist/modules/dom/customelement.js +2 -2
  25. package/dist/modules/dom/events.js +2 -2
  26. package/dist/modules/dom/locale.js +1 -1
  27. package/dist/modules/dom/namespace.js +1 -1
  28. package/dist/modules/dom/template.js +1 -1
  29. package/dist/modules/dom/theme.js +1 -1
  30. package/dist/modules/dom/updater.js +1 -1
  31. package/dist/modules/dom/util.js +1 -1
  32. package/dist/modules/i18n/locale.js +1 -1
  33. package/dist/modules/i18n/namespace.js +1 -1
  34. package/dist/modules/i18n/provider.js +1 -1
  35. package/dist/modules/i18n/providers/fetch.js +1 -1
  36. package/dist/modules/i18n/providers/namespace.js +1 -1
  37. package/dist/modules/i18n/translations.js +1 -1
  38. package/dist/modules/logging/handler/console.js +1 -1
  39. package/dist/modules/logging/handler/namespace.js +1 -1
  40. package/dist/modules/logging/handler.js +1 -1
  41. package/dist/modules/logging/logentry.js +1 -1
  42. package/dist/modules/logging/logger.js +1 -1
  43. package/dist/modules/logging/namespace.js +1 -1
  44. package/dist/modules/math/namespace.js +1 -1
  45. package/dist/modules/math/random.js +1 -1
  46. package/dist/modules/monster.js +1 -1
  47. package/dist/modules/namespace.js +1 -1
  48. package/dist/modules/text/formatter.js +1 -1
  49. package/dist/modules/text/namespace.js +1 -1
  50. package/dist/modules/types/base.js +1 -1
  51. package/dist/modules/types/basewithoptions.js +1 -1
  52. package/dist/modules/types/binary.js +2 -0
  53. package/dist/modules/types/dataurl.js +2 -0
  54. package/dist/modules/types/global.js +1 -1
  55. package/dist/modules/types/id.js +1 -1
  56. package/dist/modules/types/is.js +2 -2
  57. package/dist/modules/types/mediatype.js +2 -0
  58. package/dist/modules/types/namespace.js +1 -1
  59. package/dist/modules/types/observer.js +1 -1
  60. package/dist/modules/types/observerlist.js +1 -1
  61. package/dist/modules/types/proxyobserver.js +1 -1
  62. package/dist/modules/types/queue.js +1 -1
  63. package/dist/modules/types/randomid.js +1 -1
  64. package/dist/modules/types/stack.js +1 -1
  65. package/dist/modules/types/tokenlist.js +1 -1
  66. package/dist/modules/types/typeof.js +1 -1
  67. package/dist/modules/types/uniquequeue.js +1 -1
  68. package/dist/modules/types/validate.js +1 -1
  69. package/dist/modules/types/version.js +2 -2
  70. package/dist/modules/util/clone.js +1 -1
  71. package/dist/modules/util/comparator.js +1 -1
  72. package/dist/modules/util/freeze.js +1 -1
  73. package/dist/modules/util/namespace.js +1 -1
  74. package/dist/monster.dev.js +1018 -341
  75. package/dist/monster.dev.js.map +1 -1
  76. package/dist/monster.js +2 -2
  77. package/package.json +6 -1
  78. package/source/constraints/andoperator.js +5 -5
  79. package/source/constraints/invalid.js +3 -3
  80. package/source/constraints/isarray.js +3 -3
  81. package/source/constraints/isobject.js +3 -3
  82. package/source/constraints/oroperator.js +5 -5
  83. package/source/constraints/valid.js +3 -3
  84. package/source/data/buildmap.js +6 -6
  85. package/source/data/diff.js +4 -4
  86. package/source/data/extend.js +2 -2
  87. package/source/data/pathfinder.js +4 -4
  88. package/source/data/pipe.js +3 -3
  89. package/source/data/transformer.js +3 -3
  90. package/source/dom/assembler.js +3 -2
  91. package/source/dom/attributes.js +27 -27
  92. package/source/dom/customcontrol.js +22 -13
  93. package/source/dom/customelement.js +126 -6
  94. package/source/dom/events.js +21 -9
  95. package/source/dom/locale.js +3 -2
  96. package/source/dom/template.js +18 -6
  97. package/source/dom/theme.js +4 -3
  98. package/source/dom/updater.js +9 -6
  99. package/source/dom/util.js +6 -6
  100. package/source/i18n/locale.js +4 -4
  101. package/source/i18n/provider.js +3 -3
  102. package/source/i18n/providers/fetch.js +5 -5
  103. package/source/i18n/translations.js +2 -2
  104. package/source/logging/handler/console.js +2 -2
  105. package/source/logging/handler.js +2 -2
  106. package/source/logging/logentry.js +2 -2
  107. package/source/logging/logger.js +2 -2
  108. package/source/math/random.js +2 -2
  109. package/source/namespace.js +1 -1
  110. package/source/text/formatter.js +2 -2
  111. package/source/types/base.js +2 -2
  112. package/source/types/basewithoptions.js +2 -2
  113. package/source/types/binary.js +92 -0
  114. package/source/types/dataurl.js +176 -0
  115. package/source/types/global.js +4 -4
  116. package/source/types/id.js +2 -2
  117. package/source/types/is.js +21 -21
  118. package/source/types/mediatype.js +236 -0
  119. package/source/types/observer.js +3 -3
  120. package/source/types/observerlist.js +2 -2
  121. package/source/types/package.d.ts +1 -0
  122. package/source/types/proxyobserver.js +5 -5
  123. package/source/types/queue.js +4 -3
  124. package/source/types/randomid.js +3 -2
  125. package/source/types/stack.js +2 -2
  126. package/source/types/tokenlist.js +2 -2
  127. package/source/types/typeof.js +3 -3
  128. package/source/types/uniquequeue.js +3 -2
  129. package/source/types/validate.js +20 -20
  130. package/source/types/version.js +7 -6
  131. package/source/util/clone.js +2 -2
  132. package/source/util/comparator.js +3 -3
  133. package/source/util/freeze.js +2 -2
  134. package/test/cases/data/diff.js +29 -2
  135. package/test/cases/dom/customelement.js +85 -12
  136. package/test/cases/dom/events.js +5 -3
  137. package/test/cases/monster.js +1 -1
  138. package/test/cases/types/binary.js +27 -0
  139. package/test/cases/types/dataurl.js +58 -0
  140. package/test/cases/types/mediatype.js +60 -0
  141. package/test/web/import.js +3 -0
  142. package/test/web/monster-dev.html +3 -3
  143. package/test/web/monster.html +2 -2
  144. package/test/web/test.html +3 -3
  145. package/test/web/tests.js +3 -3
@@ -20,6 +20,8 @@ const internalSymbol = Symbol('internalSymbol');
20
20
  * IMPORTANT: after defining a `CustomElement`, the `registerCustomElement` method must be called
21
21
  * with the new class name. only then will the tag defined via the `getTag` method be made known to the DOM.
22
22
  *
23
+ * <img src="./images/customcontrol-class.png">
24
+ *
23
25
  * This control uses `attachInternals()` to integrate the control into a form.
24
26
  * If the target environment does not support this method, the [polyfill](https://www.npmjs.com/package/element-internals-polyfill ) can be used.
25
27
  *
@@ -27,7 +29,7 @@ const internalSymbol = Symbol('internalSymbol');
27
29
  *
28
30
  * ```
29
31
  * <script type="module">
30
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customcontrol.js';
32
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customcontrol.js';
31
33
  * console.log(new Monster.DOM.CustomControl())
32
34
  * </script>
33
35
  * ```
@@ -36,15 +38,22 @@ const internalSymbol = Symbol('internalSymbol');
36
38
  *
37
39
  * ```
38
40
  * <script type="module">
39
- * import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customcontrol.js';
41
+ * import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customcontrol.js';
40
42
  * console.log(new CustomControl())
41
43
  * </script>
42
44
  * ```
43
- *
44
- * @summary A base class for customcontrols
45
- * @see https://www.npmjs.com/package/element-internals-polyfill
46
- * @see https://github.com/WICG/webcomponents
47
- * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
45
+ *
46
+ * @startuml customcontrol-class.png
47
+ * skinparam monochrome true
48
+ * skinparam shadowing false
49
+ * HTMLElement <|-- CustomElement
50
+ * CustomElement <|-- CustomControl
51
+ * @enduml
52
+ *
53
+ * @summary A base class for customcontrols based on CustomElement
54
+ * @see {@link https://www.npmjs.com/package/element-internals-polyfill}
55
+ * @see {@link https://github.com/WICG/webcomponents}
56
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements}
48
57
  * @since 1.14.0
49
58
  * @copyright schukai GmbH
50
59
  * @memberOf Monster.DOM
@@ -73,7 +82,7 @@ class CustomControl extends CustomElement {
73
82
 
74
83
  /**
75
84
  *
76
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
85
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
77
86
  * @since 1.14.0
78
87
  * @return {boolean}
79
88
  */
@@ -92,8 +101,8 @@ class CustomControl extends CustomElement {
92
101
  * }
93
102
  * ```
94
103
  *
95
- * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example
96
- * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
104
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example}
105
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
97
106
  * @return {object}
98
107
  * @since 1.14.0
99
108
  */
@@ -131,7 +140,7 @@ class CustomControl extends CustomElement {
131
140
  *
132
141
  * @return {NodeList}
133
142
  * @since 1.14.0
134
- * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels
143
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels}
135
144
  * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
136
145
  */
137
146
  get labels() {
@@ -161,8 +170,8 @@ class CustomControl extends CustomElement {
161
170
  *
162
171
  * @return {ValidityState}
163
172
  * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
164
- * @see https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
165
- * @see https://developer.mozilla.org/en-US/docs/Web/API/validity
173
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState}
174
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/validity}
166
175
  */
167
176
  get validity() {
168
177
  return getInternal.call(this)?.validity;
@@ -7,11 +7,12 @@ import {Pathfinder} from "../data/pathfinder.js";
7
7
  * @author schukai GmbH
8
8
  */
9
9
  import {assignToNamespace, Monster} from '../namespace.js';
10
+ import {parseDataURL} from "../types/dataurl.js";
10
11
  import {getGlobalObject} from "../types/global.js";
11
12
  import {isArray, isString} from "../types/is.js";
12
13
  import {Observer} from "../types/observer.js";
13
14
  import {ProxyObserver} from "../types/proxyobserver.js";
14
- import {validateFunction, validateObject} from "../types/validate.js";
15
+ import {validateFunction, validateInstance, validateObject} from "../types/validate.js";
15
16
  import {clone} from "../util/clone.js";
16
17
  import {addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.js";
17
18
  import {ATTRIBUTE_OPTIONS, OBJECTLINK_KEY_UPDATER} from "./constants.js";
@@ -47,6 +48,43 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
47
48
  * HTMLElement
48
49
  * @external HTMLElement
49
50
  * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
51
+ *
52
+ * @startuml customelement-sequencediagram.png
53
+ * skinparam monochrome true
54
+ * skinparam shadowing false
55
+ *
56
+ * autonumber
57
+ *
58
+ * Script -> DOM: element = document.createElement('my-element')
59
+ * DOM -> CustomElement: constructor()
60
+ * CustomElement -> CustomElement: [initMethodSymbol]()
61
+ *
62
+ * CustomElement --> DOM: Element
63
+ * DOM --> Script : element
64
+ *
65
+ *
66
+ * Script -> DOM: document.querySelector('body').append(element)
67
+ *
68
+ * DOM -> CustomElement : connectedCallback()
69
+ *
70
+ * note right CustomElement: is only called at\nthe first connection
71
+ * CustomElement -> CustomElement : [assembleMethodSymbol]()
72
+ *
73
+ * ... ...
74
+ *
75
+ * autonumber
76
+ *
77
+ * Script -> DOM: document.querySelector('monster-confirm-button').parentNode.removeChild(element)
78
+ * DOM -> CustomElement: disconnectedCallback()
79
+ *
80
+ *
81
+ * @enduml
82
+ *
83
+ * @startuml customelement-class.png
84
+ * skinparam monochrome true
85
+ * skinparam shadowing false
86
+ * HTMLElement <|-- CustomElement
87
+ * @enduml
50
88
  */
51
89
 
52
90
 
@@ -56,11 +94,13 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
56
94
  * IMPORTANT: after defining a `CustomElement`, the `registerCustomElement` method must be called
57
95
  * with the new class name. only then will the tag defined via the `getTag` method be made known to the DOM.
58
96
  *
97
+ * <img src="./images/customelement-class.png">
98
+ *
59
99
  * You can create the object via the monster namespace `new Monster.DOM.CustomElement()`.
60
100
  *
61
101
  * ```
62
102
  * <script type="module">
63
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customelement.js';
103
+ * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customelement.js';
64
104
  * console.log(new Monster.DOM.CustomElement())
65
105
  * </script>
66
106
  * ```
@@ -69,11 +109,15 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
69
109
  *
70
110
  * ```
71
111
  * <script type="module">
72
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customelement.js';
112
+ * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customelement.js';
73
113
  * console.log(new CustomElement())
74
114
  * </script>
75
115
  * ```
76
116
  *
117
+ * ## Interaction
118
+ *
119
+ * <img src="./images/customelement-sequencediagram.png">
120
+ *
77
121
  * ## Styling
78
122
  *
79
123
  * For optimal display of custom-elements the pseudo-class :defined can be used.
@@ -156,6 +200,7 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
156
200
  * @copyright schukai GmbH
157
201
  * @memberOf Monster.DOM
158
202
  * @extends external:HTMLElement
203
+ * @summary A base class for HTML5 customcontrols
159
204
  */
160
205
  class CustomElement extends HTMLElement {
161
206
 
@@ -184,7 +229,6 @@ class CustomElement extends HTMLElement {
184
229
  }
185
230
 
186
231
  /**
187
- *
188
232
  * Derived classes can override and extend this method as follows.
189
233
  *
190
234
  * ```
@@ -195,6 +239,21 @@ class CustomElement extends HTMLElement {
195
239
  * }
196
240
  * ```
197
241
  *
242
+ * to set the options via the html tag the attribute data-monster-options must be set.
243
+ * As value a JSON object with the desired values must be defined.
244
+ *
245
+ * Since 1.18.0 the JSON can be specified as a DataURI.
246
+ *
247
+ * ```
248
+ * new Monster.Types.DataUrl(btoa(JSON.stringify({
249
+ * shadowMode: 'open',
250
+ * delegatesFocus: true,
251
+ * templates: {
252
+ * main: undefined
253
+ * }
254
+ * })),'application/json',true).toString()
255
+ * ```
256
+ *
198
257
  * @property {string} shadowMode=open `open` Elements of the shadow root are accessible from JavaScript outside the root, for example using. `close` Denies access to the node(s) of a closed shadow root from JavaScript outside it
199
258
  * @property {Boolean} delegatesFocus=true A boolean that, when set to true, specifies behavior that mitigates custom element issues around focusability. When a non-focusable part of the shadow DOM is clicked, the first focusable part is given focus, and the shadow host is given any available :focus styling.
200
259
  * @property {Object} templates Templates
@@ -247,7 +306,7 @@ class CustomElement extends HTMLElement {
247
306
  * ;
248
307
  * ```
249
308
  *
250
- * @return {CSSStyleSheet|undefined}
309
+ * @return {CSSStyleSheet|CSSStyleSheet[]|string|undefined}
251
310
  */
252
311
  static getCSSStyleSheet() {
253
312
  return undefined;
@@ -445,6 +504,53 @@ class CustomElement extends HTMLElement {
445
504
 
446
505
  }
447
506
 
507
+ /**
508
+ *
509
+ * @param {Node} node
510
+ * @return {boolean}
511
+ * @throws {TypeError} value is not an instance of
512
+ * @since 1.19.0
513
+ */
514
+ hasNode(node) {
515
+ const self = this;
516
+
517
+
518
+ if (containChildNode.call(self, validateInstance(node, Node))) {
519
+ return true;
520
+ }
521
+
522
+ if (!(self.shadowRoot instanceof ShadowRoot)) {
523
+ return false;
524
+ }
525
+
526
+ return containChildNode.call(self.shadowRoot, node);
527
+
528
+ }
529
+
530
+ }
531
+
532
+ /**
533
+ * @private
534
+ * @param {Node} node
535
+ * @return {boolean}
536
+ */
537
+ function containChildNode(node) {
538
+ const self = this;
539
+
540
+ if (self.contains(node)) {
541
+ return true;
542
+ }
543
+
544
+ for (const [, e] of Object.entries(self.childNodes)) {
545
+ if (e.contains(node)) {
546
+ return true;
547
+ }
548
+
549
+ containChildNode.call(e, node);
550
+ }
551
+
552
+
553
+ return false;
448
554
  }
449
555
 
450
556
  /**
@@ -492,9 +598,23 @@ function getOptionsFromAttributes() {
492
598
  return {};
493
599
  }
494
600
 
495
-
601
+ /**
602
+ * @private
603
+ * @param data
604
+ * @return {Object}
605
+ */
496
606
  function parseOptionsJSON(data) {
497
607
  if (isString(data)) {
608
+
609
+ // the configuration can be specified as a data url.
610
+ try {
611
+ let dataUrl = parseDataURL(data);
612
+ data = dataUrl.content;
613
+ } catch (e) {
614
+
615
+ }
616
+
617
+
498
618
  try {
499
619
  let obj = JSON.parse(data);
500
620
  validateObject(obj);
@@ -4,8 +4,8 @@
4
4
  * @author schukai GmbH
5
5
  */
6
6
  import {assignToNamespace, Monster} from '../namespace.js';
7
+ import {isArray} from "../types/is.js";
7
8
  import {validateInstance, validateString} from "../types/validate.js";
8
- import {findClosestByAttribute} from "./attributes.js";
9
9
  import {getDocument} from "./util.js";
10
10
 
11
11
  /**
@@ -13,7 +13,7 @@ import {getDocument} from "./util.js";
13
13
  *
14
14
  * ```
15
15
  * <script type="module">
16
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
16
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
17
17
  * console.log(new Monster.DOM.fireEvent())
18
18
  * </script>
19
19
  * ```
@@ -22,7 +22,7 @@ import {getDocument} from "./util.js";
22
22
  *
23
23
  * ```
24
24
  * <script type="module">
25
- * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
25
+ * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
26
26
  * console.log(fireEvent())
27
27
  * </script>
28
28
  * ```
@@ -34,6 +34,7 @@ import {getDocument} from "./util.js";
34
34
  * @copyright schukai GmbH
35
35
  * @memberOf Monster.DOM
36
36
  * @throws {TypeError} value is not an instance of HTMLElement or HTMLCollection
37
+ * @summary Construct and send and event
37
38
  */
38
39
  function fireEvent(element, type) {
39
40
 
@@ -65,13 +66,14 @@ function fireEvent(element, type) {
65
66
 
66
67
  /**
67
68
  * This function gets the path `Event.composedPath()` from an event and tries to find the next element
68
- * up the tree `element.closest()` with the attribute and value. If no value is specified, only the attribute is searched.
69
+ * up the tree `element.closest()` with the attribute and value. If no value, or a value that is undefined or null,
70
+ * is specified, only the attribute is searched.
69
71
  *
70
72
  * You can call the function via the monster namespace `new Monster.DOM.findTargetElementFromEvent()`.
71
73
  *
72
74
  * ```
73
75
  * <script type="module">
74
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
76
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
75
77
  * console.log(new Monster.DOM.findTargetElementFromEvent())
76
78
  * </script>
77
79
  * ```
@@ -80,7 +82,7 @@ function fireEvent(element, type) {
80
82
  *
81
83
  * ```
82
84
  * <script type="module">
83
- * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
85
+ * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
84
86
  * console.log(findTargetElementFromEvent())
85
87
  * </script>
86
88
  * ```
@@ -88,11 +90,12 @@ function fireEvent(element, type) {
88
90
  * @since 1.14.0
89
91
  * @param {Event} event
90
92
  * @param {string} attributeName
91
- * @param {string|null} attributeValue
93
+ * @param {string|null|undefined} attributeValue
92
94
  * @throws {Error} unsupported event
93
95
  * @memberOf Monster.DOM
94
96
  * @throws {TypeError} value is not a string
95
97
  * @throws {TypeError} value is not an instance of HTMLElement
98
+ * @summary Help function to find the appropriate control
96
99
  */
97
100
  function findTargetElementFromEvent(event, attributeName, attributeValue) {
98
101
  validateInstance(event, Event);
@@ -104,8 +107,17 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
104
107
  const path = event.composedPath();
105
108
  const element = path?.[0];
106
109
 
107
- if (element instanceof HTMLElement) {
108
- return findClosestByAttribute(element, attributeName, attributeValue);
110
+ // closest cannot be used here, because closest is not correct for slotted elements
111
+ if (isArray(path)) {
112
+ for (let i = 0; i < path.length; i++) {
113
+ const o = path[i];
114
+
115
+ if (o instanceof HTMLElement &&
116
+ o.hasAttribute(attributeName)
117
+ && (attributeValue===undefined || o.getAttribute(attributeName) === attributeValue)) {
118
+ return o;
119
+ }
120
+ }
109
121
  }
110
122
 
111
123
  return undefined;
@@ -21,7 +21,7 @@ const DEFAULT_LANGUAGE = 'en';
21
21
  *
22
22
  * ```
23
23
  * <script type="module">
24
- * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/locale.js';
24
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/locale.js';
25
25
  * console.log(new Monster.DOM.getLocaleOfDocument())
26
26
  * </script>
27
27
  * ```
@@ -30,7 +30,7 @@ const DEFAULT_LANGUAGE = 'en';
30
30
  *
31
31
  * ```
32
32
  * <script type="module">
33
- * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/locale.js';
33
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/locale.js';
34
34
  * console.log(new getLocaleOfDocument())
35
35
  * </script>
36
36
  * ```
@@ -40,6 +40,7 @@ const DEFAULT_LANGUAGE = 'en';
40
40
  * @memberOf Monster.DOM
41
41
  * @throws {TypeError} value is not a string
42
42
  * @throws {Error} unsupported locale
43
+ * @summary Tries to determine the locale used
43
44
  */
44
45
  function getLocaleOfDocument() {
45
46
 
@@ -14,7 +14,7 @@ import {getDocumentTheme} from "./theme.js";
14
14
  *
15
15
  * ```
16
16
  * <script type="module">
17
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
17
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
18
18
  * console.log(new Monster.DOM.Template())
19
19
  * </script>
20
20
  * ```
@@ -23,7 +23,7 @@ import {getDocumentTheme} from "./theme.js";
23
23
  *
24
24
  * ```
25
25
  * <script type="module">
26
- * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
26
+ * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
27
27
  * console.log(new Template())
28
28
  * </script>
29
29
  * ```
@@ -31,6 +31,7 @@ import {getDocumentTheme} from "./theme.js";
31
31
  * @since 1.6.0
32
32
  * @copyright schukai GmbH
33
33
  * @memberOf Monster.DOM
34
+ * @summary A template class
34
35
  */
35
36
  class Template extends Base {
36
37
  /**
@@ -67,13 +68,24 @@ class Template extends Base {
67
68
  }
68
69
 
69
70
  /**
71
+ * This method loads a template with the given ID and returns it.
70
72
  *
73
+ * To do this, it first fetches the theme of the document and looks for the `data-monster-theme-name` attribute in the HTML tag.
71
74
  *
72
- * you can call the method via the monster namespace `Monster.DOM.findDocumentTemplate()`.
75
+ * ```
76
+ * <html data-monster-theme-name="my-theme">
77
+ * ```
78
+ *
79
+ * If no theme was specified, the default theme is `monster`.
80
+ *
81
+ * Now it is looked if there is a template with the given ID and theme `id-theme` and if yes it is returned.
82
+ * If there is no template a search for a template with the given ID `id` is done. If this is also not found, an error is thrown.
83
+ *
84
+ * You can call the method via the monster namespace `Monster.DOM.findDocumentTemplate()`.
73
85
  *
74
86
  * ```
75
87
  * <script type="module">
76
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
88
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
77
89
  * console.log(Monster.DOM.findDocumentTemplate())
78
90
  * </script>
79
91
  * ```
@@ -82,14 +94,14 @@ class Template extends Base {
82
94
  *
83
95
  * ```
84
96
  * <script type="module">
85
- * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
97
+ * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
86
98
  * console.log(findDocumentTemplate())
87
99
  * </script>
88
100
  * ```
89
101
  *
90
102
  * @param {string} id
91
103
  * @param {Node} currentNode
92
- * @return {Template}
104
+ * @return {Monster.DOM.Template}
93
105
  * @since 1.7.0
94
106
  * @copyright schukai GmbH
95
107
  * @memberOf Monster.DOM
@@ -15,7 +15,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
15
15
  *
16
16
  * ```
17
17
  * <script type="module">
18
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/theme.js';
18
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
19
19
  * console.log(new Monster.DOM.Theme())
20
20
  * </script>
21
21
  * ```
@@ -24,14 +24,14 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
24
24
  *
25
25
  * ```
26
26
  * <script type="module">
27
- * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/theme.js';
27
+ * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
28
28
  * console.log(new Theme())
29
29
  * </script>
30
30
  * ```
31
31
  *
32
32
  * @example
33
33
  *
34
- * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/theme.js';
34
+ * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
35
35
  *
36
36
  * const theme = getDocumentTheme();
37
37
  * console.log(theme.getName());
@@ -40,6 +40,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
40
40
  * @since 1.7.0
41
41
  * @copyright schukai GmbH
42
42
  * @memberOf Monster.DOM
43
+ * @summary A theme class
43
44
  */
44
45
  class Theme extends Base {
45
46
 
@@ -26,15 +26,16 @@ import {getDocument} from "./util.js";
26
26
 
27
27
 
28
28
  /**
29
- * The updater class connects an object with the dom. in this way, structures and contents in the DOM can be programmatically adapted via attributes.
29
+ * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
30
30
  *
31
- * For example, to include a string from an object, the attribute `data-monster-replace` can be used.
31
+ * For example, to include a string from an object, the attribute `data-monster-replace` can be used.
32
+ * a further explanation can be found under {@tutorial dom-based-templating-implementation}.
32
33
  *
33
34
  * you can call the method via the monster namespace `new Monster.DOM.Updater()`.
34
35
  *
35
36
  * ```
36
37
  * <script type="module">
37
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/updater.js';
38
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
38
39
  * console.log(new Monster.DOM.Updater())
39
40
  * </script>
40
41
  * ```
@@ -43,14 +44,14 @@ import {getDocument} from "./util.js";
43
44
  *
44
45
  * ```
45
46
  * <script type="module">
46
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/updater.js';
47
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
47
48
  * console.log(new Updater())
48
49
  * </script>
49
50
  * ```
50
51
  *
51
52
  * @example
52
53
  *
53
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/updater.js';
54
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
54
55
  *
55
56
  * // First we prepare the html document.
56
57
  * // This is done here via script, but can also be inserted into the document as pure html.
@@ -83,6 +84,7 @@ import {getDocument} from "./util.js";
83
84
  * @throws {Error} the maximum depth for the recursion is reached.
84
85
  * @throws {TypeError} value is not a object
85
86
  * @throws {TypeError} value is not an instance of HTMLElement
87
+ * @summary The updater class connects an object with the dom
86
88
  */
87
89
  class Updater extends Base {
88
90
 
@@ -92,6 +94,7 @@ class Updater extends Base {
92
94
  * @param {object|ProxyObserver|undefined} subject
93
95
  * @throws {TypeError} value is not a object
94
96
  * @throws {TypeError} value is not an instance of HTMLElement
97
+ * @see {@link Monster.DOM.findDocumentTemplate}
95
98
  */
96
99
  constructor(element, subject) {
97
100
  super();
@@ -136,7 +139,7 @@ class Updater extends Base {
136
139
  /**
137
140
  * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
138
141
  *
139
- * @see https://developer.mozilla.org/de/docs/Web/Events
142
+ * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
140
143
  * @since 1.9.0
141
144
  * @param {Array} types
142
145
  * @return {Updater}
@@ -13,7 +13,7 @@ import {validateString} from "../types/validate.js";
13
13
  *
14
14
  * ```
15
15
  * <script type="module">
16
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
16
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
17
17
  * console.log(Monster.DOM.getDocument())
18
18
  * </script>
19
19
  * ```
@@ -22,7 +22,7 @@ import {validateString} from "../types/validate.js";
22
22
  *
23
23
  * ```
24
24
  * <script type="module">
25
- * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
25
+ * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
26
26
  * console.log(getDocument())
27
27
  * </script>
28
28
  * ```
@@ -74,7 +74,7 @@ function getDocument() {
74
74
  *
75
75
  * ```
76
76
  * <script type="module">
77
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
77
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
78
78
  * console.log(Monster.DOM.getWindow())
79
79
  * </script>
80
80
  * ```
@@ -83,7 +83,7 @@ function getDocument() {
83
83
  *
84
84
  * ```
85
85
  * <script type="module">
86
- * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
86
+ * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
87
87
  * console.log(getWindow(null))
88
88
  * </script>
89
89
  * ```
@@ -140,7 +140,7 @@ function getWindow() {
140
140
  *
141
141
  * ```
142
142
  * <script type="module">
143
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
143
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
144
144
  * console.log(Monster.DOM.getDocumentFragmentFromString())
145
145
  * </script>
146
146
  * ```
@@ -149,7 +149,7 @@ function getWindow() {
149
149
  *
150
150
  * ```
151
151
  * <script type="module">
152
- * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
152
+ * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
153
153
  * console.log(getDocumentFragmentFromString('<div></div>'))
154
154
  * </script>
155
155
  * ```
@@ -25,7 +25,7 @@ const localeStringSymbol = Symbol('localeString');
25
25
  *
26
26
  * ```
27
27
  * <script type="module">
28
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
28
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
29
29
  * console.log(new Monster.I18n.Locale())
30
30
  * </script>
31
31
  * ```
@@ -34,7 +34,7 @@ const localeStringSymbol = Symbol('localeString');
34
34
  *
35
35
  * ```
36
36
  * <script type="module">
37
- * import {Locale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
37
+ * import {Locale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
38
38
  * console.log(new Locale())
39
39
  * </script>
40
40
  * ```
@@ -201,7 +201,7 @@ class Locale extends Base {
201
201
  *
202
202
  * ```
203
203
  * <script type="module">
204
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
204
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
205
205
  * console.log(new Monster.I18n.createLocale())
206
206
  * </script>
207
207
  * ```
@@ -210,7 +210,7 @@ class Locale extends Base {
210
210
  *
211
211
  * ```
212
212
  * <script type="module">
213
- * import {createLocale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
213
+ * import {createLocale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
214
214
  * console.log(createLocale())
215
215
  * </script>
216
216
  * ```