@schukai/monster 3.95.2 → 3.96.1

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

@@ -12,26 +12,24 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-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 {instanceSymbol, 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 {addAttributeToken} from "../../dom/attributes.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
-	updaterTransformerMethodsSymbol,
+    assembleMethodSymbol,
+    registerCustomElement,
+    updaterTransformerMethodsSymbol,
 } from "../../dom/customelement.mjs";
-import { isObject, isFunction } from "../../types/is.mjs";
-import { ToggleSwitchStyleSheet } from "./stylesheet/toggle-switch.mjs";
-import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
-} from "../../dom/constants.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 };
+export {ToggleSwitch};
 
 /**
  * @private
@@ -54,7 +52,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
@@ -65,340 +63,374 @@ export const STATE_OFF = "off";
  * @fires monster-changed
  */
 class ToggleSwitch extends CustomControl {
-	/**
-	 * 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 {string} actions
-	 * @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.
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			value: null,
-			disabled: false,
-			classes: {
-				on: "monster-theme-on",
-				off: "monster-theme-off",
-				handle: "monster-theme-primary-1",
-			},
-			values: {
-				on: "on",
-				off: "off",
-			},
-			labels: {
-				toggleSwitchOn: "✔",
-				toggleSwitchOff: "✖",
-			},
-			templates: {
-				main: getTemplate(),
-			},
-			actions: {
-				on: () => {
-
-				},
-				off: () => {
-
-				},
-			},
-		});
-	}
-
-	/**
-	 * @return {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 [CSSStyleSheet]
-	 */
-	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);
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	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 {string} actions
+     * @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 the main template used by the control.
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            value: null,
+            disabled: false,
+            classes: {
+                on: "monster-theme-on",
+                off: "monster-theme-off",
+                handle: "monster-theme-primary-1",
+                error: "monster-theme-error-1",
+            },
+            values: {
+                on: "on",
+                off: "off",
+            },
+            labels: {
+                toggleSwitchOn: "✔",
+                toggleSwitchOff: "✖",
+            },
+            templates: {
+                main: getTemplate(),
+            },
+            actions: {
+                on: () => {
+                },
+                off: () => {
+                },
+            },
+        });
+    }
+
+    /**
+     * @return {void}
+     */
+    [assembleMethodSymbol]() {
+        const self = this;
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(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);
+            }
+
+        });
+
+    }
+
+    /**
+     * updater transformer methods for pipe
+     *
+     * @return {function}
+     */
+    [updaterTransformerMethodsSymbol]() {
+        return {
+            "state-callback": (Wert) => {
+                return this.state;
+            },
+        };
+    }
+
+    /**
+     * @return [CSSStyleSheet]
+     */
+    static getCSSStyleSheet() {
+        return [ToggleSwitchStyleSheet];
+    }
+
+    /**
+     * toggle switch
+     *
+     * ```
+     * e = document.querySelector('monster-toggle-switch');
+     * e.click()
+     * ```
+     */
+    click() {
+        this.toggle();
+    }
+
+    /**
+     * toggle switch on/off
+     *
+     * ```
+     * e = document.querySelector('monster-toggle-switch');
+     * e.toggle()
+     * ```
+     *
+     * @return {ToggleSwitch}
+     */
+    toggle() {
+        if (this.getOption("value") === this.getOption("values.on")) {
+            return this.toggleOff()
+        }
+        return this.toggleOn()
+    }
+
+    /**
+     * toggle switch on
+     *
+     * ```
+     * e = document.querySelector('monster-toggle-switch');
+     * e.toggleOn()
+     * ```
+     *
+     * @return {ToggleSwitch}
+     */
+    toggleOn() {
+        this.setOption("value", this.getOption("values.on"));
+        fireEvent(this, "change");
+        return this;
+    }
+
+    /**
+     * toggle switch off
+     *
+     * ```
+     * e = document.querySelector('monster-toggle-switch');
+     * e.toggleOff()
+     * ```
+     *
+     * @return {ToggleSwitch}
+     */
+    toggleOff() {
+        this.setOption("value", this.getOption("values.off"));
+        fireEvent(this, "change");
+        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.getOption("value");
+    }
+
+    /**
+     * Set value
+     *
+     * ```
+     * e = document.querySelector('monster-toggle-switch');
+     * e.value="on"
+     * ```
+     *
+     * @property {string} value
+     */
+    set 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);
+
+
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for(
+            "@schukai/monster/components/form/toggle-switch@@instance",
+        );
+    }
+
+    /**
+     *
+     * @returns {string}
+     */
+    static getTag() {
+        return "monster-toggle-switch";
+    }
 }
 
 /**
  * @private
  */
 function initControlReferences() {
-	this[switchElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}=switch]`,
-	);
+    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
-}
+function toggleOn() {
 
-/**
- * @private
- */
-function toggleClass() {
-	if (this.getOption("value") === this.getOption("values.on")) {
-		toggleClassOn.call(this);
-	} else {
-		toggleClassOff.call(this);
-	}
+    if (!this[switchElementSymbol]) {
+        return;
+    }
+
+    this[switchElementSymbol].classList.remove(this.getOption("classes.off")); // change color
+    this[switchElementSymbol].classList.add(this.getOption("classes.on")); // change color
+
+    const callback = this.getOption("actions.on");
+    if (isFunction(callback)) {
+        callback.call(this);
+    }
+
+    if (typeof this.setFormValue === "function") {
+        this.setFormValue(this.getOption("values.on"));
+    }
 }
 
 /**
  * @private
  */
-function toggleValues() {
-	if (this.getOption("disabled") === true) {
-		return;
-	}
+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);
-	}
 
-	this.setOption("state", this.state);
+}
+
+function showError() {
+
+    if (!this[switchElementSymbol]) {
+        return;
+    }
+
+    this[switchElementSymbol].classList.remove(this.getOption("classes.on"));
+    this[switchElementSymbol].classList.remove(this.getOption("classes.off"));
+    this[switchElementSymbol].classList.add(this.getOption("classes.error"));
 }
 
 /**
  * @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);
-	}
+
+    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);
+        showError.call(this);
+        return;
+    }
+
+    this.setOption("disabled", false);
+    this.formDisabledCallback(false);
+
+    if (value === this.getOption("values.on")) {
+        toggleOn.call(this);
+        return;
+    }
+
+    toggleOff.call(this);
+
+
 }
 
 /**
@@ -406,16 +438,36 @@ function validateAndSetValue() {
  * @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;
+    const self = this;
+
+    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", (event) => {
+        self.toggle();
+    });
+
+    self.addEventListener("touch", (event) => {
+        self.toggle();
+    });
+
+    return this;
 }
 
 /**
@@ -423,8 +475,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // 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">