@schukai/monster 4.38.10 → 4.39.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 
 
+## [4.39.0] - 2025-09-08
+
+### Add Features
+
+- new local-select component
+
+
+
 ## [4.38.10] - 2025-09-08
 
 ### 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.38.10"}
+{"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.39.0"}

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

@@ -40,30 +40,35 @@ export { LocalePicker };
 /**
  * @private
  * @type {symbol}
+ * Reference to the main picker element
  */
 const localePickerElementSymbol = Symbol("localePickerElement");
 
 /**
  * @private
  * @type {symbol}
+ * Reference to the other languages select element
  */
 const otherLanguagesElementSymbol = Symbol("otherLanguagesElement");
 
 /**
  * @private
  * @type {symbol}
+ * Reference to the language button element
  */
 const buttonLanguageElementSymbol = Symbol("buttonLanguageElement");
 
 /**
  * @private
  * @type {symbol}
+ * Reference to the 'no thanks' button element
  */
 const buttonNoThanksElementSymbol = Symbol("buttonNoThanksElement");
 
 /**
  * @private
  * @type {symbol}
+ * Stores detected languages
  */
 const detectedLanguagesSymbol = Symbol("detectedLanguages");
 
@@ -93,7 +98,7 @@ class LocalePicker extends CustomElement {
   }
 
   /**
-   *
+   * Initializes the component.
    * @return {LocalePicker}
    */
   [assembleMethodSymbol]() {
@@ -168,7 +173,7 @@ class LocalePicker extends CustomElement {
   /**
    * Lifecycle method that is called when the custom element is appended into a document-connected element.
    * Invokes the parent class's connectedCallback method and retrieves the user's preferred language.
-   * Logs the preferred language to the console.
+   * Hides or shows the picker depending on the user's language and stored session.
    *
    * @return {void}
    */
@@ -197,7 +202,7 @@ class LocalePicker extends CustomElement {
       };
     }
 
-    const stored = localStorage.getItem(buildStorageKey.call(this));
+    const stored = sessionStorage.getItem(buildStorageKey.call(this));
     if (stored && this.getOption("features.showAlways") !== true) {
       if (this.getOption("features.removeOnSelected")) {
         this.remove();
@@ -253,7 +258,7 @@ class LocalePicker extends CustomElement {
    * @returns {LocalePicker}
    */
   reset() {
-    localStorage.removeItem(buildStorageKey.call(this));
+    sessionStorage.removeItem(buildStorageKey.call(this));
     this.show();
     return this;
   }
@@ -304,9 +309,33 @@ class LocalePicker extends CustomElement {
   }
 }
 
+/**
+ * @private
+ * @return {void}
+ * Initializes references to all relevant elements in the picker.
+ */
+function initControlReferences() {
+  this[localePickerElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="control"]`,
+  );
+
+  this[otherLanguagesElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="other-languages"]`,
+  );
+
+  this[buttonNoThanksElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="button-no-thanks"]`,
+  );
+
+  this[buttonLanguageElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="button-language"]`,
+  );
+}
+
 /**
  * @private
  * @return {initEventHandler}
+ * Initializes all event handlers for the picker.
  */
 function initEventHandler() {
   const self = this;
@@ -339,7 +368,7 @@ function initEventHandler() {
   });
 
   this[buttonNoThanksElementSymbol].setOption("actions.click", () => {
-    localStorage.setItem(buildStorageKey.call(this), "1");
+    sessionStorage.setItem(buildStorageKey.call(this), "1");
     this.hide();
     if (this.getOption("features.removeOnSelected")) {
       this.remove();
@@ -347,7 +376,7 @@ function initEventHandler() {
   });
 
   this[buttonLanguageElementSymbol].setOption("actions.click", () => {
-    localStorage.setItem(buildStorageKey.call(this), "1");
+    sessionStorage.setItem(buildStorageKey.call(this), "1");
     window.location.href = this[detectedLanguagesSymbol].offerable?.[0]?.href;
   });
 
@@ -361,7 +390,7 @@ function initEventHandler() {
     if (element) {
       const selected = element?.value;
       if (selected) {
-        localStorage.setItem(buildStorageKey.call(this), "1");
+        sessionStorage.setItem(buildStorageKey.call(this), "1");
         window.location.href = selected;
       }
     }
@@ -373,6 +402,7 @@ function initEventHandler() {
 /**
  * @private
  * @returns {string}
+ * Builds the session storage key for the picker.
  */
 function buildStorageKey() {
   return "locale-picker-" + this[detectedLanguagesSymbol].current;
@@ -382,6 +412,7 @@ function buildStorageKey() {
  * @private
  * @param lang
  * @returns {Object}
+ * Returns translations for the given language.
  */
 function getTranslations(lang) {
   const map = {
@@ -624,31 +655,10 @@ function getTranslations(lang) {
   return result;
 }
 
-/**
- * @private
- * @return {void}
- */
-function initControlReferences() {
-  this[localePickerElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="control"]`,
-  );
-
-  this[otherLanguagesElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="other-languages"]`,
-  );
-
-  this[buttonNoThanksElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="button-no-thanks"]`,
-  );
-
-  this[buttonLanguageElementSymbol] = this.shadowRoot.querySelector(
-    `[${ATTRIBUTE_ROLE}="button-language"]`,
-  );
-}
-
 /**
  * @private
  * @return {string}
+ * Returns the template for the component.
  */
 function getTemplate() {
   // language=HTML

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

@@ -0,0 +1,270 @@
+/**
+ * Copyright © schukai GmbH and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License Version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.de.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * For more information about purchasing a commercial license, please contact schukai GmbH.
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
+import {
+  assembleMethodSymbol,
+  registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { isFunction, isObject } from "../../types/is.mjs";
+import { LocalePickerStyleSheet } from "./stylesheet/locale-picker.mjs";
+import { detectUserLanguagePreference } from "../../i18n/util.mjs";
+
+import "../form/select.mjs";
+
+export { LocaleSelect as LocalSelector };
+
+/**
+ * @private
+ * @type {symbol}
+ * Reference to the select element
+ */
+const selectElementSymbol = Symbol("selectElement");
+
+/**
+ * @private
+ * @type {symbol}
+ * Stores detected languages
+ */
+const detectedLanguagesSymbol = Symbol("detectedLanguages");
+
+/**
+ * Returns the localized label for the language selection.
+ * @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";
+  }
+}
+
+/**
+ * LocaleSelect component
+ *
+ * Displays a monster-select with all available languages except the current document language.
+ *
+ * @since 3.97.0
+ * @copyright schukai GmbH
+ * @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",
+    );
+  }
+
+  /**
+   * 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,
+    });
+  }
+
+  /**
+   * connectedCallback
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    this[detectedLanguagesSymbol] = detectUserLanguagePreference();
+    initSelectOptions.call(this);
+  }
+
+  /**
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-locale-select";
+  }
+
+  /**
+   * @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(",");
+  }
+}
+
+/**
+ * Initializes the reference to the select element.
+ * @private
+ */
+function initControlReferences() {
+  this[selectElementSymbol] = this.shadowRoot.querySelector(
+    `[${ATTRIBUTE_ROLE}="select"]`,
+  );
+}
+
+/**
+ * Initializes the options of the select element.
+ * @private
+ */
+function initSelectOptions() {
+  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;
+  }
+
+  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);
+  }
+}
+
+/**
+ * Initializes the event handler for the select element.
+ * @private
+ */
+function initEventHandler() {
+  if (!this[selectElementSymbol]) return;
+
+  this[selectElementSymbol].addEventListener("change", (event) => {
+    const selected = event.target?.value;
+    if (selected) {
+      window.location.href = selected;
+    }
+  });
+}
+
+/**
+ * Returns the template for the component.
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+  // 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>
+  `;
+}
+
+registerCustomElement(LocaleSelect);