@schukai/monster 3.98.3 → 3.99.0

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

@@ -12,26 +12,27 @@
  * SPDX-License-Identifier: AGPL-3.0
  */
 
-import { instanceSymbol } from "../../constants.mjs";
-import { addAttributeToken } from "../../dom/attributes.mjs";
+import {instanceSymbol} from "../../constants.mjs";
+import {addAttributeToken} from "../../dom/attributes.mjs";
 import {
-	ATTRIBUTE_ERRORMESSAGE,
-	ATTRIBUTE_ROLE,
+    ATTRIBUTE_ERRORMESSAGE,
+    ATTRIBUTE_ROLE,
 } from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	registerCustomElement,
+    assembleMethodSymbol,
+    registerCustomElement,
 } from "../../dom/customelement.mjs";
-import { getDocument } from "../../dom/util.mjs";
-import { isFunction } from "../../types/is.mjs";
-import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
-import { Popper } from "./popper.mjs";
-import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
-import { PopperButtonStyleSheet } from "./stylesheet/popper-button.mjs";
-import { positionPopper } from "./util/floating-ui.mjs";
+import {getDocument} from "../../dom/util.mjs";
+import {isFunction} from "../../types/is.mjs";
+import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
+import {Popper} from "./popper.mjs";
+import {STYLE_DISPLAY_MODE_BLOCK} from "./constants.mjs";
+import {PopperButtonStyleSheet} from "./stylesheet/popper-button.mjs";
+import {positionPopper} from "./util/floating-ui.mjs";
 import "./button.mjs";
+import {addErrorAttribute} from "../../dom/error.mjs";
 
