@pnx-mixtape/mxds 0.0.2 → 0.0.3

package/dist/build/InPageAlert.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InPageAlert.js","sources":["../../src/Component/InPageAlert/Elements/InPageAlert.ts"],"sourcesContent":["/**\n * @file InPageAlerts\n *\n * When a InPageAlert is closed the id is written to local storage.\n * This is checked as the page is re-rendered, if a InPageAlert with the same ID is\n * created it will be removed from the dom.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageAlert extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    this.id = this.id || this.generatedId()\n    if (this.localStorage) {\n      this.controller.abort()\n      this.remove()\n      return\n    }\n    const { signal }: AbortController = this.controller\n    this.close?.addEventListener(\"click\", this.handleClose, { signal })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.close.remove()\n  }\n\n  /**\n   * Handle close button click event.\n   */\n  handleClose = (): void => {\n    this.controller.abort()\n    this.remove()\n    this.localStorage = \"true\"\n    const newEvent: CustomEvent<{ id: string; target: InPageAlert }> =\n      new CustomEvent(\"InPageAlert-close\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          id: this.id,\n          target: this,\n        },\n      })\n    this.dispatchEvent(newEvent)\n  }\n\n  get localStorage(): string {\n    return localStorage.getItem(this.id)\n  }\n\n  set localStorage(value: string) {\n    localStorage.setItem(this.id, value)\n  }\n\n  get close(): HTMLButtonElement {\n    let closeBtn: HTMLButtonElement = this.querySelector(\".icon--close\")\n    if (!closeBtn) {\n      closeBtn = createElement(\n        `<button class=\"icon icon--close\" aria-controls=\"${this.id}\" aria-label=\"Close InPageAlert\" type=\"button\"></button>`,\n      ) as HTMLButtonElement\n      this.appendChild(closeBtn)\n    }\n    return closeBtn\n  }\n\n  generatedId(): string {\n    const id = `mx-alert-${Math.floor(Math.random() * Math.floor(10000))}`\n    return makeAnchor(id, 20)\n  }\n}\n\ncustomElements.define(\"mx-closable-alert\", InPageAlert)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-closable-alert\": InPageAlert\n  }\n}\n"],"names":[],"mappings":";AAUA,MAAqB,oBAAoB,YAAY;AAAA,EAInD,cAAc;AACN;AAwBR,SAAA,cAAc,MAAY;AACxB,WAAK,WAAW;AAChB,WAAK,OAAO;AACZ,WAAK,eAAe;AACd,YAAA,WACJ,IAAI,YAAY,qBAAqB;AAAA,QACnC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN,IAAI,KAAK;AAAA,UACT,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACH,WAAK,cAAc,QAAQ;AAAA,IAAA;AApCtB,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;EACxB;AAAA,EAEA,oBAA0B;AACxB,SAAK,KAAK,KAAK,MAAM,KAAK,YAAY;AACtC,QAAI,KAAK,cAAc;AACrB,WAAK,WAAW;AAChB,WAAK,OAAO;AACZ;AAAA,IACF;AACM,UAAA,EAAE,OAAO,IAAqB,KAAK;AACzC,SAAK,OAAO,iBAAiB,SAAS,KAAK,aAAa,EAAE,QAAQ;AAAA,EACpE;AAAA,EAEA,uBAA6B;AAC3B,SAAK,WAAW;AAChB,SAAK,MAAM;EACb;AAAA,EAqBA,IAAI,eAAuB;AAClB,WAAA,aAAa,QAAQ,KAAK,EAAE;AAAA,EACrC;AAAA,EAEA,IAAI,aAAa,OAAe;AACjB,iBAAA,QAAQ,KAAK,IAAI,KAAK;AAAA,EACrC;AAAA,EAEA,IAAI,QAA2B;AACzB,QAAA,WAA8B,KAAK,cAAc,cAAc;AACnE,QAAI,CAAC,UAAU;AACF,iBAAA;AAAA,QACT,mDAAmD,KAAK,EAAE;AAAA,MAAA;AAE5D,WAAK,YAAY,QAAQ;AAAA,IAC3B;AACO,WAAA;AAAA,EACT;AAAA,EAEA,cAAsB;AACd,UAAA,KAAK,YAAY,KAAK,MAAM,KAAK,OAAO,IAAI,KAAK,MAAM,GAAK,CAAC,CAAC;AAC7D,WAAA,WAAW,IAAI,EAAE;AAAA,EAC1B;AACF;AAEA,eAAe,OAAO,qBAAqB,WAAW;"}

package/dist/build/InPageNavigation.js

