@schukai/monster 3.71.3 → 3.73.0

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

@@ -13,10 +13,9 @@
  */
 
 import { buildTree } from "../../data/buildtree.mjs";
-import { Datasource } from "../../data/datasource.mjs";
+import { Datasource } from "../datatable/datasource.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import {
-	ATTRIBUTE_DISABLED,
 	ATTRIBUTE_ERRORMESSAGE,
 	ATTRIBUTE_ROLE,
 	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
@@ -24,17 +23,22 @@ import {
 import {
 	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 { isObject } from "../../types/is.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 { ProxyObserver } from "../../types/proxyobserver.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";
@@ -51,48 +55,19 @@ const internalNodesSymbol = Symbol("internalNodes");
  * @private
  * @type {symbol}
  */
-const controlElementSymbol = Symbol("controlElement");
-
-/**
- * @private
- * @type {symbol}
- */
-const openEntryEventHandlerSymbol = Symbol("openEntryEventHandler");
-
-/**
- * @private
- * @type {symbol}
- */
-const dragstartEventHandlerSymbol = Symbol("dragstartEventHandler");
-/**
- * @private
- * @type {symbol}
- */
-const dragenterEventHandlerSymbol = Symbol("dragenterEventHandler");
-
-/**
- * @private
- * @type {symbol}
- */
-const dragleaveEventHandlerSymbol = Symbol("dragleaveEventHandler");
-
-/**
- * @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,11 +96,15 @@ 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 {
+	constructor() {
+		super();
+		this[preventChangeSymbol] = false;
+	}
+
 	/**
 	 * This method is called internal and should not be called directly.
 	 *
@@ -143,7 +122,6 @@ class TreeMenu extends CustomElement {
 	 *        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
@@ -153,44 +131,46 @@ class TreeMenu extends CustomElement {
 	 * @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.parentKey=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(),
+		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");
 				},
-				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;
+			data: [],
+			entries: [],
+		});
 	}
 
 	/**
@@ -201,18 +181,17 @@ class TreeMenu extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @return {Monster.Components.TreeMenu.Form}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
 		initEventHandler.call(this);
-		importEntriesFromDatasource.call(this);
 		initObserver.call(this);
-
-		return this;
+		setTimeout(() => {
+			copyIconMap.call(this);
+		}, 0);
 	}
 
 	/**
@@ -232,13 +211,113 @@ class TreeMenu extends CustomElement {
 	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);
+	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(
@@ -246,26 +325,70 @@ function initEventHandler() {
 			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 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";
-		this.setOption("entries." + index + ".state", newState);
 
+		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;
 
@@ -277,15 +400,22 @@ function initEventHandler() {
 				return a >= b;
 			};
 
-			while (
-				ref &&
-				ref.hasAttribute(ATTRIBUTE_INTEND) &&
-				cmp(parseInt(ref.getAttribute(ATTRIBUTE_INTEND)), childIntend)
-			) {
+			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") {
@@ -302,28 +432,12 @@ function initEventHandler() {
 		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;
 }
 
 /**
  * @private
- * @this Form
+ * @this {TreeMenu}
  */
 function initObserver() {}
 
@@ -331,12 +445,12 @@ 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) {
+function importEntries() {
+	const data = this.getOption("data");
 	this[internalNodesSymbol] = new Map();
 
 	const mappingOptions = this.getOption("mapping", {});
@@ -344,15 +458,20 @@ function importEntries(data) {
 	const filter = mappingOptions?.["filter"];
 	const rootReferences = mappingOptions?.["rootReferences"];
 
-	const id = this.getOption("mapping.idTemplate", "id");
-	const parentID = this.getOption("mapping.parentTemplate", "parent");
+	const id = this.getOption("mapping.idTemplate");
+	const parentKey = this.getOption("mapping.parentKey");
 
 	const selector = mappingOptions?.["selector"];
 
-	const nodes = buildTree(data, selector, id, parentID, {
-		filter,
-		rootReferences,
-	});
+	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) {
@@ -360,8 +479,9 @@ function importEntries(data) {
 		for (const n of iterator) {
 			const formattedValues = formatKeyLabel.call(this, n);
 
-			const label = formattedValues.label;
-			const value = formattedValues.value;
+			const label = formattedValues?.label;
+			const value = formattedValues?.value;
+			const icon = formattedValues?.icon;
 			const intend = n.level;
 
 			const visibility = intend > 0 ? "hidden" : "visible";
@@ -372,6 +492,7 @@ function importEntries(data) {
 			options.push({
 				value,
 				label,
+				icon,
 				intend,
 				state,
 				visibility,
@@ -381,74 +502,43 @@ function importEntries(data) {
 	}
 
 	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;
+	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", ""),
+		this.getOption("mapping.labelTemplate"),
 	);
+
 	const value = new Formatter(node.value).format(
-		this.getOption("mapping.valueTemplate", ""),
+		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,
 	};
 }
 
 /**
  * @private
- * @return {Monster.Components.TreeMenu.Form}
+ * @return {TreeMenu}
  */
 function initControlReferences() {
 	if (!this.shadowRoot) {
@@ -458,173 +548,10 @@ function initControlReferences() {
 	this[controlElementSymbol] = this.shadowRoot.querySelector(
 		"[data-monster-role=control]",
 	);
-	return this;
-}
-
-/**
- *
- * ```
- * <monster-tree-menu data-monster-url="https://example.com/"></monster-tree-menu>
- * ```
-
- * @private
- * @return {object}
- */
-function initOptionsFromArguments() {
-	const options = {};
-
-	// let url = self.getAttribute(ATTRIBUTE_FORM_URL);
-	//
-	// if (isString(url)) {
-	//     options['url'] = new URL(url, document.location).toString()
-	// }
-
-	return options;
-}
-
-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],
-	);
+	return this;
 }
 
-// /**
-//  * @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}
@@ -632,29 +559,31 @@ function switchToConfig() {
 function getTemplate() {
 	// 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>