@arcgis/coding-components
Version:
Contains components for editing code in different languages. The currently supported languages are html, css, json, TypeScript, JavaScript, and Arcade.
95 lines (94 loc) • 6.27 kB
JavaScript
import { c as o } from "../../chunks/runtime.js";
import { html as i } from "lit";
import { LitElement as s, createEvent as r, noShadowRoot as n } from "@arcgis/lumina";
import { generateGuid as l } from "@arcgis/components-utils";
import { a } from "../../chunks/sql-expr-defaults.js";
import { u as c } from "../../chunks/useT9n.js";
import { createRef as d, ref as p } from "lit-html/directives/ref.js";
import { css as h } from "@lit/reactive-element/css-tag.js";
/*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
See https://js.arcgis.com/4.32/esri/copyright.txt for details.
v4.32.13 */
const g = h`{arcgis-sql-expression-editor{display:flex;flex-direction:column;position:relative;overflow:hidden;border:var(--arcgis-coding-components-border);box-sizing:border-box;background-color:var(--arcgis-coding-components-background-color);height:100%;.flex-adjustable{flex:1 1 auto;overflow:hidden}.flex-panel{flex:1 0 auto}.position-relative{position:relative}.flex-row{display:flex;flex-direction:row;overflow:hidden}.flex-column{display:flex;flex-direction:column;overflow:hidden}.border-inline-start{border-inline-start:var(--arcgis-coding-components-border);box-sizing:border-box}.border-inline-end{border-inline-end:var(--arcgis-coding-components-border);box-sizing:border-box}.side-action-bar{max-width:var(--arcgis-coding-components-side-action-bar-max-w)}.side-panel{max-width:var(--arcgis-coding-components-side-panel-max-w);width:var(--arcgis-coding-components-side-panel-w);calcite-flow{height:100%}}}}`;
class f extends s {
constructor() {
super(...arguments), this._codeEditorElt = d(), this.messages = c(), this._modelId = l(), this._preparing = !1, this.sideActionBarExpanded = !1, this.script = "", this.hideSideBar = !1, this.arcgisScriptChange = r({ bubbles: !1 });
}
static {
this.properties = { _activeAction: 16, _apiLibrary: 16, _editorProfile: 16, _preparing: 16, sideActionBarExpanded: 16, profile: 0, script: 1, hideSideBar: 5 };
}
static {
this.shadowRootOptions = n;
}
static {
this.styles = g;
}
// #endregion
// #region Lifecycle
async load() {
await this._updateEditorProfile().catch(console.error);
}
willUpdate(e) {
(e.has("messages") || e.has("profile")) && this._updateDataModelDeps();
}
// #endregion
// #region Private Methods
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);
}
/**
* Gets the featureSetVariable from the editor profile- used to populate the variables panel.
* In current form, there should only be one variable in the profile.
*/
_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;
}
// #endregion
// #region Rendering
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 ?? ""} =${this._onCodeEditorValueChange} ${p(this._codeEditorElt)}></arcgis-code-editor></div>${this._activeAction === "fields" && !this.hideSideBar && i`<arcgis-editor-variables .variable=${e} class="side-panel flex-panel border-inline-start" .loading=${this._preparing} .modelId=${this._modelId} =${this._insertAsText} =${() => this._setActiveAction(void 0)} data-panel-name=none></arcgis-editor-variables>` || ""}${this._activeAction === "functions" && !this.hideSideBar && i`<arcgis-language-api-panel class="side-panel flex-panel border-inline-start" =${this._insertAsSnippet} =${() => this._setActiveAction(void 0)} .loading=${this._preparing} .apiLibrary=${this._apiLibrary} data-panel-name=none hide-documentation-actions></arcgis-language-api-panel>` || ""}${!this.hideSideBar && i`<calcite-action-bar class="side-action-bar border-inline-start" .expanded=${this.sideActionBarExpanded} position=end =${this._toggleSideActionBarExpanded}><calcite-action id=fields-action .text=${this.messages.fields ?? "Fields"} icon=profile-variables .active=${this._activeAction === "fields"} data-panel-name=fields =${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 =${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", f);
export {
f as ArcgisSqlExpressionEditor
};