@schukai/monster 1.17.1 → 1.20.0

package/source/dom/customcontrol.js

@@ -20,6 +20,8 @@ const internalSymbol = Symbol('internalSymbol');
  * IMPORTANT: after defining a `CustomElement`, the `registerCustomElement` method must be called
  * with the new class name. only then will the tag defined via the `getTag` method be made known to the DOM.
  *
+ * <img src="./images/customcontrol-class.png">
+ * 
  * This control uses `attachInternals()` to integrate the control into a form.
  * If the target environment does not support this method, the [polyfill](https://www.npmjs.com/package/element-internals-polyfill ) can be used.
  *
@@ -27,7 +29,7 @@ const internalSymbol = Symbol('internalSymbol');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customcontrol.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customcontrol.js';
  * console.log(new Monster.DOM.CustomControl())
  * </script>
  * ```
@@ -36,15 +38,22 @@ const internalSymbol = Symbol('internalSymbol');
  *
  * ```
  * <script type="module">
- * import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customcontrol.js';
+ * import {CustomControl} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customcontrol.js';
  * console.log(new CustomControl())
  * </script>
  * ```
- *
- * @summary A base class for customcontrols
- * @see https://www.npmjs.com/package/element-internals-polyfill
- * @see https://github.com/WICG/webcomponents
- * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements
+ * 
+ * @startuml customcontrol-class.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * @enduml
+ * 
+ * @summary A base class for customcontrols based on CustomElement
+ * @see {@link https://www.npmjs.com/package/element-internals-polyfill}
+ * @see {@link https://github.com/WICG/webcomponents}
+ * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements}
  * @since 1.14.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
@@ -73,7 +82,7 @@ class CustomControl extends CustomElement {
 
     /**
      *
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
      * @since 1.14.0
      * @return {boolean}
      */
@@ -92,8 +101,8 @@ class CustomControl extends CustomElement {
      * }
      * ```
      *
-     * @see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals
+     * @see {@link https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-face-example}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
      * @return {object}
      * @since 1.14.0
      */
@@ -131,7 +140,7 @@ class CustomControl extends CustomElement {
      *
      * @return {NodeList}
      * @since 1.14.0
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/labels}
      * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
      */
     get labels() {
@@ -161,8 +170,8 @@ class CustomControl extends CustomElement {
      *
      * @return {ValidityState}
      * @throws {Error} the ElementInternals is not supported and a polyfill is necessary
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/ValidityState
-     * @see https://developer.mozilla.org/en-US/docs/Web/API/validity
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/ValidityState}
+     * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/validity}
      */
     get validity() {
         return getInternal.call(this)?.validity;

package/source/dom/customelement.js

@@ -7,11 +7,12 @@ import {Pathfinder} from "../data/pathfinder.js";
  * @author schukai GmbH
  */
 import {assignToNamespace, Monster} from '../namespace.js';
+import {parseDataURL} from "../types/dataurl.js";
 import {getGlobalObject} from "../types/global.js";
 import {isArray, isString} from "../types/is.js";
 import {Observer} from "../types/observer.js";
 import {ProxyObserver} from "../types/proxyobserver.js";
-import {validateFunction, validateObject} from "../types/validate.js";
+import {validateFunction, validateInstance, validateObject} from "../types/validate.js";
 import {clone} from "../util/clone.js";
 import {addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.js";
 import {ATTRIBUTE_OPTIONS, OBJECTLINK_KEY_UPDATER} from "./constants.js";
@@ -47,6 +48,43 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
  * HTMLElement
  * @external HTMLElement
  * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement
+ *
+ * @startuml customelement-sequencediagram.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ *
+ * autonumber
+ *
+ * Script -> DOM: element = document.createElement('my-element')
+ * DOM -> CustomElement: constructor()
+ * CustomElement -> CustomElement: [initMethodSymbol]()
+ *
+ * CustomElement --> DOM: Element
+ * DOM --> Script : element
+ *
+ *
+ * Script -> DOM: document.querySelector('body').append(element)
+ *
+ * DOM -> CustomElement : connectedCallback()
+ *
+ * note right CustomElement: is only called at\nthe first connection
+ * CustomElement -> CustomElement : [assembleMethodSymbol]()
+ *
+ * ... ...
+ *
+ * autonumber
+ *
+ * Script -> DOM: document.querySelector('monster-confirm-button').parentNode.removeChild(element)
+ * DOM -> CustomElement: disconnectedCallback()
+ *
+ *
+ * @enduml
+ *
+ * @startuml customelement-class.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * @enduml
  */
 
 
@@ -56,11 +94,13 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
  * IMPORTANT: after defining a `CustomElement`, the `registerCustomElement` method must be called
  * with the new class name. only then will the tag defined via the `getTag` method be made known to the DOM.
  *
+ * <img src="./images/customelement-class.png">
+ *
  * You can create the object via the monster namespace `new Monster.DOM.CustomElement()`.
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customelement.js';
+ * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customelement.js';
  * console.log(new Monster.DOM.CustomElement())
  * </script>
  * ```
@@ -69,11 +109,15 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
  *
  * ```
  * <script type="module">
- * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/customelement.js';
+ * import {CustomElement} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/customelement.js';
  * console.log(new CustomElement())
  * </script>
  * ```
  *
+ * ## Interaction
+ *
+ * <img src="./images/customelement-sequencediagram.png">
+ *
  * ## Styling
  *
  * For optimal display of custom-elements the pseudo-class :defined can be used.
@@ -156,6 +200,7 @@ const assembleMethodSymbol = Symbol('assembleMethodSymbol');
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
  * @extends external:HTMLElement
+ * @summary A base class for HTML5 customcontrols
  */
 class CustomElement extends HTMLElement {
 
@@ -184,7 +229,6 @@ class CustomElement extends HTMLElement {
     }
 
     /**
-     *
      * Derived classes can override and extend this method as follows.
      *
      * ```
@@ -195,6 +239,21 @@ class CustomElement extends HTMLElement {
      * }
      * ```
      *
+     * to set the options via the html tag the attribute data-monster-options must be set.
+     * As value a JSON object with the desired values must be defined.
+     *
+     * Since 1.18.0 the JSON can be specified as a DataURI.
+     *
+     * ```
+     * new Monster.Types.DataUrl(btoa(JSON.stringify({
+     *        shadowMode: 'open',
+     *        delegatesFocus: true,
+     *        templates: {
+     *            main: undefined
+     *        }
+     *    })),'application/json',true).toString()
+     * ```
+     *
      * @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
      * @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.
      * @property {Object} templates Templates
@@ -247,7 +306,7 @@ class CustomElement extends HTMLElement {
      * ;
      * ```
      *
-     * @return {CSSStyleSheet|undefined}
+     * @return {CSSStyleSheet|CSSStyleSheet[]|string|undefined}
      */
     static getCSSStyleSheet() {
         return undefined;
@@ -445,6 +504,53 @@ class CustomElement extends HTMLElement {
 
     }
 
+    /**
+     * 
+     * @param {Node} node
+     * @return {boolean}
+     * @throws {TypeError} value is not an instance of
+     * @since 1.19.0
+     */
+    hasNode(node) {
+        const self = this;
+
+
+        if (containChildNode.call(self, validateInstance(node, Node))) {
+            return true;
+        }
+
+        if (!(self.shadowRoot instanceof ShadowRoot)) {
+            return false;
+        }
+
+        return containChildNode.call(self.shadowRoot, node);
+
+    }
+
+}
+
+/**
+ * @private
+ * @param {Node} node
+ * @return {boolean}
+ */
+function containChildNode(node) {
+    const self = this;
+
+    if (self.contains(node)) {
+        return true;
+    }
+
+    for (const [, e] of Object.entries(self.childNodes)) {
+        if (e.contains(node)) {
+            return true;
+        }
+
+        containChildNode.call(e, node);
+    }
+
+
+    return false;
 }
 
 /**
@@ -492,9 +598,23 @@ function getOptionsFromAttributes() {
     return {};
 }
 
-
+/**
+ * @private
+ * @param data
+ * @return {Object}
+ */
 function parseOptionsJSON(data) {
     if (isString(data)) {
+
+        // the configuration can be specified as a data url.
+        try {
+            let dataUrl = parseDataURL(data);
+            data = dataUrl.content;
+        } catch (e) {
+
+        }
+
+
         try {
             let obj = JSON.parse(data);
             validateObject(obj);

package/source/dom/events.js

@@ -4,8 +4,8 @@
  * @author schukai GmbH
  */
 import {assignToNamespace, Monster} from '../namespace.js';
+import {isArray} from "../types/is.js";
 import {validateInstance, validateString} from "../types/validate.js";
-import {findClosestByAttribute} from "./attributes.js";
 import {getDocument} from "./util.js";
 
 /**
@@ -13,7 +13,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
  * console.log(new Monster.DOM.fireEvent())
  * </script>
  * ```
@@ -22,7 +22,7 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
+ * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
  * console.log(fireEvent())
  * </script>
  * ```
@@ -34,6 +34,7 @@ import {getDocument} from "./util.js";
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
  * @throws {TypeError} value is not an instance of HTMLElement or HTMLCollection
+ * @summary Construct and send and event
  */
 function fireEvent(element, type) {
 
@@ -65,13 +66,14 @@ function fireEvent(element, type) {
 
 /**
  * This function gets the path `Event.composedPath()` from an event and tries to find the next element
- * up the tree `element.closest()` with the attribute and value. If no value is specified, only the attribute is searched.
+ * up the tree `element.closest()` with the attribute and value. If no value, or a value that is undefined or null, 
+ * is specified, only the attribute is searched.
  *
  * You can call the function via the monster namespace `new Monster.DOM.findTargetElementFromEvent()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
  * console.log(new Monster.DOM.findTargetElementFromEvent())
  * </script>
  * ```
@@ -80,7 +82,7 @@ function fireEvent(element, type) {
  *
  * ```
  * <script type="module">
- * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/events.js';
+ * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/events.js';
  * console.log(findTargetElementFromEvent())
  * </script>
  * ```
@@ -88,11 +90,12 @@ function fireEvent(element, type) {
  * @since 1.14.0
  * @param {Event} event
  * @param {string} attributeName
- * @param {string|null} attributeValue
+ * @param {string|null|undefined} attributeValue
  * @throws {Error} unsupported event
  * @memberOf Monster.DOM
  * @throws {TypeError} value is not a string
  * @throws {TypeError} value is not an instance of HTMLElement
+ * @summary Help function to find the appropriate control
  */
 function findTargetElementFromEvent(event, attributeName, attributeValue) {
     validateInstance(event, Event);
@@ -104,8 +107,17 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
     const path = event.composedPath();
     const element = path?.[0];
 
-    if (element instanceof HTMLElement) {
-        return findClosestByAttribute(element, attributeName, attributeValue);
+    // closest cannot be used here, because closest is not correct for slotted elements
+    if (isArray(path)) {
+        for (let i = 0; i < path.length; i++) {
+            const o = path[i];
+
+            if (o instanceof HTMLElement &&
+                o.hasAttribute(attributeName)
+                && (attributeValue===undefined || o.getAttribute(attributeName) === attributeValue)) {
+                return o;
+            }
+        }
     }
 
     return undefined;

package/source/dom/locale.js

@@ -21,7 +21,7 @@ const DEFAULT_LANGUAGE = 'en';
  *
  * ```
  * <script type="module">
- * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/locale.js';
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/locale.js';
  * console.log(new Monster.DOM.getLocaleOfDocument())
  * </script>
  * ```
@@ -30,7 +30,7 @@ const DEFAULT_LANGUAGE = 'en';
  *
  * ```
  * <script type="module">
- * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/locale.js';
+ * import {getLocaleOfDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/locale.js';
  * console.log(new getLocaleOfDocument())
  * </script>
  * ```
@@ -40,6 +40,7 @@ const DEFAULT_LANGUAGE = 'en';
  * @memberOf Monster.DOM
  * @throws {TypeError} value is not a string
  * @throws {Error} unsupported locale
+ * @summary Tries to determine the locale used
  */
 function getLocaleOfDocument() {
 

package/source/dom/template.js

@@ -14,7 +14,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
  * console.log(new Monster.DOM.Template())
  * </script>
  * ```
@@ -23,7 +23,7 @@ import {getDocumentTheme} from "./theme.js";
  *
  * ```
  * <script type="module">
- * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
+ * import {Template} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
  * console.log(new Template())
  * </script>
  * ```
@@ -31,6 +31,7 @@ import {getDocumentTheme} from "./theme.js";
  * @since 1.6.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
+ * @summary A template class
  */
 class Template extends Base {
     /**
@@ -67,13 +68,24 @@ class Template extends Base {
 }
 
 /**
+ * This method loads a template with the given ID and returns it.
  *
+ * To do this, it first fetches the theme of the document and looks for the `data-monster-theme-name` attribute in the HTML tag.
  *
- * you can call the method via the monster namespace `Monster.DOM.findDocumentTemplate()`.
+ * ```
+ * <html data-monster-theme-name="my-theme">
+ * ```
+ *
+ * If no theme was specified, the default theme is `monster`.
+ *
+ * Now it is looked if there is a template with the given ID and theme `id-theme` and if yes it is returned. 
+ * 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.
+ *
+ * You can call the method via the monster namespace `Monster.DOM.findDocumentTemplate()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
  * console.log(Monster.DOM.findDocumentTemplate())
  * </script>
  * ```
@@ -82,14 +94,14 @@ class Template extends Base {
  *
  * ```
  * <script type="module">
- * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/template.js';
+ * import {findTemplate} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/template.js';
  * console.log(findDocumentTemplate())
  * </script>
  * ```
  *
  * @param {string} id
  * @param {Node} currentNode
- * @return {Template}
+ * @return {Monster.DOM.Template}
  * @since 1.7.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM

package/source/dom/theme.js

@@ -15,7 +15,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/theme.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
  * console.log(new Monster.DOM.Theme())
  * </script>
  * ```
@@ -24,14 +24,14 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/theme.js';
+ * import {Theme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
  * console.log(new Theme())
  * </script>
  * ```
  *
  * @example
  *
- * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/theme.js';
+ * import {getDocumentTheme} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/theme.js';
  *
  * const theme = getDocumentTheme();
  * console.log(theme.getName());
@@ -40,6 +40,7 @@ import {ATTRIBUTE_THEME_NAME, DEFAULT_THEME} from "./constants.js";
  * @since 1.7.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
+ * @summary A theme class
  */
 class Theme extends Base {
 

package/source/dom/updater.js

@@ -26,15 +26,16 @@ import {getDocument} from "./util.js";
 
 
 /**
- * The updater class connects an object with the dom. in this way, structures and contents in the DOM can be programmatically adapted via attributes.
+ * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
  *
- * For example, to include a string from an object, the attribute `data-monster-replace` can be used.
+ * For example, to include a string from an object, the attribute `data-monster-replace` can be used. 
+ * a further explanation can be found under {@tutorial dom-based-templating-implementation}.
  *
  * you can call the method via the monster namespace `new Monster.DOM.Updater()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/updater.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
  * console.log(new Monster.DOM.Updater())
  * </script>
  * ```
@@ -43,14 +44,14 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
  * console.log(new Updater())
  * </script>
  * ```
  *
  * @example
  *
- * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/updater.js';
+ * import {Updater} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/updater.js';
  *
  * // First we prepare the html document.
  * // 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";
  * @throws {Error} the maximum depth for the recursion is reached.
  * @throws {TypeError} value is not a object
  * @throws {TypeError} value is not an instance of HTMLElement
+ * @summary The updater class connects an object with the dom
  */
 class Updater extends Base {
 
@@ -92,6 +94,7 @@ class Updater extends Base {
      * @param {object|ProxyObserver|undefined} subject
      * @throws {TypeError} value is not a object
      * @throws {TypeError} value is not an instance of HTMLElement
+     * @see {@link Monster.DOM.findDocumentTemplate}
      */
     constructor(element, subject) {
         super();
@@ -136,7 +139,7 @@ class Updater extends Base {
     /**
      * Defaults: 'keyup', 'click', 'change', 'drop', 'touchend'
      *
-     * @see https://developer.mozilla.org/de/docs/Web/Events
+     * @see {@link https://developer.mozilla.org/de/docs/Web/Events}
      * @since 1.9.0
      * @param {Array} types
      * @return {Updater}

package/source/dom/util.js

@@ -13,7 +13,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
  * console.log(Monster.DOM.getDocument())
  * </script>
  * ```
@@ -22,7 +22,7 @@ import {validateString} from "../types/validate.js";
  *
  * ```
  * <script type="module">
- * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
+ * import {getDocument} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
  * console.log(getDocument())
  * </script>
  * ```
@@ -74,7 +74,7 @@ function getDocument() {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
  * console.log(Monster.DOM.getWindow())
  * </script>
  * ```
@@ -83,7 +83,7 @@ function getDocument() {
  *
  * ```
  * <script type="module">
- * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
+ * import {getWindow} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
  * console.log(getWindow(null))
  * </script>
  * ```
@@ -140,7 +140,7 @@ function getWindow() {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
  * console.log(Monster.DOM.getDocumentFragmentFromString())
  * </script>
  * ```
@@ -149,7 +149,7 @@ function getWindow() {
  *
  * ```
  * <script type="module">
- * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/dom/util.js';
+ * import {getDocumentFragmentFromString} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/dom/util.js';
  * console.log(getDocumentFragmentFromString('<div></div>'))
  * </script>
  * ```

package/source/i18n/locale.js

@@ -25,7 +25,7 @@ const localeStringSymbol = Symbol('localeString');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
  * console.log(new Monster.I18n.Locale())
  * </script>
  * ```
@@ -34,7 +34,7 @@ const localeStringSymbol = Symbol('localeString');
  *
  * ```
  * <script type="module">
- * import {Locale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
+ * import {Locale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
  * console.log(new Locale())
  * </script>
  * ```
@@ -201,7 +201,7 @@ class Locale extends Base {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
  * console.log(new Monster.I18n.createLocale())
  * </script>
  * ```
@@ -210,7 +210,7 @@ class Locale extends Base {
  *
  * ```
  * <script type="module">
- * import {createLocale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.17.1/dist/modules/i18n/locale.js';
+ * import {createLocale} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.20.0/dist/modules/i18n/locale.js';
  * console.log(createLocale())
  * </script>
  * ```