@schukai/monster 3.58.3 → 3.59.0

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

@@ -4,34 +4,37 @@
  * 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 {Pathfinder} from "../../data/pathfinder.mjs";
+import { instanceSymbol } from "../../constants.mjs";
+import { Pathfinder } from "../../data/pathfinder.mjs";
 import {
-    addAttributeToken,
-    removeAttributeToken,
+	addAttributeToken,
+	removeAttributeToken,
 } from "../../dom/attributes.mjs";
-import {ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
 import {
-    assembleMethodSymbol,
-    getSlottedElements,
-    registerCustomElement,
+	ATTRIBUTE_ERRORMESSAGE,
+	ATTRIBUTE_ROLE,
+} from "../../dom/constants.mjs";
+import {
+	assembleMethodSymbol,
+	getSlottedElements,
+	registerCustomElement,
 } from "../../dom/customelement.mjs";
 import {
-    CustomElement,
-    attributeObserverSymbol,
+	CustomElement,
+	attributeObserverSymbol,
 } from "../../dom/customelement.mjs";
-import {findTargetElementFromEvent} from "../../dom/events.mjs";
-import {getDocument} from "../../dom/util.mjs";
-import {getGlobal} from "../../types/global.mjs";
-import {ID} from "../../types/id.mjs";
-import {DeadMansSwitch} from "../../util/deadmansswitch.mjs";
-import {Processing} from "../../util/processing.mjs";
-import {STYLE_DISPLAY_MODE_BLOCK} from "./constants.mjs";
-import {ButtonBarStyleSheet} from "./stylesheet/button-bar.mjs";
-import {positionPopper} from "./util/floating-ui.mjs";
-import {convertToPixels} from "../../dom/dimension.mjs";
-
-export {ButtonBar};
+import { findTargetElementFromEvent } from "../../dom/events.mjs";
+import { getDocument } from "../../dom/util.mjs";
+import { getGlobal } from "../../types/global.mjs";
+import { ID } from "../../types/id.mjs";
+import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
+import { Processing } from "../../util/processing.mjs";
+import { STYLE_DISPLAY_MODE_BLOCK } from "./constants.mjs";
+import { ButtonBarStyleSheet } from "./stylesheet/button-bar.mjs";
+import { positionPopper } from "./util/floating-ui.mjs";
+import { convertToPixels } from "../../dom/dimension.mjs";
+
+export { ButtonBar };
 
 /**
  * @private
@@ -148,154 +151,154 @@ const ATTRIBUTE_POPPER_POSITION = "data-monster-popper-position";
  * @fires Monster.Components.Form.event:monster-fetched
  */
 class ButtonBar extends CustomElement {
-    /**
-     * This method is called by the `instanceof` operator.
-     * @returns {symbol}
-     */
-    static get [instanceSymbol]() {
-        return Symbol.for("@schukai/monster/components/form/button-bar@@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 Template definitions
-     * @property {string} templates.main Main template
-     * @property {Object} labels
-     * @property {Object} popper FloatingUI popper configuration
-     * @property {string} popper.placement=top Placement of the popper
-     * @property {number} popper.middleware [middlerware](https://floating-ui.js.org/docs/middleware) to be used
-     */
-    get defaults() {
-        const obj = Object.assign({}, super.defaults, {
-            templates: {
-                main: getTemplate(),
-            },
-            labels: {},
-            popper: {
-                placement: "bottom",
-            },
-        });
-
-        initDefaultsFromAttributes.call(this, obj);
-
-        return obj;
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     */
-    [assembleMethodSymbol]() {
-        super[assembleMethodSymbol]();
-
-        this[dimensionsSymbol] = new Pathfinder({data: {}});
-
-        initControlReferences.call(this);
-        initEventHandler.call(this);
-
-        // setup structure
-        initButtonBar.call(this).then(() => {
-            initPopperSwitch.call(this);
-        });
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * @return {CSSStyleSheet[]}
-     */
-    static getCSSStyleSheet() {
-        return [ButtonBarStyleSheet];
-    }
-
-    /**
-     * This method is called internal and should not be called directly.
-     *
-     * @return {string}
-     */
-    static getTag() {
-        return "monster-button-bar";
-    }
-
-    /**
-     * This method is called by the dom and should not be called directly.
-     *
-     * @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]);
-        }
-
-        setTimeout(() => {
-            updatePopper.call(this);
-            updateResizeObserverObservation.call(this);
-        }, 0);
-    }
-
-    /**
-     * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
-     *
-     * @return {string[]}
-     */
-    static get observedAttributes() {
-        const attributes = super.observedAttributes;
-        attributes.push(ATTRIBUTE_POPPER_POSITION);
-        return attributes;
-    }
-
-    /**
-     * This method is called by the dom and should not be called directly.
-     *
-     * @return {void}
-     */
-    disconnectedCallback() {
-        super.disconnectedCallback();
-
-        const document = getDocument();
-
-        // close on outside ui-events
-        for (const [, type] of Object.entries(["click", "touch"])) {
-            document.removeEventListener(type, this[closeEventHandler]);
-        }
-
-        disconnectResizeObserver.call(this);
-    }
-
-    /**
-     * Close the slotted dialog.
-     * @return {ButtonBar}
-     */
-    hideDialog() {
-        hide.call(this);
-        return this;
-    }
-
-    /**
-     * Open the slotted dialog.
-     * @return {ButtonBar}
-     */
-    showDialog() {
-        show.call(this);
-        return this;
-    }
-
-    /**
-     * Toggle the slotted dialog.
-     * @return {ButtonBar}
-     */
-    toggleDialog() {
-        toggle.call(this);
-        return this;
-    }
+	/**
+	 * This method is called by the `instanceof` operator.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/form/button-bar@@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 Template definitions
+	 * @property {string} templates.main Main template
+	 * @property {Object} labels
+	 * @property {Object} popper FloatingUI popper configuration
+	 * @property {string} popper.placement=top Placement of the popper
+	 * @property {number} popper.middleware [middlerware](https://floating-ui.js.org/docs/middleware) to be used
+	 */
+	get defaults() {
+		const obj = Object.assign({}, super.defaults, {
+			templates: {
+				main: getTemplate(),
+			},
+			labels: {},
+			popper: {
+				placement: "bottom",
+			},
+		});
+
+		initDefaultsFromAttributes.call(this, obj);
+
+		return obj;
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+
+		this[dimensionsSymbol] = new Pathfinder({ data: {} });
+
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+
+		// setup structure
+		initButtonBar.call(this).then(() => {
+			initPopperSwitch.call(this);
+		});
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {CSSStyleSheet[]}
+	 */
+	static getCSSStyleSheet() {
+		return [ButtonBarStyleSheet];
+	}
+
+	/**
+	 * This method is called internal and should not be called directly.
+	 *
+	 * @return {string}
+	 */
+	static getTag() {
+		return "monster-button-bar";
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @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]);
+		}
+
+		setTimeout(() => {
+			updatePopper.call(this);
+			updateResizeObserverObservation.call(this);
+		}, 0);
+	}
+
+	/**
+	 * This method determines which attributes are to be monitored by `attributeChangedCallback()`.
+	 *
+	 * @return {string[]}
+	 */
+	static get observedAttributes() {
+		const attributes = super.observedAttributes;
+		attributes.push(ATTRIBUTE_POPPER_POSITION);
+		return attributes;
+	}
+
+	/**
+	 * This method is called by the dom and should not be called directly.
+	 *
+	 * @return {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+
+		const document = getDocument();
+
+		// close on outside ui-events
+		for (const [, type] of Object.entries(["click", "touch"])) {
+			document.removeEventListener(type, this[closeEventHandler]);
+		}
+
+		disconnectResizeObserver.call(this);
+	}
+
+	/**
+	 * Close the slotted dialog.
+	 * @return {ButtonBar}
+	 */
+	hideDialog() {
+		hide.call(this);
+		return this;
+	}
+
+	/**
+	 * Open the slotted dialog.
+	 * @return {ButtonBar}
+	 */
+	showDialog() {
+		show.call(this);
+		return this;
+	}
+
+	/**
+	 * Toggle the slotted dialog.
+	 * @return {ButtonBar}
+	 */
+	toggleDialog() {
+		toggle.call(this);
+		return this;
+	}
 }
 
 /**
@@ -304,88 +307,88 @@ class ButtonBar extends CustomElement {
  * @returns {*}
  */
 function initDefaultsFromAttributes(obj) {
-    if (this.hasAttribute(ATTRIBUTE_POPPER_POSITION)) {
-        obj.popper.placement = this.getAttribute(ATTRIBUTE_POPPER_POSITION);
-    }
+	if (this.hasAttribute(ATTRIBUTE_POPPER_POSITION)) {
+		obj.popper.placement = this.getAttribute(ATTRIBUTE_POPPER_POSITION);
+	}
 
-    return obj;
+	return obj;
 }
 
 /**
  * @private
  */
 function initEventHandler() {
-    const self = this;
-    /**
-     * @param {Event} event
-     */
-    self[closeEventHandler] = (event) => {
-        const path = event.composedPath();
-
-        for (const [, element] of Object.entries(path)) {
-            if (element === self) {
-                return;
-            }
-        }
-
-        hide.call(self);
-    };
-
-    if (self[buttonBarSlotElementSymbol]) {
-        self[buttonBarSlotElementSymbol].addEventListener("slotchange", (event) => {
-            checkAndRearrangeButtons.call(self);
-        });
-    }
-
-    if (self[popperElementSymbol]) {
-        self[popperElementSymbol].addEventListener("slotchange", (event) => {
-            checkAndRearrangeButtons.call(self);
-        });
-    }
-
-    // data-monster-options
-    self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = function (value) {
-        self.setOption("classes.button", value);
-    };
-
-    self[resizeObserverSymbol] = new ResizeObserver((entries) => {
-        if (self[timerCallbackSymbol] instanceof DeadMansSwitch) {
-            try {
-                self[timerCallbackSymbol].touch();
-                return;
-            } catch (e) {
-                // catch Error("has already run");
-                if (e.message !== "has already run") {
-                    throw e;
-                }
-                delete self[timerCallbackSymbol];
-            }
-        }
-
-        self[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
-            setTimeout(() => {
-                updatePopper.call(self);
-                self[dimensionsSymbol].setVia("data.calculated", false);
-                checkAndRearrangeButtons.call(self);
-            }, 50);
-        });
-    });
-
-    initSlotChangedHandler.call(self);
+	const self = this;
+	/**
+	 * @param {Event} event
+	 */
+	self[closeEventHandler] = (event) => {
+		const path = event.composedPath();
+
+		for (const [, element] of Object.entries(path)) {
+			if (element === self) {
+				return;
+			}
+		}
+
+		hide.call(self);
+	};
+
+	if (self[buttonBarSlotElementSymbol]) {
+		self[buttonBarSlotElementSymbol].addEventListener("slotchange", (event) => {
+			checkAndRearrangeButtons.call(self);
+		});
+	}
+
+	if (self[popperElementSymbol]) {
+		self[popperElementSymbol].addEventListener("slotchange", (event) => {
+			checkAndRearrangeButtons.call(self);
+		});
+	}
+
+	// data-monster-options
+	self[attributeObserverSymbol][ATTRIBUTE_POPPER_POSITION] = function (value) {
+		self.setOption("classes.button", value);
+	};
+
+	self[resizeObserverSymbol] = new ResizeObserver((entries) => {
+		if (self[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				self[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				// catch Error("has already run");
+				if (e.message !== "has already run") {
+					throw e;
+				}
+				delete self[timerCallbackSymbol];
+			}
+		}
+
+		self[timerCallbackSymbol] = new DeadMansSwitch(200, () => {
+			setTimeout(() => {
+				updatePopper.call(self);
+				self[dimensionsSymbol].setVia("data.calculated", false);
+				checkAndRearrangeButtons.call(self);
+			}, 50);
+		});
+	});
+
+	initSlotChangedHandler.call(self);
 }
 
 function initSlotChangedHandler() {
-    this[buttonBarElementSymbol].addEventListener("slotchange", () => {
-        updateResizeObserverObservation.call(this);
-    });
+	this[buttonBarElementSymbol].addEventListener("slotchange", () => {
+		updateResizeObserverObservation.call(this);
+	});
 }
 
 function checkAndRearrangeButtons() {
-    if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
-        calculateButtonBarDimensions.call(this);
-    }
+	if (this[dimensionsSymbol].getVia("data.calculated", false) !== true) {
+		calculateButtonBarDimensions.call(this);
+	}
 
-    rearrangeButtons.call(this);
+	rearrangeButtons.call(this);
 }
 
 /**
@@ -393,58 +396,57 @@ function checkAndRearrangeButtons() {
  * @return {Object}
  */
 function rearrangeButtons() {
+	let sum = this[switchElementSymbol].offsetWidth;
+	const space = this[dimensionsSymbol].getVia("data.space");
+
+	const buttonReferences = this[dimensionsSymbol].getVia(
+		"data.buttonReferences",
+	);
+
+	for (const ref of buttonReferences) {
+		sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
+
+		let elements = getSlottedElements.call(
+			this,
+			'[data-monster-reference="' + ref + '"]',
+			null,
+		); // null ↦ o
+		if (elements.size === 0) {
+			elements = getSlottedElements.call(
+				this,
+				'[data-monster-reference="' + ref + '"]',
+				"popper",
+			); // null ↦ o
+		}
+
+		const nextValue = elements.values().next();
+		if (!nextValue) {
+			continue;
+		}
+
+		const element = nextValue?.value;
+		if (!(element instanceof HTMLElement)) {
+			continue;
+		}
+
+		const buttonLabel = element.innerText;
+
+		if (sum > space) {
+			element.setAttribute("slot", "popper");
+		} else {
+			element.removeAttribute("slot");
+		}
+	}
 
-    let sum = this[switchElementSymbol].offsetWidth;
-    const space = this[dimensionsSymbol].getVia("data.space");
-
-    const buttonReferences = this[dimensionsSymbol].getVia(
-        "data.buttonReferences",
-    );
-
-    for (const ref of buttonReferences) {
-        sum += this[dimensionsSymbol].getVia(`data.button.${ref}`);
-
-        let elements = getSlottedElements.call(
-            this,
-            '[data-monster-reference="' + ref + '"]',
-            null,
-        ); // null ↦ o
-        if (elements.size === 0) {
-            elements = getSlottedElements.call(
-                this,
-                '[data-monster-reference="' + ref + '"]',
-                "popper",
-            ); // null ↦ o
-        }
-
-        const nextValue = elements.values().next();
-        if (!nextValue) {
-            continue;
-        }
-
-        const element = nextValue?.value;
-        if (!(element instanceof HTMLElement)) {
-            continue;
-        }
-
-        const buttonLabel = element.innerText;
-
-        if (sum > space) {
-            element.setAttribute("slot", "popper");
-        } else {
-            element.removeAttribute("slot");
-        }
-    }
-
-    const inVisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
-    if (inVisibleButtons.size > 0) {
-        this[switchElementSymbol].classList.remove("hidden");
-    } else {
-        this[switchElementSymbol].classList.add("hidden");
-        setTimeout(() => {
-            hide.call(this);
-        }, 1);
-    }
+	const inVisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
+	if (inVisibleButtons.size > 0) {
+		this[switchElementSymbol].classList.remove("hidden");
+	} else {
+		this[switchElementSymbol].classList.add("hidden");
+		setTimeout(() => {
+			hide.call(this);
+		}, 1);
+	}
 }
 
 /**
@@ -453,22 +455,22 @@ function rearrangeButtons() {
  * @return {number}
  */
 function calcBoxWidth(node) {
-    const dim = getGlobal()?.getComputedStyle(node);
+	const dim = getGlobal()?.getComputedStyle(node);
 	if (dim === null) {
-        addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "no computed style");
-        throw new Error("no computed style");
+		addAttributeToken(this, ATTRIBUTE_ERRORMESSAGE, "no computed style");
+		throw new Error("no computed style");
 	}
-    const bounding = node.getBoundingClientRect();
-
-    return (
-        convertToPixels(dim["border-left-width"]) +
-        convertToPixels(dim["padding-left"]) +
-        convertToPixels(dim["margin-left"]) +
-        bounding["width"] +
-        convertToPixels(dim["border-right-width"]) +
-        convertToPixels(dim["margin-right"]) +
-        convertToPixels(dim["padding-left"])
-    );
+	const bounding = node.getBoundingClientRect();
+
+	return (
+		convertToPixels(dim["border-left-width"]) +
+		convertToPixels(dim["padding-left"]) +
+		convertToPixels(dim["margin-left"]) +
+		bounding["width"] +
+		convertToPixels(dim["border-right-width"]) +
+		convertToPixels(dim["margin-right"]) +
+		convertToPixels(dim["padding-left"])
+	);
 }
 
 /**
@@ -476,112 +478,112 @@ function calcBoxWidth(node) {
  * @return {Object}
  */
 function calculateButtonBarDimensions() {
-    const computedStyle = getComputedStyle(this.parentElement);
-    if (computedStyle === null) {
-        throw new Error("no computed style");
-    }
-
-    let width = this.parentElement.clientWidth;
-    if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
-        width = computedStyle.getPropertyValue("width");
-        this[dimensionsSymbol].setVia("data.space", convertToPixels(width));
-    } else {
-        let borderWidth = getComputedStyle(this).getPropertyValue(
-            "--monster-border-width",
-        );
-        if (borderWidth === null || borderWidth === "") {
-            borderWidth = "0px";
-        }
-
-        const borderWidthWithoutUnit = convertToPixels(borderWidth);
-
-        // space to be allocated
-        this[dimensionsSymbol].setVia(
-            "data.space",
-            width - 2 * borderWidthWithoutUnit,
-        );
-    }
-
-    this[dimensionsSymbol].setVia("data.visible", !(width === 0));
-
-    const buttonReferences = [];
-
-    const visibleButtons = getSlottedElements.call(this, ":scope", null); // null ↦ o
-
-    for (const [, button] of visibleButtons.entries()) {
-        if (!button.hasAttribute("data-monster-reference")) {
-            button.setAttribute("data-monster-reference", new ID("vb").toString());
-        }
-
-        const ref = button.getAttribute("data-monster-reference");
-        if (ref === null) continue;
-
-        buttonReferences.push(ref);
-        this[dimensionsSymbol].setVia(
-            `data.button.${ref}`,
-            calcBoxWidth.call(this, button),
-        );
-    }
-
-    const invisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
-    for (const [, button] of invisibleButtons.entries()) {
-        if (!button.hasAttribute("data-monster-reference")) {
-            button.setAttribute("data-monster-reference", new ID("ib").toString());
-        }
-
-        const ref = button.getAttribute("data-monster-reference");
-        if (ref === null) continue;
-
-        if (ref.indexOf("ib") !== 0) {
-            buttonReferences.push(ref);
-        }
-    }
-
-    this[dimensionsSymbol].setVia("data.calculated", true);
-    this[dimensionsSymbol].setVia("data.buttonReferences", buttonReferences);
+	const computedStyle = getComputedStyle(this.parentElement);
+	if (computedStyle === null) {
+		throw new Error("no computed style");
+	}
+
+	let width = this.parentElement.clientWidth;
+	if (computedStyle.getPropertyValue("box-sizing") !== "border-box") {
+		width = computedStyle.getPropertyValue("width");
+		this[dimensionsSymbol].setVia("data.space", convertToPixels(width));
+	} else {
+		let borderWidth = getComputedStyle(this).getPropertyValue(
+			"--monster-border-width",
+		);
+		if (borderWidth === null || borderWidth === "") {
+			borderWidth = "0px";
+		}
+
+		const borderWidthWithoutUnit = convertToPixels(borderWidth);
+
+		// space to be allocated
+		this[dimensionsSymbol].setVia(
+			"data.space",
+			width - 2 * borderWidthWithoutUnit,
+		);
+	}
+
+	this[dimensionsSymbol].setVia("data.visible", !(width === 0));
+
+	const buttonReferences = [];
+
+	const visibleButtons = getSlottedElements.call(this, ":scope", null); // null ↦ o
+
+	for (const [, button] of visibleButtons.entries()) {
+		if (!button.hasAttribute("data-monster-reference")) {
+			button.setAttribute("data-monster-reference", new ID("vb").toString());
+		}
+
+		const ref = button.getAttribute("data-monster-reference");
+		if (ref === null) continue;
+
+		buttonReferences.push(ref);
+		this[dimensionsSymbol].setVia(
+			`data.button.${ref}`,
+			calcBoxWidth.call(this, button),
+		);
+	}
+
+	const invisibleButtons = getSlottedElements.call(this, ":scope", "popper"); // null ↦ o
+	for (const [, button] of invisibleButtons.entries()) {
+		if (!button.hasAttribute("data-monster-reference")) {
+			button.setAttribute("data-monster-reference", new ID("ib").toString());
+		}
+
+		const ref = button.getAttribute("data-monster-reference");
+		if (ref === null) continue;
+
+		if (ref.indexOf("ib") !== 0) {
+			buttonReferences.push(ref);
+		}
+	}
+
+	this[dimensionsSymbol].setVia("data.calculated", true);
+	this[dimensionsSymbol].setVia("data.buttonReferences", buttonReferences);
 }
 
 /**
  * @private
  */
 function updateResizeObserverObservation() {
-    this[resizeObserverSymbol].disconnect();
+	this[resizeObserverSymbol].disconnect();
 
-    const slottedNodes = getSlottedElements.call(this);
-    slottedNodes.forEach((node) => {
-        this[resizeObserverSymbol].observe(node);
-    });
+	const slottedNodes = getSlottedElements.call(this);
+	slottedNodes.forEach((node) => {
+		this[resizeObserverSymbol].observe(node);
+	});
 
-    if (this.parentElement === null) return;
-    this[resizeObserverSymbol].observe(this.parentElement);
+	if (this.parentElement === null) return;
+	this[resizeObserverSymbol].observe(this.parentElement);
 }
 
 /**
  * @private
  */
 function disconnectResizeObserver() {
-    if (this[resizeObserverSymbol] instanceof ResizeObserver) {
-        this[resizeObserverSymbol].disconnect();
-    }
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+	}
 }
 
 /**
  * @private
  */
 function toggle() {
-    if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
-        hide.call(this);
-    } else {
-        show.call(this);
-    }
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		hide.call(this);
+	} else {
+		show.call(this);
+	}
 }
 
 /**
  * @private
  */
 function hide() {
-    this[popperElementSymbol].style.display = "none";
-    removeAttributeToken(this[controlElementSymbol], "class", "open");
+	this[popperElementSymbol].style.display = "none";
+	removeAttributeToken(this[controlElementSymbol], "class", "open");
 }
 
 /**
@@ -589,40 +591,40 @@ function hide() {
  * @this PopperButton
  */
 function show() {
-    if (this.getOption("disabled", false) === true) {
-        return;
-    }
+	if (this.getOption("disabled", false) === true) {
+		return;
+	}
 
-    if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
-        return;
-    }
+	if (this[popperElementSymbol].style.display === STYLE_DISPLAY_MODE_BLOCK) {
+		return;
+	}
 
