{"version":3,"file":"testimonialCardsCarousel-DRZRe2zy.js","sources":["../../src/scripts/modules/testimonialCardsCarousel.ts"],"sourcesContent":["import { Component } from '@verndale/core';\r\nimport { mediaQuery } from '../helpers/media-queries';\r\nimport QuoteCard from './quoteCard';\r\nimport { EventBusSingleton } from '../helpers/eventBus';\r\n\r\nclass TestimonialCardsCarousel extends Component {\r\n mq = mediaQuery('tabletLandscape');\r\n quoteCards: QuoteCard[] = [];\r\n currentCardControls: QuoteCard | undefined = undefined;\r\n\r\n constructor(el: HTMLElement) {\r\n super(el);\r\n this.addListeners();\r\n this.init();\r\n }\r\n\r\n setupDefaults() {\r\n this.dom = {\r\n cards: this.el.querySelectorAll('.quote-card'),\r\n innerContainer: this.el.querySelector('.testimonial-cards-carousel__inner'),\r\n wrapper: this.el.querySelector('.testimonial-cards-carousel__wrapper'),\r\n videoControls: this.el.querySelector(\r\n '.testimonial-cards-carousel__video-controls'\r\n ),\r\n controls: this.el.querySelector('.testimonial-cards-carousel__controls')\r\n };\r\n\r\n EventBusSingleton.subscribe('nextSlide', () => {\r\n this.handleNextClick();\r\n });\r\n\r\n EventBusSingleton.subscribe('prevSlide', () => {\r\n this.handlePrevClick();\r\n });\r\n }\r\n\r\n addListeners() {\r\n if (this.mq) {\r\n window.addEventListener('resize', this.setContainerHeight.bind(this));\r\n }\r\n }\r\n\r\n init() {\r\n this.initQuoteCards();\r\n this.setContainerHeight();\r\n this.setInitClasses();\r\n this.setCurrentCardControls();\r\n this.showControls();\r\n this.setEvents();\r\n this.updateAriaHidden();\r\n\r\n if ((this.dom.cards as NodeList).length === 1) {\r\n this.removeControls();\r\n this.el.classList.add('testimonial-cards-carousel--single-card');\r\n }\r\n }\r\n\r\n initQuoteCards() {\r\n const cards = this.dom.cards as NodeList;\r\n cards.forEach(card => {\r\n const cardInstance = new QuoteCard(card as HTMLElement);\r\n this.quoteCards = [...this.quoteCards, cardInstance];\r\n });\r\n }\r\n\r\n showControls() {\r\n const controls = this.el.querySelector(\r\n '.slide--1 .testimonial-cards-carousel__controls'\r\n ) as HTMLElement;\r\n controls.style.opacity = '1';\r\n }\r\n\r\n setInitClasses() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n cards.forEach((card, index) => {\r\n card.classList.add('slide');\r\n card.classList.add(`slide--${cards.length - index}`);\r\n });\r\n }\r\n\r\n setClasses() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n cards.forEach((card, index) => {\r\n card.classList.add(`slide--${cards.length - index}`);\r\n });\r\n }\r\n\r\n removeClasses() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n cards.forEach(card => {\r\n card.classList.remove(`slide--1`);\r\n card.classList.remove(`slide--2`);\r\n card.classList.remove(`slide--3`);\r\n card.classList.remove(`slide--4`);\r\n });\r\n }\r\n\r\n setEvents() {\r\n if (this.dom.prevButton) {\r\n (this.dom.prevButton as HTMLElement).addEventListener(\r\n 'click',\r\n this.handlePrevClick.bind(this)\r\n );\r\n }\r\n\r\n if (this.dom.nextButton) {\r\n (this.dom.nextButton as HTMLElement).addEventListener(\r\n 'click',\r\n this.handleNextClick.bind(this)\r\n );\r\n }\r\n }\r\n\r\n removeControls() {\r\n const buttons = this.el.querySelectorAll('.testimonial-cards-carousel__control');\r\n buttons.forEach(button => {\r\n (button as HTMLElement).style.visibility = 'hidden';\r\n });\r\n }\r\n\r\n setContainerHeight() {\r\n const innerContainer = this.dom.innerContainer as HTMLElement;\r\n if (!this.mq.matches) {\r\n innerContainer.removeAttribute('style');\r\n\r\n const cardsHeight = Math.max(\r\n ...([...(this.dom.cards as NodeList)] as HTMLElement[]).map(card => card.clientHeight)\r\n );\r\n\r\n if (innerContainer) {\r\n innerContainer.style.height = `${cardsHeight}px`;\r\n }\r\n } else {\r\n innerContainer.removeAttribute('style');\r\n }\r\n }\r\n\r\n setCurrentCardControls() {\r\n const currentCard = this.el.querySelector('.slide--1') as HTMLElement;\r\n if (currentCard) {\r\n this.currentCardControls = this.quoteCards.find(card => card.id === currentCard.id);\r\n } else {\r\n this.currentCardControls = this.quoteCards[this.quoteCards.length - 1];\r\n }\r\n\r\n this.checkProviders();\r\n }\r\n\r\n checkProviders() {\r\n if (this.currentCardControls) {\r\n if (this.currentCardControls.provider === 'vimeo') {\r\n this.showControlsOnProviderChange();\r\n } else if (this.currentCardControls.provider === 'youtube') {\r\n this.showControlsOnProviderChange();\r\n } else if (this.currentCardControls.provider === 'default') {\r\n this.showControlsOnProviderChange();\r\n } else {\r\n this.hideControlsOnProviderChange();\r\n }\r\n }\r\n }\r\n\r\n showControlsOnProviderChange() {\r\n const controls = this.el.querySelector(\r\n '.slide--1 .testimonial-cards-carousel__controls'\r\n ) as HTMLElement;\r\n const videoControls = this.el.querySelector(\r\n '.slide--1 .testimonial-cards-carousel__video-controls'\r\n ) as HTMLElement;\r\n\r\n controls.classList.add('testimonial-cards-carousel__controls--white-background');\r\n videoControls.removeAttribute('hidden');\r\n }\r\n\r\n hideControlsOnProviderChange() {\r\n const controls = this.el.querySelector(\r\n '.slide--1 .testimonial-cards-carousel__controls'\r\n ) as HTMLElement;\r\n const videoControls = this.el.querySelector(\r\n '.slide--1 .testimonial-cards-carousel__video-controls'\r\n ) as HTMLElement;\r\n\r\n controls.classList.remove('testimonial-cards-carousel__controls--white-background');\r\n videoControls.setAttribute('hidden', 'true');\r\n }\r\n\r\n setDefaultIconsOnPlayer() {\r\n const playButton = this.dom.playButton as HTMLElement;\r\n const muteButton = this.dom.muteButton as HTMLElement;\r\n\r\n if (playButton) {\r\n playButton.removeAttribute('data-active');\r\n }\r\n\r\n if (muteButton) {\r\n muteButton.removeAttribute('data-active');\r\n }\r\n }\r\n\r\n toggleControls() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n\r\n (cards as NodeList).forEach(card => {\r\n if ((card as HTMLElement)?.classList.contains('slide--1')) {\r\n const cardControls = (card as HTMLElement).querySelector(\r\n '.testimonial-cards-carousel__controls'\r\n ) as HTMLElement;\r\n cardControls.style.opacity = '1';\r\n } else {\r\n const cardControls = (card as HTMLElement).querySelector(\r\n '.testimonial-cards-carousel__controls'\r\n ) as HTMLElement;\r\n cardControls.style.opacity = '0';\r\n }\r\n });\r\n }\r\n\r\n prependList() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n const wrapper = this.dom.wrapper as HTMLElement;\r\n [...(cards as NodeList)].slice(cards.length - 1, cards.length);\r\n const lastCard = cards[cards.length - 1] as HTMLElement;\r\n\r\n lastCard.classList.remove('active');\r\n lastCard.classList.remove('transform-next');\r\n wrapper.prepend(lastCard);\r\n this.removeClasses();\r\n this.setClasses();\r\n this.toggleControls();\r\n this.setDefaultIconsOnPlayer();\r\n this.setCurrentCardControls();\r\n this.updateAriaHidden();\r\n }\r\n\r\n appendToList() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n const wrapper = this.dom.wrapper as HTMLElement;\r\n [...(cards as NodeList)].slice(0, 1);\r\n const firstCard = cards[0] as HTMLElement;\r\n\r\n firstCard.classList.add('transform-prev');\r\n wrapper.append(firstCard);\r\n this.removeClasses();\r\n this.setClasses();\r\n this.toggleControls();\r\n this.setDefaultIconsOnPlayer();\r\n this.setCurrentCardControls();\r\n this.updateAriaHidden();\r\n }\r\n\r\n handleNextClick() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n if (cards.length === 1) return;\r\n const lastCard = cards[cards.length - 1] as HTMLElement;\r\n const prevLastCard = cards[cards.length - 2] as HTMLElement;\r\n lastCard.classList.remove('transform-prev');\r\n lastCard.classList.add('transform-next');\r\n lastCard.classList.add('active');\r\n prevLastCard.classList.add('active');\r\n\r\n setTimeout(() => {\r\n this.prependList();\r\n }, 250);\r\n }\r\n\r\n handlePrevClick() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n if (cards.length === 1) return;\r\n const lastCard = cards[cards.length - 1] as HTMLElement;\r\n const prevLastCard = cards[cards.length - 2] as HTMLElement;\r\n lastCard.classList.remove('transform-prev');\r\n lastCard.classList.add('active');\r\n prevLastCard.classList.remove('active');\r\n\r\n setTimeout(() => {\r\n this.appendToList();\r\n }, 250);\r\n }\r\n\r\n updateAriaHidden() {\r\n const cards = this.el.querySelectorAll('.quote-card');\r\n cards.forEach(card => {\r\n if (\r\n card.classList.contains('active') ||\r\n card.classList.contains('transform-prev') ||\r\n card.classList.contains('transform-next') ||\r\n card.classList.contains('slide--1')\r\n ) {\r\n card.setAttribute('aria-hidden', 'false');\r\n card.removeAttribute('inert');\r\n } else {\r\n card.setAttribute('aria-hidden', 'true');\r\n card.setAttribute('inert', '');\r\n }\r\n });\r\n }\r\n}\r\n\r\nexport default TestimonialCardsCarousel;\r\n"],"names":["TestimonialCardsCarousel","Component","el","__publicField","mediaQuery","EventBusSingleton","card","cardInstance","QuoteCard","controls","cards","index","button","innerContainer","cardsHeight","currentCard","videoControls","playButton","muteButton","cardControls","wrapper","lastCard","firstCard","prevLastCard"],"mappings":"8bAKA,MAAMA,UAAiCC,CAAU,CAK/C,YAAYC,EAAiB,CAC3B,MAAMA,CAAE,EALVC,EAAA,UAAKC,EAAW,iBAAiB,GACjCD,EAAA,kBAA0B,CAAC,GAC3BA,EAAA,4BAIE,KAAK,aAAa,EAClB,KAAK,KAAK,CAAA,CAGZ,eAAgB,CACd,KAAK,IAAM,CACT,MAAO,KAAK,GAAG,iBAAiB,aAAa,EAC7C,eAAgB,KAAK,GAAG,cAA2B,oCAAoC,EACvF,QAAS,KAAK,GAAG,cAA2B,sCAAsC,EAClF,cAAe,KAAK,GAAG,cACrB,6CACF,EACA,SAAU,KAAK,GAAG,cAA2B,uCAAuC,CACtF,EAEkBE,EAAA,UAAU,YAAa,IAAM,CAC7C,KAAK,gBAAgB,CAAA,CACtB,EAEiBA,EAAA,UAAU,YAAa,IAAM,CAC7C,KAAK,gBAAgB,CAAA,CACtB,CAAA,CAGH,cAAe,CACT,KAAK,IACP,OAAO,iBAAiB,SAAU,KAAK,mBAAmB,KAAK,IAAI,CAAC,CACtE,CAGF,MAAO,CACL,KAAK,eAAe,EACpB,KAAK,mBAAmB,EACxB,KAAK,eAAe,EACpB,KAAK,uBAAuB,EAC5B,KAAK,aAAa,EAClB,KAAK,UAAU,EACf,KAAK,iBAAiB,EAEjB,KAAK,IAAI,MAAmB,SAAW,IAC1C,KAAK,eAAe,EACf,KAAA,GAAG,UAAU,IAAI,yCAAyC,EACjE,CAGF,gBAAiB,CACD,KAAK,IAAI,MACjB,QAAgBC,GAAA,CACd,MAAAC,EAAe,IAAIC,EAAUF,CAAmB,EACtD,KAAK,WAAa,CAAC,GAAG,KAAK,WAAYC,CAAY,CAAA,CACpD,CAAA,CAGH,cAAe,CACP,MAAAE,EAAW,KAAK,GAAG,cACvB,iDACF,EACAA,EAAS,MAAM,QAAU,GAAA,CAG3B,gBAAiB,CACf,MAAMC,EAAQ,KAAK,GAAG,iBAAiB,aAAa,EAC9CA,EAAA,QAAQ,CAACJ,EAAMK,IAAU,CACxBL,EAAA,UAAU,IAAI,OAAO,EAC1BA,EAAK,UAAU,IAAI,UAAUI,EAAM,OAASC,CAAK,EAAE,CAAA,CACpD,CAAA,CAGH,YAAa,CACX,MAAMD,EAAQ,KAAK,GAAG,iBAAiB,aAAa,EAC9CA,EAAA,QAAQ,CAACJ,EAAMK,IAAU,CAC7BL,EAAK,UAAU,IAAI,UAAUI,EAAM,OAASC,CAAK,EAAE,CAAA,CACpD,CAAA,CAGH,eAAgB,CACA,KAAK,GAAG,iBAAiB,aAAa,EAC9C,QAAgBL,GAAA,CACfA,EAAA,UAAU,OAAO,UAAU,EAC3BA,EAAA,UAAU,OAAO,UAAU,EAC3BA,EAAA,UAAU,OAAO,UAAU,EAC3BA,EAAA,UAAU,OAAO,UAAU,CAAA,CACjC,CAAA,CAGH,WAAY,CACN,KAAK,IAAI,YACV,KAAK,IAAI,WAA2B,iBACnC,QACA,KAAK,gBAAgB,KAAK,IAAI,CAChC,EAGE,KAAK,IAAI,YACV,KAAK,IAAI,WAA2B,iBACnC,QACA,KAAK,gBAAgB,KAAK,IAAI,CAChC,CACF,CAGF,gBAAiB,CACC,KAAK,GAAG,iBAAiB,sCAAsC,EACvE,QAAkBM,GAAA,CACvBA,EAAuB,MAAM,WAAa,QAAA,CAC5C,CAAA,CAGH,oBAAqB,CACb,MAAAC,EAAiB,KAAK,IAAI,eAC5B,GAAC,KAAK,GAAG,QAWXA,EAAe,gBAAgB,OAAO,MAXlB,CACpBA,EAAe,gBAAgB,OAAO,EAEtC,MAAMC,EAAc,KAAK,IACvB,GAAI,CAAC,GAAI,KAAK,IAAI,KAAkB,EAAoB,IAAYR,GAAAA,EAAK,YAAY,CACvF,EAEIO,IACaA,EAAA,MAAM,OAAS,GAAGC,CAAW,KAC9C,CAGF,CAGF,wBAAyB,CACvB,MAAMC,EAAc,KAAK,GAAG,cAAc,WAAW,EACjDA,EACG,KAAA,oBAAsB,KAAK,WAAW,QAAaT,EAAK,KAAOS,EAAY,EAAE,EAElF,KAAK,oBAAsB,KAAK,WAAW,KAAK,WAAW,OAAS,CAAC,EAGvE,KAAK,eAAe,CAAA,CAGtB,gBAAiB,CACX,KAAK,sBACH,KAAK,oBAAoB,WAAa,QACxC,KAAK,6BAA6B,EACzB,KAAK,oBAAoB,WAAa,UAC/C,KAAK,6BAA6B,EACzB,KAAK,oBAAoB,WAAa,UAC/C,KAAK,6BAA6B,EAElC,KAAK,6BAA6B,EAEtC,CAGF,8BAA+B,CACvB,MAAAN,EAAW,KAAK,GAAG,cACvB,iDACF,EACMO,EAAgB,KAAK,GAAG,cAC5B,uDACF,EAESP,EAAA,UAAU,IAAI,wDAAwD,EAC/EO,EAAc,gBAAgB,QAAQ,CAAA,CAGxC,8BAA+B,CACvB,MAAAP,EAAW,KAAK,GAAG,cACvB,iDACF,EACMO,EAAgB,KAAK,GAAG,cAC5B,uDACF,EAESP,EAAA,UAAU,OAAO,wDAAwD,EACpEO,EAAA,aAAa,SAAU,MAAM,CAAA,CAG7C,yBAA0B,CAClB,MAAAC,EAAa,KAAK,IAAI,WACtBC,EAAa,KAAK,IAAI,WAExBD,GACFA,EAAW,gBAAgB,aAAa,EAGtCC,GACFA,EAAW,gBAAgB,aAAa,CAC1C,CAGF,gBAAiB,CACD,KAAK,GAAG,iBAAiB,aAAa,EAEhC,QAAgBZ,GAAA,CAClC,GAAKA,GAAA,MAAAA,EAAsB,UAAU,SAAS,YAAa,CACzD,MAAMa,EAAgBb,EAAqB,cACzC,uCACF,EACAa,EAAa,MAAM,QAAU,GAAA,KACxB,CACL,MAAMA,EAAgBb,EAAqB,cACzC,uCACF,EACAa,EAAa,MAAM,QAAU,GAAA,CAC/B,CACD,CAAA,CAGH,aAAc,CACZ,MAAMT,EAAQ,KAAK,GAAG,iBAAiB,aAAa,EAC9CU,EAAU,KAAK,IAAI,QACxB,CAAA,GAAIV,CAAkB,EAAE,MAAMA,EAAM,OAAS,EAAGA,EAAM,MAAM,EAC7D,MAAMW,EAAWX,EAAMA,EAAM,OAAS,CAAC,EAE9BW,EAAA,UAAU,OAAO,QAAQ,EACzBA,EAAA,UAAU,OAAO,gBAAgB,EAC1CD,EAAQ,QAAQC,CAAQ,EACxB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,CAAA,CAGxB,cAAe,CACb,MAAMX,EAAQ,KAAK,GAAG,iBAAiB,aAAa,EAC9CU,EAAU,KAAK,IAAI,QACzB,CAAC,GAAIV,CAAkB,EAAE,MAAM,EAAG,CAAC,EAC7B,MAAAY,EAAYZ,EAAM,CAAC,EAEfY,EAAA,UAAU,IAAI,gBAAgB,EACxCF,EAAQ,OAAOE,CAAS,EACxB,KAAK,cAAc,EACnB,KAAK,WAAW,EAChB,KAAK,eAAe,EACpB,KAAK,wBAAwB,EAC7B,KAAK,uBAAuB,EAC5B,KAAK,iBAAiB,CAAA,CAGxB,iBAAkB,CAChB,MAAMZ,EAAQ,KAAK,GAAG,iBAAiB,aAAa,EACpD,GAAIA,EAAM,SAAW,EAAG,OACxB,MAAMW,EAAWX,EAAMA,EAAM,OAAS,CAAC,EACjCa,EAAeb,EAAMA,EAAM,OAAS,CAAC,EAClCW,EAAA,UAAU,OAAO,gBAAgB,EACjCA,EAAA,UAAU,IAAI,gBAAgB,EAC9BA,EAAA,UAAU,IAAI,QAAQ,EAClBE,EAAA,UAAU,IAAI,QAAQ,EAEnC,WAAW,IAAM,CACf,KAAK,YAAY,GAChB,GAAG,CAAA,CAGR,iBAAkB,CAChB,MAAMb,EAAQ,KAAK,GAAG,iBAAiB,aAAa,EACpD,GAAIA,EAAM,SAAW,EAAG,OACxB,MAAMW,EAAWX,EAAMA,EAAM,OAAS,CAAC,EACjCa,EAAeb,EAAMA,EAAM,OAAS,CAAC,EAClCW,EAAA,UAAU,OAAO,gBAAgB,EACjCA,EAAA,UAAU,IAAI,QAAQ,EAClBE,EAAA,UAAU,OAAO,QAAQ,EAEtC,WAAW,IAAM,CACf,KAAK,aAAa,GACjB,GAAG,CAAA,CAGR,kBAAmB,CACH,KAAK,GAAG,iBAAiB,aAAa,EAC9C,QAAgBjB,GAAA,CAElBA,EAAK,UAAU,SAAS,QAAQ,GAChCA,EAAK,UAAU,SAAS,gBAAgB,GACxCA,EAAK,UAAU,SAAS,gBAAgB,GACxCA,EAAK,UAAU,SAAS,UAAU,GAE7BA,EAAA,aAAa,cAAe,OAAO,EACxCA,EAAK,gBAAgB,OAAO,IAEvBA,EAAA,aAAa,cAAe,MAAM,EAClCA,EAAA,aAAa,QAAS,EAAE,EAC/B,CACD,CAAA,CAEL"}