@arcgis/coding-components 4.33.0-next.108 → 4.33.0-next.109

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

@@ -1,84 +1,120 @@
-import { c as x } from "../../chunks/runtime.js";
-import { html as e } from "lit-html";
-import { LitElement as w, createEvent as $, safeClassMap as v, nothing as p } from "@arcgis/lumina";
-import { setValuesInString as d, quoteString as h } from "@arcgis/components-utils";
-import { M as u, v as g, B as f, f as T, a as S, b as k } from "../../chunks/arcade-executor.js";
-import { s as P } from "../../chunks/fields.js";
-import { u as C } from "../../chunks/useT9n.js";
-import { css as M } from "@lit/reactive-element/css-tag.js";
+import { c as P } from "../../chunks/runtime.js";
+import { html as t } from "lit-html";
+import { nothing as y, LitElement as C, createEvent as f, safeClassMap as v } from "@arcgis/lumina";
+import { setValuesInString as o, quoteString as g } from "@arcgis/components-utils";
+import { B as b, v as h, M as m, f as M, a as R, b as A } from "../../chunks/arcade-executor.js";
+import { u as I } from "../../chunks/useT9n.js";
+import { css as L } from "@lit/reactive-element/css-tag.js";
+import { s as O } from "../../chunks/fields.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.108 */
-const A = M`: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}.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{table{display:block;max-width:fit-content;overflow-x:auto;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)}}`, a = {
+v4.33.0-next.109 */
+const D = L`: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}.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{table{display:block;max-width:fit-content;overflow-x:auto;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: (l) => l.currentTarget.selectedItems.forEach((t) => t.selected = !1)
-}, c = {
-  onClick: (l) => {
-    const t = l.currentTarget;
-    t.expanded = !t.expanded;
-  }
-};
-function n(l) {
-  return e`<span class="dictionary-property">${l}</span><span>:&nbsp;</span>`;
-}
-function b(l, t = !1) {
-  return e`<calcite-tree slot=${(t ? "children" : void 0) ?? p} .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}><calcite-tree-item class="string-value">${JSON.stringify(l.castAsJson(), void 0, 2)}</calcite-tree-item></calcite-tree>`;
-}
-function y(l, t = !1) {
-  return e`<calcite-tree slot=${(t ? "children" : void 0) ?? p} .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}><calcite-tree-item><div class="tree-item-label">${n("type")}${l.type}</div></calcite-tree-item><calcite-tree-item><div class="tree-item-label">${n("value")}<span class="string-value">${JSON.stringify(l, void 0, 2)}</span></div></calcite-tree-item></calcite-tree>`;
-}
-function m(l) {
-  switch (l.type) {
+  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>`, x = ({ value: e, subtree: a = !1 }) => t`<calcite-tree slot=${(a ? "children" : void 0) ?? y} .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>`, w = ({ value: e, subtree: a = !1 }) => t`<calcite-tree slot=${(a ? "children" : void 0) ?? y} .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 e`<span class="constant-value">${l.type}</span>`;
+      return t`<span class="constant-value">${e.type}</span>`;
     case "text":
-      return e`<span class="string-value">${h(l.value)}</span>`;
+      return t`<span class="string-value">${g(e.value)}</span>`;
     case "number":
-      return e`<span class="number-value">${l.value.toString()}</span>`;
+      return t`<span class="number-value">${e.value.toString()}</span>`;
     case "boolean":
-      return e`<span class="constant-value">${l.value.toString()}</span>`;
+      return t`<span class="constant-value">${e.value.toString()}</span>`;
     case "date":
-      return e`<span class="date-value">${k(l)}</span>`;
+      return t`<span class="date-value">${A(e)}</span>`;
     case "dateOnly":
-      return e`<span class="string-value">${h(S(l))}</span>`;
+      return t`<span class="string-value">${g(R(e))}</span>`;
     case "time":
-      return e`<span class="string-value">${h(T(l))}</span>`;
+      return t`<span class="string-value">${g(M(e))}</span>`;
     default:
       return null;
   }
-}
-function I(l) {
-  const t = P(l.value.fields);
-  return e`<table><thead><tr>${t.map((i) => e`<th>${i.name}</th>`)}</tr></thead><tbody>${l.features.map((i) => e`<tr>${t.map((s) => {
+}, S = ({ arcadeResult: e, t9nStrings: a }) => {
+  const s = e.value ?? [], c = Math.max(s.length - m, 0);
+  return t`<span>${`${e.type}(${s.length ?? 0})`}</span>${c > 0 ? t`<span>&nbsp;${o(a.showingfirstitemsformat, {
+    count: m.toString()
+  })}</span>` : null}`;
+}, k = ({ value: e, subtree: a, t9nStrings: s }) => {
+  const c = e.geometry?.();
+  return t`<calcite-tree slot=${"children"} .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}>${e.keys().map((i) => {
+    const n = h(e.field(i));
+    return e.arcadeDeclaredClass === "esri.arcade.Feature" && n.type === "geometry" ? null : $({ arcadeResult: n, name: i, t9nStrings: s });
+  })}${c ? $({ arcadeResult: { type: "geometry", value: c }, name: "geometry", t9nStrings: s }) : null}</calcite-tree>`;
+}, F = ({ arcadeResult: e, t9nStrings: a }) => t`<div class="value-type"><span>${e.type}:</span>${e.features.length >= b ? t`<span>&nbsp;${o(a.showingfirstitemsformat, {
+  count: b.toString()
+})}</span>` : null}</div>`, T = ({ 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((c, i) => {
+  const n = h(c);
+  return $({ arcadeResult: n, name: i, expanded: !1, t9nStrings: s });
+})}</calcite-tree>`, $ = ({ arcadeResult: e, name: a, expanded: s, t9nStrings: c }) => {
+  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 })}${S({ arcadeResult: e, t9nStrings: c })}</div>${T({ items: n, subtree: !0, t9nStrings: c })}</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>${w({ 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>${x({ 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>${k({ value: e.value, subtree: !0, t9nStrings: c })}</calcite-tree-item>`;
+    default:
+      return null;
+  }
+}, _ = ({ arcadeResult: e }) => {
+  const a = O(e.value.fields);
+  return t`<table><thead><tr>${a.map((s) => t`<th>${s.name}</th>`)}</tr></thead><tbody>${e.features.map((s) => t`<tr>${a.map((c) => {
     try {
-      const r = g(i.field(s.name));
-      return e`<td>${m(r)}</td>`;
+      const i = h(s.field(c.name));
+      return t`<td>${p({ arcadeResult: i })}</td>`;
     } catch {
-      return e`<td></td>`;
+      return t`<td></td>`;
     }
   })}</tr>`)}</tbody></table>`;
-}
-class L extends w {
+}, d = {
+  onClick: (e) => {
+    const a = e.currentTarget;
+    a.expanded = !a.expanded;
+  }
+};
+class z extends C {
   constructor() {
-    super(...arguments), this.messages = C(), this.openedResultPanel = "output", this.arcgisClose = $({ bubbles: !1 }), this.arcgisOpenedResultPanelChange = $({ bubbles: !1 });
+    super(...arguments), this.messages = I(), this.openedResultPanel = "output", this.arcgisClose = f({ bubbles: !1 }), this.arcgisOpenedResultPanelChange = f({ bubbles: !1 });
   }
   static {
     this.properties = { consoleLogs: 0, loading: 5, openedResultPanel: 3, result: 0 };
   }
   static {
-    this.styles = A;
+    this.styles = D;
   }
   //#endregion
   //#region Private Methods
-  updateResultPanel(t) {
-    this.openedResultPanel = t, this.arcgisOpenedResultPanelChange.emit(t);
+  updateResultPanel(a) {
+    this.openedResultPanel = a, this.arcgisOpenedResultPanelChange.emit(a);
   }
-  _switchResultPanel(t) {
-    const i = t.currentTarget.dataset.panelName;
-    i && this.updateResultPanel(i);
+  _switchResultPanel(a) {
+    const s = a.currentTarget.dataset.panelName;
+    s && this.updateResultPanel(s);
   }
   _emitClose() {
     this.arcgisClose.emit();
@@ -86,123 +122,76 @@ class L extends w {
   //#endregion
   //#region Rendering
   renderConsolePanel() {
-    return this.openedResultPanel !== "console" ? null : this.loading && !this.consoleLogs?.length ? e`<calcite-loader scale=s type=indeterminate label></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>`;
+    return this.openedResultPanel !== "console" ? null : this.loading && !this.consoleLogs?.length ? t`<calcite-loader scale=s type=indeterminate label></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>`;
   }
   renderLogPanel() {
     if (this.openedResultPanel !== "log")
       return null;
     if (this.loading)
-      return e`<calcite-loader scale=s type=indeterminate label></calcite-loader>`;
-    const t = this.result?.type === "error" ? "color-error" : "color-success";
-    return e`<calcite-list label=results>${this.result ? e`<calcite-list-item .label=${d(this.messages.lastexecutionformat, {
+      return t`<calcite-loader scale=s type=indeterminate label></calcite-loader>`;
+    const a = this.result?.type === "error" ? "color-error" : "color-success";
+    return t`<calcite-list label=results>${this.result ? t`<calcite-list-item .label=${o(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=${v(t)}></calcite-icon></calcite-list-item><calcite-list-item .label=${d(this.messages.compilationtimeformat, {
+    })}><calcite-icon slot=content-start icon=information scale=s class=${v(a)}></calcite-icon></calcite-list-item><calcite-list-item .label=${o(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=${v(t)}></calcite-icon></calcite-list-item><calcite-list-item .label=${d(this.messages.executiontimeformat, {
+    })}><calcite-icon slot=content-start icon=information scale=s class=${v(a)}></calcite-icon></calcite-list-item><calcite-list-item .label=${o(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=${v(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>`;
+    })}><calcite-icon slot=content-start icon=information scale=s class=${v(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>`;
   }
   renderOutputPanel() {
     if (this.openedResultPanel !== "output")
       return null;
     if (this.loading)
-      return e`<calcite-loader scale=s type=indeterminate label></calcite-loader>`;
+      return t`<calcite-loader scale=s type=indeterminate label></calcite-loader>`;
     switch (this.result?.type) {
       case "error":
-        return e`<div class="result-value-simple flex-adjustable">${d(this.messages.executionerrorformat, { message: this.result.value })}</div>`;
+        return t`<div class="result-value-simple flex-adjustable">${o(this.messages.executionerrorformat, { message: this.result.value })}</div>`;
       case "null":
       case "unknown":
-        return e`<div class="result-value-simple ltr-container">${m(this.result)}</div>`;
+        return t`<div class="result-value-simple ltr-container">${p({ arcadeResult: this.result })}</div>`;
       case "text":
       case "number":
       case "date":
       case "dateOnly":
       case "time":
       case "boolean":
-        return e`<div class="result-value-simple ltr-container"><span class="value-type">${this.result.type}:&nbsp;</span>${m(this.result)}</div>`;
+        return t`<div class="result-value-simple ltr-container"><span class="value-type">${this.result.type}:&nbsp;</span>${p({ arcadeResult: this.result })}</div>`;
       case "array": {
-        const i = (this.result.value ?? []).slice(0, u);
-        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${this.renderArrayHeader(this.result)}</div>${this.renderArrayTree(i, !0)}</calcite-tree-item></calcite-tree></div>`;
+        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">${S({ arcadeResult: this.result, t9nStrings: this.messages })}</div>${T({ items: s, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
       }
       case "geometry":
-        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${this.result.type}</div>${y(this.result.value, !0)}</calcite-tree-item></calcite-tree></div>`;
+        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>${w({ value: this.result.value, subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
       case "attachment":
-        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${this.result.type}</div>${b(this.result.value, !0)}</calcite-tree-item></calcite-tree></div>`;
+        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>${x({ value: this.result.value, subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
       case "feature":
       case "dictionary":
       case "portal":
-        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${this.result.type}</div>${this.renderDictionaryTree(this.result.value, !0)}</calcite-tree-item></calcite-tree></div>`;
+        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>${k({ value: this.result.value, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
       case "featureSet":
-        return e`<div class="result-value-table ltr-container">${this.renderFeatureSetLabel(this.result)}${I(this.result)}</div>`;
+        return t`<div class="result-value-table ltr-container">${F({ arcadeResult: this.result, t9nStrings: this.messages })}${_({ arcadeResult: this.result })}</div>`;
       case "knowledgeGraph":
-        return e`<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 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>`;
       default:
-        return e`<div class="result-value-simple flex-adjustable ltr-container">${this.messages.runscriptmessage}</div>`;
+        return t`<div class="result-value-simple flex-adjustable ltr-container">${this.messages.runscriptmessage}</div>`;
     }
   }
-  renderArrayHeader(t) {
-    const i = t.value ?? [], s = Math.max(i.length - u, 0);
-    return e`<span>${`${t.type}(${i.length ?? 0})`}</span>${s > 0 ? e`<span>&nbsp;${d(this.messages.showingfirstitemsformat, { count: u.toString() })}</span>` : null}`;
-  }
-  renderArrayTree(t, i = !1) {
-    return e`<calcite-tree slot=${(i ? "children" : void 0) ?? p} .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}>${t.map((s, r) => {
-      const o = g(s);
-      return this.renderTreeItem(o, r, !i);
-    })}</calcite-tree>`;
-  }
-  renderDictionaryTree(t, i = !1) {
-    const s = t.geometry?.();
-    return e`<calcite-tree slot=${(i ? "children" : void 0) ?? p} .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} @calciteTreeSelect=${a.oncalciteTreeSelect}>${t.keys().map((r) => {
-      const o = g(t.field(r));
-      return t.arcadeDeclaredClass === "esri.arcade.Feature" && o.type === "geometry" ? null : this.renderTreeItem(o, r);
-    })}${s ? this.renderTreeItem({ type: "geometry", value: s }, "geometry") : null}</calcite-tree>`;
-  }
-  renderTreeItem(t, i, s = !1) {
-    switch (t.type) {
-      case "null":
-      case "unknown":
-      case "text":
-      case "number":
-      case "date":
-      case "dateOnly":
-      case "time":
-      case "boolean":
-        return e`<calcite-tree-item><div class="tree-item-label">${n(i)}${m(t)}</div></calcite-tree-item>`;
-      case "array": {
-        const o = (t.value ?? []).slice(0, u);
-        return e`<calcite-tree-item .expanded=${s} @click=${c.onClick}><div class="tree-item-label">${n(i)}${this.renderArrayHeader(t)}</div>${this.renderArrayTree(o, !0)}</calcite-tree-item>`;
-      }
-      case "geometry":
-        return e`<calcite-tree-item .expanded=${s} @click=${c.onClick}><div class="tree-item-label">${n(i)}<span>${t.type}</span></div>${y(t.value, !0)}</calcite-tree-item>`;
-      case "attachment":
-        return e`<calcite-tree-item .expanded=${s} @click=${c.onClick}><div class="tree-item-label">${n(i)}<span>${t.type}</span></div>${b(t.value, !0)}</calcite-tree-item>`;
-      case "feature":
-      case "dictionary":
-      case "portal":
-        return e`<calcite-tree-item .expanded=${s} @click=${c.onClick}><div class="tree-item-label">${n(i)}<span>${t.type}</span></div>${this.renderDictionaryTree(t.value, !0)}</calcite-tree-item>`;
-      default:
-        return null;
-    }
-  }
-  renderFeatureSetLabel(t) {
-    return e`<div class="value-type"><span>${t.type}:</span>${t.features.length >= f ? e`<span>&nbsp;${d(this.messages.showingfirstitemsformat, { count: f.toString() })}</span>` : null}</div>`;
-  }
   render() {
-    return 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></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></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></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></calcite-loader>` : e`<div class="flex-column y-scrollable-container">${this.renderOutputPanel()}${this.renderConsolePanel()}${this.renderLogPanel()}</div>`}</article>`;
+    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></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></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></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></calcite-loader>` : t`<div class="flex-column y-scrollable-container">${this.renderOutputPanel()}${this.renderConsolePanel()}${this.renderLogPanel()}</div>`}</article>`;
   }
 }
-x("arcgis-arcade-results", L);
+P("arcgis-arcade-results", z);
 export {
-  L as ArcgisArcadeResults
+  z as ArcgisArcadeResults
 };

package/dist/components/arcgis-arcade-results/functional.d.ts

@@ -0,0 +1,73 @@
+/// <reference types="@arcgis/core/interfaces.d.ts" />
+import { h, JsxNode } from '@arcgis/lumina';
+import { IArcadeResultArray, IArcadeResultFeatureSet, ArcadeResult, IArcadeRuntimeDictionary } from '../../utils';
+declare const strings: (value: {
+    close: string;
+    console: string;
+    output: string;
+    log: string;
+    consolemessage: string;
+    lastexecutionformat: string;
+    compilationtimeformat: string;
+    executiontimeformat: string;
+    runscriptmessage: string;
+    showingfirstitemsformat: string;
+    executionerrorformat: string;
+}) => {
+    close: string;
+    console: string;
+    output: string;
+    log: string;
+    consolemessage: string;
+    lastexecutionformat: string;
+    compilationtimeformat: string;
+    executiontimeformat: string;
+    runscriptmessage: string;
+    showingfirstitemsformat: string;
+    executionerrorformat: string;
+};
+export declare const treeProps: h.JSX.IntrinsicElements["calcite-tree"];
+export declare const DictionaryProperty: ({ name }: {
+    name: number | string;
+}) => JsxNode;
+export declare const DictionaryAsJsonTree: ({ value, subtree, }: {
+    value: IArcadeRuntimeDictionary;
+    subtree?: boolean;
+}) => JsxNode;
+export declare const GeometryTree: ({ value, subtree }: {
+    value: __esri.Geometry;
+    subtree?: boolean;
+}) => JsxNode;
+export declare const SimpleValue: ({ arcadeResult }: {
+    arcadeResult: ArcadeResult;
+}) => JsxNode;
+export declare const ArrayHeader: ({ arcadeResult, t9nStrings, }: {
+    arcadeResult: IArcadeResultArray;
+    t9nStrings: Partial<ReturnType<typeof strings>>;
+}) => JsxNode;
+export declare const DictionaryTree: ({ value, subtree, t9nStrings, }: {
+    value: IArcadeRuntimeDictionary;
+    t9nStrings: Partial<ReturnType<typeof strings>>;
+    subtree?: boolean;
+}) => JsxNode;
+export declare const FeatureSetLabel: ({ arcadeResult, t9nStrings, }: {
+    arcadeResult: IArcadeResultFeatureSet;
+    t9nStrings: Partial<ReturnType<typeof strings>>;
+}) => JsxNode;
+export declare const ArrayTree: ({ items, subtree, t9nStrings, }: {
+    items: unknown[];
+    subtree?: boolean;
+    t9nStrings: Partial<ReturnType<typeof strings>>;
+}) => JsxNode;
+export declare const FeatureSetTable: ({ arcadeResult }: {
+    arcadeResult: IArcadeResultFeatureSet;
+}) => JsxNode;
+export declare const exportsForTests: {
+    TreeItem: ({ arcadeResult, name, expanded, t9nStrings, }: {
+        arcadeResult: ArcadeResult;
+        name: number | string;
+        t9nStrings: Partial<ReturnType<typeof strings>>;
+        expanded?: boolean;
+    }) => JsxNode;
+};
+export {};

package/dist/components/arcgis-arcade-suggestions/customElement.d.ts

@@ -7,6 +7,8 @@ import { IEditorCodeSuggestion, IEditorCodeSuggestionGroup } from '../../utils/e
 export declare class ArcgisArcadeSuggestions extends LitElement {
     /** The collection of suggestions */
     suggestions: IEditorCodeSuggestion[] | IEditorCodeSuggestionGroup[] | undefined;
+    /** When true, the component will be hidden. */
+    closed?: boolean | undefined;
     /** Raised when close action has been activated */
     readonly arcgisClose: TargetedEvent<this, void>;
     /** Raised when an item has been selected */

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

@@ -9,7 +9,7 @@ import { u as b } from "../../chunks/useT9n.js";
 import { css as _ } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/4.33/esri/copyright.txt for details.
-v4.33.0-next.108 */
+v4.33.0-next.109 */
 function v(o) {
   return !Array.isArray(o) || !o.length ? !1 : Array.isArray(o[0].suggestions);
 }
@@ -18,10 +18,10 @@ class $ extends u {
   constructor() {
     super(...arguments), this._beforeBack = async () => {
       this._selectedSuggestion = void 0;
-    }, this.messages = b(), this._colorizeStyle = "", this._filterValue = "", this.arcgisClose = r({ bubbles: !1 }), this.arcgisItemSelected = r({ bubbles: !1 });
+    }, this.messages = b(), this._colorizeStyle = "", this._filterValue = "", this.closed = !1, this.arcgisClose = r({ bubbles: !1 }), this.arcgisItemSelected = r({ bubbles: !1 });
   }
   static {
-    this.properties = { _colorizeStyle: 16, _filterValue: 16, _selectedSuggestion: 16, suggestions: 0 };
+    this.properties = { _colorizeStyle: 16, _filterValue: 16, _selectedSuggestion: 16, suggestions: 0, closed: 5 };
   }
   static {
     this.styles = S;
@@ -80,7 +80,7 @@ class $ extends u {
     return e ? s`<calcite-flow-item .heading=${this.messages.suggestions} closable @calciteFlowItemClose=${this._emitClose} .beforeBack=${this._beforeBack} selected><calcite-button width=half slot=footer appearance=outline kind=brand icon-start=code scale=s @click=${(t) => this._emitItemSelected(t, e)} data-item=${e ?? c} ${l(g)}>${this.messages.insert}</calcite-button><calcite-block open .heading=${e.label} .description=${e.description}><div .innerHTML=${f(e.documentation) ?? ""}></div><pre><code ${l(this._colorizeCode)}></code></pre></calcite-block></calcite-flow-item>` : null;
   }
   render() {
-    return s`<style>${this._colorizeStyle}</style><calcite-flow ${l(this.flowFocusHandler)}><calcite-flow-item .heading=${this.messages.suggestions} closable @calciteFlowItemClose=${this._emitClose} .selected=${!this._selectedSuggestion}><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m></calcite-input><calcite-list label=suggestions>${this.renderSuggestionGroups()}</calcite-list></calcite-flow-item>${this.renderSuggestionFlowItem()}</calcite-flow>`;
+    return this.closed ? null : s`<style>${this._colorizeStyle}</style><calcite-flow ${l(this.flowFocusHandler)}><calcite-flow-item .heading=${this.messages.suggestions} closable @calciteFlowItemClose=${this._emitClose} .selected=${!this._selectedSuggestion}><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m></calcite-input><calcite-list label=suggestions>${this.renderSuggestionGroups()}</calcite-list></calcite-flow-item>${this.renderSuggestionFlowItem()}</calcite-flow>`;
   }
 }
 n("arcgis-arcade-suggestions", $);