-export { PopperButton };
+export {PopperButton};
 
 /**
  * @private
@@ -140,205 +141,205 @@ const arrowElementSymbol = Symbol("arrowElement");
  * @fires monster-changed
  */
 class PopperButton extends Popper {
-	/**
-	 * This method is called by the `instanceof` operator.
-	 * @return {symbol}
-	 * @since 2.1.0
-	 */
-	static get [instanceSymbol]() {
-		return Symbol.for(
-			"@schukai/monster/components/form/popper-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} templates - The templates for the control.
-	 * @property {string} templates.main - The main template.
-	 * @property {object} labels - The labels for the control.
-	 * @property {string} labels.button - The label for the button.
-	 * @property {string} content - The content of the popper.
-	 * @property {object} popper - The popper options.
-	 * @extends {Button.defaults}
-	 */
-	get defaults() {
-		return Object.assign({}, super.defaults, {
-			templates: {
-				main: getTemplate(),
-			},
-			actions: {
-				click: (e) => {
-					this.toggleDialog();
-				},
-			},
-			classes: {
-				button: "monster-button",
-			},
-			labels: {
-				button: '<slot name="button"></slot>',
-			},
-			mode: "click",
-			value: null,
-		});
-	}
-
-	/**
-	 *
-	 * @return {Monster.Components.Form.PopperButton}
-	 */
-	[assembleMethodSymbol]() {
-		super[assembleMethodSymbol]();
-		initControlReferences.call(this);
-		initEventHandler.call(this);
-
-		return this;
-	}
-
-	/**
-	 * @return {string}
-	 */
-	static getTag() {
-		return "monster-popper-button";
-	}
-
-	/**
-	 * @return {CSSStyleSheet[]}
-	 */
-	static getCSSStyleSheet() {
-		const styles = super.getCSSStyleSheet();
-		styles.push(PopperButtonStyleSheet);
-		return styles;
-	}
-
-	/**
-	 * @return {void}
-	 */
-	connectedCallback() {
-		super.connectedCallback();
-
-		const document = getDocument();
-
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			// close on outside ui-events
-			document.addEventListener(type, this[closeEventHandler]);
-		}
-
-		updatePopper.call(this);
-		attachResizeObserver.call(this);
-	}
-
-	/**
-	 * @return {void}
-	 */
-	disconnectedCallback() {
-		super.disconnectedCallback();
-
-		// close on outside ui-events
-		for (const [, type] of Object.entries(["click", "touch"])) {
-			document.removeEventListener(type, this[closeEventHandler]);
-		}
-
-		disconnectResizeObserver.call(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();
-		}
-	}
-
-	/**
-	 * @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
-	 * @throws {Error} unsupported type
-	 */
-	set value(value) {
-		this.setOption("value", value);
-		try {
-			this?.setFormValue(this.value);
-		} catch (e) {
-			addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, e.message);
-		}
-	}
+    /**
+     * This method is called by the `instanceof` operator.
+     * @return {symbol}
+     * @since 2.1.0
+     */
+    static get [instanceSymbol]() {
+        return Symbol.for(
+            "@schukai/monster/components/form/popper-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} templates - The templates for the control.
+     * @property {string} templates.main - The main template.
+     * @property {object} labels - The labels for the control.
+     * @property {string} labels.button - The label for the button.
+     * @property {string} content - The content of the popper.
+     * @property {object} popper - The popper options.
+     * @extends {Button.defaults}
+     */
+    get defaults() {
+        return Object.assign({}, super.defaults, {
+            templates: {
+                main: getTemplate(),
+            },
+            actions: {
+                click: (e) => {
+                    this.toggleDialog();
+                },
+            },
+            classes: {
+                button: "monster-button",
+            },
+            labels: {
+                button: '<slot name="button"></slot>',
+            },
+            mode: "click",
+            value: null,
+        });
+    }
+
+    /**
+     *
+     * @return {Monster.Components.Form.PopperButton}
+     */
+    [assembleMethodSymbol]() {
+        super[assembleMethodSymbol]();
+        initControlReferences.call(this);
+        initEventHandler.call(this);
+
+        return this;
+    }
+
+    /**
+     * @return {string}
+     */
+    static getTag() {
+        return "monster-popper-button";
+    }
+
+    /**
+     * @return {CSSStyleSheet[]}
+     */
+    static getCSSStyleSheet() {
+        const styles = super.getCSSStyleSheet();
+        styles.push(PopperButtonStyleSheet);
+        return styles;
+    }
+
+    /**
+     * @return {void}
+     */
+    connectedCallback() {
+        super.connectedCallback();
+
+        const document = getDocument();
+
+        for (const [, type] of Object.entries(["click", "touch"])) {
+            // close on outside ui-events
+            document.addEventListener(type, this[closeEventHandler]);
+        }
+
+        updatePopper.call(this);
+        attachResizeObserver.call(this);
+    }
+
+    /**
+     * @return {void}
+     */
+    disconnectedCallback() {
+        super.disconnectedCallback();
+
+        // close on outside ui-events
+        for (const [, type] of Object.entries(["click", "touch"])) {
+            document.removeEventListener(type, this[closeEventHandler]);
+        }
+
+        disconnectResizeObserver.call(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();
+        }
+    }
+
+    /**
+     * @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
+     * @throws {Error} unsupported type
+     */
+    set value(value) {
+        this.setOption("value", value);
+        try {
+            this?.setFormValue(this.value);
+        } catch (e) {
+            addErrorAttribute(this, e);
+        }
+    }
 }
 
 /**
@@ -346,67 +347,67 @@ class PopperButton extends Popper {
  * @return {initEventHandler}
  */
 function initEventHandler() {
-	this[closeEventHandler] = (event) => {
-		const path = event.composedPath();
-
-		for (const [, element] of Object.entries(path)) {
-			if (element === this) {
-				return;
-			}
-		}
-		this.hideDialog();
-	};
-
-	return this;
+    this[closeEventHandler] = (event) => {
+        const path = event.composedPath();
+
+        for (const [, element] of Object.entries(path)) {
+            if (element === this) {
+                return;
+            }
+        }
+        this.hideDialog();
+    };
+
+    return this;
 }
 
 /**
  * @private
  */
 function attachResizeObserver() {
-	// against flickering
-	this[resizeObserverSymbol] = new ResizeObserver(() => {
-		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-			try {
-				this[timerCallbackSymbol].touch();
-				return;
-			} catch (e) {
-				delete this[timerCallbackSymbol];
-			}
-		}
-
-		this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-			updatePopper.call(this);
-		});
-	});
-
-	this[resizeObserverSymbol].observe(this.parentElement);
+    // against flickering
+    this[resizeObserverSymbol] = new ResizeObserver(() => {
+        if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+            try {
+                this[timerCallbackSymbol].touch();
+                return;
+            } catch (e) {
+                delete this[timerCallbackSymbol];
+            }
+        }
+
+        this[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+            updatePopper.call(this);
+        });
+    });
+
+    this[resizeObserverSymbol].observe(this.parentElement);
 }
 
 function disconnectResizeObserver() {
-	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
-		this[resizeObserverSymbol].disconnect();
-	}
+    if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+        this[resizeObserverSymbol].disconnect();
+    }
 }
 
 /**
  * @private
  */
 function updatePopper() {
-	if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
-		return;
-	}
-
-	if (this.getOption("disabled", false) === true) {
-		return;
-	}
-
-	positionPopper.call(
-		this,
-		this[controlElementSymbol],
-		this[popperElementSymbol],
-		this.getOption("popper", {}),
-	);
+    if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
+        return;
+    }
+
+    if (this.getOption("disabled", false) === true) {
+        return;
+    }
+
+    positionPopper.call(
+        this,
+        this[controlElementSymbol],
+        this[popperElementSymbol],
+        this.getOption("popper", {}),
+    );
 }
 
 /**
@@ -414,21 +415,21 @@ function updatePopper() {
  * @return {Select}
  */
 function initControlReferences() {
-	this[controlElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}=control]`,
-	);
+    this[controlElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=control]`,
+    );
 
