@schukai/monster 3.100.14 → 3.100.16

package/CHANGELOG.md

@@ -2,6 +2,25 @@
 
 
 
+## [3.100.16] - 2025-01-20
+
+### Bug Fixes
+
+- update resizeobserver
+
+
+
+## [3.100.15] - 2025-01-20
+
+### Bug Fixes
+
+- **datatable:** check if parent element exists for resize
+### Changes
+
+- documentation
+
+
+
 ## [3.100.14] - 2025-01-19
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@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":"3.100.14"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.13","@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":"3.100.16"}

package/source/components/content/copy.mjs

@@ -267,7 +267,20 @@ function attachResizeObserver() {
 		});
 	});
 
-	this[resizeObserverSymbol].observe(this.parentElement);
+	requestAnimationFrame(() => {
+
+		let parent = this.parentNode;
+		while(!(parent instanceof HTMLElement) && parent !== null) {
+			parent = parent.parentNode;
+		}
+
+		if (parent instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(parent);
+		}
+
+
+	});
+
 }
 
 /**

package/source/components/datatable/datatable.mjs

@@ -290,7 +290,19 @@ class DataTable extends CustomElement {
 			updateGrid.call(self);
 		});
 
-		this[resizeObserverSymbol].observe(this.parentNode);
+		requestAnimationFrame(() => {
+
+			let parent = this.parentNode;
+			while(!(parent instanceof HTMLElement) && parent !== null) {
+				parent = parent.parentNode;
+			}
+
+			if (parent instanceof HTMLElement) {
+				this[resizeObserverSymbol].observe(parent);
+			}
+
+
+		});
 	}
 
 	/**

package/source/components/datatable/filter/date-range.mjs

@@ -689,7 +689,18 @@ function attachResizeObserver() {
 		});
 	});
 
-	this[resizeObserverSymbol].observe(this.parentElement);
+	requestAnimationFrame(() => {
+
+		let parent = this.parentNode;
+		while(!(parent instanceof HTMLElement) && parent !== null) {
+			parent = parent.parentNode;
+		}
+
+		if (parent instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(parent);
+		}
+	});
+
 }
 
 function disconnectResizeObserver() {

package/source/components/form/button-bar.mjs

@@ -567,8 +567,21 @@ function updateResizeObserverObservation() {
 		this[resizeObserverSymbol].observe(node);
 	});
 
-	if (this.parentElement === null) return;
-	this[resizeObserverSymbol].observe(this.parentElement);
+	requestAnimationFrame(() => {
+
+		let parent = this.parentNode;
+		while(!(parent instanceof HTMLElement) && parent !== null) {
+			parent = parent.parentNode;
+		}
+
+		if (parent instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(parent);
+		}
+
+
+	});
+
+
 }
 
 /**

package/source/components/form/popper-button.mjs

@@ -345,7 +345,20 @@ function attachResizeObserver() {
 		});
 	});
 
-	this[resizeObserverSymbol].observe(this.parentElement);
+	requestAnimationFrame(() => {
+
+		let parent = this.parentNode;
+		while(!(parent instanceof HTMLElement) && parent !== null) {
+			parent = parent.parentNode;
+		}
+
+		if (parent instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(parent);
+		}
+
+
+	});
+
 }
 
 function disconnectResizeObserver() {

package/source/components/form/select.mjs

@@ -1097,7 +1097,20 @@ function attachResizeObserver() {
 		});
 	});
 
-	this[resizeObserverSymbol].observe(this.parentElement);
+	requestAnimationFrame(() => {
+
+		let parent = this.parentNode;
+		while(!(parent instanceof HTMLElement) && parent !== null) {
+			parent = parent.parentNode;
+		}
+
+		if (parent instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(parent);
+		}
+
+
+	});
+
 }
 
 /**

package/source/components/form/state-button.mjs

@@ -69,11 +69,13 @@ class StateButton extends Button {
 			templates: {
 				main: getTemplate(),
 			},
+
 			states: {
 				successful: getStateInstanceFor("successful"),
 				activity: getStateInstanceFor("activity"),
 				failed: getStateInstanceFor("failed"),
 			},
+
 			current: getStateInstanceFor("stateless"),
 
 			aria: {

package/source/components/host/call-button.mjs

@@ -12,21 +12,20 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
+import {instanceSymbol} from "../../constants.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	registerCustomElement,
+    assembleMethodSymbol,
+    CustomElement,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { CallButtonStyleSheet } from "./stylesheet/call-button.mjs";
-import { isArray, isObject, isFunction } from "../../types/is.mjs";
+import {CallButtonStyleSheet} from "./stylesheet/call-button.mjs";
+import {isArray, isObject, isFunction} from "../../types/is.mjs";
 import {
-	findElementWithSelectorUpwards,
-	getDocument,
+    findElementWithSelectorUpwards,
 } from "../../dom/util.mjs";
-import { ATTRIBUTE_PREFIX } from "../../dom/constants.mjs";
+import {ATTRIBUTE_PREFIX} from "../../dom/constants.mjs";
 
-export { CallButton };
+export {CallButton};
 
 /**
  * @private
@@ -46,109 +45,73 @@ const ATTRIBUTE_CALL = `${ATTRIBUTE_PREFIX}call`;
 /**
  * The call button component is used to call a method of another element.
  *
- * <img src="./images/call-button.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-call-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-call-button');` method.
- *
- * ```html
- * <monster-call-button></monster-call-button>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/component-host/source/filter.mjs';
- * document.createElement('monster-call-button');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml call-button.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CallButton
- * @enduml
- *
  * @copyright schukai GmbH
- * @summary A toggle button
+ * @summary A call button component that can call a method of another element.
  */
 class CallButton extends CustomElement {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/component-host/call-button@@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
-	 */
-	get defaults() {
-		const obj = Object.assign(
-			{},
-			super.defaults,
-			{
-				templates: {
-					main: getTemplate(),
-				},
-				references: {
-					callableSelector: undefined,
-				},
-
-				call: undefined,
-
-				labels: {
-					button: "<slot>Toggle</slot>",
-				},
-			},
-			initOptionsFromArguments.call(this),
-		);
-
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-call-button";
-	}
-
-	/**
-	 *
-	 * @return {CallButton}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-	}
-
-	/**
-	 * @return {Array}
-	 */
-	static getCSSStyleSheet() {
-		return [CallButtonStyleSheet];
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/component-host/call-button@@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
+     */
+    get defaults() {
+        return Object.assign(
+            {},
+            super.defaults,
+            {
+                templates: {
+                    main: getTemplate(),
+                },
+                references: {
+                    callableSelector: undefined,
+                },
+
+                call: undefined,
+
+                labels: {
+                    button: "<slot>Toggle</slot>",
+                },
+            },
+            initOptionsFromArguments.call(this),
+        );
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-call-button";
+    }
+
+    /**
+     * @return {CallButton}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+    }
+
+    /**
+     * @return {Array}
+     */
+    static getCSSStyleSheet() {
+        return [CallButtonStyleSheet];
+    }
 }
 
 /**
@@ -156,14 +119,14 @@ class CallButton extends CustomElement {
  * @return {CallButton}
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[callButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=control]",
-	);
-	return this;
+    if (!this.shadowRoot) {
+        throw new Error("no shadow-root is defined");
+    }
+
+    this[callButtonElementSymbol] = this.shadowRoot.querySelector(
+        "[data-monster-role=control]",
+    );
+    return this;
 }
 
 /**
@@ -173,26 +136,26 @@ function initControlReferences() {
  * @throws {Error} the datasource could not be initialized
  */
 function initOptionsFromArguments() {
-	const options = {};
-	const value = this.getAttribute(ATTRIBUTE_REFERENCE);
-	if (value) {
-		if (!isObject(options.references)) {
-			options.references = {};
-		}
-		const selectors = value.split(",");
-		if (isArray(selectors) && selectors.length === 0) {
-			throw new TypeError("incorrect arguments passed for the datasource");
-		}
-
-		options.references.callableSelector = selectors;
-	}
-
-	const call = this.getAttribute(ATTRIBUTE_CALL);
-	if (call) {
-		options.call = call;
-	}
-
-	return options;
+    const options = {};
+    const value = this.getAttribute(ATTRIBUTE_REFERENCE);
+    if (value) {
+        if (!isObject(options.references)) {
+            options.references = {};
+        }
+        const selectors = value.split(",");
+        if (isArray(selectors) && selectors.length === 0) {
+            throw new TypeError("incorrect arguments passed for the datasource");
+        }
+
+        options.references.callableSelector = selectors;
+    }
+
+    const call = this.getAttribute(ATTRIBUTE_CALL);
+    if (call) {
+        options.call = call;
+    }
+
+    return options;
 }
 
 /**
@@ -200,28 +163,28 @@ function initOptionsFromArguments() {
  * @throws {Error} The option references.callableSelector must be an array
  */
 function initEventHandler() {
-	this[callButtonElementSymbol].addEventListener("click", (event) => {
-		event.preventDefault();
-
-		const selectors = this.getOption("references.callableSelector");
-		if (!isArray(selectors)) {
-			throw new Error(
-				"The option references.callableSelector must be an array",
-			);
-		}
-
-		const call = this.getOption("call");
-		if (!call) {
-			throw new Error("The option call must be defined");
-		}
-
-		for (const selector of selectors) {
-			const element = findElementWithSelectorUpwards(this, selector);
-			if (element instanceof HTMLElement && isFunction(element?.[call])) {
-				element[call]();
-			}
-		}
-	});
+    this[callButtonElementSymbol].addEventListener("click", (event) => {
+        event.preventDefault();
+
+        const selectors = this.getOption("references.callableSelector");
+        if (!isArray(selectors)) {
+            throw new Error(
+                "The option references.callableSelector must be an array",
+            );
+        }
+
+        const call = this.getOption("call");
+        if (!call) {
+            throw new Error("The option call must be defined");
+        }
+
+        for (const selector of selectors) {
+            const element = findElementWithSelectorUpwards(this, selector);
+            if (element instanceof HTMLElement && isFunction(element?.[call])) {
+                element[call]();
+            }
+        }
+    });
 }
 
 /**
@@ -229,8 +192,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control"
              data-monster-attributes="class path:references.callableSelector | ?::hidden">
             <a href="#" data-monster-role="call-button" data-monster-replace="path:labels.button"></a>

package/source/components/host/config-manager.mjs

@@ -172,6 +172,10 @@ class ConfigManager extends CustomElement {
 	}
 }
 
+/**
+ * @private
+ * @returns {Promise<unknown>}
+ */
 function openDatabase() {
 	const window = getWindow();
 
@@ -280,6 +284,12 @@ function deleteBlob(key) {
 	});
 }
 
