@schukai/monster 4.38.0 → 4.38.1

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

@@ -17,15 +17,15 @@ 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,
-	registerCustomElement,
+  assembleMethodSymbol,
+  CustomElement,
+  getSlottedElements,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { findTargetElementFromEvent, fireEvent } from "../../dom/events.mjs";
 import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
@@ -36,8 +36,8 @@ 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";
@@ -83,347 +83,355 @@ const firstRunDoneSymbol = Symbol("firstRunDone");
  * @fires entries-imported
  */
 class TreeMenu extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/tree-menu@@instance");
-	}
-
-	/**
-	 */
-	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 the root references
-	 * @property {String} mapping.idTemplate template with the id placeholders in the form ${name}, where name is the key
-	 * @property {String} mapping.parentKey the parent key
-	 * @property {String} mapping.selection the 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: [],
-		});
-	}
-
-	/**
-	 * @return {void}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		queueMicrotask(() => {
-			initControlReferences.call(this);
-			initEventHandler.call(this);
-			initObserver.call(this);
-			copyIconMap.call(this);
-		});
-	}
-
-	/**
-	 * 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 + "]",
-		);
-
-		if (!currentNode) {
-			return;
-		}
-
-		currentNode.click();
-
-		let intend = Number.parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));
-
-		if (intend > 0) {
-			const refSet = new Set();
-			let ref = currentNode.previousElementSibling;
-			while (ref?.hasAttribute(ATTRIBUTE_INTEND)) {
-				const i = Number.parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
-
-				if (Number.isNaN(i)) {
-					break;
-				}
-
-				if (i < intend) {
-					if (ref.getAttribute("data-monster-state") !== "open") {
-						ref.click();
-					}
-
-					if (i === 0) {
-						break;
-					}
-					intend = i;
-				}
-				ref = ref.previousElementSibling;
-			}
-		}
-	}
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/tree-menu@@instance");
+  }
+
+  /**
+   */
+  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 the root references
+   * @property {String} mapping.idTemplate template with the id placeholders in the form ${name}, where name is the key
+   * @property {String} mapping.parentKey the parent key
+   * @property {String} mapping.selection the selection
+   * @property {Function} mapping.filter a filter function to filter the entries
+   * @property {Object} classes
+   * @property {String} classes.control the class for the control element
+   * @property {String} classes.label the class for the label element
+   * @property {Object} actions
+   * @property {Function} actions.open the action to open an entry (arguments, etnry, index, event)
+   * @property {Function} actions.close the action to close an entry (arguments, etnry, index, event)
+   * @property {Function} actions.select the action to select an entry (arguments, etnry, index, event)
+   */
+  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) => {
+          console.warn("select action is not defined", entry);
+        },
+      },
+
+      data: [],
+      entries: [],
+    });
+  }
+
+  /**
+   * @return {void}
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+
+    queueMicrotask(() => {
+      initControlReferences.call(this);
+      initEventHandler.call(this);
+      initObserver.call(this);
+      copyIconMap.call(this);
+    });
+  }
+
+  /**
+   * 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 + "]",
+    );
+
+    if (!currentNode) {
+      return;
+    }
+
+    currentNode.click();
+
+    let intend = Number.parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));
+
+    if (intend > 0) {
+      const refSet = new Set();
+      let ref = currentNode.previousElementSibling;
+      while (ref?.hasAttribute(ATTRIBUTE_INTEND)) {
+        const i = Number.parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
+
+        if (Number.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;
-					queueMicrotask(() => {
-						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?.hasAttribute(ATTRIBUTE_INTEND)) {
-					const i = Number.parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
-
-					if (Number.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?.hasAttribute(ATTRIBUTE_INTEND)) {
-				const refIntend = ref.getAttribute(ATTRIBUTE_INTEND);
-
-				if (!cmp(Number.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;
+          queueMicrotask(() => {
+            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?.hasAttribute(ATTRIBUTE_INTEND)) {
+          const i = Number.parseInt(ref.getAttribute(ATTRIBUTE_INTEND));
+
+          if (Number.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, event);
+      }
+      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?.hasAttribute(ATTRIBUTE_INTEND)) {
+        const refIntend = ref.getAttribute(ATTRIBUTE_INTEND);
+
+        if (!cmp(Number.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;
 }
 
 /**
@@ -441,81 +449,81 @@ 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 filteredData;
-	if (this[firstRunDoneSymbol] !== true) {
-		filteredData = data?.filter(
-			(entry) =>
-				!entry[parentKey] ||
-				entry[parentKey] === null ||
-				entry[parentKey] === undefined ||
-				entry[parentKey] === 0,
-		);
-		setTimeout(() => {
-			this[firstRunDoneSymbol] = true;
-			importEntries.call(this);
-		}, 0);
-	} else {
-		filteredData = data;
-	}
-
-	let nodes;
-	try {
-		nodes = buildTree(filteredData, selector, id, parentKey, {
-			filter,
-			rootReferences,
-		});
-	} catch (error) {
-		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-		return this;
-	}
-
-	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(),
-			});
-		}
-	}
-
-	queueMicrotask(() => {
-		this.setOption("entries", options);
-		fireEvent(this, "entries-imported");
-	});
-
-	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 filteredData;
+  if (this[firstRunDoneSymbol] !== true) {
+    filteredData = data?.filter(
+      (entry) =>
+        !entry[parentKey] ||
+        entry[parentKey] === null ||
+        entry[parentKey] === undefined ||
+        entry[parentKey] === 0,
+    );
+    setTimeout(() => {
+      this[firstRunDoneSymbol] = true;
+      importEntries.call(this);
+    }, 0);
+  } else {
+    filteredData = data;
+  }
+
+  let nodes;
+  try {
+    nodes = buildTree(filteredData, selector, id, parentKey, {
+      filter,
+      rootReferences,
+    });
+  } catch (error) {
+    addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+    return this;
+  }
+
+  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(),
+      });
+    }
+  }
+
+  queueMicrotask(() => {
+    this.setOption("entries", options);
+    fireEvent(this, "entries-imported");
+  });
+
+  return this;
 }
 
 /**
@@ -525,27 +533,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,
+  };
 }
 
 /**
@@ -553,15 +561,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;
 }
 
 /**
@@ -569,8 +577,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
         <slot></slot>
 
         <template id="entries">