@schukai/monster 3.111.0 → 3.112.0

package/source/components/content/stylesheet/camera-capture.mjs

@@ -10,10 +10,10 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {addAttributeToken} from "../../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../../dom/constants.mjs";
+import { addAttributeToken } from "../../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
 
-export {CameraCaptureStyleSheet}
+export { CameraCaptureStyleSheet };
 
 /**
  * @private
@@ -22,10 +22,17 @@ export {CameraCaptureStyleSheet}
 const CameraCaptureStyleSheet = new CSSStyleSheet();
 
 try {
-  CameraCaptureStyleSheet.insertRule(`
+	CameraCaptureStyleSheet.insertRule(
+		`
 @layer cameracapture { 
 [data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}:after,:before,:root{--monster-font-family:-apple-system,BlinkMacSystemFont,\"Quicksand\",\"Segoe UI\",\"Roboto\",\"Oxygen\",\"Ubuntu\",\"Cantarell\",\"Fira Sans\",\"Droid Sans\",\"Helvetica Neue\",Arial,sans-serif,\"Apple Color Emoji\",\"Segoe UI Emoji\",\"Segoe UI Symbol\";--monster-font-family-monospace:\"Consolas\",\"Courier New\",\"Roboto Mono\",\"Source Code Pro\",\"Fira Mono\",monospace;--monster-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-cinnamon-1);--monster-color-primary-4:var(--monster-color-cinnamon-1);--monster-bg-color-primary-1:var(--monster-color-gray-1);--monster-bg-color-primary-2:var(--monster-color-gray-2);--monster-bg-color-primary-3:var(--monster-color-gray-6);--monster-bg-color-primary-4:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-1:var(--monster-color-gray-1);--monster-color-primary-2:var(--monster-color-gray-1);--monster-color-primary-3:var(--monster-color-gray-6);--monster-color-primary-4:var(--monster-color-gray-6);--monster-bg-color-primary-1:var(--monster-color-gray-6);--monster-bg-color-primary-2:var(--monster-color-gray-3);--monster-bg-color-primary-3:var(--monster-color-gray-2);--monster-bg-color-primary-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-4);--monster-color-secondary-2:var(--monster-color-red-4);--monster-color-secondary-3:var(--monster-color-red-1);--monster-color-secondary-4:var(--monster-color-red-1);--monster-bg-color-secondary-1:var(--monster-color-gray-1);--monster-bg-color-secondary-2:var(--monster-color-red-2);--monster-bg-color-secondary-3:var(--monster-color-red-3);--monster-bg-color-secondary-4:var(--monster-color-red-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-secondary-1:var(--monster-color-red-1);--monster-color-secondary-2:var(--monster-color-red-1);--monster-color-secondary-3:var(--monster-color-red-6);--monster-color-secondary-4:var(--monster-color-red-4);--monster-bg-color-secondary-1:var(--monster-color-gray-6);--monster-bg-color-secondary-2:var(--monster-color-red-3);--monster-bg-color-secondary-3:var(--monster-color-red-2);--monster-bg-color-secondary-4:var(--monster-color-red-1)}}:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-4);--monster-color-tertiary-2:var(--monster-color-magenta-4);--monster-color-tertiary-3:var(--monster-color-magenta-6);--monster-color-tertiary-4:var(--monster-color-magenta-1);--monster-bg-color-tertiary-1:var(--monster-color-gray-1);--monster-bg-color-tertiary-2:var(--monster-color-magenta-1);--monster-bg-color-tertiary-3:var(--monster-color-magenta-2);--monster-bg-color-tertiary-4:var(--monster-color-magenta-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-tertiary-1:var(--monster-color-magenta-1);--monster-color-tertiary-2:var(--monster-color-magenta-6);--monster-color-tertiary-3:var(--monster-color-magenta-4);--monster-color-tertiary-4:var(--monster-color-magenta-4);--monster-bg-color-tertiary-1:var(--monster-color-gray-6);--monster-bg-color-tertiary-2:var(--monster-color-magenta-2);--monster-bg-color-tertiary-3:var(--monster-color-magenta-1);--monster-bg-color-tertiary-4:var(--monster-color-magenta-1)}}:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-4);--monster-color-destructive-3:var(--monster-color-red-6);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-4);--monster-bg-color-destructive-2:var(--monster-color-gray-1);--monster-bg-color-destructive-3:var(--monster-color-red-2);--monster-bg-color-destructive-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-destructive-1:var(--monster-color-red-1);--monster-color-destructive-2:var(--monster-color-red-3);--monster-color-destructive-3:var(--monster-color-red-4);--monster-color-destructive-4:var(--monster-color-red-1);--monster-bg-color-destructive-1:var(--monster-color-red-5);--monster-bg-color-destructive-2:var(--monster-color-gray-6);--monster-bg-color-destructive-3:var(--monster-color-red-1);--monster-bg-color-destructive-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-4);--monster-color-success-3:var(--monster-color-green-6);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-3);--monster-bg-color-success-2:var(--monster-color-gray-1);--monster-bg-color-success-3:var(--monster-color-green-2);--monster-bg-color-success-4:var(--monster-color-green-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-success-1:var(--monster-color-green-1);--monster-color-success-2:var(--monster-color-green-2);--monster-color-success-3:var(--monster-color-green-4);--monster-color-success-4:var(--monster-color-green-1);--monster-bg-color-success-1:var(--monster-color-green-5);--monster-bg-color-success-2:var(--monster-color-gray-6);--monster-bg-color-success-3:var(--monster-color-green-1);--monster-bg-color-success-4:var(--monster-color-green-3)}}:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-4);--monster-color-warning-3:var(--monster-color-orange-6);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-3);--monster-bg-color-warning-2:var(--monster-color-gray-1);--monster-bg-color-warning-3:var(--monster-color-orange-2);--monster-bg-color-warning-4:var(--monster-color-orange-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-warning-1:var(--monster-color-orange-1);--monster-color-warning-2:var(--monster-color-orange-3);--monster-color-warning-3:var(--monster-color-orange-4);--monster-color-warning-4:var(--monster-color-orange-1);--monster-bg-color-warning-1:var(--monster-color-orange-5);--monster-bg-color-warning-2:var(--monster-color-gray-6);--monster-bg-color-warning-3:var(--monster-color-orange-1);--monster-bg-color-warning-4:var(--monster-color-orange-3)}}:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-4);--monster-color-error-3:var(--monster-color-red-6);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-4);--monster-bg-color-error-2:var(--monster-color-gray-1);--monster-bg-color-error-3:var(--monster-color-red-2);--monster-bg-color-error-4:var(--monster-color-red-5)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-error-1:var(--monster-color-red-1);--monster-color-error-2:var(--monster-color-red-3);--monster-color-error-3:var(--monster-color-red-4);--monster-color-error-4:var(--monster-color-red-1);--monster-bg-color-error-1:var(--monster-color-red-5);--monster-bg-color-error-2:var(--monster-color-gray-6);--monster-bg-color-error-3:var(--monster-color-red-1);--monster-bg-color-error-4:var(--monster-color-red-4)}}:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-selection-1:var(--monster-color-gray-6);--monster-color-selection-2:var(--monster-color-gray-6);--monster-color-selection-3:var(--monster-color-gray-6);--monster-color-selection-4:var(--monster-color-gray-1);--monster-bg-color-selection-1:var(--monster-color-yellow-2);--monster-bg-color-selection-2:var(--monster-color-yellow-1);--monster-bg-color-selection-3:var(--monster-color-yellow-2);--monster-bg-color-selection-4:var(--monster-color-yellow-6)}}:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-4);--monster-color-primary-disabled-4:var(--monster-color-gray-4);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-1);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-6)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-color-primary-disabled-1:var(--monster-color-gray-4);--monster-color-primary-disabled-2:var(--monster-color-gray-4);--monster-color-primary-disabled-3:var(--monster-color-gray-3);--monster-color-primary-disabled-4:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-1:var(--monster-color-gray-6);--monster-bg-color-primary-disabled-2:var(--monster-color-gray-3);--monster-bg-color-primary-disabled-3:var(--monster-color-gray-2);--monster-bg-color-primary-disabled-4:var(--monster-color-gray-1)}}:after,:before,:root{--monster-color-gradient-1:#833ab4;--monster-color-gradient-2:#fd1d1d;--monster-color-gradient-3:#fcb045;--monster-box-shadow-1:none;--monster-box-shadow-2:-1px 1px 10px 1px hsla(0,0%,76%,.61);--monster-text-shadow:none;--monster-theme-control-bg-color:var(--monster-color-seashell-1);--monster-theme-control-color:var(--monster-color-seashell-6);--monster-theme-control-hover-color:var(--monster-color-seashell-6);--monster-theme-control-hover-bg-color:var(--monster-color-seashell-2);--monster-theme-control-border-width:2px;--monster-theme-control-border-style:solid;--monster-theme-control-border-radius:0;--monster-theme-control-border-color:var(--monster-color-primary-1)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-control-bg-color:var(--monster-color-gray-5);--monster-theme-control-color:var(--monster-color-gray-1);--monster-theme-control-border-color:var(--monster-color-gray-3);--monster-theme-control-hover-color:var(--monster-color-gray-1);--monster-theme-control-hover-bg-color:var(--monster-color-gray-6)}}:after,:before,:root{--monster-theme-on-color:var(--monster-color-green-1);--monster-theme-on-bg-color:var(--monster-color-green-5);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-4)}@media (prefers-color-scheme:dark){:after,:before,:root{--monster-theme-on-color:var(--monster-color-gray-6);--monster-theme-on-bg-color:var(--monster-color-gray-1);--monster-theme-off-color:var(--monster-color-gray-1);--monster-theme-off-bg-color:var(--monster-color-gray-5)}}:after,:before,:root{--monster-border-style:solid;--monster-border-width:3px;--monster-border-radius:0;--monster-outline-width:1px;--monster-popper-witharrrow-distance:-4px;--monster-z-index-default:0;--monster-z-index-outline:10;--monster-z-index-dropdown:200;--monster-z-index-dropdown-overlay:210;--monster-z-index-sticky:300;--monster-z-index-sticky-overlay:310;--monster-z-index-fixed:400;--monster-z-index-fixed-overlay:410;--monster-z-index-modal-backdrop:500;--monster-z-index-modal-backdrop-overlay:510;--monster-z-index-offcanvas:600;--monster-z-index-offcanvas-overlay:610;--monster-z-index-modal:700;--monster-z-index-modal-overlay:710;--monster-z-index-popover:800;--monster-z-index-popover-overlay:810;--monster-z-index-tooltip:800;--monster-z-index-tooltip-overlay:910;--monster-space-0:0;--monster-space-1:2px;--monster-space-2:4px;--monster-space-3:6px;--monster-space-4:10px;--monster-space-5:16px;--monster-space-6:26px;--monster-space-7:42px;--monster-breakpoint-0:480px;--monster-breakpoint-4:480px;--monster-breakpoint-7:768px;--monster-breakpoint-9:992px;--monster-breakpoint-12:1200px;--monster-dragger-width:2px;--monster-dragger-handle-width:4px;--monster-dragger-handle-height:50px}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}[data-monster-role=control]{background-color:var(--monster-color-primary-4);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);color:var(--monster-bg-color-primary-4);display:flex;flex-direction:column;justify-content:space-between;margin:0;padding:0}canvas,video{display:block;max-height:100%;max-width:100%}monster-button::part(button){border:none} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }

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>