@arcgis/coding-components
Version:
Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.
217 lines (216 loc) • 15.2 kB
JavaScript
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 o, 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 M } from "../../chunks/useT9n.js";
import { css as C } from "@lit/reactive-element/css-tag.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
v4.32.14 */
const A = C`: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 = {
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>: </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} =${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} =${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) {
case "unknown":
case "null":
return e`<span class="constant-value">${l.type}</span>`;
case "text":
return e`<span class="string-value">${h(l.value)}</span>`;
case "number":
return e`<span class="number-value">${l.value.toString()}</span>`;
case "boolean":
return e`<span class="constant-value">${l.value.toString()}</span>`;
case "date":
return e`<span class="date-value">${k(l)}</span>`;
case "dateOnly":
return e`<span class="string-value">${h(S(l))}</span>`;
case "time":
return e`<span class="string-value">${h(T(l))}</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) => {
try {
const r = g(i.field(s.name));
return e`<td>${m(r)}</td>`;
} catch {
return e`<td></td>`;
}
})}</tr>`)}</tbody></table>`;
}
class L extends w {
constructor() {
super(...arguments), this.messages = M(), this.openedResultPanel = "output", this.arcgisClose = $({ bubbles: !1 }), this.arcgisOpenedResultPanelChange = $({ bubbles: !1 });
}
static {
this.properties = { consoleLogs: 0, loading: 5, openedResultPanel: 3, result: 0 };
}
static {
this.styles = A;
}
// #endregion
// #region Private Methods
updateResultPanel(t) {
this.openedResultPanel = t, this.arcgisOpenedResultPanelChange.emit(t);
}
_switchResultPanel(t) {
if (!t.target)
return;
const i = t.target?.dataset.panelName;
i && this.updateResultPanel(i);
}
_emitClose() {
this.arcgisClose.emit();
}
// #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>`;
}
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=${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=${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=${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>`;
}
renderOutputPanel() {
if (this.openedResultPanel !== "output")
return null;
if (this.loading)
return e`<calcite-loader scale=s type=indeterminate label></calcite-loader>`;
switch (this.result?.type) {
case "error":
return e`<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>`;
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}: </span>${m(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} =${a.oncalciteTreeSelect}><calcite-tree-item expanded =${c.onClick}><div class="tree-item-label">${this.renderArrayHeader(this.result)}</div>${this.renderArrayTree(i, !0)}</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} =${a.oncalciteTreeSelect}><calcite-tree-item expanded =${c.onClick}><div class="tree-item-label">${this.result.type}</div>${y(this.result.value, !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} =${a.oncalciteTreeSelect}><calcite-tree-item expanded =${c.onClick}><div class="tree-item-label">${this.result.type}</div>${b(this.result.value, !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} =${a.oncalciteTreeSelect}><calcite-tree-item expanded =${c.onClick}><div class="tree-item-label">${this.result.type}</div>${this.renderDictionaryTree(this.result.value, !0)}</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>`;
case "knowledgeGraph":
return e`<div class="result-value-simple ltr-container"><span class="value-type">${this.result.type}: </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>`;
}
}
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> ${o(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} =${a.oncalciteTreeSelect}>${t.map((s, r) => {
const d = g(s);
return this.renderTreeItem(d, 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} =${a.oncalciteTreeSelect}>${t.keys().map((r) => {
const d = g(t.field(r));
return this.renderTreeItem(d, 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 d = (t.value ?? []).slice(0, u);
return e`<calcite-tree-item .expanded=${s} =${c.onClick}><div class="tree-item-label">${n(i)}${this.renderArrayHeader(t)}</div>${this.renderArrayTree(d, !0)}</calcite-tree-item>`;
}
case "geometry":
return e`<calcite-tree-item .expanded=${s} =${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} =${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} =${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> ${o(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 =${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 =${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 =${this._switchResultPanel} data-panel-name=log></calcite-action></calcite-action-group></calcite-action-bar><calcite-action scale=s icon=x .text=${this.messages.close ?? ""} =${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>`;
}
}
x("arcgis-arcade-results", L);
export {
L as ArcgisArcadeResults
};