import*as ComponentHelpers from"../../../ui/components/helpers/helpers.js";import*as LitHtml from"../../../ui/lit-html/lit-html.js";const styles='\n  :host {\n    --current-main-area-size: 50%;\n    --resizer-size: 3px;\n    --min-main-area-size: 200px;\n    --min-sidebar-size: 150px;\n    --main-area-size: calc(max(var(--current-main-area-size), var(--min-main-area-size)));\n\n    height: 100%;\n    width: 100%;\n    display: block;\n    overflow: auto;\n  }\n\n  .wrapper {\n    display: flex;\n    flex-direction: row;\n    height: 100%;\n    width: 100%;\n    container: sidebar / size; /* stylelint-disable-line property-no-unknown */\n  }\n\n  .container {\n    --resizer-position: calc(min(var(--main-area-size), calc(100% - var(--min-sidebar-size))));\n    --min-container-size: calc(var(--min-sidebar-size) + var(--min-main-area-size) + var(--resizer-size));\n\n    display: flex;\n    flex-direction: row;\n    height: 100%;\n    width: 100%;\n    position: relative;\n    gap: var(--resizer-size);\n\n    min-width: var(--min-container-size);\n  }\n\n  #resizer {\n    background-color: var(--color-background-elevation-1);\n    position: absolute;\n    user-select: none;\n\n    /* horizontal */\n    width: var(--resizer-size);\n    cursor: col-resize;\n    left: var(--resizer-position);\n    bottom: 0;\n    top: 0;\n  }\n\n  slot {\n    overflow: auto;\n    display: block;\n  }\n\n  slot[name="main"] {\n\n    /* horizontal */\n    width: var(--resizer-position);\n    min-width: var(--min-main-area-size);\n  }\n\n  slot[name="sidebar"] {\n    flex: 1 0 0;\n\n    min-width: var(--min-sidebar-size);\n  }\n\n  .horizontal .container {\n    flex-direction: column;\n    min-height: var(--min-container-size);\n    min-width: auto;\n  }\n\n  .horizontal #resizer {\n    width: auto;\n    height: var(--resizer-size);\n    cursor: row-resize;\n    top: var(--resizer-position);\n    left: 0;\n    right: 0;\n  }\n\n  .horizontal slot[name="main"] {\n    width: auto;\n    min-width: auto;\n    height: var(--resizer-position);\n    min-height: var(--min-main-area-size);\n  }\n\n  .horizontal slot[name="sidebar"] {\n    min-width: auto;\n    min-height: var(--min-sidebar-size);\n  }\n',splitViewStyles=new CSSStyleSheet;splitViewStyles.replaceSync(styles);export class SplitView extends HTMLElement{static litTagName=LitHtml.literal`devtools-split-view`;#e=this.attachShadow({mode:"open"});#n=[0,0];#i=0;#t=[0,0];#s;#o=!1;connectedCallback(){this.style.setProperty("--current-main-area-size","60%"),this.#e.adoptedStyleSheets=[splitViewStyles],this.#s=new ResizeObserver((e=>this.#r(e[0].contentRect))),this.#s.observe(this),this.#a()}get horizontal(){return this.#o}set horizontal(e){this.#o=e,ComponentHelpers.ScheduledRender.scheduleRender(this,this.#a)}#r=e=>{const n=this.#i;e.width<=600&&e.height>=600||this.#o?this.#i=1:this.#i=0,this.#i!==n&&ComponentHelpers.ScheduledRender.scheduleRender(this,this.#a)};#l=e=>{const n=this.#e.querySelector("slot[name=main]");if(!n)throw new Error("Main slot not found");const i=n.getBoundingClientRect();this.#t=[i.width,i.height],this.#n=[e.clientX,e.clientY],window.addEventListener("mousemove",this.#h,!0),window.addEventListener("mouseup",this.#m,!0)};#m=()=>{window.removeEventListener("mousemove",this.#h,!0),window.removeEventListener("mouseup",this.#m,!0)};#h=e=>{const n=[e.clientX,e.clientY][this.#i]-this.#n[this.#i],i=this.getBoundingClientRect(),t=[i.width,i.height],s=100*(this.#t[this.#i]+n)/t[this.#i];this.style.setProperty("--current-main-area-size",s+"%")};#a=()=>{LitHtml.render(LitHtml.html`
        <div class="wrapper ${1===this.#i?"horizontal":""}">
          <div class="container">
            <slot name="main"></slot>
            <div id="resizer" @mousedown=${this.#l}></div>
            <slot name="sidebar"></slot>
          </div>
        </div>
      `,this.#e,{host:this})}}ComponentHelpers.CustomElements.defineComponent("devtools-split-view",SplitView);