@schukai/monster 4.119.0 → 4.120.1

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.120.1] - 2026-02-12
+
+### Bug Fixes
+
+- new setContent/setPDF API for MonsterViewer
+
+
+
+## [4.120.0] - 2026-02-03
+
+### Add Features
+
+- Improve option observer efficiency
+
+
+
 ## [4.119.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.119.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.120.1"}

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

@@ -2238,15 +2238,19 @@ function initOptionObserver() {
       const strict =
         self.getOption("features.useStrictValueComparison") === true;
       const optionsVersion = self[optionsVersionSymbol] || 0;
+      const optionsSnapshot = self[optionsSnapshotSymbol];
+      const strictSnapshot = self[strictModeSnapshotSymbol];
+      const optionsVersionSnapshot = self[optionsMapVersionSnapshotSymbol];
+      const optionsChanged =
+        options !== optionsSnapshot || strict !== strictSnapshot;
+      const versionChanged = optionsVersion !== optionsVersionSnapshot;
 
       if (
-        options !== self[optionsSnapshotSymbol] ||
-        strict !== self[strictModeSnapshotSymbol] ||
-        optionsVersion !== self[optionsMapVersionSnapshotSymbol]
+        optionsChanged ||
+        versionChanged
       ) {
         self[optionsSnapshotSymbol] = options;
         self[strictModeSnapshotSymbol] = strict;
-        self[optionsMapVersionSnapshotSymbol] = optionsVersion;
 
         const map = new Map();
         if (isArray(options)) {
@@ -2272,7 +2276,11 @@ function initOptionObserver() {
         }
         self[optionsMapSymbol] = map;
 
-        const version = bumpOptionsVersion.call(self);
+        let version = optionsVersion;
+        if (!versionChanged) {
+          version = bumpOptionsVersion.call(self);
+        }
+        self[optionsMapVersionSnapshotSymbol] = version;
         scheduleSelectionSync.call(self, version);
       }
 

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.118.0");
+	monsterVersion = new Version("4.120.0");
 
 	return monsterVersion;
 }

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.118.0")
+        monsterVersion = new Version("4.120.0")
 
         let m = getMonsterVersion();
 

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 4.118.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Di 3. Feb 17:02:29 CET 2026</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 4.120.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update Do 12. Feb 21:50:57 CET 2026</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>