@schukai/monster 3.76.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 + "");
 }