@schukai/monster 4.37.1 → 4.38.0

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [4.38.0] - 2025-07-21
+
+### Add Features
+
+- new kpi pile control [#331](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/331)
+
+
+
+## [4.37.2] - 2025-07-19
+
+### Bug Fixes
+
+- missing parameter
+### Changes
+
+- doc
+
+
+
 ## [4.37.1] - 2025-07-19
 
 ### Bug Fixes

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.37.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.38.0"}

package/source/components/content/viewer/html.mjs

@@ -14,10 +14,10 @@
 
 import { instanceSymbol } from "../../../constants.mjs";
 import {
-  assembleMethodSymbol,
-  CustomElement,
-  registerCustomElement,
-  updaterTransformerMethodsSymbol,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+	updaterTransformerMethodsSymbol,
 } from "../../../dom/customelement.mjs";
 import { HtmlStyleSheet } from "./stylesheet/html.mjs";
 import { sanitizeHtml } from "../../../dom/sanitize-html.mjs";
@@ -38,125 +38,125 @@ const htmlContentElementSymbol = Symbol("htmlContentElement");
  * @summary An HTML content component that can display sanitized HTML.
  */
 class HtmlContent extends CustomElement {
-  /**
-   * This method is called by the `instanceof` operator.
-   * @return {symbol}
-   */
-  static get [instanceSymbol]() {
-    return Symbol.for(
-      "@schukai/monster/components/content/viewer/html-content@@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 The HTML string to be displayed.
-   * @property {Object} features Features to enable or disable specific functionalities.
-   * @property {boolean} features.sanitize Whether to sanitize the HTML content (removes scripts, etc.). Defaults to true.
-   * @property {object} sanitize Sanitization options.
-   * @property {function} sanitize.callback A callback function to sanitize the HTML content. Defaults to a built-in sanitizer. You can use libraries like DOMPurify for this purpose.
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: {
-        main: getTemplate(),
-      },
-      content: "", // Default content is an empty slot
-
-      features: {
-        sanitize: true,
-      },
-
-      sanitize: {
-        callback: sanitizeHtml.bind(this),
-      },
-    });
-  }
-
-  /**
-   * Returns the updater transformer methods for this component.
-   * @returns {{sanitizeHtml: ((function(*): (*))|*)}}
-   */
-  [updaterTransformerMethodsSymbol]() {
-    return {
-      sanitizeHtml: (value) => {
-        if (this.getOption("features.sanitize")) {
-          return this.getOption("sanitize.callback")(value);
-        }
-        return value;
-      },
-      addErrorHandler: (value) => {
-        // Add error handling for images
-        if (typeof value === "string") {
-          const parser = new DOMParser();
-          const doc = parser.parseFromString(value, "text/html");
-          const images = doc.querySelectorAll("img");
-          images.forEach((img) => {
-            img.setAttribute(
-              "onerror",
-              "this.classList.add('notFoundImage'); this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';",
-            );
-            img.classList.add("notFoundError");
-          });
-
-          return doc.body.innerHTML;
-        }
-        return value;
-      },
-    };
-  }
-
-  /**
-   * Sets the content of the HtmlContent component.
-   * @param content
-   * @returns {HtmlContent}
-   */
-  setContent(content) {
-    this.setOption("content", content);
-    return this;
-  }
-
-  /**
-   * @return {string}
-   */
-  static getTag() {
-    return "monster-html-content";
-  }
-
-  /**
-   * @return {HtmlContent}
-   */
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-    initControlReferences.call(this);
-    initEventHandler.call(this);
-    grabChildren.call(this);
-  }
-
-  /**
-   * @return {Array}
-   */
-  static getCSSStyleSheet() {
-    return [HtmlStyleSheet];
-  }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for(
+			"@schukai/monster/components/content/viewer/html-content@@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 The HTML string to be displayed.
+	 * @property {Object} features Features to enable or disable specific functionalities.
+	 * @property {boolean} features.sanitize Whether to sanitize the HTML content (removes scripts, etc.). Defaults to true.
+	 * @property {object} sanitize Sanitization options.
+	 * @property {function} sanitize.callback A callback function to sanitize the HTML content. Defaults to a built-in sanitizer. You can use libraries like DOMPurify for this purpose.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			content: "", // Default content is an empty slot
+
+			features: {
+				sanitize: true,
+			},
+
+			sanitize: {
+				callback: sanitizeHtml.bind(this),
+			},
+		});
+	}
+
+	/**
+	 * Returns the updater transformer methods for this component.
+	 * @returns {{sanitizeHtml: ((function(*): (*))|*)}}
+	 */
+	[updaterTransformerMethodsSymbol]() {
+		return {
+			sanitizeHtml: (value) => {
+				if (this.getOption("features.sanitize")) {
+					return this.getOption("sanitize.callback")(value);
+				}
+				return value;
+			},
+			addErrorHandler: (value) => {
+				// Add error handling for images
+				if (typeof value === "string") {
+					const parser = new DOMParser();
+					const doc = parser.parseFromString(value, "text/html");
+					const images = doc.querySelectorAll("img");
+					images.forEach((img) => {
+						img.setAttribute(
+							"onerror",
+							"this.classList.add('notFoundImage'); this.src='data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7';",
+						);
+						img.classList.add("notFoundError");
+					});
+
+					return doc.body.innerHTML;
+				}
+				return value;
+			},
+		};
+	}
+
+	/**
+	 * Sets the content of the HtmlContent component.
+	 * @param content
+	 * @returns {HtmlContent}
+	 */
+	setContent(content) {
+		this.setOption("content", content);
+		return this;
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-html-content";
+	}
+
+	/**
+	 * @return {HtmlContent}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		grabChildren.call(this);
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	static getCSSStyleSheet() {
+		return [HtmlStyleSheet];
+	}
 }
 
 function grabChildren() {
-  // If there are children, we grab them and set the content
-  if (this.children.length > 0) {
-    const content = Array.from(this.children)
-      .map((child) => child.outerHTML)
-      .join("");
-    this.setContent(content);
-
-    this.innerHTML = "";
-  }
+	// If there are children, we grab them and set the content
+	if (this.children.length > 0) {
+		const content = Array.from(this.children)
+			.map((child) => child.outerHTML)
+			.join("");
+		this.setContent(content);
+
+		this.innerHTML = "";
+	}
 }
 
 /**
@@ -164,7 +164,7 @@ function grabChildren() {
  * @return {HtmlContent}
  */
 function initEventHandler() {
-  return this;
+	return this;
 }
 
 /**
@@ -172,14 +172,14 @@ function initEventHandler() {
  * @return {HtmlContent}
  */
 function initControlReferences() {
-  if (!this.shadowRoot) {
-    throw new Error("no shadow-root is defined");
-  }
-
-  this[htmlContentElementSymbol] = this.shadowRoot.querySelector(
-    "[data-monster-role=content-container]",
-  );
-  return this;
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[htmlContentElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=content-container]",
+	);
+	return this;
 }
 
 /**
@@ -187,8 +187,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-  // language=HTML
-  return `
+	// language=HTML
+	return `
         <div data-monster-role="content-container" part="content-container"
              data-monster-replace="path:content | call:sanitizeHtml | call:addErrorHandler | default: "
         ></div>