@schukai/monster 3.51.4 → 3.52.0

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

@@ -0,0 +1,65 @@
+/**
+ * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
+ * Node module: @schukai/component-form
+ * This file is licensed under the AGPLv3 License.
+ * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
+ */
+
+import { registerCustomElement } from "../../../dom/customelement.mjs";
+import { getSummaryTemplate, Select } from "../../form/select.mjs";
+import { SelectFilterStyleSheet } from "../stylesheet/select-filter.mjs";
+
+/**
+ * This is a filter select for the datatable filter.
+ *
+ * <img src="./images/filter-select.png">
+ *
+ * @startuml filter-select.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Select
+ * Select <|-- FilterSelect
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable.Filter
+ * @summary A filter select for the datatable filter
+
+ */
+class FilterSelect extends Select {
+	/**
+	 * 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.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			type: "checkbox",
+			templateMapping: {
+				selected: getSummaryTemplate(),
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-filter-select";
+	}
+
+	/**
+	 *
+	 * @return [CSSStyleSheet]}
+	 */
+	static getCSSStyleSheet() {
+		const styleSheet = super.getCSSStyleSheet();
+		return [...styleSheet, SelectFilterStyleSheet];
+	}
+}
+
+registerCustomElement(FilterSelect);

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

@@ -0,0 +1,116 @@
+import { Base } from "../../../types/base.mjs";
+import { equipWithInternal } from "../../../types/internal.mjs";
+
+export { Settings };
+
+/**
+ * This class is used to manage the settings of the filter.
+ *
+ * @memberOf Monster.Components.Datatable.Filter
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable.Filter
+ * @summary A class to manage the settings
+ */
+class Settings extends Base {
+	constructor() {
+		super();;
+
+		/**
+		 * - attachInternalObserver
+		 * - detachInternalObserver
+		 * - containsInternalObserver
+		 * - setInternal
+		 * - setInternals
+		 * - getInternal
+		 */
+		equipWithInternal.call(this);
+	}
+
+	/**
+	 *
+	 * @param value
+	 * @returns {*}
+	 */
+	get(value) {;
+		return this.getInternal("option." + value);
+	}
+
+	/**
+	 * value = "id"
+	 *
+	 * @param value
+	 * @param label
+	 * @param visible
+	 * @returns {Settings}
+	 */
+	set({ value, label, visible = true }) {;
+
+		let d = this.getInternal("option." + value);
+		if (d) {
+			if (d.label !== label && label) {
+				d.label = label;
+			}
+
+			if (d.visible !== visible && visible !== undefined) {
+				d.visible = visible;
+			}
+		} else {
+			d = {
+				value,
+				label,
+				visible,
+			};
+		}
+
+		this.setInternal("option." + value, d);
+		return this;
+	}
+
+	/**
+	 *
+	 * @returns {Array}
+	 */
+	getOptions() {;
+		const option = this.getInternal("option");
+
+		const options = [];
+		for (const key in option) {
+			options.push({
+				label: option[key].label,
+				value: option[key].value,
+				visible: option[key].visible,
+			});
+		}
+
+		return options;
+	}
+
+	/**
+	 *
+	 * @param options
+	 * @returns {Settings}
+	 */
+	setOptions(options) {;
+		for (const key in options) {
+			this.set(options[key]);
+		}
+		return this;
+	}
+
+	/**
+	 *
+	 * @returns {Array}
+	 */
+	getSelected() {;
+		const option = this.getInternal("option");
+
+		const selectedValues = [];
+		for (const key in option) {
+			if (option[key].visible) {
+				selectedValues.push(option[key].value);
+			}
+		}
+
+		return selectedValues;
+	}
+}

package/source/components/datatable/filter-button.mjs

@@ -0,0 +1,98 @@
+/**
+ * Copyright 2023 schukai GmbH
+ * SPDX-License-Identifier: AGPL-3.0
+ */
+
+import { instanceSymbol } from "../../constants.mjs";
+import { registerCustomElement } from "../../dom/customelement.mjs";
+import { FilterButtonStyleSheet } from "./stylesheet/filter-button.mjs";
+import { ToggleButton } from "../host/toggle-button.mjs";
+
+export { FilterButton };
+
+/**
+ * The Filter Button component is used to show and handle the filter values.
+ *
+ * <img src="./images/filter-button.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-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-filter-button');` method.
+ *
+ * ```html
+ * <monster-datatable-filter-button></monster-datatable-filter-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import '@schukai/component-datatable/source/filter.mjs';
+ * document.createElement('monster-datatable-filter-button');
+ * ```
+ *
+ * The Body should have a class "hidden" to ensure that the styles are applied correctly.
+ *
+ * ```css
+ * body.hidden {
+ *    visibility: hidden;
+ * }
+ * ```
+ *
+ * @startuml filter-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- ToggleButton
+ * ToggleButton <|-- FilterButton
+ * @enduml
+ *
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Datatable
+ * @summary A data set
+ */
+class FilterButton extends ToggleButton {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/filter-button@@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
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			labels: {
+				button: "Filter",
+			},
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-datatable-filter-button";
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	static getCSSStyleSheet() {
+		const styles = super.getCSSStyleSheet();
+		styles.push(FilterButtonStyleSheet);
+		return styles;
+	}
+}
+
+registerCustomElement(FilterButton);