@schukai/monster 3.51.4 → 3.52.0

package/source/components/form/util/fetch.mjs

@@ -0,0 +1,133 @@
+/**
+ * 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 { isString } from "../../../types/is.mjs";
+import { fireCustomEvent } from "../../../dom/events.mjs";
+import { validateInstance, validateString } from "../../../types/validate.mjs";
+
+function findShadowRoot(element) {
+	if (element instanceof ShadowRoot) return element;
+	if (!element.parentNode) return null;
+	return findShadowRoot(element.parentNode);
+}
+
+/**
+ * @private
+ * @param {HTMLElement} element
+ * @param {string|URL} url
+ * @param {Object} options fetch options
+ * @param {Object} filter fetch options
+ * @return {Promise<Object>}
+ * @throws {Error} we won't be able to read the data
+ * @throws {Error} client error
+ * @throws {Error} undefined status or type
+ * @throws {TypeError} value is not an instance of
+ * @throws {TypeError} value is not a string
+ */
+function loadAndAssignContent(element, url, options, filter) {
+	return loadContent(url, options).then((response) => {
+		let content = response.content;
+
+		if (isString(filter) && filter !== "") {
+			const t = document.createElement("div");
+			const c = document.createElement("div");
+			c.innerHTML = content;
+			for (const [, node] of c.querySelectorAll(filter).entries()) {
+				t.appendChild(node);
+			}
+
+			content = t.innerHTML;
+		}
+
+		const t = document.createElement("div");
+		t.innerHTML = content;
+
+		const scripts = t.querySelectorAll("script");
+		for (const [, script] of scripts.entries()) {
+			const s = document.createElement("script");
+			s.innerHTML = script.innerHTML;
+			if (script.src) s.src = script.src;
+			if (script.type) s.type = script.type;
+			if (script.async) s.async = script.async;
+			if (script.defer) s.defer = script.defer;
+			if (script.crossOrigin) s.crossOrigin = script.crossOrigin;
+			if (script.integrity) s.integrity = script.integrity;
+			if (script.referrerPolicy) s.referrerPolicy = script.referrerPolicy;
+			document.head.appendChild(s);
+			t.removeChild(script);
+		}
+
+		validateInstance(element, HTMLElement).innerHTML = t.innerHTML;
+
+		const root = findShadowRoot(element);
+		if (root !== null) {
+			element = root.host;
+		}
+
+		fireCustomEvent(element, "monster-fetched", {
+			url,
+		});
+
+		return response;
+	});
+}
+
+/**
+ * @private
+ * @param {string|URL} url
+ * @param {Object} options fetch options
+ * @return {Promise<string>}
+ * @throws {Error} we won't be able to read the data
+ * @throws {Error} client error
+ * @throws {Error} undefined status or type
+ * @throws {TypeError} value is not a string
+ */
+function loadContent(url, options) {
+	if (url instanceof URL) {
+		url = url.toString();
+	}
+
+	return fetch(validateString(url), options).then((response) => {
+		// The ok read-only property of the Response interface contains a
+		// Boolean stating whether the response was successful (status in the range 200-299) or not.
+		if (response?.ok !== true) {
+			// @see https://developer.mozilla.org/en-US/docs/Web/API/Response/type
+			if (
+				["error", "opaque", "opaqueredirect"].indexOf(response?.type) !== -1
+			) {
+				throw new Error(
+					`we won't be able to read the data (${response?.type})`,
+				);
+			}
+
+			const statusClass = `${response?.status}`.substring(0, 1);
+			switch (statusClass) {
+				case "4":
+					throw new Error(`client error ${response?.statusText}`);
+					break;
+				default:
+					throw new Error(
+						`undefined status (${response?.status} / ${response?.statusText}) or type (${response?.type})`,
+					);
+			}
+		}
+
+		return new Promise(function (resolve, reject) {
+			response
+				.text()
+				.then((content) => {
+					resolve({
+						content,
+						type: response.headers.get("Content-Type"),
+					});
+				})
+				.catch(reject);
+		});
+	});
+}
+
+export { loadAndAssignContent, loadContent };

