@arcgis/coding-components 5.1.0-next.54 → 5.1.0-next.56

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

@@ -1,27 +1,28 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as o } from "../../chunks/runtime.js";
-import { ref as c } from "lit/directives/ref.js";
-import { css as n, html as s } from "lit";
-import { LitElement as d, createEvent as a } from "@arcgis/lumina";
-import { setFocusOnElement as h } from "@arcgis/toolkit/dom";
-import { createFilterExpression as f } from "@arcgis/toolkit/string";
-import { u as m } from "../../chunks/useT9n.js";
-import { log as u } from "@arcgis/toolkit/log";
-const g = n`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-list-item-group{background-color:var(--calcite-color-foreground-2);word-break:break-word}}`;
-function p(l) {
-  l.key === "Enter" && l.stopPropagation();
+import { c } from "../../chunks/runtime.js";
+import { ref as d } from "lit/directives/ref.js";
+import { css as h, html as i } from "lit";
+import { LitElement as f, createEvent as l } from "@arcgis/lumina";
+import { focusElement as m, getClosestElement as u } from "@arcgis/toolkit/dom";
+import { createFilterExpression as g } from "@arcgis/toolkit/string";
+import { u as b } from "../../chunks/useT9n.js";
+import { log as p } from "@arcgis/toolkit/log";
+import { g as o, h as n, j as _, k as v } from "../../chunks/utils.js";
+const w = h`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-list-item-group{background-color:var(--calcite-color-foreground-2);word-break:break-word}}`;
+function $(a) {
+  a.key === "Enter" && a.stopPropagation();
 }
-class b extends d {
+class C extends f {
   constructor() {
     super(...arguments), this._beforeBack = async () => {
       this.removeLastPanelRenderer(), this._filterValue = "";
-    }, this.messages = m(), this._filterValue = "", this._flowItemRenderers = [], this._mode = "profile", this._mutationCounter = 1, this.loading = !1, this.closed = !1, this.arcgisInternalClosePanel = a({ bubbles: !1, composed: !1 }), this.arcgisInternalItemSelected = a({ bubbles: !1 });
+    }, 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 });
   }
   static {
-    this.properties = { _filterValue: 16, _flowItemRenderers: 16, _mode: 16, _mutationCounter: 16, loading: 5, modelId: 1, closed: 5, variable: 0 };
+    this.properties = { _filterValue: 16, _flowItemRenderers: 16, _rootPresentation: 16, _mutationCounter: 16, loading: 5, modelId: 1, closed: 5, variable: 0, heading: 1, messageOverrides: 0 };
   }
   static {
-    this.styles = g;
+    this.styles = w;
   }
   load() {
     this._variableChanged();
@@ -33,7 +34,11 @@ class b extends d {
     super.disconnectedCallback(), this._flowObserver?.disconnect();
   }
   _variableChanged() {
-    this._mode = this.variable?.type === "featureSet" ? "featureSet" : "profile";
+    if (!this.variable || o(this.variable)) {
+      this._rootPresentation = "profile";
+      return;
+    }
+    this._rootPresentation = this.variable.type === "featureSet" ? "featureSetRoot" : "collectionRoot";
   }
   addPanelRenderer(e) {
     this._flowItemRenderers = [...this._flowItemRenderers, e];
@@ -41,8 +46,8 @@ class b extends d {
   removeLastPanelRenderer() {
     this._flowItemRenderers = this._flowItemRenderers.slice(0, -1);
   }
-  _isMode(e) {
-    return this._mode === e;
+  _isRootPresentation(e) {
+    return this._rootPresentation === e;
   }
   flowFocusHandler(e) {
     if (!e) {
@@ -50,7 +55,7 @@ class b extends d {
       return;
     }
     this._flowObserver || (this._flowObserver = new MutationObserver(() => {
-      h(e.querySelector("calcite-flow-item:last-child"), "calcite-input");
+      m(u(e.querySelector("calcite-flow-item:last-child") ?? e, "calcite-input"));
     }), this._flowObserver.observe(e, { attributes: !0, attributeFilter: ["id"], childList: !0 }));
   }
   _updateFilterValue(e) {
@@ -65,65 +70,63 @@ class b extends d {
   _emitItemSelected(e, t) {
     if (t.nonInteractive)
       return;
-    const i = e;
-    (!i.key || i.key === "Enter") && (e.preventDefault(), this.arcgisInternalItemSelected.emit(t.snippet));
+    const s = e;
+    (!s.key || s.key === "Enter") && (e.preventDefault(), this.arcgisInternalItemSelected.emit(t.snippet));
   }
   _showCollectionPanel(e, t) {
     e.stopPropagation(), this.addPanelRenderer(
       // Add a function to render the variable
-      (i) => this.renderCollectionBasedVariable(t, !1, i)
+      (s) => this.renderCollectionBasedVariable(t, !1, s)
     );
   }
-  _getHeadingForCollection(e) {
+  _getHeadingForCollection(e, t = !1) {
     if (!e)
       return "";
-    switch (this._mode) {
-      case "profile":
-        return this.messages.profilevariables ?? "";
-      case "featureSet":
-        return this.messages.fields ?? "";
+    if (t) {
+      if (this.heading)
+        return this.heading;
+      if (o(this.variable))
+        return this.variable.definition?.label ?? this.messages.profilevariables ?? "Profile variables";
+      if (this._isRootPresentation("featureSetRoot"))
+        return this.messages.fields ?? "Fields";
+      if (this._isRootPresentation("collectionRoot"))
+        return this.messages.tables ?? "Tables";
     }
+    return n(e) || _(e) ? this.messages.fields ?? "Fields" : this.messages.profilevariables ?? "Profile variables";
   }
   _getDescriptionForCollection(e) {
-    if (!e)
-      return "";
-    switch (this._mode) {
-      case "profile":
-        return e.breadcrumb;
-      case "featureSet":
-        return e.variables[0]?.getLabel() ?? "";
-    }
+    return e ? n(e) ? e.variables[0]?.getLabel() ?? "" : v(e) ? e.datastoreInfo?.name ?? e.getDescription() ?? "" : e.breadcrumb : "";
   }
-  renderCollectionBasedVariable(e, t = !1, i = !1) {
+  renderCollectionBasedVariable(e, t = !1, s = !1) {
     if (!e)
       return null;
     let r = this.loading;
     return !r && !e.loaded && (e.loadSource().then(() => setTimeout(() => {
       this._mutationCounter += 1;
     })).catch(() => {
-      u("error", this, "Error loading collection"), r = !1;
-    }), r = !0), s`<calcite-flow-item heading-level=2 .heading=${this._getHeadingForCollection(e)} .description=${this._getDescriptionForCollection(e)} .beforeBack=${this._beforeBack} closable @calciteFlowItemClose=${this._emitClose} .selected=${i}><calcite-action slot=header-actions-end .text=${this.messages.backtotop ?? ""} scale=m .hidden=${t || this._isMode("featureSet")} icon=chevrons-left icon-flip-rtl @click=${this._backToTop}></calcite-action><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m .label=${this.messages.filterthevariablesbyname ?? ""} name=variable-filter></calcite-input>${r ? s`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? ""}></calcite-loader>` : s`<calcite-list .label=${this.messages.profilevariables ?? "Profile variables"}>${this.renderEditorVariables(e)}</calcite-list>`}</calcite-flow-item>`;
+      p("error", this, "Error loading collection"), r = !1;
+    }), r = !0), i`<calcite-flow-item heading-level=2 .heading=${this._getHeadingForCollection(e, t)} .description=${this._getDescriptionForCollection(e)} .beforeBack=${this._beforeBack} closable @calciteFlowItemClose=${this._emitClose} .selected=${s}><calcite-action slot=header-actions-end .text=${this.messages.backtotop ?? ""} scale=m .hidden=${t || this._isRootPresentation("featureSetRoot")} icon=chevrons-left icon-flip-rtl @click=${this._backToTop}></calcite-action><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m .label=${this.messages.filterthevariablesbyname ?? ""} name=variable-filter></calcite-input>${r ? i`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? ""}></calcite-loader>` : i`<calcite-list .label=${this.messages.profilevariables ?? "Profile variables"}>${this.renderEditorVariables(e)}</calcite-list>`}</calcite-flow-item>`;
   }
   renderEditorVariables(e) {
-    const t = f(this._filterValue), i = e.variables.filter((r) => r.passFilter(t));
-    return i.length ? i.map((r) => this.renderEditorVariable(r)) : s`<div class="notice-container">${this.messages.noitems}</div>`;
+    const t = g(this._filterValue), s = e.variables.filter((r) => r.passFilter(t));
+    return s.length ? s.map((r) => this.renderEditorVariable(r)) : i`<div class="notice-container">${this.messages.noitems}</div>`;
   }
   renderEditorVariable(e) {
     switch (e.type) {
       case "group":
-        return this._isMode("featureSet") && e.isHeader ? s`<calcite-list-item-group .heading=${e.getLabel()}></calcite-list-item-group>` : this._isMode("featureSet") && e._label?.code === "fields" ? this.renderEditorVariables(e) : s`<calcite-list-item-group .heading=${e.getLabel()}>${this.renderEditorVariables(e)}</calcite-list-item-group>`;
+        return 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>`;
       default:
-        return s`<calcite-list-item .label=${e.getLabel()} .description=${e.getDescription()} @calciteListItemSelect=${(t) => this._emitItemSelected(t, e)} @keydown=${(t) => this._emitItemSelected(t, e)}>${e.isCollection ? s`<calcite-action slot=actions-end .text=${this.messages.expand ?? ""} scale=s icon=chevron-right icon-flip-rtl @click=${(t) => this._showCollectionPanel(t, e)} @keydown=${p}></calcite-action>` : null}${e.icon ? s`<calcite-icon .icon=${e.icon} scale=s slot=content-start></calcite-icon>` : null}</calcite-list-item>`;
+        return 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>`;
     }
   }
   render() {
-    return this.closed ? null : !this.loading && this.variable?.loaded && !this.variable?.variables.length ? s`<calcite-flow><calcite-flow-item heading-level=2 .heading=${this.messages.profilevariables} closable @calciteFlowItemClose=${this._emitClose}><div class="notice-container">${this.messages.noprofilevariablesmessage}</div></calcite-flow-item></calcite-flow>` : s`<calcite-flow ${c(this.flowFocusHandler)}>${this.renderCollectionBasedVariable(this.variable, !0, this._flowItemRenderers.length === 0)}${this._flowItemRenderers.map((e, t, i) => (
+    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) => (
       // check if the current flow item is the last one, if so, renderer will set selected = true
-      e(t === i.length - 1)
+      e(t === s.length - 1)
     ))}</calcite-flow>`;
   }
 }
-o("arcgis-editor-variables", b);
+c("arcgis-editor-variables", C);
 export {
-  b as ArcgisEditorVariables
+  C as ArcgisEditorVariables
 };

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

@@ -22,13 +22,25 @@ export abstract class ArcgisSqlExpressionEditor extends LitElement {
    * ```
    */
   accessor hideSideBar: boolean;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * **Note**: Individual message keys may change between releases.
+   */
+  accessor messageOverrides: {
+      fields?: string | undefined;
+      functions?: string | undefined;
+      profileempty?: string | undefined;
+  };
   /** @internal */
   protected messages: Partial<{
       fields: string;
       functions: string;
+      profileempty: string;
   }> & T9nMeta<{
       fields: string;
       functions: string;
+      profileempty: string;
   }>;
   /**
    * The profile to use for the editor. The profile defines the variables and functions that are available to the editor.

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

@@ -3,18 +3,18 @@ import { c as n } from "../../chunks/runtime.js";
 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 } from "../../chunks/sql-expr-defaults.js";
-import { u as h } from "../../chunks/useT9n.js";
-import { createRef as p, ref as g } from "lit/directives/ref.js";
+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 { getSqlExprDiagnosticService as _ } from "../../chunks/sql-expr-mode.js";
-import { rethrowError as s } from "@arcgis/toolkit/log";
+import { rethrowError as a } from "@arcgis/toolkit/log";
 const f = c`:host{height:100%}calcite-tooltip:not([calcite-hydrated])>*{display:none}`;
-class u extends l {
+class m extends l {
   constructor() {
-    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.arcgisDiagnosticsChange = o({ bubbles: !1 }), this.arcgisScriptChange = o({ bubbles: !1 });
+    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 });
   }
   static {
-    this.properties = { _activeAction: 16, _apiLibrary: 16, _editorProfile: 16, _preparing: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5 };
+    this.properties = { _activeAction: 16, _apiLibrary: 16, _editorProfile: 16, _preparing: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5, messageOverrides: 0 };
   }
   static {
     this.styles = [f];
@@ -23,7 +23,7 @@ class u extends l {
     await this._codeEditorElt.value?.setFocus();
   }
   async load() {
-    await this._updateEditorProfile().catch(s(this));
+    await this._updateEditorProfile().catch(a(this));
   }
   willUpdate(i) {
     (i.has("messages") || i.has("profile")) && this._updateDataModelDeps();
@@ -42,7 +42,7 @@ class u extends l {
   async _updateEditorProfile() {
     this._preparing = !0;
     try {
-      await a.setProfileForModel(this._modelId, this.profile, { locale: this.messages._t9nLocale }), this._editorProfile = a.getEditorProfileForModel(this._modelId);
+      await s.setProfileForModel(this._modelId, this.profile, { locale: this.messages._t9nLocale }), this._editorProfile = s.getEditorProfileForModel(this._modelId);
     } catch {
       this._editorProfile = void 0;
     } finally {
@@ -61,31 +61,31 @@ class u extends l {
     this._setActiveAction(e.dataset.panelName);
   }
   _insertAsSnippet(i) {
-    this._codeEditorElt.value?.insertSnippet(i.detail).catch(s(this));
+    this._codeEditorElt.value?.insertSnippet(i.detail).catch(a(this));
   }
   _insertAsText(i) {
-    this._codeEditorElt.value?.insertText(i.detail.replaceAll('"', "'")).catch(s(this));
+    this._codeEditorElt.value?.insertText(i.detail.replaceAll('"', "'")).catch(a(this));
   }
   async _updateApiLibrary() {
-    this._apiLibrary = await a.getApiLibraryForModel(this._modelId);
+    this._apiLibrary = await s.getApiLibraryForModel(this._modelId);
   }
   _onCodeEditorValueChange(i) {
     i.stopPropagation(), this.script = i.detail, this.arcgisScriptChange.emit(i.detail);
   }
   _getFeatureSetVariable() {
     let i;
-    const e = a.getEditorProfileForModel(this._modelId);
-    return e?.variables?.length && e?.variables?.[0]?.type !== "featureSet" ? s(this)("Encountered unexpected editor profile") : i = e?.variables?.[0], i;
+    const e = s.getEditorProfileForModel(this._modelId);
+    return e?.variables?.length && e?.variables?.[0]?.type !== "featureSet" ? a(this)("Encountered unexpected editor profile") : i = e?.variables?.[0], i;
   }
   _toggleSideActionBarExpanded() {
     this.sideActionBarExpanded = !this.sideActionBarExpanded;
   }
   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></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=${a.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} .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", u);
+n("arcgis-sql-expression-editor", m);
 export {
-  u as ArcgisSqlExpressionEditor
+  m as ArcgisSqlExpressionEditor
 };

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

@@ -0,0 +1,50 @@
+/// <reference path="../../index.d.ts" />
+import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { editor } from "monaco-editor";
+import type { IEditorProfileDefinition, SidePanelName } from "../types.js";
+import type { T9nMeta } from "@arcgis/lumina/controllers";
+
+/**
+ * The ArcGIS SQL Layer Editor is a code editor for writing and editing sql query layer scripts
+ * If the user provides a profile with a variable of type `dataCatalogDatastore`. The editor will
+ * configure monaco language support for the dialect specified in the data catalog datastore.
+ * Otherwise it will default to postgres.
+ *
+ * @internal
+ */
+export abstract class ArcgisSqlLayerEditor extends LitElement {
+  /** @default false */
+  accessor hideSideBar: boolean;
+  /**
+   * Replace localized message strings with your own strings.
+   *
+   * **Note**: Individual message keys may change between releases.
+   */
+  accessor messageOverrides: {
+      loading?: string | undefined;
+      profileempty?: string | undefined;
+      tables?: string | undefined;
+  };
+  /** @internal */
+  protected messages: Partial<{
+      loading: string;
+      profileempty: string;
+      tables: string;
+  }> & T9nMeta<{
+      loading: string;
+      profileempty: string;
+      tables: string;
+  }>;
+  /** @default "none" */
+  accessor openedSidePanel: SidePanelName;
+  accessor profile: IEditorProfileDefinition | undefined;
+  /** @default "" */
+  accessor script: string;
+  setFocus(): Promise<void>;
+  readonly arcgisDiagnosticsChange: import("@arcgis/lumina").TargetedEvent<this, editor.IMarkerData[]>;
+  readonly arcgisScriptChange: import("@arcgis/lumina").TargetedEvent<this, string>;
+  readonly "@eventTypes": {
+    arcgisDiagnosticsChange: ArcgisSqlLayerEditor["arcgisDiagnosticsChange"]["detail"];
+    arcgisScriptChange: ArcgisSqlLayerEditor["arcgisScriptChange"]["detail"];
+  };
+}

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

@@ -0,0 +1,92 @@
+/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
+import { c as r } from "../../chunks/runtime.js";
+import { css as l, html as a } from "lit";
+import { LitElement as d, createEvent as s, safeClassMap as n } from "@arcgis/lumina";
+import { generateGuid as c } from "@arcgis/toolkit/string";
+import { u as h } from "../../chunks/useT9n.js";
+import { createRef as p, ref as g } from "lit/directives/ref.js";
+import { k as m } from "../../chunks/utils.js";
+import "@arcgis/arcade-languageservice";
+import "@arcgis/core/portal/PortalItem.js";
+import "@arcgis/core/WebMap.js";
+import "@arcgis/core/WebScene.js";
+import "@arcgis/core/layers/FeatureLayer.js";
+import "@arcgis/core/applications/Components/arcadeEditorUtils.js";
+import "@arcgis/toolkit/predicate";
+import "vscode-languageserver-types";
+import { rethrowError as t } from "@arcgis/toolkit/log";
+import "@arcgis/core/core/Error.js";
+import { d as o } from "../../chunks/language-defaults-base.js";
+import "@arcgis/core/portal/Portal.js";
+import { g as _, a as f, b as u, c as b } from "../../chunks/sql-layer-defaults.js";
+import { getSqlLayerDiagnosticService as v } from "../../chunks/sql-layer-mode.js";
+const S = l`:host{height:100%}calcite-tooltip:not([calcite-hydrated])>*{display:none}`;
+class E extends d {
+  constructor() {
+    super(...arguments), this._codeEditorElt = p(), this._disposables = [], this._modelId = c(), this.messages = h(), this._preparing = !1, this._resolvedLanguage = o, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.openedSidePanel = "none", this.arcgisDiagnosticsChange = s({ bubbles: !1 }), this.arcgisScriptChange = s({ bubbles: !1 });
+  }
+  static {
+    this.properties = { _editorProfile: 16, _preparing: 16, _resolvedLanguage: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5, messageOverrides: 0, openedSidePanel: 3 };
+  }
+  static {
+    this.styles = [S];
+  }
+  async setFocus() {
+    await this._codeEditorElt.value?.setFocus();
+  }
+  async load() {
+    await this._updateDataModelDeps().catch(t(this));
+  }
+  willUpdate(e) {
+    e.has("profile") && this._updateDataModelDeps().catch(t(this));
+  }
+  async loaded() {
+    const e = v();
+    this._disposables.push(e.onDiagnosticsChange((i) => {
+      i.uri.toString() === this._modelId && !this._preparing && this.arcgisDiagnosticsChange.emit(i.diagnostics);
+    }));
+  }
+  disconnectedCallback() {
+    for (super.disconnectedCallback(); this._disposables.length; )
+      this._disposables.pop()?.dispose();
+    _().forEach((e) => e.disposeForModel(this._modelId));
+  }
+  async _updateDataModelDeps() {
+    this._preparing = !0;
+    try {
+      const e = await f(this.profile);
+      e !== this._resolvedLanguage && (u(this._resolvedLanguage)?.disposeForModel(this._modelId), this._resolvedLanguage = e);
+      const i = b(this._resolvedLanguage);
+      await i.setProfileForModel(this._modelId, this.profile, { locale: this.messages._t9nLocale }), this._editorProfile = i.getEditorProfileForModel(this._modelId);
+    } catch {
+      this._editorProfile = void 0, this._resolvedLanguage = o;
+    } finally {
+      this._preparing = !1;
+    }
+  }
+  _toggleSideActionBarExpanded() {
+    this.sideActionBarExpanded = !this.sideActionBarExpanded;
+  }
+  _toggleSidePanel(e) {
+    this.openedSidePanel = this.openedSidePanel === e ? "none" : e, this.openedSidePanel === "none" && this._codeEditorElt.value?.setFocus().catch(t(this));
+  }
+  _onCodeEditorValueChange(e) {
+    e.stopPropagation(), this.script = e.detail, this.arcgisScriptChange.emit(e.detail);
+  }
+  _insertAsText(e) {
+    this._codeEditorElt.value?.insertText(e.detail).catch(t(this));
+  }
+  _getTablesVariable() {
+    return this._editorProfile?.variables.find(m);
+  }
+  render() {
+    const e = this._getTablesVariable();
+    return a`<arcgis-code-editor-shell><arcgis-code-editor slot=editor .language=${this._resolvedLanguage} .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} ${g(this._codeEditorElt)}></arcgis-code-editor>${!this.hideSideBar && a`<arcgis-editor-variables slot=side-panel .variable=${e} .heading=${this.messages.tables ?? "Tables"} .messageOverrides=${{ profileempty: this.messages.profileempty }} .closed=${this.openedSidePanel !== "variables"} class=${n(this.openedSidePanel === "variables" ? "" : "hidden")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._insertAsText} @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 && a`<calcite-tooltip reference-element=tables-action><span>${this.messages.tables ?? "Tables"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</arcgis-code-editor-shell>`;
+  }
+}
+r("arcgis-sql-layer-editor", E);
+export {
+  E as ArcgisSqlLayerEditor
+};

package/dist/components/arcgis-sql-layer-editor/index.d.ts

@@ -0,0 +1 @@
+export * from "./customElement.js";

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

@@ -0,0 +1,7 @@
+import "../arcgis-code-editor-shell/index.js";
+import "../arcgis-code-editor/index.js";
+import "../arcgis-editor-variables/index.js";
+import "@esri/calcite-components/components/calcite-action-bar";
+import "@esri/calcite-components/components/calcite-action";
+import "@esri/calcite-components/components/calcite-tooltip";
+export * from "./customElement.js";

package/dist/components/types.d.ts

@@ -9,6 +9,7 @@ import type SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
 import type { Diagnostic as ArcadeLanguageServiceDiagnostic } from "@arcgis/arcade-languageservice";
 import type { ApiItem, BundleType, ProfileId } from "@arcgis/languages-api-utils";
 import type { ProfileVariableInstances, ArcadeServices } from "@arcgis/core/arcade.js";
+import type { DataCatalogDatastoreInfo } from "../utils/data-catalog-datastore.js";
 
 export type Diagnostic = ArcadeLanguageServiceDiagnostic;
 
@@ -54,9 +55,9 @@ export type ProfileVariableValueType = "boolean" | "date" | "dateOnly" | "geomet
 /**
  * The supported profile variable types.
  *
- * @internalremarks TODO: hopefully align with \@arcgis/core's Variable type in the future
+ * @internalremarks TODO: hopefully align with \@arcgis/core's Arcade variable type in the future
  */
-export type IProfileVariable = IProfileArray | IProfileDictionary | IProfileFeature | IProfileFeatureSet | IProfileFeatureSetCollection | IProfilePixel | IProfileValue | IProfileVoxel;
+export type IProfileVariable = IProfileArray | IProfileDataCatalogDatastore | IProfileDictionary | IProfileFeature | IProfileFeatureSet | IProfileFeatureSetCollection | IProfilePixel | IProfileValue | IProfileVoxel;
 
 /** Properties common to all profile variables. */
 export interface IProfileVariableBase {
@@ -134,6 +135,82 @@ export interface IProfilePixel extends IProfileVariableBase {
 
 export type IFeatureLikeProfile = IProfileFeature | IProfilePixel | IProfileVoxel;
 
+/** Data catalog datastore profile variable declaration. */
+export interface IProfileDataCatalogDatastore extends IProfileVariableBase {
+  readonly type: "dataCatalogDatastore";
+  /** Describes how the editor will find the definition for the data catalog datastore. */
+  definition?: DataCatalogDatastoreSource;
+}
+
+export type DataCatalogDatabasePlatform = DataCatalogDatastoreInfo["databasePlatform"];
+
+export interface IDataCatalogDatastoreInfoLike {
+  /** The unique data catalog datastore id. */
+  datastoreId: string;
+  /** The datastore name. */
+  name: string;
+  /** The datastore type. */
+  type: string;
+  /** The database platform identifier. */
+  databasePlatform: DataCatalogDatabasePlatform;
+}
+
+export interface IDataCatalogDatasetInfoLike {
+  /** The dataset name. */
+  name: string;
+  /** The dataset type. */
+  type: string;
+}
+
+export interface IDataCatalogFieldInfoLike {
+  /** The field name. */
+  name: string;
+  /** The normalized field type used by the editor. */
+  type: FeatureLayer["fields"][number]["type"];
+  /** The raw field type returned by the service. */
+  serverType: string;
+  /** Indicates whether the field allows null values. */
+  nullable: boolean;
+}
+
+export interface IDataCatalogTableDescriptionLike {
+  /** The fields available in the table. */
+  fields: IDataCatalogFieldInfoLike[];
+}
+
+/**
+ * Data catalog datastore instance shape accepted by the editor.
+ *
+ * Consumers can supply either a serialized datastore definition or a live datastore-like
+ * object exposing the methods needed to fetch datastore metadata, datasets, and table descriptions.
+ */
+export interface IDataCatalogDatastoreInstance {
+  /** The unique data catalog datastore id. */
+  itemId?: string;
+  /** The url for the data catalog service on the portal. */
+  serviceUrl?: string;
+  /** The portal hosting the data catalog service. */
+  portal?: { url: string; };
+  /** Fetches datastore metadata. */
+  fetchInfo: () => Promise<IDataCatalogDatastoreInfoLike>;
+  /** Fetches datasets exposed by the datastore. */
+  fetchDatasets: () => Promise<IDataCatalogDatasetInfoLike[]>;
+  /** Fetches a table description for the provided dataset name. */
+  fetchTableDescription: (tableName: string) => Promise<IDataCatalogTableDescriptionLike>;
+}
+
+export type DataCatalogDatastoreSource = IDataCatalogDatastoreDefinition | IDataCatalogDatastoreInstance;
+
+/** Data catalog datastore definition. */
+export interface IDataCatalogDatastoreDefinition {
+  /** The unique data catalog datastore id. */
+  id: string;
+  /** The url for the data catalog service on the portal */
+  serviceUrl: string;
+  /** The portal url. This is required for accessing the data catalog service */
+  portal: { url: string; };
+}
+
 /** Describes a portal item. */
 export interface IPortalItemProperties {
   /** The unique portal item id. */