@pnx-mixtape/mxds 0.0.21 → 0.0.23

package/src/Utility/Drupal/drupal.css

@@ -24,8 +24,7 @@ main :is(.user-login-form, .user-register-form, .user-pass) {
     inline-size: 120px;
     margin-block-end: 0;
     padding-inline-start: 0;
-    border: var(--line-width, 2px) solid
-      var(--line-colour, var(--colour-primary));
+    border: var(--line-width, 2px) solid var(--line-colour, var(--colour-primary));
     border-start-end-radius: var(--spacing-xxs);
     border-end-end-radius: var(--spacing-xxs);
     list-style-type: none;
@@ -38,8 +37,7 @@ main :is(.user-login-form, .user-register-form, .user-pass) {
     }
 
     & li {
-      border-block-end: var(--line-width, 2px) solid
-        var(--line-colour, var(--colour-primary));
+      border-block-end: var(--line-width, 2px) solid var(--line-colour, var(--colour-primary));
 
       &:last-of-type {
         border-block-end: 0 none;

package/src/Utility/Elements/breakpoint-loader.ts

@@ -64,15 +64,9 @@ export default class BreakpointLoader {
     options: BreakpointLoaderOptions = {},
   ): void => {
     if (!Object.hasOwn(window, "once")) return
-    window
-      .once("breakpoint-loader", selector)
-      ?.forEach((el: HTMLElement): void => {
-        const loader: BreakpointLoader = new BreakpointLoader(
-          el,
-          callback,
-          options,
-        )
-        loader.init()
-      })
+    window.once("breakpoint-loader", selector)?.forEach((el: HTMLElement): void => {
+      const loader: BreakpointLoader = new BreakpointLoader(el, callback, options)
+      loader.init()
+    })
   }
 }

package/src/Utility/Elements/cookie-compliance.ts

@@ -67,9 +67,7 @@ export default class CookieCompliance {
       // @ts-expect-error older browser.
       navigator.doNotTrack || navigator.msDoNotTrack || window.doNotTrack
     const isToTrack: boolean =
-      dnt !== null && dnt !== undefined
-        ? dnt && dnt !== "yes" && dnt !== 1 && dnt !== "1"
-        : true
+      dnt !== null && dnt !== undefined ? dnt && dnt !== "yes" && dnt !== 1 && dnt !== "1" : true
 
     // Do nothing if it is a bot.
     // If DoNotTrack is activated, do nothing too.
@@ -159,11 +157,7 @@ export default class CookieCompliance {
   }
 
   static create({ context = null } = {}): void {
-    const [el] = window.once(
-      "cookie-compliance",
-      "#cookie-compliance",
-      context || document,
-    )
+    const [el] = window.once("cookie-compliance", "#cookie-compliance", context || document)
     if (el) {
       const cookieCompliance: CookieCompliance = new CookieCompliance(el)
       cookieCompliance.init()

package/src/Utility/Elements/disclosure-widget.ts

@@ -53,8 +53,7 @@ export default class DisclosureWidget {
   }
 
   init = (): void => {
-    if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget"))
-      return
+    if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget")) return
     const { attribute, setInitialAttribute } = this.options
     this.trigger.disclosureWidget = this
     if (setInitialAttribute) this.element.setAttribute(attribute, "")
@@ -67,19 +66,16 @@ export default class DisclosureWidget {
     const hasAttribute: boolean = this.element.hasAttribute(attribute)
     this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute
     this.trigger.setAttribute("aria-expanded", String(this.isOpen))
-    const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(
-      "disclosure-toggle",
-      {
-        bubbles: true,
-        cancelable: true,
-        detail: {
-          isOpen: this.isOpen,
-          id: this.id,
-          options: this.options,
-          target: this.element,
-        },
+    const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent("disclosure-toggle", {
+      bubbles: true,
+      cancelable: true,
+      detail: {
+        isOpen: this.isOpen,
+        id: this.id,
+        options: this.options,
+        target: this.element,
       },
-    )
+    })
     this.trigger.dispatchEvent(newEvent)
   }
 
@@ -88,10 +84,7 @@ export default class DisclosureWidget {
 
     if (type === "mouseover" || type === "mouseout") {
       const triggerParent = this.trigger.parentNode
-      if (
-        triggerParent !== currentTarget ||
-        triggerParent.contains(relatedTarget as HTMLElement)
-      )
+      if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget as HTMLElement))
         return
     } else if (this.trigger !== currentTarget) return
 

package/src/Utility/Elements/io-loader.ts

@@ -46,11 +46,9 @@ export default class IntersectionLoader {
 
   static create = (selector: string, callback: () => any): void => {
     if (!Object.hasOwn(window, "once")) return
-    window
-      .once("intersection-loader", selector)
-      ?.forEach((el: HTMLElement): void => {
-        const loader: IntersectionLoader = new IntersectionLoader(el, callback)
-        loader.init()
-      })
+    window.once("intersection-loader", selector)?.forEach((el: HTMLElement): void => {
+      const loader: IntersectionLoader = new IntersectionLoader(el, callback)
+      loader.init()
+    })
   }
 }

package/src/Utility/Elements/keyboard.ts

@@ -34,10 +34,7 @@ export default class Keyboard {
     window.Mixtape.Menu = null
   }
 
-  getNextFocusableMenuItem = (
-    active: number,
-    back: boolean = false,
-  ): number => {
+  getNextFocusableMenuItem = (active: number, back: boolean = false): number => {
     if (!back) {
       // If moving forward, it's the active index + 1, or 0 if we are at the
       // end of the menu.
@@ -64,8 +61,7 @@ export default class Keyboard {
     // toggle to be clicked before the items are tabbable. This allows invisible
     // menu items to be skipped when moving focus with the this.
     // Make sure tabbable.
-    let tabbable: string =
-      window.Mixtape.Menu.items[focus].getAttribute("tabindex")
+    let tabbable: string = window.Mixtape.Menu.items[focus].getAttribute("tabindex")
     if (tabbable !== "-1") {
       window.Mixtape.Menu.items[focus].focus()
     } else {
@@ -90,14 +86,8 @@ export default class Keyboard {
     // It's up to the popup class to preventDefault on it's contents to
     // stop this from being triggered.
     if (activePopup.id) {
-      const popupEl: HTMLElement = document.querySelector(
-        `#${activePopup.id}`,
-      ).parentElement
-      if (
-        popupEl &&
-        (target === popupEl || popupEl?.contains(target as HTMLElement))
-      )
-        return
+      const popupEl: HTMLElement = document.querySelector(`#${activePopup.id}`).parentElement
+      if (popupEl && (target === popupEl || popupEl?.contains(target as HTMLElement))) return
       activePopup.closefn()
     }
   }

package/src/Utility/Hooks/useLocalStorage.ts

@@ -11,9 +11,7 @@ type LocalStorageProps = {
 const setLocalStorageItem = (key: string, value: any): void => {
   const stringifiedValue = JSON.stringify(value)
   window.localStorage.setItem(key, stringifiedValue)
-  window.dispatchEvent(
-    new StorageEvent("storage", { key, newValue: stringifiedValue }),
-  )
+  window.dispatchEvent(new StorageEvent("storage", { key, newValue: stringifiedValue }))
 }
 
 const removeLocalStorageItem = (key: string): void => {
@@ -21,10 +19,7 @@ const removeLocalStorageItem = (key: string): void => {
   window.dispatchEvent(new StorageEvent("storage", { key, newValue: null }))
 }
 
-const useLocalStorage = ({
-  key,
-  initialValue,
-}: LocalStorageProps): [string, SetStateCallback] => {
+const useLocalStorage = ({ key, initialValue }: LocalStorageProps): [string, SetStateCallback] => {
   const subscribe = useCallback((callback: LocalStorageCallback) => {
     window.addEventListener("storage", callback)
     return () => window.removeEventListener("storage", callback)
@@ -36,18 +31,13 @@ const useLocalStorage = ({
     throw Error("useLocalStorage is a client-only hook")
   }
 
-  const store: string = useSyncExternalStore(
-    subscribe,
-    getSnapshot,
-    getServerSnapshot,
-  )
+  const store: string = useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot)
 
   const setState = useCallback(
     (value): void => {
       try {
         const storeValue: string = JSON.parse(store) as string
-        const nextState =
-          typeof value === "function" ? value(storeValue) : value
+        const nextState = typeof value === "function" ? value(storeValue) : value
         if (nextState === undefined || nextState === null) {
           removeLocalStorageItem(key)
         } else {
@@ -62,10 +52,7 @@ const useLocalStorage = ({
   )
 
   useEffect(() => {
-    if (
-      window.localStorage.getItem(key) === null &&
-      typeof initialValue !== "undefined"
-    ) {
+    if (window.localStorage.getItem(key) === null && typeof initialValue !== "undefined") {
       setLocalStorageItem(key, initialValue)
     }
   }, [key, initialValue])

package/src/Utility/Hooks/useMediaQuery.ts

@@ -1,9 +1,6 @@
 import { useCallback, useSyncExternalStore } from "react"
 
-type MediaQueryCallBack = (
-  this: MediaQueryList,
-  ev: MediaQueryListEvent,
-) => void
+type MediaQueryCallBack = (this: MediaQueryList, ev: MediaQueryListEvent) => void
 
 const useMediaQuery = (query: string): boolean => {
   const subscribe = useCallback(

package/src/Utility/Hooks/useToggle.ts

@@ -1,8 +1,6 @@
 import { useState, useCallback } from "react"
 
-const useToggle = (
-  initialValue: boolean,
-): [boolean, (value?: boolean) => void] => {
+const useToggle = (initialValue: boolean): [boolean, (value?: boolean) => void] => {
   const [on, setOn] = useState(initialValue)
 
   const handleToggle = useCallback((value?: boolean): void => {

package/src/Utility/global.d.ts

@@ -13,11 +13,7 @@ declare global {
       }
     }
     CookieCompliance?: CookieCompliance
-    once?: (
-      name: string,
-      selector: string,
-      context?: any,
-    ) => NodeListOf<HTMLElement>
+    once?: (name: string, selector: string, context?: any) => NodeListOf<HTMLElement>
   }
 }
 

package/src/Utility/utilities.ts

@@ -37,30 +37,21 @@ export const makeCamelCase = (string: string): string => {
   if (typeof string !== "string" || !string) return ""
   const output: string = string
     .trim()
-    .replace(
-      /(?:^\w|[A-Z]|\b\w|\s+)/g,
-      (match: string, index: number): string => {
-        if (+match === 0) return ""
-        return index === 0 ? match.toLowerCase() : match.toUpperCase()
-      },
-    )
+    .replace(/(?:^\w|[A-Z]|\b\w|\s+)/g, (match: string, index: number): string => {
+      if (+match === 0) return ""
+      return index === 0 ? match.toLowerCase() : match.toUpperCase()
+    })
   return output.replace(/[^\w\s]/gi, "")
 }
 
-export const isInternalLink = (
-  href: string,
-  internalHostnames: string[],
-): boolean => {
+export const isInternalLink = (href: string, internalHostnames: string[]): boolean => {
   if (typeof href !== "string" || !href || !Array.isArray(internalHostnames)) {
     return false
   }
 
   try {
     const { hostname }: { hostname: string } = new URL(href)
-    return (
-      window.location.hostname === hostname ||
-      internalHostnames.includes(hostname)
-    )
+    return window.location.hostname === hostname || internalHostnames.includes(hostname)
   } catch (error) {
     console.error(error)
     return false
@@ -85,9 +76,7 @@ export const getElementBox = (
 ): void => {
   const observer: ResizeObserver = new ResizeObserver(entries => {
     entries.forEach(({ contentBoxSize, borderBoxSize }) => {
-      const [{ inlineSize, blockSize }] = content
-        ? contentBoxSize
-        : borderBoxSize
+      const [{ inlineSize, blockSize }] = content ? contentBoxSize : borderBoxSize
       element.style.setProperty("--inline-size", `${inlineSize.toFixed(1)}px`)
       element.style.setProperty("--block-size", `${blockSize.toFixed(1)}px`)
       if (once) observer.unobserve(element)
@@ -102,11 +91,8 @@ export const handleOutsideClick = (
   callback: () => void,
   ignored: HTMLElement[] = [],
 ): void => {
-  const {
-    target,
-    clientY,
-    clientX,
-  }: { target: EventTarget; clientY: number; clientX: number } = event
+  const { target, clientY, clientX }: { target: EventTarget; clientY: number; clientX: number } =
+    event
   // FF treating option click as outside click.
   const isOption: boolean =
     target instanceof HTMLOptionElement || target instanceof HTMLSelectElement
@@ -118,38 +104,27 @@ export const handleOutsideClick = (
   // Exit early if we can.
   if (isIgnored.length || isOption) return
   // Check if click is inside the dialog content.
-  const obs: IntersectionObserver = new IntersectionObserver(
-    ([{ boundingClientRect }]) => {
-      const { top, height, width, left } = boundingClientRect
-      const isInDialog: boolean =
-        top <= clientY &&
-        clientY <= top + height &&
-        left <= clientX &&
-        clientX <= left + width
+  const obs: IntersectionObserver = new IntersectionObserver(([{ boundingClientRect }]) => {
+    const { top, height, width, left } = boundingClientRect
+    const isInDialog: boolean =
+      top <= clientY && clientY <= top + height && left <= clientX && clientX <= left + width
 
-      if (!isInDialog) {
-        callback()
-      }
-      obs.disconnect()
-    },
-  )
+    if (!isInDialog) {
+      callback()
+    }
+    obs.disconnect()
+  })
   obs.observe(container)
 }
 
-export const handleEscape = (
-  event: KeyboardEvent,
-  callback: () => void,
-): void => {
+export const handleEscape = (event: KeyboardEvent, callback: () => void): void => {
   const { key } = event
   if (key === "Escape") {
     callback()
   }
 }
 
-export const loadOnReady = (
-  callback: (this: Window, ev: Event) => void,
-  name: string,
-): void => {
+export const loadOnReady = (callback: (this: Window, ev: Event) => void, name: string): void => {
   // @ts-expect-error Drupal is global
   if (Object.hasOwn(window, "Drupal") && Object.hasOwn(Drupal, "behaviors")) {
     // @ts-expect-error Drupal is global

package/src/constants.css

@@ -30,37 +30,16 @@
 
   color-scheme: var(--color-scheme);
 
-  --colour-background: light-dark(
-    token("colour.main.bg"),
-    token("colour.reverse.bg")
-  );
-  --colour-background-alt: light-dark(
-    token("colour.main.bgAlt"),
-    token("colour.reverse.bgAlt")
-  );
-  --colour-foreground: light-dark(
-    token("colour.main.fg"),
-    token("colour.reverse.fg")
-  );
-  --colour-foreground-alt: light-dark(
-    token("colour.main.fgAlt"),
-    token("colour.reverse.fgAlt")
-  );
-  --colour-border: light-dark(
-    token("colour.main.border"),
-    token("colour.reverse.border")
-  );
+  --colour-background: light-dark(token("colour.main.bg"), token("colour.reverse.bg"));
+  --colour-background-alt: light-dark(token("colour.main.bgAlt"), token("colour.reverse.bgAlt"));
+  --colour-foreground: light-dark(token("colour.main.fg"), token("colour.reverse.fg"));
+  --colour-foreground-alt: light-dark(token("colour.main.fgAlt"), token("colour.reverse.fgAlt"));
+  --colour-border: light-dark(token("colour.main.border"), token("colour.reverse.border"));
   --colour-link: light-dark(var(--colour-primary), var(--colour-primary-light));
 
   /* Reverse colors */
-  --colour-foreground-reverse: light-dark(
-    token("colour.reverse.fg"),
-    token("colour.main.fg")
-  );
-  --colour-background-reverse: light-dark(
-    token("colour.reverse.bg"),
-    token("colour.main.bg")
-  );
+  --colour-foreground-reverse: light-dark(token("colour.reverse.fg"), token("colour.main.fg"));
+  --colour-background-reverse: light-dark(token("colour.reverse.bg"), token("colour.main.bg"));
 
   /* State colours */
   --colour-error: oklch(45% 0.3 var(--_hue-error));

package/src/enums.ts

@@ -53,7 +53,7 @@ export enum HeadingStyles {
   M = "mx-heading--m",
   S = "mx-heading--s",
   XS = "mx-heading--xs",
-  RESET = "mx-spacing--top",
+  RESET = "mx-spacing--reset",
   RESETTOP = "mx-spacing--top-reset",
   RESETBOTTOM = "mx-spacing--bottom-reset",
 }
@@ -118,6 +118,7 @@ export enum Icons {
   FACEBOOK = "facebook",
   GOOGLE = "google",
   INFO = "info",
+  FILE = "file",
   INSTAGRAM = "instagram",
   LINKEDIN = "linkedin",
   MASTODON = "mastodon",
@@ -144,6 +145,7 @@ export enum Icons {
   TICK = "tick",
   TRASH = "trash",
   USER = "user",
+  SHARE = "share",
 }
 
 export enum GridColumns {

package/src/react.ts

@@ -2,20 +2,14 @@ export {
   default as ImageComponentProvider,
   useImageComponent,
 } from "./Utility/Context/ImageComponent"
-export {
-  default as LinkComponentProvider,
-  useLinkComponent,
-} from "./Utility/Context/LinkComponent"
+export { default as LinkComponentProvider, useLinkComponent } from "./Utility/Context/LinkComponent"
 export { default as Heading } from "./Atom/Heading/Heading"
 export { default as Media } from "./Atom/Media/Media"
 export { default as Link } from "./Atom/Link/Link"
 export { default as Text } from "./Atom/Text/Text"
 export { default as Video } from "./Atom/Video/Video"
 export { default as Button } from "./Atom/Button/Button"
-export {
-  default as Accordion,
-  useAccordion,
-} from "./Component/Accordion/Accordion"
+export { default as Accordion, useAccordion } from "./Component/Accordion/Accordion"
 export { default as AccordionTitle } from "./Component/Accordion/Components/AccordionTitle"
 export { default as AccordionTitleIcon } from "./Component/Accordion/Components/AccordionTitleIcon"
 export { default as AccordionContent } from "./Component/Accordion/Components/AccordionContent"
@@ -33,11 +27,7 @@ export { default as InPageNavigation } from "./Component/InPageNavigation/InPage
 export { default as useInPageNavigation } from "./Component/InPageNavigation/Hooks/useInPageNavigation"
 export { default as InPageAlert } from "./Component/InPageAlert/InPageAlert"
 export { default as GlobalAlert } from "./Component/GlobalAlert/GlobalAlert"
-export {
-  default as FormCheckbox,
-  Checkbox,
-  SingleCheckbox,
-} from "./Form/Checkbox/FormCheckbox"
+export { default as FormCheckbox, Checkbox, SingleCheckbox } from "./Form/Checkbox/FormCheckbox"
 export { default as FormDescription } from "./Form/Description/FormDescription"
 export { default as FormLabel } from "./Form/Label/FormLabel"
 export { default as FormRadio, Radio } from "./Form/Radio/FormRadio"
@@ -51,15 +41,9 @@ export { default as Page } from "./Layout/Page/Page"
 export { default as HeroBanner } from "./Component/HeroBanner/HeroBanner"
 export { default as Section } from "./Layout/Section/Section"
 export { default as SectionGrid } from "./Layout/Section/SectionGrid"
-export {
-  default as LinkList,
-  LinkListItem,
-} from "./Component/LinkList/LinkList"
+export { default as LinkList, LinkListItem } from "./Component/LinkList/LinkList"
 export { default as Message } from "./Component/InPageAlert/InPageAlert"
-export {
-  default as Pagination,
-  PaginationItem,
-} from "./Component/Pagination/Pagination"
+export { default as Pagination, PaginationItem } from "./Component/Pagination/Pagination"
 export {
   default as PaginationProvider,
   usePagination,

package/src/tokens.js

@@ -108,12 +108,12 @@ export default {
       hue: "260",
     },
     radius: {
-      m: "3px",
+      m: "4px",
       l: global.size.l,
       round: "50%",
     },
     shadow: {
-      colour: "oklch(0.25 0 100)",
+      colour: "oklch(0.25 0 100 / 0.15)",
       size: global.size.xs,
     },
     ratio: "16 / 9",

package/dist/build/chunks/disclosure-widget-DVpnRsTI.js

@@ -1,126 +0,0 @@
-import { m as makeAnchor } from "./utilities-DXELy_An.js";
-class DisclosureWidget {
-  constructor(trigger, element, overrides, context = document) {
-    this.init = () => {
-      if (Object.prototype.hasOwnProperty.call(this.trigger, "disclosureWidget"))
-        return;
-      const { attribute, setInitialAttribute } = this.options;
-      this.trigger.disclosureWidget = this;
-      if (setInitialAttribute) this.element.setAttribute(attribute, "");
-      this.attach();
-    };
-    this.handleToggle = () => {
-      const { attribute, setInitialAttribute } = this.options;
-      this.element.toggleAttribute(attribute);
-      const hasAttribute = this.element.hasAttribute(attribute);
-      this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute;
-      this.trigger.setAttribute("aria-expanded", String(this.isOpen));
-      const newEvent = new CustomEvent(
-        "disclosure-toggle",
-        {
-          bubbles: true,
-          cancelable: true,
-          detail: {
-            isOpen: this.isOpen,
-            id: this.id,
-            options: this.options,
-            target: this.element
-          }
-        }
-      );
-      this.trigger.dispatchEvent(newEvent);
-    };
-    this.handleMouse = (event) => {
-      const { currentTarget, type, relatedTarget } = event;
-      if (type === "mouseover" || type === "mouseout") {
-        const triggerParent = this.trigger.parentNode;
-        if (triggerParent !== currentTarget || triggerParent.contains(relatedTarget))
-          return;
-      } else if (this.trigger !== currentTarget) return;
-      const { shouldPreventDefault } = this.options;
-      this.handleToggle();
-      if (shouldPreventDefault) {
-        event.preventDefault();
-        event.stopPropagation();
-      }
-    };
-    this.handleKeyboard = (event) => {
-      const { key, target } = event;
-      if (this.trigger !== target) return;
-      const { isOpen } = this;
-      const { shouldPreventDefault } = this.options;
-      switch (key) {
-        // Down/Enter should open it.
-        case "ArrowDown":
-        case "Enter":
-          if (!isOpen) this.handleToggle();
-          if (shouldPreventDefault) event.preventDefault();
-          break;
-        // Up/Esc should close it.
-        case "ArrowUp":
-        case "Escape":
-          if (isOpen) this.handleToggle();
-          if (shouldPreventDefault) event.preventDefault();
-          break;
-      }
-    };
-    this.attach = () => {
-      if (this.attached) return;
-      const { clickEvent } = this.options;
-      if (clickEvent === "mouseover") {
-        const parent = this.trigger.parentNode;
-        parent.addEventListener("mouseover", this.handleMouse);
-        parent.addEventListener("mouseout", this.handleMouse);
-      } else {
-        this.trigger.addEventListener("click", this.handleMouse);
-      }
-      this.trigger.addEventListener("keydown", this.handleKeyboard);
-      this.trigger.setAttribute("aria-expanded", "false");
-      if (!this.trigger.hasAttribute("aria-controls"))
-        this.trigger.setAttribute("aria-controls", this.id);
-      this.attached = true;
-    };
-    this.detach = () => {
-      if (!this.attached) return;
-      if (this.isOpen) {
-        this.handleToggle();
-      }
-      const { clickEvent } = this.options;
-      if (clickEvent === "mouseover") {
-        const parent = this.trigger.parentNode;
-        parent.removeEventListener("mouseover", this.handleMouse);
-        parent.removeEventListener("mouseout", this.handleMouse);
-      } else {
-        this.trigger.removeEventListener("click", this.handleMouse);
-      }
-      this.trigger.removeEventListener("keydown", this.handleKeyboard);
-      this.trigger.removeAttribute("aria-expanded");
-      this.attached = false;
-    };
-    this.generatedId = () => {
-      const string = this.trigger?.textContent?.trim();
-      return !string ? "" : makeAnchor(string);
-    };
-    if (!trigger) {
-      throw new Error("toggle is required.");
-    }
-    if (!element) {
-      throw new Error("element is required.");
-    }
-    const options = {
-      attribute: "inert",
-      shouldPreventDefault: true,
-      setInitialAttribute: true,
-      clickEvent: "click"
-    };
-    this.options = { ...options, ...overrides };
-    this.context = context || document;
-    this.trigger = trigger;
-    this.element = element;
-    this.id = this.element.id || this.generatedId();
-  }
-}
-export {
-  DisclosureWidget as D
-};
-//# sourceMappingURL=disclosure-widget-DVpnRsTI.js.map

package/dist/build/chunks/disclosure-widget-DVpnRsTI.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"disclosure-widget-DVpnRsTI.js","sources":["../../../src/Utility/Elements/disclosure-widget.ts"],"sourcesContent":["/**\n * Class for a generic Disclosure Widget.\n */\nimport { makeAnchor } from \"../utilities\"\n\ntype DisclosureWidgetOptions = {\n  attribute?: string\n  shouldPreventDefault?: boolean\n  setInitialAttribute?: boolean\n  clickEvent?: \"click\" | \"mouseover\"\n}\n\nexport type DisclosureWidgetEvent = {\n  isOpen: boolean\n  id: string\n  options: DisclosureWidgetOptions\n  target: Element\n}\n\nexport default class DisclosureWidget {\n  options: DisclosureWidgetOptions\n  context: Document | Element\n  trigger: Element & { disclosureWidget?: DisclosureWidget }\n  element: Element\n  id: string\n  isOpen?: boolean\n  attached?: boolean\n\n  constructor(\n    trigger: Element,\n    element: Element,\n    overrides?: DisclosureWidgetOptions,\n    context: Element | Document = document,\n  ) {\n    if (!trigger) {\n      throw new Error(\"toggle is required.\")\n    }\n    if (!element) {\n      throw new Error(\"element is required.\")\n    }\n    const options: DisclosureWidgetOptions = {\n      attribute: \"inert\",\n      shouldPreventDefault: true,\n      setInitialAttribute: true,\n      clickEvent: \"click\",\n    }\n\n    this.options = { ...options, ...overrides }\n    this.context = context || document\n    this.trigger = trigger\n    this.element = element\n    this.id = this.element.id || this.generatedId()\n  }\n\n  init = (): void => {\n    if (Object.prototype.hasOwnProperty.call(this.trigger, \"disclosureWidget\"))\n      return\n    const { attribute, setInitialAttribute } = this.options\n    this.trigger.disclosureWidget = this\n    if (setInitialAttribute) this.element.setAttribute(attribute, \"\")\n    this.attach()\n  }\n\n  handleToggle = (): void => {\n    const { attribute, setInitialAttribute } = this.options\n    this.element.toggleAttribute(attribute)\n    const hasAttribute: boolean = this.element.hasAttribute(attribute)\n    this.isOpen = setInitialAttribute ? !hasAttribute : hasAttribute\n    this.trigger.setAttribute(\"aria-expanded\", String(this.isOpen))\n    const newEvent: CustomEvent<DisclosureWidgetEvent> = new CustomEvent(\n      \"disclosure-toggle\",\n      {\n        bubbles: true,\n        cancelable: true,\n        detail: {\n          isOpen: this.isOpen,\n          id: this.id,\n          options: this.options,\n          target: this.element,\n        },\n      },\n    )\n    this.trigger.dispatchEvent(newEvent)\n  }\n\n  handleMouse = (event: MouseEvent): void => {\n    const { currentTarget, type, relatedTarget } = event\n\n    if (type === \"mouseover\" || type === \"mouseout\") {\n      const triggerParent = this.trigger.parentNode\n      if (\n        triggerParent !== currentTarget ||\n        triggerParent.contains(relatedTarget as HTMLElement)\n      )\n        return\n    } else if (this.trigger !== currentTarget) return\n\n    const { shouldPreventDefault } = this.options\n    this.handleToggle()\n    if (shouldPreventDefault) {\n      event.preventDefault()\n      event.stopPropagation()\n    }\n  }\n\n  handleKeyboard = (event: KeyboardEvent): void => {\n    const { key, target } = event\n    if (this.trigger !== target) return\n    const { isOpen } = this\n    const { shouldPreventDefault } = this.options\n\n    switch (key) {\n      // Down/Enter should open it.\n      case \"ArrowDown\":\n      case \"Enter\":\n        if (!isOpen) this.handleToggle()\n        if (shouldPreventDefault) event.preventDefault()\n        break\n\n      // Up/Esc should close it.\n      case \"ArrowUp\":\n      case \"Escape\":\n        if (isOpen) this.handleToggle()\n        if (shouldPreventDefault) event.preventDefault()\n        break\n\n      default:\n        break\n    }\n  }\n\n  attach = (): void => {\n    if (this.attached) return\n    const { clickEvent } = this.options\n    if (clickEvent === \"mouseover\") {\n      const parent = this.trigger.parentNode\n      parent.addEventListener(\"mouseover\", this.handleMouse)\n      parent.addEventListener(\"mouseout\", this.handleMouse)\n    } else {\n      this.trigger.addEventListener(\"click\", this.handleMouse)\n    }\n    this.trigger.addEventListener(\"keydown\", this.handleKeyboard)\n\n    this.trigger.setAttribute(\"aria-expanded\", \"false\")\n    if (!this.trigger.hasAttribute(\"aria-controls\"))\n      this.trigger.setAttribute(\"aria-controls\", this.id)\n    this.attached = true\n  }\n\n  detach = (): void => {\n    if (!this.attached) return\n    if (this.isOpen) {\n      this.handleToggle()\n    }\n    const { clickEvent } = this.options\n    if (clickEvent === \"mouseover\") {\n      const parent = this.trigger.parentNode\n      parent.removeEventListener(\"mouseover\", this.handleMouse)\n      parent.removeEventListener(\"mouseout\", this.handleMouse)\n    } else {\n      this.trigger.removeEventListener(\"click\", this.handleMouse)\n    }\n    this.trigger.removeEventListener(\"keydown\", this.handleKeyboard)\n\n    this.trigger.removeAttribute(\"aria-expanded\")\n    this.attached = false\n  }\n\n  generatedId = (): string => {\n    const string: string | undefined = this.trigger?.textContent?.trim()\n    return !string ? \"\" : makeAnchor(string)\n  }\n}\n"],"names":[],"mappings":";AAmBA,MAAqB,iBAAiB;AAAA,EASpC,YACE,SACA,SACA,WACA,UAA8B,UAC9B;AAqBF,SAAA,OAAO,MAAY;AACjB,UAAI,OAAO,UAAU,eAAe,KAAK,KAAK,SAAS,kBAAkB;AACvE;AACF,YAAM,EAAE,WAAW,oBAAA,IAAwB,KAAK;AAChD,WAAK,QAAQ,mBAAmB;AAChC,UAAI,oBAAqB,MAAK,QAAQ,aAAa,WAAW,EAAE;AAChE,WAAK,OAAA;AAAA,IACP;AAEA,SAAA,eAAe,MAAY;AACzB,YAAM,EAAE,WAAW,oBAAA,IAAwB,KAAK;AAChD,WAAK,QAAQ,gBAAgB,SAAS;AACtC,YAAM,eAAwB,KAAK,QAAQ,aAAa,SAAS;AACjE,WAAK,SAAS,sBAAsB,CAAC,eAAe;AACpD,WAAK,QAAQ,aAAa,iBAAiB,OAAO,KAAK,MAAM,CAAC;AAC9D,YAAM,WAA+C,IAAI;AAAA,QACvD;AAAA,QACA;AAAA,UACE,SAAS;AAAA,UACT,YAAY;AAAA,UACZ,QAAQ;AAAA,YACN,QAAQ,KAAK;AAAA,YACb,IAAI,KAAK;AAAA,YACT,SAAS,KAAK;AAAA,YACd,QAAQ,KAAK;AAAA,UAAA;AAAA,QACf;AAAA,MACF;AAEF,WAAK,QAAQ,cAAc,QAAQ;AAAA,IACrC;AAEA,SAAA,cAAc,CAAC,UAA4B;AACzC,YAAM,EAAE,eAAe,MAAM,cAAA,IAAkB;AAE/C,UAAI,SAAS,eAAe,SAAS,YAAY;AAC/C,cAAM,gBAAgB,KAAK,QAAQ;AACnC,YACE,kBAAkB,iBAClB,cAAc,SAAS,aAA4B;AAEnD;AAAA,MACJ,WAAW,KAAK,YAAY,cAAe;AAE3C,YAAM,EAAE,yBAAyB,KAAK;AACtC,WAAK,aAAA;AACL,UAAI,sBAAsB;AACxB,cAAM,eAAA;AACN,cAAM,gBAAA;AAAA,MACR;AAAA,IACF;AAEA,SAAA,iBAAiB,CAAC,UAA+B;AAC/C,YAAM,EAAE,KAAK,OAAA,IAAW;AACxB,UAAI,KAAK,YAAY,OAAQ;AAC7B,YAAM,EAAE,WAAW;AACnB,YAAM,EAAE,yBAAyB,KAAK;AAEtC,cAAQ,KAAA;AAAA;AAAA,QAEN,KAAK;AAAA,QACL,KAAK;AACH,cAAI,CAAC,OAAQ,MAAK,aAAA;AAClB,cAAI,4BAA4B,eAAA;AAChC;AAAA;AAAA,QAGF,KAAK;AAAA,QACL,KAAK;AACH,cAAI,aAAa,aAAA;AACjB,cAAI,4BAA4B,eAAA;AAChC;AAAA,MAGA;AAAA,IAEN;AAEA,SAAA,SAAS,MAAY;AACnB,UAAI,KAAK,SAAU;AACnB,YAAM,EAAE,eAAe,KAAK;AAC5B,UAAI,eAAe,aAAa;AAC9B,cAAM,SAAS,KAAK,QAAQ;AAC5B,eAAO,iBAAiB,aAAa,KAAK,WAAW;AACrD,eAAO,iBAAiB,YAAY,KAAK,WAAW;AAAA,MACtD,OAAO;AACL,aAAK,QAAQ,iBAAiB,SAAS,KAAK,WAAW;AAAA,MACzD;AACA,WAAK,QAAQ,iBAAiB,WAAW,KAAK,cAAc;AAE5D,WAAK,QAAQ,aAAa,iBAAiB,OAAO;AAClD,UAAI,CAAC,KAAK,QAAQ,aAAa,eAAe;AAC5C,aAAK,QAAQ,aAAa,iBAAiB,KAAK,EAAE;AACpD,WAAK,WAAW;AAAA,IAClB;AAEA,SAAA,SAAS,MAAY;AACnB,UAAI,CAAC,KAAK,SAAU;AACpB,UAAI,KAAK,QAAQ;AACf,aAAK,aAAA;AAAA,MACP;AACA,YAAM,EAAE,eAAe,KAAK;AAC5B,UAAI,eAAe,aAAa;AAC9B,cAAM,SAAS,KAAK,QAAQ;AAC5B,eAAO,oBAAoB,aAAa,KAAK,WAAW;AACxD,eAAO,oBAAoB,YAAY,KAAK,WAAW;AAAA,MACzD,OAAO;AACL,aAAK,QAAQ,oBAAoB,SAAS,KAAK,WAAW;AAAA,MAC5D;AACA,WAAK,QAAQ,oBAAoB,WAAW,KAAK,cAAc;AAE/D,WAAK,QAAQ,gBAAgB,eAAe;AAC5C,WAAK,WAAW;AAAA,IAClB;AAEA,SAAA,cAAc,MAAc;AAC1B,YAAM,SAA6B,KAAK,SAAS,aAAa,KAAA;AAC9D,aAAO,CAAC,SAAS,KAAK,WAAW,MAAM;AAAA,IACzC;AAzIE,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,qBAAqB;AAAA,IACvC;AACA,QAAI,CAAC,SAAS;AACZ,YAAM,IAAI,MAAM,sBAAsB;AAAA,IACxC;AACA,UAAM,UAAmC;AAAA,MACvC,WAAW;AAAA,MACX,sBAAsB;AAAA,MACtB,qBAAqB;AAAA,MACrB,YAAY;AAAA,IAAA;AAGd,SAAK,UAAU,EAAE,GAAG,SAAS,GAAG,UAAA;AAChC,SAAK,UAAU,WAAW;AAC1B,SAAK,UAAU;AACf,SAAK,UAAU;AACf,SAAK,KAAK,KAAK,QAAQ,MAAM,KAAK,YAAA;AAAA,EACpC;AAwHF;"}