@schukai/monster 4.136.7 → 4.136.8

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.136.7"}
+{"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.136.8"}

package/source/components/form/select.mjs

@@ -2238,22 +2238,56 @@ function parseSlotsToOptions() {
 function buildSelectionLabel(value) {
 	const strict = this.getOption("features.useStrictValueComparison") === true;
 	const map = this[optionsMapSymbol];
-	const key = strict ? value : String(value);
+	const key = strict ? value : getSelectionStateKey.call(this, value);
 
 	if (map && map.has(key)) {
 		if (clearUnresolvedSelectionValue.call(this, value)) {
-			this[lookupCacheSymbol].delete(value);
+			this[lookupCacheSymbol].delete(getSelectionCacheKey.call(this, value));
 		}
 		return map.get(key);
 	}
 
-	if (this[lookupCacheSymbol].has(value)) {
-		return this[lookupCacheSymbol].get(value);
+	const cacheKey = getSelectionCacheKey.call(this, value);
+	if (this[lookupCacheSymbol].has(cacheKey)) {
+		return this[lookupCacheSymbol].get(cacheKey);
 	}
 
 	return undefined;
 }
 
+/**
+ * @private
+ * @param {*} value
+ * @returns {string}
+ */
+function getSelectionValueLabel(value) {
+	if (isValueIsEmpty.call(this, value)) {
+		return "";
+	}
+
+	if (isPrimitive(value)) {
+		return String(value);
+	}
+
+	if (isObject(value)) {
+		for (const key of ["value", "id", "key"]) {
+			const candidate = value?.[key];
+			if (!isValueIsEmpty.call(this, candidate) && isPrimitive(candidate)) {
+				return String(candidate);
+			}
+		}
+
+		try {
+			const json = JSON.stringify(value);
+			if (isString(json)) {
+				return json;
+			}
+		} catch (e) {}
+	}
+
+	return String(value);
+}
+
 /**
  * @private
  * @param {*} value
@@ -2262,7 +2296,33 @@ function buildSelectionLabel(value) {
 function getSelectionStateKey(value) {
 	return this.getOption("features.useStrictValueComparison") === true
 		? value
-		: String(value);
+		: getSelectionValueLabel.call(this, value);
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @returns {*}
+ */
+function getSelectionCacheKey(value) {
+	return getSelectionStateKey.call(this, value);
+}
+
+/**
+ * @private
+ * @param {*} current
+ * @param {*} expected
+ * @returns {boolean}
+ */
+function areLookupValuesEqual(current, expected) {
+	if (this.getOption("features.useStrictValueComparison") === true) {
+		return current === expected;
+	}
+
+	return (
+		getSelectionValueLabel.call(this, current) ===
+		getSelectionValueLabel.call(this, expected)
+	);
 }
 
 /**
@@ -2357,6 +2417,8 @@ function buildSelectionItem(value, preferredLabel) {
  */
 async function lookupValueAndCache(value) {
 	const lookupUrl = this.getOption("lookup.url");
+	const lookupValue = getSelectionValueLabel.call(this, value);
+	const cacheKey = getSelectionCacheKey.call(this, value);
 	// A more robust check for invalid values. 0 and "" are valid.
 	if (
 		!lookupUrl ||
@@ -2381,7 +2443,10 @@ async function lookupValueAndCache(value) {
 
 		const markerOpen = this.getOption("filter.marker.open", "{");
 		const markerClose = this.getOption("filter.marker.close", "}");
-		const url = lookupUrl.replace(`${markerOpen}filter${markerClose}`, value);
+		const url = lookupUrl.replace(
+			`${markerOpen}filter${markerClose}`,
+			lookupValue,
+		);
 
 		const data = await fetchData.call(this, url);
 
@@ -2407,8 +2472,9 @@ async function lookupValueAndCache(value) {
 			}
 
 			// The lookup might return more than the requested value, so we cache all of them.
-			if (this[lookupCacheSymbol].get(itemValue) !== itemLabel) {
-				this[lookupCacheSymbol].set(itemValue, itemLabel);
+			const itemCacheKey = getSelectionCacheKey.call(this, itemValue);
+			if (this[lookupCacheSymbol].get(itemCacheKey) !== itemLabel) {
+				this[lookupCacheSymbol].set(itemCacheKey, itemLabel);
 				refreshSelection = true;
 			}
 
@@ -2416,13 +2482,13 @@ async function lookupValueAndCache(value) {
 				refreshSelection = true;
 			}
 
-			if (`${itemValue}` === `${value}`) {
+			if (areLookupValuesEqual.call(this, itemValue, value)) {
 				found = true;
 			}
 		}
 
-		if (!found && !this[lookupCacheSymbol].has(value)) {
-			this[lookupCacheSymbol].set(value, `${value}`);
+		if (!found && !this[lookupCacheSymbol].has(cacheKey)) {
+			this[lookupCacheSymbol].set(cacheKey, lookupValue);
 			refreshSelection = true;
 		}
 
@@ -2433,8 +2499,8 @@ async function lookupValueAndCache(value) {
 		hasError = true;
 		addErrorAttribute(this, e);
 
-		if (!this[lookupCacheSymbol].has(value)) {
-			this[lookupCacheSymbol].set(value, `${value}`);
+		if (!this[lookupCacheSymbol].has(cacheKey)) {
+			this[lookupCacheSymbol].set(cacheKey, lookupValue);
 			refreshSelection = true;
 		}
 
@@ -2482,11 +2548,7 @@ function getSelectionLabel(value) {
 		});
 	}
 
-	if (isString(value) || isInteger(value)) {
-		return `${value}`;
-	}
-
-	return this.getOption("labels.cannot-be-loaded", value);
+	return getSelectionValueLabel.call(this, value);
 }
 
 /**
@@ -2556,17 +2618,15 @@ function initOptionObserver() {
 				if (isArray(options)) {
 					for (const o of options) {
 						if (isPrimitive(o)) {
-							const key = strict ? o : String(o);
+							const key = getSelectionStateKey.call(self, o);
 							if (!map.has(key)) {
 								map.set(key, o);
 							}
 						} else if (isObject(o)) {
 							const v = o?.value;
 							const l = o?.label;
-							// If strict is true, use value as is (could be number, symbol, etc.)
-							// If strict is false, use String(value) to allow loose matching
 							if (v !== undefined) {
-								const key = strict ? v : String(v);
+								const key = getSelectionStateKey.call(self, v);
 								if (!map.has(key)) {
 									map.set(key, l);
 								}

package/source/components/form/util/floating-ui.mjs

@@ -219,15 +219,13 @@ function buildFloatingMiddleware(
 		const kv = line.split(":");
 		const fn = kv.shift();
 
-			switch (fn) {
-				case "flip":
-					result[key] = flip(detectOverflowOptions);
-					break;
-				case "shift":
-					result[key] = shift(
-						normalizeShiftOptions(kv, detectOverflowOptions),
-					);
-					break;
+		switch (fn) {
+			case "flip":
+				result[key] = flip(detectOverflowOptions);
+				break;
+			case "shift":
+				result[key] = shift(normalizeShiftOptions(kv, detectOverflowOptions));
+				break;
 			case "autoPlacement":
 				let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
 
@@ -922,7 +920,10 @@ function startAutoUpdate(controlElement, popperElement, callback) {
 	stopAutoUpdate(popperElement);
 	autoUpdateCleanupMap.set(
 		popperElement,
-		autoUpdate(controlElement, popperElement, callback),
+		autoUpdate(controlElement, popperElement, callback, {
+			elementResize: typeof ResizeObserver === "function",
+			layoutShift: false,
+		}),
 	);
 }
 
@@ -939,6 +940,10 @@ function stopAutoUpdate(popperElement) {
 function startFloatingResizeObserver(controlElement, popperElement, config) {
 	stopFloatingResizeObserver(popperElement);
 
+	if (typeof ResizeObserver !== "function") {
+		return;
+	}
+
 	const observer = new ResizeObserver(() => {
 		scheduleSettlingPass(controlElement, popperElement, config);
 	});
@@ -949,7 +954,10 @@ function startFloatingResizeObserver(controlElement, popperElement, config) {
 
 function stopFloatingResizeObserver(popperElement) {
 	const observer = floatingResizeObserverMap.get(popperElement);
-	if (observer instanceof ResizeObserver) {
+	if (
+		typeof ResizeObserver === "function" &&
+		observer instanceof ResizeObserver
+	) {
 		observer.disconnect();
 	}
 	floatingResizeObserverMap.delete(popperElement);

package/source/components/form/util/popper.mjs

@@ -180,6 +180,10 @@ function syncAutoUpdate(instance) {
 		() => {
 			void instance.update();
 		},
+		{
+			elementResize: typeof ResizeObserver === "function",
+			layoutShift: false,
+		},
 	);
 }
 

package/source/components/navigation/site-navigation.mjs

@@ -44,6 +44,13 @@ const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
 const hideHamburgerMenuSymbol = Symbol("hideHamburgerMenu");
 const hamburgerCloseButtonSymbol = Symbol("hamburgerCloseButton");
 
+function getAutoUpdateOptions() {
+	return {
+		elementResize: typeof ResizeObserver === "function",
+		layoutShift: false,
+	};
+}
+
 /**
  * A responsive site navigation that automatically moves menu items into a hamburger menu
  * when there isn't enough available space.
@@ -215,39 +222,48 @@ function initEventHandler() {
 
 		hamburgerNav.scrollIntoView({ block: "start", behavior: "smooth" });
 
-		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
-			if (window.innerWidth > 768) {
-				const strategy = getBestPositionStrategy(this);
-
-				computePosition(hamburgerButton, hamburgerNav, {
-					placement: "bottom-end",
-					strategy: strategy,
-					middleware: [
-						offset(8),
-						flip(),
-						shift({ padding: 8 }),
-						size({
-							apply: ({ availableHeight, elements }) => {
-								Object.assign(elements.floating.style, {
-									maxHeight: `${availableHeight}px`,
-									overflowY: "auto",
-								});
-							},
-							padding: 8,
-						}),
-					],
-				}).then(({ x, y, strategy }) => {
+		cleanup = autoUpdate(
+			hamburgerButton,
+			hamburgerNav,
+			() => {
+				if (window.innerWidth > 768) {
+					const strategy = getBestPositionStrategy(this);
+
+					computePosition(hamburgerButton, hamburgerNav, {
+						placement: "bottom-end",
+						strategy: strategy,
+						middleware: [
+							offset(8),
+							flip(),
+							shift({ padding: 8 }),
+							size({
+								apply: ({ availableHeight, elements }) => {
+									Object.assign(elements.floating.style, {
+										maxHeight: `${availableHeight}px`,
+										overflowY: "auto",
+									});
+								},
+								padding: 8,
+							}),
+						],
+					}).then(({ x, y, strategy }) => {
+						Object.assign(hamburgerNav.style, {
+							position: strategy,
+							left: `${x}px`,
+							top: `${y}px`,
+						});
+					});
+				} else {
+					// Mobile view (fullscreen overlay), position is handled by CSS
 					Object.assign(hamburgerNav.style, {
-						position: strategy,
-						left: `${x}px`,
-						top: `${y}px`,
+						position: "",
+						left: "",
+						top: "",
 					});
-				});
-			} else {
-				// Mobile view (fullscreen overlay), position is handled by CSS
-				Object.assign(hamburgerNav.style, { position: "", left: "", top: "" });
-			}
-		});
+				}
+			},
+			getAutoUpdateOptions(),
+		);
 		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
 	};
 
@@ -395,35 +411,40 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
 			level,
 		});
 		if (!cleanup) {
-			cleanup = autoUpdate(parentLi, submenu, () => {
-				const middleware = [offset(8), flip(), shift({ padding: 8 })];
-				const containsSubmenus = submenu.querySelector(
-					"ul, div[part='mega-menu']",
-				);
-				if (!containsSubmenus) {
-					middleware.push(
-						size({
-							apply: ({ availableHeight, elements }) => {
-								Object.assign(elements.floating.style, {
-									maxHeight: `${availableHeight}px`,
-									overflowY: "auto",
-								});
-							},
-							padding: 8,
-						}),
+			cleanup = autoUpdate(
+				parentLi,
+				submenu,
+				() => {
+					const middleware = [offset(8), flip(), shift({ padding: 8 })];
+					const containsSubmenus = submenu.querySelector(
+						"ul, div[part='mega-menu']",
 					);
-				}
-				computePosition(parentLi, submenu, {
-					placement: level === 1 ? "bottom-start" : "right-start",
-					middleware: middleware,
-				}).then(({ x, y, strategy }) => {
-					Object.assign(submenu.style, {
-						position: strategy,
-						left: `${x}px`,
-						top: `${y}px`,
+					if (!containsSubmenus) {
+						middleware.push(
+							size({
+								apply: ({ availableHeight, elements }) => {
+									Object.assign(elements.floating.style, {
+										maxHeight: `${availableHeight}px`,
+										overflowY: "auto",
+									});
+								},
+								padding: 8,
+							}),
+						);
+					}
+					computePosition(parentLi, submenu, {
+						placement: level === 1 ? "bottom-start" : "right-start",
+						middleware: middleware,
+					}).then(({ x, y, strategy }) => {
+						Object.assign(submenu.style, {
+							position: strategy,
+							left: `${x}px`,
+							top: `${y}px`,
+						});
 					});
-				});
-			});
+				},
+				getAutoUpdateOptions(),
+			);
 		}
 	};
 

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("4.128.3");
+	monsterVersion = new Version("4.136.7");
 
 	return monsterVersion;
 }

package/test/cases/components/form/message-state-button.mjs

@@ -73,8 +73,9 @@ describe("MessageStateButton", function () {
 
 		describe("document.createElement", function () {
 			it("should instance of message-state-button", function () {
-				expect(document.createElement("monster-message-state-button")).is
-					.instanceof(MessageStateButton);
+				expect(
+					document.createElement("monster-message-state-button"),
+				).is.instanceof(MessageStateButton);
 			});
 		});
 	});
@@ -93,9 +94,7 @@ describe("MessageStateButton", function () {
 
 			setTimeout(() => {
 				try {
-					const inner = button.shadowRoot.querySelector(
-						"monster-state-button",
-					);
+					const inner = button.shadowRoot.querySelector("monster-state-button");
 					expect(inner).to.exist;
 
 					button.setAttribute("disabled", "");
@@ -231,19 +230,22 @@ describe("MessageStateButton", function () {
 
 			setTimeout(() => {
 				try {
-					button.setMessage("<div><strong>Saved</strong><p>plain html</p></div>");
+					button.setMessage(
+						"<div><strong>Saved</strong><p>plain html</p></div>",
+					);
 					button.showMessage();
 
 					setTimeout(() => {
 						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
+							const content =
+								button.shadowRoot.querySelector('[part="content"]');
 							const message = button.shadowRoot.querySelector(
 								'[data-monster-role="message"]',
 							);
 							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"both",
-							);
+							expect(
+								content.getAttribute("data-monster-overflow-mode"),
+							).to.equal("both");
 							expect(
 								content.getAttribute("data-monster-message-layout"),
 							).to.equal("prose");
@@ -306,10 +308,7 @@ describe("MessageStateButton", function () {
 				try {
 					const wrapper = document.createElement("div");
 					const line = document.createElement("div");
-					line.setAttribute(
-						"style",
-						"white-space: nowrap; overflow-x: auto;",
-					);
+					line.setAttribute("style", "white-space: nowrap; overflow-x: auto;");
 					line.textContent =
 						"this is intentionally a single long line to trigger wide layout";
 					wrapper.appendChild(line);
@@ -319,14 +318,15 @@ describe("MessageStateButton", function () {
 
 					setTimeout(() => {
 						try {
-							const content = button.shadowRoot.querySelector('[part="content"]');
+							const content =
+								button.shadowRoot.querySelector('[part="content"]');
 							const message = button.shadowRoot.querySelector(
 								'[data-monster-role="message"]',
 							);
 							expect(content).to.exist;
-							expect(content.getAttribute("data-monster-overflow-mode")).to.equal(
-								"both",
-							);
+							expect(
+								content.getAttribute("data-monster-overflow-mode"),
+							).to.equal("both");
 							expect(
 								content.getAttribute("data-monster-message-layout"),
 							).to.equal("wide");
@@ -351,7 +351,8 @@ describe("MessageStateButton", function () {
 
 		beforeEach(() => {
 			originalInnerWidth = window.innerWidth;
-			originalGetBoundingClientRect = HTMLElement.prototype.getBoundingClientRect;
+			originalGetBoundingClientRect =
+				HTMLElement.prototype.getBoundingClientRect;
 		});
 
 		afterEach(() => {
@@ -360,7 +361,8 @@ describe("MessageStateButton", function () {
 				writable: true,
 				value: originalInnerWidth,
 			});
-			HTMLElement.prototype.getBoundingClientRect = originalGetBoundingClientRect;
+			HTMLElement.prototype.getBoundingClientRect =
+				originalGetBoundingClientRect;
 			let mocks = document.getElementById("mocks");
 			mocks.innerHTML = "";
 		});
@@ -388,14 +390,7 @@ describe("MessageStateButton", function () {
 					};
 				}
 
-				return {
-					width: 100,
-					height: 40,
-					top: 0,
-					left: 0,
-					right: 100,
-					bottom: 40,
-				};
+				return originalGetBoundingClientRect.call(this);
 			};
 
 			setTimeout(() => {
@@ -405,18 +400,12 @@ describe("MessageStateButton", function () {
 					);
 					button.showMessage();
 
-					setTimeout(() => {
-						try {
-							const popper = button.shadowRoot.querySelector(
-								'[data-monster-role="popper"]',
-							);
-							expect(popper.style.width).to.equal("512px");
-							expect(popper.style.maxWidth).to.equal("512px");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
+					const popper = button.shadowRoot.querySelector(
+						'[data-monster-role="popper"]',
+					);
+					expect(popper.style.width).to.equal("512px");
+					expect(popper.style.maxWidth).to.equal("512px");
+					done();
 				} catch (e) {
 					done(e);
 				}
@@ -446,14 +435,7 @@ describe("MessageStateButton", function () {
 					};
 				}
 
-				return {
-					width: 100,
-					height: 40,
-					top: 0,
-					left: 0,
-					right: 100,
-					bottom: 40,
-				};
+				return originalGetBoundingClientRect.call(this);
 			};
 
 			setTimeout(() => {
@@ -465,18 +447,12 @@ describe("MessageStateButton", function () {
 					button.setMessage(wrapper);
 					button.showMessage();
 
-					setTimeout(() => {
-						try {
-							const popper = button.shadowRoot.querySelector(
-								'[data-monster-role="popper"]',
-							);
-							expect(popper.style.width).to.equal("768px");
-							expect(popper.style.maxWidth).to.equal("768px");
-							done();
-						} catch (e) {
-							done(e);
-						}
-					}, 0);
+					const popper = button.shadowRoot.querySelector(
+						'[data-monster-role="popper"]',
+					);
+					expect(popper.style.width).to.equal("768px");
+					expect(popper.style.maxWidth).to.equal("768px");
+					done();
 				} catch (e) {
 					done(e);
 				}

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

@@ -980,6 +980,52 @@ describe('Select', function () {
             }, 250);
         });
 
+        it('should keep unresolved object lookup values visible by key and mark their badge', function (done) {
+            this.timeout(3000);
+
+            let mocks = document.getElementById('mocks');
+            const requests = [];
+            global['fetch'] = function (url) {
+                requests.push(url.toString());
+                return createJsonResponse({
+                    items: [],
+                    pagination: {
+                        total: 0,
+                        page: 1,
+                        perPage: 1
+                    }
+                });
+            };
+
+            const select = document.createElement('monster-select');
+            select.setOption('lookup.url', 'https://example.com/items?filter={filter}');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('selection', [{value: {id: 'missing-key'}}]);
+            mocks.appendChild(select);
+
+            setTimeout(() => {
+                try {
+                    const badge = select.shadowRoot.querySelector('[data-monster-role=badge]');
+                    const badgeLabel = select.shadowRoot.querySelector('[data-monster-role=badge-label]');
+
+                    expect(requests).to.include('https://example.com/items?filter=missing-key');
+                    expect(badge).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel).to.be.instanceof(HTMLDivElement);
+                    expect(badgeLabel.textContent.trim()).to.equal('missing-key');
+                    expect(badge.className).to.contain('monster-badge-warning');
+                    expect(badge.className).to.not.contain('monster-badge-primary');
+                    expect(badge.getAttribute('data-monster-unresolved')).to.equal('true');
+                    expect(badgeLabel.textContent).to.not.contain(select.getOption('labels.cannot-be-loaded'));
+                } catch (e) {
+                    return done(e);
+                }
+
+                done();
+            }, 250);
+        });
+
         it('should clear the unresolved badge state once a local option can resolve the value', function (done) {
             this.timeout(4000);
 

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("4.128.3")
+        monsterVersion = new Version("4.136.7")
 
         let m = getMonsterVersion();