@@ -1,92 +0,0 @@
-import { m as makeAnchor, c as createElement } from "./chunks/utilities-BIk0P2KX.js";
-class InPageNavigation extends HTMLElement {
-  constructor() {
-    super();
-    this.handleClick = (target) => {
-      this.active = this.items.find((item) => item.link === target);
-      if (!this.links || !this.active) return;
-      this.links.forEach((link) => link.classList.remove("is-active"));
-      this.active.link.classList.add("is-active");
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-    this.headingLevels = this.dataset?.headings || "h2";
-    this.items = [];
-  }
-  connectedCallback() {
-    if (!this.menu || !this.headings) return;
-    this.headings.forEach((heading) => {
-      const listItem = this.generateListItem(heading);
-      const link = this.generateAnchor(heading);
-      this.items.push({ link, heading });
-      listItem.appendChild(link);
-      this.menu?.appendChild(listItem);
-    });
-    const { signal } = this.controller;
-    this.menu.addEventListener(
-      "click",
-      (e) => {
-        const { target } = e;
-        if (!(target instanceof HTMLAnchorElement)) return;
-        this.handleClick(target);
-      },
-      {
-        signal
-      }
-    );
-  }
-  disconnectedCallback() {
-    if (!this.menu || !this.headings) return;
-    this.menu.textContent = "";
-    this.items = [];
-    this.controller.abort();
-  }
-  get menu() {
-    const menu = this.querySelector("ul, ol");
-    if (!menu) {
-      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`);
-    }
-    return menu;
-  }
-  get container() {
-    const selector = this.getAttribute("data-content");
-    if (!selector) {
-      throw new Error(
-        `${this.localName} must have a [data-content] attribute that contains the content selector.`
-      );
-    }
-    return this.closest(selector) || this.parentElement.querySelector(selector);
-  }
-  get headings() {
-    return this.container?.querySelectorAll(this.headingLevels);
-  }
-  get links() {
-    return this.menu?.querySelectorAll("a");
-  }
-  generatedId(heading) {
-    const string = heading?.textContent?.trim();
-    return !string ? "" : makeAnchor(string);
-  }
-  generateAnchor(heading) {
-    const { textContent, id } = heading;
-    const linkText = heading.getAttribute("data-in-page-navigation-title") || textContent;
-    const targetID = id || this.generatedId(heading);
-    if (!id) heading.id = targetID;
-    const item = createElement(
-      `<a href="#${targetID}" class="icon icon--chevron-right">${linkText}</a>`
-    );
-    return item;
-  }
-  generateListItem(heading) {
-    const { tagName } = heading;
-    const item = createElement(
-      `<li class="in-page-navigation__level--${tagName.toLowerCase()}"></li>`
-    );
-    return item;
-  }
-}
-customElements.define("mx-in-page-navigation", InPageNavigation);
-export {
-  InPageNavigation as default
-};
-//# sourceMappingURL=InPageNavigation.js.map

package/dist/build/InPageNavigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"InPageNavigation.js","sources":["../../src/Component/InPageNavigation/Elements/InPageNavigation.ts"],"sourcesContent":["/**\n * DialogBase\n * @file Support opening/closing, and adding a scroll lock to the body.\n */\n\nimport { makeAnchor, createElement } from \"../../../Utility/utilities\"\n\nexport default class InPageNavigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  headingLevels: string\n  items: { link: HTMLAnchorElement; heading: HTMLHeadingElement }[]\n  active: { link: HTMLAnchorElement; heading: HTMLHeadingElement } | undefined\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.headingLevels = this.dataset?.headings || \"h2\"\n    this.items = []\n  }\n\n  connectedCallback(): void {\n    if (!this.menu || !this.headings) return\n\n    this.headings.forEach((heading: HTMLHeadingElement) => {\n      const listItem: HTMLLIElement = this.generateListItem(heading)\n      const link: HTMLAnchorElement = this.generateAnchor(heading)\n      this.items.push({ link, heading })\n      listItem.appendChild(link)\n      this.menu?.appendChild(listItem)\n    })\n\n    const { signal }: AbortController = this.controller\n\n    // Open on toggle click.\n    this.menu.addEventListener(\n      \"click\",\n      (e: MouseEvent): void => {\n        const { target } = e\n        if (!(target instanceof HTMLAnchorElement)) return\n        this.handleClick(target)\n      },\n      {\n        signal,\n      },\n    )\n  }\n\n  disconnectedCallback(): void {\n    if (!this.menu || !this.headings) return\n    this.menu.textContent = \"\"\n    this.items = []\n    this.controller.abort()\n  }\n\n  handleClick = (target: EventTarget | null): void => {\n    this.active = this.items.find(item => item.link === target)\n    if (!this.links || !this.active) return\n    this.links.forEach(link => link.classList.remove(\"is-active\"))\n    this.active.link.classList.add(\"is-active\")\n  }\n\n  get menu(): HTMLUListElement | HTMLOListElement | null {\n    const menu: HTMLUListElement | HTMLOListElement | null =\n      this.querySelector(\"ul, ol\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a <ul> or <ol> element.`)\n    }\n    return menu\n  }\n\n  get container(): HTMLElement | null {\n    const selector: string | null = this.getAttribute(\"data-content\")\n    if (!selector) {\n      throw new Error(\n        `${this.localName} must have a [data-content] attribute that contains the content selector.`,\n      )\n    }\n    return this.closest(selector) || this.parentElement.querySelector(selector)\n  }\n\n  get headings(): NodeListOf<HTMLHeadingElement> | undefined {\n    return this.container?.querySelectorAll(this.headingLevels)\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | undefined {\n    return this.menu?.querySelectorAll(\"a\")\n  }\n\n  generatedId(heading: HTMLHeadingElement): string {\n    const string: string | undefined = heading?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n\n  generateAnchor(heading: HTMLHeadingElement): HTMLAnchorElement {\n    const { textContent, id } = heading\n    const linkText: string | null =\n      heading.getAttribute(\"data-in-page-navigation-title\") || textContent\n    const targetID: string = id || this.generatedId(heading)\n    if (!id) heading.id = targetID\n    const item: Element = createElement(\n      `<a href=\"#${targetID}\" class=\"icon icon--chevron-right\">${linkText}</a>`,\n    )\n\n    return item as HTMLAnchorElement\n  }\n\n  generateListItem(heading: HTMLHeadingElement): HTMLLIElement {\n    const { tagName } = heading\n    const item: Element = createElement(\n      `<li class=\"in-page-navigation__level--${tagName.toLowerCase()}\"></li>`,\n    )\n\n    return item as HTMLLIElement\n  }\n}\n\ncustomElements.define(\"mx-in-page-navigation\", InPageNavigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-in-page-navigation\": InPageNavigation\n  }\n}\n"],"names":[],"mappings":";AAOA,MAAqB,yBAAyB,YAAY;AAAA,EAOxD,cAAc;AACN;AAyCR,SAAA,cAAc,CAAC,WAAqC;AAClD,WAAK,SAAS,KAAK,MAAM,KAAK,CAAQ,SAAA,KAAK,SAAS,MAAM;AAC1D,UAAI,CAAC,KAAK,SAAS,CAAC,KAAK,OAAQ;AACjC,WAAK,MAAM,QAAQ,CAAA,SAAQ,KAAK,UAAU,OAAO,WAAW,CAAC;AAC7D,WAAK,OAAO,KAAK,UAAU,IAAI,WAAW;AAAA,IAAA;AA5CrC,SAAA,aAAa,KAAK;AAClB,SAAA,aAAa,IAAI;AACjB,SAAA,gBAAgB,KAAK,SAAS,YAAY;AAC/C,SAAK,QAAQ;EACf;AAAA,EAEA,oBAA0B;AACxB,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAE7B,SAAA,SAAS,QAAQ,CAAC,YAAgC;AAC/C,YAAA,WAA0B,KAAK,iBAAiB,OAAO;AACvD,YAAA,OAA0B,KAAK,eAAe,OAAO;AAC3D,WAAK,MAAM,KAAK,EAAE,MAAM,QAAS,CAAA;AACjC,eAAS,YAAY,IAAI;AACpB,WAAA,MAAM,YAAY,QAAQ;AAAA,IAAA,CAChC;AAEK,UAAA,EAAE,OAAO,IAAqB,KAAK;AAGzC,SAAK,KAAK;AAAA,MACR;AAAA,MACA,CAAC,MAAwB;AACjB,cAAA,EAAE,OAAW,IAAA;AACf,YAAA,EAAE,kBAAkB,mBAAoB;AAC5C,aAAK,YAAY,MAAM;AAAA,MACzB;AAAA,MACA;AAAA,QACE;AAAA,MACF;AAAA,IAAA;AAAA,EAEJ;AAAA,EAEA,uBAA6B;AAC3B,QAAI,CAAC,KAAK,QAAQ,CAAC,KAAK,SAAU;AAClC,SAAK,KAAK,cAAc;AACxB,SAAK,QAAQ;AACb,SAAK,WAAW;EAClB;AAAA,EASA,IAAI,OAAmD;AAC/C,UAAA,OACJ,KAAK,cAAc,QAAQ;AAC7B,QAAI,CAAC,MAAM;AACT,YAAM,IAAI,MAAM,GAAG,KAAK,SAAS,uCAAuC;AAAA,IAC1E;AACO,WAAA;AAAA,EACT;AAAA,EAEA,IAAI,YAAgC;AAC5B,UAAA,WAA0B,KAAK,aAAa,cAAc;AAChE,QAAI,CAAC,UAAU;AACb,YAAM,IAAI;AAAA,QACR,GAAG,KAAK,SAAS;AAAA,MAAA;AAAA,IAErB;AACA,WAAO,KAAK,QAAQ,QAAQ,KAAK,KAAK,cAAc,cAAc,QAAQ;AAAA,EAC5E;AAAA,EAEA,IAAI,WAAuD;AACzD,WAAO,KAAK,WAAW,iBAAiB,KAAK,aAAa;AAAA,EAC5D;AAAA,EAEA,IAAI,QAAmD;AAC9C,WAAA,KAAK,MAAM,iBAAiB,GAAG;AAAA,EACxC;AAAA,EAEA,YAAY,SAAqC;AACzC,UAAA,SAA6B,SAAS,aAAa,KAAK;AAC9D,WAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,EACzC;AAAA,EAEA,eAAe,SAAgD;AACvD,UAAA,EAAE,aAAa,GAAO,IAAA;AAC5B,UAAM,WACJ,QAAQ,aAAa,+BAA+B,KAAK;AAC3D,UAAM,WAAmB,MAAM,KAAK,YAAY,OAAO;AACnD,QAAA,CAAC,GAAI,SAAQ,KAAK;AACtB,UAAM,OAAgB;AAAA,MACpB,aAAa,QAAQ,sCAAsC,QAAQ;AAAA,IAAA;AAG9D,WAAA;AAAA,EACT;AAAA,EAEA,iBAAiB,SAA4C;AACrD,UAAA,EAAE,QAAY,IAAA;AACpB,UAAM,OAAgB;AAAA,MACpB,yCAAyC,QAAQ,YAAA,CAAa;AAAA,IAAA;AAGzD,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,yBAAyB,gBAAgB;"}

package/dist/build/Navigation.js

@@ -1,126 +0,0 @@
-import { m as makeAnchor } from "./chunks/utilities-BIk0P2KX.js";
-import Keyboard from "./keyboard.js";
-import DisclosureWidget from "./disclosure-widget.js";
-class Navigation extends HTMLElement {
-  constructor() {
-    super();
-    this.handleDisclosure = ({ detail }) => {
-      const { isOpen, id } = detail;
-      const { item } = this.subNavs.get(id);
-      item.classList.toggle("nav--open");
-      if (isOpen) {
-        this.keyboard.attachPopup(id, this.handleCloseAny);
-      } else {
-        this.keyboard.detachPopup(id);
-      }
-    };
-    this.handleCloseAny = () => {
-      this.subNavs.forEach(({ widget }) => {
-        if (!widget) return;
-        if (widget.isOpen) widget.handleToggle();
-      });
-    };
-    this.handleFlyout = (event) => {
-      const target = event.target;
-      const parent = target.closest("li");
-      if (!parent) return;
-      const subnav = parent.querySelector(":scope > ul");
-      if (!subnav) return;
-      this.subNavs.forEach(({ widget, list }) => {
-        if (!widget) return;
-        if (widget.isOpen) widget.handleToggle();
-        if (list.id === subnav.id) widget.handleToggle();
-      });
-    };
-    this.handleBreakpoint = ({
-      matches
-    }) => {
-      if (matches) {
-        this.addEventListener("mouseover", this.handleFlyout);
-        this.addEventListener("mouseleave", this.handleCloseAny);
-        if (this.edgeCheck) this.handleEdgeCheck();
-      } else {
-        this.removeEventListener("mouseover", this.handleFlyout);
-        this.removeEventListener("mouseleave", this.handleCloseAny);
-      }
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-    this.flyout = this.hasAttribute("flyout");
-  }
-  connectedCallback() {
-    const { signal } = this.controller;
-    this.keyboard = new Keyboard();
-    this.keyboard.attachEventListeners(signal);
-    this.addEventListener("focusin", () => {
-      this.keyboard.attachMenu(this, this.links);
-    });
-    this.addEventListener("focusout", () => {
-      this.keyboard.detachMenu();
-    });
-    if (!this.lists.length) return;
-    this.subNavs = /* @__PURE__ */ new Map();
-    this.lists.forEach((list, index) => {
-      const item = list.closest("li");
-      const link = item.querySelector(":scope > a");
-      const id = makeAnchor(`subnav-${index}-${link.textContent}`, 30);
-      const trigger = item.querySelector(
-        ":scope > button.nav__toggle"
-      );
-      if (item && link && trigger) {
-        const labelId = `list-label-${id}`;
-        link.setAttribute("id", labelId);
-        list.setAttribute("id", id);
-        list.setAttribute("aria-labelledby", labelId);
-        const widget = new DisclosureWidget(trigger, list);
-        widget.init();
-        this.subNavs.set(id, { item, trigger, list, link, widget });
-      }
-    });
-    this.addEventListener("disclosure-toggle", this.handleDisclosure);
-    if (!this.flyout) return;
-    this.edgeCheck = this.hasAttribute("edgeCheck");
-    this.mq = this.getAttribute("mq") || "(min-width: 720px)";
-    this.handleBreakpoint(this.breakpoint);
-    this.breakpoint.addEventListener("change", this.handleBreakpoint, {
-      signal
-    });
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-    this.subNavs.forEach((subNav) => subNav.widget.detach());
-  }
-  handleEdgeCheck() {
-    const windowInnerWidth = window.innerWidth;
-    const edgeCheck = new IntersectionObserver(
-      ([{ boundingClientRect, target }], obs) => {
-        if (windowInnerWidth < boundingClientRect.right)
-          target.classList.add("nav--reverse");
-        obs.disconnect();
-      }
-    );
-    this.subNavs.forEach(({ list }) => {
-      edgeCheck.observe(list);
-      const nestedLists = list.querySelectorAll("ul");
-      nestedLists.forEach((nestedList) => edgeCheck.observe(nestedList));
-    });
-  }
-  get links() {
-    const links = this.querySelectorAll("a");
-    if (!links.length) {
-      throw new Error(`${this.localName} must links`);
-    }
-    return links;
-  }
-  get lists() {
-    return this.querySelectorAll("li > ul");
-  }
-  get breakpoint() {
-    return window.matchMedia(this.mq);
-  }
-}
-customElements.define("mx-nav", Navigation);
-export {
-  Navigation as default
-};
-//# sourceMappingURL=Navigation.js.map

package/dist/build/Navigation.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Navigation.js","sources":["../../src/Component/Navigation/Elements/Navigation.ts"],"sourcesContent":["/**\n * Main Navigation\n * @file Drop down navigation handler.\n */\n\nimport {\n  Keyboard,\n  makeAnchor,\n  DisclosureWidget,\n  DisclosureWidgetEvent,\n} from \"../../../Utility/utilities\"\n\ntype SubNavType = {\n  list: HTMLElement\n  trigger: HTMLButtonElement\n  link: HTMLAnchorElement\n  item?: HTMLLIElement\n  widget?: DisclosureWidget\n  linkWidget?: DisclosureWidget\n}\n\nexport default class Navigation extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  keyboard: Keyboard\n  subNavs?: Map<string, SubNavType>\n  flyout?: boolean\n  edgeCheck!: boolean\n  mq!: string\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n    this.flyout = this.hasAttribute(\"flyout\")\n  }\n\n  connectedCallback(): void {\n    const { signal }: AbortController = this.controller\n\n    // Add keyboard navigation events.\n    this.keyboard = new Keyboard()\n    this.keyboard.attachEventListeners(signal)\n\n    // Add keyboard focus handler for menu links.\n    this.addEventListener(\"focusin\", () => {\n      this.keyboard.attachMenu(this, this.links)\n    })\n    this.addEventListener(\"focusout\", () => {\n      this.keyboard.detachMenu()\n    })\n\n    if (!this.lists.length) return\n    this.subNavs = new Map()\n    this.lists.forEach((list: HTMLUListElement, index: number): void => {\n      const item: HTMLLIElement = list.closest(\"li\")\n      const link: HTMLAnchorElement = item.querySelector(\":scope > a\")\n      const id: string = makeAnchor(`subnav-${index}-${link.textContent}`, 30)\n      const trigger: HTMLButtonElement = item.querySelector(\n        \":scope > button.nav__toggle\",\n      )\n      if (item && link && trigger) {\n        const labelId = `list-label-${id}`\n        link.setAttribute(\"id\", labelId)\n        list.setAttribute(\"id\", id)\n        list.setAttribute(\"aria-labelledby\", labelId)\n        const widget = new DisclosureWidget(trigger, list)\n        widget.init()\n        this.subNavs.set(id, { item, trigger, list, link, widget })\n      }\n    })\n\n    this.addEventListener(\"disclosure-toggle\", this.handleDisclosure)\n\n    if (!this.flyout) return\n    this.edgeCheck = this.hasAttribute(\"edgeCheck\")\n    this.mq = this.getAttribute(\"mq\") || \"(min-width: 720px)\"\n    this.handleBreakpoint(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.handleBreakpoint, {\n      signal,\n    })\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n    this.subNavs.forEach((subNav: SubNavType): void => subNav.widget.detach())\n  }\n\n  handleDisclosure = ({ detail }: CustomEvent<DisclosureWidgetEvent>): void => {\n    const { isOpen, id } = detail\n    const { item } = this.subNavs.get(id)\n    item.classList.toggle(\"nav--open\")\n    if (isOpen) {\n      this.keyboard.attachPopup(id, this.handleCloseAny)\n    } else {\n      this.keyboard.detachPopup(id)\n    }\n  }\n\n  handleCloseAny = (): void => {\n    this.subNavs.forEach(({ widget }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n    })\n  }\n\n  handleFlyout = (event: MouseEvent): void => {\n    const target = event.target as HTMLElement\n    const parent: HTMLLIElement = target.closest(\"li\")\n    if (!parent) return\n    const subnav: HTMLUListElement = parent.querySelector(\":scope > ul\")\n    if (!subnav) return\n    this.subNavs.forEach(({ widget, list }: SubNavType): void => {\n      if (!widget) return\n      if (widget.isOpen) widget.handleToggle()\n      if (list.id === subnav.id) widget.handleToggle()\n    })\n  }\n\n  handleBreakpoint = ({\n    matches,\n  }: MediaQueryList | MediaQueryListEvent): void => {\n    if (matches) {\n      this.addEventListener(\"mouseover\", this.handleFlyout)\n      this.addEventListener(\"mouseleave\", this.handleCloseAny)\n      if (this.edgeCheck) this.handleEdgeCheck()\n    } else {\n      this.removeEventListener(\"mouseover\", this.handleFlyout)\n      this.removeEventListener(\"mouseleave\", this.handleCloseAny)\n    }\n  }\n\n  handleEdgeCheck() {\n    const windowInnerWidth: number = window.innerWidth\n    const edgeCheck: IntersectionObserver = new IntersectionObserver(\n      ([{ boundingClientRect, target }], obs) => {\n        if (windowInnerWidth < boundingClientRect.right)\n          target.classList.add(\"nav--reverse\")\n        obs.disconnect()\n      },\n    )\n    this.subNavs.forEach(({ list }: SubNavType): void => {\n      edgeCheck.observe(list)\n      const nestedLists: NodeListOf<HTMLUListElement> =\n        list.querySelectorAll(\"ul\")\n      nestedLists.forEach(nestedList => edgeCheck.observe(nestedList))\n    })\n  }\n\n  get links(): NodeListOf<HTMLAnchorElement> | null {\n    const links: NodeListOf<HTMLAnchorElement> | null =\n      this.querySelectorAll(\"a\")\n    if (!links.length) {\n      throw new Error(`${this.localName} must links`)\n    }\n    return links\n  }\n\n  get lists(): NodeListOf<HTMLUListElement> | null {\n    return this.querySelectorAll(\"li > ul\")\n  }\n\n  get breakpoint(): MediaQueryList {\n    return window.matchMedia(this.mq)\n  }\n}\n\ncustomElements.define(\"mx-nav\", Navigation)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-nav\": Navigation\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/Sticky.js

@@ -1,63 +0,0 @@
-import { c as createElement } from "./chunks/utilities-BIk0P2KX.js";
-class Sticky extends HTMLElement {
-  constructor() {
-    super();
-    this.root = null;
-    this.rootMargin = "0px 0px 0px 0px";
-    this.thresholds = [0];
-    this.internals_ = this.attachInternals();
-  }
-  connectedCallback() {
-    this.offsetPropName = this.getAttribute("offsetpropname");
-    const options = {
-      root: this.root,
-      rootMargin: this.rootMargin,
-      thresholds: this.thresholds
-    };
-    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {
-      const isSticky = boundingClientRect.y < 0;
-      this.classList.toggle("is-stuck", isSticky);
-      const newEvent = new CustomEvent("sticky-toggle", {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-          isSticky,
-          options,
-          target: this
-        }
-      });
-      this.dispatchEvent(newEvent);
-    }, options);
-    this.iO.observe(this.trigger);
-    if (!this.offsetPropName) return;
-    this.rO = new ResizeObserver((entries) => {
-      entries.forEach(({ borderBoxSize }) => {
-        const [{ blockSize }] = borderBoxSize;
-        document.body.style.setProperty(
-          this.offsetPropName,
-          `${blockSize.toFixed(1)}px`
-        );
-      });
-    });
-    this.rO.observe(this);
-  }
-  disconnectedCallback() {
-    this.iO.unobserve(this.trigger);
-    this.rO.disconnect();
-  }
-  get trigger() {
-    let trigger = this.querySelector(".sticky__trigger");
-    if (!trigger) {
-      trigger = createElement(
-        '<div class="sticky__trigger"></div>'
-      );
-      this.insertAdjacentElement("beforebegin", trigger);
-    }
-    return trigger;
-  }
-}
-customElements.define("mx-sticky", Sticky);
-export {
-  Sticky as default
-};
-//# sourceMappingURL=Sticky.js.map

