state-button.mjs

/**
 * Copyright schukai GmbH and contributors 2023. All Rights Reserved.
 * Node module: @schukai/monster
 * This file is licensed under the AGPLv3 License.
 * License text available at https://www.gnu.org/licenses/agpl-3.0.en.html
 */
import { instanceSymbol } from "../../constants.mjs";
import { registerCustomElement } from "../../dom/customelement.mjs";
import { isInteger } from "../../types/is.mjs";
import { validateInstance, validateString } from "../../types/validate.mjs";
import { Button } from "./button.mjs";
import { StateButtonStyleSheet } from "./stylesheet/state-button.mjs";
import { getStateInstanceFor, State } from "./types/state.mjs";

export { StateButton };

/**
 * This CustomControl creates a button element with a variety of options.
 *
 * <img src="./images/state-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-state-button />` directly in the HTML or using
 * Javascript via the `document.createElement('monster-state-button');` method.
 *
 * ```html
 * <monster-state-button></monster-state-button>
 * ```
 *
 * Or you can create this CustomControl directly in Javascript:
 *
 * ```js
 * import {StateButton} from '@schukai/component-form/source/state-button.js';
 * document.createElement('monster-state-button');
 * ```
 *
 * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
 *
 * @startuml state-button.png
 * skinparam monochrome true
 * skinparam shadowing false
 * HTMLElement <|-- CustomElement
 * CustomElement <|-- CustomControl
 * CustomControl <|-- Button
 * Button <|-- StateButton
 * @enduml
 *
 * @since 1.5.0
 * @copyright schukai GmbH
 * @memberOf Monster.Components.Form
 * @summary A state button with icons
 */
class StateButton extends Button {
	/**
	 * This method is called by the `instanceof` operator.
	 * @returns {symbol}
	 * @since 2.1.0
	 */
	static get [instanceSymbol]() {
		return Symbol.for(
			"@schukai/monster/components/form/state-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.