import { n as h, C as f } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as g } from "../chunks/component.styles.CRO4Odto.js";
import { c as u } from "../chunks/custom-element.L4WJXn1j.js";
import { d as v } from "../chunks/drag.DXEXVXPv.js";
import { L as _ } from "../chunks/i18n.BABe9hN4.js";
import { c as m } from "../chunks/math.DqTA6ya4.js";
import { w } from "../chunks/watch.BCJD77bD.js";
import { i as y, x } from "../chunks/lit-element.jLBm65_O.js";
import { e as p } from "../chunks/query.BBf1UFkC.js";
import { e as b } from "../chunks/class-map.BiVq-cVR.js";
import { o as c } from "../chunks/style-map.llVFPd__.js";
import d from "./icon.js";
const $ = y`:host{--divider-width:2px;--handle-size:2.5rem;display:inline-block;position:relative}.image-comparer{max-width:100%;max-height:100%;overflow:hidden}.image-comparer__before,.image-comparer__after{pointer-events:none;display:block;position:relative}slot[name=before]::slotted(img),slot[name=after]::slotted(img),slot[name=before]::slotted(svg),slot[name=after]::slotted(svg){height:auto;display:block;max-width:100%!important}.image-comparer__before{width:100%;height:100%;position:absolute;top:0;left:0}.image-comparer__divider{width:var(--divider-width);background-color:var(--cx-color-neutral-0);height:100%;translate:calc(var(--divider-width) / -2);cursor:ew-resize;justify-content:center;align-items:center;display:flex;position:absolute;top:0}.image-comparer__handle{top:calc(50% - (var(--handle-size) / 2));width:var(--handle-size);height:var(--handle-size);background-color:var(--cx-color-neutral-0);border-radius:var(--cx-border-radius-circle);font-size:calc(var(--handle-size) * .5);color:var(--cx-color-neutral-700);cursor:inherit;z-index:10;justify-content:center;align-items:center;display:flex;position:absolute}.image-comparer__handle:focus-visible{outline:var(--cx-focus-ring);outline-offset:var(--cx-focus-ring-offset)}`;
var z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, s = (e, t, a, o) => {
  for (var i = o > 1 ? void 0 : o ? C(t, a) : t, l = e.length - 1, n; l >= 0; l--)
    (n = e[l]) && (i = (o ? n(t, a, i) : n(i)) || i);
  return o && i && z(t, a, i), i;
};
let r = class extends f {
  constructor() {
    super(...arguments), this.localize = new _(this), this.position = 50;
  }
  handleDrag(e) {
    const { width: t } = this.base.getBoundingClientRect(), a = this.localize.dir() === "rtl";
    e.preventDefault(), v(this.base, {
      initialEvent: e,
      onMove: (o) => {
        this.position = parseFloat(m(o / t * 100, 0, 100).toFixed(2)), a && (this.position = 100 - this.position);
      }
    });
  }
  handleKeyDown(e) {
    const t = this.localize.dir() === "ltr", a = this.localize.dir() === "rtl";
    if (["ArrowLeft", "ArrowRight", "Home", "End"].includes(e.key)) {
      const o = e.shiftKey ? 10 : 1;
      let i = this.position;
      e.preventDefault(), (t && e.key === "ArrowLeft" || a && e.key === "ArrowRight") && (i -= o), (t && e.key === "ArrowRight" || a && e.key === "ArrowLeft") && (i += o), e.key === "Home" && (i = 0), e.key === "End" && (i = 100), i = m(i, 0, 100), this.position = i;
    }
  }
  handlePositionChange() {
    this.emit("cx-change");
  }
  render() {
    const e = this.localize.dir() === "rtl";
    return x`<div part="base" id="image-comparer" class=${b({
      "image-comparer": !0,
      "image-comparer--rtl": e
    })} @keydown=${this.handleKeyDown}><div class="image-comparer__image"><div part="before" class="image-comparer__before" style=${c({
      clipPath: e ? `inset(0 0 0 ${100 - this.position}%)` : `inset(0 ${100 - this.position}% 0 0)`
    })}><slot name="before"></slot></div><div part="after" class="image-comparer__after" style=${c({
      clipPath: e ? `inset(0 ${this.position}% 0 0)` : `inset(0 0 0 ${this.position}%)`
    })}><slot name="after"></slot></div></div><div part="divider" class="image-comparer__divider" style=${c({
      left: e ? `${100 - this.position}%` : `${this.position}%`
    })} @mousedown=${this.handleDrag} @touchstart=${this.handleDrag}><div part="handle" class="image-comparer__handle" role="scrollbar" aria-valuenow=${this.position} aria-valuemin="0" aria-valuemax="100" aria-controls="image-comparer" tabindex="0"><slot name="handle"><cx-icon name="drag_indicator"></cx-icon></slot></div></div></div>`;
  }
};
r.styles = [g, $];
r.dependencies = {
  "cx-icon": d
};
r.scopedElement = { "cx-icon": d };
s([
  p(".image-comparer")
], r.prototype, "base", 2);
s([
  p(".image-comparer__handle")
], r.prototype, "handle", 2);
s([
  h({ reflect: !0, type: Number })
], r.prototype, "position", 2);
s([
  w("position", { waitUntilFirstUpdate: !0 })
], r.prototype, "handlePositionChange", 1);
r = s([
  u("cx-image-comparer")
], r);
export {
  r as default
};
