@schukai/monster 3.56.1 → 3.58.0

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

@@ -0,0 +1,430 @@
+/**
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+import { instanceSymbol } from "../../constants.mjs";
+import { internalSymbol } from "../../constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { ProxyObserver } from "../../types/proxyobserver.mjs";
+
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+	updaterTransformerMethodsSymbol,
+} from "../../dom/customelement.mjs";
+import { isObject } from "../../types/is.mjs";
+import { ToggleSwitchStyleSheet } from "./stylesheet/toggle-switch.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+export { ToggleSwitch };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbol = Symbol("switchElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbolOn = Symbol("switchElementOn");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const switchElementSymbolOff = Symbol("switchElementOff");
+
+/**
+ * @type {string}
+ */
+export const STATE_ON = "on";
+
+/**
+ * @type {string}
+ */
+export const STATE_OFF = "off";
+
+/**
+ * This CustomControl creates a ToggleSwitch element
+ *
+ * <img src="./images/switch.png">
+ *
+ *
+ * @startuml toggleswitch.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- ToggleSwitch
+ * @enduml
+ *
+ * @since 3.57.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A simple Switch
+ */
+class ToggleSwitch extends CustomControl {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/form/toggle-switch@@instance",
+		);
+	}
+
+	static getTag() {
+		return "monster-toggle-switch";
+	}
+
+	/**
+	 * 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 {string} value=current value of the element
+	 * @property {Boolean} disabled=disabled=false Disabled state
+	 * @property {Object} classes
+	 * @property {string} classes.on=specifies the class for the on state.
+	 * @property {string} classes.off=specifies the class for the off state.
+	 * @property {Object} values
+	 * @property {string} values.off=specifies the value of the element if it is not selected
+	 * @property {Object} labels
+	 * @property {string} labels.on=specifies the label for the on state.
+	 * @property {string} labels.off=specifies the label for the off state.
+	 * @property {Object} templates
+	 * @property {string} templates.main=specifies the main template used by the control.
+	 *
+	 * @since 3.57.0
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			value: null,
+			disabled: false,
+			classes: {
+				on: "monster-theme-primary-3",
+				off: "monster-theme-primary-2",
+			},
+			values: {
+				on: "on",
+				off: "off",
+			},
+			labels: {
+				"toggle-switch-on": "ON",
+				"toggle-switch-off": "OFF",
+			},
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.ToggleSwitch}
+	 */
+	[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;
+	}
+
+	/**
+	 * updater transformer methods for pipe
+	 *
+	 * @return {function}
+	 */
+	[updaterTransformerMethodsSymbol]() {;
+		return {
+			"state-callback": (Wert) => {
+				return this.state;
+			},
+		};
+	}
+
+	/**
+	 * @return [ToggleSwitchStyleSheet]
+	 */
+	static getCSSStyleSheet() {
+		return [ToggleSwitchStyleSheet];
+	}
+
+	/**
+	 * toggle switch
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.click()
+	 * ```
+	 */
+	click() {
+		toggleValues.call(this);
+	}
+
+	/**
+	 * toggle switch on/off
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.toggle()
+	 * ```
+	 *
+	 * @return {ToggleSwitch}
+	 */
+	toggle() {
+		this.click();
+		return this;
+	}
+
+	/**
+	 * toggle switch on
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.toggleOn()
+	 * ```
+	 *
+	 * @return {ToggleSwitch}
+	 */
+	toggleOn() {
+		this.setOption("value", this.getOption("values.on"));
+		return this;
+	}
+
+	/**
+	 * toggle switch off
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.toggleOff()
+	 * ```
+	 *
+	 * @return {ToggleSwitch}
+	 */
+	toggleOff() {
+		this.setOption("value", this.getOption("values.off"));
+		return this;
+	}
+
+	/**
+	 * returns the status of the element
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * console.log(e.state)
+	 * // ↦ off
+	 * ```
+	 *
+	 * @return {string}
+	 */
+	get state() {
+		return this.getOption("value") === this.getOption("values.on")
+			? STATE_ON
+			: STATE_OFF;
+	}
+
+	/**
+	 * The current value of the Switch
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * console.log(e.value)
+	 * // ↦ on
+	 * ```
+	 *
+	 * @return {string}
+	 */
+	get value() {
+		return this.state === STATE_ON
+			? this.getOption("values.on")
+			: this.getOption("values.off");
+	}
+
+	/**
+	 * Set value
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.value="on"
+	 * ```
+	 *
+	 * @property {string} value
+	 */
+	set value(value) {
+		this.setOption("value", value);
+	}
+}
+
+/**
+ * @private
+ */
+function initControlReferences() {
+	this[switchElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=switch]`,
+	);
+}
+
+/**
+ * @private
+ */
+function toggleClassOn() {
+	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
+}
+
+/**
+ * @private
+ */
+function toggleClass() {;
+	if (this.getOption("value") === this.getOption("values.on")) {
+		toggleClassOn.call(this);
+	} else {
+		toggleClassOff.call(this);
+	}
+}
+
+/**
+ * @private
+ */
+function toggleValues() {;
+
+	if (this.getOption("disabled") === true) {
+		return;
+	}
+
+	if (this.getOption("value") === this.getOption("values.on")) {
+		this.setOption("value", this.getOption("values.off"));
+		this?.setFormValue(this.getOption("value")); // set form value
+	} else {
+		this.setOption("value", this.getOption("values.on"));
+		this?.setFormValue(this.getOption("values.off")); // set form value
+	}
+
+	this.setOption("state", this.state);
+}
+
+/**
+ * @private
+ */
+function validateAndSetValue() {;
+	const value = this.getOption("value");
+
+	const validatedValues = [];
+	validatedValues.push(this.getOption("values.on"));
+	validatedValues.push(this.getOption("values.off"));
+
+	if (validatedValues.includes(value) === false) {
+		addAttributeToken(
+			this,
+			ATTRIBUTE_ERRORMESSAGE,
+			'The value "' +
+				value +
+				'" must be "' +
+				this.getOption("values.on") +
+				'" or "' +
+				this.getOption("values.off"),
+		);
+		this.setOption("disabled", true);
+		this.formDisabledCallback(true);
+	} else {
+		this.setOption("disabled", false);
+		this.formDisabledCallback(false);
+	}
+}
+
+/**
+ * @private
+ * @return {initEventHandler}
+ */
+function initEventHandler() {
+	const self = this;
+	self.addEventListener("keyup", function (event) {
+		if (event.code === "Space") {
+			self[switchElementSymbol].click();
+		}
+	});
+	self.addEventListener("click", function (event) {
+		toggleValues.call(self);
+	});
+	return this;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control" tabindex="0">
+     
+            <div class="switch" data-monster-role="switch" data-monster-attributes="data-monster-state path:value | call:state-callback " >
+                <div class="label on" data-monster-replace="path:labels.toggle-switch-on"></div>
+                <div class="label off" data-monster-replace="path:labels.toggle-switch-off"></div>
+                <div class="switch-slider"></div>
+            </div>
+
+        </div>`;
+}
+
+registerCustomElement(ToggleSwitch);

