{"version":3,"sources":["webpack://@verndale/toolkit/./node_modules/@motionone/dom/dist/gestures/in-view.es.js","webpack://@verndale/toolkit/./src/js/modules/numberedList.ts"],"names":["thresholds","inView","elementOrSelector","onStart","root","rootMargin","amount","elements","activeIntersections","onIntersectionChange","entries","entry","onEnd","newOnEnd","observer","element","NumberedList","Component","el","item","sequence","index","stagger","timeline","target"],"mappings":"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","file":"scripts/8503.cf855bdf2da4ffd2e1ef.js","sourcesContent":["import { resolveElements } from '../utils/resolve-elements.es.js';\nimport { isFunction } from '@motionone/utils';\n\nconst thresholds = {\n    any: 0,\n    all: 1,\n};\nfunction inView(elementOrSelector, onStart, { root, margin: rootMargin, amount = \"any\" } = {}) {\n    /**\n     * If this browser doesn't support IntersectionObserver, return a dummy stop function.\n     * Default triggering of onStart is tricky - it could be used for starting/stopping\n     * videos, lazy loading content etc. We could provide an option to enable a fallback, or\n     * provide a fallback callback option.\n     */\n    if (typeof IntersectionObserver === \"undefined\") {\n        return () => { };\n    }\n    const elements = resolveElements(elementOrSelector);\n    const activeIntersections = new WeakMap();\n    const onIntersectionChange = (entries) => {\n        entries.forEach((entry) => {\n            const onEnd = activeIntersections.get(entry.target);\n            /**\n             * If there's no change to the intersection, we don't need to\n             * do anything here.\n             */\n            if (entry.isIntersecting === Boolean(onEnd))\n                return;\n            if (entry.isIntersecting) {\n                const newOnEnd = onStart(entry);\n                if (isFunction(newOnEnd)) {\n                    activeIntersections.set(entry.target, newOnEnd);\n                }\n                else {\n                    observer.unobserve(entry.target);\n                }\n            }\n            else if (onEnd) {\n                onEnd(entry);\n                activeIntersections.delete(entry.target);\n            }\n        });\n    };\n    const observer = new IntersectionObserver(onIntersectionChange, {\n        root,\n        rootMargin,\n        threshold: typeof amount === \"number\" ? amount : thresholds[amount],\n    });\n    elements.forEach((element) => observer.observe(element));\n    return () => observer.disconnect();\n}\n\nexport { inView };\n","import { Component } from '@verndale/core';\nimport { inView, stagger, timeline } from 'motion';\nimport { TimelineDefinition } from '@motionone/dom/types/timeline/types';\n\nclass NumberedList extends Component {\n  constructor(el: HTMLElement) {\n    super(el);\n    this.animateIn();\n  }\n\n  setupDefaults() {\n    this.dom = {\n      firstNumberedListItem: this.el.querySelector<HTMLElement>(\n        '.numbered-list__item:first-of-type'\n      ),\n      heading: this.el.querySelector<HTMLElement>('.numbered-list__heading'),\n      description: this.el.querySelector<HTMLElement>(\n        '.numbered-list__description'\n      ),\n      cta: this.el.querySelector<HTMLElement>('.btn'),\n      numberedListItems: this.el.querySelectorAll<HTMLElement>(\n        '.numbered-list__item'\n      )\n    };\n\n    if (this.dom.firstNumberedListItem)\n      (this.dom.firstNumberedListItem as HTMLLIElement).classList.add(\n        'numbered-list__item--active'\n      );\n  }\n\n  addListeners() {\n    if (this.dom.numberedListItems)\n      (this.dom.numberedListItems as NodeList).forEach(item => {\n        item.addEventListener('mouseover', this.handleItemEnter.bind(this));\n      });\n  }\n\n  animateIn() {\n    const sequence: TimelineDefinition = [];\n    sequence.push([\n      this.dom.heading as HTMLHeadingElement,\n      { opacity: [0, 1] },\n      { duration: 0.8, easing: 'ease-in' }\n    ]);\n\n    sequence.push([\n      this.dom.description as HTMLElement,\n      { opacity: [0, 1] },\n      { duration: 0.8, at: 0.2, easing: 'ease-in' }\n    ]);\n    sequence.push([\n      this.dom.cta as HTMLButtonElement,\n      { opacity: [0, 1] },\n      { duration: 0.8, at: 0.4, easing: 'ease-in' }\n    ]);\n    if (this.dom.numberedListItems)\n      (this.dom.numberedListItems as NodeList).forEach((item, index) => {\n        sequence.push([\n          item as HTMLElement,\n          { opacity: [0, 1], x: [30, 0] },\n          {\n            duration: 0.8,\n            at: 0.6 + 0.2 * (index + 1),\n            easing: 'ease-in',\n            delay: stagger(0.2)\n          }\n        ]);\n      });\n\n    inView('.numbered-list__heading', () => {\n      timeline(sequence);\n    });\n  }\n\n  handleItemEnter(e: Event) {\n    const target = e.target as HTMLElement;\n    if (this.dom.firstNumberedListItem)\n      if (target !== this.dom.firstNumberedListItem) {\n        (this.dom.firstNumberedListItem as HTMLElement).classList.remove(\n          'numbered-list__item--active'\n        );\n      }\n  }\n}\n\nexport default NumberedList;\n"],"sourceRoot":""}