@schukai/monster 4.120.0 → 4.121.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.121.0] - 2026-02-13
+
+### Add Features
+
+- Enhance dismissal functionality for Popper and Select components
+
+
+
+## [4.120.1] - 2026-02-12
+
+### Bug Fixes
+
+- new setContent/setPDF API for MonsterViewer
+
+
+
 ## [4.120.0] - 2026-02-03
 
 ### 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.120.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.121.0"}

package/source/components/content/viewer.mjs

@@ -138,7 +138,14 @@ class Viewer extends CustomElement {
 	/**
 	 * Sets the content of an element based on the provided content and media type.
 	 *
-	 * @param {string} content - The content to be set.
+	 * Supported forms:
+	 * - setContent(contentString, mediaType)
+	 * - setContent({ mediaType, data, encoding })
+	 *
+	 * The declarative form requires an explicit `encoding` when `data` is a string.
+	 * Use `encoding: "url"` for URLs and `encoding: "base64"` for base64 payloads.
+	 *
+	 * @param {string|object} content - The content to be set or a declarative payload.
 	 * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
 	 * @return {void} This method does not return a value.
 	 * @throws {Error} Throws an error if shadowRoot is not defined.
@@ -148,6 +155,44 @@ class Viewer extends CustomElement {
 			throw new Error("no shadow-root is defined");
 		}
 
+		let declarativePayload = null;
+		// Declarative form: { mediaType, data, encoding }
+		if (
+			content &&
+			typeof content === "object" &&
+			!isBlob(content) &&
+			!(content instanceof URL)
+		) {
+			const { mediaType: mt, data, encoding } = content;
+			mediaType = mt ?? mediaType ?? "text/plain";
+			declarativePayload = { data, encoding };
+
+			if (isString(data)) {
+				if (!encoding) {
+					this.dispatchEvent(
+						new CustomEvent("viewer-error", {
+							detail: "String content requires explicit encoding",
+						}),
+					);
+					return;
+				}
+				if (encoding === "base64") {
+					content = data;
+				} else if (encoding === "url") {
+					content = data;
+				} else {
+					this.dispatchEvent(
+						new CustomEvent("viewer-error", {
+							detail: "Invalid encoding",
+						}),
+					);
+					return;
+				}
+			} else {
+				content = data;
+			}
+		}
+
 		const renderers = this.getOption("renderers");
 
 		const isDataURL = (value) => {
@@ -235,7 +280,10 @@ class Viewer extends CustomElement {
 				switch (mediaTypeObject.subtype) {
 					case "pdf":
 						if (checkRenderer("pdf", mediaTypeObject.toString())) {
-							renderers.pdf.call(this, content);
+							renderers.pdf.call(
+								this,
+								declarativePayload ? declarativePayload : content,
+							);
 						}
 						break;
 
@@ -426,13 +474,63 @@ class Viewer extends CustomElement {
 	/**
 	 * Configures and embeds a PDF document into the application with customizable display settings.
 	 *
-	 * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL, or base64 string.
+	 * Supported forms:
+	 * - setPDF(blobOrUrlOrBase64String, navigation, toolbar, scrollbar)
+	 * - setPDF({ data, encoding, navigation, toolbar, scrollbar })
+	 *
+	 * The declarative form requires an explicit `encoding` when `data` is a string.
+	 * Use `encoding: "url"` for URLs and `encoding: "base64"` for base64 payloads.
+	 *
+	 * @param {Blob|URL|string|object} data The PDF data to be embedded. Can be provided as a Blob, URL, or base64 string,
+	 *                                    or a declarative payload: { data, encoding, navigation, toolbar, scrollbar }.
 	 * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
 	 * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
 	 * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
 	 * @return {void} This method returns nothing but sets the embedded PDF as the content.
 	 */
 	setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
+		let stringEncoding = null;
+		// Declarative form: { data, encoding, navigation, toolbar, scrollbar }
+		if (
+			data &&
+			typeof data === "object" &&
+			!isBlob(data) &&
+			!(data instanceof URL)
+		) {
+			const payload = data;
+			data = payload.data;
+			stringEncoding = payload.encoding ?? null;
+			if (typeof payload.navigation === "boolean") {
+				navigation = payload.navigation;
+			}
+			if (typeof payload.toolbar === "boolean") {
+				toolbar = payload.toolbar;
+			}
+			if (typeof payload.scrollbar === "boolean") {
+				scrollbar = payload.scrollbar;
+			}
+			if (isString(data)) {
+				if (!payload.encoding) {
+					this.dispatchEvent(
+						new CustomEvent("viewer-error", {
+							detail: "String PDF data requires explicit encoding",
+						}),
+					);
+					return;
+				}
+				if (payload.encoding === "base64") {
+					// handled below as string/base64
+				} else if (payload.encoding === "url") {
+					// handled below as string/url
+				} else {
+					this.dispatchEvent(
+						new CustomEvent("viewer-error", { detail: "Invalid encoding" }),
+					);
+					return;
+				}
+			}
+		}
+
 		const hashes =
 			"#toolbar=" +
 			(toolbar ? "1" : "0") +
@@ -440,7 +538,6 @@ class Viewer extends CustomElement {
 			(navigation ? "1" : "0") +
 			"&scrollbar=" +
 			(scrollbar ? "1" : "0");
-
 		let pdfURL = "";
 		if (isBlob(data)) {
 			pdfURL = URL.createObjectURL(data);
@@ -453,11 +550,18 @@ class Viewer extends CustomElement {
 				pdfURL = data.toString();
 			}
 		} else if (isString(data)) {
-			//URL.createObjectURL(data);
-			const blobObj = new Blob([atob(data)], { type: "application/pdf" });
-			const url = window.URL.createObjectURL(blobObj);
-
-			pdfURL = data;
+			if (stringEncoding === "url") {
+				if (data.indexOf("#") === -1) {
+					pdfURL = data + hashes;
+				} else {
+					pdfURL = data;
+				}
+			} else {
+				// Default legacy behavior: treat string as base64
+				const blobObj = new Blob([atob(data)], { type: "application/pdf" });
+				const url = window.URL.createObjectURL(blobObj);
+				pdfURL = url + hashes;
+			}
 		} else {
 			this.dispatchEvent(
 				new CustomEvent("viewer-error", { detail: "Blob or URL expected" }),

package/source/components/form/popper-button.mjs

@@ -18,7 +18,7 @@ import {
 	assembleMethodSymbol,
 	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { getDocument } from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards, getDocument } from "../../dom/util.mjs";
 import { isFunction } from "../../types/is.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { Popper } from "../layout/popper.mjs";
@@ -77,6 +77,20 @@ const popperElementSymbol = Symbol("popperElement");
  */
 const arrowElementSymbol = Symbol("arrowElement");
 
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const hostElementSymbol = Symbol("hostElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const usesHostDismissSymbol = Symbol("usesHostDismiss");
+
 /**
  * A beautiful popper button that can make your life easier and also looks good.
  *
@@ -149,6 +163,10 @@ class PopperButton extends Popper {
 				role: null,
 				label: null,
 			},
+
+			features: {
+				closeOnOutsideClick: true,
+			},
 		});
 	}
 
@@ -187,11 +205,24 @@ class PopperButton extends Popper {
 	connectedCallback() {
 		super.connectedCallback();
 
+		this[hostElementSymbol] = findElementWithSelectorUpwards(
+			this,
+			"monster-host",
+		);
+		this[usesHostDismissSymbol] =
+			this[hostElementSymbol] &&
+			typeof this[hostElementSymbol].registerDismissable === "function";
+
 		const document = getDocument();
 
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			// close on outside ui-events
-			document.addEventListener(type, this[closeEventHandler]);
+		if (
+			this.getOption("features.closeOnOutsideClick", true) === true &&
+			!this[usesHostDismissSymbol]
+		) {
+			for (const [, type] of Object.entries(["click", "touch"])) {
+				// close on outside ui-events
+				document.addEventListener(type, this[closeEventHandler]);
+			}
 		}
 
 		updatePopper.call(this);
@@ -204,9 +235,14 @@ class PopperButton extends Popper {
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		// close on outside ui-events
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			document.removeEventListener(type, this[closeEventHandler]);
+		if (
+			this.getOption("features.closeOnOutsideClick", true) === true &&
+			!this[usesHostDismissSymbol]
+		) {
+			// close on outside ui-events
+			for (const [, type] of Object.entries(["click", "touch"])) {
+				document.removeEventListener(type, this[closeEventHandler]);
+			}
 		}
 
 		disconnectResizeObserver.call(this);

package/source/components/form/select.mjs

@@ -38,7 +38,7 @@ import {
   fireEvent,
 } from "../../dom/events.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
-import { getDocument } from "../../dom/util.mjs";
+import { findElementWithSelectorUpwards, getDocument } from "../../dom/util.mjs";
 import {
   getDocumentTranslations,
   Translations,
@@ -105,6 +105,9 @@ const isLoadingSymbol = Symbol("isLoading");
  * @type {Symbol}
  */
 const closeEventHandler = Symbol("closeEventHandler");
+const hostElementSymbol = Symbol("hostElement");
+const dismissRecordSymbol = Symbol("dismissRecord");
+const usesHostDismissSymbol = Symbol("usesHostDismiss");
 
 /**
  * local symbol
@@ -841,11 +844,20 @@ class Select extends CustomControl {
    */
   connectedCallback() {
     super.connectedCallback();
-    const document = getDocument();
-
-    for (const [, type] of Object.entries(["click", "touch"])) {
-      // close on outside ui-events
-      document.addEventListener(type, this[closeEventHandler]);
+    this[hostElementSymbol] = findElementWithSelectorUpwards(
+      this,
+      "monster-host",
+    );
+    this[usesHostDismissSymbol] =
+      this[hostElementSymbol] &&
+      typeof this[hostElementSymbol].registerDismissable === "function";
+
+    if (!this[usesHostDismissSymbol]) {
+      const document = getDocument();
+      for (const [, type] of Object.entries(["click", "touch"])) {
+        // close on outside ui-events
+        document.addEventListener(type, this[closeEventHandler]);
+      }
     }
 
     parseSlotsToOptions.call(this);
@@ -873,13 +885,16 @@ class Select extends CustomControl {
    */
   disconnectedCallback() {
     super.disconnectedCallback();
-    const document = getDocument();
-
-    // close on outside ui-events
-    for (const [, type] of Object.entries(["click", "touch"])) {
-      document.removeEventListener(type, this[closeEventHandler]);
+    if (!this[usesHostDismissSymbol]) {
+      const document = getDocument();
+      // close on outside ui-events
+      for (const [, type] of Object.entries(["click", "touch"])) {
+        document.removeEventListener(type, this[closeEventHandler]);
+      }
     }
 
+    unregisterFromHost.call(this);
+
     disconnectResizeObserver.call(this);
   }
 
@@ -3703,6 +3718,7 @@ function hide() {
   this[popperElementSymbol].style.display = "none";
   setStatusOrRemoveBadges.call(this, "closed");
   removeAttributeToken(this[controlElementSymbol], "class", "open");
+  unregisterFromHost.call(this);
 }
 
 /**
@@ -3772,6 +3788,7 @@ function show() {
   setStatusOrRemoveBadges.call(this, "open");
 
   addAttributeToken(this[controlElementSymbol], "class", "open");
+  registerWithHost.call(this);
 
   new Processing(() => {
     if (!self?.[remoteFilterFirstOpendSymbol]) {
@@ -3798,6 +3815,56 @@ function show() {
     });
 }
 
+/**
+ * @private
+ */
+function registerWithHost() {
+  if (!this[usesHostDismissSymbol]) {
+    return;
+  }
+
+  if (!(this[hostElementSymbol] instanceof HTMLElement)) {
+    return;
+  }
+
+  const record = this[hostElementSymbol].registerDismissable?.({
+    element: this,
+    owner: this,
+    close: () => {
+      hide.call(this);
+    },
+    priority: 20,
+    options: {
+      dismissOnOutside: true,
+    },
+  });
+
+  if (record) {
+    this[dismissRecordSymbol] = record;
+  }
+}
+
+/**
+ * @private
+ */
+function unregisterFromHost() {
+  if (!this[usesHostDismissSymbol]) {
+    return;
+  }
+
+  if (!(this[hostElementSymbol] instanceof HTMLElement)) {
+    return;
+  }
+
+  if (this[dismissRecordSymbol]) {
+    this[hostElementSymbol].unregisterDismissable?.(this[dismissRecordSymbol]);
+    this[dismissRecordSymbol] = null;
+    return;
+  }
+
+  this[hostElementSymbol].unregisterDismissable?.(this);
+}
+
 function initDefaultOptionsFromUrl() {
   const url = this.getOption("filter.defaultOptionsUrl");
   if (!url) {