@schukai/monster 4.43.2 → 4.43.3

package/source/components/navigation/site-navigation.mjs

@@ -13,19 +13,19 @@
  */
 
 import {
-  CustomElement,
-  getSlottedElements,
-  registerCustomElement,
-  assembleMethodSymbol,
+	CustomElement,
+	getSlottedElements,
+	registerCustomElement,
+	assembleMethodSymbol,
 } from "../../dom/customelement.mjs";
 import { DeadMansSwitch } from "../../util/deadmansswitch.mjs";
 import { SiteNavigationStyleSheet } from "./stylesheet/site-navigation.mjs";
 import {
-  computePosition,
-  autoUpdate,
-  flip,
-  shift,
-  offset,
+	computePosition,
+	autoUpdate,
+	flip,
+	shift,
+	offset,
 } from "@floating-ui/dom";
 
 export { SiteNavigation };
@@ -52,68 +52,68 @@ const activeSubmenuHiderSymbol = Symbol("activeSubmenuHider");
  * @summary Responsive site navigation with hamburger menu and submenus
  */
 class SiteNavigation extends CustomElement {
-  /**
-   * Returns a unique symbol for the instance.
-   * @returns {symbol}
-   */
-  static get [instanceSymbol]() {
-    return Symbol.for("@schukai/monster/components/navigation/site@@instance");
-  }
-
-  /**
-   * Returns the default options for the component.
-   * @returns {object}
-   */
-  get defaults() {
-    return Object.assign({}, super.defaults, {
-      templates: { main: getTemplate() },
-    });
-  }
-
-  /**
-   * Assembles the component and initializes controls and event handlers.
-   * @returns {void}
-   */
-  [assembleMethodSymbol]() {
-    super[assembleMethodSymbol]();
-    initControlReferences.call(this);
-    initEventHandler.call(this);
-  }
-
-  /**
-   * Returns the CSS stylesheet for the component.
-   * @returns {Array<CSSStyleSheet>}
-   */
-  static getCSSStyleSheet() {
-    return [SiteNavigationStyleSheet];
-  }
-
-  /**
-   * Returns the custom element tag name.
-   * @returns {string}
-   */
-  static getTag() {
-    return "monster-site-navigation";
-  }
-
-  /**
-   * Called when the component is connected to the DOM.
-   * @returns {void}
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    attachResizeObserver.call(this);
-    setTimeout(() => populateTabs.call(this), 0);
-  }
-
-  /**
-   * Called when the component is disconnected from the DOM.
-   * @returns {void}
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    detachResizeObserver.call(this);
-  }
+	/**
+	 * Returns a unique symbol for the instance.
+	 * @returns {symbol}
+	 */
+	static get [instanceSymbol]() {
+		return Symbol.for("@schukai/monster/components/navigation/site@@instance");
+	}
+
+	/**
+	 * Returns the default options for the component.
+	 * @returns {object}
+	 */
+	get defaults() {
+		return Object.assign({}, super.defaults, {
+			templates: { main: getTemplate() },
+		});
+	}
+
+	/**
+	 * Assembles the component and initializes controls and event handlers.
+	 * @returns {void}
+	 */
+	[assembleMethodSymbol]() {
+		super[assembleMethodSymbol]();
+		initControlReferences.call(this);
+		initEventHandler.call(this);
+	}
+
+	/**
+	 * Returns the CSS stylesheet for the component.
+	 * @returns {Array<CSSStyleSheet>}
+	 */
+	static getCSSStyleSheet() {
+		return [SiteNavigationStyleSheet];
+	}
+
+	/**
+	 * Returns the custom element tag name.
+	 * @returns {string}
+	 */
+	static getTag() {
+		return "monster-site-navigation";
+	}
+
+	/**
+	 * Called when the component is connected to the DOM.
+	 * @returns {void}
+	 */
+	connectedCallback() {
+		super.connectedCallback();
+		attachResizeObserver.call(this);
+		setTimeout(() => populateTabs.call(this), 0);
+	}
+
+	/**
+	 * Called when the component is disconnected from the DOM.
+	 * @returns {void}
+	 */
+	disconnectedCallback() {
+		super.disconnectedCallback();
+		detachResizeObserver.call(this);
+	}
 }
 
 /**
@@ -123,19 +123,19 @@ class SiteNavigation extends CustomElement {
  * @returns {void}
  */
 function initControlReferences() {
-  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-  this[navElementSymbol] = this.shadowRoot.querySelector(
-    '[data-monster-role="navigation"]',
-  );
-  this[visibleElementsSymbol] =
-    this.shadowRoot.querySelector("#visible-elements");
-  this[hiddenElementsSymbol] =
-    this.shadowRoot.querySelector("#hidden-elements");
-  this[hamburgerButtonSymbol] =
-    this.shadowRoot.querySelector("#hamburger-button");
-  this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
-    '[data-monster-role="hamburger-nav"]',
-  );
+	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+	this[navElementSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="navigation"]',
+	);
+	this[visibleElementsSymbol] =
+		this.shadowRoot.querySelector("#visible-elements");
+	this[hiddenElementsSymbol] =
+		this.shadowRoot.querySelector("#hidden-elements");
+	this[hamburgerButtonSymbol] =
+		this.shadowRoot.querySelector("#hamburger-button");
+	this[hamburgerNavSymbol] = this.shadowRoot.querySelector(
+		'[data-monster-role="hamburger-nav"]',
+	);
 }
 
 /**
@@ -145,56 +145,56 @@ function initControlReferences() {
  * @returns {void}
  */
 function initEventHandler() {
-  if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
-
-  const hamburgerButton = this[hamburgerButtonSymbol];
-  const hamburgerNav = this[hamburgerNavSymbol];
-  let cleanup;
-
-  if (!hamburgerButton || !hamburgerNav) return;
-
-  const showMenu = () => {
-    hamburgerNav.style.display = "block";
-    cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
-      computePosition(hamburgerButton, hamburgerNav, {
-        placement: "bottom-end",
-        middleware: [offset(8), flip(), shift({ padding: 8 })],
-      }).then(({ x, y }) => {
-        Object.assign(hamburgerNav.style, {
-          left: `${x}px`,
-          top: `${y}px`,
-        });
-      });
-    });
-    setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
-  };
-
-  const hideMenu = () => {
-    hamburgerNav.style.display = "none";
-    if (cleanup) {
-      cleanup();
-    }
-    document.removeEventListener("click", handleOutsideClick);
-  };
-
-  const handleOutsideClick = (event) => {
-    if (
-      !hamburgerButton.contains(event.target) &&
-      !hamburgerNav.contains(event.target)
-    ) {
-      hideMenu();
-    }
-  };
-
-  hamburgerButton.addEventListener("click", (event) => {
-    event.stopPropagation();
-    const isVisible = hamburgerNav.style.display === "block";
-    if (isVisible) {
-      hideMenu();
-    } else {
-      showMenu();
-    }
-  });
+	if (!this.shadowRoot) throw new Error("Component requires a shadowRoot.");
+
+	const hamburgerButton = this[hamburgerButtonSymbol];
+	const hamburgerNav = this[hamburgerNavSymbol];
+	let cleanup;
+
+	if (!hamburgerButton || !hamburgerNav) return;
+
+	const showMenu = () => {
+		hamburgerNav.style.display = "block";
+		cleanup = autoUpdate(hamburgerButton, hamburgerNav, () => {
+			computePosition(hamburgerButton, hamburgerNav, {
+				placement: "bottom-end",
+				middleware: [offset(8), flip(), shift({ padding: 8 })],
+			}).then(({ x, y }) => {
+				Object.assign(hamburgerNav.style, {
+					left: `${x}px`,
+					top: `${y}px`,
+				});
+			});
+		});
+		setTimeout(() => document.addEventListener("click", handleOutsideClick), 0);
+	};
+
+	const hideMenu = () => {
+		hamburgerNav.style.display = "none";
+		if (cleanup) {
+			cleanup();
+		}
+		document.removeEventListener("click", handleOutsideClick);
+	};
+
+	const handleOutsideClick = (event) => {
+		if (
+			!hamburgerButton.contains(event.target) &&
+			!hamburgerNav.contains(event.target)
+		) {
+			hideMenu();
+		}
+	};
+
+	hamburgerButton.addEventListener("click", (event) => {
+		event.stopPropagation();
+		const isVisible = hamburgerNav.style.display === "block";
+		if (isVisible) {
+			hideMenu();
+		} else {
+			showMenu();
+		}
+	});
 }
 
 /**
@@ -204,20 +204,20 @@ function initEventHandler() {
  * @returns {void}
  */
 function attachResizeObserver() {
-  this[resizeObserverSymbol] = new ResizeObserver(() => {
-    if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
-      try {
-        this[timerCallbackSymbol].touch();
-        return;
-      } catch (e) {
-        delete this[timerCallbackSymbol];
-      }
-    }
-    this[timerCallbackSymbol] = new DeadMansSwitch(200, () =>
-      populateTabs.call(this),
-    );
-  });
-  this[resizeObserverSymbol].observe(this[navElementSymbol]);
+	this[resizeObserverSymbol] = new ResizeObserver(() => {
+		if (this[timerCallbackSymbol] instanceof DeadMansSwitch) {
+			try {
+				this[timerCallbackSymbol].touch();
+				return;
+			} catch (e) {
+				delete this[timerCallbackSymbol];
+			}
+		}
+		this[timerCallbackSymbol] = new DeadMansSwitch(200, () =>
+			populateTabs.call(this),
+		);
+	});
+	this[resizeObserverSymbol].observe(this[navElementSymbol]);
 }
 
 /**
@@ -227,10 +227,10 @@ function attachResizeObserver() {
  * @returns {void}
  */
 function detachResizeObserver() {
-  if (this[resizeObserverSymbol] instanceof ResizeObserver) {
-    this[resizeObserverSymbol].disconnect();
-    delete this[resizeObserverSymbol];
-  }
+	if (this[resizeObserverSymbol] instanceof ResizeObserver) {
+		this[resizeObserverSymbol].disconnect();
+		delete this[resizeObserverSymbol];
+	}
 }
 
 /**
@@ -242,69 +242,69 @@ function detachResizeObserver() {
  * @returns {void}
  */
 function setupSubmenu(parentLi, context = "visible") {
-  const submenu = parentLi.querySelector("ul");
-  if (!submenu) return;
-
-  submenu.setAttribute("part", "submenu");
-
-  if (context === "visible") {
-    const component = this;
-    let cleanup;
-    let hideTimeout;
-
-    const immediateHide = () => {
-      submenu.style.display = "none";
-      if (cleanup) {
-        cleanup();
-        cleanup = null;
-      }
-      if (component[activeSubmenuHiderSymbol] === immediateHide) {
-        component[activeSubmenuHiderSymbol] = null;
-      }
-    };
-
-    const show = () => {
-      clearTimeout(hideTimeout);
-      if (
-        component[activeSubmenuHiderSymbol] &&
-        component[activeSubmenuHiderSymbol] !== immediateHide
-      ) {
-        component[activeSubmenuHiderSymbol]();
-      }
-      submenu.style.display = "block";
-      if (!cleanup) {
-        cleanup = autoUpdate(parentLi, submenu, () => {
-          computePosition(parentLi, submenu, {
-            placement: "bottom-start",
-            middleware: [offset(8), flip(), shift({ padding: 8 })],
-          }).then(({ x, y }) => {
-            Object.assign(submenu.style, { left: `${x}px`, top: `${y}px` });
-          });
-        });
-      }
-      component[activeSubmenuHiderSymbol] = immediateHide;
-    };
-
-    const hideWithDelay = () => {
-      hideTimeout = setTimeout(immediateHide, 200);
-    };
-
-    parentLi.addEventListener("mouseenter", show);
-    parentLi.addEventListener("mouseleave", hideWithDelay);
-    submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
-    submenu.addEventListener("mouseleave", hideWithDelay);
-  } else {
-    submenu.style.display = "none";
-    const anchor = parentLi.querySelector("a");
-    if (anchor) {
-      anchor.addEventListener("click", (event) => {
-        event.preventDefault();
-        event.stopPropagation();
-        const isVisible = submenu.style.display === "block";
-        submenu.style.display = isVisible ? "none" : "block";
-      });
-    }
-  }
+	const submenu = parentLi.querySelector("ul");
+	if (!submenu) return;
+
+	submenu.setAttribute("part", "submenu");
+
+	if (context === "visible") {
+		const component = this;
+		let cleanup;
+		let hideTimeout;
+
+		const immediateHide = () => {
+			submenu.style.display = "none";
+			if (cleanup) {
+				cleanup();
+				cleanup = null;
+			}
+			if (component[activeSubmenuHiderSymbol] === immediateHide) {
+				component[activeSubmenuHiderSymbol] = null;
+			}
+		};
+
+		const show = () => {
+			clearTimeout(hideTimeout);
+			if (
+				component[activeSubmenuHiderSymbol] &&
+				component[activeSubmenuHiderSymbol] !== immediateHide
+			) {
+				component[activeSubmenuHiderSymbol]();
+			}
+			submenu.style.display = "block";
+			if (!cleanup) {
+				cleanup = autoUpdate(parentLi, submenu, () => {
+					computePosition(parentLi, submenu, {
+						placement: "bottom-start",
+						middleware: [offset(8), flip(), shift({ padding: 8 })],
+					}).then(({ x, y }) => {
+						Object.assign(submenu.style, { left: `${x}px`, top: `${y}px` });
+					});
+				});
+			}
+			component[activeSubmenuHiderSymbol] = immediateHide;
+		};
+
+		const hideWithDelay = () => {
+			hideTimeout = setTimeout(immediateHide, 200);
+		};
+
+		parentLi.addEventListener("mouseenter", show);
+		parentLi.addEventListener("mouseleave", hideWithDelay);
+		submenu.addEventListener("mouseenter", () => clearTimeout(hideTimeout));
+		submenu.addEventListener("mouseleave", hideWithDelay);
+	} else {
+		submenu.style.display = "none";
+		const anchor = parentLi.querySelector("a");
+		if (anchor) {
+			anchor.addEventListener("click", (event) => {
+				event.preventDefault();
+				event.stopPropagation();
+				const isVisible = submenu.style.display === "block";
+				submenu.style.display = isVisible ? "none" : "block";
+			});
+		}
+	}
 }
 
 /**
@@ -315,120 +315,120 @@ function setupSubmenu(parentLi, context = "visible") {
  * @returns {void}
  */
 function populateTabs() {
-  const visibleList = this[visibleElementsSymbol];
-  const hiddenList = this[hiddenElementsSymbol];
-  const hamburgerButton = this[hamburgerButtonSymbol];
-  const hamburgerNav = this[hamburgerNavSymbol];
-
-  const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
-    (ul) => ul.parentElement === this,
-  );
-
-  if (!topLevelUl) {
-    visibleList.style.visibility = "visible";
-    hamburgerButton.style.display = "none";
-    return;
-  }
-
-  const sourceItems = Array.from(topLevelUl.children).filter(
-    (item) => item.tagName === "LI",
-  );
-
-  visibleList.style.visibility = "hidden";
-  hamburgerButton.style.display = "none";
-  hamburgerNav.style.display = "none";
-  visibleList.innerHTML = "";
-  hiddenList.innerHTML = "";
-
-  const originalDisplay = hamburgerButton.style.display;
-  hamburgerButton.style.visibility = "hidden";
-  hamburgerButton.style.display = "flex";
-  const hamburgerWidth = hamburgerButton.offsetWidth;
-  hamburgerButton.style.display = originalDisplay;
-  hamburgerButton.style.visibility = "visible";
-
-  const navWidth = this[navElementSymbol].clientWidth;
-  if (navWidth === 0) {
-    visibleList.style.visibility = "visible";
-    return;
-  }
-
-  const measurementList = visibleList.cloneNode(true);
-  Object.assign(measurementList.style, {
-    position: "absolute",
-    left: "0",
-    top: "0",
-    width: "auto",
-    visibility: "hidden",
-  });
-  this.shadowRoot.appendChild(measurementList);
-
-  const itemsToMove = [];
-  const availableWidthForTabs = navWidth - hamburgerWidth;
-
-  for (let i = 0; i < sourceItems.length; i++) {
-    const item = sourceItems[i];
-    const itemClone = item.cloneNode(true);
-    const submenu = itemClone.querySelector("ul");
-    if (submenu) submenu.style.display = "none";
-
-    measurementList.appendChild(itemClone);
-
-    const isLastItem = i === sourceItems.length - 1;
-    const effectiveMaxWidth = isLastItem ? navWidth : availableWidthForTabs;
-
-    if (measurementList.scrollWidth > effectiveMaxWidth) {
-      break;
-    } else {
-      itemsToMove.push(item);
-    }
-  }
-  this.shadowRoot.removeChild(measurementList);
-
-  const visibleItems = itemsToMove;
-  const hiddenItems = sourceItems.slice(visibleItems.length);
-
-  if (visibleItems.length > 0) {
-    const clonedVisibleItems = visibleItems.map((item) => {
-      const liClone = item.cloneNode(true);
-      const aClone = liClone.querySelector("a");
-
-      liClone.setAttribute("part", "nav-item");
-      if (aClone) aClone.setAttribute("part", "nav-link");
-
-      if (item.classList.contains("active")) {
-        liClone.setAttribute("part", "nav-item nav-item-active");
-        if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
-      }
-      return liClone;
-    });
-    visibleList.append(...clonedVisibleItems);
-    visibleList
-      .querySelectorAll("li")
-      .forEach((li) => setupSubmenu.call(this, li, "visible"));
-  }
-
-  if (hiddenItems.length > 0) {
-    const clonedHiddenItems = hiddenItems.map((item) => {
-      const liClone = item.cloneNode(true);
-      const aClone = liClone.querySelector("a");
-
-      liClone.setAttribute("part", "nav-item");
-      if (aClone) aClone.setAttribute("part", "nav-link");
-      if (item.classList.contains("active")) {
-        liClone.setAttribute("part", "nav-item nav-item-active");
-        if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
-      }
-      return liClone;
-    });
-    hiddenList.append(...clonedHiddenItems);
-    hamburgerButton.style.display = "flex";
-    hiddenList
-      .querySelectorAll("li")
-      .forEach((li) => setupSubmenu.call(this, li, "hidden"));
-  }
-
-  visibleList.style.visibility = "visible";
+	const visibleList = this[visibleElementsSymbol];
+	const hiddenList = this[hiddenElementsSymbol];
+	const hamburgerButton = this[hamburgerButtonSymbol];
+	const hamburgerNav = this[hamburgerNavSymbol];
+
+	const topLevelUl = [...getSlottedElements.call(this, "ul")].find(
+		(ul) => ul.parentElement === this,
+	);
+
+	if (!topLevelUl) {
+		visibleList.style.visibility = "visible";
+		hamburgerButton.style.display = "none";
+		return;
+	}
+
+	const sourceItems = Array.from(topLevelUl.children).filter(
+		(item) => item.tagName === "LI",
+	);
+
+	visibleList.style.visibility = "hidden";
+	hamburgerButton.style.display = "none";
+	hamburgerNav.style.display = "none";
+	visibleList.innerHTML = "";
+	hiddenList.innerHTML = "";
+
+	const originalDisplay = hamburgerButton.style.display;
+	hamburgerButton.style.visibility = "hidden";
+	hamburgerButton.style.display = "flex";
+	const hamburgerWidth = hamburgerButton.offsetWidth;
+	hamburgerButton.style.display = originalDisplay;
+	hamburgerButton.style.visibility = "visible";
+
+	const navWidth = this[navElementSymbol].clientWidth;
+	if (navWidth === 0) {
+		visibleList.style.visibility = "visible";
+		return;
+	}
+
+	const measurementList = visibleList.cloneNode(true);
+	Object.assign(measurementList.style, {
+		position: "absolute",
+		left: "0",
+		top: "0",
+		width: "auto",
+		visibility: "hidden",
+	});
+	this.shadowRoot.appendChild(measurementList);
+
+	const itemsToMove = [];
+	const availableWidthForTabs = navWidth - hamburgerWidth;
+
+	for (let i = 0; i < sourceItems.length; i++) {
+		const item = sourceItems[i];
+		const itemClone = item.cloneNode(true);
+		const submenu = itemClone.querySelector("ul");
+		if (submenu) submenu.style.display = "none";
+
+		measurementList.appendChild(itemClone);
+
+		const isLastItem = i === sourceItems.length - 1;
+		const effectiveMaxWidth = isLastItem ? navWidth : availableWidthForTabs;
+
+		if (measurementList.scrollWidth > effectiveMaxWidth) {
+			break;
+		} else {
+			itemsToMove.push(item);
+		}
+	}
+	this.shadowRoot.removeChild(measurementList);
+
+	const visibleItems = itemsToMove;
+	const hiddenItems = sourceItems.slice(visibleItems.length);
+
+	if (visibleItems.length > 0) {
+		const clonedVisibleItems = visibleItems.map((item) => {
+			const liClone = item.cloneNode(true);
+			const aClone = liClone.querySelector("a");
+
+			liClone.setAttribute("part", "nav-item");
+			if (aClone) aClone.setAttribute("part", "nav-link");
+
+			if (item.classList.contains("active")) {
+				liClone.setAttribute("part", "nav-item nav-item-active");
+				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
+			}
+			return liClone;
+		});
+		visibleList.append(...clonedVisibleItems);
+		visibleList
+			.querySelectorAll("li")
+			.forEach((li) => setupSubmenu.call(this, li, "visible"));
+	}
+
+	if (hiddenItems.length > 0) {
+		const clonedHiddenItems = hiddenItems.map((item) => {
+			const liClone = item.cloneNode(true);
+			const aClone = liClone.querySelector("a");
+
+			liClone.setAttribute("part", "nav-item");
+			if (aClone) aClone.setAttribute("part", "nav-link");
+			if (item.classList.contains("active")) {
+				liClone.setAttribute("part", "nav-item nav-item-active");
+				if (aClone) aClone.setAttribute("part", "nav-link nav-link-active");
+			}
+			return liClone;
+		});
+		hiddenList.append(...clonedHiddenItems);
+		hamburgerButton.style.display = "flex";
+		hiddenList
+			.querySelectorAll("li")
+			.forEach((li) => setupSubmenu.call(this, li, "hidden"));
+	}
+
+	visibleList.style.visibility = "visible";
 }
 
 /**
@@ -437,7 +437,7 @@ function populateTabs() {
  * @returns {string}
  */
 function getTemplate() {
-  return `
+	return `
     <div data-monster-role="control" part="control">
       <nav data-monster-role="navigation" role="navigation" part="nav">
         <ul id="visible-elements" part="visible-list"></ul>