chore: lint + formatt

4094ec95 · Volker Schukai · 167c23b6 · 4094ec95 · 4094ec95 · 4094ec95
Verified Commit 4094ec95 authored Jan 22, 2024 by Volker Schukai
--- a/source/components/datatable/datasource/rest.mjs
+++ b/source/components/datatable/datasource/rest.mjs
@@ -191,8 +191,7 @@ class Rest extends Datasource {
 	 * Fetches the data from the rest api
 	 * @returns {Promise<never>|*}
 	 */
-    fetch() {
+	fetch() {;
-        const self = this;
 		const opt = clone(this.getOption("read"));
 		this[dataSourceSymbol].setOption("read", opt);
@@ -208,34 +207,30 @@ class Rest extends Datasource {
 		this[dataSourceSymbol].setOption("read.url", url);
 		return new Promise((resolve, reject) => {
+			fireCustomEvent(this, "monster-datasource-fetch", {
-            fireCustomEvent(self, "monster-datasource-fetch", {
+				datasource: this,
-                datasource: self,
 			});
 			setTimeout(() => {
-            self[dataSourceSymbol].read().then((response) => {
+				this[dataSourceSymbol]
-                    fireCustomEvent(self, "monster-datasource-fetched", {
+					.read()
-                        datasource: self,
+					.then((response) => {
+						fireCustomEvent(this, "monster-datasource-fetched", {
+							datasource: this,
 						});
 						resolve(response);
 					})
 					.catch((error) => {
-                    fireCustomEvent(self, "monster-datasource-error", {
+						fireCustomEvent(this, "monster-datasource-error", {
 							error: error,
 						});
-                    addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, error.toString());
+						addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error.toString());
 						reject(error);
 					});
 			}, 0);
 		});
 	}
 	/**
@@ -301,7 +296,6 @@ function removeFilter() {
 	}
 }
 /**
 * @private
 */
@@ -320,12 +314,10 @@ function initFilter() {
 		);
 	this[filterObserverSymbol] = new Observer(() => {
 		const query = filterControl.getOption("query", undefined);
 		this.setParameters({ query: query });
 		this.fetch()
 			.then((response) => {
 				if (!(response instanceof Response)) {
 					throw new Error("Response is not an instance of Response");
 				}
@@ -352,8 +344,6 @@ function initFilter() {
 					.catch((e) => {
 						filterControl?.showFailureMessage(e.message);
 					});
 			})
 			.catch((e) => {
 				this.dispatchEvent(
@@ -366,7 +356,6 @@ function initFilter() {
 				filterControl?.showFailureMessage(e.message);
 				return Promise.reject(e);
 			});
 	});
@@ -388,9 +377,7 @@ function initAutoInit() {
 	}
 	setTimeout(() => {
-        this.fetch().catch(() => {
+		this.fetch().catch(() => {});
-        });
 	}, 0);
 }

--- a/source/components/datatable/datatable.mjs
+++ b/source/components/datatable/datatable.mjs
@@ -161,7 +161,7 @@ class DataTable extends CustomElement {
 			{
 				templates: {
 					main: getTemplate(),
-                    emptyState: getEmptyTemplate()
+					emptyState: getEmptyTemplate(),
 				},
 				datasource: {
@@ -271,13 +271,11 @@ class DataTable extends CustomElement {
 		getHostConfig
 			.call(this, getColumnVisibilityConfigKey)
 			.then((config) => {
 				const headerOrderMap = new Map();
 				getHostConfig
 					.call(this, getStoredOrderConfigKey)
 					.then((orderConfig) => {
 						if (isArray(orderConfig) || orderConfig.length > 0) {
 							for (let i = 0; i < orderConfig.length; i++) {
 								const item = orderConfig[i];
@@ -287,30 +285,35 @@ class DataTable extends CustomElement {
 								headerOrderMap.set(field, direction);
 							}
 						}
+					})
-                    }).then(() => {
+					.then(() => {
 						try {
 							initGridAndStructs.call(this, config, headerOrderMap);
 						} catch (error) {
-                            addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error.toString());
+							addAttributeToken(
+								this,
+								ATTRIBUTE_ERRORMESSAGE,
+								error?.message || error.toString(),
+							);
 						}
 						updateColumnBar.call(this);
 					})
 					.catch((error) => {
-                        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error.toString());
+						addAttributeToken(
+							this,
+							ATTRIBUTE_ERRORMESSAGE,
+							error?.message || error.toString(),
+						);
 					});
 			})
 			.catch((error) => {
-                addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error.toString());
+				addAttributeToken(
-            })
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error?.message || error.toString(),
+				);
+			});
 	}
 	/**
@@ -362,7 +365,6 @@ function getHostConfig(callback) {
 			return {};
 		}
 	});
 }
 /**
@@ -497,7 +499,6 @@ function initEventHandler() {
 				);
 				storeOrderStatement.call(self, true);
 			}, 0);
 		}
 	});
@@ -628,7 +629,6 @@ export function getStoredOrderConfigKey() {
 	return generateUniqueConfigKey("datatable", this?.id, "stored-order");
 }
 /**
 * @private
 */
@@ -653,7 +653,6 @@ function storeOrderStatement(doFetch) {
 	}
 	host.setConfig(configKey, list);
 }
 /**

--- a/source/components/datatable/datatable/header.mjs
+++ b/source/components/datatable/datatable/header.mjs
--- a/source/components/datatable/embedded-pagination.mjs
+++ b/source/components/datatable/embedded-pagination.mjs
@@ -3,7 +3,10 @@
 * SPDX-License-Identifier: AGPL-3.0
 */
-import {assembleMethodSymbol, registerCustomElement} from "../../dom/customelement.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
 import { EmbeddedPaginationStyleSheet } from "./stylesheet/embedded-pagination.mjs";
 import { instanceSymbol } from "../../constants.mjs";
@@ -13,7 +16,6 @@ import {Pagination} from "./pagination.mjs";
 import "./datasource/dom.mjs";
 import "./datasource/rest.mjs";
 export { EmbeddedPagination };
 /**
@@ -62,20 +64,14 @@ class EmbeddedPagination extends Pagination {
 	}
 	get defaults() {
-        return Object.assign(
+		return Object.assign({}, super.defaults, {
-            {},
-            super.defaults,
-            {
 			classes: {
 				spinner: "monster-spinner monster-theme-primary-3",
 				spinnerContainer: "monster-theme-primary-2 ",
 				error: "monster-theme-error-2 monster-bg-color-primary-2",
 				errorContainer: "monster-theme-primary-2",
 			},
+		});
-            }
-        );
 	}
 	/**
@@ -86,7 +82,6 @@ class EmbeddedPagination extends Pagination {
 		return "monster-embedded-pagination";
 	}
 	/**
 	 * @private
 	 * @returns {CSSStyleSheet}
@@ -94,8 +89,6 @@ class EmbeddedPagination extends Pagination {
 	static getControlCSSStyleSheet() {
 		return EmbeddedPaginationStyleSheet;
 	}
 }
 registerCustomElement(EmbeddedPagination);
--- a/source/components/datatable/filter.mjs
+++ b/source/components/datatable/filter.mjs
@@ -5,7 +5,10 @@
 import { instanceSymbol } from "../../constants.mjs";
 import { findTargetElementFromEvent } from "../../dom/events.mjs";
-import {findElementWithIdUpwards, findElementWithSelectorUpwards} from "../../dom/util.mjs";
+import {
+	findElementWithIdUpwards,
+	findElementWithSelectorUpwards,
+} from "../../dom/util.mjs";
 import {
 	assembleMethodSymbol,
 	CustomElement,
@@ -33,7 +36,11 @@ import {ThemeStyleSheet} from "../stylesheet/theme.mjs";
 import { SpaceStyleSheet } from "../stylesheet/space.mjs";
 import { FormStyleSheet } from "../stylesheet/form.mjs";
-import {getStoredFilterConfigKey, getFilterConfigKey, parseDateInput} from "./filter/util.mjs";
+import {
+	getStoredFilterConfigKey,
+	getFilterConfigKey,
+	parseDateInput,
+} from "./filter/util.mjs";
 import "./filter/select.mjs";
@@ -73,7 +80,9 @@ const filterControlElementSymbol = Symbol("filterControlElement");
 * @private
 * @type {symbol}
 */
-const filterSaveActionButtonElementSymbol = Symbol("filterSaveActionButtonElement");
+const filterSaveActionButtonElementSymbol = Symbol(
+	"filterSaveActionButtonElement",
+);
 /**
 * @private
@@ -156,7 +165,10 @@ class Filter extends CustomElement {
 	 * @returns {Monster.Components.Datatable.Filter}
 	 */
 	showFailureMessage(message) {
-        this[searchButtonElementSymbol].setState("failed", this.getOption("timeouts.message", 4000));
+		this[searchButtonElementSymbol].setState(
+			"failed",
+			this.getOption("timeouts.message", 4000),
+		);
 		this[searchButtonElementSymbol]
 			.setMessage(message.toString())
 			.showMessage(this.getOption("timeouts.message", 4000));
@@ -178,7 +190,10 @@ class Filter extends CustomElement {
 	 * @returns {Monster.Components.Datatable.Filter}
 	 */
 	showSuccess() {
-        this[searchButtonElementSymbol].setState("successful", this.getOption("timeouts.message", 4000));
+		this[searchButtonElementSymbol].setState(
+			"successful",
+			this.getOption("timeouts.message", 4000),
+		);
 		return this;
 	}
@@ -220,7 +235,7 @@ class Filter extends CustomElement {
 			storedConfig: {
 				enabled: true,
-                selector: ""
+				selector: "",
 			},
 			timeouts: {
@@ -242,7 +257,6 @@ class Filter extends CustomElement {
 			query: "",
 			defaultQuery: "",
 		});
 	}
 	/**
@@ -257,25 +271,29 @@ class Filter extends CustomElement {
 	 * @return {FilterButton}
 	 */
 	[assembleMethodSymbol]() {
+		this.setOption(
-        this.setOption("templateMapping.filter-save-label", this.getOption("labels.save"));
+			"templateMapping.filter-save-label",
-        this.setOption("templateMapping.filter-name-label", this.getOption("labels.filter-name"));
+			this.getOption("labels.save"),
+		);
+		this.setOption(
+			"templateMapping.filter-name-label",
+			this.getOption("labels.filter-name"),
+		);
 		super[assembleMethodSymbol]();
 		initControlReferences.call(this);
 		initEventHandler.call(this);
-        initFromConfig.call(this)
+		initFromConfig
+			.call(this)
 			.then(() => {
 				initFilter.call(this);
 				updateFilterTabs.call(this);
 			})
 			.catch((error) => {
 				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
 			});
 	}
 	/**
@@ -320,28 +338,30 @@ function initControlReferences() {
 	}
 	this[filterControlElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=control]"
+		"[data-monster-role=control]",
 	);
 	this[filterSelectElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=filter-select]"
+		"[data-monster-role=filter-select]",
 	);
 	this[searchButtonElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=search-button]"
+		"[data-monster-role=search-button]",
 	);
 	this[resetButtonElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=reset-button]"
+		"[data-monster-role=reset-button]",
 	);
 	this[saveButtonElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=save-button]"
+		"[data-monster-role=save-button]",
 	);
 	this[filterSaveActionButtonElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=save-action-button]"
+		"[data-monster-role=save-action-button]",
 	);
-    this[filterTabElementSymbol] = findElementWithSelectorUpwards(this, this.getOption("storedConfig.selector", ""))
+	this[filterTabElementSymbol] = findElementWithSelectorUpwards(
+		this,
+		this.getOption("storedConfig.selector", ""),
+	);
 	return this;
 }
@@ -351,7 +371,6 @@ function initControlReferences() {
 * @throws {Error} no filter label is defined
 */
 function initFilter() {
 	const storedConfig = this[settingsSymbol];
 	this[settingsSymbol] = new Settings();
@@ -390,8 +409,7 @@ function initFilter() {
 				try {
 					//    searchInput.value = valuesFromHash[element.id];
 					searchInput.value = v; //valuesFromHash[element.id];
-                } catch (error) {
+				} catch (error) {}
-                }
 			}
 			setting = this[settingsSymbol].get(value);
@@ -422,9 +440,8 @@ function initFilter() {
 * @returns {*}
 */
 function escapeAttributeValue(input) {
 	if (input === undefined || input === null) {
-        debugger
+		debugger;
 		return input;
 	}
@@ -442,7 +459,9 @@ function escapeAttributeValue(input) {
 * @returns {boolean}
 */
 function getVisibilityFromSlotAttribute(element) {
-    return !(element.hasAttribute("slot") && element.getAttribute("slot") === "hidden");
+	return !(
+		element.hasAttribute("slot") && element.getAttribute("slot") === "hidden"
+	);
 }
 /**
@@ -509,87 +528,108 @@ function initEventHandler() {
 	}
 	if (self[filterSaveActionButtonElementSymbol]) {
-        self[filterSaveActionButtonElementSymbol].setOption("actions.click", function (event) {
+		self[filterSaveActionButtonElementSymbol].setOption(
+			"actions.click",
-            const button = findTargetElementFromEvent(event, "data-monster-role", "save-action-button");
+			function (event) {
+				const button = findTargetElementFromEvent(
+					event,
+					"data-monster-role",
+					"save-action-button",
+				);
 				const form = button.closest("[data-monster-role=form]");
 				if (!form) {
-                button.setState("failed", self.getOption("timeouts.message", 4000))
+					button.setState("failed", self.getOption("timeouts.message", 4000));
 					return;
 				}
 				const input = form.querySelector("input[name=filter-name]");
 				if (!input) {
-                button.setState("failed", self.getOption("timeouts.message", 4000))
+					button.setState("failed", self.getOption("timeouts.message", 4000));
 					return;
 				}
 				const name = input.value;
 				if (!name) {
-                button.setState("failed", self.getOption("timeouts.message", 4000))
+					button.setState("failed", self.getOption("timeouts.message", 4000));
 					button.setMessage("Please enter a name").showMessage();
 					return;
 				}
-            doSearch.call(self, {showEffect: false}).then(() => {
+				doSearch
+					.call(self, { showEffect: false })
+					.then(() => {
 						const configKey = getStoredFilterConfigKey.call(self);
 						const host = getDocument().querySelector("monster-host");
-                if (!(host)) {
+						if (!host) {
 							return;
 						}
 						const query = self.getOption("query");
 						if (!query) {
-                    button.setState("failed", self.getOption("timeouts.message", self.getOption("timeouts.message", 4000)))
+							button.setState(
-                    button.setMessage("No query found").showMessage(self.getOption("timeouts.message", 4000));
+								"failed",
+								self.getOption(
+									"timeouts.message",
+									self.getOption("timeouts.message", 4000),
+								),
+							);
+							button
+								.setMessage("No query found")
+								.showMessage(self.getOption("timeouts.message", 4000));
 							return;
 						}
-                host.hasConfig(configKey).then((hasConfig) => {
+						host
+							.hasConfig(configKey)
+							.then((hasConfig) => {
 								return new Promise((resolve, reject) => {
 									if (hasConfig) {
 										host.getConfig(configKey).then(resolve).catch(reject);
 										return;
 									}
 									return resolve({});
+								});
 							})
+							.then((config) => {
-                }).then((config) => {
 								config[name] = query;
 								return host.setConfig(configKey, {
 									...config,
+								});
 							})
+							.then(() => {
+								button.setState(
-                }).then(() => {
+									"successful",
-                    button.setState("successful", self.getOption("timeouts.message", 4000))
+									self.getOption("timeouts.message", 4000),
+								);
 								updateFilterTabs.call(self);
-                }).catch((error) => {
-                    button.setState("failed", self.getOption("timeouts.message", 4000))
-                    button.setMessage(error.message).showMessage(self.getOption("timeouts.message", 4000));
 							})
+							.catch((error) => {
-            }).catch((error) => {
+								button.setState(
-                button.setState("failed", self.getOption("timeouts.message", 4000))
+									"failed",
-                const msg = error.message || error;
+									self.getOption("timeouts.message", 4000),
-                button.setMessage(msg).showMessage(self.getOption("timeouts.message", 4000));
+								);
+								button
+									.setMessage(error.message)
+									.showMessage(self.getOption("timeouts.message", 4000));
+							});
 					})
+					.catch((error) => {
+						button.setState("failed", self.getOption("timeouts.message", 4000));
+						const msg = error.message || error;
+						button
+							.setMessage(msg)
+							.showMessage(self.getOption("timeouts.message", 4000));
 					});
+			},
+		);
 	}
 	self[searchButtonElementSymbol].setOption("actions.click", () => {
-        doSearch.call(self).then(() => {
+		doSearch
+			.call(self)
-        }).catch((error) => {
+			.then(() => {})
+			.catch((error) => {});
-        })
 	});
 	// the reset button should reset the filter and the search query
@@ -641,33 +681,32 @@ function initEventHandler() {
 	// tabs
 	const element = this[filterTabElementSymbol];
 	if (element) {
-        initTabEvents.call(this)
+		initTabEvents.call(this);
 	}
 }
 function initTabEvents() {
+	this[filterTabElementSymbol].addEventListener(
-    this[filterTabElementSymbol].addEventListener("monster-tab-changed", (event) => {
+		"monster-tab-changed",
+		(event) => {
-        const query = event?.detail?.data?.['data-monster-query'];
+			const query = event?.detail?.data?.["data-monster-query"];
 			this.setOption("query", query);
+		},
+	);
+	this[filterTabElementSymbol].addEventListener(
+		"monster-tab-remove",
+		(event) => {
+			const labels = [];
+			const buttons = this[filterTabElementSymbol].getOption("buttons");
-    })
+			const keys = ["popper", "standard"];
-    this[filterTabElementSymbol].addEventListener("monster-tab-remove", (event) => {
-        const labels = []
-        const buttons = this[filterTabElementSymbol].getOption("buttons")
-        const keys=["popper", "standard"]
 			for (let i = 0; i < keys.length; i++) {
-            const key = keys[i]
+				const key = keys[i];
 				for (const button of buttons[key]) {
 					if (button.label !== event.detail.label) {
-                    labels.push(button.label)
+						labels.push(button.label);
 					}
 				}
 			}
@@ -679,38 +718,36 @@ function initTabEvents() {
 			}
 			const configKey = getStoredFilterConfigKey.call(this);
-        host.hasConfig(configKey).then((hasConfig) => {
+			host
+				.hasConfig(configKey)
+				.then((hasConfig) => {
 					if (!hasConfig) {
 						return;
 					}
 					return host.getConfig(configKey);
-        }).then((config) => {
+				})
+				.then((config) => {
 					for (const [name, query] of Object.entries(config)) {
 						if (labels.includes(name)) {
 							continue;
 						}
-                    delete config[name]
+						delete config[name];
 					}
 					return host.setConfig(configKey, {
-                    ...config
+						...config,
-                })
-        })
 					});
+				});
+		},
+	);
 }
 /**
 * @private
 */
 function updateFilterTabs() {
 	const element = this[filterTabElementSymbol];
 	if (!element) {
 		return;
@@ -723,17 +760,20 @@ function updateFilterTabs() {
 	}
 	const configKey = getStoredFilterConfigKey.call(this);
-    host.hasConfig(configKey).then((hasConfig) => {
+	host
+		.hasConfig(configKey)
+		.then((hasConfig) => {
 			if (!hasConfig) {
 				return;
 			}
 			return host.getConfig(configKey);
-    }).then((config) => {
+		})
+		.then((config) => {
 			for (const [name, query] of Object.entries(config)) {
+				const found = element.querySelector(
-            const found = element.querySelector(`[data-monster-button-label="${name}"]`);
+					`[data-monster-button-label="${name}"]`,
+				);
 				if (found) {
 					continue;
 				}
@@ -744,13 +784,17 @@ function updateFilterTabs() {
 				const escapedQuery = escapeAttributeValue(query);
-            element.insertAdjacentHTML("beforeend", `
+				element.insertAdjacentHTML(
+					"beforeend",
+					`
             <div data-monster-button-label="${name}"
             data-monster-removable="true" 
             data-monster-query="${escapedQuery}" data-monster-role="filter-tab" >
-             </div>`);
+             </div>`,
+				);
 			}
-    }).catch((error) => {
+		})
+		.catch((error) => {
 			if (error instanceof Error) {
 				addAttributeToken(
 					this,
@@ -760,7 +804,7 @@ function updateFilterTabs() {
 			} else {
 				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error + "");
 			}
-    })
+		});
 }
 /**
@@ -768,57 +812,57 @@ function updateFilterTabs() {
 * @param showEffect
 * @returns {Promise<*>}
 */
-function doSearch({showEffect} = {showEffect: true}) {
+function doSearch({ showEffect } = { showEffect: true }) {;
-    const self = this;
 	this.resetFailureMessage();
 	if (showEffect) {
-        this[searchButtonElementSymbol].setState("activity", self.getOption("timeouts.message", 4000));
+		this[searchButtonElementSymbol].setState(
+			"activity",
+			this.getOption("timeouts.message", 4000),
+		);
 	}
 	return collectSearchQueries
 		.call(this)
 		.then((query) => {
 			const buildQuery = buildSearchQuery.call(this, query);
 			if (buildQuery === "" && !this.getOption("defaultQuery")) {
 				const msg = this.getOption("labels.empty-query-and-no-default");
 				if (showEffect) {
 					this[searchButtonElementSymbol].removeState();
 					this[searchButtonElementSymbol]
 						.setMessage(msg)
-                        .showMessage(self.getOption("timeouts.message", 4000));
+						.showMessage(this.getOption("timeouts.message", 4000));
 				}
 				throw new Error(msg);
 			}
 			if (buildQuery === this.getOption("query")) {
 				const msg = this.getOption("labels.query-not-changed");
 				if (showEffect) {
 					this[searchButtonElementSymbol].removeState();
 					this[searchButtonElementSymbol]
 						.setMessage(msg)
-                        .showMessage(self.getOption("timeouts.message", 4000));
+						.showMessage(this.getOption("timeouts.message", 4000));
 				}
 				throw new Error(msg);
 			}
 			if (showEffect) {
-                this[searchButtonElementSymbol].setState("activity", self.getOption("timeouts.message", 4000));
+				this[searchButtonElementSymbol].setState(
+					"activity",
+					this.getOption("timeouts.message", 4000),
+				);
 			}
 			this.setOption("query", buildSearchQuery.call(this, query));
 		})
 		.catch((error) => {
 			if (error instanceof Error) {
 				addAttributeToken(
 					this,
@@ -830,7 +874,10 @@ function doSearch({showEffect} = {showEffect: true}) {
 			}
 			if (showEffect) {
-                this[searchButtonElementSymbol].setState("failed", self.getOption("timeouts.message", 4000));
+				this[searchButtonElementSymbol].setState(
+					"failed",
+					this.getOption("timeouts.message", 4000),
+				);
 				this[searchButtonElementSymbol].setMessage(error.message).showMessage();
 			}
@@ -957,13 +1004,11 @@ function collectSearchQueries() {
 			return;
 		}
 		getGlobal().location.hash = createBracketedKeyValueHash(currentHash);
 		resolve(query);
 	});
 }
 /**
 * @private
 * @param label
@@ -975,7 +1020,9 @@ function getControlValuesFromLabel(label) {
 	if (foundControl) {
 		if (foundControl.tagName === "INPUT") {
 			if (foundControl.type === "checkbox") {
-                const checkedControls = label.querySelectorAll(`${foundControl}:checked`);
+				const checkedControls = label.querySelectorAll(
+					`${foundControl}:checked`,
+				);
 				const values = [];
 				checkedControls.forEach((checkedControl) => {
@@ -1002,7 +1049,6 @@ function getControlValuesFromLabel(label) {
 	return null;
 }
 /**
 * @private
 * @returns {Promise<unknown>}
@@ -1038,7 +1084,11 @@ function initFromConfig() {
 					return;
 				}
-                addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error);
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error?.message || error,
+				);
 				reject(error);
 			});
 	});
@@ -1067,7 +1117,6 @@ function updateConfig() {
 * @return {string}
 */
 function getTemplate() {
 	// language=HTML
 	return `
        <div data-monster-role="control" part="control">

--- a/source/components/datatable/filter/util.mjs
+++ b/source/components/datatable/filter/util.mjs
 import { generateUniqueConfigKey } from "../../host/util.mjs";
 /**
 * @private
 * @returns {string}
@@ -70,7 +69,17 @@ export function parseDateInput(str, field) {
 				const to = rangeResult?.groups?.to;
 				if (from && to) {
-                    return ("(" + field + ">='" + from + " 00:00:00' AND " + field + "<='" + to + " 23:59:59')");
+					return (
+						"(" +
+						field +
+						">='" +
+						from +
+						" 00:00:00' AND " +
+						field +
+						"<='" +
+						to +
+						" 23:59:59')"
+					);
 				}
 				if (from) {
@@ -108,14 +117,21 @@ export function parseDateInput(str, field) {
 						return "(" + field + ">='" + date + "' 00:00:00')";
 					}
 					return (
-                        "(" + field + ">='" + date + " 00:00:00' AND " + field + "<='" + date + " 23:59:59')"
+						"(" +
+						field +
+						">='" +
+						date +
+						" 00:00:00' AND " +
+						field +
+						"<='" +
+						date +
+						" 23:59:59')"
 					);
 				} else {
 					return "false";
 				}
 			}
-        } catch (e) {
+		} catch (e) {}
-        }
 	}
 	return "false";

--- a/source/components/datatable/pagination.mjs
+++ b/source/components/datatable/pagination.mjs
@@ -196,7 +196,6 @@ class Pagination extends CustomElement {
 				new Observer(handleDataSourceChanges.bind(this)),
 			);
 		}
 	}
 	/**

--- a/source/components/datatable/status.mjs
+++ b/source/components/datatable/status.mjs
@@ -94,10 +94,7 @@ class DatasourceStatus extends CustomElement {
 	 * @property {string} datasource.selector The selector of the datasource
 	 */
 	get defaults() {
-        return Object.assign(
+		return Object.assign({}, super.defaults, {
-            {},
-            super.defaults,
-            {
 			templates: {
 				main: getTemplate(),
 			},
@@ -110,14 +107,10 @@ class DatasourceStatus extends CustomElement {
 				message: 4000,
 			},
 			state: {
 				spinner: "hide",
-                }
 			},
-        );
+		});
 	}
 	/**
@@ -128,7 +121,6 @@ class DatasourceStatus extends CustomElement {
 		return "monster-datasource-status";
 	}
 	/**
 	 * @private
 	 */
@@ -137,11 +129,8 @@ class DatasourceStatus extends CustomElement {
 		initControlReferences.call(this);
 		initEventHandler.call(this);
 	}
 	/**
 	 *
 	 * @return [CSSStyleSheet]
@@ -170,7 +159,6 @@ function initControlReferences() {
 * @private
 */
 function initEventHandler() {
 	const selector = this.getOption("datasource.selector", "");
 	const self = this;
@@ -188,12 +176,11 @@ function initEventHandler() {
 		this[datasourceLinkedElementSymbol] = element;
 		element.addEventListener("monster-datasource-fetched", function () {
 			self.setOption("state.spinner", "hide");
-        })
+		});
 		element.addEventListener("monster-datasource-fetch", function () {
 			self.setOption("state.spinner", "show");
+		});
-        })
 		element.addEventListener("monster-datasource-error", function (event) {
 			self.setOption("state.spinner", "hide");
@@ -201,7 +188,6 @@ function initEventHandler() {
 			let msg = "Cannot load data";
 			try {
 				if (event.detail.error instanceof Error) {
 					msg = event.detail.error.message;
 				} else if (event.detail.error instanceof Object) {
@@ -210,23 +196,15 @@ function initEventHandler() {
 					msg = event.detail.error;
 				} else if (event.detail.error instanceof Number) {
 					msg = event.detail.error.toString();
 				} else {
 					msg = event.detail.error;
 				}
 			} catch (e) {
 			} finally {
 				self[errorElementSymbol].setErrorMessage(msg, timeout);
 			}
+		});
-        })
 	}
 }
 /**

--- a/source/components/datatable/stylesheet/column-bar.mjs
+++ b/source/components/datatable/stylesheet/column-bar.mjs
--- a/source/components/datatable/stylesheet/dataset.mjs
+++ b/source/components/datatable/stylesheet/dataset.mjs
--- a/source/components/datatable/stylesheet/datasource.mjs
+++ b/source/components/datatable/stylesheet/datasource.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {DatasourceStyleSheet}
+export { DatasourceStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {DatasourceStyleSheet}
 const DatasourceStyleSheet = new CSSStyleSheet();
 try {
-  DatasourceStyleSheet.insertRule(`
+	DatasourceStyleSheet.insertRule(
+		`
 @layer datasource { 
 :host{display:none}:host(.intersection-observer){display:block;height:1px;overflow:hidden;width:1px} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }
--- a/source/components/datatable/stylesheet/datatable.mjs
+++ b/source/components/datatable/stylesheet/datatable.mjs
--- a/source/components/datatable/stylesheet/embedded-pagination.mjs
+++ b/source/components/datatable/stylesheet/embedded-pagination.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {EmbeddedPaginationStyleSheet}
+export { EmbeddedPaginationStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {EmbeddedPaginationStyleSheet}
 const EmbeddedPaginationStyleSheet = new CSSStyleSheet();
 try {
-  EmbeddedPaginationStyleSheet.insertRule(`
+	EmbeddedPaginationStyleSheet.insertRule(
+		`
 @layer embeddedpagination { 
 :where(html){line-height:1.15}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(pre){font-family:monospace,monospace;font-size:1em}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%;min-height:100%}body{box-sizing:border-box;margin:0;min-height:99%;padding:0;word-break:break-word}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}: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-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-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-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--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);--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);--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);--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);--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);--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);--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);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--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);--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-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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}@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);--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);--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);--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);--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);--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);--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);--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);--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)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.4}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul li{border-left:1px solid #000;margin:0;padding:0 10px}[data-monster-role=pagination] ul li a,[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover,[data-monster-role=pagination] ul li a:link,[data-monster-role=pagination] ul li a:visited{background-color:var(--monster-bg-color-primary-2);color:var(--monster-color-primary-2);outline:none;padding:0 .4rem;text-decoration:none;width:-moz-max-content;width:max-content}[data-monster-role=pagination] ul li a:active,[data-monster-role=pagination] ul li a:focus,[data-monster-role=pagination] ul li a:hover{outline:none}[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){[data-monster-role=pagination] ul li a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=pagination] ul li a.current{background-color:var(--monster-bg-color-primary-3);color:var(--monster-color-primary-3);cursor:unset}[data-monster-role=pagination] ul li a.disabled{cursor:not-allowed}[data-monster-role=pagination] ul li:first-child{border-left:none}@media (max-width:768px){[data-monster-role=pagination] ul li{padding:0 2px}[data-monster-role=pagination] ul li:first-child,[data-monster-role=pagination] ul li:nth-child(2){display:none}[data-monster-role=pagination] ul li:nth-child(3){border-left:none}} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }
--- a/source/components/datatable/stylesheet/filter-button.mjs
+++ b/source/components/datatable/stylesheet/filter-button.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {FilterButtonStyleSheet}
+export { FilterButtonStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {FilterButtonStyleSheet}
 const FilterButtonStyleSheet = new CSSStyleSheet();
 try {
-  FilterButtonStyleSheet.insertRule(`
+	FilterButtonStyleSheet.insertRule(
+		`
 @layer filterbutton { 
 :host{display:flex}[data-monster-role=control] a{align-items:center;background:none;color:var(--monster-color-primary-1);display:flex}[data-monster-role=control] a:after{content:url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='currentColor' class='bi bi-filter-square'%3E%3Cpath d='M14 1a1 1 0 0 1 1 1v12a1 1 0 0 1-1 1H2a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zM2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2z'/%3E%3Cpath d='M6 11.5a.5.5 0 0 1 .5-.5h3a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h7a.5.5 0 0 1 0 1h-7a.5.5 0 0 1-.5-.5m-2-3a.5.5 0 0 1 .5-.5h11a.5.5 0 0 1 0 1h-11a.5.5 0 0 1-.5-.5'/%3E%3C/svg%3E\");margin:2px 3px 0 5px;padding-top:4px} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }
--- a/source/components/datatable/stylesheet/filter-controls-defaults.mjs
+++ b/source/components/datatable/stylesheet/filter-controls-defaults.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {FilterControlsDefaultsStyleSheet}
+export { FilterControlsDefaultsStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {FilterControlsDefaultsStyleSheet}
 const FilterControlsDefaultsStyleSheet = new CSSStyleSheet();
 try {
-  FilterControlsDefaultsStyleSheet.insertRule(`
+	FilterControlsDefaultsStyleSheet.insertRule(
+		`
 @layer filtercontrolsdefaults { 
 [data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}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}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}div[data-monster-role=control] .form-container .form-group{margin-bottom:.2rem}div[data-monster-role=control] .form-container .form-group input[type=number]{text-align:right;width:5rem}div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-inner-spin-button,div[data-monster-role=control] .form-container .form-group input[type=number]::-webkit-outer-spin-button{margin-left:10px}div[data-monster-role=control] .form-container .form-group input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }
--- a/source/components/datatable/stylesheet/filter-date-range.mjs
+++ b/source/components/datatable/stylesheet/filter-date-range.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {FilterDateRangeStyleSheet}
+export { FilterDateRangeStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {FilterDateRangeStyleSheet}
 const FilterDateRangeStyleSheet = new CSSStyleSheet();
 try {
-  FilterDateRangeStyleSheet.insertRule(`
+	FilterDateRangeStyleSheet.insertRule(
+		`
 @layer filterdaterange { 
 [data-monster-role=input]{width:100%}.hidden{display:none} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }
--- a/source/components/datatable/stylesheet/filter-range.mjs
+++ b/source/components/datatable/stylesheet/filter-range.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {FilterRangeStyleSheet}
+export { FilterRangeStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {FilterRangeStyleSheet}
 const FilterRangeStyleSheet = new CSSStyleSheet();
 try {
-  FilterRangeStyleSheet.insertRule(`
+	FilterRangeStyleSheet.insertRule(
+		`
 @layer filterrange { 
 [data-monster-role=input]{width:100%} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }
--- a/source/components/datatable/stylesheet/filter.mjs
+++ b/source/components/datatable/stylesheet/filter.mjs
--- a/source/components/datatable/stylesheet/pagination.mjs
+++ b/source/components/datatable/stylesheet/pagination.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {PaginationStyleSheet}
+export { PaginationStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {PaginationStyleSheet}
 const PaginationStyleSheet = new CSSStyleSheet();
 try {
-  PaginationStyleSheet.insertRule(`
+	PaginationStyleSheet.insertRule(
+		`
 @layer pagination { 
 :where(html){line-height:1.15}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(pre){font-family:monospace,monospace;font-size:1em}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%;min-height:100%}body{box-sizing:border-box;margin:0;min-height:99%;padding:0;word-break:break-word}.block{display:block}.inline{display:inline}.inline-block{display:inline-block}.grid{display:grid}.inline-grid{display:inline-grid}.flex{display:flex}.inline-flex{display:inline-flex}.hidden,.hide,.none{display:none}.visible{visibility:visible}.invisible{visibility:hidden}.monster-button-primary,button{align-items:center;background-position:50%;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);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{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);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-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-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}: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-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-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-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--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);--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);--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);--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);--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);--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);--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);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--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);--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-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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}@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);--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);--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);--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);--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);--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);--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);--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);--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)}}span.monster-fx-ripple{animation:monster-fx-ripple .6s linear;background-color:hsla(0,0%,100%,.7);border-radius:50%;position:absolute;transform:scale(0)}@keyframes monster-fx-ripple{to{opacity:0;transform:scale(4)}}[data-monster-role=pagination]{box-sizing:border-box;display:flex;font-size:1rem;font-weight:400;justify-content:center;line-height:1.4}[data-monster-role=pagination] ul{align-items:center;display:flex;flex-wrap:wrap;justify-content:center;list-style:none;margin:20px 0;padding-left:0}[data-monster-role=pagination] ul li{margin:0 1px}[data-monster-role=pagination] ul li a{align-items:center;background-color:var(--monster-bg-color-primary-1);background-position:50%;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-color-primary-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch;width:-moz-max-content;width:max-content}[data-monster-role=pagination] ul li a.current{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4);cursor:unset}[data-monster-role=pagination] ul li a.disabled{background-color:var(--monster-bg-color-primary-disabled-1);color:var(--monster-color-primary-disabled-1);cursor:not-allowed} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }
--- a/source/components/datatable/stylesheet/select-filter.mjs
+++ b/source/components/datatable/stylesheet/select-filter.mjs
 /**
- * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Copyright schukai GmbH and contributors 2024. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
@@ -9,7 +8,7 @@
 import { addAttributeToken } from "../../../dom/attributes.mjs";
 import { ATTRIBUTE_ERRORMESSAGE } from "../../../dom/constants.mjs";
-export {SelectFilterStyleSheet}
+export { SelectFilterStyleSheet };
 /**
 * @private
@@ -18,10 +17,17 @@ export {SelectFilterStyleSheet}
 const SelectFilterStyleSheet = new CSSStyleSheet();
 try {
-  SelectFilterStyleSheet.insertRule(`
+	SelectFilterStyleSheet.insertRule(
+		`
 @layer selectfilter { 
 :where(html){line-height:1.15}:where(h1){font-size:2em;margin-block-end:.67em;margin-block-start:.67em}:where(dl,ol,ul) :where(dl,ol,ul){margin-block-end:0;margin-block-start:0}:where(hr){box-sizing:content-box;color:inherit;height:0}:where(pre){font-family:monospace,monospace;font-size:1em}:where(abbr[title]){text-decoration:underline;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}:where(b,strong){font-weight:bolder}:where(code,kbd,samp){font-family:monospace,monospace;font-size:1em}:where(small){font-size:80%}:where(table){border-color:currentColor;text-indent:0}:where(button,input,select){margin:0}:where(button){text-transform:none}:where(button,input:is([type=button i],[type=reset i],[type=submit i])){-webkit-appearance:button}:where(progress){vertical-align:baseline}:where(select){text-transform:none}:where(textarea){margin:0}:where(input[type=search i]){-webkit-appearance:textfield;outline-offset:-2px}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}::-webkit-input-placeholder{color:inherit;opacity:.54}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focus-inner{border-style:none;padding:0}:where(button,input:is([type=button i],[type=color i],[type=reset i],[type=submit i]))::-moz-focusring{outline:1px dotted ButtonText}:where(:-moz-ui-invalid){box-shadow:none}:where(dialog){background-color:#fff;border:solid;color:#000;height:-moz-fit-content;height:fit-content;left:0;margin:auto;padding:1em;position:absolute;right:0;width:-moz-fit-content;width:fit-content}:where(dialog:not([open])){display:none}:where(summary){display:list-item}html{height:100%;min-height:100%}body{box-sizing:border-box;margin:0;min-height:99%;padding:0;word-break:break-word}.monster-button-primary,button{align-items:center;background-position:50%;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);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-primary{background-color:var(--monster-bg-color-primary-4);border-color:var(--monster-bg-color-primary-4);color:var(--monster-color-primary-4)}.monster-button-secondary{background-color:var(--monster-bg-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-secondary-4)}.monster-button-secondary,.monster-button-tertiary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-tertiary{background-color:var(--monster-bg-color-tertiary-4);border-color:var(--monster-bg-color-tertiary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-color-tertiary-4)}.monster-button-outline-primary{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);color:var(--monster-bg-color-primary-4)}.monster-button-outline-primary,.monster-button-outline-secondary{align-items:center;background-position:50%;box-shadow:var(--monster-box-shadow-1);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}.monster-button-outline-secondary{background-color:var(--monster-color-secondary-4);border-color:var(--monster-bg-color-secondary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);color:var(--monster-bg-color-secondary-4)}.monster-button-outline-tertiary{align-items:center;background-color:var(--monster-color-tertiary-4);background-position:50%;border-color:var(--monster-bg-color-tertiary-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-tertiary-4);cursor:pointer;display:flex;font-family:var(--monster-font-family);font-size:1rem;font-weight:400;gap:.4rem;justify-content:center;line-height:1.5;outline:none;overflow:hidden;padding:.375rem .75rem;position:relative;text-align:center;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;vertical-align:middle;width:-webkit-fill-available;width:-moz-available;width:stretch}button:active,button:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}button:active{z-index:var(--monster-z-index-outline)}.monster-button-bar,.monster-button-group{align-content:center;align-items:stretch;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:space-between}.monster-button-group{box-sizing:border-box;gap:0;margin:1rem 0}.monster-button-group>:not(:last-child){margin-right:calc(var(--monster-border-width)*-1)}.monster-button-group :hover{box-shadow:none}button:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px;z-index:var(--monster-z-index-outline)}@media (prefers-color-scheme:light){button:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px;z-index:var(--monster-z-index-outline)}}[data-monster-role=control]{outline:none}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}: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-color-primary-1:var(--monster-color-gray-6);--monster-color-primary-2:var(--monster-color-gray-6);--monster-color-primary-3:var(--monster-color-gray-1);--monster-color-primary-4:var(--monster-color-gray-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-3);--monster-bg-color-primary-4:var(--monster-color-gray-6);--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);--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);--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);--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);--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);--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);--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);--monster-color-primary-disabled-1:var(--monster-color-gray-3);--monster-color-primary-disabled-2:var(--monster-color-gray-1);--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);--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-border-style:solid;--monster-border-width:2px;--monster-border-radius:0;--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}@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);--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);--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);--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);--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);--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);--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);--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);--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)}}a,a:active,a:focus,a:hover,a:link,a:visited{background-image:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));background-position:100% 100%,0 100%;background-repeat:no-repeat;background-size:100% 1px,0 3px;color:var(--monster-color-primary-1);outline:none;text-decoration:none;transition:background-size .4s}a:active,a:focus,a:hover{background:linear-gradient(to right,var(--monster-color-gradient-1),var(--monster-color-gradient-2),var(--monster-color-gradient-3));-webkit-background-clip:text;background-clip:text;color:transparent;outline:none}a:focus{outline:1px dashed var(--monster-color-selection-4);outline-offset:2px}@media (prefers-color-scheme:light){a:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:2px}}[data-monster-role=control]{padding-bottom:0;padding-top:0;width:100%}[data-monster-role=selection]{font-size:.85em;margin-bottom:0;margin-top:0}[data-monster-role=option-control]{margin-right:8px} 
-}`, 0);
+}`,
+		0,
+	);
 } catch (e) {
-  addAttributeToken(document.getRootNode().querySelector('html'), ATTRIBUTE_ERRORMESSAGE, e + "");
+	addAttributeToken(
+		document.getRootNode().querySelector("html"),
+		ATTRIBUTE_ERRORMESSAGE,
+		e + "",
+	);
 }