@schukai/monster 4.48.2 → 4.49.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.49.0] - 2025-12-21
+
+### Add Features
+
+- Added fields object for mapping form input names in login component
+
+
+
+## [4.48.3] - 2025-12-02
+
+### Bug Fixes
+
+- **select:** prevent NaN labels
+
+
+
 ## [4.48.2] - 2025-12-02
 
 ### 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.48.2"}
+{"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.49.0"}

package/source/components/form/login.mjs

@@ -214,6 +214,9 @@ class Login extends CustomElement {
    * @property {boolean} features.redirectToFirstSuccessUrl If true, redirects to the first success URL after login
    * @property {Object} actions Action definitions for custom event handling
    * @property {Function} actions.click Callback function for generic click actions within the login component
+   * @property {Object} fields Field mappings for form inputs
+   * @property {string} fields.identifier Name of the identifier field (username/email)
+   * @property {string} fields.password Name of the password field
    * @property {Object} callbacks Optional callback hooks for modifying internal behavior
    * @property {Function} callbacks.username A function that receives and can transform the entered username before submission
    * @property {Function} callbacks.forgotPassword A function that receives and can transform the entered email before submission
@@ -288,6 +291,11 @@ class Login extends CustomElement {
       },
       actions: {},
 
+      fields: {
+        identifier: "username",
+        password: "password",
+      }
+
       callbacks: {
         username: null,
         forgotPassword: null,
@@ -1126,7 +1134,7 @@ function initEventHandler() {
 
   const type = "click";
 
-  element.addEventListener(type, function (event) {
+  element.addEventListener(type, function(event) {
     const callback = self.getOption("actions.click");
 
     fireCustomEvent(self, "monster-login-clicked", {
@@ -1293,12 +1301,23 @@ function initEventHandler() {
       return;
     }
 
+    const identifierField =
+      this.getOption("fields.login.identifier") || "username";
+
+    const passwordField =
+      this.getOption("fields.login.password") || "password";
+
+    const payload = {
+      [identifierField]: username,
+      [passwordField]: password,
+    };
+
     const options = {
       method: this.getOption("fetch.login.method"),
       mode: this.getOption("fetch.login.mode"),
       headers: this.getOption("fetch.login.headers"),
       credentials: this.getOption("fetch.login.credentials"),
-      body: JSON.stringify({ username, password }),
+      body: JSON.stringify(payload),
     };
 
     getWindow()

package/source/components/form/select.mjs

@@ -1909,7 +1909,8 @@ function buildSelectionLabel(value) {
  */
 async function lookupValueAndCache(value) {
   const lookupUrl = this.getOption("lookup.url");
-  if (!lookupUrl || !value) {
+  // A more robust check for invalid values. 0 and "" are valid.
+  if (!lookupUrl || value === null || value === undefined || Number.isNaN(value)) {
     return;
   }
 
@@ -1938,6 +1939,17 @@ async function lookupValueAndCache(value) {
 
     let found = false;
     for (const [itemValue, itemLabel] of map.entries()) {
+      // If the label template results in NaN, log an error and skip caching.
+      if (itemLabel === "NaN") {
+        addErrorAttribute(
+          this,
+          new Error(
+            `Lookup for value '${itemValue}' resulted in a 'NaN' label. Check 'mapping.labelTemplate' and API response.`,
+          ),
+        );
+        continue;
+      }
+
       // The lookup might return more than the requested value, so we cache all of them.
       if (!this[lookupCacheSymbol].has(itemValue)) {
         this[lookupCacheSymbol].set(itemValue, itemLabel);
@@ -1971,8 +1983,10 @@ function getSelectionLabel(value) {
     if (isString(label)) return label;
   }
 
-  // If the label was not found, and we have a lookup URL, trigger a lookup.
-  if (this.getOption("lookup.url")) {
+  // If the label was not found, and we have a lookup URL, trigger a lookup for valid values.
+  const isValueValidForLookup =
+    value !== null && value !== undefined && !Number.isNaN(value);
+  if (this.getOption("lookup.url") && isValueValidForLookup) {
     lookupValueAndCache.call(this, value).catch((e) => {
       addErrorAttribute(this, e);
     });