@schukai/monster 3.72.0 → 3.73.0

package/source/components/tree-menu/tree-menu.mjs

@@ -12,37 +12,38 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {buildTree} from "../../data/buildtree.mjs";
-import {Datasource} from "../datatable/datasource.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
+import { buildTree } from "../../data/buildtree.mjs";
+import { Datasource } from "../datatable/datasource.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
 import {
-    ATTRIBUTE_ERRORMESSAGE,
-    ATTRIBUTE_ROLE,
-    ATTRIBUTE_UPDATER_INSERT_REFERENCE,
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
 } from "../../dom/constants.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement, getSlottedElements,
-    initMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	initMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
-import {Formatter} from "../../text/formatter.mjs";
-import {isFunction, isString} from "../../types/is.mjs";
-import {Node} from "../../types/node.mjs";
-import {NodeRecursiveIterator} from "../../types/noderecursiveiterator.mjs";
-import {Observer} from "../../types/observer.mjs";
-import {validateInstance} from "../../types/validate.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
+import { Formatter } from "../../text/formatter.mjs";
+import { isFunction, isString } from "../../types/is.mjs";
+import { Node } from "../../types/node.mjs";
+import { NodeRecursiveIterator } from "../../types/noderecursiveiterator.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { validateInstance } from "../../types/validate.mjs";
 import {
-    datasourceLinkedElementSymbol,
-    handleDataSourceChanges,
+	datasourceLinkedElementSymbol,
+	handleDataSourceChanges,
 } from "../datatable/util.mjs";
-import {ATTRIBUTE_INTEND} from "./../constants.mjs";
-import {CommonStyleSheet} from "../stylesheet/common.mjs";
-import {TreeMenuStyleSheet} from "./stylesheet/tree-menu.mjs";
+import { ATTRIBUTE_INTEND } from "./../constants.mjs";
+import { CommonStyleSheet } from "../stylesheet/common.mjs";
+import { TreeMenuStyleSheet } from "./stylesheet/tree-menu.mjs";
 
