@schukai/monster/source/components/state/state.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 { CustomControl } from "../../dom/customcontrol.mjs";
import {
	assembleMethodSymbol,
	registerCustomElement,
} from "../../dom/customelement.mjs";
import { StateStyleSheet } from "./stylesheet/state.mjs";

export { State };

/**
 * A state component
 *
 * @fragments /fragments/components/state/state
 *
 * @example /examples/components/state/state-simple State
 *
 * @since 1.5.0
 * @copyright schukai GmbH
 * @summary States tell users that there’s a state. That's it!
 * @summary The state control is used in the log control, among other things.
 **/
class State extends CustomControl {
	/**
	 * @return {void}
	 */
	[assembleMethodSymbol]() {
		super[assembleMethodSymbol]();
	}

	/**
	 * This method is called by the `instanceof` operator.
	 * @return {symbol}
	 */
	static get [instanceSymbol]() {
		return Symbol.for("@schukai/monster/components/state/state@@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} content
	 * @property {string} content.visual Visual content
	 * @property {string} content.content Content
	 * @property {string} content.action Action
	 */
	get defaults() {
		return Object.assign({}, super.defaults, {
			templates: {
				main: getTemplate(),
			},
			content: {
				visual: '<slot name="visual"></slot>',
				content: "<slot></slot>",
				action: '<slot name="action"></slot>',
			},
		});
	}

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

	/**
	 * @return {CSSStyleSheet[]}
	 */
	static getCSSStyleSheet() {
		return [StateStyleSheet];
	}
}

/**
 * @private
 * @return {string}
 */
function getTemplate() {
	// language=HTML
	return `
        <div part="control">
            <div part="visual" data-monster-replace="path:content.visual"></div>
            <div part="content" data-monster-replace="path:content.content"></div>
            <div part="action" data-monster-replace="path:content.action"></div>
        </div>
    `;
}

registerCustomElement(State);