package/dist/build/Sticky.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Sticky.js","sources":["../../src/Component/Sticky/Elements/Sticky.ts"],"sourcesContent":["/**\n * Sticky \"is-stuck\" and offset handler.\n */\n\nimport { createElement } from \"../../../Utility/utilities\"\n\ntype IOOptions = {\n  root: IntersectionObserver[\"root\"]\n  rootMargin: IntersectionObserver[\"rootMargin\"]\n  thresholds: IntersectionObserver[\"thresholds\"]\n}\n\nexport default class Sticky extends HTMLElement {\n  internals_: ElementInternals\n  iO: IntersectionObserver\n  rO?: ResizeObserver\n  offsetPropName?: string\n  root?: IOOptions[\"root\"] = null\n  rootMargin?: IOOptions[\"rootMargin\"] = \"0px 0px 0px 0px\"\n  thresholds?: IOOptions[\"thresholds\"] = [0]\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n  }\n\n  connectedCallback(): void {\n    this.offsetPropName = this.getAttribute(\"offsetpropname\")\n    const options: IOOptions = {\n      root: this.root,\n      rootMargin: this.rootMargin,\n      thresholds: this.thresholds,\n    }\n\n    // Toggle \"is-stuck\" and emit event.\n    this.iO = new IntersectionObserver(([{ boundingClientRect }]) => {\n      const isSticky: boolean = boundingClientRect.y < 0\n      this.classList.toggle(\"is-stuck\", isSticky)\n      const newEvent: CustomEvent<{\n        isSticky: boolean\n        options: IOOptions\n        target: Sticky\n      }> = new CustomEvent(\"sticky-toggle\", {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          isSticky,\n          options,\n          target: this,\n        },\n      })\n      this.dispatchEvent(newEvent)\n    }, options)\n    this.iO.observe(this.trigger)\n\n    // If offsetPropName, record its height.\n    if (!this.offsetPropName) return\n    this.rO = new ResizeObserver(entries => {\n      entries.forEach(({ borderBoxSize }) => {\n        const [{ blockSize }] = borderBoxSize\n        document.body.style.setProperty(\n          this.offsetPropName,\n          `${blockSize.toFixed(1)}px`,\n        )\n      })\n    })\n    this.rO.observe(this)\n  }\n\n  disconnectedCallback(): void {\n    this.iO.unobserve(this.trigger)\n    this.rO.disconnect()\n  }\n\n  get trigger(): HTMLDivElement {\n    let trigger: HTMLDivElement | null = this.querySelector(\".sticky__trigger\")\n    if (!trigger) {\n      trigger = createElement(\n        '<div class=\"sticky__trigger\"></div>',\n      ) as HTMLDivElement\n      this.insertAdjacentElement(\"beforebegin\", trigger)\n    }\n    return trigger\n  }\n}\n\ncustomElements.define(\"mx-sticky\", Sticky)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-sticky\": Sticky\n  }\n}\n"],"names":[],"mappings":";AAYA,MAAqB,eAAe,YAAY;AAAA,EAS9C,cAAc;AACN;AALmB,SAAA,OAAA;AACY,SAAA,aAAA;AACvC,SAAA,aAAuC,CAAC,CAAC;AAIlC,SAAA,aAAa,KAAK;EACzB;AAAA,EAEA,oBAA0B;AACnB,SAAA,iBAAiB,KAAK,aAAa,gBAAgB;AACxD,UAAM,UAAqB;AAAA,MACzB,MAAM,KAAK;AAAA,MACX,YAAY,KAAK;AAAA,MACjB,YAAY,KAAK;AAAA,IAAA;AAId,SAAA,KAAK,IAAI,qBAAqB,CAAC,CAAC,EAAE,mBAAA,CAAoB,MAAM;AACzD,YAAA,WAAoB,mBAAmB,IAAI;AAC5C,WAAA,UAAU,OAAO,YAAY,QAAQ;AACpC,YAAA,WAID,IAAI,YAAY,iBAAiB;AAAA,QACpC,SAAS;AAAA,QACT,YAAY;AAAA,QACZ,QAAQ;AAAA,UACN;AAAA,UACA;AAAA,UACA,QAAQ;AAAA,QACV;AAAA,MAAA,CACD;AACD,WAAK,cAAc,QAAQ;AAAA,OAC1B,OAAO;AACL,SAAA,GAAG,QAAQ,KAAK,OAAO;AAGxB,QAAA,CAAC,KAAK,eAAgB;AACrB,SAAA,KAAK,IAAI,eAAe,CAAW,YAAA;AACtC,cAAQ,QAAQ,CAAC,EAAE,oBAAoB;AACrC,cAAM,CAAC,EAAE,WAAW,IAAI;AACxB,iBAAS,KAAK,MAAM;AAAA,UAClB,KAAK;AAAA,UACL,GAAG,UAAU,QAAQ,CAAC,CAAC;AAAA,QAAA;AAAA,MACzB,CACD;AAAA,IAAA,CACF;AACI,SAAA,GAAG,QAAQ,IAAI;AAAA,EACtB;AAAA,EAEA,uBAA6B;AACtB,SAAA,GAAG,UAAU,KAAK,OAAO;AAC9B,SAAK,GAAG;EACV;AAAA,EAEA,IAAI,UAA0B;AACxB,QAAA,UAAiC,KAAK,cAAc,kBAAkB;AAC1E,QAAI,CAAC,SAAS;AACF,gBAAA;AAAA,QACR;AAAA,MAAA;AAEG,WAAA,sBAAsB,eAAe,OAAO;AAAA,IACnD;AACO,WAAA;AAAA,EACT;AACF;AAEA,eAAe,OAAO,aAAa,MAAM;"}

