@schukai/monster 4.38.1 → 4.38.2

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.38.2] - 2025-07-25
+
+### Bug Fixes
+
+- filter width
+
+
+
 ## [4.38.1] - 2025-07-23
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.38.1"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.2","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.38.2"}

package/source/components/data/kpi-tile.mjs

@@ -14,8 +14,8 @@ import { instanceSymbol } from "../../constants.mjs";
 import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import { CustomElement } from "../../dom/customelement.mjs";
 import {
-  assembleMethodSymbol,
-  registerCustomElement,
+	assembleMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { KpiTileStyleSheet } from "./stylesheet/kpi-tile.mjs";
 
@@ -34,62 +34,62 @@ export { KpiTile };
  * @summary A KPI Tile Control that displays key performance indicators in a tile format.
  */
 class KpiTile extends CustomElement {
-  static get [instanceSymbol]() {
-    return Symbol.for("@schukai/monster/components/data/kpi/tile@@instance");
-  }
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/data/kpi/tile@@instance");
+	}
 
-  /**
-   * @returns {symbol}
-   * @summary Returns the instance symbol for the KPI Tile control.
-   */
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-    return this;
-  }
+	/**
+	 * @returns {symbol}
+	 * @summary Returns the instance symbol for the KPI Tile control.
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		return this;
+	}
 
-  /**
-   * To set the option via the HTML Tag use the attribute `data-monster-options-`
-   * with the name of the option.
-   *
-   * @property {Object} templates
-   * @property {string} templates.main The main template for the KPI Tile control.
-   * @property {Object} values
-   * @property {string} values.main The main value displayed in the tile.
-   * @property {string} values.small The small value displayed in the tile.
-   * @property {string} values.top The top value displayed in the tile.
-   * @property {string} values.bottom The bottom value displayed in the tile.
-   * @returns {Object}
-   * @summary Returns the default options for the KPI Tile control.
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: {
-        main: getTemplate(),
-      },
-      values: {
-        main: null,
-        small: null,
-        top: null,
-        bottom: null,
-      },
-    });
-  }
+	/**
+	 * To set the option via the HTML Tag use the attribute `data-monster-options-`
+	 * with the name of the option.
+	 *
+	 * @property {Object} templates
+	 * @property {string} templates.main The main template for the KPI Tile control.
+	 * @property {Object} values
+	 * @property {string} values.main The main value displayed in the tile.
+	 * @property {string} values.small The small value displayed in the tile.
+	 * @property {string} values.top The top value displayed in the tile.
+	 * @property {string} values.bottom The bottom value displayed in the tile.
+	 * @returns {Object}
+	 * @summary Returns the default options for the KPI Tile control.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			values: {
+				main: null,
+				small: null,
+				top: null,
+				bottom: null,
+			},
+		});
+	}
 
-  /**
-   * @returns {string}
-   * @summary Returns the role of the control.
-   */
-  static getTag() {
-    return "monster-kpi-tile";
-  }
+	/**
+	 * @returns {string}
+	 * @summary Returns the role of the control.
+	 */
+	static getTag() {
+		return "monster-kpi-tile";
+	}
 
-  /**
-   * @returns {string}
-   * @summary Returns the role of the control.
-   */
-  static getCSSStyleSheet() {
-    return [KpiTileStyleSheet];
-  }
+	/**
+	 * @returns {string}
+	 * @summary Returns the role of the control.
+	 */
+	static getCSSStyleSheet() {
+		return [KpiTileStyleSheet];
+	}
 }
 
 /**
@@ -98,7 +98,7 @@ class KpiTile extends CustomElement {
  * @summary Returns the template for the KPI Tile control.
  */
 function getTemplate() {
-  return `
+	return `
 		<div data-monster-role="control" part="control">
 			<div class="top"                data-monster-role="top"    part="top"    data-monster-replace="path:values.top">—</div>
  			<div                            data-monster-role="main"   part="main"   data-monster-replace="path:values.main">—</div>

package/source/components/datatable/style/filter-button.pcss

@@ -5,6 +5,8 @@
 
 
 [data-monster-role="control"] {
+    width: max-content;
+
     & a {
         display: flex;
         align-items: center;

package/source/components/datatable/stylesheet/filter-button.mjs

@@ -25,7 +25,7 @@ try {
 	FilterButtonStyleSheet.insertRule(
 		`
 @layer filterbutton { 
-:host{display:flex}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}:is([data-monster-role=control] a):after{background-color:var(--monster-color-primary-1);content:\"\";display:inline-block;height:16px;margin:0 3px 0 5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");-webkit-mask-size:cover;mask-size:cover;width:16px} 
+:host{display:flex}[data-monster-role=control]{width:-moz-max-content;width:max-content}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}:is([data-monster-role=control] a):after{background-color:var(--monster-color-primary-1);content:\"\";display:inline-block;height:16px;margin:0 3px 0 5px;-webkit-mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");mask-image:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square' viewBox='0 0 16 16'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");-webkit-mask-size:cover;mask-size:cover;width:16px} 
 }`,
 		0,
 	);

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,355 +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
-   * @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;
-      }
-    }
-  }
+	/**
+	 * 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, 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;
+	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;
 }
 
 /**
@@ -449,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;
 }
 
 /**
@@ -533,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,
+	};
 }
 
 /**
@@ -561,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;
 }
 
 /**
@@ -577,8 +577,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-  // language=HTML
-  return `
+	// language=HTML
+	return `
         <slot></slot>
 
         <template id="entries">