@schukai/monster 3.78.0 → 3.80.0

package/source/components/layout/details.mjs

@@ -188,7 +188,7 @@ function initButtonLabel() {
 		label = "";
 	}
 
-	if (label==="") {
+	if (label === "") {
 		label = this.innerText;
 	}
 

package/source/components/layout/iframe.mjs

@@ -61,7 +61,7 @@ const timerCallbackSymbol = Symbol("timerCallback");
  * @fragments /fragments/components/layout/iframe/
  *
  * @example /examples/components/layout/iframe-simple
- * 
+ *
  * @since 3.76.0
  * @copyright schukai GmbH
  * @summary A cool and fancy Iframe that can make your life easier and also looks good.

package/source/components/layout/width-toggle.mjs

@@ -63,8 +63,8 @@ const MODE_WIDE = "wide";
  *
  * @since 3.57.0
  * @copyright schukai GmbH
- * @summary The WidthToggle component allows users to dynamically change the width of a panel by clicking a button. 
- * @summary This feature improves readability and space utilization by allowing the panel width to be adjusted 
+ * @summary The WidthToggle component allows users to dynamically change the width of a panel by clicking a button.
+ * @summary This feature improves readability and space utilization by allowing the panel width to be adjusted
  * @summary according to user preferences.
  */
 class WidthToggle extends CustomElement {
@@ -124,7 +124,6 @@ class WidthToggle extends CustomElement {
 	 * @throws {Error} - If the mode is not supported.
 	 */
 
-
 	/**
 	 * @param {string} mode
 	 * @returns {WidthToggle}

package/source/components/state/log.mjs

@@ -12,19 +12,19 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    getSlottedElements,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {LogStyleSheet} from "./stylesheet/log.mjs";
-import {Entry} from "./log/entry.mjs";
-import {validateInstance} from "../../types/validate.mjs";
+import { LogStyleSheet } from "./stylesheet/log.mjs";
+import { Entry } from "./log/entry.mjs";
+import { validateInstance } from "../../types/validate.mjs";
 import "./state.mjs";
 
-export {Log};
+export { Log };
 
 /**
  * @private
@@ -72,7 +72,6 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  * @summary Log is a control to show a log message.
  */
 
-
 /**
  * A Log component
  *
@@ -85,124 +84,124 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  * @summary A Log component to show a log message.
  */
 class Log extends CustomElement {
-    /**
-     * @return {void}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-    }
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/state/log@@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
-     * @property {Object} labels Labels
-     * @property {string} labels.nothingToReport Label for empty state
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            labels: {
-                nothingToReport: "There is nothing to report yet.",
-            },
-
-            entries: [],
-        });
-    }
-
-    /**
-     * @return {void}
-     */
-    connectedCallback() {
-        super.connectedCallback();
-
-        const slottedElements = getSlottedElements.call(this);
-        if (slottedElements.size > 0) {
-            this[emptyStateElementSymbol].style.display = "none";
-        }
-    }
-
-    /**
-     * Clear the log
-     *
-     * @return {Log}
-     */
-    clear() {
-        this[logElementSymbol].innerHTML = "";
-        this[emptyStateElementSymbol].style.display = "block";
-        return this;
-    }
-
-    /**
-     * Add an entry to the log
-     * @param entry
-     * @returns {Log}
-     */
-    addEntry(entry) {
-        validateInstance(entry, Entry);
-
-        const entries = this.getOption("entries");
-        entries.push(entry);
-
-        /** this field is not used, but triggers a change event */
-        this.setOption("length", entries.length - 1);
-
-        return this;
-    }
-
-    /**
-     * Add a log message
-     * @param message
-     * @param date
-     * @returns {Log}
-     */
-    addMessage(message, date) {
-        if (!date) {
-            date = new Date();
-        }
-
-        this.addEntry(
-            new Entry({
-                message: message,
-                date: date,
-            }),
-        );
-
-        return this;
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-log";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [LogStyleSheet];
-    }
+	/**
+	 * @return {void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/state/log@@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
+	 * @property {Object} labels Labels
+	 * @property {string} labels.nothingToReport Label for empty state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			labels: {
+				nothingToReport: "There is nothing to report yet.",
+			},
+
+			entries: [],
+		});
+	}
+
+	/**
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		const slottedElements = getSlottedElements.call(this);
+		if (slottedElements.size > 0) {
+			this[emptyStateElementSymbol].style.display = "none";
+		}
+	}
+
+	/**
+	 * Clear the log
+	 *
+	 * @return {Log}
+	 */
+	clear() {
+		this[logElementSymbol].innerHTML = "";
+		this[emptyStateElementSymbol].style.display = "block";
+		return this;
+	}
+
+	/**
+	 * Add an entry to the log
+	 * @param entry
+	 * @returns {Log}
+	 */
+	addEntry(entry) {
+		validateInstance(entry, Entry);
+
+		const entries = this.getOption("entries");
+		entries.push(entry);
+
+		/** this field is not used, but triggers a change event */
+		this.setOption("length", entries.length - 1);
+
+		return this;
+	}
+
+	/**
+	 * Add a log message
+	 * @param message
+	 * @param date
+	 * @returns {Log}
+	 */
+	addMessage(message, date) {
+		if (!date) {
+			date = new Date();
+		}
+
+		this.addEntry(
+			new Entry({
+				message: message,
+				date: date,
+			}),
+		);
+
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-log";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [LogStyleSheet];
+	}
 }
 
 /**
@@ -211,37 +210,37 @@ class Log extends CustomElement {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this[logElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=control]",
-    );
-    this[emptyStateElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=empty-state]",
-    );
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[logElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
+	this[emptyStateElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=empty-state]",
+	);
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
 
-    this.shadowRoot.addEventListener("slotchange", (event) => {
-        const slottedElements = getSlottedElements.call(this);
+	this.shadowRoot.addEventListener("slotchange", (event) => {
+		const slottedElements = getSlottedElements.call(this);
 
-        if (slottedElements.size > 0) {
-            this[emptyStateElementSymbol].style.display = "none";
-        } else {
-            this[emptyStateElementSymbol].style.display = "block";
-        }
-    });
+		if (slottedElements.size > 0) {
+			this[emptyStateElementSymbol].style.display = "none";
+		} else {
+			this[emptyStateElementSymbol].style.display = "block";
+		}
+	});
 
-    return this;
+	return this;
 }
 
 /**
@@ -249,8 +248,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <template id="entry">
             <li data-monster-role="entry">
                 <span></span>

package/source/components/state/state.mjs

@@ -53,7 +53,7 @@ class State extends CustomControl {
 	 * @returns {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/state/state@@instance"); 
+		return Symbol.for("@schukai/monster/components/state/state@@instance");
 	}
 
 	/**

package/source/components/stylesheet/form.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-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 {FormStyleSheet}
+export { FormStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {FormStyleSheet}
 const FormStyleSheet = new CSSStyleSheet();
 
 try {
-  FormStyleSheet.insertRule(`
+	FormStyleSheet.insertRule(
+		`
 @layer form { 
 input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

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

@@ -12,7 +12,7 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
+import { instanceSymbol } from "../../constants.mjs";
 import { buildTree } from "../../data/buildtree.mjs";
 import { Datasource } from "../datatable/datasource.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
@@ -101,7 +101,6 @@ const openEntryEventHandlerSymbol = Symbol("openEntryEventHandler");
  * @fires Monster.Components.TreeMenu.event:monster-fetched
  */
 class TreeMenu extends CustomElement {
-
 	/**
 	 * This method is called by the `instanceof` operator.
 	 * @returns {symbol}
@@ -251,7 +250,7 @@ class TreeMenu extends CustomElement {
 		if (!currentNode) {
 			return;
 		}
-		
+
 		currentNode.click();
 
 		let intend = parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));

package/source/dom/customelement.mjs

@@ -327,6 +327,10 @@ class CustomElement extends HTMLElement {
 	 * @property {Object} templates Specifies the templates used by the control.
 	 * @property {string} templates.main=undefined Specifies the main template used by the control.
 	 * @property {Object} templateMapping Specifies the mapping of templates.
+	 * @property {Object} templateFormatter Specifies the formatter for the templates.
+	 * @property {Object} templateFormatter.marker Specifies the marker for the templates.
+	 * @property {Function} templateFormatter.marker.open=null Specifies the opening marker for the templates.
+	 * @property {Function} templateFormatter.marker.close=null Specifies the closing marker for the templates.
 	 * @property {Boolean} eventProcessing=false Specifies whether the control processes events.
 	 * @since 1.8.0
 	 */
@@ -339,6 +343,12 @@ class CustomElement extends HTMLElement {
 				main: undefined,
 			},
 			templateMapping: {},
+			templateFormatter: {
+				marker: {
+					open: null,
+					close: null,
+				},
+			},
 
 			eventProcessing: false,
 		};
@@ -1200,7 +1210,14 @@ function initShadowRoot() {
 
 	const mapping = this.getOption("templateMapping", {});
 	if (isObject(mapping)) {
-		html = new Formatter(mapping).format(html);
+		const formatter = new Formatter(mapping);
+		if (this.getOption("templateFormatter.marker.open")!==null) {
+			formatter.setMarker(
+				this.getOption("templateFormatter.marker.open"),
+				this.getOption("templateFormatter.marker.close"),
+			);
+		}
+		html = formatter.format(html);
 	}
 
 	this.shadowRoot.innerHTML = html;

package/source/i18n/translations.mjs

@@ -217,10 +217,9 @@ class Translations extends Base {
  * @param {HTMLElement|undefined} [element] - Element to search for translations. Default: element with objectlink @schukai/monster/i18n/translations@@link.
  * @returns {Translations}
  * @throws {Error} Element is not an HTMLElement.
- * @throws {Error} Cannot find element with translations. Add a translations object to the document.
+ * @throws {Error} Cannot find the element with translations. Add the translation object to the document.
  * @throws {Error} This element has no translations.
  * @throws {Error} Missing translations.
- * @memberOf Monster.I18n
  */
 function getDocumentTranslations(element) {
 	const d = getDocument();
@@ -231,7 +230,7 @@ function getDocumentTranslations(element) {
 		);
 		if (element === null) {
 			throw new Error(
-				"Cannot find element with translations. Add a translations object to the document.",
+				"Cannot find the element with translations. Add the translation object to the document.",
 			);
 		}
 	}

package/source/monster.mjs

@@ -27,6 +27,7 @@ export * from "./components/layout/width-toggle.mjs";
 export * from "./components/layout/panel.mjs";
 export * from "./components/layout/details.mjs";
 export * from "./components/layout/slider.mjs";
+export * from "./components/content/copy.mjs";
 export * from "./components/form/message-state-button.mjs";
 export * from "./components/form/button-bar.mjs";
 export * from "./components/form/reload.mjs";
@@ -55,7 +56,7 @@ export * from "./components/form/constants.mjs";
 export * from "./components/notify/message.mjs";
 export * from "./components/notify/notify.mjs";
 export * from "./components/notify/constants.mjs";
-//export * from "./components/tree-menu/dragable-tree-menu.mjs";
+export * from "./components/tree-menu/dragable-tree-menu.mjs";
 export * from "./components/tree-menu/tree-menu.mjs";
 export * from "./components/host/collapse.mjs";
 export * from "./components/host/config-manager.mjs";

package/source/types/version.mjs

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

package/test/cases/monster.mjs

@@ -7,7 +7,7 @@ describe('Monster', function () {
         let monsterVersion
 
         /** don´t touch, replaced by make with package.json version */
-        monsterVersion = new Version("3.74.0")
+        monsterVersion = new Version("3.79.0")
 
         let m = getMonsterVersion();
 

package/test/util/jsdom.mjs

@@ -58,6 +58,7 @@ function initJSDOM(options) {
                     'HTMLFormElement',
                     'HTMLInputElement',
                     'HTMLScriptElement',
+                    'requestAnimationFrame',
                     'HTMLSelectElement',
                     'HTMLTemplateElement',
                     'HTMLTextAreaElement',
@@ -77,8 +78,6 @@ function initJSDOM(options) {
                     } catch(e) {
                         console.error("Error setting key", key, e);
                     }
-                    
-                    
                 });
 
                 import("dom-storage").then(({default: Storage}) => {

package/test/web/test.html

@@ -9,8 +9,8 @@
 </head>
 <body>
 <div id="headline" style="display: flex;align-items: center;justify-content: center;flex-direction: column;">
-  <h1 style='margin-bottom: 0.1em;'>Monster 3.74.0</h1>
-  <div id="lastupdate" style='font-size:0.7em'>last update Fr 20. Sep 17:42:55 CEST 2024</div>
+  <h1 style='margin-bottom: 0.1em;'>Monster 3.79.0</h1>
+  <div id="lastupdate" style='font-size:0.7em'>last update So 6. Okt 14:31:55 CEST 2024</div>
 </div>
 <div id="mocha-errors"
      style="color: red;font-weight: bold;display: flex;align-items: center;justify-content: center;flex-direction: column;margin:20px;"></div>