@schukai/monster 3.33.0 → 3.35.0

package/source/dom/dimension.mjs

@@ -0,0 +1,105 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/monster
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { getWindow } from "./util.mjs";
+
+export { convertToPixels, getDeviceDPI };
+
+/**
+ * Stores the DPI of the device.
+ *
+ * @private
+ * @returns {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) {
+            return i;
+        }
+    }
+    return i;
+};
+
+/**
+ * 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") {
+        CURRENT_DEVICE_DPI = CURRENT_DEVICE_DPI();
+    }
+
+    return getWindow().devicePixelRatio * CURRENT_DEVICE_DPI;
+}
+
+/**
+ * Converts a CSS value to pixels.
+ *
+ * As Example:
+ *
+ * ```js
+ * convertToPixels('1em') // returns the current font size in pixels
+ * convertToPixels('1rem') // returns the current root font size in pixels
+ * convertToPixels('1px') // returns 1
+ * convertToPixels('100%') // returns the current width of the parent element in pixels
+ * ```
+ *
+ * Following units are supported:
+ * - px
+ * - em
+ * - rem
+ * - %
+ *
+ * @param {string} value
+ * @param {HTMLElement} [parentElement=document.documentElement]
+ * @param {HTMLElement} [fontSizeElement=document.documentElement]
+ * @returns {number}
+ * @license AGPLv3
+ * @since 3.34.0
+ * @copyright schukai GmbH
+ * @throws {Error} Unsupported unit
+ * @memberOf Monster.DOM
+ */
+
+function convertToPixels(value, parentElement = document.documentElement, fontSizeElement = document.documentElement) {
+    const regex = /^([\d.]+)(.*)$/;
+    const [, num, unit] = value.match(regex);
+    const number = parseFloat(num);
+    const dpi = getDeviceDPI();
+
+    if (unit === "px") {
+        return number;
+    } else if (unit === "em") {
+        const fontSize = parseFloat(window.getComputedStyle(fontSizeElement).fontSize);
+        return number * fontSize;
+    } else if (unit === "rem") {
+        const rootFontSize = parseFloat(window.getComputedStyle(parentElement).fontSize);
+        return number * rootFontSize;
+    } else if (unit === "%") {
+        const parentWidth = parseFloat(window.getComputedStyle(parentElement).width);
+        return (number * parentWidth) / 100;
+    } else if (unit === "in") {
+        return number * dpi;
+    } else if (unit === "cm") {
+        return (number * dpi) / 2.54;
+    } else if (unit === "mm") {
+        return (number * dpi) / 25.4;
+    } else if (unit === "pt") {
+        return (number * dpi) / 72;
+    } 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.