@schukai/monster 4.38.3 → 4.38.4

package/source/components/datatable/filter.mjs

@@ -14,18 +14,18 @@
 
 import { instanceSymbol } from "../../constants.mjs";
 import {
-	findTargetElementFromEvent,
-	fireCustomEvent,
+  findTargetElementFromEvent,
+  fireCustomEvent,
 } from "../../dom/events.mjs";
 import {
-	findElementWithIdUpwards,
-	findElementWithSelectorUpwards,
+  findElementWithIdUpwards,
+  findElementWithSelectorUpwards,
 } from "../../dom/util.mjs";
 import {
-	assembleMethodSymbol,
-	CustomElement,
-	getSlottedElements,
-	registerCustomElement,
+  assembleMethodSymbol,
+  CustomElement,
+  getSlottedElements,
+  registerCustomElement,
 } from "../../dom/customelement.mjs";
 import { ID } from "../../types/id.mjs";
 import { Settings } from "./filter/settings.mjs";
@@ -33,11 +33,11 @@ import { FilterStyleSheet } from "./stylesheet/filter.mjs";
 import { getDocument, getWindow } from "../../dom/util.mjs";
 import { getGlobal } from "../../types/global.mjs";
 import {
-	isInstance,
-	isFunction,
-	isObject,
-	isArray,
-	isString,
+  isInstance,
+  isFunction,
+  isObject,
+  isArray,
+  isString,
 } from "../../types/is.mjs";
 import { Host } from "../host/host.mjs";
 import { addAttributeToken } from "../../dom/attributes.mjs";
@@ -47,17 +47,17 @@ import { Formatter } from "../../text/formatter.mjs";
 import { generateRangeComparisonExpression } from "../../text/util.mjs";
 
 import {
-	parseBracketedKeyValueHash,
-	createBracketedKeyValueHash,
+  parseBracketedKeyValueHash,
+  createBracketedKeyValueHash,
 } from "../../text/bracketed-key-value-hash.mjs";
 import { ThemeStyleSheet } from "../stylesheet/theme.mjs";
 import { SpaceStyleSheet } from "../stylesheet/space.mjs";
 import { FormStyleSheet } from "../stylesheet/form.mjs";
 
 import {
-	getStoredFilterConfigKey,
-	getFilterConfigKey,
-	parseDateInput,
+  getStoredFilterConfigKey,
+  getFilterConfigKey,
+  parseDateInput,
 } from "./filter/util.mjs";
 
 import "./filter/select.mjs";
