@schukai/monster 3.110.4 → 3.112.0

package/source/components/datatable/status.mjs

@@ -13,26 +13,26 @@
  */
 
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findElementWithSelectorUpwards} from "../../dom/util.mjs";
-import {ThemeStyleSheet} from "../stylesheet/theme.mjs";
-import {Datasource} from "./datasource.mjs";
-import {SpinnerStyleSheet} from "../stylesheet/spinner.mjs";
-import {isString} from "../../types/is.mjs";
-import {instanceSymbol} from "../../constants.mjs";
+import { findElementWithSelectorUpwards } from "../../dom/util.mjs";
+import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
+import { Datasource } from "./datasource.mjs";
+import { SpinnerStyleSheet } from "../stylesheet/spinner.mjs";
+import { isString } from "../../types/is.mjs";
+import { instanceSymbol } from "../../constants.mjs";
 import "../form/select.mjs";
 
 import "./datasource/dom.mjs";
 import "./datasource/rest.mjs";
 import "../form/popper.mjs";
 import "../form/context-error.mjs";
-import {StatusStyleSheet} from "./stylesheet/status.mjs";
-import {Formatter} from "../../text/formatter.mjs";
+import { StatusStyleSheet } from "./stylesheet/status.mjs";
+import { Formatter } from "../../text/formatter.mjs";
 