package/source/data/transformer.mjs

@@ -776,6 +776,36 @@ function transform(value) {
 
 			return translations.getText(key, defaultValue);
 
+		case "set-toggle":
+		case "set-set":
+		case "set-remove":
+			const modifier = args.shift();
+			let delimiter = args.shift();
+			if (delimiter === undefined) {
+				delimiter = " ";
+			}
+
+			const set = new Set(value.split(delimiter));
+			const toggle = new Set(modifier.split(delimiter));
+			if (this.command === "set-toggle") {
+				for (const t of toggle) {
+					if (set.has(t)) {
+						set.delete(t);
+					} else {
+						set.add(t);
+					}
+				}
+			} else if (this.command === "set-set") {
+				for (const t of toggle) {
+					set.add(t);
+				}
+			} else if (this.command === "set-remove") {
+				for (const t of toggle) {
+					set.delete(t);
+				}
+			}
+			return Array.from(set).join(delimiter);
+
 		default:
 			throw new Error(`unknown command ${this.command}`);
 	}

package/source/dom/attributes.mjs

@@ -377,7 +377,7 @@ function findClosestByAttribute(element, key, value) {
 }
 
 /**
- * This function searches, starting from an `HTMLElemement`, for the next element that has a certain attribute.
+ * This function searches, starting from an `HTMLElement`, for the next element that has a certain attribute.
  *
  * ```html
  * <div class="myclass" id="2">

package/source/dom/customcontrol.mjs

@@ -320,9 +320,13 @@ class CustomControl extends CustomElement {
 	 */
 	formDisabledCallback(disabled) {
 		if (disabled) {
-			this.setAttribute("disabled", "");
+			if (!this.hasAttribute("disabled")) {
+				this.setAttribute("disabled", "");
+			}
 		} else {
-			this.removeAttribute("disabled");
+			if (this.hasAttribute("disabled")) {
+				this.removeAttribute("disabled");
+			}
 		}
 	}
 

