@schukai/monster 3.73.6 → 3.73.8

package/source/components/layout/popper.mjs

@@ -12,27 +12,26 @@
  * 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,
-	CustomElement,
-	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 { 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";
+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 {PopperStyleSheet} from "./stylesheet/popper.mjs";
+import {isArray} from "../../types/is.mjs";
 
-export { Popper };
+export {Popper};
 
 /**
  * @private
@@ -97,144 +96,144 @@ const arrowElementSymbol = Symbol("arrowElement");
  * @fires monster-popper-opened fired when the popper is opened.
  */
 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;
-	}
+    /**
+     * 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", "shift", "offset:15", "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;
+    }
 }
 
 /**
@@ -242,38 +241,38 @@ class Popper extends CustomElement {
  * @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;
 }
 
 /**
@@ -283,159 +282,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
  */
 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", {}),
+    );
 }
 
 /**
@@ -443,19 +442,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;
 }
 
 /**
@@ -463,8 +462,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>