package/source/components/form/util/floating-ui.mjs

@@ -0,0 +1,245 @@
+/**
+ * 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 {
+	arrow,
+	autoPlacement,
+	autoUpdate,
+	detectOverflow,
+	computePosition,
+	offset,
+	flip,
+	size,
+	shift,
+} from "@floating-ui/dom";
+import { Processing } from "../../../util/processing.mjs";
+import { getDocument } from "../../../dom/util.mjs";
+import { isString, isArray, isObject, isFunction } from "../../../types/is.mjs";
+
+export { positionPopper };
+
+/**
+ * @private
+ * @param controlElement
+ * @param popperElement
+ * @param options
+ * @returns {Promise|*}
+ */
+function positionPopper(controlElement, popperElement, options) {
+	const body = getDocument().body;
+
+	return new Processing(() => {
+		const arrowElement = controlElement.querySelector(
+			"[data-monster-role=arrow]",
+		);
+
+		const config = Object.assign(
+			{},
+			{
+				placement: "top",
+			},
+			options,
+		);
+
+		const middleware = config?.["middleware"];
+		if (!isArray(middleware)) {
+			if (isString(middleware)) {
+				config["middleware"] = middleware.split(",").filter((line) => {
+					return line.trim().length > 0;
+				});
+			} else {
+				config["middleware"] = [];
+			}
+		}
+
+		for (const key in middleware) {
+			const line = middleware[key];
+			if (isFunction(line)) {
+				continue;
+			}
+
+			if (isObject(line)) {
+				continue;
+			}
+
+			if (!isString(line)) {
+				throw new Error(
+					`Middleware must be a string, a function or an object. Got ${typeof line}`,
+				);
+			}
+
+			const kv = line.split(":");
+			const fn = kv.shift();
+
+			switch (fn) {
+				case "flip":
+					config["middleware"][key] = flip();
+					break;
+				case "shift":
+					config["middleware"][key] = shift();
+					break;
+				case "autoPlacement":
+					let defaultAllowedPlacements = ["top", "bottom", "left", "right"];
+
+					const defPlacement = kv?.shift();
+					if (isString(defPlacement) && defPlacement.trim().length > 0) {
+						defaultAllowedPlacements = defPlacement
+							.split(",")
+							.filter((line) => {
+								return line.trim().length > 0;
+							});
+					}
+
+					if (defaultAllowedPlacements.includes(config.placement)) {
+						defaultAllowedPlacements.splice(
+							defaultAllowedPlacements.indexOf(config.placement),
+							1,
+						);
+					}
+					defaultAllowedPlacements.unshift(config.placement);
+
+					config["middleware"][key] = autoPlacement({
+						crossAxis: true,
+						autoAlignment: true,
+						allowedPlacements: defaultAllowedPlacements,
+					});
+
+					break;
+				case "detectOverflow":
+					config["middleware"][key] = detectOverflow();
+					break;
+				case "arrow":
+					if (arrowElement) {
+						config["middleware"][key] = arrow({ element: arrowElement });
+					}
+					break;
+				case "size":
+					config["middleware"][key] = size({
+						apply({ availableWidth, availableHeight, elements }) {
+							const maxWidth = body.clientWidth;
+							const maxHeight = body.clientHeight;
+
+							if (availableWidth < 0) {
+								availableWidth = 0;
+							}
+
+							if (availableHeight < 0) {
+								availableHeight = 0;
+							}
+
+							if (availableWidth > maxWidth) {
+								availableWidth = maxWidth;
+							}
+
+							if (availableHeight > maxHeight) {
+								availableHeight = maxHeight;
+							}
+
+							Object.assign(elements.floating.style, {
+								boxSizing: "border-box",
+								maxWidth: `${availableWidth}px`,
+								maxHeight: `${availableHeight}px`,
+							});
+						},
+					});
+					break;
+				case "offset":
+					const o = kv?.shift();
+					config["middleware"][key] = offset(parseInt(o) || 10);
+					break;
+				case "hide":
+					config["middleware"][key] = hide();
+					break;
+				default:
+					throw new Error(`Unknown function: ${fn}`);
+			}
+		}
+
+		popperElement.style.removeProperty("visibility");
+		popperElement.style.display = "block";
+
+		autoUpdate(controlElement, popperElement, () => {
+			computePosition(controlElement, popperElement, config).then(
+				({ x, y, placement, middlewareData }) => {
+					Object.assign(popperElement.style, {
+						top: "0",
+						left: "0",
+						transform: `translate(${roundByDPR(x)}px,${roundByDPR(y)}px)`,
+					});
+
+					if (middlewareData.arrow) {
+						const side = placement.split("-")[0];
+
+						const staticSide = {
+							top: "bottom",
+							right: "left",
+							bottom: "top",
+							left: "right",
+						}[side];
+
+						// monster-border-width = + 4 (2*2) (should come from css)
+						const arrowLen = arrowElement.offsetWidth + 4;
+
+						const borderStyle = {
+							borderLeft: "transparent",
+							borderRight: "transparent",
+							borderBottom: "transparent",
+							borderTop: "transparent",
+						};
+
+						const defaultBorder =
+							"var(--monster-border-width) var(--monster-border-style) var(--monster-bg-color-primary-4)";
+
+						switch (side) {
+							case "top":
+								borderStyle.borderRight = defaultBorder;
+								borderStyle.borderBottom = defaultBorder;
+								break;
+
+							case "bottom":
+								borderStyle.borderTop = defaultBorder;
+								borderStyle.borderLeft = defaultBorder;
+								break;
+
+							case "left":
+								borderStyle.borderRight = defaultBorder;
+								borderStyle.borderTop = defaultBorder;
+								break;
+
+							case "right":
+								borderStyle.borderBottom = defaultBorder;
+								borderStyle.borderLeft = defaultBorder;
+								break;
+						}
+
+						const { x, y } = middlewareData.arrow;
+
+						Object.assign(
+							arrowElement.style,
+							{
+								left: x != null ? `${x}px` : "",
+								top: y != null ? `${y}px` : "",
+								// Ensure the static side gets unset when
+								// flipping to other placements' axes.
+								right: "",
+								bottom: "",
+								[staticSide]: `${-arrowLen / 2}px`,
+								transform: "rotate(45deg)",
+							},
+							borderStyle,
+						);
+					}
+				},
+			);
+		});
+	}).run();
+}
+
+function roundByDPR(value) {
+	const dpr = window.devicePixelRatio || 1;
+	return Math.round(value * dpr) / dpr;
+}

