@schukai/monster 3.54.0 → 3.55.1

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

@@ -1,15 +1,14 @@
-
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. 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 {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {TreeMenuStyleSheet}
+export { TreeMenuStyleSheet };
 
 /**
  * @private
@@ -18,10 +17,17 @@ export {TreeMenuStyleSheet}
 const TreeMenuStyleSheet = new CSSStyleSheet();
 
 try {
-  TreeMenuStyleSheet.insertRule(`
+	TreeMenuStyleSheet.insertRule(
+		`
 @layer treemenu { 
 :host{border:1px solid #08e808;box-sizing:border-box;display:flex;height:100%;width:100%}[data-monster-role=control]{height:100%;overflow-x:hidden;overflow-y:auto;scrollbar-color:transparent transparent;width:100%}::-webkit-scrollbar{height:10px;width:5px}::-webkit-scrollbar-thumb{background:rgba(0,0,0,.35)}::-webkit-scrollbar-track{background:transparent}[data-monster-role=button]{background:none;border:0;display:block;overflow:hidden;padding:5px;text-align:left;text-overflow:ellipsis;white-space:nowrap;width:100%}[data-monster-role=entry][data-monster-visibility=hidden]{display:none}[data-monster-role=entry] .dropzone{background-color:red;height:20px;width:100%}[data-monster-role=entry][data-monster-intend=\"0\"]{display:flex;font-size:1rem;margin:0}[data-monster-role=entry][data-monster-intend=\"1\"]{margin:0 0 0 20px}[data-monster-role=entry][data-monster-intend=\"2\"]{font-size:.75rem;margin:0 0 0 40px}[data-monster-role=entry][data-monster-intend=\"3\"]{font-size:.7rem;margin:0 0 0 60px}[data-monster-role=entry][data-monster-intend=\"4\"]{font-size:.65rem;margin:0 0 0 80px}[data-monster-role=entry][data-monster-intend=\"5\"]{font-size:.65rem;margin:0 0 0 100px}[data-monster-role=entry][data-monster-intend=\"6\"]{font-size:.65rem;margin:0 0 0 110px}[data-monster-role=entry][data-monster-intend=\"7\"]{font-size:.65rem;margin:0 0 0 120px}[data-monster-role=entry][data-monster-intend=\"8\"]{font-size:.65rem;margin:0 0 0 130px} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

package/source/data/transformer.mjs

@@ -328,45 +328,10 @@ function transform(value) {
 			let trueStatement = args.shift() || undefined;
 			let falseStatement = args.shift() || undefined;
 
-			if (trueStatement === "value") {
-				trueStatement = value;
-			}
-			if (trueStatement === "\\value") {
-				trueStatement = "value";
-			}
-
-			if (trueStatement === "\\undefined") {
-				trueStatement = undefined;
-			}
-
-			if (trueStatement === "\\null") {
-				trueStatement = null;
-			}
-
-			if (falseStatement === "value") {
-				falseStatement = value;
-			}
-			if (falseStatement === "\\value") {
-				falseStatement = "value";
-			}
-
-			if (falseStatement === "\\undefined") {
-				falseStatement = undefined;
-			}
-
-			if (falseStatement === "\\null") {
-				falseStatement = null;
-			}
+			trueStatement = convertSpecialStrings(trueStatement, value);
+			falseStatement = convertSpecialStrings(falseStatement, value);
 
-			const condition =
-				(value !== undefined &&
-					value !== "" &&
-					value !== "off" &&
-					value !== "false" &&
-					value !== false) ||
-				value === "on" ||
-				value === "true" ||
-				value === true;
+			const condition = evaluateCondition(value);
 			return condition ? trueStatement : falseStatement;
 
 		case "ucfirst":
@@ -622,10 +587,7 @@ function transform(value) {
 			 * that null is an object.
 			 */
 			if (value === null) {
-				if (equalsValue === "null") {
-					return true;
-				}
-				return false;
+				return equalsValue === "null";
 			}
 
 			const typeOfValue = typeof value;
@@ -672,7 +634,6 @@ function transform(value) {
 
 			return nf.format(amount);
 
-
 		case "timestamp":
 			date = new Date(value);
 			timestamp = date.getTime();
@@ -810,9 +771,43 @@ function transform(value) {
 			}
 
 			defaultValue = args.shift() || undefined;
+
+			defaultValue = convertSpecialStrings(defaultValue, value);
+
 			return translations.getText(key, defaultValue);
 
 		default:
 			throw new Error(`unknown command ${this.command}`);
 	}
 }
