@schukai/monster 3.71.2 → 3.72.0

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

@@ -12,87 +12,61 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { buildTree } from "../../data/buildtree.mjs";
-import { Datasource } from "../../data/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_DISABLED,
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
-	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
+    ATTRIBUTE_UPDATER_INSERT_REFERENCE,
 } from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	initMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement, getSlottedElements,
+    initMethodSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { findTargetElementFromEvent } from "../../dom/events.mjs";
-import { Formatter } from "../../text/formatter.mjs";
-import { isObject } from "../../types/is.mjs";
-import { Node } from "../../types/node.mjs";
-import { NodeRecursiveIterator } from "../../types/noderecursiveiterator.mjs";
-import { Observer } from "../../types/observer.mjs";
-import { ProxyObserver } from "../../types/proxyobserver.mjs";
-import { validateInstance } from "../../types/validate.mjs";
-import { ATTRIBUTE_INTEND } from "./../constants.mjs";
-import { CommonStyleSheet } from "../stylesheet/common.mjs";
-import { TreeMenuStyleSheet } from "./stylesheet/tree-menu.mjs";
-
-export { TreeMenu };
-
-/**
- * @private
- * @type {symbol}
- */
-const internalNodesSymbol = Symbol("internalNodes");
-
-/**
- * @private
- * @type {symbol}
- */
-const controlElementSymbol = Symbol("controlElement");
-
-/**
- * @private
- * @type {symbol}
- */
-const openEntryEventHandlerSymbol = Symbol("openEntryEventHandler");
+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,
+} from "../datatable/util.mjs";
+import {ATTRIBUTE_INTEND} from "./../constants.mjs";
+import {CommonStyleSheet} from "../stylesheet/common.mjs";
+import {TreeMenuStyleSheet} from "./stylesheet/tree-menu.mjs";
 
-/**
- * @private
- * @type {symbol}
- */
-const dragstartEventHandlerSymbol = Symbol("dragstartEventHandler");
-/**
- * @private
- * @type {symbol}
- */
-const dragenterEventHandlerSymbol = Symbol("dragenterEventHandler");
+export {TreeMenu};
 
 /**
  * @private
  * @type {symbol}
  */
-const dragleaveEventHandlerSymbol = Symbol("dragleaveEventHandler");
+const internalNodesSymbol = Symbol("internalNodes");
 
 /**
  * @private
  * @type {symbol}
  */
-const dragEventHandlerSymbol = Symbol("dragEventHandler");
+const preventChangeSymbol = Symbol("preventChangeCounter");
 
 /**
  * @private
  * @type {symbol}
  */
-const dragoverEventHandlerSymbol = Symbol("dragoverEventHandler");
+const controlElementSymbol = Symbol("controlElement");
 
 /**
  * @private
  * @type {symbol}
  */
