@schukai/monster 4.66.2 → 4.68.0

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

@@ -0,0 +1,148 @@
+/**
+ * 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 { CustomControl } from "../../../dom/customcontrol.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+
+export { DateFilter };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputElementSymbol = Symbol("inputElement");
+
+/**
+ * The FilterDate component is used to filter by a single date.
+ *
+ * @fragments /fragments/components/datatable/filter/date
+ *
+ * @example /examples/components/datatable/filter-controls Filter controls
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterDate component is used to show and handle date values.
+ */
+class DateFilter extends CustomControl {
+	/**
+	 * 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,389 @@
+/**
+ * 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 { CustomControl } from "../../../dom/customcontrol.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.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 FilterTextOperator component combines operator and input fields for text filters.
+ *
+ * @fragments /fragments/components/datatable/filter/text-operator
+ *
+ * @example /examples/components/datatable/filter-controls Filter controls
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterTextOperator component combines operator and query input.
+ */
+class TextOperator extends CustomControl {
+	/**
+	 * 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,148 @@
+/**
+ * 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 { CustomControl } from "../../../dom/customcontrol.mjs";
+import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+
+export { TimeFilter };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputElementSymbol = Symbol("inputElement");
+
+/**
+ * The FilterTime component is used to filter by a time value.
+ *
+ * @fragments /fragments/components/datatable/filter/time
+ *
+ * @example /examples/components/datatable/filter-controls Filter controls
+ *
+ * @copyright Volker Schukai
+ * @summary The FilterTime component is used to show and handle time values.
+ */
+class TimeFilter extends CustomControl {
+	/**
+	 * 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,
 	);