@schukai/monster 4.11.0 → 4.12.0

package/source/components/layout/popper.mjs

@@ -34,53 +34,60 @@ import { isArray } from "../../types/is.mjs";
 export { Popper };
 
 /**
+ * Symbol for timer callback reference
  * @private
  * @type {symbol}
  */
 const timerCallbackSymbol = Symbol("timerCallback");
 
 /**
- * local symbol
+ * Symbol for resize observer reference
  * @private
  * @type {symbol}
  */
 const resizeObserverSymbol = Symbol("resizeObserver");
 
 /**
- * local symbol
+ * Symbol for close event handler reference
  * @private
  * @type {symbol}
  */
 const closeEventHandler = Symbol("closeEventHandler");
 
 /**
+ * Symbol for control element reference
  * @private
  * @type {symbol}
  */
 const controlElementSymbol = Symbol("controlElement");
 
 /**
+ * Symbol for button element reference
  * @private
  * @type {symbol}
  */
 const buttonElementSymbol = Symbol("buttonElement");
 
 /**
- * local symbol
+ * Symbol for popper element reference
  * @private
  * @type {symbol}
  */
 const popperElementSymbol = Symbol("popperElement");
 
 /**
- * local symbol
+ * Symbol for arrow element reference
  * @private
  * @type {symbol}
  */
 const arrowElementSymbol = Symbol("arrowElement");
 
 /**
- * A Popper is a floating UI element that can be shown or hidden.
+ * Popper component for displaying floating UI elements
+ *
+ * The Popper class creates a floating overlay element that can be shown/hidden
+ * and positioned relative to a trigger element. It supports different interaction
+ * modes like click, hover, focus etc.
  *
  * @fragments /fragments/components/layout/popper/
  *
@@ -89,36 +96,34 @@ const arrowElementSymbol = Symbol("arrowElement");
  *
  * @since 1.65.0
  * @copyright schukai GmbH
- * @summary A beautiful popper that can make your life easier and also looks good.
- * @fires monster-popper-hide fired when the popper is hide.
- * @fires monster-popper-hidden fired when the popper is hidden.
- * @fires monster-popper-open fired when the popper is open.
- * @fires monster-popper-opened fired when the popper is opened.
+ * @summary Floating overlay component with flexible positioning and interaction modes
+ * @fires monster-popper-hide - Fired when popper starts hiding
+ * @fires monster-popper-hidden - Fired when popper is fully hidden
+ * @fires monster-popper-open - Fired when popper starts opening
+ * @fires monster-popper-opened - Fired when popper is fully opened
  */
 class Popper extends CustomElement {
 	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
+	 * Gets the instance symbol for type checking
+	 * @return {symbol} The instance type symbol
 	 */
 	static get [instanceSymbol]() {
 		return Symbol.for("@schukai/monster/components/layout/popper@@instance");
 	}
 
 	/**
-	 * To set the options via the HTML tag, the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
+	 * Default configuration options for the popper
 	 *
-	 * @property {Object} templates The templates for the control.
-	 * @property {string} templates.main The main template.
-	 * @property {string} mode The mode of the popper. Possible values are `click`, `enter`, `manual`, `focus`, "auto" or a combination of them.
-	 * @property {string} content The content of the popper.
-	 * @property {object} popper The popper options.
-	 * @property {string} popper.placement The placement of the popper. Possible values are `top`, `bottom`, `left` and `right`.
-	 * @property {function[]} popper.middleware The middleware functions of the popper.
-	 * @property {Object} features The features of the popper.
-	 * @property {boolean} features.preventOpenEventSent Prevents the open event from being sent.
+	 * @property {Object} templates - Template configuration
+	 * @property {string} templates.main - Main template HTML
+	 * @property {string} mode - Interaction mode(s): click|enter|manual|focus|auto
+	 * @property {string} content - Content template
+	 * @property {Object} popper - Positioning options
+	 * @property {string} popper.placement - Placement: top|bottom|left|right
+	 * @property {Array} popper.middleware - Positioning middleware functions
+	 * @property {Object} features - Feature flags
+	 * @property {boolean} features.preventOpenEventSent - Prevent open event
+	 * @returns {Object} Default options merged with parent defaults
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -138,9 +143,9 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * This method is called by the `connectedCallback` method on the first call.
-	 *
-	 * @return {void}
+	 * Initialize the component
+	 * Called on first connection to DOM
+	 * @private
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -149,27 +154,24 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * This method returns the tag name of the element.
-	 *
-	 * @return {string}
+	 * Gets the custom element tag name
+	 * @return {string} The tag name
 	 */
 	static getTag() {
 		return "monster-popper";
 	}
 
 	/**
-	 * This method returns the css styles of the element.
-	 *
-	 * @return {CSSStyleSheet[]}
+	 * Gets component stylesheets
+	 * @return {CSSStyleSheet[]} Array of stylesheets
 	 */
 	static getCSSStyleSheet() {
 		return [PopperStyleSheet];
 	}
 
 	/**
-	 * This method is called when the element is connected to the dom.
-	 *
-	 * @return {void}
+	 * Lifecycle callback when element connects to DOM
+	 * Sets up event listeners and initializes popper
 	 */
 	connectedCallback() {
 		super.connectedCallback();
@@ -177,7 +179,6 @@ class Popper extends CustomElement {
 		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
-			// close on outside ui-events
 			document.addEventListener(type, this[closeEventHandler]);
 		}
 
@@ -186,14 +187,12 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * This method is called when the element is disconnected from the dom.
-	 *
-	 * @return {void}
+	 * Lifecycle callback when element disconnects from DOM
+	 * Cleans up event listeners and observers
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
 
-		// close on outside ui-events
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			document.removeEventListener(type, this[closeEventHandler]);
 		}
@@ -202,9 +201,8 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * With this method, you can show the popper.
-	 *
-	 * @return {Popper}
+	 * Shows the popper element
+	 * @return {Popper} The popper instance
 	 */
 	showDialog() {
 		show.call(this);
@@ -212,9 +210,8 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * With this method you can hide the popper.
-	 *
-	 * @return {Popper}
+	 * Hides the popper element
+	 * @return {Popper} The popper instance
 	 */
 	hideDialog() {
 		hide.call(this);
@@ -222,9 +219,8 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * With this method you can toggle the popper.
-	 *
-	 * @return {Popper}
+	 * Toggles popper visibility
+	 * @return {Popper} The popper instance
 	 */
 	toggleDialog() {
 		if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
@@ -237,8 +233,9 @@ class Popper extends CustomElement {
 }
 
 /**
+ * Initializes event handlers for popper interactivity
  * @private
- * @return {Popper}
+ * @return {Popper} The popper instance
  */
 function initEventHandler() {
 	this[closeEventHandler] = (event) => {
@@ -276,10 +273,11 @@ function initEventHandler() {
 }
 
 /**
+ * Sets up event handlers for specific interaction mode
  * @private
- * @param mode
- * @return {Popper}
- * @throws Error
+ * @param {string} mode - Interaction mode to initialize
+ * @return {Popper} The popper instance
+ * @throws {Error} For unknown modes
  */
 function initEventHandlerByMode(mode) {
 	switch (mode) {
@@ -338,10 +336,10 @@ function initEventHandlerByMode(mode) {
 }
 
 /**
+ * Sets up resize observer for popper repositioning
  * @private
  */
 function attachResizeObserver() {
-	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
 			try {
@@ -369,6 +367,10 @@ function attachResizeObserver() {
 	});
 }
 
+/**
+ * Disconnects resize observer
+ * @private
+ */
 function disconnectResizeObserver() {
 	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
 		this[resizeObserverSymbol].disconnect();
@@ -376,6 +378,7 @@ function disconnectResizeObserver() {
 }
 
 /**
+ * Hides the popper element
  * @private
  */
 function hide() {
@@ -396,6 +399,7 @@ function hide() {
 }
 
 /**
+ * Shows the popper element
  * @private
  */
 function show() {
@@ -427,6 +431,7 @@ function show() {
 }
 
 /**
+ * Updates popper positioning
  * @private
  */
 function updatePopper() {
@@ -447,8 +452,9 @@ function updatePopper() {
 }
 
 /**
+ * Initializes references to DOM elements
  * @private
- * @return {Popper}
+ * @return {Popper} The popper instance
  */
 function initControlReferences() {
 	this[controlElementSymbol] = this.shadowRoot.querySelector(
@@ -467,22 +473,23 @@ function initControlReferences() {
 }
 
 /**
+ * Gets the main template HTML
  * @private
- * @return {string}
+ * @return {string} Template HTML
  */
 function getTemplate() {
 	// language=HTML
 	return `
-        <div data-monster-role="control" part="control">
-            <slot name="button" data-monster-role="button"></slot>
-
-            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
-                <div data-monster-role="arrow"></div>
-                <div part="content" class="flex" data-monster-replace="path:content">
-                </div>
-            </div>
-        </div>
-    `;
+		<div data-monster-role="control" part="control">
+			<slot name="button" data-monster-role="button"></slot>
+
+			<div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+				<div data-monster-role="arrow"></div>
+				<div part="content" class="flex" data-monster-replace="path:content">
+				</div>
+			</div>
+		</div>
+	`;
 }
 
 registerCustomElement(Popper);

package/source/components/layout/split-panel.mjs

@@ -297,7 +297,6 @@ function initEventHandler() {
 	}
 
 	this[draggerElementSymbol].addEventListener("touchstart", (startEvent) => {
-
 		startEvent.preventDefault();
 		self[internalSymbol].getSubject().isDragging = true;
 
@@ -308,7 +307,10 @@ function initEventHandler() {
 			if (!touch) return;
 
 			// identical logic as in mousemove - but with touch.clientX/clientY
-			let draggerWidth = getComputedStyle(self[draggerElementSymbol]).getPropertyValue("--monster-dragger-width") || "0";
+			let draggerWidth =
+				getComputedStyle(self[draggerElementSymbol]).getPropertyValue(
+					"--monster-dragger-width",
+				) || "0";
 
 			if (self.getOption("splitType") === TYPE_HORIZONTAL) {
 				const containerOffsetTop = self[splitScreenElementSymbol].offsetTop;
@@ -316,30 +318,36 @@ function initEventHandler() {
 
 				const min = this.getOption("dimension").min;
 				const max = this.getOption("dimension").max;
-				const topAsPercent = (newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
+				const topAsPercent =
+					(newTopHeight / this[splitScreenElementSymbol].offsetHeight) * 100;
 
 				if (parseInt(min) > topAsPercent) newTopHeight = min;
 				else if (parseInt(max) < topAsPercent) newTopHeight = max;
 				else newTopHeight = topAsPercent + "%";
 
-				const newTopHeightPx = (parseInt(newTopHeight) / 100) * this[splitScreenElementSymbol].offsetHeight;
+				const newTopHeightPx =
+					(parseInt(newTopHeight) / 100) *
+					this[splitScreenElementSymbol].offsetHeight;
 
 				self[startPanelElementSymbol].style.height = `${newTopHeightPx}px`;
-				self[endPanelElementSymbol].style.height = `calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
+				self[endPanelElementSymbol].style.height =
+					`calc(100% - ${newTopHeightPx}px - ${draggerWidth})`;
 			} else {
 				const containerOffsetLeft = self[splitScreenElementSymbol].offsetLeft;
 				let newLeftWidth = touch.clientX - containerOffsetLeft;
 
 				const min = this.getOption("dimension").min;
 				const max = this.getOption("dimension").max;
-				const leftAsPercent = (newLeftWidth / this[splitScreenElementSymbol].offsetWidth) * 100;
+				const leftAsPercent =
+					(newLeftWidth / this[splitScreenElementSymbol].offsetWidth) * 100;
 
 				if (parseInt(min) > leftAsPercent) newLeftWidth = min;
 				else if (parseInt(max) < leftAsPercent) newLeftWidth = max;
 				else newLeftWidth = leftAsPercent + "%";
 
 				self[startPanelElementSymbol].style.width = `${newLeftWidth}`;
-				self[endPanelElementSymbol].style.width = `calc(100% - ${newLeftWidth} - ${draggerWidth})`;
+				self[endPanelElementSymbol].style.width =
+					`calc(100% - ${newLeftWidth} - ${draggerWidth})`;
 			}
 		};
 
@@ -353,7 +361,6 @@ function initEventHandler() {
 		document.addEventListener("touchend", dragTouchEnd);
 	});
 
-
 	let userSelectDefault = getDocument().body.style.userSelect;
 
 	this[draggerElementSymbol].addEventListener("mousedown", () => {

package/source/i18n/util.mjs

@@ -14,6 +14,47 @@
 
 import { languages } from "./map/languages.mjs";
 
+/**
+ * Normalizes a number represented as a string by converting it into a valid floating-point number format,
+ * based on the provided or detected locale. It accounts for different decimal and a thousand separator conventions.
+ *
+ * @param {string} input - The string representation of the number to normalize. May include locale-specific formatting.
+ * @param {string} [locale=navigator.language] - The locale used to determine the decimal separator convention. Defaults to the user's browser locale.
+ * @return {number} The normalized number as a floating-point value. Returns NaN if the input is not a parsable number.
+ */
+export function normalizeNumber(input, locale = navigator.language) {
+	if (input === null || input === undefined) return NaN;
+	if (typeof input === "number") return input; // If input is already a number, return it directly
+	if (typeof input !== "string") return NaN;
+
+	const cleaned = input.trim().replace(/\s/g, "");
+	const decimalSeparator = getDecimalSeparator(locale);
+	let normalized = cleaned;
+
+	if (decimalSeparator === "," && cleaned.includes(".")) {
+		normalized = cleaned.replace(/\./g, "").replace(",", ".");
+	} else if (decimalSeparator === "." && cleaned.includes(",")) {
+		normalized = cleaned.replace(/,/g, "").replace(".", ".");
+	} else if (decimalSeparator === "," && cleaned.includes(",")) {
+		normalized = cleaned.replace(",", ".");
+	}
+
+	const result = parseFloat(normalized);
+	return Number.isNaN(result) ? NaN : result;
+}
+
+/**
+ * Retrieves the decimal separator for a given locale.
+ *
+ * @param {string} [locale=navigator.language] - The locale identifier to determine the decimal separator. Defaults to the user's current locale if not provided.
+ * @return {string} The decimal separator used in the specified locale.
+ */
+function getDecimalSeparator(locale = navigator.language) {
+	const numberWithDecimal = 1.1;
+	const formatted = new Intl.NumberFormat(locale).format(numberWithDecimal);
+	return formatted.replace(/\d/g, "")[0]; // z.B. "," oder "."
+}
+
 /**
  * Determines the user's preferred language based on browser settings and available language options.
  *

package/source/monster.mjs

@@ -21,6 +21,7 @@
 export * from "./components/layout/collapse.mjs";
 export * from "./components/layout/iframe.mjs";
 export * from "./components/layout/tabs.mjs";
+export * from "./components/layout/full-screen.mjs";
 export * from "./components/layout/split-panel.mjs";
 export * from "./components/layout/overlay.mjs";
 export * from "./components/layout/popper.mjs";
@@ -108,6 +109,8 @@ export * from "./components/state/log/entry.mjs";
 export * from "./components/state/state.mjs";
 export * from "./components/state/log.mjs";
 export * from "./components/navigation/table-of-content.mjs";
+export * from "./components/data/metric-graph.mjs";
+export * from "./components/data/metric.mjs";
 export * from "./components/constants.mjs";
 export * from "./components/constants.mjs";
 export * from "./text/formatter.mjs";

package/source/text/generate-range-comparison-expression.mjs

@@ -15,7 +15,7 @@
 export { generateRangeComparisonExpression };
 
 /**
- * The `generateRangeComparisonExpression()` function is function that generates a string representation
+ * The `generateRangeComparisonExpression()` function is a function that generates a string representation
  * of a comparison expression based on a range of values. It takes three arguments:
  *
  * - expression (required): a string representation of a range of values in the format of start1-end1,start2-end2,value3....
@@ -33,6 +33,8 @@ export { generateRangeComparisonExpression };
  * eqOp (string, default: '=='): the equality operator to use in the expression.
  * geOp (string, default: '>='): the greater than or equal to operator to use in the expression.
  * leOp (string, default: '<='): the less than or equal to operator to use in the expression.
+ * gtOp (string, default: '>'): the greater than operator to use in the expression.
+ * ltOp (string, default: '<'): the less than operator to use in the expression.
  *
  * Examples
  *
@@ -58,10 +60,16 @@ export { generateRangeComparisonExpression };
  * @param {string} [options.eqOp='=='] - The comparison operator for equality to use.
  * @param {string} [options.geOp='>='] - The comparison operator for greater than or equal to to use.
  * @param {string} [options.leOp='<='] - The comparison operator for less than or equal to to use.
+ * @param {string} [options.gtOp='>'] - The comparison operator for greater than to use.
+ * @param {string} [options.ltOp='<'] - The comparison operator for less than to use.
  * @return {string} The generated comparison expression.
  * @throws {Error} If the input is invalid.
  * @summary Generates a comparison expression based on a range of values.
  */
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * SPDX-License-Identifier: AGPL-3.0
+ */
 function generateRangeComparisonExpression(
 	expression,
 	valueName,
@@ -74,48 +82,110 @@ function generateRangeComparisonExpression(
 		eqOp = "==",
 		geOp = ">=",
 		leOp = "<=",
+		gtOp = ">",
+		ltOp = "<",
 	} = options;
-	const ranges = expression.split(",");
-	let comparison = "";
-	for (let i = 0; i < ranges.length; i++) {
-		const range = ranges[i].trim();
-		if (range === "") {
+
+	if (
+		typeof expression !== "string" ||
+		typeof valueName !== "string" ||
+		!expression.trim()
+	) {
+		throw new Error("Invalid input");
+	}
+
+	const encode = (s) => (urlEncode ? encodeURIComponent(s) : s);
+	const and = encode(andOp);
+	const or = encode(orOp);
+	const space = urlEncode ? "%20" : " ";
+
+	function parseRange(range) {
+		range = range.trim();
+		if (!range) throw new Error("Empty range");
+
+		// Sonderfall: nur Bindestriche wie "--"
+		if (/^-+$/.test(range)) {
 			throw new Error(`Invalid range '${range}'`);
-		} else if (range.includes("-")) {
-			const [start, end] = range
-				.split("-")
-				.map((s) => (s === "" ? null : parseFloat(s)));
-			if ((start !== null && isNaN(start)) || (end !== null && isNaN(end))) {
-				throw new Error(`Invalid value in range '${range}'`);
-			}
-			if (start !== null && end !== null && start > end) {
-				throw new Error(`Invalid range '${range}'`);
-			}
-			const compStart =
-				start !== null
-					? `${valueName}${urlEncode ? encodeURIComponent(geOp) : geOp}${start}`
-					: "";
-			const compEnd =
-				end !== null
-					? `${valueName}${urlEncode ? encodeURIComponent(leOp) : leOp}${end}`
-					: "";
-			const compRange = `${compStart}${
-				compStart && compEnd ? ` ${andOp} ` : ""
-			}${compEnd}`;
-			comparison += ranges.length > 1 ? `(${compRange})` : compRange;
-		} else {
-			const value = parseFloat(range);
-			if (isNaN(value)) {
+		}
+
+		// Bereich: z.B. -10--5, 4-6
+		const rangeMatch = range.match(
+			/^(-?\d+(?:\.\d+)?)\s*-\s*(-?\d+(?:\.\d+)?)/,
+		);
+		if (rangeMatch) {
+			const sNum = parseFloat(rangeMatch[1]);
+			const eNum = parseFloat(rangeMatch[2]);
+			if (isNaN(sNum) || isNaN(eNum))
 				throw new Error(`Invalid value '${range}'`);
-			}
-			const compValue = `${valueName}${
-				urlEncode ? encodeURIComponent(eqOp) : eqOp
-			}${value}`;
-			comparison += ranges.length > 1 ? `(${compValue})` : compValue;
+			if (sNum > eNum) throw new Error(`Invalid range '${range}'`);
+			return `${valueName}${encode(geOp)}${sNum}${space}${and}${space}${valueName}${encode(leOp)}${eNum}`;
 		}
-		if (i < ranges.length - 1) {
-			comparison += ` ${orOp} `;
+
+		// Exklusiver Bereich: 4~6 → x>4 && x<6
+		const exclMatch = range.match(/^(-?\d+(?:\.\d+)?)\s*~\s*(-?\d+(?:\.\d+)?)/);
+		if (exclMatch) {
+			const sNum = parseFloat(exclMatch[1]);
+			const eNum = parseFloat(exclMatch[2]);
+			if (isNaN(sNum) || isNaN(eNum))
+				throw new Error(`Invalid value '${range}'`);
+			return `${valueName}${encode(gtOp)}${sNum}${space}${and}${space}${valueName}${encode(ltOp)}${eNum}`;
 		}
+
+		// Offene Intervalle exklusiv: 4~ → x>4, ~6 → x<6
+		const openRightExclMatch = range.match(/^(-?\d+(?:\.\d+)?)~$/);
+		if (openRightExclMatch) {
+			const sNum = parseFloat(openRightExclMatch[1]);
+			if (isNaN(sNum)) throw new Error(`Invalid value in '${range}'`);
+			return `${valueName}${encode(gtOp)}${sNum}`;
+		}
+		const openLeftExclMatch = range.match(/^~(-?\d+(?:\.\d+)?)$/);
+		if (openLeftExclMatch) {
+			const eNum = parseFloat(openLeftExclMatch[1]);
+			if (isNaN(eNum)) throw new Error(`Invalid value in '${range}'`);
+			return `${valueName}${encode(ltOp)}${eNum}`;
+		}
+
+		// Offene Intervalle inklusiv: 4- → x>=4, -6 → x<=6
+		const openRightInclMatch = range.match(/^(-?\d+(?:\.\d+)?)\-$/);
+		if (openRightInclMatch) {
+			const sNum = parseFloat(openRightInclMatch[1]);
+			if (isNaN(sNum)) throw new Error(`Invalid value in '${range}'`);
+			return `${valueName}${encode(geOp)}${sNum}`;
+		}
+		const openLeftInclMatch = range.match(/^\-(-?\d+(?:\.\d+)?)$/);
+		if (openLeftInclMatch) {
+			const eNum = parseFloat(openLeftInclMatch[1]);
+			if (isNaN(eNum)) throw new Error(`Invalid value in '${range}'`);
+			return `${valueName}${encode(leOp)}${eNum}`;
+		}
+
+		// <n oder >n
+		if (range.startsWith("<")) {
+			const n = parseFloat(range.slice(1));
+			if (isNaN(n)) throw new Error(`Invalid value in '${range}'`);
+			return `${valueName}${encode(ltOp)}${n}`;
+		}
+		if (range.startsWith(">")) {
+			const n = parseFloat(range.slice(1));
+			if (isNaN(n)) throw new Error(`Invalid value in '${range}'`);
+			return `${valueName}${encode(gtOp)}${n}`;
+		}
+
+		// Einzelwert NUR, wenn wirklich reine Zahl
+		if (/^-?\d+(\.\d+)?$/.test(range)) {
+			const value = parseFloat(range);
+			return `${valueName}${encode(eqOp)}${value}`;
+		}
+
+		throw new Error(`Invalid value '${range}'`);
 	}
-	return comparison;
+
+	const parts = expression
+		.split(",")
+		.map((r) => r.trim())
+		.filter(Boolean)
+		.map(parseRange);
+
+	const sep = space + or + space;
+	return parts.length > 1 ? parts.map((p) => `(${p})`).join(sep) : parts[0];
 }

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