@schukai/monster 3.55.0 → 3.55.1

package/source/components/datatable/filter.mjs

@@ -3,41 +3,48 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {findElementWithIdUpwards, findElementWithSelectorUpwards} from "../../dom/util.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
 import {
-    assembleMethodSymbol,
-    CustomElement,
-    getSlottedElements,
-    registerCustomElement,
+	findElementWithIdUpwards,
+	findElementWithSelectorUpwards,
+} from "../../dom/util.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {ID} from "../../types/id.mjs";
-import {Settings} from "./filter/settings.mjs";
-import {FilterStyleSheet} from "./stylesheet/filter.mjs";
-import {getDocument, getWindow} from "../../dom/util.mjs";
-import {getGlobal} from "../../types/global.mjs";
-import {isInstance, isFunction, isObject, isArray} from "../../types/is.mjs";
-import {Host} from "../host/host.mjs";
-import {addAttributeToken} from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE} from "../../dom/constants.mjs";
+import { ID } from "../../types/id.mjs";
+import { Settings } from "./filter/settings.mjs";
+import { FilterStyleSheet } from "./stylesheet/filter.mjs";
+import { getDocument, getWindow } from "../../dom/util.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { isInstance, isFunction, isObject, isArray } from "../../types/is.mjs";
+import { Host } from "../host/host.mjs";
+import { addAttributeToken } from "../../dom/attributes.mjs";
+import { ATTRIBUTE_ERRORMESSAGE } from "../../dom/constants.mjs";
 import "../form/message-state-button.mjs";
