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

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

/**
 * 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 { registerCustomElement } from "../../../dom/customelement.mjs";
import { getSummaryTemplate, Select } from "../../form/select.mjs";
import { FilterControlsDefaultsStyleSheet } from "../stylesheet/filter-controls-defaults.mjs";
import { FilterSelectStyleSheet } from "../stylesheet/filter-select.mjs";

export { FilterSelect, getSummaryTemplate };

/**
 * 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 Volker Schukai
 * @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",
		});
	}

	/**
	 *
	 * @return {string}
	 */
	static getTag() {
		return "monster-filter-select";
	}

	/**
	 * @return {CSSStyleSheet[]}
	 */
	static getCSSStyleSheet() {
		const styleSheet = super.getCSSStyleSheet();
		return [
			...styleSheet,
			FilterControlsDefaultsStyleSheet,
			FilterSelectStyleSheet,
		];
	}
}

registerCustomElement(FilterSelect);