package/dist/build/Tabs.js

@@ -1,164 +0,0 @@
-import "./DropMenu.js";
-class Tabs extends HTMLElement {
-  constructor() {
-    super();
-    this.tabFocus = 0;
-    this.handleKeydown = ({ key }) => {
-      if (key === "ArrowRight" || key === "ArrowLeft") {
-        this.triggers[this.tabFocus].setAttribute("tabindex", "-1");
-        if (key === "ArrowRight") {
-          this.tabFocus += 1;
-          if (this.tabFocus >= this.triggers.length) {
-            this.tabFocus = 0;
-          }
-        } else if (key === "ArrowLeft") {
-          this.tabFocus -= 1;
-          if (this.tabFocus < 0) {
-            this.tabFocus = this.triggers.length - 1;
-          }
-        }
-        this.triggers[this.tabFocus].setAttribute("tabindex", "0");
-        this.triggers[this.tabFocus].focus();
-      }
-    };
-    this.handleClick = (event) => {
-      const target = event.target;
-      if (!(target instanceof HTMLButtonElement)) return;
-      event.preventDefault();
-      const id = target.getAttribute("aria-controls");
-      this.handleTabChange(id);
-    };
-    this.handleDropMenuSelect = (event) => {
-      const target = event.detail.target;
-      if (!(target instanceof HTMLButtonElement)) return;
-      const id = target.getAttribute("aria-controls");
-      this.handleTabChange(id);
-    };
-    this.handleTabChange = (id) => {
-      this.active = id;
-      this.handleUrlParams(id);
-      const { panel, tab, button } = this.tabs.get(id);
-      panel.focus({ preventScroll: true });
-      const newEvent = new CustomEvent("tab-toggle", {
-        bubbles: true,
-        cancelable: true,
-        detail: { id, tab, button, panel }
-      });
-      this.dispatchEvent(newEvent);
-    };
-    this.handleUrlParams = (id) => {
-      const urlParams = new URLSearchParams(
-        window.location.search
-      );
-      if (urlParams.get("tab") === id) return;
-      urlParams.set("tab", id);
-      window.history.replaceState(
-        {},
-        "",
-        `${window.location.pathname}?${urlParams.toString()}`
-      );
-    };
-    this.internals_ = this.attachInternals();
-    this.controller = new AbortController();
-  }
-  connectedCallback() {
-    if (!this.triggers || !this.panels) return;
-    this.locationHash = window.location.hash;
-    this.tabs = /* @__PURE__ */ new Map();
-    this.triggers.forEach((tab) => {
-      const id = tab.getAttribute("aria-controls");
-      const panel = this.querySelector(`#${id}`);
-      const button = this.dropMenu.querySelector(
-        `[aria-controls=${id}]`
-      );
-      if (id && panel && button) {
-        const labelId = `tab-label-${id}`;
-        tab.setAttribute("id", labelId);
-        tab.setAttribute("role", "tab");
-        tab.setAttribute("aria-selected", "false");
-        tab.setAttribute("tab-index", "-1");
-        panel.setAttribute("aria-labelledby", labelId);
-        panel.setAttribute("role", "tabpanel");
-        panel.setAttribute("tab-index", "0");
-        this.tabs.set(id, { panel, tab, button });
-      }
-    });
-    const { signal } = this.controller;
-    this.menu.addEventListener("click", this.handleClick, { signal });
-    this.menu.addEventListener("keydown", this.handleKeydown, { signal });
-    this.dropMenu.addEventListener(
-      "drop-menu-select",
-      this.handleDropMenuSelect,
-      { signal }
-    );
-    const hashEl = this.locationHash ? this.querySelector(this.locationHash) : null;
-    if (hashEl) {
-      this.active = hashEl.id;
-    } else if (!this.active) {
-      this.active = this.panels[0].id;
-    }
-  }
-  disconnectedCallback() {
-    this.controller.abort();
-  }
-  get dropMenu() {
-    const dropMenu = this.querySelector(".drop-menu");
-    if (!dropMenu) {
-      throw new Error(`${this.localName} must contain a .drop-menu`);
-    }
-    return dropMenu;
-  }
-  get dropMenuTrigger() {
-    const trigger = this.querySelector(
-      ".drop-menu__trigger"
-    );
-    if (!trigger) {
-      throw new Error(`${this.localName} must contain a .drop-menu__trigger`);
-    }
-    return trigger;
-  }
-  get menu() {
-    const menu = this.querySelector(".tab__list");
-    if (!menu) {
-      throw new Error(`${this.localName} must contain a .tab__list`);
-    }
-    menu.setAttribute("role", "tablist");
-    return menu;
-  }
-  get triggers() {
-    const triggers = this.querySelectorAll(".tab__list button");
-    if (!triggers.length) {
-      throw new Error(`${this.localName} must contain .tab__list buttons`);
-    }
-    return triggers;
-  }
-  get panels() {
-    const panels = this.querySelectorAll(".tab__panel");
-    if (!panels.length) {
-      throw new Error(`${this.localName} must contain .tab__panel's`);
-    }
-    return panels;
-  }
-  get active() {
-    return this.querySelector('[aria-selected="true"]');
-  }
-  set active(id) {
-    this.tabs.forEach(({ tab, panel }, key) => {
-      if (key === id) {
-        tab.setAttribute("aria-selected", "true");
-        tab.setAttribute("tab-index", "0");
-        panel.removeAttribute("inert");
-        this.dropMenuTrigger.textContent = tab.textContent;
-      } else {
-        tab.setAttribute("aria-selected", "false");
-        tab.setAttribute("tab-index", "-1");
-        panel.setAttribute("inert", "");
-      }
-    });
-  }
-}
-customElements.define("mx-tabs", Tabs);
-export {
-  Tabs as default
-};
-//# sourceMappingURL=Tabs.js.map

