@schukai/monster 3.65.0 → 3.65.21

package/source/components/layout/popper.mjs

@@ -8,28 +8,31 @@
  * 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 { instanceSymbol } from "../../constants.mjs";
 import {
-    addAttributeToken,
-    removeAttributeToken,
+	addAttributeToken,
+	removeAttributeToken,
 } from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
+import { ATTRIBUTE_ROLE } from "../../dom/constants.mjs";
 import {
-    assembleMethodSymbol,
-    registerCustomElement,
+	assembleMethodSymbol,
+	CustomElement,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
-import {fireCustomEvent} from "../../dom/events.mjs";
-import {getDocument} from "../../dom/util.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {Button} from "../form/button.mjs";
-import {STYLE_DISPLAY_MODE_BLOCK} from "../form/constants.mjs";
-import {positionPopper} from "../form/util/floating-ui.mjs";
-import {CustomControl} from "../../dom/customcontrol.mjs";
-import {PopperStyleSheet} from "./stylesheet/popper.mjs";
-import {isArray} from "../../types/is.mjs";
-
-export {Popper};
+import { fireCustomEvent } from "../../dom/events.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { STYLE_DISPLAY_MODE_BLOCK } from "../form/constants.mjs";
+import { positionPopper } from "../form/util/floating-ui.mjs";
+import { CustomControl } from "../../dom/customcontrol.mjs";
+import { PopperStyleSheet } from "./stylesheet/popper.mjs";
+import { isArray } from "../../types/is.mjs";
+
+export { Popper };
 
 /**
  * @private
@@ -77,15 +80,6 @@ const popperElementSymbol = Symbol("popperElement");
  */
 const arrowElementSymbol = Symbol("arrowElement");
 
-/**
- * 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}
- */
-
 /**
  * A Popper is a floating UI element that can be shown or hidden.
  *
@@ -94,142 +88,153 @@ const arrowElementSymbol = Symbol("arrowElement");
  * @example /examples/components/layout/popper-simple
  * @example /examples/components/layout/popper-click
  *
- * @since 1.66.0
+ * @since 1.65.0
  * @copyright schukai GmbH
  * @summary A beautiful popper that can make your life easier and also looks good.
  * @fires monster-popper-hide fired when the popper is hide.
  * @fires monster-popper-hidden fired when the popper is hidden.
  * @fires monster-popper-open fired when the popper is open.
  * @fires monster-popper-opened fired when the popper is opened.
- *
  */
-class Popper extends CustomControl {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/layout/popper@@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 {string} mode The mode of the popper. Possible values are `click`, `enter`, `manual`, `focus`, "auto" or a combination of them.
-     * @property {string} content The content of the popper.
-     * @property {object} popper The popper options.
-     * @property {string} popper.placement The placement of the popper. Possible values are `top`, `bottom`, `left` and `right`.
-     * @property {function[]} popper.middleware The middleware functions of the popper.
-     * @property {function[]} popper.middlewareInit The middleware init functions of the popper.
-     * @property {Object} features The features of the popper.
-     * @property {boolean} features.preventPropagateOpenEvents Prevents the open event from being sent.
-     */
-    get defaults() {
-        return Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            mode: "auto focus",
-            content: "<slot></slot>",
-            popper: {
-                placement: "top",
-                middleware: ["autoPlacement", "offset:10", "arrow"],
-            },
-            features: {
-                preventOpenEventSent: false,
-            },
-        });
-    }
-
-    /**
-     *
-     * @return {Popper}
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-
-        return this;
-    }
-
-    /**
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-popper";
-    }
-
-    /**
-     * @return {Array<CSSStyleSheet>}
-     */
-    static getCSSStyleSheet() {
-        return [PopperStyleSheet];
-    }
-
-    /**
-     * @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);
-    }
-
-    /**
-     * @return {Popper}
-     */
-    showDialog() {
-        show.call(this);
-        return this;
-    }
-
-    /**
-     * @return {Popper}
-     */
-    hideDialog() {
-        hide.call(this);
-        return this;
-    }
-
-    /**
-     * @return {Popper}
-     */
-    toggleDialog() {
-        if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
-            this.hideDialog();
-        } else {
-            this.showDialog();
-        }
-        return this;
-    }
+class Popper extends CustomElement {
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/layout/popper@@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 {string} mode The mode of the popper. Possible values are `click`, `enter`, `manual`, `focus`, "auto" or a combination of them.
+	 * @property {string} content The content of the popper.
+	 * @property {object} popper The popper options.
+	 * @property {string} popper.placement The placement of the popper. Possible values are `top`, `bottom`, `left` and `right`.
+	 * @property {function[]} popper.middleware The middleware functions of the popper.
+	 * @property {Object} features The features of the popper.
+	 * @property {boolean} features.preventOpenEventSent Prevents the open event from being sent.
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			mode: "auto focus",
+			content: "<slot></slot>",
+			popper: {
+				placement: "top",
+				middleware: ["autoPlacement", "offset:10", "arrow"],
+			},
+			features: {
+				preventOpenEventSent: false,
+			},
+		});
+	}
+
+	/**
+	 * This method is called by the `connectedCallback` method on the first call.
+	 *
+	 * @return {Void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * This method returns the tag name of the element.
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-popper";
+	}
+
+	/**
+	 * This method returns the css styles of the element.
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [PopperStyleSheet];
+	}
+
+	/**
+	 * This method is called when the element is connected to the dom.
+	 *
+	 * @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);
+	}
+
+	/**
+	 * This method is called when the element is disconnected from the dom.
+	 *
+	 * @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);
+	}
+
+	/**
+	 * With this method you can show the popper.
+	 *
+	 * @return {Popper}
+	 */
+	showDialog() {
+		show.call(this);
+		return this;
+	}
+
+	/**
+	 * With this method you can hide the popper.
+	 *
+	 * @return {Popper}
+	 */
+	hideDialog() {
+		hide.call(this);
+		return this;
+	}
+
+	/**
+	 * With this method you can toggle the popper.
+	 *
+	 * @return {Popper}
+	 */
+	toggleDialog() {
+		if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+			this.hideDialog();
+		} else {
+			this.showDialog();
+		}
+		return this;
+	}
 }
 
 /**
@@ -237,38 +242,38 @@ class Popper extends CustomControl {
  * @return {Popper}
  */
 function initEventHandler() {
-    this[closeEventHandler] = (event) => {
-        const path = event.composedPath();
-
-        for (const [, element] of Object.entries(path)) {
-            if (element === this) {
-                return;
-            }
-        }
-        hide.call(this);
-    };
-
-    let modes = null;
-    const modeOption = this.getOption("mode");
-    
-    if (typeof modeOption === "string") {
-        modes = modeOption.split(" ");
-    }
-
-    if (
-        modes === null ||
-        modes === undefined ||
-        isArray(modes) === false ||
-        modes.length === 0
-    ) {
-        modes = ["manual"];
-    }
-
-    for (const [, mode] of Object.entries(modes)) {
-        initEventHandlerByMode.call(this, mode);
-    }
-
-    return this;
+	this[closeEventHandler] = (event) => {
+		const path = event.composedPath();
+
+		for (const [, element] of Object.entries(path)) {
+			if (element === this) {
+				return;
+			}
+		}
+		hide.call(this);
+	};
+
+	let modes = null;
+	const modeOption = this.getOption("mode");
+
+	if (typeof modeOption === "string") {
+		modes = modeOption.split(" ");
+	}
+
+	if (
+		modes === null ||
+		modes === undefined ||
+		isArray(modes) === false ||
+		modes.length === 0
+	) {
+		modes = ["manual"];
+	}
+
+	for (const [, mode] of Object.entries(modes)) {
+		initEventHandlerByMode.call(this, mode);
+	}
+
+	return this;
 }
 
 /**
@@ -278,160 +283,159 @@ function initEventHandler() {
  * @throws Error
  */
 function initEventHandlerByMode(mode) {
-    switch (mode) {
-        case "manual":
-            break;
-
-        case "focus":
-            this[buttonElementSymbol].addEventListener("focus", (event) => {
-                if (this.getOption("features.preventOpenEventSent") === true) {
-                    event.preventDefault();
-                }
-                this.showDialog();
-            });
-            this[buttonElementSymbol].addEventListener("blur", (event) => {
-                if (this.getOption("features.preventOpenEventSent") === true) {
-                    event.preventDefault();
-                }
-                this.hideDialog();
-            });
-            break;
-
-        case "click":
-            this[buttonElementSymbol].addEventListener("click", (event) => {
-                if (this.getOption("features.preventOpenEventSent") === true) {
-                    event.preventDefault();
-                }
-                this.toggleDialog();
-            });
-            break;
-        case "enter":
-            this[buttonElementSymbol].addEventListener("mouseenter", (event) => {
-                if (this.getOption("features.preventOpenEventSent") === true) {
-                    event.preventDefault();
-                }
-                this.showDialog();
-            });
-            break;
-
-        case "auto": // is hover
-            this[buttonElementSymbol].addEventListener("mouseenter", (event) => {
-                if (this.getOption("features.preventOpenEventSent") === true) {
-                    event.preventDefault();
-                }
-                this.showDialog();
-            });
-            this[buttonElementSymbol].addEventListener("mouseleave", (event) => {
-                if (this.getOption("features.preventOpenEventSent") === true) {
-                    event.preventDefault();
-                }
-                this.hideDialog();
-            });
-            break;
-        default:
-            throw new Error(`Unknown mode ${mode}`);
-    }
+	switch (mode) {
+		case "manual":
+			break;
+
+		case "focus":
+			this[buttonElementSymbol].addEventListener("focus", (event) => {
+				if (this.getOption("features.preventOpenEventSent") === true) {
+					event.preventDefault();
+				}
+				this.showDialog();
+			});
+			this[buttonElementSymbol].addEventListener("blur", (event) => {
+				if (this.getOption("features.preventOpenEventSent") === true) {
+					event.preventDefault();
+				}
+				this.hideDialog();
+			});
+			break;
+
+		case "click":
+			this[buttonElementSymbol].addEventListener("click", (event) => {
+				if (this.getOption("features.preventOpenEventSent") === true) {
+					event.preventDefault();
+				}
+				this.toggleDialog();
+			});
+			break;
+		case "enter":
+			this[buttonElementSymbol].addEventListener("mouseenter", (event) => {
+				if (this.getOption("features.preventOpenEventSent") === true) {
+					event.preventDefault();
+				}
+				this.showDialog();
+			});
+			break;
+
+		case "auto": // is hover
+			this[buttonElementSymbol].addEventListener("mouseenter", (event) => {
+				if (this.getOption("features.preventOpenEventSent") === true) {
+					event.preventDefault();
+				}
+				this.showDialog();
+			});
+			this[buttonElementSymbol].addEventListener("mouseleave", (event) => {
+				if (this.getOption("features.preventOpenEventSent") === true) {
+					event.preventDefault();
+				}
+				this.hideDialog();
+			});
+			break;
+		default:
+			throw new Error(`Unknown mode ${mode}`);
+	}
 }
 
 /**
  * @private
  */
 function attachResizeObserver() {
-    // against flickering
-    this[resizeObserverSymbol] = new ResizeObserver((entries) => {
-        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((entries) => {
+		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 hide() {
-    const self = this;
+	const self = this;
 
-    fireCustomEvent(self, "monster-popper-hide", {
-        self,
-    });
+	fireCustomEvent(self, "monster-popper-hide", {
+		self,
+	});
 
-    self[popperElementSymbol].style.display = "none";
-    removeAttributeToken(self[controlElementSymbol], "class", "open");
+	self[popperElementSymbol].style.display = "none";
+	removeAttributeToken(self[controlElementSymbol], "class", "open");
 
-    setTimeout(() => {
-        fireCustomEvent(self, "monster-popper-hidden", {
-            self,
-        });
-    }, 0);
+	setTimeout(() => {
+		fireCustomEvent(self, "monster-popper-hidden", {
+			self,
+		});
+	}, 0);
 }
 
 /**
  * @private
- * @this PopperButton
  */
 function show() {
-    const self = this;
+	const self = this;
 
-    if (self.getOption("disabled", false) === true) {
-        return;
-    }
+	if (self.getOption("disabled", false) === true) {
+		return;
+	}
 
-    if (self[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
-        return;
-    }
+	if (self[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		return;
+	}
 
-    fireCustomEvent(self, "monster-popper-open", {
-        self,
-    });
+	fireCustomEvent(self, "monster-popper-open", {
+		self,
+	});
 
-    self[popperElementSymbol].style.visibility = "hidden";
-    self[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+	self[popperElementSymbol].style.visibility = "hidden";
+	self[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
 
-    addAttributeToken(self[controlElementSymbol], "class", "open");
-    updatePopper.call(self);
+	addAttributeToken(self[controlElementSymbol], "class", "open");
+	updatePopper.call(self);
 
-    setTimeout(() => {
-        fireCustomEvent(self, "monster-popper-opened", {
-            self,
-        });
-    }, 0);
+	setTimeout(() => {
+		fireCustomEvent(self, "monster-popper-opened", {
+			self,
+		});
+	}, 0);
 }
 
 /**
  * @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", {}),
+	);
 }
 
 /**
@@ -439,19 +443,19 @@ function updatePopper() {
  * @return {Popper}
  */
 function initControlReferences() {
-    this[controlElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=control]`,
-    );
-    this[buttonElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=button]`,
-    );
-    this[popperElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=popper]`,
-    );
-    this[arrowElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=arrow]`,
-    );
-    return this;
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=control]`,
+	);
+	this[buttonElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=button]`,
+	);
+	this[popperElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper]`,
+	);
+	this[arrowElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=arrow]`,
+	);
+	return this;
 }
 
 /**
@@ -459,8 +463,8 @@ function initControlReferences() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <slot name="button" data-monster-role="button"></slot>