@schukai/monster 4.148.2 → 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.2"}
+{"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/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);
 			}
 		});

package/source/dom/customelement.mjs

@@ -117,6 +117,7 @@ const updateCloneDataSymbol = Symbol("@schukai/monster/dom/@@updateCloneData");
  * @type {symbol}
  */
 const scriptHostElementSymbol = Symbol("scriptHostElement");
+const optionDefaultsSymbol = Symbol("optionDefaults");
 const managedShadowRootSymbol = Symbol("managedShadowRoot");
 const visibilityStateSymbol = Symbol("visibilityState");
 let hostVisibilityStyleSheet = null;
@@ -215,7 +216,11 @@ class CustomElement extends HTMLElement {
 
 		this[attributeObserverSymbol] = {};
 
-		const options = initOptionsFromAttributes(this, extend({}, this.defaults));
+		this[optionDefaultsSymbol] = this.defaults;
+		const options = initOptionsFromAttributes(
+			this,
+			extend({}, this[optionDefaultsSymbol]),
+		);
 		if (!isObject(options)) {
 			throw new Error(
 				`The options are not defined correctly in the ${this.getTag()} element.`,
@@ -819,6 +824,9 @@ class CustomElement extends HTMLElement {
 				this,
 				attrName,
 				this[internalSymbol].getSubject()["options"],
+				{},
+				"data-monster-option-",
+				this[optionDefaultsSymbol],
 			);
 		}
 
@@ -888,21 +896,22 @@ function callControlCallback(callBackFunctionName, ...args) {
 		return;
 	}
 
-	if (this[scriptHostElementSymbol].length === 0) {
-		const targetId = this.getAttribute(ATTRIBUTE_SCRIPT_HOST);
-		if (!targetId) {
-			return;
-		}
-
-		const list = targetId.split(",");
-		for (const id of list) {
-			const host = findElementWithIdUpwards(this, id.trim());
-			if (!(host instanceof HTMLElement)) {
-				continue;
-			}
+	const targetId = this.getAttribute(ATTRIBUTE_SCRIPT_HOST);
+	if (!targetId) {
+		return;
+	}
 
-			this[scriptHostElementSymbol].push(host);
+	// The attribute and DOM ancestry can change while the control remains alive.
+	// Resolve the small ordered host list against the current context for every call.
+	this[scriptHostElementSymbol].length = 0;
+	const list = targetId.split(",");
+	for (const id of list) {
+		const host = findElementWithIdUpwards(this, id.trim());
+		if (!(host instanceof HTMLElement)) {
+			continue;
 		}
+
+		this[scriptHostElementSymbol].push(host);
 	}
 
 	for (const host of this[scriptHostElementSymbol]) {
@@ -1091,48 +1100,105 @@ function containChildNode(node) {
  */
 function initOptionObserver() {
 	const self = this;
+	const disabledQuery =
+		"button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
 
 	self[internalSymbol].lastDisabledValue = undefined;
+	self[internalSymbol].parentDisabledElements = new Set();
 
-	const syncDisabledState = () => {
-		const flag = self.getOption("disabled", false);
+	const getDisabledTargets = () => {
+		const targets = new Set();
+		const shadowRoot = getManagedShadowRoot.call(self);
 
-		if (flag === self[internalSymbol].lastDisabledValue) {
-			return;
+		try {
+			for (const element of self.querySelectorAll(disabledQuery)) {
+				targets.add(element);
+			}
+			if (shadowRoot instanceof ShadowRoot) {
+				for (const element of shadowRoot.querySelectorAll(disabledQuery)) {
+					targets.add(element);
+				}
+			}
+			for (const element of getSlottedElements.call(self, disabledQuery)) {
+				targets.add(element);
+			}
+		} catch (e) {}
+
+		return targets;
+	};
+
+	const disconnectDisabledObservers = () => {
+		self[internalSymbol].disabledLightObserver?.disconnect();
+		self[internalSymbol].disabledShadowObserver?.disconnect();
+		delete self[internalSymbol].disabledLightObserver;
+		delete self[internalSymbol].disabledShadowObserver;
+	};
+
+	const observeDisabledTargets = () => {
+		const callback = () => syncDisabledState(true);
+		if (!self[internalSymbol].disabledLightObserver) {
+			self[internalSymbol].disabledLightObserver = new MutationObserver(
+				callback,
+			);
+			self[internalSymbol].disabledLightObserver.observe(self, {
+				attributes: true,
+				attributeFilter: [ATTRIBUTE_DISABLED, "slot"],
+				childList: true,
+				subtree: true,
+			});
 		}
 
 		const shadowRoot = getManagedShadowRoot.call(self);
-		if (!(shadowRoot instanceof ShadowRoot) && !self.childNodes.length) {
+		if (
+			shadowRoot instanceof ShadowRoot &&
+			!self[internalSymbol].disabledShadowObserver
+		) {
+			self[internalSymbol].disabledShadowObserver = new MutationObserver(
+				callback,
+			);
+			self[internalSymbol].disabledShadowObserver.observe(shadowRoot, {
+				attributes: true,
+				attributeFilter: [ATTRIBUTE_DISABLED, "slot"],
+				childList: true,
+				subtree: true,
+			});
+		}
+	};
+
+	const syncDisabledState = (force = false) => {
+		const flag =
+			self.getOption("disabled", false) === true ||
+			self[internalSymbol].formDisabledValue === true;
+
+		if (force !== true && flag === self[internalSymbol].lastDisabledValue) {
 			return;
 		}
 
 		self[internalSymbol].lastDisabledValue = flag;
+		const ownedElements = self[internalSymbol].parentDisabledElements;
 
-		const query =
-			"button, command, fieldset, keygen, optgroup, option, select, textarea, input, [data-monster-objectlink]";
-
-		let elements = [];
-		if (shadowRoot instanceof ShadowRoot) {
-			elements = shadowRoot.querySelectorAll(query);
+		if (flag !== true) {
+			disconnectDisabledObservers();
+			for (const element of ownedElements) {
+				element.removeAttribute(ATTRIBUTE_DISABLED);
+			}
+			ownedElements.clear();
+			return;
 		}
 
-		let nodeList;
-		try {
-			const baseElements =
-				elements.length > 0 ? elements : self.querySelectorAll(query);
-			nodeList = new Set([
-				...baseElements,
-				...getSlottedElements.call(self, query),
-			]);
-		} catch (e) {
-			nodeList = elements;
+		observeDisabledTargets();
+		const targets = getDisabledTargets();
+		for (const element of [...ownedElements]) {
+			if (!targets.has(element)) {
+				element.removeAttribute(ATTRIBUTE_DISABLED);
+				ownedElements.delete(element);
+			}
 		}
 
-		for (const element of [...nodeList]) {
-			if (flag === true) {
+		for (const element of targets) {
+			if (!element.hasAttribute(ATTRIBUTE_DISABLED)) {
 				element.setAttribute(ATTRIBUTE_DISABLED, "");
-			} else {
-				element.removeAttribute(ATTRIBUTE_DISABLED);
+				ownedElements.add(element);
 			}
 		}
 	};