@schukai/monster 3.51.5 → 3.52.0

package/source/components/form/select.mjs

@@ -0,0 +1,2314 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+import { instanceSymbol } from "../../constants.mjs";
+import { internalSymbol } from "../../constants.mjs";
+import { buildMap } from "../../data/buildmap.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { positionPopper } from "./util/floating-ui.mjs";
+import {
+	addAttributeToken,
+	findClosestByAttribute,
+	removeAttributeToken,
+} from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_PREFIX,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {
+	assembleMethodSymbol,
+	getSlottedElements,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import {
+	findTargetElementFromEvent,
+	fireCustomEvent,
+	fireEvent,
+} from "../../dom/events.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { Formatter } from "../../text/formatter.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { ID } from "../../types/id.mjs";
+import {
+	isArray,
+	isFunction,
+	isInteger,
+	isIterable,
+	isObject,
+	isPrimitive,
+	isString,
+} from "../../types/is.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { ProxyObserver } from "../../types/proxyobserver.mjs";
+import { validateArray, validateString } from "../../types/validate.mjs";
+import { Processing } from "../../util/processing.mjs";
+import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
+import { SelectStyleSheet } from "./stylesheet/select.mjs";
+import {
+	getDocumentTranslations,
+	Translations,
+} from "../../i18n/translations.mjs";
+
+export {
+	Select,
+	popperElementSymbol,
+	getSummaryTemplate,
+	getSelectionTemplate,
+};
+
+/**
+ * @private
+ * @type {string}
+ */
+const noOptionsAvailableMessage = "No options available.";
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const timerCallbackSymbol = Symbol("timerCallback");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const closeEventHandler = Symbol("closeEventHandler");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const clearOptionEventHandler = Symbol("clearOptionEventHandler");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const keyEventHandler = Symbol("keyEventHandler");
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputEventHandler = Symbol("inputEventHandler");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const changeEventHandler = Symbol("changeEventHandler");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const controlElementSymbol = Symbol("controlElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const selectionElementSymbol = Symbol("selectionElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const containerElementSymbol = Symbol("containerElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const popperElementSymbol = Symbol("popperElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inlineFilterElementSymbol = Symbol("inlineFilterElement");
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const popperFilterElementSymbol = Symbol("popperFilterElement");
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const popperFilterContainerElementSymbol = Symbol(
+	"popperFilterContainerElement",
+);
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const optionsElementSymbol = Symbol("optionsElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const noOptionsAvailableElementSymbol = Symbol("noOptionsAvailableElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const statusOrRemoveBadgesElementSymbol = Symbol("statusOrRemoveBadgesElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const areOptionsAvailableAndInitSymbol = Symbol("@@areOptionsAvailableAndInit");
+
+/**
+ * @private
+ * @type {number}
+ */
+const FOCUS_DIRECTION_UP = 1;
+/**
+ * @private
+ * @type {number}
+ */
+const FOCUS_DIRECTION_DOWN = 2;
+
+/**
+ * @private
+ * @type {string}
+ */
+const FILTER_MODE_REMOTE = "remote";
+
+/**
+ * @private
+ * @type {string}
+ */
+const FILTER_MODE_OPTIONS = "options";
+
+/**
+ * @private
+ * @type {string}
+ */
+const FILTER_MODE_DISABLED = "disabled";
+
+/**
+ * @private
+ * @type {string}
+ */
+const FILTER_POSITION_POPPER = "popper";
+/**
+ * @private
+ * @type {string}
+ */
+const FILTER_POSITION_INLINE = "inline";
+
+/**
+ * @typedef {Object} Selection
+ * @property {*} value
+ * @property {String} label
+ * @memberOf Monster.Components.Form
+ * @since 1.2.0
+ */
+
+/**
+ * This CustomControl creates a select element with a variety of options.
+ * It supports filtering, local and remote, multiple selection and has a
+ * template system for displaying the options.
+ *
+ * <img src="./images/select.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ * as well as [pooperjs](https://popper.js.org/docs/v2/).
+ *
+ * You can create this control either by specifying the HTML tag `<monster-select />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-select');` method.
+ *
+ * ```html
+ * <monster-select></monster-select>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {Select} from '@schukai/component-form/source/select.js';
+ * document.createElement('monster-select');
+ * ```
+ *
+ * ## Events
+ *
+ * The event `monster-change` is sent as soon as someone has clicked on a input control.
+ * `monster-changed` is sent as soon as the control has processed this input.
+ * The `monster-changed` event is sent when setting a selection. If the options have been set, the `monster-options-set` event is sent.
+ *
+ * The CustomEvent has the property [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
+ *
+ * ```
+ * node.addEventListener('monster-change',(e)=>console.log(e.detail))
+ * node.addEventListener('monster-changed',(e)=>console.log(e.detail))
+ * node.addEventListener('monster-selected',(e)=>console.log(e.detail))
+ * node.addEventListener('monster-options-set',(e)=>console.log(e.detail))
+ * ```
+ *
+ * @externalExample ../../../example/components/form/select.mjs
+ * @startuml select.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Select
+ * @enduml
+ *
+ * @since 1.0.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A highly configurable select control
+ * @fires Monster.Components.Form.event:monster-options-set
+ * @fires Monster.Components.Form.event:monster-selected
+ * @fires Monster.Components.Form.event:monster-change
+ * @fires Monster.Components.Form.event:monster-changed
+ */
+class Select extends CustomControl {
+	/**
+	 * @extends CustomControl
+	 */
+	constructor() {
+		super();
+		initOptionObserver.call(this);
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-form/select@@instance");
+	}
+
+	/**
+	 * The current selection of the Select
+	 *
+	 * ```
+	 * e = document.querySelector('monster-select');
+	 * console.log(e.value)
+	 * // ↦ 1
+	 * // ↦ ['1','2']
+	 * ```
+	 *
+	 * @property {string|array}
+	 */
+	get value() {
+		return convertSelectionToValue.call(this, this.getOption("selection"));
+	}
+
+	/**
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+	 * @return {boolean}
+	 */
+	static get formAssociated() {
+		return true;
+	}
+
+	/**
+	 * Set selection
+	 *
+	 * ```
+	 * e = document.querySelector('monster-select');
+	 * e.value=1
+	 * ```
+	 *
+	 * @property {string|array} value
+	 * @since 1.2.0
+	 * @throws {Error} unsupported type
+	 */
+	set value(value) {;
+
+		const result = convertValueToSelection.call(this, value);
+		setSelection
+			.call(this, result.selection)
+			.then(() => {})
+			.catch((e) => {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+			});
+	}
+
+	/**
+	 * 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.
+	 *
+	 * @property {Object} toggleEventType=click,touch List of event types to be observed for opening the dropdown
+	 * @property {boolean} delegatesFocus=false lorem [see mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus)
+	 * @property {Object[]} options Selection of key identifier pairs available for selection and displayed in the dropdown.
+	 * @property {string} options[].label Label
+	 * @property {string} options[].value Value
+	 * @property {string} options[].visibility hidden or visible
+	 * @property {Array} selection Selected options
+	 * @property {Integer} showMaxOptions=10 Maximum number of visible options before a scroll bar should be displayed.
+	 * @property {string} type=radio Multiple (checkbox) or single selection (radio)
+	 * @property {string} name=(random id) Name of the form field
+	 * @property {string} url Load options from server per url
+	 * @property {Object} fetch Fetch [see Using Fetch mozilla.org](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch)
+	 * @property {String} fetch.redirect=error
+	 * @property {String} fetch.method=GET
+	 * @property {String} fetch.mode=same-origin
+	 * @property {String} fetch.credentials=same-origin
+	 * @property {Object} fetch.headers={"accept":"application/json"}}
+	 * @property {Object} labels
+	 * @property {string} labels.cannot-be-loaded cannot be loaded
+	 * @property {string} labels.no-options-available no options available
+	 * @property {string} labels.select-an-option select an option
+	 * @property {string} labels.no-option no option in the list, maybe you have to change the filter
+	 * @property {Object} features List with features
+	 * @property {Boolean} features.clearAll=true Display of a delete button to delete the entire selection
+	 * @property {Boolean} features.clear=true Display of a delete key for deleting the specific selection
+	 * @property {Boolean} features.loadOnOpen=false Load options when opening the dropdown
+	 * @property {Boolean} filter.defaultValue=* Default filter value, if the filter is empty
+	 * @property {Boolean} filter.mode=options Filter mode, values: options, remote, disabled
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {string} templateMapping Mapping of the template placeholders
+	 * @property {string} templateMapping.selected Selected Template
+	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
+	 * @property {string} popper.placement=bottom PopperJS placement
+	 * @property {Object[]} modifiers={name:offset} PopperJS placement
+	 * @property {Object} mapping
+	 * @property {String} mapping.selector=* Path to select the appropriate entries
+	 * @property {String} mapping.labelTemplate="" template with the label placeholders in the form ${name}, where name is the key (**)
+	 * @property {String} mapping.valueTemplate="" template with the value placeholders in the form ${name}, where name is the key
+	 * @property {Monster.Components.Form~exampleFilterCallback|undefined} mapping.filter Filtering of values via a function
+	 * @property {Object} formatter
+	 * @property {Monster.Components.Form~formatterSelectionCallback|undefined} formatter.selection format selection label
+	 */
+	get defaults() {
+		return Object.assign(
+			{},
+			super.defaults,
+			{
+				toggleEventType: ["click", "touch"],
+				delegatesFocus: false,
+				options: [],
+				selection: [],
+				showMaxOptions: 10,
+				type: "radio",
+				name: new ID("s").toString(),
+				features: {
+					clearAll: true,
+					clear: true,
+					loadOnOpen: false,
+				},
+				url: null,
+				labels: {
+					"cannot-be-loaded": "Cannot be loaded",
+					"no-options-available": "No options available",
+					"select-an-option": "Select an option",
+					"summary-text": {
+						zero: "No entries were selected",
+						one: '<span class="monster-badge-primary-pill">1</span> entry was selected',
+						other:
+							'<span class="monster-badge-primary-pill">${count}</span> entries were selected',
+					},
+					"no-options":
+						"Unfortunately, there are no options available in the list.",
+					"no-options-found":
+						"No options are available in the list. Please consider modifying the filter.",
+				},
+				messages: {
+					control: null,
+					selected: null,
+					emptyOptions: null,
+				},
+				fetch: {
+					redirect: "error",
+					method: "GET",
+					mode: "same-origin",
+					credentials: "same-origin",
+					headers: {
+						accept: "application/json",
+					},
+				},
+				filter: {
+					defaultValue: "*",
+					mode: "disabled",
+					position: "inline",
+				},
+				classes: {
+					badge: "monster-badge-primary",
+					statusOrRemoveBadge: "empty",
+				},
+				mapping: {
+					selector: "*",
+					labelTemplate: "",
+					valueTemplate: "",
+					filter: null,
+				},
+				formatter: {
+					selection: buildSelectionLabel,
+				},
+				templates: {
+					main: getTemplate(),
+				},
+				templateMapping: {
+					/** with the attribute `data-monster-selected-template` the template for the selected options can be defined. */
+					selected: getSelectionTemplate(),
+				},
+
+				popper: {
+					placement: "bottom",
+					middleware: ["flip", "offset:1"],
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Select}
+	 */
+	[assembleMethodSymbol]() {
+		const self = this;
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(self);
+		initEventhandler.call(self);
+
+		if (
+			self.getOption("url") !== null &&
+			self.getOption("features.loadOnOpen") !== true
+		) {
+			self
+				.fetch()
+				.then(() => {
+					let result;
+					if (self.hasAttribute("value")) {
+						result = setSelection.call(self, self.getAttribute("value"));
+					} else {
+						result = setSelection.call(self, []);
+					}
+
+					result
+						.then(() => {})
+						.catch((e) => {
+							addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+						});
+				})
+				.catch((e) => {
+					addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+					throw e;
+				});
+		}
+
+		let lastValue = self.value;
+		self[internalSymbol].attachObserver(
+			new Observer(function () {
+				if (isObject(this) && this instanceof ProxyObserver) {
+					const n = this.getSubject()?.options?.value;
+
+					if (lastValue !== n) {
+						lastValue = n;
+						setSelection
+							.call(self, n)
+							.then(() => {})
+							.catch((e) => {
+								addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+							});
+					}
+				}
+			}),
+		);
+
+		areOptionsAvailableAndInit.call(self);
+
+		return this;
+	}
+
+	/**
+	 * The Button.click() method simulates a click on the internal button element.
+	 *
+	 * @since 3.27.0
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+	 */
+	click() {;
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		toggle.call(this);
+	}
+
+	/**
+	 * The Button.focus() method sets focus on the internal button element.
+	 *
+	 * @since 3.27.0
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
+	 */
+	focus(options) {;
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		new Processing(() => {
+			gatherState.call(this);
+			focusFilter.call(this, options);
+		})
+			.run()
+			.catch((e) => {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+			});
+	}
+
+	/**
+	 * The Button.blur() method removes focus from the internal button element.
+	 * @link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/blur
+	 */
+	blur() {;
+		new Processing(() => {
+			gatherState.call(this);
+			blurFilter.call(this);
+		})
+			.run()
+			.catch((e) => {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+			});
+	}
+
+	/**
+	 * If no url is specified, the options are taken from the Component itself.
+	 *
+	 * @param {string|URL} url URL to fetch the options
+	 * @return {Promise}
+	 */
+	fetch(url) {;
+
+		if (url instanceof URL) {
+			url = url.toString();
+		}
+
+		if (url !== undefined && url !== null) {
+			url = validateString(url);
+		}
+
+		return fetchData.call(this, url).then((map) => {
+			if (
+				isObject(map) ||
+				isArray(map) | (map instanceof Set) ||
+				map instanceof Map
+			) {
+				this.importOptions(map);
+			}
+		});
+	}
+
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+		const document = getDocument();;
+
+		for (const [, type] of Object.entries(["click", "touch"])) {
+			// close on outside ui-events
+			document.addEventListener(type, this[closeEventHandler]);
+		}
+
+		parseSlotsToOptions.call(this);
+		attachResizeObserver.call(this);
+		updatePopper.call(this);
+
+		new Processing(() => {
+			gatherState.call(this);
+			focusFilter.call(this);
+		}).run();
+	}
+
+	/**
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		const document = getDocument();;
+
+		// close on outside ui-events
+		for (const [, type] of Object.entries(["click", "touch"])) {
+			document.removeEventListener(type, this[closeEventHandler]);
+		}
+
+		disconnectResizeObserver.call(this);
+	}
+
+	/**
+	 * Import Select Options from dataset
+	 * Not to be confused with the control defaults/options
+	 *
+	 * @since 0.16.0
+	 * @param {array|object|Map|Set} data
+	 * @return {Select}
+	 * @throws {Error} map is not iterable
+	 * @throws {Error} missing label configuration
+	 */
+	importOptions(data) {;
+
+		const mappingOptions = this.getOption("mapping", {});
+		const selector = mappingOptions?.["selector"];
+		const labelTemplate = mappingOptions?.["labelTemplate"];
+		const valueTemplate = mappingOptions?.["valueTemplate"];
+		const filter = mappingOptions?.["filter"];
+
+		let flag = false;
+		if (labelTemplate === "") {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "empty label template");
+			flag = true;
+		}
+
+		if (valueTemplate === "") {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "empty value template");
+			flag = true;
+		}
+
+		if (flag === true) {
+			throw new Error("missing label configuration");
+		}
+
+		const map = buildMap(data, selector, labelTemplate, valueTemplate, filter);
+
+		const options = [];
+		if (!isIterable(map)) {
+			throw new Error("map is not iterable");
+		}
+
+		const visibility = "visible";
+
+		map.forEach((label, value) => {
+			options.push({
+				value,
+				label,
+				visibility,
+			});
+		});
+
+		runAsOptionLengthChanged.call(this, map.size);
+		this.setOption("options", options);
+
+		fireCustomEvent(this, "monster-options-set", {
+			options,
+		});
+
+		return this;
+	}
+
+	/**
+	 * @private
+	 * @return {Monster.Components.Form.Select}
+	 */
+	calcAndSetOptionsDimension() {
+		calcAndSetOptionsDimension.call(this);
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-select";
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [SelectStyleSheet];
+	}
+}
+
+/**
+ * This attribute can be used to pass a URL to this select.
+ *
+ * ```
+ * <monster-select data-monster-url="https://example.com/"></monster-select>
+ * ```
+ *
+ * @private
+ * @return {object}
+ */
+function initOptionsFromArguments() {;
+	const options = {};
+
+	const template = this.getAttribute("data-monster-selected-template");
+	if (isString(template)) {
+		if (!options["templateMapping"]) options["templateMapping"] = {};
+
+		switch (template) {
+			case "summary":
+			case "default":
+				options["templateMapping"]["selected"] = getSummaryTemplate();
+				break;
+			case "selected":
+				options["templateMapping"]["selected"] = getSelectionTemplate();
+				break;
+			default:
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					"invalid template, use summary or selected",
+				);
+		}
+	}
+
+	return options;
+}
+
+/**
+ * @private
+ */
+function attachResizeObserver() {;
+
+	// against flickering
+	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+			updatePopper.call(this);
+			delete this[timerCallbackSymbol];
+		});
+	});
+
+	this[resizeObserverSymbol].observe(this.parentElement);
+}
+
+function disconnectResizeObserver() {;
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+	}
+}
+
+function getSelectionTemplate() {
+	return `<div data-monster-role="selection"
+                 data-monster-insert="selection path:selection" role="search"
+            ><input type="text" role="searchbox"
+                    part="inline-filter" name="inline-filter"
+                    data-monster-role="filter"
+                    autocomplete="off"
+                    tabindex="0"
+            ><div data-monster-replace="path:messages.control"></div>
+            </div>`;
+}
+
+function getSummaryTemplate() {
+	return `<div data-monster-role="selection" role="search">
+    <input type="text" role="searchbox"
+           part="inline-filter" name="inline-filter"
+           data-monster-role="filter"
+           autocomplete="off"
+           tabindex="0"
+    >
+    <div data-monster-replace="path:messages.selected"></div>    
+</div>`;
+}
+
+/**
+ * @return {void}
+ * @private
+ */
+function parseSlotsToOptions() {;
+
+	let options = this.getOption("options");
+	if (!isIterable(options)) {
+		options = [];
+	}
+
+	let counter = 1;
+	getSlottedElements.call(this, "div").forEach((node) => {
+		let value = String(counter++);
+		let visibility = "visible";
+
+		if (node.hasAttribute("data-monster-value")) {
+			value = node.getAttribute("data-monster-value");
+		}
+
+		if (node.style.display === "none") {
+			visibility = "hidden";
+		}
+
+		const label = node.outerHTML;
+
+		options.push({
+			value,
+			label,
+			visibility,
+		});
+	});
+
+	runAsOptionLengthChanged.call(this, options.length);
+	this.setOption("options", options);
+}
+
+/**
+ * wait until all options are finished rendering
+ *
+ * @private
+ * @param {int} targetLength
+ */
+function runAsOptionLengthChanged(targetLength) {
+	const self = this;
+
+	if (!self[optionsElementSymbol]) {
+		return;
+	}
+
+	const callback = function (mutationsList, observer) {
+		const run = false;
+		for (const mutation of mutationsList) {
+			if (mutation.type === "childList") {
+				const run = true;
+				break;
+			}
+		}
+
+		if (run === true) {
+			const nodes = self[optionsElementSymbol].querySelectorAll(
+				`div[${ATTRIBUTE_ROLE}=option]`,
+			);
+
+			if (nodes.length === targetLength) {
+				checkOptionState.call(self);
+				observer.disconnect();
+			}
+		}
+	};
+
+	const observer = new MutationObserver(callback);
+	observer.observe(self[optionsElementSymbol], {
+		attributes: false,
+		childList: true,
+		subtree: true,
+	});
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @return {*}
+ */
+function buildSelectionLabel(value) {;
+	const options = this.getOption("options");
+
+	for (let i = 0; i < options.length; i++) {
+		const o = options?.[i];
+		if (isObject(o) && o?.["value"] === value) {
+			return o?.["label"];
+		} else if (isPrimitive(o) && o === value) {
+			return o;
+		}
+	}
+
+	return undefined;
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @return {string}
+ * @throws {Error} no value found
+ */
+function getSelectionLabel(value) {;
+
+	const callback = this.getOption("formatter.selection");
+	if (isFunction(callback)) {
+		const label = callback.call(this, value);
+		if (isString(label)) return label;
+	}
+
+	if (isString(value) || isInteger(value)) {
+		return `${value}`;
+	}
+
+	return this.getOption("labels.cannot-be-loaded", value);
+}
+
+/**
+ * @private
+ * @param {Event} event
+ */
+function handleToggleKeyboardEvents(event) {;
+
+	switch (event?.["code"]) {
+		case "Escape":
+			toggle.call(this);
+			event.preventDefault();
+			break;
+		case "Space":
+			toggle.call(this);
+			event.preventDefault();
+			break;
+	}
+}
+
+/**
+ * @license AGPLv3
+ * @since 1.15.0
+ * @private
+ * @this CustomElement
+ */
+function initOptionObserver() {
+	const self = this;
+
+	self.attachObserver(
+		new Observer(function () {
+			new Processing(() => {
+				try {
+					self.updateI18n();
+				} catch (e) {}
+				try {
+					areOptionsAvailableAndInit.call(self);
+				} catch (e) {}
+
+				setSummaryAndControlText.call(self);
+			}).run();
+		}),
+	);
+}
+
+function getDefaultTranslation() {;
+
+	const translation = new Translations("en").assignTranslations(
+		this.getOption("labels", {}),
+	);
+
+	try {
+		const doc = getDocumentTranslations();
+		translation.locale = doc.locale;
+	} catch (e) {}
+
+	return translation;
+}
+
+/**
+ * @private
+ * @returns {string|*}
+ */
+function setSummaryAndControlText() {;
+
+	const translations = getDefaultTranslation.call(this);
+	const selections = this.getOption("selection");
+
+	const text = translations.getPluralRuleText(
+		"summary-text",
+		selections.length,
+		"",
+	);
+
+	const selectedText = new Formatter({
+		count: String(selections.length),
+	}).format(text);
+
+	this.setOption("messages.selected", selectedText);
+
+	const current = this.getOption("messages.control");
+	const msg = this.getOption("labels.select-an-option");
+
+	if (
+		current === "" ||
+		current === undefined ||
+		current === msg ||
+		current === null
+	) {
+		if (selections === undefined || selections.length === 0) {
+			this.setOption("messages.control", msg);
+		} else {
+			this.setOption("messages.control", "");
+		}
+	}
+}
+
+/**
+ * @private
+ * @return {NodeList}
+ */
+function getOptionElements() {
+	return this[optionsElementSymbol].querySelectorAll(
+		`[${ATTRIBUTE_ROLE}=option]`,
+	);
+}
+
+/**
+ * With the help of this filter callback, values can be filtered out. Only if the filter function returns true, the value is taken for the map.
+ *
+ * @callback Monster.Components.Form~exampleFilterCallback
+ * @param {*} value Value
+ * @param {string} key  Key
+ * @memberOf Monster.Components.Form
+ * @see Monster.Data.buildMap
+ */
+
+/**
+ *
+ * @callback Monster.Components.Form~formatterSelectionCallback
+ * @param {*} value Value
+ * @return {string|undefined}
+ * @memberOf Monster.Components.Form
+ * @see Monster.Data.buildMap
+ */
+
+/**
+ * @private
+ */
+function calcAndSetOptionsDimension() {;
+
+	const options = getOptionElements.call(this);
+	const container = this[optionsElementSymbol];
+	if (!(container instanceof HTMLElement && options instanceof NodeList)) {
+		return;
+	}
+
+	let visible = 0;
+	let optionHeight = 0;
+	const max = this.getOption("showMaxOptions", 10);
+
+	let scrollFlag = false;
+	for (const [, option] of Object.entries(options)) {
+		const computedStyle = getGlobal().getComputedStyle(option);
+		if (computedStyle.display === "none") continue;
+
+		let h = option.getBoundingClientRect().height;
+		h += parseInt(computedStyle.getPropertyValue("margin-top"), 10);
+		h += parseInt(computedStyle.getPropertyValue("margin-bottom"), 10);
+		optionHeight = Math.max(optionHeight, h);
+
+		visible++;
+		if (visible > max) {
+			break;
+		}
+	}
+
+	if (visible > max) {
+		visible = max;
+		scrollFlag = true;
+	}
+
+	if (visible === 0) {
+		if (this.getOption("options").length === 0) {
+			this.setOption(
+				"messages.emptyOptions",
+				this.getOption("labels.no-options-available"),
+			);
+		} else {
+			this.setOption(
+				"messages.emptyOptions",
+				this.getOption("labels.no-options-found"),
+			);
+		}
+		this[noOptionsAvailableElementSymbol].classList.remove("d-none");
+	} else {
+		this[noOptionsAvailableElementSymbol].classList.add("d-none");
+	}
+
+	const styles = getGlobal().getComputedStyle(this[optionsElementSymbol]);
+	let padding = parseInt(styles.getPropertyValue("padding-top"), 10);
+	padding += parseInt(styles.getPropertyValue("padding-bottom"), 10);
+
+	let margin = parseInt(styles.getPropertyValue("margin-top"), 10);
+	margin += parseInt(styles.getPropertyValue("margin-bottom"), 10);
+
+	const containerHeight = optionHeight * visible + padding + margin;
+	container.style.height = `${containerHeight}px`;
+
+	if (scrollFlag === true) {
+		container.style.overflowY = "scroll";
+	} else {
+		container.style.overflowY = "auto";
+	}
+
+	const domRect = this[controlElementSymbol].getBoundingClientRect();
+
+	this[popperElementSymbol].style.width = `${domRect.width}px`;
+	container.style.overflowX = "auto";
+}
+
+/**
+ * @private
+ * @param {number} direction
+ * @throws {Error} no shadow-root is defined
+ */
+function activateCurrentOption(direction) {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	let focused = this.shadowRoot.querySelector(`[${ATTRIBUTE_PREFIX}focused]`);
+
+	if (
+		!(focused instanceof HTMLElement) ||
+		focused.matches("[data-monster-visibility=hidden]")
+	) {
+		for (const [, e] of Object.entries(
+			this.shadowRoot.querySelectorAll(`[${ATTRIBUTE_ROLE}=option]`),
+		)) {
+			if (e.matches("[data-monster-visibility=visible]")) {
+				focused = e;
+				break;
+			}
+		}
+	} else {
+		if (direction === FOCUS_DIRECTION_DOWN) {
+			while (focused.nextSibling) {
+				focused = focused.nextSibling;
+
+				if (
+					focused instanceof HTMLElement &&
+					focused.hasAttribute(ATTRIBUTE_ROLE) &&
+					focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
+					focused.matches("[data-monster-visibility=visible]") &&
+					focused.matches(":not([data-monster-filtered=true])")
+				) {
+					break;
+				}
+			}
+		} else {
+			while (focused.previousSibling) {
+				focused = focused.previousSibling;
+
+				if (
+					focused instanceof HTMLElement &&
+					focused.hasAttribute(ATTRIBUTE_ROLE) &&
+					focused.getAttribute(ATTRIBUTE_ROLE) === "option" &&
+					focused.matches("[data-monster-visibility=visible]") &&
+					focused.matches(":not([data-monster-filtered=true])")
+				) {
+					break;
+				}
+			}
+		}
+	}
+
+	new Processing(() => {
+		if (focused instanceof HTMLElement) {
+			this.shadowRoot
+				.querySelectorAll(`[${ATTRIBUTE_PREFIX}focused]`)
+				.forEach((e) => {
+					e.removeAttribute(`${ATTRIBUTE_PREFIX}focused`);
+				});
+
+			focused.focus();
+			focused.setAttribute(`${ATTRIBUTE_PREFIX}focused`, true);
+		}
+	}).run();
+}
+
+/**
+ * @private
+ */
+function filterOptions() {;
+
+	new Processing(() => {
+		let filterValue;
+
+		switch (this.getOption("filter.position")) {
+			case FILTER_POSITION_INLINE:
+				if (this[inlineFilterElementSymbol] instanceof HTMLElement) {
+					filterValue = this[inlineFilterElementSymbol].value.toLowerCase();
+				} else {
+					return;
+				}
+
+				break;
+			case FILTER_POSITION_POPPER:
+			default:
+				if (this[popperFilterElementSymbol] instanceof HTMLInputElement) {
+					filterValue = this[popperFilterElementSymbol].value.toLowerCase();
+				} else {
+					return;
+				}
+		}
+
+		const options = this.getOption("options");
+		for (const [i, option] of Object.entries(options)) {
+			if (option.label.toLowerCase().indexOf(filterValue) === -1) {
+				this.setOption(`options.${i}.filtered`, "true");
+			} else {
+				this.setOption(`options.${i}.filtered`, undefined);
+			}
+		}
+	})
+		.run()
+		.then(() => {
+			new Processing(10, () => {
+				calcAndSetOptionsDimension.call(this);
+				focusFilter.call(this);
+			}).run();
+		})
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		});
+}
+
+/**
+ * @private
+ * @param {Event} event
+ */
+function handleFilterKeyboardEvents(event) {;
+
+	const shiftKey = event?.["shiftKey"];
+
+	switch (event?.["code"]) {
+		case "Tab":
+			activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+			event.preventDefault();
+			break;
+		case "Escape":
+			toggle.call(this);
+			event.preventDefault();
+			break;
+		case "Tab" && shiftKey === true:
+		case "ArrowUp":
+			activateCurrentOption.call(this, FOCUS_DIRECTION_UP);
+			event.preventDefault();
+			break;
+		case "Tab" && !shiftKey:
+		case "ArrowDown":
+			activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+			event.preventDefault();
+			break;
+		default:
+			if (this.getOption("filter.mode") !== FILTER_MODE_REMOTE) {
+				filterOptions.call(this);
+			} else {
+				filterFromRemote.call(this).catch((e) => {
+					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+				});
+			}
+	}
+}
+
+/**
+ * @private
+ */
+function filterFromRemote() {;
+
+	if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	const optionUrl = this.getOption("url");
+	if (!optionUrl) {
+		addAttributeToken(
+			this,
+			ATTRIBUTE_ERRORMESSAGE,
+			"Missing URL for Remote Filter.",
+		);
+		return;
+	}
+
+	return new Processing(() => {
+		const filterValue = encodeURI(
+			this[inlineFilterElementSymbol].value.toLowerCase(),
+		);
+		let url = optionUrl;
+		if (filterValue.length > 0) {
+			url = new Formatter({ filter: filterValue }).format(optionUrl);
+		}
+
+		this
+			.fetch(url)
+			.then(() => {
+				checkOptionState.call(this);
+			})
+			.catch((e) => {
+				throw e;
+			});
+	}).run();
+}
+
+/**
+ *
+ * @param {Event} event
+ * @private
+ */
+function handleOptionKeyboardEvents(event) {;
+
+	const shiftKey = event?.["shiftKey"];
+
+	switch (event?.["code"]) {
+		case "Escape":
+			toggle.call(this);
+			event.preventDefault();
+			break;
+		case "Enter":
+		case "Space":
+			const path = event.composedPath();
+			const element = path?.[0];
+
+			fireEvent(element.getElementsByTagName("input"), "click");
+			event.preventDefault();
+			break;
+
+		case "Tab" && shiftKey === true:
+		case "ArrowUp":
+			activateCurrentOption.call(this, FOCUS_DIRECTION_UP);
+			event.preventDefault();
+			break;
+
+		case "Tab" && !shiftKey:
+		case "ArrowLeft":
+		case "ArrowRight":
+			// handled by tree select
+			break;
+		case "ArrowDown":
+			activateCurrentOption.call(this, FOCUS_DIRECTION_DOWN);
+			event.preventDefault();
+			break;
+		default:
+			const p = event.composedPath();
+			if (p?.[0] instanceof HTMLInputElement) {
+				return;
+			}
+			focusFilter.call(this);
+			break;
+	}
+}
+
+/**
+ * @private
+ * @returns {string}
+ */
+function getFilterMode() {;
+
+	switch (this.getOption("filter.mode")) {
+		case FILTER_MODE_OPTIONS:
+			return FILTER_MODE_OPTIONS;
+		case FILTER_MODE_REMOTE:
+			return FILTER_MODE_REMOTE;
+		default:
+			return FILTER_MODE_DISABLED;
+	}
+}
+
+/**
+ * @private
+ */
+function blurFilter() {;
+
+	if (!(this[inlineFilterElementSymbol] instanceof HTMLElement)) {
+		return;
+	}
+
+	if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
+		return;
+	}
+
+	this[popperFilterContainerElementSymbol].classList.remove("active");
+	this[popperFilterContainerElementSymbol].blur();
+
+	this[inlineFilterElementSymbol].classList.remove("active");
+	this[inlineFilterElementSymbol].blur();
+}
+
+/**
+ * @private
+ * @param focusOptions
+ */
+function focusPopperFilter(focusOptions) {;
+
+	this[popperFilterContainerElementSymbol].classList.remove("d-none");
+	this[popperFilterElementSymbol].classList.add("active");
+	this[inlineFilterElementSymbol].classList.remove("active");
+	this[inlineFilterElementSymbol].classList.add("d-none");
+
+	if (!(this[popperFilterElementSymbol] instanceof HTMLElement)) {
+		addAttributeToken(
+			this,
+			ATTRIBUTE_ERRORMESSAGE,
+			"Missing Popper Filter Element.",
+		);
+		return;
+	}
+
+	// visibility is set to visible, because focus() does not work on invisible elements
+	// and the class definition is assigned later in the processing
+	setTimeout(() => {
+		if (focusOptions === undefined || focusOptions === null) {
+			this[popperFilterElementSymbol].focus();
+		} else {
+			this[popperFilterElementSymbol].focus(focusOptions);
+		}
+	}, 100);
+}
+
+/**
+ * @private
+ * @param focusOptions
+ */
+function focusInlineFilter(focusOptions) {;
+
+	const options = this.getOption("options");
+	if (
+		(!isArray(options) || options.length === 0) &&
+		this.getOption("filter.mode") !== FILTER_MODE_REMOTE
+	) {
+		return;
+	}
+
+	this[popperFilterContainerElementSymbol].classList.add("d-none");
+	this[inlineFilterElementSymbol].classList.add("active");
+	this[inlineFilterElementSymbol].classList.remove("d-none");
+
+	// visibility is set to visible, because focus() does not work on invisible elements
+	// and the class definition is assigned later in the processing
+	setTimeout(() => {
+		if (focusOptions === undefined || focusOptions === null) {
+			this[inlineFilterElementSymbol].focus();
+		} else {
+			this[inlineFilterElementSymbol].focus(focusOptions);
+		}
+	}, 100);
+}
+
+/**
+ * @private
+ */
+function focusFilter(focusOptions) {;
+
+	if (getFilterMode.call(this) === FILTER_MODE_DISABLED) {
+		this[popperFilterContainerElementSymbol].classList.add("d-none");
+		this[inlineFilterElementSymbol].classList.add("d-none");
+		return;
+	}
+
+	if (this.getOption("filter.position") === FILTER_POSITION_INLINE) {
+		return focusInlineFilter.call(this, focusOptions);
+	}
+
+	return focusPopperFilter.call(this, focusOptions);
+}
+
+/**
+ * @private
+ * @return {array}
+ * @throws {Error} no shadow-root is defined
+ * @throws {Error} unsupported type
+ */
+function gatherState() {;
+
+	const type = this.getOption("type");
+	if (["radio", "checkbox"].indexOf(type) === -1) {
+		throw new Error("unsupported type");
+	}
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	const selection = [];
+	const elements = this.shadowRoot.querySelectorAll(
+		`input[type=${type}]:checked`,
+	);
+	for (const e of elements) {
+		selection.push({
+			label: getSelectionLabel.call(this, e.value),
+			value: e.value,
+		});
+	}
+
+	setSelection
+		.call(this, selection)
+		.then(() => {})
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+		});
+
+	return this;
+}
+
+/**
+ * @private
+ * @throws {Error} no shadow-root is defined
+ * @throws {Error} unsupported type
+ */
+function clearSelection() {;
+
+	const type = this.getOption("type");
+	if (["radio", "checkbox"].indexOf(type) === -1) {
+		throw new Error("unsupported type");
+	}
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	setSelection
+		.call(this, [])
+		.then(() => {})
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, `${e}`);
+		});
+}
+
+/**
+ * @private
+ */
+function areOptionsAvailableAndInit() {;
+
+	// prevent multiple calls
+	if (this[areOptionsAvailableAndInitSymbol] === undefined) {
+		this[areOptionsAvailableAndInitSymbol] = 0;
+	}
+
+	if (this[areOptionsAvailableAndInitSymbol] > 0) {
+		this[areOptionsAvailableAndInitSymbol]--;
+		return true;
+	}
+
+	this[areOptionsAvailableAndInitSymbol]++;
+
+	const options = this.getOption("options");
+
+	if (
+		options === undefined ||
+		options === null ||
+		(isArray(options) && options.length === 0)
+	) {
+		setStatusOrRemoveBadges.call(this, "empty");
+
+		hide.call(this);
+
+		this.setOption(
+			"messages.control",
+			this.getOption("labels.no-options-available"),
+		);
+		this.setOption("messages.summary", "");
+		this.setOption("selection", []);
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, noOptionsAvailableMessage);
+		return false;
+	}
+
+	const selections = this.getOption("selection");
+	if (
+		selections === undefined ||
+		selections === null ||
+		selections.length === 0
+	) {
+		this.setOption(
+			"messages.control",
+			this.getOption("labels.select-an-option"),
+		);
+	} else {
+		this.setOption("messages.control", "");
+	}
+
+	this.setOption("messages.summary", setSummaryAndControlText.call(this));
+
+	let updated = false;
+	let valueCounter = 1;
+	for (const option of options) {
+		if (option?.visibility === undefined) {
+			option.visibility = "visible";
+			updated = true;
+		}
+
+		if (option?.value === undefined && option?.label === undefined) {
+			option.value = `${valueCounter++}`;
+			option.label = option.value;
+			updated = true;
+			continue;
+		}
+
+		if (option?.value === undefined) {
+			option.value = option.label;
+			updated = true;
+		}
+
+		if (option?.label === undefined) {
+			option.label = option.value;
+			updated = true;
+		}
+	}
+
+	if (updated) {
+		this.setOption("options", options);
+	}
+
+	setStatusOrRemoveBadges.call(this, "status");
+
+	removeAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, noOptionsAvailableMessage);
+	return true;
+}
+
+/**
+ * @private
+ * @throws {Error} no shadow-root is defined
+ */
+function checkOptionState() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	const elements = this.shadowRoot.querySelectorAll(
+		`[${ATTRIBUTE_ROLE}=option] input`,
+	);
+
+	let selection = this.getOption("selection");
+	if (!isArray(selection)) {
+		selection = [];
+	}
+
+	const checkedValues = selection.map((a) => {
+		return a.value;
+	});
+
+	for (const e of elements) {
+		if (checkedValues.indexOf(e.value) !== -1) {
+			if (e.checked !== true) e.checked = true;
+		} else {
+			if (e.checked !== false) e.checked = false;
+		}
+	}
+}
+
+/**
+ * @private
+ * @param {*} value
+ * @return {Object}
+ */
+function convertValueToSelection(value) {;
+	const selection = [];
+
+	if (isString(value)) {
+		value = value
+			.split(",")
+			.map((a) => {
+				return a.trim();
+			})
+			.filter((a) => {
+				return a !== "";
+			});
+	}
+
+	if (isString(value) || isInteger(value)) {
+		selection.push({
+			label: getSelectionLabel.call(this, value),
+			value: value,
+		});
+	} else if (isArray(value)) {
+		for (const v of value) {
+			selection.push({
+				label: getSelectionLabel.call(this, v),
+				value: v,
+			});
+		}
+
+		value = value.join(",");
+	} else {
+		throw new Error("unsupported type");
+	}
+
+	return {
+		selection: selection,
+		value: value,
+	};
+}
+
+/**
+ * @private
+ * @param {array} selection
+ * @return {string}
+ */
+function convertSelectionToValue(selection) {;
+
+	const value = [];
+
+	if (isArray(selection)) {
+		for (const obj of selection) {
+			const v = obj?.["value"];
+			if (v !== undefined) value.push(v);
+		}
+	}
+
+	if (value.length === 0) {
+		return "";
+	} else if (value.length === 1) {
+		return value.pop();
+	}
+
+	return value.join(",");
+}
+
+/**
+ * @private
+ * @param {array} selection
+ * @return {Promise}
+ * @throws {Error} no shadow-root is defined
+ */
+function setSelection(selection) {;
+
+	if (isString(selection)) {
+		const result = convertValueToSelection.call(this, selection);
+		selection = result?.selection;
+	} else if (selection === undefined) {
+		selection = [];
+	}
+
+	this.setOption("selection", validateArray(selection));
+	checkOptionState.call(this);
+
+	try {
+		this?.setFormValue(this.value);
+	} catch (e) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+	}
+
+	fireCustomEvent(this, "monster-selected", {
+		selection,
+	});
+
+	return new Processing(() => {
+		const CLASSNAME = "selected";
+
+		if (!this.shadowRoot) {
+			throw new Error("no shadow-root is defined");
+		}
+
+		const notSelected = this.shadowRoot.querySelectorAll(":not(:checked)");
+
+		if (notSelected) {
+			notSelected.forEach((node) => {
+				const parent = node.closest(`[${ATTRIBUTE_ROLE}=option]`);
+				if (parent) {
+					parent.classList.remove(CLASSNAME);
+				}
+			});
+		}
+
+		const selected = this.shadowRoot.querySelectorAll(":checked");
+		if (selected) {
+			selected.forEach((node) => {
+				const parent = node.closest(`[${ATTRIBUTE_ROLE}=option]`);
+				if (parent) {
+					parent.classList.add(CLASSNAME);
+				}
+			});
+		}
+	}).run();
+}
+
+/**
+ * @private
+ * @param {string} url
+ * @return {Promise}
+ * @throws {TypeError} the result cannot be parsed
+ * @throws {TypeError} unsupported response
+ */
+function fetchData(url) {;
+
+	if (!url) url = this.getOption("url");
+	if (!url) return Promise.resolve();
+
+	const fetchOptions = this.getOption("fetch", {});
+
+	setStatusOrRemoveBadges.call(this, "loading");
+	url = new Formatter({ filter: this.getOption("filter.defaultValue") }).format(
+		url,
+	);
+
+	const global = getGlobal();
+	return global
+		.fetch(url, fetchOptions)
+		.then((response) => {
+			const contentType = response.headers.get("content-type");
+			if (contentType && contentType.indexOf("application/json") !== -1) {
+				return response.text();
+			}
+
+			throw new TypeError(`unsupported response ${contentType}`);
+		})
+		.then((text) => {
+			try {
+				return Promise.resolve(JSON.parse(String(text)));
+			} catch (e) {
+				throw new TypeError("the result cannot be parsed");
+			}
+		});
+}
+
+/**
+ * @private
+ */
+function hide() {;
+
+	this[popperElementSymbol].style.display = "none";
+	setStatusOrRemoveBadges.call(this, "status");
+	removeAttributeToken(this[controlElementSymbol], "class", "open");
+}
+
+/**
+ * @private
+ */
+function show() {;
+
+	if (this.getOption("disabled", undefined) === true) {
+		return;
+	}
+
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		return;
+	}
+
+	focusFilter.call(this);
+	const optionsAvailable = areOptionsAvailableAndInit.call(this);
+	const remoteFilterFlag = this.getOption("filter.mode") === FILTER_MODE_REMOTE;
+
+	if (optionsAvailable === false && remoteFilterFlag !== true) {
+		const loadOnOpenFlag = this.getOption("features.loadOnOpen");
+		if (loadOnOpenFlag === true) {
+			this.setOption("features.loadOnOpen", false);
+			this.setOption("classes.statusOrRemoveBadge", "loading");
+			this.fetch().then(() => {
+				show.call(this);
+			});
+		}
+
+		return;
+	}
+
+	this[popperElementSymbol].style.visibility = "hidden";
+	this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+	setStatusOrRemoveBadges.call(this, "open");
+
+	addAttributeToken(this[controlElementSymbol], "class", "open");
+
+	new Processing(() => {
+		calcAndSetOptionsDimension.call(this);
+		focusFilter.call(this);
+		this[popperElementSymbol].style.removeProperty("visibility");
+		updatePopper.call(this);
+	})
+		.run()
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		});
+}
+
+/**
+ * @private
+ */
+function toggle() {
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		hide.call(this);
+	} else {
+		show.call(this);
+	}
+}
+
+/**
+ * @private
+ * @fires Monster.Components.Form.event:monster-selection-removed
+ * @fires Monster.Components.Form.event:monster-selection-cleared
+ */
+function initEventhandler() {
+	const self = this;
+
+	/**
+	 * @param {Event} event
+	 */
+	self[clearOptionEventHandler] = (event) => {
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"remove-badge",
+		);
+		if (element instanceof HTMLElement) {
+			const badge = findClosestByAttribute(element, ATTRIBUTE_ROLE, "badge");
+			if (badge instanceof HTMLElement) {
+				const value = badge.getAttribute(`${ATTRIBUTE_PREFIX}value`);
+
+				let selection = self.getOption("selection");
+				selection = selection.filter((b) => {
+					return value !== b.value;
+				});
+
+				setSelection
+					.call(self, selection)
+					.then(() => {
+						fireCustomEvent(self, "monster-selection-removed", {
+							value,
+						});
+					})
+					.catch((e) => {
+						addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message);
+					});
+			}
+		}
+	};
+
+	/**
+	 * @param {Event} event
+	 */
+	self[closeEventHandler] = (event) => {
+		const path = event.composedPath();
+
+		for (const [, element] of Object.entries(path)) {
+			if (element === self) {
+				return;
+			}
+		}
+		hide.call(self);
+	};
+
+	/**
+	 * @param {Event} event
+	 */
+	self[inputEventHandler] = (event) => {
+		const path = event.composedPath();
+		const element = path?.[0];
+
+		if (element instanceof HTMLElement) {
+			if (
+				element.hasAttribute(ATTRIBUTE_ROLE) &&
+				element.getAttribute(ATTRIBUTE_ROLE) === "option-control"
+			) {
+				fireCustomEvent(self, "monster-change", {
+					type: event.type,
+					value: element.value,
+					checked: element.checked,
+				});
+			} else if (
+				element.hasAttribute(ATTRIBUTE_ROLE) &&
+				element.getAttribute(ATTRIBUTE_ROLE) === "filter"
+			) {
+			}
+		}
+	};
+
+	/**
+	 * @param {Event} event
+	 */
+	self[changeEventHandler] = (event) => {
+		gatherState.call(self);
+		fireCustomEvent(self, "monster-changed", event?.detail);
+	};
+
+	self[keyEventHandler] = (event) => {
+		const path = event.composedPath();
+		const element = path.shift();
+
+		let role;
+
+		if (element instanceof HTMLElement) {
+			if (element.hasAttribute(ATTRIBUTE_ROLE)) {
+				role = element.getAttribute(ATTRIBUTE_ROLE);
+			} else if (element === this) {
+				show.call(this);
+				// focusFilter.call(self);
+			} else {
+				const e = element.closest(`[${ATTRIBUTE_ROLE}]`);
+				if (e instanceof HTMLElement && e.hasAttribute(ATTRIBUTE_ROLE)) {
+					role = e.getAttribute(ATTRIBUTE_ROLE);
+				}
+			}
+		} else {
+			return;
+		}
+
+		switch (role) {
+			case "filter":
+				handleFilterKeyboardEvents.call(self, event);
+				break;
+			case "option-label":
+			case "option-control":
+			case "option":
+				handleOptionKeyboardEvents.call(self, event);
+				break;
+			case "control":
+			case "toggle":
+				handleToggleKeyboardEvents.call(self, event);
+				break;
+		}
+	};
+
+	const types = self.getOption("toggleEventType", ["click"]);
+
+	for (const [, type] of Object.entries(types)) {
+		self[controlElementSymbol]
+			.querySelector(`[${ATTRIBUTE_ROLE}="container"]`)
+			.addEventListener(type, function (event) {
+				const element = findTargetElementFromEvent(
+					event,
+					ATTRIBUTE_ROLE,
+					"remove-badge",
+				);
+				if (element instanceof HTMLElement) {
+					return;
+				}
+
+				toggle.call(self);
+			});
+
+		self[controlElementSymbol]
+			.querySelector(`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`)
+			.addEventListener(type, function (event) {
+				if (self.getOption("disabled", undefined) === true) {
+					return;
+				}
+
+				const path = event.composedPath();
+				const element = path?.[0];
+				if (element instanceof HTMLElement) {
+					const control = element.closest(
+						`[${ATTRIBUTE_ROLE}="status-or-remove-badges"]`,
+					);
+					if (control instanceof HTMLElement) {
+						if (control.classList.contains("clear")) {
+							clearSelection.call(self);
+
+							fireCustomEvent(self, "monster-selection-cleared", {});
+						} else {
+							const element = findTargetElementFromEvent(
+								event,
+								ATTRIBUTE_ROLE,
+								"remove-badge",
+							);
+							if (element instanceof HTMLElement) {
+								return;
+							}
+
+							toggle.call(self);
+						}
+					}
+				}
+			});
+
+		// badge, selection
+		self.addEventListener(type, self[clearOptionEventHandler]);
+	}
+
+	self.addEventListener("monster-change", self[changeEventHandler]);
+	self.addEventListener("input", self[inputEventHandler]);
+	self.addEventListener("keydown", self[keyEventHandler]);
+
+	return self;
+}
+
+/**
+ * @private
+ * @return {Select}
+ */
+function setStatusOrRemoveBadges(suggestion) {;
+	setTimeout(() => {
+		const selection = this.getOption("selection");
+		const clearAllFlag =
+			isArray(selection) &&
+			selection.length > 0 &&
+			this.getOption("features.clearAll") === true;
+
+		if (clearAllFlag) {
+			//this[statusOrRemoveBadgesElementSymbol].classList.remove("status");
+			//this[statusOrRemoveBadgesElementSymbol].classList.add("clear");
+			this.setOption("classes.statusOrRemoveBadge", "clear");
+			return;
+		}
+
+		if (suggestion === "loading") {
+			this.setOption("classes.statusOrRemoveBadge", "loading");
+			return;
+		}
+
+		if (this[controlElementSymbol].classList.contains("open")) {
+			this.setOption("classes.statusOrRemoveBadge", "open");
+			return;
+		}
+
+		const options = this.getOption("options");
+		if (
+			options === undefined ||
+			options === null ||
+			(isArray(options) && options.length === 0)
+		) {
+			this.setOption("classes.statusOrRemoveBadge", "empty");
+			return;
+		}
+
+		if (suggestion) {
+			this.setOption("classes.statusOrRemoveBadge", suggestion);
+			return;
+		}
+	}, 2);
+}
+
+/**
+ * @private
+ * @return {Select}
+ * @throws {Error} no shadow-root is defined
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=control]`,
+	);
+	this[selectionElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=selection]`,
+	);
+	this[containerElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=container]`,
+	);
+	this[popperElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper]`,
+	);
+	this[inlineFilterElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=filter][name="inline-filter"]`,
+	);
+	this[popperFilterElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=filter][name="popper-filter"]`,
+	);
+	this[popperFilterContainerElementSymbol] =
+		this[popperFilterElementSymbol].parentElement;
+	this[optionsElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=options]`,
+	);
+	this[noOptionsAvailableElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="no-options"]`,
+	);
+	this[statusOrRemoveBadgesElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=status-or-remove-badges]`,
+	);
+}
+
+/**
+ * @private
+ */
+function updatePopper() {;
+
+	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+		return;
+	}
+
+	if (this.getOption("disabled", false) === true) {
+		return;
+	}
+
+	new Processing(() => {
+		calcAndSetOptionsDimension.call(this);
+		positionPopper.call(
+			this,
+			this[controlElementSymbol],
+			this[popperElementSymbol],
+			this.getOption("popper", {}),
+		);
+	}).run();
+
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="options">
+            <div data-monster-role="option" tabindex="-1"
+                 data-monster-attributes="
+                 data-monster-filtered path:options.filtered,
+                 data-monster-visibility path:options.visibility">
+                <label part="option" role="option">
+                    <input data-monster-role="option-control"
+                           data-monster-attributes="
+            type path:type,
+            role path:role,
+            value path:options | index:value, 
+            name path:name, 
+            part path:type | prefix:option- | suffix: form,
+            class path:options.class 
+            " tabindex="-1">
+                    <div data-monster-replace="path:options | index:label" part="option-label"></div>
+                </label>
+            </div>
+        </template>
+
+        <template id="selection">
+            <div data-monster-role="badge"
+                 part="badge"
+                 data-monster-attributes="
+                 data-monster-value path:selection | index:value, 
+                 class path:classes | index:badge, 
+        part path:type | suffix:-option | prefix: form-" tabindex="-1">
+                <div data-monster-replace="path:selection | index:label" part="badge-label"
+                     data-monster-role="badge-label"></div>
+                <div part="remove-badge" data-monster-select-this
+                     data-monster-attributes="class path:features.clear | ?::hidden "
+                     data-monster-role="remove-badge" tabindex="-1"></div>
+            </div>
+        </template>
+
+        <slot class="hidden"></slot>
+
+        <div data-monster-role="control" part="control" tabindex="0">
+            <div data-monster-role="container">
+                \${selected}
+            </div>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div class="option-filter-control" role="search">
+                    <input type="text" role="searchbox"
+                           part="popper-filter" name="popper-filter"
+                           data-monster-role="filter"
+                           autocomplete="off"
+                           tabindex="0">
+                </div>
+                <div part="content" class="flex" data-monster-replace="path:content">
+                    <div part="options" data-monster-role="options" data-monster-insert="options path:options"
+                         tabindex="-1"></div>
+                </div>
+                <div part="no-options" data-monster-role="no-options"
+                     data-monster-replace="path:messages.emptyOptions"></div>
+            </div>
+            <div part="status-or-remove-badges" data-monster-role="status-or-remove-badges"
+                 data-monster-attributes="class path:classes.statusOrRemoveBadge | suffix:\\ status-or-remove-badges"></div>
+        </div>
+    `;
+}
+
+registerCustomElement(Select);