@vscode-elements/elements 1.7.1-pre.1 → 1.8.0

package/dist/vscode-split-layout/vscode-split-layout.js

@@ -6,103 +6,218 @@ var __decorate = (this && this.__decorate) || function (decorators, target, key,
 };
 var VscodeSplitLayout_1;
 import { html } from 'lit';
-import { customElement, property, queryAssignedElements, state, } from 'lit/decorators.js';
+import { customElement, property, query, queryAssignedElements, state, } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { styleMap } from 'lit/directives/style-map.js';
 import { VscElement } from '../includes/VscElement.js';
 import styles from './vscode-split-layout.styles.js';
+const DEFAULT_INITIAL_POSITION = '50%';
+const DEFAULT_HANDLE_SIZE = 4;
+export const parseValue = (raw) => {
+    if (!raw) {
+        return { value: 0, unit: 'pixel' };
+    }
+    let unit;
+    let rawVal;
+    if (raw.endsWith('%')) {
+        unit = 'percent';
+        rawVal = +raw.substring(0, raw.length - 1);
+    }
+    else if (raw.endsWith('px')) {
+        unit = 'pixel';
+        rawVal = +raw.substring(0, raw.length - 2);
+    }
+    else {
+        unit = 'pixel';
+        rawVal = +raw;
+    }
+    const value = isNaN(rawVal) ? 0 : rawVal;
+    return { unit, value };
+};
+// Returns a percentage between 0 and 100
+export const pxToPercent = (current, max) => {
+    return max === 0 ? 0 : Math.min(100, (current / max) * 100);
+};
+export const percentToPx = (current, max) => {
+    return max * (current / 100);
+};
 /**
  * @cssprop [--hover-border=var(--vscode-sash-hoverBorder)]
  */
 let VscodeSplitLayout = VscodeSplitLayout_1 = class VscodeSplitLayout extends VscElement {
+    /**
+     * Direction of the divider.
+     */
+    set split(newVal) {
+        this._split = newVal;
+        this.resetHandlePosition();
+    }
+    get split() {
+        return this._split;
+    }
+    /**
+     * Set the handle position programmatically. The value must include a unit,
+     * either `%` or `px`. If no unit is specified, the value is interpreted as
+     * `px`.
+     */
+    set handlePosition(newVal) {
+        this._rawHandlePosition = newVal;
+        this._handlePositionPropChanged();
+    }
+    get handlePosition() {
+        return this._rawHandlePosition;
+    }
+    /**
+     * The size of the fixed pane will not change when the component is resized.
+     */
+    set fixedPane(newVal) {
+        this._fixedPane = newVal;
+        this._fixedPanePropChanged(newVal);
+    }
+    get fixedPane() {
+        return this._fixedPane;
+    }
     constructor() {
-        super(...arguments);
-        this.split = 'vertical';
+        super();
+        this._split = 'vertical';
+        /**
+         * Controls whether the handle position should reset to the value set in the
+         * `initialHandlePosition` when it is double-clicked.
+         */
         this.resetOnDblClick = false;
         /**
-         * Controls the draggable area size in pixels. it is recommended to use the value of `workbench.sash.size`.
+         * Controls the draggable area size in pixels. it is intended to use the value
+         * of `workbench.sash.size`.
          */
         this.handleSize = 4;
-        this.initialHandlePosition = '50%';
-        this._startPaneRight = 0;
-        this._startPaneBottom = 0;
-        this._endPaneTop = 0;
-        this._endPaneLeft = 0;
-        this._handleLeft = 0;
-        this._handleTop = 0;
+        /**
+         * The handler position will reset to this position when it is double-clicked,
+         * or the `resetHandlePosition()` is called.
+         */
+        this.initialHandlePosition = DEFAULT_INITIAL_POSITION;
+        this._fixedPane = 'none';
+        this._handlePosition = 0;
         this._isDragActive = false;
         this._hover = false;
         this._hide = false;
         this._boundRect = new DOMRect();
         this._handleOffset = 0;
-        this._handleMouseUp = () => {
+        this._wrapperObserved = false;
+        this._fixedPaneSize = 0;
+        this._handleResize = (entries) => {
+            const rect = entries[0].contentRect;
+            const { width, height } = rect;
+            this._boundRect = rect;
+            const max = this.split === 'vertical' ? width : height;
+            if (this.fixedPane === 'start') {
+                this._handlePosition = this._fixedPaneSize;
+            }
+            if (this.fixedPane === 'end') {
+                this._handlePosition = max - this._fixedPaneSize;
+            }
+        };
+        this._handleMouseUp = (_ev) => {
             this._isDragActive = false;
             window.removeEventListener('mouseup', this._handleMouseUp);
             window.removeEventListener('mousemove', this._handleMouseMove);
+            const { width, height } = this._boundRect;
+            const max = this.split === 'vertical' ? width : height;
+            const positionInPercentage = pxToPercent(this._handlePosition, max);
+            this.dispatchEvent(new CustomEvent('vsc-split-layout-change', {
+                detail: {
+                    position: this._handlePosition,
+                    positionInPercentage,
+                },
+                composed: true,
+            }));
         };
         this._handleMouseMove = (event) => {
             const { clientX, clientY } = event;
             const { left, top, height, width } = this._boundRect;
-            if (this.split === 'vertical') {
-                const mouseXLocal = clientX - left;
-                const handleLeftPx = Math.max(0, Math.min(mouseXLocal - this._handleOffset, width));
-                const startPaneRightPx = Math.max(0, width - handleLeftPx);
-                const handleLeftPercentage = (handleLeftPx / width) * 100;
-                const startPaneRightPercentage = (startPaneRightPx / width) * 100;
-                this._handleLeft = handleLeftPercentage;
-                this._startPaneRight = startPaneRightPercentage;
-                this._endPaneLeft = this._handleLeft;
+            const vert = this.split === 'vertical';
+            const maxPos = vert ? width : height;
+            const mousePos = vert ? clientX - left : clientY - top;
+            this._handlePosition = Math.max(0, Math.min(mousePos - this._handleOffset + this.handleSize / 2, maxPos));
+            if (this.fixedPane === 'start') {
+                this._fixedPaneSize = this._handlePosition;
             }
-            if (this.split === 'horizontal') {
-                const mouseYLocal = clientY - top;
-                const handleTopPx = Math.max(0, Math.min(mouseYLocal - this._handleOffset, height));
-                const startPaneBottomPx = Math.max(0, height - handleTopPx);
-                const handleTopPercentage = (handleTopPx / height) * 100;
-                const startPaneBottomPercentage = (startPaneBottomPx / height) * 100;
-                this._handleTop = handleTopPercentage;
-                this._startPaneBottom = startPaneBottomPercentage;
-                this._endPaneTop = this._handleTop;
+            if (this.fixedPane === 'end') {
+                this._fixedPaneSize = maxPos - this._handlePosition;
             }
         };
+        this._resizeObserver = new ResizeObserver(this._handleResize);
+    }
+    /**
+     * Sets the handle position to the value specified in the `initialHandlePosition` property.
+     */
+    resetHandlePosition() {
+        if (!this._wrapperEl) {
+            this._handlePosition = 0;
+            return;
+        }
+        const { width, height } = this._wrapperEl.getBoundingClientRect();
+        const max = this.split === 'vertical' ? width : height;
+        const { value, unit } = parseValue(this.initialHandlePosition ?? DEFAULT_INITIAL_POSITION);
+        if (unit === 'percent') {
+            this._handlePosition = percentToPx(value, max);
+        }
+        else {
+            this._handlePosition = value;
+        }
     }
     connectedCallback() {
         super.connectedCallback();
-        this._initPosition();
     }
     /** @internal */
     initializeResizeHandler() {
-        this._initPosition();
+        this.resetHandlePosition();
     }
-    _initPosition() {
-        this._boundRect = this.getBoundingClientRect();
-        const { height, width } = this._boundRect;
-        const maxPos = this.split === 'vertical' ? width : height;
-        const matches = /(^[0-9.]+)(%{0,1})$/.exec(this.initialHandlePosition);
-        let pos = 0;
-        let numericVal = 0;
-        if (matches) {
-            numericVal = parseFloat(matches[1]);
+    firstUpdated(_changedProperties) {
+        if (this.fixedPane !== 'none') {
+            this._resizeObserver.observe(this._wrapperEl);
+            this._wrapperObserved = true;
         }
-        if (matches && matches[2] === '%') {
-            pos = Math.min(maxPos, (maxPos / 100) * numericVal);
-        }
-        else if (matches && matches[2] !== '%') {
-            pos = Math.min(numericVal, maxPos);
+        this._boundRect = this._wrapperEl.getBoundingClientRect();
+        const { value, unit } = this.handlePosition
+            ? parseValue(this.handlePosition)
+            : parseValue(this.initialHandlePosition);
+        this._setPosition(value, unit);
+    }
+    _handlePositionPropChanged() {
+        if (this.handlePosition && this._wrapperEl) {
+            this._boundRect = this._wrapperEl.getBoundingClientRect();
+            const { value, unit } = parseValue(this.handlePosition);
+            this._setPosition(value, unit);
         }
-        else {
-            pos = maxPos / 2;
+    }
+    _fixedPanePropChanged(newVal) {
+        if (!this._wrapperEl) {
+            return;
         }
-        if (this.split === 'vertical') {
-            this._startPaneRight = ((maxPos - pos) / width) * 100;
-            this._endPaneLeft = (pos / width) * 100;
-            this._handleLeft = (pos / width) * 100;
+        if (newVal === 'none') {
+            if (this._wrapperObserved) {
+                this._resizeObserver.unobserve(this._wrapperEl);
+                this._wrapperObserved = false;
+            }
         }
-        if (this.split === 'horizontal') {
-            this._startPaneBottom = ((maxPos - pos) / height) * 100;
-            this._endPaneTop = (pos / height) * 100;
-            this._handleTop = (pos / height) * 100;
+        else {
+            const { width, height } = this._boundRect;
+            const max = this.split === 'vertical' ? width : height;
+            this._fixedPaneSize =
+                this.fixedPane === 'start'
+                    ? this._handlePosition
+                    : max - this._handlePosition;
+            if (!this._wrapperObserved) {
+                this._resizeObserver.observe(this._wrapperEl);
+                this._wrapperObserved = true;
+            }
         }
     }
+    _setPosition(value, unit) {
+        const { width, height } = this._boundRect;
+        const max = this.split === 'vertical' ? width : height;
+        this._handlePosition = unit === 'percent' ? percentToPx(value, max) : value;
+    }
     _handleMouseOver() {
         this._hover = true;
         this._hide = false;
@@ -116,17 +231,17 @@ let VscodeSplitLayout = VscodeSplitLayout_1 = class VscodeSplitLayout extends Vs
     _handleMouseDown(event) {
         event.stopPropagation();
         event.preventDefault();
-        this._boundRect = this.getBoundingClientRect();
-        const { left, top, width, height } = this._boundRect;
-        const mouseXLocal = ((event.clientX - left) / width) * 100;
-        const mouseYLocal = ((event.clientY - top) / height) * 100;
+        this._boundRect = this._wrapperEl.getBoundingClientRect();
+        const { left, top } = this._boundRect;
+        const { left: handleLeft, top: handleTop } = this._handleEl.getBoundingClientRect();
+        const mouseXLocal = event.clientX - left;
+        const mouseYLocal = event.clientY - top;
         if (this.split === 'vertical') {
-            this._handleOffset = mouseXLocal - this._handleLeft;
+            this._handleOffset = mouseXLocal - (handleLeft - left);
         }
         if (this.split === 'horizontal') {
-            this._handleOffset = mouseYLocal - this._handleTop;
+            this._handleOffset = mouseYLocal - (handleTop - top);
         }
-        this._boundRect = this.getBoundingClientRect();
         this._isDragActive = true;
         window.addEventListener('mouseup', this._handleMouseUp);
         window.addEventListener('mousemove', this._handleMouseMove);
@@ -135,7 +250,7 @@ let VscodeSplitLayout = VscodeSplitLayout_1 = class VscodeSplitLayout extends Vs
         if (!this.resetOnDblClick) {
             return;
         }
-        this._initPosition();
+        this.resetHandlePosition();
     }
     _handleSlotChange() {
         const nestedLayouts = [
@@ -149,25 +264,37 @@ let VscodeSplitLayout = VscodeSplitLayout_1 = class VscodeSplitLayout extends Vs
         });
     }
     render() {
-        const startPaneStyles = styleMap({
-            bottom: `${this._startPaneBottom}%`,
-            right: `${this._startPaneRight}%`,
-        });
-        const endPaneStyles = styleMap({
-            left: `${this._endPaneLeft}%`,
-            top: `${this._endPaneTop}%`,
-        });
+        const { width, height } = this._boundRect;
+        const maxPos = this.split === 'vertical' ? width : height;
+        const handlePosCss = this.fixedPane !== 'none'
+            ? `${this._handlePosition}px`
+            : `${pxToPercent(this._handlePosition, maxPos)}%`;
+        let startPaneSize = '';
+        if (this.fixedPane === 'start') {
+            startPaneSize = `0 0 ${this._fixedPaneSize}px`;
+        }
+        else {
+            startPaneSize = `1 1 ${pxToPercent(this._handlePosition, maxPos)}%`;
+        }
+        let endPaneSize = '';
+        if (this.fixedPane === 'end') {
+            endPaneSize = `0 0 ${this._fixedPaneSize}px`;
+        }
+        else {
+            endPaneSize = `1 1 ${pxToPercent(maxPos - this._handlePosition, maxPos)}%`;
+        }
         const handleStylesPropObj = {
-            left: `${this._handleLeft}%`,
-            top: `${this._handleTop}%`,
+            left: this.split === 'vertical' ? handlePosCss : '0',
+            top: this.split === 'vertical' ? '0' : handlePosCss,
         };
+        const handleSize = this.handleSize ?? DEFAULT_HANDLE_SIZE;
         if (this.split === 'vertical') {
-            handleStylesPropObj.marginLeft = `${0 - this.handleSize / 2}px`;
-            handleStylesPropObj.width = `${this.handleSize}px`;
+            handleStylesPropObj.marginLeft = `${0 - handleSize / 2}px`;
+            handleStylesPropObj.width = `${handleSize}px`;
         }
         if (this.split === 'horizontal') {
-            handleStylesPropObj.height = `${this.handleSize}px`;
-            handleStylesPropObj.marginTop = `${0 - this.handleSize / 2}px`;
+            handleStylesPropObj.height = `${handleSize}px`;
+            handleStylesPropObj.marginTop = `${0 - handleSize / 2}px`;
         }
         const handleStyles = styleMap(handleStylesPropObj);
         const handleOverlayClasses = classMap({
@@ -183,29 +310,35 @@ let VscodeSplitLayout = VscodeSplitLayout_1 = class VscodeSplitLayout extends Vs
             'split-vertical': this.split === 'vertical',
             'split-horizontal': this.split === 'horizontal',
         });
+        const wrapperClasses = {
+            wrapper: true,
+            horizontal: this.split === 'horizontal',
+        };
         return html `
-      <div class="start" style="${startPaneStyles}">
-        <slot name="start" @slotchange=${this._handleSlotChange}></slot>
-      </div>
-      <div class="end" style="${endPaneStyles}">
-        <slot name="end" @slotchange=${this._handleSlotChange}></slot>
+      <div class="${classMap(wrapperClasses)}">
+        <div class="start" style="${styleMap({ flex: startPaneSize })}">
+          <slot name="start" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+        <div class="end" style="${styleMap({ flex: endPaneSize })}">
+          <slot name="end" @slotchange=${this._handleSlotChange}></slot>
+        </div>
+        <div class="${handleOverlayClasses}"></div>
+        <div
+          class="${handleClasses}"
+          style="${handleStyles}"
+          @mouseover="${this._handleMouseOver}"
+          @mouseout="${this._handleMouseOut}"
+          @mousedown="${this._handleMouseDown}"
+          @dblclick="${this._handleDblClick}"
+        ></div>
       </div>
-      <div class="${handleOverlayClasses}"></div>
-      <div
-        class="${handleClasses}"
-        style="${handleStyles}"
-        @mouseover="${this._handleMouseOver}"
-        @mouseout="${this._handleMouseOut}"
-        @mousedown="${this._handleMouseDown}"
-        @dblclick="${this._handleDblClick}"
-      ></div>
     `;
     }
 };
 VscodeSplitLayout.styles = styles;
 __decorate([
     property({ reflect: true })
-], VscodeSplitLayout.prototype, "split", void 0);
+], VscodeSplitLayout.prototype, "split", null);
 __decorate([
     property({ type: Boolean, reflect: true, attribute: 'reset-on-dbl-click' })
 ], VscodeSplitLayout.prototype, "resetOnDblClick", void 0);
@@ -216,23 +349,14 @@ __decorate([
     property({ reflect: true, attribute: 'initial-handle-position' })
 ], VscodeSplitLayout.prototype, "initialHandlePosition", void 0);
 __decorate([
-    state()
-], VscodeSplitLayout.prototype, "_startPaneRight", void 0);
-__decorate([
-    state()
-], VscodeSplitLayout.prototype, "_startPaneBottom", void 0);
-__decorate([
-    state()
-], VscodeSplitLayout.prototype, "_endPaneTop", void 0);
+    property({ attribute: 'handle-position' })
+], VscodeSplitLayout.prototype, "handlePosition", null);
 __decorate([
-    state()
-], VscodeSplitLayout.prototype, "_endPaneLeft", void 0);
+    property({ attribute: 'fixed-pane' })
+], VscodeSplitLayout.prototype, "fixedPane", null);
 __decorate([
     state()
-], VscodeSplitLayout.prototype, "_handleLeft", void 0);
-__decorate([
-    state()
-], VscodeSplitLayout.prototype, "_handleTop", void 0);
+], VscodeSplitLayout.prototype, "_handlePosition", void 0);
 __decorate([
     state()
 ], VscodeSplitLayout.prototype, "_isDragActive", void 0);
@@ -242,6 +366,12 @@ __decorate([
 __decorate([
     state()
 ], VscodeSplitLayout.prototype, "_hide", void 0);
+__decorate([
+    query('.wrapper')
+], VscodeSplitLayout.prototype, "_wrapperEl", void 0);
+__decorate([
+    query('.handle')
+], VscodeSplitLayout.prototype, "_handleEl", void 0);
 __decorate([
     queryAssignedElements({ slot: 'start', selector: 'vscode-split-layout' })
 ], VscodeSplitLayout.prototype, "_nestedLayoutsAtStart", void 0);

package/dist/vscode-split-layout/vscode-split-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-split-layout.js","sourceRoot":"","sources":["../../src/vscode-split-layout/vscode-split-layout.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, TemplateResult} from 'lit';\nimport {\n  customElement,\n  property,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-split-layout.styles.js';\n\n/**\n * @cssprop [--hover-border=var(--vscode-sash-hoverBorder)]\n */\n@customElement('vscode-split-layout')\nexport class VscodeSplitLayout extends VscElement {\n  static styles = styles;\n\n  @property({reflect: true})\n  split: 'horizontal' | 'vertical' = 'vertical';\n\n  @property({type: Boolean, reflect: true, attribute: 'reset-on-dbl-click'})\n  resetOnDblClick = false;\n\n  /**\n   * Controls the draggable area size in pixels. it is recommended to use the value of `workbench.sash.size`.\n   */\n  @property({type: Number, reflect: true, attribute: 'handle-size'})\n  handleSize = 4;\n\n  @property({reflect: true, attribute: 'initial-handle-position'})\n  initialHandlePosition = '50%';\n\n  @state()\n  private _startPaneRight = 0;\n\n  @state()\n  private _startPaneBottom = 0;\n\n  @state()\n  private _endPaneTop = 0;\n\n  @state()\n  private _endPaneLeft = 0;\n\n  @state()\n  private _handleLeft = 0;\n\n  @state()\n  private _handleTop = 0;\n\n  @state()\n  private _isDragActive = false;\n\n  @state()\n  private _hover = false;\n\n  @state()\n  private _hide = false;\n\n  @queryAssignedElements({slot: 'start', selector: 'vscode-split-layout'})\n  private _nestedLayoutsAtStart!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'end', selector: 'vscode-split-layout'})\n  private _nestedLayoutsAtEnd!: HTMLElement[];\n\n  private _boundRect: DOMRect = new DOMRect();\n  private _handleOffset = 0;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this._initPosition();\n  }\n\n  /** @internal */\n  initializeResizeHandler() {\n    this._initPosition();\n  }\n\n  private _initPosition() {\n    this._boundRect = this.getBoundingClientRect();\n    const {height, width} = this._boundRect;\n    const maxPos = this.split === 'vertical' ? width : height;\n    const matches = /(^[0-9.]+)(%{0,1})$/.exec(this.initialHandlePosition);\n    let pos = 0;\n    let numericVal = 0;\n\n    if (matches) {\n      numericVal = parseFloat(matches[1]);\n    }\n\n    if (matches && matches[2] === '%') {\n      pos = Math.min(maxPos, (maxPos / 100) * numericVal);\n    } else if (matches && matches[2] !== '%') {\n      pos = Math.min(numericVal, maxPos);\n    } else {\n      pos = maxPos / 2;\n    }\n\n    if (this.split === 'vertical') {\n      this._startPaneRight = ((maxPos - pos) / width) * 100;\n      this._endPaneLeft = (pos / width) * 100;\n      this._handleLeft = (pos / width) * 100;\n    }\n\n    if (this.split === 'horizontal') {\n      this._startPaneBottom = ((maxPos - pos) / height) * 100;\n      this._endPaneTop = (pos / height) * 100;\n      this._handleTop = (pos / height) * 100;\n    }\n  }\n\n  private _handleMouseOver() {\n    this._hover = true;\n    this._hide = false;\n  }\n\n  private _handleMouseOut(event: MouseEvent) {\n    if (event.buttons !== 1) {\n      this._hover = false;\n      this._hide = true;\n    }\n  }\n\n  private _handleMouseDown(event: MouseEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this._boundRect = this.getBoundingClientRect();\n    const {left, top, width, height} = this._boundRect;\n\n    const mouseXLocal = ((event.clientX - left) / width) * 100;\n    const mouseYLocal = ((event.clientY - top) / height) * 100;\n\n    if (this.split === 'vertical') {\n      this._handleOffset = mouseXLocal - this._handleLeft;\n    }\n\n    if (this.split === 'horizontal') {\n      this._handleOffset = mouseYLocal - this._handleTop;\n    }\n\n    this._boundRect = this.getBoundingClientRect();\n    this._isDragActive = true;\n\n    window.addEventListener('mouseup', this._handleMouseUp);\n    window.addEventListener('mousemove', this._handleMouseMove);\n  }\n\n  private _handleMouseUp = () => {\n    this._isDragActive = false;\n    window.removeEventListener('mouseup', this._handleMouseUp);\n    window.removeEventListener('mousemove', this._handleMouseMove);\n  };\n\n  private _handleMouseMove = (event: MouseEvent) => {\n    const {clientX, clientY} = event;\n    const {left, top, height, width} = this._boundRect;\n\n    if (this.split === 'vertical') {\n      const mouseXLocal = clientX - left;\n      const handleLeftPx = Math.max(\n        0,\n        Math.min(mouseXLocal - this._handleOffset, width)\n      );\n      const startPaneRightPx = Math.max(0, width - handleLeftPx);\n\n      const handleLeftPercentage = (handleLeftPx / width) * 100;\n      const startPaneRightPercentage = (startPaneRightPx / width) * 100;\n\n      this._handleLeft = handleLeftPercentage;\n      this._startPaneRight = startPaneRightPercentage;\n      this._endPaneLeft = this._handleLeft;\n    }\n\n    if (this.split === 'horizontal') {\n      const mouseYLocal = clientY - top;\n      const handleTopPx = Math.max(\n        0,\n        Math.min(mouseYLocal - this._handleOffset, height)\n      );\n      const startPaneBottomPx = Math.max(0, height - handleTopPx);\n\n      const handleTopPercentage = (handleTopPx / height) * 100;\n      const startPaneBottomPercentage = (startPaneBottomPx / height) * 100;\n\n      this._handleTop = handleTopPercentage;\n      this._startPaneBottom = startPaneBottomPercentage;\n      this._endPaneTop = this._handleTop;\n    }\n  };\n\n  private _handleDblClick() {\n    if (!this.resetOnDblClick) {\n      return;\n    }\n\n    this._initPosition();\n  }\n\n  private _handleSlotChange() {\n    const nestedLayouts = [\n      ...this._nestedLayoutsAtStart,\n      ...this._nestedLayoutsAtEnd,\n    ];\n\n    nestedLayouts.forEach((e) => {\n      if (e instanceof VscodeSplitLayout) {\n        e.initializeResizeHandler();\n      }\n    });\n  }\n\n  render(): TemplateResult {\n    const startPaneStyles = styleMap({\n      bottom: `${this._startPaneBottom}%`,\n      right: `${this._startPaneRight}%`,\n    });\n\n    const endPaneStyles = styleMap({\n      left: `${this._endPaneLeft}%`,\n      top: `${this._endPaneTop}%`,\n    });\n\n    const handleStylesPropObj: {[prop: string]: string} = {\n      left: `${this._handleLeft}%`,\n      top: `${this._handleTop}%`,\n    };\n\n    if (this.split === 'vertical') {\n      handleStylesPropObj.marginLeft = `${0 - this.handleSize / 2}px`;\n      handleStylesPropObj.width = `${this.handleSize}px`;\n    }\n\n    if (this.split === 'horizontal') {\n      handleStylesPropObj.height = `${this.handleSize}px`;\n      handleStylesPropObj.marginTop = `${0 - this.handleSize / 2}px`;\n    }\n\n    const handleStyles = styleMap(handleStylesPropObj);\n\n    const handleOverlayClasses = classMap({\n      'handle-overlay': true,\n      active: this._isDragActive,\n      'split-vertical': this.split === 'vertical',\n      'split-horizontal': this.split === 'horizontal',\n    });\n\n    const handleClasses = classMap({\n      handle: true,\n      hover: this._hover,\n      hide: this._hide,\n      'split-vertical': this.split === 'vertical',\n      'split-horizontal': this.split === 'horizontal',\n    });\n\n    return html`\n      <div class=\"start\" style=\"${startPaneStyles}\">\n        <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n      </div>\n      <div class=\"end\" style=\"${endPaneStyles}\">\n        <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n      </div>\n      <div class=\"${handleOverlayClasses}\"></div>\n      <div\n        class=\"${handleClasses}\"\n        style=\"${handleStyles}\"\n        @mouseover=\"${this._handleMouseOver}\"\n        @mouseout=\"${this._handleMouseOut}\"\n        @mousedown=\"${this._handleMouseDown}\"\n        @dblclick=\"${this._handleDblClick}\"\n      ></div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-split-layout': VscodeSplitLayout;\n  }\n}\n"]}
+{"version":3,"file":"vscode-split-layout.js","sourceRoot":"","sources":["../../src/vscode-split-layout/vscode-split-layout.ts"],"names":[],"mappings":"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","sourcesContent":["import {html, PropertyValues, TemplateResult} from 'lit';\nimport {\n  customElement,\n  property,\n  query,\n  queryAssignedElements,\n  state,\n} from 'lit/decorators.js';\nimport {classMap} from 'lit/directives/class-map.js';\nimport {styleMap} from 'lit/directives/style-map.js';\nimport {VscElement} from '../includes/VscElement.js';\nimport styles from './vscode-split-layout.styles.js';\n\nconst DEFAULT_INITIAL_POSITION = '50%';\nconst DEFAULT_HANDLE_SIZE = 4;\n\ntype PositionUnit = 'pixel' | 'percent';\ntype Orientation = 'horizontal' | 'vertical';\ntype FixedPaneType = 'start' | 'end' | 'none';\n\nexport const parseValue = (\n  raw: string\n): {value: number; unit: PositionUnit} => {\n  if (!raw) {\n    return {value: 0, unit: 'pixel'};\n  }\n\n  let unit: PositionUnit;\n  let rawVal: number;\n\n  if (raw.endsWith('%')) {\n    unit = 'percent';\n    rawVal = +raw.substring(0, raw.length - 1);\n  } else if (raw.endsWith('px')) {\n    unit = 'pixel';\n    rawVal = +raw.substring(0, raw.length - 2);\n  } else {\n    unit = 'pixel';\n    rawVal = +raw;\n  }\n\n  const value = isNaN(rawVal) ? 0 : rawVal;\n\n  return {unit, value};\n};\n\n// Returns a percentage between 0 and 100\nexport const pxToPercent = (current: number, max: number) => {\n  return max === 0 ? 0 : Math.min(100, (current / max) * 100);\n};\n\nexport const percentToPx = (current: number, max: number) => {\n  return max * (current / 100);\n};\n\nexport type VscSplitLayoutChangeEvent = CustomEvent<{\n  position: number;\n  positionInPercentage: number;\n}>;\n\n/**\n * @cssprop [--hover-border=var(--vscode-sash-hoverBorder)]\n */\n@customElement('vscode-split-layout')\nexport class VscodeSplitLayout extends VscElement {\n  static styles = styles;\n\n  /**\n   * Direction of the divider.\n   */\n  @property({reflect: true})\n  set split(newVal: Orientation) {\n    this._split = newVal;\n    this.resetHandlePosition();\n  }\n  get split(): Orientation {\n    return this._split;\n  }\n  private _split: Orientation = 'vertical';\n\n  /**\n   * Controls whether the handle position should reset to the value set in the\n   * `initialHandlePosition` when it is double-clicked.\n   */\n  @property({type: Boolean, reflect: true, attribute: 'reset-on-dbl-click'})\n  resetOnDblClick = false;\n\n  /**\n   * Controls the draggable area size in pixels. it is intended to use the value\n   * of `workbench.sash.size`.\n   */\n  @property({type: Number, reflect: true, attribute: 'handle-size'})\n  handleSize = 4;\n\n  /**\n   * The handler position will reset to this position when it is double-clicked,\n   * or the `resetHandlePosition()` is called.\n   */\n  @property({reflect: true, attribute: 'initial-handle-position'})\n  initialHandlePosition: string = DEFAULT_INITIAL_POSITION;\n\n  /**\n   * Set the handle position programmatically. The value must include a unit,\n   * either `%` or `px`. If no unit is specified, the value is interpreted as\n   * `px`.\n   */\n  @property({attribute: 'handle-position'})\n  set handlePosition(newVal: string) {\n    this._rawHandlePosition = newVal;\n    this._handlePositionPropChanged();\n  }\n  get handlePosition(): string | undefined {\n    return this._rawHandlePosition;\n  }\n  private _rawHandlePosition?: string;\n\n  /**\n   * The size of the fixed pane will not change when the component is resized.\n   */\n  @property({attribute: 'fixed-pane'})\n  set fixedPane(newVal: FixedPaneType) {\n    this._fixedPane = newVal;\n    this._fixedPanePropChanged(newVal);\n  }\n  get fixedPane(): FixedPaneType {\n    return this._fixedPane;\n  }\n  private _fixedPane: FixedPaneType = 'none';\n\n  @state()\n  private _handlePosition = 0;\n\n  @state()\n  private _isDragActive = false;\n\n  @state()\n  private _hover = false;\n\n  @state()\n  private _hide = false;\n\n  @query('.wrapper')\n  private _wrapperEl!: HTMLDivElement;\n\n  @query('.handle')\n  private _handleEl!: HTMLDivElement;\n\n  @queryAssignedElements({slot: 'start', selector: 'vscode-split-layout'})\n  private _nestedLayoutsAtStart!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'end', selector: 'vscode-split-layout'})\n  private _nestedLayoutsAtEnd!: HTMLElement[];\n\n  private _boundRect: DOMRect = new DOMRect();\n  private _handleOffset = 0;\n  private _resizeObserver: ResizeObserver;\n  private _wrapperObserved: boolean = false;\n  private _fixedPaneSize: number = 0;\n\n  constructor() {\n    super();\n\n    this._resizeObserver = new ResizeObserver(this._handleResize);\n  }\n\n  /**\n   * Sets the handle position to the value specified in the `initialHandlePosition` property.\n   */\n  resetHandlePosition() {\n    if (!this._wrapperEl) {\n      this._handlePosition = 0;\n      return;\n    }\n\n    const {width, height} = this._wrapperEl.getBoundingClientRect();\n    const max = this.split === 'vertical' ? width : height;\n    const {value, unit} = parseValue(\n      this.initialHandlePosition ?? DEFAULT_INITIAL_POSITION\n    );\n\n    if (unit === 'percent') {\n      this._handlePosition = percentToPx(value, max);\n    } else {\n      this._handlePosition = value;\n    }\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n  }\n\n  /** @internal */\n  initializeResizeHandler() {\n    this.resetHandlePosition();\n  }\n\n  protected firstUpdated(_changedProperties: PropertyValues): void {\n    if (this.fixedPane !== 'none') {\n      this._resizeObserver.observe(this._wrapperEl);\n      this._wrapperObserved = true;\n    }\n\n    this._boundRect = this._wrapperEl.getBoundingClientRect();\n\n    const {value, unit} = this.handlePosition\n      ? parseValue(this.handlePosition)\n      : parseValue(this.initialHandlePosition);\n\n    this._setPosition(value, unit);\n  }\n\n  private _handlePositionPropChanged() {\n    if (this.handlePosition && this._wrapperEl) {\n      this._boundRect = this._wrapperEl.getBoundingClientRect();\n      const {value, unit} = parseValue(this.handlePosition);\n      this._setPosition(value, unit);\n    }\n  }\n\n  private _fixedPanePropChanged(newVal: FixedPaneType) {\n    if (!this._wrapperEl) {\n      return;\n    }\n\n    if (newVal === 'none') {\n      if (this._wrapperObserved) {\n        this._resizeObserver.unobserve(this._wrapperEl);\n        this._wrapperObserved = false;\n      }\n    } else {\n      const {width, height} = this._boundRect;\n      const max = this.split === 'vertical' ? width : height;\n\n      this._fixedPaneSize =\n        this.fixedPane === 'start'\n          ? this._handlePosition\n          : max - this._handlePosition;\n\n      if (!this._wrapperObserved) {\n        this._resizeObserver.observe(this._wrapperEl);\n        this._wrapperObserved = true;\n      }\n    }\n  }\n\n  private _handleResize = (entries: ResizeObserverEntry[]) => {\n    const rect = entries[0].contentRect;\n    const {width, height} = rect;\n    this._boundRect = rect;\n    const max = this.split === 'vertical' ? width : height;\n\n    if (this.fixedPane === 'start') {\n      this._handlePosition = this._fixedPaneSize;\n    }\n\n    if (this.fixedPane === 'end') {\n      this._handlePosition = max - this._fixedPaneSize;\n    }\n  };\n\n  private _setPosition(value: number, unit: PositionUnit) {\n    const {width, height} = this._boundRect;\n    const max = this.split === 'vertical' ? width : height;\n\n    this._handlePosition = unit === 'percent' ? percentToPx(value, max) : value;\n  }\n\n  private _handleMouseOver() {\n    this._hover = true;\n    this._hide = false;\n  }\n\n  private _handleMouseOut(event: MouseEvent) {\n    if (event.buttons !== 1) {\n      this._hover = false;\n      this._hide = true;\n    }\n  }\n\n  private _handleMouseDown(event: MouseEvent) {\n    event.stopPropagation();\n    event.preventDefault();\n\n    this._boundRect = this._wrapperEl.getBoundingClientRect();\n    const {left, top} = this._boundRect;\n    const {left: handleLeft, top: handleTop} =\n      this._handleEl.getBoundingClientRect();\n\n    const mouseXLocal = event.clientX - left;\n    const mouseYLocal = event.clientY - top;\n\n    if (this.split === 'vertical') {\n      this._handleOffset = mouseXLocal - (handleLeft - left);\n    }\n\n    if (this.split === 'horizontal') {\n      this._handleOffset = mouseYLocal - (handleTop - top);\n    }\n\n    this._isDragActive = true;\n\n    window.addEventListener('mouseup', this._handleMouseUp);\n    window.addEventListener('mousemove', this._handleMouseMove);\n  }\n\n  private _handleMouseUp = (_ev: MouseEvent) => {\n    this._isDragActive = false;\n    window.removeEventListener('mouseup', this._handleMouseUp);\n    window.removeEventListener('mousemove', this._handleMouseMove);\n\n    const {width, height} = this._boundRect;\n    const max = this.split === 'vertical' ? width : height;\n    const positionInPercentage = pxToPercent(this._handlePosition, max);\n\n    this.dispatchEvent(\n      new CustomEvent('vsc-split-layout-change', {\n        detail: {\n          position: this._handlePosition,\n          positionInPercentage,\n        },\n        composed: true,\n      }) as VscSplitLayoutChangeEvent\n    );\n  };\n\n  private _handleMouseMove = (event: MouseEvent) => {\n    const {clientX, clientY} = event;\n    const {left, top, height, width} = this._boundRect;\n    const vert = this.split === 'vertical';\n    const maxPos = vert ? width : height;\n    const mousePos = vert ? clientX - left : clientY - top;\n\n    this._handlePosition = Math.max(\n      0,\n      Math.min(mousePos - this._handleOffset + this.handleSize / 2, maxPos)\n    );\n\n    if (this.fixedPane === 'start') {\n      this._fixedPaneSize = this._handlePosition;\n    }\n\n    if (this.fixedPane === 'end') {\n      this._fixedPaneSize = maxPos - this._handlePosition;\n    }\n  };\n\n  private _handleDblClick() {\n    if (!this.resetOnDblClick) {\n      return;\n    }\n\n    this.resetHandlePosition();\n  }\n\n  private _handleSlotChange() {\n    const nestedLayouts = [\n      ...this._nestedLayoutsAtStart,\n      ...this._nestedLayoutsAtEnd,\n    ];\n\n    nestedLayouts.forEach((e) => {\n      if (e instanceof VscodeSplitLayout) {\n        e.initializeResizeHandler();\n      }\n    });\n  }\n\n  render(): TemplateResult {\n    const {width, height} = this._boundRect;\n    const maxPos = this.split === 'vertical' ? width : height;\n    const handlePosCss =\n      this.fixedPane !== 'none'\n        ? `${this._handlePosition}px`\n        : `${pxToPercent(this._handlePosition, maxPos)}%`;\n\n    let startPaneSize = '';\n\n    if (this.fixedPane === 'start') {\n      startPaneSize = `0 0 ${this._fixedPaneSize}px`;\n    } else {\n      startPaneSize = `1 1 ${pxToPercent(this._handlePosition, maxPos)}%`;\n    }\n\n    let endPaneSize = '';\n\n    if (this.fixedPane === 'end') {\n      endPaneSize = `0 0 ${this._fixedPaneSize}px`;\n    } else {\n      endPaneSize = `1 1 ${pxToPercent(maxPos - this._handlePosition, maxPos)}%`;\n    }\n\n    const handleStylesPropObj: {[prop: string]: string} = {\n      left: this.split === 'vertical' ? handlePosCss : '0',\n      top: this.split === 'vertical' ? '0' : handlePosCss,\n    };\n\n    const handleSize = this.handleSize ?? DEFAULT_HANDLE_SIZE;\n\n    if (this.split === 'vertical') {\n      handleStylesPropObj.marginLeft = `${0 - handleSize / 2}px`;\n      handleStylesPropObj.width = `${handleSize}px`;\n    }\n\n    if (this.split === 'horizontal') {\n      handleStylesPropObj.height = `${handleSize}px`;\n      handleStylesPropObj.marginTop = `${0 - handleSize / 2}px`;\n    }\n\n    const handleStyles = styleMap(handleStylesPropObj);\n\n    const handleOverlayClasses = classMap({\n      'handle-overlay': true,\n      active: this._isDragActive,\n      'split-vertical': this.split === 'vertical',\n      'split-horizontal': this.split === 'horizontal',\n    });\n\n    const handleClasses = classMap({\n      handle: true,\n      hover: this._hover,\n      hide: this._hide,\n      'split-vertical': this.split === 'vertical',\n      'split-horizontal': this.split === 'horizontal',\n    });\n\n    const wrapperClasses = {\n      wrapper: true,\n      horizontal: this.split === 'horizontal',\n    };\n\n    return html`\n      <div class=\"${classMap(wrapperClasses)}\">\n        <div class=\"start\" style=\"${styleMap({flex: startPaneSize})}\">\n          <slot name=\"start\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div class=\"end\" style=\"${styleMap({flex: endPaneSize})}\">\n          <slot name=\"end\" @slotchange=${this._handleSlotChange}></slot>\n        </div>\n        <div class=\"${handleOverlayClasses}\"></div>\n        <div\n          class=\"${handleClasses}\"\n          style=\"${handleStyles}\"\n          @mouseover=\"${this._handleMouseOver}\"\n          @mouseout=\"${this._handleMouseOut}\"\n          @mousedown=\"${this._handleMouseDown}\"\n          @dblclick=\"${this._handleDblClick}\"\n        ></div>\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'vscode-split-layout': VscodeSplitLayout;\n  }\n\n  interface GlobalEventHandlersEventMap {\n    'vsc-split-layout-change': VscSplitLayoutChangeEvent;\n  }\n}\n"]}

package/dist/vscode-split-layout/vscode-split-layout.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-split-layout.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-split-layout/vscode-split-layout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cA4Fb,CAAC;AAEF,eAAe,MAAM,CAAC"}
+{"version":3,"file":"vscode-split-layout.styles.d.ts","sourceRoot":"","sources":["../../src/vscode-split-layout/vscode-split-layout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAM,cAAc,EAAC,MAAM,KAAK,CAAC;AAGxC,QAAA,MAAM,MAAM,EAAE,cA8Gb,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/dist/vscode-split-layout/vscode-split-layout.styles.js

@@ -21,12 +21,21 @@ const styles = [
       border: 0;
     }
 
+    .wrapper {
+      display: flex;
+      height: 100%;
+      width: 100%;
+    }
+
+    .wrapper.horizontal {
+      flex-direction: column;
+    }
+
     .start {
       box-sizing: border-box;
-      left: 0;
-      top: 0;
-      overflow: hidden;
-      position: absolute;
+      flex: 1;
+      min-height: 0;
+      min-width: 0;
     }
 
     :host([split='vertical']) .start {
@@ -38,11 +47,19 @@ const styles = [
     }
 
     .end {
-      bottom: 0;
-      box-sizing: border-box;
-      overflow: hidden;
-      position: absolute;
-      right: 0;
+      flex: 1;
+      min-height: 0;
+      min-width: 0;
+    }
+
+    :host([split='vertical']) .start,
+    :host([split='vertical']) .end {
+      height: 100%;
+    }
+
+    :host([split='horizontal']) .start,
+    :host([split='horizontal']) .end {
+      width: 100%;
     }
 
     .handle-overlay {
@@ -68,18 +85,19 @@ const styles = [
     }
 
     .handle {
+      background-color: transparent;
       position: absolute;
       z-index: 2;
     }
 
     .handle.hover {
+      transition: background-color 0.1s ease-out 0.3s;
       background-color: var(--vscode-sash-hoverBorder);
-      transition: background-color 100ms linear 300ms;
     }
 
     .handle.hide {
       background-color: transparent;
-      transition: background-color 100ms linear;
+      transition: background-color 0.1s ease-out;
     }
 
     .handle.split-vertical {

package/dist/vscode-split-layout/vscode-split-layout.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"vscode-split-layout.styles.js","sourceRoot":"","sources":["../../src/vscode-split-layout/vscode-split-layout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAyFF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      --separator-border: var(--vscode-editorWidget-border, transparent);\n\n      border: 1px solid var(--vscode-editorWidget-border);\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n\n    ::slotted(*) {\n      height: 100%;\n      width: 100%;\n    }\n\n    ::slotted(vscode-split-layout) {\n      border: 0;\n    }\n\n    .start {\n      box-sizing: border-box;\n      left: 0;\n      top: 0;\n      overflow: hidden;\n      position: absolute;\n    }\n\n    :host([split='vertical']) .start {\n      border-right: 1px solid var(--separator-border);\n    }\n\n    :host([split='horizontal']) .start {\n      border-bottom: 1px solid var(--separator-border);\n    }\n\n    .end {\n      bottom: 0;\n      box-sizing: border-box;\n      overflow: hidden;\n      position: absolute;\n      right: 0;\n    }\n\n    .handle-overlay {\n      display: none;\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n      z-index: 1;\n    }\n\n    .handle-overlay.active {\n      display: block;\n    }\n\n    .handle-overlay.split-vertical {\n      cursor: ew-resize;\n    }\n\n    .handle-overlay.split-horizontal {\n      cursor: ns-resize;\n    }\n\n    .handle {\n      position: absolute;\n      z-index: 2;\n    }\n\n    .handle.hover {\n      background-color: var(--vscode-sash-hoverBorder);\n      transition: background-color 100ms linear 300ms;\n    }\n\n    .handle.hide {\n      background-color: transparent;\n      transition: background-color 100ms linear;\n    }\n\n    .handle.split-vertical {\n      cursor: ew-resize;\n      height: 100%;\n    }\n\n    .handle.split-horizontal {\n      cursor: ns-resize;\n      width: 100%;\n    }\n  `,\n];\n\nexport default styles;\n"]}
+{"version":3,"file":"vscode-split-layout.styles.js","sourceRoot":"","sources":["../../src/vscode-split-layout/vscode-split-layout.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,GAAG,EAAiB,MAAM,KAAK,CAAC;AACxC,OAAO,aAAa,MAAM,+BAA+B,CAAC;AAE1D,MAAM,MAAM,GAAmB;IAC7B,aAAa;IACb,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2GF;CACF,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import {css, CSSResultGroup} from 'lit';\nimport defaultStyles from '../includes/default.styles.js';\n\nconst styles: CSSResultGroup = [\n  defaultStyles,\n  css`\n    :host {\n      --separator-border: var(--vscode-editorWidget-border, transparent);\n\n      border: 1px solid var(--vscode-editorWidget-border);\n      display: block;\n      overflow: hidden;\n      position: relative;\n    }\n\n    ::slotted(*) {\n      height: 100%;\n      width: 100%;\n    }\n\n    ::slotted(vscode-split-layout) {\n      border: 0;\n    }\n\n    .wrapper {\n      display: flex;\n      height: 100%;\n      width: 100%;\n    }\n\n    .wrapper.horizontal {\n      flex-direction: column;\n    }\n\n    .start {\n      box-sizing: border-box;\n      flex: 1;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    :host([split='vertical']) .start {\n      border-right: 1px solid var(--separator-border);\n    }\n\n    :host([split='horizontal']) .start {\n      border-bottom: 1px solid var(--separator-border);\n    }\n\n    .end {\n      flex: 1;\n      min-height: 0;\n      min-width: 0;\n    }\n\n    :host([split='vertical']) .start,\n    :host([split='vertical']) .end {\n      height: 100%;\n    }\n\n    :host([split='horizontal']) .start,\n    :host([split='horizontal']) .end {\n      width: 100%;\n    }\n\n    .handle-overlay {\n      display: none;\n      height: 100%;\n      left: 0;\n      position: absolute;\n      top: 0;\n      width: 100%;\n      z-index: 1;\n    }\n\n    .handle-overlay.active {\n      display: block;\n    }\n\n    .handle-overlay.split-vertical {\n      cursor: ew-resize;\n    }\n\n    .handle-overlay.split-horizontal {\n      cursor: ns-resize;\n    }\n\n    .handle {\n      background-color: transparent;\n      position: absolute;\n      z-index: 2;\n    }\n\n    .handle.hover {\n      transition: background-color 0.1s ease-out 0.3s;\n      background-color: var(--vscode-sash-hoverBorder);\n    }\n\n    .handle.hide {\n      background-color: transparent;\n      transition: background-color 0.1s ease-out;\n    }\n\n    .handle.split-vertical {\n      cursor: ew-resize;\n      height: 100%;\n    }\n\n    .handle.split-horizontal {\n      cursor: ns-resize;\n      width: 100%;\n    }\n  `,\n];\n\nexport default styles;\n"]}