@schukai/monster 4.154.3 → 4.154.5

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.154.5] - 2026-10-04
+
+### Bug Fixes
+
+- **image-editor:** load raw SVG markup ([#589](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/589))
+
+
+
+## [4.154.4] - 2026-10-04
+
+### Bug Fixes
+
+- **data:** render and document metric values ([#587](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/587), [#588](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/588))
+
+
+
 ## [4.154.3] - 2026-10-02
 
 ### Bug Fixes

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.","exports":{".":"./source/monster.mjs","./CHANGELOG.md":"./CHANGELOG.md","./LICENSE":"./LICENSE","./README.md":"./README.md","./package.json":"./package.json","./source/*":"./source/*","./test/*":"./test/*"},"files":["source","test/cases","test/util","CHANGELOG.md"],"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"},"sideEffects":["./source/monster.mjs","./source/components/**","./source/i18n/**","./test/**"],"type":"module","version":"4.154.3"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.6"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","exports":{".":"./source/monster.mjs","./CHANGELOG.md":"./CHANGELOG.md","./LICENSE":"./LICENSE","./README.md":"./README.md","./package.json":"./package.json","./source/*":"./source/*","./test/*":"./test/*"},"files":["source","test/cases","test/util","CHANGELOG.md"],"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"},"sideEffects":["./source/monster.mjs","./source/components/**","./source/i18n/**","./test/**"],"type":"module","version":"4.154.5"}

package/source/components/content/image-editor.mjs

@@ -1181,6 +1181,25 @@ function setImageFromData(data, options) {
 
 	if (isString(data)) {
 		const trimmed = data.trim();
+		const normalizedContentType = contentType
+			.split(";", 1)[0]
+			.trim()
+			.toLowerCase();
+		const svgMarkup = trimmed.replace(/^<\?xml[\s\S]*?\?>\s*/iu, "");
+		if (
+			normalizedContentType === "image/svg+xml" &&
+			/^<svg(?:\s|>)/iu.test(svgMarkup)
+		) {
+			return loadImageFromSource.call(
+				this,
+				`data:image/svg+xml;charset=utf-8,${encodeURIComponent(trimmed)}`,
+				{
+					storeOriginal,
+					resetAspect: storeOriginal,
+					resetView: storeOriginal,
+				},
+			);
+		}
 		if (trimmed.startsWith("data:") || trimmed.startsWith("blob:")) {
 			return loadImageFromSource.call(this, trimmed, {
 				storeOriginal,

package/source/components/data/metric-graph.mjs

@@ -77,17 +77,20 @@ class MetricGraph extends CustomElement {
 	 *
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
-	 * @property {string} curve The curve of the graph (step, smooth, bubble, bar, area, dot, lollipop, line)
+	 * @property {string} graphType The graph renderer (step, smooth, bubble, bar, area, dot, lollipop, line)
 	 * @property {Object} values Value definitions
-	 * @property {number} values.value The value of the metric
+	 * @property {string|number|null} values.main The primary value of the metric
 	 * @property {number} values.change The change of the metric
-	 * @property {number} values.secondary The secondary value of the metric
-	 * @property {Array} values.points The points of the metric
+	 * @property {string|number|null} values.secondary The secondary value of the metric
+	 * @property {Array<number>|string} values.points The points of the metric
 	 * @property {Object} labels Label definitions
-	 * @property {string} labels.title Title of the metric
-	 * @property {string} labels.subtext Subtext of the metric
+	 * @property {string|null} labels.title Title of the metric
+	 * @property {string|null} labels.subtext Subtext of the metric
 	 * @property {Object} classes CSS classes
 	 * @property {string} classes.dot CSS class for the dot
+	 * @property {Object} aria Accessible descriptions
+	 * @property {string|null} aria.description Description of the complete metric card
+	 * @property {string|null} aria.graph Text alternative for the compact graph
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -113,6 +116,7 @@ class MetricGraph extends CustomElement {
 
 			aria: {
 				description: null,
+				graph: null,
 			},
 		});
 	}

package/source/components/data/metric.mjs

@@ -74,16 +74,18 @@ class Metric extends CustomElement {
 	 * @property {Object} templates Template definitions
 	 * @property {string} templates.main Main template
 	 * @property {Object} values Value definitions
-	 * @property {number} values.value The value of the metric
-	 * @property {number} values.change The change of the metric
-	 * @property {number} values.direction The direction of the metric
-	 * @property {number} values.secondary The secondary value of the metric
+	 * @property {string|number|null} values.main The primary value of the metric
+	 * @property {string|number|null} values.change The displayed change of the metric
+	 * @property {number} values.direction Rotation of the direction indicator in degrees
+	 * @property {string|number|null} values.secondary The secondary value of the metric
 	 * @property {Object} labels Label definitions
-	 * @property {string} labels.title Title of the metric
-	 * @property {string} labels.subtext Subtext of the metric
+	 * @property {string|null} labels.title Title of the metric
+	 * @property {string|null} labels.subtext Subtext of the metric
 	 * @property {Object} classes CSS classes
 	 * @property {string} classes.dot CSS class for the dot
-	 * @property {string} classes.metricChange CSS class for the metric change (positive/negative)
+	 * @property {string} classes.change CSS class for the metric change (positive/negative)
+	 * @property {Object} aria Accessible descriptions
+	 * @property {string|null} aria.description Description of the complete metric card
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {

package/source/dom/updater.mjs

@@ -1372,11 +1372,11 @@ function runUpdateContent(
 }
 
 function applyReplacementValue(element, value) {
-	if (!(element instanceof HTMLElement)) {
+	if (!(element instanceof Element)) {
 		return false;
 	}
 
-	if (value instanceof HTMLElement) {
+	if (value instanceof Element) {
 		if (element.childNodes.length === 1 && element.firstChild === value) {
 			return false;
 		}

package/test/cases/components/content/image-editor.mjs

@@ -109,4 +109,31 @@ describe('ImageEditor', function () {
             '<monster-button-bar class="grid-span-full monster-margin-top-2">',
         );
     });
+
+    it('loads raw SVG markup with its documented content type issue #589', async function () {
+        const OriginalImage = globalThis.Image;
+        const sources = [];
+
+        class ImageMock {
+            set src(value) {
+                sources.push(value);
+                queueMicrotask(() => this.onerror?.(new Error('test stop')));
+            }
+        }
+
+        globalThis.Image = ImageMock;
+
+        try {
+            const element = document.createElement('monster-image-editor');
+            const markup = '<svg xmlns="http://www.w3.org/2000/svg"><rect width="4" height="3"/></svg>';
+
+            await element.setImage(markup, {contentType: 'image/svg+xml'}).catch(() => {});
+
+            expect(sources).to.have.length(1);
+            expect(sources[0]).to.match(/^data:image\/svg\+xml;charset=utf-8,/);
+            expect(decodeURIComponent(sources[0].split(',', 2)[1])).to.equal(markup);
+        } finally {
+            globalThis.Image = OriginalImage;
+        }
+    });
 });

package/test/cases/components/data/metric-graph.mjs

@@ -0,0 +1,40 @@
+import {expect} from "chai";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+describe("MetricGraph", () => {
+	let MetricGraph;
+
+	before(async () => {
+		await initJSDOM();
+		({MetricGraph} = await import(
+			"../../../../source/components/data/metric-graph.mjs"
+		));
+	});
+
+	afterEach(() => document.getElementById("mocks").replaceChildren());
+
+	it("initializes its documented graph options from attributes", async () => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+			<monster-metric-graph
+				data-monster-option-labels-title="Weekly requests"
+				data-monster-option-values-main="840 requests"
+				data-monster-option-values-points="62::75::68"
+				data-monster-option-graph-type="bar"
+				data-monster-option-aria-graph="Three daily request totals">
+			</monster-metric-graph>
+		`;
+		const graph = mocks.firstElementChild;
+
+		await new Promise((resolve) => setTimeout(resolve, 50));
+
+		expect(graph).to.be.instanceOf(MetricGraph);
+		expect(graph.getOption("graphType")).to.equal("bar");
+		expect(graph.getOption("values.main")).to.equal("840 requests");
+		expect(graph.getOption("values.points")).to.deep.equal(["62", "75", "68"]);
+		expect(graph.getOption("aria.graph")).to.equal("Three daily request totals");
+		expect(graph.shadowRoot.querySelectorAll("svg rect")).to.have.length(3);
+		expect(graph.shadowRoot.getElementById("metric-graph-desc").textContent.trim())
+			.to.equal("Three daily request totals");
+	});
+});

package/test/cases/components/data/metric.mjs

@@ -0,0 +1,41 @@
+import {expect} from "chai";
+import {initJSDOM} from "../../../util/jsdom.mjs";
+
+describe("Metric", () => {
+	let Metric;
+
+	before(async () => {
+		await initJSDOM();
+		({Metric} = await import("../../../../source/components/data/metric.mjs"));
+	});
+
+	afterEach(() => document.getElementById("mocks").replaceChildren());
+
+	it("initializes its documented metric options from attributes", async () => {
+		const mocks = document.getElementById("mocks");
+		mocks.innerHTML = `
+			<monster-metric
+				data-monster-option-labels-title="Active subscriptions"
+				data-monster-option-labels-subtext="Previous hour"
+				data-monster-option-values-main="1,248"
+				data-monster-option-values-secondary="1,204"
+				data-monster-option-values-change="+3.7%"
+				data-monster-option-values-direction="225"
+				data-monster-option-classes-change="positive"
+				data-monster-option-aria-description="Subscriptions increased">
+			</monster-metric>
+		`;
+		const metric = mocks.firstElementChild;
+
+		await new Promise((resolve) => setTimeout(resolve, 50));
+
+		expect(metric).to.be.instanceOf(Metric);
+		expect(metric.getOption("values.main")).to.equal("1,248");
+		expect(metric.getOption("values.change")).to.equal("+3.7%");
+		expect(metric.getOption("classes.change")).to.equal("positive");
+		expect(metric.shadowRoot.getElementById("metric-value").textContent).to.equal("1,248");
+		const change = metric.shadowRoot.getElementById("metric-change-text");
+		expect(change.classList.contains("positive")).to.equal(true);
+		expect(change.style.getPropertyValue("--arrow-direction")).to.equal("225deg");
+	});
+});

package/test/cases/dom/updater.mjs

@@ -1388,6 +1388,32 @@ describe("DOM", function () {
           });
       });
 
+      it("should replace SVG child markup issue #587", async function () {
+        const mocks = document.getElementById("mocks");
+        mocks.innerHTML = `
+          <div id="svg-replace-root">
+            <svg viewBox="0 0 100 30">
+              <g id="svg-replace-target" data-monster-replace="path:markup"></g>
+            </svg>
+          </div>
+        `;
+        const updater = new Updater(
+          document.getElementById("svg-replace-root"),
+          { markup: '<rect x="1" y="2" width="3" height="4"></rect>' },
+        );
+
+        await updater.run();
+
+        const target = document.getElementById("svg-replace-target");
+        expect(target.querySelector("rect")?.getAttribute("width")).to.equal("3");
+
+        updater.getSubject().markup = '<circle cx="5" cy="6" r="2"></circle>';
+        await new Promise((resolve) => setTimeout(resolve, 0));
+
+        expect(target.querySelector("rect")).to.equal(null);
+        expect(target.querySelector("circle")?.getAttribute("r")).to.equal("2");
+      });
+
       it("should dispose linked updaters when replacing a mounted stateful subtree", function (done) {
         let mocks = document.getElementById("mocks");
         mocks.innerHTML = htmlStatefulReplace;