@arcgis/coding-components 5.1.0-next.88 → 5.1.0-next.89

package/dist/components/arcgis-code-editor-shell/customElement.d.ts

@@ -11,8 +11,9 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  * @cssproperty [--arcgis-coding-components-code-editor-side-panel-max-w] - The max width for the code editor side panel *
  * @cssproperty [--arcgis-coding-components-code-editor-results-panel-max-h] - The max height for the code editor results panel *
  * @cssproperty [--arcgis-coding-components-code-editor-results-panel-h] - The default height for the code editor results panel (preferred over min-h). *
- * @slot [top-action-bar] - A slot for placing a top action bar above the editor area.
+ * @slot [top-action-bar] - A slot for placing a top action bar above the editor area. This slot is deprecated in favor of bottom action bar, removal planned for 6.0
  * @slot [editor] - A slot for placing the main code editor component.
+ * @slot [bottom-action-bar] - A slot for placing a bottom action bar between the editor and results panel.
  * @slot [results-panel] - A slot for placing a results panel below the code editor.
  * @slot [side-panel] - A slot for placing a side panel next to the code editor area.
  * @slot [side-action-bar] - A slot for placing a side action bar next to the side panel.

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

@@ -1,17 +1,26 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { css as e, html as n } from "lit";
-import { LitElement as r } from "@arcgis/lumina";
-const i = e`: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]::slotted(*){border-bottom:var(--arcgis-coding-components-internal-border);flex:0 0 auto}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:1 1 auto;overflow:hidden}slot[name=results-panel]::slotted(*){flex:0 0 var(--arcgis-coding-components-internal-code-editor-results-panel-h);overflow:hidden;border-top:var(--arcgis-coding-components-internal-border);box-sizing:border-box;max-height:var(--arcgis-coding-components-internal-code-editor-results-panel-max-h);margin-bottom:-1px}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 t extends r {
+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)
+        return;
+      const e = s(o);
+      this.el.classList.toggle("results-has-content", e);
+    };
+  }
   static {
     this.styles = [i];
   }
   render() {
-    return n`<slot name=top-action-bar></slot><div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><slot name=editor></slot><slot name=results-panel></slot></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`;
+    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>`;
   }
 }
-o("arcgis-code-editor-shell", t);
+n("arcgis-code-editor-shell", l);
 export {
-  t as CodeEditorShell
+  l as CodeEditorShell
 };

package/dist/components/arcgis-code-viewer/customElement.d.ts

@@ -26,6 +26,20 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
  * to plain text. For safety and to prevent the markup from rendering in-page, wrap the snippet in a `<template>`.
  * If no `<template>` is provided, the component falls back to concatenating the `outerHTML` of element nodes and the
  * raw text of text nodes. Script contents are treated as inert string data; they are never executed.
+ * @example
+ * Monaco-style line numbers
+ * ```tsx
+ * <arcgis-code-viewer language="typescript" lineNumbers="on">
+ * const answer = 42;
+ * console.log(answer);
+ * </arcgis-code-viewer>
+ * ```
+ * @example
+ * Custom line numbers using Monaco's formatter pattern
+ * ```ts
+ * const viewer = document.querySelector("arcgis-code-viewer");
+ * viewer.lineNumbers = (lineNumber) => String(lineNumber + 40);
+ * ```
  * @internal
  */
 export abstract class ArcgisCodeViewer extends LitElement {
@@ -40,10 +54,23 @@ export abstract class ArcgisCodeViewer extends LitElement {
    * @default "arcade"
    */
   accessor language: string;
+  /**
+   * Controls line number rendering using Monaco's `lineNumbers` paradigm.
+   *
+   * - `"off"`: hide the gutter
+   * - `"on"`: render 1-based line numbers
+   * - `(lineNumber) => string`: render custom labels, such as offset line numbers
+   *
+   * @default "off"
+   */
+  accessor lineNumbers: ArcgisCodeViewerLineNumbers;
   /**
    * When `true`, adds a round style to the component.
    *
    * @default false
    */
   accessor round: boolean;
-}
+}
+
+/** @internal */
+export type ArcgisCodeViewerLineNumbers = "off" | "on" | ((lineNumber: number) => string);

