import { BaseCustomWebComponentConstructorAppend, css, html } from "@node-projects/base-custom-webcomponent";
export class SimpleSplitView extends BaseCustomWebComponentConstructorAppend {
    static style = css `
    :host {
      display: block;
    }  
    #split {
      position: relative;
      height: 100%;
      width: 100%;
      grid-template-rows: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px);
      grid-template-columns: 100%;
      display: grid;
      align-items: center;
    }
    :host([orientation="horizontal"]) #split {
      grid-template-rows: 100%;
      grid-template-columns: calc(var(--split) * 1%) 5px calc(((100 - var(--split)) * 1%) - 5px);
    }
    #splitter {
      user-select: none;
      -webkit-user-select: none;
    }
    :host([orientation="horizontal"]) > div > #splitter {
      cursor: ew-resize;
      width: 5px;
      height: 100%;
    }
    :host([orientation="vertical"]) > div > #splitter {
      cursor: ns-resize;
      height: 5px;
      width: 100%;
    }`;
    static template = html `
    <div id="split" style="--split: 50;">
      <slot name="top"></slot>  
      <div id="splitter"></div>
      <slot name="bottom"></slot>
    </div>`;
    static properties = {
        orientation: String
    };
    _orientation = 'vertical';
    get orientation() {
        return this._orientation;
    }
    set orientation(value) {
        this._orientation = value;
        this.setAttribute('orientation', value);
    }
    constructor() {
        super();
        this._restoreCachedInititalValues();
    }
    ready() {
        this._parseAttributesToProperties();
        this.setAttribute('orientation', this.orientation);
        const split = this._getDomElement("split");
        const splitter = this._getDomElement("splitter");
        let start = null;
        splitter.addEventListener('pointerdown', (e) => {
            splitter.setPointerCapture(e.pointerId);
            start = true;
        });
        splitter.addEventListener('pointerup', (e) => {
            splitter.releasePointerCapture(e.pointerId);
            start = null;
        });
        splitter.addEventListener('pointermove', (e) => {
            if (start !== null) {
                let splitValue = parseFloat(split.style.getPropertyValue('--split'));
                if (this.orientation === 'horizontal')
                    splitValue += e.movementX * 100 / split.clientWidth;
                else
                    splitValue += e.movementY * 100 / split.clientHeight;
                if (!isNaN(splitValue))
                    split.style.setProperty("--split", splitValue);
            }
        });
    }
}
customElements.define('node-projects-simple-split-view', SimpleSplitView);
//# sourceMappingURL=SimpleSplitView.js.map