@arcgis/coding-components
Version:
Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.
5 lines (4 loc) • 13.4 kB
JavaScript
/*! 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 */
import{b as u,c as f,d as v,e as k,f as S,g as T}from"./SKXEGPVU.js";import{a as M}from"./ETMACDR5.js";import{i as P}from"./BUDICIGX.js";import{e as y,f as e,r as $,s as x,t as p,u as d,w}from"./4FF2A3RJ.js";import{n as m,p as n}from"./5MCZ4DEU.js";import"./AN22SFXZ.js";var L=y`: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)},r={onClick:l=>{let t=l.currentTarget;t.expanded=!t.expanded}};function o(l){return e`<span class="dictionary-property">${l}</span><span>: </span>`}function C(l,t=!1){return e`<calcite-tree slot=${(t?"children":void 0)??d} .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 R(l,t=!1){return e`<calcite-tree slot=${(t?"children":void 0)??d} .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} =${a.oncalciteTreeSelect}><calcite-tree-item><div class="tree-item-label">${o("type")}${l.type}</div></calcite-tree-item><calcite-tree-item><div class="tree-item-label">${o("value")}<span class="string-value">${JSON.stringify(l,void 0,2)}</span></div></calcite-tree-item></calcite-tree>`}function h(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">${m(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">${m(S(l))}</span>`;case"time":return e`<span class="string-value">${m(T(l))}</span>`;default:return null}}function A(l){let 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(c=>{try{let s=v(i.field(c.name));return e`<td>${h(s)}</td>`}catch{return e`<td></td>`}})}</tr>`)}</tbody></table>`}var b=class extends x{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=L}updateResultPanel(t){this.openedResultPanel=t,this.arcgisOpenedResultPanelChange.emit(t)}_switchResultPanel(t){if(!t.target)return;let i=t.target?.dataset.panelName;i&&this.updateResultPanel(i)}_emitClose(){this.arcgisClose.emit()}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>`;let t=this.result?.type==="error"?"color-error":"color-success";return e`<calcite-list label=results>${this.result?e`<calcite-list-item .label=${n(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=${p(t)}></calcite-icon></calcite-list-item><calcite-list-item .label=${n(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=${p(t)}></calcite-icon></calcite-list-item><calcite-list-item .label=${n(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=${p(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">${n(this.messages.executionerrorformat,{message:this.result.value})}</div>`;case"null":case"unknown":return e`<div class="result-value-simple ltr-container">${h(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>${h(this.result)}</div>`;case"array":{let t=(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 =${r.onClick}><div class="tree-item-label">${this.renderArrayHeader(this.result)}</div>${this.renderArrayTree(t,!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 =${r.onClick}><div class="tree-item-label">${this.result.type}</div>${R(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 =${r.onClick}><div class="tree-item-label">${this.result.type}</div>${C(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 =${r.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)}${A(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){let i=t.value??[],c=Math.max(i.length-u,0);return e`<span>${`${t.type}(${i.length??0})`}</span>${c>0?e`<span> ${n(this.messages.showingfirstitemsformat,{count:u.toString()})}</span>`:null}`}renderArrayTree(t,i=!1){return e`<calcite-tree slot=${(i?"children":void 0)??d} .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} =${a.oncalciteTreeSelect}>${t.map((c,s)=>{let g=v(c);return this.renderTreeItem(g,s,!i)})}</calcite-tree>`}renderDictionaryTree(t,i=!1){let c=t.geometry?.();return e`<calcite-tree slot=${(i?"children":void 0)??d} .lines=${a.lines} .selectionMode=${a.selectionMode} .scale=${a.scale} =${a.oncalciteTreeSelect}>${t.keys().map(s=>{let g=v(t.field(s));return this.renderTreeItem(g,s)})}${c?this.renderTreeItem({type:"geometry",value:c},"geometry"):null}</calcite-tree>`}renderTreeItem(t,i,c=!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">${o(i)}${h(t)}</div></calcite-tree-item>`;case"array":{let s=(t.value??[]).slice(0,u);return e`<calcite-tree-item .expanded=${c} =${r.onClick}><div class="tree-item-label">${o(i)}${this.renderArrayHeader(t)}</div>${this.renderArrayTree(s,!0)}</calcite-tree-item>`}case"geometry":return e`<calcite-tree-item .expanded=${c} =${r.onClick}><div class="tree-item-label">${o(i)}<span>${t.type}</span></div>${R(t.value,!0)}</calcite-tree-item>`;case"attachment":return e`<calcite-tree-item .expanded=${c} =${r.onClick}><div class="tree-item-label">${o(i)}<span>${t.type}</span></div>${C(t.value,!0)}</calcite-tree-item>`;case"feature":case"dictionary":case"portal":return e`<calcite-tree-item .expanded=${c} =${r.onClick}><div class="tree-item-label">${o(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> ${n(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>`}};w("arcgis-arcade-results",b);export{b as ArcgisArcadeResults};