@schukai/monster 3.82.0 → 3.83.0

package/CHANGELOG.md

@@ -2,6 +2,22 @@
 
 
 
+## [3.83.0] - 2024-10-27
+
+### Add Features
+
+- New disableButton for monster-state-message-button [#254](https://gitlab.schukai.com/oss/libraries/javascript/monster/issues/254)
+
+
+
+## [3.82.1] - 2024-10-16
+
+### Bug Fixes
+
+- wrong feature in iframe
+
+
+
 ## [3.82.0] - 2024-10-16
 
 ### Add Features

package/package.json

@@ -1 +1 @@
-{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.11","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.82.0"}
+{"author":"schukai GmbH","dependencies":{"@floating-ui/dom":"^1.6.11","@popperjs/core":"^2.11.8"},"description":"Monster is a simple library for creating fast, robust and lightweight websites.","homepage":"https://monsterjs.org/","keywords":["framework","web","dom","css","sass","mobile-first","app","front-end","templates","schukai","core","shopcloud","alvine","monster","buildmap","stack","observer","observable","uuid","node","nodelist","css-in-js","logger","log","theme"],"license":"AGPL 3.0","main":"source/monster.mjs","module":"source/monster.mjs","name":"@schukai/monster","repository":{"type":"git","url":"https://gitlab.schukai.com/oss/libraries/javascript/monster.git"},"type":"module","version":"3.83.0"}

package/source/components/form/message-state-button.mjs

@@ -121,6 +121,9 @@ class MessageStateButton extends Popper {
 					throw new Error("the click action is not defined");
 				},
 			},
+			features: {
+				disableButton: false,
+			},
 		});
 	}
 
