{"version":3,"file":"306.min.js?t=1743173738202","mappings":"2KAMe,MAAMA,EACnBC,iBAAmB,CACjBC,UAAW,oCACXC,gBAAiB,kDAGnBF,eAAiB,CACfG,eAAgB,yCAGlBH,cAAgB,CAAC,EAEjBI,WAAAA,CAAYC,GACVC,KAAKD,QAAUA,EACfC,KAAKC,GAAKF,GAASE,IAAM,GACzBD,KAAKE,SAAWC,EAAAA,EAASC,cAEzBJ,KAAKK,oBAAsBL,KAAKE,SAASG,oBAEzCL,KAAKM,WACLN,KAAKO,cACP,CAKAD,QAAAA,GACEN,KAAKQ,eAAiBR,KAAKD,QAAQU,cACjChB,EAAiBiB,UAAUd,gBAE/B,CAKAW,YAAAA,GAEEP,KAAKQ,eAAeG,iBAAiB,QAASX,KAAKY,aACrD,CAKAC,YAAAA,GACEb,KAAKQ,eAAeM,oBAAoB,QAASd,KAAKY,aACxD,CAKAG,OAAAA,GACEf,KAAKa,cACP,CAEAD,aAAgBI,IAEVhB,KAAKiB,gBAAgBC,qBAAqBlB,KAAKiB,gBAInDjB,KAAKiB,eAAiBE,uBAAsB,KAE1C,MAAMC,EAAW,GAAGJ,EAAMK,OAAOC,SAC3BC,EAAUP,EAAMK,OAAOG,cAAcC,uBAE3CF,EAAQG,MAAMC,YAAY,aAAcP,GAGb,MAAvBJ,EAAMK,OAAOC,OAAwC,QAAvBN,EAAMK,OAAOC,MAC7CC,EAAQK,UAAUC,IAAIpC,EAAiBqC,QAAQjC,gBAE/C0B,EAAQK,UAAUG,OAAOtC,EAAiBqC,QAAQjC,eACpD,GACA,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  static SELECTORS = {\n    COMPONENT: '[data-cmp-is=\"comparison-slider\"]',\n    CLIPPING_SLIDER: '[data-cmp-comparison-slider=\"clipping-slider\"]'\n  }\n\n  static CLASSES = {\n    SLIDER_BOOKEND: 'mod-comparison-slider__after--bookend'\n  }\n\n  static VALUES = {}\n\n  constructor(element) {\n    this.element = element // ref to component element\n    this.id = element?.id || '' // ref to component id\n    this.services = Services.getInstance()\n\n    this.EventEmitterService = this.services.EventEmitterService\n\n    this.cacheDom()\n    this.attachEvents()\n  }\n\n  /**\n   * Cache the dom refs needed for the component\n   */\n  cacheDom() {\n    this.clippingSlider = this.element.querySelector(\n      ComparisonSlider.SELECTORS.CLIPPING_SLIDER\n    )\n  }\n\n  /**\n   * Attach component event listeners\n   */\n  attachEvents() {\n    // Listen for the input being dragged\n    this.clippingSlider.addEventListener('input', this.slideHandler)\n  }\n\n  /**\n   * Detach component event listeners\n   */\n  detachEvents() {\n    this.clippingSlider.removeEventListener('input', this.slideHandler)\n  }\n\n  /**\n   * Destroy the carousel instance and remove event listeners\n   */\n  destroy() {\n    this.detachEvents()\n  }\n\n  slideHandler = (event) => {\n    // If an animation frame is already queued up, cancel it\n    if (this.animationFrame) cancelAnimationFrame(this.animationFrame)\n\n    // Store an animation frame so we can keep track of scheduled\n    // repaints and cancel old repaints that haven't happened yet\n    this.animationFrame = requestAnimationFrame(() => {\n      // Grab the input's value\n      const newValue = `${event.target.value}%`\n      const afterEl = event.target.parentElement.previousElementSibling\n      // Use it to set our custom property on the clipped (after) image\n      afterEl.style.setProperty('--exposure', newValue)\n\n      // hide the divider line when slider is at 0 or 100\n      if (event.target.value === '0' || event.target.value === '100') {\n        afterEl.classList.add(ComparisonSlider.CLASSES.SLIDER_BOOKEND)\n      } else {\n        afterEl.classList.remove(ComparisonSlider.CLASSES.SLIDER_BOOKEND)\n      }\n    })\n  }\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":""}