{"version":3,"file":"js/component-serviceBar.chunk.js","mappings":"6LAGe,MAAMA,UAAsB,IAOvCC,YAAYC,GACRC,QACAC,KAAKC,kBAAoBH,EACzBE,KAAKC,kBAAkBC,aAAa,sBAAuB,QAC3DF,KAAKG,gBACT,CAIIC,UACA,OAAOJ,KAAKC,iBAChB,CACII,eACA,MAAMC,EAAc,CAAC,EACfC,EAAUC,OAAOC,OAAO,CAAC,EAAGT,KAAKI,IAAIM,SAa3C,OAZuBF,OAAOG,KAAKJ,GAASK,QAAQC,GAAUA,EAAMC,SAAS,YAC9DC,SAASF,IACpB,MAAMG,EAAapB,EAAcqB,eAAeJ,GAChD,IAAIK,EAEAA,EADAX,EAAQM,GAAOC,SAAS,MAAQP,EAAQM,GAAOC,SAAS,KAC1CK,KAAKC,MAAMb,EAAQM,GAAOQ,QAAQ,KAAM,MAGxCzB,EAAc0B,YAAYf,EAAQM,IAEpDP,EAAYU,GAAcE,CAAW,KAElC,OAAWZ,EACtB,CACIiB,qBACA,OAAOvB,KAAKwB,UAAU3B,YAAY4B,IACtC,CACAC,mBAAmBC,GACf,IAAIC,EACJ,OAAQD,GACJ,IAAK,QACDC,GAAe,EACf,MACJ,IAAK,OACDA,GAAe,EACf,MACJ,IAAK,OACDA,EAAe,KACf,MACJ,QACIA,EAAeD,EAGvB,OAAOC,CACX,CACAF,sBAAsBG,GAClB,MAAMC,EAAMD,EAAIR,QAAQ,SAAU,IAClC,MAAO,GAAGS,EAAIC,OAAO,GAAGC,sBAAsBF,EAAIG,MAAM,IAC5D,CAUAC,IAAIC,EAAQC,EAAItC,EAAUE,KAAKI,IAAKiC,EAAW,MACtCvC,GAAYqC,GAAWC,IAEvBC,EAQD,OAAQvC,EAASqC,EAAQE,GAAWC,IAC5BA,GACAA,EAAEC,kBACNH,EAAGE,EAAE,IAVT,OAAQxC,EAASqC,GAASG,IAClBA,GACAA,EAAEC,kBACNH,EAAGE,EAAE,IAUjB,CASAE,KAAKL,EAAQC,EAAItC,EAAUE,KAAKI,KAC5B,QAASN,EAASqC,EAAQC,EAC9B,CAQAK,KAAKN,EAAQrC,EAAUE,KAAKI,KACxB,QAASN,EAASqC,EACtB,CAQAO,MAAMP,EAAQrC,EAAUE,KAAKI,KACzB,SAAUN,EAASqC,EACvB,E,wGCtHW,MAAMQ,UAA4B,IAC7C9C,YAAYC,GACRC,MAAMD,GACN8C,OAAOC,iBAAiB,QAAQ,IAAM7C,KAAK8C,SAC3C9C,KAAK+C,GAAK,cAAc,CAAEC,QAAS,IACnChD,KAAKiD,OAASjD,KAAKI,IAAI8C,cAAc,iBACzC,CACAJ,OASI,GARA9C,KAAKI,IAAI+C,UAAUC,OAAO,UAC1BpD,KAAKqD,YAAcT,OAAOU,WAC1BtD,KAAKuD,KAAOvD,KAAKI,IAAI8C,cAAc,sBAEnClD,KAAKwD,UAAYxD,KAAKuD,KAAKE,YAE3BzD,KAAK0D,OAAkC,EAAxB1D,KAAKuD,KAAKE,YAAkB,GAAM,KACjDE,QAAQC,IAAI,aAAc5D,KAAKwD,WAC3BxD,KAAKuD,KAAM,CACXM,SAASC,iBAAiB,mBAAmB/C,SAASgD,IAClDA,EAAKlB,iBAAiB,WAAYmB,IAC9BhE,KAAKI,IAAI+C,UAAUc,IAAI,cACvBjE,KAAKkE,eAAeF,EAAOD,EAAK,IAEpCA,EAAKlB,iBAAiB,YAAamB,IAC/BhE,KAAKI,IAAI+C,UAAUC,OAAO,cAC1B,SAASpD,KAAKuD,KAAM,CAChBY,EAAG,IACHC,WAAY,IAAMpE,KAAK+C,GAAGsB,UAE1BrE,KAAKsE,cAAgBtE,KAAKuE,UAC1BvE,KAAKwE,SACT,GACF,IAENxE,KAAKI,IAAIyC,iBAAiB,cAAemB,IACrC,MAAMS,EAAaT,EAAMU,QAAQ,GACjC1E,KAAK2E,MAAQF,EAAWG,QACxB5E,KAAK6E,MAAQJ,EAAWK,OAAO,IAEnC,MAAMC,EAAiBzC,IACnBA,EAAE0C,gBAAgB,EAEtBhF,KAAKI,IAAIyC,iBAAiB,aAAcmB,IACpCH,SAASoB,KAAKpC,iBAAiB,WAAW,KACtC7C,KAAK2E,MAAQ,KACb3E,KAAK6E,MAAQ,KACbhB,SAASoB,KAAKC,oBAAoB,cAAeH,EAAc,GAChE,CAAEI,MAAM,IACXtB,SAASoB,KAAKpC,iBAAiB,cAAekC,GAC9C/E,KAAK2E,MAAQX,EAAMY,QACnB5E,KAAK6E,MAAQb,EAAMc,OAAO,IAE9B9E,KAAKI,IAAIyC,iBAAiB,iBAAkBmB,IACf,SAArBA,EAAMoB,cACNpF,KAAK2E,MAAQ,KACb3E,KAAK6E,MAAQ,KACjB,IAEJ7E,KAAKI,IAAIyC,iBAAiB,aAAcP,GAAMtC,KAAKqF,iBAAiB/C,KACpEtC,KAAKI,IAAIyC,iBAAiB,aAAcP,GAAMtC,KAAKsF,iBAAiBhD,KAEpE,SAAStC,KAAKuD,KAAM,CAChBY,EAAG,MAEPnE,KAAKuF,eACLvF,KAAKwF,iBACT,CAGAxF,KAAKiD,OAAOwC,QAAU,KAClBzF,KAAK0F,iBAAiB,EAMC1F,KAAKI,IAAI0D,iBAAiB,2BAClC/C,SAAS4E,IACxBA,EAAG9C,iBAAiB,SAAUP,IAC1B,IAAIsD,EAAiBD,EAAGE,aAAa,wBACrC,qBAA2BjD,OAAOkD,cAAcC,aAAcH,EAAgBhD,OAAOoD,SAAW,QAAU,OAAO,GACnH,GAEV,CACAX,iBAAiB/C,GACb,IAAI2D,EAAM3D,EAAEoC,QAAQ,GAAGE,QACnBsB,EAAM5D,EAAEoC,QAAQ,GAAGI,QACvB9E,KAAKmG,kBAAkBF,EAAKC,EAChC,CACAZ,iBAAiBhD,GACb,IAAI2D,EAAM3D,EAAEsC,QACRsB,EAAM5D,EAAEwC,QACZ9E,KAAKmG,kBAAkBF,EAAKC,EAChC,CACAC,kBAAkBF,EAAKC,GACnB,KAAKlG,KAAKuE,UAAavE,KAAKsE,aAAgBtE,KAAK2E,OAAU3E,KAAK6E,OAC5D,OAEJ,IAAIuB,EAAQpG,KAAK2E,MAAQsB,EACrBI,EAAQrG,KAAK6E,MAAQqB,EAErBI,EAAc,EAClB,GAAIC,KAAKC,IAAIJ,GAASG,KAAKC,IAAIH,GAAQ,CACnC,MAAMI,EAAYC,iBAAiB1G,KAAKuD,MAAMkD,UAG9C,GADAH,EADe,IAAIK,gBAAgBF,GACdG,IAAMR,EACvBG,KAAKC,IAAIF,GAAetG,KAAKqD,aAAerD,KAAKuD,KAAKE,YAAc,GACpEzD,KAAK6G,oBAEJ,GAAIP,GAAe,EAAG,CAEvBA,GADiBtG,KAAK6G,aAAa,UACXpD,WAC5B,CACAzD,KAAK+C,GAAGsB,QACRrE,KAAKI,IAAI0G,WAAa,EACtB,SAAS9G,KAAKuD,KAAM,CAChBY,EAAGmC,EACHS,SAAU,IAElB,CAEA/G,KAAK2E,MAAQsB,EACbjG,KAAK6E,MAAQqB,CACjB,CACAhC,eAAeF,EAAOD,GAClBJ,QAAQC,IAAI,cACZ5D,KAAK+C,GAAGsB,QACJrE,KAAKsE,cACLtE,KAAKI,IAAI0G,WAAa,EACtB,SAAS9G,KAAKuD,KAAM,CAChBY,GAAIJ,EAAKiD,WAAapE,OAAOU,WAAa,EAAIS,EAAKkD,YAAc,EAAI,OAGjF,CACAzB,kBACI,IAAI0B,EACJtE,OAAOC,iBAAiB,UAAU,KAC9BsE,aAAaD,GACbA,EAAUE,YAAW,KACbpH,KAAKqD,cAAgBT,OAAOU,aAC5BtD,KAAKuF,eACLvF,KAAKqD,YAAcT,OAAOU,WAC9B,GACD,IAAI,GAEf,CACAiC,eACIvF,KAAKsE,YAActE,KAAKwD,UAAYZ,OAAOU,WACvCtD,KAAKsE,aACLtE,KAAKwE,UACLxE,KAAKI,IAAIF,aAAa,eAAgB,SACtCF,KAAK6G,iBAGL7G,KAAKuD,KAAKO,iBAAiB,sBAAsB/C,SAASgD,IACtDA,EAAKX,QAAQ,IAEjBpD,KAAKuD,KAAK8D,MAAMZ,UAAY,GAC5BzG,KAAKsH,cACLtH,KAAKI,IAAIF,aAAa,eAAgB,QAE9C,CACA2G,aAAaU,EAAW,SAEpB,MAAMC,EADMxH,KAAKuD,KAAKL,cAAc,6BACXuE,WAAU,GAenC,OAdAD,EAAWtH,aAAa,cAAe,QACvCsH,EAAWtH,aAAa,cAAe,QACvCsH,EAAWtH,aAAa,WAAY,MACrBsH,EAAW1D,iBAAiB,QAClC/C,SAASgD,IACdA,EAAK7D,aAAa,cAAe,QACjC6D,EAAK7D,aAAa,WAAY,KAAK,IAEvB,SAAZqH,EACAvH,KAAKuD,KAAKmE,YAAYF,GAGtBxH,KAAKuD,KAAKoE,QAAQH,GAEfA,CACX,CACAhD,UACIb,QAAQC,IAAI,WACZ5D,KAAK+C,GAAG6E,GAAG5H,KAAKuD,KAAM,CAClBwD,SAAU/G,KAAK0D,OACfmE,KAAM,OACN1D,EAAG,KAAKnE,KAAKwD,YACbsE,QAAU9H,KAAKuE,UAAW,IAE1BvE,KAAK+C,GAAGgF,WACR/H,KAAK+C,GAAGiF,OACRhI,KAAKuE,UAAW,GAEpBvE,KAAKiD,OAAO/C,aAAa,eAAgB,QAC7C,CACAoH,cACQtH,KAAK+C,GAAGkF,WAAa,IACrB,SAASjI,KAAKuD,KAAM,CAChBY,EAAG,IACHC,WAAY,IAAMpE,KAAK+C,GAAGsB,UAE9BrE,KAAKuE,UAAW,EAChBvE,KAAKiD,OAAO/C,aAAa,eAAgB,QAEjD,CACAgI,cACQlI,KAAK+C,GAAGkF,WAAa,EACrBjI,KAAK+C,GAAGoF,SAGRnI,KAAKwE,UAETxE,KAAKuE,UAAW,EAChBvE,KAAKiD,OAAO/C,aAAa,eAAgB,QAC7C,CACAkI,eACIpI,KAAK+C,GAAGsF,QACRrI,KAAKuE,UAAW,EAChBvE,KAAKiD,OAAO/C,aAAa,eAAgB,OAC7C,CACAwF,kBACQ1F,KAAKuE,SACLvE,KAAKkI,cAGLlI,KAAKoI,cAEb,E","sources":["webpack:///./assets/common/src/scripts/base/baseComponent.ts","webpack:///./assets/common/src/scripts/components/serviceBar.ts"],"sourcesContent":["import Bean from 'bean';\nimport deepFreeze from '../utilities/freeze';\nimport CommonInterface from './commonInterface';\nexport default class BaseComponent extends CommonInterface {\n /**\n *\n * constructor\n *\n * @param {Element} element\n */\n constructor(element) {\n super();\n this._componentElement = element;\n this._componentElement.setAttribute('data-component-init', 'true');\n this._checkMessages();\n }\n /**\n * @returns {HTMLElement}\n */\n get $el() {\n return this._componentElement;\n }\n get $options() {\n const compOptions = {};\n const options = Object.assign({}, this.$el.dataset);\n const optionsEntires = Object.keys(options).filter((entry) => entry.includes('option'));\n optionsEntires.forEach((entry) => {\n const cleanEntry = BaseComponent.cleanOptionKey(entry);\n let optionValue;\n if (options[entry].includes('{') && options[entry].includes('}')) {\n optionValue = JSON.parse(options[entry].replace(/'/g, '\"'));\n }\n else {\n optionValue = BaseComponent.convertType(options[entry]);\n }\n compOptions[cleanEntry] = optionValue;\n });\n return deepFreeze(compOptions);\n }\n get COMPONENT_NAME() {\n return this.__proto__.constructor.name;\n }\n static convertType(option) {\n let optionReturn;\n switch (option) {\n case 'false':\n optionReturn = false;\n break;\n case 'true':\n optionReturn = true;\n break;\n case 'null':\n optionReturn = null;\n break;\n default:\n optionReturn = option;\n break;\n }\n return optionReturn;\n }\n static cleanOptionKey(key) {\n const str = key.replace('option', '');\n return `${str.charAt(0).toLocaleLowerCase()}${str.slice(1)}`;\n }\n /**\n *\n * $on\n *\n * @param {String} events\n * @param {Function} cb\n * @param {Element} [element = this.$el]\n * @param {Array|String|Element} [elements = null]\n */\n $on(events, cb, element = this.$el, elements = null) {\n if (!element || !events || !cb)\n return;\n if (!elements) {\n Bean.on(element, events, (e) => {\n if (e)\n e.stopPropagation();\n cb(e);\n });\n }\n else {\n Bean.on(element, events, elements, (e) => {\n if (e)\n e.stopPropagation();\n cb(e);\n });\n }\n }\n /**\n *\n * $one\n *\n * @param {String} events\n * @param {Function} cb\n * @param {Element} [element = this.$el]\n */\n $one(events, cb, element = this.$el) {\n Bean.one(element, events, cb);\n }\n /**\n *\n * $off\n *\n * @param {String} events\n * @param {Element} [element = this.$el]\n */\n $off(events, element = this.$el) {\n Bean.off(element, events);\n }\n /**\n *\n * $fire\n *\n * @param {String} events\n * @param {Element} [element = this.$el]\n */\n $fire(events, element = this.$el) {\n Bean.fire(element, events);\n }\n}\n","import { gsap } from 'gsap';\nimport BaseComponent from '../base/baseComponent';\nimport analytics from '@common/utils/analytics';\nexport default class ServiceBarComponent extends BaseComponent {\n constructor(element) {\n super(element);\n window.addEventListener('load', () => this.init());\n this.tl = gsap.timeline({ repeat: -1 });\n this.button = this.$el.querySelector('.btn-playpause');\n }\n init() {\n this.$el.classList.remove('d-none');\n this.windowWidth = window.innerWidth;\n this.list = this.$el.querySelector('.service-bar__loop');\n // this.listItemsArray = gsap.utils.toArray(this.$el.querySelectorAll('service-bar__loop--inner'));\n this.listWidth = this.list.clientWidth;\n // OE-24985, calculate timing based on list width. Base ratio is 1280px/10s, * 2 is because the inner loop will be duplicate\n this.timing = (this.list.clientWidth * 2 * 10) / 1280;\n console.log('list width', this.listWidth);\n if (this.list) {\n document.querySelectorAll('.service-bar li').forEach((item) => {\n item.addEventListener('focusin', (event) => {\n this.$el.classList.add('isFocusing');\n this.listenForFocus(event, item);\n });\n item.addEventListener('focusout', (event) => {\n this.$el.classList.remove('isFocusing');\n gsap.set(this.list, {\n x: '0',\n onComplete: () => this.tl.clear(),\n });\n if (this.isActivable && !this.isPaused) {\n this.animate();\n }\n });\n });\n this.$el.addEventListener('touchstart', (event) => {\n const firstTouch = event.touches[0];\n this.xDown = firstTouch.clientX;\n this.yDown = firstTouch.clientY;\n });\n const disableSelect = (e) => {\n e.preventDefault();\n };\n this.$el.addEventListener('mousedown', (event) => {\n document.body.addEventListener('mouseup', () => {\n this.xDown = null;\n this.yDown = null;\n document.body.removeEventListener('selectstart', disableSelect);\n }, { once: true });\n document.body.addEventListener('selectstart', disableSelect);\n this.xDown = event.clientX;\n this.yDown = event.clientY;\n });\n this.$el.addEventListener('pointercancel', (event) => {\n if (event.pointerType != 'touch') {\n this.xDown = null;\n this.yDown = null;\n }\n });\n this.$el.addEventListener('touchmove', (e) => this.listenerForTouch(e));\n this.$el.addEventListener('mousemove', (e) => this.listenerForClick(e));\n // this.listInnerWidth += parseInt(gap) * this.listItemsArray.length;\n gsap.set(this.list, {\n x: '0',\n });\n this.setListWidth();\n this.listenForResize();\n }\n // let buttonPlay = document.querySelector('#btn--play') as HTMLElement;\n // let buttonPause = document.querySelector('#btn--pause') as HTMLElement;\n this.button.onclick = () => {\n this.toggleAnimation();\n };\n // buttonPause.onclick = () => {\n // this.pauseAnimate();\n // };\n // analytics [OE-16592]\n const serviceBarLinkItem = this.$el.querySelectorAll('a[data-title-analytics]');\n serviceBarLinkItem.forEach((el) => {\n el.addEventListener('click', (e) => {\n let titleAnalytics = el.getAttribute('data-title-analytics');\n analytics.serviceBarFooter(window.datalayerdata.pageCategory, titleAnalytics, window.loggedin ? 'enter' : 'join');\n });\n });\n }\n listenerForTouch(e) {\n let xUp = e.touches[0].clientX;\n let yUp = e.touches[0].clientY;\n this.listenerForScroll(xUp, yUp);\n }\n listenerForClick(e) {\n let xUp = e.clientX;\n let yUp = e.clientY;\n this.listenerForScroll(xUp, yUp);\n }\n listenerForScroll(xUp, yUp) {\n if (!this.isPaused || !this.isActivable || !this.xDown || !this.yDown) {\n return;\n }\n let xDiff = this.xDown - xUp;\n let yDiff = this.yDown - yUp;\n // let slideWidth = this.listWidth / listLenght;\n let calculatedX = 0;\n if (Math.abs(xDiff) > Math.abs(yDiff)) {\n const transform = getComputedStyle(this.list).transform;\n const matrix = new WebKitCSSMatrix(transform);\n calculatedX = matrix.m41 - xDiff;\n if (Math.abs(calculatedX) + this.windowWidth >= this.list.clientWidth - 50) {\n this.addClonedBar();\n }\n else if (calculatedX >= 0) {\n const clonedEl = this.addClonedBar('before');\n calculatedX = -clonedEl.clientWidth;\n }\n this.tl.clear();\n this.$el.scrollLeft = 0;\n gsap.set(this.list, {\n x: calculatedX,\n duration: 0.1,\n });\n }\n /* reset values */\n this.xDown = xUp;\n this.yDown = yUp;\n }\n listenForFocus(event, item) {\n console.log('isfocusing');\n this.tl.clear();\n if (this.isActivable) {\n this.$el.scrollLeft = 0;\n gsap.set(this.list, {\n x: -item.offsetLeft + window.innerWidth / 2 - item.offsetWidth / 2 + 'px',\n });\n }\n }\n listenForResize() {\n let timerId;\n window.addEventListener('resize', () => {\n clearTimeout(timerId);\n timerId = setTimeout(() => {\n if (this.windowWidth !== window.innerWidth) {\n this.setListWidth();\n this.windowWidth = window.innerWidth;\n }\n }, 500);\n });\n }\n setListWidth() {\n this.isActivable = this.listWidth > window.innerWidth;\n if (this.isActivable) {\n this.animate();\n this.$el.setAttribute('data-stacked', 'false');\n this.addClonedBar();\n }\n else {\n this.list.querySelectorAll('[data-cloned=true]').forEach((item) => {\n item.remove();\n });\n this.list.style.transform = '';\n this.stopAnimate();\n this.$el.setAttribute('data-stacked', 'true');\n }\n }\n addClonedBar(position = 'after') {\n let inner = this.list.querySelector('.service-bar__loop--inner');\n const clonedNode = inner.cloneNode(true);\n clonedNode.setAttribute('data-cloned', 'true');\n clonedNode.setAttribute('aria-hidden', 'true');\n clonedNode.setAttribute('tabindex', '-1');\n let children = clonedNode.querySelectorAll('li a');\n children.forEach((item) => {\n item.setAttribute('aria-hidden', 'true');\n item.setAttribute('tabindex', '-1');\n });\n if (position == 'after') {\n this.list.appendChild(clonedNode); // clono a dx\n }\n else {\n this.list.prepend(clonedNode); // clono a sx\n }\n return clonedNode;\n }\n animate() {\n console.log('animate');\n this.tl.to(this.list, {\n duration: this.timing,\n ease: 'none',\n x: `-=${this.listWidth}`,\n onStart: (this.isPaused = false),\n });\n if (this.tl.paused()) {\n this.tl.play();\n this.isPaused = false;\n }\n this.button.setAttribute('aria-pressed', 'false');\n }\n stopAnimate() {\n if (this.tl.progress() > 0) {\n gsap.set(this.list, {\n x: '0',\n onComplete: () => this.tl.clear(),\n });\n this.isPaused = true;\n this.button.setAttribute('aria-pressed', 'true');\n }\n }\n playAnimate() {\n if (this.tl.progress() > 0) {\n this.tl.resume();\n }\n else {\n this.animate();\n }\n this.isPaused = false;\n this.button.setAttribute('aria-pressed', 'false');\n }\n pauseAnimate() {\n this.tl.pause();\n this.isPaused = true;\n this.button.setAttribute('aria-pressed', 'true');\n }\n toggleAnimation() {\n if (this.isPaused) {\n this.playAnimate();\n }\n else {\n this.pauseAnimate();\n }\n }\n}\n"],"names":["BaseComponent","constructor","element","super","this","_componentElement","setAttribute","_checkMessages","$el","$options","compOptions","options","Object","assign","dataset","keys","filter","entry","includes","forEach","cleanEntry","cleanOptionKey","optionValue","JSON","parse","replace","convertType","COMPONENT_NAME","__proto__","name","static","option","optionReturn","key","str","charAt","toLocaleLowerCase","slice","$on","events","cb","elements","e","stopPropagation","$one","$off","$fire","ServiceBarComponent","window","addEventListener","init","tl","repeat","button","querySelector","classList","remove","windowWidth","innerWidth","list","listWidth","clientWidth","timing","console","log","document","querySelectorAll","item","event","add","listenForFocus","x","onComplete","clear","isActivable","isPaused","animate","firstTouch","touches","xDown","clientX","yDown","clientY","disableSelect","preventDefault","body","removeEventListener","once","pointerType","listenerForTouch","listenerForClick","setListWidth","listenForResize","onclick","toggleAnimation","el","titleAnalytics","getAttribute","datalayerdata","pageCategory","loggedin","xUp","yUp","listenerForScroll","xDiff","yDiff","calculatedX","Math","abs","transform","getComputedStyle","WebKitCSSMatrix","m41","addClonedBar","scrollLeft","duration","offsetLeft","offsetWidth","timerId","clearTimeout","setTimeout","style","stopAnimate","position","clonedNode","cloneNode","appendChild","prepend","to","ease","onStart","paused","play","progress","playAnimate","resume","pauseAnimate","pause"],"sourceRoot":""}