{"version":3,"file":"accordion-elements-section-xxxxxxxxxxxxxxxxxxxx.min.js","mappings":"yBAQA,MAAMA,yBAAyBC,YACrBC,kCAAoCC,KAAKC,6BAA6BC,KAAKF,MAE5E,iBAAAG,GACLH,KAAKI,uBACLJ,KAAKK,iBAAiB,gCAAiCL,KAAKD,kCAC9D,CAEO,oBAAAO,GACLN,KAAKO,oBAAoB,gCACvBP,KAAKD,kCACT,CAEQ,oBAAAK,GACDJ,KAAKQ,aACRR,KAAKS,aAAa,CAAEC,KAAM,SAC1BV,KAAKQ,WAAWG,UAAY,qJAEhC,CAEQ,4BAAAV,CAA6BW,GAGnC,MAAMC,EACJb,KAAKc,cAA6B,wCAChCD,IACFA,EAAoBE,QAAQC,SAAW,SAGzC,MAAMC,EAA6BL,EAAMM,OACrCD,IAAgBJ,IAIpBI,EAAYF,QAAQC,SAAW,OACjC,EASGG,eAAeC,IAAI,sBACtBD,eAAeE,OAAO,oBAAqBxB,kBC1C7C,MAAMyB,sBAAsBxB,YAC1B,6BAAkByB,GAChB,MAAO,CACL,gBAEJ,CASQC,qBAAuBxB,KAAKyB,gBAAgBvB,KAAKF,MAElD,iBAAAG,GACLH,KAAKI,uBAEUJ,KAAKQ,WAAWM,cAAc,UACtCT,iBAAiB,QAASL,KAAKwB,sBAEtCxB,KAAK0B,QACP,CAEO,oBAAApB,GACUN,KAAKQ,WAAWM,cAAc,UACtCP,oBAAoB,QAASP,KAAKwB,qBAC3C,CAEQ,oBAAApB,GACDJ,KAAKQ,aACRR,KAAKS,aAAa,CAAEC,KAAM,SAC1BV,KAAKQ,WAAWG,UAAY,ipDAEhC,CAEO,wBAAAgB,CAAyBC,EAAeC,EAAkBC,GAC/D9B,KAAKI,uBAEDJ,KAAK+B,aAAeD,IAAaD,GACnC7B,KAAK0B,QAET,CAEQ,MAAAA,GACS1B,KAAKQ,WAAWM,cAAc,UACtCkB,aAAa,gBAAiBhC,KAAKe,QAAQC,UAAY,QAChE,CAEQ,eAAAS,CAAgBQ,GACtB,MAAMrB,EAAQ,IAAIsB,MAAM,gCAAiC,CACvDC,YAAY,EACZC,SAAS,IAEXpC,KAAKqC,cAAczB,EACrB,EAaGO,eAAeC,IAAI,mBACtBD,eAAeE,OAAO,iBAAkBC","sources":["webpack://lange/./scripts/sections/accordion-elements/accordion/index.ts","webpack://lange/./scripts/sections/accordion-elements/accordion-item/index.ts"],"sourcesContent":["import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * A custom element that handles accordion functionality. Accordion items should be passed as\n * <accordion-item> elements into the default slot.\n */\nclass AccordionElement extends HTMLElement implements CustomElement {\n  private onAccordionItemHeaderClickedBound = this.onAccordionItemHeaderClicked.bind(this);\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n    this.addEventListener('accordion-item-header-clicked', this.onAccordionItemHeaderClickedBound);\n  }\n\n  public disconnectedCallback() {\n    this.removeEventListener('accordion-item-header-clicked',\n      this.onAccordionItemHeaderClickedBound);\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\n  }\n\n  private onAccordionItemHeaderClicked(event: Event) {\n    type AccordionItem = HTMLElementTagNameMap['accordion-item'];\n\n    const currentlyActiveItem =\n      this.querySelector<AccordionItem>('accordion-item[data-expanded=\"true\"]');\n    if (currentlyActiveItem) {\n      currentlyActiveItem.dataset.expanded = 'false';\n    }\n\n    const clickedItem = <AccordionItem>event.target;\n    if (clickedItem === currentlyActiveItem) {\n      return;\n    }\n\n    clickedItem.dataset.expanded = 'true';\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'accordion-element': AccordionElement;\n  }\n}\n\nif (!customElements.get('accordion-element')) {\n  customElements.define('accordion-element', AccordionElement);\n}\n","import type { CustomElement } from '@integrabeauty/custom-elements';\nimport html from './index.html';\nimport styles from './index.scss';\n\n/**\n * A custom element representing a single item in an accordion component.\n *\n * The AccordionItem component manages an `expanded` state through the `data-expanded` attribute and\n * emits a custom event when its header is clicked. The parent <accordion-element> element controls\n * which item should be expanded/collapsed by setting the `data-expanded` attribute.\n */\nclass AccordionItem extends HTMLElement implements CustomElement {\n  public static get observedAttributes() {\n    return [\n      'data-expanded'\n    ];\n  }\n\n  declare readonly dataset: {\n    /**\n     * Whether the component is expanded/collapsed.\n     */\n    expanded: 'false' | 'true';\n  };\n\n  private onHeaderClickedBound = this.onHeaderClicked.bind(this);\n\n  public connectedCallback() {\n    this.initializeShadowRoot();\n\n    const button = this.shadowRoot.querySelector('button');\n    button.addEventListener('click', this.onHeaderClickedBound);\n\n    this.render();\n  }\n\n  public disconnectedCallback() {\n    const button = this.shadowRoot.querySelector('button');\n    button.removeEventListener('click', this.onHeaderClickedBound);\n  }\n\n  private initializeShadowRoot() {\n    if (!this.shadowRoot) {\n      this.attachShadow({ mode: 'open' });\n      this.shadowRoot.innerHTML = `<style>${styles}</style>${html}`;\n    }\n  }\n\n  public attributeChangedCallback(_name: string, oldValue: string, newValue: string) {\n    this.initializeShadowRoot();\n\n    if (this.isConnected && newValue !== oldValue) {\n      this.render();\n    }\n  }\n\n  private render() {\n    const button = this.shadowRoot.querySelector('button');\n    button.setAttribute('aria-expanded', this.dataset.expanded || 'false');\n  }\n\n  private onHeaderClicked(_event: Event) {\n    const event = new Event('accordion-item-header-clicked', {\n      cancelable: false,\n      bubbles: true\n    });\n    this.dispatchEvent(event);\n  }\n}\n\ndeclare global {\n  interface WindowEventMap {\n    'accordion-item-header-clicked': Event;\n  }\n\n  interface HTMLElementTagNameMap {\n    'accordion-item': AccordionItem;\n  }\n}\n\nif (!customElements.get('accordion-item')) {\n  customElements.define('accordion-item', AccordionItem);\n}\n"],"names":["AccordionElement","HTMLElement","onAccordionItemHeaderClickedBound","this","onAccordionItemHeaderClicked","bind","connectedCallback","initializeShadowRoot","addEventListener","disconnectedCallback","removeEventListener","shadowRoot","attachShadow","mode","innerHTML","event","currentlyActiveItem","querySelector","dataset","expanded","clickedItem","target","customElements","get","define","AccordionItem","observedAttributes","onHeaderClickedBound","onHeaderClicked","render","attributeChangedCallback","_name","oldValue","newValue","isConnected","setAttribute","_event","Event","cancelable","bubbles","dispatchEvent"],"sourceRoot":""}