@schukai/monster 3.75.0 → 3.77.0

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
@@ -71,118 +71,138 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  * @memberOf Monster.Components.State
  * @summary Log is a control to show a log message.
  */
+
+
+/**
+ * A Log component
+ *
+ * @fragments /fragments/components/layout/collapse/
+ *
+ * @example /examples/components/layout/collapse-simple
+ *
+ * @since 3.74.0
+ * @copyright schukai GmbH
+ * @summary A Log component to show a log message.
+ */
 class Log extends CustomElement {
-	/**
-	 *
-	 * @return {Monster.Components.State.State}
-	 */
-	[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/component-state/log");
-	}
-
-	/**
-	 * 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: [],
-		});
-	}
-
-	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;
-	}
-
-	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 {string} message
-	 * @return {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];
+    }
 }
 
 /**
@@ -191,43 +211,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");
-	}
-
-	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";
-		}
-	});
-
-	// self[buttonEventHandlerSymbol] = (event) => {
-	//     self.toggle();
-	// }
-	//
-	// self[buttonElementSymbol].addEventListener('click', self[buttonEventHandlerSymbol]);
-
-	return this;
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
+
+    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";
+        }
+    });
+
+    return this;
 }
 
 /**
@@ -235,8 +249,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

@@ -29,44 +29,20 @@ export { State };
 export const stateElementSymbol = Symbol("state");
 
 /**
- * States tell users that there’s a state. that s it!
+ * A state component
  *
- * <img src="./images/state.png">
+ * @fragments /fragments/components/state/state/
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-state />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-state');` method.
- *
- * ```html
- * <monster-state></monster-state>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import {State} from '@schukai/component-state/source/state.js';
- * document.createElement('monster-state');
- * ```
- *
- * @externalExample ../../../example/components/state/state.mjs
- * @startuml state.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- State
- * @enduml
+ * @example /examples/components/state/state-simple
  *
  * @since 1.5.0
  * @copyright schukai GmbH
- * @memberOf Monster.Components.State
- * @summary States tell users that there’s a state. that s it!
- */
+ * @summary States tell users that there’s a state. That's it!
+ * @summary The state control is used in the log control, among other things.
+ **/
 class State extends CustomControl {
 	/**
-	 *
-	 * @return {Monster.Components.State.State}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
@@ -77,11 +53,11 @@ class State extends CustomControl {
 	 * @returns {symbol}
 	 */
 	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/component-state/state");
+		return Symbol.for("@schukai/monster/components/state/state@@instance"); 
 	}
 
 	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
+	 * 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.

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,17 +22,10 @@ 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,6 +12,7 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
+import {instanceSymbol} from "../../constants.mjs";
 import { buildTree } from "../../data/buildtree.mjs";
 import { Datasource } from "../datatable/datasource.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
@@ -100,6 +101,17 @@ 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}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/tree-menu@@instance");
+	}
+
+	/**
+	 */
 	constructor() {
 		super();
 		this[preventChangeSymbol] = false;
@@ -236,6 +248,10 @@ class TreeMenu extends CustomElement {
 			"[data-monster-insert-reference=entries-" + index + "]",
 		);
 
+		if (!currentNode) {
+			return;
+		}
+		
 		currentNode.click();
 
 		let intend = parseInt(currentNode.getAttribute(ATTRIBUTE_INTEND));
@@ -253,11 +269,6 @@ class TreeMenu extends CustomElement {
 				if (i < intend) {
 					if (ref.getAttribute("data-monster-state") !== "open") {
 						ref.click();
-
-						//console.log(ref.getAttribute("data-monster-state") )
-
-						//refSet.add(ref)
-						//console.log(ref)
 					}
 
 					if (i === 0) {
@@ -267,13 +278,6 @@ class TreeMenu extends CustomElement {
 				}
 				ref = ref.previousElementSibling;
 			}
-
-			// if (refSet.size > 0) {
-			// 	console.log(refSet)
-			// 	refSet.forEach((ref) => {
-			// 		ref.click();
-			// 	})
-			// }
 		}
 	}
 }

package/source/math/random.mjs

@@ -69,10 +69,9 @@ Math.log2 =
  * @throws {Error} the distance is too small to create a random number.
  */
 function create(min, max) {
-	let crypt;
 	const globalReference = getGlobal();
 
-	crypt =
+	const crypt =
 		globalReference?.["crypto"] ||
 		globalReference?.["msCrypto"] ||
 		globalReference?.["crypto"] ||
@@ -99,7 +98,7 @@ function create(min, max) {
 	crypt.getRandomValues(byteArray);
 
 	let p = (bytesNeeded - 1) * 8;
-	for (var i = 0; i < bytesNeeded; i++) {
+	for (let i = 0; i < bytesNeeded; i++) {
 		rval += byteArray[i] * Math.pow(2, p);
 		p -= 8;
 	}

package/source/monster.mjs

@@ -19,6 +19,7 @@
  * @author schukai GmbH
  */
 export * from "./components/layout/collapse.mjs";
+export * from "./components/layout/iframe.mjs";
 export * from "./components/layout/tabs.mjs";
 export * from "./components/layout/split-panel.mjs";
 export * from "./components/layout/popper.mjs";
@@ -54,7 +55,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/test/cases/components/form/button.mjs

@@ -1,5 +1,6 @@
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 

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

@@ -1,7 +1,7 @@
 import {DataUrl} from "../../../../source/types/dataurl.mjs";
 
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 import {ResizeObserverMock} from "../../../util/resize-observer.mjs";

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

@@ -1,5 +1,5 @@
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 import {Datasource} from "../../../../source/data/datasource.mjs";

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

@@ -1,5 +1,5 @@
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {setupIntersectionObserverMock} from "../../../util/intersection-mock.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";

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

@@ -1,5 +1,5 @@
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 import {ResizeObserverMock} from "../../../util/resize-observer.mjs";

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

@@ -1,5 +1,5 @@
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 import {ResizeObserverMock} from "../../../util/resize-observer.mjs";

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

@@ -1,5 +1,5 @@
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {setupIntersectionObserverMock} from "../../../util/intersection-mock.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";

package/test/cases/components/form/toggle-switch.mjs

@@ -1,5 +1,5 @@
 import { getGlobal } from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import { chaiDom } from "../../../util/chai-dom.mjs";
 import { initJSDOM } from "../../../util/jsdom.mjs";
 

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

@@ -1,5 +1,5 @@
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {initJSDOM} from "../../../util/jsdom.mjs";
 

package/test/cases/components/host/details.mjs

@@ -1,6 +1,6 @@
 import {initJSDOM} from "../../../util/jsdom.mjs";
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 import {ResizeObserverMock} from "../../../util/resize-observer.mjs";
 

package/test/cases/components/host/host.mjs

@@ -1,6 +1,6 @@
 import {initJSDOM} from "../../../util/jsdom.mjs";
 import {getGlobal} from "../../../../source/types/global.mjs";
-import chai from "chai"
+import * as chai from 'chai';
 import {chaiDom} from "../../../util/chai-dom.mjs";
 
 let expect = chai.expect;