+/**
+ * @private
+ * @param key
+ * @param blob
+ * @returns {Promise<unknown>}
+ */
 function setBlob(key, blob) {
 	const store = getObjectStore.call(this, MODE_READ_WRITE);
 

package/source/components/host/host.mjs

@@ -71,43 +71,10 @@ const resourceManagerSymbol = Symbol("resourceManager");
 /**
  * The Host component is used to encapsulate the content of a web app.
  *
- * <img src="./images/host.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-host />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-host');` method.
- *
- * ```html
- * <monster-host></monster-host>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/component-state/source/host.mjs';
- * document.createElement('monster-host');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml host.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- Host
- * @enduml
- *
  * @copyright schukai GmbH
  * @summary A simple host component
- * @fires Monster.Components.Host.Host#monster-host-connected
- * @fires Monster.Components.Host.Host#monster-host-disconnected
+ * @fires monster-host-connected
+ * @fires monster-host-disconnected
  */
 class Host extends CustomElement {
 	/**
@@ -119,9 +86,6 @@ class Host extends CustomElement {
 	}
 
 	/**
-	 * 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
@@ -147,6 +111,10 @@ class Host extends CustomElement {
 		return this[configManagerElementSymbol].getConfig(key);
 	}
 
+	/**
+	 * @param {string} key
+	 * @returns {*}
+	 */
 	hasConfig(key) {
 		if (this[configManagerElementSymbol] instanceof HTMLElement === false) {
 			throw new Error("There is no config manager element");
@@ -154,6 +122,11 @@ class Host extends CustomElement {
 		return this[configManagerElementSymbol].hasConfig(key);
 	}
 
+	/**
+	 *
+	 * @param {key} key
+	 * @returns {*}
+	 */
 	deleteConfig(key) {
 		if (this[configManagerElementSymbol] instanceof HTMLElement === false) {
 			throw new Error("There is no config manager element");
@@ -177,7 +150,7 @@ class Host extends CustomElement {
 
 	/**
 	 * @private
-	 * @fires Monster.Components.Host.Host#monster-host-connected
+	 * @fires Host#monster-host-connected
 	 */
 	connectedCallback() {
 		super.connectedCallback();
@@ -199,7 +172,7 @@ class Host extends CustomElement {
 
 	/**
 	 * @private
-	 * @fires Monster.Components.Host.Host#monster-host-disconnected
+	 * @fires Host#monster-host-disconnected
 	 */
 	disconnectedCallback() {
 		super.disconnectedCallback();
@@ -231,7 +204,7 @@ class Host extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Host.Host}
+	 * @return {Host}
 	 */
 	[assembleMethodSymbol]() {
 		this[promisesSymbol] = [];
@@ -302,7 +275,7 @@ class Host extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Host.Host}
+	 * @return {Host}
 	 * @throws {Error} There is no overlay element defined.
 	 */
 	toggleOverlay() {
@@ -341,7 +314,6 @@ class Host extends CustomElement {
 	}
 
 	/**
-	 *
 	 * @return {string}
 	 */
 	static getTag() {
@@ -356,8 +328,7 @@ class Host extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @return {Monster.I18n.Locale}
+	 * @return {Locale}
 	 */
 	get locale() {
 		return getLocaleOfDocument();
@@ -402,6 +373,9 @@ function initControlReferences() {
 	);
 }
 
+/**
+ * @private
+ */
 function initTranslations() {
 	if (isIterable(this[promisesSymbol]) === false) {
 		this[promisesSymbol] = [];

package/source/components/host/overlay.mjs

@@ -67,40 +67,6 @@ const ATTRIBUTE_VALUE_OVERLAY_OPEN = "overlay-open";
 /**
  * The Overlay component is used to show an overlay and a button to open the overlay.
  *
- * <img src="./images/overlay.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-overlay />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-overlay');` method.
- *
- * ```html
- * <monster-overlay></monster-overlay>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/component-state/source/overlay.mjs';
- * document.createElement('monster-overlay');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml overlay.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Overlay
- * @enduml
- *
  * @copyright schukai GmbH
  * @summary A simple overlay component
  * @fires monster-overlay-before-open

package/source/components/host/toggle-button.mjs

@@ -19,41 +19,7 @@ import { CallButton } from "./call-button.mjs";
 export { ToggleButton };
 
 /**
- * The Toggle Button component is used toggle a other element witch has a method called toggle.
- *
- * <img src="./images/toggle-button.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-toggle-button />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-toggle-button');` method.
- *
- * ```html
- * <monster-toggle-button></monster-toggle-button>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/component-host/source/filter.mjs';
- * document.createElement('monster-toggle-button');
- * ```
- *
- * The Body should have a class "hidden" to ensure that the styles are applied correctly.
- *
- * ```css
- * body.hidden {
- *    visibility: hidden;
- * }
- * ```
- *
- * @startuml toggle-button.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CallButton
- * CallButton <|-- ToggleButton
- * @enduml
+ * The Toggle Button component is used toggle a other element wich has a method called toggle.
  *
  * @copyright schukai GmbH
  * @summary A toggle button

package/source/components/host/viewer.mjs

@@ -34,32 +34,6 @@ const viewerElementSymbol = Symbol("viewerElement");
 /**
  * The Viewer component is used to show a PDF, HTML or Image.
  *
- * <img src="./images/viewer.png">
- *
- * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
- *
- * You can create this control either by specifying the HTML tag <monster-viewer />` directly in the HTML or using
- * Javascript via the `document.createElement('monster-viewer');` method.
- *
- * ```html
- * <monster-viewer></monster-viewer>
- * ```
- *
- * Or you can create this CustomControl directly in Javascript:
- *
- * ```js
- * import '@schukai/monster/components/host/viewer.mjs';
- * document.createElement('monster-viewer');
- * ```
- *
- * @startuml viewer.png
- * skinparam monochrome true
- * skinparam shadowing false
- * HTMLElement <|-- CustomElement
- * CustomElement <|-- CustomControl
- * CustomControl <|-- Viewer
- * @enduml
- *
  * @copyright schukai GmbH
  * @summary A simple viewer component
  */
@@ -96,6 +70,11 @@ class Viewer extends CustomElement {
 		});
 	}
 
+	/**
+	 * 
+	 * @param html
+	 * @returns {Viewer}
+	 */
 	setContent(html) {
 		this.setOption("content", html);
 		return this;
@@ -208,7 +187,7 @@ class Viewer extends CustomElement {
 
 	/**
 	 *
-	 * @return {Monster.Components.Host.Viewer}
+	 * @return {Viewer}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();

package/source/components/layout/popper.mjs

@@ -357,7 +357,20 @@ function attachResizeObserver() {
 		});
 	});
 
-	this[resizeObserverSymbol].observe(this.parentElement);
+	requestAnimationFrame(() => {
+
+		let parent = this.parentNode;
+		while(!(parent instanceof HTMLElement) && parent !== null) {
+			parent = parent.parentNode;
+		}
+
+		if (parent instanceof HTMLElement) {
+			this[resizeObserverSymbol].observe(parent);
+		}
+
+
+	});
+
 }
 
 function disconnectResizeObserver() {