import{__decorate as i}from"tslib";import{s as t}from"./nile-split-panel.css.esm.js";import{N as e}from"../internal/nile-element.esm.js";import{c as s}from"../internal/math.esm.js";import{query as r,property as n,customElement as a}from"lit/decorators.js";import{d as o}from"../internal/drag.esm.js";import{html as h}from"lit";import{ifDefined as l}from"lit/directives/if-defined.js";import{w as d}from"../internal/watch.esm.js";import"../internal/accessibility/a11y.state.enum.esm.js";import"../internal/accessibility/a11y.property.enum.esm.js";import"../internal/accessibility/role.enum.esm.js";let m=class extends e{constructor(){super(...arguments),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:t}=this.getBoundingClientRect();this.size=this.vertical?t:i}percentageToPixels(i){return this.size*(i/100)}pixelsToPercentage(i){return i/this.size*100}handleDrag(i){this.disabled||(i.cancelable&&i.preventDefault(),o(this,{onMove:(i,t)=>{let e=this.vertical?t:i;if("end"===this.primary&&(e=this.size-e),this.snap){this.snap.split(" ").forEach((i=>{let t;t=i.endsWith("%")?this.size*(parseFloat(i)/100):parseFloat(i),e>=t-this.snapThreshold&&e<=t+this.snapThreshold&&(e=t)}))}this.position=s(this.pixelsToPercentage(e),0,100)},initialEvent:i}))}handleKeyDown(i){if(!this.disabled&&["ArrowLeft","ArrowRight","ArrowUp","ArrowDown","Home","End"].includes(i.key)){let t=this.position;const e=(i.shiftKey?10:1)*("end"===this.primary?-1:1);i.preventDefault(),("ArrowLeft"===i.key&&!this.vertical||"ArrowUp"===i.key&&this.vertical)&&(t-=e),("ArrowRight"===i.key&&!this.vertical||"ArrowDown"===i.key&&this.vertical)&&(t+=e),"Home"===i.key&&(t="end"===this.primary?100:0),"End"===i.key&&(t="end"===this.primary?0:100),this.position=s(t,0,100)}}handleResize(i){const{width:t,height:e}=i[0].contentRect;this.size=this.vertical?e:t,this.primary&&(this.position=this.pixelsToPercentage(this.cachedPositionInPixels))}handlePositionChange(){this.cachedPositionInPixels=this.percentageToPixels(this.position),this.positionInPixels=this.percentageToPixels(this.position),this.emit("nile-reposition")}handlePositionInPixelsChange(){this.position=this.pixelsToPercentage(this.positionInPixels)}handleVerticalChange(){this.detectSize()}render(){const i=this.vertical?"gridTemplateRows":"gridTemplateColumns",t=this.vertical?"gridTemplateColumns":"gridTemplateRows",e=`\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    `,s="auto";return"end"===this.primary?this.style[i]=`${s} var(--divider-width) ${e}`:this.style[i]=`${e} var(--divider-width) ${s}`,this.style[t]="",h`
      <slot name="start" part="panel start" class="start"></slot>

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

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