package/dist/components/arcgis-code-viewer/customElement.js

@@ -1,46 +1,46 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { g as m, c as u } from "../../chunks/runtime.js";
-import { LitElement as p } from "@arcgis/lumina";
-import { slotChangeHasContent as g, observeAncestorsMutation as f, unsafeGetCalciteModeName as _ } from "@arcgis/toolkit/dom";
-import { load as S } from "@arcgis/lumina/controllers";
-import { i as v } from "../../chunks/monaco-importer.js";
-import { css as E, html as a } from "lit";
-import { w as l, s as h } from "../../chunks/setup-monaco-theme.js";
-import { c as T, g as c, o as b } from "../../chunks/colorize.js";
-import { s as C } from "../../chunks/arcade-service-accessors.js";
-import { debounce as y } from "@arcgis/toolkit/function";
-import { Task as N } from "@lit/task";
-import { rethrowError as O, log as w } from "@arcgis/toolkit/log";
-const z = E`pre{direction:ltr;overflow-x:auto;background-color:var(--calcite-color-foreground-2);padding:var(--calcite-spacing-sm);white-space:pre-line;code{font-size:var(--calcite-font-size--2);font-family:var(--calcite-font-family-code)}}:host([round]){pre{border-radius:var(--calcite-corner-radius-round)}}`;
-class L extends p {
+import { LitElement as g } from "@arcgis/lumina";
+import { slotChangeHasContent as p, observeAncestorsMutation as f, unsafeGetCalciteModeName as _ } from "@arcgis/toolkit/dom";
+import { load as v } from "@arcgis/lumina/controllers";
+import { i as b } from "../../chunks/monaco-importer.js";
+import { css as y, html as a } from "lit";
+import { w as l, s as c } from "../../chunks/setup-monaco-theme.js";
+import { c as S, g as d, o as N } from "../../chunks/colorize.js";
+import { s as E } from "../../chunks/arcade-service-accessors.js";
+import { debounce as T } from "@arcgis/toolkit/function";
+import { Task as w } from "@lit/task";
+import { rethrowError as C, log as L } from "@arcgis/toolkit/log";
+const O = y`:host{display:block}.arcgis-code-viewer-container{display:flex;align-items:stretch;background-color:var(--calcite-color-foreground-2)}.arcgis-code-viewer__gutter{display:flex;min-width:var(--calcite-spacing-md);padding:0 var(--calcite-spacing-xs) 0 var(--calcite-spacing-sm);border-inline-end:1px solid var(--calcite-color-border-3);color:var(--calcite-color-text-3);font-size:var(--calcite-font-size--2);font-family:var(--calcite-font-family-code);user-select:none;justify-items:center;font-variant-numeric:tabular-nums}.arcgis-code-viewer__line-number{display:flex;align-items:center}pre.arcgis-code-viewer{display:flex;direction:ltr;overflow-x:auto;margin:0;padding:var(--calcite-spacing-sm);white-space:pre-line;code{font-size:var(--calcite-font-size--2);font-family:var(--calcite-font-family-code)}}:host([round]){.arcgis-code-viewer-container{border-radius:var(--calcite-corner-radius-round)}}`;
+class z extends g {
   constructor() {
-    super(...arguments), this._monacoEditor = S(v), this.#t = Promise.withResolvers(), this.#e = "", this._slotContentObservers = [], this._onDefaultSlotChange = async (e) => {
-      g(e) || (this._codeFromSlot = "");
-      const t = e.target instanceof HTMLSlotElement ? e.target : null, o = t ? this._computeSlotText(t) : "";
-      t && this._observeAssignedSlotNodes(t), o !== this._codeFromSlot && (this._codeFromSlot = o), this.#t.resolve();
-    }, this._colorizeTask = new N(this, {
-      task: async ([e, t], { signal: o }) => {
-        if (await this.#t.promise, o.aborted)
+    super(...arguments), this._monacoEditor = v(b), this.#t = Promise.withResolvers(), this.#e = "", this._slotContentObservers = [], this._onDefaultSlotChange = async (e) => {
+      p(e) || (this._codeFromSlot = "");
+      const t = e.target instanceof HTMLSlotElement ? e.target : null, s = t ? this._computeSlotText(t) : "";
+      t && this._observeAssignedSlotNodes(t), s !== this._codeFromSlot && (this._codeFromSlot = s), this.#t.resolve();
+    }, this._colorizeTask = new w(this, {
+      task: async ([e, t], { signal: s }) => {
+        if (await this.#t.promise, s.aborted)
           return this.#e;
-        if (await l(t), o.aborted)
+        if (await l(t), s.aborted)
           return this.#e;
-        const i = await T(e, t);
-        return o.aborted ? this.#e : (this.#e = i, i);
+        const r = await S(e, t);
+        return s.aborted ? this.#e : (this.#e = r, r);
       },
       args: () => [this._codeFromSlot, this.language]
-    }), this._codeFromSlot = "", this.language = "arcade", this.round = !1;
+    }), this._codeFromSlot = "", this.language = "arcade", this.round = !1, this.lineNumbers = "off";
   }
   static {
-    this.properties = { _codeFromSlot: 16, language: 1, round: 7 };
+    this.properties = { _codeFromSlot: 16, language: 1, round: 7, lineNumbers: 1 };
   }
   static {
-    this.styles = z;
+    this.styles = O;
   }
   #t;
   #e;
   async load() {
-    C(m("./assets")), await h(this.language), await l(this.language), this._applyColorizeStyles(c()), this.manager.onLifecycle(() => (this._themeObserver = f(this.el, ["class"], () => this.updateTheme()), this._themeChangedListener = b(() => {
-      this._applyColorizeStyles(c());
+    E(m("./assets")), await c(this.language), await l(this.language), this._applyColorizeStyles(d()), this.manager.onLifecycle(() => (this._themeObserver = f(this.el, ["class"], () => this.updateTheme()), this._themeChangedListener = N(() => {
+      this._applyColorizeStyles(d());
     }), this.updateTheme(), () => {
       this._themeObserver?.(), this._themeObserver = void 0, this._themeChangedListener?.dispose(), this._themeChangedListener = void 0;
     }));
@@ -49,7 +49,7 @@ class L extends p {
     this.el.hasChildNodes() || this.#t.resolve();
   }
   willUpdate(e) {
-    e.has("language") && h(this.language).then(() => l(this.language)).catch(O(this));
+    e.has("language") && c(this.language).then(() => l(this.language)).catch(C(this));
   }
   disconnectedCallback() {
     super.disconnectedCallback(), this._disposeSlotObservers();
@@ -62,35 +62,35 @@ class L extends p {
     const t = e.assignedNodes({ flatten: !0 });
     if (!t.length)
       return;
-    const o = /* @__PURE__ */ new Set();
-    for (const s of t)
-      s.nodeType === Node.ELEMENT_NODE ? o.add(s) : s.nodeType === Node.TEXT_NODE && s.parentElement && o.add(s.parentElement);
-    const i = { characterData: !0, childList: !0, subtree: !0 }, r = y(() => {
-      const s = this._computeSlotText(e);
-      s !== this._codeFromSlot && (this._codeFromSlot = s);
-    }, 100), d = (s) => {
-      if (s.some((n) => n.type === "childList")) {
+    const s = /* @__PURE__ */ new Set();
+    for (const o of t)
+      o.nodeType === Node.ELEMENT_NODE ? s.add(o) : o.nodeType === Node.TEXT_NODE && o.parentElement && s.add(o.parentElement);
+    const r = { characterData: !0, childList: !0, subtree: !0 }, i = T(() => {
+      const o = this._computeSlotText(e);
+      o !== this._codeFromSlot && (this._codeFromSlot = o);
+    }, 100), h = (o) => {
+      if (o.some((n) => n.type === "childList")) {
         const n = this._computeSlotText(e);
         n !== this._codeFromSlot && (this._codeFromSlot = n);
         return;
       }
-      r();
+      i();
     };
-    o.forEach((s) => {
-      const n = new MutationObserver(d);
-      n.observe(s, i), this._slotContentObservers.push(n);
+    s.forEach((o) => {
+      const n = new MutationObserver(h);
+      n.observe(o, r), this._slotContentObservers.push(n);
     });
   }
   _computeSlotText(e) {
-    const t = e.assignedNodes({ flatten: !0 }).filter((o) => o.nodeType !== Node.COMMENT_NODE);
+    const t = e.assignedNodes({ flatten: !0 }).filter((s) => s.nodeType !== Node.COMMENT_NODE);
     if (this.language === "html" && t.length) {
-      const o = t.find((r) => r.nodeType === Node.ELEMENT_NODE && r.tagName === "TEMPLATE");
-      if (o)
-        return (o.innerHTML ?? "").trim();
-      const i = t.map((r) => r.nodeType === Node.ELEMENT_NODE ? r.outerHTML : r.nodeType === Node.TEXT_NODE ? r.textContent ?? "" : "").join("").trim();
-      return i && process.env.NODE_ENV !== "production" && w("warn", this, "Consider wrapping your snippet in a <template> for fully inert, intention-revealing markup."), i;
+      const s = t.find((i) => i.nodeType === Node.ELEMENT_NODE && i.tagName === "TEMPLATE");
+      if (s)
+        return (s.innerHTML ?? "").trim();
+      const r = t.map((i) => i.nodeType === Node.ELEMENT_NODE ? i.outerHTML : i.nodeType === Node.TEXT_NODE ? i.textContent ?? "" : "").join("").trim();
+      return r && process.env.NODE_ENV !== "production" && L("warn", this, "Consider wrapping your snippet in a <template> for fully inert, intention-revealing markup."), r;
     }
-    return t.map((o) => o.textContent ?? "").join("").trim();
+    return t.map((s) => s.textContent ?? "").join("").trim();
   }
   updateTheme() {
     const e = _(this.el) === "light" ? "vs" : "vs-dark";
@@ -104,15 +104,28 @@ class L extends p {
     }
     this._colorizeSheet.replaceSync(e);
   }
+  _showLineNumbers() {
+    return typeof this.lineNumbers == "function" || this.lineNumbers === "on";
+  }
+  _getLineNumberLabel(e) {
+    return typeof this.lineNumbers == "function" ? this.lineNumbers(e) : `${e}`;
+  }
+  _getRenderedLineNumbers() {
+    if (!this._showLineNumbers())
+      return [];
+    const e = Math.max(this._codeFromSlot.split(/\r\n|\r|\n/u).length, 1);
+    return Array.from({ length: e }, (t, s) => this._getLineNumberLabel(s + 1));
+  }
   render() {
-    return a`<div><slot @slotchange=${this._onDefaultSlotChange} style="display:none" aria-hidden=true></slot><pre class="arcgis-code-viewer" aria-label=${`${this.language} code snippet`}>${this._colorizeTask.render({
+    const e = this._getRenderedLineNumbers();
+    return a`<div class=${`arcgis-code-viewer-container${e.length ? " arcgis-code-viewer-container--with-line-numbers" : ""}`}><slot @slotchange=${this._onDefaultSlotChange} style="display:none" aria-hidden=true></slot>${e.length ? a`<div class="arcgis-code-viewer__gutter" aria-hidden=true>${e.map((t) => a`<span class="arcgis-code-viewer__line-number">${t}</span>`)}</div>` : null}<pre class="arcgis-code-viewer" aria-label=${`${this.language} code snippet`}>${this._colorizeTask.render({
       error: () => null,
       pending: () => a`<code class=${`language-${this.language}`}></code>`,
-      complete: (e) => a`<code class=${`language-${this.language}`} .innerHTML=${e ?? ""}></code>`
+      complete: (t) => a`<code class=${`language-${this.language}`} .innerHTML=${t ?? ""}></code>`
     })}</pre></div>`;
   }
 }
-u("arcgis-code-viewer", L);
+u("arcgis-code-viewer", z);
 export {
-  L as ArcgisCodeViewer
+  z as ArcgisCodeViewer
 };