@schukai/monster 4.26.0 → 4.28.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [4.28.0] - 2025-07-04
+
+### Add Features
+
+- Improve formatting and clarity in translation handling
+
+
+
+## [4.27.0] - 2025-07-03
+
+### Add Features
+
+- Increase digits option and improve attribute observation [#330](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/330)
+
+
+
 ## [4.26.0] - 2025-07-03
 
 ### Add Features

package/package.json

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

package/source/components/form/digits.mjs

@@ -132,7 +132,7 @@ class Digits extends CustomControl {
 				main: getTemplate(),
 			},
 
-			digits: 4,
+			digits: 6,
 			characterSet: "0123456789",
 
 			digitsControls: [],
@@ -184,13 +184,20 @@ function initOptionObserver() {
 	const self = this;
 
 	let lastValue = this.getOption("value");
+	let lastDigits = this.getOption("digits");
 
 	self.attachObserver(
 		new Observer(function () {
+
 			if (lastValue !== self.getOption("value")) {
 				lastValue = self.getOption("value");
 				updateDigitControls.call(self);
 			}
+
+			if (lastDigits !== self.getOption("digits")) {
+				lastDigits = self.getOption("digits");
+				updateDigitControls.call(self);
+			}
 		}),
 	);
 }
@@ -237,6 +244,10 @@ function initEventHandler() {
 	const self = this;
 	const element = this[digitsElementSymbol];
 
+	// this[attributeObserverSymbol]['data-monster-option-digits'] = () => {
+	// 	this.setOption("digits", );
+	// }
+
 	element.addEventListener("keydown", function (event) {
 		if (event.target.tagName !== "INPUT") return;
 		const inputControl = event.target;

package/source/dom/customelement.mjs

@@ -713,6 +713,7 @@ class CustomElement extends HTMLElement {
 	 * @since 1.15.0
 	 */
 	attributeChangedCallback(attrName, oldVal, newVal) {
+
 		if (attrName.startsWith("data-monster-option-")) {
 			setOptionFromAttribute(
 				this,

package/source/i18n/formatter.mjs

@@ -41,7 +41,7 @@ class Formatter extends TextFormatter {
 	 * @param {object} object
 	 * @param {Translations} translation
 	 * @param {object} [options]
-	 * @throws {TypeError} value is not a object
+	 * @throws {TypeError} value is not an object
 	 */
 	constructor(object, translation, options) {
 		super(object, options);

package/source/i18n/translations.mjs

@@ -12,21 +12,21 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../constants.mjs";
-import { getLinkedObjects, hasObjectLink } from "../dom/attributes.mjs";
-import { ATTRIBUTE_OBJECTLINK } from "../dom/constants.mjs";
-import { getDocument } from "../dom/util.mjs";
-import { Base } from "../types/base.mjs";
-import { isObject, isString } from "../types/is.mjs";
+import {instanceSymbol} from "../constants.mjs";
+import {getLinkedObjects, hasObjectLink} from "../dom/attributes.mjs";
+import {ATTRIBUTE_OBJECTLINK} from "../dom/constants.mjs";
+import {getDocument} from "../dom/util.mjs";
+import {Base} from "../types/base.mjs";
+import {isObject, isString} from "../types/is.mjs";
 import {
-	validateInteger,
-	validateObject,
-	validateString,
+    validateInteger,
+    validateObject,
+    validateString,
 } from "../types/validate.mjs";
-import { Locale, parseLocale } from "./locale.mjs";
-import { translationsLinkSymbol } from "./provider.mjs";
+import {Locale, parseLocale} from "./locale.mjs";
+import {translationsLinkSymbol} from "./provider.mjs";
 
-export { Translations, getDocumentTranslations };
+export {Translations, getDocumentTranslations};
 
 /**
  * With this class you can manage translations and access the keys.
@@ -38,176 +38,178 @@ export { Translations, getDocumentTranslations };
  * @see https://datatracker.ietf.org/doc/html/rfc3066
  */
 class Translations extends Base {
-	/**
-	 *
-	 * @param {Locale} locale
-	 */
-	constructor(locale) {
-		super();
-
-		if (locale instanceof Locale) {
-			this.locale = locale;
-		} else {
-			this.locale = parseLocale(validateString(locale));
-		}
-
-		this.storage = new Map();
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 * @since 3.27.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/i18n/translations@@instance");
-	}
-
-	/**
-	 * Fetches a text using the specified key.
-	 * If no suitable key is found, `defaultText` is taken.
-	 *
-	 * @param {string} key
-	 * @param {string|undefined} defaultText
-	 * @return {string}
-	 * @throws {Error} key not found
-	 */
-	getText(key, defaultText) {
-		if (!this.storage.has(key)) {
-			if (defaultText === undefined) {
-				throw new Error(`key ${key} not found`);
-			}
-
-			return validateString(defaultText);
-		}
-
-		const r = this.storage.get(key);
-		if (isObject(r)) {
-			return this.getPluralRuleText(key, "other", defaultText);
-		}
-
-		return this.storage.get(key);
-	}
-
-	/**
-	 * A number `count` can be passed to this method. In addition to a number, one of the keywords can also be passed directly.
-	 * "zero", "one", "two", "few", "many" and "other". Remember: not every language has all rules.
-	 *
-	 * The appropriate text for this number is then selected. If no suitable key is found, `defaultText` is taken.
-	 *
-	 * @param {string} key
-	 * @param {integer|string} count
-	 * @param {string|undefined} defaultText
-	 * @return {string}
-	 */
-	getPluralRuleText(key, count, defaultText) {
-		if (!this.storage.has(key)) {
-			return validateString(defaultText);
-		}
-
-		const r = validateObject(this.storage.get(key));
-
-		let keyword;
-		if (isString(count)) {
-			keyword = count.toLocaleString();
-		} else {
-			count = validateInteger(count);
-			if (count === 0) {
-				// special handling for zero count
-				if (r.hasOwnProperty("zero")) {
-					return validateString(r?.zero);
-				}
-			}
-
-			keyword = new Intl.PluralRules(this.locale.toString()).select(
-				validateInteger(count),
-			);
-		}
-
-		if (r.hasOwnProperty(keyword)) {
-			return validateString(r[keyword]);
-		}
-
-		// @deprecated since 2023-03-14
-		// DEFAULT_KEY is undefined
-		// if (r.hasOwnProperty(DEFAULT_KEY)) {
-		//     return validateString(r[DEFAULT_KEY]);
-		// }
-
-		return validateString(defaultText);
-	}
-
-	/**
-	 * Set a text for a key
-	 *
-	 * ```
-	 * translations.setText("text1", "Make my day!");
-	 * // plural rules
-	 * translations.setText("text6", {
-	 *     "zero": "There are no files on Disk.",
-	 *     "one": "There is one file on Disk.",
-	 *     "other": "There are files on Disk."
-	 *     "default": "There are files on Disk."
-	 * });
-	 * ```
-	 *
-	 * @param {string} key
-	 * @param {string|object} text
-	 * @return {Translations}
-	 * @throws {TypeError} value is not a string or object
-	 */
-	setText(key, text) {
-		if (isString(text) || isObject(text)) {
-			this.storage.set(validateString(key), text);
-			return this;
-		}
-
-		throw new TypeError("value is not a string or object");
-	}
-
-	/**
-	 * This method can be used to transfer overlays from an object. The keys are transferred, and the values are entered
-	 * as text.
-	 *
-	 * The values can either be character strings or, in the case of texts with plural forms, objects. The plural forms
-	 * must be stored as text via a standard key "zero", "one", "two", "few", "many" and "other".
-	 *
-	 * Additionally, the key default can be specified, which will be used if no other key fits.
-	 *
-	 * In some languages, like for example in German, there is no own more number at the value 0. In these languages,
-	 * the function applies additionally zero.
-	 *
-	 * ```
-	 * translations.assignTranslations({
-	 *   "text1": "Make my day!",
-	 *   "text2": "I'll be back!",
-	 *   "text6": {
-	 *     "zero": "There are no files on Disk.",
-	 *     "one": "There is one file on Disk.",
-	 *     "other": "There are files on Disk."
-	 *     "default": "There are files on Disk."
-	 * });
-	 * ```
-	 *
-	 * @param {object} translations
-	 * @return {Translations}
-	 */
-	assignTranslations(translations) {
-		validateObject(translations);
-
-		if (translations instanceof Translations) {
-			translations.storage.forEach((v, k) => {
-				this.setText(k, v);
-			});
-			return this;
-		}
-
-		for (const [k, v] of Object.entries(translations)) {
-			this.setText(k, v);
-		}
-
-		return this;
-	}
+    /**
+     *
+     * @param {Locale} locale
+     */
+    constructor(locale) {
+        super();
+
+        if (locale instanceof Locale) {
+            this.locale = locale;
+        } else if (isString(locale)) {
+            this.locale = parseLocale(validateString(locale));
+        } else {
+            this.locale = getDocumentTranslations()
+        }
+
+        this.storage = new Map();
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     * @since 3.27.0
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/i18n/translations@@instance");
+    }
+
+    /**
+     * Fetches a text using the specified key.
+     * If no suitable key is found, `defaultText` is taken.
+     *
+     * @param {string} key
+     * @param {string|undefined} defaultText
+     * @return {string}
+     * @throws {Error} key not found
+     */
+    getText(key, defaultText) {
+        if (!this.storage.has(key)) {
+            if (defaultText === undefined) {
+                throw new Error(`key ${key} not found`);
+            }
+
+            return validateString(defaultText);
+        }
+
+        const r = this.storage.get(key);
+        if (isObject(r)) {
+            return this.getPluralRuleText(key, "other", defaultText);
+        }
+
+        return this.storage.get(key);
+    }
+
+    /**
+     * A number `count` can be passed to this method. In addition to a number, one of the keywords can also be passed directly.
+     * "zero", "one", "two", "few", "many" and "other". Remember: not every language has all rules.
+     *
+     * The appropriate text for this number is then selected. If no suitable key is found, `defaultText` is taken.
+     *
+     * @param {string} key
+     * @param {integer|string} count
+     * @param {string|undefined} defaultText
+     * @return {string}
+     */
+    getPluralRuleText(key, count, defaultText) {
+        if (!this.storage.has(key)) {
+            return validateString(defaultText);
+        }
+
+        const r = validateObject(this.storage.get(key));
+
+        let keyword;
+        if (isString(count)) {
+            keyword = count.toLocaleString();
+        } else {
+            count = validateInteger(count);
+            if (count === 0) {
+                // special handling for zero count
+                if (r.hasOwnProperty("zero")) {
+                    return validateString(r?.zero);
+                }
+            }
+
+            keyword = new Intl.PluralRules(this.locale.toString()).select(
+                validateInteger(count),
+            );
+        }
+
+        if (r.hasOwnProperty(keyword)) {
+            return validateString(r[keyword]);
+        }
+
+        // @deprecated since 2023-03-14
+        // DEFAULT_KEY is undefined
+        // if (r.hasOwnProperty(DEFAULT_KEY)) {
+        //     return validateString(r[DEFAULT_KEY]);
+        // }
+
+        return validateString(defaultText);
+    }
+
+    /**
+     * Set a text for a key
+     *
+     * ```
+     * translations.setText("text1", "Make my day!");
+     * // plural rules
+     * translations.setText("text6", {
+     *     "zero": "There are no files on Disk.",
+     *     "one": "There is one file on Disk.",
+     *     "other": "There are files on Disk."
+     *     "default": "There are files on Disk."
+     * });
+     * ```
+     *
+     * @param {string} key
+     * @param {string|object} text
+     * @return {Translations}
+     * @throws {TypeError} value is not a string or object
+     */
+    setText(key, text) {
+        if (isString(text) || isObject(text)) {
+            this.storage.set(validateString(key), text);
+            return this;
+        }
+
+        throw new TypeError("value is not a string or object");
+    }
+
+    /**
+     * This method can be used to transfer overlays from an object. The keys are transferred, and the values are entered
+     * as text.
+     *
+     * The values can either be character strings or, in the case of texts with plural forms, objects. The plural forms
+     * must be stored as text via a standard key "zero", "one", "two", "few", "many" and "other".
+     *
+     * Additionally, the key default can be specified, which will be used if no other key fits.
+     *
+     * In some languages, like for example in German, there is no own more number at the value 0. In these languages,
+     * the function applies additionally zero.
+     *
+     * ```
+     * translations.assignTranslations({
+     *   "text1": "Make my day!",
+     *   "text2": "I'll be back!",
+     *   "text6": {
+     *     "zero": "There are no files on Disk.",
+     *     "one": "There is one file on Disk.",
+     *     "other": "There are files on Disk."
+     *     "default": "There are files on Disk."
+     * });
+     * ```
+     *
+     * @param {object} translations
+     * @return {Translations}
+     */
+    assignTranslations(translations) {
+        validateObject(translations);
+
+        if (translations instanceof Translations) {
+            translations.storage.forEach((v, k) => {
+                this.setText(k, v);
+            });
+            return this;
+        }
+
+        for (const [k, v] of Object.entries(translations)) {
+            this.setText(k, v);
+        }
+
+        return this;
+    }
 }
 
 /**
@@ -221,34 +223,34 @@ class Translations extends Base {
  * @throws {Error} Missing translations.
  */
 function getDocumentTranslations(element) {
-	const d = getDocument();
-
-	if (!(element instanceof HTMLElement)) {
-		element = d.querySelector(
-			`[${ATTRIBUTE_OBJECTLINK}~="${translationsLinkSymbol.toString()}"]`,
-		);
-		if (element === null) {
-			throw new Error(
-				"Cannot find the element with translations. Add the translation object to the document.",
-			);
-		}
-	}
-
-	if (!(element instanceof HTMLElement)) {
-		throw new Error("Element is not an HTMLElement.");
-	}
-
-	if (!hasObjectLink(element, translationsLinkSymbol)) {
-		throw new Error("This element has no translations.");
-	}
-
-	const obj = getLinkedObjects(element, translationsLinkSymbol);
-
-	for (const t of obj) {
-		if (t instanceof Translations) {
-			return t;
-		}
-	}
-
-	throw new Error("Missing translations.");
+    const d = getDocument();
+
+    if (!(element instanceof HTMLElement)) {
+        element = d.querySelector(
+            `[${ATTRIBUTE_OBJECTLINK}~="${translationsLinkSymbol.toString()}"]`,
+        );
+        if (element === null) {
+            throw new Error(
+                "Cannot find the element with translations. Add the translation object to the document.",
+            );
+        }
+    }
+
+    if (!(element instanceof HTMLElement)) {
+        throw new Error("Element is not an HTMLElement.");
+    }
+
+    if (!hasObjectLink(element, translationsLinkSymbol)) {
+        throw new Error("This element has no translations.");
+    }
+
+    const obj = getLinkedObjects(element, translationsLinkSymbol);
+
+    for (const t of obj) {
+        if (t instanceof Translations) {
+            return t;
+        }
+    }
+
+    throw new Error("Missing translations.");
 }