package/source/components/form/util/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.Util
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};

package/source/components/form/util/popper.mjs

@@ -0,0 +1,49 @@
+/**
+ * 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 { extend } from "../../../data/extend.mjs";
+import { isArray } from "../../../types/is.mjs";
+import { validateBoolean } from "../../../types/validate.mjs";
+
+export { setEventListenersModifiers, popperInstanceSymbol };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const popperInstanceSymbol = Symbol("popperInstance");
+
+/**
+ * @private
+ * @this {CustomElement}
+ * @param {Boolean} mode
+ */
+function setEventListenersModifiers(mode) {;
+
+	const options = extend({}, this.getOption("popper"));
+	const modifiers = options?.["modifiers"];
+
+	if (!isArray(modifiers)) {
+		options["modifiers"] = [];
+	}
+
+	if (
+		options["modifiers"].filter((entry) => {
+			if (entry?.["name"] === "eventListeners") {
+				// performance https://popper.js.org/docs/v2/tutorial/#performance
+				entry["enabled"] = validateBoolean(mode);
+			}
+		}).length === 0
+	) {
+		options["modifiers"].push({
+			name: "eventListeners",
+			enabled: validateBoolean(mode),
+		});
+	}
+
+	this[popperInstanceSymbol].setOptions(options);
+}

