@arcgis/coding-components
Version:
ArcGIS Coding Components
127 lines (126 loc) • 11.6 kB
JavaScript
/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as p } from "../../chunks/runtime.js";
import { css as g, html as e } from "lit";
import { LitElement as f, createEvent as u, 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 h } 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}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: (d) => {
const t = d.currentTarget;
t.expanded = !t.expanded;
}
};
class F extends f {
constructor() {
super(...arguments), this.messages = b(), this.outputRef = o(), this.consoleRef = o(), this.logRef = o(), this.openedResultPanel = "output", this.hideHeader = !1, this.arcgisInternalClosePanel = u({ bubbles: !1, composed: !1 }), this.arcgisInternalOpenedResultPanelChange = u({ bubbles: !1, composed: !1 });
}
static {
this.properties = { consoleLogs: 0, loading: 5, openedResultPanel: 3, result: 0, hideHeader: 5 };
}
static {
this.styles = [L, k(), w];
}
load() {
this.manager.onLifecycle(() => {
const t = M(this.el, ["class"], this.updateTheme.bind(this));
return this.updateTheme(), () => t();
});
}
loaded() {
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(t) {
this.openedResultPanel = t, this.arcgisInternalOpenedResultPanelChange.emit();
}
_switchResultPanel(t) {
const l = t.currentTarget.dataset.panelName;
l && this.updateResultPanel(l);
}
_emitClose() {
this.arcgisInternalClosePanel.emit();
}
updateTheme() {
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 ? e`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>` : e`<div class="console-logs-container">${this.consoleLogs?.length ? this.consoleLogs.map((t) => e`<p dir=auto>${t}</p>`) : e`<p dir=auto>${this.messages.consolemessage}</p>`}</div>`;
}
renderLogPanel() {
if (this.openedResultPanel !== "log")
return null;
if (this.loading)
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=${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=${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=${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 e`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "loading"}></calcite-loader>`;
switch (this.result?.type) {
case "error":
return e`<div class="result-value-simple flex-adjustable">${i(this.messages.executionerrorformat ?? "", { message: this.result.value })}</div>`;
case "null":
case "unknown":
return e`<div class="result-value-simple">${h({ type: this.result.type, value: a(this.result.type) })}</div>`;
case "text":
case "number":
case "date":
case "dateOnly":
case "time":
case "boolean": {
const { type: t, value: l } = C(this.result);
return e`<div class="result-value-simple"><bdi class="value-type">${a(this.result.type)}: </bdi>${h({ type: t, value: l })}</div>`;
}
case "array": {
const l = (this.result.value ?? []).slice(0, v);
return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} =${s.oncalciteTreeSelect}><calcite-tree-item expanded =${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 e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} =${s.oncalciteTreeSelect}><calcite-tree-item expanded =${c.onClick}><div class="tree-item-label"><bdi>${a(this.result.type)}</bdi></div>${T({ value: this.result.value, subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
case "attachment":
return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} =${s.oncalciteTreeSelect}><calcite-tree-item expanded =${c.onClick}><div class="tree-item-label"><bdi>${a(this.result.type)}</bdi></div>${S({ obj: this.result.value.castAsJson(), subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
case "feature":
case "dictionary":
case "portal":
case "pixel":
return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} =${s.oncalciteTreeSelect}><calcite-tree-item expanded =${c.onClick}><div class="tree-item-label"><bdi>${a(this.result.type)}</bdi></div>${y({ value: this.result.value, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
case "featureSet":
return e`<div class="result-value-table">${$({ arcadeResult: this.result, t9nStrings: this.messages })}${x({ arcadeResult: this.result })}</div>`;
case "knowledgeGraph":
return e`<div class="result-value-simple"><bdi class="value-type">${a(this.result.type)}: </bdi><bdi class="string-value">${this.result.value.url}</bdi></div>`;
default:
return e`<div class="result-value-simple flex-adjustable">${this.messages.runscriptmessage}</div>`;
}
}
render() {
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 =${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 =${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 =${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 ?? ""} =${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>`;
}
}
p("arcgis-arcade-results", F);
export {
F as ArcgisArcadeResults
};