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

package/dist/components/arcgis-arcade-editor/index.js

@@ -10,5 +10,7 @@ import "../arcgis-arcade-coding-assistant/index.js";
 import "@esri/calcite-components/components/calcite-flow";
 import "@esri/calcite-components/components/calcite-flow-item";
 import "../arcgis-arcade-results/index.js";
+import "../arcgis-arcade-debugger-console/index.js";
+import "../arcgis-arcade-debugger-output/index.js";
 import "../arcgis-code-editor-shell/index.js";
 export * from "./customElement.js";

package/dist/components/arcgis-arcade-results/customElement.js

@@ -1,228 +1,125 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as D } from "../../chunks/runtime.js";
-import { css as T, html as t, unsafeCSS as O } from "lit";
-import { nothing as S, LitElement as L, createEvent as x, safeClassMap as h } from "@arcgis/lumina";
-import { setValuesInString as o, quoteString as g } from "@arcgis/toolkit/string";
-import { B as k, v as y, M as m, f as A, a as F, b as _ } from "../../chunks/arcade-executor.js";
-import { u as j } from "../../chunks/useT9n.js";
-import { s as z } from "../../chunks/fields.js";
-import "@arcgis/toolkit/function";
-import { createRef as v, ref as $ } from "lit/directives/ref.js";
-import { t as w } from "../../chunks/monaco-theme.js";
-import { observeAncestorsMutation as N, unsafeGetCalciteModeName as E } from "@arcgis/toolkit/dom";
-const V = T`:host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);.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;min-height:0}.y-scrollable-container{overflow-y:auto;block-size:100%;background-color:var(--calcite-color-foreground-1)}header{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}.ltr-container{direction:ltr}calcite-action-bar{calcite-action-group{padding-inline-end:var(--calcite-spacing-sm);calcite-action{padding-inline-end:var(--calcite-spacing-sm)}calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}}calcite-action-group:last-child{border-inline-end-width:0px}calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}}.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.color-info{color:var(--calcite-color-status-info)}.color-error{color:var(--calcite-color-status-danger)}.color-success{color:var(--calcite-color-status-success)}[class*=result-value-]{font-size:var(--calcite-font-size--2);line-height:1.25rem;background-color:var(--calcite-color-foreground-1);margin:var(--calcite-spacing-md)}.console-logs-container{background-color:var(--calcite-color-foreground-1);padding:0 var(--calcite-spacing-md);font-family:var(--calcite-code-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal)}.result-value-table{display:flex;flex-direction:column;min-height:0;.table-scroll{overflow:auto;flex:1 1 auto;min-height:0;max-width:100%;background-color:var(--calcite-color-foreground-1)}table{min-width:max-content;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap;thead{background-color:var(--calcite-color-foreground-2)}tr{border-top:1px solid var(--calcite-color-border-3);border-bottom:1px solid var(--calcite-color-border-3)}th,td{border-inline-start:1px solid var(--calcite-color-border-3);border-inline-end:1px solid var(--calcite-color-border-3);text-align:start;padding:var(--calcite-spacing-xxs);.string-value{white-space:pre}}th{font-weight:var(--calcite-font-weight-medium)}}}.tree-item-label,.number-value,.string-value,.boolean-value{font-family:var(--calcite-code-family)}.tree-item-label,.value-type{color:var(--calcite-color-text-2);font-weight:var(--calcite-font-weight-normal)}.dictionary-property{color:var(--arcgis-editor-identifier)}.number-value{color:var(--arcgis-editor-number)}.string-value{color:var(--arcgis-editor-string);white-space:pre-wrap}.constant-value{color:var(--arcgis-editor-constant)}.date-value{color:var(--arcgis-editor-date)}}`, l = {
-  lines: !0,
-  selectionMode: "none",
-  scale: "s",
-  oncalciteTreeSelect: (e) => e.currentTarget.selectedItems.forEach((a) => a.selected = !1)
-}, u = {
-  onClick: (e) => {
-    const a = e.currentTarget;
-    a.expanded = !a.expanded;
-  }
-}, r = ({ name: e }) => t`<span class="dictionary-property">${e}</span><span>:&nbsp;</span>`, P = ({ value: e, subtree: a = !1 }) => t`<calcite-tree slot=${(a ? "children" : void 0) ?? S} .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}><calcite-tree-item class="string-value">${JSON.stringify(e.castAsJson(), void 0, 2)}</calcite-tree-item></calcite-tree>`, R = ({ value: e, subtree: a = !1 }) => t`<calcite-tree slot=${(a ? "children" : void 0) ?? S} .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}><calcite-tree-item><div class="tree-item-label">${r({ name: "type" })}${e.type}</div></calcite-tree-item><calcite-tree-item><div class="tree-item-label">${r({ name: "value" })}<span class="string-value">${JSON.stringify(e, void 0, 2)}</span></div></calcite-tree-item></calcite-tree>`, p = ({ arcadeResult: e }) => {
-  switch (e.type) {
-    case "unknown":
-    case "null":
-      return t`<span class="constant-value">${e.type}</span>`;
-    case "text":
-      return t`<span class="string-value">${g(e.value)}</span>`;
-    case "number":
-      return t`<span class="number-value">${e.value.toString()}</span>`;
-    case "boolean":
-      return t`<span class="constant-value">${e.value.toString()}</span>`;
-    case "date":
-      return t`<span class="date-value">${_(e)}</span>`;
-    case "dateOnly":
-      return t`<span class="string-value">${g(F(e))}</span>`;
-    case "time":
-      return t`<span class="string-value">${g(A(e))}</span>`;
-    default:
-      return null;
-  }
-}, C = ({ arcadeResult: e, t9nStrings: a }) => {
-  const s = e.value ?? [], i = Math.max(s.length - m, 0);
-  return t`<span>${`${e.type}(${s.length ?? 0})`}</span>${i > 0 ? t`<span>&nbsp;${o(a.showingfirstitemsformat, {
-    count: m.toString()
-  })}</span>` : null}`;
-}, M = ({ value: e, subtree: a, t9nStrings: s }) => {
-  const i = e.geometry?.();
-  return t`<calcite-tree slot=${"children"} .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}>${e.keys().map((c) => {
-    const n = y(e.field(c));
-    return e.arcadeDeclaredClass === "esri.arcade.Feature" && n.type === "geometry" ? null : f({ arcadeResult: n, name: c, t9nStrings: s });
-  })}${i ? f({ arcadeResult: { type: "geometry", value: i }, name: "geometry", t9nStrings: s }) : null}</calcite-tree>`;
-}, J = ({ arcadeResult: e, t9nStrings: a }) => t`<div class="value-type"><span>${e.type}:</span>${e.features.length >= k ? t`<span>&nbsp;${o(a.showingfirstitemsformat, {
-  count: k.toString()
-})}</span>` : null}</div>`, I = ({ items: e, subtree: a, t9nStrings: s }) => t`<calcite-tree slot=${"children"} .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}>${e.map((i, c) => {
-  const n = y(i);
-  return f({ arcadeResult: n, name: c, expanded: !a, t9nStrings: s });
-})}</calcite-tree>`, f = ({ arcadeResult: e, name: a, expanded: s, t9nStrings: i }) => {
-  switch (e.type) {
-    case "null":
-    case "unknown":
-    case "text":
-    case "number":
-    case "date":
-    case "dateOnly":
-    case "time":
-    case "boolean":
-      return t`<calcite-tree-item><div class="tree-item-label">${r({ name: a })}${p({ arcadeResult: e })}</div></calcite-tree-item>`;
-    case "array": {
-      const n = (e.value ?? []).slice(0, m);
-      return t`<calcite-tree-item .expanded=${s} @click=${u.onClick}><div class="tree-item-label">${r({ name: a })}${C({ arcadeResult: e, t9nStrings: i })}</div>${I({ items: n, subtree: !0, t9nStrings: i })}</calcite-tree-item>`;
-    }
-    case "geometry":
-      return t`<calcite-tree-item .expanded=${s} @click=${u.onClick}><div class="tree-item-label">${r({ name: a })}<span>${e.type}</span></div>${R({ value: e.value, subtree: !0 })}</calcite-tree-item>`;
-    case "attachment":
-      return t`<calcite-tree-item .expanded=${s} @click=${u.onClick}><div class="tree-item-label">${r({ name: a })}<span>${e.type}</span></div>${P({ value: e.value, subtree: !0 })}</calcite-tree-item>`;
-    case "feature":
-    case "dictionary":
-    case "portal":
-      return t`<calcite-tree-item .expanded=${s} @click=${u.onClick}><div class="tree-item-label">${r({ name: a })}<span>${e.type}</span></div>${M({ value: e.value, subtree: !0, t9nStrings: i })}</calcite-tree-item>`;
-    default:
-      return null;
-  }
-}, G = ({ arcadeResult: e }) => {
-  const a = z(e.value.fields);
-  return t`<div class="table-scroll"><table><thead><tr>${a.map((s) => t`<th>${s.name}</th>`)}</tr></thead><tbody>${e.features.map((s) => t`<tr>${a.map((i) => {
-    try {
-      const c = y(s.field(i.name));
-      return t`<td>${p({ arcadeResult: c })}</td>`;
-    } catch {
-      return t`<td></td>`;
-    }
-  })}</tr>`)}</tbody></table></div>`;
-}, b = "calcite-mode-dark";
-function B() {
-  let e = `:host {
-`;
-  const a = w["light-theme"];
-  Object.entries(a).forEach(([i, c]) => {
-    e += `  --arcgis-editor-${i}: ${c};
-`;
-  }), e += `}
-`, e += `:host(:state(${b})) {
-`;
-  const s = w["dark-theme"];
-  return Object.entries(s).forEach(([i, c]) => {
-    e += `
-  --arcgis-editor-${i}: ${c};`;
-  }), e += `
-}
-`, T`
-    ${O(e)}
-  `;
-}
-const d = {
-  onClick: (e) => {
-    const a = e.currentTarget;
-    a.expanded = !a.expanded;
+import { c as h } from "../../chunks/runtime.js";
+import { css as g, html as e } from "lit";
+import { LitElement as f, createEvent as d, safeClassMap as r } from "@arcgis/lumina";
+import { setValuesInString as i, uncapitalize as a } from "@arcgis/toolkit/string";
+import { M as v } from "../../chunks/arcade-executor.js";
+import { u as b } from "../../chunks/useT9n.js";
+import { F as $, a as x, t as s, D as y, A as R, b as P } from "../../chunks/functional.js";
+import { d as w, g as k, c as m, b as S, G as T, a as C, S as p } from "../../chunks/debugger-value-styles.js";
+import { createRef as o, ref as n } from "lit/directives/ref.js";
+import { observeAncestorsMutation as M, unsafeGetCalciteModeName as I } from "@arcgis/toolkit/dom";
+const L = g`:host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-color-foreground-1);color:var(--calcite-color-text-2);.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;min-height:0}.y-scrollable-container{overflow-y:auto;block-size:100%;background-color:var(--calcite-color-foreground-1)}header{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}.ltr-container{direction:ltr}calcite-action-bar{calcite-action-group{padding-inline-end:var(--calcite-spacing-sm);calcite-action{padding-inline-end:var(--calcite-spacing-sm)}calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}}calcite-action-group:last-child{border-inline-end-width:0px}calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}}.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.color-info{color:var(--calcite-color-status-info)}.color-error{color:var(--calcite-color-status-danger)}.color-success{color:var(--calcite-color-status-success)}[class*=result-value-]{font-size:var(--calcite-font-size--2);line-height:1.25rem;background-color:var(--calcite-color-foreground-1);margin:var(--calcite-spacing-md)}.console-logs-container{background-color:var(--calcite-color-foreground-1);padding:0 var(--calcite-spacing-md);font-family:var(--calcite-code-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal)}.result-value-table{display:flex;flex-direction:column;min-height:0;.table-scroll{overflow:auto;flex:1 1 auto;min-height:0;max-width:100%;background-color:var(--calcite-color-foreground-1)}table{min-width:max-content;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap;thead{background-color:var(--calcite-color-foreground-2)}tr{border-top:1px solid var(--calcite-color-border-3);border-bottom:1px solid var(--calcite-color-border-3)}th,td{border-inline-start:1px solid var(--calcite-color-border-3);border-inline-end:1px solid var(--calcite-color-border-3);text-align:start;padding:var(--calcite-spacing-xxs);.string-value{white-space:pre}}th{font-weight:var(--calcite-font-weight-medium)}}}}`, c = {
+  onClick: (u) => {
+    const t = u.currentTarget;
+    t.expanded = !t.expanded;
   }
 };
-class q extends L {
+class F extends f {
   constructor() {
-    super(...arguments), this.messages = j(), this.outputRef = v(), this.consoleRef = v(), this.logRef = v(), this.openedResultPanel = "output", this.arcgisInternalClosePanel = x({ bubbles: !1, composed: !1 }), this.arcgisInternalOpenedResultPanelChange = x({ bubbles: !1, composed: !1 });
+    super(...arguments), this.messages = b(), this.outputRef = o(), this.consoleRef = o(), this.logRef = o(), this.openedResultPanel = "output", this.hideHeader = !1, this.arcgisInternalClosePanel = d({ bubbles: !1, composed: !1 }), this.arcgisInternalOpenedResultPanelChange = d({ bubbles: !1, composed: !1 });
   }
   static {
-    this.properties = { consoleLogs: 0, loading: 5, openedResultPanel: 3, result: 0 };
+    this.properties = { consoleLogs: 0, loading: 5, openedResultPanel: 3, result: 0, hideHeader: 5 };
   }
   static {
-    this.styles = [V, B()];
+    this.styles = [L, k(), w];
   }
   load() {
     this.manager.onLifecycle(() => {
-      const a = N(this.el, ["class"], this.updateTheme.bind(this));
-      return this.updateTheme(), () => a();
+      const t = M(this.el, ["class"], this.updateTheme.bind(this));
+      return this.updateTheme(), () => t();
     });
   }
   loaded() {
-    this.openedResultPanel && (this.openedResultPanel === "output" && this.outputRef.value ? this.outputRef.value.setFocus() : this.openedResultPanel === "console" && this.consoleRef.value ? this.consoleRef.value.setFocus() : this.openedResultPanel === "log" && this.logRef.value && this.logRef.value.setFocus());
+    this.hideHeader || this.openedResultPanel && (this.openedResultPanel === "output" && this.outputRef.value ? this.outputRef.value.setFocus() : this.openedResultPanel === "console" && this.consoleRef.value ? this.consoleRef.value.setFocus() : this.openedResultPanel === "log" && this.logRef.value && this.logRef.value.setFocus());
   }
-  updateResultPanel(a) {
-    this.openedResultPanel = a, this.arcgisInternalOpenedResultPanelChange.emit();
+  updateResultPanel(t) {
+    this.openedResultPanel = t, this.arcgisInternalOpenedResultPanelChange.emit();
   }
-  _switchResultPanel(a) {
-    const s = a.currentTarget.dataset.panelName;
-    s && this.updateResultPanel(s);
+  _switchResultPanel(t) {
+    const l = t.currentTarget.dataset.panelName;
+    l && this.updateResultPanel(l);
   }
   _emitClose() {
     this.arcgisInternalClosePanel.emit();
   }
   updateTheme() {
-    E(this.el) === "dark" ? this.elementInternals.states.add(b) : this.elementInternals.states.delete(b);
+    I(this.el) === "dark" ? this.elementInternals.states.add(m) : this.elementInternals.states.delete(m);
   }
   renderConsolePanel() {
-    return this.openedResultPanel !== "console" ? null : this.loading && !this.consoleLogs?.length ? t`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>` : t`<div class="console-logs-container ltr-container">${this.consoleLogs?.length ? this.consoleLogs.map((a) => t`<p>${a}</p>`) : t`<p>${this.messages.consolemessage}</p>`}</div>`;
+    return this.openedResultPanel !== "console" ? null : this.loading && !this.consoleLogs?.length ? e`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>` : e`<div class="console-logs-container ltr-container">${this.consoleLogs?.length ? this.consoleLogs.map((t) => e`<p>${t}</p>`) : e`<p>${this.messages.consolemessage}</p>`}</div>`;
   }
   renderLogPanel() {
     if (this.openedResultPanel !== "log")
       return null;
     if (this.loading)
-      return t`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>`;
-    const a = this.result?.type === "error" ? "color-error" : "color-success";
-    return t`<calcite-list .label=${this.messages.results ?? "Results"}>${this.result ? t`<calcite-list-item .label=${o(this.messages.lastexecutionformat, {
+      return e`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>`;
+    const t = this.result?.type === "error" ? "color-error" : "color-success";
+    return e`<calcite-list .label=${this.messages.results ?? "Results"}>${this.result ? e`<calcite-list-item .label=${i(this.messages.lastexecutionformat, {
       timeStamp: new Intl.DateTimeFormat(this.messages._t9nLocale, {
         dateStyle: "medium",
         timeStyle: "medium"
       }).format(this.result.timeStamp)
-    })}><calcite-icon slot=content-start icon=information scale=s class=${h(a)}></calcite-icon></calcite-list-item><calcite-list-item .label=${o(this.messages.compilationtimeformat, {
+    })}><calcite-icon slot=content-start icon=information scale=s class=${r(t)}></calcite-icon></calcite-list-item><calcite-list-item .label=${i(this.messages.compilationtimeformat, {
       time: new Intl.NumberFormat(this.messages._t9nLocale, {
         style: "unit",
         unit: "millisecond",
         maximumFractionDigits: 2
       }).format(this.result.compilationTime ?? 0)
-    })}><calcite-icon slot=content-start icon=information scale=s class=${h(a)}></calcite-icon></calcite-list-item><calcite-list-item .label=${o(this.messages.executiontimeformat, {
+    })}><calcite-icon slot=content-start icon=information scale=s class=${r(t)}></calcite-icon></calcite-list-item><calcite-list-item .label=${i(this.messages.executiontimeformat, {
       time: new Intl.NumberFormat(this.messages._t9nLocale, {
         style: "unit",
         unit: "millisecond",
         maximumFractionDigits: 2
       }).format(this.result.executionTime ?? 0)
-    })}><calcite-icon slot=content-start icon=information scale=s class=${h(a)}></calcite-icon></calcite-list-item>` : t`<calcite-list-item .label=${this.messages.runscriptmessage}><calcite-icon slot=content-start icon=information scale=s class="color-info"></calcite-icon></calcite-list-item>`}</calcite-list>`;
+    })}><calcite-icon slot=content-start icon=information scale=s class=${r(t)}></calcite-icon></calcite-list-item>` : e`<calcite-list-item .label=${this.messages.runscriptmessage}><calcite-icon slot=content-start icon=information scale=s class="color-info"></calcite-icon></calcite-list-item>`}</calcite-list>`;
   }
   renderOutputPanel() {
     if (this.openedResultPanel !== "output")
       return null;
     if (this.loading)
-      return t`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>`;
+      return e`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>`;
     switch (this.result?.type) {
       case "error":
-        return t`<div class="result-value-simple flex-adjustable">${o(this.messages.executionerrorformat ?? "", { message: this.result.value })}</div>`;
+        return e`<div class="result-value-simple flex-adjustable">${i(this.messages.executionerrorformat ?? "", { message: this.result.value })}</div>`;
       case "null":
       case "unknown":
-        return t`<div class="result-value-simple ltr-container">${p({ arcadeResult: this.result })}</div>`;
+        return e`<div class="result-value-simple ltr-container">${p({ type: this.result.type, value: a(this.result.type) })}</div>`;
       case "text":
       case "number":
       case "date":
       case "dateOnly":
       case "time":
-      case "boolean":
-        return t`<div class="result-value-simple ltr-container"><span class="value-type">${this.result.type}:&nbsp;</span>${p({ arcadeResult: this.result })}</div>`;
+      case "boolean": {
+        const { type: t, value: l } = C(this.result);
+        return e`<div class="result-value-simple ltr-container"><span class="value-type">${a(this.result.type)}:&nbsp;</span>${p({ type: t, value: l })}</div>`;
+      }
       case "array": {
-        const s = (this.result.value ?? []).slice(0, m);
-        return t`<div class="result-value-simple ltr-container"><calcite-tree .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}><calcite-tree-item expanded @click=${d.onClick}><div class="tree-item-label">${C({ arcadeResult: this.result, t9nStrings: this.messages })}</div>${I({ items: s, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
+        const l = (this.result.value ?? []).slice(0, v);
+        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${R({ arcadeResult: this.result, t9nStrings: this.messages })}</div>${P({ items: l, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
       }
       case "geometry":
-        return t`<div class="result-value-simple ltr-container"><calcite-tree .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}><calcite-tree-item expanded @click=${d.onClick}><div class="tree-item-label">${this.result.type}</div>${R({ value: this.result.value, subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
+        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${a(this.result.type)}</div>${T({ value: this.result.value, subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
       case "attachment":
-        return t`<div class="result-value-simple ltr-container"><calcite-tree .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}><calcite-tree-item expanded @click=${d.onClick}><div class="tree-item-label">${this.result.type}</div>${P({ value: this.result.value, subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
+        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${a(this.result.type)}</div>${S({ obj: this.result.value.castAsJson(), subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
       case "feature":
       case "dictionary":
       case "portal":
-      case "pixel":
-        return t`<div class="result-value-simple ltr-container"><calcite-tree .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}><calcite-tree-item expanded @click=${d.onClick}><div class="tree-item-label">${this.result.type}</div>${M({ value: this.result.value, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
+        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${a(this.result.type)}</div>${y({ value: this.result.value, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
       case "featureSet":
-        return t`<div class="result-value-table ltr-container">${J({ arcadeResult: this.result, t9nStrings: this.messages })}${G({ arcadeResult: this.result })}</div>`;
+        return e`<div class="result-value-table ltr-container">${$({ arcadeResult: this.result, t9nStrings: this.messages })}${x({ arcadeResult: this.result })}</div>`;
       case "knowledgeGraph":
-        return t`<div class="result-value-simple ltr-container"><span class="value-type">${this.result.type}:&nbsp;</span><span class="string-value">${this.result.value.url}</span></div>`;
+        return e`<div class="result-value-simple ltr-container"><span class="value-type">${a(this.result.type)}:&nbsp;</span><span class="string-value">${this.result.value.url}</span></div>`;
       default:
-        return t`<div class="result-value-simple flex-adjustable ltr-container">${this.messages.runscriptmessage}</div>`;
+        return e`<div class="result-value-simple flex-adjustable ltr-container">${this.messages.runscriptmessage}</div>`;
     }
   }
   render() {
-    return t`<header class="flex-row"><calcite-action-bar class="flex-adjustable" layout=horizontal scale=s expanded expand-disabled><calcite-action-group scale=s><calcite-action .active=${this.openedResultPanel === "output"} .text=${this.messages.output ?? ""} text-enabled scale=s icon=list-show-all icon-flip-rtl @click=${this._switchResultPanel} data-panel-name=output ${$(this.outputRef)}></calcite-action><calcite-action .active=${this.openedResultPanel === "console"} .text=${this.messages.console ?? ""} text-enabled scale=s icon=console icon-flip-rtl @click=${this._switchResultPanel} data-panel-name=console ${$(this.consoleRef)}></calcite-action><calcite-action .active=${this.openedResultPanel === "log"} .text=${this.messages.log ?? ""} text-enabled scale=s icon=list icon-flip-rtl @click=${this._switchResultPanel} data-panel-name=log ${$(this.logRef)}></calcite-action></calcite-action-group></calcite-action-bar><calcite-action scale=s icon=x .text=${this.messages.close ?? ""} @click=${this._emitClose}></calcite-action></header><article class="flex-adjustable">${this.loading ? t`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "Loading"}></calcite-loader>` : t`<div class="flex-column y-scrollable-container">${this.renderOutputPanel()}${this.renderConsolePanel()}${this.renderLogPanel()}</div>`}</article>`;
+    return e`${this.hideHeader ? null : e`<header class="flex-row"><calcite-action-bar class="flex-adjustable" layout=horizontal scale=s expanded expand-disabled><calcite-action-group scale=s><calcite-action .active=${this.openedResultPanel === "output"} .text=${this.messages.output ?? ""} text-enabled scale=s icon=list-show-all icon-flip-rtl @click=${this._switchResultPanel} data-panel-name=output ${n(this.outputRef)}></calcite-action><calcite-action .active=${this.openedResultPanel === "console"} .text=${this.messages.console ?? ""} text-enabled scale=s icon=console icon-flip-rtl @click=${this._switchResultPanel} data-panel-name=console ${n(this.consoleRef)}></calcite-action><calcite-action .active=${this.openedResultPanel === "log"} .text=${this.messages.log ?? ""} text-enabled scale=s icon=list icon-flip-rtl @click=${this._switchResultPanel} data-panel-name=log ${n(this.logRef)}></calcite-action></calcite-action-group></calcite-action-bar><calcite-action scale=s icon=x .text=${this.messages.close ?? ""} @click=${this._emitClose}></calcite-action></header>`}<article class="flex-adjustable">${this.loading ? e`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "Loading"}></calcite-loader>` : e`<div class="flex-column y-scrollable-container">${this.renderOutputPanel()}${this.renderConsolePanel()}${this.renderLogPanel()}</div>`}</article>`;
   }
 }
-D("arcgis-arcade-results", q);
+h("arcgis-arcade-results", F);
 export {
-  q as ArcgisArcadeResults
+  F as ArcgisArcadeResults
 };