@schukai/monster 4.12.0 → 4.13.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.13.0] - 2025-06-03
+
+### Add Features
+
+- Enhance CustomElement with validation and customization capabilities
+
+
+
 ## [4.12.0] - 2025-05-29
 
 ### Add Features

package/package.json

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

package/source/dom/customelement.mjs

@@ -197,9 +197,22 @@ class CustomElement extends HTMLElement {
 		super();
 
 		this[attributeObserverSymbol] = {};
-		this[internalSymbol] = new ProxyObserver({
-			options: initOptionsFromAttributes(this, extend({}, this.defaults)),
-		});
+
+		const options = initOptionsFromAttributes(this, extend({}, this.defaults));
+		if (!isObject(options)) {
+			throw new Error(
+				`The options are not defined correctly in the ${this.getTag()} element.`,
+			);
+		}
+
+		if (this.customization instanceof Map) {
+			const pathfinder = new Pathfinder(options);
+			this.customization.forEach((value, key) => {
+				pathfinder.setVia(key, value);
+			});
+		}
+
+		this[internalSymbol] = new ProxyObserver({ options });
 		this[initMethodSymbol]();
 		initOptionObserver.call(this);
 		this[scriptHostElementSymbol] = [];
@@ -249,6 +262,17 @@ class CustomElement extends HTMLElement {
 		return this;
 	}
 
+	/**
+	 * The `customization` property allows overwriting the defaults.
+	 * Unlike the defaults that expect an object, the customization is a Map.
+	 * This also allows overwriting individual values in a deeper structure
+	 * without having to redefine the entire structure and thus changing the defaults.
+	 * @returns {Map}
+	 */
+	get customization() {
+		return new Map();
+	}
+
 	/**
 	 * The `defaults` property defines the default values for a control. If you want to override these,
 	 * you can use various methods, which are described in the documentation available at