@schukai/monster 3.79.0 → 3.80.1

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 + "",
+	);
 }