@schukai/monster 3.51.5 → 3.52.0

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

@@ -0,0 +1,175 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../../constants.mjs";
+import {
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
+} from "../../../dom/customelement.mjs";
+import { FilterStyleSheet } from "../stylesheet/filter.mjs";
+import { AbstractBase } from "./abstract-base.mjs";
+
+export { Input };
+
+/**
+ * local symbol
+ * @private
+ * @type {symbol}
+ */
+const inputElementSymbol = Symbol("inputElement");
+
+/**
+ * The Filter component is used to show and handle the filter values.
+ *
+ * <img src="./images/filter-inpu-input.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ *
+ * You can create this control either by specifying the HTML tag <monster-filter />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-filter');` method.
+ *
+ * ```html
+ * <monster-datatable-filter></monster-datatable-filter>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-datatable/source/filter.mjs';
+ * document.createElement('monster-datatable-filter');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml filter-input.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- AbstractBase
+ * AbstractBase <|-- Input
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable.Filter
+ * @summary A data set
+ */
+class Input extends AbstractBase {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter/input@@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(),
+			},
+			labels: {
+				filter: "Filter",
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-input";
+	}
+
+	/**
+	 *
+	 * @return {FilterButton}
+	 */
+	[assembleMethodSymbol]() {;
+		super[assembleMethodSymbol]();
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * @return Array<CSSStyleSheet>
+	 */
+	static getCSSStyleSheet() {
+		return [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;
+	}
+
+	/**
+	 * @returns {*}
+	 */
+	get value() {
+		return this[inputElementSymbol].value;
+	}
+}
+
+/**
+ * @private
+ * @return {FilterButton}
+ */
+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="search" name="query" data-monster-role="query" data-monster-attributes="value path:query">
+        </div>
+    `;
+}
+
+registerCustomElement(Input);

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

@@ -0,0 +1,13 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+/**
+ * Namespace for all datatable related functions.
+ *
+ * @namespace Monster.Components.Datatable.Filter
+ * @memberOf Monster
+ * @author schukai GmbH
+ */
+const ns = {};