import{split_panel_styles_default as i}from"./chunk.COAGA4BW.js";import{drag as e}from"./chunk.A4SOQOK5.js";import{clamp as t}from"./chunk.HF7GESMZ.js";import{LocalizeController as s}from"./chunk.2A3352EO.js";import{watch as r}from"./chunk.C7FWPEOY.js";import{ShoelaceElement as o}from"./chunk.Z7XDKKOD.js";import{__decorateClass as n}from"./chunk.6M63UXML.js";import{html as a}from"../../../../lit/index.js";import{ifDefined as h}from"../../../../lit/directives/if-defined.js";import{property as l,query as p}from"../../../../lit/decorators.js";var d=class extends o{constructor(){super(...arguments),this.localize=new s(this),this.position=50,this.vertical=!1,this.disabled=!1,this.snapThreshold=12}connectedCallback(){super.connectedCallback(),this.resizeObserver=new ResizeObserver((i=>this.handleResize(i))),this.updateComplete.then((()=>this.resizeObserver.observe(this))),this.detectSize(),this.cachedPositionInPixels=this.percentageToPixels(this.position)}disconnectedCallback(){super.disconnectedCallback(),this.resizeObserver.unobserve(this)}detectSize(){const{width:i,height:e}=this.getBoundingClientRect();this.size=this.vertical?e:i}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}handleDrag(i){const s="rtl"===this.localize.dir();this.disabled||(i.cancelable&&i.preventDefault(),e(this,{onMove:(i,e)=>{let r=this.vertical?e:i;if("end"===this.primary&&(r=this.size-r),this.snap){this.snap.split(" ").forEach((i=>{let e;e=i.endsWith("%")?this.size*(parseFloat(i)/100):parseFloat(i),s&&!this.vertical&&(e=this.size-e),r>=e-this.snapThreshold&&r<=e+this.snapThreshold&&(r=e)}))}this.position=t(this.pixelsToPercentage(r),0,100)},initialEvent:i}))}handleKeyDown(i){if(!this.disabled&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let e=this.position;const s=(i.shiftKey?10:1)*("end"===this.primary?-1:1);i.preventDefault(),("ArrowLeft"===i.key&&!this.vertical||"ArrowUp"===i.key&&this.vertical)&&(e-=s),("ArrowRight"===i.key&&!this.vertical||"ArrowDown"===i.key&&this.vertical)&&(e+=s),"Home"===i.key&&(e="end"===this.primary?100:0),"End"===i.key&&(e="end"===this.primary?0:100),this.position=t(e,0,100)}}handleResize(i){const{width:e,height:t}=i[0].contentRect;this.size=this.vertical?t:e,this.primary&&(this.position=this.pixelsToPercentage(this.cachedPositionInPixels))}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position),this.positionInPixels=this.percentageToPixels(this.position),this.emit("sl-reposition")}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}handleVerticalChange(){this.detectSize()}render(){const i=this.vertical?"gridTemplateRows":"gridTemplateColumns",e=this.vertical?"gridTemplateColumns":"gridTemplateRows",t="rtl"===this.localize.dir(),s=`\n      clamp(\n        0%,\n        clamp(\n          var(--min),\n          ${this.position}% - var(--divider-width) / 2,\n          var(--max)\n        ),\n        calc(100% - var(--divider-width))\n      )\n    `,r="auto";return"end"===this.primary?t&&!this.vertical?this.style[i]=`${s} var(--divider-width) ${r}`:this.style[i]=`${r} var(--divider-width) ${s}`:t&&!this.vertical?this.style[i]=`${r} var(--divider-width) ${s}`:this.style[i]=`${s} var(--divider-width) ${r}`,this.style[e]="",a`
      <slot name="start" part="panel start" class="start"></slot>

      <div
        part="divider"
        class="divider"
        tabindex=${h(this.disabled?void 0:"0")}
        role="separator"
        aria-valuenow=${this.position}
        aria-valuemin="0"
        aria-valuemax="100"
        aria-label=${this.localize.term("resize")}
        @keydown=${this.handleKeyDown}
        @mousedown=${this.handleDrag}
        @touchstart=${this.handleDrag}
      >
        <slot name="divider"></slot>
      </div>

      <slot name="end" part="panel end" class="end"></slot>
    `}};d.styles=i,n([p(".divider")],d.prototype,"divider",2),n([l({type:Number,reflect:!0})],d.prototype,"position",2),n([l({attribute:"position-in-pixels",type:Number})],d.prototype,"positionInPixels",2),n([l({type:Boolean,reflect:!0})],d.prototype,"vertical",2),n([l({type:Boolean,reflect:!0})],d.prototype,"disabled",2),n([l()],d.prototype,"primary",2),n([l()],d.prototype,"snap",2),n([l({type:Number,attribute:"snap-threshold"})],d.prototype,"snapThreshold",2),n([r("position")],d.prototype,"handlePositionChange",1),n([r("positionInPixels")],d.prototype,"handlePositionInPixelsChange",1),n([r("vertical")],d.prototype,"handleVerticalChange",1);export{d as SlSplitPanel};