{"version":3,"file":"306.min.js?t=1744984834426","mappings":"2KAMe,MAAMA,EACpBC,iBAAmB,CAClBC,UAAW,oCACXC,gBAAiB,kDAGlBF,eAAiB,CAChBG,eAAgB,yCAGjBH,cAAgB,CAAC,EAEjBI,WAAAA,CAAYC,GACXC,KAAKD,QAAUA,EACfC,KAAKC,GAAKF,GAASE,IAAM,GACzBD,KAAKE,SAAWC,EAAAA,EAASC,cAEzBJ,KAAKK,oBAAsBL,KAAKE,SAASG,oBAEzCL,KAAKM,WACLN,KAAKO,cACN,CAKAD,QAAAA,GACCN,KAAKQ,eAAiBR,KAAKD,QAAQU,cAClChB,EAAiBiB,UAAUd,gBAE7B,CAKAW,YAAAA,GAECP,KAAKQ,eAAeG,iBAAiB,QAASX,KAAKY,aACpD,CAKAC,YAAAA,GACCb,KAAKQ,eAAeM,oBAAoB,QAASd,KAAKY,aACvD,CAKAG,OAAAA,GACCf,KAAKa,cACN,CAEAD,aAAgBI,IAEXhB,KAAKiB,gBAAgBC,qBAAqBlB,KAAKiB,gBAInDjB,KAAKiB,eAAiBE,uBAAsB,KAE3C,MAAMC,EAAW,GAAGJ,EAAMK,OAAOC,SAC3BC,EAAUP,EAAMK,OAAOG,cAAcC,uBAE3CF,EAAQG,MAAMC,YAAY,aAAcP,GAGb,MAAvBJ,EAAMK,OAAOC,OAAwC,QAAvBN,EAAMK,OAAOC,MAC9CC,EAAQK,UAAUC,IAAIpC,EAAiBqC,QAAQjC,gBAE/C0B,EAAQK,UAAUG,OAAOtC,EAAiBqC,QAAQjC,eACnD,GACC,E","sources":["webpack://@hero-digital/masonite/./src/components/modules/ComparisonSlider/ComparisonSlider.js"],"sourcesContent":["import Services from 'services'\n\n/* Comparison Slider Module:\n   Please note: Part of the code in this component is based on an article created by Paul Hebert.\n   The article can be found here: https://cloudfour.com/thinks/building-an-accessible-image-comparison-web-component/\n*/\nexport default class ComparisonSlider {\n\tstatic SELECTORS = {\n\t\tCOMPONENT: '[data-cmp-is=\"comparison-slider\"]',\n\t\tCLIPPING_SLIDER: '[data-cmp-comparison-slider=\"clipping-slider\"]'\n\t}\n\n\tstatic CLASSES = {\n\t\tSLIDER_BOOKEND: 'mod-comparison-slider__after--bookend'\n\t}\n\n\tstatic VALUES = {}\n\n\tconstructor(element) {\n\t\tthis.element = element // ref to component element\n\t\tthis.id = element?.id || '' // ref to component id\n\t\tthis.services = Services.getInstance()\n\n\t\tthis.EventEmitterService = this.services.EventEmitterService\n\n\t\tthis.cacheDom()\n\t\tthis.attachEvents()\n\t}\n\n\t/**\n\t * Cache the dom refs needed for the component\n\t */\n\tcacheDom() {\n\t\tthis.clippingSlider = this.element.querySelector(\n\t\t\tComparisonSlider.SELECTORS.CLIPPING_SLIDER\n\t\t)\n\t}\n\n\t/**\n\t * Attach component event listeners\n\t */\n\tattachEvents() {\n\t\t// Listen for the input being dragged\n\t\tthis.clippingSlider.addEventListener('input', this.slideHandler)\n\t}\n\n\t/**\n\t * Detach component event listeners\n\t */\n\tdetachEvents() {\n\t\tthis.clippingSlider.removeEventListener('input', this.slideHandler)\n\t}\n\n\t/**\n\t * Destroy the carousel instance and remove event listeners\n\t */\n\tdestroy() {\n\t\tthis.detachEvents()\n\t}\n\n\tslideHandler = (event) => {\n\t\t// If an animation frame is already queued up, cancel it\n\t\tif (this.animationFrame) cancelAnimationFrame(this.animationFrame)\n\n\t\t// Store an animation frame so we can keep track of scheduled\n\t\t// repaints and cancel old repaints that haven't happened yet\n\t\tthis.animationFrame = requestAnimationFrame(() => {\n\t\t\t// Grab the input's value\n\t\t\tconst newValue = `${event.target.value}%`\n\t\t\tconst afterEl = event.target.parentElement.previousElementSibling\n\t\t\t// Use it to set our custom property on the clipped (after) image\n\t\t\tafterEl.style.setProperty('--exposure', newValue)\n\n\t\t\t// hide the divider line when slider is at 0 or 100\n\t\t\tif (event.target.value === '0' || event.target.value === '100') {\n\t\t\t\tafterEl.classList.add(ComparisonSlider.CLASSES.SLIDER_BOOKEND)\n\t\t\t} else {\n\t\t\t\tafterEl.classList.remove(ComparisonSlider.CLASSES.SLIDER_BOOKEND)\n\t\t\t}\n\t\t})\n\t}\n}\n"],"names":["ComparisonSlider","static","COMPONENT","CLIPPING_SLIDER","SLIDER_BOOKEND","constructor","element","this","id","services","Services","getInstance","EventEmitterService","cacheDom","attachEvents","clippingSlider","querySelector","SELECTORS","addEventListener","slideHandler","detachEvents","removeEventListener","destroy","event","animationFrame","cancelAnimationFrame","requestAnimationFrame","newValue","target","value","afterEl","parentElement","previousElementSibling","style","setProperty","classList","add","CLASSES","remove"],"sourceRoot":""}