@schukai/monster 3.92.1 → 3.92.3

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 
 
+## [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
+
+- **toggle-switch:** remove throw
+### Changes
+
+- update issues
+
+
+
 ## [3.92.1] - 2024-12-18
 
 ### 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.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.3"}

package/source/components/form/action-button.mjs

@@ -47,6 +47,8 @@ const containerElementSymbol = Symbol("containerElement");
  *
  * @example /examples/components/form/action-button
  *
+ * @issue https://localhost.alvine.dev:8443/development/issues/closed/264.html
+ *
  * @since 3.32.0
  * @copyright schukai GmbH
  * @summary The ActionButton is a button that opens a popper element with possible actions

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/form/toggle-switch.mjs

@@ -109,10 +109,10 @@ class ToggleSwitch extends CustomControl {
 			},
 			actions: {
 				on: () => {
-					throw new Error("the on action is not defined");
+
 				},
 				off: () => {
-					throw new Error("the off action is not defined");
+
 				},
 			},
 		});

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