@schukai/monster/source/components/datatable/filter/input.mjs

Monster is a simple library for creating fast, robust and lightweight websites.

/**
 * Copyright © schukai GmbH 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 schukai GmbH.
 *
 * 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";
import { getLocaleOfDocument } from "../../../dom/locale.mjs";

export { Input };

/**
 * local symbol
 * @private
 * @type {symbol}
 */
const inputElementSymbol = Symbol("inputElement");

/**
 * The Filter component is used to show and handle the filter values.
 *
 * @copyright schukai GmbH
 * @summary The FilterInput component is used to show and handle the filter values.
 */
class Input extends AbstractBase {
	/**
	 * This method is called by the `instanceof` operator.
	 * @return {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: getTranslations(),
		});
	}

	/**
	 *
	 * @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 [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
 * @returns {{filter: string}}
 */
function getTranslations() {
	const locale = getLocaleOfDocument();
	switch (locale.language) {
		case "de":
			return {
				filter: "Filter",
			};
		case "fr":
			return {
				filter: "Filtre",
			};
		case "sp":
			return {
				filter: "Filtro",
			};
		case "it":
			return {
				filter: "Filtro",
			};
		case "pl":
			return {
				filter: "Filtr",
			};
		case "no":
			return {
				filter: "Filter",
			};
		case "dk":
			return {
				filter: "Filter",
			};
		case "sw":
			return {
				filter: "Filter",
			};
		default:
		case "en":
			return {
				filter: "Filter",
			};
	}
}

/**
 * @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);