@@ -208,7 +211,7 @@ class MessageStateButton extends Popper {
 
 	/**
 	 * @param {number} timeout
-	 * @return {Monster.Components.Form.MessageStateButton}
+	 * @return {MessageStateButton}
 	 */
 	showMessage(timeout) {
 		super.showDialog();
@@ -363,7 +366,7 @@ function getTemplate() {
         <div data-monster-role="control" part="control">
 
             <monster-state-button exportparts="button:button-button,control:button-control"
-                                  data-monster-attributes="data-monster-option-classes-button path:classes.button"
+                                  data-monster-attributes="data-monster-option-classes-button path:classes.button, disabled path:features.disableButton"
                                   part="button"
                                   name="button"
                                   data-monster-role="button">

package/source/components/host/config-manager.mjs

@@ -199,8 +199,6 @@ class ConfigManager extends CustomElement {
 	}
 
 	/**
-	 *
-	 * @return {Monster.Components.Host.Host}
 	 */
 	[assembleMethodSymbol]() {
 		super[assembleMethodSymbol]();

package/source/components/layout/iframe.mjs

@@ -10,20 +10,20 @@
  * For more information about purchasing a commercial license, please contact schukai GmbH.
  */
 
-import {instanceSymbol} from "../../constants.mjs";
-import {ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
-import {CustomElement} from "../../dom/customelement.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
+import { CustomElement } from "../../dom/customelement.mjs";
 import {
-    assembleMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {isFunction} from "../../types/is.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {IframeStyleSheet} from "./stylesheet/iframe.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { isFunction } from "../../types/is.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { IframeStyleSheet } from "./stylesheet/iframe.mjs";
+import { fireCustomEvent } from "../../dom/events.mjs";
 
-export {Iframe};
+export { Iframe };
 
 /**
  * @private
@@ -62,133 +62,134 @@ const timerCallbackSymbol = Symbol("timerCallback");
  * @summary A cool and fancy Iframe that can make your life easier and also looks good.
  */
 class Iframe extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @return {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/iframe@@instance");
-    }
-
-    /**
-     *
-     * @return {Components.Layout.Iframe
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-        calcHeight.call(this);
-        return this;
-    }
-
-    /**
-     * This method is called by the dom and should not be called directly.
-     *
-     * @return {void}
-     */
-    connectedCallback() {
-        super.connectedCallback();
-        attachResizeObserver.call(this);
-
-        // disable scrolling in parent node
-        if (this.parentNode && this.parentNode instanceof HTMLElement) {
-            this.parentNode.style.overflow = "hidden";
-        }
-    }
-
-    /**
-     * This method is called by the dom and should not be called directly.
-     *
-     * @return {void}
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        disconnectResizeObserver.call(this);
-    }
-
-    /**
-     * 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 Label definitions
-     * @property {Object} actions Callbacks
-     * @property {string} actions.click="throw Error" Callback when clicked
-     * @property {Object} features Features
-     * @property {boolean} features.allowFullScreen=true Allow fullscreen
-     * @property {boolean} features.allowPaymentRequest=true Allow payment request
-     * @property {boolean} features.replaceTargets=true Replace parent target in iframe
-     * @property {string} loading="eager" Loading state
-     * @property {string} referrerPolicy="no-referrer" Referrer policy
-     * @property {string} src Source
-     * @property {Object} classes CSS classes
-     * @property {boolean} disabled=false Disabled state
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            src: null,
-
-            /* "allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation"*/
-            sandbox: null,
-
-            labels: {},
-            classes: {},
-
-            name: "",
-
-            referrerPolicy: "no-referrer",
-
-            disabled: false,
-            features: {
-                allowFullScreen: true,
-                allowPaymentRequest: true,
-                replaceTargets: true,
-            },
-
-            loading: "eager",
-
-            actions: {
-                click: () => {
-                    throw new Error("the click action is not defined");
-                },
-            },
-        });
-    }
-
-    /**
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-iframe";
-    }
-
-    /**
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [IframeStyleSheet];
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @return {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/layout/iframe@@instance");
+	}
+
+	/**
+	 *
+	 * @return {Components.Layout.Iframe
+	 * @fires monster-iframe-clicked
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+		calcHeight.call(this);
+		return this;
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @return {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+		attachResizeObserver.call(this);
+
+		// disable scrolling in parent node
+		if (this.parentNode && this.parentNode instanceof HTMLElement) {
+			this.parentNode.style.overflow = "hidden";
+		}
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		disconnectResizeObserver.call(this);
+	}
+
+	/**
+	 * 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 Label definitions
+	 * @property {Object} actions Callbacks
+	 * @property {string} actions.click="throw Error" Callback when clicked
+	 * @property {Object} features Features
+	 * @property {boolean} features.allowFullScreen=true Allow fullscreen
+	 * @property {boolean} features.allowPaymentRequest=true Allow payment request
+	 * @property {boolean} features.replaceTargets=true Replace parent target in iframe
+	 * @property {string} loading="eager" Loading state
+	 * @property {string} referrerPolicy="no-referrer" Referrer policy
+	 * @property {string} src Source
+	 * @property {Object} classes CSS classes
+	 * @property {boolean} disabled=false Disabled state
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			src: null,
+
+			/* "allow-forms allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation"*/
+			sandbox: null,
+
+			labels: {},
+			classes: {},
+
+			name: "",
+
+			referrerPolicy: "no-referrer",
+
+			disabled: false,
+			features: {
+				allowFullScreen: true,
+				allowPaymentRequest: true,
+				replaceTargets: true,
+			},
+
+			loading: "eager",
+
+			actions: {
+				click: () => {
+					throw new Error("the click action is not defined");
+				},
+			},
+		});
+	}
+
+	/**
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-iframe";
+	}
+
+	/**
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [IframeStyleSheet];
+	}
 }
 
 /**
  * @private
  */
 function calcHeight() {
-    this.style.boxSizing = "border-box";
+	this.style.boxSizing = "border-box";
 
-    const height = calculateMaximumHeight.call(this, this.parentNode);
-    if (height < 0 || isNaN(height)) {
-        return;
-    }
+	const height = calculateMaximumHeight.call(this, this.parentNode);
+	if (height < 0 || isNaN(height)) {
+		return;
+	}
 
-    this[iframeElementSymbol].style.height = `${height}px`;
+	this[iframeElementSymbol].style.height = `${height}px`;
 }
 
 /**
@@ -197,138 +198,139 @@ function calcHeight() {
  * @return {*}
  */
 function calculateMaximumHeight(element) {
-    let totalBottomBorder = 0;
-    let totalBottomPadding = 0;
-    let totalBottomMargin = 0;
-    let totalOutlineHeight = 0;
-    let totalBoxShadowHeight = 0;
-    let currentElement = element;
-
-    while (currentElement && currentElement !== document.body) {
-        const style = window.getComputedStyle(currentElement);
-        const boxSizing = style.boxSizing;
-
-        const elementHeight = currentElement.getBoundingClientRect().height;
-
-        const borderBottomWidth = parseFloat(style.borderBottomWidth);
-        const paddingBottom = parseFloat(style.paddingBottom);
-        const marginBottom = parseFloat(style.marginBottom);
-
-        const outlineHeight = parseFloat(style.outlineWidth);
-
-        totalBottomBorder += isNaN(borderBottomWidth) ? 0 : borderBottomWidth;
-        totalBottomPadding +=
-            isNaN(paddingBottom) || boxSizing === "border-box" ? 0 : paddingBottom;
-        totalBottomMargin += isNaN(marginBottom) ? 0 : marginBottom;
-        totalOutlineHeight += isNaN(outlineHeight) ? 0 : outlineHeight;
-
-        const boxShadow = style.boxShadow;
-        let boxShadowVerticalTotal = 0;
-
-        if (boxShadow !== "none") {
-            const boxShadowValues = boxShadow.split(" ");
-            const verticalOffset = parseFloat(boxShadowValues[3]);
-            const blurRadius = parseFloat(boxShadowValues[4]);
-            const spreadRadius = parseFloat(boxShadowValues[5]);
-
-            boxShadowVerticalTotal = verticalOffset + blurRadius + spreadRadius;
-        }
-
-        totalBoxShadowHeight += isNaN(boxShadowVerticalTotal)
-            ? 0
-            : boxShadowVerticalTotal;
-
-        if (elementHeight > 200) {
-            return (
-                elementHeight -
-                totalBottomBorder -
-                totalBottomPadding -
-                totalBottomMargin -
-                totalOutlineHeight -
-                totalBoxShadowHeight
-            );
-        }
-
-        currentElement = currentElement.parentNode || currentElement.host;
-    }
+	let totalBottomBorder = 0;
+	let totalBottomPadding = 0;
+	let totalBottomMargin = 0;
+	let totalOutlineHeight = 0;
+	let totalBoxShadowHeight = 0;
+	let currentElement = element;
+
+	while (currentElement && currentElement !== document.body) {
+		const style = window.getComputedStyle(currentElement);
+		const boxSizing = style.boxSizing;
+
+		const elementHeight = currentElement.getBoundingClientRect().height;
+
+		const borderBottomWidth = parseFloat(style.borderBottomWidth);
+		const paddingBottom = parseFloat(style.paddingBottom);
+		const marginBottom = parseFloat(style.marginBottom);
+
+		const outlineHeight = parseFloat(style.outlineWidth);
+
+		totalBottomBorder += isNaN(borderBottomWidth) ? 0 : borderBottomWidth;
+		totalBottomPadding +=
+			isNaN(paddingBottom) || boxSizing === "border-box" ? 0 : paddingBottom;
+		totalBottomMargin += isNaN(marginBottom) ? 0 : marginBottom;
+		totalOutlineHeight += isNaN(outlineHeight) ? 0 : outlineHeight;
+
+		const boxShadow = style.boxShadow;
+		let boxShadowVerticalTotal = 0;
+
+		if (boxShadow !== "none") {
+			const boxShadowValues = boxShadow.split(" ");
+			const verticalOffset = parseFloat(boxShadowValues[3]);
+			const blurRadius = parseFloat(boxShadowValues[4]);
+			const spreadRadius = parseFloat(boxShadowValues[5]);
+
+			boxShadowVerticalTotal = verticalOffset + blurRadius + spreadRadius;
+		}
+
+		totalBoxShadowHeight += isNaN(boxShadowVerticalTotal)
+			? 0
+			: boxShadowVerticalTotal;
+
+		if (elementHeight > 200) {
+			return (
+				elementHeight -
+				totalBottomBorder -
+				totalBottomPadding -
+				totalBottomMargin -
+				totalOutlineHeight -
+				totalBoxShadowHeight
+			);
+		}
+
+		currentElement = currentElement.parentNode || currentElement.host;
+	}
 }
 
 /**
  * @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, () => {
-            calcHeight.call(this);
-        });
-    });
-
-    this[resizeObserverSymbol].observe(this.ownerDocument.body);
-    this[resizeObserverSymbol].observe(document.scrollingElement);
+	// 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, () => {
+			calcHeight.call(this);
+		});
+	});
+
+	this[resizeObserverSymbol].observe(this.ownerDocument.body);
+	this[resizeObserverSymbol].observe(document.scrollingElement);
 }
 
 function disconnectResizeObserver() {
-    if (this[resizeObserverSymbol] instanceof ResizeObserver) {
-        this[resizeObserverSymbol].disconnect();
-    }
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+	}
 }
 
 /**
  * @private
  * @return {initEventHandler}
- * @fires monster-iframe-clicked
  */
 function initEventHandler() {
-    const self = this;
-    const element = this[iframeElementSymbol];
-
-    const type = "click";
-
-    element.addEventListener(type, function (event) {
-        const callback = self.getOption("actions.click");
-
-        fireCustomEvent(self, "monster-iframe-clicked", {
-            element: self,
-        });
-
-        if (!isFunction(callback)) {
-            return;
-        }
-
-        const element = findTargetElementFromEvent(
-            event,
-            ATTRIBUTE_ROLE,
-            "control",
-        );
-
-        if (!(element instanceof Node && self.hasNode(element))) {
-            return;
-        }
-
-        callback.call(self, event);
-    });
-
-    this[iframeElementSymbol].addEventListener("load", () => {
-        calcHeight.call(this);
-        if (this.getOption("features.replaceParentTarget")) {
-            var links = this[iframeElementSymbol].contentDocument.querySelectorAll('a[target="_parent"], form[target="_parent"], a[target="_top"], form[target="_top"]');
-            links.forEach(function(link) {
-                link.target = '_self';
-            });
-        }
-    });
-
-    return this;
+	const self = this;
+	const element = this[iframeElementSymbol];
+
+	const type = "click";
+
+	element.addEventListener(type, function (event) {
+		const callback = self.getOption("actions.click");
+
+		fireCustomEvent(self, "monster-iframe-clicked", {
+			element: self,
+		});
+
+		if (!isFunction(callback)) {
+			return;
+		}
+
+		const element = findTargetElementFromEvent(
+			event,
+			ATTRIBUTE_ROLE,
+			"control",
+		);
+
+		if (!(element instanceof Node && self.hasNode(element))) {
+			return;
+		}
+
+		callback.call(self, event);
+	});
+
+	this[iframeElementSymbol].addEventListener("load", () => {
+		calcHeight.call(this);
+		if (this.getOption("features.replaceTargets")) {
+			const links = this[iframeElementSymbol].contentDocument.querySelectorAll(
+				'a[target="_parent"], form[target="_parent"], a[target="_top"], form[target="_top"]',
+			);
+			links.forEach(function (link) {
+				link.target = "_self";
+			});
+		}
+	});
+
+	return this;
 }
 
 /**
@@ -336,17 +338,17 @@ function initEventHandler() {
  * @return {void}
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
 
-    this[PanelElementSymbol] = this.shadowRoot.querySelector(
-        "[data-monster-role=control]",
-    );
+	this[PanelElementSymbol] = this.shadowRoot.querySelector(
+		"[data-monster-role=control]",
+	);
 
-    this[iframeElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}="control"] iframe`,
-    );
+	this[iframeElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}="control"] iframe`,
+	);
 }
 
 /**
@@ -354,8 +356,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <iframe data-monster-role="iframe"
                     data-monster-attributes="sandbox path:sandbox,

package/source/monster.mjs

@@ -205,5 +205,6 @@ export { Monster };
  * @license AGPLv3 or commercial license
  * @since 2.0.0
  * @copyright schukai GmbH
+ * @memberOf Monster
  */
 class Monster {}