-const dropEventHandlerSymbol = Symbol("dropEventHandlerSymbol");
+const openEntryEventHandlerSymbol = Symbol("openEntryEventHandler");
 
 /**
  * TreeMenu
@@ -121,540 +95,502 @@ const dropEventHandlerSymbol = Symbol("dropEventHandlerSymbol");
  * @enduml
  * @since 1.0.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.TreeMenu
  * @summary A TreeMenu control
  * @fires Monster.Components.TreeMenu.event:monster-fetched
  */
 class TreeMenu extends CustomElement {
-	/**
-	 * 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} toggleEventType=click,touch List of event types to be observed for opening the dropdown
-	 * @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.parentTemplate=parent
-	 * @property {String} mapping.selection
-	 */
-	get defaults() {
-		return Object.assign(
-			{},
-			super.defaults,
-			{
-				toggleEventType: ["click", "touch"],
-				mapping: {
-					rootReferences: ["0", undefined, null],
-					idTemplate: "id",
-					parentTemplate: "parent",
-					selector: "*",
-					labelTemplate: "",
-					valueTemplate: "",
-					filter: undefined,
-				},
-				templates: {
-					main: getTemplate(),
-				},
-				datasource: undefined,
-				entries: [],
-			},
-			initOptionsFromArguments.call(this),
-		);
-	}
-
-	/**
-	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-	 *
-	 * @return {string[]}
-	 * @since 1.15.0
-	 */
-	static get observedAttributes() {
-		const list = super.observedAttributes;
-		//list.push(ATTRIBUTE_FORM_URL);
-		return list;
-	}
-
-	/**
-	 *
-	 */
-	[initMethodSymbol]() {
-		super[initMethodSymbol]();
-	}
-
-	/**
-	 *
-	 * @return {Monster.Components.TreeMenu.Form}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		importEntriesFromDatasource.call(this);
-		initObserver.call(this);
-
-		return 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";
-	}
+
+    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);
+        }
+    }
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	switchToConfig.call(this);
-
-	this[openEntryEventHandlerSymbol] = (event) => {
-		const container = findTargetElementFromEvent(
-			event,
-			ATTRIBUTE_ROLE,
-			"entry",
-		);
-		if (!(container instanceof HTMLElement)) {
-			return;
-		}
-
-		//let container = findClosestByAttribute(element, ATTRIBUTE_ROLE, 'option');
-		const index = container
-			.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
-			.split("-")
-			.pop();
-
-		const currentState = this.getOption("entries." + index + ".state");
-
-		const newState = currentState === "close" ? "open" : "close";
-		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) &&
-				cmp(parseInt(ref.getAttribute(ATTRIBUTE_INTEND)), childIntend)
-			) {
-				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]);
-	}
-
-	// for (const [, type] of Object.entries(types)) {
-	//
-	//     self[controlElementSymbol].addEventListener(type, function (event) {
-	//
-	//         const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, 'entry');
-	//         if (!(element instanceof HTMLElement)) {
-	//             return;
-	//         }
-	//
-	//         toggle.call(self);
-	//
-	//
-	//     })
-	//
-	// }
-
-	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 Form
+ * @this {TreeMenu}
  */
-function initObserver() {}
+function initObserver() {
+}
 
 /**
  * Import Menu Entries from dataset
  *
  * @since 1.0.0
- * @param {array|object|Map|Set} data
  * @return {TreeMenu}
  * @throws {Error} map is not iterable
  * @private
  */
-function importEntries(data) {
-	this[internalNodesSymbol] = new Map();
-
-	const mappingOptions = this.getOption("mapping", {});
-
-	const filter = mappingOptions?.["filter"];
-	const rootReferences = mappingOptions?.["rootReferences"];
-
-	const id = this.getOption("mapping.idTemplate", "id");
-	const parentID = this.getOption("mapping.parentTemplate", "parent");
-
-	const selector = mappingOptions?.["selector"];
-
-	const nodes = buildTree(data, selector, id, parentID, {
-		filter,
-		rootReferences,
-	});
-
-	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 intend = n.level;
-
-			const visibility = intend > 0 ? "hidden" : "visible";
-			const state = "close";
-
-			this[internalNodesSymbol].set(value, n);
-
-			options.push({
-				value,
-				label,
-				intend,
-				state,
-				visibility,
-				["has-children"]: n.hasChildNodes(),
-			});
-		}
-	}
-
-	this.setOption("entries", options);
-	return this;
-}
-
-/**
- * @private
- */
-function importEntriesFromDatasource() {
-	const self = this;
-	self.setAttribute(ATTRIBUTE_DISABLED, ATTRIBUTE_DISABLED);
-
-	const datasource = self.getOption("datasource");
-	if (!(datasource instanceof Datasource)) {
-		addAttributeToken(
-			self,
-			ATTRIBUTE_ERRORMESSAGE,
-			"datasource is not defined",
-		);
-		return;
-	}
-
-	datasource.attachObserver(
-		new Observer(function () {
-			if (isObject(this) && this instanceof ProxyObserver) {
-				importEntries.call(self, datasource.get());
-			}
-		}),
-	);
-
-	datasource
-		.read()
-		.then(() => {
-			new Processing(() => {
-				self.removeAttribute(ATTRIBUTE_DISABLED);
-			}).run();
-		})
-		.catch((e) => {
-			addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.toString());
-		});
-
-	return self;
+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;
 }
 
 /**
  *
  * @param {Node} node
  * @return {array<label, value>}
- * @memberOf Monster.Components.TreeMenu
  * @private
  */
 function formatKeyLabel(node) {
-	validateInstance(node, Node);
-
-	const label = new Formatter(node.value).format(
-		this.getOption("mapping.labelTemplate", ""),
-	);
-	const value = new Formatter(node.value).format(
-		this.getOption("mapping.valueTemplate", ""),
-	);
-
-	return {
-		value,
-		label,
-	};
-}
+    validateInstance(node, Node);
 
