@schukai/monster 3.96.0 → 3.96.2

package/source/components/form/toggle-switch.mjs

@@ -12,8 +12,7 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { internalSymbol } from "../../constants.mjs";
+import { instanceSymbol, internalSymbol } from "../../constants.mjs";
 import { CustomControl } from "../../dom/customcontrol.mjs";
 import { Observer } from "../../types/observer.mjs";
 import { ProxyObserver } from "../../types/proxyobserver.mjs";
@@ -24,12 +23,14 @@ import {
 	registerCustomElement,
 	updaterTransformerMethodsSymbol,
 } from "../../dom/customelement.mjs";
-import { isObject, isFunction } from "../../types/is.mjs";
+import { isFunction, isObject } from "../../types/is.mjs";
 import { ToggleSwitchStyleSheet } from "./stylesheet/toggle-switch.mjs";
 import {
 	ATTRIBUTE_ERRORMESSAGE,
 	ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
+import { getWindow } from "../../dom/util.mjs";
+import { fireEvent } from "../../dom/events.mjs";
 
 export { ToggleSwitch };
 
@@ -54,7 +55,7 @@ export const STATE_OFF = "off";
  *
  * @fragments /fragments/components/form/toggle-switch
  *
- * @example /examples/components/form/toggle-switch-simple
+ * @example /examples/components/form/toggle-switch-simple Simple example
  *
  * @since 3.57.0
  * @copyright schukai GmbH
@@ -85,7 +86,7 @@ class ToggleSwitch extends CustomControl {
 	 * @property {string} actions.on=specifies the action for the on state.
 	 * @property {string} actions.off=specifies the action for the off state.
 	 * @property {Object} templates
-	 * @property {string} templates.main=specifies the main template used by the control.
+	 * @property {string} templates.main the main template used by the control.
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -95,6 +96,7 @@ class ToggleSwitch extends CustomControl {
 				on: "monster-theme-on",
 				off: "monster-theme-off",
 				handle: "monster-theme-primary-1",
+				error: "monster-theme-error-1",
 			},
 			values: {
 				on: "on",
@@ -115,53 +117,43 @@ class ToggleSwitch extends CustomControl {
 	}
 
 	/**
-	 * @return {ToggleSwitch}
+	 * @return {void}
 	 */
 	[assembleMethodSymbol]() {
 		const self = this;
 		super[assembleMethodSymbol]();
+
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 
-		/**
-		 * init value to off
-		 * if the value was not defined before inserting it into the HTML
-		 */
-		if (self.getOption("value") === null) {
-			self.setOption("value", self.getOption("values.off"));
-		}
-
-		/**
-		 * value from attribute
-		 */
-		if (self.hasAttribute("value")) {
-			self.setOption("value", self.getAttribute("value"));
-		}
-
-		/**
-		 * validate value
-		 */
-		validateAndSetValue.call(self);
-
-		if (this.state === STATE_ON) {
-			toggleClassOn.call(self);
-		} else {
-			toggleClassOff.call(self);
-		}
-
-		/**
-		 * is called when options changed
-		 */
-		self[internalSymbol].attachObserver(
-			new Observer(function () {
-				if (isObject(this) && this instanceof ProxyObserver) {
-					validateAndSetValue.call(self);
-					toggleClass.call(self);
-				}
-			}),
-		);
-
-		return this;
+		getWindow().requestAnimationFrame(() => {
+			/**
+			 * init value to off
+			 * if the value was not defined before inserting it into the HTML
+			 */
+			if (self.getOption("value") === null) {
+				self.setOption("value", self.getOption("values.off"));
+			}
+
+			/**
+			 * value from attribute
+			 */
+			if (self.hasAttribute("value")) {
+				self.setOption("value", self.getAttribute("value"));
+			}
+
+			/**
+			 * validate value
+			 */
+			validateAndSetValue.call(self);
+
+			// this state is a getter
+			if (this.state === STATE_ON) {
+				toggleOn.call(self);
+			} else {
+				toggleOff.call(self);
+			}
+		});
 	}
 
 	/**
@@ -193,7 +185,7 @@ class ToggleSwitch extends CustomControl {
 	 * ```
 	 */
 	click() {
-		toggleValues.call(this);
+		this.toggle();
 	}
 
 	/**
@@ -207,8 +199,10 @@ class ToggleSwitch extends CustomControl {
 	 * @return {ToggleSwitch}
 	 */
 	toggle() {
-		this.click();
-		return this;
+		if (this.getOption("value") === this.getOption("values.on")) {
+			return this.toggleOff();
+		}
+		return this.toggleOn();
 	}
 
 	/**
@@ -223,6 +217,7 @@ class ToggleSwitch extends CustomControl {
 	 */
 	toggleOn() {
 		this.setOption("value", this.getOption("values.on"));
+		fireEvent(this, "change");
 		return this;
 	}
 
@@ -238,6 +233,7 @@ class ToggleSwitch extends CustomControl {
 	 */
 	toggleOff() {
 		this.setOption("value", this.getOption("values.off"));
+		fireEvent(this, "change");
 		return this;
 	}
 
@@ -270,9 +266,7 @@ class ToggleSwitch extends CustomControl {
 	 * @return {string}
 	 */
 	get value() {
-		return this.state === STATE_ON
-			? this.getOption("values.on")
-			: this.getOption("values.off");
+		return this.getOption("value");
 	}
 
 	/**
@@ -286,7 +280,31 @@ class ToggleSwitch extends CustomControl {
 	 * @property {string} value
 	 */
 	set value(value) {
-		this.setOption("value", value);
+		if (
+			value === this.getOption("values.on") ||
+			value === this.getOption("values.off")
+		) {
+			if (
+				this.state !==
+				(value === this.getOption("values.on") ? STATE_ON : STATE_OFF)
+			) {
+				this.setOption("value", value);
+			}
+			return;
+		}
+
+		addAttributeToken(
+			this,
+			ATTRIBUTE_ERRORMESSAGE,
+			'The value "' +
+				value +
+				'" must be "' +
+				this.getOption("values.on") +
+				'" or "' +
+				this.getOption("values.off"),
+		);
+
+		showError.call(this);
 	}
 
 	/**
@@ -299,6 +317,10 @@ class ToggleSwitch extends CustomControl {
 		);
 	}
 
+	/**
+	 *
+	 * @returns {string}
+	 */
 	static getTag() {
 		return "monster-toggle-switch";
 	}
@@ -316,56 +338,53 @@ function initControlReferences() {
 /**
  * @private
  */
-function toggleClassOn() {
+function toggleOn() {
+	if (!this[switchElementSymbol]) {
+		return;
+	}
+
 	this[switchElementSymbol].classList.remove(this.getOption("classes.off")); // change color
 	this[switchElementSymbol].classList.add(this.getOption("classes.on")); // change color
-}
 
-/**
- * @private
- */
-function toggleClassOff() {
-	this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
-	this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
-}
+	const callback = this.getOption("actions.on");
+	if (isFunction(callback)) {
+		callback.call(this);
+	}
 
-/**
- * @private
- */
-function toggleClass() {
-	if (this.getOption("value") === this.getOption("values.on")) {
-		toggleClassOn.call(this);
-	} else {
-		toggleClassOff.call(this);
+	if (typeof this.setFormValue === "function") {
+		this.setFormValue(this.getOption("values.on"));
 	}
 }
 
 /**
  * @private
  */
-function toggleValues() {
-	if (this.getOption("disabled") === true) {
+function toggleOff() {
+	if (!this[switchElementSymbol]) {
 		return;
 	}
 
-	let callback, value;
+	this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
+	this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
 
-	if (this.getOption("value") === this.getOption("values.on")) {
-		value = this.getOption("values.off");
-		callback = this.getOption("actions.off");
-	} else {
-		value = this.getOption("values.on");
-		callback = this.getOption("actions.on");
+	const callback = this.getOption("actions.off");
+	if (isFunction(callback)) {
+		callback.call(this);
 	}
 
-	this.setOption("value", value);
-	this?.setFormValue(value);
+	if (typeof this.setFormValue === "function") {
+		this.setFormValue(this.getOption("values.off"));
+	}
+}
 
-	if (isFunction(callback)) {
-		callback.call(this);
+function showError() {
+	if (!this[switchElementSymbol]) {
+		return;
 	}
 
-	this.setOption("state", this.state);
+	this[switchElementSymbol].classList.remove(this.getOption("classes.on"));
+	this[switchElementSymbol].classList.remove(this.getOption("classes.off"));
+	this[switchElementSymbol].classList.add(this.getOption("classes.error"));
 }
 
 /**
@@ -391,10 +410,19 @@ function validateAndSetValue() {
 		);
 		this.setOption("disabled", true);
 		this.formDisabledCallback(true);
-	} else {
-		this.setOption("disabled", false);
-		this.formDisabledCallback(false);
+		showError.call(this);
+		return;
 	}
+
+	this.setOption("disabled", false);
+	this.formDisabledCallback(false);
+
+	if (value === this.getOption("values.on")) {
+		toggleOn.call(this);
+		return;
+	}
+
+	toggleOff.call(this);
 }
 
 /**
@@ -403,14 +431,34 @@ function validateAndSetValue() {
  */
 function initEventHandler() {
 	const self = this;
-	self.addEventListener("keyup", function (event) {
-		if (event.code === "Space") {
-			self[switchElementSymbol].click();
+
+	let lastValue = self.value;
+	self[internalSymbol].attachObserver(
+		new Observer(function () {
+			if (isObject(this) && this instanceof ProxyObserver) {
+				const n = this.getSubject()?.options?.value;
+				if (lastValue !== n) {
+					lastValue = n;
+					validateAndSetValue.call(self);
+				}
+			}
+		}),
+	);
+
+	self.addEventListener("keyup", (event) => {
+		if (event.keyCode === 32) {
+			self.toggle();
 		}
 	});
-	self.addEventListener("click", function (event) {
-		toggleValues.call(self);
+
+	self.addEventListener("click", (event) => {
+		self.toggle();
+	});
+
+	self.addEventListener("touch", (event) => {
+		self.toggle();
 	});
+
 	return this;
 }
 

package/source/components/layout/tabs.mjs

@@ -145,9 +145,9 @@ const resizeObserverSymbol = Symbol("resizeObserver");
  *
  * @fragments /fragments/components/layout/tabs/
  *
- * @example /examples/components/layout/tabs-simple
- * @example /examples/components/layout/tabs-active
- * @example /examples/components/layout/tabs-removable
+ * @example /examples/components/layout/tabs-simple Simple Tabs
+ * @example /examples/components/layout/tabs-active Active Tabs
+ * @example /examples/components/layout/tabs-removable Removable Tabs
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/268.html
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/271.html
@@ -921,8 +921,7 @@ function initTabButtons() {
 	this.setOption("marker", random());
 
 	return adjustButtonVisibility.call(this).then(() => {
-
-		if (!activeReference&& this.getOption("features.openFirst") === true) {
+		if (!activeReference && this.getOption("features.openFirst") === true) {
 			const firstButton = this.getOption("buttons.standard").find(
 				(button) => button.disabled !== true,
 			);

package/source/components/layout/width-toggle.mjs

@@ -59,7 +59,7 @@ const MODE_WIDE = "wide";
  *
  * @fragments /fragments/components/layout/width-toggle/
  *
- * @example /examples/components/layout/width-toggle-simple
+ * @example /examples/components/layout/width-toggle-simple Toggle Width
  *
  * @since 3.57.0
  * @copyright schukai GmbH

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

@@ -73,7 +73,7 @@ const scrollableEventHandlerSymbol = Symbol("scrollableEventHandler");
  *
  * @fragments /fragments/components/form/table-of-content
  *
- * @example /examples/components/form/table-of-content-simple
+ * @example /examples/components/form/table-of-content-simple Table of content
  *
  * @since 3.65.0
  * @copyright schukai GmbH

package/source/components/notify/message.mjs

@@ -70,7 +70,7 @@ const removeEventHandlerSymbol = Symbol("removeEventHandler");
  *
  * @fragments /fragments/components/notify/message
  *
- * @example /examples/components/notify/message-simple
+ * @example /examples/components/notify/message-simple Message
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *

package/source/components/notify/notify.mjs

@@ -49,8 +49,8 @@ const queueSymbol = Symbol("queue");
  *
  * @fragments /fragments/components/notify/notify
  *
- * @example /examples/components/notify/notify-simple
- * @example /examples/components/notify/notify-inline
+ * @example /examples/components/notify/notify-simple Notify
+ * @example /examples/components/notify/notify-inline Inline Notify
  *
  * @issue https://localhost.alvine.dev:8443/development/issues/closed/269.html
  *

package/source/components/state/log.mjs

@@ -44,7 +44,7 @@ const emptyStateElementSymbol = Symbol("emptyStateElement");
  *
  * @fragments /fragments/components/state/log
  *
- * @example /examples/components/state/log-simple
+ * @example /examples/components/state/log-simple Log
  *
  * @issue https://localhost.alvine.dev:8444/development/issues/closed/270.html
  *

package/source/components/state/state.mjs

@@ -27,7 +27,7 @@ export { State };
  *
  * @fragments /fragments/components/state/state
  *
- * @example /examples/components/state/state-simple
+ * @example /examples/components/state/state-simple State
  *
  * @since 1.5.0
  * @copyright schukai GmbH

package/source/components/style/theme.css

@@ -36,7 +36,7 @@
 	color: var(--monster-color-selection-1);
 }
 .monster-border-color-1 {
-	border-color: var(--monster-color-border-1);
+	border-color: var(--monster-color-primary-4);
 }
 .monster-color-neutral-1 {
 	color: var(--monster-color-primary-1);
@@ -119,7 +119,7 @@
 	color: var(--monster-color-selection-2);
 }
 .monster-border-color-2 {
-	border-color: var(--monster-color-border-2);
+	border-color: var(--monster-color-primary-3);
 }
 .monster-color-neutral-2 {
 	color: var(--monster-color-primary-2);
@@ -202,7 +202,7 @@
 	color: var(--monster-color-selection-3);
 }
 .monster-border-color-3 {
-	border-color: var(--monster-color-border-3);
+	border-color: var(--monster-color-primary-2);
 }
 .monster-color-neutral-3 {
 	color: var(--monster-color-primary-3);
@@ -285,7 +285,7 @@
 	color: var(--monster-color-selection-4);
 }
 .monster-border-color-4 {
-	border-color: var(--monster-color-border-4);
+	border-color: var(--monster-color-primary-1);
 }
 .monster-color-neutral-4 {
 	color: var(--monster-color-primary-4);

package/source/dom/constants.mjs

@@ -196,23 +196,25 @@ const ATTRIBUTE_UPDATER_BIND = `${ATTRIBUTE_PREFIX}bind`;
 /**
  * @type {string}
  * @license AGPLv3
- * @since 3.73.0
+ * @since 1.9.0
  */
-const ATTRIBUTE_FORM_BIND = `${ATTRIBUTE_PREFIX}form-bind`;
+const ATTRIBUTE_UPDATER_BIND_TYPE = `${ATTRIBUTE_UPDATER_BIND}-type`;
 
 /**
  * @type {string}
  * @license AGPLv3
+ * @deprecated since 2024-12-29
  * @since 3.73.0
  */
-const ATTRIBUTE_FORM_BIND_TYPE = `${ATTRIBUTE_PREFIX}form-bind-type`;
+const ATTRIBUTE_FORM_BIND = `${ATTRIBUTE_PREFIX}form-bind`;
 
 /**
  * @type {string}
  * @license AGPLv3
- * @since 1.9.0
+ * @since 3.73.0
+ * @deprecated since 2024-12-29
  */
-const ATTRIBUTE_UPDATER_BIND_TYPE = `${ATTRIBUTE_UPDATER_BIND}-type`;
+const ATTRIBUTE_FORM_BIND_TYPE = `${ATTRIBUTE_PREFIX}form-bind-type`;
 
 /**
  * @type {string}

package/source/dom/updater.mjs

@@ -74,7 +74,7 @@ class Updater extends Base {
 	 * @param {object|ProxyObserver|undefined} subject
 	 * @throws {TypeError} value is not a object
 	 * @throws {TypeError} value is not an instance of HTMLElement
-	 * @see {@link Monster.DOM.findDocumentTemplate}
+	 * @see {@link findDocumentTemplate}
 	 */
 	constructor(element, subject) {
 		super();
@@ -305,6 +305,7 @@ function getControlEventHandler() {
 		if (element === undefined) {
 			return;
 		}
+
 		queueMicrotask(() => {
 			retrieveAndSetValue.call(this, element);
 		});
@@ -850,11 +851,7 @@ function handleInputControlAttributeUpdate(element, name, value) {
 		switch (element.type) {
 			case "select-multiple":
 				for (const [index, opt] of Object.entries(element.options)) {
-					if (value.indexOf(opt.value) !== -1) {
-						opt.selected = true;
-					} else {
-						opt.selected = false;
-					}
+					opt.selected = value.indexOf(opt.value) !== -1;
 				}
 
 				break;

package/source/types/version.mjs

@@ -156,7 +156,7 @@ function getMonsterVersion() {
 	}
 
 	/** don't touch, replaced by make with package.json version */
-	monsterVersion = new Version("3.95.2");
+	monsterVersion = new Version("3.96.1");
 
 	return monsterVersion;
 }