{"version":3,"sources":["../src/elements/accordion.ts"],"sourcesContent":["import { html, LitElement } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { stylesBase } from '../styles/elements/accordion';\nimport KemetAccordionPanel from './accordion-panel';\n\n/**\n * @since 1.0.0\n * @status stable\n *\n * @tagname kemet-accordion\n * @summary A component that acts like a standard accordion.\n *\n * @prop {number} currentPanel - The index value for the most recently opened panel\n * @prop {boolean} togglePanels - Support for closing all inactive panels when one is opened\n *\n *\n */\n\n@customElement('kemet-accordion')\nexport default class KemetAccordion extends LitElement {\n static styles = [stylesBase];\n\n @property({ type: Number, attribute: 'current-panel' })\n currentPanel: number = 0;\n\n @property({ type: Boolean, attribute: 'toggle-panels' })\n togglePanels: boolean = false;\n\n @state()\n panels: NodeListOf;\n\n @state()\n onKeyDown: (event: KeyboardEvent) => void;\n\n @state()\n currentPanelFocus: number;\n\n constructor() {\n super();\n\n // bindings\n this.addEventListener('kemet-opened', this.handlePanelOpened.bind(this));\n }\n\n firstUpdated() {\n this.onKeyDown = event => this.handleKeyDown(event);\n }\n\n render() {\n return html` this.handleSlotChange()}>`;\n }\n\n handleSlotChange() {\n this.panels = this.querySelectorAll('kemet-accordion-panel');\n\n this.panels.forEach((panel: KemetAccordionPanel, index) => {\n panel.index = index;\n panel.removeEventListener('keydown', this.onKeyDown);\n panel.addEventListener('keydown', this.onKeyDown);\n });\n }\n\n handlePanelOpened(event: CustomEvent) {\n this.panels?.forEach((panel: KemetAccordionPanel) => {\n if (panel === event.detail) {\n this.currentPanel = panel.index;\n }\n });\n\n if (this.togglePanels) {\n this.panels?.forEach((panel: KemetAccordionPanel) => {\n if (panel !== event.detail) {\n panel.opened = false;\n }\n });\n }\n }\n\n navigatePanels(direction: string) {\n switch (direction) {\n case 'home':\n this.currentPanel = 0;\n break;\n case 'end':\n this.currentPanel = this.panels.length - 1;\n break;\n case 'next':\n this.currentPanel += 1;\n break;\n case 'prev':\n this.currentPanel -= 1;\n break;\n default:\n this.currentPanelFocus = 0;\n break;\n }\n\n if (this.currentPanel > this.panels.length - 1) this.currentPanel = 0;\n if (this.currentPanel < 0) this.currentPanel = this.panels.length - 1;\n\n this.panels[this.currentPanel].shadowRoot.querySelector('button').focus();\n }\n\n handleKeyDown(event: KeyboardEvent) {\n const target = event.target as HTMLElement;\n switch (event.key) {\n case 'Enter':\n case 'Space':\n event.preventDefault();\n target.click();\n break;\n case 'ArrowLeft':\n case 'ArrowUp':\n event.preventDefault();\n this.navigatePanels('prev');\n break;\n case 'ArrowRight':\n case 'ArrowDown':\n event.preventDefault();\n this.navigatePanels('next');\n break;\n case 'End':\n event.preventDefault();\n this.navigatePanels('end');\n break;\n case 'Home':\n event.preventDefault();\n this.navigatePanels('home');\n break;\n default:\n break;\n }\n }\n\n /**\n * Expands all panels in the accordion\n * @public\n * @method expandAll\n * @returns {void}\n */\n expandAll(): void {\n this.panels.forEach((panel) => {\n panel.opened = true;\n });\n }\n\n /**\n * Collapses all panels in the accordion\n * @public\n * @method collapseAll\n * @returns {void}\n */\n collapseAll(): void {\n this.panels.forEach((panel) => {\n panel.opened = false;\n });\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kemet-accordion': KemetAccordion\n }\n}\n"],"mappings":"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","names":[]}