@schukai/monster 1.26.1 → 1.29.0

package/source/data/transformer.js

@@ -25,7 +25,7 @@ import {Pathfinder} from "./pathfinder.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * new Monster.Data.Transformer()
  * </script>
  * ```
@@ -34,7 +34,7 @@ import {Pathfinder} from "./pathfinder.js";
  *
  * ```
  * <script type="module">
- * import {Transformer} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/data/transformer.js';
+ * import {Transformer} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/data/transformer.js';
  * new Transformer()
  * </script>
  * ```
@@ -120,7 +120,7 @@ import {Pathfinder} from "./pathfinder.js";
  *
  * @example
  *
- * import {Transformer} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/data/transformer.js';
+ * import {Transformer} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/data/transformer.js';
  *
  * const transformer = new Transformer("tolower")
  *

package/source/dom/assembler.js

@@ -23,7 +23,7 @@ const ATTRIBUTEPREFIX = "data-monster-";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * console.log(new Monster.DOM.Assembler())
  * </script>
  * ```
@@ -32,7 +32,7 @@ const ATTRIBUTEPREFIX = "data-monster-";
  *
  * ```
  * <script type="module">
- * import {Assembler} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/assembler.js';
+ * import {Assembler} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/assembler.js';
  * console.log(new Assembler())
  * </script>
  * ```

package/source/dom/attributes.js

@@ -20,7 +20,7 @@ import {ATTRIBUTE_OBJECTLINK} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * console.log(Monster.DOM.findClosestObjectLink())
  * </script>
  * ```
@@ -29,7 +29,7 @@ import {ATTRIBUTE_OBJECTLINK} from "./constants.js";
  *
  * ```
  * <script type="module">
- * import {getUpdaterFromNode} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/updater.js';
+ * import {getUpdaterFromNode} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/updater.js';
  * console.log(findClosestObjectLink())
  * </script>
  * ```
@@ -50,7 +50,7 @@ function findClosestObjectLink(element) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.addToObjectLink();
  * </script>
  * ```