-import {Formatter} from "../../text/formatter.mjs";
-import {generateRangeComparisonExpression} from "../../text/util.mjs";
+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 { 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";
 
-export {Filter};
+export { Filter };
 
 /**
  * @private
@@ -73,7 +80,9 @@ const filterControlElementSymbol = Symbol("filterControlElement");
  * @private
  * @type {symbol}
  */
-const filterSaveActionButtonElementSymbol = Symbol("filterSaveActionButtonElement");
+const filterSaveActionButtonElementSymbol = Symbol(
+	"filterSaveActionButtonElement",
+);
 
 /**
  * @private
@@ -134,180 +143,189 @@ const settingsSymbol = Symbol("settings");
  * @summary A data set
  */
 class Filter extends CustomElement {
-    /**
-     *
-     */
-    constructor() {
-        super();
-        this[settingsSymbol] = new Settings();
-    }
-
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/filter@@instance");
-    }
-
-    /**
-     *
-     * @param {string} message
-     * @returns {Monster.Components.Datatable.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;
-    }
-
-    /**
-     *
-     * @returns {Monster.Components.Datatable.Filter}
-     */
-    resetFailureMessage() {
-        this[searchButtonElementSymbol].hideMessage();
-        this[searchButtonElementSymbol].removeState();
-        return this;
-    }
-
-    /**
-     *
-     * @returns {Monster.Components.Datatable.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 {Object} queries Query definitions
-     * @property {function} queries.wrap Wrap query
-     * @property {function} queries.join Join queries
-     * @property {string} defaultQuery Default query
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-
-            labels: {
-                search: "Search",
-                reset: "Reset",
-                save: "Save",
-                "filter-name": "Filter name",
-                "empty-query-and-no-default": "Please select a filter",
-                "query-not-changed": "The query has not changed",
-            },
-
-            templateMapping: {
-                "filter-save-label": null,
-                "filter-name-label": name,
-            },
-
-            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: "",
-            defaultQuery: "",
-        });
-
-    }
-
-    /**
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-datatable-filter";
-    }
-
-    /**
-     * @return {FilterButton}
-     */
-    [assembleMethodSymbol]() {
-
-        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(this);
-        initEventHandler.call(this);
-
-        initFromConfig.call(this)
-            .then(() => {
-                initFilter.call(this);
-                updateFilterTabs.call(this);
-
-            })
-            .catch((error) => {
-                addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
-            });
-
-    }
-
-    /**
-     *
-     */
-    connectedCallback() {
-        super.connectedCallback();
-
-        getWindow().addEventListener(
-            "hashchange",
-            this[locationChangeHandlerSymbol],
-        );
-    }
-
-    /**
-     *
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-
-        getWindow().removeEventListener(
-            "hashchange",
-            this[locationChangeHandlerSymbol],
-        );
-    }
-
-    /**
-     * @return {Array<CSSStyleSheet>}
-     */
-    static getCSSStyleSheet() {
-        return [FilterStyleSheet, FormStyleSheet, ThemeStyleSheet, SpaceStyleSheet];
-    }
+	/**
+	 *
+	 */
+	constructor() {
+		super();
+		this[settingsSymbol] = new Settings();
+	}
+
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter@@instance");
+	}
+
+	/**
+	 *
+	 * @param {string} message
+	 * @returns {Monster.Components.Datatable.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;
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Datatable.Filter}
+	 */
+	resetFailureMessage() {
+		this[searchButtonElementSymbol].hideMessage();
+		this[searchButtonElementSymbol].removeState();
+		return this;
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Datatable.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 {Object} queries Query definitions
+	 * @property {function} queries.wrap Wrap query
+	 * @property {function} queries.join Join queries
+	 * @property {string} defaultQuery Default query
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+
+			labels: {
+				search: "Search",
+				reset: "Reset",
+				save: "Save",
+				"filter-name": "Filter name",
+				"empty-query-and-no-default": "Please select a filter",
+				"query-not-changed": "The query has not changed",
+			},
+
+			templateMapping: {
+				"filter-save-label": null,
+				"filter-name-label": name,
+			},
+
+			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: "",
+			defaultQuery: "",
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-datatable-filter";
+	}
+
+	/**
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {
+		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(this);
+		initEventHandler.call(this);
+
+		initFromConfig
+			.call(this)
+			.then(() => {
+				initFilter.call(this);
+				updateFilterTabs.call(this);
+			})
+			.catch((error) => {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
+			});
+	}
+
+	/**
+	 *
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+
+		getWindow().addEventListener(
+			"hashchange",
+			this[locationChangeHandlerSymbol],
+		);
+	}
+
+	/**
+	 *
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		getWindow().removeEventListener(
+			"hashchange",
+			this[locationChangeHandlerSymbol],
+		);
+	}
+
+	/**
+	 * @return {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [FilterStyleSheet, FormStyleSheet, ThemeStyleSheet, SpaceStyleSheet];
+	}
 }
 
 /**
@@ -315,35 +333,37 @@ class Filter extends CustomElement {
  * @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;
 }
 
 /**
@@ -351,69 +371,67 @@ function initControlReferences() {
  * @throws {Error} no filter label is defined
  */
 function initFilter() {
-
-    const storedConfig = 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) {
-                throw new Error("no filter label is defined");
-            }
-
-            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 = storedConfig.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 = valuesFromHash[element.id];
-                    searchInput.value = v;//valuesFromHash[element.id];
-                } catch (error) {
-                }
-            }
-
-            setting = this[settingsSymbol].get(value);
-            if (setting) {
-                setSlotAttribute(element, setting.visible);
-                //style.display = setting.visible ? "block" : "none";
-            }
-
-            //const visible = window.getComputedStyle(element).display !== "none";
-            const visible = getVisibilityFromSlotAttribute(element);
-
-            this[settingsSymbol].set({value, label, visible});
-        });
-
-    this[filterSelectElementSymbol].setOption(
-        "options",
-        this[settingsSymbol].getOptions(),
-    );
-
-    setTimeout(() => {
-        this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
-    }, 10);
+	const storedConfig = 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) {
+				throw new Error("no filter label is defined");
+			}
+
+			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 = storedConfig.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 = valuesFromHash[element.id];
+					searchInput.value = v; //valuesFromHash[element.id];
+				} catch (error) {}
+			}
+
+			setting = this[settingsSymbol].get(value);
+			if (setting) {
+				setSlotAttribute(element, setting.visible);
+				//style.display = setting.visible ? "block" : "none";
+			}
+
+			//const visible = window.getComputedStyle(element).display !== "none";
+			const visible = getVisibilityFromSlotAttribute(element);
+
+			this[settingsSymbol].set({ value, label, visible });
+		});
+
+	this[filterSelectElementSymbol].setOption(
+		"options",
+		this[settingsSymbol].getOptions(),
+	);
+
+	setTimeout(() => {
+		this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
+	}, 10);
 }
 
 /**
@@ -422,18 +440,17 @@ function initFilter() {
  * @returns {*}
  */
 function escapeAttributeValue(input) {
-    
-    if (input === undefined || input === null) {
-        debugger
-        return input;
-    }
-    
-    return input
-        .replace(/&/g, "&amp;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#x27;")
-        .replace(/</g, "&lt;")
-        .replace(/>/g, "&gt;");
+	if (input === undefined || input === null) {
+		debugger;
+		return input;
+	}
+
+	return input
+		.replace(/&/g, "&amp;")
+		.replace(/"/g, "&quot;")
+		.replace(/'/g, "&#x27;")
+		.replace(/</g, "&lt;")
+		.replace(/>/g, "&gt;");
 }
 
 /**
@@ -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"
+	);
 }
 
 /**
@@ -451,306 +470,341 @@ 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;
-    /**
-     * 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) {
-                    //filterElement.style.display = event.detail.checked ? "block" : "none";
-                    setSlotAttribute(filterElement, event.detail.checked);
-                }
-
-                self[settingsSymbol].set({
-                    value: event.detail.value,
-                    visible: event.detail.checked,
-                });
-
-                updateConfig.call(self);
-            },
-        );
-    }
-
-    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", () => {
-        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});
-    });
-
-    self[locationChangeHandlerSymbol] = (event) => {
-        if (event instanceof HashChangeEvent) {
-            if (event.oldURL === event.newURL) {
-                return;
-            }
-        }
-    };
-
-    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});
-        }
-    });
-
-    // tabs
-    const element = this[filterTabElementSymbol];
-    if (element) {
-        initTabEvents.call(this)
-    }
-
+	const self = this;
+	/**
+	 * 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) {
+					//filterElement.style.display = event.detail.checked ? "block" : "none";
+					setSlotAttribute(filterElement, event.detail.checked);
+				}
+
+				self[settingsSymbol].set({
+					value: event.detail.value,
+					visible: event.detail.checked,
+				});
+
+				updateConfig.call(self);
+			},
+		);
+	}
+
+	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", () => {
+		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 });
+	});
+
+	self[locationChangeHandlerSymbol] = (event) => {
+		if (event instanceof HashChangeEvent) {
+			if (event.oldURL === event.newURL) {
+				return;
+			}
+		}
+	};
+
+	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 });
+		}
+	});
+
+	// tabs
+	const element = this[filterTabElementSymbol];
+	if (element) {
+		initTabEvents.call(this);
+	}
 }
 
 function initTabEvents() {
-
-    this[filterTabElementSymbol].addEventListener("monster-tab-changed", (event) => {
-        
-        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"]
-        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 document = getDocument();
-        const host = document.querySelector("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
-                })
-                    
-        })
-
-    });
-
-
+	this[filterTabElementSymbol].addEventListener(
+		"monster-tab-changed",
+		(event) => {
+			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"];
+			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 document = getDocument();
+			const host = document.querySelector("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 document = getDocument();
-    const host = document.querySelector("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", `
+	const element = this[filterTabElementSymbol];
+	if (!element) {
+		return;
+	}
+
+	const document = getDocument();
+	const host = document.querySelector("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>`);
-        }
-    })
+             </div>`,
+				);
+			}
+		})
+		.catch((error) => {
+			if (error instanceof Error) {
+				addAttributeToken(
+					this,
+					ATTRIBUTE_ERRORMESSAGE,
+					error.message + " " + error.stack,
+				);
+			} else {
+				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error + "");
+			}
+		});
 }
 
 /**
@@ -758,74 +812,77 @@ function updateFilterTabs() {
  * @param showEffect
  * @returns {Promise<*>}
  */
-function doSearch({showEffect} = {showEffect: true}) {
-    const self = this;
-    
-    this.resetFailureMessage();
-
-    if (showEffect) {
-        this[searchButtonElementSymbol].setState("activity", self.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));
-                }
-
-                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));
-                }
-
-                throw new Error(msg);
-            }
-
-            if (showEffect) {
-                this[searchButtonElementSymbol].setState("activity", self.getOption("timeouts.message", 4000));
-            }
-
-            this.setOption("query", buildSearchQuery.call(this, query));
-        })
-        .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", self.getOption("timeouts.message", 4000));
-                this[searchButtonElementSymbol].setMessage(error.message).showMessage();
-            }
-
-            return Promise.reject(error);
-        });
+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 === "" && !this.getOption("defaultQuery")) {
+				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));
+				}
+
+				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(this.getOption("timeouts.message", 4000));
+				}
+
+				throw new Error(msg);
+			}
+
+			if (showEffect) {
+				this[searchButtonElementSymbol].setState(
+					"activity",
+					this.getOption("timeouts.message", 4000),
+				);
+			}
+
+			this.setOption("query", buildSearchQuery.call(this, query));
+		})
+		.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);
+		});
 }
 
 /**
@@ -834,21 +891,21 @@ function doSearch({showEffect} = {showEffect: true}) {
  * @returns {*|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;
 }
 
 /**
@@ -856,200 +913,203 @@ function buildSearchQuery(queries) {
  * @returns {Promise<unknown>}
  */
 function collectSearchQueries() {
-    const currentHash = parseBracketedKeyValueHash(getGlobal().location.hash);
-
-    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 = window.getComputedStyle(element).display !== "none";
-                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: "<",
-                            });
-                        },
-                        "date-range": (value, key) => {
-                            const query = parseDateInput(value, key);
-                            if (!query || query === "false") {
-                                return "";
-                            }
-
-                            // return query as url encoded
-                            return encodeURIComponent(query);
-                        },
-                    },
-                });
-
-                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);
+
+	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 = window.getComputedStyle(element).display !== "none";
+				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: "<",
+							});
+						},
+						"date-range": (value, key) => {
+							const query = parseDateInput(value, key);
+							if (!query || query === "false") {
+								return "";
+							}
+
+							// return query as url encoded
+							return encodeURIComponent(query);
+						},
+					},
+				});
+
+				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);
+	});
 }
 
-
 /**
  * @private
  * @param label
  * @returns {null|Array|undefined|string}
  */
 function getControlValuesFromLabel(label) {
-    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;
+	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;
 }
 
-
 /**
  * @private
  * @returns {Promise<unknown>}
  */
 function initFromConfig() {
-    const document = getDocument();
-    const host = document.querySelector("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)) {
-                    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 document = getDocument();
+	const host = document.querySelector("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)) {
+					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 document = getDocument();
-    const host = document.querySelector("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 document = getDocument();
+	const host = document.querySelector("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);
+	}
 }
 
 /**
@@ -1057,9 +1117,8 @@ function updateConfig() {
  * @return {string}
  */
 function getTemplate() {
-
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <div data-monster-role="layout">
                 <div data-monster-role="filter">