-/**
- * @private
- * @return {Monster.Components.TreeMenu.Form}
- */
-function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[controlElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=control]",
-	);
-	return this;
+    const label = new Formatter(node.value).format(
+        this.getOption("mapping.labelTemplate"),
+    );
+
+    const value = new Formatter(node.value).format(
+        this.getOption("mapping.valueTemplate"),
+    );
+
+    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>`;
+
+    return {
+        value,
+        label,
+        icon,
+    };
 }
 
 /**
- *
- * ```
- * <monster-tree-menu data-monster-url="https://example.com/"></monster-tree-menu>
- * ```
-
  * @private
- * @return {object}
+ * @return {TreeMenu}
  */
-function initOptionsFromArguments() {
-	const options = {};
+function initControlReferences() {
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
 
-	// let url = self.getAttribute(ATTRIBUTE_FORM_URL);
-	//
-	// if (isString(url)) {
-	//     options['url'] = new URL(url, document.location).toString()
-	// }
+    this[controlElementSymbol] = this.shadowRoot.querySelector(
+        "[data-monster-role=control]",
+    );
 
-	return options;
+    return this;
 }
 
-function switchToConfig() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[dragoverEventHandlerSymbol] = (event) => {
-		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
-		event.preventDefault();
-		if (!(element instanceof HTMLElement)) {
-			return;
-		}
-
-		const dropzone = document.createElement("div");
-		dropzone.classList.add("dropzone");
-
-		element.prepend(dropzone);
-
-		console.log("over", element.outerHTML, event);
-
-		event.dataTransfer.dropEffect = "move";
-	};
-
-	this[dragenterEventHandlerSymbol] = (event) => {
-		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
-		console.log("enter", element.outerHTML, event);
-
-		event.dataTransfer.dropEffect = "move";
-		event.preventDefault();
-	};
-
-	this[dragleaveEventHandlerSymbol] = (event) => {
-		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
-
-		event.preventDefault();
-		if (!(element instanceof HTMLElement)) {
-			return;
-		}
-
-		console.log("leave", element.outerHTML, event);
-
-		event.dataTransfer.dropEffect = "move";
-		event.preventDefault();
-	};
-
-	this[dragEventHandlerSymbol] = (event) => {
-		event.preventDefault();
-	};
-
-	this[dropEventHandlerSymbol] = (event) => {
-		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
-		console.log("drop", element.outerHTML, event);
-		event.preventDefault();
-	};
-
-	this[dragstartEventHandlerSymbol] = (event) => {
-		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "entry");
-		if (!(element instanceof HTMLElement)) {
-			return;
-		}
-
-		//let container = findClosestByAttribute(element, ATTRIBUTE_ROLE, 'option');
-		const index = element
-			.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
-			.split("-")
-			.pop();
-
-		const currentState = this.getOption("entries." + index + ".state");
-		event.dataTransfer.setData("text/plain", "22");
-		event.dataTransfer.setData("text/html", "22");
-		event.dataTransfer.effectAllowed = "move";
-	};
-
-	this[controlElementSymbol].addEventListener(
-		"dragstart",
-		this[dragstartEventHandlerSymbol],
-	);
-	this[controlElementSymbol].addEventListener(
-		"dragenter",
-		this[dragenterEventHandlerSymbol],
-	);
-	this[controlElementSymbol].addEventListener(
-		"dragleave",
-		this[dragleaveEventHandlerSymbol],
-	);
-	this[controlElementSymbol].addEventListener(
-		"dragover",
-		this[dragoverEventHandlerSymbol],
-	);
-	this[controlElementSymbol].addEventListener(
-		"drop",
-		this[dropEventHandlerSymbol],
-	);
-}
-
-// /**
-//  * @private
-//  * @throws {Error} missing default slot
-//  * @throws {Error} no shadow-root is defined
-//  * @throws {Error} missing url
-//  * @throws {Error} we won't be able to read the data
-//  * @throws {Error} request failed
-//  * @throws {Error} not found
-//  * @throws {Error} undefined status or type
-//  * @fires Monster.Components.TreeMenu.event:monster-fetched
-//  */
-// function initIntersectionObserver() {
-//     const self = this;
-//
-//     if (self[intersectionObserverWasInitialized] === true) {
-//         return
-//     }
-//
-//     self[intersectionObserverWasInitialized] = true;
-//
-//     let options = {
-//         threshold: [0.5]
-//     }
-//
-//     const callback = (entries, observer) => {
-//
-//         for (const [, entry] of entries.entries()) {
-//             if (entry.isIntersecting === true) {
-//                 if (!self.hasAttribute(ATTRIBUTE_FORM_RELOAD) || self.getAttribute(ATTRIBUTE_FORM_RELOAD).toLowerCase() === 'onshow') {
-//                     observer.disconnect();
-//                 }
-//
-//                 try {
-//                     loadContent.call(self);
-//                 } catch (e) {
-//                     self.setAttribute(ATTRIBUTE_ERRORMESSAGE, e.toString());
-//                 }
-//
-//
-//             }
-//         }
-//     }
-//
-//     const observer = new IntersectionObserver(callback, options);
-//     observer.observe(self);
-//
-//
-// }
-
 /**
  * @private
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
+        <slot></slot>
+
         <template id="entries">
             <div data-monster-role="entry"
-                 draggable="true"
                  data-monster-attributes="
                  data-monster-intend path:entries.intend, 
                  data-monster-state path:entries.state, 
                  data-monster-visibility path:entries.visibility, 
                  data-monster-filtered path:entries.filtered,
                  data-monster-has-children path:entries.has-children">
-
-                <button data-monster-role="button"
-                        data-monster-attributes="
-                                    type path:type,
-                                    role path:role,
-                                    value path:entries.value, 
-                                    name path:name, 
-                                    part path:type | prefix:option- | suffix: form" tabindex="-1">
-                    <span data-monster-role="folder-handler"></span>
-                    <span data-monster-replace="path:entries | index:label" part="entry-label"></span>
-                </button>
+                <div data-monster-role="button"
+                     data-monster-attributes="
+                                    value path:entries.value | tostring
+                    " tabindex="0">
+                    <div data-monster-role="status-badges"></div>
+                    <div data-monster-role="icon" data-monster-replace="path:entries.icon">
+
+                    </div>
+                    <div data-monster-replace="path:entries.label"
+                         part="entry-label"
+                         data-monster-attributes="class static:id"></div>
+                </div>
         </template>
 
-        <div data-monster-role="control" part="control">
+        <div data-monster-role="control" part="control" data-monster-attributes="class path:classes.control">
             <div part="entries" data-monster-role="entries"
                  data-monster-insert="entries path:entries"
                  tabindex="-1"></div>