{"version":3,"sources":["webpack://img-comparison-slider/./src/styles.scss","webpack://img-comparison-slider/./node_modules/css-loader/dist/runtime/api.js","webpack://img-comparison-slider/webpack/bootstrap","webpack://img-comparison-slider/webpack/runtime/compat get default export","webpack://img-comparison-slider/webpack/runtime/define property getters","webpack://img-comparison-slider/webpack/runtime/hasOwnProperty shorthand","webpack://img-comparison-slider/./src/template.html","webpack://img-comparison-slider/./src/defaults.ts","webpack://img-comparison-slider/./src/index.ts","webpack://img-comparison-slider/./src/inBetween.ts"],"names":["___CSS_LOADER_EXPORT___","i","push","module","id","exports","cssWithMappingToString","list","toString","this","map","item","content","concat","join","modules","mediaQuery","dedupe","alreadyImportedModules","length","_i","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","undefined","__webpack_modules__","n","getter","__esModule","d","a","definition","key","o","Object","defineProperty","enumerable","get","obj","prop","prototype","hasOwnProperty","call","RENDERED_CLASS","templateElement","document","createElement","innerHTML","styles","KeySlideOffset","ArrowLeft","ArrowRight","getTouchPagePoint","e","x","touches","pageX","y","pageY","HTMLImgComparisonSliderElement","HTMLElement","super","exposure","hasAttribute","parseFloat","getAttribute","slideOnHover","isMouseDown","isFocused","onMouseMove","slideToPageX","bodyUserSelectStyle","onMouseDown","window","addEventListener","onWindowMouseUp","enableTransition","focus","body","style","userSelect","removeEventListener","isTouchComparing","hasTouchMoved","onTouchStart","touchStartPoint","onTouchMove","preventDefault","currentPoint","Math","abs","onTouchEnd","onBlur","stopSlideAnimation","onFocus","onKeyDown","isAnimating","startSlideAnimation","onKeyUp","resetWidth","imageWidth","offsetWidth","shadowRoot","attachShadow","mode","appendChild","cloneNode","firstElement","getElementById","firstImageContainerElement","secondElement","newValue","newExposure","setExposure","toLowerCase","tabIndex","ResizeObserver","observe","passive","hover","classList","contains","add","querySelectorAll","console","warn","transitionTimer","clearTimeout","name","oldValue","increment","actual","setProperty","event","Event","dispatchEvent","getBoundingClientRect","left","scrollX","slide","setTimeout","offset","lastTimestamp","now","distance","requestAnimationFrame","customElements","define"],"mappings":"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","file":"index.js","sourcesContent":["// Imports\nimport ___CSS_LOADER_API_IMPORT___ from \"../node_modules/css-loader/dist/runtime/api.js\";\nvar ___CSS_LOADER_EXPORT___ = ___CSS_LOADER_API_IMPORT___(function(i){return i[1]});\n// Module\n___CSS_LOADER_EXPORT___.push([module.id, \":host{--divider-width: 1px;--divider-color: #fff;--divider-shadow: none;--default-handle-width: 50px;--default-handle-color: #fff;--default-handle-opacity: 1;--default-handle-shadow: none;position:relative;display:inline-block;overflow:hidden;line-height:0;direction:ltr}@media screen and (-webkit-min-device-pixel-ratio: 0)and (min-resolution: 0.001dpcm){:host{outline-offset:1px}}::slotted(*){-webkit-user-drag:none;-khtml-user-drag:none;-moz-user-drag:none;-o-user-drag:none;user-drag:none;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.first{position:absolute;left:0;top:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--transition-time: 0ms;transform:translateX(calc(var(--exposure) * -1));transition:transform var(--transition-time)}.first .first-overlay-container{position:relative;transform:translateX(var(--exposure));transition:transform var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:0;height:100%;display:flex;align-items:flex-end;justify-content:center;flex-direction:column}.divider{position:absolute;height:100%;width:100%;left:0;top:0;display:flex;align-items:center;justify-content:center;flex-direction:column}.divider:after{content:\\\" \\\";display:block;height:100%;border-left-width:var(--divider-width);border-left-style:solid;border-left-color:var(--divider-color);box-shadow:var(--divider-shadow)}.handle{pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translateX(-0.5px)}.default-handle{width:var(--default-handle-width);opacity:var(--default-handle-opacity);transition:all 1s;filter:drop-shadow(var(--default-handle-shadow))}.default-handle path{stroke:var(--default-handle-color)}\", \"\"]);\n// Exports\nexport default ___CSS_LOADER_EXPORT___;\n","\"use strict\";\n\n/*\n  MIT License http://www.opensource.org/licenses/mit-license.php\n  Author Tobias Koppers @sokra\n*/\n// css base code, injected by the css-loader\n// eslint-disable-next-line func-names\nmodule.exports = function (cssWithMappingToString) {\n  var list = []; // return the list of modules as css string\n\n  list.toString = function toString() {\n    return this.map(function (item) {\n      var content = cssWithMappingToString(item);\n\n      if (item[2]) {\n        return \"@media \".concat(item[2], \" {\").concat(content, \"}\");\n      }\n\n      return content;\n    }).join(\"\");\n  }; // import a list of modules into the list\n  // eslint-disable-next-line func-names\n\n\n  list.i = function (modules, mediaQuery, dedupe) {\n    if (typeof modules === \"string\") {\n      // eslint-disable-next-line no-param-reassign\n      modules = [[null, modules, \"\"]];\n    }\n\n    var alreadyImportedModules = {};\n\n    if (dedupe) {\n      for (var i = 0; i < this.length; i++) {\n        // eslint-disable-next-line prefer-destructuring\n        var id = this[i][0];\n\n        if (id != null) {\n          alreadyImportedModules[id] = true;\n        }\n      }\n    }\n\n    for (var _i = 0; _i < modules.length; _i++) {\n      var item = [].concat(modules[_i]);\n\n      if (dedupe && alreadyImportedModules[item[0]]) {\n        // eslint-disable-next-line no-continue\n        continue;\n      }\n\n      if (mediaQuery) {\n        if (!item[2]) {\n          item[2] = mediaQuery;\n        } else {\n          item[2] = \"\".concat(mediaQuery, \" and \").concat(item[2]);\n        }\n      }\n\n      list.push(item);\n    }\n  };\n\n  return list;\n};","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\tid: moduleId,\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = (module) => {\n\tvar getter = module && module.__esModule ?\n\t\t() => (module['default']) :\n\t\t() => (module);\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = (exports, definition) => {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.o = (obj, prop) => (Object.prototype.hasOwnProperty.call(obj, prop))","// Module\nvar code = \"<div class=\\\"second\\\" id=\\\"second\\\"> <slot name=\\\"second\\\"><slot name=\\\"before\\\"></slot></slot> </div> <div class=\\\"first\\\" id=\\\"first\\\"> <div class=\\\"first-overlay\\\"> <div class=\\\"first-overlay-container\\\" id=\\\"firstImageContainer\\\"> <slot name=\\\"first\\\"><slot name=\\\"after\\\"></slot></slot> </div> </div> <div class=\\\"handle-container\\\"> <div class=\\\"divider\\\"></div> <div class=\\\"handle\\\"> <slot name=\\\"handle\\\"> <svg xmlns=\\\"http://www.w3.org/2000/svg\\\" class=\\\"default-handle\\\" viewBox=\\\"-8 -3 16 6\\\"> <path d=\\\"M -5 -2 L -7 0 L -5 2 M 5 -2 L 7 0 L 5 2\\\" fill=\\\"none\\\" vector-effect=\\\"non-scaling-stroke\\\"/> </svg> </slot> </div> </div> </div> \";\n// Exports\nexport default code;","export const TABINDEX = 0;\nexport const RENDERED_CLASS = 'rendered';\n","import styles from './styles.scss';\nimport { inBetween } from './inBetween';\nimport templateHtml from './template.html';\nimport { TABINDEX, RENDERED_CLASS } from './defaults';\nconst templateElement = document.createElement('template');\ntemplateElement.innerHTML = `<style>${styles}</style>${templateHtml}`;\nconst KeySlideOffset = {\n    ArrowLeft: -1,\n    ArrowRight: 1,\n};\nconst getTouchPagePoint = (e) => ({\n    x: e.touches[0].pageX,\n    y: e.touches[0].pageY,\n});\nconst slideAnimationPeriod = 1000 / 60;\nexport class HTMLImgComparisonSliderElement extends HTMLElement {\n    constructor() {\n        super();\n        this.exposure = this.hasAttribute('value')\n            ? parseFloat(this.getAttribute('value'))\n            : 50;\n        this.slideOnHover = false;\n        this.isMouseDown = false;\n        this.isFocused = false;\n        this.onMouseMove = (e) => {\n            if (this.isMouseDown || this.slideOnHover) {\n                this.slideToPageX(e.pageX);\n            }\n        };\n        this.bodyUserSelectStyle = '';\n        this.onMouseDown = (e) => {\n            if (this.slideOnHover) {\n                return;\n            }\n            window.addEventListener('mousemove', this.onMouseMove);\n            window.addEventListener('mouseup', this.onWindowMouseUp);\n            this.isMouseDown = true;\n            this.enableTransition();\n            this.slideToPageX(e.pageX);\n            this.focus();\n            this.bodyUserSelectStyle = window.document.body.style.userSelect;\n            window.document.body.style.userSelect = 'none';\n        };\n        this.onWindowMouseUp = () => {\n            this.isMouseDown = false;\n            window.document.body.style.userSelect = this.bodyUserSelectStyle;\n            window.removeEventListener('mousemove', this.onMouseMove);\n            window.removeEventListener('mouseup', this.onWindowMouseUp);\n        };\n        this.isTouchComparing = false;\n        this.hasTouchMoved = false;\n        this.onTouchStart = (e) => {\n            this.touchStartPoint = getTouchPagePoint(e);\n            if (this.isFocused) {\n                this.enableTransition();\n                this.slideToPageX(e.touches[0].pageX);\n            }\n        };\n        this.onTouchMove = (e) => {\n            if (this.isTouchComparing) {\n                this.slideToPageX(e.touches[0].pageX);\n                e.preventDefault();\n                return false;\n            }\n            if (!this.hasTouchMoved) {\n                const currentPoint = getTouchPagePoint(e);\n                if (Math.abs(currentPoint.y - this.touchStartPoint.y) <\n                    Math.abs(currentPoint.x - this.touchStartPoint.x)) {\n                    this.isTouchComparing = true;\n                    this.focus();\n                    this.slideToPageX(e.touches[0].pageX);\n                    e.preventDefault();\n                    return false;\n                }\n                this.hasTouchMoved = true;\n            }\n        };\n        this.onTouchEnd = () => {\n            this.isTouchComparing = false;\n            this.hasTouchMoved = false;\n        };\n        this.onBlur = () => {\n            this.stopSlideAnimation();\n            this.isFocused = false;\n        };\n        this.onFocus = () => {\n            this.isFocused = true;\n        };\n        this.onKeyDown = (e) => {\n            if (this.isAnimating) {\n                return;\n            }\n            this.isAnimating = true;\n            const key = e.key;\n            if (KeySlideOffset[key] === undefined) {\n                return;\n            }\n            this.startSlideAnimation(KeySlideOffset[key]);\n        };\n        this.onKeyUp = (e) => {\n            if (!this.isAnimating) {\n                return;\n            }\n            if (KeySlideOffset[e.key] === undefined) {\n                return;\n            }\n            this.stopSlideAnimation();\n        };\n        this.resetWidth = () => {\n            this.imageWidth = this.offsetWidth;\n        };\n        const shadowRoot = this.attachShadow({ mode: 'open' });\n        shadowRoot.appendChild(templateElement.content.cloneNode(true));\n        this.firstElement = shadowRoot.getElementById('first');\n        this.firstImageContainerElement = shadowRoot.getElementById('firstImageContainer');\n        this.secondElement = shadowRoot.getElementById('second');\n    }\n    get value() {\n        return this.exposure;\n    }\n    set value(newValue) {\n        const newExposure = parseFloat(newValue);\n        if (newExposure === this.exposure) {\n            return;\n        }\n        this.exposure = newExposure;\n        this.enableTransition();\n        this.setExposure();\n    }\n    get hover() {\n        return this.slideOnHover;\n    }\n    set hover(newValue) {\n        this.slideOnHover = newValue.toString().toLowerCase() !== 'false';\n        this.removeEventListener('mousemove', this.onMouseMove);\n        if (this.slideOnHover) {\n            this.addEventListener('mousemove', this.onMouseMove);\n        }\n    }\n    static get observedAttributes() {\n        return ['hover'];\n    }\n    connectedCallback() {\n        if (!this.hasAttribute('tabindex')) {\n            this.tabIndex = TABINDEX;\n        }\n        this.addEventListener('dragstart', (e) => {\n            e.preventDefault();\n            return false;\n        });\n        const resizeObserver = new ResizeObserver(this.resetWidth);\n        resizeObserver.observe(this);\n        this.setExposure(0);\n        this.addEventListener('keydown', this.onKeyDown);\n        this.addEventListener('keyup', this.onKeyUp);\n        this.addEventListener('focus', this.onFocus);\n        this.addEventListener('blur', this.onBlur);\n        this.addEventListener('touchstart', this.onTouchStart, {\n            passive: true,\n        });\n        this.addEventListener('touchmove', this.onTouchMove, {\n            passive: false,\n        });\n        this.addEventListener('touchend', this.onTouchEnd);\n        this.addEventListener('mousedown', this.onMouseDown);\n        this.hover = this.hasAttribute('hover')\n            ? this.getAttribute('hover')\n            : false;\n        this.resetWidth();\n        if (!this.classList.contains(RENDERED_CLASS)) {\n            this.classList.add(RENDERED_CLASS);\n        }\n        if (this.querySelectorAll('[slot=\"before\"], [slot=\"after\"]').length > 0) {\n            console.warn('<img-comparison-slider>: ' +\n                'slot names \"before\" and \"after\" are deprecated and soon won\\'t be supported. ' +\n                'Please use slot=\"first\" instead of slot=\"after\", and slot=\"second\" instead of slot=\"before\".');\n        }\n    }\n    disconnectedCallback() {\n        if (this.transitionTimer) {\n            window.clearTimeout(this.transitionTimer);\n        }\n    }\n    attributeChangedCallback(name, oldValue, newValue) {\n        this.hover = newValue;\n    }\n    setExposure(increment = 0) {\n        this.exposure = inBetween(this.exposure + increment, 0, 100);\n        this.firstElement.style.setProperty('--exposure', `${100 - this.exposure}%`);\n    }\n    slide(increment = 0) {\n        this.setExposure(increment);\n        const event = new Event('slide');\n        this.dispatchEvent(event);\n    }\n    slideToPageX(pageX) {\n        const x = pageX - this.getBoundingClientRect().left - window.scrollX;\n        this.exposure = (x / this.imageWidth) * 100;\n        this.slide(0);\n    }\n    enableTransition() {\n        const transitionTime = 100;\n        this.firstElement.style.setProperty('--transition-time', `${transitionTime}ms`);\n        this.transitionTimer = window.setTimeout(() => {\n            this.firstElement.style.setProperty('--transition-time', `0ms`);\n            this.transitionTimer = null;\n        }, transitionTime);\n    }\n    startSlideAnimation(offset) {\n        let lastTimestamp = null;\n        const slide = (now) => {\n            if (lastTimestamp === null) {\n                lastTimestamp = now;\n            }\n            const interval = now - lastTimestamp, distance = (interval / slideAnimationPeriod) * offset;\n            this.slide(distance);\n            if (this.isAnimating) {\n                window.requestAnimationFrame(slide);\n                lastTimestamp = now;\n            }\n        };\n        window.requestAnimationFrame(slide);\n    }\n    stopSlideAnimation() {\n        this.isAnimating = false;\n    }\n}\nwindow.customElements.define('img-comparison-slider', HTMLImgComparisonSliderElement);\n","export const inBetween = (actual, min, max) => {\n    if (actual < min) {\n        return min;\n    }\n    if (actual > max) {\n        return max;\n    }\n    return actual;\n};\n"],"sourceRoot":""}