@schukai/monster 3.113.0 → 3.114.0

package/CHANGELOG.md

@@ -2,6 +2,18 @@
 
 
 
+## [3.114.0] - 2025-03-23
+
+### Add Features
+
+- new login dialog
+- finalize digit control [#300](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/300)
+### Changes
+
+- update project and web tests
+
+
+
 ## [3.113.0] - 2025-03-20
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"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":"3.113.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@popperjs/core":"^2.11.8","buffer":"^6.0.3"},"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":"3.114.0"}

package/source/components/form/digits.mjs

@@ -0,0 +1,372 @@
+/**
+ * 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.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * 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 {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { DigitsStyleSheet } from "./stylesheet/digits.mjs";
+import { addErrorAttribute } from "../../dom/error.mjs";
+import { Observer } from "../../types/observer.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { InvalidStyleSheet } from "./stylesheet/invalid.mjs";
+
+export { Digits };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const digitsElementSymbol = Symbol("digitsElement");
+
+/**
+ * A Digits
+ *
+ * @fragments /fragments/components/form/digits/
+ *
+ * @example /examples/components/form/digits-simple
+ *
+ * @since 3.113.0
+ * @copyright schukai GmbH
+ * @summary A beautiful Digits that can make your life easier and also looks good.
+ */
+class Digits extends CustomControl {
+	/**
+	 *
+	 */
+	constructor() {
+		super();
+		initOptionObserver.call(this);
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/digits@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Components.Form.Digits
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		setTimeout(() => {
+			initControlReferences.call(this);
+			initEventHandler.call(this);
+			updateDigitControls.call(this);
+		}, 0);
+
+		return this;
+	}
+
+	/**
+	 * The current value of the Switch
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * console.log(e.value)
+	 * // ↦ on
+	 * ```
+	 *
+	 * @return {string}
+	 */
+	get value() {
+		return this.getOption("value");
+	}
+
+	/**
+	 * Set value
+	 *
+	 * ```
+	 * e = document.querySelector('monster-toggle-switch');
+	 * e.value="on"
+	 * ```
+	 *
+	 * @property {string} value
+	 */
+	set value(value) {
+		const chars = String(value).split("");
+
+		this.setOption("value", value);
+		this.setFormValue(value);
+
+		if (chars.every(checkCharacter.bind(this))) {
+			this.setValidity({ badInput: false }, "");
+		} else {
+			this.setValidity(
+				{ badInput: true },
+				"The value contains invalid characters",
+			);
+		}
+	}
+
+	/**
+	 * 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 {number} digits Number of digits
+	 * @property {string} characterSet Character set for the digits, which are allowed
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			digits: 4,
+			characterSet: "0123456789",
+
+			digitsControls: [],
+			value: null,
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-digits";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [DigitsStyleSheet, InvalidStyleSheet];
+	}
+
+	/**
+	 * @return {void}
+	 */
+	focus(options) {
+		const element = this[digitsElementSymbol].querySelector("input");
+		if (element) {
+			element.focus(options);
+		}
+	}
+
+	/**
+	 * @return {void}
+	 */
+	blur() {
+		const elements = this[digitsElementSymbol].querySelectorAll("input");
+		if (elements) {
+			for (const element of elements) {
+				element.blur();
+			}
+		}
+	}
+}
+
+/**
+ * @private
+ */
+function initOptionObserver() {
+	const self = this;
+
+	let lastValue = this.getOption("value");
+
+	self.attachObserver(
+		new Observer(function () {
+			if (lastValue !== self.getOption("value")) {
+				lastValue = self.getOption("value");
+				updateDigitControls.call(self);
+			}
+		}),
+	);
+}
+
+/**
+ * @private
+ */
+function updateDigitControls() {
+	const digits = this.getOption("digits") || this.setOption("digits", 4);
+
+	const controls = [];
+
+	const values = this.getOption("value") || "";
+
+	if (this[digitsElementSymbol]) {
+		this[digitsElementSymbol].style.gridTemplateColumns =
+			`repeat(${digits}, 1fr)`;
+	}
+
+	for (let i = 0; i < digits; i++) {
+		controls.push({
+			value: values[i] ?? " ",
+		});
+	}
+
+	this.setOption("digitsControls", controls);
+}
+
+/**
+ * @private
+ * @param value
+ * @returns {boolean}
+ */
+function checkCharacter(value) {
+	const characterSet = this.getOption("characterSet");
+	return characterSet.includes(value);
+}
+
+/**
+ * @private
+ * @returns {initEventHandler}
+ */
+function initEventHandler() {
+	const self = this;
+	const element = this[digitsElementSymbol];
+
+	element.addEventListener("keydown", function (event) {
+		if (event.target.tagName !== "INPUT") return;
+		const inputControl = event.target;
+
+		const pressedKey = event.key;
+
+		if ((event.ctrlKey || event.metaKey) && pressedKey === "v") {
+			console.log("paste");
+			event.preventDefault();
+
+			navigator.clipboard
+				.readText()
+				.then((clipText) => {
+					self.value = clipText;
+				})
+				.catch(() => {
+					addErrorAttribute(this, "Error while pasting");
+				});
+
+			return;
+		}
+
+		if (pressedKey === "ArrowRight") {
+			const nextControl = inputControl.nextElementSibling;
+			if (nextControl && nextControl.tagName === "INPUT") {
+				event.preventDefault();
+				nextControl.focus();
+			}
+			return;
+		}
+
+		if (pressedKey === "ArrowLeft") {
+			const previousControl = inputControl.previousElementSibling;
+			if (previousControl && previousControl.tagName === "INPUT") {
+				event.preventDefault();
+				previousControl.focus();
+			}
+			return;
+		}
+
+		if (pressedKey === "Backspace") {
+			if (inputControl.value !== "" && inputControl.value !== " ") {
+				event.preventDefault();
+				inputControl.value = "";
+				collectValues.call(self);
+				return;
+			} else {
+				const previousControl = inputControl.previousElementSibling;
+				if (previousControl && previousControl.tagName === "INPUT") {
+					event.preventDefault();
+					previousControl.focus();
+				}
+				return;
+			}
+		}
+
+		if (pressedKey.length === 1) {
+			if (!checkCharacter.call(self, pressedKey)) {
+				event.preventDefault();
+				inputControl.classList.add("invalid");
+
+				setTimeout(() => {
+					inputControl.classList.remove("invalid");
+				}, 500);
+				return;
+			}
+
+			if (inputControl.value.length === 1) {
+				event.preventDefault();
+				inputControl.value = pressedKey;
+				const nextControl = inputControl.nextElementSibling;
+				if (nextControl && nextControl.tagName === "INPUT") {
+					nextControl.focus();
+				}
+				collectValues.call(self);
+				return;
+			}
+		}
+	});
+
+	// Input event as a fallback: On successful input, the focus changes.
+	element.addEventListener("input", function (event) {
+		if (event.target.tagName !== "INPUT") return;
+		if (event.target.value.length === 1) {
+			const nextControl = event.target.nextElementSibling;
+			if (nextControl && nextControl.tagName === "INPUT") {
+				nextControl.focus();
+			}
+			collectValues.call(self);
+		}
+	});
+
+	return this;
+}
+
+function collectValues() {
+	const controlsValues = Array.from(
+		this[digitsElementSymbol].querySelectorAll("input"),
+	).map((input) => input.value || " ");
+	this.value = controlsValues.join("");
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function initControlReferences() {
+	this[digitsElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="digits"]`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <template id="digit">
+            <input maxlength="1"
+                   data-monster-attributes="
+                 value path:digit.value">
+        </template>
+
+        <div data-monster-role="control" part="control" data-monster-attributes="class path:classes.control">
+            <div part="digits" data-monster-role="digits"
+                 data-monster-insert="digit path:digitsControls"
+                 tabindex="-1"></div>
+        </div>`;
+}
+
+registerCustomElement(Digits);

package/source/components/form/field-set.mjs

@@ -30,6 +30,7 @@ import "../layout/collapse.mjs";
 import "./toggle-switch.mjs";
 import { getLocaleOfDocument } from "../../dom/locale.mjs";
 import { addErrorAttribute } from "../../dom/error.mjs";
+import { InvalidStyleSheet } from "./stylesheet/invalid.mjs";
 
 export { FieldSet };
 
@@ -148,7 +149,7 @@ class FieldSet extends CustomControl {
 	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
-		return [FieldSetStyleSheet];
+		return [FieldSetStyleSheet, InvalidStyleSheet];
 	}
 
 	/**

package/source/components/form/form.mjs

@@ -25,6 +25,7 @@ import { datasourceLinkedElementSymbol } from "../datatable/util.mjs";
 import { FormStyleSheet } from "./stylesheet/form.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
 import { getDocument } from "../../dom/util.mjs";
+import { InvalidStyleSheet } from "./stylesheet/invalid.mjs";
 
 export { Form };
 
@@ -88,7 +89,8 @@ class Form extends DataSet {
 			},
 
 			reportValidity: {
-				selector: "input,select,textarea,monster-select,monster-toggle-switch",
+				selector:
+					"input,select,textarea,monster-select,monster-toggle-switch,monster-password",
 			},
 
 			eventProcessing: true,
@@ -112,7 +114,7 @@ class Form extends DataSet {
 	 * @return {CSSStyleSheet[]}
 	 */
 	static getCSSStyleSheet() {
-		return [FormStyleSheet];
+		return [FormStyleSheet, InvalidStyleSheet];
 	}
 
 	/**