@@ -59,7 +59,7 @@ function findClosestObjectLink(element) {
  *
  * ```
  * <script type="module">
- * import {addToObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {addToObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * addToObjectLink();
  * </script>
  * ```
@@ -92,7 +92,7 @@ function addToObjectLink(element, symbol, object) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.removeObjectLink();
  * </script>
  * ```
@@ -101,7 +101,7 @@ function addToObjectLink(element, symbol, object) {
  *
  * ```
  * <script type="module">
- * import {removeObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {removeObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * removeObjectLink();
  * </script>
  * ```
@@ -134,7 +134,7 @@ function removeObjectLink(element, symbol) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.hasObjectLink();
  * </script>
  * ```
@@ -143,7 +143,7 @@ function removeObjectLink(element, symbol) {
  *
  * ```
  * <script type="module">
- * import {hasObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {hasObjectLink} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * hasObjectLink();
  * </script>
  * ```
@@ -180,7 +180,7 @@ function hasObjectLink(element, symbol) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.getLinkedObjects();
  * </script>
  * ```
@@ -189,7 +189,7 @@ function hasObjectLink(element, symbol) {
  *
  * ```
  * <script type="module">
- * import {getLinkedObjects} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {getLinkedObjects} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * getLinkedObjects();
  * </script>
  * ```
@@ -225,7 +225,7 @@ function getLinkedObjects(element, symbol) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.toggleAttributeToken();
  * </script>
  * ```
@@ -234,7 +234,7 @@ function getLinkedObjects(element, symbol) {
  *
  * ```
  * <script type="module">
- * import {toggleAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {toggleAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * toggleAttributeToken();
  * </script>
  * ```
@@ -269,7 +269,7 @@ function toggleAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.addAttributeToken();
  * </script>
  * ```
@@ -278,7 +278,7 @@ function toggleAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {addAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {addAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * addAttributeToken();
  * </script>
  * ```
@@ -315,7 +315,7 @@ function addAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.removeAttributeToken();
  * </script>
  * ```
@@ -324,7 +324,7 @@ function addAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {removeAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {removeAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * removeAttributeToken();
  * </script>
  * ```
@@ -360,7 +360,7 @@ function removeAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.containsAttributeToken();
  * </script>
  * ```
@@ -369,7 +369,7 @@ function removeAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {containsAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {containsAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * containsAttributeToken();
  * </script>
  * ```
@@ -402,7 +402,7 @@ function containsAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.replaceAttributeToken();
  * </script>
  * ```
@@ -411,7 +411,7 @@ function containsAttributeToken(element, key, token) {
  *
  * ```
  * <script type="module">
- * import {replaceAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {replaceAttributeToken} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * replaceAttributeToken();
  * </script>
  * ```
@@ -447,7 +447,7 @@ function replaceAttributeToken(element, key, from, to) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.clearAttributeTokens();
  * </script>
  * ```
@@ -456,7 +456,7 @@ function replaceAttributeToken(element, key, from, to) {
  *
  * ```
  * <script type="module">
- * import {clearAttributeTokens} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {clearAttributeTokens} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * clearAttributeTokens();
  * </script>
  * ```
@@ -482,11 +482,29 @@ function clearAttributeTokens(element, key) {
 }
 
 /**
+ * This function searches, starting from an `HTMLElemement`, for the next element that has a certain attribute.
+ *
+ * ```html
+ * <div data-my-attribute="2" id="2">
+ *     <div id="1"></div>
+ * </div>
+ * ```
+ *
+ * ```javascript
+ * // if no value is specified (undefined), then only the attribute is checked.
+ * findClosestByAttribute(document.getElementById('1'),'data-my-attribute'); // ↦ node with id 2
+ * findClosestByAttribute(document.getElementById('2'),'data-my-attribute'); // ↦ node with id 2
+ *
+ * // if a value is specified, for example an empty string, then the name and the value are checked.
+ * findClosestByAttribute(document.getElementById('1'),'data-my-attribute', '');  // ↦ undefined
+ * findClosestByAttribute(document.getElementById('1'),'data-my-attribute', '2'); // ↦ node with id 2
+ * ```
+ *
  * You can call the method via the monster namespace `new Monster.DOM.findClosestByAttribute()`.
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * Monster.DOM.findClosestByAttribute();
  * </script>
  * ```
@@ -495,7 +513,7 @@ function clearAttributeTokens(element, key) {
  *
  * ```
  * <script type="module">
- * import {findClosestByAttribute} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/attributes.js';
+ * import {findClosestByAttribute} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
  * findClosestByAttribute();
  * </script>
  * ```
@@ -507,12 +525,20 @@ function clearAttributeTokens(element, key) {
  * @param {string} key
  * @param {string|undefined} value
  * @return {HTMLElement|undefined}
+ * @summary find closest node
  */
 function findClosestByAttribute(element, key, value) {
     validateInstance(element, getGlobalFunction('HTMLElement'));
 
-    if (element.hasAttribute(key) && element.getAttribute(key) === value) {
-        return element;
+    if (element.hasAttribute(key)) {
+        if (value === undefined) {
+            return element;
+        }
+
+        if (element.getAttribute(key) === value) {
+            return element;
+        }
+
     }
 
     let selector = validateString(key);
@@ -524,8 +550,64 @@ function findClosestByAttribute(element, key, value) {
     return undefined;
 }
 
+/**
+ * This function searches, starting from an `HTMLElemement`, for the next element that has a certain attribute.
+ *
+ * ```html
+ * <div class="myclass" id="2">
+ *     <div id="1"></div>
+ * </div>
+ * ```
+ *
+ * ```javascript
+ * // if no value is specified (undefined), then only the attribute is checked.
+ * findClosestByClass(document.getElementById('1'),'myclass'); // ↦ node with id 2
+ * findClosestByClass(document.getElementById('2'),'myclass'); // ↦ node with id 2
+ * ```
+ *
+ * You can call the method via the monster namespace `new Monster.DOM.findClosestByClass()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
+ * Monster.DOM.findClosestByClass();
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {findClosestByClass} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/attributes.js';
+ * findClosestByClass();
+ * </script>
+ * ```
+ *
+ * @since 1.27.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM
+ * @param {HTMLElement} element
+ * @param {string} className
+ * @return {HTMLElement|undefined}
+ * @summary find closest node
+ */
+function findClosestByClass(element, className) {
+    validateInstance(element, getGlobalFunction('HTMLElement'));
+
+    if (element?.classList?.contains(validateString(className))) {
+        return element;
+    }
+
+    let result = element.closest('.' + className);
+    if (result instanceof HTMLElement) {
+        return result;
+    }
+    
+    return undefined;
+}
+
 // exports
-assignToNamespace('Monster.DOM', getLinkedObjects, addToObjectLink, removeObjectLink, findClosestByAttribute, hasObjectLink, clearAttributeTokens, replaceAttributeToken, containsAttributeToken, removeAttributeToken, addAttributeToken, toggleAttributeToken);
+assignToNamespace('Monster.DOM', findClosestByClass, getLinkedObjects, addToObjectLink, removeObjectLink, findClosestByAttribute, hasObjectLink, clearAttributeTokens, replaceAttributeToken, containsAttributeToken, removeAttributeToken, addAttributeToken, toggleAttributeToken);
 export {
     Monster,
     addToObjectLink,
@@ -539,5 +621,6 @@ export {
     addAttributeToken,
     toggleAttributeToken,
     getLinkedObjects,
-    findClosestObjectLink
+    findClosestObjectLink,
+    findClosestByClass
 }

package/source/dom/constants.js

@@ -49,6 +49,13 @@ const ATTRIBUTE_THEME_NAME = ATTRIBUTE_THEME_PREFIX + 'name';
  */
 const ATTRIBUTE_UPDATER_ATTRIBUTES = ATTRIBUTE_PREFIX + 'attributes';
 
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.27.1
+ */
+const ATTRIBUTE_UPDATER_SELECT_THIS = ATTRIBUTE_PREFIX + 'select-this';
+
 /**
  * @memberOf Monster.DOM
  * @type {string}
@@ -84,6 +91,13 @@ const ATTRIBUTE_UPDATER_REMOVE = ATTRIBUTE_PREFIX + 'remove';
  */
 const ATTRIBUTE_UPDATER_BIND = ATTRIBUTE_PREFIX + 'bind';
 
+/**
+ * @memberOf Monster.DOM
+ * @type {string}
+ * @since 1.27.0
+ */
+const ATTRIBUTE_TEMPLATE_PREFIX = ATTRIBUTE_PREFIX + 'template-prefix';
+
 /**
  * @memberOf Monster.DOM
  * @type {string}
@@ -414,5 +428,7 @@ export {
     ATTRIBUTE_DISABLED,
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_VALUE,
-    objectUpdaterLinkSymbol
+    objectUpdaterLinkSymbol,
+    ATTRIBUTE_TEMPLATE_PREFIX,
+    ATTRIBUTE_UPDATER_SELECT_THIS
 } 

package/source/dom/customcontrol.js

@@ -30,7 +30,7 @@ const attachedInternalSymbol = Symbol('attachedInternal');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * document.createElement('monster-')
  * </script>
  * ```

package/source/dom/customelement.js

@@ -3,7 +3,7 @@
 /**
  * @author schukai GmbH
  */
- 
+
 import {internalSymbol} from "../constants.js";
 import {extend} from "../data/extend.js";
 import {Pathfinder} from "../data/pathfinder.js";
@@ -13,7 +13,7 @@ import {getGlobalObject} from "../types/global.js";
 import {isArray, isFunction, isObject, isString} from "../types/is.js";
 import {Observer} from "../types/observer.js";
 import {ProxyObserver} from "../types/proxyobserver.js";
-import {validateFunction, validateInstance, validateObject} from "../types/validate.js";
+import {validateFunction, validateInstance, validateObject, validateString} from "../types/validate.js";
 import {clone} from "../util/clone.js";
 import {addToObjectLink, getLinkedObjects, hasObjectLink} from "./attributes.js";
 import {ATTRIBUTE_DISABLED, ATTRIBUTE_OPTIONS, objectUpdaterLinkSymbol} from "./constants.js";
@@ -96,7 +96,7 @@ const attributeObserverSymbol = Symbol('attributeObserver');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * document.createElement('monster-')
  * </script>
  * ```
@@ -521,36 +521,49 @@ class CustomElement extends HTMLElement {
 
 /**
  * @private
- * @param {String} filter
+ * @param {String|undefined} query
+ * @param {String|undefined|null} name name of the slot (if the parameter is undefined, all slots are searched, if the parameter has the value null, all slots without a name are searched. if a string is specified, the slots with this name are searched.)
  * @return {*}
  * @this CustomElement
  * @since 1.23.0
+ * @throws {Error} query must be a string
  */
-function getSlottedElements(filter) {
+function getSlottedElements(query, name) {
     const self = this;
     const result = new Set;
 
-
     if (!(self.shadowRoot instanceof ShadowRoot)) {
         return result;
     }
 
-    const slots = self.shadowRoot.querySelectorAll('slot');
+    let selector = 'slot';
+    if (name !== undefined) {
+        if (name === null) {
+            selector += ':not([name])';
+        } else {
+            selector += '[name=' + validateString(name) + ']';
+        }
+
+    }
+
+    const slots = self.shadowRoot.querySelectorAll(selector);
 
     for (const [, slot] of Object.entries(slots)) {
         slot.assignedElements().forEach(function (node) {
 
             if (!(node instanceof HTMLElement)) return;
 
-            if (filter !== undefined) {
-                node.querySelectorAll(filter).forEach(function (n) {
+            if (isString(query)) {
+                node.querySelectorAll(query).forEach(function (n) {
                     result.add(n);
                 });
 
-                if (node.matches(filter)) {
+                if (node.matches(query)) {
                     result.add(node);
                 }
 
+            } else if (query !== undefined) {
+                throw new Error('query must be a string')
             } else {
                 result.add(node);
             }
@@ -836,12 +849,12 @@ function assignUpdaterToElement(elements, object) {
         ])
     }
 
-    let result = []; 
+    let result = [];
 
     elements.forEach((element) => {
         if (!(element instanceof HTMLElement)) return;
         if ((element instanceof HTMLTemplateElement)) return;
-        
+
         const u = new Updater(element, object)
         updaters.add(u);
 
@@ -866,5 +879,6 @@ export {
     initMethodSymbol,
     assembleMethodSymbol,
     assignUpdaterToElement,
-    attributeObserverSymbol
+    attributeObserverSymbol,
+    getSlottedElements
 }

package/source/dom/events.js

@@ -1,10 +1,11 @@
 'use strict';
 
+
 /**
  * @author schukai GmbH
  */
 import {assignToNamespace, Monster} from '../namespace.js';
-import {isArray} from "../types/is.js";
+import {isArray,isObject} from "../types/is.js";
 import {validateInstance, validateString} from "../types/validate.js";
 import {getDocument} from "./util.js";
 
@@ -13,8 +14,8 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
- * console.log(new Monster.DOM.fireEvent())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
+ * new Monster.DOM.fireEvent()
  * </script>
  * ```
  *
@@ -22,8 +23,8 @@ import {getDocument} from "./util.js";
  *
  * ```
  * <script type="module">
- * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/events.js';
- * console.log(fireEvent())
+ * import {fireEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/events.js';
+ * fireEvent()
  * </script>
  * ```
  *
@@ -64,6 +65,62 @@ function fireEvent(element, type) {
 
 }
 
+/**
+ * You can call the function via the monster namespace `new Monster.DOM.fireCustomEvent()`.
+ *
+ * ```
+ * <script type="module">
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
+ * new Monster.DOM.fireCustomEvent()
+ * </script>
+ * ```
+ *
+ * Alternatively, you can also integrate this function individually.
+ *
+ * ```
+ * <script type="module">
+ * import {fireCustomEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/events.js';
+ * fireCustomEvent()
+ * </script>
+ * ```
+ *
+ * @param {HTMLElement|HTMLCollection|NodeList} element
+ * @param {string} type
+ * @return {void}
+ * @since 1.29.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.DOM
+ * @throws {TypeError} value is not an instance of HTMLElement or HTMLCollection
+ * @summary Construct and send and event
+ */
+function fireCustomEvent(element, type, detail) {
+
+    const document = getDocument();
+
+    if (element instanceof HTMLElement) {
+
+        if (!isObject(detail)) {
+            detail = {detail};
+        }
+
+        let event = new CustomEvent(validateString(type), {
+            bubbles: true,
+            cancelable: true,
+            detail
+        });
+
+        element.dispatchEvent(event);
+
+    } else if (element instanceof HTMLCollection || element instanceof NodeList) {
+        for (let e of element) {
+            fireCustomEvent(e, type, detail);
+        }
+    } else {
+        throw new TypeError('value is not an instance of HTMLElement or HTMLCollection')
+    }
+
+}
+
 /**
  * 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, or a value that is undefined or null,
@@ -73,8 +130,8 @@ function fireEvent(element, type) {
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
- * console.log(new Monster.DOM.findTargetElementFromEvent())
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
+ * new Monster.DOM.findTargetElementFromEvent()
  * </script>
  * ```
  *
@@ -82,8 +139,8 @@ function fireEvent(element, type) {
  *
  * ```
  * <script type="module">
- * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/events.js';
- * console.log(findTargetElementFromEvent())
+ * import {findTargetElementFromEvent} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/events.js';
+ * findTargetElementFromEvent()
  * </script>
  * ```
  *
@@ -105,7 +162,6 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
     }
 
     const path = event.composedPath();
-    const element = path?.[0];
 
     // closest cannot be used here, because closest is not correct for slotted elements
     if (isArray(path)) {
@@ -125,5 +181,5 @@ function findTargetElementFromEvent(event, attributeName, attributeValue) {
 }
 
 
-assignToNamespace('Monster.DOM', findTargetElementFromEvent, fireEvent);
-export {Monster, findTargetElementFromEvent, fireEvent}
+assignToNamespace('Monster.DOM', findTargetElementFromEvent, fireEvent, fireCustomEvent);
+export {Monster, findTargetElementFromEvent, fireEvent, fireCustomEvent}

package/source/dom/focusmanager.js

@@ -41,7 +41,7 @@ const stackSymbol = Symbol('stack');
  *
  * ```
  * <script type="module">
- * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/monster.js';
+ * import {Monster} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/monster.js';
  * new Monster.DOM.FocusManager()
  * </script>
  * ```
@@ -50,7 +50,7 @@ const stackSymbol = Symbol('stack');
  *
  * ```
  * <script type="module">
- * import {FocusManager} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.26.1/dist/modules/dom/focusmanager.js';
+ * import {FocusManager} from 'https://cdn.jsdelivr.net/npm/@schukai/monster@1.29.0/dist/modules/dom/focusmanager.js';
  * new FocusManager()
  * </script>
  * ```