-export {TreeMenu};
+export { TreeMenu };
 
 /**
  * @private
@@ -99,353 +100,346 @@ const openEntryEventHandlerSymbol = Symbol("openEntryEventHandler");
  * @fires Monster.Components.TreeMenu.event:monster-fetched
  */
 class TreeMenu extends CustomElement {
-
-    constructor() {
-        super();
-        this[preventChangeSymbol] = false;
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * The defaults can be set either directly in the object or via an attribute in the HTML tag.
-     * The value of the attribute `data-monster-options` in the HTML tag must be a JSON string.
-     *
-     * ```
-     * <monster-treemenu data-monster-options="{}"></monster-treemenu>
-     * ```
-     *
-     * Since 1.18.0 the JSON can be specified as a DataURI.
-     *
-     * ```
-     * new Monster.Types.DataUrl(btoa(JSON.stringify({
-     *        shadowMode: 'open',
-     *    })),'application/json',true).toString()
-     * ```
-     * @property {Object} templates Template definitions
-     * @property {string} templates.main Main template
-     * @property {Datasource} datasource data source
-     * @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.keyTemplate="" template with the key placeholders in the form ${name}, where name is the key
-     * @property {String} mapping.rootReferences=['0', undefined, null]
-     * @property {String} mapping.idTemplate=id
-     * @property {String} mapping.parentKey=parent
-     * @property {String} mapping.selection
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-
-            classes: {
-                control: "monster-theme-primary-1",
-                label: "monster-theme-primary-1"
-            },
-
-            mapping: {
-                rootReferences: ["0", undefined, null],
-                idTemplate: "id",
-                parentKey: "parent",
-                selector: "*",
-                labelTemplate: "",
-                valueTemplate: "",
-                iconTemplate: "",
-                filter: undefined,
-            },
-
-            templates: {
-                main: getTemplate(),
-            },
-
-            datasource: {
-                selector: null,
-            },
-
-            actions: {
-                "open": null,
-                "close": null,
-                "select": (entry) => {
-                    throw new Error("no action defined for select");
-                },
-
-            },
-
-            data: [],
-            entries: [],
-        });
-    }
-
-    /**
-     *
-     */
-    [initMethodSymbol]() {
-        super[initMethodSymbol]();
-    }
-
-    /**
-     * @return {void}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        initObserver.call(this);
-        setTimeout(() => {
-            copyIconMap.call(this);
-        }, 0)
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [CommonStyleSheet, TreeMenuStyleSheet];
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-tree-menu";
-    }
-
-    /**
-     * @param {string} value
-     * @param value
-     */
-    selectEntry(value) {
-        this.shadowRoot.querySelectorAll("[data-monster-role=entry]").forEach((entry) => {
-            entry.classList.remove("selected");
-        })
-
-        value = String(value);
-
-        const entries = this.getOption("entries");
-        const index = entries.findIndex((entry) => entry.value === value);
-
-        if (index === -1) {
-            return;
-        }
-
-        const currentNode = this.shadowRoot.querySelector("[data-monster-insert-reference=entries-" + index + "]")
-
-        console.log(currentNode)
-
-        currentNode.click();
-
-        let intend = parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));
-
-        if (intend > 0) {
-            let ref = currentNode.previousElementSibling;
-            while (ref && ref.hasAttribute(ATTRIBUTE_INTEND)) {
-                const i = parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
-
-                if (isNaN(i)) {
-                    break;
-                }
-
-                if (i < intend) {
-
-                    if (ref.getAttribute("data-monster-state") !== "open") {
-                        ref.click()
-                    }
-
-                    if (i === 0) {
-                        break;
-                    }
-                    intend = i;
-                }
-                ref = ref.previousElementSibling;
-            }
-        }
-
-    }
-
-
+	constructor() {
+		super();
+		this[preventChangeSymbol] = false;
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * The defaults can be set either directly in the object or via an attribute in the HTML tag.
+	 * The value of the attribute `data-monster-options` in the HTML tag must be a JSON string.
+	 *
+	 * ```
+	 * <monster-treemenu data-monster-options="{}"></monster-treemenu>
+	 * ```
+	 *
+	 * Since 1.18.0 the JSON can be specified as a DataURI.
+	 *
+	 * ```
+	 * new Monster.Types.DataUrl(btoa(JSON.stringify({
+	 *        shadowMode: 'open',
+	 *    })),'application/json',true).toString()
+	 * ```
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Datasource} datasource data source
+	 * @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.keyTemplate="" template with the key placeholders in the form ${name}, where name is the key
+	 * @property {String} mapping.rootReferences=['0', undefined, null]
+	 * @property {String} mapping.idTemplate=id
+	 * @property {String} mapping.parentKey=parent
+	 * @property {String} mapping.selection
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			classes: {
+				control: "monster-theme-primary-1",
+				label: "monster-theme-primary-1",
+			},
+
+			mapping: {
+				rootReferences: ["0", undefined, null],
+				idTemplate: "id",
+				parentKey: "parent",
+				selector: "*",
+				labelTemplate: "",
+				valueTemplate: "",
+				iconTemplate: "",
+				filter: undefined,
+			},
+
+			templates: {
+				main: getTemplate(),
+			},
+
+			datasource: {
+				selector: null,
+			},
+
+			actions: {
+				open: null,
+				close: null,
+				select: (entry) => {
+					throw new Error("no action defined for select");
+				},
+			},
+
+			data: [],
+			entries: [],
+		});
+	}
+
+	/**
+	 *
+	 */
+	[initMethodSymbol]() {
+		super[initMethodSymbol]();
+	}
+
+	/**
+	 * @return {void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		initObserver.call(this);
+		setTimeout(() => {
+			copyIconMap.call(this);
+		}, 0);
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [CommonStyleSheet, TreeMenuStyleSheet];
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-tree-menu";
+	}
+
+	/**
+	 * @param {string} value
+	 * @param value
+	 */
+	selectEntry(value) {
+		this.shadowRoot
+			.querySelectorAll("[data-monster-role=entry]")
+			.forEach((entry) => {
+				entry.classList.remove("selected");
+			});
+
+		value = String(value);
+
+		const entries = this.getOption("entries");
+		const index = entries.findIndex((entry) => entry.value === value);
+
+		if (index === -1) {
+			return;
+		}
+
+		const currentNode = this.shadowRoot.querySelector(
+			"[data-monster-insert-reference=entries-" + index + "]",
+		);
+
+		console.log(currentNode);
+
+		currentNode.click();
+
+		let intend = parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));
+
+		if (intend > 0) {
+			let ref = currentNode.previousElementSibling;
+			while (ref && ref.hasAttribute(ATTRIBUTE_INTEND)) {
+				const i = parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
+
+				if (isNaN(i)) {
+					break;
+				}
+
+				if (i < intend) {
+					if (ref.getAttribute("data-monster-state") !== "open") {
+						ref.click();
+					}
+
+					if (i === 0) {
+						break;
+					}
+					intend = i;
+				}
+				ref = ref.previousElementSibling;
+			}
+		}
+	}
 }
 
 /**
  * @private
  */
 function copyIconMap() {
-    const nodes = getSlottedElements.call(this, "svg", null);
-    if (nodes.size > 0) {
-        for (const node of nodes) {
-            this.shadowRoot.appendChild(node);
-        }
-    }
+	const nodes = getSlottedElements.call(this, "svg", null);
+	if (nodes.size > 0) {
+		for (const node of nodes) {
+			this.shadowRoot.appendChild(node);
+		}
+	}
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    const selector = this.getOption("datasource.selector");
-
-    if (isString(selector)) {
-        const element = findElementWithSelectorUpwards(this, selector);
-        if (element === null) {
-            throw new Error("the selector must match exactly one element");
-        }
-
-        if (!(element instanceof HTMLElement)) {
-            throw new TypeError("the element must be an HTMLElement");
-        }
-
-        customElements.whenDefined(element.tagName.toLocaleLowerCase()).then(() => {
-            if (!(element instanceof Datasource)) {
-                throw new TypeError("the element must be a datasource");
-            }
-
-            this[datasourceLinkedElementSymbol] = element;
-
-            handleDataSourceChanges.call(this);
-            element.datasource.attachObserver(
-                new Observer(handleDataSourceChanges.bind(this)),
-            );
-
-            this.attachObserver(
-                new Observer(() => {
-                    if (this[preventChangeSymbol] === true) {
-                        return
-                    }
-                    this[preventChangeSymbol] = true
-                    importEntries.call(this);
-                }),
-            );
-        });
-    }
-
-    this[openEntryEventHandlerSymbol] = (event) => {
-
-        const container = findTargetElementFromEvent(
-            event,
-            ATTRIBUTE_ROLE,
-            "entry",
-        );
-
-        if (!(container instanceof HTMLElement)) {
-            return;
-        }
-
-        const index = container
-            .getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
-            .split("-")
-            .pop();
-
-        const currentEntry = this.getOption("entries." + index);
-
-        if (currentEntry["has-children"] === false) {
-            const doAction = this.getOption("actions.select");
-
-            this.shadowRoot.querySelectorAll("[data-monster-role=entry].selected").forEach((entry) => {
-                entry.classList.remove("selected");
-            })
-
-            let intend = currentEntry.intend;
-            if (intend > 0) {
-                let ref = container.previousElementSibling;
-                while (ref && ref.hasAttribute(ATTRIBUTE_INTEND)) {
-                    const i = parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
-
-                    if (isNaN(i)) {
-                        break;
-                    }
-
-                    if (i < intend) {
-                        ref.classList.add("selected");
-                        if (i === 0) {
-                            break;
-                        }
-                        intend = i;
-                    }
-                    ref = ref.previousElementSibling;
-                }
-            }
-
-            container.classList.add("selected");
-
-            if (isFunction(doAction)) {
-                doAction.call(this, currentEntry, index);
-            }
-            return;
-        }
-
-        const currentState = this.getOption("entries." + index + ".state");
-
-        const newState = currentState === "close" ? "open" : "close";
-
-        const doAction = this.getOption("actions." + newState);
-        if (isFunction(doAction)) {
-            doAction.call(this, this.getOption("entries." + index), index);
-        }
-
-        this.setOption("entries." + index + ".state", newState);
-        const newVisibility = (newState === "open") ? "visible" : "hidden";
-
-        if (container.hasAttribute(ATTRIBUTE_INTEND)) {
-            const intend = container.getAttribute(ATTRIBUTE_INTEND);
-            let ref = container.nextElementSibling;
-            const childIntend = parseInt(intend) + 1;
-
-            const cmp = (a, b) => {
-                if (newState === "open") {
-                    return a === b;
-                }
-
-                return a >= b;
-            };
-
-            while (
-                ref &&
-                ref.hasAttribute(ATTRIBUTE_INTEND)
-                ) {
-
-                const refIntend = ref.getAttribute(ATTRIBUTE_INTEND);
-
-                if (!cmp(parseInt(refIntend), childIntend)) {
-                    if (refIntend === intend) {
-                        break;
-                    }
-                    ref = ref.nextElementSibling;
-                    continue;
-                }
-
-                const refIndex = ref
-                    .getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
-                    .split("-")
-                    .pop();
-
-                this.setOption("entries." + refIndex + ".visibility", newVisibility);
-
-                if (newState === "close") {
-                    this.setOption("entries." + refIndex + ".state", "close");
-                }
-
-                ref = ref.nextElementSibling;
-            }
-        }
-    };
-
-    const types = this.getOption("toggleEventType", ["click"]);
-    for (const [, type] of Object.entries(types)) {
-        this.shadowRoot.addEventListener(type, this[openEntryEventHandlerSymbol]);
-    }
-
-    return this;
+	const selector = this.getOption("datasource.selector");
+
+	if (isString(selector)) {
+		const element = findElementWithSelectorUpwards(this, selector);
+		if (element === null) {
+			throw new Error("the selector must match exactly one element");
+		}
+
+		if (!(element instanceof HTMLElement)) {
+			throw new TypeError("the element must be an HTMLElement");
+		}
+
+		customElements.whenDefined(element.tagName.toLocaleLowerCase()).then(() => {
+			if (!(element instanceof Datasource)) {
+				throw new TypeError("the element must be a datasource");
+			}
+
+			this[datasourceLinkedElementSymbol] = element;
+
+			handleDataSourceChanges.call(this);
+			element.datasource.attachObserver(
+				new Observer(handleDataSourceChanges.bind(this)),
+			);
+
+			this.attachObserver(
+				new Observer(() => {
+					if (this[preventChangeSymbol] === true) {
+						return;
+					}
+					this[preventChangeSymbol] = true;
+					importEntries.call(this);
+				}),
+			);
+		});
+	}
+
+	this[openEntryEventHandlerSymbol] = (event) => {
+		const container = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"entry",
+		);
+
+		if (!(container instanceof HTMLElement)) {
+			return;
+		}
+
+		const index = container
+			.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
+			.split("-")
+			.pop();
+
+		const currentEntry = this.getOption("entries." + index);
+
+		if (currentEntry["has-children"] === false) {
+			const doAction = this.getOption("actions.select");
+
+			this.shadowRoot
+				.querySelectorAll("[data-monster-role=entry].selected")
+				.forEach((entry) => {
+					entry.classList.remove("selected");
+				});
+
+			let intend = currentEntry.intend;
+			if (intend > 0) {
+				let ref = container.previousElementSibling;
+				while (ref && ref.hasAttribute(ATTRIBUTE_INTEND)) {
+					const i = parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
+
+					if (isNaN(i)) {
+						break;
+					}
+
+					if (i < intend) {
+						ref.classList.add("selected");
+						if (i === 0) {
+							break;
+						}
+						intend = i;
+					}
+					ref = ref.previousElementSibling;
+				}
+			}
+
+			container.classList.add("selected");
+
+			if (isFunction(doAction)) {
+				doAction.call(this, currentEntry, index);
+			}
+			return;
+		}
+
+		const currentState = this.getOption("entries." + index + ".state");
+
+		const newState = currentState === "close" ? "open" : "close";
+
+		const doAction = this.getOption("actions." + newState);
+		if (isFunction(doAction)) {
+			doAction.call(this, this.getOption("entries." + index), index);
+		}
+
+		this.setOption("entries." + index + ".state", newState);
+		const newVisibility = newState === "open" ? "visible" : "hidden";
+
+		if (container.hasAttribute(ATTRIBUTE_INTEND)) {
+			const intend = container.getAttribute(ATTRIBUTE_INTEND);
+			let ref = container.nextElementSibling;
+			const childIntend = parseInt(intend) + 1;
+
+			const cmp = (a, b) => {
+				if (newState === "open") {
+					return a === b;
+				}
+
+				return a >= b;
+			};
+
+			while (ref && ref.hasAttribute(ATTRIBUTE_INTEND)) {
+				const refIntend = ref.getAttribute(ATTRIBUTE_INTEND);
+
+				if (!cmp(parseInt(refIntend), childIntend)) {
+					if (refIntend === intend) {
+						break;
+					}
+					ref = ref.nextElementSibling;
+					continue;
+				}
+
+				const refIndex = ref
+					.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
+					.split("-")
+					.pop();
+
+				this.setOption("entries." + refIndex + ".visibility", newVisibility);
+
+				if (newState === "close") {
+					this.setOption("entries." + refIndex + ".state", "close");
+				}
+
+				ref = ref.nextElementSibling;
+			}
+		}
+	};
+
+	const types = this.getOption("toggleEventType", ["click"]);
+	for (const [, type] of Object.entries(types)) {
+		this.shadowRoot.addEventListener(type, this[openEntryEventHandlerSymbol]);
+	}
+
+	return this;
 }
 
 /**
  * @private
  * @this {TreeMenu}
  */
