@schukai/monster 4.124.0 → 4.124.2

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 { fireCustomEvent, fireEvent } from "../../dom/events.mjs";
@@ -68,382 +68,382 @@ 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]();
-
-    initDisabledSync.call(this);
-    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.hasAttribute("disabled") || this.getOption("disabled", false)) {
-      return this;
-    }
-    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");
-    fireCustomEvent(this, "monster-change", { value: this.value });
-    fireCustomEvent(this, "monster-changed", { value: this.value });
-    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");
-    fireCustomEvent(this, "monster-change", { value: this.value });
-    fireCustomEvent(this, "monster-changed", { value: this.value });
-    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) {
-    const normalized = normalizeToggleValue.call(this, value);
-    if (
-      normalized === this.getOption("values.on") ||
-      normalized === this.getOption("values.off")
-    ) {
-      if (this.getOption("value") !== normalized) {
-        this.setOption("value", normalized);
-      }
-      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]();
+
+		initDisabledSync.call(this);
+		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.hasAttribute("disabled") || this.getOption("disabled", false)) {
+			return this;
+		}
+		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");
+		fireCustomEvent(this, "monster-change", { value: this.value });
+		fireCustomEvent(this, "monster-changed", { value: this.value });
+		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");
+		fireCustomEvent(this, "monster-change", { value: this.value });
+		fireCustomEvent(this, "monster-changed", { value: this.value });
+		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) {
+		const normalized = normalizeToggleValue.call(this, value);
+		if (
+			normalized === this.getOption("values.on") ||
+			normalized === this.getOption("values.off")
+		) {
+			if (this.getOption("value") !== normalized) {
+				this.setOption("value", normalized);
+			}
+			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 rawValue = this.getOption("value");
-  const value = normalizeToggleValue.call(this, rawValue);
-  if (value !== rawValue) {
-    this.setOption("value", 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[invalidDisabledSymbol] =
-      !!this.getOption("disabled", false) !== true &&
-      this.hasAttribute("disabled") === false;
-    if (this[invalidDisabledSymbol]) {
-      this.setOption("disabled", true);
-    }
-    this.formDisabledCallback(true);
-    showError.call(this);
-    return;
-  }
-  if (this[invalidDisabledSymbol]) {
-    this.setOption("disabled", false);
-    this.formDisabledCallback(false);
-    this[invalidDisabledSymbol] = false;
-  }
-
-  if (value === this.getOption("values.on")) {
-    toggleOn.call(this);
-    return;
-  }
-
-  toggleOff.call(this);
+	const rawValue = this.getOption("value");
+	const value = normalizeToggleValue.call(this, rawValue);
+	if (value !== rawValue) {
+		this.setOption("value", 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[invalidDisabledSymbol] =
+			!!this.getOption("disabled", false) !== true &&
+			this.hasAttribute("disabled") === false;
+		if (this[invalidDisabledSymbol]) {
+			this.setOption("disabled", true);
+		}
+		this.formDisabledCallback(true);
+		showError.call(this);
+		return;
+	}
+	if (this[invalidDisabledSymbol]) {
+		this.setOption("disabled", false);
+		this.formDisabledCallback(false);
+		this[invalidDisabledSymbol] = false;
+	}
+
+	if (value === this.getOption("values.on")) {
+		toggleOn.call(this);
+		return;
+	}
+
+	toggleOff.call(this);
 }
 
 /**
@@ -452,50 +452,50 @@ function validateAndSetValue() {
  * @return {*}
  */
 function normalizeToggleValue(value) {
-  const onValue = this.getOption("values.on");
-  const offValue = this.getOption("values.off");
-
-  if (value === onValue || value === offValue) {
-    return value;
-  }
-
-  const token = normalizeToggleToken(value);
-  if (!token) {
-    return value;
-  }
-
-  const onToken = normalizeToggleToken(onValue);
-  const offToken = normalizeToggleToken(offValue);
-
-  if (token === "on") {
-    if (onToken === "on" || offToken === "on") {
-      return onToken === "on" ? onValue : offValue;
-    }
-    return onValue;
-  }
-
-  if (token === "off") {
-    if (onToken === "off" || offToken === "off") {
-      return onToken === "off" ? onValue : offValue;
-    }
-    return offValue;
-  }
-
-  if (token === "true") {
-    if (onToken === "true" || offToken === "true") {
-      return onToken === "true" ? onValue : offValue;
-    }
-    return onValue;
-  }
-
-  if (token === "false") {
-    if (onToken === "false" || offToken === "false") {
-      return onToken === "false" ? onValue : offValue;
-    }
-    return offValue;
-  }
-
-  return value;
+	const onValue = this.getOption("values.on");
+	const offValue = this.getOption("values.off");
+
+	if (value === onValue || value === offValue) {
+		return value;
+	}
+
+	const token = normalizeToggleToken(value);
+	if (!token) {
+		return value;
+	}
+
+	const onToken = normalizeToggleToken(onValue);
+	const offToken = normalizeToggleToken(offValue);
+
+	if (token === "on") {
+		if (onToken === "on" || offToken === "on") {
+			return onToken === "on" ? onValue : offValue;
+		}
+		return onValue;
+	}
+
+	if (token === "off") {
+		if (onToken === "off" || offToken === "off") {
+			return onToken === "off" ? onValue : offValue;
+		}
+		return offValue;
+	}
+
+	if (token === "true") {
+		if (onToken === "true" || offToken === "true") {
+			return onToken === "true" ? onValue : offValue;
+		}
+		return onValue;
+	}
+
+	if (token === "false") {
+		if (onToken === "false" || offToken === "false") {
+			return onToken === "false" ? onValue : offValue;
+		}
+		return offValue;
+	}
+
+	return value;
 }
 
 /**
@@ -504,19 +504,19 @@ function normalizeToggleValue(value) {
  * @return {string|undefined}
  */
 function normalizeToggleToken(value) {
-  if (value === true || value === "true" || value === "TRUE") {
-    return "true";
-  }
-  if (value === false || value === "false" || value === "FALSE") {
-    return "false";
-  }
-  if (value === "on" || value === "ON") {
-    return "on";
-  }
-  if (value === "off" || value === "OFF") {
-    return "off";
-  }
-  return undefined;
+	if (value === true || value === "true" || value === "TRUE") {
+		return "true";
+	}
+	if (value === false || value === "false" || value === "FALSE") {
+		return "false";
+	}
+	if (value === "on" || value === "ON") {
+		return "on";
+	}
+	if (value === "off" || value === "OFF") {
+		return "off";
+	}
+	return undefined;
 }
 
 /**
@@ -524,36 +524,36 @@ function normalizeToggleToken(value) {
  * @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;
 }
 
 /**
@@ -561,38 +561,38 @@ function initEventHandler() {
  * @return {ToggleSwitch}
  */
 function initDisabledSync() {
-  const self = this;
-  const syncDisabled = () => {
-    const disabledOption = !!self.getOption("disabled", false);
-    const hasDisabledAttr = self.hasAttribute("disabled");
-    const optionAttr = self.getAttribute("data-monster-option-disabled");
-    const optionAttrDisabled =
-      optionAttr !== null && optionAttr.toLowerCase() !== "false";
-    const desiredDisabled =
-      disabledOption || hasDisabledAttr || optionAttrDisabled;
-
-    if (desiredDisabled && !disabledOption) {
-      self.setOption("disabled", true);
-    }
-
-    if (desiredDisabled && !hasDisabledAttr) {
-      self.setAttribute("disabled", "");
-    }
-
-    if (!desiredDisabled) {
-      if (hasDisabledAttr) {
-        self.removeAttribute("disabled");
-      }
-      if (disabledOption) {
-        self.setOption("disabled", false);
-      }
-    }
-  };
-
-  syncDisabled();
-  self.attachObserver(new Observer(syncDisabled));
-
-  return this;
+	const self = this;
+	const syncDisabled = () => {
+		const disabledOption = !!self.getOption("disabled", false);
+		const hasDisabledAttr = self.hasAttribute("disabled");
+		const optionAttr = self.getAttribute("data-monster-option-disabled");
+		const optionAttrDisabled =
+			optionAttr !== null && optionAttr.toLowerCase() !== "false";
+		const desiredDisabled =
+			disabledOption || hasDisabledAttr || optionAttrDisabled;
+
+		if (desiredDisabled && !disabledOption) {
+			self.setOption("disabled", true);
+		}
+
+		if (desiredDisabled && !hasDisabledAttr) {
+			self.setAttribute("disabled", "");
+		}
+
+		if (!desiredDisabled) {
+			if (hasDisabledAttr) {
+				self.removeAttribute("disabled");
+			}
+			if (disabledOption) {
+				self.setOption("disabled", false);
+			}
+		}
+	};
+
+	syncDisabled();
+	self.attachObserver(new Observer(syncDisabled));
+
+	return this;
 }
 
 /**
@@ -600,8 +600,8 @@ function initDisabledSync() {
  * @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">