{"version":3,"sources":["envisionSection.js","imageComparisonSlider.js"],"names":["global","NewHomeSource","Object","hasOwnProperty","call","window","ActiveXObject","previousEnvisionSection","EnvisionSection","triggerButton","document","getElementById","noConflict","eventsConfiguration","envisionButton","callbacks","Event","clickElement","bind","elements","events","ImageSlider","slide","event","value","target","image","closest","querySelector","style","clipPath","init","container","addEventListener","querySelectorAll","forEach","slider"],"mappings":"CAAA,SAAAA,QACA,aAIA,GAFAA,OAAAC,cAAAD,OAAAC,eAAA,GAEAC,OAAAC,eAAAC,KAAAC,OAAA,mBACAA,OAAAC,cACA,OAGA,MAAAC,wBAAAP,OAAAC,cAAAO,gBAGAC,cADAT,OAAAU,SAAAC,eAAA,eACAX,OAAAU,SAAAC,eAAA,aAKA,SAAAH,mBAQAA,gBAAAI,WAAA,WAEA,OADAZ,OAAAC,cAAAO,gBAAAD,wBACAC,iBAGA,MAAAK,oBAAA,CACAC,eAAA,CACAC,UAAA,CAAAf,OAAAC,cAAAe,MAAAC,aAAAC,KAAA,KAAAT,gBACAU,SAvBA,wBAwBAC,OAAA,CAAA,QAAA,cAIApB,OAAAC,cAAAe,MAAAH,qBACAb,OAAAC,cAAAO,gBAAAA,gBAxCA,CAyCAH,QCXA,SAAAL,QACA,aAOA,SAAAqB,eAOA,SAAAC,MAAAC,OACA,MACAC,MADAD,MAAAE,OACAD,MAEAE,MADAH,MAAAE,OAAAE,QAAA,kCACAC,cAAA,gCAEAF,OAAAF,QACAE,MAAAG,MAAAC,SAAA,eAAAN,YAAAA,wBAIA,SAAAO,KAAAC,WACAA,UAAAC,iBAAA,QAAAX,OAxBAtB,OAAAC,cAAAD,OAAAC,eAAA,GA2BAoB,YAAAU,KAAAA,KAEArB,SAAAwB,iBAAA,kCACAC,SAAAC,SACAL,KAAAK,WAGApC,OAAAC,cAAAoB,YAAAA,YArCA,CAuCAhB","file":"../envisiondetailsbundle-0d39ea4593.min.js","sourceRoot":"..","sourcesContent":["(function envisionSection(global) {\r\n  'use strict';\r\n\r\n  global.NewHomeSource = global.NewHomeSource || {};\r\n\r\n  if (Object.hasOwnProperty.call(window, 'ActiveXObject') &&\r\n    !window.ActiveXObject) {\r\n    return;\r\n  }\r\n\r\n  const previousEnvisionSection = global.NewHomeSource.EnvisionSection;\r\n  const queryEnvisionButton = '#nhs_customizeOptions';\r\n  const chooseOption = global.document.getElementById('nhs_choose');\r\n  const triggerButton = chooseOption || global.document.getElementById('nhs_other');\r\n\r\n  /**\r\n   * @constructs NewHomeSource.EnvisionSection\r\n   */\r\n  function EnvisionSection() {\r\n  }\r\n\r\n  /**\r\n   * @public\r\n   *\r\n   * noConflict: Returns control of NewHomeSource.EnvisionSection to the previous script.\r\n   */\r\n  EnvisionSection.noConflict = function noConflict() {\r\n    global.NewHomeSource.EnvisionSection = previousEnvisionSection;\r\n    return EnvisionSection;\r\n  };\r\n\r\n  const eventsConfiguration = {\r\n    envisionButton: {\r\n      callbacks: [global.NewHomeSource.Event.clickElement.bind(null, triggerButton)],\r\n      elements: queryEnvisionButton,\r\n      events: ['click', 'touchend']\r\n    }\r\n  };\r\n\r\n  global.NewHomeSource.Event(eventsConfiguration);\r\n  global.NewHomeSource.EnvisionSection = EnvisionSection;\r\n}(window));\r\n","/**\r\n * This component is used to create sliders with multiple images, it will automatically init all the\r\n * elements that contain a data-image-compare-container, it also exposes the init method in case you need to\r\n * dynamically add another component.\r\n *\r\n * To properly work, this components needs the following:\r\n * 1. to add the data-image-compare-container to the parent of the slider\r\n * 2. add a type=\"range\" input with the data-image-compare-slider attribute\r\n * 3. 2 images, the second one needs to have the data-image-compare-overlay data attribute to properly work\r\n *\r\n * The basic structure for this can be seen below:\r\n *\r\n * <div class=\"design-center__visualizer-container\" data-image-compare-container>\r\n    <picture>\r\n        <source src=\"image1.webp\" type=\"image/webp\">\r\n        <source src=\"image1.jpg\" type=\"image/jpeg\">\r\n        <img  src=\"image1.jpg\" alt=\"\">\r\n    </picture>\r\n\r\n    <picture>\r\n        <source src=\"image1.webp\" type=\"image/webp\">\r\n        <source src=\"image1.jpg\" type=\"image/jpeg\">\r\n        <img  src=\"image1.jpg\" alt=\"\" data-image-compare-overlay>\r\n    </picture>\r\n\r\n    <label for=\"slider\" class=\"visuallyhidden\">Slide!</label>\r\n    <input data-image-compare-slider type=\"range\" min=\"0\" max=\"100\" value=\"50\" step=\"5\" id=\"slider\">\r\n  </div>\r\n */\r\n\r\n(function imageSlider(global) {\r\n  'use strict';\r\n\r\n  global.NewHomeSource = global.NewHomeSource || {};\r\n\r\n  /**\r\n    * @constructs NewHomeSource.ImageSlider\r\n    */\r\n  function ImageSlider() {\r\n  }\r\n\r\n  /**\r\n     * Function used to dynamically change the clip path for the slider to work.\r\n     * @param {*} event\r\n     */\r\n  function slide(event) {\r\n    const slider = event.target;\r\n    const value = slider.value;\r\n    const container = event.target.closest('[data-image-compare-container]');\r\n    const image = container.querySelector('[data-image-compare-overlay]');\r\n\r\n    if (image && value) {\r\n      image.style.clipPath = `polygon(0 0,${value}% 0,${value}% 100%, 0 100%)`;\r\n    }\r\n  }\r\n\r\n  function init(container) {\r\n    container.addEventListener('input', slide);\r\n  }\r\n\r\n  ImageSlider.init = init;\r\n\r\n  const sliders = document.querySelectorAll('[data-image-compare-container]');\r\n  sliders.forEach((slider) => {\r\n    init(slider);\r\n  });\r\n\r\n  global.NewHomeSource.ImageSlider = ImageSlider;\r\n  return ImageSlider;\r\n}(window));\r\n"]}