package/dist/build/Tabs.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Tabs.js","sources":["../../src/Component/Tabs/Elements/Tabs.ts"],"sourcesContent":["/**\n * Tab toggle handler\n */\nimport \"../../DropMenu/Elements/DropMenu\"\nimport type { DropMenuEvent } from \"../../DropMenu/Elements/DropMenu\"\n\ntype TabsType = {\n  panel: HTMLElement\n  tab: HTMLButtonElement\n  button: HTMLButtonElement\n}\n\nexport default class Tabs extends HTMLElement {\n  internals_: ElementInternals\n  controller: AbortController\n  tabs?: Map<string, TabsType>\n  locationHash?: string\n  tabFocus?: number = 0\n\n  constructor() {\n    super()\n    this.internals_ = this.attachInternals()\n    this.controller = new AbortController()\n  }\n\n  connectedCallback(): void {\n    if (!this.triggers || !this.panels) return\n    this.locationHash = window.location.hash\n\n    this.tabs = new Map()\n    this.triggers.forEach((tab: HTMLButtonElement): void => {\n      const id: string = tab.getAttribute(\"aria-controls\")\n      const panel: HTMLElement = this.querySelector(`#${id}`)\n      const button: HTMLButtonElement = this.dropMenu.querySelector(\n        `[aria-controls=${id}]`,\n      )\n      if (id && panel && button) {\n        const labelId = `tab-label-${id}`\n        tab.setAttribute(\"id\", labelId)\n        tab.setAttribute(\"role\", \"tab\")\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"aria-labelledby\", labelId)\n        panel.setAttribute(\"role\", \"tabpanel\")\n        panel.setAttribute(\"tab-index\", \"0\")\n        this.tabs.set(id, { panel, tab, button })\n      }\n    })\n\n    const { signal }: AbortController = this.controller\n    this.menu.addEventListener(\"click\", this.handleClick, { signal })\n    this.menu.addEventListener(\"keydown\", this.handleKeydown, { signal })\n\n    this.dropMenu.addEventListener(\n      \"drop-menu-select\",\n      this.handleDropMenuSelect,\n      { signal },\n    )\n\n    const hashEl: HTMLElement | null = this.locationHash\n      ? this.querySelector(this.locationHash)\n      : null\n    if (hashEl) {\n      this.active = hashEl.id\n    } else if (!this.active) {\n      this.active = this.panels[0].id\n    }\n  }\n\n  disconnectedCallback(): void {\n    this.controller.abort()\n  }\n\n  handleKeydown = ({ key }: KeyboardEvent): void => {\n    if (key === \"ArrowRight\" || key === \"ArrowLeft\") {\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"-1\")\n      if (key === \"ArrowRight\") {\n        this.tabFocus += 1\n        // If we're at the end, go to the start\n        if (this.tabFocus >= this.triggers.length) {\n          this.tabFocus = 0\n        }\n        // Move left\n      } else if (key === \"ArrowLeft\") {\n        this.tabFocus -= 1\n        // If we're at the start, move to the end\n        if (this.tabFocus < 0) {\n          this.tabFocus = this.triggers.length - 1\n        }\n      }\n      this.triggers[this.tabFocus].setAttribute(\"tabindex\", \"0\")\n      this.triggers[this.tabFocus].focus()\n    }\n  }\n\n  handleClick = (event: MouseEvent): void => {\n    const target = event.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    event.preventDefault()\n    const id: string = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleDropMenuSelect = (event: DropMenuEvent): void => {\n    const target = event.detail.target as HTMLButtonElement\n    if (!(target instanceof HTMLButtonElement)) return\n    const id = target.getAttribute(\"aria-controls\")\n    this.handleTabChange(id)\n  }\n\n  handleTabChange = (id: string): void => {\n    this.active = id\n    this.handleUrlParams(id)\n    const { panel, tab, button } = this.tabs.get(id)\n    panel.focus({ preventScroll: true })\n    const newEvent: CustomEvent<{\n      id: string\n      tab: HTMLButtonElement\n      button: HTMLButtonElement\n      panel: HTMLElement\n    }> = new CustomEvent(\"tab-toggle\", {\n      bubbles: true,\n      cancelable: true,\n      detail: { id, tab, button, panel },\n    })\n    this.dispatchEvent(newEvent)\n  }\n\n  get dropMenu(): HTMLDivElement | null {\n    const dropMenu: HTMLDivElement | null = this.querySelector(\".drop-menu\")\n    if (!dropMenu) {\n      throw new Error(`${this.localName} must contain a .drop-menu`)\n    }\n    return dropMenu\n  }\n\n  get dropMenuTrigger(): HTMLButtonElement | null {\n    const trigger: HTMLButtonElement | null = this.querySelector(\n      \".drop-menu__trigger\",\n    )\n    if (!trigger) {\n      throw new Error(`${this.localName} must contain a .drop-menu__trigger`)\n    }\n    return trigger\n  }\n\n  get menu(): HTMLDivElement | null {\n    const menu: HTMLDivElement | null = this.querySelector(\".tab__list\")\n    if (!menu) {\n      throw new Error(`${this.localName} must contain a .tab__list`)\n    }\n    menu.setAttribute(\"role\", \"tablist\")\n    return menu\n  }\n\n  get triggers(): NodeListOf<HTMLButtonElement> | null {\n    const triggers: NodeListOf<HTMLButtonElement> | null =\n      this.querySelectorAll(\".tab__list button\")\n    if (!triggers.length) {\n      throw new Error(`${this.localName} must contain .tab__list buttons`)\n    }\n    return triggers\n  }\n\n  get panels(): NodeListOf<HTMLElement> | null {\n    const panels: NodeListOf<HTMLElement> | null =\n      this.querySelectorAll(\".tab__panel\")\n    if (!panels.length) {\n      throw new Error(`${this.localName} must contain .tab__panel's`)\n    }\n    return panels\n  }\n\n  get active(): HTMLButtonElement {\n    return this.querySelector('[aria-selected=\"true\"]')\n  }\n\n  set active(id: string) {\n    this.tabs.forEach(({ tab, panel }: TabsType, key: string): void => {\n      if (key === id) {\n        tab.setAttribute(\"aria-selected\", \"true\")\n        tab.setAttribute(\"tab-index\", \"0\")\n        panel.removeAttribute(\"inert\")\n        this.dropMenuTrigger.textContent = tab.textContent\n      } else {\n        tab.setAttribute(\"aria-selected\", \"false\")\n        tab.setAttribute(\"tab-index\", \"-1\")\n        panel.setAttribute(\"inert\", \"\")\n      }\n    })\n  }\n\n  handleUrlParams = (id: string): void => {\n    const urlParams: URLSearchParams = new URLSearchParams(\n      window.location.search,\n    )\n    if (urlParams.get(\"tab\") === id) return\n    urlParams.set(\"tab\", id)\n    window.history.replaceState(\n      {},\n      \"\",\n      `${window.location.pathname}?${urlParams.toString()}`,\n    )\n  }\n}\n\ncustomElements.define(\"mx-tabs\", Tabs)\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"mx-tabs\": Tabs\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/build/breakpoint-loader.js