-function initObserver() {
-}
+function initObserver() {}
 
 /**
  * Import Menu Entries from dataset
@@ -456,61 +450,60 @@ function initObserver() {
  * @private
  */
 function importEntries() {
-
-    const data = this.getOption("data")
-    this[internalNodesSymbol] = new Map();
-
-    const mappingOptions = this.getOption("mapping", {});
-
-    const filter = mappingOptions?.["filter"];
-    const rootReferences = mappingOptions?.["rootReferences"];
-
-    const id = this.getOption("mapping.idTemplate");
-    const parentKey = this.getOption("mapping.parentKey");
-
-    const selector = mappingOptions?.["selector"];
-
-    let nodes;
-    try {
-        nodes = buildTree(data, selector, id, parentKey, {
-            filter,
-            rootReferences,
-        });
-    } catch (error) {
-        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-    }
-
-    const options = [];
-    for (const node of nodes) {
-        const iterator = new NodeRecursiveIterator(node);
-        for (const n of iterator) {
-            const formattedValues = formatKeyLabel.call(this, n);
-
-            const label = formattedValues?.label;
-            const value = formattedValues?.value;
-            const icon = formattedValues?.icon;
-            const intend = n.level;
-
-            const visibility = (intend > 0) ? "hidden" : "visible";
-            const state = "close";
-
-            this[internalNodesSymbol].set(value, n);
-
-            options.push({
-                value,
-                label,
-                icon,
-                intend,
-                state,
-                visibility,
-                ["has-children"]: n.hasChildNodes(),
-            });
-        }
-    }
-
-    this.setOption("entries", options);
-
-    return this;
+	const data = this.getOption("data");
+	this[internalNodesSymbol] = new Map();
+
+	const mappingOptions = this.getOption("mapping", {});
+
+	const filter = mappingOptions?.["filter"];
+	const rootReferences = mappingOptions?.["rootReferences"];
+
+	const id = this.getOption("mapping.idTemplate");
+	const parentKey = this.getOption("mapping.parentKey");
+
+	const selector = mappingOptions?.["selector"];
+
+	let nodes;
+	try {
+		nodes = buildTree(data, selector, id, parentKey, {
+			filter,
+			rootReferences,
+		});
+	} catch (error) {
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+	}
+
+	const options = [];
+	for (const node of nodes) {
+		const iterator = new NodeRecursiveIterator(node);
+		for (const n of iterator) {
+			const formattedValues = formatKeyLabel.call(this, n);
+
+			const label = formattedValues?.label;
+			const value = formattedValues?.value;
+			const icon = formattedValues?.icon;
+			const intend = n.level;
+
+			const visibility = intend > 0 ? "hidden" : "visible";
+			const state = "close";
+
+			this[internalNodesSymbol].set(value, n);
+
+			options.push({
+				value,
+				label,
+				icon,
+				intend,
+				state,
+				visibility,
+				["has-children"]: n.hasChildNodes(),
+			});
+		}
+	}
+
+	this.setOption("entries", options);
+
+	return this;
 }
 
 /**
@@ -520,27 +513,27 @@ function importEntries() {
  * @private
  */
 function formatKeyLabel(node) {
-    validateInstance(node, Node);
+	validateInstance(node, Node);
 
-    const label = new Formatter(node.value).format(
-        this.getOption("mapping.labelTemplate"),
-    );
+	const label = new Formatter(node.value).format(
+		this.getOption("mapping.labelTemplate"),
+	);
 
-    const value = new Formatter(node.value).format(
-        this.getOption("mapping.valueTemplate"),
-    );
+	const value = new Formatter(node.value).format(
+		this.getOption("mapping.valueTemplate"),
+	);
 
-    const iconID = new Formatter(node.value).format(
-        this.getOption("mapping.iconTemplate"),
-    );
+	const iconID = new Formatter(node.value).format(
+		this.getOption("mapping.iconTemplate"),
+	);
 
-    const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><use xlink:href="#${iconID}"></use></svg>`;
+	const icon = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><use xlink:href="#${iconID}"></use></svg>`;
 
-    return {
-        value,
-        label,
-        icon,
-    };
+	return {
+		value,
+		label,
+		icon,
+	};
 }
 
 /**
@@ -548,15 +541,15 @@ function formatKeyLabel(node) {
  * @return {TreeMenu}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
 
-    this[controlElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=control]",
-    );
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
 
-    return this;
+	return this;
 }
 
 /**
@@ -564,8 +557,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <slot></slot>
 
         <template id="entries">