@schukai/monster 4.38.2 → 4.38.3

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

@@ -19,15 +19,15 @@ import { ProxyObserver } from "../../types/proxyobserver.mjs";
 
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
-	updaterTransformerMethodsSymbol,
+  assembleMethodSymbol,
+  registerCustomElement,
+  updaterTransformerMethodsSymbol,
 } from "../../dom/customelement.mjs";
 import { isFunction, isObject } from "../../types/is.mjs";
 import { ToggleSwitchStyleSheet } from "./stylesheet/toggle-switch.mjs";
 import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
+  ATTRIBUTE_ERRORMESSAGE,
+  ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
 import { getWindow } from "../../dom/util.mjs";
 import { fireEvent } from "../../dom/events.mjs";
@@ -67,365 +67,365 @@ 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 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);
-
-		setTimeout(() => {
-			/**
-			 * 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);
-			}
-		}, 0);
-	}
-
-	/**
-	 * updater transformer methods for pipe
-	 *
-	 * @return {function}
-	 */
-	[updaterTransformerMethodsSymbol]() {
-		return {
-			"state-callback": () => {
-				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;
-		}
-
-		addErrorAttribute(
-			this,
-			'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";
-	}
+  /**
+   * 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 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);
+
+    setTimeout(() => {
+      /**
+       * 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);
+      }
+    }, 0);
+  }
+
+  /**
+   * updater transformer methods for pipe
+   *
+   * @return {function}
+   */
+  [updaterTransformerMethodsSymbol]() {
+    return {
+      "state-callback": () => {
+        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;
+    }
+
+    addErrorAttribute(
+      this,
+      '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 toggleOn() {
-	if (!this[switchElementSymbol]) {
-		return;
-	}
+  if (!this[switchElementSymbol]) {
+    return;
+  }
 
-	this[switchElementSymbol].classList.remove(this.getOption("classes.off")); // change color
-	this[switchElementSymbol].classList.add(this.getOption("classes.on")); // change color
+  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);
-	}
+  const callback = this.getOption("actions.on");
+  if (isFunction(callback)) {
+    callback.call(this);
+  }
 
-	if (typeof this.setFormValue === "function") {
-		this.setFormValue(this.getOption("values.on"));
-	}
+  if (typeof this.setFormValue === "function") {
+    this.setFormValue(this.getOption("values.on"));
+  }
 }
 
 /**
  * @private
  */
 function toggleOff() {
-	if (!this[switchElementSymbol]) {
-		return;
-	}
+  if (!this[switchElementSymbol]) {
+    return;
+  }
 
-	this[switchElementSymbol].classList.remove(this.getOption("classes.on")); // change color
-	this[switchElementSymbol].classList.add(this.getOption("classes.off")); // change color
+  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.off");
-	if (isFunction(callback)) {
-		callback.call(this);
-	}
+  const callback = this.getOption("actions.off");
+  if (isFunction(callback)) {
+    callback.call(this);
+  }
 
-	if (typeof this.setFormValue === "function") {
-		this.setFormValue(this.getOption("values.off"));
-	}
+  if (typeof this.setFormValue === "function") {
+    this.setFormValue(this.getOption("values.off"));
+  }
 }
 
 /**
  * @private
  */
 function showError() {
-	if (!this[switchElementSymbol]) {
-		return;
-	}
+  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"));
+  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);
-		showError.call(this);
-		return;
-	}
-
-	this.setOption("disabled", false);
-	this.formDisabledCallback(false);
-
-	if (value === this.getOption("values.on")) {
-		toggleOn.call(this);
-		return;
-	}
-
-	toggleOff.call(this);
+  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);
 }
 
 /**
@@ -433,36 +433,36 @@ function validateAndSetValue() {
  * @return {initEventHandler}
  */
 function initEventHandler() {
-	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;
+  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;
 }
 
 /**
@@ -470,8 +470,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">