@schukai/monster 4.13.1 → 4.15.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.15.0] - 2025-06-05
+
+### Add Features
+
+- Update node and pnpx binaries; enhance datatable column bar and select components
+
+
+
+## [4.14.0] - 2025-06-04
+
+### Add Features
+
+- Add i18n support in CustomElement template formatting
+
+
+
 ## [4.13.1] - 2025-06-03
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@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.13.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.1","@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.15.0"}

package/source/components/datatable/columnbar.mjs

@@ -23,6 +23,9 @@ import { clone } from "../../util/clone.mjs";
 import { ColumnBarStyleSheet } from "./stylesheet/column-bar.mjs";
 import { createPopper } from "@popperjs/core";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
+import {hasObjectLink} from "../../dom/attributes.mjs";
+import {customElementUpdaterLinkSymbol} from "../../dom/constants.mjs";
+import {getGlobalObject} from "../../types/global.mjs";
 
 export { ColumnBar };
 
@@ -56,6 +59,12 @@ const dotsContainerElementSymbol = Symbol("dotsContainerElement");
  */
 const popperInstanceSymbol = Symbol("popperInstance");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const closeEventHandlerSymbol = Symbol("closeEventHandler");
+
 /**
  * A column bar for a datatable
  *
@@ -72,7 +81,18 @@ class ColumnBar extends CustomElement {
 	 * @return {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/column-bar");
+		return Symbol.for("@schukai/monster/components/column-bar@@instance");
+	}
+
+	/**
+	 * This method is called to customize the component.
+	 * @returns {Map<unknown, unknown>}
+	 */
+	get customization() {
+		return new Map([
+			...super.customization,
+			["templateFormatter.i18n", true],
+		]);
 	}
 
 	/**
@@ -83,24 +103,61 @@ class ColumnBar extends CustomElement {
 	 *
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
-	 * @property {object} datasource The datasource
-	 * @property {boolean} autoLoad If true, the datasource is called immediately after the control is created.
+	 * @property {object} labels Locale definitions
+	 * @property {string} locale.settings The text for the settings button
 	 */
 	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
+		return Object.assign({}, super.defaults, {
 			templates: {
 				main: getTemplate(),
 			},
-			locale: getTranslations(),
+			labels: getTranslations(),
 
 			columns: [],
 		});
