@schukai/monster 4.43.15 → 4.43.17

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.43.17] - 2025-10-27
+
+### Bug Fixes
+
+- remove x-default from list
+
+
+
+## [4.43.16] - 2025-10-24
+
+### Bug Fixes
+
+- site navigation with touch devices
+
+
+
 ## [4.43.15] - 2025-10-21
 
 ### 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.15"}
+{"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.17"}

package/source/components/accessibility/locale-select.mjs

@@ -13,8 +13,8 @@ import { instanceSymbol } from "../../constants.mjs";
 import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import { CustomElement } from "../../dom/customelement.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+  assembleMethodSymbol,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { isFunction, isObject } from "../../types/is.mjs";
 import { LocalePickerStyleSheet } from "./stylesheet/locale-picker.mjs";
@@ -43,63 +43,63 @@ const detectedLanguagesSymbol = Symbol("detectedLanguages");
  * @return {string}
  */
 function getLocalizedLabel() {
-	const lang = document.documentElement.lang || navigator.language || "en";
-	switch (lang.split("-")[0]) {
-		case "de":
-			return "Sprache wählen";
-		case "fr":
-			return "Sélectionnez une langue";
-		case "es":
-			return "Seleccione un idioma";
-		case "it":
-			return "Seleziona una lingua";
-		case "pt":
-			return "Selecione um idioma";
-		case "nl":
-			return "Selecteer een taal";
-		case "pl":
-			return "Wybierz język";
-		case "ru":
-			return "Выберите язык";
-		case "cs":
-			return "Vyberte jazyk";
-		case "sk":
-			return "Vyberte jazyk";
-		case "bg":
-			return "Изберете език";
-		case "hr":
-			return "Odaberite jezik";
-		case "fi":
-			return "Valitse kieli";
-		case "sv":
-			return "Välj ett språk";
-		case "el":
-			return "Επιλέξτε γλώσσα";
-		case "hu":
-			return "Válasszon egy nyelvet";
-		case "ro":
-			return "Selectați o limbă";
-		case "da":
-			return "Vælg et sprog";
-		case "no":
-			return "Velg et språk";
-		case "hi":
-			return "एक भाषा चुनें";
-		case "bn":
-			return "একটি ভাষা নির্বাচন করুন";
-		case "ta":
-			return "ஒரு மொழியைத் தேர்ந்தெடுக்கவும்";
-		case "te":
-			return "భాషను ఎంచుకోండి";
-		case "mr":
-			return "एक भाषा निवडा";
-		case "zh":
-			return "选择一种语言";
-		case "ja":
-			return "言語を選択してください";
-		default:
-			return "Select a language";
-	}
+  const lang = document.documentElement.lang || navigator.language || "en";
+  switch (lang.split("-")[0]) {
+    case "de":
+      return "Sprache wählen";
+    case "fr":
+      return "Sélectionnez une langue";
+    case "es":
+      return "Seleccione un idioma";
+    case "it":
+      return "Seleziona una lingua";
+    case "pt":
+      return "Selecione um idioma";
+    case "nl":
+      return "Selecteer een taal";
+    case "pl":
+      return "Wybierz język";
+    case "ru":
+      return "Выберите язык";
+    case "cs":
+      return "Vyberte jazyk";
+    case "sk":
+      return "Vyberte jazyk";
+    case "bg":
+      return "Изберете език";
+    case "hr":
+      return "Odaberite jezik";
+    case "fi":
+      return "Valitse kieli";
+    case "sv":
+      return "Välj ett språk";
+    case "el":
+      return "Επιλέξτε γλώσσα";
+    case "hu":
+      return "Válasszon egy nyelvet";
+    case "ro":
+      return "Selectați o limbă";
+    case "da":
+      return "Vælg et sprog";
+    case "no":
+      return "Velg et språk";
+    case "hi":
+      return "एक भाषा चुनें";
+    case "bn":
+      return "একটি ভাষা নির্বাচন করুন";
+    case "ta":
+      return "ஒரு மொழியைத் தேர்ந்தெடுக்கவும்";
+    case "te":
+      return "భాషను ఎంచుకోండి";
+    case "mr":
+      return "एक भाषा निवडा";
+    case "zh":
+      return "选择一种语言";
+    case "ja":
+      return "言語を選択してください";
+    default:
+      return "Select a language";
+  }
 }
 
 /**
@@ -112,92 +112,92 @@ function getLocalizedLabel() {
  * @summary A simple language switcher as a select.
  */
 class LocaleSelect extends CustomElement {
-	/**
-	 * Used by the instanceof operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/accessibility/local-selector@@instance",
-		);
-	}
+  /**
+   * Used by the instanceof operator.
+   * @returns {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for(
+      "@schukai/monster/components/accessibility/local-selector@@instance",
+    );
+  }
 
-	/**
-	 * Initializes the component.
-	 * @return {LocaleSelect}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initSelectOptions.call(this);
-		initEventHandler.call(this);
-		return this;
-	}
+  /**
+   * Initializes the component.
+   * @return {LocaleSelect}
+   */
+  [assembleMethodSymbol]() {
+    super[assembleMethodSymbol]();
+    initControlReferences.call(this);
+    initSelectOptions.call(this);
+    initEventHandler.call(this);
+    return this;
+  }
 
-	/**
-	 * Default options
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			labels: {
-				"select-an-option": getLocalizedLabel(),
-			},
-			callbacks: {},
-			disabled: false,
-		});
-	}
+  /**
+   * Default options
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+      labels: {
+        "select-an-option": getLocalizedLabel(),
+      },
+      callbacks: {},
+      disabled: false,
+    });
+  }
 
-	/**
-	 * connectedCallback
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-		this[detectedLanguagesSymbol] = detectUserLanguagePreference();
-		initSelectOptions.call(this);
-	}
+  /**
+   * connectedCallback
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this[detectedLanguagesSymbol] = detectUserLanguagePreference();
+    initSelectOptions.call(this);
+  }
 
-	/**
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-locale-select";
-	}
+  /**
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-locale-select";
+  }
 
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [LocalePickerStyleSheet];
-	}
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [LocalePickerStyleSheet];
+  }
 
-	/**
-	 * Export parts from monster-select to make them available for styling outside.
-	 */
-	static get exportparts() {
-		// The parts from monster-select, as defined in source/components/form/select.mjs:
-		return [
-			"control",
-			"container",
-			"popper",
-			"option",
-			"option-label",
-			"option-control",
-			"badge",
-			"badge-label",
-			"remove-badge",
-			"summary",
-			"status-or-remove-badges",
-			"remote-info",
-			"no-options",
-			"selection",
-			"inline-filter",
-			"popper-filter",
-			"content",
-		].join(",");
-	}
+  /**
+   * Export parts from monster-select to make them available for styling outside.
+   */
+  static get exportparts() {
+    // The parts from monster-select, as defined in source/components/form/select.mjs:
+    return [
+      "control",
+      "container",
+      "popper",
+      "option",
+      "option-label",
+      "option-control",
+      "badge",
+      "badge-label",
+      "remove-badge",
+      "summary",
+      "status-or-remove-badges",
+      "remote-info",
+      "no-options",
+      "selection",
+      "inline-filter",
+      "popper-filter",
+      "content",
+    ].join(",");
+  }
 }
 
 /**
@@ -205,9 +205,9 @@ class LocaleSelect extends CustomElement {
  * @private
  */
 function initControlReferences() {
-	this[selectElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}="select"]`,
-	);
+  this[selectElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="select"]`,
+  );
 }
 
 /**
@@ -215,29 +215,36 @@ function initControlReferences() {
  * @private
  */
 function initSelectOptions() {
-	const detected =
-		this[detectedLanguagesSymbol] || detectUserLanguagePreference();
+  const detected =
+    this[detectedLanguagesSymbol] || detectUserLanguagePreference();
 
-	let options = [];
-	if (Array.isArray(detected.available)) {
-		const currentLang = detected.current;
-		options = detected.available.filter(
-			(lang) => lang.baseLang !== currentLang && lang.fullLang !== currentLang,
-		);
-	} else if (Array.isArray(detected.allOfferable)) {
-		options = detected.allOfferable;
-	}
+  let options = [];
+  if (Array.isArray(detected.available)) {
+    const currentLang = detected.current;
+    options = detected.available.filter(
+      (lang) => lang.baseLang !== currentLang && lang.fullLang !== currentLang,
+    );
+  } else if (Array.isArray(detected.allOfferable)) {
+    options = detected.allOfferable;
+  }
 
-	options = detected.allOfferable;
-	if (this[selectElementSymbol]) {
-		this[selectElementSymbol].setOption("mapping.labelTemplate", "${label}");
-		this[selectElementSymbol].setOption("mapping.valueTemplate", "${href}");
-		this[selectElementSymbol].setOption(
-			"labels.select-an-option",
-			this.getOption("labels.select-an-option"),
-		);
-		this[selectElementSymbol].importOptions(options);
-	}
+  options = detected.allOfferable;
+
+  if (Array.isArray(options)) {
+    options = options.filter(
+      (lang) => lang.baseLang !== "x-default" && lang.fullLang !== "x-default",
+    );
+  }
+
+  if (this[selectElementSymbol]) {
+    this[selectElementSymbol].setOption("mapping.labelTemplate", "${label}");
+    this[selectElementSymbol].setOption("mapping.valueTemplate", "${href}");
+    this[selectElementSymbol].setOption(
+      "labels.select-an-option",
+      this.getOption("labels.select-an-option"),
+    );
+    this[selectElementSymbol].importOptions(options);
+  }
 }
 
 /**
@@ -245,14 +252,14 @@ function initSelectOptions() {
  * @private
  */
 function initEventHandler() {
-	if (!this[selectElementSymbol]) return;
+  if (!this[selectElementSymbol]) return;
 
-	this[selectElementSymbol].addEventListener("change", (event) => {
-		const selected = event.target?.value;
-		if (selected) {
-			window.location.href = selected;
-		}
-	});
+  this[selectElementSymbol].addEventListener("change", (event) => {
+    const selected = event.target?.value;
+    if (selected) {
+      window.location.href = selected;
+    }
+  });
 }
 
 /**
@@ -261,8 +268,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
     <monster-select exportparts="control,container,popper,option,option-label,option-control,badge,badge-label,remove-badge,summary,status-or-remove-badges,remote-info,no-options,selection,inline-filter,popper-filter,content" data-monster-role="select"></monster-select>
   `;
 }

package/source/components/navigation/site-navigation.mjs

@@ -111,7 +111,6 @@ class SiteNavigation extends CustomElement {
     requestAnimationFrame(() => {
       populateTabs.call(this);
     });
-
   }
 
   disconnectedCallback() {
@@ -304,7 +303,7 @@ function detachResizeObserver() {
 }
 
 /**
- * Sets up interaction logic (hover or click) for a submenu.
+ * Sets up interaction logic (hover, click, or touch) for a submenu.
  * This function is called recursively for nested submenus.
  * @private
  * @this {SiteNavigation}
@@ -323,111 +322,174 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
   }
 
   const interaction = this.getOption("interactionModel", "auto");
-  const useHover =
-    interaction === "hover" ||
-    (interaction === "auto" && context === "visible");
+  const isTouchDevice =
+    "ontouchstart" in window || navigator.maxTouchPoints > 0;
 
-  if (useHover) {
-    const component = this;
-    let cleanup;
-    let hideTimeout;
-    let isHovering = false;
+  const effectiveInteraction =
+    interaction === "auto"
+      ? context === "visible"
+        ? "hover"
+        : "click"
+      : interaction;
+
+  const component = this;
+  let cleanup;
 
-    const immediateHide = () => {
-      submenu.style.display = "none";
-      Object.assign(submenu.style, {
-        maxHeight: "",
-        overflowY: "",
+  const immediateHide = () => {
+    submenu.style.display = "none";
+    Object.assign(submenu.style, {
+      maxHeight: "",
+      overflowY: "",
+    });
+    submenu
+      .querySelectorAll(
+        "ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
+      )
+      .forEach((sub) => {
+        sub.style.display = "none";
       });
-      submenu
-        .querySelectorAll(
-          "ul[style*='display: block'], div[part='mega-menu'][style*='display: block']",
-        )
-        .forEach((sub) => {
-          sub.style.display = "none";
+    fireCustomEvent(this, "monster-submenu-hide", {
+      context,
+      trigger: parentLi,
+      submenu,
+      level,
+    });
+    if (cleanup) {
+      cleanup();
+      cleanup = null;
+    }
+    if (level === 1 && component[activeSubmenuHiderSymbol] === immediateHide) {
+      component[activeSubmenuHiderSymbol] = null;
+    }
+  };
+
+  const show = () => {
+    component[hideHamburgerMenuSymbol]?.();
+    if (level === 1) {
+      if (
+        component[activeSubmenuHiderSymbol] &&
+        component[activeSubmenuHiderSymbol] !== immediateHide
+      ) {
+        component[activeSubmenuHiderSymbol]();
+      }
+      component[activeSubmenuHiderSymbol] = immediateHide;
+    } else {
+      [...parentLi.parentElement.children]
+        .filter((li) => li !== parentLi)
+        .forEach((sibling) => {
+          const siblingSubmenu = sibling.querySelector(
+            ":scope > ul, :scope > div[part='mega-menu']",
+          );
+          if (siblingSubmenu) {
+            siblingSubmenu.style.display = "none";
+          }
+        });
+    }
+    submenu.style.display = "block";
+    fireCustomEvent(this, "monster-submenu-show", {
+      context,
+      trigger: parentLi,
+      submenu,
+      level,
+    });
+    if (!cleanup) {
+      cleanup = autoUpdate(parentLi, submenu, () => {
+        const middleware = [offset(8), flip(), shift({ padding: 8 })];
+        const containsSubmenus = submenu.querySelector(
+          "ul, div[part='mega-menu']",
+        );
+        if (!containsSubmenus) {
+          middleware.push(
+            size({
+              apply: ({ availableHeight, elements }) => {
+                Object.assign(elements.floating.style, {
+                  maxHeight: `${availableHeight}px`,
+                  overflowY: "auto",
+                });
+              },
+              padding: 8,
+            }),
+          );
+        }
+        computePosition(parentLi, submenu, {
+          placement: level === 1 ? "bottom-start" : "right-start",
+          middleware: middleware,
+        }).then(({ x, y, strategy }) => {
+          Object.assign(submenu.style, {
+            position: strategy,
+            left: `${x}px`,
+            top: `${y}px`,
+          });
         });
-      fireCustomEvent(this, "monster-submenu-hide", {
-        context,
-        trigger: parentLi,
-        submenu,
-        level,
       });
-      if (cleanup) {
-        cleanup();
-        cleanup = null;
-      }
+    }
+  };
+
+  if (effectiveInteraction === "hover" && isTouchDevice) {
+    let lastTap = 0;
+    const DOUBLE_TAP_DELAY = 300;
+    const anchor = parentLi.querySelector(":scope > a");
+
+    if (!anchor) return;
+
+    const handleOutsideClickForSubmenu = (event) => {
       if (
-        level === 1 &&
-        component[activeSubmenuHiderSymbol] === immediateHide
+        submenu.style.display === "block" &&
+        !parentLi.contains(event.target)
       ) {
-        component[activeSubmenuHiderSymbol] = null;
+        immediateHide();
+        document.removeEventListener(
+          "click",
+          handleOutsideClickForSubmenu,
+          true,
+        );
       }
     };
 
-    const show = () => {
-      component[hideHamburgerMenuSymbol]?.();
-      if (level === 1) {
-        if (
-          component[activeSubmenuHiderSymbol] &&
-          component[activeSubmenuHiderSymbol] !== immediateHide
-        ) {
-          component[activeSubmenuHiderSymbol]();
-        }
-        component[activeSubmenuHiderSymbol] = immediateHide;
+    anchor.addEventListener("click", (event) => {
+      const now = Date.now();
+      const timeSinceLastTap = now - lastTap;
+      lastTap = now;
+
+      if (timeSinceLastTap < DOUBLE_TAP_DELAY && timeSinceLastTap > 0) {
+        lastTap = 0;
+        document.removeEventListener(
+          "click",
+          handleOutsideClickForSubmenu,
+          true,
+        );
+        immediateHide();
       } else {
-        [...parentLi.parentElement.children]
-          .filter((li) => li !== parentLi)
-          .forEach((sibling) => {
-            const siblingSubmenu = sibling.querySelector(
-              ":scope > ul, :scope > div[part='mega-menu']",
-            );
-            if (siblingSubmenu) {
-              siblingSubmenu.style.display = "none";
-            }
-          });
-      }
-      submenu.style.display = "block";
-      fireCustomEvent(this, "monster-submenu-show", {
-        context,
-        trigger: parentLi,
-        submenu,
-        level,
-      });
-      if (!cleanup) {
-        cleanup = autoUpdate(parentLi, submenu, () => {
-          const middleware = [offset(8), flip(), shift({ padding: 8 })];
-          const containsSubmenus = submenu.querySelector(
-            "ul, div[part='mega-menu']",
+        event.preventDefault();
+        event.stopPropagation();
+
+        const isMenuOpen = submenu.style.display === "block";
+
+        if (isMenuOpen) {
+          document.removeEventListener(
+            "click",
+            handleOutsideClickForSubmenu,
+            true,
           );
-          if (!containsSubmenus) {
-            middleware.push(
-              size({
-                apply: ({ availableHeight, elements }) => {
-                  Object.assign(elements.floating.style, {
-                    maxHeight: `${availableHeight}px`,
-                    overflowY: "auto",
-                  });
-                },
-                padding: 8,
-              }),
+          immediateHide();
+        } else {
+          show();
+          setTimeout(() => {
+            document.addEventListener(
+              "click",
+              handleOutsideClickForSubmenu,
+              true,
             );
-          }
-          computePosition(parentLi, submenu, {
-            placement: level === 1 ? "bottom-start" : "right-start",
-            middleware: middleware,
-          }).then(({ x, y, strategy }) => {
-            Object.assign(submenu.style, {
-              position: strategy,
-              left: `${x}px`,
-              top: `${y}px`,
-            });
-          });
-        });
+          }, 0);
+        }
       }
-    };
+    });
+  } else if (effectiveInteraction === "hover" && !isTouchDevice) {
+    let hideTimeout;
+    let isHovering = false;
 
     const handleMouseEnter = () => {
-      isHovering = true; // Status auf "aktiv" setzen
+      isHovering = true;
       clearTimeout(hideTimeout);
       if (submenu.style.display !== "block") {
         show();
@@ -435,7 +497,7 @@ function setupSubmenu(parentLi, context = "visible", level = 1) {
     };
 
     const handleMouseLeave = () => {
-      isHovering = false; // Status auf "inaktiv" setzen
+      isHovering = false;
       hideTimeout = setTimeout(() => {
         if (!isHovering) {
           immediateHide();
@@ -524,7 +586,6 @@ function cloneNavItem(item) {
  * @this {SiteNavigation}
  */
 function populateTabs() {
-
   const visibleList = this[visibleElementsSymbol];
   const hiddenList = this[hiddenElementsSymbol];
   const hamburgerButton = this[hamburgerButtonSymbol];
@@ -551,7 +612,6 @@ function populateTabs() {
     return;
   }
 
-
   const navWidth = navEl.clientWidth;
 
   const originalDisplay = hamburgerButton.style.display;
@@ -607,7 +667,7 @@ function populateTabs() {
     visibleList.appendChild(firstHiddenItemClone);
     const firstHiddenItemWidth =
       firstHiddenItemClone.getBoundingClientRect().width;
-    visibleList.removeChild(firstHiddenItemClone); 
+    visibleList.removeChild(firstHiddenItemClone);
 
     const gap = parseFloat(getComputedStyle(visibleList).gap || "0") || 0;
     if (visibleItemsWidth + gap + firstHiddenItemWidth <= navWidth) {