@schukai/monster 4.99.0 → 4.100.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.100.0] - 2026-01-16
+
+### Add Features
+
+- Add confirmation button and API feedback for issue [#375](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/375)
+
+
+
 ## [4.99.0] - 2026-01-15
 
 ### Add Features

package/package.json

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

package/source/components/form/message-state-button.mjs

@@ -36,6 +36,9 @@ export { MessageStateButton };
  */
 const buttonElementSymbol = Symbol("buttonElement");
 const innerDisabledObserverSymbol = Symbol("innerDisabledObserver");
+const popperElementSymbol = Symbol("popperElement");
+const messageElementSymbol = Symbol("messageElement");
+const measurementPopperSymbol = Symbol("measurementPopper");
 
 /**
  * A specialized button component that combines state management with message display capabilities.
@@ -239,6 +242,7 @@ class MessageStateButton extends Popper {
 	 * @return {MessageStateButton} Returns the button instance for chaining
 	 */
 	showMessage(timeout) {
+		applyMeasuredMessageWidth.call(this);
 		this.showDialog.call(this);
 
 		if (timeout !== undefined) {
@@ -398,6 +402,12 @@ function initControlReferences() {
 	this[buttonElementSymbol] = this.shadowRoot.querySelector(
 		`[${ATTRIBUTE_ROLE}=button]`,
 	);
+	this[popperElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper]`,
+	);
+	this[messageElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=message]`,
+	);
 }
 
 /**
@@ -499,4 +509,106 @@ function getTemplate() {
     `;
 }
 
+/**
+ * @private
+ * @param {string|HTMLElement} content
+ * @return {HTMLElement|string|null}
+ */
+function getMeasurementContent(content) {
+	if (isString(content)) {
+		return content;
+	}
+
+	if (content instanceof HTMLElement) {
+		return content.cloneNode(true);
+	}
+
+	return null;
+}
+
+/**
+ * @private
+ * @return {{popper: HTMLElement, message: HTMLElement}|null}
+ */
+function ensureMeasurementPopper() {
+	if (this[measurementPopperSymbol]) {
+		return this[measurementPopperSymbol];
+	}
+
+	if (!this.shadowRoot) {
+		return null;
+	}
+
+	const popper = document.createElement("div");
+	popper.setAttribute(ATTRIBUTE_ROLE, "popper");
+	popper.setAttribute("data-measurement", "true");
+	popper.setAttribute("aria-hidden", "true");
+	popper.style.position = "absolute";
+	popper.style.left = "-10000px";
+	popper.style.top = "-10000px";
+	popper.style.visibility = "hidden";
+	popper.style.display = "block";
+	popper.style.pointerEvents = "none";
+	popper.style.maxWidth = "none";
+	popper.style.width = "max-content";
+
+	const message = document.createElement("div");
+	message.setAttribute(ATTRIBUTE_ROLE, "message");
+	message.className = "flex";
+
+	popper.appendChild(message);
+	this.shadowRoot.appendChild(popper);
+
+	this[measurementPopperSymbol] = { popper, message };
+	return this[measurementPopperSymbol];
+}
+
+/**
+ * @private
+ */
+function applyMeasuredMessageWidth() {
+	const popper = this[popperElementSymbol];
+	if (!popper) {
+		return;
+	}
+
+	const content = this.getOption("message.content");
+	const measureContent = getMeasurementContent(content);
+	if (!measureContent) {
+		return;
+	}
+
+	const measurement = ensureMeasurementPopper.call(this);
+	if (!measurement?.message) {
+		return;
+	}
+
+	measurement.message.innerHTML = "";
+	if (isString(measureContent)) {
+		measurement.message.innerHTML = measureContent;
+	} else {
+		measurement.message.appendChild(measureContent);
+	}
+
+	const measuredWidth = Math.ceil(
+		measurement.popper.getBoundingClientRect().width,
+	);
+	const fontSize = parseFloat(getComputedStyle(popper).fontSize) || 16;
+	const minWidth = Math.round(fontSize * 12);
+	const maxWidth = Math.max(
+		minWidth,
+		Math.min(window.innerWidth * 0.7, fontSize * 32),
+	);
+	const targetWidth = Math.max(
+		minWidth,
+		Math.min(measuredWidth || minWidth, maxWidth),
+	);
+
+	popper.style.width = `${targetWidth}px`;
+	popper.style.minWidth = `${minWidth}px`;
+	popper.style.maxWidth = `${maxWidth}px`;
+	popper.style.whiteSpace = "normal";
+	popper.style.overflowWrap = "anywhere";
+}
+
 registerCustomElement(MessageStateButton);