{"version":3,"file":"compareImages-3f98fa07.js","sources":["../../../src/js/modules/compare-images.js"],"sourcesContent":["const template = document.createElement(\"template\");\n\n// Styling range input thumbs requires you to separately define the CSS rules\n// for different browsers. We store them once here for ease of maintenance.\nconst thumbStyles = `\n  background-color: var(--thumb-background-color);\n  background-image: var(--thumb-background-image);\n  background-size: 90%;\n  background-position: center center;\n  background-repeat: no-repeat;\n  border-radius: var(--thumb-radius);\n  border: var(--thumb-border-size) var(--thumb-border-color) solid;\n  color: var(--thumb-border-color);\n  width: var(--thumb-size);\n  height: var(--thumb-size);\n`;\n\nconst thumbFocusStyles = `\n  box-shadow: 0px 0px 0px var(--focus-width) var(--focus-color);\n`;\n\nconst thumbSvgWidth = 4;\n\n// Since the code below is a template string literal, it will not be minified or\n// transpiled\ntemplate.innerHTML = /*html*/`\n  <style>\n    :host {\n      --exposure: 50%;\n\n      --thumb-background-color: hsla(0, 0%, 100%, 0.9);\n      --thumb-background-image: url('data:image/svg+xml;utf8,<svg viewbox=\"0 0 60 60\"  width=\"60\" height=\"60\" xmlns=\"http://www.w3.org/2000/svg\"><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"${thumbSvgWidth}\" d=\"M20 20 L10 30 L20 40\"/><path fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"${thumbSvgWidth}\" d=\"M40 20 L50 30 L40 40\"/></svg>');\n      --thumb-size: clamp(3em, 10vmin, 5em);\n      --thumb-radius: 50%;\n      --thumb-border-color: hsla(0, 0%, 0%, 0.9);\n      --thumb-border-size: 2px;\n\n      --focus-width: var(--thumb-border-size);\n      --focus-color: hsl(200, 100%, 80%);\n\n      --divider-width: 2px;\n      --divider-color: hsla(0, 0%, 0%, 0.9);\n\n      display: flex;\n      flex-direction: column;\n      margin: 0;\n      overflow: hidden;\n      position: relative;\n    }\n\n    ::slotted(img) {\n      height: auto; width: 100%;\n      content-visibility: visible;\n    }\n\n    ::slotted([slot='image-2']) {\n      clip-path: polygon(\n        calc(var(--exposure) + var(--divider-width)/2) 0,\n        100% 0,\n        100% 100%,\n        calc(var(--exposure) + var(--divider-width)/2) 100%);\n        content-visibility: visible !important; /* Important because by default we set these as \"auto\" and the browser assumed that the image shouldn't be visible becaues it's behind another image - unless we explicitly say otherwise */\n    }\n\n    slot {\n      display: flex;\n      flex-direction: column;\n      width: 100%;\n    }\n\n    slot[name='image-2'] {\n      position: absolute;\n      top:0;\n      filter: drop-shadow(calc(var(--divider-width) * -1) 0 0 var(--divider-color));\n    }\n\n    .visually-hidden {\n      border: 0;\n      clip: rect(0 0 0 0);\n      clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      -webkit-clip-path: polygon(0px 0px, 0px 0px, 0px 0px);\n      height: 1px;\n      margin: -1px;\n      overflow: hidden;\n      padding: 0;\n      position: absolute;\n      width: 1px;\n      white-space: nowrap;\n    }\n\n    label {\n      align-items: stretch;\n      display: flex;\n      position: absolute;\n      top: 0;\n      left: 0;\n      bottom: 0;\n      right: 0;\n    }\n\n    input {\n      cursor: col-resize;\n      margin: 0 calc(var(--thumb-size) / -2);\n      width: calc(100% + var(--thumb-size));\n      appearance: none;\n      -webkit-appearance: none;\n      background: none;\n      border: none;\n    }\n\n    @keyframes drag {\n      0%    {\n        opacity: 0;\n      }\n      5%    {\n        opacity: 1;\n      }\n      10%   {\n        transform: translateX(0%) translateY(-50%);\n      }\n      20%   {\n        transform: translateX(-100%) translateY(-50%);\n      }\n      30%   {\n        transform: translateX(-50%) translateY(-50%);\n      }\n      50%   {\n        opacity: 1;\n      }\n      60%  {\n        opacity: 0;\n      }\n      100%  {\n        opacity: 0;\n      }\n    }\n\n    input::before {\n      display: block;\n      background: url(\"/dist/images/drag.svg\") center center no-repeat;\n      background-size: contain;\n      width: 50px;\n      height: 50px;\n      content: \"\";\n      position: absolute;\n      top: calc(50% + 70px);\n      left: 50%;\n      transform: translateX(-50%) translateY(-50%);\n      pointer-events: none;\n      animation: drag 4s infinite;\n      animation-timing-function: ease-out;\n      animation-play-count: 1;\n      animation-delay: 2s;\n      transition: all ease 0.3s;\n    }\n\n  \n\n    label:hover input::before {\n        opacity: 0 !important;\n    }\n\n      \n\n    ::-moz-range-thumb {\n      ${thumbStyles}\n    }\n\n    ::-webkit-slider-thumb {\n      -webkit-appearance: none;\n      ${thumbStyles}\n    }\n\n    input:focus::-moz-range-thumb {\n      ${thumbFocusStyles}\n    }\n\n    input:focus::-webkit-slider-thumb {\n      ${thumbFocusStyles}\n    }\n  </style>\n\n  <slot name=\"image-1\"></slot>\n  <slot name=\"image-2\"></slot>\n\n  <label>\n    <span class=\"visually-hidden js-label-text\">\n      Control how much of each overlapping image is shown.\n      0 means the first image is completely hidden and the second image is fully visible.\n      100 means the first image is fully visible and the second image is completely hidden.\n      50 means both images are half-shown, half-hidden.\n    </span>\n    <input type=\"range\" value=\"50\" min=\"0\" max=\"100\"/>\n  </label>\n`;\n\n/**\n * Our ImageCompare web component class\n *\n * @attr {string} label-text - Provide additional context to screen reader users.\n *\n * @slot image-1 - Your first image. Will appear on the \"left\"\n * @slot image-2 - Your second image. Will appear on the \"right\"\n *\n * @cssprop --thumb-background-color - The background color of the range slider handle.\n * @cssprop --thumb-background-image - The background image of the range slider handle.\n * @cssprop --thumb-size - The size of the range slider handle.\n * @cssprop --thumb-radius - The border-radius of the range slider handle.\n * @cssprop --thumb-border-color - The color of the range slider handle border.\n * @cssprop --thumb-border-size - The width of the range slider handle border.\n *\n * @ccprop --focus-width - The width of the range slider handle's focus outline.\n * @ccprop --focus-color - The color of the range slider handle's focus outline.\n *\n * @ccprop --divider-width - The width of the divider shown between the two images.\n * @ccprop --divider-color - The color of the divider shown between the two images.\n */\nclass ImageCompare extends HTMLElement {\n  constructor() {\n    super();\n    this.attachShadow({ mode: \"open\" });\n  }\n\n  connectedCallback() {\n    this.shadowRoot.appendChild(template.content.cloneNode(true));\n\n    ['input', 'change'].forEach((eventName) => {\n      this.shadowRoot.querySelector(\"input\").addEventListener(\n        eventName,\n        ({ target }) => {\n          if (this.animationFrame) cancelAnimationFrame(this.animationFrame);\n\n          this.animationFrame = requestAnimationFrame(() => {\n            this.shadowRoot.host.style.setProperty('--exposure', `${target.value}%`)\n          });\n        },\n      );\n    });\n\n    const customLabel = this.shadowRoot.host.getAttribute('label-text');\n    if(customLabel) {\n      this.shadowRoot.querySelector(\".js-label-text\").textContent = customLabel;\n    }\n  }\n}\n\ncustomElements.define(\"image-compare\", ImageCompare);\n"],"names":["template","thumbStyles","thumbFocusStyles","thumbSvgWidth","ImageCompare","eventName","target","customLabel"],"mappings":"AAAA,MAAMA,EAAW,SAAS,cAAc,UAAU,EAI5CC,EAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAadC,EAAmB;AAAA;AAAA,EAInBC,EAAgB,EAItBH,EAAS,UAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wPAM2NG,CAAa,oIAAoIA,CAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAsI9YF,CAAW;AAAA;AAAA;AAAA;AAAA;AAAA,QAKXA,CAAW;AAAA;AAAA;AAAA;AAAA,QAIXC,CAAgB;AAAA;AAAA;AAAA;AAAA,QAIhBA,CAAgB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAuCxB,MAAME,UAAqB,WAAY,CACrC,aAAc,CACZ,QACA,KAAK,aAAa,CAAE,KAAM,MAAQ,CAAA,CACnC,CAED,mBAAoB,CAClB,KAAK,WAAW,YAAYJ,EAAS,QAAQ,UAAU,EAAI,CAAC,EAE5D,CAAC,QAAS,QAAQ,EAAE,QAASK,GAAc,CACzC,KAAK,WAAW,cAAc,OAAO,EAAE,iBACrCA,EACA,CAAC,CAAE,OAAAC,CAAM,IAAO,CACV,KAAK,gBAAgB,qBAAqB,KAAK,cAAc,EAEjE,KAAK,eAAiB,sBAAsB,IAAM,CAChD,KAAK,WAAW,KAAK,MAAM,YAAY,aAAc,GAAGA,EAAO,KAAK,GAAG,CACnF,CAAW,CACF,CACT,CACA,CAAK,EAED,MAAMC,EAAc,KAAK,WAAW,KAAK,aAAa,YAAY,EAC/DA,IACD,KAAK,WAAW,cAAc,gBAAgB,EAAE,YAAcA,EAEjE,CACH,CAEA,eAAe,OAAO,gBAAiBH,CAAY"}