-	this[buttonElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}=button]`,
-	);
+    this[buttonElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=button]`,
+    );
 
-	this[popperElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}=popper]`,
-	);
+    this[popperElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=popper]`,
+    );
 
-	this[arrowElementSymbol] = this.shadowRoot.querySelector(
-		`[${ATTRIBUTE_ROLE}=arrow]`,
-	);
+    this[arrowElementSymbol] = this.shadowRoot.querySelector(
+        `[${ATTRIBUTE_ROLE}=arrow]`,
+    );
 }
 
 /**
@@ -436,8 +437,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-	// language=HTML
-	return `
+    // 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"

package/source/components/form/reload.mjs

@@ -28,6 +28,7 @@ import {
 import { isString } from "../../types/is.mjs";
 import { ATTRIBUTE_FORM_RELOAD, ATTRIBUTE_FORM_URL } from "./constants.mjs";
 import { loadAndAssignContent } from "./util/fetch.mjs";
+import {addErrorAttribute} from "../../dom/error.mjs";
 
 export { Reload };
 

package/source/components/form/toggle-switch.mjs

@@ -31,6 +31,7 @@ import {
 } from "../../dom/constants.mjs";
 import { getWindow } from "../../dom/util.mjs";
 import { fireEvent } from "../../dom/events.mjs";
+import {addErrorAttribute} from "../../dom/error.mjs";
 
 export { ToggleSwitch };
 
@@ -293,9 +294,8 @@ class ToggleSwitch extends CustomControl {
 			return;
 		}
 
-		addAttributeToken(
+		addErrorAttribute(
 			this,
-			ATTRIBUTE_ERRORMESSAGE,
 			'The value "' +
 				value +
 				'" must be "' +

package/source/components/notify/monitor-attribute-errors.mjs

@@ -192,7 +192,11 @@ function setupMutationObserver(root) {
 
 			fktOpen("MonitorAttributeErrors " + node.tagName);
 			fktLog(node);
-			fktLog(node.getAttribute("data-monster-error"));
+
+			const errors = node.getAttribute("data-monster-error").split("::");
+			errors.forEach((error) => {
+				fktLog(error);
+			});
 			fktClose();
 
 			if (self.getOption("features.notifyUser")) {