import b from "./divider.js";
import v from "./icon.js";
import { C as u } from "../chunks/icon-button.C2s3pHG4.js";
import _ from "./resize-observer.js";
import { n as d, C as m } from "../chunks/lib-cortex-element.CVMmyPMC.js";
import { c as f } from "../chunks/component.styles.CRO4Odto.js";
import { c as x } from "../chunks/custom-element.L4WJXn1j.js";
import { d as y } from "../chunks/drag.DXEXVXPv.js";
import { H as C } from "../chunks/slot.j5oheLJC.js";
import { w as g } from "../chunks/watch.BCJD77bD.js";
import { i as z, E as h, x as l } from "../chunks/lit-element.jLBm65_O.js";
import { r as w } from "../chunks/state.CSDxrqLd.js";
import { e as $ } from "../chunks/query.BBf1UFkC.js";
import { e as p } from "../chunks/class-map.BiVq-cVR.js";
const k = z`:host{--_background-color:var(--background-color,var(--cx-color-neutral-0));--_hint-color:var(--hint-color,var(--cx-color-primary-300));--closed-width:0px;display:block}.sidebar{grid-template-areas:"main";display:grid;position:relative}.sidebar,.group--opened,.group--closed,.group_content,.open_trigger{height:100%}.group--opened,.group--closed{grid-area:main}.sidebar__header{padding:var(--cx-spacing-x-small) var(--cx-spacing-small);position:relative}.sidebar--no-header .sidebar__header{display:none}.content{padding:var(--cx-spacing-small);padding-bottom:var(--cx-spacing-small);flex-grow:1}.sidebar__divider{--spacing:6px;position:absolute;top:0}.sidebar__divider:hover{--color:var(--_hint-color);cursor:col-resize}.sidebar--not-resizable .sidebar__divider{cursor:default;pointer-events:none}.sidebar--not-resizable .sidebar__divider:hover{--color:inherit;cursor:default}.sidebar--left .sidebar__divider{right:calc(0px - var(--spacing))}.sidebar--right .sidebar__divider{left:calc(0px - var(--spacing))}.close_trigger{visibility:hidden;top:max(calc(var(--header-height) / 2), 32px);position:absolute;transform:translateY(-50%)}.close_trigger>cx-icon-button::part(base){background-color:var(--cx-color-neutral-0)}.sidebar--left .close_trigger{right:0;transform:translate(50%,-50%)}.sidebar--right .close_trigger{left:0;transform:translate(-50%,-50%)}.sidebar--opened:hover .close_trigger{visibility:visible}.open_trigger{padding:var(--cx-spacing-medium);cursor:pointer;background-color:var(--_background-color);position:relative}.open_trigger_hint{--spacing:0;position:absolute;top:0;right:0}.open_trigger:hover .open_trigger_hint{--color:var(--_hint-color)}.group_container{overflow-x:clip}.group--opened,.group--closed{flex-direction:column;display:flex}.group--closed{width:var(--closed-width)}.group_content{background-color:var(--_background-color);contain:inline-size;overflow-x:clip}.group--opened .group_content{width:var(--size);min-width:var(--min-width);max-width:var(--max-width)}.sidebar--opened .group--opened{visibility:visible}.sidebar--opened .group--closed{visibility:hidden;width:0}.sidebar:not(.sidebar--opened) .group--closed{visibility:visible}.sidebar:not(.sidebar--opened) .group--opened{contain:inline-size;visibility:hidden;width:0}`;
var S = Object.defineProperty, B = Object.getOwnPropertyDescriptor, r = (e, o, t, a) => {
  for (var s = a > 1 ? void 0 : a ? B(o, t) : o, n = e.length - 1, c; n >= 0; n--)
    (c = e[n]) && (s = (a ? c(o, t, s) : c(s)) || s);
  return a && s && S(o, t, s), s;
};
let i = class extends m {
  constructor() {
    super(), this.side = "left", this.open = !1, this.collapsible = !1, this.resizable = !1, this.state = "idle", this.hasSlotController = new C(this, "header"), this.handleSizeChange = this.handleSizeChange.bind(this);
  }
  handleStateChange() {
    this.state === "dragging" ? document.body.style.cursor = "col-resize" : document.body.style.cursor = "";
  }
  handleCollapsibleChange() {
    this.collapsible || (this.open = !0);
  }
  connectedCallback() {
    super.connectedCallback(), this.slot === "left" ? this.side = "left" : this.slot === "right" && (this.side = "right"), this.collapsible || (this.open = !0);
  }
  handleDrag(e) {
    this.resizable && (e.cancelable && e.preventDefault(), this.state = "dragging", y(this, {
      initialEvent: e,
      onMove: (o) => {
        let t = o;
        this.side === "right" && (t = this.getBoundingClientRect().width - o), t = Math.max(0, t), this.style.setProperty("--size", `${t}px`);
      },
      onStop: this.handleSizeChange
    }));
  }
  handleSizeChange() {
    this.state = "idle", requestAnimationFrame(() => {
      const e = this.getBoundingClientRect().width;
      this.style.setProperty("--size", `${e}px`), this.emit("cx-after-resize", {
        detail: {
          side: this.side,
          size: e
        }
      });
    });
  }
  handleResize() {
    this.style.setProperty(
      "--header-height",
      `${this.header.getBoundingClientRect().height}px`
    );
  }
  handleCloseTriggerClick() {
    this.collapsible && (this.open = !1, this.handleSizeChange());
  }
  handleOpenTriggerClick() {
    this.collapsible && (this.open = !0, this.handleSizeChange());
  }
  render() {
    const e = this.hasSlotController.test("header");
    return l`<div part="base" class=${p({
      sidebar: !0,
      "sidebar--left": this.side === "left",
      "sidebar--no-header": !e,
      "sidebar--not-resizable": !this.resizable,
      "sidebar--opened": this.open,
      "sidebar--right": this.side === "right"
    })}><div class=${p({
      "group--closed": !this.open,
      "group--opened": this.open
    })}><div class="group_content"><cx-resize-observer @cx-resize=${this.handleResize}><div part="header" class="sidebar__header"><slot name="header"></slot></div></cx-resize-observer>${e ? l`<cx-divider style="--spacing:0"></cx-divider>` : h}<div part="content" class="content"><slot></slot></div></div><cx-divider class="sidebar__divider" vertical @mousedown=${this.handleDrag} @touchstart=${this.handleDrag}></cx-divider>${this.collapsible ? l`<div class="close_trigger" @click=${this.handleCloseTriggerClick}><cx-icon-button outline size="small" name=${this.side === "right" ? "keyboard_double_arrow_right" : "keyboard_double_arrow_left"}></cx-icon-button></div>` : h}</div>${this.collapsible ? l`<div class="group--closed"><div class="group_content"><div class="open_trigger" @click=${this.handleOpenTriggerClick}><slot name="open_trigger"><cx-icon name=${this.side === "right" ? "keyboard_double_arrow_left" : "keyboard_double_arrow_right"}></cx-icon></slot><cx-divider class="open_trigger_hint" vertical></cx-divider></div></div></div>` : h}</div>`;
  }
};
i.styles = [f, k];
i.dependencies = {
  "cx-divider": b,
  "cx-icon": v,
  "cx-icon-button": u,
  "cx-resize-observer": _
};
r([
  $(".sidebar__header")
], i.prototype, "header", 2);
r([
  d({ reflect: !0 })
], i.prototype, "side", 2);
r([
  d({ reflect: !0, type: Boolean })
], i.prototype, "open", 2);
r([
  d({ reflect: !0, type: Boolean })
], i.prototype, "collapsible", 2);
r([
  d({ reflect: !0, type: Boolean })
], i.prototype, "resizable", 2);
r([
  w()
], i.prototype, "state", 2);
r([
  g("state")
], i.prototype, "handleStateChange", 1);
r([
  g("collapsible")
], i.prototype, "handleCollapsibleChange", 1);
i = r([
  x("cx-sidebar")
], i);
export {
  i as default
};