package/source/dom/customelement.mjs

@@ -26,7 +26,6 @@ import {
 	validateFunction,
 	validateInstance,
 	validateObject,
-	validateString,
 } from "../types/validate.mjs";
 import { clone } from "../util/clone.mjs";
 import {
@@ -47,10 +46,7 @@ import {
 import { findDocumentTemplate, Template } from "./template.mjs";
 import { addObjectWithUpdaterToElement } from "./updater.mjs";
 import { instanceSymbol } from "../constants.mjs";
-import {
-	getDocumentTranslations,
-	Translations,
-} from "../i18n/translations.mjs";
+import { getDocumentTranslations } from "../i18n/translations.mjs";
 import { getSlottedElements } from "./slotted.mjs";
 import { initOptionsFromAttributes } from "./util/init-options-from-attributes.mjs";
 import { setOptionFromAttribute } from "./util/set-option-from-attribute.mjs";
@@ -62,6 +58,7 @@ export {
 	attributeObserverSymbol,
 	registerCustomElement,
 	getSlottedElements,
+	updaterTransformerMethodsSymbol,
 };
 
 /**
@@ -78,6 +75,14 @@ const assembleMethodSymbol = Symbol.for(
 	"@schukai/monster/dom/@@assembleMethodSymbol",
 );
 
+/**
+ * @memberOf Monster.DOM
+ * @type {symbol}
+ */
+const updaterTransformerMethodsSymbol = Symbol.for(
+	"@schukai/monster/dom/@@updaterTransformerMethodsSymbol",
+);
+
 /**
  * this symbol holds the attribute observer callbacks. The key is the attribute name.
  * @memberOf Monster.DOM
@@ -527,6 +532,39 @@ class CustomElement extends HTMLElement {
 		return this;
 	}
 
+	/**
+	 * This method is called once when the object is equipped with update for the dynamic change of the dom.
+	 * The functions returned here can be used as pipe functions in the template.
+	 *
+	 * In the example, the function `my-transformer` is defined. In the template you can use it as follows:
+	 *
+	 * ```html
+	 * <my-element data-monster-option-transformer="path:my-value | call:my-transformer"></my-element>
+	 * ```
+	 *
+	 * @example
+	 * [updaterTransformerMethodsSymbol]() {
+	 *    return {
+	 *       "my-transformer": (value) => {
+	 *           switch (typeof Wert) {
+	 *           case "string":
+	 *               return value + "!";
+	 *           case "Zahl":
+	 *               return value + 1;
+	 *           default:
+	 *               return value;
+	 *           }
+	 *    }
+	 *    };
+	 *  };
+	 *
+	 * @return {object}
+	 * @since 2.43.0
+	 */
+	[updaterTransformerMethodsSymbol]() {
+		return {};
+	}
+
 	/**
 	 * This method is called once when the object is included in the DOM for the first time. It performs the following actions:
 	 * 1. Extracts the options from the attributes and the script tag of the element and sets them.

package/source/dom/events.mjs

@@ -14,7 +14,7 @@ export { fireEvent, fireCustomEvent, findTargetElementFromEvent };
 /**
  * The function sends an event
  *
- * @param {HTMLElement|HTMLCollection|NodeList} element
+ * @param {Element | Node | HTMLCollection | NodeList} element
  * @param {string} type
  * @return {void}
  * @license AGPLv3
@@ -55,8 +55,9 @@ function fireEvent(element, type) {
 /**
  * You can call the function via the monster namespace `new Monster.DOM.fireCustomEvent()`.
  *
- * @param {HTMLElement|HTMLCollection|NodeList} element
+ * @param {Element | Node | HTMLCollection | NodeList} element
  * @param {string} type
+ * @param {object} detail
  * @return {void}
  * @license AGPLv3
  * @since 1.29.0
@@ -66,7 +67,6 @@ function fireEvent(element, type) {
  * @summary Construct and send and event
  */
 function fireCustomEvent(element, type, detail) {
-	const document = getDocument();
 
 	if (element instanceof HTMLElement) {
 		if (!isObject(detail)) {

package/source/dom/updater.mjs

@@ -29,20 +29,23 @@ import { validateArray, validateInstance } from "../types/validate.mjs";
 import { Sleep } from "../util/sleep.mjs";
 import { clone } from "../util/clone.mjs";
 import { trimSpaces } from "../util/trimspaces.mjs";
-import { addToObjectLink } from "./attributes.mjs";
+import { addAttributeToken, addToObjectLink } from "./attributes.mjs";
+import { updaterTransformerMethodsSymbol } from "./customelement.mjs";
 import { findTargetElementFromEvent } from "./events.mjs";
 import { findDocumentTemplate } from "./template.mjs";
 
 export { Updater, addObjectWithUpdaterToElement };
 
 /**
- * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
+ * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be
+ * programmatically adapted via attributes.
  *
  * For example, to include a string from an object, the attribute `data-monster-replace` can be used.
  * a further explanation can be found under [monsterjs.org](https://monsterjs.org/)
  *
- * Changes to attributes are made only when the direct values are changed. If you want to assign changes to other values
- * as well, you have to insert the attribute `data-monster-select-this`. This should be done with care, as it can reduce performance.
+ * Changes to attributes are made only when the direct values are changed. If you want to assign changes
+ * to other values as well, you have to insert the attribute `data-monster-select-this`. This should be
+ * done with care, as it can reduce performance.
  *
  * @externalExample ../../example/dom/updater.mjs
  * @license AGPLv3
@@ -287,8 +290,9 @@ function getControlEventHandler() {
 		if (element === undefined) {
 			return;
 		}
-
-		retrieveAndSetValue.call(this, element);
+		setTimeout(() => {
+			retrieveAndSetValue.call(this, element);
+		}, 0);
 	};
 
 	return this[symbol];
@@ -857,22 +861,14 @@ function handleInputControlAttributeUpdate(element, name, value) {
 		switch (element.type) {
 			case "radio":
 				if (name === "checked") {
-					if (value !== undefined) {
-						element.checked = true;
-					} else {
-						element.checked = false;
-					}
+					element.checked = value !== undefined;
 				}
 
 				break;
 
 			case "checkbox":
 				if (name === "checked") {
-					if (value !== undefined) {
-						element.checked = true;
-					} else {
-						element.checked = false;
-					}
+					element.checked = value !== undefined;
 				}
 
 				break;
@@ -929,6 +925,31 @@ function addObjectWithUpdaterToElement(elements, symbol, object) {
 
 	const result = [];
 
+	const updaterCallbacks = [];
+	const cb = this?.[updaterTransformerMethodsSymbol];
+	if (this instanceof HTMLElement && typeof cb === "function") {
+		const callbacks = cb.call(this);
+		if (typeof callbacks === "object") {
+			for (const [name, callback] of Object.entries(callbacks)) {
+				if (typeof callback === "function") {
+					updaterCallbacks.push([name, callback]);
+				} else {
+					addAttributeToken(
+						this,
+						ATTRIBUTE_ERRORMESSAGE,
+						`onUpdaterPipeCallbacks: ${name} is not a function`,
+					);
+				}
+			}
+		} else {
+			addAttributeToken(
+				this,
+				ATTRIBUTE_ERRORMESSAGE,
+				`onUpdaterPipeCallbacks do not return an object with functions`,
+			);
+		}
+	}
+
 	elements.forEach((element) => {
 		if (!(element instanceof HTMLElement)) return;
 		if (element instanceof HTMLTemplateElement) return;
@@ -936,6 +957,12 @@ function addObjectWithUpdaterToElement(elements, symbol, object) {
 		const u = new Updater(element, object);
 		updaters.add(u);
 
+		if (updaterCallbacks.length > 0) {
+			for (const [name, callback] of updaterCallbacks) {
+				u.setCallback(name, callback);
+			}
+		}
+
 		result.push(
 			u.run().then(() => {
 				return u.enableEventProcessing();