@schukai/monster 4.66.2 → 4.67.0

package/CHANGELOG.md

@@ -2,6 +2,17 @@
 
 
 
+## [4.67.0] - 2025-12-31
+
+### Add Features
+
+- Add new filter controls for date, datetime, and time [#354](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/354)
+### Changes
+
+- close issue [#354](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/354)
+
+
+
 ## [4.66.2] - 2025-12-31
 
 ### Bug Fixes

package/package.json

@@ -1 +1 @@
-{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.66.2"}
+{"author":"Volker Schukai","dependencies":{"@floating-ui/dom":"^1.7.4","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"4.67.0"}

package/source/components/datatable/filter/date-presets.mjs

@@ -0,0 +1,435 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../../dom/customelement.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+import { AbstractBase } from "./abstract-base.mjs";
+import { getLocaleOfDocument } from "../../../dom/locale.mjs";
+
+export { DatePresets };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const selectElementSymbol = Symbol("selectElement");
+
+/**
+ * The Filter component is used to show and handle the filter values.
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterDatePresets component provides quick date presets.
+ */
+class DatePresets extends AbstractBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter/date-presets@@instance");
+	}
+
+	/**
+	 * 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 Text labels
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: getTranslations(),
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-date-presets";
+	}
+
+	/**
+	 *
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		updateOptions.call(this);
+	}
+
+	/**
+	 * @return Array<CSSStyleSheet>
+	 */
+	static getCSSStyleSheet() {
+		return [FilterControlsDefaultsStyleSheet, FilterStyleSheet];
+	}
+
+	/**
+	 * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+	 *
+	 * @param {*} value
+	 */
+	set value(value) {
+		this[selectElementSymbol].value = value;
+	}
+
+	/**
+	 * @return {*}
+	 */
+	get value() {
+		return this[selectElementSymbol].value;
+	}
+}
+
+/**
+ * @private
+ * @returns {Object}
+ */
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case "de":
+			return {
+				any: "Beliebig",
+				today: "Heute",
+				yesterday: "Gestern",
+				last7: "Letzte 7 Tage",
+				last30: "Letzte 30 Tage",
+				thisMonth: "Dieser Monat",
+				lastMonth: "Letzter Monat",
+			};
+		case "es":
+			return {
+				any: "Cualquiera",
+				today: "Hoy",
+				yesterday: "Ayer",
+				last7: "Últimos 7 días",
+				last30: "Últimos 30 días",
+				thisMonth: "Este mes",
+				lastMonth: "Mes pasado",
+			};
+		case "zh":
+			return {
+				any: "不限",
+				today: "今天",
+				yesterday: "昨天",
+				last7: "最近7天",
+				last30: "最近30天",
+				thisMonth: "本月",
+				lastMonth: "上个月",
+			};
+		case "hi":
+			return {
+				any: "कोई भी",
+				today: "आज",
+				yesterday: "कल",
+				last7: "पिछले 7 दिन",
+				last30: "पिछले 30 दिन",
+				thisMonth: "इस माह",
+				lastMonth: "पिछला माह",
+			};
+		case "bn":
+			return {
+				any: "যেকোনো",
+				today: "আজ",
+				yesterday: "গতকাল",
+				last7: "শেষ ৭ দিন",
+				last30: "শেষ ৩০ দিন",
+				thisMonth: "এই মাস",
+				lastMonth: "গত মাস",
+			};
+		case "pt":
+			return {
+				any: "Qualquer",
+				today: "Hoje",
+				yesterday: "Ontem",
+				last7: "Últimos 7 dias",
+				last30: "Últimos 30 dias",
+				thisMonth: "Este mês",
+				lastMonth: "Mês passado",
+			};
+		case "ru":
+			return {
+				any: "Любой",
+				today: "Сегодня",
+				yesterday: "Вчера",
+				last7: "Последние 7 дней",
+				last30: "Последние 30 дней",
+				thisMonth: "Этот месяц",
+				lastMonth: "Прошлый месяц",
+			};
+		case "ja":
+			return {
+				any: "指定なし",
+				today: "今日",
+				yesterday: "昨日",
+				last7: "過去7日",
+				last30: "過去30日",
+				thisMonth: "今月",
+				lastMonth: "先月",
+			};
+		case "pa":
+			return {
+				any: "ਕੋਈ ਵੀ",
+				today: "ਅੱਜ",
+				yesterday: "ਕੱਲ੍ਹ",
+				last7: "ਪਿਛਲੇ 7 ਦਿਨ",
+				last30: "ਪਿਛਲੇ 30 ਦਿਨ",
+				thisMonth: "ਇਸ ਮਹੀਨੇ",
+				lastMonth: "ਪਿਛਲਾ ਮਹੀਨਾ",
+			};
+		case "mr":
+			return {
+				any: "कोणतेही",
+				today: "आज",
+				yesterday: "काल",
+				last7: "मागील 7 दिवस",
+				last30: "मागील 30 दिवस",
+				thisMonth: "हा महिना",
+				lastMonth: "मागील महिना",
+			};
+		case "fr":
+			return {
+				any: "Tout",
+				today: "Aujourd'hui",
+				yesterday: "Hier",
+				last7: "7 derniers jours",
+				last30: "30 derniers jours",
+				thisMonth: "Ce mois",
+				lastMonth: "Mois dernier",
+			};
+		case "it":
+			return {
+				any: "Qualsiasi",
+				today: "Oggi",
+				yesterday: "Ieri",
+				last7: "Ultimi 7 giorni",
+				last30: "Ultimi 30 giorni",
+				thisMonth: "Questo mese",
+				lastMonth: "Mese scorso",
+			};
+		case "nl":
+			return {
+				any: "Elke",
+				today: "Vandaag",
+				yesterday: "Gisteren",
+				last7: "Laatste 7 dagen",
+				last30: "Laatste 30 dagen",
+				thisMonth: "Deze maand",
+				lastMonth: "Vorige maand",
+			};
+		case "sv":
+			return {
+				any: "Alla",
+				today: "Idag",
+				yesterday: "Igår",
+				last7: "Senaste 7 dagar",
+				last30: "Senaste 30 dagar",
+				thisMonth: "Denna månad",
+				lastMonth: "Förra månaden",
+			};
+		case "pl":
+			return {
+				any: "Dowolny",
+				today: "Dzisiaj",
+				yesterday: "Wczoraj",
+				last7: "Ostatnie 7 dni",
+				last30: "Ostatnie 30 dni",
+				thisMonth: "Ten miesiąc",
+				lastMonth: "Poprzedni miesiąc",
+			};
+		case "da":
+			return {
+				any: "Alle",
+				today: "I dag",
+				yesterday: "I går",
+				last7: "Seneste 7 dage",
+				last30: "Seneste 30 dage",
+				thisMonth: "Denne måned",
+				lastMonth: "Sidste måned",
+			};
+		case "fi":
+			return {
+				any: "Kaikki",
+				today: "Tänään",
+				yesterday: "Eilen",
+				last7: "Viimeiset 7 päivää",
+				last30: "Viimeiset 30 päivää",
+				thisMonth: "Tämä kuukausi",
+				lastMonth: "Edellinen kuukausi",
+			};
+		case "no":
+			return {
+				any: "Alle",
+				today: "I dag",
+				yesterday: "I går",
+				last7: "Siste 7 dager",
+				last30: "Siste 30 dager",
+				thisMonth: "Denne måneden",
+				lastMonth: "Forrige måned",
+			};
+		case "cs":
+			return {
+				any: "Libovolný",
+				today: "Dnes",
+				yesterday: "Včera",
+				last7: "Posledních 7 dní",
+				last30: "Posledních 30 dní",
+				thisMonth: "Tento měsíc",
+				lastMonth: "Minulý měsíc",
+			};
+		default:
+		case "en":
+			return {
+				any: "Any",
+				today: "Today",
+				yesterday: "Yesterday",
+				last7: "Last 7 days",
+				last30: "Last 30 days",
+				thisMonth: "This month",
+				lastMonth: "Last month",
+			};
+	}
+}
+
+/**
+ * @private
+ * @return {DatePresets}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[selectElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=query]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function updateOptions() {
+	const labels = this.getOption("labels");
+	const currentValue = this[selectElementSymbol].value;
+	const presets = buildPresets(labels);
+
+	this[selectElementSymbol].innerHTML = "";
+
+	for (const preset of presets) {
+		const option = document.createElement("option");
+		option.value = preset.value;
+		option.textContent = preset.label;
+		this[selectElementSymbol].append(option);
+	}
+
+	if (currentValue) {
+		this[selectElementSymbol].value = currentValue;
+	}
+}
+
+/**
+ * @private
+ * @param {Object} labels
+ * @return {Array<{label: string, value: string}>}
+ */
+function buildPresets(labels) {
+	const today = new Date();
+	const todayString = formatDate(today);
+	const yesterday = formatDate(addDays(today, -1));
+	const last7 = buildRange(addDays(today, -6), today);
+	const last30 = buildRange(addDays(today, -29), today);
+	const thisMonthStart = new Date(today.getFullYear(), today.getMonth(), 1);
+	const thisMonthEnd = new Date(today.getFullYear(), today.getMonth() + 1, 0);
+	const lastMonthStart = new Date(today.getFullYear(), today.getMonth() - 1, 1);
+	const lastMonthEnd = new Date(today.getFullYear(), today.getMonth(), 0);
+
+	return [
+		{ label: labels.any, value: "" },
+		{ label: labels.today, value: todayString },
+		{ label: labels.yesterday, value: yesterday },
+		{ label: labels.last7, value: last7 },
+		{ label: labels.last30, value: last30 },
+		{ label: labels.thisMonth, value: buildRange(thisMonthStart, thisMonthEnd) },
+		{ label: labels.lastMonth, value: buildRange(lastMonthStart, lastMonthEnd) },
+	];
+}
+
+/**
+ * @private
+ * @param {Date} date
+ * @return {string}
+ */
+function formatDate(date) {
+	const year = date.getFullYear();
+	const month = String(date.getMonth() + 1).padStart(2, "0");
+	const day = String(date.getDate()).padStart(2, "0");
+	return `${year}-${month}-${day}`;
+}
+
+/**
+ * @private
+ * @param {Date} from
+ * @param {Date} to
+ * @return {string}
+ */
+function buildRange(from, to) {
+	return `${formatDate(from)} - ${formatDate(to)}`;
+}
+
+/**
+ * @private
+ * @param {Date} date
+ * @param {number} amount
+ * @return {Date}
+ */
+function addDays(date, amount) {
+	const d = new Date(date);
+	d.setDate(d.getDate() + amount);
+	return d;
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+            <select name="query" data-monster-role="query" data-monster-attributes="value path:query"></select>
+        </div>
+    `;
+}
+
+registerCustomElement(DatePresets);

package/source/components/datatable/filter/date-time.mjs

@@ -0,0 +1,145 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../../dom/customelement.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+import { AbstractBase } from "./abstract-base.mjs";
+
+export { DateTimeFilter };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputElementSymbol = Symbol("inputElement");
+
+/**
+ * The Filter component is used to show and handle the filter values.
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterDateTime component is used to show and handle datetime values.
+ */
+class DateTimeFilter extends AbstractBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter/date-time@@instance");
+	}
+
+	/**
+	 * 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} datasource The datasource
+	 * @property {boolean} autoLoad If true, the datasource is called immediately after the control is created.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-date-time";
+	}
+
+	/**
+	 *
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return Array<CSSStyleSheet>
+	 */
+	static getCSSStyleSheet() {
+		return [FilterControlsDefaultsStyleSheet, FilterStyleSheet];
+	}
+
+	/**
+	 * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+	 *
+	 * @param {*} value
+	 */
+	set value(value) {
+		this[inputElementSymbol].value = value;
+	}
+
+	/**
+	 * @return {*}
+	 */
+	get value() {
+		return this[inputElementSymbol].value;
+	}
+}
+
+/**
+ * @private
+ * @return {DateTimeFilter}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[inputElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=query]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+            <input type="datetime-local" name="query" data-monster-role="query" data-monster-attributes="value path:query">
+        </div>
+    `;
+}
+
+registerCustomElement(DateTimeFilter);

package/source/components/datatable/filter/date.mjs

@@ -0,0 +1,145 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../../dom/customelement.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+import { AbstractBase } from "./abstract-base.mjs";
+
+export { DateFilter };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputElementSymbol = Symbol("inputElement");
+
+/**
+ * The Filter component is used to show and handle the filter values.
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterDate component is used to show and handle date values.
+ */
+class DateFilter extends AbstractBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter/date@@instance");
+	}
+
+	/**
+	 * 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} datasource The datasource
+	 * @property {boolean} autoLoad If true, the datasource is called immediately after the control is created.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-date";
+	}
+
+	/**
+	 *
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return Array<CSSStyleSheet>
+	 */
+	static getCSSStyleSheet() {
+		return [FilterControlsDefaultsStyleSheet, FilterStyleSheet];
+	}
+
+	/**
+	 * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+	 *
+	 * @param {*} value
+	 */
+	set value(value) {
+		this[inputElementSymbol].value = value;
+	}
+
+	/**
+	 * @return {*}
+	 */
+	get value() {
+		return this[inputElementSymbol].value;
+	}
+}
+
+/**
+ * @private
+ * @return {DateFilter}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[inputElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=query]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+            <input type="date" name="query" data-monster-role="query" data-monster-attributes="value path:query">
+        </div>
+    `;
+}
+
+registerCustomElement(DateFilter);

package/source/components/datatable/filter/text-operator.mjs

@@ -0,0 +1,380 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../../dom/customelement.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+import { AbstractBase } from "./abstract-base.mjs";
+import { getLocaleOfDocument } from "../../../dom/locale.mjs";
+import "../../form/input-group.mjs";
+
+export { TextOperator };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const operatorElementSymbol = Symbol("operatorElement");
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputElementSymbol = Symbol("inputElement");
+
+/**
+ * The Filter component is used to show and handle the filter values.
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterTextOperator component combines operator and query input.
+ */
+class TextOperator extends AbstractBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter/text-operator@@instance");
+	}
+
+	/**
+	 * 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 Text labels
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: getTranslations(),
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-text-operator";
+	}
+
+	/**
+	 *
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		updateOptions.call(this);
+	}
+
+	/**
+	 * @return Array<CSSStyleSheet>
+	 */
+	static getCSSStyleSheet() {
+		return [FilterControlsDefaultsStyleSheet, FilterStyleSheet];
+	}
+
+	/**
+	 * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+	 *
+	 * @param {*} value
+	 */
+	set value(value) {
+		const parsed = parseValue(value);
+		this[operatorElementSymbol].value = parsed.operator;
+		this[inputElementSymbol].value = parsed.query;
+	}
+
+	/**
+	 * @return {*}
+	 */
+	get value() {
+		const query = `${this[inputElementSymbol].value || ""}`.trim();
+		if (!query) {
+			return "";
+		}
+		return `${this[operatorElementSymbol].value}${query}`;
+	}
+}
+
+/**
+ * @private
+ * @returns {Object}
+ */
+function getTranslations() {
+	const locale = getLocaleOfDocument();
+	switch (locale.language) {
+		case "de":
+			return {
+				contains: "Enthält",
+				equals: "Gleich",
+				notEqual: "Ungleich",
+				startsWith: "Beginnt mit",
+				endsWith: "Endet mit",
+			};
+		case "es":
+			return {
+				contains: "Contiene",
+				equals: "Igual",
+				notEqual: "Distinto",
+				startsWith: "Empieza con",
+				endsWith: "Termina con",
+			};
+		case "zh":
+			return {
+				contains: "包含",
+				equals: "等于",
+				notEqual: "不等于",
+				startsWith: "开头为",
+				endsWith: "结尾为",
+			};
+		case "hi":
+			return {
+				contains: "शामिल है",
+				equals: "समान",
+				notEqual: "समान नहीं",
+				startsWith: "से शुरू",
+				endsWith: "पर समाप्त",
+			};
+		case "bn":
+			return {
+				contains: "অন্তর্ভুক্ত",
+				equals: "সমান",
+				notEqual: "সমান নয়",
+				startsWith: "দিয়ে শুরু",
+				endsWith: "দিয়ে শেষ",
+			};
+		case "pt":
+			return {
+				contains: "Contém",
+				equals: "Igual",
+				notEqual: "Diferente",
+				startsWith: "Começa com",
+				endsWith: "Termina com",
+			};
+		case "ru":
+			return {
+				contains: "Содержит",
+				equals: "Равно",
+				notEqual: "Не равно",
+				startsWith: "Начинается с",
+				endsWith: "Заканчивается на",
+			};
+		case "ja":
+			return {
+				contains: "含む",
+				equals: "等しい",
+				notEqual: "等しくない",
+				startsWith: "で始まる",
+				endsWith: "で終わる",
+			};
+		case "pa":
+			return {
+				contains: "ਸ਼ਾਮਲ ਹੈ",
+				equals: "ਬਰਾਬਰ",
+				notEqual: "ਬਰਾਬਰ ਨਹੀਂ",
+				startsWith: "ਨਾਲ ਸ਼ੁਰੂ",
+				endsWith: "ਨਾਲ ਖਤਮ",
+			};
+		case "mr":
+			return {
+				contains: "समाविष्ट",
+				equals: "समान",
+				notEqual: "समान नाही",
+				startsWith: "ने सुरू",
+				endsWith: "ने समाप्त",
+			};
+		case "fr":
+			return {
+				contains: "Contient",
+				equals: "Égal",
+				notEqual: "Différent",
+				startsWith: "Commence par",
+				endsWith: "Se termine par",
+			};
+		case "it":
+			return {
+				contains: "Contiene",
+				equals: "Uguale",
+				notEqual: "Diverso",
+				startsWith: "Inizia con",
+				endsWith: "Finisce con",
+			};
+		case "nl":
+			return {
+				contains: "Bevat",
+				equals: "Gelijk",
+				notEqual: "Niet gelijk",
+				startsWith: "Begint met",
+				endsWith: "Eindigt met",
+			};
+		case "sv":
+			return {
+				contains: "Innehåller",
+				equals: "Lika med",
+				notEqual: "Inte lika",
+				startsWith: "Börjar med",
+				endsWith: "Slutar med",
+			};
+		case "pl":
+			return {
+				contains: "Zawiera",
+				equals: "Równe",
+				notEqual: "Nie równe",
+				startsWith: "Zaczyna się od",
+				endsWith: "Kończy się na",
+			};
+		case "da":
+			return {
+				contains: "Indeholder",
+				equals: "Lig med",
+				notEqual: "Ikke lig med",
+				startsWith: "Starter med",
+				endsWith: "Slutter med",
+			};
+		case "fi":
+			return {
+				contains: "Sisältää",
+				equals: "Yhtä kuin",
+				notEqual: "Ei yhtä kuin",
+				startsWith: "Alkaa",
+				endsWith: "Päättyy",
+			};
+		case "no":
+			return {
+				contains: "Inneholder",
+				equals: "Lik",
+				notEqual: "Ikke lik",
+				startsWith: "Starter med",
+				endsWith: "Slutter med",
+			};
+		case "cs":
+			return {
+				contains: "Obsahuje",
+				equals: "Rovno",
+				notEqual: "Nerovno",
+				startsWith: "Začíná na",
+				endsWith: "Končí na",
+			};
+		default:
+		case "en":
+			return {
+				contains: "Contains",
+				equals: "Equals",
+				notEqual: "Not equal",
+				startsWith: "Starts with",
+				endsWith: "Ends with",
+			};
+	}
+}
+
+/**
+ * @private
+ * @return {TextOperator}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[operatorElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=operator]",
+	);
+	this[inputElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=query]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ * @return {void}
+ */
+function updateOptions() {
+	const labels = this.getOption("labels");
+	const currentValue = this[operatorElementSymbol].value;
+
+	const operators = [
+		{ value: ":", label: labels.contains },
+		{ value: "=", label: labels.equals },
+		{ value: "!=", label: labels.notEqual },
+		{ value: "^=", label: labels.startsWith },
+		{ value: "$=", label: labels.endsWith },
+	];
+
+	this[operatorElementSymbol].innerHTML = "";
+	for (const operator of operators) {
+		const option = document.createElement("option");
+		option.value = operator.value;
+		option.textContent = operator.label;
+		this[operatorElementSymbol].append(option);
+	}
+
+	if (currentValue) {
+		this[operatorElementSymbol].value = currentValue;
+	}
+}
+
+/**
+ * @private
+ * @param {string} value
+ * @return {{operator: string, query: string}}
+ */
+function parseValue(value) {
+	if (!value) {
+		return { operator: ":", query: "" };
+	}
+
+	const operators = ["!=", "<>", "^=", "$=", "=", ":"];
+	for (const op of operators) {
+		if (value.startsWith(op)) {
+			return { operator: op === "<>" ? "!=" : op, query: value.slice(op.length) };
+		}
+	}
+
+	return { operator: ":", query: value };
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+            <monster-input-group>
+                <select slot="prefix" data-monster-role="operator" name="operator"></select>
+                <input type="search" data-monster-role="query" name="query" data-monster-attributes="value path:query">
+            </monster-input-group>
+        </div>
+    `;
+}
+
+registerCustomElement(TextOperator);

package/source/components/datatable/filter/time.mjs

@@ -0,0 +1,145 @@
+/**
+ * Copyright © Volker Schukai and all contributing authors, {{copyRightYear}}. All rights reserved.
+ * Node module: @schukai/monster
+ *
+ * This source code is licensed under the GNU Affero General Public License version 3 (AGPLv3).
+ * The full text of the license can be found at: https://www.gnu.org/licenses/agpl-3.0.en.html
+ *
+ * For those who do not wish to adhere to the AGPLv3, a commercial license is available.
+ * Acquiring a commercial license allows you to use this software without complying with the AGPLv3 terms.
+ * For more information about purchasing a commercial license, please contact Volker Schukai.
+ *
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../../dom/customelement.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+import { AbstractBase } from "./abstract-base.mjs";
+
+export { TimeFilter };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputElementSymbol = Symbol("inputElement");
+
+/**
+ * The Filter component is used to show and handle the filter values.
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterTime component is used to show and handle time values.
+ */
+class TimeFilter extends AbstractBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter/time@@instance");
+	}
+
+	/**
+	 * 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} datasource The datasource
+	 * @property {boolean} autoLoad If true, the datasource is called immediately after the control is created.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-time";
+	}
+
+	/**
+	 *
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return Array<CSSStyleSheet>
+	 */
+	static getCSSStyleSheet() {
+		return [FilterControlsDefaultsStyleSheet, FilterStyleSheet];
+	}
+
+	/**
+	 * This is a method of [internal api](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals)
+	 *
+	 * @param {*} value
+	 */
+	set value(value) {
+		this[inputElementSymbol].value = value;
+	}
+
+	/**
+	 * @return {*}
+	 */
+	get value() {
+		return this[inputElementSymbol].value;
+	}
+}
+
+/**
+ * @private
+ * @return {TimeFilter}
+ */
+function initControlReferences() {
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[inputElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=query]",
+	);
+	return this;
+}
+
+/**
+ * @private
+ */
+function initEventHandler() {}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <slot></slot>
+            <input type="time" name="query" data-monster-role="query" data-monster-attributes="value path:query">
+        </div>
+    `;
+}
+
+registerCustomElement(TimeFilter);

