@schukai/monster 3.92.2 → 3.93.0

package/CHANGELOG.md

@@ -2,6 +2,23 @@
 
 
 
+## [3.93.0] - 2024-12-22
+
+### Add Features
+
+- **log:** update the apearance of the log [#270](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/270)
+
+
+
+## [3.92.3] - 2024-12-20
+
+### Bug Fixes
+
+- **notify:** update small issues [#269](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/269)
+- **select:** update value() to return only value
+
+
+
 ## [3.92.2] - 2024-12-20
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.92.2"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.12","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.93.0"}

package/source/components/datatable/datasource/rest.mjs

@@ -81,6 +81,9 @@ const filterObserverSymbol = Symbol("filterObserver");
  * @copyright schukai GmbH
  * @summary A rest api datasource
  */
+
+
+
 class Rest extends Datasource {
 	/**
 	 * the constructor of the class
@@ -453,6 +456,13 @@ function initFilter() {
 	filterControl.attachObserver(this[filterObserverSymbol]);
 }
 
+/**
+ * @private
+ * @param json
+ * @param response
+ * @param filterControl
+ * @returns {Promise<never>|Promise<Awaited<unknown>>}
+ */
 function handleIntersectionObserver(json, response, filterControl) {
 	const path = new Pathfinder(json);
 
@@ -495,6 +505,9 @@ function initAutoInit() {
 	});
 }
 
+/**
+ * @private
+ */
 function initEventHandler() {
 	this[intersectionObserverHandlerSymbol] = (entries) => {
 		entries.forEach((entry) => {
@@ -515,6 +528,9 @@ function initEventHandler() {
 	};
 }
 
+/**
+ * @private
+ */
 function initIntersectionObserver() {
 	this.classList.add("intersection-observer");
 
@@ -528,6 +544,7 @@ function initIntersectionObserver() {
 		this[intersectionObserverHandlerSymbol],
 		options,
 	);
+
 	this[intersectionObserverObserverSymbol].observe(this);
 }
 

package/source/components/form/select.mjs

@@ -2046,14 +2046,17 @@ function convertSelectionToValue(selection) {
 	if (isArray(selection)) {
 		for (const obj of selection) {
 			const v = obj?.["value"];
-			if (v !== undefined) value.push(v);
+			if (v !== undefined) value.push(`${v}`);
 		}
 	}
 
 	if (value.length === 0) {
 		return "";
 	} else if (value.length === 1) {
-		return value.pop();
+		const v= value.pop();
+		if (v === undefined) return "";
+		if (v === null) return "";
+		return `${v}`;
 	}
 
 	return value.join(",");

package/source/components/navigation/table-of-content.mjs

@@ -71,7 +71,7 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
 /**
  * A TableOfContent
  *
- * @fragments /fragments/components/form/table-of-content/
+ * @fragments /fragments/components/form/table-of-content
  *
  * @example /examples/components/form/table-of-content-simple
  *

package/source/components/notify/message.mjs

@@ -66,35 +66,17 @@ const mouseleaveEventHandlerSymbol = Symbol("mouseleaveEventHandler");
 const removeEventHandlerSymbol = Symbol("removeEventHandler");
 
 /**
- * This CustomControl creates a notification element with a variety of options.
+ * A Message is a notification element that can be used to display messages to the user.
  *
- * <img src="./images/message.png">
+ * @fragments /fragments/components/notify/message
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library.
+ * @example /examples/components/notify/message-simple
  *
- * You can create this control either by specifying the HTML tag `<monster-notify-message />` directly in the HTML
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *
- * ```html
- * <monster-notify-message></monster-notify-message>
- * ```
- *
- * or using Javascript via the `document.createElement('monster-notify');` method.
- *
- * ```javascript
- * import '@schukai/monster/source/components/notify/message.js';
- * document.createElement('monster-notify-message');
- * ```
- *
- * @externalExample ../../../example/components/notify/message.mjs
- * @startuml message.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Message
- * @enduml
  * @since 1.0.0
  * @copyright schukai GmbH
- * @summary A highly configurable select control
+ * @summary The message is a notification element that can be used to display messages to the user. Typically, it is only used in conjunction with the notify container.
  */
 class Message extends CustomElement {
 	/**
@@ -117,14 +99,13 @@ class Message extends CustomElement {
 	 *    })),'application/json',true).toString()
 	 * ```
 	 *
-	 * @property {string} templates Template definitions
 	 * @property {Object} templates Template definitions
-	 * @property {integer} timeout time in milliseconds until the message should be removed. The timeout can be disabled via the feature `disappear`.
-	 * @property {Object} features
-	 * @property {boolean} features.close show close button
-	 * @property {boolean} features.disappear automatically remove the message after the timeout
 	 * @property {string} templates.main Main template
-	 *
+	 * @property {number} timeout The time in milliseconds after which the message disappears
+	 * @property {Object} features The features of the message
+	 * @property {boolean} features.close Whether the message can be closed
+	 * @property {boolean} features.disappear Whether the message disappears after a certain time
+	 * @property {string} content The content of the message
 	 */
 	get defaults() {
 		return Object.assign(
@@ -141,7 +122,6 @@ class Message extends CustomElement {
 					main: getTemplate(),
 				},
 			},
-			initOptionsFromArguments.call(this),
 		);
 	}
 
@@ -152,7 +132,7 @@ class Message extends CustomElement {
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
-		initEventhandler.call(this);
+		initEventHandler.call(this);
 		return this;
 	}
 
@@ -244,30 +224,6 @@ function stopFadeout() {
 	}
 }
 
-/**
- * This attribute can be used to pass a URL to this select.
- *
- * @private
- * @return {object}
- */
-function initOptionsFromArguments() {
-	const options = {};
-
-	const timeout = this.getAttribute(ATTRIBUTE_PREFIX + "timeout");
-	if (isString(timeout)) {
-		try {
-			options["timeout"] = parseInt(timeout, 10);
-		} catch (e) {
-			this.setAttribute(
-				ATTRIBUTE_ERRORMESSAGE,
-				this.getAttribute(ATTRIBUTE_ERRORMESSAGE + ", " + e.toString()),
-			);
-		}
-	}
-
-	return options;
-}
-
 /**
  * @private
  * @return {Message}
@@ -289,7 +245,7 @@ function initControlReferences() {
 /**
  * @private
  */
-function initEventhandler() {
+function initEventHandler() {
 	/**
 	 * @param {Event} event
 	 */

package/source/components/notify/notify.mjs

@@ -45,44 +45,18 @@ const containerElementSymbol = Symbol("containerElement");
 const queueSymbol = Symbol("queue");
 
 /**
- * This CustomControl creates a notification element with a variety of options.
+ * The Notify control
  *
- * <img src="./images/notify.png">
+ * @fragments /fragments/components/notify/notify
  *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library.
+ * @example /examples/components/notify/notify-simple
+ * @example /examples/components/notify/notify-inline
  *
- * You can create this control either by specifying the HTML tag `<monster-notify />` directly in the HTML
- *
- * ```html
- * <monster-notify></monster-notify>
- * ```
- *
- * or using Javascript via the `document.createElement('monster-notify');` method.
- *
- * ```js
- * import '@schukai/monster/source/components/notify/notify.js';
- * document.createElement('monster-notify');
- * ```
- *
- * ## Events
- *
- * The CustomEvent has the property [`detail`](https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/detail).
- *
- * ```
- * node.addEventListener('monster-notify-message',(e)=>console.log(e.detail))
- * ```
- *
- * @externalExample ../../../example/components/notify/notify.mjs
- * @startuml notify.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Notify
- * @enduml
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *
  * @since 1.0.0
  * @copyright schukai GmbH
- * @summary A highly configurable select control
+ * @summary The Notify control is a notification container that can be used to display messages to the user.
  */
 class Notify extends CustomElement {
 	constructor() {
@@ -91,24 +65,12 @@ class Notify extends CustomElement {
 	}
 
 	/**
-	 * The defaults can be set either directly in the object or via an attribute in the HTML tag.
-	 * The value of the attribute `data-monster-options` in the HTML tag must be a JSON string.
-	 *
-	 * ```html
-	 * <monster-notify data-monster-options="{}"></monster-notify>
-	 * ```
-	 *
-	 * Since 1.18.0 the JSON can be specified as a DataURI.
-	 *
-	 * ```
-	 * new Monster.Types.DataUrl(btoa(JSON.stringify({
-	 *        orientation: 'right top'
-	 *    })),'application/json',true).toString()
-	 * ```
-	 *
-	 * @property {string} templates Template definitions
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
+	 * @property {string} orientation The orientation of the notify element. Allowed values for horizontal orientation are "left", "center", "right". Allowed values for vertical orientation are "top" and "bottom".
+	 * @property {object} templates The templates of the notify element.
+	 * @property {string} templates.main The main template of the notify element.
+	 * @property {object} classes The classes of the notify element.
+	 * @property {string} classes.container The container class of the notify element.
+	 * @property {string} classes.control The control class of the notify element.
 	 */
 	get defaults() {
 		return Object.assign(
@@ -119,13 +81,15 @@ class Notify extends CustomElement {
 				templates: {
 					main: getTemplate(),
 				},
+				classes: {
+					container: "",
+					control: "center"
+				}
 			},
-			initOptionsFromArguments.call(this),
 		);
 	}
 
 	/**
-	 *
 	 * @return {Notify}
 	 */
 	[assembleMethodSymbol]() {
@@ -142,7 +106,6 @@ class Notify extends CustomElement {
 	}
 
 	/**
-	 *
 	 * @return {string}
 	 */
 	static getTag() {
@@ -158,9 +121,8 @@ class Notify extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @param {Monster.Components.Notify.Massage|String} message
-	 * @return {Monster.Components.Notify.Notify}
+	 * @param {Massage|String} message
+	 * @return {Notify}
 	 */
 	push(message) {
 		let messageElement = message;
@@ -188,22 +150,6 @@ class Notify extends CustomElement {
 	}
 }
 
-/**
- * This attribute can be used to pass a URL to this select.
- *
- * ```
- * <monster-select data-monster-url="https://example.com/"></monster-select>
- * ```
- *
- * @private
- * @return {object}
- */
-function initOptionsFromArguments() {
-	const options = {};
-
-	return options;
-}
-
 /**
  * @private
  * @return {Select}
@@ -229,10 +175,10 @@ function initControlReferences() {
 function getTemplate() {
 	// language=HTML
 	return `
-        <div data-monster-role="control" part="control" class="center"
-             data-monster-attributes="data-monster-orientation path:orientation">
-            <div data-monster-role="container">
-            </div>
+        <div data-monster-role="control" part="control"
+             data-monster-attributes="data-monster-orientation path:orientation, class path:classes.control">
+			<div data-monster-attributes="class path:classes.container" part="container"
+				 data-monster-role="container"></div>
         </div>
     `;
 }

package/source/components/notify/style/notify.pcss

@@ -19,7 +19,6 @@ div[data-monster-role=control] {
     max-height: 100vH;
     margin: 0;
 
-    position: absolute;
     top: 0;
     right: 0;
 
@@ -31,6 +30,14 @@ div[data-monster-role=control] {
 }
 
 
+div[data-monster-role=control]:not(.inline) {
+    position: absolute;
+}
+
+div[data-monster-role=control].inline {
+    --monster-message-border-shadow: none;
+}
+
 [data-monster-role=control][data-monster-orientation*=left] {
     left: 0;
     right: auto;
@@ -65,11 +72,9 @@ div[data-monster-role=control] {
     width: 100%;
 }
 
-
 [data-monster-role=message] {
 
     display: flex;
-    pointer-events: auto;
     user-select: text;
     width: 100%;
     max-height: 200px;
@@ -98,7 +103,7 @@ div[data-monster-role=control] {
     font-size: .875rem;
     pointer-events: auto;
 
-    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 15%);
+    box-shadow: var(--monster-message-border-shadow, 0 0.5rem 1rem rgb(0 0 0 / 15%));
 
 }
 
@@ -109,8 +114,8 @@ div[data-monster-role=control] {
 [data-monster-role=message].fadeout {
     transition: all 0.2s cubic-bezier(1, -0.04, 0, 1.03);
     max-height: 0;
-    margin-top: 0px;
-    margin-bottom: 0px;
+    margin-top: 0;
+    margin-bottom: 0;
     padding-top: 0;
     padding-bottom: 0;
     border: 0;

package/source/components/notify/stylesheet/notify.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 { NotifyStyleSheet };
+export {NotifyStyleSheet}
 
 /**
  * @private
@@ -22,17 +22,10 @@ export { NotifyStyleSheet };
 const NotifyStyleSheet = new CSSStyleSheet();
 
 try {
-	NotifyStyleSheet.insertRule(
-		`
+  NotifyStyleSheet.insertRule(`
 @layer notify { 
-.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;position:absolute;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:0 .5rem 1rem rgba(0,0,0,.15);color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)} 
-}`,
-		0,
-	);
+.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-border-primary-1,.monster-border-primary-2,.monster-border-primary-3,.monster-border-primary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-0{border-radius:0;border-style:none;border-width:0}.monster-border-primary-1{border-color:var(--monster-bg-color-primary-1)}.monster-border-primary-2{border-color:var(--monster-bg-color-primary-2)}.monster-border-primary-3{border-color:var(--monster-bg-color-primary-3)}.monster-border-primary-4{border-color:var(--monster-bg-color-primary-4)}.monster-border-secondary-1,.monster-border-secondary-2,.monster-border-secondary-3,.monster-border-secondary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-secondary-1{border-color:var(--monster-bg-color-secondary-1)}.monster-border-secondary-2{border-color:var(--monster-bg-color-secondary-2)}.monster-border-secondary-3{border-color:var(--monster-bg-color-secondary-3)}.monster-border-secondary-4{border-color:var(--monster-bg-color-secondary-4)}.monster-border-tertiary-1,.monster-border-tertiary-2,.monster-border-tertiary-3,.monster-border-tertiary-4{border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width)}.monster-border-tertiary-1{border-color:var(--monster-bg-color-tertiary-1)}.monster-border-tertiary-2{border-color:var(--monster-bg-color-tertiary-2)}.monster-border-tertiary-3{border-color:var(--monster-bg-color-tertiary-3)}.monster-border-tertiary-4{border-color:var(--monster-bg-color-tertiary-4)}[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=control]{align-items:flex-start;border:0;box-sizing:border-box;display:flex;flex-direction:row;justify-content:space-between;margin:0;max-height:100vH;pointer-events:none;right:0;top:0;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:25rem;z-index:var(--monster-z-index-modal-overlay)}div[data-monster-role=control]:not(.inline){position:absolute}div[data-monster-role=control].inline{--monster-message-border-shadow:none}[data-monster-role=control][data-monster-orientation*=left]{left:0;right:auto}[data-monster-role=control][data-monster-orientation*=right]{left:auto;right:0}[data-monster-role=control][data-monster-orientation*=center]{left:50%;transform:translate(-50%)}[data-monster-role=control][data-monster-orientation*=bottom]{align-items:flex-end;bottom:0}[data-monster-role=control][data-monster-orientation*=top]{align-items:flex-start;top:0}[data-monster-role=container]{width:100%}[data-monster-role=message]{background-clip:padding-box;background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-message-border-color,rgba(0,0,0,.1));border-radius:var(--monster-message-border-radius,.25rem);border-style:var(--monster-message-border-style,solid);border-width:var(--monster-message-border-width,1px);box-shadow:var(--monster-message-border-shadow,0 .5rem 1rem rgba(0,0,0,.15));color:var(--monster-color-primary-1);display:flex;font-size:.875rem;margin:var(--monster-message-margin-top,15px) var(--monster-message-margin-right,5px) var(--monster-message-margin-bottom,0) var(--monster-message-margin-left,0);max-height:200px;max-width:100%;overflow:hidden;padding:var(--monster-message-padding-top,5px) var(--monster-message-padding-right,5px) var(--monster-message-padding-bottom,5px) var(--monster-message-padding-left,5px);pointer-events:auto;position:relative;text-overflow:ellipsis;-webkit-user-select:text;-moz-user-select:text;user-select:text;width:100%}[data-monster-role=message]:first-child{margin-top:0}[data-monster-role=message].fadeout{border:0;margin-bottom:0;margin-top:0;max-height:0;padding-bottom:0;padding-top:0;transition:all .2s cubic-bezier(1,-.04,0,1.03)} 
+}`, 0);
 } catch (e) {
-	addAttributeToken(
-		document.getRootNode().querySelector("html"),
-		ATTRIBUTE_ERRORMESSAGE,
-		e + "",
-	);
+  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
 }

package/source/components/state/log/entry.mjs

@@ -66,10 +66,10 @@ class Entry extends Base {
 	 */
 	get internalDefaults() {
 		return {
-			title: undefined,
-			message: undefined,
-			user: undefined,
-			date: undefined,
+			title: null,
+			message: null,
+			user: null,
+			date: null,
 		};
 	}
 

package/source/components/state/log.mjs

@@ -21,7 +21,7 @@ import {
 } from "../../dom/customelement.mjs";
 import { LogStyleSheet } from "./stylesheet/log.mjs";
 import { Entry } from "./log/entry.mjs";
-import { validateInstance } from "../../types/validate.mjs";
+import {validateInstance, validateString} from "../../types/validate.mjs";
 import "./state.mjs";
 
 export { Log };
@@ -39,14 +39,16 @@ const logElementSymbol = Symbol("logElement");
 const emptyStateElementSymbol = Symbol("emptyStateElement");
 
 /**
- * A Log component
+ * A log entry
  *
- * @fragments /fragments/components/layout/collapse/
+ * @fragments /fragments/components/state/log
+ *
+ * @example /examples/components/state/log-simple
  *
  * @since 3.74.0
  * @copyright schukai GmbH
- * @summary A Log component to show a log message.
- */
+ * @summary The log entry is a single entry in the log.
+ **/
 class Log extends CustomElement {
 	/**
 	 * @return {void}
@@ -116,7 +118,7 @@ class Log extends CustomElement {
 
 	/**
 	 * Add an entry to the log
-	 * @param entry
+	 * @param {Entry} entry
 	 * @return {Log}
 	 */
 	addEntry(entry) {
@@ -133,15 +135,19 @@ class Log extends CustomElement {
 
 	/**
 	 * Add a log message
-	 * @param message
-	 * @param date
+	 *
+	 * @param {string} message
+	 * @param {Date} date
 	 * @return {Log}
+	 * @throws {TypeError} message is not a string
 	 */
 	addMessage(message, date) {
 		if (!date) {
 			date = new Date();
 		}
 
+		validateString(message);
+
 		this.addEntry(
 			new Entry({
 				message: message,
@@ -213,43 +219,40 @@ function initEventHandler() {
  */
 function getTemplate() {
 	// language=HTML
-	return `
-        <template id="entry">
-            <li data-monster-role="entry">
-                <span></span>
-                <div data-monster-replace="path:entry.title"
-                     data-monster-attributes="class path:entry.title | ?:title:hidden"></div>
-                <div data-monster-replace="path:entry.message"
-                     data-monster-attributes="class path:entry.message | ?:message:hidden"></div>
-                <div data-monster-replace="path:entry.user"
-                     data-monster-attributes="class path:entry.user | ?:user:hidden"></div>
-                <div data-monster-attributes="class path:entry.date | is-set | ?:datetime:hidden">
-                    <span data-monster-replace="path:entry.date | date"></span>
-                    <span data-monster-replace="path:entry.date | time"></span>
-                </div>
-            </li>
-        </template>
-        <div part="control" data-monster-role="control">
-            <div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
-                <monster-state>
-                    <div part="visual">
-                        <svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
-                             xmlns="http://www.w3.org/2000/svg">
-                            <path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0"/>
-                            <path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0"/>
-                            <path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
-                        </svg>
-                    </div>
-                    <div part="content" monster-replace="path:labels.nothingToReport">
-                        There is nothing to report yet.
-                    </div>
-                </monster-state>
+	return `<template id="entry">
+    <li data-monster-role="entry">
+        <span data-monster-replace="path:entry.user"
+              data-monster-attributes="class path:entry.user | ?:user:hidden"></span>
+        <span data-monster-replace="path:entry.title"
+              data-monster-attributes="class path:entry.title | ?:title:hidden"></span>
+        <span data-monster-replace="path:entry.message"
+              data-monster-attributes="class path:entry.message | ?:message:hidden"></span>
+        <span data-monster-replace="path:entry.date | time-ago" data-monster-attributes="title path:entry.date | datetime"></span>
+        
+    </li>
+</template>
+
+<div part="control" data-monster-role="control">
+    <div data-monster-role="empty-state" data-monster-attributes="class path:entries | has-entries | ?:hidden:">
+        <monster-state>
+            <div part="visual">
+                <svg width="4rem" height="4rem" viewBox="0 -12 512.00032 512"
+                     xmlns="http://www.w3.org/2000/svg">
+                    <path d="m455.074219 172.613281 53.996093-53.996093c2.226563-2.222657 3.273438-5.367188 2.828126-8.480469-.441407-3.113281-2.328126-5.839844-5.085938-7.355469l-64.914062-35.644531c-4.839844-2.65625-10.917969-.886719-13.578126 3.953125-2.65625 4.84375-.890624 10.921875 3.953126 13.578125l53.234374 29.230469-46.339843 46.335937-166.667969-91.519531 46.335938-46.335938 46.839843 25.722656c4.839844 2.65625 10.921875.890626 13.578125-3.953124 2.660156-4.839844.890625-10.921876-3.953125-13.578126l-53.417969-29.335937c-3.898437-2.140625-8.742187-1.449219-11.882812 1.695313l-54 54-54-54c-3.144531-3.144532-7.988281-3.832032-11.882812-1.695313l-184.929688 101.546875c-2.757812 1.515625-4.644531 4.238281-5.085938 7.355469-.445312 3.113281.601563 6.257812 2.828126 8.480469l53.996093 53.996093-53.996093 53.992188c-2.226563 2.226562-3.273438 5.367187-2.828126 8.484375.441407 3.113281 2.328126 5.839844 5.085938 7.351562l55.882812 30.6875v102.570313c0 3.652343 1.988282 7.011719 5.1875 8.769531l184.929688 101.542969c1.5.824219 3.15625 1.234375 4.8125 1.234375s3.3125-.410156 4.8125-1.234375l184.929688-101.542969c3.199218-1.757812 5.1875-5.117188 5.1875-8.769531v-102.570313l55.882812-30.683594c2.757812-1.515624 4.644531-4.242187 5.085938-7.355468.445312-3.113282-.601563-6.257813-2.828126-8.480469zm-199.074219 90.132813-164.152344-90.136719 164.152344-90.140625 164.152344 90.140625zm-62.832031-240.367188 46.332031 46.335938-166.667969 91.519531-46.335937-46.335937zm-120.328125 162.609375 166.667968 91.519531-46.339843 46.339844-166.671875-91.519531zm358.089844 184.796875-164.929688 90.5625v-102.222656c0-5.523438-4.476562-10-10-10s-10 4.476562-10 10v102.222656l-164.929688-90.5625v-85.671875l109.046876 59.878907c1.511718.828124 3.167968 1.234374 4.808593 1.234374 2.589844 0 5.152344-1.007812 7.074219-2.929687l54-54 54 54c1.921875 1.925781 4.484375 2.929687 7.074219 2.929687 1.640625 0 3.296875-.40625 4.808593-1.234374l109.046876-59.878907zm-112.09375-46.9375-46.339844-46.34375 166.667968-91.515625 46.34375 46.335938zm0 0"/>
+                    <path d="m404.800781 68.175781c2.628907 0 5.199219-1.070312 7.070313-2.933593 1.859375-1.859376 2.929687-4.4375 2.929687-7.066407 0-2.632812-1.070312-5.210937-2.929687-7.070312-1.859375-1.863281-4.441406-2.929688-7.070313-2.929688-2.640625 0-5.210937 1.066407-7.070312 2.929688-1.871094 1.859375-2.929688 4.4375-2.929688 7.070312 0 2.628907 1.058594 5.207031 2.929688 7.066407 1.859375 1.863281 4.441406 2.933593 7.070312 2.933593zm0 0"/>
+                    <path d="m256 314.925781c-2.628906 0-5.210938 1.066407-7.070312 2.929688-1.859376 1.867187-2.929688 4.4375-2.929688 7.070312 0 2.636719 1.070312 5.207031 2.929688 7.078125 1.859374 1.859375 4.441406 2.921875 7.070312 2.921875s5.210938-1.0625 7.070312-2.921875c1.859376-1.871094 2.929688-4.441406 2.929688-7.078125 0-2.632812-1.070312-5.203125-2.929688-7.070312-1.859374-1.863281-4.441406-2.929688-7.070312-2.929688zm0 0"/>
+                </svg>
             </div>
-            <div data-monster-role="entries">
-                <ul data-monster-insert="entry path:entries">
-                </ul>
+            <div part="content" data-monster-replace="path:labels.nothingToReport">
+                There is nothing to report yet.
             </div>
-        </div>
+        </monster-state>
+    </div>
+    <div data-monster-role="entries">
+        <ul data-monster-insert="entry path:entries">
+        </ul>
+    </div>
+</div>
     `;
 }