{"version":3,"file":"accordion.component.bundle.js","sources":["../../../../Frontend/js/components/accordion.component.ts"],"sourcesContent":["//This accordion is a replacement for the semantic details+summary to add pretty animations to it\r\n//and to keep track of whenever another details/summary in the same block closes.\r\n//Aria's and tabindexes for optional interactive elements are added to keep in line with wcag needs.\r\nexport const setupAccordion = (): void => {\r\n  const accordionArray = document.querySelectorAll<HTMLElement>(\"[data-accordion]\")\r\n  accordionArray.forEach((acc) => {\r\n    acc.classList.add(\"accordion\")\r\n    const accordionButton = acc.querySelector<HTMLElement>(\"BUTTON\")\r\n    accordionButton?.addEventListener(\"click\", onClick)\r\n    accordionButton?.addEventListener(\"keypress\", onClick)\r\n    acc.setAttribute(\"aria-expanded\", \"false\")\r\n\r\n    acc.querySelectorAll<HTMLElement>(\"[data-accordion-interactive]\").forEach((element) => {\r\n      element.tabIndex = -1\r\n    })\r\n  })\r\n\r\n  //Todo: add option for not closing when clicking anywhere outside the menu.\r\n  if (accordionArray) {\r\n    document.addEventListener(\"click\", closeAllMenus)\r\n  }\r\n}\r\n\r\nconst onClick = (e: Event): void => {\r\n  const target = e.target as HTMLElement\r\n  const accordion = target.closest(\".accordion\") as HTMLElement | null\r\n\r\n  if (accordion && accordion.hasAttribute(\"data-accordion\")) {\r\n    if (accordion.hasAttribute(\"open\")) {\r\n      closeMenu(accordion)\r\n    } else {\r\n      document.querySelectorAll<HTMLElement>(\"[data-accordion]\").forEach((item) => {\r\n        closeMenu(item)\r\n      })\r\n      openMenu(accordion)\r\n    }\r\n  }\r\n}\r\n\r\nconst closeAllMenus = (e: Event): void => {\r\n  const target = e.target as HTMLElement\r\n  const accordion = target.closest(\".accordion\") as HTMLElement | null\r\n  if (!accordion) {\r\n    document.querySelectorAll<HTMLElement>(\"[data-accordion]\").forEach((item) => {\r\n      closeMenu(item)\r\n    })\r\n  }\r\n}\r\n\r\nconst closeMenu = (element: HTMLElement): void => {\r\n  element.removeAttribute(\"open\")\r\n  element.setAttribute(\"aria-expanded\", \"false\")\r\n  element.classList.remove(\"accordion-active\")\r\n  element.querySelectorAll<HTMLElement>(\"[data-accordion-interactive]\").forEach((subElement) => {\r\n    subElement.tabIndex = -1\r\n  })\r\n}\r\n\r\nconst openMenu = (element: HTMLElement): void => {\r\n  element.setAttribute(\"open\", \"true\")\r\n  element.setAttribute(\"aria-expanded\", \"true\")\r\n  element.classList.add(\"accordion-active\")\r\n\r\n  element.querySelectorAll<HTMLElement>(\"[data-accordion-interactive]\").forEach((subElement) => {\r\n    subElement.tabIndex = 0\r\n  })\r\n  element.focus()\r\n}\r\n"],"names":["setupAccordion","accordionArray","acc","accordionButton","onClick","element","closeAllMenus","e","accordion","closeMenu","item","openMenu","subElement"],"mappings":"AAGO,MAAMA,EAAiB,IAAY,CAClC,MAAAC,EAAiB,SAAS,iBAA8B,kBAAkB,EACjEA,EAAA,QAASC,GAAQ,CAC1BA,EAAA,UAAU,IAAI,WAAW,EACvB,MAAAC,EAAkBD,EAAI,cAA2B,QAAQ,EAC9CC,GAAA,iBAAiB,QAASC,CAAO,EACjCD,GAAA,iBAAiB,WAAYC,CAAO,EACjDF,EAAA,aAAa,gBAAiB,OAAO,EAEzCA,EAAI,iBAA8B,8BAA8B,EAAE,QAASG,GAAY,CACrFA,EAAQ,SAAW,EAAA,CACpB,CAAA,CACF,EAGGJ,GACO,SAAA,iBAAiB,QAASK,CAAa,CAEpD,EAEMF,EAAWG,GAAmB,CAE5B,MAAAC,EADSD,EAAE,OACQ,QAAQ,YAAY,EAEzCC,GAAaA,EAAU,aAAa,gBAAgB,IAClDA,EAAU,aAAa,MAAM,EAC/BC,EAAUD,CAAS,GAEnB,SAAS,iBAA8B,kBAAkB,EAAE,QAASE,GAAS,CAC3ED,EAAUC,CAAI,CAAA,CACf,EACDC,EAASH,CAAS,GAGxB,EAEMF,EAAiBC,GAAmB,CACzBA,EAAE,OACQ,QAAQ,YAAY,GAE3C,SAAS,iBAA8B,kBAAkB,EAAE,QAASG,GAAS,CAC3ED,EAAUC,CAAI,CAAA,CACf,CAEL,EAEMD,EAAaJ,GAA+B,CAChDA,EAAQ,gBAAgB,MAAM,EACtBA,EAAA,aAAa,gBAAiB,OAAO,EACrCA,EAAA,UAAU,OAAO,kBAAkB,EAC3CA,EAAQ,iBAA8B,8BAA8B,EAAE,QAASO,GAAe,CAC5FA,EAAW,SAAW,EAAA,CACvB,CACH,EAEMD,EAAYN,GAA+B,CACvCA,EAAA,aAAa,OAAQ,MAAM,EAC3BA,EAAA,aAAa,gBAAiB,MAAM,EACpCA,EAAA,UAAU,IAAI,kBAAkB,EAExCA,EAAQ,iBAA8B,8BAA8B,EAAE,QAASO,GAAe,CAC5FA,EAAW,SAAW,CAAA,CACvB,EACDP,EAAQ,MAAM,CAChB"}