@@ -1,52 +0,0 @@
-const _BreakpointLoader = class _BreakpointLoader {
-  constructor(el, callback, options = { mediaQuery: "(max-width: 720px)" }) {
-    this.init = () => {
-      this.responsiveCheck(this.breakpoint);
-      this.breakpoint.addEventListener("change", this.responsiveCheck);
-      this.fallbackBtn?.addEventListener("click", this.handleClick);
-    };
-    this.responsiveCheck = ({ matches }) => {
-      matches && this.load().catch((error) => this.handleError(error));
-    };
-    this.load = async () => {
-      try {
-        await this.callback();
-      } catch (error) {
-        this.handleError(error);
-      }
-      this.breakpoint.removeEventListener("change", this.responsiveCheck);
-    };
-    this.handleClick = () => {
-      this.load().catch((error) => this.handleError(error));
-    };
-    this.handleError = (error) => {
-      console.error(error);
-      this.errorMsg?.removeAttribute("hidden");
-    };
-    if (!el) {
-      throw new Error("Element is null or empty.");
-    }
-    this.el = el;
-    this.callback = callback;
-    this.breakpoint = window.matchMedia(options.mediaQuery);
-    this.options = { ...options };
-    this.fallbackBtn = this.el.querySelector("[data-load-fallback]");
-    this.errorMsg = this.el.querySelector("[data-load-error]");
-  }
-};
-_BreakpointLoader.create = (selector, callback, options = {}) => {
-  if (!Object.hasOwn(window, "once")) return;
-  window.once("breakpoint-loader", selector)?.forEach((el) => {
-    const loader = new _BreakpointLoader(
-      el,
-      callback,
-      options
-    );
-    loader.init();
-  });
-};
-let BreakpointLoader = _BreakpointLoader;
-export {
-  BreakpointLoader as default
-};
-//# sourceMappingURL=breakpoint-loader.js.map

