@arcgis/coding-components 5.2.0-next.1 → 5.2.0-next.11

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

@@ -1,23 +1,23 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
-import { c as h } from "../../chunks/runtime.js";
+import { c as p } from "../../chunks/runtime.js";
 import { css as g, html as e } from "lit";
-import { LitElement as f, createEvent as d, safeClassMap as r } from "@arcgis/lumina";
+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 p } from "../../chunks/debugger-value-styles.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}.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{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: (u) => {
-    const t = u.currentTarget;
+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 = d({ bubbles: !1, composed: !1 }), this.arcgisInternalOpenedResultPanelChange = d({ bubbles: !1, composed: !1 });
+    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 };
@@ -48,7 +48,7 @@ class F extends f {
     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 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 ? 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")
@@ -85,7 +85,7 @@ class F extends f {
         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 ltr-container">${p({ type: this.result.type, value: a(this.result.type) })}</div>`;
+        return e`<div class="result-value-simple">${h({ type: this.result.type, value: a(this.result.type) })}</div>`;
       case "text":
       case "number":
       case "date":
@@ -93,33 +93,33 @@ class F extends f {
       case "time":
       case "boolean": {
         const { type: t, value: l } = C(this.result);
-        return e`<div class="result-value-simple ltr-container"><span class="value-type">${a(this.result.type)}:&nbsp;</span>${p({ type: t, value: l })}</div>`;
+        return e`<div class="result-value-simple"><bdi class="value-type">${a(this.result.type)}:&nbsp;</bdi>${h({ type: t, value: l })}</div>`;
       }
       case "array": {
         const l = (this.result.value ?? []).slice(0, v);
-        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${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>`;
+        return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${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 ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${a(this.result.type)}</div>${T({ value: this.result.value, subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
+        return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${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 ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${a(this.result.type)}</div>${S({ obj: this.result.value.castAsJson(), subtree: !0 })}</calcite-tree-item></calcite-tree></div>`;
+        return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${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":
-        return e`<div class="result-value-simple ltr-container"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label">${a(this.result.type)}</div>${y({ value: this.result.value, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
+        return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${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 ltr-container">${$({ arcadeResult: this.result, t9nStrings: this.messages })}${x({ arcadeResult: this.result })}</div>`;
+        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 ltr-container"><span class="value-type">${a(this.result.type)}:&nbsp;</span><span class="string-value">${this.result.value.url}</span></div>`;
+        return e`<div class="result-value-simple"><bdi class="value-type">${a(this.result.type)}:&nbsp;</bdi><bdi class="string-value">${this.result.value.url}</bdi></div>`;
       default:
-        return e`<div class="result-value-simple flex-adjustable ltr-container">${this.messages.runscriptmessage}</div>`;
+        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 @click=${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 @click=${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 @click=${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 ?? ""} @click=${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>`;
   }
 }
-h("arcgis-arcade-results", F);
+p("arcgis-arcade-results", F);
 export {
   F as ArcgisArcadeResults
 };

package/dist/components/arcgis-code-editor-shell/customElement.js

@@ -1,88 +1,93 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as g } from "../../chunks/runtime.js";
-import { css as x, html as f } from "lit";
+import { css as f, html as x } from "lit";
 import { LitElement as v } from "@arcgis/lumina";
 import { slotChangeHasContent as y } from "@arcgis/toolkit/dom";
-import { createRef as c, ref as d } from "lit/directives/ref.js";
-const w = x`:host{--internal-border: var(--arcgis-coding-components-border, 1px solid var(--calcite-color-border-3));--internal-background-color: var(--arcgis-coding-components-background-color, var(--calcite-color-foreground-1));--internal-side-action-bar-max-w: var(--arcgis-coding-components-side-action-bar-max-w, 25%);--internal-code-editor-side-panel-w: var(--arcgis-coding-components-code-editor-side-panel-w, 600px);--internal-code-editor-side-panel-max-w: var(--arcgis-coding-components-code-editor-side-panel-max-w, 45%);--internal-code-editor-results-panel-max-h: var(--arcgis-coding-components-code-editor-results-panel-max-h, 50%);--internal-code-editor-results-panel-h: var(--arcgis-coding-components-code-editor-results-panel-h, 50%);--internal-code-editor-results-panel-bottom-drawer-controls-h: 0px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--internal-border);box-sizing:border-box;background-color:var(--internal-background-color);height:100%;.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}.bottom-drawer{display:flex;flex:0 0 auto;flex-direction:column;overflow:hidden;position:relative;box-sizing:border-box;min-height:0}.bottom-drawer-resize-handle{display:none;position:absolute;inset-inline:0;inset-block-start:calc((var(--calcite-size-fixed-xxl) - var(--calcite-size-fixed-sm-plus)) / 2 * -1);align-items:center;justify-content:center;block-size:var(--calcite-size-fixed-xxl);cursor:ns-resize;touch-action:none;user-select:none;z-index:var(--calcite-z-index-header);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);outline:none}.bottom-drawer-resize-handle-bar{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);transition:box-shadow .12s ease,color .12s ease,background-color .12s ease}.bottom-drawer-resize-handle-bar calcite-icon{color:inherit}}:host(:state(results-has-content)) .bottom-drawer{padding-block-start:var(--calcite-size-fixed-sm-plus);height:calc(var(--internal-code-editor-results-panel-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h));max-height:calc(var(--internal-code-editor-results-panel-max-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h))}:host(:state(results-has-content)) .bottom-drawer-resize-handle{display:flex}:host(:state(results-has-content)) .bottom-drawer-resize-handle:focus .bottom-drawer-resize-handle-bar{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host(:state(results-has-content)) .bottom-drawer-resize-handle:hover .bottom-drawer-resize-handle-bar,:host(:state(results-has-content)) .bottom-drawer-resize-handle .bottom-drawer-resize-handle-bar,:host(:state(is-resizing)) .bottom-drawer-resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}:host(:state(results-has-content)) slot[name=bottom-action-bar]::slotted(*){border-top:0}slot[name=top-action-bar]{flex:0 0 auto}slot[name=top-action-bar]::slotted(*){border-bottom:var(--internal-border)}slot[name=bottom-action-bar]{flex:0 0 auto}slot[name=bottom-action-bar]::slotted(*){border-top:var(--internal-border)}slot[name=side-panel]::slotted(*){max-width:var(--internal-code-editor-side-panel-max-w);width:var(--internal-code-editor-side-panel-w);border-inline-start:var(--internal-border);box-sizing:border-box;flex:1 0 auto}slot[name=side-panel]::slotted(.hidden){display:none}slot[name=editor]::slotted(*){flex:auto;min-height:0}slot[name=results-panel]{display:flex;flex:1 1 auto;overflow:hidden;min-height:0}slot[name=results-panel]::slotted(*){border-top:var(--internal-border);box-sizing:border-box;flex:1 1 auto;min-height:0}slot[name=side-action-bar]::slotted(*){max-width:var(--internal-side-action-bar-max-w);border-inline-start:var(--internal-border)}`, z = 10, P = 25, u = 100, i = "results-has-content", m = "is-resizing", H = "--arcgis-coding-components-code-editor-results-panel-max-h", s = "--internal-code-editor-results-panel-h", a = "--internal-code-editor-results-panel-max-h", n = "--internal-code-editor-results-panel-bottom-drawer-controls-h";
+import { createRef as l, ref as c } from "lit/directives/ref.js";
+const w = f`:host{--internal-border: var(--arcgis-coding-components-border, 1px solid var(--calcite-color-border-3));--internal-background-color: var(--arcgis-coding-components-background-color, var(--calcite-color-foreground-1));--internal-side-action-bar-max-w: var(--arcgis-coding-components-side-action-bar-max-w, 25%);--internal-code-editor-side-panel-w: var(--arcgis-coding-components-code-editor-side-panel-w, 600px);--internal-code-editor-side-panel-max-w: var(--arcgis-coding-components-code-editor-side-panel-max-w, 45%);--internal-code-editor-results-panel-max-h: var(--arcgis-coding-components-code-editor-results-panel-max-h, 50%);--internal-code-editor-results-panel-h: var(--arcgis-coding-components-code-editor-results-panel-h, 50%);--internal-code-editor-results-panel-bottom-drawer-controls-h: 0px;display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--internal-border);box-sizing:border-box;background-color:var(--internal-background-color);height:100%;.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}.bottom-drawer{display:flex;flex:0 0 auto;flex-direction:column;overflow:hidden;position:relative;box-sizing:border-box;min-height:0}.bottom-drawer-resize-handle{display:none;position:absolute;inset-inline:0;inset-block-start:0;align-items:center;justify-content:center;block-size:var(--calcite-size-fixed-sm-plus);cursor:ns-resize;touch-action:none;user-select:none;z-index:var(--calcite-z-index-header);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);outline:none}.bottom-drawer-resize-handle-bar{display:flex;align-items:center;justify-content:center;inline-size:100%;block-size:var(--calcite-size-fixed-sm-plus);color:var(--calcite-color-border-input);background-color:var(--calcite-color-background);border-block-start:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);border-block-end:var(--calcite-border-width-sm) solid var(--calcite-color-border-3);transition:box-shadow .12s ease,color .12s ease,background-color .12s ease}.bottom-drawer-resize-handle-bar calcite-icon{color:inherit}}:host(:state(results-has-content)) .bottom-drawer{padding-block-start:var(--calcite-size-fixed-sm-plus);height:calc(var(--internal-code-editor-results-panel-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h));max-height:calc(var(--internal-code-editor-results-panel-max-h) + var(--internal-code-editor-results-panel-bottom-drawer-controls-h))}:host(:state(results-has-content)) .bottom-drawer-resize-handle{display:flex}:host(:state(results-has-content)) .bottom-drawer-resize-handle:focus .bottom-drawer-resize-handle-bar{box-shadow:inset 0 0 0 2px var(--calcite-color-brand)}:host(:state(results-has-content)) .bottom-drawer-resize-handle:hover .bottom-drawer-resize-handle-bar,:host(:state(results-has-content)) .bottom-drawer-resize-handle .bottom-drawer-resize-handle-bar,:host(:state(is-resizing)) .bottom-drawer-resize-handle-bar{color:var(--calcite-shell-panel-resize-icon-color, var(--calcite-color-text-1));background-color:var(--calcite-shell-panel-resize-background-color, var(--calcite-color-foreground-3))}:host(:state(results-has-content)) slot[name=bottom-action-bar]::slotted(*){border-top:0}slot[name=top-action-bar]{flex:0 0 auto}slot[name=top-action-bar]::slotted(*){border-bottom:var(--internal-border)}slot[name=bottom-action-bar]{flex:0 0 auto}slot[name=bottom-action-bar]::slotted(*){border-top:var(--internal-border)}slot[name=side-panel]::slotted(*){max-width:var(--internal-code-editor-side-panel-max-w);width:var(--internal-code-editor-side-panel-w);border-inline-start:var(--internal-border);box-sizing:border-box;flex:1 0 auto}slot[name=side-panel]::slotted(.hidden){display:none}slot[name=editor]::slotted(*){flex:auto;min-height:0}slot[name=results-panel]{display:flex;flex:1 1 auto;overflow:hidden;min-height:0}slot[name=results-panel]::slotted(*){border-top:var(--internal-border);box-sizing:border-box;flex:1 1 auto;min-height:0}slot[name=side-action-bar]::slotted(*){max-width:var(--internal-side-action-bar-max-w);border-inline-start:var(--internal-border)}`, z = 10, P = 25, h = 100, u = "results-has-content", m = "is-resizing", H = "--arcgis-coding-components-code-editor-results-panel-max-h", s = "--internal-code-editor-results-panel-h", n = "--internal-code-editor-results-panel-max-h", i = "--internal-code-editor-results-panel-bottom-drawer-controls-h";
 class R extends v {
   static {
     this.styles = [w];
   }
   #e = void 0;
-  #i = !1;
-  #n = c();
-  #d = c();
-  #a = c();
-  #t;
-  #h(e) {
-    this.#e === e.pointerId && this.#r();
-  }
-  #g = (e) => {
-    this.#e === e.pointerId && this.#r();
+  #t = !1;
+  #n = !1;
+  #a = l();
+  #h = l();
+  #l = l();
+  #r;
+  #u(e) {
+    this.#e === e.pointerId && this.#o();
+  }
+  #f = (e) => {
+    this.#e === e.pointerId && this.#o();
   };
   load() {
-    this.manager.onLifecycle(() => (this.#t = new ResizeObserver(() => {
-      this.elementInternals.states.has(i) && this.#s();
-    }), this.updateComplete.then(() => this.#b()), () => {
-      this.#r(), this.#t?.disconnect(), this.#t = void 0;
+    this.manager.onLifecycle(() => (this.#r = new ResizeObserver(() => {
+      this.#t && this.#i();
+    }), this.updateComplete.then(() => this.#g()), () => {
+      this.#o(), this.#r?.disconnect(), this.#r = void 0;
     }));
   }
   #x() {
-    this.elementInternals.states.has(i) && this.#s(), this.#b();
-  }
-  #f(e) {
-    e.button !== 0 || !this.elementInternals.states.has(i) || (e.preventDefault(), e.currentTarget instanceof HTMLElement && (e.currentTarget.focus(), e.currentTarget.setPointerCapture(e.pointerId)), this.#e = e.pointerId, this.#i = !0, this.elementInternals.states.add(m), this.#u(e));
+    this.#t && this.#i(), this.#g();
   }
   #v(e) {
-    if (!this.elementInternals.states.has(i))
-      return;
-    this.#s();
-    const t = this.#P(e);
-    t != null && (e.preventDefault(), e.stopPropagation(), this.#i = !0, this.#c(t));
+    e.button !== 0 || !this.#t || (e.preventDefault(), e.currentTarget instanceof HTMLElement && (e.currentTarget.focus(), e.currentTarget.setPointerCapture(e.pointerId)), this.#e = e.pointerId, this.#n = !0, this.elementInternals.states.add(m), this.#m(e));
   }
   #y(e) {
+    if (!this.#t)
+      return;
+    this.#i();
+    const t = this.#H(e);
+    t != null && (e.preventDefault(), e.stopPropagation(), this.#n = !0, this.#d(t));
+  }
+  #w(e) {
     if (!e.target)
       return;
     const r = y(e);
-    r || (this.#r(), this.#i || this.#R()), r ? (this.elementInternals.states.add(i), this.#s()) : this.elementInternals.states.delete(i);
+    if (this.#t = r, r) {
+      this.elementInternals.states.add(u), this.#i();
+      return;
+    }
+    this.#o(), this.#n || this.#C(), this.elementInternals.states.delete(u);
   }
-  #r() {
+  #o() {
     const e = this.#e;
     if (!e)
       return;
     this.#e = void 0;
-    const t = this.#d.value;
+    const t = this.#h.value;
     t?.hasPointerCapture(e) && t.releasePointerCapture(e), this.elementInternals.states.delete(m);
   }
-  #u(e) {
+  #m(e) {
     if (this.#e !== e.pointerId)
       return;
-    const t = this.#o(), r = this.el.getBoundingClientRect().bottom - e.clientY - t;
-    this.#c(r, t);
+    const t = this.#s(), r = this.el.getBoundingClientRect().bottom - e.clientY - t;
+    this.#d(r, t);
   }
-  #w() {
+  #z() {
     const e = Number.parseFloat(this.el.style.getPropertyValue(s));
     if (Number.isFinite(e))
       return e;
-    const t = Number.parseFloat(getComputedStyle(this.#n.value ?? this.el).height);
-    return Number.isFinite(t) ? Math.max(0, t - this.#o()) : u;
+    const t = Number.parseFloat(getComputedStyle(this.#a.value ?? this.el).height);
+    return Number.isFinite(t) ? Math.max(0, t - this.#s()) : h;
   }
-  #m() {
+  #p() {
     return this.el.querySelector(':scope > [slot="bottom-action-bar"]');
   }
-  #o() {
-    const e = this.#m()?.getBoundingClientRect().height ?? 0, t = this.#a.value?.getBoundingClientRect().height ?? 0;
+  #s() {
+    const e = this.#p()?.getBoundingClientRect().height ?? 0, t = this.#l.value?.getBoundingClientRect().height ?? 0;
     return e + t;
   }
-  #p() {
+  #b() {
     return getComputedStyle(this.el).getPropertyValue(H).trim() || null;
   }
-  #l(e, t) {
+  #c(e, t) {
     t ? this.el.style.setProperty(e, t) : this.el.style.removeProperty(e);
   }
-  #z(e) {
-    const t = this.#p();
+  #P(e) {
+    const t = this.#b();
     if (!t)
       return null;
     const r = Number.parseFloat(t);
@@ -90,26 +95,26 @@ class R extends v {
       return r;
     if (t.endsWith("%") && Number.isFinite(r))
       return this.el.getBoundingClientRect().height * r / 100;
-    const o = this.#n.value;
+    const o = this.#a.value;
     if (!o)
       return null;
-    const l = this.el.style.getPropertyValue(n), p = this.el.style.getPropertyValue(s), b = this.el.style.getPropertyValue(a);
-    this.el.style.setProperty(n, `${e}px`), this.el.style.setProperty(s, `${this.el.getBoundingClientRect().height}px`), this.el.style.setProperty(a, t);
-    const h = Number.parseFloat(getComputedStyle(o).height);
-    return this.#l(n, l), this.#l(s, p), this.#l(a, b), Number.isFinite(h) ? Math.max(0, h - e) : null;
+    const a = this.el.style.getPropertyValue(i), p = this.el.style.getPropertyValue(s), b = this.el.style.getPropertyValue(n);
+    this.el.style.setProperty(i, `${e}px`), this.el.style.setProperty(s, `${this.el.getBoundingClientRect().height}px`), this.el.style.setProperty(n, t);
+    const d = Number.parseFloat(getComputedStyle(o).height);
+    return this.#c(i, a), this.#c(s, p), this.#c(n, b), Number.isFinite(d) ? Math.max(0, d - e) : null;
   }
-  #b() {
-    const e = this.#t;
+  #g() {
+    const e = this.#r;
     if (!e)
       return;
     e.disconnect(), e.observe(this.el);
-    const t = this.#a.value;
+    const t = this.#l.value;
     t && e.observe(t);
-    const r = this.#m();
+    const r = this.#p();
     r && e.observe(r);
   }
-  #P(e) {
-    const t = e.shiftKey ? P : z, r = this.#w();
+  #H(e) {
+    const t = e.shiftKey ? P : z, r = this.#z();
     switch (e.key) {
       case "ArrowUp":
         return r + t;
@@ -119,23 +124,23 @@ class R extends v {
         return;
     }
   }
-  #H(e, t) {
-    const r = Math.max(0, this.el.getBoundingClientRect().height - t), o = this.#z(t), l = o == null ? r : Math.min(r, o);
-    return Math.min(Math.max(e, u), l);
+  #R(e, t) {
+    const r = Math.max(0, this.el.getBoundingClientRect().height - t), o = this.#P(t), a = o == null ? r : Math.min(r, o);
+    return Math.min(Math.max(e, h), a);
   }
-  #c(e, t = this.#o()) {
-    const r = this.#H(e, t), o = this.#p();
-    this.el.style.setProperty(n, `${t}px`), this.el.style.setProperty(s, `${r}px`), this.el.style.setProperty(a, o ?? `calc(100% - ${t}px)`);
+  #d(e, t = this.#s()) {
+    const r = this.#R(e, t), o = this.#b();
+    this.el.style.setProperty(i, `${t}px`), this.el.style.setProperty(s, `${r}px`), this.el.style.setProperty(n, o ?? `calc(100% - ${t}px)`);
   }
-  #R() {
-    this.el.style.removeProperty(n), this.el.style.removeProperty(s), this.el.style.removeProperty(a);
+  #C() {
+    this.el.style.removeProperty(i), this.el.style.removeProperty(s), this.el.style.removeProperty(n);
   }
-  #s() {
-    const e = this.#o(), t = Number.parseFloat(this.el.style.getPropertyValue(s));
-    return Number.isFinite(t) ? this.#c(t, e) : this.el.style.setProperty(n, `${e}px`), e;
+  #i() {
+    const e = this.#s(), t = Number.parseFloat(this.el.style.getPropertyValue(s));
+    return Number.isFinite(t) ? this.#d(t, e) : this.el.style.setProperty(i, `${e}px`), e;
   }
   render() {
-    return f`<slot name=top-action-bar></slot><div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><slot name=editor></slot><div class="bottom-drawer" ${d(this.#n)}><div aria-label="Resize results panel" aria-orientation=horizontal class="bottom-drawer-resize-handle" role=separator tabindex=0 @pointercancel=${this.#h} @pointerdown=${this.#f} @pointermove=${this.#u} @pointerup=${this.#h} @lostpointercapture=${this.#g} @keydown=${this.#v} ${d(this.#d)}><div class="bottom-drawer-resize-handle-bar" ${d(this.#a)}><calcite-icon icon=drag-resize-vertical scale=s></calcite-icon></div></div><slot name=bottom-action-bar @slotchange=${this.#x}></slot><slot name=results-panel @slotchange=${this.#y}></slot></div></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`;
+    return x`<slot name=top-action-bar></slot><div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><slot name=editor></slot><div class="bottom-drawer" ${c(this.#a)}><div aria-label="Resize results panel" aria-orientation=horizontal class="bottom-drawer-resize-handle" role=separator tabindex=0 @pointercancel=${this.#u} @pointerdown=${this.#v} @pointermove=${this.#m} @pointerup=${this.#u} @lostpointercapture=${this.#f} @keydown=${this.#y} ${c(this.#h)}><div class="bottom-drawer-resize-handle-bar" ${c(this.#l)}><calcite-icon icon=drag-resize-vertical scale=s></calcite-icon></div></div><slot name=bottom-action-bar @slotchange=${this.#x}></slot><slot name=results-panel @slotchange=${this.#w}></slot></div></div><slot name=side-panel></slot><slot name=side-action-bar></slot></div>`;
   }
 }
 g("arcgis-code-editor-shell", R);

package/dist/components/arcgis-editor-variables/customElement.js

@@ -12,14 +12,14 @@ const w = h`:host{background-color:var(--calcite-color-foreground-1);.notice-con
 function $(a) {
   a.key === "Enter" && a.stopPropagation();
 }
-class C extends f {
+class I extends f {
   constructor() {
     super(...arguments), this._beforeBack = async () => {
       this.removeLastPanelRenderer(), this._filterValue = "";
-    }, this.messages = b(), this._filterValue = "", this._flowItemRenderers = [], this._rootPresentation = "profile", this._mutationCounter = 1, this.loading = !1, this.closed = !1, this.arcgisInternalClosePanel = l({ bubbles: !1, composed: !1 }), this.arcgisInternalItemSelected = l({ bubbles: !1 });
+    }, this.messages = b(), this._filterValue = "", this._flowItemRenderers = [], this._rootPresentation = "profile", this._mutationCounter = 1, this.loading = !1, this.closed = !1, this.hideDescriptions = !1, this.arcgisInternalClosePanel = l({ bubbles: !1, composed: !1 }), this.arcgisInternalItemSelected = l({ bubbles: !1 });
   }
   static {
-    this.properties = { _filterValue: 16, _flowItemRenderers: 16, _rootPresentation: 16, _mutationCounter: 16, loading: 5, modelId: 1, closed: 5, variable: 0, heading: 1, messageOverrides: 0 };
+    this.properties = { _filterValue: 16, _flowItemRenderers: 16, _rootPresentation: 16, _mutationCounter: 16, loading: 5, modelId: 1, closed: 5, variable: 0, heading: 1, hideDescriptions: 5, messageOverrides: 0 };
   }
   static {
     this.styles = w;
@@ -97,6 +97,12 @@ class C extends f {
   _getDescriptionForCollection(e) {
     return e ? n(e) ? e.variables[0]?.getLabel() ?? "" : v(e) ? e.datastoreInfo?.name ?? e.getDescription() ?? "" : e.breadcrumb : "";
   }
+  _getItemLabel(e) {
+    return e.getLabel();
+  }
+  _getItemDescription(e) {
+    return this.hideDescriptions ? "" : e.getDescription();
+  }
   renderCollectionBasedVariable(e, t = !1, s = !1) {
     if (!e)
       return null;
@@ -112,7 +118,7 @@ class C extends f {
     return s.length ? s.map((r) => this.renderEditorVariable(r)) : i`<div class="notice-container">${this.messages.noitems}</div>`;
   }
   renderEditorVariable(e) {
-    return e.type === "group" ? this._isRootPresentation("featureSetRoot") && e.isHeader ? i`<calcite-list-item-group .heading=${e.getLabel()}></calcite-list-item-group>` : this._isRootPresentation("featureSetRoot") && e._label?.code === "fields" ? this.renderEditorVariables(e) : i`<calcite-list-item-group .heading=${e.getLabel()}>${this.renderEditorVariables(e)}</calcite-list-item-group>` : i`<calcite-list-item .label=${e.getLabel()} .description=${e.getDescription()} @calciteListItemSelect=${(t) => this._emitItemSelected(t, e)} @keydown=${(t) => this._emitItemSelected(t, e)}>${e.isCollection ? i`<calcite-action slot=actions-end .text=${this.messages.expand ?? ""} scale=s icon=chevron-right icon-flip-rtl @click=${(t) => this._showCollectionPanel(t, e)} @keydown=${$}></calcite-action>` : null}${e.icon ? i`<calcite-icon .icon=${e.icon} scale=s slot=content-start></calcite-icon>` : null}</calcite-list-item>`;
+    return e.type === "group" ? this._isRootPresentation("featureSetRoot") && e.isHeader ? i`<calcite-list-item-group .heading=${this._getItemLabel(e)}></calcite-list-item-group>` : this._isRootPresentation("featureSetRoot") && e._label?.code === "fields" ? this.renderEditorVariables(e) : i`<calcite-list-item-group .heading=${this._getItemLabel(e)}>${this.renderEditorVariables(e)}</calcite-list-item-group>` : i`<calcite-list-item .label=${this._getItemLabel(e)} .description=${this._getItemDescription(e)} @calciteListItemSelect=${(t) => this._emitItemSelected(t, e)} @keydown=${(t) => this._emitItemSelected(t, e)}>${e.isCollection ? i`<calcite-action slot=actions-end .text=${this.messages.expand ?? ""} scale=s icon=chevron-right icon-flip-rtl @click=${(t) => this._showCollectionPanel(t, e)} @keydown=${$}></calcite-action>` : null}${e.icon ? i`<calcite-icon .icon=${e.icon} scale=s slot=content-start></calcite-icon>` : null}</calcite-list-item>`;
   }
   render() {
     return this.closed ? null : this.loading && !this.variable ? i`<calcite-flow><calcite-flow-item heading-level=2 .heading=${this.heading ?? this.messages.profilevariables} closable @calciteFlowItemClose=${this._emitClose}><calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? ""}></calcite-loader></calcite-flow-item></calcite-flow>` : !this.loading && (!this.variable || this.variable?.loaded && !this.variable?.variables.length) ? i`<calcite-flow><calcite-flow-item heading-level=2 .heading=${this.heading ?? this.messages.profilevariables} closable @calciteFlowItemClose=${this._emitClose}><div class="notice-container">${this.messages.profileempty}</div></calcite-flow-item></calcite-flow>` : i`<calcite-flow ${d(this.flowFocusHandler)}>${this.renderCollectionBasedVariable(this.variable, !0, this._flowItemRenderers.length === 0)}${this._flowItemRenderers.map((e, t, s) => (
@@ -121,7 +127,7 @@ class C extends f {
     ))}</calcite-flow>`;
   }
 }
-c("arcgis-editor-variables", C);
+c("arcgis-editor-variables", I);
 export {
-  C as ArcgisEditorVariables
+  I as ArcgisEditorVariables
 };

package/dist/components/arcgis-sql-expression-editor/customElement.d.ts

@@ -12,6 +12,17 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * @internal
  */
 export abstract class ArcgisSqlExpressionEditor extends LitElement {
+  /**
+   * If true, field aliases are hidden in the fields panel so only field names are displayed.
+   * Validation, completion, and inserted field snippets are unchanged.
+   *
+   * @default false
+   * @example
+   * ```html
+   * <arcgis-sql-expression-editor hideDescriptionsInFieldsPanel></arcgis-sql-expression-editor>
+   * ```
+   */
+  accessor hideDescriptionsInFieldsPanel: boolean;
   /**
    * If true, it will hide the side actions bar. The editor will be in a minimalistic UX.
    *

package/dist/components/arcgis-sql-expression-editor/customElement.js

@@ -4,17 +4,17 @@ import { css as c, html as t } from "lit";
 import { LitElement as l, createEvent as o, safeClassMap as r } from "@arcgis/lumina";
 import { generateGuid as d } from "@arcgis/toolkit/string";
 import { a as s } from "../../chunks/sql-expr-defaults.js";
-import { u as p } from "../../chunks/useT9n.js";
-import { createRef as h, ref as g } from "lit/directives/ref.js";
+import { u as h } from "../../chunks/useT9n.js";
+import { createRef as p, ref as g } from "lit/directives/ref.js";
 import { getSqlExprDiagnosticService as _ } from "../../chunks/sql-expr-mode.js";
 import { rethrowError as a } from "@arcgis/toolkit/log";
 const f = c`:host{height:100%}calcite-tooltip:not([calcite-hydrated])>*{display:none}`;
 class m extends l {
   constructor() {
-    super(...arguments), this._codeEditorElt = h(), this._disposables = [], this.messages = p(), this._modelId = d(), this._preparing = !1, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.arcgisDiagnosticsChange = o({ bubbles: !1 }), this.arcgisScriptChange = o({ bubbles: !1 });
+    super(...arguments), this._codeEditorElt = p(), this._disposables = [], this.messages = h(), this._modelId = d(), this._preparing = !1, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.hideDescriptionsInFieldsPanel = !1, this.arcgisDiagnosticsChange = o({ bubbles: !1 }), this.arcgisScriptChange = o({ bubbles: !1 });
   }
   static {
-    this.properties = { _activeAction: 16, _apiLibrary: 16, _editorProfile: 16, _preparing: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5, messageOverrides: 0 };
+    this.properties = { _activeAction: 16, _apiLibrary: 16, _editorProfile: 16, _preparing: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5, messageOverrides: 0, hideDescriptionsInFieldsPanel: 5 };
   }
   static {
     this.styles = [f];
@@ -82,7 +82,7 @@ class m extends l {
   }
   render() {
     const i = this._getFeatureSetVariable();
-    return t`<arcgis-code-editor-shell><arcgis-code-editor slot=editor language=arcgis-sql-expression .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} ${g(this._codeEditorElt)}></arcgis-code-editor>${!this.hideSideBar && i && t`<arcgis-editor-variables slot=side-panel .variable=${i} .closed=${this._activeAction !== "fields"} class=${r(this._activeAction === "fields" ? "" : "hidden")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${() => this._setActiveAction(void 0)} data-panel-name=none .messageOverrides=${{ profileempty: this.messages.profileempty }}></arcgis-editor-variables>` || ""}${!this.hideSideBar && t`<arcgis-language-api-panel slot=side-panel class=${r(this._activeAction === "functions" ? "" : "hidden")} .closed=${this._activeAction !== "functions"} @arcgisInternalItemSelected=${this._insertAsSnippet} @arcgisInternalClosePanel=${() => this._setActiveAction(void 0)} .loading=${this._preparing} .apiLibrary=${this._apiLibrary} data-panel-name=none hide-documentation-actions .languageId=${s.languageId}></arcgis-language-api-panel>` || ""}${!this.hideSideBar && t`<calcite-action-bar slot=side-action-bar .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}>${i && t`<calcite-action id=fields-action .text=${this.messages.fields ?? "Fields"} icon=profile-variables .active=${this._activeAction === "fields"} data-panel-name=fields @click=${this._handleActionClick}></calcite-action>` || ""}${i && !this.sideActionBarExpanded && t`<calcite-tooltip reference-element=fields-action><span>${this.messages.fields ?? "Fields"}</span></calcite-tooltip>` || ""}<calcite-action id=functions-action .text=${this.messages.functions ?? "Functions"} icon=function .active=${this._activeAction === "functions"} data-panel-name=functions @click=${this._handleActionClick}></calcite-action>${!this.sideActionBarExpanded && t`<calcite-tooltip reference-element=functions-action><span>${this.messages.functions ?? "Functions"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</arcgis-code-editor-shell>`;
+    return t`<arcgis-code-editor-shell><arcgis-code-editor slot=editor language=arcgis-sql-expression .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} ${g(this._codeEditorElt)}></arcgis-code-editor>${!this.hideSideBar && i && t`<arcgis-editor-variables slot=side-panel .variable=${i} .hideDescriptions=${this.hideDescriptionsInFieldsPanel} .closed=${this._activeAction !== "fields"} class=${r(this._activeAction === "fields" ? "" : "hidden")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${() => this._setActiveAction(void 0)} data-panel-name=none .messageOverrides=${{ profileempty: this.messages.profileempty }}></arcgis-editor-variables>` || ""}${!this.hideSideBar && t`<arcgis-language-api-panel slot=side-panel class=${r(this._activeAction === "functions" ? "" : "hidden")} .closed=${this._activeAction !== "functions"} @arcgisInternalItemSelected=${this._insertAsSnippet} @arcgisInternalClosePanel=${() => this._setActiveAction(void 0)} .loading=${this._preparing} .apiLibrary=${this._apiLibrary} data-panel-name=none hide-documentation-actions .languageId=${s.languageId}></arcgis-language-api-panel>` || ""}${!this.hideSideBar && t`<calcite-action-bar slot=side-action-bar .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}>${i && t`<calcite-action id=fields-action .text=${this.messages.fields ?? "Fields"} icon=profile-variables .active=${this._activeAction === "fields"} data-panel-name=fields @click=${this._handleActionClick}></calcite-action>` || ""}${i && !this.sideActionBarExpanded && t`<calcite-tooltip reference-element=fields-action><span>${this.messages.fields ?? "Fields"}</span></calcite-tooltip>` || ""}<calcite-action id=functions-action .text=${this.messages.functions ?? "Functions"} icon=function .active=${this._activeAction === "functions"} data-panel-name=functions @click=${this._handleActionClick}></calcite-action>${!this.sideActionBarExpanded && t`<calcite-tooltip reference-element=functions-action><span>${this.messages.functions ?? "Functions"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</arcgis-code-editor-shell>`;
   }
 }
 n("arcgis-sql-expression-editor", m);

package/dist/components/arcgis-sql-layer-editor/customElement.js

@@ -1,10 +1,10 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as p } from "../../chunks/runtime.js";
-import { css as h, html as r } from "lit";
+import { css as h, html as o } from "lit";
 import { LitElement as g, createEvent as l, safeClassMap as m } from "@arcgis/lumina";
 import { generateGuid as u } from "@arcgis/toolkit/string";
 import { u as f } from "../../chunks/useT9n.js";
-import { createRef as _, ref as b } from "lit/directives/ref.js";
+import { createRef as b, ref as _ } from "lit/directives/ref.js";
 import { k as d } from "../../chunks/utils.js";
 import { e as E } from "../../chunks/utilities.js";
 import "@arcgis/core/portal/PortalItem.js";
@@ -14,7 +14,7 @@ import "@arcgis/core/layers/FeatureLayer.js";
 import "@arcgis/core/applications/Components/arcadeEditorUtils.js";
 import "@arcgis/toolkit/predicate";
 import "vscode-languageserver-types";
-import { rethrowError as o } from "@arcgis/toolkit/log";
+import { rethrowError as r } from "@arcgis/toolkit/log";
 import "@arcgis/core/core/Error.js";
 import { d as n } from "../../chunks/language-defaults-base.js";
 import "@arcgis/core/portal/Portal.js";
@@ -23,7 +23,7 @@ import { getSqlLayerDiagnosticService as x } from "../../chunks/sql-layer-mode.j
 const I = h`:host{height:100%}calcite-tooltip:not([calcite-hydrated])>*{display:none}`;
 class L extends g {
   constructor() {
-    super(...arguments), this._codeEditorElt = _(), this._disposables = [], this._modelId = u(), this.messages = f(), this._preparing = !1, this._resolvedLanguage = n, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.openedSidePanel = "none", this.arcgisDiagnosticsChange = l({ bubbles: !1 }), this.arcgisScriptChange = l({ bubbles: !1 });
+    super(...arguments), this._codeEditorElt = b(), this._disposables = [], this._modelId = u(), this.messages = f(), this._preparing = !1, this._resolvedLanguage = n, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.openedSidePanel = "none", this.arcgisDiagnosticsChange = l({ bubbles: !1 }), this.arcgisScriptChange = l({ bubbles: !1 });
   }
   static {
     this.properties = { _editorProfile: 16, _preparing: 16, _resolvedLanguage: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5, messageOverrides: 0, openedSidePanel: 3, editorOptions: 0, editorInstance: 32 };
@@ -38,10 +38,10 @@ class L extends g {
     await this._codeEditorElt.value?.setFocus();
   }
   async load() {
-    await this._updateDataModelDeps().catch(o(this));
+    await this._updateDataModelDeps().catch(r(this));
   }
   willUpdate(e) {
-    e.has("profile") && this._updateDataModelDeps().catch(o(this));
+    e.has("profile") && this._updateDataModelDeps().catch(r(this));
   }
   async loaded() {
     const e = x();
@@ -71,7 +71,7 @@ class L extends g {
     this.sideActionBarExpanded = !this.sideActionBarExpanded;
   }
   _toggleSidePanel(e) {
-    this.openedSidePanel = this.openedSidePanel === e ? "none" : e, this.openedSidePanel === "none" && this._codeEditorElt.value?.setFocus().catch(o(this));
+    this.openedSidePanel = this.openedSidePanel === e ? "none" : e;
   }
   _onCodeEditorValueChange(e) {
     e.stopPropagation(), this.script = e.detail, this.arcgisScriptChange.emit(e.detail);
@@ -80,7 +80,7 @@ class L extends g {
     e.stopPropagation();
     const t = this._getSelectedTableVariable(e.detail);
     if (!t) {
-      this._codeEditorElt.value?.insertText(e.detail).catch(o(this));
+      this._codeEditorElt.value?.insertText(e.detail).catch(r(this));
       return;
     }
     await t.loadSource();
@@ -99,9 +99,9 @@ class L extends g {
   render() {
     const e = this._getTablesVariable(), i = String(this.messages.placeholderexample ?? "Example: {sqlQueryExample}").replace("{sqlQueryExample}", "select field1, field2 from db.dataset"), s = `${this.messages.placeholder ?? "Start filtering data using SQL query syntax"} 
  ${i}`;
-    return r`<arcgis-code-editor-shell><arcgis-code-editor slot=editor .language=${this._resolvedLanguage} .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} .editorOptions=${{ placeholder: s, ...this.editorOptions }} ${b(this._codeEditorElt)}></arcgis-code-editor>${!this.hideSideBar && r`<arcgis-editor-variables slot=side-panel .variable=${e} .heading=${this.messages.tables ?? "Tables"} .messageOverrides=${{ profileempty: this.messages.profileempty }} .closed=${this.openedSidePanel !== "variables"} class=${m(this.openedSidePanel === "variables" ? "" : "hidden")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._onItemSelected} @arcgisInternalClosePanel=${() => {
+    return o`<arcgis-code-editor-shell><arcgis-code-editor slot=editor .language=${this._resolvedLanguage} .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} .editorOptions=${{ placeholder: s, ...this.editorOptions }} ${_(this._codeEditorElt)}></arcgis-code-editor>${!this.hideSideBar && o`<arcgis-editor-variables slot=side-panel .variable=${e} .heading=${this.messages.tables ?? "Tables"} .messageOverrides=${{ profileempty: this.messages.profileempty }} .closed=${this.openedSidePanel !== "variables"} class=${m(this.openedSidePanel === "variables" ? "" : "hidden")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._onItemSelected} @arcgisInternalClosePanel=${() => {
       this.openedSidePanel = "none";
-    }} data-panel-name=none></arcgis-editor-variables><calcite-action-bar slot=side-action-bar .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><calcite-action id=tables-action .text=${this.messages.tables ?? "Tables"} icon=table .active=${this.openedSidePanel === "variables"} data-panel-name=variables @click=${() => this._toggleSidePanel("variables")}></calcite-action>${!this.sideActionBarExpanded && r`<calcite-tooltip reference-element=tables-action><span>${this.messages.tables ?? "Tables"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</arcgis-code-editor-shell>`;
+    }} data-panel-name=none></arcgis-editor-variables><calcite-action-bar slot=side-action-bar .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><calcite-action id=tables-action .text=${this.messages.tables ?? "Tables"} icon=table .active=${this.openedSidePanel === "variables"} data-panel-name=variables @click=${() => this._toggleSidePanel("variables")}></calcite-action>${!this.sideActionBarExpanded && o`<calcite-tooltip reference-element=tables-action><span>${this.messages.tables ?? "Tables"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</arcgis-code-editor-shell>`;
   }
 }
 p("arcgis-sql-layer-editor", L);