fix(datatable): check if parent element exists for resize

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);
+			}
+
+
+		});
 	}
 
 	/**

source/components/host/call-button.mjs

@@ -22,7 +22,6 @@ import { CallButtonStyleSheet } from "./stylesheet/call-button.mjs";
 import {isArray, isObject, isFunction} from "../../types/is.mjs";
 import {
     findElementWithSelectorUpwards,
-	getDocument,
 } from "../../dom/util.mjs";
 import {ATTRIBUTE_PREFIX} from "../../dom/constants.mjs";
 
@@ -46,41 +45,8 @@ 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 {
     /**
@@ -101,7 +67,7 @@ class CallButton extends CustomElement {
      * @property {string} templates.main Main template
      */
     get defaults() {
-		const obj = Object.assign(
+        return Object.assign(
             {},
             super.defaults,
             {
@@ -120,8 +86,6 @@ class CallButton extends CustomElement {
             },
             initOptionsFromArguments.call(this),
         );
-
-		return obj;
     }
 
     /**
@@ -133,7 +97,6 @@ class CallButton extends CustomElement {
     }
 
     /**
-	 *
      * @return {CallButton}
      */
     [assembleMethodSymbol]() {

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);
 

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] = [];

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

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

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]();