@schukai/monster 4.1.2 → 4.3.0

package/CHANGELOG.md

@@ -2,6 +2,26 @@
 
 
 
+## [4.3.0] - 2025-05-12
+
+### Add Features
+
+- Add support for array-list filter serialization in Datatable
+### Changes
+
+- Enhance documentation for login component properties
+
+
+
+## [4.2.0] - 2025-05-12
+
+### Add Features
+
+- Update Node binary paths and introduce username callback customization
+- Update event naming and clean up spacing for clarity
+
+
+
 ## [4.1.2] - 2025-05-11
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@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.1.2"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.7.0","@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.3.0"}

package/source/components/content/camera-capture.mjs

@@ -75,7 +75,7 @@ const emptyHistoryStateElementSymbol = Symbol("emptyHistoryStateElement");
  * @since 3.111.0
  * @copyright schukai GmbH
  * @summary A simple but powerful camera capture component. It can be used to capture images from the camera.
- * @fires monster-camera-capture-take-picture
+ * @fires monster-camera-capture-captured
  */
 class CameraCapture extends CustomElement {
     /**
@@ -373,17 +373,17 @@ function getTranslations() {
 /**
  * @private
  * @return {initEventHandler}
- * @fires monster-camera-capture-take-picture
+ * @fires monster-camera-capture-captured
  */
 function initEventHandler() {
     const self = this;
 
     this[takePictureButtonElementSymbol].setOption("actions.click", function () {
-        fireCustomEvent(self, "monster-camera-capture-take-picture", {
-            element: self,
-        });
-
         self.capture();
+
+        fireCustomEvent(self, "monster-camera-capture-captured", {
+            element: self,
+        })
     });
 
     return this;

package/source/components/content/viewer.mjs

@@ -13,18 +13,18 @@
  */
 
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
 import "../notify/notify.mjs";
-import { ViewerStyleSheet } from "./stylesheet/viewer.mjs";
-import { instanceSymbol } from "../../constants.mjs";
-import { isString } from "../../types/is.mjs";
-import { getGlobal } from "../../types/global.mjs";
-import { MediaType, parseMediaType } from "../../types/mediatype.mjs";
+import {ViewerStyleSheet} from "./stylesheet/viewer.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {isString} from "../../types/is.mjs";
+import {getGlobal} from "../../types/global.mjs";
+import {MediaType, parseMediaType} from "../../types/mediatype.mjs";
 
-export { Viewer };
+export {Viewer};
 
 /**
  * @private
@@ -45,278 +45,286 @@ const viewerElementSymbol = Symbol("viewerElement");
  * @summary A simple viewer component for PDF, HTML and images.
  */
 class Viewer extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/content/viewer@@instance");
-	}
-
-	/**
-	 * 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} content Content to be displayed in the viewer
-	 * @property {Object} classes Css classes
-	 * @property {string} classes.viewer Css class for the viewer
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			content: "<slot></slot>",
-			classes: {
-				viewer: "",
-			},
-		});
-	}
-
-	/**
-	 * Sets the content of an element based on the provided content and media type.
-	 *
-	 * @param {string} content - The content to be set.
-	 * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
-	 * @return {void} This method does not return a value.
-	 * @throws {Error} Throws an error if shadowRoot is not defined.
-	 */
-	setContent(content, mediaType = "text/plain") {
-		if (!this.shadowRoot) {
-			throw new Error("no shadow-root is defined");
-		}
-
-		let type;
-		try {
-			const m = new parseMediaType(mediaType);
-			switch (m.type) {
-				case "image":
-					return this.setImage(content);
-			}
-
-			mediaType = m.toString();
-		} catch (error) {
-			type = null;
-		}
-
-		if (mediaType === undefined || mediaType === null || mediaType === "") {
-			mediaType = "text/plain";
-		}
-
-		switch (mediaType) {
-			case "text/html":
-				this.setHTML(content);
-				break;
-			case "text/plain":
-				this.setPlainText(content);
-				break;
-			case "application/pdf":
-				this.setPDF(content);
-				break;
-			case "image/png":
-			case "image/jpeg":
-			case "image/gif":
-				this.setImage(content);
-				break;
-			default:
-				this.setOption("content", content);
-		}
-	}
-
-	/**
-	 * Configures and embeds a PDF document into the application with customizable display settings.
-	 *
-	 * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL or base64 string.
-	 * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
-	 * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
-	 * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
-	 * @return {void} This method returns nothing but sets the embedded PDF as the content.
-	 */
-	setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
-		const hashes =
-			"#toolbar=" +
-			(toolbar ? "1" : "0") +
-			"&navpanes=" +
-			(navigation ? "1" : "0") +
-			"&scrollbar=" +
-			(scrollbar ? "1" : "0");
-
-		let pdfURL = "";
-		if (isBlob(data)) {
-			pdfURL = URL.createObjectURL(data);
-			pdfURL += hashes;
-		} else if (isURL(data)) {
-			// check if the url already contains the hashes
-			if (data?.hash?.indexOf("#") === -1) {
-				pdfURL = data.toString() + hashes;
-			} else {
-				pdfURL = data.toString();
-			}
-		} else if (isString(data)) {
-			//URL.createObjectURL(data);
-			const blobObj = new Blob([atob(data)], { type: "application/pdf" });
-			const url = window.URL.createObjectURL(blobObj);
-
-			pdfURL = data;
-		} else {
-			throw new Error("Blob or URL expected");
-		}
-
-		const html =
-			'<object part="pdf" data="' +
-			pdfURL +
-			'" width="100%" height="100%" type="application/pdf"></object>';
-
-		this.setOption("content", html);
-	}
-
-	/**
-	 * Sets an image for the target by accepting a blob, URL, or string representation of the image.
-	 *
-	 * @param {(Blob|string)} data - The image data, which can be a Blob, a valid URL, or a string representation of the image.
-	 * @return {void} Does not return a value.
-	 */
-	setImage(data) {
-		if (isBlob(data)) {
-			data = URL.createObjectURL(data);
-		} else if (isURL(data)) {
-			// nothing to do
-		} else if (isString(data)) {
-			// nothing to do
-		} else {
-			throw new Error("Blob or URL expected");
-		}
-
-		this.setOption("content", '<img src="' + data + '" alt="image" />');
-	}
-
-	/**
-	 *
-	 * if the data is a string, it is interpreted as HTML.
-	 * if the data is an url, the HTML is loaded from the url and set as content.
-	 * if the data is an HTMLElement, the outerHTML is used as content.
-	 *
-	 * @param {HTMLElement|URL|string|Blob} data
-	 */
-	setHTML(data) {
-		if (data instanceof Blob) {
-			blobToText(data)
-				.then((html) => {
-					this.setOption("content", html);
-				})
-				.catch((error) => {
-					throw new Error(error);
-				});
-
-			return;
-		} else if (data instanceof HTMLElement) {
-			data = data.outerHTML;
-		} else if (isString(data)) {
-			// nothing to do
-		} else if (isURL(data)) {
-			// fetch element
-			getGlobal()
-				.fetch(data)
-				.then((response) => {
-					return response.text();
-				})
-				.then((html) => {
-					this.setOption("content", html);
-				})
-				.catch((error) => {
-					throw new Error(error);
-				});
-		} else {
-			throw new Error("HTMLElement or string expected");
-		}
-
-		this.setOption("content", data);
-	}
-
-	/**
-	 * Sets the plain text content by processing the input data, which can be of various types, including Blob,
-	 * HTMLElement, string, or a valid URL. The method extracts and sets the raw text content into a predefined option.
-	 *
-	 * @param {Blob|HTMLElement|string} data - The input data to be processed. It can be a Blob object, an HTMLElement,
-	 *                                         a plain string, or a string formatted as a valid URL. The method determines
-	 *                                         the data type and processes it accordingly.
-	 * @return {void} - This method does not return any value. It processes the content and updates the relevant option
-	 *                  property.
-	 */
-	setPlainText(data) {
-		if (data instanceof Blob) {
-			blobToText(data)
-				.then((html) => {
-					const div = document.createElement("div");
-					div.innerHTML = html;
-					html = div.innerText;
-
-					this.setOption("content", html);
-				})
-				.catch((error) => {
-					throw new Error(error);
-				});
-
-			return;
-		} else if (data instanceof HTMLElement) {
-			data = data.outerText;
-		} else if (isString(data)) {
-			const div = document.createElement("div");
-			div.innerHTML = data;
-			data = div.innerText;
-		} else if (isURL(data)) {
-			// fetch element
-			getGlobal()
-				.fetch(data)
-				.then((response) => {
-					return response.text();
-				})
-				.then((text) => {
-					const div = document.createElement("div");
-					div.innerHTML = text;
-					text = div.innerText;
-
-					this.setOption("content", text);
-				})
-				.catch((error) => {
-					throw new Error(error);
-				});
-		} else {
-			throw new Error("HTMLElement or string expected");
-		}
-
-		this.setOption("content", data);
-	}
-
-	/**
-	 *
-	 * @return {Viewer}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-viewer";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [ViewerStyleSheet];
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/content/viewer@@instance");
+    }
+
+    /**
+     * 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} content Content to be displayed in the viewer
+     * @property {Object} classes Css classes
+     * @property {string} classes.viewer Css class for the viewer
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            content: "<slot></slot>",
+            classes: {
+                viewer: "",
+            },
+        });
+    }
+
+    /**
+     * Sets the content of an element based on the provided content and media type.
+     *
+     * @param {string} content - The content to be set.
+     * @param {string} [mediaType="text/plain"] - The media type of the content. Defaults to "text/plain" if not specified.
+     * @return {void} This method does not return a value.
+     * @throws {Error} Throws an error if shadowRoot is not defined.
+     */
+    setContent(content, mediaType = "text/plain") {
+        if (!this.shadowRoot) {
+            throw new Error("no shadow-root is defined");
+        }
+
+        let type;
+        try {
+            const m = new parseMediaType(mediaType);
+            switch (m.type) {
+                case "image":
+                    return this.setImage(content);
+            }
+
+            mediaType = m.toString();
+        } catch (error) {
+            type = null;
+        }
+
+        if (mediaType === undefined || mediaType === null || mediaType === "") {
+            mediaType = "text/plain";
+        }
+
+        switch (mediaType) {
+            case "text/html":
+                this.setHTML(content);
+                break;
+            case "text/plain":
+                this.setPlainText(content);
+                break;
+            case "application/pdf":
+                this.setPDF(content);
+                break;
+            case "image/png":
+            case "image/jpeg":
+            case "image/gif":
+                this.setImage(content);
+                break;
+            default:
+                this.setOption("content", content);
+        }
+    }
+
+    /**
+     * Configures and embeds a PDF document into the application with customizable display settings.
+     *
+     * @param {Blob|URL|string} data The PDF data to be embedded. Can be provided as a Blob, URL or base64 string.
+     * @param {boolean} [navigation=true] Determines whether the navigation pane is displayed in the PDF viewer.
+     * @param {boolean} [toolbar=true] Controls the visibility of the toolbar in the PDF viewer.
+     * @param {boolean} [scrollbar=false] Configures the display of the scrollbar in the PDF viewer.
+     * @return {void} This method returns nothing but sets the embedded PDF as the content.
+     */
+    setPDF(data, navigation = true, toolbar = true, scrollbar = false) {
+        const hashes =
+            "#toolbar=" +
+            (toolbar ? "1" : "0") +
+            "&navpanes=" +
+            (navigation ? "1" : "0") +
+            "&scrollbar=" +
+            (scrollbar ? "1" : "0");
+
+        let pdfURL = "";
+        if (isBlob(data)) {
+            pdfURL = URL.createObjectURL(data);
+            pdfURL += hashes;
+        } else if (isURL(data)) {
+            // check if the url already contains the hashes
+            if (data?.hash?.indexOf("#") === -1) {
+                pdfURL = data.toString() + hashes;
+            } else {
+                pdfURL = data.toString();
+            }
+        } else if (isString(data)) {
+            //URL.createObjectURL(data);
+            const blobObj = new Blob([atob(data)], {type: "application/pdf"});
+            const url = window.URL.createObjectURL(blobObj);
+
+            pdfURL = data;
+        } else {
+            throw new Error("Blob or URL expected");
+        }
+
+        const html =
+            '<object part="pdf" data="' +
+            pdfURL +
+            '" width="100%" height="100%" type="application/pdf"></object>';
+
+        this.setOption("content", html);
+    }
+
+    /**
+     * Sets an image for the target by accepting a blob, URL, or string representation of the image.
+     *
+     * @param {(Blob|string)} data - The image data, which can be a Blob, a valid URL, or a string representation of the image.
+     * @return {void} Does not return a value.
+     */
+    setImage(data) {
+        if (isBlob(data)) {
+            data = URL.createObjectURL(data);
+        } else if (isURL(data)) {
+            // nothing to do
+        } else if (isString(data)) {
+            // nothing to do
+        } else {
+            throw new Error("Blob or URL expected");
+        }
+
+        this.setOption("content", '<img src="' + data + '" alt="image" />');
+    }
+
+    /**
+     *
+     * if the data is a string, it is interpreted as HTML.
+     * if the data is an url, the HTML is loaded from the url and set as content.
+     * if the data is an HTMLElement, the outerHTML is used as content.
+     *
+     * @param {HTMLElement|URL|string|Blob} data
+     */
+    setHTML(data) {
+        if (data instanceof Blob) {
+            blobToText(data)
+                .then((html) => {
+                    this.setOption("content", html);
+                })
+                .catch((error) => {
+                    throw new Error(error);
+                });
+
+            return;
+        } else if (data instanceof HTMLElement) {
+            data = data.outerHTML;
+        } else if (isString(data)) {
+            // nothing to do
+        } else if (isURL(data)) {
+            // fetch element
+            getGlobal()
+                .fetch(data)
+                .then((response) => {
+                    return response.text();
+                })
+                .then((html) => {
+                    this.setOption("content", html);
+                })
+                .catch((error) => {
+                    throw new Error(error);
+                });
+        } else {
+            throw new Error("HTMLElement or string expected");
+        }
+
+        this.setOption("content", data);
+    }
+
+    /**
+     * Sets the plain text content by processing the input data, which can be of various types, including Blob,
+     * HTMLElement, string, or a valid URL. The method extracts and sets the raw text content into a predefined option.
+     *
+     * @param {Blob|HTMLElement|string} data - The input data to be processed. It can be a Blob object, an HTMLElement,
+     *                                         a plain string, or a string formatted as a valid URL. The method determines
+     *                                         the data type and processes it accordingly.
+     * @return {void} - This method does not return any value. It processes the content and updates the relevant option
+     *                  property.
+     */
+    setPlainText(data) {
+
+        const mkPreSpan = (text) => {
+            const pre = document.createElement("pre");
+            pre.innerText = text;
+            pre.setAttribute("part", "text");
+            return pre.outerHTML;
+        }
+
+        if (data instanceof Blob) {
+            blobToText(data)
+                .then((text) => {
+                    const div = document.createElement("div");
+                    div.innerHTML = test;
+                    text = div.innerText;
+
+                    this.setOption("content", mkPreSpan(text));
+                })
+                .catch((error) => {
+                    throw new Error(error);
+                });
+
+            return;
+        } else if (data instanceof HTMLElement) {
+            data = data.outerText;
+        } else if (isString(data)) {
+            const div = document.createElement("div");
+            div.innerHTML = data;
+            data = div.innerText;
+        } else if (isURL(data)) {
+
+            getGlobal()
+                .fetch(data)
+                .then((response) => {
+                    return response.text();
+                })
+                .then((text) => {
+                    const div = document.createElement("div");
+                    div.innerHTML = text;
+                    text = div.innerText;
+
+                    this.setOption("content", mkPreSpan(text));
+                })
+                .catch((error) => {
+                    throw new Error(error);
+                });
+        } else {
+            throw new Error("HTMLElement or string expected");
+        }
+
+        this.setOption("content", mkPreSpan(data));
+    }
+
+    /**
+     *
+     * @return {Viewer}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-viewer";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        return [ViewerStyleSheet];
+    }
 }
 
 /**
@@ -325,12 +333,12 @@ class Viewer extends CustomElement {
  * @return {boolean}
  */
 function isURL(variable) {
-	try {
-		new URL(variable);
-		return true;
-	} catch (error) {
-		return false;
-	}
+    try {
+        new URL(variable);
+        return true;
+    } catch (error) {
+        return false;
+    }
 }
 
 /**
@@ -339,7 +347,7 @@ function isURL(variable) {
  * @return {boolean}
  */
 function isBlob(variable) {
-	return variable instanceof Blob;
+    return variable instanceof Blob;
 }
 
 /**
@@ -348,12 +356,12 @@ function isBlob(variable) {
  * @return {Promise<unknown>}
  */
 function blobToText(blob) {
-	return new Promise((resolve, reject) => {
-		const reader = new FileReader();
-		reader.onloadend = () => resolve(reader.result);
-		reader.onerror = reject;
-		reader.readAsText(blob);
-	});
+    return new Promise((resolve, reject) => {
+        const reader = new FileReader();
+        reader.onloadend = () => resolve(reader.result);
+        reader.onerror = reject;
+        reader.readAsText(blob);
+    });
 }
 
 /**
@@ -362,18 +370,18 @@ function blobToText(blob) {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
 
-	this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
+    this[viewerElementSymbol] = this.shadowRoot.getElementById("viewer");
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	return this;
+    return this;
 }
 
 /**
@@ -381,8 +389,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div id="viewer" data-monster-role="viewer" part="viewer"
              data-monster-replace="path:content"
              data-monster-attributes="class path:classes.viewer">

package/source/components/datatable/filter.mjs

@@ -1231,6 +1231,25 @@ function collectSearchQueries() {
 									.join(",")
 							);
 						},
+						"array-list": (value, key) => {
+							if (isString(value)) {
+								value = value.split(",");
+							}
+
+							if (!isArray(value)) {
+								return "";
+							}
+
+							return (
+								key +
+								"=" +
+								value
+									.map((v) => {
+										return `"${encodeURIComponent(v)}"`;
+									})
+									.join(",")
+							);
+						},
 						"date-range": (value, key) => {
 							const query = parseDateInput(value, key);
 							if (!query || query === "false") {

package/source/components/form/login.mjs

@@ -166,56 +166,88 @@ class Login extends CustomElement {
 	 * 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} classes Class definitions
-	 * @property {string} classes.usernameInvalid Class for invalid
-	 * @property {string} classes.passwordInvalid Class for invalid
-	 * @property {string} classes.emailInvalid Class for invalid
-	 * @property {boolean} disabled Disabled
-	 * @property {Object} features Feature definitions
-	 * @property {boolean} features.forgotPassword Forgot Password enabled
-	 * @property {boolean} features.redirectToFirstSuccessUrl Redirect to first success URL
-	 * @property {Object} actions Action definitions
-	 * @property {number} digits Digits
-	 * @property {Object[]} successUrls Success URLs
-	 * @property {string} successUrls.label Label
-	 * @property {string} successUrls.url URL
-	 * @property {number} timeoutForMessage Timeout for message
-	 * @property {number} timeoutForSuccess Timeout for success
-	 * @property {Object} accessKeys Access keys
-	 * @property {string} accessKeys.loginLink Login link
-	 * @property {string} accessKeys.username Username
-	 * @property {string} accessKeys.password Password
-	 * @property {Object} fetch Fetch definitions
-	 * @property {Object} fetch.login Login fetch
-	 * @property {string} fetch.login.url URL
-	 * @property {string} fetch.login.method Method
-	 * @property {string} fetch.login.mode Mode
-	 * @property {Object} fetch.login.headers Headers
-	 * @property {string} fetch.login.headers.accept Accept
-	 * @property {string} fetch.login.credentials Credentials
-	 * @property {Object} fetch.forgotPassword Forgot Password fetch
-	 * @property {string} fetch.forgotPassword.url URL
-	 * @property {string} fetch.forgotPassword.method Method
-	 * @property {string} fetch.forgotPassword.mode Mode
+	 * @property {string} templates.main The main HTML template used for rendering the login form
+	 * @property {Object} labels Label definitions used for localization and form messages
+	 * @property {string} labels.username Label for the username or email field
+	 * @property {string} labels.password Label for the password field
+	 * @property {string} labels.login Label for the login button
+	 * @property {string} labels.forgotPasswordLink Text for the "forgot password" link
+	 * @property {string} labels.mailAddress Label for the email input in password reset flow
+	 * @property {string} labels.requestLink Label for the button that sends a password reset code
+	 * @property {string} labels.digits Label for the digits input field
+	 * @property {string} labels.loginLink Label for the back-to-login link
+	 * @property {string} labels.secondFactor Label for the second factor authentication input
+	 * @property {string} labels.sendDigits Label for the button that submits the digits input
+	 * @property {string} labels.sendSecondFactorDigits Label for the button that submits the second factor code
+	 * @property {string} labels.resetLoginProcess Label for the link to return to the login form
+	 * @property {string} labels.messageEmptyUserName Message shown when username is empty
+	 * @property {string} labels.messageEmptyPassword Message shown when password is empty
+	 * @property {string} labels.messageEmptyBoth Message shown when both username and password are empty
+	 * @property {string} labels.messageEmptyEmail Message shown when email field is empty
+	 * @property {string} labels.messageInvalidEmail Message shown when an invalid email address is entered
+	 * @property {string} labels.digitsEmpty Message shown when digits field is empty
+	 * @property {string} labels.digitsInvalid Message shown when digits input is invalid
+	 * @property {string} labels.messageLoginFailed Message shown on failed login attempt
+	 * @property {string} labels.messageForbidden Message shown on successful login with insufficient permissions
+	 * @property {string} labels.messageSomethingWentWrong Fallback error message
+	 * @property {string} labels.messageThisFormIsNotConfigured Message shown if no backend URL is configured
+	 * @property {string} labels.messagePasswordResetDisabled Message shown if password reset is disabled due to 2FA
+	 * @property {Object} classes Class definitions for visual styling
+	 * @property {string} classes.usernameInvalid CSS class applied when username is invalid
+	 * @property {string} classes.passwordInvalid CSS class applied when password is invalid
+	 * @property {string} classes.emailInvalid CSS class applied when email input is invalid
+	 * @property {string} classes.button CSS class applied to all form buttons
+	 * @property {boolean} disabled If true, disables interaction with the component
+	 * @property {Object} features Feature flags to toggle optional behavior
+	 * @property {boolean} features.forgotPassword Enables the forgot password flow
+	 * @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} 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 {number} digits Number of digits required for second factor or password reset code input
+	 * @property {Object[]} successUrls List of URLs shown after successful login (e.g., home or logout)
+	 * @property {string} successUrls.label Label for the success URL (displayed)
+	 * @property {string} successUrls.url Actual target URL
+	 * @property {number} timeoutForMessage Duration in milliseconds to show error messages
+	 * @property {number} timeoutForSuccess Duration in milliseconds before triggering the post-login success state
+	 * @property {Object} accessKeys Keyboard access keys for accessibility and shortcuts
+	 * @property {string} accessKeys.loginLink Access key for switching to login form
+	 * @property {string} accessKeys.username Access key for focusing the username field
+	 * @property {string} accessKeys.password Access key for focusing the password field
+	 * @property {Object} fetch Definitions for backend requests to support login workflows
+	 * @property {Object} fetch.login Fetch config for login request
+	 * @property {string} fetch.login.url Endpoint to post login credentials to
+	 * @property {string} fetch.login.method HTTP method for login (e.g., "POST")
+	 * @property {string} fetch.login.mode Fetch mode (e.g., "same-origin")
+	 * @property {Object} fetch.login.headers HTTP headers to be sent with the login request
+	 * @property {string} fetch.login.headers.accept Accept header value
+	 * @property {string} fetch.login.headers.Content-Type Content-Type header value
+	 * @property {string} fetch.login.credentials Credential mode (e.g., "same-origin")
+	 * @property {Object} fetch.forgotPassword Fetch config for password reset code request
+	 * @property {string} fetch.forgotPassword.url Endpoint to request a reset link/code
+	 * @property {string} fetch.forgotPassword.method HTTP method
+	 * @property {string} fetch.forgotPassword.mode Fetch mode
 	 * @property {Object} fetch.forgotPassword.headers Headers
-	 * @property {string} fetch.forgotPassword.headers.accept Accept
-	 * @property {string} fetch.forgotPassword.credentials Credentials
-	 * @property {Object} fetch.digits Digits fetch
-	 * @property {string} fetch.digits.url URL
-	 * @property {string} fetch.digits.method Method
-	 * @property {string} fetch.digits.mode Mode
+	 * @property {string} fetch.forgotPassword.headers.accept Accept header
+	 * @property {string} fetch.forgotPassword.headers.Content-Type Content-Type header
+	 * @property {string} fetch.forgotPassword.credentials Credential mode
+	 * @property {Object} fetch.digits Fetch config for submitting password reset code
+	 * @property {string} fetch.digits.url Endpoint for validating the code
+	 * @property {string} fetch.digits.method HTTP method
+	 * @property {string} fetch.digits.mode Fetch mode
 	 * @property {Object} fetch.digits.headers Headers
-	 * @property {string} fetch.digits.headers.accept Accept
-	 * @property {string} fetch.digits.credentials Credentials
-	 * @property {Object} fetch.secondFactor Second Factor fetch
-	 * @property {string} fetch.secondFactor.url URL
-	 * @property {string} fetch.secondFactor.method Method
-	 * @property {string} fetch.secondFactor.mode Mode
+	 * @property {string} fetch.digits.headers.accept Accept header
+	 * @property {string} fetch.digits.headers.Content-Type Content-Type header
+	 * @property {string} fetch.digits.credentials Credential mode
+	 * @property {Object} fetch.secondFactor Fetch config for submitting second factor code
+	 * @property {string} fetch.secondFactor.url Endpoint to validate second factor code
+	 * @property {string} fetch.secondFactor.method HTTP method
+	 * @property {string} fetch.secondFactor.mode Fetch mode
 	 * @property {Object} fetch.secondFactor.headers Headers
-	 * @property {string} fetch.secondFactor.headers.accept Accept
-	 * @property {string} fetch.secondFactor.credentials Credentials
+	 * @property {string} fetch.secondFactor.headers.accept Accept header
+	 * @property {string} fetch.secondFactor.headers.Content-Type Content-Type header
+	 * @property {string} fetch.secondFactor.credentials Credential mode
 	 */
 	get defaults() {
 		return Object.assign({}, super.defaults, {
@@ -236,6 +268,10 @@ class Login extends CustomElement {
 			},
 			actions: {},
 
+			callbacks : {
+				username : null,
+			},
+
 			digits: 6,
 
 			successUrls: [
@@ -1076,11 +1112,19 @@ function initEventHandler() {
 	});
 
 	this[loginButtonSymbol].setOption("actions.click", (event) => {
-		// get username and password
-		const username = this.shadowRoot.querySelector(
+
+		let username = this.shadowRoot.querySelector(
 			"input[name='username']",
 		).value;
 
+		const userCallback = this.getOption("callbacks.username");
+		if (isFunction(userCallback)) {
+			const userCallbackResult = userCallback.call(this, username);
+			if (userCallbackResult !== undefined) {
+				username = userCallbackResult;
+			}
+		}
+
 		const password = this.shadowRoot.querySelector("monster-password").value;
 
 		let missingBits = 0;