@schukai/monster 3.51.4 → 3.52.0

package/source/components/form/button.mjs

@@ -0,0 +1,350 @@
+/**
+ * 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 { addAttributeToken } from "../../dom/attributes.mjs";
+import {
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import {
+	assembleMethodSymbol,
+	attributeObserverSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { isFunction } from "../../types/is.mjs";
+import { ATTRIBUTE_BUTTON_CLASS } from "./constants.mjs";
+import { ButtonStyleSheet } from "./stylesheet/button.mjs";
+import { RippleStyleSheet } from "../stylesheet/ripple.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+import { isString } from "../../types/is.mjs";
+
+export { Button };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+export const buttonElementSymbol = Symbol("buttonElement");
+
+/**
+ * This CustomControl creates a button element with a variety of options.
+ *
+ * <img src="./images/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-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-button');` method.
+ *
+ * ```html
+ * <monster-button></monster-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {Button} from '@schukai/component-form/source/button.js';
+ * document.createElement('monster-button');
+ * ```
+ *
+ * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
+ *
+ * @externalExample ../../../example/components/form/button.mjs
+ * @startuml button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Button
+ * @enduml
+ *
+ * @since 1.5.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A simple button
+ */
+class Button extends CustomControl {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-form/button@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.Button}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();;
+		initControlReferences.call(this);
+		initEventhandler.call(this);
+		return this;
+	}
+
+	/**
+	 * The Button.click() method simulates a click on the internal button element.
+	 *
+	 * @since 3.27.0
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/click}
+	 */
+	click() {
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		if (
+			this[buttonElementSymbol] &&
+			isFunction(this[buttonElementSymbol].click)
+		) {
+			this[buttonElementSymbol].click();
+		}
+	}
+
+	/**
+	 * The Button.focus() method sets focus on the internal button element.
+	 *
+	 * @since 3.27.0
+	 * @param {Object} options
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus}
+	 */
+	focus(options) {
+		if (this.getOption("disabled") === true) {
+			return;
+		}
+
+		if (
+			this[buttonElementSymbol] &&
+			isFunction(this[buttonElementSymbol].focus)
+		) {
+			this[buttonElementSymbol].focus(options);
+		}
+	}
+
+	/**
+	 * The Button.blur() method removes focus from the internal button element.
+	 */
+	blur() {
+		if (
+			this[buttonElementSymbol] &&
+			isFunction(this[buttonElementSymbol].blur)
+		) {
+			this[buttonElementSymbol].blur();
+		}
+	}
+
+	/**
+	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+	 *
+	 * @return {string[]}
+	 */
+	static get observedAttributes() {
+		const attributes = super.observedAttributes;
+		attributes.push(ATTRIBUTE_BUTTON_CLASS);
+		return attributes;
+	}
+
+	/**
+	 * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/attachInternals}
+	 * @return {boolean}
+	 */
+	static get formAssociated() {
+		return true;
+	}
+
+	/**
+	 * The current selection of the Select
+	 *
+	 * ```
+	 * e = document.querySelector('monster-select');
+	 * console.log(e.value)
+	 * // ↦ 1
+	 * // ↦ ['1','2']
+	 * ```
+	 *
+	 * @property {string|array}
+	 */
+	get value() {
+		return this.getOption("value");
+	}
+
+	/**
+	 * Set selection
+	 *
+	 * ```
+	 * e = document.querySelector('monster-select');
+	 * e.value=1
+	 * ```
+	 *
+	 * @property {string|array} value
+	 * @since 1.2.0
+	 * @throws {Error} unsupported type
+	 */
+	set value(value) {
+		this.setOption("value", value);
+		try {
+			this?.setFormValue(this.value);
+		} catch (e) {
+			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
+		}
+	}
+
+	/**
+	 * 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} labels Labels
+	 * @property {string} labels.button=<slot></slot> Button label
+	 * @property {Object} actions Callbacks
+	 * @property {string} actions.click="throw Error" Callback when clicked
+	 * @property {Object} classes CSS classes
+	 * @property {string} classes.button="monster-button-primary" CSS class for the button
+	 * @property {boolean} disabled=false Disabled state
+	 * @property {Object} effects Effects
+	 * @property {boolean} effects.ripple=true Ripple effect
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {
+				button: "<slot></slot>",
+			},
+			classes: {
+				button: "monster-button-primary",
+			},
+			disabled: false,
+			actions: {
+				click: (e) => {
+					throw new Error("the click action is not defined");
+				},
+			},
+			effects: {
+				ripple: true,
+			},
+			value: null,
+		});
+	}
+
+	/**
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-button";
+	}
+
+	/**
+	 *
+	 * @return {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [RippleStyleSheet, ButtonStyleSheet];
+	}
+}
+
+/**
+ * @private
+ * @return {initEventhandler}
+ * @fires Monster.Components.Form.event:monster-button-clicked
+ */
+function initEventhandler() {
+	const self = this;
+	const button = this[buttonElementSymbol];
+
+	const type = "click";
+
+	button.addEventListener(type, function (event) {
+		const callback = self.getOption("actions.click");
+
+		fireCustomEvent(self, "monster-button-clicked", {
+			button: self,
+		});
+
+		if (!isFunction(callback)) {
+			return;
+		}
+
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"control",
+		);
+
+		if (!(element instanceof Node && self.hasNode(element))) {
+			return;
+		}
+
+		callback.call(self, event);
+	});
+
+	if (self.getOption("effects.ripple")) {
+		button.addEventListener("click", createRipple.bind(self));
+	}
+
+	// data-monster-options
+	self[attributeObserverSymbol][ATTRIBUTE_BUTTON_CLASS] = function (value) {
+		self.setOption("classes.button", value);
+	};
+
+	return this;
+}
+
+/**
+ * @private
+ */
+function initControlReferences() {
+	this[buttonElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=button]`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+        <div data-monster-role="control" part="control">
+            <button data-monster-attributes="disabled path:disabled | if:true, class path:classes.button"
+                    data-monster-role="button"
+                    part="button"
+                    data-monster-replace="path:labels.button"></button>
+        </div>`;
+}
+
+function createRipple(event) {;
+	const button = this[buttonElementSymbol];
+
+	const circle = document.createElement("span");
+	const diameter = Math.max(button.clientWidth, button.clientHeight);
+	const radius = diameter / 2;
+
+	circle.style.width = circle.style.height = `${diameter}px`;
+	circle.style.left = `${event.clientX - button.offsetLeft - radius}px`;
+	circle.style.top = `${event.clientY - button.offsetTop - radius}px`;
+	circle.classList.add("monster-fx-ripple");
+
+	const ripples = button.getElementsByClassName("monster-fx-ripple");
+	for (const ripple of ripples) {
+		ripple.remove();
+	}
+
+	button.appendChild(circle);
+}
+
+registerCustomElement(Button);