-    this[popperElementSymbol].style.visibility = "hidden";
-    this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
+	this[popperElementSymbol].style.visibility = "hidden";
+	this[popperElementSymbol].style.display = STYLE_DISPLAY_MODE_BLOCK;
 
-    addAttributeToken(this[controlElementSymbol], "class", "open");
+	addAttributeToken(this[controlElementSymbol], "class", "open");
 
-    updatePopper.call(this);
+	updatePopper.call(this);
 }
 
 /**
  * @private
  */
 function updatePopper() {
-    if (this[popperElementSymbol].style.display !== STYLE_DISPLAY_MODE_BLOCK) {
-        return;
-    }
-
-    if (this.getOption("disabled", false) === true) {
-        return;
-    }
-
-    positionPopper.call(
-        this,
-        this[switchElementSymbol],
-        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[switchElementSymbol],
+		this[popperElementSymbol],
+		this.getOption("popper", {}),
+	);
 }
 
 /**
@@ -631,34 +633,34 @@ function updatePopper() {
  * @throws {Error} no shadow-root is defined
  */
 function initControlReferences() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
-
-    this[controlElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=control]`,
-    );
-    this[buttonBarElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=button-bar]`,
-    );
-    this[popperElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=popper]`,
-    );
-    this[popperNavElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=popper-nav]`,
-    );
-    this[switchElementSymbol] = this.shadowRoot.querySelector(
-        `[${ATTRIBUTE_ROLE}=switch]`,
-    );
-
-    this[buttonBarSlotElementSymbol] = null;
-    if (this[buttonBarElementSymbol])
-        this[buttonBarSlotElementSymbol] =
-            this[buttonBarElementSymbol].querySelector(`slot`);
-    this[popperSlotElementSymbol] = null;
-    if (this[popperElementSymbol])
-        this[popperSlotElementSymbol] =
-            this[popperElementSymbol].querySelector(`slot`);
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
+
+	this[controlElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=control]`,
+	);
+	this[buttonBarElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=button-bar]`,
+	);
+	this[popperElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper]`,
+	);
+	this[popperNavElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=popper-nav]`,
+	);
+	this[switchElementSymbol] = this.shadowRoot.querySelector(
+		`[${ATTRIBUTE_ROLE}=switch]`,
+	);
+
+	this[buttonBarSlotElementSymbol] = null;
+	if (this[buttonBarElementSymbol])
+		this[buttonBarSlotElementSymbol] =
+			this[buttonBarElementSymbol].querySelector(`slot`);
+	this[popperSlotElementSymbol] = null;
+	if (this[popperElementSymbol])
+		this[popperSlotElementSymbol] =
+			this[popperElementSymbol].querySelector(`slot`);
 }
 
 /**
@@ -668,36 +670,36 @@ function initControlReferences() {
  *
  */
 function initButtonBar() {
-    if (!this.shadowRoot) {
-        throw new Error("no shadow-root is defined");
-    }
+	if (!this.shadowRoot) {
+		throw new Error("no shadow-root is defined");
+	}
 
-    return new Processing(() => {
-        checkAndRearrangeButtons.call(this);
-    }).run();
+	return new Processing(() => {
+		checkAndRearrangeButtons.call(this);
+	}).run();
 }
 
 /**
  * @private
  */
 function initPopperSwitch() {
-    /**
-     * @param {Event} event
-     */
-    this[popperSwitchEventHandler] = (event) => {
-        const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "switch");
-
-        if (element instanceof HTMLButtonElement) {
-            toggle.call(this);
-        }
-    };
-
-    for (const type of ["click", "touch"]) {
-        this[switchElementSymbol].addEventListener(
-            type,
-            this[popperSwitchEventHandler],
-        );
-    }
+	/**
+	 * @param {Event} event
+	 */
+	this[popperSwitchEventHandler] = (event) => {
+		const element = findTargetElementFromEvent(event, ATTRIBUTE_ROLE, "switch");
+
+		if (element instanceof HTMLButtonElement) {
+			toggle.call(this);
+		}
+	};
+
+	for (const type of ["click", "touch"]) {
+		this[switchElementSymbol].addEventListener(
+			type,
+			this[popperSwitchEventHandler],
+		);
+	}
 }
 
 /**
@@ -705,8 +707,8 @@ function initPopperSwitch() {
  * @return {string}
  */
 function getTemplate() {
-    // language=HTML
-    return `
+	// language=HTML
+	return `
         <div data-monster-role="control" part="control">
             <div data-monster-role="button-bar">
                 <slot></slot>