@schukai/monster 3.88.0 → 3.88.1

package/source/components/datatable/filter.mjs

@@ -12,49 +12,49 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import {instanceSymbol} from "../../constants.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { findTargetElementFromEvent } 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 {DeadMansSwitch} from "../../util/deadmansswitch.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 { DeadMansSwitch } from "../../util/deadmansswitch.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,
+	getStoredFilterConfigKey,
+	getFilterConfigKey,
+	parseDateInput,
 } from "./filter/util.mjs";
 
 import "./filter/select.mjs";
 
-export {Filter};
+export { Filter };
 
 /**
  * @private
@@ -91,7 +91,7 @@ const filterControlElementSymbol = Symbol("filterControlElement");
  * @type {symbol}
  */
 const filterSaveActionButtonElementSymbol = Symbol(
-    "filterSaveActionButtonElement",
+	"filterSaveActionButtonElement",
 );
 
 /**
@@ -112,7 +112,6 @@ const locationChangeHandlerSymbol = Symbol("locationChangeHandler");
  */
 const settingsSymbol = Symbol("settings");
 
-
 /**
  * @private
  * @type {symbol}
@@ -138,211 +137,210 @@ const debounceSizeSymbol = Symbol("debounceSize");
  * @summary The Filter component is used to show and handle the filter values.
  */
 class Filter extends CustomElement {
-    /**
-     *
-     */
-    constructor() {
-        super();
-        this[settingsSymbol] = new Settings();
-    }
-
-    /**
-     * 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} storedConfig Stored configuration
-     * @property {boolean} storedConfig.enabled Enabled
-     * @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: {
-                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: undefined,
-            defaultQuery: "",
-            eventProcessing: true,
-        });
-    }
-
-    /**
-     *
-     * @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.
+	 * @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} storedConfig Stored configuration
+	 * @property {boolean} storedConfig.enabled Enabled
+	 * @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: {
+				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: undefined,
+			defaultQuery: "",
+			eventProcessing: true,
+		});
+	}
+
+	/**
+	 *
+	 * @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];
+	}
 }
 
 /**
@@ -350,48 +348,48 @@ 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;
 }
 
 function updateFilterSelections() {
-    queueMicrotask(() => {
-        const options = this[settingsSymbol].getOptions();
-        this[filterSelectElementSymbol].setOption("options", options);
-        queueMicrotask(() => {
-            this[filterSelectElementSymbol].value =
-                this[settingsSymbol].getSelected();
-        });
-    });
+	queueMicrotask(() => {
+		const options = this[settingsSymbol].getOptions();
+		this[filterSelectElementSymbol].setOption("options", options);
+		queueMicrotask(() => {
+			this[filterSelectElementSymbol].value =
+				this[settingsSymbol].getSelected();
+		});
+	});
 }
 
 /**
@@ -399,59 +397,58 @@ 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) {
-                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 = 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) {
+				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 = 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);
 }
 
 /**
@@ -460,16 +457,16 @@ function initFilter() {
  * @return {*}
  */
 function escapeAttributeValue(input) {
-    if (input === undefined || input === null) {
-        return input;
-    }
-
-    return input
-        .replace(/&/g, "&amp;")
-        .replace(/"/g, "&quot;")
-        .replace(/'/g, "&#x27;")
-        .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;");
 }
 
 /**
@@ -478,9 +475,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"
+	);
 }
 
 /**
@@ -489,338 +486,335 @@ 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) {
-                    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})
-            .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});
-        }
-    });
-
-    // 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) {
+					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 })
+			.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 });
+		}
+	});
+
+	// 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"];
-            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,
-                    });
-                });
-        },
-    );
+	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 + "");
+			}
+		});
 }
 
 /**
@@ -828,76 +822,76 @@ function updateFilterTabs() {
  * @param showEffect
  * @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 === "" && !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);
-        });
+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);
+		});
 }
 
 /**
@@ -906,21 +900,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;
 }
 
 /**
@@ -928,108 +922,108 @@ 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 = 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);
-                        },
-                    },
-                });
-
-                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 = 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);
+						},
+					},
+				});
+
+				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);
+	});
 }
 
 /**
@@ -1038,38 +1032,38 @@ function collectSearchQueries() {
  * @return {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;
 }
 
 /**
@@ -1077,60 +1071,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);
+	}
 }
 
 /**
@@ -1138,8 +1132,8 @@ function updateConfig() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `<div data-monster-role="control" part="control">
+	// language=HTML
+	return `<div data-monster-role="control" part="control">
     <div data-monster-role="container">
         <div data-monster-role="layout">
             <div data-monster-role="filter">