package/dist/build/breakpoint-loader.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"breakpoint-loader.js","sources":["../../src/Utility/Elements/breakpoint-loader.ts"],"sourcesContent":["/* eslint-disable @typescript-eslint/no-explicit-any */\n/**\n * Lazy Load a component based on breakpoint.\n */\n\ntype BreakpointLoaderOptions = {\n  mediaQuery?: string\n}\n\nexport default class BreakpointLoader {\n  el: HTMLElement\n  callback: () => any\n  breakpoint: MediaQueryList\n  options: BreakpointLoaderOptions\n  fallbackBtn?: HTMLButtonElement\n  errorMsg?: HTMLElement\n\n  constructor(\n    el: HTMLElement,\n    callback: () => any,\n    options: BreakpointLoaderOptions = { mediaQuery: \"(max-width: 720px)\" },\n  ) {\n    if (!el) {\n      throw new Error(\"Element is null or empty.\")\n    }\n    this.el = el\n    this.callback = callback\n    this.breakpoint = window.matchMedia(options.mediaQuery)\n    this.options = { ...options }\n    this.fallbackBtn = this.el.querySelector(\"[data-load-fallback]\")\n    this.errorMsg = this.el.querySelector(\"[data-load-error]\")\n  }\n\n  init = (): void => {\n    this.responsiveCheck(this.breakpoint)\n    this.breakpoint.addEventListener(\"change\", this.responsiveCheck)\n    this.fallbackBtn?.addEventListener(\"click\", this.handleClick)\n  }\n\n  responsiveCheck = ({ matches }): void => {\n    matches && this.load().catch(error => this.handleError(error))\n  }\n\n  load = async (): Promise<void> => {\n    try {\n      await this.callback()\n    } catch (error) {\n      this.handleError(error)\n    }\n    this.breakpoint.removeEventListener(\"change\", this.responsiveCheck)\n  }\n\n  handleClick = (): void => {\n    this.load().catch(error => this.handleError(error))\n  }\n\n  handleError = (error): void => {\n    console.error(error) // eslint-disable-line no-console\n    this.errorMsg?.removeAttribute(\"hidden\")\n  }\n\n  static create = (\n    selector: string,\n    callback: () => any,\n    options: BreakpointLoaderOptions = {},\n  ): void => {\n    if (!Object.hasOwn(window, \"once\")) return\n    window\n      .once(\"breakpoint-loader\", selector)\n      ?.forEach((el: HTMLElement): void => {\n        const loader: BreakpointLoader = new BreakpointLoader(\n          el,\n          callback,\n          options,\n        )\n        loader.init()\n      })\n  }\n}\n"],"names":[],"mappings":"AASA,MAAqB,oBAArB,MAAqB,kBAAiB;AAAA,EAQpC,YACE,IACA,UACA,UAAmC,EAAE,YAAY,wBACjD;AAYF,SAAA,OAAO,MAAY;AACZ,WAAA,gBAAgB,KAAK,UAAU;AACpC,WAAK,WAAW,iBAAiB,UAAU,KAAK,eAAe;AAC/D,WAAK,aAAa,iBAAiB,SAAS,KAAK,WAAW;AAAA,IAAA;AAG5C,SAAA,kBAAA,CAAC,EAAE,cAAoB;AAC5B,iBAAA,KAAK,OAAO,MAAM,WAAS,KAAK,YAAY,KAAK,CAAC;AAAA,IAAA;AAG/D,SAAA,OAAO,YAA2B;AAC5B,UAAA;AACF,cAAM,KAAK;eACJ,OAAO;AACd,aAAK,YAAY,KAAK;AAAA,MACxB;AACA,WAAK,WAAW,oBAAoB,UAAU,KAAK,eAAe;AAAA,IAAA;AAGpE,SAAA,cAAc,MAAY;AACxB,WAAK,KAAO,EAAA,MAAM,WAAS,KAAK,YAAY,KAAK,CAAC;AAAA,IAAA;AAGpD,SAAA,cAAc,CAAC,UAAgB;AAC7B,cAAQ,MAAM,KAAK;AACd,WAAA,UAAU,gBAAgB,QAAQ;AAAA,IAAA;AApCvC,QAAI,CAAC,IAAI;AACD,YAAA,IAAI,MAAM,2BAA2B;AAAA,IAC7C;AACA,SAAK,KAAK;AACV,SAAK,WAAW;AAChB,SAAK,aAAa,OAAO,WAAW,QAAQ,UAAU;AACjD,SAAA,UAAU,EAAE,GAAG;AACpB,SAAK,cAAc,KAAK,GAAG,cAAc,sBAAsB;AAC/D,SAAK,WAAW,KAAK,GAAG,cAAc,mBAAmB;AAAA,EAC3D;AA+CF;AAjBE,kBAAO,SAAS,CACd,UACA,UACA,UAAmC,CAAA,MAC1B;AACT,MAAI,CAAC,OAAO,OAAO,QAAQ,MAAM,EAAG;AACpC,SACG,KAAK,qBAAqB,QAAQ,GACjC,QAAQ,CAAC,OAA0B;AACnC,UAAM,SAA2B,IAAI;AAAA,MACnC;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAEF,WAAO,KAAK;AAAA,EAAA,CACb;AAAA;AAnEP,IAAqB,mBAArB;"}