@schukai/monster 3.52.0 → 3.53.0

package/source/components/form/tabs.mjs

@@ -8,8 +8,16 @@ import { instanceSymbol } from "../../constants.mjs";
 import { createPopper } from "@popperjs/core";
 import { extend } from "../../data/extend.mjs";
 import { Pathfinder } from "../../data/pathfinder.mjs";
-import { addToObjectLink, hasObjectLink } from "../../dom/attributes.mjs";
-import { ATTRIBUTE_PREFIX, ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import {
+	addAttributeToken,
+	addToObjectLink,
+	hasObjectLink,
+} from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_PREFIX,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
 import {
 	assembleMethodSymbol,
 	CustomElement,
@@ -125,8 +133,6 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  *
  * <img src="./images/tabs.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-tabs />` directly in the HTML or using
  * Javascript via the `document.createElement('monster-tabs');` method.
  *
@@ -141,6 +147,12 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  * document.createElement('monster-tabs');
  * ```
  *
+ * @example <caption>Create a simple tab control</caption>
+ * <monster-tabs>
+ *     <div id="tab1">Tab 1</div>
+ *     <div id="tab2">Tab 2</div>
+ * </monster-tabs>
+ *
  * @startuml tabs.png
  * skinparam monochrome true
  * skinparam shadowing false
@@ -228,14 +240,14 @@ class Tabs extends CustomElement {
 	/**
 	 * This method is called internal and should not be called directly.
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
 
 		this[dimensionsSymbol] = new Pathfinder({ data: {} });
 		// change and remove Tabs
-		initEventhandler.call(this);
+		initEventHandler.call(this);
 
 		// setup structure
 		initTabButtons.call(this).then(() => {
@@ -272,7 +284,7 @@ class Tabs extends CustomElement {
 	connectedCallback() {
 		super.connectedCallback();
 
-		const document = getDocument();;
+		const document = getDocument();
 
 		for (const [, type] of Object.entries(["click", "touch"])) {
 			// close on outside ui-events
@@ -300,8 +312,7 @@ class Tabs extends CustomElement {
 /**
  * @private
  */
-function initPopperSwitch() {;
-
+function initPopperSwitch() {
 	const nodes = getSlottedElements.call(this, `[${ATTRIBUTE_ROLE}="switch"]`); // null ↦ only unnamed slots
 	let switchButton;
 	if (nodes.size === 0) {
@@ -337,8 +348,7 @@ function initPopperSwitch() {;
 /**
  * @private
  */
-function hidePopper() {;
-
+function hidePopper() {
 	if (!this[popperInstanceSymbol]) {
 		return;
 	}
@@ -351,8 +361,7 @@ function hidePopper() {;
 /**
  * @private
  */
-function showPopper() {;
-
+function showPopper() {
 	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
 		return;
 	}
@@ -366,14 +375,18 @@ function showPopper() {;
 
 	new Processing(() => {
 		this[popperElementSymbol].style.removeProperty("visibility");
-	}).run();
+	})
+		.run(undefined)
+		.then(() => {})
+		.catch((e) => {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		});
 }
 
 /**
  * @private
  */
-function togglePopper() {;
-
+function togglePopper() {
 	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
 		hidePopper.call(this);
 	} else {
@@ -384,8 +397,7 @@ function togglePopper() {;
 /**
  * @private
  */
-function attachResizeObserver() {;
-
+function attachResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -409,8 +421,7 @@ function attachResizeObserver() {;
 /**
  * @private
  */
-function attachTabChangeObserver() {;
-
+function attachTabChangeObserver() {
 	// against flickering
 	new MutationObserver((mutations) => {
 		let runUpdate = false;
@@ -485,8 +496,7 @@ function initPopper() {
  * @private
  * @param {HTMLElement} element
  */
-function show(element) {;
-
+function show(element) {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -496,6 +506,7 @@ function show(element) {;
 	const nodes = getSlottedElements.call(this);
 	for (const node of nodes) {
 		const id = node.getAttribute("id");
+
 		if (id === reference) {
 			node.classList.add("active");
 
@@ -510,7 +521,12 @@ function show(element) {;
 				}
 
 				const options = this.getOption("fetch", {});
-				loadAndAssignContent(node, url, options);
+				const filter = undefined;
+				loadAndAssignContent(node, url, options, filter)
+					.then(() => {})
+					.catch((e) => {
+						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+					});
 			}
 		} else {
 			node.classList.remove("active");
@@ -518,14 +534,14 @@ function show(element) {;
 	}
 
 	const standardButtons = this.getOption("buttons.standard");
-	for (const [index] in standardButtons) {
+	for (const index in standardButtons) {
 		const button = standardButtons[index];
 		const state = button["reference"] === reference ? "active" : "inactive";
 		this.setOption(`buttons.standard.${index}.state`, state);
 	}
 
 	const popperButton = this.getOption("buttons.popper");
-	for (const [index] in popperButton) {
+	for (const index in popperButton) {
 		const button = popperButton[index];
 		const state = button["reference"] === reference ? "active" : "inactive";
 		this.setOption(`buttons.popper.${index}.state`, state);
@@ -537,8 +553,7 @@ function show(element) {;
 /**
  * @private
  */
-function initEventhandler() {;
-
+function initEventHandler() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -653,8 +668,7 @@ function attachTabMutationObserver(observedNode) {
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -679,8 +693,7 @@ function initControlReferences() {;
  * @throws {Error} no shadow-root is defined
  *
  */
-function initTabButtons() {;
-
+function initTabButtons() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -758,15 +771,19 @@ function initTabButtons() {;
 				if (button instanceof HTMLButtonElement && button.disabled !== true) {
 					show.call(this, button);
 				}
-			}).run();
+			})
+				.run(undefined)
+				.then(() => {})
+				.catch((e) => {
+					addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+				});
 		}
 
-		return;
+		return Promise.resolve();
 	});
 }
 
-function checkAndRearrangeButtons() {;
-
+function checkAndRearrangeButtons() {
 	if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
 		calculateNavigationButtonsDimensions.call(this);
 	}
@@ -806,7 +823,7 @@ function adjustButtonVisibility() {
 
 /**
  * @private
- * @param node
+ * @param {string} value
  * @return {number}
  */
 function getDimValue(value) {
@@ -847,8 +864,7 @@ function calcBoxWidth(node) {
  * @private
  * @return {Object}
  */
-function rearrangeButtons() {;
-
+function rearrangeButtons() {
 	const standardButtons = [];
 	const popperButtons = [];
 
@@ -884,8 +900,7 @@ function rearrangeButtons() {;
  * @private
  * @return {Object}
  */
-function calculateNavigationButtonsDimensions() {;
-
+function calculateNavigationButtonsDimensions() {
 	const width = this[navElementSymbol].getBoundingClientRect().width;
 
 	let startEndWidth = 0;
@@ -901,9 +916,9 @@ function calculateNavigationButtonsDimensions() {;
 	this[dimensionsSymbol].setVia("data.space", width - startEndWidth - 2);
 	this[dimensionsSymbol].setVia("data.visible", !(width === 0));
 
-	const buttons = this
-		.getOption("buttons.standard")
-		.concat(this.getOption("buttons.popper"));
+	const buttons = this.getOption("buttons.standard").concat(
+		this.getOption("buttons.popper"),
+	);
 
 	for (const [i, button] of buttons.entries()) {
 		const ref = button?.reference;
@@ -937,8 +952,7 @@ function calculateNavigationButtonsDimensions() {;
  * @param {HTMLElement} node
  * @return {string}
  */
-function getButtonLabel(node) {;
-
+function getButtonLabel(node) {
 	let label;
 	let setLabel = false;
 	if (node.hasAttribute(ATTRIBUTE_BUTTON_LABEL)) {

package/source/components/form/template.mjs

@@ -133,7 +133,7 @@ class Template extends CustomElement {
 	/**
 	 *
 	 */
-	[initMethodSymbol]() {;
+	[initMethodSymbol]() {
 		super[initMethodSymbol]();
 
 		// data-monster-options
@@ -158,7 +158,7 @@ class Template extends CustomElement {
 	 * @fires Monster.Components.Form.event:monster-fetched
 	 * @return {Monster.Components.Form.Form}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initIntersectionObserver.call(this);
 	}
@@ -216,7 +216,7 @@ class Template extends CustomElement {
  * @private
  * @return {object}
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 
 	const url = this.getAttribute(ATTRIBUTE_FORM_URL);
@@ -243,8 +243,7 @@ function initOptionsFromArguments() {;
  * @throws {Error} undefined status or type
  * @fires Monster.Components.Form.event:monster-fetched
  */
-function initIntersectionObserver() {;
-
+function initIntersectionObserver() {
 	if (this[intersectionObserverWasInitialized] === true) {
 		return;
 	}
@@ -290,8 +289,7 @@ function initIntersectionObserver() {;
  * @throws {TypeError} value is not a string
  * @fires Monster.Components.Form.event:monster-fetched
  */
-function loadContent() {;
-
+function loadContent() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -334,8 +332,7 @@ function loadContent() {;
  * @private
  * @return {runProcessors}
  */
-function runProcessors() {;
-
+function runProcessors() {
 	const processors = this.getOption("processors");
 	if (!isArray(processors)) return;
 

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

@@ -151,8 +151,7 @@ class TreeSelect extends Select {
 	 * @return {Select}
 	 * @throws {Error} map is not iterable
 	 */
-	importOptions(data) {;
-
+	importOptions(data) {
 		this[internalNodesSymbol] = new Map();
 
 		const mappingOptions = this.getOption("mapping", {});
@@ -214,8 +213,7 @@ class TreeSelect extends Select {
  * @private
  * @param event
  */
-function handleOptionKeyboardEvents(event) {;
-
+function handleOptionKeyboardEvents(event) {
 	switch (event?.["code"]) {
 		case "ArrowLeft":
 			closeOrOpenCurrentOption.call(this, event, "close");
@@ -260,7 +258,7 @@ function closeOrOpenCurrentOption(event, mode) {
  * @memberOf Monster.Components.Form
  * @private
  */
-function formatKeyLabel(node) {;
+function formatKeyLabel(node) {
 	validateInstance(node, Node);
 
 	const label = new Formatter(node.value).format(
@@ -281,7 +279,7 @@ function formatKeyLabel(node) {;
  * @param {string} value
  * @return {Array}
  */
-function buildTreeLabels(value) {;
+function buildTreeLabels(value) {
 	let node = this[internalNodesSymbol].get(value);
 	if (node === undefined) {
 		node = this[internalNodesSymbol].get(parseInt(value));
@@ -316,7 +314,7 @@ function buildTreeLabels(value) {;
  * @return {string}
  * @memberOf Monster.Components.Form
  */
-function formatHierarchicalSelection(value) {;
+function formatHierarchicalSelection(value) {
 	return buildTreeLabels
 		.call(this, value)
 		.join(this.getOption("formatter.separator", " / "));
@@ -332,8 +330,7 @@ const openOptionEventHandler = Symbol("openOptionEventHandler");
  * @private
  * @throws {Error} no shadow-root is defined
  */
-function initEventhandler() {;
-
+function initEventhandler() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -439,7 +436,7 @@ function initEventhandler() {;
  * @private
  * @return {object}
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 
 	const url = this.getAttribute(ATTRIBUTE_FORM_URL);

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

@@ -22,8 +22,7 @@ const popperInstanceSymbol = Symbol("popperInstance");
  * @this {CustomElement}
  * @param {Boolean} mode
  */
-function setEventListenersModifiers(mode) {;
-
+function setEventListenersModifiers(mode) {
 	const options = extend({}, this.getOption("popper"));
 	const modifiers = options?.["modifiers"];
 

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

@@ -127,7 +127,7 @@ class CallButton extends CustomElement {
 	 *
 	 * @return {CallButton}
 	 */
-	[assembleMethodSymbol]() {;
+	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 
 		initControlReferences.call(this);
@@ -146,8 +146,7 @@ class CallButton extends CustomElement {
  * @private
  * @return {CallButton}
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -164,7 +163,7 @@ function initControlReferences() {;
  * @throws {TypeError} incorrect arguments passed for the datasource
  * @throws {Error} the datasource could not be initialized
  */
-function initOptionsFromArguments() {;
+function initOptionsFromArguments() {
 	const options = {};
 	const value = this.getAttribute(ATTRIBUTE_REFERENCE);
 	if (value) {
@@ -191,8 +190,7 @@ function initOptionsFromArguments() {;
  * @private
  * @throws {Error} The option references.callableSelector must be an array
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	const doc = getDocument();
 
 	this[callButtonElementSymbol].addEventListener("click", (event) => {

package/source/components/host/collapse.mjs

@@ -195,7 +195,7 @@ class Collapse extends CustomElement {
 	 *
 	 * @returns {Monster.Components.Host.Collapse}
 	 */
-	toggle() {;
+	toggle() {
 		if (this[detailsElementSymbol].classList.contains("active")) {
 			this.close();
 		} else {
@@ -227,7 +227,7 @@ class Collapse extends CustomElement {
 	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-open
 	 */
 	open() {
-		let node;;
+		let node;
 		if (this[detailsElementSymbol].classList.contains("active")) {
 			return this;
 		}
@@ -270,7 +270,7 @@ class Collapse extends CustomElement {
 	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-before-close
 	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-closed
 	 */
-	close() {;
+	close() {
 		if (!this[detailsElementSymbol].classList.contains("active")) {
 			return this;
 		}
@@ -309,14 +309,13 @@ class Collapse extends CustomElement {
 	 * @return {Monster.Components.Host.Collapse}
 	 * @fires Monster.Components.Host.Collapse.event:monster-collapse-adjust-height
 	 */
-	adjustHeight() {;
+	adjustHeight() {
 		adjustHeight.call(this);
 		return this;
 	}
 }
 
-function adjustHeight() {;
-
+function adjustHeight() {
 	let height = 0;
 
 	if (this[detailsContainerElementSymbol]) {
@@ -344,8 +343,7 @@ function adjustHeight() {;
 	fireCustomEvent(this, "monster-" + this[nameSymbol] + "-adjust-height", {});
 }
 
-function updateResizeObserverObservation() {;
-
+function updateResizeObserverObservation() {
 	this[resizeObserverSymbol].disconnect();
 
 	const slottedNodes = getSlottedElements.call(this);
@@ -363,8 +361,7 @@ function updateResizeObserverObservation() {;
 /**
  * @private
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -373,8 +370,7 @@ function initEventHandler() {;
 	return this;
 }
 
-function initSlotChangedHandler() {;
-
+function initSlotChangedHandler() {
 	this[detailsSlotElementSymbol].addEventListener("slotchange", () => {
 		updateResizeObserverObservation.call(this);
 	});
@@ -385,8 +381,7 @@ function initSlotChangedHandler() {;
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -410,15 +405,14 @@ function initControlReferences() {;
  * @private
  * @returns {string}
  */
-function getConfigKey() {;
+function getConfigKey() {
 	return generateUniqueConfigKey(this[nameSymbol], this.id, "state");
 }
 
 /**
  * @private
  */
-function updateStateConfig() {;
-
+function updateStateConfig() {
 	if (!this.getOption("features.persistState")) {
 		return;
 	}
@@ -446,8 +440,7 @@ function updateStateConfig() {;
  * @private
  * @returns {Promise}
  */
-function initStateFromHostConfig() {;
-
+function initStateFromHostConfig() {
 	if (!this.getOption("features.persistState")) {
 		return Promise.resolve({});
 	}
@@ -482,8 +475,7 @@ function initStateFromHostConfig() {;
 /**
  * @private
  */
-function initResizeObserver() {;
-
+function initResizeObserver() {
 	// against flickering
 	this[resizeObserverSymbol] = new ResizeObserver((entries) => {
 		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
@@ -501,7 +493,7 @@ function initResizeObserver() {;
 	});
 }
 
-function checkAndRearrangeContent() {;
+function checkAndRearrangeContent() {
 	this.adjustHeight();
 }
 

package/source/components/host/config-manager.mjs

@@ -135,8 +135,7 @@ class ConfigManager extends CustomElement {
 	 * @param {string} key
 	 * @returns {Promise<unknown>}
 	 */
-	getConfig(key) {;
-
+	getConfig(key) {
 		return this.ready().then(() => {
 			return getBlob.call(this, key);
 		});
@@ -147,7 +146,7 @@ class ConfigManager extends CustomElement {
 	 * @param {*} value
 	 * @returns {Promise<unknown>}
 	 */
-	setConfig(key, value) {;
+	setConfig(key, value) {
 		return this.ready().then(() => {
 			return setBlob.call(this, key, value);
 		});
@@ -177,7 +176,7 @@ class ConfigManager extends CustomElement {
 	}
 }
 
-function openDatabase() {;
+function openDatabase() {
 	const window = getWindow();
 
 	const name = this.getOption("indexDB.name");
@@ -221,7 +220,7 @@ function openDatabase() {;
 /**
  * @param {string} mode either "readonly" or "readwrite"
  */
-function getObjectStore(mode) {;
+function getObjectStore(mode) {
 	const storageName = this.getOption("indexDB.objectStore.name");
 
 	if (!this[indexDBInstanceSymbol]) {
@@ -238,8 +237,7 @@ function getObjectStore(mode) {;
  * @param {string} key
  * @returns {Promise<unknown>}
  */
-function clearObjectStore() {;
-
+function clearObjectStore() {
 	const store = getObjectStore.call(this, "readwrite");
 
 	return new Promise((resolve, reject) => {
@@ -255,7 +253,7 @@ function clearObjectStore() {;
 	});
 }
 
-function getBlob(key) {;
+function getBlob(key) {
 	const store = getObjectStore.call(this, MODE_READONLY);
 
 	const req = store.get(key);
@@ -272,7 +270,7 @@ function getBlob(key) {;
 	});
 }
 
-function setBlob(key, blob) {;
+function setBlob(key, blob) {
 	const store = getObjectStore.call(this, MODE_READ_WRITE);
 
 	const KeyPath = this.getOption("indexDB.objectStore.keyPath");

package/source/components/host/details.mjs

@@ -131,7 +131,7 @@ class Details extends Collapse {
 		initEventHandler.call(this);
 	}
 
-	connectedCallback() {;
+	connectedCallback() {
 		super.connectedCallback();
 
 		const containDocument = this.shadowRoot;
@@ -167,8 +167,7 @@ class Details extends Collapse {
  * @return {Select}
  * @throws {Error} no shadow-root is defined
  */
-function initControlReferences() {;
-
+function initControlReferences() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -181,8 +180,7 @@ function initControlReferences() {;
 /**
  * @private
  */
-function initEventHandler() {;
-
+function initEventHandler() {
 	if (!this.shadowRoot) {
 		throw new Error("no shadow-root is defined");
 	}
@@ -203,8 +201,7 @@ function initEventHandler() {;
  * @private
  * @return {string}
  */
-function initButtonLabel() {;
-
+function initButtonLabel() {
 	let label;
 	const setLabel = false;
 	if (this.hasAttribute(ATTRIBUTE_BUTTON_LABEL)) {
@@ -237,7 +234,7 @@ function initButtonLabel() {;
  * @private
  * @returns {string}
  */
-function getConfigKey() {;
+function getConfigKey() {
 	return generateUniqueConfigKey("details", this.id, "state");
 }