@schukai/monster 4.43.4 → 4.43.6

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.43.6] - 2025-10-11
+
+### Bug Fixes
+
+- update the workflow navigation  [#329](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/329)
+
+
+
+## [4.43.5] - 2025-10-10
+
+### Bug Fixes
+
+- update site-navigation, optimize hamburger, subnavigation [#336](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/336)
+
+
+
 ## [4.43.4] - 2025-10-09
 
 ### Bug Fixes

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.43.4"}
+{"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.43.6"}

package/source/components/form/password.mjs

@@ -14,8 +14,8 @@ import { instanceSymbol } from "../../constants.mjs";
 import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import { CustomControl } from "../../dom/customcontrol.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+  assembleMethodSymbol,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { PasswordStyleSheet } from "./stylesheet/password.mjs";
 import { fireCustomEvent } from "../../dom/events.mjs";
@@ -61,107 +61,107 @@ export const inputElementSymbol = Symbol("inputIconElement");
  * @fires monster-password-show
  */
 class Password extends CustomControl {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/form/password@@instance");
-	}
+  /**
+   * This method is called by the `instanceof` operator.
+   * @returns {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/form/password@@instance");
+  }
 
-	/**
-	 *
-	 * @return {Components.Form.Password
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-		initPasswordState.call(this);
-		return this;
-	}
+  /**
+   *
+   * @return {Components.Form.Password
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+    initControlReferences.call(this);
+    initEventHandler.call(this);
+    initPasswordState.call(this);
+    return this;
+  }
 
-	/**
-	 * The current value of the Switch
-	 * @return {string}
-	 */
-	get value() {
-		return this.getOption("value");
-	}
+  /**
+   * The current value of the Switch
+   * @return {string}
+   */
+  get value() {
+    return this.getOption("value");
+  }
 
-	/**
-	 * Set value
-	 * @property {string} value
-	 */
-	set value(value) {
-		this.setOption("value", value);
-		this[inputElementSymbol].value = value;
-		this.setFormValue(value);
-	}
+  /**
+   * Set value
+   * @property {string} value
+   */
+  set value(value) {
+    this.setOption("value", value);
+    this[inputElementSymbol].value = value;
+    this.setFormValue(value);
+  }
 
-	/**
-	 * 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 {string} templateMapping.hidden-icon The hidden icon template (without svg tag)
-	 * @property {string} templateMapping.visible-icon The visible icon template (without svg tag)
-	 * @property {string} type="password" The type of the input field
-	 * @property {string} placeholder="" The placeholder of the input field
-	 * @property {boolean} required=false The required state of the input field
-	 * @property {string} autocomplete="off" The autocomplete state of the input field
-	 * @property {string} inputmode="text" The inputmode state of the input field
-	 * @property {Object} aria Aria attributes
-	 * @property {boolean} aria.required=false The required state of the input field
-	 * @property {string} aria.placeholder="" The placeholder of the input field
-	 * @property {boolean} disabled=false Disabled state
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			templateMapping: {
-				"hidden-icon": `                    
+  /**
+   * 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 {string} templateMapping.hidden-icon The hidden icon template (without svg tag)
+   * @property {string} templateMapping.visible-icon The visible icon template (without svg tag)
+   * @property {string} type="password" The type of the input field
+   * @property {string} placeholder="" The placeholder of the input field
+   * @property {boolean} required=false The required state of the input field
+   * @property {string} autocomplete="off" The autocomplete state of the input field
+   * @property {string} inputmode="text" The inputmode state of the input field
+   * @property {Object} aria Aria attributes
+   * @property {boolean} aria.required=false The required state of the input field
+   * @property {string} aria.placeholder="" The placeholder of the input field
+   * @property {boolean} disabled=false Disabled state
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+      templateMapping: {
+        "hidden-icon": `                    
                     <path d="M13.359 11.238C15.06 9.72 16 8 16 8s-3-5.5-8-5.5a7 7 0 0 0-2.79.588l.77.771A6 6 0 0 1 8 3.5c2.12 0 3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755q-.247.248-.517.486z"/>
                     <path d="M11.297 9.176a3.5 3.5 0 0 0-4.474-4.474l.823.823a2.5 2.5 0 0 1 2.829 2.829zm-2.943 1.299.822.822a3.5 3.5 0 0 1-4.474-4.474l.823.823a2.5 2.5 0 0 0 2.829 2.829"/>
                     <path d="M3.35 5.47q-.27.24-.518.487A13 13 0 0 0 1.172 8l.195.288c.335.48.83 1.12 1.465 1.755C4.121 11.332 5.881 12.5 8 12.5c.716 0 1.39-.133 2.02-.36l.77.772A7 7 0 0 1 8 13.5C3 13.5 0 8 0 8s.939-1.721 2.641-3.238l.708.709zm10.296 8.884-12-12 .708-.708 12 12z"/>`,
-				"visible-icon": `
+        "visible-icon": `
                     <path d="M16 8s-3-5.5-8-5.5S0 8 0 8s3 5.5 8 5.5S16 8 16 8M1.173 8a13 13 0 0 1 1.66-2.043C4.12 4.668 5.88 3.5 8 3.5s3.879 1.168 5.168 2.457A13 13 0 0 1 14.828 8q-.086.13-.195.288c-.335.48-.83 1.12-1.465 1.755C11.879 11.332 10.119 12.5 8 12.5s-3.879-1.168-5.168-2.457A13 13 0 0 1 1.172 8z"/>
                     <path d="M8 5.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5M4.5 8a3.5 3.5 0 1 1 7 0 3.5 3.5 0 0 1-7 0"/>`,
-			},
-			type: "password",
-			placeholder: "",
-			required: false,
-			autocomplete: "off",
-			inputmode: "text",
-			aria: {
-				required: false,
-				placeholder: "",
-			},
-			disabled: false,
-			value: null,
+      },
+      type: "password",
+      placeholder: "",
+      required: false,
+      autocomplete: "off",
+      inputmode: "text",
+      aria: {
+        required: false,
+        placeholder: "",
+      },
+      disabled: false,
+      value: null,
 
-			eventProcessing: true,
-		});
-	}
+      eventProcessing: true,
+    });
+  }
 
-	/**
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-password";
-	}
+  /**
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-password";
+  }
 
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [PasswordStyleSheet];
-	}
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [PasswordStyleSheet];
+  }
 }
 
 /**
@@ -171,54 +171,54 @@ class Password extends CustomControl {
  * @fires monster-password-show
  */
 function initEventHandler() {
-	const self = this;
-	const element = this[passwordElementSymbol];
+  const self = this;
+  const element = this[passwordElementSymbol];
 
-	const type = "click";
+  const type = "click";
 
-	this[hiddenIconElementSymbol].addEventListener(type, function (event) {
-		fireCustomEvent(self, "monster-password-show", {
-			element: self,
-		});
+  this[hiddenIconElementSymbol].addEventListener(type, function (event) {
+    fireCustomEvent(self, "monster-password-show", {
+      element: self,
+    });
 
-		requestAnimationFrame(() => {
-			self[visibleIconElementSymbol].classList.remove("hidden");
-			self[hiddenIconElementSymbol].classList.add("hidden");
-			self.setOption("type", "text");
-		});
-	});
+    requestAnimationFrame(() => {
+      self[visibleIconElementSymbol].classList.remove("hidden");
+      self[hiddenIconElementSymbol].classList.add("hidden");
+      self.setOption("type", "text");
+    });
+  });
 
-	this[visibleIconElementSymbol].addEventListener(type, function (event) {
-		fireCustomEvent(self, "monster-password-hide", {
-			element: self,
-		});
+  this[visibleIconElementSymbol].addEventListener(type, function (event) {
+    fireCustomEvent(self, "monster-password-hide", {
+      element: self,
+    });
 
-		requestAnimationFrame(() => {
-			self[visibleIconElementSymbol].classList.add("hidden");
-			self[hiddenIconElementSymbol].classList.remove("hidden");
-			self.setOption("type", "password");
-		});
-	});
+    requestAnimationFrame(() => {
+      self[visibleIconElementSymbol].classList.add("hidden");
+      self[hiddenIconElementSymbol].classList.remove("hidden");
+      self.setOption("type", "password");
+    });
+  });
 
-	this[inputElementSymbol].addEventListener("input", function (event) {
-		self.setFormValue(self.value);
-		self.setOption("value", this.value);
-	});
+  this[inputElementSymbol].addEventListener("input", function (event) {
+    self.setFormValue(self.value);
+    self.setOption("value", this.value);
+  });
 
-	return this;
+  return this;
 }
 
 /**
  * @private
  */
 function initPasswordState() {
-	if (this.getOption("type") === "password") {
-		this[visibleIconElementSymbol].classList.add("hidden");
-		this[hiddenIconElementSymbol].classList.remove("hidden");
-	} else {
-		this[visibleIconElementSymbol].classList.remove("hidden");
-		this[hiddenIconElementSymbol].classList.add("hidden");
-	}
+  if (this.getOption("type") === "password") {
+    this[visibleIconElementSymbol].classList.add("hidden");
+    this[hiddenIconElementSymbol].classList.remove("hidden");
+  } else {
+    this[visibleIconElementSymbol].classList.remove("hidden");
+    this[hiddenIconElementSymbol].classList.add("hidden");
+  }
 }
 
 /**
@@ -226,21 +226,21 @@ function initPasswordState() {
  * @return {void}
  */
 function initControlReferences() {
-	this[passwordElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="control"]`,
-	);
+  this[passwordElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="control"]`,
+  );
 
-	this[visibleIconElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="visible-icon"]`,
-	);
+  this[visibleIconElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="visible-icon"]`,
+  );
 
-	this[hiddenIconElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="hidden-icon"]`,
-	);
+  this[hiddenIconElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="hidden-icon"]`,
+  );
 
-	this[inputElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="input"]`,
-	);
+  this[inputElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="input"]`,
+  );
 }
 
 /**
@@ -248,8 +248,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
         <div data-monster-role="control" part="control">
             <monster-input-group part="input-group">
                 <input data-monster-role="input"