@schukai/monster 3.34.0 → 3.35.1

package/source/dom/dimension.mjs

@@ -5,21 +5,22 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {getWindow} from './util.mjs';
-
-export {convertToPixels, getDeviceDPI}
+import { getWindow } from "./util.mjs";
 
+export { convertToPixels, getDeviceDPI };
 
 /**
  * Stores the DPI of the device.
  *
+ * @private
  * @returns {number}
- * @type {number}
+ * @since 3.34.0
+ * @type {number|function}
  */
 let CURRENT_DEVICE_DPI = function () {
     let i = 0;
     for (i = 56; i < 2000; i++) {
-        if (getWindow().matchMedia("(max-resolution: " + i + "dpi)").matches === true) {
+        if (getWindow().matchMedia(`(max-resolution: ${i}dpi)`).matches === true) {
             return i;
         }
     }
@@ -29,18 +30,19 @@ let CURRENT_DEVICE_DPI = function () {
 /**
  * Returns the DPI of the device.
  *
+ * @since 3.34.0
+ * @memberOf Monster.DOM
  * @returns {number}
  */
 function getDeviceDPI() {
     // only call the function once
-    if (typeof CURRENT_DEVICE_DPI === 'function') {
+    if (typeof CURRENT_DEVICE_DPI === "function") {
         CURRENT_DEVICE_DPI = CURRENT_DEVICE_DPI();
     }
 
     return getWindow().devicePixelRatio * CURRENT_DEVICE_DPI;
 }
 
-
 /**
  * Converts a CSS value to pixels.
  *
@@ -59,47 +61,53 @@ function getDeviceDPI() {
  * - rem
  * - %
  *
- * @param value
- * @param parentElement
- * @param fontSizeElement
+ * @param {string} value
+ * @param {HTMLElement} [parentElement=document.documentElement]
+ * @param {HTMLElement} [fontSizeElement=document.documentElement]
  * @returns {number}
  * @license AGPLv3
- * @since 1.6.0
+ * @since 3.34.0
  * @copyright schukai GmbH
- * @memberOf Monster.DOM
  * @throws {Error} Unsupported unit
+ * @memberOf Monster.DOM
+ * @throws {Error} Invalid value format
  */
 
 function convertToPixels(value, parentElement = document.documentElement, fontSizeElement = document.documentElement) {
     const regex = /^([\d.]+)(.*)$/;
-    const [, num, unit] = value.match(regex);
+    const matchResult = value.match(regex);
+
+    if (!matchResult) {
+        throw new Error(`Invalid value format: ${value}`);
+    }
+
+    const [, num, unit] = matchResult;
+    
     const number = parseFloat(num);
     const dpi = getDeviceDPI();
 
-    if (unit === 'px') {
+    if (unit === "px") {
         return number;
-    } else if (unit === 'em') {
+    } else if (unit === "em") {
         const fontSize = parseFloat(window.getComputedStyle(fontSizeElement).fontSize);
         return number * fontSize;
-    } else if (unit === 'rem') {
+    } else if (unit === "rem") {
         const rootFontSize = parseFloat(window.getComputedStyle(parentElement).fontSize);
         return number * rootFontSize;
-    } else if (unit === '%') {
+    } else if (unit === "%") {
         const parentWidth = parseFloat(window.getComputedStyle(parentElement).width);
         return (number * parentWidth) / 100;
-    } else if (unit === 'in') {
+    } else if (unit === "in") {
         return number * dpi;
-    } else if (unit === 'cm') {
+    } else if (unit === "cm") {
         return (number * dpi) / 2.54;
-    } else if (unit === 'mm') {
+    } else if (unit === "mm") {
         return (number * dpi) / 25.4;
-    } else if (unit === 'pt') {
+    } else if (unit === "pt") {
         return (number * dpi) / 72;
-    } else if (unit === 'pc') {
+    } else if (unit === "pc") {
         return (number * dpi) / 6;
     } else {
         throw new Error(`Unsupported unit: ${unit}`);
     }
 }
-
-

package/source/dom/resourcemanager.mjs

@@ -8,7 +8,7 @@
 import { extend } from "../data/extend.mjs";
 import { Base } from "../types/base.mjs";
 import { getGlobalObject } from "../types/global.mjs";
-import {equipWithInternal} from "../types/internal.mjs";
+import { equipWithInternal } from "../types/internal.mjs";
 import { isArray } from "../types/is.mjs";
 import { ATTRIBUTE_HREF, ATTRIBUTE_SRC } from "./constants.mjs";
 import { Resource } from "./resource.mjs";
@@ -74,14 +74,17 @@ class ResourceManager extends Base {
      * @property {Array} resources.data=[] array with {@link Monster.DOM.Resource.Data} objects
      */
     get internalDefaults() {
-        return Object.assign({},  {
-            document: getGlobalObject("document"),
-            resources: {
-                scripts: [],
-                stylesheets: [],
-                data: [],
+        return Object.assign(
+            {},
+            {
+                document: getGlobalObject("document"),
+                resources: {
+                    scripts: [],
+                    stylesheets: [],
+                    data: [],
+                },
             },
-        });
+        );
     }
 
     /**

package/source/dom/slotted.mjs

@@ -1,7 +1,7 @@
-import {isString} from "../types/is.mjs";
-import {validateString} from "../types/validate.mjs";
+import { isString } from "../types/is.mjs";
+import { validateString } from "../types/validate.mjs";
 
-export {getSlottedElements, getSlottedNodes};
+export { getSlottedElements, getSlottedNodes };
 
 /**
  * @private
@@ -16,7 +16,7 @@ export {getSlottedElements, getSlottedNodes};
 function getSlottedNodes(query, name) {
     const self = this;
     const result = new Set();
-    
+
     if (!self.shadowRoot) {
         return result;
     }
@@ -57,7 +57,6 @@ function getSlottedNodes(query, name) {
     return result;
 }
 
-
 /**
  * @private
  * @param {String|undefined} query

package/source/dom/updater.mjs

@@ -5,10 +5,10 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {internalSymbol} from "../constants.mjs";
-import {diff} from "../data/diff.mjs";
-import {Pathfinder} from "../data/pathfinder.mjs";
-import {Pipe} from "../data/pipe.mjs";
+import { internalSymbol } from "../constants.mjs";
+import { diff } from "../data/diff.mjs";
+import { Pathfinder } from "../data/pathfinder.mjs";
+import { Pipe } from "../data/pipe.mjs";
 import {
     ATTRIBUTE_ERRORMESSAGE,
     ATTRIBUTE_UPDATER_ATTRIBUTES,
@@ -17,21 +17,21 @@ import {
     ATTRIBUTE_UPDATER_INSERT_REFERENCE,
     ATTRIBUTE_UPDATER_REMOVE,
     ATTRIBUTE_UPDATER_REPLACE,
-    ATTRIBUTE_UPDATER_SELECT_THIS
+    ATTRIBUTE_UPDATER_SELECT_THIS,
 } from "../dom/constants.mjs";
 
-import {Base} from "../types/base.mjs";
-import {isArray, isInstance, isIterable} from "../types/is.mjs";
-import {Observer} from "../types/observer.mjs";
-import {ProxyObserver} from "../types/proxyobserver.mjs";
-import {validateArray, validateInstance} from "../types/validate.mjs";
-import {clone} from "../util/clone.mjs";
-import {trimSpaces} from "../util/trimspaces.mjs";
-import {addToObjectLink} from "./attributes.mjs";
-import {findTargetElementFromEvent} from "./events.mjs";
-import {findDocumentTemplate} from "./template.mjs";
+import { Base } from "../types/base.mjs";
+import { isArray, isInstance, isIterable } from "../types/is.mjs";
+import { Observer } from "../types/observer.mjs";
+import { ProxyObserver } from "../types/proxyobserver.mjs";
+import { validateArray, validateInstance } from "../types/validate.mjs";
+import { clone } from "../util/clone.mjs";
+import { trimSpaces } from "../util/trimspaces.mjs";
+import { addToObjectLink } from "./attributes.mjs";
+import { findTargetElementFromEvent } from "./events.mjs";
+import { findDocumentTemplate } from "./template.mjs";
 
-export {Updater, addObjectWithUpdaterToElement};
+export { Updater, addObjectWithUpdaterToElement };
 
 /**
  * The updater class connects an object with the dom. In this way, structures and contents in the DOM can be programmatically adapted via attributes.
@@ -172,7 +172,7 @@ class Updater extends Base {
     run() {
         // the key __init__has no further meaning and is only
         // used to create the diff for empty objects.
-        this[internalSymbol].last = {__init__: true};
+        this[internalSymbol].last = { __init__: true };
         return this[internalSymbol].subject.notifyObservers();
     }
 
@@ -322,7 +322,7 @@ function retrieveAndSetValue(element) {
 
                 let options = element?.selectedOptions;
                 if (options === undefined) options = element.querySelectorAll(":scope option:checked");
-                value = Array.from(options).map(({value}) => value);
+                value = Array.from(options).map(({ value }) => value);
 
                 break;
         }
@@ -436,7 +436,7 @@ function insertElement(change) {
 
                 const attributes = containerElement.getAttribute(ATTRIBUTE_UPDATER_INSERT);
                 if (attributes === null) continue;
-                
+
                 let def = trimSpaces(attributes);
                 let i = def.indexOf(" ");
                 let key = trimSpaces(def.substr(0, i));
@@ -492,7 +492,7 @@ function insertElement(change) {
                 let nodes = containerElement.querySelectorAll(
                     `[${ATTRIBUTE_UPDATER_INSERT_REFERENCE}*="${refPrefix}"]`,
                 );
-                
+
                 for (const [, node] of Object.entries(nodes)) {
                     if (!available.has(node.getAttribute(ATTRIBUTE_UPDATER_INSERT_REFERENCE))) {
                         try {
@@ -719,7 +719,7 @@ function runUpdateAttributes(container, parts, subject) {
             if (mem.has(element)) return;
             mem.add(element);
 
-            // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set 
+            // this case occurs when the ATTRIBUTE_UPDATER_SELECT_THIS attribute is set
             if (!element.hasAttribute(ATTRIBUTE_UPDATER_ATTRIBUTES)) {
                 continue;
             }

package/source/dom/util.mjs

@@ -152,7 +152,6 @@ function getDocumentFragmentFromString(html) {
     return template.content;
 }
 
-
 /**
  * Recursively searches upwards from a given element to find an ancestor element
  * with a specified ID, considering both normal DOM and shadow DOM.
@@ -199,4 +198,4 @@ function findElementWithIdUpwards(element, targetId) {
 
     // Otherwise, search the current element's parent
     return findElementWithIdUpwards(element.parentElement, targetId);
-}
+}

package/source/i18n/formatter.mjs

@@ -5,14 +5,14 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {instanceSymbol, internalSymbol} from "../constants.mjs";
-import {extend} from "../data/extend.mjs";
+import { instanceSymbol, internalSymbol } from "../constants.mjs";
+import { extend } from "../data/extend.mjs";
 
-import {Formatter as TextFormatter} from "../text/formatter.mjs";
-import {validateInstance, validateString} from "../types/validate.mjs";
-import {Translations} from "./translations.mjs";
+import { Formatter as TextFormatter } from "../text/formatter.mjs";
+import { validateInstance, validateString } from "../types/validate.mjs";
+import { Translations } from "./translations.mjs";
 
-export {Formatter};
+export { Formatter };
 
 /**
  * @private

package/source/i18n/locale.mjs

@@ -5,7 +5,7 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {instanceSymbol} from "../constants.mjs";
+import { instanceSymbol } from "../constants.mjs";
 import { Base } from "../types/base.mjs";
 import { validateString } from "../types/validate.mjs";
 import { clone } from "../util/clone.mjs";

package/source/i18n/provider.mjs

@@ -5,14 +5,14 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {instanceSymbol} from "../constants.mjs";
-import {hasObjectLink, getLinkedObjects,addToObjectLink} from "../dom/attributes.mjs";
-import {getLocaleOfDocument} from "../dom/locale.mjs";
-import {BaseWithOptions} from "../types/basewithoptions.mjs";
-import {Locale} from "./locale.mjs";
-import {Translations} from "./translations.mjs";
+import { instanceSymbol } from "../constants.mjs";
+import { hasObjectLink, getLinkedObjects, addToObjectLink } from "../dom/attributes.mjs";
+import { getLocaleOfDocument } from "../dom/locale.mjs";
+import { BaseWithOptions } from "../types/basewithoptions.mjs";
+import { Locale } from "./locale.mjs";
+import { Translations } from "./translations.mjs";
 
-export {Provider, translationsLinkSymbol};
+export { Provider, translationsLinkSymbol };
 
 /**
  * @memberOf Monster.I18n
@@ -33,7 +33,6 @@ const translationsLinkSymbol = Symbol.for("@schukai/monster/i18n/translations@@l
  * @see {@link https://datatracker.ietf.org/doc/html/rfc3066}
  */
 class Provider extends BaseWithOptions {
-
     /**
      * This method is called by the `instanceof` operator.
      * @returns {symbol}
@@ -41,14 +40,13 @@ class Provider extends BaseWithOptions {
      */
     static get [instanceSymbol]() {
         return Symbol.for("@schukai/monster/i18n/provider@@instance");
-    }    
-    
+    }
+
     /**
      * @param {Locale|string} locale
      * @return {Promise}
      */
     getTranslations(locale) {
-
         if (locale === undefined) {
             locale = getLocaleOfDocument();
         }
@@ -68,7 +66,6 @@ class Provider extends BaseWithOptions {
      * @return {Provider}
      */
     assignToElement(locale, element) {
-
         if (locale === undefined) {
             locale = getLocaleOfDocument();
         }
@@ -86,7 +83,6 @@ class Provider extends BaseWithOptions {
         }
 
         return this.getTranslations(locale).then((obj) => {
-
             let translations = null;
             if (hasObjectLink(element, translationsLinkSymbol)) {
                 const objects = getLinkedObjects(element, translationsLinkSymbol);
@@ -96,21 +92,17 @@ class Provider extends BaseWithOptions {
                         break;
                     }
                 }
-                
+
                 if (!(translations instanceof Translations)) {
                     throw new Error("Object is not an instance of Translations");
                 }
-                
+
                 translations.assignTranslations(obj);
-                
             } else {
                 addToObjectLink(element, translationsLinkSymbol, obj);
             }
 
-
             return obj;
         });
-
     }
-
 }

package/source/i18n/providers/embed.mjs

@@ -5,16 +5,16 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-import {internalSymbol} from "../../constants.mjs";
-import {extend} from "../../data/extend.mjs";
-import {getDocument} from "../../dom/util.mjs";
-import {isString} from "../../types/is.mjs";
-import {validateObject, validateString} from "../../types/validate.mjs";
-import {parseLocale} from "../locale.mjs";
-import {Provider} from "../provider.mjs";
-import {Translations} from "../translations.mjs";
+import { internalSymbol } from "../../constants.mjs";
+import { extend } from "../../data/extend.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { isString } from "../../types/is.mjs";
+import { validateObject, validateString } from "../../types/validate.mjs";
+import { parseLocale } from "../locale.mjs";
+import { Provider } from "../provider.mjs";
+import { Translations } from "../translations.mjs";
 
-export {Embed};
+export { Embed };
 
 /**
  * The Embed provider retrieves a JSON file from the given Script Tag.
@@ -91,7 +91,6 @@ class Embed extends Provider {
         }
 
         return new Promise((resolve, reject) => {
-
             if (this.translateElement === null) {
                 reject(new Error("Text not found"));
                 return;
@@ -127,7 +126,6 @@ class Embed extends Provider {
         });
     }
 
-
     /**
      * Initializes the translations for the current document.
      *
@@ -137,7 +135,7 @@ class Embed extends Provider {
      * @returns {Promise<unknown[]>}
      */
     static assignTranslationsToElement(element) {
-        const d = getDocument()
+        const d = getDocument();
 
         if (!(element instanceof HTMLElement)) {
             element = d.querySelector("body");
@@ -149,7 +147,7 @@ class Embed extends Provider {
         }
 
         const promises = [];
-        
+
         list.forEach((translationElement) => {
             const p = new Embed(translationElement);
             promises.push(p.assignToElement(undefined, element));
@@ -157,5 +155,4 @@ class Embed extends Provider {
 
         return Promise.all(promises);
     }
-    
 }

package/source/i18n/translations.mjs

@@ -5,18 +5,17 @@
  * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
  */
 
-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} from "../types/validate.mjs";
-import {Locale, parseLocale} from "./locale.mjs";
-import {translationsLinkSymbol} from "./provider.mjs";
-
-
-export {Translations, getDocumentTranslations};
+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 } from "../types/validate.mjs";
+import { Locale, parseLocale } from "./locale.mjs";
+import { translationsLinkSymbol } from "./provider.mjs";
+
+export { Translations, getDocumentTranslations };
 
 /**
  * With this class you can manage translations and access the keys.
@@ -208,13 +207,13 @@ class Translations extends Base {
  * @throws {Error} Cannot find element with translations. Add a translations object to the document.
  * @throws {Error} This element has no translations.
  * @throws {Error} Missing translations.
+ * @memberOf Monster.I18n
  */
 function getDocumentTranslations(element) {
-
-    const d = getDocument()
+    const d = getDocument();
 
     if (!(element instanceof HTMLElement)) {
-        element = d.querySelector('[' + ATTRIBUTE_OBJECTLINK + '~="' + translationsLinkSymbol.toString() + '"]');
+        element = d.querySelector(`[${ATTRIBUTE_OBJECTLINK}~="${translationsLinkSymbol.toString()}"]`);
         if (element === null) {
             throw new Error("Cannot find element with translations. Add a translations object to the document.");
         }
@@ -237,7 +236,4 @@ function getDocumentTranslations(element) {
     }
 
     throw new Error("Missing translations.");
-
 }
-
-

package/source/text/util.mjs

@@ -1,7 +1,40 @@
-export {generateRangeComparisonExpression}
+export { generateRangeComparisonExpression };
 
 /**
- * Generates a comparison expression for a comma-separated string of ranges and single values.
+ * The `generateRangeComparisonExpression()` function is function that generates a string representation
+ * of a comparison expression based on a range of values. It takes three arguments:
+ *
+ * - expression (required): a string representation of a range of values in the format of start1-end1,start2-end2,value3....
+ * - valueName (required): a string representing the name of the value that is being compared to the range of values.
+ * - options (optional): an object containing additional options to customize the comparison expression.
+ *
+ * The generateRangeComparisonExpression() function returns a string representation of the comparison expression.
+ *
+ * ## Options
+ * The options parameter is an object that can have the following properties:
+ *
+ * urlEncode (boolean, default: false): if set to true, URL encodes the comparison operators.
+ * andOp (string, default: '&&'): the logical AND operator to use in the expression.
+ * orOp (string, default: '||'): the logical OR operator to use in the expression.
+ * eqOp (string, default: '=='): the equality operator to use in the expression.
+ * geOp (string, default: '>='): the greater than or equal to operator to use in the expression.
+ * leOp (string, default: '<='): the less than or equal to operator to use in the expression.
+ *
+ * Examples
+ *
+ * ```javascript
+ * const expression = '0-10,20-30';
+ * const valueName = 'age';
+ * const options = { urlEncode: true, andOp: 'and', orOp: 'or', eqOp: '=', geOp: '>=', leOp: '<=' };
+ * const comparisonExpression = generateRangeComparisonExpression(expression, valueName, options);
+ *
+ * console.log(comparisonExpression); // age%3E%3D0%20and%20age%3C%3D10%20or%20age%3E%3D20%20and%20age%3C%3D30
+ * ```
+ *
+ * In this example, the generateRangeComparisonExpression() function generates a string representation of the comparison
+ * expression for the expression and valueName parameters with the specified options. The resulting comparison
+ * expression is 'age>=0 and age<=10 or age>=20 and age<=30', URL encoded according to the urlEncode option.
+ *
  * @param {string} expression - The string expression to generate the comparison for.
  * @param {string} valueName - The name of the value to compare against.
  * @param {Object} [options] - The optional parameters.
@@ -13,33 +46,29 @@ export {generateRangeComparisonExpression}
  * @param {string} [options.leOp='<='] - The comparison operator for less than or equal to to use.
  * @returns {string} The generated comparison expression.
  * @throws {Error} If the input is invalid.
+ * @memberOf Monster.Text
+ * @summary Generates a comparison expression based on a range of values.
  */
 function generateRangeComparisonExpression(expression, valueName, options = {}) {
-    const {
-        urlEncode = false,
-        andOp = '&&',
-        orOp = '||',
-        eqOp = '==',
-        geOp = '>=',
-        leOp = '<=',
-    } = options;
-    const ranges = expression.split(',');
-    let comparison = '';
+    const { urlEncode = false, andOp = "&&", orOp = "||", eqOp = "==", geOp = ">=", leOp = "<=" } = options;
+    const ranges = expression.split(",");
+    let comparison = "";
     for (let i = 0; i < ranges.length; i++) {
         const range = ranges[i].trim();
-        if (range === '') {
+        if (range === "") {
             throw new Error(`Invalid range '${range}'`);
-        } else if (range.includes('-')) {
-            const [start, end] = range.split('-').map(s => (s === '' ? null : parseFloat(s)));
+        } else if (range.includes("-")) {
+            const [start, end] = range.split("-").map((s) => (s === "" ? null : parseFloat(s)));
             if ((start !== null && isNaN(start)) || (end !== null && isNaN(end))) {
                 throw new Error(`Invalid value in range '${range}'`);
             }
             if (start !== null && end !== null && start > end) {
                 throw new Error(`Invalid range '${range}'`);
             }
-            const compStart = start !== null ? `${valueName}${urlEncode ? encodeURIComponent(geOp) : geOp}${start}` : '';
-            const compEnd = end !== null ? `${valueName}${urlEncode ? encodeURIComponent(leOp) : leOp}${end}` : '';
-            const compRange = `${compStart}${compStart && compEnd ? ` ${andOp} ` : ''}${compEnd}`;
+            const compStart =
+                start !== null ? `${valueName}${urlEncode ? encodeURIComponent(geOp) : geOp}${start}` : "";
+            const compEnd = end !== null ? `${valueName}${urlEncode ? encodeURIComponent(leOp) : leOp}${end}` : "";
+            const compRange = `${compStart}${compStart && compEnd ? ` ${andOp} ` : ""}${compEnd}`;
             comparison += ranges.length > 1 ? `(${compRange})` : compRange;
         } else {
             const value = parseFloat(range);

package/source/types/base.mjs

@@ -17,7 +17,7 @@ export { Base };
  *
  * Therefor the class has a static method ` [Symbol.hasInstance](that)` which returns true if the object
  * is an instance of the class.
- * 
+ *
  * @see [https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance](developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/hasInstance)
  *
  * Derived classes should implement a static getter `instanceSymbol` which returns a unique symbol.