CHANGELOG.md

 
+<a name="v3.30.0"></a>
+## [v3.30.0] - 2023-03-16
+### Add Features
+- add util.findElementWithIdUpwards
+
+### Changes
+- update packages
+
+
 <a name="v3.29.0"></a>
 ## [v3.29.0] - 2023-03-16
 ### Add Features
@@ -440,6 +449,7 @@
 <a name="1.8.0"></a>
 ## 1.8.0 - 2021-08-15
 
+[v3.30.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.29.0...v3.30.0
 [v3.29.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.28.0...v3.29.0
 [v3.28.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.27.0...v3.28.0
 [v3.27.0]: https://gitlab.schukai.com/oss/libraries/javascript/monster/compare/v3.26.0...v3.27.0

application/package.json

 {
   "name": "@schukai/monster",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "description": "Monster is a simple library for creating fast, robust and lightweight websites.",
   "keywords": [
     "framework",

application/source/dom/util.mjs

@@ -8,7 +8,7 @@
 import { getGlobal } from "../types/global.mjs";
 import { validateString } from "../types/validate.mjs";
 
-export { getDocument, getWindow, getDocumentFragmentFromString };
+export { getDocument, getWindow, getDocumentFragmentFromString, findElementWithIdUpwards };
 
 /**
  * This method fetches the document object
@@ -151,3 +151,52 @@ function getDocumentFragmentFromString(html) {
 
     return template.content;
 }
+
+
+/**
+ * Recursively searches upwards from a given element to find an ancestor element
+ * with a specified ID, considering both normal DOM and shadow DOM.
+ *
+ * @param {HTMLElement|ShadowRoot} element - The starting element or shadow root to search from.
+ * @param {string} targetId - The ID of the target element to find.
+ * @returns {HTMLElement|null} - The ancestor element with the specified ID, or null if not found.
+ * @memberOf Monster.DOM
+ * @since 3.29.0
+ * @license AGPLv3
+ * @copyright schukai GmbH
+ */
+function findElementWithIdUpwards(element, targetId) {
+    if (!element) {
+        return null;
+    }
+
+    // Check if the current element has the target ID
+    if (element.id === targetId) {
+        return element;
+    }
+
+    // Search within the current element's shadow root, if it exists
+    if (element.shadowRoot) {
+        const target = element.shadowRoot.getElementById(targetId);
+        if (target) {
+            return target;
+        }
+    }
+
+    // If the current element is the document.documentElement, search within the main document
+    if (element === document.documentElement) {
+        const target = document.getElementById(targetId);
+        if (target) {
+            return target;
+        }
+    }
+
+    // If the current element is inside a shadow root, search its host's ancestors
+    const rootNode = element.getRootNode();
+    if (rootNode && rootNode instanceof ShadowRoot) {
+        return findElementWithIdUpwards(rootNode.host, targetId);
+    }
+
+    // Otherwise, search the current element's parent
+    return findElementWithIdUpwards(element.parentElement, targetId);
+}
\ No newline at end of file

application/source/types/version.mjs

@@ -142,7 +142,7 @@ function getMonsterVersion() {
     }
 
     /** don't touch, replaced by make with package.json version */
-    monsterVersion = new Version("3.28.0");
+    monsterVersion = new Version("3.29.0");
 
     return monsterVersion;
 }

development/package.json

 {
   "name": "monster",
-  "version": "3.28.0",
+  "version": "3.29.0",
   "description": "monster",
   "repository": {
     "type": "git",
@@ -33,7 +33,7 @@
     "crypt": "^0.0.2",
     "cssnano": "^5.1.15",
     "esbuild": "^0.17.11",
-    "flow-bin": "^0.201.0",
+    "flow-bin": "^0.202.0",
     "fs": "0.0.1-security",
     "glob": "^9.3.0",
     "graphviz": "^0.0.9",

development/pnpm-lock.yaml

@@ -14,7 +14,7 @@ specifiers:
   crypt: ^0.0.2
   cssnano: ^5.1.15
   esbuild: ^0.17.11
-  flow-bin: ^0.201.0
+  flow-bin: ^0.202.0
   fs: 0.0.1-security
   glob: ^9.3.0
   graphviz: ^0.0.9
@@ -63,7 +63,7 @@ devDependencies:
   crypt: 0.0.2
   cssnano: 5.1.15_postcss@8.4.21
   esbuild: 0.17.11
-  flow-bin: 0.201.0
+  flow-bin: 0.202.0
   fs: 0.0.1-security
   glob: 9.3.0
   graphviz: 0.0.9
@@ -2080,8 +2080,8 @@ packages:
     hasBin: true
     dev: true
 
-  /flow-bin/0.201.0:
-    resolution: {integrity: sha512-fqx6CMOhX9Xm4mN+tq/c7sqcm8aHFV1ipbLz2ZCzoNcPuUNZPoSVYm4p0qZqH0HyzMMEP1OWlU7dIkuSJ02cpg==}
+  /flow-bin/0.202.0:
+    resolution: {integrity: sha512-Yz+yNapJMWWV6Z6pZnBR+naMhFbFJbmMS8ZBQCFUHRqN1TTw7uwitYxRj8DyzLyTpcPReSAjWbWawWPsXJot3w==}
     engines: {node: '>=0.10.0'}
     hasBin: true
     dev: true
@@ -2149,7 +2149,7 @@ packages:
     resolution: {integrity: sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==}
     engines: {node: '>=12'}
     dependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jsonfile: 6.1.0
       universalify: 2.0.0
     dev: true
@@ -2158,7 +2158,7 @@ packages:
     resolution: {integrity: sha512-YJDaCJZEnBmcbw13fvdAM9AwNOJwOzrE4pqMqBq5nFiEqXUqHwlK4B+3pUw6JNvfSPtX05xFHtYy/1ni01eGCw==}
     engines: {node: '>=6 <7 || >=8'}
     dependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jsonfile: 4.0.0
       universalify: 0.1.2
     dev: true
@@ -2168,7 +2168,7 @@ packages:
     engines: {node: '>=10'}
     dependencies:
       at-least-node: 1.0.0
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       jsonfile: 6.1.0
       universalify: 2.0.0
     dev: true
@@ -2280,8 +2280,8 @@ packages:
       get-intrinsic: 1.2.0
     dev: true
 
-  /graceful-fs/4.2.10:
-    resolution: {integrity: sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==}
+  /graceful-fs/4.2.11:
+    resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
     dev: true
 
   /graphviz/0.0.9:
@@ -2696,7 +2696,7 @@ packages:
   /jsonfile/4.0.0:
     resolution: {integrity: sha512-m6F1R3z8jjlf2imQHS2Qez5sjKWQzbuuhuJ/FKYFRZvPE3PuHcSMVZzfsLhGVOkfd20obL5SWEBew5ShlquNxg==}
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: true
 
   /jsonfile/6.1.0:
@@ -2704,7 +2704,7 @@ packages:
     dependencies:
       universalify: 2.0.0
     optionalDependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: true
 
   /just-extend/4.2.1:
@@ -2714,13 +2714,13 @@ packages:
   /klaw-sync/6.0.0:
     resolution: {integrity: sha512-nIeuVSzdCCs6TDPTqI8w1Yre34sSq7AkZ4B3sfOBbI2CgVSB4Du4aLQijFU2+lhAFCwt9+42Hel6lQNIv6AntQ==}
     dependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: true
 
   /klaw/3.0.0:
     resolution: {integrity: sha512-0Fo5oir+O9jnXu5EefYbVK+mHMBeEVEy2cmctR1O1NECcCkPRreJKrS6Qt/j3KC2C148Dfo9i3pCmCMsdqGr0g==}
     dependencies:
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
     dev: true
 
   /kolorist/1.7.0:
@@ -3321,7 +3321,7 @@ packages:
     dependencies:
       '@financial-times/polyfill-useragent-normaliser': 1.10.2
       from2-string: 1.1.0
-      graceful-fs: 4.2.10
+      graceful-fs: 4.2.11
       merge2: 1.4.1
       mnemonist: 0.38.5
       stream-from-promise: 1.0.0

development/test/cases/dom/find.mjs

+import {
+    findElementWithIdUpwards
+} from "../../../../application/source/dom/util.mjs";
+
+import { expect } from 'chai';
+import { JSDOM } from 'jsdom';
+
+let originalEnvironment;
+
+function setupTestEnvironment() {
+    const { window } = new JSDOM('<!DOCTYPE html>', { pretendToBeVisual: true });
+
+    const { document, customElements, HTMLElement } = window;
+    originalEnvironment = {
+        document: globalThis.document,
+        customElements: globalThis.customElements,
+        HTMLElement: globalThis.HTMLElement,
+        ShadowRoot: globalThis.ShadowRoot,
+    };
+    globalThis.document = document;
+    globalThis.customElements = customElements;
+    globalThis.HTMLElement = HTMLElement;
+    globalThis.ShadowRoot = window.ShadowRoot || class ShadowRoot {}; // Fallback for JSDOM
+
+    class TestComponent extends HTMLElement {
+        constructor() {
+            super();
+            this.attachShadow({ mode: 'open' });
+        }
+    }
+
+    if (!customElements.get('test-component')) {
+        customElements.define('test-component', TestComponent);
+    }
+}
+
+function cleanupTestEnvironment() {
+    Object.assign(globalThis, originalEnvironment);
+}
+
+describe('findElementWithIdUpwards', () => {
+    before(() => {
+        setupTestEnvironment();
+    });
+
+    after(() => {
+        cleanupTestEnvironment();
+    });
+
+    beforeEach(() => {
+        // Set up the DOM
+        document.body.innerHTML = `
+      <div id="container">
+        <div id="parent">
+          <div id="child"></div>
+        </div>
+      </div>
+    `;
+
+        const shadowHost = document.createElement('div');
+        document.body.appendChild(shadowHost);
+        const shadowRoot = shadowHost.attachShadow({ mode: 'open' });
+        const innerElement = document.createElement('div');
+        innerElement.id = 'inner';
+        shadowRoot.appendChild(innerElement);
+    });
+
+    it('should find the element with the target ID in the normal DOM', () => {
+        const child = document.getElementById('child');
+        const result = findElementWithIdUpwards(child, 'parent');
+        expect(result).to.equal(document.getElementById('parent'));
+    });
+
+    it('should find the element with the target ID in the shadow DOM', () => {
+        const innerElement = document.querySelector('div[shadowroot] > div');
+        const result = findElementWithIdUpwards(innerElement, 'inner');
+        expect(result).to.equal(innerElement);
+    });
+
+    it('should return null if the element with the target ID is not found', () => {
+        const child = document.getElementById('child');
+        const result = findElementWithIdUpwards(child, 'nonexistent');
+        expect(result).to.be.null;
+    });
+});

development/test/cases/dom/util.mjs

-'use strict';
-
 import {
     getDocument, getWindow, getDocumentFragmentFromString
 } from "../../../../application/source/dom/util.mjs";

development/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.28.0")
+        monsterVersion = new Version("3.29.0")
 
         let m = getMonsterVersion();
 

release.json

-{"version":"3.29.0"}
+{"version":"3.30.0"}