-export {DatasourceStatus};
+export { DatasourceStatus };
 
 /**
  * @private
@@ -59,97 +59,96 @@ const datasourceLinkedElementSymbol = Symbol("datasourceLinkedElement");
  * @summary The Status component is used to show the current status of a datasource.
  */
 class DatasourceStatus extends CustomElement {
-    /**
-     */
-    constructor() {
-        super();
-    }
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @return {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/datatable/status@@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 {Object} datasource Datasource configuration
-     * @property {string} datasource.selector The selector of the datasource
-     * @property {Object} callbacks Callbacks
-     * @property {Function} callbacks.onError Callback function for error handling <code>function(message: string, event: Event): string</code>
-     * @property {Object} timeouts Timeouts
-     * @property {number} timeouts.message Timeout for the message
-     * @property {Object} state State
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            datasource: {
-                selector: null,
-            },
-
-            callbacks: {
-                onError: null
-            },
-
-
-            timeouts: {
-                message: 4000,
-            },
-
-            state: {
-                spinner: "hide",
-            },
-        });
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-datasource-status";
-    }
-
-    /**
-     * @private
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-    }
-
-    /**
-     *
-     * @param message
-     * @param timeout
-     * @returns {DatasourceStatus}
-     */
-    setErrorMessage(message, timeout) {
-        this[errorElementSymbol].setErrorMessage(message, timeout);
-        return this;
-    }
-
-    /**
-     *
-     * @return [CSSStyleSheet]
-     */
-    static getCSSStyleSheet() {
-        return [StatusStyleSheet, SpinnerStyleSheet, ThemeStyleSheet];
-    }
+	/**
+	 */
+	constructor() {
+		super();
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/datatable/status@@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 {Object} datasource Datasource configuration
+	 * @property {string} datasource.selector The selector of the datasource
+	 * @property {Object} callbacks Callbacks
+	 * @property {Function} callbacks.onError Callback function for error handling <code>function(message: string, event: Event): string</code>
+	 * @property {Object} timeouts Timeouts
+	 * @property {number} timeouts.message Timeout for the message
+	 * @property {Object} state State
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			datasource: {
+				selector: null,
+			},
+
+			callbacks: {
+				onError: null,
+			},
+
+			timeouts: {
+				message: 4000,
+			},
+
+			state: {
+				spinner: "hide",
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-datasource-status";
+	}
+
+	/**
+	 * @private
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 *
+	 * @param message
+	 * @param timeout
+	 * @returns {DatasourceStatus}
+	 */
+	setErrorMessage(message, timeout) {
+		this[errorElementSymbol].setErrorMessage(message, timeout);
+		return this;
+	}
+
+	/**
+	 *
+	 * @return [CSSStyleSheet]
+	 */
+	static getCSSStyleSheet() {
+		return [StatusStyleSheet, SpinnerStyleSheet, ThemeStyleSheet];
+	}
 }
 
 /**
@@ -158,85 +157,84 @@ class DatasourceStatus extends CustomElement {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
 
-    this[errorElementSymbol] = this.shadowRoot.querySelector(
-        "monster-context-error",
-    );
+	this[errorElementSymbol] = this.shadowRoot.querySelector(
+		"monster-context-error",
+	);
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    const selector = this.getOption("datasource.selector", "");
-    const self = this;
-
-    if (isString(selector)) {
-        const element = findElementWithSelectorUpwards(this, selector);
-        if (element === null) {
-            throw new Error("the selector must match exactly one element");
-        }
-
-        if (!(element instanceof Datasource)) {
-            throw new TypeError("the element must be a datasource");
-        }
-
-        let fadeOutTimer = null;
-
-        this[datasourceLinkedElementSymbol] = element;
-        element.addEventListener("monster-datasource-fetched", function () {
-            fadeOutTimer = setTimeout(() => {
-                self.setOption("state.spinner", "hide");
-            }, 800);
-        });
-
-        element.addEventListener("monster-datasource-fetch", function () {
-            if (fadeOutTimer) {
-                clearTimeout(fadeOutTimer);
-                fadeOutTimer = null;
-            }
-
-            self.setOption("state.spinner", "show");
-        });
-
-        element.addEventListener("monster-datasource-error", function (event) {
-            if (fadeOutTimer) {
-                clearTimeout(fadeOutTimer);
-                fadeOutTimer = null;
-            }
-
-            self.setOption("state.spinner", "hide");
-
-            const timeout = self.getOption("timeouts.message", 4000);
-            let msg = "Cannot load data";
-
-            try {
-                if (event.detail.error instanceof Error) {
-                    msg = event.detail.error.message;
-                } else if (event.detail.error instanceof Object) {
-                    msg = JSON.stringify(event.detail.error);
-                } else if (event.detail.error instanceof String) {
-                    msg = event.detail.error;
-                } else if (event.detail.error instanceof Number) {
-                    msg = event.detail.error.toString();
-                } else {
-                    msg = event.detail.error;
-                }
-            } catch (e) {
-            } finally {
-
-                const callback = self.getOption("callbacks.onError", null);
-                if (callback) {
-                    callback.call(self, msg, event);
-                } else {
-                    self[errorElementSymbol].setErrorMessage(msg, timeout);
-                }
-            }
-        });
-    }
+	const selector = this.getOption("datasource.selector", "");
+	const self = this;
+
+	if (isString(selector)) {
+		const element = findElementWithSelectorUpwards(this, selector);
+		if (element === null) {
+			throw new Error("the selector must match exactly one element");
+		}
+
+		if (!(element instanceof Datasource)) {
+			throw new TypeError("the element must be a datasource");
+		}
+
+		let fadeOutTimer = null;
+
+		this[datasourceLinkedElementSymbol] = element;
+		element.addEventListener("monster-datasource-fetched", function () {
+			fadeOutTimer = setTimeout(() => {
+				self.setOption("state.spinner", "hide");
+			}, 800);
+		});
+
+		element.addEventListener("monster-datasource-fetch", function () {
+			if (fadeOutTimer) {
+				clearTimeout(fadeOutTimer);
+				fadeOutTimer = null;
+			}
+
+			self.setOption("state.spinner", "show");
+		});
+
+		element.addEventListener("monster-datasource-error", function (event) {
+			if (fadeOutTimer) {
+				clearTimeout(fadeOutTimer);
+				fadeOutTimer = null;
+			}
+
+			self.setOption("state.spinner", "hide");
+
+			const timeout = self.getOption("timeouts.message", 4000);
+			let msg = "Cannot load data";
+
+			try {
+				if (event.detail.error instanceof Error) {
+					msg = event.detail.error.message;
+				} else if (event.detail.error instanceof Object) {
+					msg = JSON.stringify(event.detail.error);
+				} else if (event.detail.error instanceof String) {
+					msg = event.detail.error;
+				} else if (event.detail.error instanceof Number) {
+					msg = event.detail.error.toString();
+				} else {
+					msg = event.detail.error;
+				}
+			} catch (e) {
+			} finally {
+				const callback = self.getOption("callbacks.onError", null);
+				if (callback) {
+					callback.call(self, msg, event);
+				} else {
+					self[errorElementSymbol].setErrorMessage(msg, timeout);
+				}
+			}
+		});
+	}
 }
 
 /**
@@ -244,8 +242,8 @@ function initEventHandler() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control"
              data-monster-attributes="disabled path:disabled | if:true">
             <monster-context-error

package/source/components/form/reload.mjs

@@ -175,9 +175,8 @@ class Reload extends CustomElement {
 			return loadContent.call(this);
 		} catch (e) {
 			addErrorAttribute(this, e);
-			return Promise.reject(e)
+			return Promise.reject(e);
 		}
-
 	}
 }
 

package/source/components/form/util/fetch.mjs

@@ -76,7 +76,8 @@ function loadAndAssignContent(element, url, options, filter) {
 			if (oldScript.defer) newScript.defer = oldScript.defer;
 			if (oldScript.crossOrigin) newScript.crossOrigin = oldScript.crossOrigin;
 			if (oldScript.integrity) newScript.integrity = oldScript.integrity;
-			if (oldScript.referrerPolicy) newScript.referrerPolicy = oldScript.referrerPolicy;
+			if (oldScript.referrerPolicy)
+				newScript.referrerPolicy = oldScript.referrerPolicy;
 			newScript.textContent = oldScript.textContent;
 			document.head.appendChild(newScript);
 			if (oldScript.parentNode) {
@@ -121,7 +122,9 @@ function loadContent(url, options) {
 			if (statusClass === "4") {
 				throw new Error(`client error ${response.statusText}`);
 			}
-			throw new Error(`undefined status (${response.status} / ${response.statusText}) or type (${response.type})`);
+			throw new Error(
+				`undefined status (${response.status} / ${response.statusText}) or type (${response.type})`,
+			);
 		}
 		return response.text().then((content) => ({
 			content,

package/source/components/layout/popper.mjs

@@ -202,7 +202,7 @@ class Popper extends CustomElement {
 	}
 
 	/**
-	 * With this method you can show the popper.
+	 * With this method, you can show the popper.
 	 *
 	 * @return {Popper}
 	 */

package/source/components/layout/slider.mjs

@@ -745,7 +745,7 @@ function getTemplate() {
             <div data-monster-role="slider" part="slides">
                 <slot></slot>
             </div>
-            <div data-monster-role="thumbnails"></div>
+            <div data-monster-role="thumbnails" part="thumbnails"></div>
             <div class="next" data-monster-role="next" part="next" part="next">
                 <slot name="next"></slot>
             </div>