@arcgis/coding-components 5.1.0-next.90 → 5.1.0-next.92

package/dist/components/arcgis-code-editor-shell/customElement.js

@@ -1,26 +1,144 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as t, html as r } from "lit";
-import { LitElement as a } from "@arcgis/lumina";
-import { slotChangeHasContent as s } from "@arcgis/toolkit/dom";
-const i = t`:host{--arcgis-coding-components-internal-border: var( --arcgis-coding-components-border, 1px solid var(--calcite-color-border-3) );--arcgis-coding-components-internal-background-color: var( --arcgis-coding-components-background-color, var(--calcite-color-foreground-1) );--arcgis-coding-components-internal-side-action-bar-max-w: var(--arcgis-coding-components-side-action-bar-max-w, 25%);--arcgis-coding-components-internal-code-editor-side-panel-w: var( --arcgis-coding-components-code-editor-side-panel-w, 600px );--arcgis-coding-components-internal-code-editor-side-panel-max-w: var( --arcgis-coding-components-code-editor-side-panel-max-w, 45% );--arcgis-coding-components-internal-code-editor-results-panel-max-h: var( --arcgis-coding-components-code-editor-results-panel-max-h, 50% );--arcgis-coding-components-internal-code-editor-results-panel-h: var( --arcgis-coding-components-code-editor-results-panel-h, 50% );display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--arcgis-coding-components-internal-border);box-sizing:border-box;background-color:var(--arcgis-coding-components-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}}slot[name=top-action-bar]{flex:0 0 auto}slot[name=top-action-bar]::slotted(*){border-bottom:var(--arcgis-coding-components-internal-border)}slot[name=bottom-action-bar]{flex:0 0 auto}slot[name=bottom-action-bar]::slotted(*){border-top:var(--arcgis-coding-components-internal-border)}slot[name=side-panel]::slotted(*){max-width:var(--arcgis-coding-components-internal-code-editor-side-panel-max-w);width:var(--arcgis-coding-components-internal-code-editor-side-panel-w);border-inline-start:var(--arcgis-coding-components-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:0 0 auto;overflow:hidden}:host(.results-has-content) slot[name=results-panel]{height:var(--arcgis-coding-components-internal-code-editor-results-panel-h);max-height:var(--arcgis-coding-components-internal-code-editor-results-panel-max-h)}slot[name=results-panel]::slotted(*){border-top:var(--arcgis-coding-components-internal-border);box-sizing:border-box;flex:auto}slot[name=side-action-bar]::slotted(*){max-width:var(--arcgis-coding-components-internal-side-action-bar-max-w);border-inline-start:var(--arcgis-coding-components-internal-border)}`;
-class l extends a {
-  constructor() {
-    super(...arguments), this._onResultsPanelSlotChange = (o) => {
-      if (!o.target)
+import { c as g } from "../../chunks/runtime.js";
+import { css as x, html as f } from "lit";
+import { LitElement as v } from "@arcgis/lumina";
+import { slotChangeHasContent as y } from "@arcgis/toolkit/dom";
+import { createRef as c, ref as d } from "lit/directives/ref.js";
+const w = x`: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:calc((var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1);align-items:center;justify-content:center;block-size:var(--calcite-size-fixed-xxl);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, u = 100, i = "results-has-content", m = "is-resizing", H = "--arcgis-coding-components-code-editor-results-panel-max-h", s = "--internal-code-editor-results-panel-h", a = "--internal-code-editor-results-panel-max-h", n = "--internal-code-editor-results-panel-bottom-drawer-controls-h";
+class R extends v {
+  static {
+    this.styles = [w];
+  }
+  #e = void 0;
+  #i = !1;
+  #n = c();
+  #d = c();
+  #a = c();
+  #t;
+  #h(e) {
+    this.#e === e.pointerId && this.#r();
+  }
+  #g = (e) => {
+    this.#e === e.pointerId && this.#r();
+  };
+  load() {
+    this.manager.onLifecycle(() => (this.#t = new ResizeObserver(() => {
+      this.elementInternals.states.has(i) && this.#s();
+    }), this.updateComplete.then(() => this.#b()), () => {
+      this.#r(), this.#t?.disconnect(), this.#t = void 0;
+    }));
+  }
+  #x() {
+    this.elementInternals.states.has(i) && this.#s(), this.#b();
+  }
+  #f(e) {
+    e.button !== 0 || !this.elementInternals.states.has(i) || (e.preventDefault(), e.currentTarget instanceof HTMLElement && (e.currentTarget.focus(), e.currentTarget.setPointerCapture(e.pointerId)), this.#e = e.pointerId, this.#i = !0, this.elementInternals.states.add(m), this.#u(e));
+  }
+  #v(e) {
+    if (!this.elementInternals.states.has(i))
+      return;
+    this.#s();
+    const t = this.#P(e);
+    t != null && (e.preventDefault(), e.stopPropagation(), this.#i = !0, this.#c(t));
+  }
+  #y(e) {
+    if (!e.target)
+      return;
+    const r = y(e);
+    r || (this.#r(), this.#i || this.#R()), r ? (this.elementInternals.states.add(i), this.#s()) : this.elementInternals.states.delete(i);
+  }
+  #r() {
+    const e = this.#e;
+    if (!e)
+      return;
+    this.#e = void 0;
+    const t = this.#d.value;
+    t?.hasPointerCapture(e) && t.releasePointerCapture(e), this.elementInternals.states.delete(m);
+  }
+  #u(e) {
+    if (this.#e !== e.pointerId)
+      return;
+    const t = this.#o(), r = this.el.getBoundingClientRect().bottom - e.clientY - t;
+    this.#c(r, t);
+  }
+  #w() {
+    const e = Number.parseFloat(this.el.style.getPropertyValue(s));
+    if (Number.isFinite(e))
+      return e;
+    const t = Number.parseFloat(getComputedStyle(this.#n.value ?? this.el).height);
+    return Number.isFinite(t) ? Math.max(0, t - this.#o()) : u;
+  }
+  #m() {
+    return this.el.querySelector(':scope > [slot="bottom-action-bar"]');
+  }
+  #o() {
+    const e = this.#m()?.getBoundingClientRect().height ?? 0, t = this.#a.value?.getBoundingClientRect().height ?? 0;
+    return e + t;
+  }
+  #p() {
+    return getComputedStyle(this.el).getPropertyValue(H).trim() || null;
+  }
+  #l(e, t) {
+    t ? this.el.style.setProperty(e, t) : this.el.style.removeProperty(e);
+  }
+  #z(e) {
+    const t = this.#p();
+    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.#n.value;
+    if (!o)
+      return null;
+    const l = this.el.style.getPropertyValue(n), p = this.el.style.getPropertyValue(s), b = this.el.style.getPropertyValue(a);
+    this.el.style.setProperty(n, `${e}px`), this.el.style.setProperty(s, `${this.el.getBoundingClientRect().height}px`), this.el.style.setProperty(a, t);
+    const h = Number.parseFloat(getComputedStyle(o).height);
+    return this.#l(n, l), this.#l(s, p), this.#l(a, b), Number.isFinite(h) ? Math.max(0, h - e) : null;
+  }
+  #b() {
+    const e = this.#t;
+    if (!e)
+      return;
+    e.disconnect(), e.observe(this.el);
+    const t = this.#a.value;
+    t && e.observe(t);
+    const r = this.#m();
+    r && e.observe(r);
+  }
+  #P(e) {
+    const t = e.shiftKey ? P : z, r = this.#w();
+    switch (e.key) {
+      case "ArrowUp":
+        return r + t;
+      case "ArrowDown":
+        return r - t;
+      default:
         return;
-      const e = s(o);
-      this.el.classList.toggle("results-has-content", e);
-    };
+    }
   }
-  static {
-    this.styles = [i];
+  #H(e, t) {
+    const r = Math.max(0, this.el.getBoundingClientRect().height - t), o = this.#z(t), l = o == null ? r : Math.min(r, o);
+    return Math.min(Math.max(e, u), l);
+  }
+  #c(e, t = this.#o()) {
+    const r = this.#H(e, t), o = this.#p();
+    this.el.style.setProperty(n, `${t}px`), this.el.style.setProperty(s, `${r}px`), this.el.style.setProperty(a, o ?? `calc(100% - ${t}px)`);
+  }
+  #R() {
+    this.el.style.removeProperty(n), this.el.style.removeProperty(s), this.el.style.removeProperty(a);
+  }
+  #s() {
+    const e = this.#o(), t = Number.parseFloat(this.el.style.getPropertyValue(s));
+    return Number.isFinite(t) ? this.#c(t, e) : this.el.style.setProperty(n, `${e}px`), e;
   }
   render() {
-    return r`<slot name=top-action-bar></slot><div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><slot name=editor></slot><slot name=bottom-action-bar></slot><slot name=results-panel @slotchange=${this._onResultsPanelSlotChange}></slot></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`;
+    return f`<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" ${d(this.#n)}><div aria-label="Resize results panel" aria-orientation=horizontal class="bottom-drawer-resize-handle" role=separator tabindex=0 @pointercancel=${this.#h} @pointerdown=${this.#f} @pointermove=${this.#u} @pointerup=${this.#h} @lostpointercapture=${this.#g} @keydown=${this.#v} ${d(this.#d)}><div class="bottom-drawer-resize-handle-bar" ${d(this.#a)}><calcite-icon icon=drag-resize-vertical scale=s></calcite-icon></div></div><slot name=bottom-action-bar @slotchange=${this.#x}></slot><slot name=results-panel @slotchange=${this.#y}></slot></div></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`;
   }
 }
-n("arcgis-code-editor-shell", l);
+g("arcgis-code-editor-shell", R);
 export {
-  l as CodeEditorShell
+  R as CodeEditorShell
 };

package/dist/components/arcgis-code-editor-shell/index.js

@@ -1 +1,2 @@
+import "@esri/calcite-components/components/calcite-icon";
 export * from "./customElement.js";