package/source/components/form/confirm-button.mjs

@@ -0,0 +1,330 @@
+/**
+ * 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 { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import {
+	assembleMethodSymbol,
+	registerCustomElement,
+} from "../../dom/customelement.mjs";
+import { typeOf } from "../../types/typeof.mjs";
+import { Button } from "./button.mjs";
+import { PopperButton } from "./popper-button.mjs";
+import { ConfirmButtonStyleSheet } from "./stylesheet/confirm-button.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
+
+import "./button.mjs";
+import "./message-state-button.mjs";
+import { PopperButtonStyleSheet } from "./stylesheet/popper-button.mjs";
+import { StateButtonStyleSheet } from "./stylesheet/state-button.mjs";
+
+export { ConfirmButton };
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const confirmButtonElementSymbol = Symbol("confirmButtonElement");
+
+/**
+ * @private
+ * @type {symbol}
+ */
+const cancelButtonElementSymbol = Symbol("cancelButtonElement");
+
+/**
+ * This action callback executes the actions when a button is clicked.
+ *
+ * @callback Monster.Components.Form~exampleActionCallback
+ * @param {Event} e Event
+ * @memberOf Monster.Components.Form
+ * @this {CustomControl}
+ */
+
+/**
+ * This CustomControl creates a confirm button element with a variety of options.
+ *
+ * <img src="./images/confirm-button.png">
+ *
+ * Dependencies: the system uses functions of the [monsterjs](https://monsterjs.org/) library
+ * as well as [pooperjs](https://popper.js.org/docs/v2/).
+ *
+ * You can create this control either by specifying the HTML tag <monster-confirm-button />` directly in the HTML or using
+ * Javascript via the `document.createElement('monster-confirm-button');` method.
+ *
+ * ```html
+ * <monster-confirm-button></monster-confirm-button>
+ * ```
+ *
+ * Or you can create this CustomControl directly in Javascript:
+ *
+ * ```js
+ * import {ConfirmButton} from '@schukai/component-form/source/confirm-button.js';
+ * document.createElement('monster-confirm-button');
+ * ```
+ * The `data-monster-button-class` attribute can be used to change the CSS class of the button.
+ *
+ * @startuml confirm-button.png
+ * skinparam monochrome true
+ * skinparam shadowing false
+ * HTMLElement <|-- CustomElement
+ * CustomElement <|-- CustomControl
+ * CustomControl <|-- Button
+ * Button <|-- PopperButton
+ * PopperButton <|-- ConfirmButton
+ * @enduml
+ *
+ * @since 1.5.0
+ * @copyright schukai GmbH
+ * @memberOf Monster.Components.Form
+ * @summary A confirm button
+ */
+class ConfirmButton extends PopperButton {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 * @since 2.1.0
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/component-form/confirm-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} toggleEventType=click,touch List of event types to be observed for opening the confirm message
+	 * @property {Object} templates Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {string} labels.button='<slot name="button"></slot>' Button label
+	 * @property {string} labels.message='<slot>Should I Stay or Should I Go?</slot>' Message
+	 * @property {string} labels.confirm='<slot name="confirm">Confirm</slot>' Confirm button label
+	 * @property {string} labels.cancel='<slot name="cancel">Cancel</slot>' Cancel button label
+	 * @property {Monster.Components.Form~exampleActionCallback} actions.confirm
+	 * @property {Monster.Components.Form~exampleActionCallback} actions.cancel List of event types to be observed for opening the dropdown
+	 * @property {Object} popper [PopperJS Options](https://popper.js.org/docs/v2/)
+	 * @property {string} popper.placement=top PopperJS placement
+	 * @extends {PopperButton}
+	 */
+	get defaults() {;
+
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {
+				button: '<slot name="button"></slot>',
+				message: "<slot>Should I Stay or Should I Go?</slot>",
+				confirm: '<slot name="confirm">Confirm</slot>',
+				cancel: '<slot name="cancel">Cancel</slot>',
+			},
+		});
+
+		obj["classes"]["confirmButton"] = "monster-button-primary";
+		obj["classes"]["cancelButton"] = "monster-button-secondary";
+		obj["actions"]["cancel"] = (e) => {
+			this.hideDialog();
+		};
+
+		obj["actions"]["confirm"] = (e) => {
+			throw new Error("this callback must be implemented");
+		};
+
+		return obj;
+	}
+
+	hideDialog() {;
+		super.hideDialog();
+		this[confirmButtonElementSymbol].removeState();
+		return this;
+	}
+
+	/**
+	 *
+	 * @return {Monster.Components.Form.PopperButton}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();;
+		initControlReferences.call(this);
+		initEventhandler.call(this);
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-confirm-button";
+	}
+
+	/**
+	 * @return {Array}
+	 */
+	static getCSSStyleSheet() {
+		const styles = PopperButton.getCSSStyleSheet();
+		styles.push(ConfirmButtonStyleSheet);
+		return styles;
+	}
+
+	/**
+	 *
+	 * @returns {Monster.Components.Form.PopperButton}
+	 */
+	showDialog() {;
+		const confirmButtonClass = this.getOption("classes.confirmButton");
+		if (confirmButtonClass) {
+			this[confirmButtonElementSymbol].setOption(
+				"classes.button",
+				confirmButtonClass,
+			);
+		}
+
+		const cancelButtonClass = this.getOption("classes.cancelButton");
+		if (cancelButtonClass) {
+			this[cancelButtonElementSymbol].setOption(
+				"classes.button",
+				cancelButtonClass,
+			);
+		}
+
+		return super.showDialog();
+	}
+
+	/**
+	 * Set the confirm button state
+	 *
+	 * @param {string} state
+	 * @param {number} timeout
+	 * @returns {Monster.Components.Form.ConfirmButton}
+	 */
+	setConfirmButtonState(state, timeout) {;
+		this[confirmButtonElementSymbol].setState(state, timeout);
+		return this;
+	}
+
+	/**
+	 * Set and show the confirm button message
+	 *
+	 * @param {string} message
+	 * @param {number} timeout
+	 * @returns {Monster.Components.Form.ConfirmButton}
+	 */
+	showConfirmButtonMessage(message, timeout) {;
+		this[confirmButtonElementSymbol].setMessage(message);
+		setTimeout(() => {
+			this[confirmButtonElementSymbol].showMessage(timeout);
+		}, 0);
+		return this;
+	}
+}
+
+/**
+ * @private
+ * @param type
+ * @return {function}
+ */
+function getAction(type) {
+	const self = this;
+
+	return function (event) {;
+
+		const callback = self.getOption(`actions.${type}`);
+		if (typeOf(callback) !== "function") {
+			return;
+		}
+
+		callback.call(this, event);
+	};
+}
+
+/**
+ * @private
+ * @return {initEventhandler}
+ * @fires Monster.Components.Form.PopperButton#monster-confirm
+ * @fires Monster.Components.Form.PopperButton#monster-confirmed
+ */
+function initEventhandler() {;
+
+	this[cancelButtonElementSymbol].setOption(
+		"clickEventType",
+		this.getOption("clickEventType", ["click"]),
+	);
+	this[cancelButtonElementSymbol].setOption(
+		"actions.click",
+		getAction.call(this, "cancel"),
+	);
+
+	this[confirmButtonElementSymbol].setOption(
+		"clickEventType",
+		this.getOption("clickEventType", ["click"]),
+	);
+	this[confirmButtonElementSymbol].setOption("actions.click", () => {
+		const callback = getAction.call(this, "confirm");
+		fireCustomEvent(this, "monster-confirm", {});
+		callback.call(this);
+		fireCustomEvent(this, "monster-confirmed", {});
+	});
+
+	return this;
+}
+
+/**
+ * @private
+ * @return {Select}
+ */
+function initControlReferences() {;
+	this[confirmButtonElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=confirm]`,
+	);
+	this[cancelButtonElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=cancel]`,
+	);
+}
+
+/**
+ * @private
+ * @return {string}
+ */
+function getTemplate() {
+	// language=HTML
+	return `
+
+        <div data-monster-role="control" part="control">
+            <button data-monster-attributes="disabled path:disabled | if:true, class path:classes.button"
+                    data-monster-role="button"
+                    part="button"
+                    data-monster-replace="path:labels.button"></button>
+
+            <div data-monster-role="popper" part="popper" tabindex="-1" class="monster-color-primary-1">
+                <div data-monster-role="arrow"></div>
+                <div part="message" class="flex" data-monster-replace="path:labels.message"></div>
+                <div data-monster-role="decision">
+                    <monster-message-state-button exportparts="monster-state-button:confirm-button,
+                                          control:confirm-control,
+                                          button-button:confirm-control-button,
+                                          button-control:confirm-button-control,
+                                          popper:confirm-popper,
+                                          message:confirm-popper-message-message,
+                                          icon:confirm-popper-message-icon,
+                                          title:confirm-popper-message-title"
+                                                  data-monster-attributes="data-monster-button-class path:classes.confirmButton"
+                                                  data-monster-role="confirm" part="confirm">
+                        <span data-monster-replace="path:labels.confirm"></span>
+                    </monster-message-state-button>
+
+                    <monster-button exportparts="button:cancel-button,control:cancel-control"
+                                    data-monster-attributes="data-monster-button-class path:classes.cancelButton"
+                                    data-monster-role="cancel" part="cancel">
+                        <span data-monster-replace="path:labels.cancel"></span>
+                    </monster-button>
+                </div>
+            </div>
+        </div>
+    `;
+}
+
+registerCustomElement(ConfirmButton);