@schukai/monster 4.148.1 → 4.148.3

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.148.1"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"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.148.3"}

package/source/components/datatable/filter/date-presets.mjs

@@ -88,6 +88,8 @@ class DatePresets extends CustomControl {
 
 		initControlReferences.call(this);
 		updateOptions.call(this);
+		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -104,6 +106,7 @@ class DatePresets extends CustomControl {
 	 */
 	set value(value) {
 		this[selectElementSymbol].value = value;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -340,6 +343,16 @@ function initControlReferences() {
 	return this;
 }
 
+function initEventHandler() {
+	this[selectElementSymbol].addEventListener("change", () => {
+		syncFormValue.call(this);
+	});
+}
+
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
+
 /**
  * @private
  * @return {void}

package/source/components/datatable/filter/date-range.mjs

@@ -166,6 +166,7 @@ class DateRange extends AbstractBase {
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -175,6 +176,7 @@ class DateRange extends AbstractBase {
 	 */
 	set value(value) {
 		this[inputElementSymbol].value = value;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -580,6 +582,7 @@ function initEventHandler() {
 
 		if (type === "today") {
 			this[inputElementSymbol].value = new Date().toISOString().slice(0, 10);
+			syncFormValue.call(this);
 			return;
 		}
 
@@ -609,10 +612,14 @@ function initEventHandler() {
 
 	// change the input value if the user change the value of the radio button
 	this[inputElementSymbol].addEventListener("change", (event) => {
+		syncFormValue.call(this);
 		queueMicrotask(() => {
 			updatePopperInputsFromMainValue.call(this);
 		});
 	});
+	this[inputElementSymbol].addEventListener("input", () => {
+		syncFormValue.call(this);
+	});
 
 	// if the user change the value of on of the input fields, we should update the value of the input field
 	this[formContainerElementSymbol].addEventListener("change", (event) => {
@@ -636,6 +643,7 @@ function initEventHandler() {
 
 		const type = group.getAttribute("data-monster-range-type");
 		updateMainFilterValueFromPopperChange.call(this, group, type);
+		syncFormValue.call(this);
 	});
 
 	this.addEventListener("keydown", (event) => {
@@ -669,6 +677,10 @@ function initEventHandler() {
 	return this;
 }
 
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
+
 /**
  * @private
  */

package/source/components/datatable/filter/date-time.mjs

@@ -85,6 +85,7 @@ class DateTimeFilter extends CustomControl {
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -101,6 +102,7 @@ class DateTimeFilter extends CustomControl {
 	 */
 	set value(value) {
 		this[inputElementSymbol].value = value;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -129,7 +131,18 @@ function initControlReferences() {
 /**
  * @private
  */
-function initEventHandler() {}
+function initEventHandler() {
+	this[inputElementSymbol].addEventListener("input", () => {
+		syncFormValue.call(this);
+	});
+	this[inputElementSymbol].addEventListener("change", () => {
+		syncFormValue.call(this);
+	});
+}
+
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
 
 /**
  * @private

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

@@ -85,6 +85,7 @@ class DateFilter extends CustomControl {
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -101,6 +102,7 @@ class DateFilter extends CustomControl {
 	 */
 	set value(value) {
 		this[inputElementSymbol].value = value;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -129,7 +131,18 @@ function initControlReferences() {
 /**
  * @private
  */
-function initEventHandler() {}
+function initEventHandler() {
+	this[inputElementSymbol].addEventListener("input", () => {
+		syncFormValue.call(this);
+	});
+	this[inputElementSymbol].addEventListener("change", () => {
+		syncFormValue.call(this);
+	});
+}
+
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
 
 /**
  * @private

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

@@ -84,6 +84,7 @@ class Input extends AbstractBase {
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -100,6 +101,7 @@ class Input extends AbstractBase {
 	 */
 	set value(value) {
 		this[inputElementSymbol].value = value;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -175,7 +177,18 @@ function initControlReferences() {
 /**
  * @private
  */
-function initEventHandler() {}
+function initEventHandler() {
+	this[inputElementSymbol].addEventListener("input", () => {
+		syncFormValue.call(this);
+	});
+	this[inputElementSymbol].addEventListener("change", () => {
+		syncFormValue.call(this);
+	});
+}
+
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
 
 /**
  * @private

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

@@ -136,6 +136,7 @@ class Range extends AbstractBase {
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -145,6 +146,7 @@ class Range extends AbstractBase {
 	 */
 	set value(value) {
 		this[inputElementSymbol].value = value;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -484,12 +486,17 @@ function initEventHandler() {
 		const type = typeElement.getAttribute("data-monster-range-type");
 		const value = element.value;
 		updateFilterValue(type, this, value, element);
+		syncFormValue.call(this);
 	});
 
 	// we should watch the change event of self[inputElementSymbol] and call updateInputFromValue
 	// if the value is changed from outside
 	this[inputElementSymbol].addEventListener("change", () => {
 		updateInputFromValue.call(this);
+		syncFormValue.call(this);
+	});
+	this[inputElementSymbol].addEventListener("input", () => {
+		syncFormValue.call(this);
 	});
 
 	this.addEventListener("keydown", (event) => {
@@ -537,6 +544,10 @@ function initEventHandler() {
 	return this;
 }
 
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
+
 /**
  * @private
  */

package/source/components/datatable/filter/text-operator.mjs

@@ -103,6 +103,8 @@ class TextOperator extends CustomControl {
 
 		initControlReferences.call(this);
 		updateOptions.call(this);
+		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -121,6 +123,7 @@ class TextOperator extends CustomControl {
 		const parsed = parseValue(value);
 		this[operatorElementSymbol].value = parsed.operator;
 		this[inputElementSymbol].value = parsed.query;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -327,6 +330,22 @@ function initControlReferences() {
 	return this;
 }
 
+function initEventHandler() {
+	this[operatorElementSymbol].addEventListener("change", () => {
+		syncFormValue.call(this);
+	});
+	this[inputElementSymbol].addEventListener("input", () => {
+		syncFormValue.call(this);
+	});
+	this[inputElementSymbol].addEventListener("change", () => {
+		syncFormValue.call(this);
+	});
+}
+
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
+
 /**
  * @private
  * @return {void}

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

@@ -85,6 +85,7 @@ class TimeFilter extends CustomControl {
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -101,6 +102,7 @@ class TimeFilter extends CustomControl {
 	 */
 	set value(value) {
 		this[inputElementSymbol].value = value;
+		syncFormValue.call(this);
 	}
 
 	/**
@@ -129,7 +131,18 @@ function initControlReferences() {
 /**
  * @private
  */
-function initEventHandler() {}
+function initEventHandler() {
+	this[inputElementSymbol].addEventListener("input", () => {
+		syncFormValue.call(this);
+	});
+	this[inputElementSymbol].addEventListener("change", () => {
+		syncFormValue.call(this);
+	});
+}
+
+function syncFormValue() {
+	this.setFormValue(this.value);
+}
 
 /**
  * @private

package/source/components/form/buy-box.mjs

@@ -200,6 +200,8 @@ const pricingCacheSymbol = Symbol("pricingCache");
  * @fires monster-buy-box-loaded
  */
 class BuyBox extends CustomControl {
+	static formAssociated = false;
+
 	/**
 	 * This method is called by the `instanceof` operator.
 	 * @return {symbol}

package/source/components/form/cart-control.mjs

@@ -89,6 +89,8 @@ const pendingRequestSymbol = Symbol("pendingRequest");
  * @fires monster-cart-control-update
  */
 class CartControl extends CustomControl {
+	static formAssociated = false;
+
 	static get [instanceSymbol]() {
 		return Symbol.for(
 			"@schukai/monster/components/form/cart-control@@instance",

package/source/components/state/state.mjs

@@ -35,6 +35,8 @@ export { State };
  * @summary A compact state indicator for statuses such as success, warning, error or informational workflow state.
  **/
 class State extends CustomControl {
+	static formAssociated = false;
+
 	/**
 	 * @return {void}
 	 */

package/source/data/extend.mjs

@@ -17,6 +17,8 @@ import { typeOf } from "../types/typeof.mjs";
 
 export { extend };
 
+const unsafeMutationKeys = new Set(["__proto__", "prototype", "constructor"]);
+
 /**
  * Extend copies all enumerable own properties from one or
  * more source objects to a target object. It returns the modified target object.
@@ -50,7 +52,11 @@ function extend(...args) {
 			continue;
 		}
 
-		for (const k in a) {
+		for (const k of Object.keys(a)) {
+			if (unsafeMutationKeys.has(k)) {
+				continue;
+			}
+
 			const v = a?.[k];
 
 			if (k in o && v === o?.[k]) {

package/source/data/pathfinder.mjs

@@ -43,6 +43,17 @@ const DELIMITER = ".";
  */
 const WILDCARD = "*";
 
+/**
+ * Path segments that must never be traversed by mutation operations.
+ * @private
+ * @type {Set<string>}
+ */
+const UNSAFE_MUTATION_PATH_SEGMENTS = new Set([
+	"__proto__",
+	"constructor",
+	"prototype",
+]);
+
 /**
  * Pathfinder is a class to find a path to an object.
  *
@@ -245,7 +256,12 @@ function getValueViaPath(subject, path, check) {
 	}
 
 	let parts;
-	if (isString(path)) {
+	if (isArray(path)) {
+		if (path.length === 0) {
+			return subject;
+		}
+		parts = [...path];
+	} else {
 		if (path === "") {
 			return subject;
 		}
@@ -263,10 +279,12 @@ function getValueViaPath(subject, path, check) {
 		let anchor;
 		if (subject instanceof Map || subject instanceof WeakMap) {
 			anchor = subject.get(current);
-		} else if (subject instanceof Set || subject instanceof WeakSet) {
+		} else if (subject instanceof Set) {
 			current = parseInt(current);
 			validateInteger(current);
 			anchor = [...subject]?.[current];
+		} else if (subject instanceof WeakSet) {
+			throw Error("unsupported action for this data type (WeakSet)");
 		} else if (typeof WeakRef === "function" && subject instanceof WeakRef) {
 			throw Error("unsupported action for this data type (WeakRef)");
 		} else if (isArray(subject)) {
@@ -318,6 +336,7 @@ function setValueViaPath(subject, path, value) {
 	if (!(isArray(path) || isString(path))) {
 		throw new Error("type error: a path must be a string or an array");
 	}
+	validateMutationPath(path);
 
 	let parts;
 	if (isArray(path)) {
@@ -325,7 +344,7 @@ function setValueViaPath(subject, path, value) {
 			return;
 		}
 
-		parts = path;
+		parts = [...path];
 	} else {
 		parts = path.split(DELIMITER);
 	}
@@ -370,8 +389,10 @@ function setValueViaPath(subject, path, value) {
 
 	if (anchor instanceof Map || anchor instanceof WeakMap) {
 		anchor.set(last, value);
-	} else if (anchor instanceof Set || anchor instanceof WeakSet) {
-		anchor.append(value);
+	} else if (anchor instanceof Set) {
+		anchor.add(value);
+	} else if (anchor instanceof WeakSet) {
+		throw Error("unsupported action for this data type in setValueViaPath");
 	} else if (typeof WeakRef === "function" && anchor instanceof WeakRef) {
 		throw Error("unsupported action for this data type in setValueViaPath");
 	} else if (isArray(anchor)) {
@@ -421,6 +442,7 @@ function deleteValueViaPath(subject, path) {
 			"type error: a path must be a string or an array in deleteValueViaPath",
 		);
 	}
+	validateMutationPath(path);
 
 	let parts;
 	if (isArray(path)) {
@@ -428,7 +450,7 @@ function deleteValueViaPath(subject, path) {
 			return;
 		}
 
-		parts = path;
+		parts = [...path];
 	} else {
 		parts = path.split(DELIMITER);
 	}
@@ -455,3 +477,19 @@ function deleteValueViaPath(subject, path) {
 		delete anchor[last];
 	}
 }
+
+/**
+ * Reject paths that could mutate an object's prototype chain.
+ * @param {string|array} path
+ * @return {void}
+ * @throws {Error} unsafe mutation path segment
+ * @private
+ */
+function validateMutationPath(path) {
+	const parts = isArray(path) ? path : path.split(DELIMITER);
+	for (const part of parts) {
+		if (UNSAFE_MUTATION_PATH_SEGMENTS.has(`${part}`)) {
+			throw new Error(`unsafe mutation path segment: ${part}`);
+		}
+	}
+}

package/source/dom/customcontrol.mjs

@@ -16,7 +16,7 @@ import { extend } from "../data/extend.mjs";
 import { addAttributeToken } from "./attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "./constants.mjs";
 import { CustomElement, attributeObserverSymbol } from "./customelement.mjs";
-import { instanceSymbol } from "../constants.mjs";
+import { instanceSymbol, internalSymbol } from "../constants.mjs";
 import { DeadMansSwitch } from "../util/deadmansswitch.mjs";
 import { addErrorAttribute } from "./error.mjs";
 import { Observer } from "../types/observer.mjs";
@@ -28,6 +28,8 @@ export { CustomControl };
  * @type {symbol}
  */
 const attachedInternalSymbol = Symbol("attachedInternal");
+const preUpgradeValueSymbol = Symbol("preUpgradeValue");
+const preUpgradeValuePendingSymbol = Symbol("preUpgradeValuePending");
 
 /**
  * This is a base class for creating custom controls using the power of CustomElement.
@@ -77,6 +79,12 @@ class CustomControl extends CustomElement {
 	constructor() {
 		super();
 
+		if (Object.prototype.hasOwnProperty.call(this, "value")) {
+			this[preUpgradeValueSymbol] = this.value;
+			this[preUpgradeValuePendingSymbol] = true;
+			delete this.value;
+		}
+
 		// check if element supports `attachInternals()`
 		if (typeof this["attachInternals"] === "function") {
 			this[attachedInternalSymbol] = this.attachInternals();
@@ -130,6 +138,13 @@ class CustomControl extends CustomElement {
 		if (typeof disabledObserver === "function") {
 			disabledObserver();
 		}
+
+		if (this[preUpgradeValuePendingSymbol] === true) {
+			const value = this[preUpgradeValueSymbol];
+			this[preUpgradeValuePendingSymbol] = false;
+			delete this[preUpgradeValueSymbol];
+			this.value = value;
+		}
 	}
 
 	/**
@@ -309,35 +324,23 @@ class CustomControl extends CustomElement {
 	}
 
 	/**
-	 * Sets the `form` attribute of the custom control to the `id` of the passed form element.
-	 * If no form element is passed, removes the `form` attribute.
+	 * Receives changes to the browser-managed form association. The author-provided
+	 * `form` attribute remains the source of explicit associations.
 	 *
 	 * @param {HTMLFormElement} form - The form element to associate with the control
 	 */
-	formAssociatedCallback(form) {
-		if (form) {
-			if (form.id) {
-				this.setAttribute("form", form.id);
-			}
-		} else {
-			this.removeAttribute("form");
-		}
-	}
+	formAssociatedCallback(form) {}
 
 	/**
-	 * Sets or removes the `disabled` attribute of the custom control based on the passed value.
+	 * Synchronizes browser-computed disabledness without changing the author-provided
+	 * `disabled` attribute or option.
 	 *
 	 * @param {boolean} disabled - Whether or not the control should be disabled
 	 */
 	formDisabledCallback(disabled) {
-		if (disabled) {
-			if (!this.hasAttribute("disabled")) {
-				this.setAttribute("disabled", "");
-			}
-		} else {
-			if (this.hasAttribute("disabled")) {
-				this.removeAttribute("disabled");
-			}
+		this[internalSymbol].formDisabledValue = disabled === true;
+		if (typeof this[internalSymbol].syncDisabledState === "function") {
+			this[internalSymbol].syncDisabledState(true);
 		}
 	}
 
@@ -345,7 +348,9 @@ class CustomControl extends CustomElement {
 	 * @param {string} state
 	 * @param {string} mode
 	 */
-	formStateRestoreCallback(state, mode) {}
+	formStateRestoreCallback(state, mode) {
+		this.value = state;
+	}
 
 	/**
 	 *
@@ -402,7 +407,7 @@ function initValueAttributeObserver() {
 
 			if (oldValue !== newValue) {
 				setTimeout(() => {
-					self.value = self.getAttribute("value");
+					self.value = self.getAttribute("value") ?? "";
 				}, 0);
 			}
 		});