package/source/components/host/call-button.mjs

@@ -0,0 +1,236 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { CallButtonStyleSheet } from "./stylesheet/call-button.mjs";
+import { isArray, isObject, isFunction } from "../../types/is.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
+
+export { CallButton };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const callButtonElementSymbol = Symbol("callButtonElement");
+
+/**
+ * @memberOf Monster.Components.Host
+ * @type {string}
+ */
+const ATTRIBUTE_REFERENCE = `${ATTRIBUTE_PREFIX}reference`;
+/**
+ * @memberOf Monster.Components.Host
+ * @type {string}
+ */
+const ATTRIBUTE_CALL = `${ATTRIBUTE_PREFIX}call`;
+
+/**
+ * The call button component is used to call a method of another element.
+ *
+ * <img src="./images/call-button.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-call-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-call-button');` method.
+ *
+ * ```html
+ * <monster-call-button></monster-call-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-host/source/filter.mjs';
+ * document.createElement('monster-call-button');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml call-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CallButton
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Host
+ * @summary A toggle button
+ */
+class CallButton extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-host/call-button@@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.
+	 *
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 */
+	get defaults() {
+		const obj = Object.assign(
+			{},
+			super.defaults,
+			{
+				templates: {
+					main: getTemplate(),
+				},
+				references: {
+					callableSelector: undefined,
+				},
+
+				call: undefined,
+
+				labels: {
+					button: "<slot>Toggle</slot>",
+				},
+			},
+			initOptionsFromArguments.call(this),
+		);
+
+		return obj;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-call-button";
+	}
+
+	/**
+	 *
+	 * @return {CallButton}
+	 */
+	[assembleMethodSymbol]() {;
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	static getCSSStyleSheet() {
+		return [CallButtonStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {CallButton}
+ */
+function initControlReferences() {;
+
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[callButtonElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ * @return {object}
+ * @throws {TypeError} incorrect arguments passed for the datasource
+ * @throws {Error} the datasource could not be initialized
+ */
+function initOptionsFromArguments() {;
+	const options = {};
+	const value = this.getAttribute(ATTRIBUTE_REFERENCE);
+	if (value) {
+		if (!isObject(options.references)) {
+			options.references = {};
+		}
+		const selectors = value.split(",");
+		if (isArray(selectors) && selectors.length === 0) {
+			throw new TypeError("incorrect arguments passed for the datasource");
+		}
+
+		options.references.callableSelector = selectors;
+	}
+
+	const call = this.getAttribute(ATTRIBUTE_CALL);
+	if (call) {
+		options.call = call;
+	}
+
+	return options;
+}
+
+/**
+ * @private
+ * @throws {Error} The option references.callableSelector must be an array
+ */
+function initEventHandler() {;
+
+	const doc = getDocument();
+
+	this[callButtonElementSymbol].addEventListener("click", (event) => {
+		event.preventDefault();
+
+		const selectors = this.getOption("references.callableSelector");
+		if (!isArray(selectors)) {
+			throw new Error(
+				"The option references.callableSelector must be an array",
+			);
+		}
+
+		const call = this.getOption("call");
+		if (!call) {
+			throw new Error("The option call must be defined");
+		}
+
+		for (const selector of selectors) {
+			const element = doc.querySelector(selector);
+			if (element instanceof HTMLElement && isFunction(element?.[call])) {
+				element[call]();
+			}
+		}
+	});
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control"
+             data-monster-attributes="class path:references.callableSelector | ?::hidden">
+            <a href="#" data-monster-role="call-button" data-monster-replace="path:labels.button"></a>
+        </div>
+    `;
+}
+
+registerCustomElement(CallButton);