+	}
+
+	/**
+	 * Called every time the element is added to the DOM. Useful for running initialization code.
+	 * @return {void}
+	 * @since 4.14.0
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		this[closeEventHandlerSymbol] = (event) => {
+			const path = event.composedPath();
+			const isOutsideElement = !path.includes(this);
+			const isOutsideShadow = !path.includes(this.shadowRoot);
+
+			if (isOutsideElement && isOutsideShadow && this[settingsLayerElementSymbol]) {
+				this[settingsLayerElementSymbol].classList.remove("visible");
+			}
+		}
+
+		getGlobalObject("document").addEventListener("click" , this[closeEventHandlerSymbol]);
+		getGlobalObject("document").addEventListener("touch" , this[closeEventHandlerSymbol]);
 
-		return obj;
 	}
 
 	/**
+	 * Called every time the element is removed from the DOM. Useful for running clean up code.
 	 *
+	 * @return {void}
+	 * @since 4.14.0
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		if(this[closeEventHandlerSymbol]) {
+			getGlobalObject("document").removeEventListener("click", this[closeEventHandlerSymbol]);
+			getGlobalObject("document").removeEventListener("touch", this[closeEventHandlerSymbol]);
+			this[closeEventHandlerSymbol] = null;
+		}
+
+	}
+
+	/**
 	 * @return {string}
 	 */
 	static getTag() {
@@ -133,43 +190,47 @@ class ColumnBar extends CustomElement {
 function getTranslations() {
 	const locale = getLocaleOfDocument();
 	switch (locale.language) {
-		case "de":
-			return {
-				settings: "Einstellungen",
-			};
-		case "fr":
-			return {
-				settings: "Paramètres",
-			};
-		case "sp":
-			return {
-				settings: "Configuración",
-			};
-		case "it":
-			return {
-				settings: "Impostazioni",
-			};
-		case "pl":
-			return {
-				settings: "Ustawienia",
-			};
-		case "no":
-			return {
-				settings: "Innstillinger",
-			};
-		case "dk":
-			return {
-				settings: "Indstillinger",
-			};
-		case "sw":
-			return {
-				settings: "Inställningar",
-			};
-		default:
+		case "de": // German
+			return { settings: "Einstellungen" };
+		case "fr": // French
+			return { settings: "Paramètres" };
+		case "es": // Spanish
+			return { settings: "Configuración" };
+		case "zh": // Mandarin (Chinese)
+			return { settings: "设置" };
+		case "hi": // Hindi
+			return { settings: "सेटिंग्स" };
+		case "bn": // Bengali
+			return { settings: "সেটিংস" };
+		case "pt": // Portuguese
+			return { settings: "Configurações" };
+		case "ru": // Russian
+			return { settings: "Настройки" };
+		case "ja": // Japanese
+			return { settings: "設定" };
+		case "pa": // Western Punjabi
+			return { settings: "ਸੈਟਿੰਗਾਂ" };
+		case "mr": // Marathi
+			return { settings: "सेटिंग्ज" };
+		case "it": // Italian
+			return { settings: "Impostazioni" };
+		case "nl": // Dutch
+			return { settings: "Instellingen" };
+		case "sv": // Swedish
+			return { settings: "Inställningar" };
+		case "pl": // Polish
+			return { settings: "Ustawienia" };
+		case "da": // Danish
+			return { settings: "Indstillinger" };
+		case "fi": // Finnish
+			return { settings: "Asetukset" };
+		case "no": // Norwegian
+			return { settings: "Innstillinger" };
+		case "cs": // Czech
+			return { settings: "Nastavení" };
+		default: // English fallback
 		case "en":
-			return {
-				settings: "Settings",
-			};
+			return { settings: "Settings" };
 	}
 }
 
@@ -325,7 +386,7 @@ function getTemplate() {
         <div data-monster-role="control" part="control" data-monster-select-this="true" data-monster-attributes="class path:columns | has-entries | ?::hidden">
             <ul data-monster-insert="dots path:columns" 
                 data-monster-role="dots"></ul>
-            <a href="#" data-monster-role="settings-button" data-monster-replace="path:locale.settings">Settings</a>
+            <a href="#" data-monster-role="settings-button">i18n{settings}</a>
             <div data-monster-role="settings-layer">
                 <div data-monster-insert="column path:columns" data-monster-role="settings-popup-list">
                 </div>

package/source/components/form/select.mjs

@@ -390,6 +390,7 @@ class Select extends CustomControl {
 	 * @property {"radio"|"checkbox"} type Selection mode: "radio" for single, "checkbox" for multiple.
 	 * @property {string} name Name of the hidden form field for form submission.
 	 * @property {string|null} url URL to dynamically fetch options via HTTP when opening or filtering.
+	 * @property {Object} lookup Configuration for lookup requests.
 	 * @property {string} lookup.url URL template with ${filter} placeholder to fetch only selected entries on init when `url` is set and either `features.lazyLoad` or `filter.mode==="remote"`.
 	 * @property {boolean} lookup.grouping Group lookup requests: true to fetch all selected values in one request, false to fetch each individually.
 	 * @property {string} fetch.redirect Fetch redirect mode (e.g. "error").
@@ -1354,51 +1355,64 @@ function getTranslations() {
 function lookupSelection() {
 	const self = this;
 
-	setTimeout(() => {
-		const selection = self.getOption("selection");
-		if (selection.length === 0) {
-			return;
-		}
+	const observer = new IntersectionObserver((entries, obs) => {
+		for (const entry of entries) {
+			if (entry.isIntersecting) {
+				console.log("IntersectionObserver: entry.target is visible");
+				obs.disconnect(); // Only observe once
 
-		if (self[isLoadingSymbol] === true) {
-			return;
-		}
+				setTimeout(() => {
+					const selection = self.getOption("selection");
+					if (selection.length === 0) {
+						return;
+					}
 
-		if (self[lazyLoadDoneSymbol] === true) {
-			return;
-		}
+					if (self[isLoadingSymbol] === true) {
+						return;
+					}
 
-		let url = self.getOption("url");
-		const lookupUrl = self.getOption("lookup.url");
-		if (lookupUrl !== null) {
-			url = lookupUrl;
-		}
+					if (self[lazyLoadDoneSymbol] === true) {
+						return;
+					}
 
-		this[cleanupOptionsListSymbol] = false;
+					let url = self.getOption("url");
+					const lookupUrl = self.getOption("lookup.url");
+					if (lookupUrl !== null) {
+						url = lookupUrl;
+					}
 
-		if (this.getOption("lookup.grouping") === true) {
-			filterFromRemoteByValue
-				.call(
-					self,
-					url,
-					selection.map((s) => s?.["value"]),
-				)
-				.catch((e) => {
-					addErrorAttribute(self, e);
-				});
-			return;
-		}
+					self[cleanupOptionsListSymbol] = false;
+
+					if (self.getOption("lookup.grouping") === true) {
+						filterFromRemoteByValue
+							.call(
+								self,
+								url,
+								selection.map((s) => s?.["value"]),
+							)
+							.catch((e) => {
+								addErrorAttribute(self, e);
+							});
+						return;
+					}
 
-		for (const s of selection) {
-			if (s?.["value"]) {
-				filterFromRemoteByValue.call(self, url, s?.["value"]).catch((e) => {
-					addErrorAttribute(self, e);
-				});
+					for (const s of selection) {
+						if (s?.["value"]) {
+							filterFromRemoteByValue.call(self, url, s["value"]).catch((e) => {
+								addErrorAttribute(self, e);
+							});
+						}
+					}
+				}, 100);
 			}
 		}
-	}, 100);
+	}, { threshold: 0.1 });
+
+	// Beobachte das Element selbst (dieses Element muss im DOM sein)
+	observer.observe(self);
 }
 
+
 /**
  *
  * @param url

package/source/dom/customelement.mjs

@@ -297,6 +297,7 @@ class CustomElement extends HTMLElement {
 	 * @property {Object} templateFormatter.marker Specifies the marker for the templates.
 	 * @property {Function} templateFormatter.marker.open=null Specifies the opening marker for the templates.
 	 * @property {Function} templateFormatter.marker.close=null Specifies the closing marker for the templates.
+	 * @property {Boolean} templateFormatter.i18n=false Specifies whether the templates should be formatted with i18n.
 	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
 	 * @since 1.8.0
 	 */
@@ -314,6 +315,7 @@ class CustomElement extends HTMLElement {
 					open: null,
 					close: null,
 				},
+				i18n : false,
 			},
 
 			eventProcessing: false,
@@ -1075,6 +1077,27 @@ function parseOptionsJSON(data) {
 	return validateObject(obj);
 }
 
+/**
+ * @private
+ * @param html
+ * @returns {*|string}
+ */
+function substituteI18n(html) {
+
+	if(!this.getOption("templateFormatter.i18n", false)) {
+		return html;
+	}
+
+	const labels = this.getOption("labels", {});
+	if (!(isObject(labels) || isIterable(labels))) {
+		return html;
+	}
+
+	const formatter = new Formatter(labels, {});
+	formatter.setMarker("i18n{", '}')
+	return formatter.format(html);
+}
+
 /**
  * @private
  * @return {initHtmlContent}
@@ -1090,7 +1113,7 @@ function initHtmlContent() {
 			if (isObject(mapping)) {
 				html = new Formatter(mapping, {}).format(html);
 			}
-			this.innerHTML = html;
+			this.innerHTML = substituteI18n.call(this, html);
 		}
 	}
 
@@ -1194,7 +1217,7 @@ function initShadowRoot() {
 		html = formatter.format(html);
 	}
 
-	this.shadowRoot.innerHTML = html;
+	this.shadowRoot.innerHTML = substituteI18n.call(this, html);
 	return this;
 }
 

package/test/cases/components/form/button.mjs

@@ -38,13 +38,12 @@ describe('Button', function () {
     before(function (done) {
         initJSDOM().then(() => {
 
-            import("element-internals-polyfill").catch(e => done(e));
-
-            import("../../../../source/components/form/button.mjs").then((m) => {
-                Button = m['Button'];
-                done()
-            }).catch(e => done(e))
-
+            import("element-internals-polyfill").then(()=>{
+                import("../../../../source/components/form/button.mjs").then((m) => {
+                    Button = m['Button'];
+                    done()
+                }).catch(e => done(e))
+            }).catch(e => done(e));
 
         });
     })

package/test/util/jsdom.mjs

@@ -67,7 +67,7 @@ function initJSDOM(options) {
                     'InputEvent',
                     'KeyboardEvent',
                     'MutationObserver',
-                    'navigator',
+                //    'navigator',
                     'Node',
                     'NodeFilter',
                     'NodeList',
@@ -76,7 +76,9 @@ function initJSDOM(options) {
                     'XMLSerializer',
                 ].forEach(key => {
                     try {
-                        g[key] = window[key]    
+                        console.log("setting key", key);
+
+                        g[key] = window[key]
                     } catch(e) {
                         console.error("Error setting key", key, e);
                     }