@schukai/monster 4.56.0 → 4.58.0

package/source/components/form/field-set.mjs

@@ -15,14 +15,14 @@
 import { instanceSymbol } from "../../constants.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import {
-  ATTRIBUTE_ERRORMESSAGE,
-  ATTRIBUTE_ROLE,
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
 import { CustomControl } from "../../dom/customcontrol.mjs";
 import {
-  assembleMethodSymbol,
-  getSlottedElements,
-  registerCustomElement,
+	assembleMethodSymbol,
+	getSlottedElements,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { isFunction } from "../../types/is.mjs";
 import { FieldSetStyleSheet } from "./stylesheet/field-set.mjs";
@@ -82,168 +82,168 @@ const extendedSwitchElementSymbol = Symbol("extendedSwitchElement");
  * @summary A field set control
  */
 class FieldSet extends CustomControl {
-  /**
-   * This method is called by the `instanceof` operator.
-   * @return {symbol}
-   */
-  static get [instanceSymbol]() {
-    return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
-  }
-
-  /**
-   * @return {Components.Form.FieldSet
-   */
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-    initControlReferences.call(this);
-    initEventHandler.call(this);
-    updateExtendedFields.call(this);
-    updateColumns.call(this);
-    return this;
-  }
-
-  /**
-   * 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 {Object} templates Template definitions
-   * @property {string} templates.main Main template
-   * @property {Object} labels Label definitions
-   * @property {Object} actions Callbacks
-   * @property {string} actions.click="throw Error" Callback when clicked
-   * @property {Object} features Features
-   * @property {boolean} features.multipleColumns=true Multiple columns
-   * @property {Object} classes CSS classes
-   * @property {boolean} disabled=false Disabled state
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: {
-        main: getTemplate(),
-      },
-      labels: getTranslations(),
-      classes: {
-        content: "collapse-alignment",
-      },
-      disabled: false,
-      features: {
-        multipleColumns: true,
-      },
-      actions: {
-        click: () => {},
-      },
-      value: null,
-    });
-  }
-
-  /**
-   *
-   * @return {string}
-   */
-  static getTag() {
-    return "monster-field-set";
-  }
-
-  /**
-   *
-   * @return {CSSStyleSheet[]}
-   */
-  static getCSSStyleSheet() {
-    return [FieldSetStyleSheet, InvalidStyleSheet];
-  }
-
-  /**
-   * The FieldSet.click() method simulates a click on the internal element.
-   *
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
-   */
-  click() {
-    if (this.getOption("disabled") === true) {
-      return;
-    }
-
-    if (
-      this[fieldSetElementSymbol] &&
-      isFunction(this[fieldSetElementSymbol].click)
-    ) {
-      this[fieldSetElementSymbol].click();
-    }
-  }
-
-  /**
-   * The Button.focus() method sets focus on the internal element.
-   *
-   * @param {Object} options
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
-   */
-  focus(options) {
-    if (this.getOption("disabled") === true) {
-      return;
-    }
-
-    if (
-      this[fieldSetElementSymbol] &&
-      isFunction(this[fieldSetElementSymbol].focus)
-    ) {
-      this[fieldSetElementSymbol].focus(options);
-    }
-  }
-
-  /**
-   * The Button.blur() method removes focus from the internal element.
-   */
-  blur() {
-    if (
-      this[fieldSetElementSymbol] &&
-      isFunction(this[fieldSetElementSymbol].blur)
-    ) {
-      this[fieldSetElementSymbol].blur();
-    }
-  }
-
-  /**
-   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
-   * @return {boolean}
-   */
-  static get formAssociated() {
-    return true;
-  }
-
-  /**
-   * The current value of the form control.
-   *
-   * ```js
-   * e = document.querySelector('monster-field-set');
-   * console.log(e.value)
-   * ```
-   *
-   * @property {string}
-   */
-  get value() {
-    return this.getOption("value");
-  }
-
-  /**
-   * Set the value of the form control.
-   *
-   * ```
-   * e = document.querySelector('monster-field-set');
-   * e.value=1
-   * ```
-   *
-   * @property {string} value
-   * @throws {Error} unsupported type
-   */
-  set value(value) {
-    this.setOption("value", value);
-    try {
-      this?.setFormValue(this.value);
-    } catch (e) {
-      addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-    }
-  }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/fieldset@@instance");
+	}
+
+	/**
+	 * @return {Components.Form.FieldSet
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		updateExtendedFields.call(this);
+		updateColumns.call(this);
+		return this;
+	}
+
+	/**
+	 * 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 {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} labels Label definitions
+	 * @property {Object} actions Callbacks
+	 * @property {string} actions.click="throw Error" Callback when clicked
+	 * @property {Object} features Features
+	 * @property {boolean} features.multipleColumns=true Multiple columns
+	 * @property {Object} classes CSS classes
+	 * @property {boolean} disabled=false Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: getTranslations(),
+			classes: {
+				content: "collapse-alignment",
+			},
+			disabled: false,
+			features: {
+				multipleColumns: true,
+			},
+			actions: {
+				click: () => {},
+			},
+			value: null,
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-field-set";
+	}
+
+	/**
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [FieldSetStyleSheet, InvalidStyleSheet];
+	}
+
+	/**
+	 * The FieldSet.click() method simulates a click on the internal element.
+	 *
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+	 */
+	click() {
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		if (
+			this[fieldSetElementSymbol] &&
+			isFunction(this[fieldSetElementSymbol].click)
+		) {
+			this[fieldSetElementSymbol].click();
+		}
+	}
+
+	/**
+	 * The Button.focus() method sets focus on the internal element.
+	 *
+	 * @param {Object} options
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
+	 */
+	focus(options) {
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		if (
+			this[fieldSetElementSymbol] &&
+			isFunction(this[fieldSetElementSymbol].focus)
+		) {
+			this[fieldSetElementSymbol].focus(options);
+		}
+	}
+
+	/**
+	 * The Button.blur() method removes focus from the internal element.
+	 */
+	blur() {
+		if (
+			this[fieldSetElementSymbol] &&
+			isFunction(this[fieldSetElementSymbol].blur)
+		) {
+			this[fieldSetElementSymbol].blur();
+		}
+	}
+
+	/**
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+	 * @return {boolean}
+	 */
+	static get formAssociated() {
+		return true;
+	}
+
+	/**
+	 * The current value of the form control.
+	 *
+	 * ```js
+	 * e = document.querySelector('monster-field-set');
+	 * console.log(e.value)
+	 * ```
+	 *
+	 * @property {string}
+	 */
+	get value() {
+		return this.getOption("value");
+	}
+
+	/**
+	 * Set the value of the form control.
+	 *
+	 * ```
+	 * e = document.querySelector('monster-field-set');
+	 * e.value=1
+	 * ```
+	 *
+	 * @property {string} value
+	 * @throws {Error} unsupported type
+	 */
+	set value(value) {
+		this.setOption("value", value);
+		try {
+			this?.setFormValue(this.value);
+		} catch (e) {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		}
+	}
 }
 
 /**
@@ -251,97 +251,97 @@ class FieldSet extends CustomControl {
  * @returns {object}
  */
 function getTranslations() {
-  const locale = getLocaleOfDocument();
-  switch (locale.language) {
-    case "de":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Erweitern",
-        title: "",
-      };
-    case "fr":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Développer",
-        title: "",
-      };
-    case "sp":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Expandir",
-        title: "",
-      };
-    case "it":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Espandi",
-        title: "",
-      };
-    case "pl":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Rozwiń",
-        title: "",
-      };
-    case "no":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Utvid",
-        title: "",
-      };
-    case "dk":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Udvid",
-        title: "",
-      };
-    case "sw":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Expandera",
-        title: "",
-      };
-    default:
-    case "en":
-      return {
-        toggleSwitchOn: "✔",
-        toggleSwitchOff: "✖",
-        toggleSwitchLabel: "Expand",
-        title: "",
-      };
-  }
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case "de":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Erweitern",
+				title: "",
+			};
+		case "fr":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Développer",
+				title: "",
+			};
+		case "sp":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expandir",
+				title: "",
+			};
+		case "it":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Espandi",
+				title: "",
+			};
+		case "pl":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Rozwiń",
+				title: "",
+			};
+		case "no":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Utvid",
+				title: "",
+			};
+		case "dk":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Udvid",
+				title: "",
+			};
+		case "sw":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expandera",
+				title: "",
+			};
+		default:
+		case "en":
+			return {
+				toggleSwitchOn: "✔",
+				toggleSwitchOff: "✖",
+				toggleSwitchLabel: "Expand",
+				title: "",
+			};
+	}
 }
 
 /**
  * @private
  */
 function updateExtendedFields() {
-  const nodes = getSlottedElements.call(this, "", "extended");
-  if (nodes.size > 0) {
-    this[extendedSwitchSymbol].classList.remove("hidden");
-  } else {
-    this[extendedSwitchSymbol].classList.add("hidden");
-  }
+	const nodes = getSlottedElements.call(this, "", "extended");
+	if (nodes.size > 0) {
+		this[extendedSwitchSymbol].classList.remove("hidden");
+	} else {
+		this[extendedSwitchSymbol].classList.add("hidden");
+	}
 }
 
 /**
  * @private
  */
 function updateColumns() {
-  if (this.getOption("features.multipleColumns") !== true) {
-    this[fieldSetElementSymbol].classList.remove("multiple-columns");
-    return;
-  }
+	if (this.getOption("features.multipleColumns") !== true) {
+		this[fieldSetElementSymbol].classList.remove("multiple-columns");
+		return;
+	}
 
-  this[fieldSetElementSymbol].classList.add("multiple-columns");
+	this[fieldSetElementSymbol].classList.add("multiple-columns");
 }
 
 /**
@@ -350,53 +350,53 @@ function updateColumns() {
  * @fires monster-field-set-clicked
  */
 function initEventHandler() {
-  this[toggleSwitchElementSymbol].setOption(
-    "labels.toggleSwitchOn",
-    this.getOption("labels.toggleSwitchOn"),
-  );
-  this[toggleSwitchElementSymbol].setOption(
-    "labels.toggleSwitchOff",
-    this.getOption("labels.toggleSwitchOff"),
-  );
-
-  this[toggleSwitchElementSymbol].setOption("actions.on", () => {
-    this[collapseElementSymbol].open();
-  });
-
-  this[toggleSwitchElementSymbol].setOption("actions.off", () => {
-    this[collapseElementSymbol].close();
-  });
-
-  return this;
+	this[toggleSwitchElementSymbol].setOption(
+		"labels.toggleSwitchOn",
+		this.getOption("labels.toggleSwitchOn"),
+	);
+	this[toggleSwitchElementSymbol].setOption(
+		"labels.toggleSwitchOff",
+		this.getOption("labels.toggleSwitchOff"),
+	);
+
+	this[toggleSwitchElementSymbol].setOption("actions.on", () => {
+		this[collapseElementSymbol].open();
+	});
+
+	this[toggleSwitchElementSymbol].setOption("actions.off", () => {
+		this[collapseElementSymbol].close();
+	});
+
+	return this;
 }
 
 /**
  * @private
  */
 function initControlReferences() {
-  this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="control"]`,
-  );
+	this[fieldSetElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"]`,
+	);
 
-  this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="extended-switch"]`,
-  );
+	this[extendedSwitchElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="extended-switch"]`,
+	);
 
-  this[collapseElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="collapse"]`,
-  );
+	this[collapseElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="collapse"]`,
+	);
 
-  this[headerElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="header"]`,
-  );
+	this[headerElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="header"]`,
+	);
 
-  this[extendedSwitchSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="extended-switch"]`,
-  );
+	this[extendedSwitchSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="extended-switch"]`,
+	);
 
-  this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
-    `monster-toggle-switch`,
-  );
+	this[toggleSwitchElementSymbol] = this.shadowRoot.querySelector(
+		`monster-toggle-switch`,
+	);
 }
 
 /**
@@ -404,8 +404,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-  // language=HTML
-  return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <div data-monster-role="header" part="header">
                 <div data-monster-replace="path:labels.title" data-monster-role="title" part="title"></div>