UNPKG

@arcgis/coding-components

Version:

Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.

4 lines • 13.9 kB
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified. See https://js.arcgis.com/4.33/esri/copyright.txt for details. v4.33.14 */ import a from"./ELAMABVF.js";import{a as R}from"./KBSNSGW6.js";import"./FXJMBYDM.js";import{c as T}from"./WODQNPAA.js";import{A as b,C as k,a as S,b as t,l as h,y as w,z as m}from"./MOODF6RJ.js";import{n as u,p as r}from"./SWSGV34B.js";import"./HAP7XW5O.js";export default $arcgis.t(([{b:o,c:f,d:p,e:P,f:C,g:M}])=>{var j=S`: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:e=>e.currentTarget.selectedItems.forEach(a=>a.selected=!1)},v={onClick:e=>{let a=e.currentTarget;a.expanded=!a.expanded}},n=({name:e})=>t`<span class="dictionary-property">${e}</span><span>:&nbsp;</span>`,L=({value:e,subtree:a=!1})=>t`<calcite-tree slot=${(a?"children":void 0)??b} .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>`,O=({value:e,subtree:a=!1})=>t`<calcite-tree slot=${(a?"children":void 0)??b} .lines=${l.lines} .selectionMode=${l.selectionMode} .scale=${l.scale} @calciteTreeSelect=${l.oncalciteTreeSelect}><calcite-tree-item><div class="tree-item-label">${n({name:"type"})}${e.type}</div></calcite-tree-item><calcite-tree-item><div class="tree-item-label">${n({name:"value"})}<span class="string-value">${JSON.stringify(e,void 0,2)}</span></div></calcite-tree-item></calcite-tree>`,$=({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">${u(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">${P(e)}</span>`;case"dateOnly":return t`<span class="string-value">${u(C(e))}</span>`;case"time":return t`<span class="string-value">${u(M(e))}</span>`;default:return null}},_=({arcadeResult:e,t9nStrings:a})=>{let s=e.value??[],c=Math.max(s.length-o,0);return t`<span>${`${e.type}(${s.length??0})`}</span>${c>0?t`<span>&nbsp;${r(a.showingfirstitemsformat,{count:o.toString()})}</span>`:null}`},F=({value:e,subtree:a,t9nStrings:s})=>{let 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=>{let d=p(e.field(i));return e.arcadeDeclaredClass==="esri.arcade.Feature"&&d.type==="geometry"?null:x({arcadeResult:d,name:i,t9nStrings:s})})}${c?x({arcadeResult:{type:"geometry",value:c},name:"geometry",t9nStrings:s}):null}</calcite-tree>`},z=({arcadeResult:e,t9nStrings:a})=>t`<div class="value-type"><span>${e.type}:</span>${e.features.length>=f?t`<span>&nbsp;${r(a.showingfirstitemsformat,{count:f.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((c,i)=>{let d=p(c);return x({arcadeResult:d,name:i,expanded:!1,t9nStrings:s})})}</calcite-tree>`,x=({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">${n({name:a})}${$({arcadeResult:e})}</div></calcite-tree-item>`;case"array":{let i=(e.value??[]).slice(0,o);return t`<calcite-tree-item .expanded=${s} @click=${v.onClick}><div class="tree-item-label">${n({name:a})}${_({arcadeResult:e,t9nStrings:c})}</div>${I({items:i,subtree:!0,t9nStrings:c})}</calcite-tree-item>`}case"geometry":return t`<calcite-tree-item .expanded=${s} @click=${v.onClick}><div class="tree-item-label">${n({name:a})}<span>${e.type}</span></div>${O({value:e.value,subtree:!0})}</calcite-tree-item>`;case"attachment":return t`<calcite-tree-item .expanded=${s} @click=${v.onClick}><div class="tree-item-label">${n({name:a})}<span>${e.type}</span></div>${L({value:e.value,subtree:!0})}</calcite-tree-item>`;case"feature":case"dictionary":case"portal":return t`<calcite-tree-item .expanded=${s} @click=${v.onClick}><div class="tree-item-label">${n({name:a})}<span>${e.type}</span></div>${F({value:e.value,subtree:!0,t9nStrings:c})}</calcite-tree-item>`;default:return null}},D=({arcadeResult:e})=>{let a=T(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{let i=p(s.field(c.name));return t`<td>${$({arcadeResult:i})}</td>`}catch{return t`<td></td>`}})}</tr>`)}</tbody></table>`},g={onClick:e=>{let a=e.currentTarget;a.expanded=!a.expanded}},y=class extends w{constructor(){super(...arguments),this.messages=R(),this.openedResultPanel="output",this.arcgisClose=h({bubbles:!1}),this.arcgisOpenedResultPanelChange=h({bubbles:!1})}static{this.properties={consoleLogs:0,loading:5,openedResultPanel:3,result:0}}static{this.styles=j}updateResultPanel(a){this.openedResultPanel=a,this.arcgisOpenedResultPanelChange.emit(a)}_switchResultPanel(a){let s=a.currentTarget.dataset.panelName;s&&this.updateResultPanel(s)}_emitClose(){this.arcgisClose.emit()}renderConsolePanel(){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 t`<calcite-loader scale=s type=indeterminate label></calcite-loader>`;let a=this.result?.type==="error"?"color-error":"color-success";return t`<calcite-list label=results>${this.result?t`<calcite-list-item .label=${r(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=${m(a)}></calcite-icon></calcite-list-item><calcite-list-item .label=${r(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=${m(a)}></calcite-icon></calcite-list-item><calcite-list-item .label=${r(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=${m(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 t`<calcite-loader scale=s type=indeterminate label></calcite-loader>`;switch(this.result?.type){case"error":return t`<div class="result-value-simple flex-adjustable">${r(this.messages.executionerrorformat,{message:this.result.value})}</div>`;case"null":case"unknown":return t`<div class="result-value-simple ltr-container">${$({arcadeResult:this.result})}</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>${$({arcadeResult:this.result})}</div>`;case"array":{let a=(this.result.value??[]).slice(0,o);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=${g.onClick}><div class="tree-item-label">${_({arcadeResult:this.result,t9nStrings:this.messages})}</div>${I({items:a,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=${g.onClick}><div class="tree-item-label">${this.result.type}</div>${O({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=${g.onClick}><div class="tree-item-label">${this.result.type}</div>${L({value:this.result.value,subtree:!0})}</calcite-tree-item></calcite-tree></div>`;case"feature":case"dictionary":case"portal":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=${g.onClick}><div class="tree-item-label">${this.result.type}</div>${F({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">${z({arcadeResult:this.result,t9nStrings:this.messages})}${D({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>`;default:return t`<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></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>`}};k("arcgis-arcade-results",y);return y},a)