import { r as v, i as g, s as m, x as c, e as x } from "./query-assigned-elements-D930kELM.mjs";
import { n as d } from "./property-DJzm_oB9.mjs";
import { t as f } from "./state-B_tK3mBm.mjs";
import { o as p } from "./class-map-DPUylGZM.mjs";
import { K as b } from "./code-editor-9Ck5RVSd.mjs";
import "./code-snippet.mjs";
import "./icon-button.mjs";
import "./typography.mjs";
const y = ":host{--mdc-icon-button-size: 2rem;font-family:var(--mdc-typography-body1-font-family);width:100%}cv-code-snippet{background-color:var(--cv-theme-surface);border-radius:0;box-sizing:border-box}cv-code-snippet::part(code){font-size:var(--mdc-typography-body2-font-size);line-height:var(--mdc-typography-body2-line-height);padding:0;white-space:pre-wrap}cv-code-editor{margin-top:-1px}.selectionIndicator{background-color:var(--cv-theme-primary);border-radius:2px;height:100%;visibility:hidden}.selectionIndicatorWrapper{min-width:8px}.selectionIndicatorWrapper:hover .selectionIndicator{visibility:visible}.status{padding:0 1px;position:relative}.loading{top:2.5px}.timesExecuted{--cv-icon-button-cursor: grab;align-items:center;box-sizing:border-box;color:var(--cv-theme-on-surface-38);display:flex;font-family:var(--cv-typography-subtitle2-font-family);font-size:var(--cv-typography-subtitle2-font-size);gap:.5rem;height:56px;line-height:var(--cv-typography-headline6-line-height)}.timesExecuted .executionCount{padding-right:1rem;overflow:hidden;text-align:right;text-overflow:ellipsis;-webkit-user-select:none;user-select:none;white-space:nowrap;width:52px}.timesExecuted .dragHandle{color:var(--cv-theme-on-surface-variant);cursor:grab;padding-left:.5rem;transition:visibility .3s ease;visibility:hidden}.timesExecuted .dragHandle:active{--cv-icon-button-cursor: grabbing}.timesExecutedWrapper{cursor:grab}.timesExecutedWrapper:active{cursor:grabbing}.timesExecutedWrapper:hover .dragHandle{visibility:visible}.cell{box-sizing:border-box;cursor:pointer;display:flex;justify-content:space-between;position:relative;transition:background-color .2s ease;-webkit-user-select:auto;user-select:auto}.cell.focused .selectionIndicator,.cell.selected .selectionIndicator{visibility:visible}.cell:hover{background-color:var(--cv-theme-secondary-4)}.cell:hover .selectionIndicator{visibility:visible;background-color:var(--cv-theme-on-secondary-container-38)}.cell:active{background-color:var(--cv-theme-secondary-12)}.cell:active .selectionIndicator{visibility:visible;background-color:var(--cv-theme-on-secondary-container-74)}.cellWrapper{display:flex;flex-direction:column;width:100%}.cellOutputWrapper{display:flex;flex-direction:column;max-width:calc(100% - 130px);flex:1}.contextMenu{background-color:var(--cv-theme-surface-canvas);border-radius:8px;box-shadow:0 8px 12px 6px #00000026,0 4px 4px #0000004d;display:flex;flex-direction:column;position:fixed;visibility:hidden;z-index:1000}.contextMenuContent{border-radius:4px;flex-grow:1;max-height:100%;overflow:auto}.contextMenu.open{visibility:visible}.editorContainer{box-sizing:border-box;background-color:var(--cv-theme-surface);border:1px solid var(--cv-theme-outline-variant);border-radius:var(--cv-editor-border-radius, 4px);min-height:56px;overflow:hidden;padding:1rem}.errors,.output{max-width:100%;width:100%}";
var C = Object.defineProperty, w = Object.getOwnPropertyDescriptor, n = (e, t, o, r) => {
  for (var s = r > 1 ? void 0 : r ? w(t, o) : t, l = e.length - 1, a; l >= 0; l--)
    (a = e[l]) && (s = (r ? a(t, o, s) : a(s)) || s);
  return r && s && C(t, o, s), s;
};
let i = class extends m {
  constructor() {
    super(), this.code = "", this.language = "", this.loading = !1, this.selected = !1, this.timesExecuted = 0, this.hideEditor = !1, this.hideCount = !1, this.editorTheme = "", this._editorFocused = !1, this._isMenuOpen = !1, this._menuMaxHeight = "auto", this._menuPosition = { top: 0, left: 0 }, this.editorOptions = {
      minimap: { enabled: !1 },
      // Disable minimap to save space
      wordWrap: "on",
      // Enable word wrap to avoid horizontal scroll
      fontSize: "14px",
      glyphMargin: !1,
      folding: !1,
      lineHeight: 20,
      lineNumbers: "off",
      lineDecorationsWidth: 0,
      lineNumbersMinChars: 0,
      renderIndentGuides: !1,
      renderLineHighlight: "none",
      overviewRulerLanes: 0,
      hideCursorInOverviewRuler: !0,
      scrollbar: {
        alwaysConsumeMouseWheel: !1,
        vertical: "hidden"
      }
    }, this.closeContextMenu = this.closeContextMenu.bind(this), this.showContextMenu = this.showContextMenu.bind(this);
  }
  closeContextMenu() {
    this._isMenuOpen = !1;
  }
  connectedCallback() {
    super.connectedCallback(), document.addEventListener("click", this.closeContextMenu);
  }
  disconnectedCallback() {
    super.disconnectedCallback(), document.removeEventListener("click", this.closeContextMenu);
  }
  handleCodeChange(e) {
    this.code = e.detail.code;
  }
  setEditorFocus(e, t) {
    e.stopImmediatePropagation(), this._editorFocused = t, this.requestUpdate();
  }
  setEditorInstance(e) {
    e.stopImmediatePropagation(), this._editor = e.detail.editor, this._editor.onKeyDown((t) => {
      t.shiftKey && t.keyCode === b.Enter && t.preventDefault();
    });
  }
  showContextMenu(e) {
    var u;
    e.preventDefault();
    const t = document.querySelectorAll("cv-notebook-cell");
    t == null || t.forEach((h) => {
      h.closeContextMenu();
    });
    const o = (u = this.shadowRoot) == null ? void 0 : u.querySelector(
      ".contextMenu"
    ), r = o == null ? void 0 : o.offsetHeight, l = window.innerHeight - e.clientY, a = e.clientY;
    l >= r ? (this._menuPosition = { top: e.clientY, left: e.clientX }, this._menuMaxHeight = `${l}px`) : a >= r ? (this._menuPosition = { top: e.clientY - r, left: e.clientX }, this._menuMaxHeight = `${r}px`) : (this._menuPosition = { top: e.clientY - a, left: e.clientX }, this._menuMaxHeight = `${a}px`), this._isMenuOpen = !0;
  }
  updated(e) {
    var o, r;
    const t = (o = this.shadowRoot) == null ? void 0 : o.querySelector("cv-code-editor");
    if (e.has("code") || e.has("language"))
      if (t)
        t.code = this.code, t.language = this.language;
      else {
        const s = (r = this.shadowRoot) == null ? void 0 : r.querySelector("cv-code-snippet");
        s && !this.selected && s.highlight();
      }
    super.updated(e);
  }
  getEditorBgColor() {
    var o;
    const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector(".editorContainer");
    return e ? window.getComputedStyle(e).getPropertyValue("background-color") : "";
  }
  renderEditor() {
    const e = this.selected ? c`<cv-code-editor
          @code-change="${this.handleCodeChange}"
          @editor-ready="${this.setEditorInstance}"
          @editor-focus="${(t) => this.setEditorFocus(t, !0)}"
          @editor-blur="${(t) => this.setEditorFocus(t, !1)}"
          .code="${this.code}"
          .language="${this.language}"
          .options="${this.editorOptions}"
          .theme="${this.editorTheme}"
          disableScroll
        ></cv-code-editor>` : c`<cv-code-snippet hideHeader .language="${this.language}"
          >${this.code}</cv-code-snippet
        >`;
    return c`${this.hideEditor ? "" : c`<div class="editorContainer">${e}</div>`}`;
  }
  renderOutput() {
    const e = c` <div class="errors"><slot name="error"></slot></div>
      <div class="output">
        <slot name="output"></slot>
        <slot name="input"></slot>
      </div>`;
    return c`${e}`;
  }
  renderExecutionCount() {
    if (this.hideCount)
      return c`&nbsp;`;
    const e = {
      status: !0,
      loading: this.loading
    };
    return c`[<span class="${p(e)}"
        >${this.loading ? "*" : this.timesExecuted || " "}</span
      >] :`;
  }
  render() {
    const e = {
      cell: !0,
      selected: this.selected,
      focused: this._editorFocused
    };
    return c`
      <div class="${p(e)}" @contextmenu=${this.showContextMenu}>
        <div class="selectionIndicatorWrapper">
          <div class="selectionIndicator"></div>
        </div>

        <div class="timesExecutedWrapper">
          <div class="timesExecuted">
            <div class="dragHandle">
              <slot name="drag-handle"></slot>
            </div>
            <div class="executionCount">${this.renderExecutionCount()}</div>
          </div>
        </div>

        <div class="cellOutputWrapper">
          ${this.renderEditor()} ${this.renderOutput()}
        </div>
      </div>
      <div
        class="contextMenu ${this._isMenuOpen ? "open" : ""}"
        style="left: ${this._menuPosition.left}px; top: ${this._menuPosition.top}px; max-height: ${this._menuMaxHeight}"
      >
        <div class="contextMenuContent">
          <slot name="context-menu"></slot>
        </div>
      </div>
    `;
  }
};
i.styles = [
  g`
      ${v(y)}
    `
];
n([
  d({ type: Number })
], i.prototype, "index", 2);
n([
  d({ type: String })
], i.prototype, "code", 2);
n([
  d({ type: String })
], i.prototype, "language", 2);
n([
  d({ type: Boolean, reflect: !0 })
], i.prototype, "loading", 2);
n([
  d({ type: Boolean, reflect: !0 })
], i.prototype, "selected", 2);
n([
  d({ type: Number })
], i.prototype, "timesExecuted", 2);
n([
  d({ type: Boolean, reflect: !0 })
], i.prototype, "hideEditor", 2);
n([
  d({ type: Boolean, reflect: !0 })
], i.prototype, "hideCount", 2);
n([
  d({ type: String })
], i.prototype, "editorTheme", 2);
n([
  f()
], i.prototype, "_isMenuOpen", 2);
i = n([
  x("cv-notebook-cell")
], i);
const W = i;
export {
  i as CovalentNotebookCell,
  W as default
};
