import { s as __toESM, t as __commonJSMin } from "./chunk-BNovOVIE.js";
import { t as require_react } from "./react-DA-nE2FX.js";
import { t as require_compiler_runtime } from "./compiler-runtime-CEbnTgxf.js";
import { t as require_jsx_runtime } from "./jsx-runtime-COBk7ree.js";
var require_dist$1 = /* @__PURE__ */ __commonJSMin((() => {
  (() => {
    var e = {
      792: (e2, t2, n2) => {
        n2.d(t2, { Z: () => a });
        var r = n2(609), i = n2.n(r)()((function(e3) {
          return e3[1];
        }));
        i.push([
          e2.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;--handle-position-start: 50%;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}}:host(:focus){outline:2px solid -webkit-focus-ring-color}::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;right:0;line-height:normal;font-size:100%;max-height:100%;height:100%;width:100%;--exposure: 50%;--keyboard-transition-time: 0ms;--default-transition-time: 0ms;--transition-time: var(--default-transition-time)}.first .first-overlay-container{position:relative;clip-path:inset(0 var(--exposure) 0 0);transition:clip-path var(--transition-time);height:100%}.first .first-overlay{overflow:hidden;height:100%}.first.focused{will-change:clip-path}.first.focused .first-overlay-container{will-change:clip-path}.second{position:relative}.handle-container{transform:translateX(50%);position:absolute;top:0;right:var(--exposure);height:100%;transition:right var(--transition-time),bottom var(--transition-time)}.focused .handle-container{will-change:right}.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{position:absolute;top:var(--handle-position-start);pointer-events:none;box-sizing:border-box;margin-left:1px;transform:translate(calc(-50% - 0.5px), -50%);line-height:0}.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)}.vertical .first-overlay-container{clip-path:inset(0 0 var(--exposure) 0)}.vertical .handle-container{transform:translateY(50%);height:auto;top:unset;bottom:var(--exposure);width:100%;left:0;flex-direction:row}.vertical .divider:after{height:1px;width:100%;border-top-width:var(--divider-width);border-top-style:solid;border-top-color:var(--divider-color);border-left:0}.vertical .handle{top:auto;left:var(--handle-position-start);transform:translate(calc(-50% - 0.5px), -50%) rotate(90deg)}',
          ""
        ]);
        let a = i;
      },
      609: (e2) => {
        e2.exports = function(e3) {
          var t2 = [];
          return t2.toString = function() {
            return this.map((function(t3) {
              var n2 = e3(t3);
              return t3[2] ? `@media ${t3[2]} {${n2}}` : n2;
            })).join("");
          }, t2.i = function(e4, n2, r) {
            typeof e4 == "string" && (e4 = [[
              null,
              e4,
              ""
            ]]);
            var i = {};
            if (r) for (var a = 0; a < this.length; a++) {
              var o = this[a][0];
              o != null && (i[o] = true);
            }
            for (var s = 0; s < e4.length; s++) {
              var c = [].concat(e4[s]);
              r && i[c[0]] || (n2 && (c[2] ? c[2] = `${n2} and ${c[2]}` : c[2] = n2), t2.push(c));
            }
          }, t2;
        };
      }
    }, t = {};
    function n(r) {
      var i = t[r];
      if (i !== void 0) return i.exports;
      var a = t[r] = {
        id: r,
        exports: {}
      };
      return e[r](a, a.exports, n), a.exports;
    }
    n.n = (e2) => {
      var t2 = e2 && e2.__esModule ? () => e2.default : () => e2;
      return n.d(t2, { a: t2 }), t2;
    }, n.d = (e2, t2) => {
      for (var r in t2) n.o(t2, r) && !n.o(e2, r) && Object.defineProperty(e2, r, {
        enumerable: true,
        get: t2[r]
      });
    }, n.o = (e2, t2) => Object.prototype.hasOwnProperty.call(e2, t2), (() => {
      var e2 = n(792);
      let t2 = "rendered", r = (e3, t3) => {
        let n2 = e3.getBoundingClientRect(), r2, i2;
        return t3.type === "mousedown" ? (r2 = t3.clientX, i2 = t3.clientY) : (r2 = t3.touches[0].clientX, i2 = t3.touches[0].clientY), r2 >= n2.x && r2 <= n2.x + n2.width && i2 >= n2.y && i2 <= n2.y + n2.height;
      }, i, a = {
        ArrowLeft: -1,
        ArrowRight: 1
      }, o = ["horizontal", "vertical"], s = (e3) => ({
        x: e3.touches[0].pageX,
        y: e3.touches[0].pageY
      }), c = (e3) => ({
        x: e3.pageX,
        y: e3.pageY
      }), l = typeof window < "u" && (window == null ? void 0 : window.HTMLElement);
      typeof window < "u" && (window.document && (i = document.createElement("template"), i.innerHTML = '<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" id="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> '), window.customElements.define("img-comparison-slider", class extends l {
        constructor() {
          super(), this.exposure = this.hasAttribute("value") ? parseFloat(this.getAttribute("value")) : 50, this.slideOnHover = false, this.slideDirection = "horizontal", this.keyboard = "enabled", this.isMouseDown = false, this.animationDirection = 0, this.isFocused = false, this.dragByHandle = false, this.onMouseMove = (e3) => {
            if (this.isMouseDown || this.slideOnHover) {
              let t4 = c(e3);
              this.slideToPage(t4);
            }
          }, this.bodyUserSelectStyle = "", this.bodyWebkitUserSelectStyle = "", this.onMouseDown = (e3) => {
            if (this.slideOnHover || this.handle && !r(this.handleElement, e3)) return;
            e3.preventDefault(), window.addEventListener("mousemove", this.onMouseMove), window.addEventListener("mouseup", this.onWindowMouseUp), this.isMouseDown = true, this.enableTransition();
            let t4 = c(e3);
            this.slideToPage(t4), this.focus(), this.bodyUserSelectStyle = window.document.body.style.userSelect, this.bodyWebkitUserSelectStyle = window.document.body.style.webkitUserSelect, window.document.body.style.userSelect = "none", window.document.body.style.webkitUserSelect = "none";
          }, this.onWindowMouseUp = () => {
            this.isMouseDown = false, window.document.body.style.userSelect = this.bodyUserSelectStyle, window.document.body.style.webkitUserSelect = this.bodyWebkitUserSelectStyle, window.removeEventListener("mousemove", this.onMouseMove), window.removeEventListener("mouseup", this.onWindowMouseUp);
          }, this.touchStartPoint = null, this.isTouchComparing = false, this.hasTouchMoved = false, this.onTouchStart = (e3) => {
            this.dragByHandle && !r(this.handleElement, e3) || (this.touchStartPoint = s(e3), this.isFocused && (this.enableTransition(), this.slideToPage(this.touchStartPoint)));
          }, this.onTouchMove = (e3) => {
            if (this.touchStartPoint === null) return;
            let t4 = s(e3);
            if (this.isTouchComparing) return this.slideToPage(t4), e3.preventDefault(), false;
            if (!this.hasTouchMoved) {
              let n3 = Math.abs(t4.y - this.touchStartPoint.y), r2 = Math.abs(t4.x - this.touchStartPoint.x);
              if (this.slideDirection === "horizontal" && n3 < r2 || this.slideDirection === "vertical" && n3 > r2) return this.isTouchComparing = true, this.focus(), this.slideToPage(t4), e3.preventDefault(), false;
              this.hasTouchMoved = true;
            }
          }, this.onTouchEnd = () => {
            this.isTouchComparing = false, this.hasTouchMoved = false, this.touchStartPoint = null;
          }, this.onBlur = () => {
            this.stopSlideAnimation(), this.isFocused = false, this.firstElement.classList.remove("focused");
          }, this.onFocus = () => {
            this.isFocused = true, this.firstElement.classList.add("focused");
          }, this.onKeyDown = (e3) => {
            if (this.keyboard === "disabled") return;
            let t4 = a[e3.key];
            this.animationDirection !== t4 && t4 !== void 0 && (this.animationDirection = t4, this.startSlideAnimation());
          }, this.onKeyUp = (e3) => {
            if (this.keyboard === "disabled") return;
            let t4 = a[e3.key];
            t4 !== void 0 && this.animationDirection === t4 && this.stopSlideAnimation();
          }, this.resetDimensions = () => {
            this.imageWidth = this.offsetWidth, this.imageHeight = this.offsetHeight;
          };
          let t3 = this.attachShadow({ mode: "open" }), n2 = document.createElement("style");
          n2.innerHTML = e2.Z, this.getAttribute("nonce") && n2.setAttribute("nonce", this.getAttribute("nonce")), t3.appendChild(n2), t3.appendChild(i.content.cloneNode(true)), this.firstElement = t3.getElementById("first"), this.handleElement = t3.getElementById("handle");
        }
        set handle(e3) {
          this.dragByHandle = e3.toString().toLowerCase() !== "false";
        }
        get handle() {
          return this.dragByHandle;
        }
        get value() {
          return this.exposure;
        }
        set value(e3) {
          let t3 = parseFloat(e3);
          t3 !== this.exposure && (this.exposure = t3, this.enableTransition(), this.setExposure());
        }
        get hover() {
          return this.slideOnHover;
        }
        set hover(e3) {
          this.slideOnHover = e3.toString().toLowerCase() !== "false", this.removeEventListener("mousemove", this.onMouseMove), this.slideOnHover && this.addEventListener("mousemove", this.onMouseMove);
        }
        get direction() {
          return this.slideDirection;
        }
        set direction(e3) {
          this.slideDirection = e3.toString().toLowerCase(), this.slide(0), this.firstElement.classList.remove(...o), o.includes(this.slideDirection) && this.firstElement.classList.add(this.slideDirection);
        }
        static get observedAttributes() {
          return ["hover", "direction"];
        }
        connectedCallback() {
          this.hasAttribute("tabindex") || (this.tabIndex = 0), this.addEventListener("dragstart", ((e3) => (e3.preventDefault(), false))), new ResizeObserver(this.resetDimensions).observe(this), this.setExposure(0), this.keyboard = this.hasAttribute("keyboard") && this.getAttribute("keyboard") === "disabled" ? "disabled" : "enabled", this.addEventListener("keydown", this.onKeyDown), this.addEventListener("keyup", this.onKeyUp), this.addEventListener("focus", this.onFocus), this.addEventListener("blur", this.onBlur), this.addEventListener("touchstart", this.onTouchStart, { passive: true }), this.addEventListener("touchmove", this.onTouchMove, { passive: false }), this.addEventListener("touchend", this.onTouchEnd), this.addEventListener("mousedown", this.onMouseDown), this.handle = this.hasAttribute("handle") ? this.getAttribute("handle") : this.dragByHandle, this.hover = this.hasAttribute("hover") ? this.getAttribute("hover") : this.slideOnHover, this.direction = this.hasAttribute("direction") ? this.getAttribute("direction") : this.slideDirection, this.resetDimensions(), this.classList.contains(t2) || this.classList.add(t2);
        }
        disconnectedCallback() {
          this.transitionTimer && window.clearTimeout(this.transitionTimer);
        }
        attributeChangedCallback(e3, t3, n2) {
          e3 === "hover" && (this.hover = n2), e3 === "direction" && (this.direction = n2), e3 === "keyboard" && (this.keyboard = n2 === "disabled" ? "disabled" : "enabled");
        }
        setExposure(e3 = 0) {
          var t3;
          this.exposure = (t3 = this.exposure + e3) < 0 ? 0 : t3 > 100 ? 100 : t3, this.firstElement.style.setProperty("--exposure", 100 - this.exposure + "%");
        }
        slide(e3 = 0) {
          this.setExposure(e3);
          let t3 = new Event("slide");
          this.dispatchEvent(t3);
        }
        slideToPage(e3) {
          this.slideDirection === "horizontal" && this.slideToPageX(e3.x), this.slideDirection === "vertical" && this.slideToPageY(e3.y);
        }
        slideToPageX(e3) {
          this.exposure = (e3 - this.getBoundingClientRect().left - window.scrollX) / this.imageWidth * 100, this.slide(0);
        }
        slideToPageY(e3) {
          this.exposure = (e3 - this.getBoundingClientRect().top - window.scrollY) / this.imageHeight * 100, this.slide(0);
        }
        enableTransition() {
          this.firstElement.style.setProperty("--transition-time", "100ms"), this.transitionTimer = window.setTimeout((() => {
            this.firstElement.style.setProperty("--transition-time", "var(--default-transition-time)"), this.transitionTimer = null;
          }), 100);
        }
        startSlideAnimation() {
          let e3 = null, t3 = this.animationDirection;
          this.firstElement.style.setProperty("--transition-time", "var(--keyboard-transition-time)");
          let n2 = (r2) => {
            if (this.animationDirection === 0 || t3 !== this.animationDirection) return;
            e3 === null && (e3 = r2);
            let i2 = (r2 - e3) / 16.666666666666668 * this.animationDirection;
            this.slide(i2), setTimeout((() => window.requestAnimationFrame(n2)), 0), e3 = r2;
          };
          window.requestAnimationFrame(n2);
        }
        stopSlideAnimation() {
          this.animationDirection = 0, this.firstElement.style.setProperty("--transition-time", "var(--default-transition-time)");
        }
      }));
    })();
  })();
})), require_dist = /* @__PURE__ */ __commonJSMin(((e) => {
  var t = e && e.__createBinding || (Object.create ? (function(e2, t2, n, r2) {
    r2 === void 0 && (r2 = n), Object.defineProperty(e2, r2, {
      enumerable: true,
      get: function() {
        return t2[n];
      }
    });
  }) : (function(e2, t2, n, r2) {
    r2 === void 0 && (r2 = n), e2[r2] = t2[n];
  })), r = e && e.__setModuleDefault || (Object.create ? (function(e2, t2) {
    Object.defineProperty(e2, "default", {
      enumerable: true,
      value: t2
    });
  }) : function(e2, t2) {
    e2.default = t2;
  }), i = e && e.__importStar || function(e2) {
    if (e2 && e2.__esModule) return e2;
    var n = {};
    if (e2 != null) for (var i2 in e2) i2 !== "default" && Object.prototype.hasOwnProperty.call(e2, i2) && t(n, e2, i2);
    return r(n, e2), n;
  };
  Object.defineProperty(e, "__esModule", { value: true }), e.ImgComparisonSlider = void 0;
  var o = require_react();
  typeof document < "u" && Promise.resolve().then(() => i(require_dist$1())), e.ImgComparisonSlider = (0, o.forwardRef)(({ children: e2, onSlide: t2, value: n, className: r2, ...i2 }, a) => {
    let s = (0, o.useRef)();
    return (0, o.useEffect)(() => {
      n !== void 0 && (s.current.value = parseFloat(n.toString()));
    }, [n, s]), (0, o.useEffect)(() => {
      t2 && s.current.addEventListener("slide", t2);
    }, []), (0, o.useImperativeHandle)(a, () => s.current, [s]), (0, o.createElement)("img-comparison-slider", Object.assign({
      class: r2 ? `${r2} rendered` : "rendered",
      tabIndex: 0,
      ref: s
    }, i2), e2);
  });
})), import_compiler_runtime = require_compiler_runtime(), import_dist = require_dist();
require_react();
var import_jsx_runtime = /* @__PURE__ */ __toESM(require_jsx_runtime(), 1), ImageComparisonComponent_default = (e) => {
  let t = (0, import_compiler_runtime.c)(15), { beforeSrc: n, afterSrc: r, value: i, direction: a, width: o, height: u } = e, d = o || "100%", f = u || (a === "vertical" ? "400px" : "auto"), p;
  t[0] !== d || t[1] !== f ? (p = {
    width: d,
    height: f,
    maxWidth: "100%"
  }, t[0] = d, t[1] = f, t[2] = p) : p = t[2];
  let m = p, h;
  t[3] === n ? h = t[4] : (h = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
    slot: "first",
    src: n,
    alt: "Before",
    width: "100%"
  }), t[3] = n, t[4] = h);
  let g;
  t[5] === r ? g = t[6] : (g = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
    slot: "second",
    src: r,
    alt: "After",
    width: "100%"
  }), t[5] = r, t[6] = g);
  let _;
  t[7] !== a || t[8] !== h || t[9] !== g || t[10] !== i ? (_ = /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_dist.ImgComparisonSlider, {
    value: i,
    direction: a,
    children: [h, g]
  }), t[7] = a, t[8] = h, t[9] = g, t[10] = i, t[11] = _) : _ = t[11];
  let v;
  return t[12] !== m || t[13] !== _ ? (v = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
    style: m,
    children: _
  }), t[12] = m, t[13] = _, t[14] = v) : v = t[14], v;
};
export {
  ImageComparisonComponent_default as default
};
