{"version":3,"sources":["webpack://@verndale/toolkit/./src/js/modules/accordion.ts","webpack://@verndale/toolkit/./node_modules/@motionone/dom/dist/animate/create-animate.es.js","webpack://@verndale/toolkit/./node_modules/@motionone/dom/dist/animate/index.es.js","webpack://@verndale/toolkit/./node_modules/motion/dist/animate.es.js"],"names":["Accordion","Component","el","trigger","e","target","openedPanel","id","panel","innerPannel","animate","createAnimate","AnimatePolyfill","elements","keyframes","options","numElements","animationFactories","i","element","key","valueOptions","animation","animateProgress","keyframesOrOptions"],"mappings":"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","file":"scripts/8000.2600f96918b080badbb2.js","sourcesContent":["import { Component } from '@verndale/core';\nimport { animate } from 'motion';\n\nclass Accordion extends Component {\n  constructor(el: HTMLElement) {\n    super(el);\n\n    if (this.dom.openedPanel) {\n      this.openPanel(\n        (this.dom.openedPanel as HTMLButtonElement).getAttribute(\n          'aria-controls'\n        ) as string\n      );\n    }\n  }\n\n  setupDefaults() {\n    this.dom = {\n      triggers: this.el.querySelectorAll('.accordion__trigger'),\n      openedPanel: this.el.querySelector<HTMLElement>(\n        '.accordion__trigger[aria-expanded=\"true\"]'\n      )\n    };\n  }\n\n  addListeners() {\n    (this.dom.triggers as NodeListOf<HTMLButtonElement>).forEach(trigger => {\n      trigger.addEventListener('click', this.toggleAccordion.bind(this));\n    });\n  }\n\n  toggleAccordion(e: Event) {\n    const target = e.currentTarget as HTMLButtonElement;\n\n    const isOpen = target.getAttribute('aria-expanded') === 'true';\n\n    if (isOpen) {\n      target.setAttribute('aria-expanded', 'false');\n      this.closePanel(target.getAttribute('aria-controls') as string);\n    } else {\n      const openedPanel = this.el.querySelector(\n        '.accordion__trigger[aria-expanded=\"true\"]'\n      );\n\n      if (openedPanel) {\n        openedPanel.setAttribute('aria-expanded', 'false');\n        this.closePanel(openedPanel.getAttribute('aria-controls') as string);\n      }\n\n      target.setAttribute('aria-expanded', 'true');\n      this.openPanel(target.getAttribute('aria-controls') as string);\n    }\n  }\n\n  openPanel(id: string) {\n    const panel = this.el.querySelector<HTMLDivElement>(\n      `.accordion__panel[id=\"${id}\"]`\n    );\n    const innerPannel = panel?.querySelector<HTMLDivElement>(\n      '.accordion__panel-inner'\n    );\n\n    panel &&\n      animate(\n        panel,\n        { height: `${innerPannel?.offsetHeight}px` },\n        { duration: 0.3, easing: 'ease-in' }\n      ).finished.then(() => {\n        panel.style.height = 'auto';\n      });\n  }\n\n  closePanel(id: string) {\n    const panel = this.el.querySelector<HTMLDivElement>(\n      `.accordion__panel[id=\"${id}\"]`\n    );\n    const innerPannel = panel?.querySelector<HTMLDivElement>(\n      '.accordion__panel-inner'\n    );\n\n    panel &&\n      animate(\n        panel,\n        { height: [`${innerPannel?.offsetHeight}px`, 0] },\n        { duration: 0.3, easing: 'ease-in' }\n      );\n  }\n}\n\nexport default Accordion;\n","import { invariant } from 'hey-listen';\nimport { animateStyle } from './animate-style.es.js';\nimport { getOptions } from './utils/options.es.js';\nimport { resolveElements } from '../utils/resolve-elements.es.js';\nimport { withControls } from './utils/controls.es.js';\nimport { resolveOption } from '../utils/stagger.es.js';\n\nfunction createAnimate(AnimatePolyfill) {\n    return function animate(elements, keyframes, options = {}) {\n        elements = resolveElements(elements);\n        const numElements = elements.length;\n        invariant(Boolean(numElements), \"No valid element provided.\");\n        invariant(Boolean(keyframes), \"No keyframes defined.\");\n        /**\n         * Create and start new animations\n         */\n        const animationFactories = [];\n        for (let i = 0; i < numElements; i++) {\n            const element = elements[i];\n            for (const key in keyframes) {\n                const valueOptions = getOptions(options, key);\n                valueOptions.delay = resolveOption(valueOptions.delay, i, numElements);\n                const animation = animateStyle(element, key, keyframes[key], valueOptions, AnimatePolyfill);\n                animationFactories.push(animation);\n            }\n        }\n        return withControls(animationFactories, options, \n        /**\n         * TODO:\n         * If easing is set to spring or glide, duration will be dynamically\n         * generated. Ideally we would dynamically generate this from\n         * animation.effect.getComputedTiming().duration but this isn't\n         * supported in iOS13 or our number polyfill. Perhaps it's possible\n         * to Proxy animations returned from animateStyle that has duration\n         * as a getter.\n         */\n        options.duration);\n    };\n}\n\nexport { createAnimate };\n","import { Animation } from '@motionone/animation';\nimport { createAnimate } from './create-animate.es.js';\n\nconst animate = createAnimate(Animation);\n\nexport { animate };\n","import { animate as animate$1, withControls } from '@motionone/dom';\nimport { isFunction } from '@motionone/utils';\nimport { Animation } from '@motionone/animation';\n\nfunction animateProgress(target, options = {}) {\n    return withControls([\n        () => {\n            const animation = new Animation(target, [0, 1], options);\n            animation.finished.catch(() => { });\n            return animation;\n        },\n    ], options, options.duration);\n}\nfunction animate(target, keyframesOrOptions, options) {\n    const factory = isFunction(target) ? animateProgress : animate$1;\n    return factory(target, keyframesOrOptions, options);\n}\n\nexport { animate, animateProgress };\n"],"sourceRoot":""}