@schukai/monster 4.46.0 → 4.46.2

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.46.2] - 2025-11-19
+
+### Bug Fixes
+
+- field-set-alignment should be changeable
+
+
+
+## [4.46.1] - 2025-11-18
+
+### Bug Fixes
+
+- update doc
+### Changes
+
+- update node
+
+
+
 ## [4.46.0] - 2025-11-18
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.46.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.46.2"}

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,166 +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: {},
-			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);
+    }
+  }
 }
 
 /**
@@ -249,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");
 }
 
 /**
@@ -348,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`,
+  );
 }
 
 /**
@@ -402,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>
@@ -413,7 +415,8 @@ function getTemplate() {
                 </div>
             </div>
             <div data-monster-role="container" part="container">
-                <div class="collapse-alignment" part="content">
+                <div data-monster-attributes="class path:classes.content"
+                    part="content">
                     <slot></slot>
                 </div>
                 <monster-collapse data-monster-role="collapse" part="collapse">