import{image_comparer_styles_default as i}from"./chunk.26CDGTKN.js";import{drag as t}from"./chunk.A4SOQOK5.js";import{clamp as e}from"./chunk.HF7GESMZ.js";import{LocalizeController as o}from"./chunk.2A3352EO.js";import{SlIcon as r}from"./chunk.M4HIRIJ5.js";import{watch as s}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as a}from"./chunk.Z7XDKKOD.js";import{__decorateClass as n}from"./chunk.6M63UXML.js";import{classMap as l}from"../../../../lit/directives/class-map.js";import{html as m}from"../../../../lit/index.js";import{property as p,query as c}from"../../../../lit/decorators.js";import{styleMap as h}from"../../../../lit/directives/style-map.js";var d=class extends a{constructor(){super(...arguments),this.localize=new o(this),this.position=50}handleDrag(i){const{width:o}=this.base.getBoundingClientRect(),r="rtl"===this.localize.dir();i.preventDefault(),t(this.base,{onMove:i=>{this.position=parseFloat(e(i/o*100,0,100).toFixed(2)),r&&(this.position=100-this.position)},initialEvent:i})}handleKeyDown(i){const t="ltr"===this.localize.dir(),o="rtl"===this.localize.dir();if(["ArrowLeft","ArrowRight","Home","End"].includes(i.key)){const r=i.shiftKey?10:1;let s=this.position;i.preventDefault(),(t&&"ArrowLeft"===i.key||o&&"ArrowRight"===i.key)&&(s-=r),(t&&"ArrowRight"===i.key||o&&"ArrowLeft"===i.key)&&(s+=r),"Home"===i.key&&(s=0),"End"===i.key&&(s=100),s=e(s,0,100),this.position=s}}handlePositionChange(){this.emit("sl-change")}render(){const i="rtl"===this.localize.dir();return m`
      <div
        part="base"
        id="image-comparer"
        class=${l({"image-comparer":!0,"image-comparer--rtl":i})}
        @keydown=${this.handleKeyDown}
      >
        <div class="image-comparer__image">
          <div part="before" class="image-comparer__before">
            <slot name="before"></slot>
          </div>

          <div
            part="after"
            class="image-comparer__after"
            style=${h({clipPath:i?`inset(0 0 0 ${100-this.position}%)`:`inset(0 ${100-this.position}% 0 0)`})}
          >
            <slot name="after"></slot>
          </div>
        </div>

        <div
          part="divider"
          class="image-comparer__divider"
          style=${h({left:i?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">
              <sl-icon library="system" name="grip-vertical"></sl-icon>
            </slot>
          </div>
        </div>
      </div>
    `}};d.styles=i,d.scopedElement={"sl-icon":r},n([c(".image-comparer")],d.prototype,"base",2),n([c(".image-comparer__handle")],d.prototype,"handle",2),n([p({type:Number,reflect:!0})],d.prototype,"position",2),n([s("position",{waitUntilFirstUpdate:!0})],d.prototype,"handlePositionChange",1);export{d as SlImageComparer};