@schukai/monster 4.75.0 → 4.77.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.77.0] - 2026-01-05
+
+### Add Features
+
+- Add documentation and enhance waitForCustomElement function
+### Changes
+
+- update project
+
+
+
+## [4.76.0] - 2026-01-05
+
+### Add Features
+
+- Add tab control feature for issue [#362](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/362)
+
+
+
 ## [4.75.0] - 2026-01-04
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.75.0"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.77.0"}

package/source/components/datatable/filter/select.mjs

@@ -38,37 +38,37 @@ export { FilterSelect, getSummaryTemplate };
 
  */
 class FilterSelect extends Select {
-  /**
-   * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-   * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-   *
-   * The individual configuration values can be found in the table.
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      type: "checkbox",
-    });
-  }
+	/**
+	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			type: "checkbox",
+		});
+	}
 
-  /**
-   *
-   * @return {string}
-   */
-  static getTag() {
-    return "monster-filter-select";
-  }
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-select";
+	}
 
-  /**
-   * @return {CSSStyleSheet[]}
-   */
-  static getCSSStyleSheet() {
-    const styleSheet = super.getCSSStyleSheet();
-    return [
-      ...styleSheet,
-      FilterControlsDefaultsStyleSheet,
-      FilterSelectStyleSheet,
-    ];
-  }
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		const styleSheet = super.getCSSStyleSheet();
+		return [
+			...styleSheet,
+			FilterControlsDefaultsStyleSheet,
+			FilterSelectStyleSheet,
+		];
+	}
 }
 
 registerCustomElement(FilterSelect);

package/source/dom/util.mjs

@@ -23,6 +23,7 @@ export {
 	getContainingDocument,
 	getRegisteredCustomElements,
 	findElementWithSelectorUpwards,
+	waitForCustomElement,
 };
 
 /**
@@ -323,3 +324,80 @@ function getRegisteredCustomElements() {
 
 	return Array.from(new Set(customElementTags));
 }
+
+/**
+ * Waits until a specific custom element instance is defined and upgraded.
+ *
+ * @param {HTMLElement} element
+ * @param {Object} [options]
+ * @param {string} [options.method] - Optional method to wait for on the instance.
+ * @param {string} [options.tagName] - Optional tag name override.
+ * @param {number|null} [options.timeout=2000] - Timeout in ms; set null to disable.
+ * @return {Promise<HTMLElement>}
+ * @since 4.1.0
+ */
+function waitForCustomElement(
+	element,
+	{ method = null, tagName = null, timeout = 2000, readyCheck = null } = {},
+) {
+	if (!(element instanceof HTMLElement)) {
+		return Promise.reject(
+			new Error("Invalid argument. Expected an HTMLElement."),
+		);
+	}
+
+	const name = (tagName || element.tagName || "").toLowerCase();
+	if (!name.includes("-")) {
+		return Promise.reject(
+			new Error("Invalid argument. Expected a custom element tag name."),
+		);
+	}
+
+	const window = getWindow();
+	const registry = window.customElements;
+	if (!registry) {
+		return Promise.reject(new Error("customElements is not supported."));
+	}
+
+	return registry.whenDefined(name).then(
+		() =>
+			new Promise((resolve, reject) => {
+				if (typeof registry.upgrade === "function") {
+					registry.upgrade(element);
+				}
+
+				const start = Date.now();
+				const isReady = () => {
+					if (method && typeof element[method] !== "function") {
+						return false;
+					}
+					if (typeof readyCheck === "function") {
+						return readyCheck(element) === true;
+					}
+					return true;
+				};
+
+				const check = () => {
+					if (isReady()) {
+						resolve(element);
+						return;
+					}
+
+					if (
+						typeof timeout === "number" &&
+						timeout >= 0 &&
+						Date.now() - start > timeout
+					) {
+						reject(
+							new Error(`Timed out waiting for "${method}" on <${name}>.`),
+						);
+						return;
+					}
+
+					window.requestAnimationFrame(check);
+				};
+
+				window.requestAnimationFrame(check);
+			}),
+	);
+}

package/source/monster.mjs

@@ -101,6 +101,7 @@ export * from "./components/datatable/filter/date-presets.mjs";
 export * from "./components/datatable/filter/date.mjs";
 export * from "./components/datatable/filter/date-range.mjs";
 export * from "./components/datatable/filter/abstract-base.mjs";
+export * from "./components/datatable/filter/select.mjs";
 export * from "./components/datatable/filter/settings.mjs";
 export * from "./components/datatable/filter/date-time.mjs";
 export * from "./components/datatable/filter/range.mjs";

package/source/types/version.mjs

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

package/test/cases/dom/util.mjs

@@ -1,5 +1,8 @@
 import {
-    getDocument, getWindow, getDocumentFragmentFromString
+    getDocument,
+    getWindow,
+    getDocumentFragmentFromString,
+    waitForCustomElement,
 } from "../../../source/dom/util.mjs";
 
 import {getContainingDocument} from "../../../source/dom/util.mjs";
@@ -111,5 +114,51 @@ describe('DOM', function () {
             expect(containingDocument).to.be.null;
         });
     });    
+
+    describe('waitForCustomElement()', () => {
+        it('should resolve for a specific instance once defined', async () => {
+            const tagName = `test-tabs-${Date.now()}`;
+            const element = document.createElement(tagName);
+            document.body.appendChild(element);
+
+            const promise = waitForCustomElement(element, { method: 'ping' });
+
+            class TestTabs extends HTMLElement {
+                ping() {
+                    return 'pong';
+                }
+            }
+
+            customElements.define(tagName, TestTabs);
+
+            const ready = await promise;
+            expect(ready).to.equal(element);
+            expect(ready.ping()).to.equal('pong');
+        });
+
+        it('should wait for a readyCheck condition', async () => {
+            const tagName = `test-ready-${Date.now()}`;
+            const element = document.createElement(tagName);
+            document.body.appendChild(element);
+
+            const promise = waitForCustomElement(element, {
+                readyCheck: (el) => el.hasAttribute('data-ready'),
+            });
+
+            class TestReady extends HTMLElement {
+                connectedCallback() {
+                    setTimeout(() => {
+                        this.setAttribute('data-ready', 'true');
+                    }, 0);
+                }
+            }
+
+            customElements.define(tagName, TestReady);
+
+            const ready = await promise;
+            expect(ready).to.equal(element);
+            expect(ready.getAttribute('data-ready')).to.equal('true');
+        });
+    });
     
-});
+});    

package/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("4.70.1")
+        monsterVersion = new Version("4.76.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.70.1</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Sa 3. Jan 13:33:23 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.76.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Mo 5. Jan 16:52:49 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>