@@ -110,7 +110,7 @@ const filterControlElementSymbol = Symbol("filterControlElement");
  * @type {symbol}
  */
 const filterSaveActionButtonElementSymbol = Symbol(
-	"filterSaveActionButtonElement",
+  "filterSaveActionButtonElement",
 );
 
 /**
@@ -170,241 +170,241 @@ const hashChangeSymbol = Symbol("hashChange");
  * @summary The Filter component is used to show and handle the filter values.
  */
 class Filter extends CustomElement {
-	/**
-	 *
-	 */
-	constructor() {
-		super();
-		this[settingsSymbol] = new Settings();
-
-		// debounce the hash change event if doSearch is called by click the search button
-		this[hashChangeSymbol] = 0;
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/filter@@instance");
-	}
-
-	/**
-	 *
-	 * @param {string} message
-	 * @return {Filter}
-	 */
-	showFailureMessage(message) {
-		this[searchButtonElementSymbol].setState(
-			"failed",
-			this.getOption("timeouts.message", 4000),
-		);
-		this[searchButtonElementSymbol]
-			.setMessage(message.toString())
-			.showMessage(this.getOption("timeouts.message", 4000));
-		return this;
-	}
-
-	/**
-	 *
-	 * @return {Filter}
-	 */
-	resetFailureMessage() {
-		this[searchButtonElementSymbol].hideMessage();
-		this[searchButtonElementSymbol].removeState();
-		return this;
-	}
-
-	/**
-	 *
-	 * @return {Filter}
-	 */
-	showSuccess() {
-		this[searchButtonElementSymbol].setState(
-			"successful",
-			this.getOption("timeouts.message", 4000),
-		);
-		return this;
-	}
-
-	/**
-	 * 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} labels Label definitions
-	 * @property {string} labels.search Search button label
-	 * @property {string} labels.reset Reset button label
-	 * @property {string} labels.save Save button label
-	 * @property {string} labels.filter-name Filter name label
-	 * @property {string} labels.empty-query-and-no-default Empty query and no default query label
-	 * @property {string} labels.query-not-changed Query not changed label
-	 * @property {Object} formatter Formatter definitions
-	 * @property {Object} formatter.marker Marker definitions
-	 * @property {Object} formatter.marker.open Marker open
-	 * @property {Object} formatter.marker.close Marker close
-	 * @property {Object} features Feature definitions
-	 * @property {boolean} features.storedConfig Stored configuration, this replaces the setting `storedConfig.enabled` @since 3.97.0
-	 * @property {boolean} features.autoFilter Auto filter @since 3.100.0
-	 * @property {boolean} features.preventSameQuery Prevent same query @since 3.103.0
-	 * @property {Object} storedConfig Stored configuration
-	 * @property {boolean} storedConfig.enabled The store has been enabled, this option will no longer have any effect. @deprecated 20250101
-	 * @property {string} storedConfig.selector Selector
-	 * @property {Object} timeouts Timeout definitions
-	 * @property {number} timeouts.message Message timeout
-	 * @property {Object} queries Query definitions
-	 * @property {Function} queries.wrap Wrap callback
-	 * @property {Function} queries.join Join callback
-	 * @property {string} query Query
-	 * @property {string} defaultQuery Default query
-	 * @property {boolean} eventProcessing Event processing
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-
-			formatter: {
-				marker: {
-					open: null,
-					close: null,
-				},
-			},
-
-			labels: getTranslations(),
-
-			templateMapping: {
-				"filter-save-label": null,
-				"filter-name-label": name,
-			},
-
-			features: {
-				storedConfig: false,
-				autoFilter: true,
-				preventSameQuery: false,
-			},
-
-			storedConfig: {
-				enabled: true,
-				selector: "",
-			},
-
-			timeouts: {
-				message: 4000,
-			},
-
-			queries: {
-				wrap: (value, definition) => {
-					return value;
-				},
-				join: (queries) => {
-					if (queries.length === 0) {
-						return "";
-					}
-					return queries.join(" AND ");
-				},
-			},
-
-			query: null,
-			defaultQuery: null,
-			eventProcessing: true,
-
-			templateFormatter: {
-				marker: {
-					open: null,
-					close: null,
-				},
-				i18n: true,
-			},
-		});
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datatable-filter";
-	}
-
-	/**
-	 * @return {FilterButton}
-	 * @fires monster-filter-initialized
-	 */
-	[assembleMethodSymbol]() {
-		const self = this;
-
-		this.setOption(
-			"templateMapping.filter-save-label",
-			this.getOption("labels.save"),
-		);
-
-		this.setOption(
-			"templateMapping.filter-name-label",
-			this.getOption("labels.filter-name"),
-		);
-
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(self);
-		getWindow().requestAnimationFrame(() => {
-			initEventHandler.call(self);
-		});
-
-		initFromConfig
-			.call(self)
-			.then(() => {})
-			.catch((error) => {
-				addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, error?.message);
-			})
-			.finally(() => {
-				initFilter.call(self);
-				updateFilterTabs.call(self);
-
-				if (self.getOption("features.autoFilter") === true) {
-					doSearch
-						.call(self, { showEffect: false })
-						.then(() => {
-							fireCustomEvent(self, "monster-filter-initialized");
-						})
-						.catch(() => {});
-				}
-			});
-	}
-
-	/**
-	 *
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-		getWindow().addEventListener(
-			"hashchange",
-			this[locationChangeHandlerSymbol],
-		);
-	}
-
-	/**
-	 *
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-
-		getWindow().removeEventListener(
-			"hashchange",
-			this[locationChangeHandlerSymbol],
-		);
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		return [FilterStyleSheet, FormStyleSheet, ThemeStyleSheet, SpaceStyleSheet];
-	}
+  /**
+   *
+   */
+  constructor() {
+    super();
+    this[settingsSymbol] = new Settings();
+
+    // debounce the hash change event if doSearch is called by click the search button
+    this[hashChangeSymbol] = 0;
+  }
+
+  /**
+   * This method is called by the `instanceof` operator.
+   * @return {symbol}
+   */
+  static get [instanceSymbol]() {
+    return Symbol.for("@schukai/monster/components/filter@@instance");
+  }
+
+  /**
+   *
+   * @param {string} message
+   * @return {Filter}
+   */
+  showFailureMessage(message) {
+    this[searchButtonElementSymbol].setState(
+      "failed",
+      this.getOption("timeouts.message", 4000),
+    );
+    this[searchButtonElementSymbol]
+      .setMessage(message.toString())
+      .showMessage(this.getOption("timeouts.message", 4000));
+    return this;
+  }
+
+  /**
+   *
+   * @return {Filter}
+   */
+  resetFailureMessage() {
+    this[searchButtonElementSymbol].hideMessage();
+    this[searchButtonElementSymbol].removeState();
+    return this;
+  }
+
+  /**
+   *
+   * @return {Filter}
+   */
+  showSuccess() {
+    this[searchButtonElementSymbol].setState(
+      "successful",
+      this.getOption("timeouts.message", 4000),
+    );
+    return this;
+  }
+
+  /**
+   * 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} labels Label definitions
+   * @property {string} labels.search Search button label
+   * @property {string} labels.reset Reset button label
+   * @property {string} labels.save Save button label
+   * @property {string} labels.filter-name Filter name label
+   * @property {string} labels.empty-query-and-no-default Empty query and no default query label
+   * @property {string} labels.query-not-changed Query not changed label
+   * @property {Object} formatter Formatter definitions
+   * @property {Object} formatter.marker Marker definitions
+   * @property {Object} formatter.marker.open Marker open
+   * @property {Object} formatter.marker.close Marker close
+   * @property {Object} features Feature definitions
+   * @property {boolean} features.storedConfig Stored configuration, this replaces the setting `storedConfig.enabled` @since 3.97.0
+   * @property {boolean} features.autoFilter Auto filter @since 3.100.0
+   * @property {boolean} features.preventSameQuery Prevent same query @since 3.103.0
+   * @property {Object} storedConfig Stored configuration
+   * @property {boolean} storedConfig.enabled The store has been enabled, this option will no longer have any effect. @deprecated 20250101
+   * @property {string} storedConfig.selector Selector
+   * @property {Object} timeouts Timeout definitions
+   * @property {number} timeouts.message Message timeout
+   * @property {Object} queries Query definitions
+   * @property {Function} queries.wrap Wrap callback
+   * @property {Function} queries.join Join callback
+   * @property {string} query Query
+   * @property {string} defaultQuery Default query
+   * @property {boolean} eventProcessing Event processing
+   */
+  get defaults() {
+    return Object.assign({}, super.defaults, {
+      templates: {
+        main: getTemplate(),
+      },
+
+      formatter: {
+        marker: {
+          open: null,
+          close: null,
+        },
+      },
+
+      labels: getTranslations(),
+
+      templateMapping: {
+        "filter-save-label": null,
+        "filter-name-label": name,
+      },
+
+      features: {
+        storedConfig: false,
+        autoFilter: true,
+        preventSameQuery: false,
+      },
+
+      storedConfig: {
+        enabled: true,
+        selector: "",
+      },
+
+      timeouts: {
+        message: 4000,
+      },
+
+      queries: {
+        wrap: (value, definition) => {
+          return value;
+        },
+        join: (queries) => {
+          if (queries.length === 0) {
+            return "";
+          }
+          return queries.join(" AND ");
+        },
+      },
+
+      query: null,
+      defaultQuery: null,
+      eventProcessing: true,
+
+      templateFormatter: {
+        marker: {
+          open: null,
+          close: null,
+        },
+        i18n: true,
+      },
+    });
+  }
+
+  /**
+   *
+   * @return {string}
+   */
+  static getTag() {
+    return "monster-datatable-filter";
+  }
+
+  /**
+   * @return {FilterButton}
+   * @fires monster-filter-initialized
+   */
+  [assembleMethodSymbol]() {
+    const self = this;
+
+    this.setOption(
+      "templateMapping.filter-save-label",
+      this.getOption("labels.save"),
+    );
+
+    this.setOption(
+      "templateMapping.filter-name-label",
+      this.getOption("labels.filter-name"),
+    );
+
+    super[assembleMethodSymbol]();
+
+    initControlReferences.call(self);
+    getWindow().requestAnimationFrame(() => {
+      initEventHandler.call(self);
+    });
+
+    initFromConfig
+      .call(self)
+      .then(() => {})
+      .catch((error) => {
+        addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, error?.message);
+      })
+      .finally(() => {
+        initFilter.call(self);
+        updateFilterTabs.call(self);
+
+        if (self.getOption("features.autoFilter") === true) {
+          doSearch
+            .call(self, { showEffect: false })
+            .then(() => {
+              fireCustomEvent(self, "monster-filter-initialized");
+            })
+            .catch(() => {});
+        }
+      });
+  }
+
+  /**
+   *
+   */
+  connectedCallback() {
+    super.connectedCallback();
+    getWindow().addEventListener(
+      "hashchange",
+      this[locationChangeHandlerSymbol],
+    );
+  }
+
+  /**
+   *
+   */
+  disconnectedCallback() {
+    super.disconnectedCallback();
+
+    getWindow().removeEventListener(
+      "hashchange",
+      this[locationChangeHandlerSymbol],
+    );
+  }
+
+  /**
+   * @return {CSSStyleSheet[]}
+   */
+  static getCSSStyleSheet() {
+    return [FilterStyleSheet, FormStyleSheet, ThemeStyleSheet, SpaceStyleSheet];
+  }
 }
 
 /**
@@ -412,212 +412,215 @@ class Filter extends CustomElement {
  * @returns {object}
  */
 function getTranslations() {
-	const locale = getLocaleOfDocument();
-	switch (locale.language) {
-		case "de":
-			return {
-				search: "Suchen",
-				reset: "Zurücksetzen",
-				save: "Speichern",
-				"filter-name": "Filtername",
-				"empty-query-and-no-default":
-					"Die Abfrage ist leer und es gibt keine Standardabfrage.",
-				"query-not-changed":
-					"Die Suchanfrage hat sich nicht verändert, daher ist keine Suche erforderlich.",
-			};
-		case "fr":
-			return {
-				search: "Chercher",
-				reset: "Réinitialiser",
-				save: "Sauvegarder",
-				"filter-name": "Nom du filtre",
-				"empty-query-and-no-default":
-					"La requête est vide et il n'y a pas de requête par défaut.",
-				"query-not-changed":
-					"La requête de recherche n'a pas changé, donc aucune recherche n'est nécessaire.",
-			};
-		case "es":
-			return {
-				search: "Buscar",
-				reset: "Restablecer",
-				save: "Guardar",
-				"filter-name": "Nombre del filtro",
-				"empty-query-and-no-default":
-					"La consulta está vacía y no hay una consulta predeterminada.",
-				"query-not-changed":
-					"La solicitud de búsqueda no ha cambiado, por lo que no se requiere búsqueda.",
-			};
-		case "it":
-			return {
-				search: "Cerca",
-				reset: "Reimposta",
-				save: "Salva",
-				"filter-name": "Nome del filtro",
-				"empty-query-and-no-default":
-					"La query è vuota e non c'è una query predefinita.",
-				"query-not-changed":
-					"La richiesta di ricerca non è cambiata, quindi non è necessaria una ricerca.",
-			};
-		case "pl":
-			return {
-				search: "Szukaj",
-				reset: "Resetuj",
-				save: "Zapisz",
-				"filter-name": "Nazwa filtra",
-				"empty-query-and-no-default":
-					"Zapytanie jest puste i nie ma domyślnego zapytania.",
-				"query-not-changed":
-					"Żądanie wyszukiwania nie zmieniło się, więc wyszukiwanie nie jest wymagane.",
-			};
-		case "no":
-			return {
-				search: "Søk",
-				reset: "Tilbakestill",
-				save: "Lagre",
-				"filter-name": "Filternavn",
-				"empty-query-and-no-default":
-					"Spørringen er tom og det er ingen standardspørring.",
-				"query-not-changed":
-					"Søkeforespørselen har ikke endret seg, så ingen søk er nødvendig.",
-			};
-		case "da":
-			return {
-				search: "Søg",
-				reset: "Nulstil",
-				save: "Gem",
-				"filter-name": "Filternavn",
-				"empty-query-and-no-default":
-					"Forespørgslen er tom og der er ingen standardforespørgsel.",
-				"query-not-changed":
-					"Søgeanmodningen er ikke ændret, så ingen søgning er nødvendig.",
-			};
-		case "sv":
-			return {
-				search: "Sök",
-				reset: "Återställ",
-				save: "Spara",
-				"filter-name": "Filternamn",
-				"empty-query-and-no-default":
-					"Förfrågan är tom och det finns ingen standardförfrågan.",
-				"query-not-changed":
-					"Sökförfrågan har inte ändrats, så ingen sökning krävs.",
-			};
-		case "nl":
-			return {
-				search: "Zoeken",
-				reset: "Resetten",
-				save: "Opslaan",
-				"filter-name": "Filternaam",
-				"empty-query-and-no-default":
-					"De zoekopdracht is leeg en er is geen standaardzoekopdracht.",
-				"query-not-changed":
-					"De zoekopdracht is niet gewijzigd, dus zoeken is niet nodig.",
-			};
-		case "fi":
-			return {
-				search: "Haku",
-				reset: "Palauta",
-				save: "Tallenna",
-				"filter-name": "Suodattimen nimi",
-				"empty-query-and-no-default":
-					"Hakukysely on tyhjä eikä oletushakua ole määritetty.",
-				"query-not-changed":
-					"Hakupyyntö ei ole muuttunut, joten hakua ei tarvita.",
-			};
-		case "cs":
-			return {
-				search: "Hledat",
-				reset: "Resetovat",
-				save: "Uložit",
-				"filter-name": "Název filtru",
-				"empty-query-and-no-default":
-					"Dotaz je prázdný a není nastavena žádná výchozí hodnota.",
-				"query-not-changed":
-					"Dotaz na hledání se nezměnil, takže hledání není nutné.",
-			};
-		case "pt":
-			return {
-				search: "Buscar",
-				reset: "Redefinir",
-				save: "Salvar",
-				"filter-name": "Nome do filtro",
-				"empty-query-and-no-default":
-					"A consulta está vazia e não há uma consulta padrão.",
-				"query-not-changed":
-					"A solicitação de pesquisa não foi alterada, portanto, nenhuma pesquisa é necessária.",
-			};
-		case "ru":
-			return {
-				search: "Поиск",
-				reset: "Сброс",
-				save: "Сохранить",
-				"filter-name": "Имя фильтра",
-				"empty-query-and-no-default": "Запрос пуст и нет запроса по умолчанию.",
-				"query-not-changed":
-					"Поисковый запрос не изменился, поэтому поиск не требуется.",
-			};
-		case "zh":
-			return {
-				search: "搜索",
-				reset: "重置",
-				save: "保存",
-				"filter-name": "过滤器名称",
-				"empty-query-and-no-default": "查询为空，且没有默认查询。",
-				"query-not-changed": "搜索请求没有更改，因此不需要进行搜索。",
-			};
-		case "hi":
-			return {
-				search: "खोजें",
-				reset: "रीसेट करें",
-				save: "सहेजें",
-				"filter-name": "फ़िल्टर नाम",
-				"empty-query-and-no-default": "क्वेरी खाली है और कोई डिफ़ॉल्ट क्वेरी नहीं है।",
-				"query-not-changed":
-					"खोज अनुरोध में कोई बदलाव नहीं हुआ है, इसलिए खोज आवश्यक नहीं है।",
-			};
-		case "bn":
-			return {
-				search: "অনুসন্ধান",
-				reset: "রিসেট",
-				save: "সংরক্ষণ করুন",
-				"filter-name": "ফিল্টারের নাম",
-				"empty-query-and-no-default": "কোয়েরি খালি এবং কোনো ডিফল্ট কোয়েরি নেই।",
-				"query-not-changed":
-					"অনুসন্ধানের অনুরোধ পরিবর্তন হয়নি, তাই অনুসন্ধান প্রয়োজন নয়।",
-			};
-		case "ja":
-			return {
-				search: "検索",
-				reset: "リセット",
-				save: "保存",
-				"filter-name": "フィルター名",
-				"empty-query-and-no-default":
-					"クエリが空で、デフォルトクエリがありません。",
-				"query-not-changed": "検索リクエストに変更がないため、検索は不要です。",
-			};
-		case "pa":
-			return {
-				search: "ਖੋਜੋ",
-				reset: "ਰੀਸੈੱਟ ਕਰੋ",
-				save: "ਸੇਵ ਕਰੋ",
-				"filter-name": "ਫਿਲਟਰ ਦਾ ਨਾਂ",
-				"empty-query-and-no-default": "ਕੁਐਰੀ ਖਾਲੀ ਹੈ ਅਤੇ ਕੋਈ ਡਿਫੌਲਟ ਕੁਐਰੀ ਨਹੀਂ ਹੈ।",
-				"query-not-changed":
-					"ਖੋਜ ਦੀ ਬੇਨਤੀ ਵਿੱਚ ਕੋਈ ਤਬਦੀਲੀ ਨਹੀਂ ਆਈ ਹੈ, ਇਸ ਲਈ ਖੋਜ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।",
-			};
-		default:
-		case "en":
-			return {
-				search: "Search",
-				reset: "Reset",
-				save: "Save",
-				"filter-name": "Filter name",
-				"empty-query-and-no-default":
-					"The query is empty and there is no default query.",
-				"query-not-changed":
-					"The search request has not changed, so no search is required.",
-			};
-	}
+  const locale = getLocaleOfDocument();
+  switch (locale.language) {
+    case "de":
+      return {
+        search: "Suchen",
+        reset: "Zurücksetzen",
+        save: "Speichern",
+        "filter-name": "Filtername",
+        "empty-query-and-no-default":
+          "Die Abfrage ist leer und es gibt keine Standardabfrage.",
+        "query-not-changed":
+          "Die Suchanfrage hat sich nicht verändert, daher ist keine Suche erforderlich.",
+      };
+    case "fr":
+      return {
+        search: "Chercher",
+        reset: "Réinitialiser",
+        save: "Sauvegarder",
+        "filter-name": "Nom du filtre",
+        "empty-query-and-no-default":
+          "La requête est vide et il n'y a pas de requête par défaut.",
+        "query-not-changed":
+          "La requête de recherche n'a pas changé, donc aucune recherche n'est nécessaire.",
+      };
+    case "es":
+      return {
+        search: "Buscar",
+        reset: "Restablecer",
+        save: "Guardar",
+        "filter-name": "Nombre del filtro",
+        "empty-query-and-no-default":
+          "La consulta está vacía y no hay una consulta predeterminada.",
+        "query-not-changed":
+          "La solicitud de búsqueda no ha cambiado, por lo que no se requiere búsqueda.",
+      };
+    case "it":
+      return {
+        search: "Cerca",
+        reset: "Reimposta",
+        save: "Salva",
+        "filter-name": "Nome del filtro",
+        "empty-query-and-no-default":
+          "La query è vuota e non c'è una query predefinita.",
+        "query-not-changed":
+          "La richiesta di ricerca non è cambiata, quindi non è necessaria una ricerca.",
+      };
+    case "pl":
+      return {
+        search: "Szukaj",
+        reset: "Resetuj",
+        save: "Zapisz",
+        "filter-name": "Nazwa filtra",
+        "empty-query-and-no-default":
+          "Zapytanie jest puste i nie ma domyślnego zapytania.",
+        "query-not-changed":
+          "Żądanie wyszukiwania nie zmieniło się, więc wyszukiwanie nie jest wymagane.",
+      };
+    case "no":
+      return {
+        search: "Søk",
+        reset: "Tilbakestill",
+        save: "Lagre",
+        "filter-name": "Filternavn",
+        "empty-query-and-no-default":
+          "Spørringen er tom og det er ingen standardspørring.",
+        "query-not-changed":
+          "Søkeforespørselen har ikke endret seg, så ingen søk er nødvendig.",
+      };
+    case "da":
+      return {
+        search: "Søg",
+        reset: "Nulstil",
+        save: "Gem",
+        "filter-name": "Filternavn",
+        "empty-query-and-no-default":
+          "Forespørgslen er tom og der er ingen standardforespørgsel.",
+        "query-not-changed":
+          "Søgeanmodningen er ikke ændret, så ingen søgning er nødvendig.",
+      };
+    case "sv":
+      return {
+        search: "Sök",
+        reset: "Återställ",
+        save: "Spara",
+        "filter-name": "Filternamn",
+        "empty-query-and-no-default":
+          "Förfrågan är tom och det finns ingen standardförfrågan.",
+        "query-not-changed":
+          "Sökförfrågan har inte ändrats, så ingen sökning krävs.",
+      };
+    case "nl":
+      return {
+        search: "Zoeken",
+        reset: "Resetten",
+        save: "Opslaan",
+        "filter-name": "Filternaam",
+        "empty-query-and-no-default":
+          "De zoekopdracht is leeg en er is geen standaardzoekopdracht.",
+        "query-not-changed":
+          "De zoekopdracht is niet gewijzigd, dus zoeken is niet nodig.",
+      };
+    case "fi":
+      return {
+        search: "Haku",
+        reset: "Palauta",
+        save: "Tallenna",
+        "filter-name": "Suodattimen nimi",
+        "empty-query-and-no-default":
+          "Hakukysely on tyhjä eikä oletushakua ole määritetty.",
+        "query-not-changed":
+          "Hakupyyntö ei ole muuttunut, joten hakua ei tarvita.",
+      };
+    case "cs":
+      return {
+        search: "Hledat",
+        reset: "Resetovat",
+        save: "Uložit",
+        "filter-name": "Název filtru",
+        "empty-query-and-no-default":
+          "Dotaz je prázdný a není nastavena žádná výchozí hodnota.",
+        "query-not-changed":
+          "Dotaz na hledání se nezměnil, takže hledání není nutné.",
+      };
+    case "pt":
+      return {
+        search: "Buscar",
+        reset: "Redefinir",
+        save: "Salvar",
+        "filter-name": "Nome do filtro",
+        "empty-query-and-no-default":
+          "A consulta está vazia e não há uma consulta padrão.",
+        "query-not-changed":
+          "A solicitação de pesquisa não foi alterada, portanto, nenhuma pesquisa é necessária.",
+      };
+    case "ru":
+      return {
+        search: "Поиск",
+        reset: "Сброс",
+        save: "Сохранить",
+        "filter-name": "Имя фильтра",
+        "empty-query-and-no-default": "Запрос пуст и нет запроса по умолчанию.",
+        "query-not-changed":
+          "Поисковый запрос не изменился, поэтому поиск не требуется.",
+      };
+    case "zh":
+      return {
+        search: "搜索",
+        reset: "重置",
+        save: "保存",
+        "filter-name": "过滤器名称",
+        "empty-query-and-no-default": "查询为空，且没有默认查询。",
+        "query-not-changed": "搜索请求没有更改，因此不需要进行搜索。",
+      };
+    case "hi":
+      return {
+        search: "खोजें",
+        reset: "रीसेट करें",
+        save: "सहेजें",
+        "filter-name": "फ़िल्टर नाम",
+        "empty-query-and-no-default":
+          "क्वेरी खाली है और कोई डिफ़ॉल्ट क्वेरी नहीं है।",
+        "query-not-changed":
+          "खोज अनुरोध में कोई बदलाव नहीं हुआ है, इसलिए खोज आवश्यक नहीं है।",
+      };
+    case "bn":
+      return {
+        search: "অনুসন্ধান",
+        reset: "রিসেট",
+        save: "সংরক্ষণ করুন",
+        "filter-name": "ফিল্টারের নাম",
+        "empty-query-and-no-default":
+          "কোয়েরি খালি এবং কোনো ডিফল্ট কোয়েরি নেই।",
+        "query-not-changed":
+          "অনুসন্ধানের অনুরোধ পরিবর্তন হয়নি, তাই অনুসন্ধান প্রয়োজন নয়।",
+      };
+    case "ja":
+      return {
+        search: "検索",
+        reset: "リセット",
+        save: "保存",
+        "filter-name": "フィルター名",
+        "empty-query-and-no-default":
+          "クエリが空で、デフォルトクエリがありません。",
+        "query-not-changed": "検索リクエストに変更がないため、検索は不要です。",
+      };
+    case "pa":
+      return {
+        search: "ਖੋਜੋ",
+        reset: "ਰੀਸੈੱਟ ਕਰੋ",
+        save: "ਸੇਵ ਕਰੋ",
+        "filter-name": "ਫਿਲਟਰ ਦਾ ਨਾਂ",
+        "empty-query-and-no-default":
+          "ਕੁਐਰੀ ਖਾਲੀ ਹੈ ਅਤੇ ਕੋਈ ਡਿਫੌਲਟ ਕੁਐਰੀ ਨਹੀਂ ਹੈ।",
+        "query-not-changed":
+          "ਖੋਜ ਦੀ ਬੇਨਤੀ ਵਿੱਚ ਕੋਈ ਤਬਦੀਲੀ ਨਹੀਂ ਆਈ ਹੈ, ਇਸ ਲਈ ਖੋਜ ਦੀ ਲੋੜ ਨਹੀਂ ਹੈ।",
+      };
+    default:
+    case "en":
+      return {
+        search: "Search",
+        reset: "Reset",
+        save: "Save",
+        "filter-name": "Filter name",
+        "empty-query-and-no-default":
+          "The query is empty and there is no default query.",
+        "query-not-changed":
+          "The search request has not changed, so no search is required.",
+      };
+  }
 }
 
 /**
@@ -625,52 +628,52 @@ function getTranslations() {
  * @return {FilterButton}
  */
 function initControlReferences() {
-	if (!this.shadowRoot) {
-		throw new Error("no shadow-root is defined");
-	}
-
-	this[filterControlElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=control]",
-	);
-	this[filterSelectElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=filter-select]",
-	);
-	this[searchButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=search-button]",
-	);
-	this[resetButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=reset-button]",
-	);
-
-	this[saveButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=save-button]",
-	);
-
-	this[filterSaveActionButtonElementSymbol] = this.shadowRoot.querySelector(
-		"[data-monster-role=save-action-button]",
-	);
-
-	this[filterTabElementSymbol] = findElementWithSelectorUpwards(
-		this,
-		this.getOption("storedConfig.selector", ""),
-	);
-
-	return this;
+  if (!this.shadowRoot) {
+    throw new Error("no shadow-root is defined");
+  }
+
+  this[filterControlElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=control]",
+  );
+  this[filterSelectElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=filter-select]",
+  );
+  this[searchButtonElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=search-button]",
+  );
+  this[resetButtonElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=reset-button]",
+  );
+
+  this[saveButtonElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=save-button]",
+  );
+
+  this[filterSaveActionButtonElementSymbol] = this.shadowRoot.querySelector(
+    "[data-monster-role=save-action-button]",
+  );
+
+  this[filterTabElementSymbol] = findElementWithSelectorUpwards(
+    this,
+    this.getOption("storedConfig.selector", ""),
+  );
+
+  return this;
 }
 
 /**
  * @private
  */
 function updateFilterSelections() {
-	queueMicrotask(() => {
-		const options = this[settingsSymbol].getOptions();
-		this[filterSelectElementSymbol].setOption("options", options);
-
-		setTimeout(() => {
-			this[filterSelectElementSymbol].value =
-				this[settingsSymbol].getSelected();
-		}, 10);
-	});
+  queueMicrotask(() => {
+    const options = this[settingsSymbol].getOptions();
+    this[filterSelectElementSymbol].setOption("options", options);
+
+    setTimeout(() => {
+      this[filterSelectElementSymbol].value =
+        this[settingsSymbol].getSelected();
+    }, 10);
+  });
 }
 
 /**
@@ -678,64 +681,64 @@ function updateFilterSelections() {
  * @throws {Error} no filter label is defined
  */
 function initFilter() {
-	const storedSetting = this[settingsSymbol];
-	this[settingsSymbol] = new Settings();
-
-	const result = parseBracketedKeyValueHash(getGlobal().location.hash);
-	let valuesFromHash = {};
-	if (isObject(result) && result?.[this.id]) {
-		valuesFromHash = result[this.id];
-	}
-
-	getSlottedElements
-		.call(this, "label[data-monster-label]")
-		.forEach((element) => {
-			const label = element.getAttribute("data-monster-label");
-			if (!label) {
-				addAttributeToken(
-					this,
-					ATTRIBUTE_ERRORMESSAGE,
-					"no filter label is defined",
-				);
-				return;
-			}
-
-			let value = element.id;
-			if (!value) {
-				const prefix = label.replace(/\W/g, "-");
-				prefix.charAt(0).match(/[\d_]/g)?.length ? `f${prefix}` : prefix;
-
-				value = new ID(prefix + "-").toString();
-				element.id = value;
-			}
-
-			let setting = storedSetting.get(value);
-
-			if (setting) {
-				this[settingsSymbol].set(setting);
-			}
-
-			if (valuesFromHash?.[element.id]) {
-				const v = escapeAttributeValue(valuesFromHash[element.id]);
-				const searchInput = element.firstElementChild;
-				try {
-					searchInput.value = v;
-				} catch (error) {}
-			}
-
-			setting = this[settingsSymbol].get(value);
-			let visible = false;
-			if (setting) {
-				setSlotAttribute(element, setting.visible);
-				visible = setting.visible;
-			} else {
-				visible = getVisibilityFromSlotAttribute(element);
-			}
-
-			this[settingsSymbol].set({ value, label, visible });
-		});
-
-	updateFilterSelections.call(this);
+  const storedSetting = this[settingsSymbol];
+  this[settingsSymbol] = new Settings();
+
+  const result = parseBracketedKeyValueHash(getGlobal().location.hash);
+  let valuesFromHash = {};
+  if (isObject(result) && result?.[this.id]) {
+    valuesFromHash = result[this.id];
+  }
+
+  getSlottedElements
+    .call(this, "label[data-monster-label]")
+    .forEach((element) => {
+      const label = element.getAttribute("data-monster-label");
+      if (!label) {
+        addAttributeToken(
+          this,
+          ATTRIBUTE_ERRORMESSAGE,
+          "no filter label is defined",
+        );
+        return;
+      }
+
+      let value = element.id;
+      if (!value) {
+        const prefix = label.replace(/\W/g, "-");
+        prefix.charAt(0).match(/[\d_]/g)?.length ? `f${prefix}` : prefix;
+
+        value = new ID(prefix + "-").toString();
+        element.id = value;
+      }
+
+      let setting = storedSetting.get(value);
+
+      if (setting) {
+        this[settingsSymbol].set(setting);
+      }
+
+      if (valuesFromHash?.[element.id]) {
+        const v = escapeAttributeValue(valuesFromHash[element.id]);
+        const searchInput = element.firstElementChild;
+        try {
+          searchInput.value = v;
+        } catch (error) {}
+      }
+
+      setting = this[settingsSymbol].get(value);
+      let visible = false;
+      if (setting) {
+        setSlotAttribute(element, setting.visible);
+        visible = setting.visible;
+      } else {
+        visible = getVisibilityFromSlotAttribute(element);
+      }
+
+      this[settingsSymbol].set({ value, label, visible });
+    });
+
+  updateFilterSelections.call(this);
 }
 
 /**
@@ -744,16 +747,16 @@ function initFilter() {
  * @return {*}
  */
 function escapeAttributeValue(input) {
-	if (input === undefined || input === null) {
-		return input;
-	}
-
-	return input
-		.replace(/&/g, "&")
-		.replace(/"/g, """)
-		.replace(/'/g, "'")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;");
+  if (input === undefined || input === null) {
+    return input;
+  }
+
+  return input
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;")
+    .replace(/'/g, "&#x27;")
+    .replace(/</g, "&lt;")
+    .replace(/>/g, "&gt;");
 }
 
 /**
@@ -762,9 +765,9 @@ function escapeAttributeValue(input) {
  * @return {boolean}
  */
 function getVisibilityFromSlotAttribute(element) {
-	return !(
-		element.hasAttribute("slot") && element.getAttribute("slot") === "hidden"
-	);
+  return !(
+    element.hasAttribute("slot") && element.getAttribute("slot") === "hidden"
+  );
 }
 
 /**
@@ -773,369 +776,369 @@ function getVisibilityFromSlotAttribute(element) {
  * @param {boolean} visible
  */
 function setSlotAttribute(element, visible) {
-	if (visible) {
-		element.removeAttribute("slot");
-		return;
-	}
+  if (visible) {
+    element.removeAttribute("slot");
+    return;
+  }
 
-	element.setAttribute("slot", "hidden");
+  element.setAttribute("slot", "hidden");
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-	const self = this;
-
-	let lastHash = getGlobal().location.hash;
-	self[locationChangeHandlerSymbol] = () => {
-		if (lastHash === getGlobal().location.hash) {
-			return;
-		}
-
-		/**
-		 * debounce the hash change event if doSearch
-		 * is called by click the search button
-		 */
-		if (self[hashChangeSymbol] > 0) {
-			self[hashChangeSymbol]--;
-			return;
-		}
-
-		initFilter.call(this);
-
-		doSearch
-			.call(self)
-			.then(() => {})
-			.catch((error) => {})
-			.finally(() => {
-				lastHash = getGlobal().location.hash;
-			});
-	};
-
-	/**
-	 * Monster.Components.Form.event:monster-selection-cleared
-	 */
-	if (self[filterSelectElementSymbol]) {
-		self[filterSelectElementSymbol].addEventListener(
-			"monster-selection-cleared",
-			function () {
-				const settings = self[settingsSymbol].getOptions();
-
-				for (const setting of settings) {
-					const filterElement = findElementWithIdUpwards(self, setting.value);
-					if (filterElement) {
-						setSlotAttribute(filterElement, false);
-
-						self[settingsSymbol].set({ value: setting.value, visible: false });
-					}
-				}
-
-				updateConfig.call(self);
-			},
-		);
-
-		self[filterSelectElementSymbol].addEventListener(
-			"monster-changed",
-			function (event) {
-				const filterElement = findElementWithIdUpwards(
-					self,
-					event.detail.value,
-				);
-				if (filterElement) {
-					setSlotAttribute(filterElement, event.detail.checked);
-				}
-
-				self[settingsSymbol].set({
-					value: event.detail.value,
-					visible: event.detail.checked,
-				});
-
-				updateConfig.call(self);
-			},
-		);
-	}
-
-	/** save the current filter */
-	if (self[filterSaveActionButtonElementSymbol]) {
-		self[filterSaveActionButtonElementSymbol].setOption(
-			"actions.click",
-			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));
-					return;
-				}
-
-				const input = form.querySelector("input[name=filter-name]");
-				if (!input) {
-					button.setState("failed", self.getOption("timeouts.message", 4000));
-					return;
-				}
-
-				const name = input.value;
-				if (!name) {
-					button.setState("failed", self.getOption("timeouts.message", 4000));
-					button.setMessage("Please enter a name").showMessage();
-					return;
-				}
-
-				doSearch
-					.call(self, { showEffect: false })
-					.then(() => {
-						const configKey = getStoredFilterConfigKey.call(self);
-						const host = getDocument().querySelector("monster-host");
-						if (!host) {
-							return;
-						}
-
-						const query = self.getOption("query");
-						if (!query) {
-							button.setState(
-								"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) => {
-								return new Promise((resolve, reject) => {
-									if (hasConfig) {
-										host.getConfig(configKey).then(resolve).catch(reject);
-										return;
-									}
-									return resolve({});
-								});
-							})
-							.then((config) => {
-								config[name] = query;
-								return host.setConfig(configKey, {
-									...config,
-								});
-							})
-							.then(() => {
-								button.setState(
-									"successful",
-									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) => {
-						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", () => {
-		self[hashChangeSymbol] = 1;
-
-		doSearch
-			.call(self)
-			.then(() => {})
-			.catch((error) => {});
-	});
-
-	// the reset button should reset the filter and the search query
-	// all input elements should be reset to their default values
-	// which is the empty string. we search for all input elements
-	// in the filter and reset them to their default value
-	self[resetButtonElementSymbol].setOption("actions.click", () => {
-		getSlottedElements
-			.call(self, "label[data-monster-label]")
-			.forEach((element) => {
-				const label = element.getAttribute("data-monster-label");
-				if (!label) {
-					return;
-				}
-
-				const input = element.firstElementChild;
-
-				if (input) {
-					input.value = "";
-				}
-			});
-
-		doSearch
-			.call(self, { showEffect: false })
-			.then(() => {})
-			.catch((e) => addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message));
-	});
-
-	self.addEventListener("keyup", (event) => {
-		const path = event.composedPath();
-		if (path.length === 0) {
-			return;
-		}
-
-		if (!(path[0] instanceof HTMLInputElement)) {
-			return;
-		}
-
-		if (event.keyCode === 13) {
-			doSearch
-				.call(self, { showEffect: false })
-				.then(() => {})
-				.catch((error) => {});
-		}
-	});
-
-	// tabs
-	const element = this[filterTabElementSymbol];
-	if (element) {
-		initTabEvents.call(this);
-	}
+  const self = this;
+
+  let lastHash = getGlobal().location.hash;
+  self[locationChangeHandlerSymbol] = () => {
+    if (lastHash === getGlobal().location.hash) {
+      return;
+    }
+
+    /**
+     * debounce the hash change event if doSearch
+     * is called by click the search button
+     */
+    if (self[hashChangeSymbol] > 0) {
+      self[hashChangeSymbol]--;
+      return;
+    }
+
+    initFilter.call(this);
+
+    doSearch
+      .call(self)
+      .then(() => {})
+      .catch((error) => {})
+      .finally(() => {
+        lastHash = getGlobal().location.hash;
+      });
+  };
+
+  /**
+   * Monster.Components.Form.event:monster-selection-cleared
+   */
+  if (self[filterSelectElementSymbol]) {
+    self[filterSelectElementSymbol].addEventListener(
+      "monster-selection-cleared",
+      function () {
+        const settings = self[settingsSymbol].getOptions();
+
+        for (const setting of settings) {
+          const filterElement = findElementWithIdUpwards(self, setting.value);
+          if (filterElement) {
+            setSlotAttribute(filterElement, false);
+
+            self[settingsSymbol].set({ value: setting.value, visible: false });
+          }
+        }
+
+        updateConfig.call(self);
+      },
+    );
+
+    self[filterSelectElementSymbol].addEventListener(
+      "monster-changed",
+      function (event) {
+        const filterElement = findElementWithIdUpwards(
+          self,
+          event.detail.value,
+        );
+        if (filterElement) {
+          setSlotAttribute(filterElement, event.detail.checked);
+        }
+
+        self[settingsSymbol].set({
+          value: event.detail.value,
+          visible: event.detail.checked,
+        });
+
+        updateConfig.call(self);
+      },
+    );
+  }
+
+  /** save the current filter */
+  if (self[filterSaveActionButtonElementSymbol]) {
+    self[filterSaveActionButtonElementSymbol].setOption(
+      "actions.click",
+      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));
+          return;
+        }
+
+        const input = form.querySelector("input[name=filter-name]");
+        if (!input) {
+          button.setState("failed", self.getOption("timeouts.message", 4000));
+          return;
+        }
+
+        const name = input.value;
+        if (!name) {
+          button.setState("failed", self.getOption("timeouts.message", 4000));
+          button.setMessage("Please enter a name").showMessage();
+          return;
+        }
+
+        doSearch
+          .call(self, { showEffect: false })
+          .then(() => {
+            const configKey = getStoredFilterConfigKey.call(self);
+            const host = getDocument().querySelector("monster-host");
+            if (!host) {
+              return;
+            }
+
+            const query = self.getOption("query");
+            if (!query) {
+              button.setState(
+                "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) => {
+                return new Promise((resolve, reject) => {
+                  if (hasConfig) {
+                    host.getConfig(configKey).then(resolve).catch(reject);
+                    return;
+                  }
+                  return resolve({});
+                });
+              })
+              .then((config) => {
+                config[name] = query;
+                return host.setConfig(configKey, {
+                  ...config,
+                });
+              })
+              .then(() => {
+                button.setState(
+                  "successful",
+                  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) => {
+            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", () => {
+    self[hashChangeSymbol] = 1;
+
+    doSearch
+      .call(self)
+      .then(() => {})
+      .catch((error) => {});
+  });
+
+  // the reset button should reset the filter and the search query
+  // all input elements should be reset to their default values
+  // which is the empty string. we search for all input elements
+  // in the filter and reset them to their default value
+  self[resetButtonElementSymbol].setOption("actions.click", () => {
+    getSlottedElements
+      .call(self, "label[data-monster-label]")
+      .forEach((element) => {
+        const label = element.getAttribute("data-monster-label");
+        if (!label) {
+          return;
+        }
+
+        const input = element.firstElementChild;
+
+        if (input) {
+          input.value = "";
+        }
+      });
+
+    doSearch
+      .call(self, { showEffect: false })
+      .then(() => {})
+      .catch((e) => addAttributeToken(self, ATTRIBUTE_ERRORMESSAGE, e.message));
+  });
+
+  self.addEventListener("keyup", (event) => {
+    const path = event.composedPath();
+    if (path.length === 0) {
+      return;
+    }
+
+    if (!(path[0] instanceof HTMLInputElement)) {
+      return;
+    }
+
+    if (event.keyCode === 13) {
+      doSearch
+        .call(self, { showEffect: false })
+        .then(() => {})
+        .catch((error) => {});
+    }
+  });
+
+  // tabs
+  const element = this[filterTabElementSymbol];
+  if (element) {
+    initTabEvents.call(this);
+  }
 }
 
 function initTabEvents() {
-	const self = this;
-	this[filterTabElementSymbol].addEventListener(
-		"monster-tab-changed",
-		(event) => {
-			const query = event?.detail?.data?.["data-monster-query"];
-			const q = this.getOption("query");
-			if (query !== q) {
-				this.setOption("query", query);
-			}
-		},
-	);
-
-	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];
-
-				for (const button of buttons[key]) {
-					if (button.label !== event.detail.label) {
-						labels.push(button.label);
-					}
-				}
-			}
-
-			const host = findElementWithSelectorUpwards(this, "monster-host");
-			if (!(host && this.id)) {
-				return;
-			}
-
-			const configKey = getStoredFilterConfigKey.call(this);
-			host
-				.hasConfig(configKey)
-				.then((hasConfig) => {
-					if (!hasConfig) {
-						return;
-					}
-
-					return host.getConfig(configKey);
-				})
-				.then((config) => {
-					for (const [name, query] of Object.entries(config)) {
-						if (labels.includes(name)) {
-							continue;
-						}
-
-						delete config[name];
-					}
-
-					return host.setConfig(configKey, {
-						...config,
-					});
-				});
-		},
-	);
+  const self = this;
+  this[filterTabElementSymbol].addEventListener(
+    "monster-tab-changed",
+    (event) => {
+      const query = event?.detail?.data?.["data-monster-query"];
+      const q = this.getOption("query");
+      if (query !== q) {
+        this.setOption("query", query);
+      }
+    },
+  );
+
+  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];
+
+        for (const button of buttons[key]) {
+          if (button.label !== event.detail.label) {
+            labels.push(button.label);
+          }
+        }
+      }
+
+      const host = findElementWithSelectorUpwards(this, "monster-host");
+      if (!(host && this.id)) {
+        return;
+      }
+
+      const configKey = getStoredFilterConfigKey.call(this);
+      host
+        .hasConfig(configKey)
+        .then((hasConfig) => {
+          if (!hasConfig) {
+            return;
+          }
+
+          return host.getConfig(configKey);
+        })
+        .then((config) => {
+          for (const [name, query] of Object.entries(config)) {
+            if (labels.includes(name)) {
+              continue;
+            }
+
+            delete config[name];
+          }
+
+          return host.setConfig(configKey, {
+            ...config,
+          });
+        });
+    },
+  );
 }
 
 /**
  * @private
  */
 function updateFilterTabs() {
-	const element = this[filterTabElementSymbol];
-	if (!element) {
-		return;
-	}
-
-	const host = findElementWithSelectorUpwards(this, "monster-host");
-	if (!(host && this.id)) {
-		return;
-	}
-
-	const configKey = getStoredFilterConfigKey.call(this);
-	host
-		.hasConfig(configKey)
-		.then((hasConfig) => {
-			if (!hasConfig) {
-				return;
-			}
-
-			return host.getConfig(configKey);
-		})
-		.then((config) => {
-			for (const [name, query] of Object.entries(config)) {
-				const found = element.querySelector(
-					`[data-monster-button-label="${name}"]`,
-				);
-				if (found) {
-					continue;
-				}
-
-				if (query === undefined || query === null) {
-					continue;
-				}
-
-				const escapedQuery = escapeAttributeValue(query);
-
-				element.insertAdjacentHTML(
-					"beforeend",
-					`<div data-monster-button-label="${name}"
+  const element = this[filterTabElementSymbol];
+  if (!element) {
+    return;
+  }
+
+  const host = findElementWithSelectorUpwards(this, "monster-host");
+  if (!(host && this.id)) {
+    return;
+  }
+
+  const configKey = getStoredFilterConfigKey.call(this);
+  host
+    .hasConfig(configKey)
+    .then((hasConfig) => {
+      if (!hasConfig) {
+        return;
+      }
+
+      return host.getConfig(configKey);
+    })
+    .then((config) => {
+      for (const [name, query] of Object.entries(config)) {
+        const found = element.querySelector(
+          `[data-monster-button-label="${name}"]`,
+        );
+        if (found) {
+          continue;
+        }
+
+        if (query === undefined || query === null) {
+          continue;
+        }
+
+        const escapedQuery = escapeAttributeValue(query);
+
+        element.insertAdjacentHTML(
+          "beforeend",
+          `<div data-monster-button-label="${name}"
              data-monster-removable="true" 
              data-monster-query="${escapedQuery}" data-monster-role="filter-tab" >
              </div>`,
-				);
-			}
-		})
-		.catch((error) => {
-			if (error instanceof Error) {
-				addAttributeToken(
-					this,
-					ATTRIBUTE_ERRORMESSAGE,
-					error.message + " " + error.stack,
-				);
-			} else {
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error + "");
-			}
-		});
+        );
+      }
+    })
+    .catch((error) => {
+      if (error instanceof Error) {
+        addAttributeToken(
+          this,
+          ATTRIBUTE_ERRORMESSAGE,
+          error.message + " " + error.stack,
+        );
+      } else {
+        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error + "");
+      }
+    });
 }
 
 /**
@@ -1144,92 +1147,92 @@ function updateFilterTabs() {
  * @return {Promise}
  */
 function doSearch({ showEffect } = { showEffect: true }) {
-	this.resetFailureMessage();
-
-	if (showEffect) {
-		this[searchButtonElementSymbol].setState(
-			"activity",
-			this.getOption("timeouts.message", 4000),
-		);
-	}
-
-	return collectSearchQueries
-		.call(this)
-		.then((query) => {
-			const buildQuery = buildSearchQuery.call(this, query);
-			if (buildQuery === null) {
-				const msg = this.getOption("labels.empty-query-and-no-default");
-				if (showEffect) {
-					this[searchButtonElementSymbol].removeState();
-					this[searchButtonElementSymbol]
-						.setMessage(msg)
-						.showMessage(this.getOption("timeouts.message", 4000));
-				}
-				return Promise.reject(new Error(msg));
-			}
-
-			if (buildQuery === "" && this.getOption("defaultQuery") === null) {
-				const msg = this.getOption("labels.empty-query-and-no-default");
-
-				if (showEffect) {
-					this[searchButtonElementSymbol].removeState();
-					this[searchButtonElementSymbol]
-						.setMessage(msg)
-						.showMessage(this.getOption("timeouts.message", 4000));
-				}
-
-				return Promise.reject(new Error(msg));
-			}
-
-			if (
-				this.getOption("features.preventSameQuery") &&
-				buildQuery === this.getOption("query")
-			) {
-				const msg = this.getOption("labels.query-not-changed");
-
-				if (showEffect) {
-					this[searchButtonElementSymbol].removeState();
-					this[searchButtonElementSymbol]
-						.setMessage(msg)
-						.showMessage(this.getOption("timeouts.message", 4000));
-				}
-
-				return Promise.reject(new Error(msg));
-			}
-
-			if (showEffect) {
-				this[searchButtonElementSymbol].removeState();
-				this[searchButtonElementSymbol].setState(
-					"activity",
-					this.getOption("timeouts.message", 4000),
-				);
-			}
-
-			this.setOption("query", buildSearchQuery.call(this, query));
-
-			return Promise.resolve();
-		})
-		.catch((error) => {
-			if (error instanceof Error) {
-				addAttributeToken(
-					this,
-					ATTRIBUTE_ERRORMESSAGE,
-					error.message + " " + error.stack,
-				);
-			} else {
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-			}
-
-			if (showEffect) {
-				this[searchButtonElementSymbol].setState(
-					"failed",
-					this.getOption("timeouts.message", 4000),
-				);
-				this[searchButtonElementSymbol].setMessage(error.message).showMessage();
-			}
-
-			return Promise.reject(error);
-		});
+  this.resetFailureMessage();
+
+  if (showEffect) {
+    this[searchButtonElementSymbol].setState(
+      "activity",
+      this.getOption("timeouts.message", 4000),
+    );
+  }
+
+  return collectSearchQueries
+    .call(this)
+    .then((query) => {
+      const buildQuery = buildSearchQuery.call(this, query);
+      if (buildQuery === null) {
+        const msg = this.getOption("labels.empty-query-and-no-default");
+        if (showEffect) {
+          this[searchButtonElementSymbol].removeState();
+          this[searchButtonElementSymbol]
+            .setMessage(msg)
+            .showMessage(this.getOption("timeouts.message", 4000));
+        }
+        return Promise.reject(new Error(msg));
+      }
+
+      if (buildQuery === "" && this.getOption("defaultQuery") === null) {
+        const msg = this.getOption("labels.empty-query-and-no-default");
+
+        if (showEffect) {
+          this[searchButtonElementSymbol].removeState();
+          this[searchButtonElementSymbol]
+            .setMessage(msg)
+            .showMessage(this.getOption("timeouts.message", 4000));
+        }
+
+        return Promise.reject(new Error(msg));
+      }
+
+      if (
+        this.getOption("features.preventSameQuery") &&
+        buildQuery === this.getOption("query")
+      ) {
+        const msg = this.getOption("labels.query-not-changed");
+
+        if (showEffect) {
+          this[searchButtonElementSymbol].removeState();
+          this[searchButtonElementSymbol]
+            .setMessage(msg)
+            .showMessage(this.getOption("timeouts.message", 4000));
+        }
+
+        return Promise.reject(new Error(msg));
+      }
+
+      if (showEffect) {
+        this[searchButtonElementSymbol].removeState();
+        this[searchButtonElementSymbol].setState(
+          "activity",
+          this.getOption("timeouts.message", 4000),
+        );
+      }
+
+      this.setOption("query", buildSearchQuery.call(this, query));
+
+      return Promise.resolve();
+    })
+    .catch((error) => {
+      if (error instanceof Error) {
+        addAttributeToken(
+          this,
+          ATTRIBUTE_ERRORMESSAGE,
+          error.message + " " + error.stack,
+        );
+      } else {
+        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+      }
+
+      if (showEffect) {
+        this[searchButtonElementSymbol].setState(
+          "failed",
+          this.getOption("timeouts.message", 4000),
+        );
+        this[searchButtonElementSymbol].setMessage(error.message).showMessage();
+      }
+
+      return Promise.reject(error);
+    });
 }
 
 /**
@@ -1238,21 +1241,21 @@ function doSearch({ showEffect } = { showEffect: true }) {
  * @return {*|string}
  */
 function buildSearchQuery(queries) {
-	if (!isArray(queries) || queries.length === 0) {
-		return this.getOption("defaultQuery");
-	}
+  if (!isArray(queries) || queries.length === 0) {
+    return this.getOption("defaultQuery");
+  }
 
-	const joinCallback = this.getOption("queries.join");
-	if (isFunction(joinCallback)) {
-		return joinCallback(queries);
-	}
+  const joinCallback = this.getOption("queries.join");
+  if (isFunction(joinCallback)) {
+    return joinCallback(queries);
+  }
 
-	const q = queries.join(" ").trim();
-	if (q.length === 0) {
-		return this.getOption("defaultQuery");
-	}
+  const q = queries.join(" ").trim();
+  if (q.length === 0) {
+    return this.getOption("defaultQuery");
+  }
 
-	return q;
+  return q;
 }
 
 /**
@@ -1260,229 +1263,247 @@ function buildSearchQuery(queries) {
  * @return {Promise<unknown>}
  */
 function collectSearchQueries() {
-	const currentHash = parseBracketedKeyValueHash(getGlobal().location.hash);
-	const self = this;
-
-	return new Promise((resolve, reject) => {
-		const query = [];
-		const wrapCallback = this.getOption("queries.wrap");
-
-		let hasNoIdError = false;
-
-		getSlottedElements
-			.call(this, "label[data-monster-label]")
-			.forEach((element) => {
-				const label = element.getAttribute("data-monster-label");
-				if (!label) {
-					throw new Error("no filter label is defined");
-				}
-
-				const id = element.id;
-				if (!id) {
-					hasNoIdError = true;
-					return;
-				}
-
-				const visible = getVisibilityFromSlotAttribute(element);
-				if (!visible) {
-					return;
-				}
-
-				let template = element.getAttribute("data-monster-template");
-				if (!template) {
-					template = "${id}=${value}";
-				}
-
-				const controlValue = getControlValuesFromLabel(element);
-				if (!controlValue) {
-					if (controlValue === "" && currentHash?.[this.id]?.[id]) {
-						delete currentHash[this.id][id];
-					}
-
-					return;
-				}
-
-				if (!isObject(currentHash[this.id])) {
-					currentHash[this.id] = {};
-				}
-				currentHash[this.id][id] = controlValue;
-
-				const mapping = {
-					id,
-					value: controlValue,
-					label,
-				};
-
-				const formatter = new Formatter(mapping, {
-					callbacks: {
-						range: (value, key) => {
-							return generateRangeComparisonExpression(value, key, {
-								urlEncode: true,
-								andOp: "AND",
-								orOp: "OR",
-								eqOp: "=",
-								gtOp: ">",
-								ltOp: "<",
-							});
-						},
-						"tag-list": (value, key) => {
-							if (isString(value)) {
-								value = value.split(",");
-							}
-
-							if (!isArray(value)) {
-								return "";
-							}
-
-							return (
-								key +
-								" IN " +
-								value
-									.map((v) => {
-										return `"${encodeURIComponent(v)}"`;
-									})
-									.join(",")
-							);
-						},
-						"list-tag": (value, key) => {
-							if (isString(value)) {
-								value = value.split(",");
-							}
-
-							if (!isArray(value)) {
-								return "";
-							}
-
-							return (
-								value
-									.map((v) => {
-										return `"${encodeURIComponent(v)}"`;
-									})
-									.join(",") +
-								" IN " +
-								encodeURIComponent(key)
-							);
-						},
-						"tags-in-list": (value, key, op) => {
-							if (isString(value)) {
-								value = value.split(",");
-							}
-
-							if (!isArray(value)) {
-								return "";
-							}
-
-							if (!op || !isString(op)) op = "OR";
-							op = " " + op.toUpperCase().trim() + " ";
-
-							let query = "";
-							value.forEach((v) => {
-								if (query.length > 0) {
-									query += op;
-								}
-								query += `${encodeURIComponent(key)} IN "${encodeURIComponent(v)}"`;
-							});
-
-							return query;
-						},
-						"list-in-tags": (value, key, op) => {
-							if (isString(value)) {
-								value = value.split(",");
-							}
-
-							if (!isArray(value)) {
-								return "";
-							}
-
-							if (!op || !isString(op)) op = "OR";
-							op = " " + op.toUpperCase().trim() + " ";
-
-							let query = "";
-							value.forEach((v) => {
-								if (query.length > 0) {
-									query += op;
-								}
-								query += `"${encodeURIComponent(v)}" IN ${encodeURIComponent(key)}`;
-							});
-
-							return query;
-						},
-						"array-list": (value, key) => {
-							if (isString(value)) {
-								value = value.split(",");
-							}
-
-							if (!isArray(value)) {
-								return "";
-							}
-
-							return (
-								key +
-								"=" +
-								value
-									.map((v) => {
-										return `"${encodeURIComponent(v)}"`;
-									})
-									.join(",")
-							);
-						},
-						"date-range": (value, key) => {
-							const query = parseDateInput(value, key);
-							if (!query || query === "false") {
-								return "";
-							}
-
-							// return query as url encoded
-							return encodeURIComponent(query);
-						},
-						"to-int-2": (value, key) => {
-							const query = normalizeNumber(value);
-							if (Number.isNaN(query)) {
-								return key + " IS NULL";
-							}
-							return key + "=" + encodeURIComponent(Math.round(query * 100));
-						},
-						"to-int-3": (value, key) => {
-							const query = normalizeNumber(value);
-							if (Number.isNaN(query)) {
-								return "";
-							}
-							return key + "=" + encodeURIComponent(Math.round(query * 1000));
-						},
-						"to-int-4": (value, key) => {
-							const query = normalizeNumber(value);
-							if (Number.isNaN(query)) {
-								return "";
-							}
-							return key + "=" + encodeURIComponent(Math.round(query * 10000));
-						},
-					},
-				});
-
-				if (self.getOption("formatter.marker.open")) {
-					formatter.setMarker(
-						self.getOption("formatter.marker.open"),
-						self.getOption("formatter.marker.close"),
-					);
-				}
-
-				let queryPart = formatter.format(template);
-				if (queryPart) {
-					if (isFunction(wrapCallback)) {
-						queryPart = wrapCallback(queryPart, mapping);
-					}
-					query.push(queryPart);
-				}
-			});
-
-		if (hasNoIdError) {
-			reject(new Error("some or all filter elements have no id"));
-			return;
-		}
-
-		getGlobal().location.hash = createBracketedKeyValueHash(currentHash);
-		resolve(query);
-	});
+  const currentHash = parseBracketedKeyValueHash(getGlobal().location.hash);
+  const self = this;
+
+  return new Promise((resolve, reject) => {
+    const query = [];
+    const wrapCallback = this.getOption("queries.wrap");
+
+    let hasNoIdError = false;
+
+    getSlottedElements
+      .call(this, "label[data-monster-label]")
+      .forEach((element) => {
+        const label = element.getAttribute("data-monster-label");
+        if (!label) {
+          throw new Error("no filter label is defined");
+        }
+
+        const id = element.id;
+        if (!id) {
+          hasNoIdError = true;
+          return;
+        }
+
+        const visible = getVisibilityFromSlotAttribute(element);
+        if (!visible) {
+          return;
+        }
+
+        let template = element.getAttribute("data-monster-template");
+        if (!template) {
+          template = "${id}=${value}";
+        }
+
+        const controlValue = getControlValuesFromLabel(element);
+        if (!controlValue) {
+          if (controlValue === "" && currentHash?.[this.id]?.[id]) {
+            delete currentHash[this.id][id];
+          }
+
+          return;
+        }
+
+        if (!isObject(currentHash[this.id])) {
+          currentHash[this.id] = {};
+        }
+        currentHash[this.id][id] = controlValue;
+
+        const mapping = {
+          id,
+          value: controlValue,
+          label,
+        };
+
+        const formatter = new Formatter(mapping, {
+          callbacks: {
+            range: (value, key) => {
+              return generateRangeComparisonExpression(value, key, {
+                urlEncode: true,
+                andOp: "AND",
+                orOp: "OR",
+                eqOp: "=",
+                gtOp: ">",
+                ltOp: "<",
+              });
+            },
+            "tag-list": (value, key) => {
+              if (isString(value)) {
+                value = value.split(",");
+              }
+
+              if (!isArray(value)) {
+                return "";
+              }
+
+              return (
+                key +
+                " IN " +
+                value
+                  .map((v) => {
+                    return `"${encodeURIComponent(v)}"`;
+                  })
+                  .join(",")
+              );
+            },
+            "list-tag": (value, key) => {
+              if (isString(value)) {
+                value = value.split(",");
+              }
+
+              if (!isArray(value)) {
+                return "";
+              }
+
+              return (
+                value
+                  .map((v) => {
+                    return `"${encodeURIComponent(v)}"`;
+                  })
+                  .join(",") +
+                " IN " +
+                encodeURIComponent(key)
+              );
+            },
+            "tags-in-list": (value, key, op) => {
+              if (isString(value)) {
+                value = value.split(",");
+              }
+
+              if (!isArray(value)) {
+                return "";
+              }
+
+              if (!op || !isString(op)) op = "OR";
+              op = " " + op.toUpperCase().trim() + " ";
+
+              let query = "";
+              value.forEach((v) => {
+                if (query.length > 0) {
+                  query += op;
+                }
+                query += `${encodeURIComponent(key)} IN "${encodeURIComponent(v)}"`;
+              });
+
+              return query;
+            },
+            "list-not-in-tags": (value, key, op) => {
+              if (isString(value)) {
+                value = value.split(",");
+              }
+              if (!isArray(value)) {
+                return "";
+              }
+              if (!op || !isString(op)) op = "OR";
+              op = " " + op.toUpperCase().trim() + " ";
+              let query = "";
+              value.forEach((v) => {
+                if (query.length > 0) {
+                  query += op;
+                }
+                query += `"${encodeURIComponent(v)}" NOT IN ${encodeURIComponent(key)}`;
+              });
+              return query;
+            },
+            "list-in-tags": (value, key, op) => {
+              if (isString(value)) {
+                value = value.split(",");
+              }
+
+              if (!isArray(value)) {
+                return "";
+              }
+
+              if (!op || !isString(op)) op = "OR";
+              op = " " + op.toUpperCase().trim() + " ";
+
+              let query = "";
+              value.forEach((v) => {
+                if (query.length > 0) {
+                  query += op;
+                }
+                query += `"${encodeURIComponent(v)}" IN ${encodeURIComponent(key)}`;
+              });
+
+              return query;
+            },
+            "array-list": (value, key) => {
+              if (isString(value)) {
+                value = value.split(",");
+              }
+
+              if (!isArray(value)) {
+                return "";
+              }
+
+              return (
+                key +
+                "=" +
+                value
+                  .map((v) => {
+                    return `"${encodeURIComponent(v)}"`;
+                  })
+                  .join(",")
+              );
+            },
+            "date-range": (value, key) => {
+              const query = parseDateInput(value, key);
+              if (!query || query === "false") {
+                return "";
+              }
+
+              // return query as url encoded
+              return encodeURIComponent(query);
+            },
+            "to-int-2": (value, key) => {
+              const query = normalizeNumber(value);
+              if (Number.isNaN(query)) {
+                return key + " IS NULL";
+              }
+              return key + "=" + encodeURIComponent(Math.round(query * 100));
+            },
+            "to-int-3": (value, key) => {
+              const query = normalizeNumber(value);
+              if (Number.isNaN(query)) {
+                return "";
+              }
+              return key + "=" + encodeURIComponent(Math.round(query * 1000));
+            },
+            "to-int-4": (value, key) => {
+              const query = normalizeNumber(value);
+              if (Number.isNaN(query)) {
+                return "";
+              }
+              return key + "=" + encodeURIComponent(Math.round(query * 10000));
+            },
+          },
+        });
+
+        if (self.getOption("formatter.marker.open")) {
+          formatter.setMarker(
+            self.getOption("formatter.marker.open"),
+            self.getOption("formatter.marker.close"),
+          );
+        }
+
+        let queryPart = formatter.format(template);
+        if (queryPart) {
+          if (isFunction(wrapCallback)) {
+            queryPart = wrapCallback(queryPart, mapping);
+          }
+          query.push(queryPart);
+        }
+      });
+
+    if (hasNoIdError) {
+      reject(new Error("some or all filter elements have no id"));
+      return;
+    }
+
+    getGlobal().location.hash = createBracketedKeyValueHash(currentHash);
+    resolve(query);
+  });
 }
 
 /**
@@ -1491,41 +1512,41 @@ function collectSearchQueries() {
  * @return {null|Array|undefined|string}
  */
 function getControlValuesFromLabel(label) {
-	// finde das erste Kind-Element vom type input
-	// wenn es ein input-Element ist, dann @todo
-
-	const foundControl = label.firstElementChild;
-
-	if (foundControl) {
-		if (foundControl.tagName === "INPUT") {
-			if (foundControl.type === "checkbox") {
-				const checkedControls = label.querySelectorAll(
-					`${foundControl}:checked`,
-				);
-				const values = [];
-
-				checkedControls.forEach((checkedControl) => {
-					values.push(checkedControl.value);
-				});
-
-				return values;
-			} else if (foundControl.type === "radio") {
-				const checkedControl = label.querySelector(`${foundControl}:checked`);
-
-				if (checkedControl) {
-					return checkedControl.value;
-				} else {
-					return null;
-				}
-			} else {
-				return foundControl.value;
-			}
-		} else {
-			return foundControl.value;
-		}
-	}
-
-	return null;
+  // finde das erste Kind-Element vom type input
+  // wenn es ein input-Element ist, dann @todo
+
+  const foundControl = label.firstElementChild;
+
+  if (foundControl) {
+    if (foundControl.tagName === "INPUT") {
+      if (foundControl.type === "checkbox") {
+        const checkedControls = label.querySelectorAll(
+          `${foundControl}:checked`,
+        );
+        const values = [];
+
+        checkedControls.forEach((checkedControl) => {
+          values.push(checkedControl.value);
+        });
+
+        return values;
+      } else if (foundControl.type === "radio") {
+        const checkedControl = label.querySelector(`${foundControl}:checked`);
+
+        if (checkedControl) {
+          return checkedControl.value;
+        } else {
+          return null;
+        }
+      } else {
+        return foundControl.value;
+      }
+    } else {
+      return foundControl.value;
+    }
+  }
+
+  return null;
 }
 
 /**
@@ -1533,60 +1554,60 @@ function getControlValuesFromLabel(label) {
  * @return {Promise<unknown>}
  */
 function initFromConfig() {
-	const host = findElementWithSelectorUpwards(this, "monster-host");
-
-	if (!(isInstance(host, Host) && this.id)) {
-		return Promise.resolve();
-	}
-
-	const configKey = getFilterConfigKey.call(this);
-
-	return new Promise((resolve, reject) => {
-		host
-			.getConfig(configKey)
-			.then((config) => {
-				if ((config && isObject(config)) || isArray(config)) {
-					this[settingsSymbol].setOptions(config);
-				}
-				resolve();
-			})
-			.catch((error) => {
-				if (error === undefined) {
-					resolve();
-					return;
-				}
-
-				// config not written
-				if (error?.message?.match(/is not defined/)) {
-					resolve();
-					return;
-				}
-
-				addAttributeToken(
-					this,
-					ATTRIBUTE_ERRORMESSAGE,
-					error?.message || error,
-				);
-				reject(error);
-			});
-	});
+  const host = findElementWithSelectorUpwards(this, "monster-host");
+
+  if (!(isInstance(host, Host) && this.id)) {
+    return Promise.resolve();
+  }
+
+  const configKey = getFilterConfigKey.call(this);
+
+  return new Promise((resolve, reject) => {
+    host
+      .getConfig(configKey)
+      .then((config) => {
+        if ((config && isObject(config)) || isArray(config)) {
+          this[settingsSymbol].setOptions(config);
+        }
+        resolve();
+      })
+      .catch((error) => {
+        if (error === undefined) {
+          resolve();
+          return;
+        }
+
+        // config not written
+        if (error?.message?.match(/is not defined/)) {
+          resolve();
+          return;
+        }
+
+        addAttributeToken(
+          this,
+          ATTRIBUTE_ERRORMESSAGE,
+          error?.message || error,
+        );
+        reject(error);
+      });
+  });
 }
 
 /**
  * @private
  */
 function updateConfig() {
-	const host = findElementWithSelectorUpwards(this, "monster-host");
-	if (!(host && this.id)) {
-		return;
-	}
-	const configKey = getFilterConfigKey.call(this);
-
-	try {
-		host.setConfig(configKey, this[settingsSymbol].getOptions());
-	} catch (error) {
-		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error);
-	}
+  const host = findElementWithSelectorUpwards(this, "monster-host");
+  if (!(host && this.id)) {
+    return;
+  }
+  const configKey = getFilterConfigKey.call(this);
+
+  try {
+    host.setConfig(configKey, this[settingsSymbol].getOptions());
+  } catch (error) {
+    addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error);
+  }
 }
 
 /**
@@ -1594,8 +1615,8 @@ function updateConfig() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+  // language=HTML
+  return `
         <div data-monster-role="control" part="control">
             <div data-monster-role="container">
                 <div data-monster-role="layout">