@schukai/monster 3.54.0 → 3.55.0

package/source/components/datatable/filter.mjs

@@ -3,35 +3,41 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { findElementWithIdUpwards } from "../../dom/util.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {findTargetElementFromEvent} from "../../dom/events.mjs";
+import {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 {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 { generateUniqueConfigKey } from "../host/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 {getStoredFilterConfigKey, getFilterConfigKey, parseDateInput} from "./filter/util.mjs";
 
 import "./filter/select.mjs";
 
-export { Filter };
+export {Filter};
 
 /**
  * @private
@@ -51,12 +57,30 @@ const searchButtonElementSymbol = Symbol("searchButtonElement");
  */
 const resetButtonElementSymbol = Symbol("resetButtonElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const saveButtonElementSymbol = Symbol("saveButtonElement");
+
 /**
  * @private
  * @type {symbol}
  */
 const filterControlElementSymbol = Symbol("filterControlElement");
 
+/**
+ * @private
+ * @type {symbol}
+ */
+const filterSaveActionButtonElementSymbol = Symbol("filterSaveActionButtonElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const filterTabElementSymbol = Symbol("filterTabElement");
+
 /**
  * @private
  * @type {symbol}
@@ -110,158 +134,180 @@ const settingsSymbol = Symbol("settings");
  * @summary A data set
  */
 class Filter extends CustomElement {
-	/**
-	 *
-	 */
-	constructor() {
-		super();
-		this[settingsSymbol] = new Settings();
-	}
-
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @returns {symbol}
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for("@schukai/monster/components/filter@@instance");
-	}
-
-	/**
-	 *
-	 * @param {string} message
-	 * @returns {Monster.Components.Datatable.Filter}
-	 */
-	showFailureMessage(message) {
-		this[searchButtonElementSymbol].setState("failed", 10000);
-		this[searchButtonElementSymbol]
-			.setMessage(String(message))
-			.showMessage(10000);
-		return this;
-	}
-
-	/**
-	 *
-	 * @returns {Monster.Components.Datatable.Filter}
-	 */
-	resetFailureMessage() {
-		this[searchButtonElementSymbol].hideMessage();
-		this[searchButtonElementSymbol].removeState();
-		return this;
-	}
-
-	/**
-	 *
-	 * @returns {Monster.Components.Datatable.Filter}
-	 */
-	showSuccess() {
-		this[searchButtonElementSymbol].setState("successful", 5000);
-		return this;
-	}
-
-	/**
-	 * To set the options via the html tag the attribute `data-monster-options` must be used.
-	 * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
-	 *
-	 * The individual configuration values can be found in the table.
-	 *
-	 * @property {Object} templates Template definitions
-	 * @property {string} templates.main Main template
-	 * @property {Object} labels Label definitions
-	 * @property {string} labels.search Search button label
-	 * @property {string} labels.reset Reset button label
-	 * @property {Object} queries Query definitions
-	 * @property {function} queries.wrap Wrap query
-	 * @property {function} queries.join Join queries
-	 * @property {string} defaultQuery Default query
-	 */
-	get defaults() {
-		const obj = Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			labels: {
-				search: "Search",
-				reset: "Reset",
-				"empty-query-and-no-default": "Please select a filter",
-				"query-not-changed": "The query has not changed",
-			},
-
-			queries: {
-				wrap: (value, definition) => {
-					return value;
-				},
-				join: (queries) => {
-					if (queries.length === 0) {
-						return "";
-					}
-					return queries.join(" AND ");
-				},
-			},
-
-			query: "",
-			defaultQuery: "",
-		});
-
-		return obj;
-	}
-
-	/**
-	 *
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-datatable-filter";
-	}
-
-	/**
-	 * @return {FilterButton}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-
-		initFromConfig
-			.call(this)
-			.then(() => {
-				initFilter.call(this);
-			})
-			.catch((error) => {
-				console.error(error);
-			});
-	}
-
-	/**
-	 *
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		getWindow().addEventListener(
-			"hashchange",
-			this[locationChangeHandlerSymbol],
-		);
-	}
-
-	/**
-	 *
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-
-		getWindow().removeEventListener(
-			"hashchange",
-			this[locationChangeHandlerSymbol],
-		);
-	}
-
-	/**
-	 * @return {Array<CSSStyleSheet>}
-	 */
-	static getCSSStyleSheet() {
-		return [FilterStyleSheet];
-	}
+    /**
+     *
+     */
+    constructor() {
+        super();
+        this[settingsSymbol] = new Settings();
+    }
+
+    /**
+     * This method is called by the `instanceof` operator.
+     * @returns {symbol}
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for("@schukai/monster/components/filter@@instance");
+    }
+
+    /**
+     *
+     * @param {string} message
+     * @returns {Monster.Components.Datatable.Filter}
+     */
+    showFailureMessage(message) {
+        this[searchButtonElementSymbol].setState("failed", this.getOption("timeouts.message", 4000));
+        this[searchButtonElementSymbol]
+            .setMessage(message.toString())
+            .showMessage(this.getOption("timeouts.message", 4000));
+        return this;
+    }
+
+    /**
+     *
+     * @returns {Monster.Components.Datatable.Filter}
+     */
+    resetFailureMessage() {
+        this[searchButtonElementSymbol].hideMessage();
+        this[searchButtonElementSymbol].removeState();
+        return this;
+    }
+
+    /**
+     *
+     * @returns {Monster.Components.Datatable.Filter}
+     */
+    showSuccess() {
+        this[searchButtonElementSymbol].setState("successful", this.getOption("timeouts.message", 4000));
+        return this;
+    }
+
+    /**
+     * To set the options via the html tag the attribute `data-monster-options` must be used.
+     * @see {@link https://monsterjs.org/en/doc/#configurate-a-monster-control}
+     *
+     * The individual configuration values can be found in the table.
+     *
+     * @property {Object} templates Template definitions
+     * @property {string} templates.main Main template
+     * @property {Object} labels Label definitions
+     * @property {string} labels.search Search button label
+     * @property {string} labels.reset Reset button label
+     * @property {Object} queries Query definitions
+     * @property {function} queries.wrap Wrap query
+     * @property {function} queries.join Join queries
+     * @property {string} defaultQuery Default query
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+
+            labels: {
+                search: "Search",
+                reset: "Reset",
+                save: "Save",
+                "filter-name": "Filter name",
+                "empty-query-and-no-default": "Please select a filter",
+                "query-not-changed": "The query has not changed",
+            },
+
+            templateMapping: {
+                "filter-save-label": null,
+                "filter-name-label": name,
+            },
+
+            storedConfig: {
+                enabled: true,
+                selector: ""
+            },
+
+            timeouts: {
+                message: 4000,
+            },
+
+            queries: {
+                wrap: (value, definition) => {
+                    return value;
+                },
+                join: (queries) => {
+                    if (queries.length === 0) {
+                        return "";
+                    }
+                    return queries.join(" AND ");
+                },
+            },
+
+            query: "",
+            defaultQuery: "",
+        });
+
+    }
+
+    /**
+     *
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-datatable-filter";
+    }
+
+    /**
+     * @return {FilterButton}
+     */
+    [assembleMethodSymbol]() {
+
+        this.setOption("templateMapping.filter-save-label", this.getOption("labels.save"));
+        this.setOption("templateMapping.filter-name-label", this.getOption("labels.filter-name"));
+
+        super[assembleMethodSymbol]();
+
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+
+        initFromConfig.call(this)
+            .then(() => {
+                initFilter.call(this);
+                updateFilterTabs.call(this);
+
+            })
+            .catch((error) => {
+                addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message);
+            });
+
+    }
+
+    /**
+     *
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        getWindow().addEventListener(
+            "hashchange",
+            this[locationChangeHandlerSymbol],
+        );
+    }
+
+    /**
+     *
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+
+        getWindow().removeEventListener(
+            "hashchange",
+            this[locationChangeHandlerSymbol],
+        );
+    }
+
+    /**
+     * @return {Array<CSSStyleSheet>}
+     */
+    static getCSSStyleSheet() {
+        return [FilterStyleSheet, FormStyleSheet, ThemeStyleSheet, SpaceStyleSheet];
+    }
 }
 
 /**
@@ -269,23 +315,35 @@ 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]",
-	);
-	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;
 }
 
 /**
@@ -293,65 +351,69 @@ function initControlReferences() {
  * @throws {Error} no filter label is defined
  */
 function initFilter() {
-	const storedConfig = this[settingsSymbol];
-	this[settingsSymbol] = new Settings();
-
-	const result = parseBracketedKeyValueHash(getGlobal().location.hash);
-	let valuesFromHash = {};
-	if (isObject(result) && result?.[this.id]) {
-		valuesFromHash = result[this.id];
-	}
-
-	getSlottedElements
-		.call(this, "label[data-monster-label]")
-		.forEach((element) => {
-			const label = element.getAttribute("data-monster-label");
-			if (!label) {
-				throw new Error("no filter label is defined");
-			}
-
-			let value = element.id;
-			if (!value) {
-				const prefix = label.replace(/\W/g, "-");
-				prefix.charAt(0).match(/[\d_]/g)?.length ? `f${prefix}` : prefix;
-
-				value = new ID(prefix + "-").toString();
-				element.id = value;
-			}
-
-			let setting = storedConfig.get(value);
-
-			if (setting) {
-				this[settingsSymbol].set(setting);
-			}
-
-			if (valuesFromHash?.[element.id]) {
-				const v = escapeAttributeValue(valuesFromHash[element.id]);
-				const searchInput = element.firstElementChild;
-				try {
-					searchInput.value = valuesFromHash[element.id];
-				} catch (error) {}
-			}
-
-			setting = this[settingsSymbol].get(value);
-			if (setting) {
-				setSlotAttribute(element, setting.visible);
-				//style.display = setting.visible ? "block" : "none";
-			}
-
-			//const visible = window.getComputedStyle(element).display !== "none";
-			const visible = getVisibilityFromSlotAttribute(element);
-
-			this[settingsSymbol].set({ value, label, visible });
-		});
-
-	this[filterSelectElementSymbol].setOption(
-		"options",
-		this[settingsSymbol].getOptions(),
-	);
-	setTimeout(() => {
-		this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
-	}, 10);
+
+    const storedConfig = this[settingsSymbol];
+    this[settingsSymbol] = new Settings();
+
+    const result = parseBracketedKeyValueHash(getGlobal().location.hash);
+    let valuesFromHash = {};
+    if (isObject(result) && result?.[this.id]) {
+        valuesFromHash = result[this.id];
+    }
+
+    getSlottedElements
+        .call(this, "label[data-monster-label]")
+        .forEach((element) => {
+            const label = element.getAttribute("data-monster-label");
+            if (!label) {
+                throw new Error("no filter label is defined");
+            }
+
+            let value = element.id;
+            if (!value) {
+                const prefix = label.replace(/\W/g, "-");
+                prefix.charAt(0).match(/[\d_]/g)?.length ? `f${prefix}` : prefix;
+
+                value = new ID(prefix + "-").toString();
+                element.id = value;
+            }
+
+            let setting = storedConfig.get(value);
+
+            if (setting) {
+                this[settingsSymbol].set(setting);
+            }
+
+            if (valuesFromHash?.[element.id]) {
+                const v = escapeAttributeValue(valuesFromHash[element.id]);
+                const searchInput = element.firstElementChild;
+                try {
+                //    searchInput.value = valuesFromHash[element.id];
+                    searchInput.value = v;//valuesFromHash[element.id];
+                } catch (error) {
+                }
+            }
+
+            setting = this[settingsSymbol].get(value);
+            if (setting) {
+                setSlotAttribute(element, setting.visible);
+                //style.display = setting.visible ? "block" : "none";
+            }
+
+            //const visible = window.getComputedStyle(element).display !== "none";
+            const visible = getVisibilityFromSlotAttribute(element);
+
+            this[settingsSymbol].set({value, label, visible});
+        });
+
+    this[filterSelectElementSymbol].setOption(
+        "options",
+        this[settingsSymbol].getOptions(),
+    );
+
+    setTimeout(() => {
+        this[filterSelectElementSymbol].value = this[settingsSymbol].getSelected();
+    }, 10);
 }
 
 /**
@@ -360,12 +422,18 @@ function initFilter() {
  * @returns {*}
  */
 function escapeAttributeValue(input) {
-	return input
-		.replace(/&/g, "&amp;")
-		.replace(/"/g, "&quot;")
-		.replace(/'/g, "&#x27;")
-		.replace(/</g, "&lt;")
-		.replace(/>/g, "&gt;");
+    
+    if (input === undefined || input === null) {
+        debugger
+        return input;
+    }
+    
+    return input
+        .replace(/&/g, "&amp;")
+        .replace(/"/g, "&quot;")
+        .replace(/'/g, "&#x27;")
+        .replace(/</g, "&lt;")
+        .replace(/>/g, "&gt;");
 }
 
 /**
@@ -374,10 +442,7 @@ function escapeAttributeValue(input) {
  * @returns {boolean}
  */
 function getVisibilityFromSlotAttribute(element) {
-	return element.hasAttribute("slot") &&
-		element.getAttribute("slot") === "hidden"
-		? false
-		: true;
+    return !(element.hasAttribute("slot") && element.getAttribute("slot") === "hidden");
 }
 
 /**
@@ -386,188 +451,404 @@ 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 (event) {
-				const settings = self[settingsSymbol].getOptions();
-
-				for (const setting of settings) {
-					const filterElement = findElementWithIdUpwards(self, setting.value);
-					if (filterElement) {
-						setSlotAttribute(filterElement, false);
-
-						self[settingsSymbol].set({ value: setting.value, visible: false });
-					}
-				}
-
-				updateConfig.call(self);
-			},
-		);
-
-		self[filterSelectElementSymbol].addEventListener(
-			"monster-changed",
-			function (event) {
-				const filterElement = findElementWithIdUpwards(
-					self,
-					event.detail.value,
-				);
-				if (filterElement) {
-					//filterElement.style.display = event.detail.checked ? "block" : "none";
-					setSlotAttribute(filterElement, event.detail.checked);
-				}
-
-				self[settingsSymbol].set({
-					value: event.detail.value,
-					visible: event.detail.checked,
-				});
-
-				updateConfig.call(self);
-			},
-		);
-	}
-
-	self[searchButtonElementSymbol].setOption("actions.click", () => {
-		doSearch.call(self);
-	});
-
-	// the reset button should reset the filter and the search query
-	// all input elements should be reset to their default values
-	// which is the empty string. we search for all input elements
-	// in the filter and reset them to their default value
-	self[resetButtonElementSymbol].setOption("actions.click", () => {
-		getSlottedElements
-			.call(self, "label[data-monster-label]")
-			.forEach((element) => {
-				const label = element.getAttribute("data-monster-label");
-				if (!label) {
-					return;
-				}
-
-				const input = element.firstElementChild;
-
-				if (input) {
-					input.value = "";
-				}
-			});
-
-		doSearch.call(self, { showEffect: false });
-	});
-
-	self[locationChangeHandlerSymbol] = (event) => {
-		if (event instanceof HashChangeEvent) {
-			if (event.oldURL === event.newURL) {
-				return;
-			}
-		}
-	};
-
-	self.addEventListener("keyup", (event) => {
-		const path = event.composedPath();
-		if (path.length === 0) {
-			return;
-		}
-
-		if (!(path[0] instanceof HTMLInputElement)) {
-			return;
-		}
-
-		if (event.keyCode === 13) {
-			doSearch.call(self, { showEffect: false });
-		}
-	});
+    const self = this;
+    /**
+     * Monster.Components.Form.event:monster-selection-cleared
+     */
+    if (self[filterSelectElementSymbol]) {
+        self[filterSelectElementSymbol].addEventListener(
+            "monster-selection-cleared",
+            function () {
+                const settings = self[settingsSymbol].getOptions();
+
+                for (const setting of settings) {
+                    const filterElement = findElementWithIdUpwards(self, setting.value);
+                    if (filterElement) {
+                        setSlotAttribute(filterElement, false);
+
+                        self[settingsSymbol].set({value: setting.value, visible: false});
+                    }
+                }
+
+                updateConfig.call(self);
+            },
+        );
+
+        self[filterSelectElementSymbol].addEventListener(
+            "monster-changed",
+            function (event) {
+                const filterElement = findElementWithIdUpwards(
+                    self,
+                    event.detail.value,
+                );
+                if (filterElement) {
+                    //filterElement.style.display = event.detail.checked ? "block" : "none";
+                    setSlotAttribute(filterElement, event.detail.checked);
+                }
+
+                self[settingsSymbol].set({
+                    value: event.detail.value,
+                    visible: event.detail.checked,
+                });
+
+                updateConfig.call(self);
+            },
+        );
+    }
+
+    if (self[filterSaveActionButtonElementSymbol]) {
+        self[filterSaveActionButtonElementSymbol].setOption("actions.click", function (event) {
+
+            const button = findTargetElementFromEvent(event, "data-monster-role", "save-action-button");
+            const form = button.closest("[data-monster-role=form]");
+
+            if (!form) {
+                button.setState("failed", self.getOption("timeouts.message", 4000))
+                return;
+            }
+
+            const input = form.querySelector("input[name=filter-name]");
+            if (!input) {
+                button.setState("failed", self.getOption("timeouts.message", 4000))
+                return;
+            }
+
+            const name = input.value;
+            if (!name) {
+                button.setState("failed", self.getOption("timeouts.message", 4000))
+                button.setMessage("Please enter a name").showMessage();
+                return;
+            }
+
+            doSearch.call(self, {showEffect: false}).then(() => {
+
+                const configKey = getStoredFilterConfigKey.call(self);
+                const host = getDocument().querySelector("monster-host");
+                if (!(host)) {
+                    return;
+                }
+
+                const query = self.getOption("query");
+                if (!query) {
+                    button.setState("failed", self.getOption("timeouts.message", self.getOption("timeouts.message", 4000)))
+                    button.setMessage("No query found").showMessage(self.getOption("timeouts.message", 4000));
+                    return;
+                }
+
+                host.hasConfig(configKey).then((hasConfig) => {
+
+                    return new Promise((resolve, reject) => {
+                        if (hasConfig) {
+                            host.getConfig(configKey).then(resolve).catch(reject);
+                            return;
+                        }
+                        return resolve({});
+                    })
+
+                }).then((config) => {
+
+                    config[name] = query;
+                    return host.setConfig(configKey, {
+                        ...config,
+                    })
+
+
+                }).then(() => {
+                    button.setState("successful", self.getOption("timeouts.message", 4000))
+                    updateFilterTabs.call(self);
+
+                }).catch((error) => {
+                    button.setState("failed", self.getOption("timeouts.message", 4000))
+                    button.setMessage(error.message).showMessage(self.getOption("timeouts.message", 4000));
+                })
+
+            }).catch((error) => {
+                button.setState("failed", self.getOption("timeouts.message", 4000))
+                const msg = error.message || error;
+                button.setMessage(msg).showMessage(self.getOption("timeouts.message", 4000));
+            })
+
+        });
+    }
+
+
+    self[searchButtonElementSymbol].setOption("actions.click", () => {
+        doSearch.call(self).then(() => {
+
+        }).catch((error) => {
+
+        })
+    });
+
+    // the reset button should reset the filter and the search query
+    // all input elements should be reset to their default values
+    // which is the empty string. we search for all input elements
+    // in the filter and reset them to their default value
+    self[resetButtonElementSymbol].setOption("actions.click", () => {
+        getSlottedElements
+            .call(self, "label[data-monster-label]")
+            .forEach((element) => {
+                const label = element.getAttribute("data-monster-label");
+                if (!label) {
+                    return;
+                }
+
+                const input = element.firstElementChild;
+
+                if (input) {
+                    input.value = "";
+                }
+            });
+
+        doSearch.call(self, {showEffect: false});
+    });
+
+    self[locationChangeHandlerSymbol] = (event) => {
+        if (event instanceof HashChangeEvent) {
+            if (event.oldURL === event.newURL) {
+                return;
+            }
+        }
+    };
+
+    self.addEventListener("keyup", (event) => {
+        const path = event.composedPath();
+        if (path.length === 0) {
+            return;
+        }
+
+        if (!(path[0] instanceof HTMLInputElement)) {
+            return;
+        }
+
+        if (event.keyCode === 13) {
+            doSearch.call(self, {showEffect: false});
+        }
+    });
+
+    // tabs
+    const element = this[filterTabElementSymbol];
+    if (element) {
+        initTabEvents.call(this)
+    }
+
+}
+
+function initTabEvents() {
+
+    this[filterTabElementSymbol].addEventListener("monster-tab-changed", (event) => {
+        
+        const query = event?.detail?.data?.['data-monster-query'];
+        this.setOption("query",  query);
+        
+        
+    })
+    
+    this[filterTabElementSymbol].addEventListener("monster-tab-remove", (event) => {
+
+        const labels = []
+        const buttons = this[filterTabElementSymbol].getOption("buttons")
+
+        const keys=["popper", "standard"]
+        for(let i=0; i<keys.length; i++) {
+            const key = keys[i]
+            
+            for (const button of buttons[key]) {
+                if (button.label !== event.detail.label) {
+                    labels.push(button.label)
+                }
+            }
+        }
+
+        const document = getDocument();
+        const host = document.querySelector("monster-host");
+        if (!(host && this.id)) {
+            return;
+        }
+
+        const configKey = getStoredFilterConfigKey.call(this);
+        host.hasConfig(configKey).then((hasConfig) => {
+            if (!hasConfig) {
+                return;
+            }
+
+            return host.getConfig(configKey);
+        }).then((config) => {
+                
+                for (const [name, query] of Object.entries(config)) {
+                    if (labels.includes(name)) {
+                        continue;
+                    }
+    
+                    delete config[name]
+                }
+    
+                return host.setConfig(configKey, {
+                    ...config
+                })
+                    
+        })
+
+    });
+
+
+}
+
+/**
+ * @private
+ */
+function updateFilterTabs() {
+
+    const element = this[filterTabElementSymbol];
+    if (!element) {
+        return;
+    }
+
+    const document = getDocument();
+    const host = document.querySelector("monster-host");
+    if (!(host && this.id)) {
+        return;
+    }
+
+    const configKey = getStoredFilterConfigKey.call(this);
+    host.hasConfig(configKey).then((hasConfig) => {
+        if (!hasConfig) {
+            return;
+        }
+
+        return host.getConfig(configKey);
+    }).then((config) => {
+
+        for (const [name, query] of Object.entries(config)) {
+
+            const found = element.querySelector(`[data-monster-button-label="${name}"]`);
+            if (found) {
+                continue;
+            }
+            
+            if (query===undefined || query===null) {
+                continue;
+            }
+
+            const escapedQuery = escapeAttributeValue(query);
+
+            element.insertAdjacentHTML("beforeend", `
+             <div data-monster-button-label="${name}"
+             data-monster-removable="true" 
+             data-monster-query="${escapedQuery}" data-monster-role="filter-tab" >
+             </div>`);
+        }
+    })
 }
 
 /**
  * @private
+ * @param showEffect
+ * @returns {Promise<*>}
  */
-function doSearch({ showEffect } = { showEffect: true }) {
-	this.resetFailureMessage();
-
-	if (showEffect) {
-		this[searchButtonElementSymbol].setState("activity", 10000);
-	}
-
-	collectSearchQueries
-		.call(this)
-		.then((query) => {
-			const buildQuery = buildSearchQuery.call(this, query);
-			if (buildQuery === "" && !this.getOption("defaultQuery")) {
-				this[searchButtonElementSymbol].removeState();
-				this[searchButtonElementSymbol]
-					.setMessage(this.getOption("labels.empty-query-and-no-default"))
-					.showMessage(5000);
-				return;
-			}
-
-			if (buildQuery === this.getOption("query")) {
-				this[searchButtonElementSymbol].removeState();
-				this[searchButtonElementSymbol]
-					.setMessage(this.getOption("labels.query-not-changed"))
-					.showMessage(5000);
-				return;
-			}
-
-			if (showEffect) {
-				this[searchButtonElementSymbol].setState("activity", 2000);
-			}
-
-			this.setOption("query", buildSearchQuery.call(this, query));
-		})
-		.catch((error) => {
-			console.error(error);
-			if (error instanceof Error) {
-				addAttributeToken(
-					this,
-					ATTRIBUTE_ERRORMESSAGE,
-					error.message + " " + error.stack,
-				);
-			} else {
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-			}
-
-			this[searchButtonElementSymbol].setState("failed", 10000);
-			this[searchButtonElementSymbol].setMessage(String(error)).showMessage();
-		});
+function doSearch({showEffect} = {showEffect: true}) {
+    const self = this;
+    
+    this.resetFailureMessage();
+
+    if (showEffect) {
+        this[searchButtonElementSymbol].setState("activity", self.getOption("timeouts.message", 4000));
+    }
+
+    return collectSearchQueries
+        .call(this)
+        .then((query) => {
+            
+            const buildQuery = buildSearchQuery.call(this, query);
+            if (buildQuery === "" && !this.getOption("defaultQuery")) {
+
+                const msg = this.getOption("labels.empty-query-and-no-default");
+
+                if (showEffect) {
+                    this[searchButtonElementSymbol].removeState();
+                    this[searchButtonElementSymbol]
+                        .setMessage(msg)
+                        .showMessage(self.getOption("timeouts.message", 4000));
+                }
+
+                throw new Error(msg);
+
+            }
+
+            if (buildQuery === this.getOption("query")) {
+
+                const msg = this.getOption("labels.query-not-changed");
+
+                if (showEffect) {
+                    this[searchButtonElementSymbol].removeState();
+                    this[searchButtonElementSymbol]
+                        .setMessage(msg)
+                        .showMessage(self.getOption("timeouts.message", 4000));
+                }
+
+                throw new Error(msg);
+            }
+
+            if (showEffect) {
+                this[searchButtonElementSymbol].setState("activity", self.getOption("timeouts.message", 4000));
+            }
+
+            this.setOption("query", buildSearchQuery.call(this, query));
+        })
+        .catch((error) => {
+
+            if (error instanceof Error) {
+                addAttributeToken(
+                    this,
+                    ATTRIBUTE_ERRORMESSAGE,
+                    error.message + " " + error.stack,
+                );
+            } else {
+                addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
+            }
+
+            if (showEffect) {
+                this[searchButtonElementSymbol].setState("failed", self.getOption("timeouts.message", 4000));
+                this[searchButtonElementSymbol].setMessage(error.message).showMessage();
+            }
+
+            return Promise.reject(error);
+        });
 }
 
 /**
  * @private
  * @param queries
- * @returns {string|undefind}
+ * @returns {*|string}
  */
 function buildSearchQuery(queries) {
-	if (!isArray(queries) || queries.length === 0) {
-		return this.getOption("defaultQuery");
-	}
+    if (!isArray(queries) || queries.length === 0) {
+        return this.getOption("defaultQuery");
+    }
 
-	const joinCallback = this.getOption("queries.join");
-	if (isFunction(joinCallback)) {
-		return joinCallback(queries);
-	}
+    const joinCallback = this.getOption("queries.join");
+    if (isFunction(joinCallback)) {
+        return joinCallback(queries);
+    }
 
-	const q = queries.join(" ").trim();
-	if (q.length === 0) {
-		return this.getOption("defaultQuery");
-	}
+    const q = queries.join(" ").trim();
+    if (q.length === 0) {
+        return this.getOption("defaultQuery");
+    }
 
-	return q;
+    return q;
 }
 
 /**
@@ -575,215 +856,103 @@ function buildSearchQuery(queries) {
  * @returns {Promise<unknown>}
  */
 function collectSearchQueries() {
-	const currentHash = parseBracketedKeyValueHash(getGlobal().location.hash);
-
-	return new Promise((resolve, reject) => {
-		const query = [];
-		const wrapCallback = this.getOption("queries.wrap");
-
-		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) {
-					reject(new Error("no filter id is defined"));
-					return;
-				}
-
-				//const visible = window.getComputedStyle(element).display !== "none";
-				const visible = getVisibilityFromSlotAttribute(element);
-				if (!visible) {
-					return;
-				}
-
-				let template = element.getAttribute("data-monster-template");
-				if (!template) {
-					template = "${id}=${value}";
-				}
-
-				const controlValue = getControlValuesFromLabel(element);
-				if (!controlValue) {
-					if (controlValue === "" && currentHash?.[this.id]?.[id]) {
-						delete currentHash[this.id][id];
-					}
-
-					return;
-				}
-
-				if (!isObject(currentHash[this.id])) {
-					currentHash[this.id] = {};
-				}
-				currentHash[this.id][id] = controlValue;
-
-				const mapping = {
-					id,
-					value: controlValue,
-					label,
-				};
-
-				const formatter = new Formatter(mapping, {
-					callbacks: {
-						range: (value, key) => {
-							return generateRangeComparisonExpression(value, key, {
-								urlEncode: true,
-								andOp: "AND",
-								orOp: "OR",
-								eqOp: "=",
-								gtOp: ">",
-								ltOp: "<",
-							});
-						},
-						"date-range": (value, key) => {
-							const query = parseDateInput(value, key);
-							if (!query || query === "false") {
-								return "";
-							}
-
-							// return query as url encoded
-							return encodeURIComponent(query);
-						},
-					},
-				});
-
-				let queryPart = formatter.format(template);
-				if (queryPart) {
-					if (isFunction(wrapCallback)) {
-						queryPart = wrapCallback(queryPart, mapping);
-					}
-					query.push(queryPart);
-				}
-			});
-
-		getGlobal().location.hash = createBracketedKeyValueHash(currentHash);
-		resolve(query);
-	});
+    const currentHash = parseBracketedKeyValueHash(getGlobal().location.hash);
+
+    return new Promise((resolve, reject) => {
+        const query = [];
+        const wrapCallback = this.getOption("queries.wrap");
+
+        let hasNoIdError = false;
+
+        getSlottedElements
+            .call(this, "label[data-monster-label]")
+            .forEach((element) => {
+                const label = element.getAttribute("data-monster-label");
+                if (!label) {
+                    throw new Error("no filter label is defined");
+                }
+
+                const id = element.id;
+                if (!id) {
+                    hasNoIdError = true;
+                    return;
+                }
+
+                //const visible = window.getComputedStyle(element).display !== "none";
+                const visible = getVisibilityFromSlotAttribute(element);
+                if (!visible) {
+                    return;
+                }
+
+                let template = element.getAttribute("data-monster-template");
+                if (!template) {
+                    template = "${id}=${value}";
+                }
+
+                const controlValue = getControlValuesFromLabel(element);
+                if (!controlValue) {
+                    if (controlValue === "" && currentHash?.[this.id]?.[id]) {
+                        delete currentHash[this.id][id];
+                    }
+
+                    return;
+                }
+
+                if (!isObject(currentHash[this.id])) {
+                    currentHash[this.id] = {};
+                }
+                currentHash[this.id][id] = controlValue;
+
+                const mapping = {
+                    id,
+                    value: controlValue,
+                    label,
+                };
+
+                const formatter = new Formatter(mapping, {
+                    callbacks: {
+                        range: (value, key) => {
+                            return generateRangeComparisonExpression(value, key, {
+                                urlEncode: true,
+                                andOp: "AND",
+                                orOp: "OR",
+                                eqOp: "=",
+                                gtOp: ">",
+                                ltOp: "<",
+                            });
+                        },
+                        "date-range": (value, key) => {
+                            const query = parseDateInput(value, key);
+                            if (!query || query === "false") {
+                                return "";
+                            }
+
+                            // return query as url encoded
+                            return encodeURIComponent(query);
+                        },
+                    },
+                });
+
+                let queryPart = formatter.format(template);
+                if (queryPart) {
+                    if (isFunction(wrapCallback)) {
+                        queryPart = wrapCallback(queryPart, mapping);
+                    }
+                    query.push(queryPart);
+                }
+            });
+
+        if (hasNoIdError) {
+            reject(new Error("some or all filter elements have no id"));
+            return;
+        }
+
+
+        getGlobal().location.hash = createBracketedKeyValueHash(currentHash);
+        resolve(query);
+    });
 }
 
-/**
- * @private
- * @param {String} str
- * @param {String} field
- * @returns {String}
- * @throws {Error} if no field is defined
- */
-function parseDateInput(str, field) {
-	if (!str) {
-		return "";
-	}
-
-	if (!field) {
-		throw new Error("no field is defined");
-	}
-
-	// Define the supported formats
-	//let formats = ['DD-MM-YYYY', 'MM-DD-YYYY', 'YYYY-MM-DD', 'YYYY/MM/DD', 'DD.MM.YYYY'];
-	const formats = ["YYYY-MM-DD"];
-	// Determine the current date format of the localization
-	const currentDateFormat = new Intl.DateTimeFormat()
-		.format(new Date())
-		.replace(/\d/g, "D");
-	//  formats.push(currentDateFormat);
-
-	// Run through the supported formats and try to parse the date
-	for (let i = 0; i < formats.length; i++) {
-		const format = formats[i];
-		// Replace the corresponding placeholders in the format string with regular expressions
-
-		try {
-			const pattern = format
-				.replace("DD", "\\d{2}")
-				.replace("MM", "\\d{2}")
-				.replace("YYYY", "\\d{4}");
-			const rangePattern =
-				"(?<from>" + pattern + ")\\s*-\\s*(?<to>" + pattern + ")";
-
-			const rangeRegex = new RegExp("^" + rangePattern + "$", "g");
-
-			if (rangeRegex.test(str)) {
-				rangeRegex.lastIndex = 0;
-
-				const rangeResult = rangeRegex.exec(str);
-
-				if (!rangeResult) {
-					continue;
-				}
-
-				const from = rangeResult?.groups?.from;
-				const to = rangeResult?.groups?.to;
-
-				if (from && to) {
-					return (
-						"(" +
-						field +
-						">='" +
-						from +
-						" 00:00:00' AND " +
-						field +
-						"<='" +
-						to +
-						" 23:59:59')"
-					);
-				}
-
-				if (from) {
-					return "(" + field + ">='" + from + " 00:00:00')";
-				} else if (to) {
-					return "(" + field + "<='" + to + "' 23:59:59')";
-				}
-
-				return "false";
-			}
-
-			const prefix = str.substring(0, 1) === "-";
-			const suffix = str.substring(str.length - 1, str.length) === "-";
-
-			if (prefix) {
-				str = str.substring(1, str.length);
-			} else if (suffix) {
-				str = str.substring(0, str.length - 1);
-			}
-
-			const regex = new RegExp("^(?<date>" + pattern + ")$", "g");
-			if (regex.test(str)) {
-				regex.lastIndex = 0;
-				const result = regex.exec(str);
-
-				if (!result) {
-					continue;
-				}
-
-				const date = result?.groups?.date;
-				if (date) {
-					if (prefix) {
-						return "(" + field + "<='" + date + " 23:59:59')";
-					} else if (suffix) {
-						return "(" + field + ">='" + date + "' 00:00:00')";
-					}
-					return (
-						"(" +
-						field +
-						">='" +
-						date +
-						" 00:00:00' AND " +
-						field +
-						"<='" +
-						date +
-						" 23:59:59')"
-					);
-				} else {
-					return "false";
-				}
-			}
-		} catch (e) {}
-	}
-
-	return "false";
-}
 
 /**
  * @private
@@ -791,97 +960,96 @@ function parseDateInput(str, field) {
  * @returns {null|Array|undefined|string}
  */
 function getControlValuesFromLabel(label) {
-	const foundControl = label.firstElementChild;
-
-	if (foundControl) {
-		if (foundControl.tagName === "INPUT") {
-			if (foundControl.type === "checkbox") {
-				const checkedControls = label.querySelectorAll(`${control}:checked`);
-				const values = [];
-
-				checkedControls.forEach((checkedControl) => {
-					values.push(checkedControl.value);
-				});
-
-				return values;
-			} else if (foundControl.type === "radio") {
-				const checkedControl = label.querySelector(`${control}:checked`);
-
-				if (checkedControl) {
-					return checkedControl.value;
-				} else {
-					return null;
-				}
-			} else {
-				return foundControl.value;
-			}
-		} else {
-			return foundControl.value;
-		}
-	}
-
-	return null;
+    const foundControl = label.firstElementChild;
+
+    if (foundControl) {
+        if (foundControl.tagName === "INPUT") {
+            if (foundControl.type === "checkbox") {
+                const checkedControls = label.querySelectorAll(`${foundControl}:checked`);
+                const values = [];
+
+                checkedControls.forEach((checkedControl) => {
+                    values.push(checkedControl.value);
+                });
+
+                return values;
+            } else if (foundControl.type === "radio") {
+                const checkedControl = label.querySelector(`${foundControl}:checked`);
+
+                if (checkedControl) {
+                    return checkedControl.value;
+                } else {
+                    return null;
+                }
+            } else {
+                return foundControl.value;
+            }
+        } else {
+            return foundControl.value;
+        }
+    }
+
+    return null;
 }
 
-/**
- * @private
- * @returns {string}
- */
-function getFilterConfigKey() {
-	return generateUniqueConfigKey("datatable", this?.id, "filter");
-}
 
 /**
  * @private
  * @returns {Promise<unknown>}
  */
 function initFromConfig() {
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
-
-	if (!(isInstance(host, Host) && this.id)) {
-		return Promise.resolve();
-	}
-
-	const configKey = getFilterConfigKey.call(this);
-
-	return new Promise((resolve, reject) => {
-		host
-			.getConfig(configKey)
-			.then((config) => {
-				if (config) {
-					this[settingsSymbol].setOptions(config);
-				}
-				resolve();
-			})
-			.catch((error) => {
-				if (error === undefined) {
-					resolve();
-					return;
-				}
-
-				addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-				reject(error);
-			});
-	});
+    const document = getDocument();
+    const host = document.querySelector("monster-host");
+
+    if (!(isInstance(host, Host) && this.id)) {
+        return Promise.resolve();
+    }
+
+    const configKey = getFilterConfigKey.call(this);
+
+    return new Promise((resolve, reject) => {
+        host
+            .getConfig(configKey)
+            .then((config) => {
+                if (config && isObject(config)) {
+                    this[settingsSymbol].setOptions(config);
+                }
+                resolve();
+            })
+            .catch((error) => {
+                if (error === undefined) {
+                    resolve();
+                    return;
+                }
+
+                // config not written
+                if (error?.message?.match(/is not defined/)) {
+                    resolve();
+                    return;
+                }
+
+                addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error);
+                reject(error);
+            });
+    });
 }
 
 /**
  * @private
  */
 function updateConfig() {
-	const document = getDocument();
-	const host = document.querySelector("monster-host");
-	if (!(host && this.id)) {
-		return;
-	}
-	const configKey = getFilterConfigKey.call(this);
-
-	try {
-		host.setConfig(configKey, this[settingsSymbol].getOptions());
-	} catch (error) {
-		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, String(error));
-	}
+    const document = getDocument();
+    const host = document.querySelector("monster-host");
+    if (!(host && this.id)) {
+        return;
+    }
+    const configKey = getFilterConfigKey.call(this);
+
+    try {
+        host.setConfig(configKey, this[settingsSymbol].getOptions());
+    } catch (error) {
+        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, error?.message || error);
+    }
 }
 
 /**
@@ -889,8 +1057,9 @@ function updateConfig() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+
+    // language=HTML
+    return `
         <div data-monster-role="control" part="control">
             <div data-monster-role="layout">
                 <div data-monster-role="filter">
@@ -898,15 +1067,31 @@ function getTemplate() {
                     <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-message-state-button data-monster-role="search-button" class="stretched-control"
-                                                  data-monster-replace="path:labels.search">
-                    </monster-message-state-button>
+                    <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>