package/source/components/datatable/stylesheet/filter-controls-defaults.mjs

@@ -25,7 +25,7 @@ try {
 	FilterControlsDefaultsStyleSheet.insertRule(
 		`
 @layer filtercontrolsdefaults { 
-[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}:host{height:100%;width:100%}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}:is(div[data-monster-role=control] .form-container) .form-group{margin-bottom:.2rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]{text-align:right;width:5rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-inner-spin-button,:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-outer-spin-button{margin-left:10px}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute} 
+[data-monster-role=control]{box-sizing:border-box;outline:none;width:100%}[data-monster-role=control].flex{align-items:center;display:flex;flex-direction:row}:host{box-sizing:border-box;display:block}div[data-monster-role=popper]{align-content:center;background:var(--monster-bg-color-primary-1);border-color:var(--monster-bg-color-primary-4);border-radius:var(--monster-border-radius);border-style:var(--monster-border-style);border-width:var(--monster-border-width);box-shadow:var(--monster-box-shadow-1);box-sizing:border-box;color:var(--monster-color-primary-1);display:none;justify-content:space-between;left:0;padding:1.1em;position:absolute;top:0;width:-moz-max-content;width:max-content;z-index:var(--monster-z-index-modal)}div[data-monster-role=popper] div[data-monster-role=arrow]{background:var(--monster-bg-color-primary-1);height:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);pointer-events:none;position:absolute;width:calc(max(var(--monster-popper-witharrrow-distance), -1 * var(--monster-popper-witharrrow-distance))*2);z-index:-1}input,meter,progress,select,textarea{accent-color:var(--monster-color-secondary-2);background-color:var(--monster-bg-color-primary-1);border-color:var(--monster-theme-control-border-color);border-radius:var(--monster-theme-control-border-radius);border-style:var(--monster-theme-control-border-style);border-width:var(--monster-theme-control-border-width);box-sizing:border-box;color:var(--monster-color-primary-1);font-family:inherit;font-size:100%;margin:0;outline:none}input,select,textarea{height:-moz-fit-content;height:fit-content;padding:.4rem .6rem}textarea{min-height:6rem;resize:vertical}input[type=color]{height:2rem;margin:0;padding:.1rem;width:2rem}input:hover:not([type=radio]):not([type=checkbox]):not([type=range]),select:hover,textarea:hover{box-shadow:var(--monster-box-shadow-2);transition:background .8s,color .25s .0833333333s}input:focus,select:focus,textarea:focus{outline:1px dashed var(--monster-color-selection-3);outline-offset:3px}:host{height:100%;width:100%}div[data-monster-role=control]{display:flex;height:100%;position:relative}div[data-monster-role=control] .form-container{margin:0 auto;max-width:600px}:is(div[data-monster-role=control] .form-container) .form-group{margin-bottom:.2rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]{text-align:right;width:5rem}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-inner-spin-button,:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=number]::-webkit-outer-spin-button{margin-left:10px}:is(:is(div[data-monster-role=control] .form-container) .form-group) input[type=radio]{accent-color:var(--monster-bg-color-primary-3)}[data-monster-role=popper]{position:absolute}@media (prefers-color-scheme:dark){input[type=date],input[type=time],input[type=datetime-local]{color-scheme:dark}input[type=date]::-webkit-calendar-picker-indicator,input[type=time]::-webkit-calendar-picker-indicator,input[type=datetime-local]::-webkit-calendar-picker-indicator{-webkit-filter:invert(1)!important;filter:invert(1)!important;opacity:.85}} 
 }`,
 		0,
 	);

package/source/monster.mjs

@@ -89,7 +89,12 @@ export * from "./components/host/call-button.mjs";
 export * from "./components/host/details.mjs";
 export * from "./components/host/constants.mjs";
 export * from "./components/datatable/filter/input.mjs";
+export * from "./components/datatable/filter/date.mjs";
+export * from "./components/datatable/filter/date-presets.mjs";
 export * from "./components/datatable/filter/date-range.mjs";
+export * from "./components/datatable/filter/date-time.mjs";
+export * from "./components/datatable/filter/time.mjs";
+export * from "./components/datatable/filter/text-operator.mjs";
 export * from "./components/datatable/filter/abstract-base.mjs";
 export * from "./components/datatable/filter/settings.mjs";
 export * from "./components/datatable/filter/range.mjs";