@arcgis/coding-components/dist/components/arcgis-sql-expression-editor/customElement.js

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

import { c as o } from "../../chunks/runtime.js";
import { html as i } from "lit";
import { LitElement as r, createEvent as n, noShadowRoot as c, safeClassMap as s } from "@arcgis/lumina";
import { generateGuid as l } from "@arcgis/components-utils";
import { a } from "../../chunks/sql-expr-defaults.js";
import { u as d } from "../../chunks/useT9n.js";
import { createRef as p, ref as h } from "lit-html/directives/ref.js";
import { css as g } from "@lit/reactive-element/css-tag.js";
import { s as f } from "../../chunks/editor.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.33/esri/copyright.txt for details.
v4.33.14 */
const _ = g`@layer{arcgis-sql-expression-editor{display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--arcgis-coding-components-border)!important;box-sizing:border-box;background-color:var(--arcgis-coding-components-background-color);height:100%}}`;
class m extends r {
  constructor() {
    super(...arguments), this._codeEditorElt = p(), this.messages = d(), this._modelId = l(), this._preparing = !1, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.arcgisScriptChange = n({ bubbles: !1 });
  }
  static {
    this.properties = { _activeAction: 16, _apiLibrary: 16, _editorProfile: 16, _preparing: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5 };
  }
  static {
    this.shadowRootOptions = c;
  }
  static {
    this.styles = [_, f];
  }
  async load() {
    await this._updateEditorProfile().catch(console.error);
  }
  willUpdate(e) {
    (e.has("messages") || e.has("profile")) && this._updateDataModelDeps();
  }
  async _updateDataModelDeps() {
    await this._updateEditorProfile(), await this._updateApiLibrary();
  }
  async _updateEditorProfile() {
    this._preparing = !0;
    try {
      await a.setProfileForModel(this._modelId, this.profile, { locale: this.messages._t9nLocale }), this._editorProfile = a.getEditorProfileForModel(this._modelId);
    } catch {
      this._editorProfile = void 0;
    } finally {
      this._preparing = !1;
    }
  }
  _setActiveAction(e) {
    if (this._activeAction === e) {
      this._activeAction = void 0;
      return;
    }
    this._activeAction = e;
  }
  _handleActionClick(e) {
    const t = e.target;
    this._setActiveAction(t.dataset.panelName);
  }
  _insertAsSnippet(e) {
    this._codeEditorElt.value?.insertSnippet(e.detail).catch(console.error);
  }
  _insertAsText(e) {
    this._codeEditorElt.value?.insertText(e.detail.replaceAll('"', "'")).catch(console.error);
  }
  async _updateApiLibrary() {
    this._apiLibrary = await a.getApiLibraryForModel(this._modelId);
  }
  _onCodeEditorValueChange(e) {
    e.stopPropagation(), this.script = e.detail, this.arcgisScriptChange.emit(e.detail);
  }
  _getFeatureSetVariable() {
    let e;
    const t = a.getEditorProfileForModel(this._modelId);
    return t?.variables?.length && t?.variables?.[0]?.type !== "featureSet" ? console.error("encountered unexpected editor profile") : e = t?.variables?.[0], e;
  }
  _toggleSideActionBarExpanded() {
    this.sideActionBarExpanded = !this.sideActionBarExpanded;
  }
  render() {
    const e = this._getFeatureSetVariable();
    return i`<div class="flex-row flex-adjustable"><div class="flex-column flex-adjustable"><arcgis-code-editor language=arcgis-sql-expression .modelId=${this._modelId} .value=${this.script ?? ""} @arcgisValueChange=${this._onCodeEditorValueChange} ${h(this._codeEditorElt)}></arcgis-code-editor></div>${!this.hideSideBar && i`<arcgis-editor-variables .variable=${e} .closed=${this._activeAction !== "fields"} class=${s(this._activeAction === "fields" && "side-panel flex-panel border-inline-start")} .loading=${this._preparing} .modelId=${this._modelId} @arcgisItemSelected=${this._insertAsText} @arcgisClose=${() => this._setActiveAction(void 0)} data-panel-name=none></arcgis-editor-variables>` || ""}${!this.hideSideBar && i`<arcgis-language-api-panel class=${s(this._activeAction === "functions" && "side-panel flex-panel border-inline-start")} .closed=${this._activeAction !== "functions"} @arcgisItemSelected=${this._insertAsSnippet} @arcgisClose=${() => 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 && i`<calcite-action-bar class="side-action-bar border-inline-start" .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><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>${!this.sideActionBarExpanded && i`<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 && i`<calcite-tooltip reference-element=functions-action><span>${this.messages.functions ?? "Functions"}</span></calcite-tooltip>` || ""}</calcite-action-bar>` || ""}</div>`;
  }
}
o("arcgis-sql-expression-editor", m);
export {
  m as ArcgisSqlExpressionEditor
};