{"version":3,"sources":["webpack:///./src/js/modules/InsightCardsGridV2.js","webpack:///./src/js/components/CardV2PatternAnimator.js","webpack:///./src/js/components/CardV2.js"],"names":["Module","this","dom","insightCards","el","querySelectorAll","cards","forEach","card","push","CardV2","initMasonry","Masonry","itemSelector","gutter","columnWidth","percentPosition","Component","chevronWithAccent","querySelector","chevron","panels","sequence","variation","dataset","parseInt","duration","parseFloat","delay","classList","add","setupVariation","defineSequence","grid","outAnimation","opacity","style","fill","animate","color","accent","timeline","defineAnimations","animEl1","animEl2","animEl3","anim1","transform","at","anim2","anim3","svgPattern","overlay","image","animator","CardPatternAnimator","saveInitialMarkup","initSplitting","handleResize","addCardListeners","window","addEventListener","bind","handleCardHoverIn","handleCardHoverOut","e","isMobile","currentTarget","hasImage","contains","lineSplit","lines","line","index","inAnimation","finished","then","slice","reverse","matchMedia","matches","initialMarkup","outerHTML","target","by"],"mappings":"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","file":"24.eb4ec75bfa0d0d8b57c9.js","sourcesContent":["import { Component } from '@verndale/core';\nimport Masonry from 'masonry-layout';\nimport CardV2 from '../components/CardV2';\n\nclass Module extends Component {\n  setupDefaults() {\n    this.dom = { insightCards: this.el.querySelectorAll('.insight-card-v2') };\n    const cards = [];\n    this.dom.insightCards.forEach(card => cards.push(new CardV2(card)));\n    this.initMasonry();\n  }\n\n  addListeners() {}\n\n  initMasonry() {\n    new Masonry(this.el, {\n      itemSelector: '.insight-card-v2',\n      gutter: '.gutter-sizer',\n      columnWidth: '.grid-sizer',\n      percentPosition: true\n    });\n  }\n}\n\nexport default Module;\n","import { Component } from '@verndale/core';\nimport { timeline } from 'motion';\n\nclass Module extends Component {\n  setupDefaults() {\n    this.dom = {\n      chevronWithAccent: this.el.querySelector(\n        '.card-pattern__chevron--w-accent'\n      ),\n      chevron: this.el.querySelector('.card-pattern__chevron'),\n      panels: this.el.querySelector('.card-pattern__panels')\n    };\n    this.sequence = [];\n    this.variation = this.el.dataset.variation\n      ? parseInt(this.el.dataset.variation)\n      : 0;\n    this.duration = this.el.dataset.duration\n      ? parseFloat(this.el.dataset.duration)\n      : 1;\n    this.delay = this.el.dataset.delay ? parseFloat(this.el.dataset.delay) : 0;\n    this.el.classList.add(`card-pattern__variation--${this.variation}`);\n    this.setupVariation(this.variation);\n    this.defineSequence();\n\n    if (!this.el.dataset.grid) {\n      this.outAnimation();\n    }\n  }\n\n  setOpacity(opacity) {\n    this.dom.chevronWithAccent.style.opacity = opacity;\n    this.dom.chevron.style.opacity = opacity;\n    this.dom.panels.style.opacity = opacity;\n  }\n\n  inAnimation() {\n    this.dom.chevronWithAccent.querySelector('.chevron').style.fill = '#ffffff';\n    this.dom.chevron.querySelector('.chevron').style.fill = '#ffffff';\n    this.dom.panels.querySelector('.panels').style.fill = '#ffffff';\n    this.animate();\n  }\n\n  outAnimation() {\n    this.dom.chevronWithAccent.querySelector('.chevron').style.fill = '#6a2ff3';\n    this.dom.chevron.querySelector('.chevron').style.fill = '#6a2ff3';\n    this.dom.panels.querySelector('.panels').style.fill = '#6a2ff3';\n    this.animate();\n  }\n\n  outGridAnimation(delay, color, accent) {\n    this.dom.chevronWithAccent.querySelector('.chevron').style.fill = color;\n    this.dom.chevronWithAccent.querySelector('.accent').style.fill = accent;\n    this.dom.chevron.querySelector('.chevron').style.fill = color;\n    this.dom.panels.querySelector('.panels').style.fill = color;\n    return timeline(this.sequence, {\n      duration: this.duration,\n      delay\n    });\n  }\n\n  setupVariation(variation) {\n    //     chevron with accent, chevron, panels\n    switch (variation) {\n      case 1:\n        this.defineAnimations(\n          this.dom.chevronWithAccent,\n          this.dom.chevron,\n          this.dom.panels\n        );\n        break;\n      case 2:\n        this.defineAnimations(\n          this.dom.panels,\n          this.dom.chevron,\n          this.dom.chevronWithAccent\n        );\n        break;\n      case 3:\n        this.defineAnimations(\n          this.dom.chevron,\n          this.dom.panels,\n          this.dom.chevronWithAccent\n        );\n        break;\n      case 4:\n        this.defineAnimations(\n          this.dom.panels,\n          this.dom.chevronWithAccent,\n          this.dom.chevron\n        );\n        break;\n      case 5:\n        this.defineAnimations(\n          this.dom.chevron,\n          this.dom.chevronWithAccent,\n          this.dom.panels\n        );\n        break;\n      case 6:\n        this.defineAnimations(\n          this.dom.chevron,\n          this.dom.panels,\n          this.dom.chevronWithAccent\n        );\n        break;\n\n      default:\n        this.defineAnimations(\n          this.dom.chevronWithAccent,\n          this.dom.chevron,\n          this.dom.panels\n        );\n    }\n  }\n\n  defineAnimations(animEl1, animEl2, animEl3) {\n    this.anim1 = [\n      animEl1,\n      {\n        opacity: [0, 1],\n        transform: [\n          `translate(0, ${this.el.dataset.grid ? -50 : -30}px)`,\n          'translate(0, 0px)'\n        ]\n      },\n      { at: '0' }\n    ];\n    this.anim2 = [\n      animEl2,\n      {\n        opacity: [0, 1],\n        transform: [\n          `translate(0, ${this.el.dataset.grid ? -50 : -30}px)`,\n          'translate(0, 0px)'\n        ]\n      },\n      { at: '-0.27' }\n    ];\n    this.anim3 = [\n      animEl3,\n      {\n        opacity: [0, 1],\n        transform: [\n          `translate(0, ${this.el.dataset.grid ? -50 : -30}px)`,\n          'translate(0, 0px)'\n        ]\n      },\n      { at: '-0.26' }\n    ];\n  }\n\n  defineSequence() {\n    this.sequence.push(this.anim1);\n    this.sequence.push(this.anim2);\n    this.sequence.push(this.anim3);\n  }\n\n  animate() {\n    timeline(this.sequence, { duration: this.duration, delay: this.delay });\n  }\n}\n\nexport default Module;\n","import { animate, timeline } from 'motion';\n\nimport CardPatternAnimator from './CardV2PatternAnimator';\nimport { Component } from '@verndale/core';\nimport Splitting from 'splitting';\nimport debounce from 'lodash/debounce';\n\nclass Module extends Component {\n  setupDefaults() {\n    this.dom = {\n      svgPattern: this.el.querySelector('.card-pattern'),\n      overlay: this.el.querySelector('.insight-cards-item-v2__overlay'),\n      image: this.el.querySelector('img')\n    };\n    if (this.dom.svgPattern)\n      this.animator = new CardPatternAnimator(this.dom.svgPattern);\n    this.saveInitialMarkup();\n    this.initSplitting();\n    this.handleResize();\n  }\n\n  addListeners() {\n    this.addCardListeners();\n    window.addEventListener(\n      'resize',\n      debounce(this.handleResize.bind(this), 300)\n    );\n  }\n\n  addCardListeners() {\n    this.el.addEventListener('mouseenter', this.handleCardHoverIn.bind(this));\n    this.el.addEventListener('mouseleave', this.handleCardHoverOut.bind(this));\n  }\n\n  handleCardHoverIn(e) {\n    if (!this.isMobile) {\n      const card = e.currentTarget;\n      const hasImage =\n        !card.classList.contains('insight-cards-v2__item--no-bg-image') ||\n        card.classList.contains('insight-card-person-item-v2__item');\n      card.lineSplit[0].lines.forEach((line, index) => {\n        const sequence = [\n          [\n            line,\n            {\n              opacity: [1, 0],\n              transform: ['translate(0, 0)', 'translate(100px, 0)']\n            },\n            { duration: 0.15, delay: 0.05 * index }\n          ],\n          [\n            line,\n            {\n              color: !hasImage && '#fff'\n            },\n            { at: 0.15 + 0.05 * index },\n            {\n              duration: 0\n            }\n          ],\n          [\n            line,\n            {\n              opacity: [0, 1],\n              transform: ['translate(-100px, 0)', 'translate(0, 0)']\n            },\n            { at: 0.17 + 0.05 * index },\n            { duration: 0.15, delay: 0.05 * index }\n          ]\n        ];\n        timeline(sequence);\n      });\n      if (this.animator) this.animator.inAnimation();\n      animate(\n        this.dom.overlay,\n        { transform: 'skew(-30deg) scale(2, 1)' },\n        { duration: 0.45 }\n      ).finished.then(() => {});\n\n      if (this.dom.image)\n        animate(\n          this.dom.image,\n          { transform: 'scale(1.25)' },\n          { duration: 0.5 }\n        );\n    }\n  }\n\n  handleCardHoverOut(e) {\n    if (!this.isMobile) {\n      const card = e.currentTarget;\n      const hasImage =\n        !card.classList.contains('insight-cards-v2__item--no-bg-image') ||\n        card.classList.contains('insight-card-person-item-v2__item');\n      const linesReversed = card.lineSplit[0].lines.slice().reverse();\n      linesReversed.forEach((line, index) => {\n        const sequence = [\n          [\n            line,\n            {\n              opacity: [1, 0],\n              transform: ['translate(0, 0)', 'translate(-100px, 0)']\n            },\n            { duration: 0.15, delay: 0.05 * index }\n          ],\n          [\n            line,\n            { color: !hasImage && '#1c1c1c' },\n            { at: 0.17 + 0.05 * index },\n            {\n              duration: 0\n            }\n          ],\n          [\n            line,\n            {\n              opacity: [0, 1],\n              transform: ['translate(100px, 0)', 'translate(0, 0)']\n            },\n            { at: 0.17 + 0.075 * index },\n            { duration: 0.15, delay: 0.05 * index }\n          ]\n        ];\n        timeline(sequence);\n      });\n      if (this.animator) this.animator.outAnimation();\n      animate(\n        this.dom.overlay,\n        { transform: 'skew(-30deg) scale(0, 1)' },\n        { duration: 0.45 }\n      );\n      if (this.dom.image)\n        animate(\n          this.dom.image,\n          { transform: 'scale(1)' },\n          { duration: 1, delay: 0.2 }\n        );\n    }\n  }\n\n  handleResize() {\n    this.isMobile = window.matchMedia('(max-width: 1025px)').matches;\n    if (!this.isMobile) {\n      this.initSplitting();\n      this.addCardListeners();\n    }\n  }\n\n  saveInitialMarkup() {\n    this.el.initialMarkup = this.el.outerHTML;\n  }\n\n  initSplitting() {\n    this.saveInitialMarkup();\n    this.el.lineSplit = Splitting({\n      target: this.el,\n      by: 'lines'\n    });\n  }\n}\n\nexport default Module;\n"],"sourceRoot":""}