@schukai/monster 3.51.4 → 3.52.0

package/source/components/form/tree-select.mjs

@@ -0,0 +1,527 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { buildTree } from "../../data/buildtree.mjs";
+import { findClosestByAttribute } from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ROLE,
+	ATTRIBUTE_UPDATER_INSERT_REFERENCE,
+} from "../../dom/constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { findTargetElementFromEvent, fireEvent } from "../../dom/events.mjs";
+import { Formatter } from "../../text/formatter.mjs";
+import { isString } from "../../types/is.mjs";
+import { Node } from "../../types/node.mjs";
+import { NodeRecursiveIterator } from "../../types/noderecursiveiterator.mjs";
+import { validateInstance } from "../../types/validate.mjs";
+import { ATTRIBUTE_FORM_URL, ATTRIBUTE_INTEND } from "./constants.mjs";
+import { Select } from "./select.mjs";
+import { SelectStyleSheet } from "./stylesheet/select.mjs";
+import { TreeSelectStyleSheet } from "./stylesheet/tree-select.mjs";
+
+export { TreeSelect, formatHierarchicalSelection };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const internalNodesSymbol = Symbol("internalNodes");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const keyEventHandler = Symbol("keyEventHandler");
+
+/**
+ * This CustomControl creates a select element with a variety of options.
+ * It supports filtering, local and remote, multiple selection and has a
+ * template system for displaying the options.
+ *
+ * <img src="./images/treeselect.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ * as well as [pooperjs](https://popper.js.org/docs/v2/).
+ *
+ * You can create this control either by specifying the HTML tag `<monster-select />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-select');` method.
+ *
+ * ```html
+ * <monster-select></monster-select>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {TreeSelect} from '@schukai/component-form/source/treeselect.js';
+ * document.createElement('monster-tree-select');
+ * ```
+ *
+ * @externalExample ../../../example/components/form/tree-select.mjs
+ * @startuml treeselect.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Select
+ * Select <|-- TreeSelect
+ * @enduml
+ *
+ * @since 1.9.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A highly configurable select control
+ */
+class TreeSelect extends Select {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-form/tree-select@@instance");
+	}
+
+	/**
+	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+	 *
+	 * The individual configuration values can be found in the table.
+	 *
+	 * @extends Monster.Components.Form.Select
+	 * @property {String} mapping.rootReferences=['0', undefined, null]
+	 * @property {String} mapping.idTemplate=id
+	 * @property {String} mapping.parentTemplate=parent
+	 * @property {String} mapping.selection
+	 * @property {Object} formatter
+	 * @property {String} formatter.separator=" / "
+	 */
+	get defaults() {
+		return Object.assign(
+			{},
+			super.defaults,
+			{
+				mapping: {
+					rootReferences: ["0", undefined, null],
+					idTemplate: "id",
+					parentTemplate: "parent",
+				},
+				formatter: {
+					selection: formatHierarchicalSelection,
+					separator: " / ",
+				},
+				templates: {
+					main: getTemplate(),
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-tree-select";
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [SelectStyleSheet, TreeSelectStyleSheet];
+	}
+
+	/**
+	 * Import Select Options from dataset
+	 * Not to be confused with the control defaults/options
+	 *
+	 * @since 0.16.0
+	 * @param {array|object|Map|Set} data
+	 * @return {Select}
+	 * @throws {Error} map is not iterable
+	 */
+	importOptions(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("options", options);
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Select}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initEventhandler.call(this);
+	}
+}
+
+/**
+ * @private
+ * @param event
+ */
+function handleOptionKeyboardEvents(event) {;
+
+	switch (event?.["code"]) {
+		case "ArrowLeft":
+			closeOrOpenCurrentOption.call(this, event, "close");
+			event.preventDefault();
+			break;
+		case "ArrowRight":
+			closeOrOpenCurrentOption.call(this, event, "open");
+			event.preventDefault();
+			break;
+	}
+}
+
+/**
+ * @private
+ * @param {event} event
+ */
+function closeOrOpenCurrentOption(event, mode) {
+	validateInstance(event, Event);
+
+	if (typeof event.composedPath !== "function") {
+		throw new Error("unsupported event");
+	}
+
+	const path = event.composedPath();
+	const optionNode = path.shift();
+
+	const state = optionNode.getAttribute("data-monster-state");
+	if (state !== mode) {
+		const handler = optionNode.querySelector(
+			"[data-monster-role=folder-handler]",
+		);
+		if (handler instanceof HTMLElement) {
+			fireEvent(handler, "click");
+		}
+	}
+}
+
+/**
+ *
+ * @param {Node} node
+ * @return {array<label, value>}
+ * @memberOf Monster.Components.Form
+ * @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,
+	};
+}
+
+/**
+ * @private
+ * @param {string} value
+ * @return {Array}
+ */
+function buildTreeLabels(value) {;
+	let node = this[internalNodesSymbol].get(value);
+	if (node === undefined) {
+		node = this[internalNodesSymbol].get(parseInt(value));
+	}
+
+	const parts = [];
+
+	if (node instanceof Node) {
+		let ptr = node;
+		while (ptr) {
+			const formattedValues = formatKeyLabel.call(this, ptr);
+			parts.unshift(formattedValues.label);
+			ptr = ptr.parent;
+		}
+	}
+
+	return parts;
+}
+
+/**
+ * This formatter can format a label hierarchically.
+ * The option `formatter.separator` determines the separator.
+ *
+ * ```
+ * a / b / c
+ * ```
+ *
+ * This function can be passed as argument of the option `formatter.selection:`.
+ *
+ * @since 1.9.0
+ * @param {*} value
+ * @return {string}
+ * @memberOf Monster.Components.Form
+ */
+function formatHierarchicalSelection(value) {;
+	return buildTreeLabels
+		.call(this, value)
+		.join(this.getOption("formatter.separator", " / "));
+}
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const openOptionEventHandler = Symbol("openOptionEventHandler");
+
+/**
+ * @private
+ * @throws {Error} no shadow-root is defined
+ */
+function initEventhandler() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[openOptionEventHandler] = (event) => {
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"folder-handler",
+		);
+		if (!(element instanceof HTMLElement)) {
+			return;
+		}
+
+		const container = findClosestByAttribute(element, ATTRIBUTE_ROLE, "option");
+		const index = container
+			.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
+			.split("-")
+			.pop();
+
+		const currentState = this.getOption(`options.${index}.state`);
+
+		const newState = currentState === "close" ? "open" : "close";
+		this.setOption(`options.${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) &&
+				cmp(parseInt(ref.getAttribute(ATTRIBUTE_INTEND)), childIntend)
+			) {
+				const refIndex = ref
+					.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE)
+					.split("-")
+					.pop();
+				this.setOption(`options.${refIndex}.visibility`, newVisibility);
+
+				if (newState === "close") {
+					this.setOption(`options.${refIndex}.state`, "close");
+				}
+
+				ref = ref.nextElementSibling;
+			}
+		}
+	};
+
+	this[keyEventHandler] = (event) => {
+		const path = event.composedPath();
+		const element = path?.[0];
+
+		let role;
+
+		if (element instanceof HTMLElement) {
+			if (element.hasAttribute(ATTRIBUTE_ROLE)) {
+				role = element.getAttribute(ATTRIBUTE_ROLE);
+			} else if (element === this) {
+				show.call(this);
+				focusFilter.call(this);
+			} else {
+				const e = element.closest(`[${ATTRIBUTE_ROLE}]`);
+				if (e instanceof HTMLElement && e.hasAttribute()) {
+					role = e.getAttribute(ATTRIBUTE_ROLE);
+				}
+			}
+		} else {
+			return;
+		}
+
+		switch (role) {
+			case "option-label":
+			case "option-control":
+			case "option":
+				handleOptionKeyboardEvents.call(this, event);
+				break;
+		}
+	};
+
+	this.shadowRoot.addEventListener("keydown", this[keyEventHandler]);
+	this.shadowRoot.addEventListener("click", this[openOptionEventHandler]);
+}
+
+/**
+ * This attribute can be used to pass a URL to this select.
+ *
+ * ```html
+ * <monster-select data-monster-url="https://example.com/"></monster-select>
+ * ```
+ *
+ * @private
+ * @return {object}
+ */
+function initOptionsFromArguments() {;
+	const options = {};
+
+	const url = this.getAttribute(ATTRIBUTE_FORM_URL);
+	if (isString(url)) {
+		options["url"] = new URL(url).toString();
+	}
+
+	return options;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="options">
+            <div data-monster-role="option"
+                 tabindex="-1"
+                 data-monster-attributes="
+                 data-monster-intend path:options.intend, 
+                 data-monster-state path:options.state, 
+                 data-monster-visibility path:options.visibility, 
+                 data-monster-filtered path:options.filtered,
+                 data-monster-has-children path:options.has-children">
+                <div data-monster-role="folder-handler"></div>
+                <label part="option" role="option">
+                    <input data-monster-role="option-control"
+                           data-monster-attributes="
+            type path:type,
+            role path:role,
+            value path:options.value, 
+            name path:name, 
+            part path:type | prefix:option- | suffix: form
+            " tabindex="-1">
+                    <span data-monster-replace="path:options | index:label" part="option-label"></span>
+                </label>
+            </div>
+        </template>
+
+        <template id="selection">
+            <div data-monster-role="badge"
+                 part="badge"
+                 data-monster-attributes="
+                 data-monster-value path:selection | index:value, 
+                 class path:classes | index:badge, 
+        part path:type | suffix:-option | prefix: form-" tabindex="-1">
+                <div data-monster-replace="path:selection | index:label" part="badge-label"
+                     data-monster-role="badge-label"></div>
+                <div part="remove-badge" data-monster-select-this
+                     data-monster-attributes="class path:features.clear | ?::hidden "
+                     data-monster-role="remove-badge" tabindex="-1"></div>
+            </div>
+        </template>
+
+        <slot class="hidden"></slot>
+
+        <div data-monster-role="control" part="control" tabindex="0">
+            <div data-monster-role="container">
+                \${selected}
+            </div>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div class="option-filter-control" role="search">
+                    <input type="text" role="searchbox"
+                           part="popper-filter" name="popper-filter"
+                           data-monster-role="filter"
+                           autocomplete="off"
+                           tabindex="0">
+                </div>
+                <div part="content" class="flex" data-monster-replace="path:content">
+                    <div part="options" data-monster-role="options" data-monster-insert="options path:options"
+                         tabindex="-1"></div>
+                </div>
+                <div part="no-options" data-monster-role="no-options"
+                     data-monster-replace="path:messages.emptyOptions"></div>
+            </div>
+            <div part="status-or-remove-badges" data-monster-role="status-or-remove-badges"
+                 data-monster-attributes="class path:classes.statusOrRemoveBadge | suffix:\\ status-or-remove-badges"></div>
+        </div>
+    `;
+}
+
+registerCustomElement(TreeSelect);

package/source/components/form/types/namespace.mjs

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * Namespace for all form related functions.
+ *
+ * @namespace Monster.Components.Form.Types
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/components/form/types/state.mjs

@@ -0,0 +1,93 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { Base } from "../../../types/base.mjs";
+import { validateString } from "../../../types/validate.mjs";
+
+export { State, getStateInstanceFor };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const internalSymbol = Symbol("internalSymbol");
+
+/**
+ * This State class represent a State with presentation
+ *
+ * @since 1.5.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form.Types
+ */
+class State extends Base {
+	/**
+	 *
+	 * @param {string} state
+	 * @param {string} presentation
+	 * @throws {TypeError} value is not a string
+	 */
+	constructor(state, presentation) {
+		super();
+		this[internalSymbol] = {};
+		this[internalSymbol].state = validateString(state);
+		this[internalSymbol].presentation = validateString(presentation);
+	}
+
+	/**
+	 * @property {String} state
+	 */
+	get state() {
+		return this[internalSymbol].state;
+	}
+
+	/**
+	 * @property {String} presentation
+	 */
+	get presentation() {
+		return this[internalSymbol].presentation;
+	}
+
+	/**
+	 * @return {Monster.Components.Form.Types.State}
+	 */
+	getClone() {
+		return new State(
+			this[internalSymbol].state,
+			this[internalSymbol].presentation,
+		);
+	}
+}
+
+/**
+ * @since 1.5.0
+ * @param state
+ * @return {Monster.Components.Form.Types.State}
+ * @memberOf Monster.Components.Form.Types
+ */
+function getStateInstanceFor(state) {
+	switch (state) {
+		case "stateless":
+			return new State("stateless", "");
+		case "successful":
+			return new State(
+				"successful",
+				'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="successful" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M10.97 4.97a.235.235 0 0 0-.02.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-1.071-1.05z"/></svg>',
+			);
+		case "activity":
+			return new State(
+				"activity",
+				'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="activity" viewBox="0 0 16 16"><circle cx="8" cy="8" r="8"/></svg>',
+			);
+		case "failed": // https://icons.getbootstrap.com/icons/exclamation-circle/
+			return new State(
+				"failed",
+				'<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="failed" viewBox="0 0 16 16"><path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/><path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0zM7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 4.995z"/></svg>',
+			);
+		default:
+			return new State(state, "");
+	}
+}