@schukai/monster 3.86.4 → 3.87.0

package/source/components/datatable/filter.mjs

@@ -12,48 +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 { 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
@@ -90,7 +91,7 @@ const filterControlElementSymbol = Symbol("filterControlElement");
  * @type {symbol}
  */
 const filterSaveActionButtonElementSymbol = Symbol(
-	"filterSaveActionButtonElement",
+    "filterSaveActionButtonElement",
 );
 
 /**
@@ -111,6 +112,25 @@ const locationChangeHandlerSymbol = Symbol("locationChangeHandler");
  */
 const settingsSymbol = Symbol("settings");
 
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const resizeObserverSymbol = Symbol("resizeObserver");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const sizeDataSymbol = Symbol("sizeData");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const debounceSizeSymbol = Symbol("debounceSize");
+
 /**
  * The Filter component is used to show and handle the filter values.
  *
@@ -118,199 +138,211 @@ const settingsSymbol = Symbol("settings");
  * @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 {Object} formatter label Template Formatter definitions
-	 * @property {Object} formatter.marker
-	 * @property {Object} formatter.marker.open
-	 * @property {Object} formatter.marker.close
-	 * @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(),
-			},
-			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];
+    }
 }
 
 /**
@@ -318,48 +350,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();
+        });
+    });
 }
 
 /**
@@ -367,58 +399,59 @@ 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);
 }
 
 /**
@@ -427,16 +460,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;");
 }
 
 /**
@@ -445,9 +478,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"
+    );
 }
 
 /**
@@ -456,343 +489,338 @@ 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[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) {
+                    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 + "");
+            }
+        });
 }
 
 /**
@@ -800,76 +828,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);
+        });
 }
 
 /**
@@ -878,21 +906,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;
 }
 
 /**
@@ -900,108 +928,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);
+    });
 }
 
 /**
@@ -1010,38 +1038,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;
 }
 
 /**
@@ -1049,60 +1077,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);
+    }
 }
 
 /**
@@ -1110,49 +1138,50 @@ function updateConfig() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
-        <div data-monster-role="control" part="control">
-            <div data-monster-role="layout">
-                <div data-monster-role="filter">
-                    <slot></slot>
-                    <slot name="hidden"></slot>
-                </div>
-                <div data-monster-role="select-and-search">
-                    <monster-message-state-button data-monster-role="search-button" class="stretched-control"
-                                                  data-monster-replace="path:labels.search">
-                    </monster-message-state-button>
-                    <monster-select class="stretched-control"
-                                    data-monster-selected-template="summary"
-                                    data-monster-option-type="checkbox"
-                                    data-monster-option-filter-mode="options"
-                                    data-monster-option-filter-position="popper"
-                                    data-monster-role="filter-select"></monster-select>
-                    <monster-popper-button data-monster-role="save-button" class="stretched-control"
-                                           data-monster-attributes="data-monster-visible path:storedConfig.enabled">
-                        <div slot="button">\${filter-save-label}</div>
-                        <div class="monster-form" data-monster-role="form">
-
-                            <label for="filter-name">\${filter-name-label}
-                                <input name="filter-name"
-                                       type="search"
-                                       class="monster-margin-bottom-5"></label>
-                            <monster-message-state-button
-                                    data-monster-role="save-action-button"
-                                    data-monster-option-labels-button="\${filter-save-label}">
-                            </monster-message-state-button>
-
-                        </div>
-                    </monster-popper-button>
-                    <monster-button data-monster-role="reset-button" class="stretched-control"
-                                    data-monster-replace="path:labels.reset">
-                    </monster-button>
-                </div>
-
+    // 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">
+                <slot></slot>
+                <slot name="hidden"></slot>
             </div>
-            <input class="hidden" name="query" data-monster-role="query"
-                   data-monster-attributes="value path:query">
+            <div data-monster-role="select-and-search">
+                <monster-message-state-button data-monster-role="search-button" class="stretched-control"
+                                              data-monster-replace="path:labels.search">
+                </monster-message-state-button>
+                <monster-select class="stretched-control"
+                                data-monster-selected-template="summary"
+                                data-monster-option-type="checkbox"
+                                data-monster-option-filter-mode="options"
+                                data-monster-option-filter-position="popper"
+                                data-monster-role="filter-select"></monster-select>
+                <monster-popper-button data-monster-role="save-button" class="stretched-control"
+                                       data-monster-attributes="data-monster-visible path:storedConfig.enabled">
+                    <div slot="button">\${filter-save-label}</div>
+                    <div class="monster-form" data-monster-role="form">
+
+                        <label for="filter-name">\${filter-name-label}
+                            <input name="filter-name"
+                                   type="search"
+                                   class="monster-margin-bottom-5"></label>
+                        <monster-message-state-button
+                                data-monster-role="save-action-button"
+                                data-monster-option-labels-button="\${filter-save-label}">
+                        </monster-message-state-button>
+
+                    </div>
+                </monster-popper-button>
+                <monster-button data-monster-role="reset-button" class="stretched-control"
+                                data-monster-replace="path:labels.reset">
+                </monster-button>
+            </div>
+
         </div>
+        <input class="hidden" name="query" data-monster-role="query"
+               data-monster-attributes="value path:query">
+    </div>
+</div>
     `;
 }