@schukai/monster 4.148.2 → 4.148.4

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.4"}

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/form/select.mjs

@@ -113,6 +113,18 @@ const keyFilterEventSymbol = Symbol("keyFilterEvent");
  */
 const lazyLoadDoneSymbol = Symbol("lazyLoadDone");
 
+/**
+ * @private
+ * @type {Symbol}
+ */
+const lazyLoadRequestSymbol = Symbol("lazyLoadRequest");
+
+/**
+ * @private
+ * @type {Symbol}
+ */
+const lazyLoadErrorSymbol = Symbol("lazyLoadError");
+
 /**
  * @private
  * @type {Symbol}
@@ -300,6 +312,7 @@ const optionsMapVersionSnapshotSymbol = Symbol("optionsMapVersionSnapshot");
 const selectionVersionSymbol = Symbol("selectionVersion");
 const closeOnSelectAutoSymbol = Symbol("closeOnSelectAuto");
 const lastFilterValueSymbol = Symbol("lastFilterValue");
+const filterInputVersionSymbol = Symbol("filterInputVersion");
 
 /**
  * @private
@@ -2051,6 +2064,7 @@ function invalidatePendingRemoteWork() {
 	}
 	this[isLoadingSymbol] = false;
 	this[remoteInfoRequestSymbol] = null;
+	delete this[lazyLoadRequestSymbol];
 
 	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
 		try {
@@ -4014,6 +4028,7 @@ function handleFilterInputEvents() {
 	}
 
 	this[lastFilterValueSymbol] = filterValue;
+	bumpFilterInputVersion.call(this);
 
 	if (this[keyFilterEventSymbol] instanceof DeadMansSwitch) {
 		try {
@@ -4061,6 +4076,16 @@ function getCurrentFilterInputValue() {
 	return undefined;
 }
 
+function getFilterInputVersion() {
+	return Number.isInteger(this[filterInputVersionSymbol])
+		? this[filterInputVersionSymbol]
+		: 0;
+}
+
+function bumpFilterInputVersion() {
+	this[filterInputVersionSymbol] = getFilterInputVersion.call(this) + 1;
+}
+
 /**
  * @private
  */
@@ -4601,7 +4626,15 @@ function areOptionsAvailableAndInitInternal() {
 		options === null ||
 		(isArray(options) && options.length === 0)
 	) {
-		setStatusOrRemoveBadges.call(this, "empty");
+		const lazyLoadPending = this[lazyLoadRequestSymbol] instanceof Promise;
+		const lazyLoadError = isString(this[lazyLoadErrorSymbol]);
+		if (lazyLoadError) {
+			setStatusOrRemoveBadges.call(this, "error");
+		} else if (lazyLoadPending) {
+			setStatusOrRemoveBadges.call(this, "loading");
+		} else {
+			setStatusOrRemoveBadges.call(this, "empty");
+		}
 		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
 			if (this[isLoadingSymbol] !== true) {
 				if (isInteger(this.getOption("total"))) {
@@ -4615,7 +4648,9 @@ function areOptionsAvailableAndInitInternal() {
 
 		let msg = this.getOption("labels.no-options-available");
 
-		if (
+		if (lazyLoadError) {
+			msg = this.getOption("labels.cannot-be-loaded");
+		} else if (
 			this.getOption("url") !== null &&
 			this.getOption("features.lazyLoad") === true &&
 			this[lazyLoadDoneSymbol] !== true
@@ -4651,7 +4686,11 @@ function areOptionsAvailableAndInitInternal() {
 		if (this.getOption("features.emptyValueIfNoOptions") === true) {
 			this.value = "";
 		}
-		if (this[isLoadingSymbol] !== true) {
+		if (
+			this[isLoadingSymbol] !== true &&
+			lazyLoadPending === false &&
+			lazyLoadError === false
+		) {
 			addErrorAttribute(this, "No options available.");
 		}
 		return false;
@@ -5087,24 +5126,65 @@ function show() {
 		this.getOption("features.lazyLoad") && this[lazyLoadDoneSymbol] !== true;
 
 	if (lazyLoadFlag === true) {
-		this[lazyLoadDoneSymbol] = true;
+		if (this[lazyLoadRequestSymbol] instanceof Promise) {
+			return;
+		}
+
+		if (isString(this[lazyLoadErrorSymbol])) {
+			removeErrorAttribute(this, this[lazyLoadErrorSymbol]);
+			delete this[lazyLoadErrorSymbol];
+		}
+		removeErrorAttribute(this, "No options available.");
 		setStatusOrRemoveBadges.call(this, "loading");
 
-		new Processing(200, () => {
-			this.fetch()
-				.then(() => {
-					checkOptionState.call(this);
-					requestAnimationFrame(() => {
+		const lifecycleVersion = getRemoteLifecycleVersion.call(this);
+		const lazyLoadRequest = new Processing(200, () => {
+			if (
+				!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
+				this.isConnected !== true
+			) {
+				return;
+			}
+
+			return this.fetch();
+		}).run();
+		this[lazyLoadRequestSymbol] = lazyLoadRequest;
+
+		lazyLoadRequest
+			.then(() => {
+				if (
+					this[lazyLoadRequestSymbol] !== lazyLoadRequest ||
+					!isRemoteLifecycleCurrent.call(this, lifecycleVersion) ||
+					this.isConnected !== true
+				) {
+					return;
+				}
+
+				delete this[lazyLoadRequestSymbol];
+				this[lazyLoadDoneSymbol] = true;
+				delete this[lazyLoadErrorSymbol];
+				checkOptionState.call(this);
+				requestAnimationFrame(() => {
+					if (
+						isRemoteLifecycleCurrent.call(this, lifecycleVersion) &&
+						this.isConnected === true
+					) {
 						show.call(this);
-					});
-				})
-				.catch((e) => {
-					addErrorAttribute(this, e);
-					setStatusOrRemoveBadges.call(this, "error");
+					}
 				});
-		})
-			.run()
+			})
 			.catch((e) => {
+				if (
+					this[lazyLoadRequestSymbol] !== lazyLoadRequest ||
+					!isRemoteLifecycleCurrent.call(this, lifecycleVersion)
+				) {
+					return;
+				}
+
+				delete this[lazyLoadRequestSymbol];
+				this[lazyLoadDoneSymbol] = false;
+				this[lazyLoadErrorSymbol] =
+					e instanceof Error ? e.message : String(e);
 				addErrorAttribute(this, e);
 				setStatusOrRemoveBadges.call(this, "error");
 			});
@@ -5141,6 +5221,8 @@ function show() {
 	addAttributeToken(this[controlElementSymbol], "class", "open");
 	registerWithHost.call(this);
 
+	const filterInputVersion = getFilterInputVersion.call(this);
+
 	new Processing(() => {
 		const shouldLoadRemoteOptions =
 			getFilterMode.call(self) === FILTER_MODE_REMOTE &&
@@ -5152,12 +5234,18 @@ function show() {
 
 		if (shouldLoadDefaultOptions) {
 			setTimeout(() => {
+				if (getFilterInputVersion.call(this) !== filterInputVersion) {
+					return;
+				}
 				loadDefaultOptionsFromUrl.call(self).catch((e) => {
 					addErrorAttribute(self, e);
 				});
 			}, 0);
 		} else if (shouldLoadRemoteOptions) {
 			setTimeout(() => {
+				if (getFilterInputVersion.call(this) !== filterInputVersion) {
+					return;
+				}
 				self[cleanupOptionsListSymbol] = true;
 				filterFromRemote.call(self).catch((e) => {
 					addErrorAttribute(self, e);

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);
 			}
 		});