@arcgis/coding-components 5.1.0-next.76 → 5.1.0-next.78

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

@@ -13,6 +13,18 @@ import type { T9nMeta } from "@arcgis/lumina/controllers";
  * @internal
  */
 export abstract class ArcgisSqlLayerEditor extends LitElement {
+  /**
+   * Options to update on the editor.
+   * For example:
+   * ```json
+   * {
+   *   "fontSize": 18
+   * }
+   * ```
+   *
+   * To get the full list of available options, see the Monaco Editor options [documentation](https://microsoft.github.io/monaco-editor/docs.html#interfaces/editor_editor_api.editor.IEditorOptions.html) for more details.
+   */
+  accessor editorOptions: editor.IEditorOptions & editor.IGlobalEditorOptions | undefined;
   /** @default false */
   accessor hideSideBar: boolean;
   /**
@@ -24,16 +36,22 @@ export abstract class ArcgisSqlLayerEditor extends LitElement {
       loading?: string | undefined;
       profileempty?: string | undefined;
       tables?: string | undefined;
+      placeholder?: string | undefined;
+      placeholderexample?: string | undefined;
   };
   /** @internal */
   protected messages: Partial<{
       loading: string;
       profileempty: string;
       tables: string;
+      placeholder: string;
+      placeholderexample: string;
   }> & T9nMeta<{
       loading: string;
       profileempty: string;
       tables: string;
+      placeholder: string;
+      placeholderexample: string;
   }>;
   /** @default "none" */
   accessor openedSidePanel: SidePanelName;

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

@@ -1,12 +1,12 @@
 /* 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 { c as p } from "../../chunks/runtime.js";
+import { css as h, html as r } 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 { k as d } from "../../chunks/utils.js";
+import { e as E } from "../../chunks/utilities.js";
 import "@arcgis/core/portal/PortalItem.js";
 import "@arcgis/core/WebMap.js";
 import "@arcgis/core/WebScene.js";
@@ -14,52 +14,55 @@ 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 { rethrowError as o } from "@arcgis/toolkit/log";
 import "@arcgis/core/core/Error.js";
-import { d as o } from "../../chunks/language-defaults-base.js";
+import { d as n } 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 {
+import { g as S, a as v, b as y, c as $ } from "../../chunks/sql-layer-defaults.js";
+import { getSqlLayerDiagnosticService as x } from "../../chunks/sql-layer-mode.js";
+const I = h`:host{height:100%}calcite-tooltip:not([calcite-hydrated])>*{display:none}`;
+class L extends g {
   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 });
+    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 });
   }
   static {
-    this.properties = { _editorProfile: 16, _preparing: 16, _resolvedLanguage: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5, messageOverrides: 0, openedSidePanel: 3 };
+    this.properties = { _editorProfile: 16, _preparing: 16, _resolvedLanguage: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5, messageOverrides: 0, openedSidePanel: 3, editorOptions: 0, editorInstance: 32 };
   }
   static {
-    this.styles = [S];
+    this.styles = [I];
+  }
+  get editorInstance() {
+    return this._codeEditorElt.value?.editorInstance;
   }
   async setFocus() {
     await this._codeEditorElt.value?.setFocus();
   }
   async load() {
-    await this._updateDataModelDeps().catch(t(this));
+    await this._updateDataModelDeps().catch(o(this));
   }
   willUpdate(e) {
-    e.has("profile") && this._updateDataModelDeps().catch(t(this));
+    e.has("profile") && this._updateDataModelDeps().catch(o(this));
   }
   async loaded() {
-    const e = v();
-    this._disposables.push(e.onDiagnosticsChange((i) => {
-      i.uri.toString() === this._modelId && !this._preparing && this.arcgisDiagnosticsChange.emit(i.diagnostics);
+    const e = x();
+    this._disposables.push(e.onDiagnosticsChange((t) => {
+      t.uri.toString() === this._modelId && !this._preparing && this.arcgisDiagnosticsChange.emit(t.diagnostics);
     }));
   }
   disconnectedCallback() {
     for (super.disconnectedCallback(); this._disposables.length; )
       this._disposables.pop()?.dispose();
-    _().forEach((e) => e.disposeForModel(this._modelId));
+    S().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);
+      const e = await v(this.profile);
+      e !== this._resolvedLanguage && (y(this._resolvedLanguage)?.disposeForModel(this._modelId), this._resolvedLanguage = e);
+      const t = $(this._resolvedLanguage);
+      await t.setProfileForModel(this._modelId, this.profile, { locale: this.messages._t9nLocale }), this._editorProfile = t.getEditorProfileForModel(this._modelId);
     } catch {
-      this._editorProfile = void 0, this._resolvedLanguage = o;
+      this._editorProfile = void 0, this._resolvedLanguage = n;
     } finally {
       this._preparing = !1;
     }
@@ -68,25 +71,40 @@ class E extends d {
     this.sideActionBarExpanded = !this.sideActionBarExpanded;
   }
   _toggleSidePanel(e) {
-    this.openedSidePanel = this.openedSidePanel === e ? "none" : e, this.openedSidePanel === "none" && this._codeEditorElt.value?.setFocus().catch(t(this));
+    this.openedSidePanel = this.openedSidePanel === e ? "none" : e, this.openedSidePanel === "none" && this._codeEditorElt.value?.setFocus().catch(o(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));
+  async _onItemSelected(e) {
+    e.stopPropagation();
+    const t = this._getSelectedTableVariable(e.detail);
+    if (!t) {
+      this._codeEditorElt.value?.insertText(e.detail).catch(o(this));
+      return;
+    }
+    await t.loadSource();
+    let i;
+    const s = t.fieldInfos.filter((a) => a.type === "geometry" && !i ? (i = a.name, !0) : a.type !== "geometry").map((a) => a.name).filter(Boolean), c = `select ${s.length ? s.join(", ") : "*"} from ${t.snippet};`;
+    E(this._codeEditorElt.value?.editorInstance, c, "replace", "");
   }
   _getTablesVariable() {
-    return this._editorProfile?.variables.find(m);
+    return this._editorProfile?.variables.find(d);
+  }
+  _getSelectedTableVariable(e) {
+    const t = this._getTablesVariable();
+    if (d(t))
+      return t.tableVariables.find((i) => i.snippet === e);
   }
   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=${() => {
+    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=${() => {
       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>`;
+    }} 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>`;
   }
 }
-r("arcgis-sql-layer-editor", E);
+p("arcgis-sql-layer-editor", L);
 export {
-  E as ArcgisSqlLayerEditor
+  L as ArcgisSqlLayerEditor
 };