@schukai/monster 3.58.1 → 3.58.2

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

@@ -4,34 +4,34 @@
  * 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_ROLE } from "../../dom/constants.mjs";
+import {ATTRIBUTE_ERRORMESSAGE, ATTRIBUTE_ROLE} from "../../dom/constants.mjs";
 import {
-	assembleMethodSymbol,
-	getSlottedElements,
-	registerCustomElement,
+    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 +148,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 +304,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);
+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);
 }
 
 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,59 +393,58 @@ function checkAndRearrangeButtons() {
  * @return {Object}
  */
 function rearrangeButtons() {
-	const switchWidth = this[switchElementSymbol].offsetWidth;
-
-	let sum = switchWidth;
-	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);
-	}
+    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);
+    }
 }
 
 /**
@@ -454,18 +453,22 @@ function rearrangeButtons() {
  * @return {number}
  */
 function calcBoxWidth(node) {
-	const dim = getGlobal("window").getComputedStyle(node);
-	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 dim = getGlobal()?.getComputedStyle(node);
+	if (dim === null) {
+        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"])
+    );
 }
 
 /**
@@ -473,112 +476,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");
 }
 
 /**
@@ -586,40 +589,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", {}),
+    );
 }
 
 /**
@@ -628,34 +631,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`);
 }
 
 /**
@@ -665,36 +668,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],
+        );
+    }
 }
 
 /**
@@ -702,8 +705,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>