@schukai/monster 4.112.0 → 4.113.0

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 
 
+## [4.113.0] - 2026-01-30
+
+### Add Features
+
+- Improve selection handling in select.mjs
+- Implement two linked selection components and associated functionality [#381](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/381)
+- Add two selection dependency with UI and mock data
+### Changes
+
+- move mock to development mock
+
+
+
 ## [4.112.0] - 2026-01-29
 
 ### 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.112.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.113.0"}

package/source/components/form/select-link.mjs

@@ -0,0 +1,275 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { isArray, isObject, isString } from "../../types/is.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
+
+export { SelectLink };
+
+const sourceElementSymbol = Symbol("sourceElement");
+const targetElementSymbol = Symbol("targetElement");
+const observerSymbol = Symbol("observer");
+const handlerSymbol = Symbol("handler");
+const boundSymbol = Symbol("bound");
+
+class SelectLink extends CustomElement {
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/select-link@@instance");
+	}
+
+	static getTag() {
+		return "monster-select-link";
+	}
+
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			shadowMode: false,
+			source: "",
+			target: "",
+			param: "",
+			emptyValue: "",
+			disableTarget: true,
+			clearSelection: true,
+			clearOptions: true,
+			clearTotalMessage: true,
+			clearMessageOnValue: true,
+			emptyMessage: "",
+			autoFetch: true,
+			autoFetchOnEmpty: false,
+			syncOnInit: true,
+			events: [
+				"monster-selected",
+				"monster-changed",
+				"monster-selection-removed",
+				"monster-selection-cleared",
+			],
+			debug: false,
+		});
+	}
+
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		bindSelects.call(this);
+		return this;
+	}
+
+	disconnectedCallback() {
+		unbindSelects.call(this);
+	}
+}
+
+function resolveElement(value) {
+	if (value instanceof HTMLElement) {
+		return value;
+	}
+
+	if (!isString(value) || value.trim() === "") {
+		return null;
+	}
+
+	const selector = value.trim();
+	const doc = getDocument();
+	let element = null;
+
+	try {
+		element = doc.querySelector(selector);
+	} catch (e) {
+		element = null;
+	}
+
+	if (!element) {
+		element = doc.getElementById(selector.replace(/^#/, ""));
+	}
+
+	return element instanceof HTMLElement ? element : null;
+}
+
+function bindSelects() {
+	const source = resolveElement(this.getOption("source"));
+	const target = resolveElement(this.getOption("target"));
+
+	if (!(source && target)) {
+		if (!this[observerSymbol] && getDocument().body) {
+			const observer = new MutationObserver(() => {
+				bindSelects.call(this);
+			});
+			observer.observe(getDocument().body, {
+				childList: true,
+				subtree: true,
+			});
+			this[observerSymbol] = observer;
+		}
+		return;
+	}
+
+	if (this[observerSymbol]) {
+		this[observerSymbol].disconnect();
+		delete this[observerSymbol];
+	}
+
+	this[sourceElementSymbol] = source;
+	this[targetElementSymbol] = target;
+
+	if (this[boundSymbol]) {
+		return;
+	}
+
+	const events = this.getOption("events");
+	const handler = () => syncTarget.call(this);
+	this[handlerSymbol] = handler;
+
+	if (isArray(events)) {
+		for (const eventName of events) {
+			if (isString(eventName) && eventName !== "") {
+				source.addEventListener(eventName, handler);
+			}
+		}
+	}
+
+	this[boundSymbol] = true;
+
+	if (this.getOption("syncOnInit") === true) {
+		queueMicrotask(() => {
+			syncTarget.call(this);
+		});
+	}
+}
+
+function unbindSelects() {
+	if (this[observerSymbol]) {
+		this[observerSymbol].disconnect();
+		delete this[observerSymbol];
+	}
+
+	const source = this[sourceElementSymbol];
+	const handler = this[handlerSymbol];
+	const events = this.getOption("events");
+
+	if (source && handler && isArray(events)) {
+		for (const eventName of events) {
+			if (isString(eventName) && eventName !== "") {
+				source.removeEventListener(eventName, handler);
+			}
+		}
+	}
+
+	delete this[sourceElementSymbol];
+	delete this[targetElementSymbol];
+	delete this[handlerSymbol];
+	delete this[boundSymbol];
+}
+
+function syncTarget() {
+	const source = this[sourceElementSymbol];
+	const target = this[targetElementSymbol];
+	const param = this.getOption("param");
+
+	if (!(source && target)) {
+		return;
+	}
+
+	if (!isString(param) || param.trim() === "") {
+		addErrorAttribute(this, "Missing param option.");
+		return;
+	}
+
+	let value = source.value;
+	if (isArray(value)) {
+		value = value.join(",");
+	}
+
+	const isEmpty = value === null || value === undefined || value === "";
+	const emptyValue = this.getOption("emptyValue");
+	const autoFetch = this.getOption("autoFetch") === true;
+	const autoFetchOnEmpty = this.getOption("autoFetchOnEmpty") === true;
+	const disableTarget = this.getOption("disableTarget") === true;
+	const debug = this.getOption("debug") === true;
+
+	if (debug) {
+		console.log("[select-link]", {
+			source: source.id || source.tagName,
+			target: target.id || target.tagName,
+			param,
+			value,
+			isEmpty,
+			disableTarget,
+			autoFetch,
+			autoFetchOnEmpty,
+		});
+	}
+
+	if (isEmpty) {
+		if (disableTarget === true) {
+			target.setAttribute("disabled", "");
+			if (debug) {
+				console.log("[select-link] target disabled (empty)");
+			}
+		}
+
+		if (this.getOption("clearSelection") === true) {
+			target.setOption("selection", []);
+		}
+		if (this.getOption("clearOptions") === true) {
+			target.setOption("options", []);
+		}
+		if (this.getOption("clearTotalMessage") === true) {
+			target.setOption("messages.total", "");
+		}
+		const emptyMessage = this.getOption("emptyMessage");
+		if (isString(emptyMessage) && emptyMessage !== "") {
+			target.setOption("messages.control", emptyMessage);
+		}
+
+		const params = Object.assign({}, target.getOption("filter.params", {}));
+		params[param] = emptyValue;
+		target.setOption("filter.params", params);
+
+		if (autoFetchOnEmpty && typeof target.fetch === "function") {
+			target.fetch().catch((e) => {
+				addErrorAttribute(target, e);
+			});
+		}
+		return;
+	}
+
+	if (disableTarget === true) {
+		target.removeAttribute("disabled");
+		if (debug) {
+			console.log("[select-link] target enabled (value)");
+		}
+	}
+
+	if (this.getOption("clearMessageOnValue") === true) {
+		target.setOption("messages.control", "");
+	}
+
+	const params = Object.assign({}, target.getOption("filter.params", {}));
+	params[param] = value;
+	target.setOption("filter.params", params);
+
+	if (autoFetch && typeof target.fetch === "function") {
+		target.fetch().catch((e) => {
+			addErrorAttribute(target, e);
+		});
+	}
+}
+
+registerCustomElement(SelectLink);

package/source/components/form/select.mjs

@@ -256,7 +256,11 @@ const optionsVersionSymbol = Symbol("optionsVersion");
 const pendingSelectionSymbol = Symbol("pendingSelection");
 const selectionSyncScheduledSymbol = Symbol("selectionSyncScheduled");
 const optionsSnapshotSymbol = Symbol("optionsSnapshot");
+const strictModeSnapshotSymbol = Symbol("strictModeSnapshot");
+const optionsMapSymbol = Symbol("optionsMap");
+const optionsMapVersionSnapshotSymbol = Symbol("optionsMapVersionSnapshot");
 const selectionVersionSymbol = Symbol("selectionVersion");
+const closeOnSelectAutoSymbol = Symbol("closeOnSelectAuto");
 
 /**
  * @private
@@ -288,6 +292,7 @@ const lookupCacheSymbol = Symbol("lookupCache");
  * @type {symbol}
  */
 const lookupInProgressSymbol = Symbol("lookupInProgress");
+const fetchRequestVersionSymbol = Symbol("fetchRequestVersion");
 
 /**
  * @private
@@ -365,6 +370,8 @@ class Select extends CustomControl {
 		this[currentPageSymbol] = 1;
 		this[lookupCacheSymbol] = new Map();
 		this[lookupInProgressSymbol] = new Map();
+		this[optionsMapSymbol] = new Map();
+		this[closeOnSelectAutoSymbol] = true;
 		initOptionObserver.call(this);
 	}
 
@@ -574,6 +581,8 @@ class Select extends CustomControl {
 						open: "{",
 						close: "}",
 					},
+					params: {},
+					paramsDefaults: {},
 					defaultOptionsUrl: null,
 				},
 
@@ -650,6 +659,8 @@ class Select extends CustomControl {
 					this.setOption("messages.selected", "");
 					this.setOption("messages.total", "");
 					this.setOption("messages.summary", "");
+					this.setOption("total", null);
+					resetPaginationState.call(this);
 
 					resetErrorAttribute(this);
 
@@ -921,11 +932,29 @@ function processAndApplyPaginationData(data) {
 		return;
 	}
 
+	let dataCount;
+	const mappingSelector = this.getOption("mapping.selector");
+	if (isString(mappingSelector)) {
+		try {
+			const pathfinder = new Pathfinder(data);
+			const mapped = pathfinder.getVia(mappingSelector);
+			if (isArray(mapped)) {
+				dataCount = mapped.length;
+			} else if (mapped instanceof Map) {
+				dataCount = mapped.size;
+			} else if (isObject(mapped)) {
+				dataCount = Object.keys(mapped).length;
+			}
+		} catch (e) {}
+	}
+
 	const mappingTotal = this.getOption("mapping.total");
 	const mappingCurrentPage = this.getOption("mapping.currentPage");
 	const mappingObjectsPerPage = this.getOption("mapping.objectsPerPage");
 
 	if (!mappingTotal || !mappingCurrentPage || !mappingObjectsPerPage) {
+		this.setOption("total", null);
+		resetPaginationState.call(this);
 		return;
 	}
 
@@ -937,15 +966,15 @@ function processAndApplyPaginationData(data) {
 
 		if (!isInteger(total)) {
 			addErrorAttribute(this, "total is not an integer");
+			this.setOption("total", null);
+			resetPaginationState.call(this);
 			return;
 		}
 
 		this.setOption("total", total);
 
 		if (total === 0) {
-			this[paginationElementSymbol].style.display = "none";
-			this[paginationElementSymbol].setOption("pages", null);
-			this[paginationElementSymbol].setOption("currentPage", null);
+			resetPaginationState.call(this);
 			return;
 		}
 
@@ -955,10 +984,53 @@ function processAndApplyPaginationData(data) {
 			isInteger(objectsPerPage) &&
 			objectsPerPage > 0
 		) {
+			if (
+				isInteger(dataCount) &&
+				(dataCount === 0 ||
+					dataCount > objectsPerPage ||
+					total < dataCount ||
+					currentPage > Math.ceil(total / objectsPerPage))
+			) {
+				addErrorAttribute(this, "Invalid pagination data.");
+				this.setOption("total", null);
+				resetPaginationState.call(this);
+				return;
+			}
 			updatePagination.call(this, total, currentPage, objectsPerPage);
 		}
 	} catch (e) {
 		addErrorAttribute(this, e);
+		this.setOption("total", null);
+		resetPaginationState.call(this);
+	}
+}
+
+/**
+ * @private
+ * @param {object} data Die rohen Daten aus der API-Antwort.
+ */
+function processAndApplyRemoteInfoTotal(data) {
+	const mappingTotal = this.getOption("mapping.total");
+	if (!isString(mappingTotal)) {
+		return;
+	}
+
+	try {
+		const pathfinder = new Pathfinder(data);
+		const total = pathfinder.getVia(mappingTotal);
+
+		if (!isInteger(total)) {
+			addErrorAttribute(this, "total is not an integer");
+			this.setOption("total", null);
+			return;
+		}
+
+		this.setOption("total", total);
+		// Note: remoteInfo is a lightweight request (count=1). Only update total/message here.
+		setTotalText.call(this);
+	} catch (e) {
+		addErrorAttribute(this, e);
+		this.setOption("total", null);
 	}
 }
 
@@ -999,10 +1071,14 @@ function scheduleSelectionSync(version) {
 		return;
 	}
 
+	const shouldUseAttrValue =
+		state.attrValue !== null &&
+		!(state.attrValue === "" && selectionIsEmpty === false);
+
 	const pending = {
 		version,
 		selectionVersion: this[selectionVersionSymbol] || 0,
-		value: state.attrValue !== null ? state.attrValue : state.selection,
+		value: shouldUseAttrValue ? state.attrValue : state.selection,
 	};
 	this[pendingSelectionSymbol] = pending;
 
@@ -1731,10 +1807,20 @@ function fetchIt(url, controlOptions) {
 	return new Promise((resolve, reject) => {
 		setStatusOrRemoveBadges.call(this, "loading");
 
+		if (!isInteger(this[fetchRequestVersionSymbol])) {
+			this[fetchRequestVersionSymbol] = 0;
+		}
+		this[fetchRequestVersionSymbol] += 1;
+		const requestVersion = this[fetchRequestVersionSymbol];
+
 		new Processing(10, () => {
 			fetchData
 				.call(this, url)
 				.then((map) => {
+					if (requestVersion !== this[fetchRequestVersionSymbol]) {
+						resolve();
+						return;
+					}
 					if (
 						isObject(map) ||
 						isArray(map) ||
@@ -1765,10 +1851,20 @@ function fetchIt(url, controlOptions) {
 					}
 
 					setStatusOrRemoveBadges.call(this, "error");
+					clearOptionsOnError.call(this);
+					this.setOption("total", null);
+					resetPaginationState.call(this);
 					reject(new Error("invalid response"));
 				})
 				.catch((e) => {
+					if (requestVersion !== this[fetchRequestVersionSymbol]) {
+						resolve();
+						return;
+					}
 					setStatusOrRemoveBadges.call(this, "error");
+					clearOptionsOnError.call(this);
+					this.setOption("total", null);
+					resetPaginationState.call(this);
 					reject(e);
 				});
 		})
@@ -1776,6 +1872,9 @@ function fetchIt(url, controlOptions) {
 			.catch((e) => {
 				setStatusOrRemoveBadges.call(this, "error");
 				addErrorAttribute(this, e);
+				clearOptionsOnError.call(this);
+				this.setOption("total", null);
+				resetPaginationState.call(this);
 				reject(e);
 			});
 	});
@@ -1940,35 +2039,12 @@ function buildSelectionLabel(value) {
 		return this[lookupCacheSymbol].get(value);
 	}
 
-	const options = this.getOption("options");
-
-	for (let i = 0; i < options.length; i++) {
-		let o = options?.[i];
-		let l, v, v2;
-
-		if (this.getOption("features.useStrictValueComparison") === true) {
-			v = value;
-		} else {
-			v = `${value}`;
-		}
-
-		if (isPrimitive(o) && o === value) {
-			return o;
-		} else if (!isObject(o)) {
-			continue;
-		}
-
-		if (this.getOption("features.useStrictValueComparison") === true) {
-			l = o?.["label"];
-			v2 = o?.["value"];
-		} else {
-			l = `${o?.["label"]}`;
-			v2 = `${o?.["value"]}`;
-		}
+	const strict = this.getOption("features.useStrictValueComparison") === true;
+	const map = this[optionsMapSymbol];
+	const key = strict ? value : String(value);
 
-		if (v2 === v) {
-			return l;
-		}
+	if (map && map.has(key)) {
+		return map.get(key);
 	}
 
 	return undefined;
@@ -2113,9 +2189,55 @@ function initOptionObserver() {
 
 	self.attachObserver(
 		new Observer(function () {
+			if (self[closeOnSelectAutoSymbol] === true) {
+				self[closeOnSelectAutoSymbol] = false;
+				if (
+					self.hasAttribute("data-monster-option-features-closeonselect") ===
+					false
+				) {
+					const type = self.getOption("type");
+					const shouldClose = type !== "checkbox";
+					self.setOption("features.closeOnSelect", shouldClose);
+				}
+			}
 			const options = self.getOption("options");
-			if (options !== self[optionsSnapshotSymbol]) {
+			const strict =
+				self.getOption("features.useStrictValueComparison") === true;
+			const optionsVersion = self[optionsVersionSymbol] || 0;
+
+			if (
+				options !== self[optionsSnapshotSymbol] ||
+				strict !== self[strictModeSnapshotSymbol] ||
+				optionsVersion !== self[optionsMapVersionSnapshotSymbol]
+			) {
 				self[optionsSnapshotSymbol] = options;
+				self[strictModeSnapshotSymbol] = strict;
+				self[optionsMapVersionSnapshotSymbol] = optionsVersion;
+
+				const map = new Map();
+				if (isArray(options)) {
+					for (const o of options) {
+						if (isPrimitive(o)) {
+							const key = strict ? o : String(o);
+							if (!map.has(key)) {
+								map.set(key, o);
+							}
+						} else if (isObject(o)) {
+							const v = o?.value;
+							const l = o?.label;
+							// If strict is true, use value as is (could be number, symbol, etc.)
+							// If strict is false, use String(value) to allow loose matching
+							if (v !== undefined) {
+								const key = strict ? v : String(v);
+								if (!map.has(key)) {
+									map.set(key, l);
+								}
+							}
+						}
+					}
+				}
+				self[optionsMapSymbol] = map;
+
 				const version = bumpOptionsVersion.call(self);
 				scheduleSelectionSync.call(self, version);
 			}
@@ -2291,7 +2413,20 @@ function calcAndSetOptionsDimension() {
 	}
 
 	if (visible === 0) {
-		if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
+		if (this.getOption("classes.statusOrRemoveBadge") === "error") {
+			this.setOption(
+				"messages.emptyOptions",
+				this.getOption("labels.cannot-be-loaded"),
+			);
+		} else if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
+			this.setOption(
+				"messages.emptyOptions",
+				this.getOption("labels.no-options-available"),
+			);
+		} else if (
+			getFilterMode.call(this) === FILTER_MODE_REMOTE &&
+			getCurrentFilterValue.call(this) === ""
+		) {
 			this.setOption(
 				"messages.emptyOptions",
 				this.getOption("labels.no-options-available"),
@@ -2619,6 +2754,29 @@ function filterFromRemote() {
  * @returns {string}
  */
 function formatURL(url, params = {}) {
+	const paramsDefaults = this.getOption("filter.paramsDefaults");
+	const externalParams = this.getOption("filter.params");
+	if (isObject(paramsDefaults) || isObject(externalParams)) {
+		params = Object.assign(
+			{},
+			paramsDefaults || {},
+			externalParams || {},
+			params,
+		);
+		if (isObject(paramsDefaults)) {
+			for (const key in paramsDefaults) {
+				if (!Object.hasOwn(paramsDefaults, key)) continue;
+				if (
+					params[key] === "" ||
+					params[key] === null ||
+					params[key] === undefined
+				) {
+					params[key] = paramsDefaults[key];
+				}
+			}
+		}
+	}
+
 	// Die Logik für den Default-Filterwert bleibt erhalten
 	if (
 		params.filter === undefined ||
@@ -2668,6 +2826,8 @@ function filterFromRemoteByValue(optionUrl, params, openPopper) {
 		let url = formatURL.call(this, optionUrl, params);
 
 		if (url.indexOf(disabledRequestMarker.toString()) !== -1) {
+			this.setOption("total", null);
+			resetPaginationState.call(this);
 			return Promise.resolve();
 		}
 
@@ -2682,6 +2842,10 @@ function filterFromRemoteByValue(optionUrl, params, openPopper) {
 				}
 			})
 			.catch((e) => {
+				if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
+					this.setOption("total", null);
+					resetPaginationState.call(this);
+				}
 				addErrorAttribute(this, e);
 				setStatusOrRemoveBadges.call(this, "error");
 				throw e;
@@ -2755,6 +2919,24 @@ function getFilterMode() {
 	}
 }
 
+function getCurrentFilterValue() {
+	if (this.getOption("filter.position") === FILTER_POSITION_INLINE) {
+		if (this[inlineFilterElementSymbol] instanceof HTMLInputElement) {
+			return this[inlineFilterElementSymbol].value?.trim() ?? "";
+		}
+	}
+
+	if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
+		return this[popperFilterElementSymbol].value?.trim() ?? "";
+	}
+
+	if (this[inlineFilterElementSymbol] instanceof HTMLInputElement) {
+		return this[inlineFilterElementSymbol].value?.trim() ?? "";
+	}
+
+	return "";
+}
+
 /**
  * @private
  */
@@ -2930,6 +3112,10 @@ function clearSelection() {
 		throw new Error("no shadow-root is defined");
 	}
 
+	if (this.hasAttribute("value")) {
+		this.removeAttribute("value");
+	}
+
 	setSelection
 		.call(this, [])
 		.then(() => {})
@@ -2996,6 +3182,12 @@ function areOptionsAvailableAndInitInternal() {
 		(isArray(options) && options.length === 0)
 	) {
 		setStatusOrRemoveBadges.call(this, "empty");
+		if (getFilterMode.call(this) === FILTER_MODE_REMOTE) {
+			if (this[isLoadingSymbol] !== true) {
+				this.setOption("total", null);
+				resetPaginationState.call(this);
+			}
+		}
 
 		let msg = this.getOption("labels.no-options-available");
 
@@ -3035,7 +3227,9 @@ function areOptionsAvailableAndInitInternal() {
 		if (this.getOption("features.emptyValueIfNoOptions") === true) {
 			this.value = "";
 		}
-		addErrorAttribute(this, "No options available.");
+		if (this[isLoadingSymbol] !== true) {
+			addErrorAttribute(this, "No options available.");
+		}
 		return false;
 	}
 
@@ -3342,6 +3536,7 @@ function setSelection(selection) {
 
 	checkOptionState.call(this);
 	setSummaryAndControlText.call(this);
+	setStatusOrRemoveBadges.call(this);
 
 	if (valuesChanged) {
 		try {
@@ -3622,7 +3817,7 @@ function initTotal() {
 			try {
 				const data = JSON.parse(String(text));
 
-				processAndApplyPaginationData.call(this, data);
+				processAndApplyRemoteInfoTotal.call(this, data);
 			} catch (e) {
 				addErrorAttribute(this, e);
 			}
@@ -3642,6 +3837,24 @@ function updatePagination(total, currentPage, objectsPerPage) {
 	});
 }
 
+function resetPaginationState() {
+	const paginationElement = this[paginationElementSymbol];
+	if (!paginationElement) {
+		return;
+	}
+
+	paginationElement.style.display = "none";
+	paginationElement.setOption("pages", null);
+	paginationElement.setOption("currentPage", null);
+	paginationElement.setOption("objectsPerPage", null);
+	this.setOption("messages.total", "");
+}
+
+function clearOptionsOnError() {
+	this[cleanupOptionsListSymbol] = true;
+	this.setOption("options", []);
+}
+
 function refreshSelectPaginationLayout() {
 	const paginationElement = this[paginationElementSymbol];
 	if (!paginationElement || typeof paginationElement.getOption !== "function") {
@@ -3709,8 +3922,12 @@ function initEventHandler() {
 					return value !== b.value;
 				});
 
-				setSelection
-					.call(self, selection)
+				const applyRemoval =
+					Array.isArray(selection) && selection.length === 0
+						? clearSelection.call(self)
+						: setSelection.call(self, selection);
+
+				applyRemoval
 					.then(() => {
 						fireCustomEvent(self, "monster-selection-removed", {
 							value,
@@ -3771,6 +3988,10 @@ function initEventHandler() {
 	};
 
 	self[keyEventHandler] = (event) => {
+		if (event?.monsterFilterHandled === true) {
+			return;
+		}
+
 		const path = event.composedPath();
 		const element = path.shift();
 
@@ -3808,6 +4029,23 @@ function initEventHandler() {
 		}
 	};
 
+	const attachFilterKeyListener = (element) => {
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
+		element.addEventListener("keydown", (event) => {
+			if (event?.monsterFilterHandled === true) {
+				return;
+			}
+			event.monsterFilterHandled = true;
+			handleFilterKeyboardEvents.call(self, event);
+		});
+	};
+
+	attachFilterKeyListener(this[inlineFilterElementSymbol]);
+	attachFilterKeyListener(this[popperFilterElementSymbol]);
+
 	const types = self.getOption("toggleEventType", ["click"]);
 
 	for (const [, type] of Object.entries(types)) {
@@ -3960,6 +4198,20 @@ function setStatusOrRemoveBadges(suggestion) {
 			return;
 		}
 
+		if (current === "clear") {
+			const options = this.getOption("options");
+			if (
+				options === undefined ||
+				options === null ||
+				(isArray(options) && options.length === 0)
+			) {
+				this.setOption("classes.statusOrRemoveBadge", "empty");
+			} else {
+				this.setOption("classes.statusOrRemoveBadge", "closed");
+			}
+			return;
+		}
+
 		const options = this.getOption("options");
 		if (
 			options === undefined ||

package/source/monster.mjs

@@ -29,6 +29,7 @@ export * from "./components/layout/width-toggle.mjs";
 export * from "./components/layout/board.mjs";
 export * from "./components/layout/panel.mjs";
 export * from "./components/layout/details.mjs";
+export * from "./components/layout/vertical-tabs.mjs";
 export * from "./components/layout/slider.mjs";
 export * from "./components/content/fetch-box.mjs";
 export * from "./components/content/viewer.mjs";
@@ -73,6 +74,7 @@ export * from "./components/form/action-button.mjs";
 export * from "./components/form/form.mjs";
 export * from "./components/form/repeat-field-set.mjs";
 export * from "./components/form/api-button.mjs";
+export * from "./components/form/select-link.mjs";
 export * from "./components/form/digits.mjs";
 export * from "./components/form/tree-select.mjs";
 export * from "./components/form/popper-button.mjs";

package/test/cases/components/form/select.mjs

@@ -184,6 +184,122 @@ describe('Select', function () {
 
     });
 
+    describe('Remote filter pagination', function () {
+        let requestCount = 0;
+
+        beforeEach((done) => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = html1;
+
+            requestCount = 0;
+            global['fetch'] = function () {
+                requestCount += 1;
+                let headers = new Map;
+                headers.set('content-type', 'application/json');
+
+                if (requestCount === 1) {
+                    return Promise.resolve({
+                        ok: true,
+                        status: 200,
+                        headers: headers,
+                        text: function () {
+                            return Promise.resolve(JSON.stringify({
+                                items: [
+                                    {id: 1, name: "Alpha"}
+                                ],
+                                pagination: {
+                                    total: 2,
+                                    page: 1,
+                                    perPage: 1
+                                }
+                            }));
+                        }
+                    });
+                }
+
+                return Promise.resolve({
+                    ok: false,
+                    status: 500,
+                    headers: headers,
+                    text: function () {
+                        return Promise.resolve(JSON.stringify({}));
+                    }
+                });
+            };
+
+            done();
+        });
+
+        afterEach(() => {
+            let mocks = document.getElementById('mocks');
+            mocks.innerHTML = "";
+            global['fetch'] = fetchReference;
+        });
+
+        it('should reset pagination and clear options on fetch error', function (done) {
+            this.timeout(4000);
+
+            let mocks = document.getElementById('mocks');
+            const select = document.createElement('monster-select');
+            select.setOption('url', 'https://example.com/items?filter={filter}&page={page}');
+            select.setOption('filter.mode', 'remote');
+            select.setOption('mapping.selector', 'items.*');
+            select.setOption('mapping.labelTemplate', '${name}');
+            select.setOption('mapping.valueTemplate', '${id}');
+            select.setOption('mapping.total', 'pagination.total');
+            select.setOption('mapping.currentPage', 'pagination.page');
+            select.setOption('mapping.objectsPerPage', 'pagination.perPage');
+            mocks.appendChild(select);
+
+            const pagination = () => select.shadowRoot.querySelector('[data-monster-role=pagination]');
+
+            const triggerFilter = (value) => {
+                const filterInput = select.shadowRoot.querySelector('[data-monster-role=filter]');
+                filterInput.value = value;
+                filterInput.dispatchEvent(new KeyboardEvent('keydown', {
+                    code: 'KeyA',
+                    bubbles: true
+                }));
+            };
+
+            select.addEventListener('monster-options-set', () => {
+                setTimeout(() => {
+                    try {
+                        const options = select.getOption('options');
+                        expect(options.length).to.equal(1);
+                        expect(pagination().getOption('currentPage')).to.equal(1);
+                        expect(pagination().getOption('pages')).to.equal(2);
+                        expect(pagination().getOption('objectsPerPage')).to.equal(1);
+
+                        triggerFilter('b');
+
+                        setTimeout(() => {
+                            try {
+                                const optionsAfterError = select.getOption('options');
+                                expect(optionsAfterError.length).to.equal(0);
+                                expect(pagination().getOption('currentPage')).to.equal(null);
+                                expect(pagination().getOption('pages')).to.equal(null);
+                                expect(pagination().getOption('objectsPerPage')).to.equal(null);
+                                expect(select.getOption('total')).to.equal(null);
+                                expect(select.getOption('messages.total')).to.equal("");
+                            } catch (e) {
+                                return done(e);
+                            }
+
+                            done();
+                        }, 500);
+                    } catch (e) {
+                        done(e);
+                    }
+                }, 50);
+            }, {once: true});
+
+            setTimeout(() => {
+                triggerFilter('a');
+            }, 0);
+        });
+    });
+
     describe('document.createElement()', function () {
 
         afterEach(() => {