+
+function convertSpecialStrings(input, value) {
+	switch (input) {
+		case "value":
+			return value;
+		case "\\value":
+			return "value";
+		case "\\undefined":
+			return undefined;
+		case "\\null":
+			return null;
+		default:
+			return input;
+	}
+}
+
+function evaluateCondition(value) {
+	const lowerValue = typeof value === "string" ? value.toLowerCase() : value;
+
+	return (
+		(value !== undefined &&
+			value !== null &&
+			value !== "" &&
+			lowerValue !== "off" &&
+			lowerValue !== "false" &&
+			value !== false) ||
+		lowerValue === "on" ||
+		lowerValue === "true" ||
+		value === true
+	);
+}

package/source/dom/attributes.mjs

@@ -55,10 +55,10 @@ function findClosestObjectLink(element) {
  * @since 1.9.0
  * @copyright schukai GmbH
  * @memberOf Monster.DOM
- * @param {HTMLElement} element
- * @param {Symbol} symbol
- * @param {Object} object
- * @return {boolean}
+ * @param element
+ * @param symbol
+ * @param object
+ * @returns {*}
  */
 function addToObjectLink(element, symbol, object) {
 	validateInstance(element, HTMLElement);
@@ -82,7 +82,7 @@ function addToObjectLink(element, symbol, object) {
  * @memberOf Monster.DOM
  * @param {HTMLElement} element
  * @param {Symbol} symbol
- * @return {boolean}
+ * @returns {*}
  */
 function removeObjectLink(element, symbol) {
 	validateInstance(element, HTMLElement);

package/source/dom/customelement.mjs

@@ -1018,7 +1018,7 @@ function initHtmlContent() {
 		if (isString(html) && html.length > 0) {
 			const mapping = this.getOption("templateMapping", {});
 			if (isObject(mapping)) {
-				html = new Formatter(mapping).format(html);
+				html = new Formatter(mapping, {}).format(html);
 			}
 			this.innerHTML = html;
 		}

package/source/dom/updater.mjs

@@ -25,6 +25,7 @@ import { isArray, isInstance, isIterable } from "../types/is.mjs";
 import { Observer } from "../types/observer.mjs";
 import { ProxyObserver } from "../types/proxyobserver.mjs";
 import { validateArray, validateInstance } from "../types/validate.mjs";
+import { Sleep } from "../util/sleep.mjs";
 import { clone } from "../util/clone.mjs";
 import { trimSpaces } from "../util/trimspaces.mjs";
 import { addToObjectLink } from "./attributes.mjs";
@@ -95,12 +96,20 @@ class Updater extends Base {
 				const diffResult = diff(this[internalSymbol].last, s);
 				this[internalSymbol].last = clone(s);
 
+				const promises = [];
+
 				for (const [, change] of Object.entries(diffResult)) {
-					removeElement.call(this, change);
-					insertElement.call(this, change);
-					updateContent.call(this, change);
-					updateAttributes.call(this, change);
+					promises.push(
+						Sleep(1).then(() => {
+							removeElement.call(this, change);
+							insertElement.call(this, change);
+							updateContent.call(this, change);
+							updateAttributes.call(this, change);
+						}),
+					);
 				}
+
+				return Promise.all(promises);
 			}),
 		);
 	}
@@ -416,7 +425,7 @@ function insertElement(change) {
 		wd++;
 
 		const p = clone(change?.["path"]);
-		if (!isArray(p)) return this;
+		if (!isArray(p)) return;
 
 		while (p.length > 0) {
 			const current = p.join(".");

package/source/dom/util.mjs

@@ -15,6 +15,7 @@ export {
 	findElementWithIdUpwards,
 	getContainingDocument,
 	getRegisteredCustomElements,
+	findElementWithSelectorUpwards,
 };
 
 /**
@@ -207,6 +208,47 @@ function findElementWithIdUpwards(element, targetId) {
 	return findElementWithIdUpwards(element.parentElement, targetId);
 }
 
+/**
+ * Recursively searches upwards from a given element to find an ancestor element
+ * with a specified selector, considering both normal DOM and shadow DOM.
+ * This method is useful for finding a parent element with a specific class.
+ *
+ * @param {HTMLElement|ShadowRoot} element - The starting element or shadow root to search from.
+ * @param {string} selector - The selector of the target element to find.
+ * @returns {HTMLElement|null} - The ancestor element with the specified selector, or null if not found.
+ * @memberOf Monster.DOM
+ * @since 3.55.0
+ */
+function findElementWithSelectorUpwards(element, selector) {
+	if (!element || !selector) {
+		return null;
+	}
+
+	// Search within the current element's shadow root, if it exists
+	if (element.shadowRoot) {
+		const target = element.shadowRoot.querySelector(selector);
+		if (target) {
+			return target;
+		}
+	}
+
+	if (element === document.documentElement) {
+		const target = document.querySelector(selector);
+		if (target) {
+			return target;
+		}
+	}
+
+	// If the current element is inside a shadow root, search its host's ancestors
+	const rootNode = element.getRootNode();
+	if (rootNode && rootNode instanceof ShadowRoot) {
+		return findElementWithSelectorUpwards(rootNode.host, selector);
+	}
+
+	// Otherwise, search the current element's parent
+	return findElementWithSelectorUpwards(element.parentElement, selector);
+}
+
 /**
  * @private
  * @param {HTMLElement} element

package/source/i18n/providers/embed.mjs

@@ -141,7 +141,7 @@ class Embed extends Provider {
 	 * `script[data-monster-role=translations]` is searched for and the translations are assigned to the element.
 	 *
 	 * @param element
-	 * @returns {Promise<unknown[]>}
+	 * @returns {Promise<Awaited<unknown>[]>}
 	 */
 	static assignTranslationsToElement(element) {
 		const d = getDocument();
@@ -152,13 +152,13 @@ class Embed extends Provider {
 
 		const list = d.querySelectorAll("script[data-monster-role=translations]");
 		if (list === null) {
-			return;
+			return Promise.resolve([]);
 		}
 
 		const promises = [];
 
 		list.forEach((translationElement) => {
-			const p = new Embed(translationElement);
+			const p = new Embed(translationElement, {});
 			promises.push(p.assignToElement(undefined, element));
 		});
 

package/source/monster.mjs

@@ -27,6 +27,7 @@ export * from "./components/form/state-button.mjs";
 export * from "./components/form/popper.mjs";
 export * from "./components/form/select.mjs";
 export * from "./components/form/confirm-button.mjs";
+export * from "./components/form/context-error.mjs";
 export * from "./components/form/action-button.mjs";
 export * from "./components/form/form.mjs";
 export * from "./components/form/api-button.mjs";
@@ -45,6 +46,7 @@ export * from "./components/form/stylesheet/state-button.mjs";
 export * from "./components/form/stylesheet/popper.mjs";
 export * from "./components/form/stylesheet/select.mjs";
 export * from "./components/form/stylesheet/confirm-button.mjs";
+export * from "./components/form/stylesheet/context-error.mjs";
 export * from "./components/form/stylesheet/action-button.mjs";
 export * from "./components/form/stylesheet/form.mjs";
 export * from "./components/form/stylesheet/api-button.mjs";
@@ -93,6 +95,7 @@ export * from "./components/datatable/util.mjs";
 export * from "./components/datatable/filter.mjs";
 export * from "./components/datatable/dataset.mjs";
 export * from "./components/datatable/embedded-pagination.mjs";
+export * from "./components/datatable/status.mjs";
 export * from "./components/datatable/constants.mjs";
 export * from "./components/datatable/stylesheet/select-filter.mjs";
 export * from "./components/datatable/stylesheet/datasource.mjs";
@@ -105,6 +108,7 @@ export * from "./components/datatable/stylesheet/filter.mjs";
 export * from "./components/datatable/stylesheet/dataset.mjs";
 export * from "./components/datatable/stylesheet/embedded-pagination.mjs";
 export * from "./components/datatable/stylesheet/filter-controls-defaults.mjs";
+export * from "./components/datatable/stylesheet/status.mjs";
 export * from "./components/datatable/stylesheet/filter-range.mjs";
 export * from "./components/state/log/entry.mjs";
 export * from "./components/state/state.mjs";
@@ -120,6 +124,7 @@ export * from "./components/stylesheet/spinner.mjs";
 export * from "./components/stylesheet/control.mjs";
 export * from "./components/stylesheet/card.mjs";
 export * from "./components/stylesheet/common.mjs";
+export * from "./components/stylesheet/icons.mjs";
 export * from "./components/stylesheet/popper.mjs";
 export * from "./components/stylesheet/theme.mjs";
 export * from "./components/stylesheet/data-grid.mjs";

package/source/text/formatter.mjs

@@ -112,8 +112,8 @@ class Formatter extends BaseWithOptions {
 	/**
 	 * Default values for the markers are `${` and `}`
 	 *
-	 * @param {object} object
-	 * @throws {TypeError} value is not a object
+	 * @param object
+	 * @param options
 	 */
 	constructor(object, options) {
 		super(options);

package/source/types/noderecursiveiterator.mjs

@@ -22,7 +22,7 @@ export { NodeRecursiveIterator };
 const isNodeListSymbol = Symbol("isNodeList");
 
 /**
- * You can create the instance via the monster namespace `new Monster.Types.NodeRecursiveIterator()`.
+ * Represents a recursive iterator for traversing nodes in a DOM tree.
  *
  * @externalExample ../../example/types/noderecursiveiterator.mjs
  * @license AGPLv3
@@ -30,22 +30,25 @@ const isNodeListSymbol = Symbol("isNodeList");
  * @copyright schukai GmbH
  * @memberOf Monster.Types
  * @summary An iterator to run recursively through a tree of nodes
+ * @extends Base
  */
 class NodeRecursiveIterator extends Base {
 	/**
-	 * @param {Node} [data]
+	 * @param node
 	 */
 	constructor(node) {
 		super();
 
 		this[isNodeListSymbol] = false;
 
-		// iterator is a nodelist
+		// iterator is a NodeList
 		if (isInstance(node, NodeList)) {
 			const children = node;
-			node = new Node();
-			node.childNodes = children;
+			let n = new Node();
+			n.childNodes = children;
 			this[isNodeListSymbol] = true;
+			this[internalSymbol]  = n;
+			return;
 		}
 
 		this[internalSymbol] = validateInstance(node, Node);
@@ -77,8 +80,7 @@ class NodeRecursiveIterator extends Base {
 				yield* new NodeRecursiveIterator(node);
 			}
 		}
-
-		return;
+		
 	};
 
 	/**

package/source/types/observer.mjs

@@ -135,7 +135,7 @@ class Observer extends Base {
 
 			setTimeout(() => {
 				try {
-					// the queue and the settimeout ensure that an object is not
+					// the queue and the `setTimeout` ensure that an object is not
 					// informed of the same change more than once.
 					if (self.queue.isEmpty()) {
 						resolve();

package/source/types/version.mjs

@@ -152,7 +152,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.54.0");
+	monsterVersion = new Version("3.55.1");
 
 	return monsterVersion;
 }

package/source/util/sleep.mjs

@@ -0,0 +1,17 @@
+/**
+ * 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
+ */
+
+/**
+ *
+ * @param milliseconds
+ * @returns {Promise<unknown>}
+ * @since 3.55.0
+ * @memberOf Monster.Util
+ */
+export function Sleep(milliseconds) {
+	return new Promise((resolve) => setTimeout(resolve, milliseconds));
+}

package/test/cases/components/form/button.mjs

@@ -103,6 +103,7 @@ describe('Button', function () {
 
             setTimeout(() => {
                 try {
+                    
                     const options = button.shadowRoot.querySelector('button');
 
                     expect(options).is.instanceof(HTMLButtonElement);
@@ -112,7 +113,7 @@ describe('Button', function () {
                 }
 
                 done();
-            }, 0)
+            }, 100)
 
 
         });

package/test/cases/components/form/select.mjs

@@ -176,7 +176,7 @@ describe('Select', function () {
                                 done();
 
 
-                            }, 0)
+                            }, 100)
                         }
                     }
 

package/test/cases/components/form/tree-select.mjs

@@ -172,7 +172,7 @@ describe('Treeselect', function () {
                     }
 
                     done();
-                }, 0)
+                }, 100)
 
 
             });

package/test/cases/data/transformer.mjs

@@ -110,13 +110,13 @@ describe('Transformer', function () {
             [' if:a: ', false, undefined], // without \\
             [' if:a:\\ ', false, " "],
             [' if:a:\\ ', true, "a"],
+            ['default:undefined:bool', undefined, false],
             ['default:yes', null, 'yes'],
             ['default:yes', undefined, 'yes'],
             ['default:1:bool', undefined, true],
             ['default:on:bool', undefined, true],
             ['default:true:bool', undefined, true],
             ['default:yes:bool', undefined, true],
-            ['default:undefined:bool', undefined, false],
             ['default:false:bool', undefined, false],
             ['default:1:int', undefined, 1],
             ['default:1:string', undefined, '1'],
@@ -190,7 +190,7 @@ describe('Transformer', function () {
                 });
 
                 const r = t.run(b);
-                expect(r).to.be.eql(c);
+                expect(r).to.be.eql(c, "Transformer.run(" + JSON.stringify(a) + ").run(" + JSON.stringify(b) + ") should return " + JSON.stringify(c));
             });
         });