@arcgis/coding-components
Version:
ArcGIS Coding Components
150 lines (149 loc) • 9.97 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as g } from "../../chunks/runtime.js";
import { css as f, html as x } from "lit";
import { LitElement as v } from "@arcgis/lumina";
import { slotChangeHasContent as y } from "@arcgis/toolkit/dom";
import { createRef as l, ref as c } from "lit/directives/ref.js";
const w = f`:host{--internal-border: var(--arcgis-coding-components-border, 1px solid var(--calcite-color-border-3));--internal-background-color: var(--arcgis-coding-components-background-color, var(--calcite-color-foreground-1));--internal-side-action-bar-max-w: var(--arcgis-coding-components-side-action-bar-max-w, 25%);--internal-code-editor-side-panel-w: var(--arcgis-coding-components-code-editor-side-panel-w, 600px);--internal-code-editor-side-panel-max-w: var(--arcgis-coding-components-code-editor-side-panel-max-w, 45%);--internal-code-editor-results-panel-max-h: var(--arcgis-coding-components-code-editor-results-panel-max-h, 50%);--internal-code-editor-results-panel-h: var(--arcgis-coding-components-code-editor-results-panel-h, 50%);--internal-code-editor-results-panel-bottom-drawer-controls-h: 0px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--internal-border);box-sizing:border-box;background-color:var(--internal-background-color);height:100%;.flex-adjustable{flex:1 1 auto;overflow:hidden}.flex-row{display:flex;flex-direction:row;overflow:hidden}.flex-column{display:flex;flex-direction:column;overflow:hidden}.bottom-drawer{display:flex;flex:0 0 auto;flex-direction:column;overflow:hidden;position:relative;box-sizing:border-box;min-height:0}.bottom-drawer-resize-handle{display:none;position:absolute;inset-inline:0;inset-block-start:0;align-items:center;justify-content:center;block-size:var(--calcite-size-fixed-sm-plus);cursor:ns-resize;touch-action:none;user-select:none;z-index:var(--calcite-z-index-header);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);outline:none}.bottom-drawer-resize-handle-bar{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);transition:box-shadow .12s ease,color .12s ease,background-color .12s ease}.bottom-drawer-resize-handle-bar calcite-icon{color:inherit}}:host(:state(results-has-content)) .bottom-drawer{padding-block-start:var(--calcite-size-fixed-sm-plus);height:calc(var(--internal-code-editor-results-panel-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h));max-height:calc(var(--internal-code-editor-results-panel-max-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h))}:host(:state(results-has-content)) .bottom-drawer-resize-handle{display:flex}:host(:state(results-has-content)) .bottom-drawer-resize-handle:focus .bottom-drawer-resize-handle-bar{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host(:state(results-has-content)) .bottom-drawer-resize-handle:hover .bottom-drawer-resize-handle-bar,:host(:state(results-has-content)) .bottom-drawer-resize-handle .bottom-drawer-resize-handle-bar,:host(:state(is-resizing)) .bottom-drawer-resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}:host(:state(results-has-content)) slot[name=bottom-action-bar]::slotted(*){border-top:0}slot[name=top-action-bar]{flex:0 0 auto}slot[name=top-action-bar]::slotted(*){border-bottom:var(--internal-border)}slot[name=bottom-action-bar]{flex:0 0 auto}slot[name=bottom-action-bar]::slotted(*){border-top:var(--internal-border)}slot[name=side-panel]::slotted(*){max-width:var(--internal-code-editor-side-panel-max-w);width:var(--internal-code-editor-side-panel-w);border-inline-start:var(--internal-border);box-sizing:border-box;flex:1 0 auto}slot[name=side-panel]::slotted(.hidden){display:none}slot[name=editor]::slotted(*){flex:auto;min-height:0}slot[name=results-panel]{display:flex;flex:1 1 auto;overflow:hidden;min-height:0}slot[name=results-panel]::slotted(*){border-top:var(--internal-border);box-sizing:border-box;flex:1 1 auto;min-height:0}slot[name=side-action-bar]::slotted(*){max-width:var(--internal-side-action-bar-max-w);border-inline-start:var(--internal-border)}`, z = 10, P = 25, h = 100, u = "results-has-content", m = "is-resizing", H = "--arcgis-coding-components-code-editor-results-panel-max-h", s = "--internal-code-editor-results-panel-h", n = "--internal-code-editor-results-panel-max-h", i = "--internal-code-editor-results-panel-bottom-drawer-controls-h";
class R extends v {
static {
this.styles = [w];
}
#e = void 0;
#t = !1;
#n = !1;
#a = l();
#h = l();
#l = l();
#r;
#u(e) {
this.#e === e.pointerId && this.#o();
}
#f = (e) => {
this.#e === e.pointerId && this.#o();
};
load() {
this.manager.onLifecycle(() => (this.#r = new ResizeObserver(() => {
this.#t && this.#i();
}), this.updateComplete.then(() => this.#g()), () => {
this.#o(), this.#r?.disconnect(), this.#r = void 0;
}));
}
#x() {
this.#t && this.#i(), this.#g();
}
#v(e) {
e.button !== 0 || !this.#t || (e.preventDefault(), e.currentTarget instanceof HTMLElement && (e.currentTarget.focus(), e.currentTarget.setPointerCapture(e.pointerId)), this.#e = e.pointerId, this.#n = !0, this.elementInternals.states.add(m), this.#m(e));
}
#y(e) {
if (!this.#t)
return;
this.#i();
const t = this.#H(e);
t != null && (e.preventDefault(), e.stopPropagation(), this.#n = !0, this.#d(t));
}
#w(e) {
if (!e.target)
return;
const r = y(e);
if (this.#t = r, r) {
this.elementInternals.states.add(u), this.#i();
return;
}
this.#o(), this.#n || this.#C(), this.elementInternals.states.delete(u);
}
#o() {
const e = this.#e;
if (!e)
return;
this.#e = void 0;
const t = this.#h.value;
t?.hasPointerCapture(e) && t.releasePointerCapture(e), this.elementInternals.states.delete(m);
}
#m(e) {
if (this.#e !== e.pointerId)
return;
const t = this.#s(), r = this.el.getBoundingClientRect().bottom - e.clientY - t;
this.#d(r, t);
}
#z() {
const e = Number.parseFloat(this.el.style.getPropertyValue(s));
if (Number.isFinite(e))
return e;
const t = Number.parseFloat(getComputedStyle(this.#a.value ?? this.el).height);
return Number.isFinite(t) ? Math.max(0, t - this.#s()) : h;
}
#p() {
return this.el.querySelector(':scope > [slot="bottom-action-bar"]');
}
#s() {
const e = this.#p()?.getBoundingClientRect().height ?? 0, t = this.#l.value?.getBoundingClientRect().height ?? 0;
return e + t;
}
#b() {
return getComputedStyle(this.el).getPropertyValue(H).trim() || null;
}
#c(e, t) {
t ? this.el.style.setProperty(e, t) : this.el.style.removeProperty(e);
}
#P(e) {
const t = this.#b();
if (!t)
return null;
const r = Number.parseFloat(t);
if (t.endsWith("px") && Number.isFinite(r))
return r;
if (t.endsWith("%") && Number.isFinite(r))
return this.el.getBoundingClientRect().height * r / 100;
const o = this.#a.value;
if (!o)
return null;
const a = this.el.style.getPropertyValue(i), p = this.el.style.getPropertyValue(s), b = this.el.style.getPropertyValue(n);
this.el.style.setProperty(i, `${e}px`), this.el.style.setProperty(s, `${this.el.getBoundingClientRect().height}px`), this.el.style.setProperty(n, t);
const d = Number.parseFloat(getComputedStyle(o).height);
return this.#c(i, a), this.#c(s, p), this.#c(n, b), Number.isFinite(d) ? Math.max(0, d - e) : null;
}
#g() {
const e = this.#r;
if (!e)
return;
e.disconnect(), e.observe(this.el);
const t = this.#l.value;
t && e.observe(t);
const r = this.#p();
r && e.observe(r);
}
#H(e) {
const t = e.shiftKey ? P : z, r = this.#z();
switch (e.key) {
case "ArrowUp":
return r + t;
case "ArrowDown":
return r - t;
default:
return;
}
}
#R(e, t) {
const r = Math.max(0, this.el.getBoundingClientRect().height - t), o = this.#P(t), a = o == null ? r : Math.min(r, o);
return Math.min(Math.max(e, h), a);
}
#d(e, t = this.#s()) {
const r = this.#R(e, t), o = this.#b();
this.el.style.setProperty(i, `${t}px`), this.el.style.setProperty(s, `${r}px`), this.el.style.setProperty(n, o ?? `calc(100% - ${t}px)`);
}
#C() {
this.el.style.removeProperty(i), this.el.style.removeProperty(s), this.el.style.removeProperty(n);
}
#i() {
const e = this.#s(), t = Number.parseFloat(this.el.style.getPropertyValue(s));
return Number.isFinite(t) ? this.#d(t, e) : this.el.style.setProperty(i, `${e}px`), e;
}
render() {
return x`<slot name=top-action-bar></slot><div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><slot name=editor></slot><div class="bottom-drawer" ${c(this.#a)}><div aria-label="Resize results panel" aria-orientation=horizontal class="bottom-drawer-resize-handle" role=separator tabindex=0 =${this.#u} =${this.#v} =${this.#m} =${this.#u} =${this.#f} =${this.#y} ${c(this.#h)}><div class="bottom-drawer-resize-handle-bar" ${c(this.#l)}><calcite-icon icon=drag-resize-vertical scale=s></calcite-icon></div></div><slot name=bottom-action-bar =${this.#x}></slot><slot name=results-panel =${this.#w}></slot></div></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`;
}
}
g("arcgis-code-editor-shell", R);
export {
R as CodeEditorShell
};