@arcgis/coding-components 4.29.0-beta.11 → 4.29.0-beta.110

package/dist/components/arcgis-arcade-editor.js

@@ -1,12 +1,18 @@
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.29/esri/copyright.txt for details.
+ * v4.29.0-beta.110
+ */
 import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h as h$1, Fragment, Host } from '@stencil/core/internal/client';
 import { editor, KeyCode } from 'monaco-editor';
 import { e as executeScript, D as DevelopersWebSitePath, d as defineCustomElement$5 } from './arcade-results.js';
-import { h, _, C, $, F } from './index2.js';
-import { s as setupMonacoEnvironment, g as getArcadeDiagnosticService } from './arcade-contribution.js';
+import { h, U, k, B, H } from './index2.js';
+import { s as setupMonacoEnvironment, a as getArcadeDiagnosticService } from './arcade-contribution.js';
 import { b as arcadeDefaults } from './arcade-defaults.js';
 import '@esri/calcite-components/dist/components/calcite-action-bar.js';
 import '@esri/calcite-components/dist/components/calcite-action-group.js';
 import '@esri/calcite-components/dist/components/calcite-action.js';
+import '@esri/calcite-components/dist/components/calcite-tooltip.js';
 import { d as defineCustomElement$6 } from './arcade-api.js';
 import { d as defineCustomElement$4 } from './arcade-suggestions.js';
 import { d as defineCustomElement$3 } from './arcade-variables.js';
@@ -34,419 +40,439 @@ const themeConfig = {
 };
 
 function setupArcadeTheme() {
-  ["light", "dark"].forEach((theme) => {
-    const base = theme === "light" ? "vs" : "vs-dark";
-    const colors = themeConfig[`arcade-${theme}-theme`];
-    // Defines the light and dark theme based on the calcite theme name
-    editor.defineTheme(base, {
-      base,
-      inherit: true,
-      rules: [
-        { token: "comment.arc", foreground: colors.comment },
-        { token: "constant.arc", foreground: colors.constant },
-        { token: "keyword.arc", foreground: colors.keyword },
-        { token: "identifier.arc", foreground: colors.identifier },
-        { token: "number.arc", foreground: colors.number },
-        { token: "string.arc", foreground: colors.string }
-      ],
-      colors: {}
+    ["light", "dark"].forEach((theme) => {
+        const base = theme === "light" ? "vs" : "vs-dark";
+        const colors = themeConfig[`arcade-${theme}-theme`];
+        // Defines the light and dark theme based on the calcite theme name
+        editor.defineTheme(base, {
+            base,
+            inherit: true,
+            rules: [
+                { token: "comment.arc", foreground: colors.comment },
+                { token: "constant.arc", foreground: colors.constant },
+                { token: "keyword.arc", foreground: colors.keyword },
+                { token: "identifier.arc", foreground: colors.identifier },
+                { token: "number.arc", foreground: colors.number },
+                { token: "string.arc", foreground: colors.string }
+            ],
+            colors: {}
+        });
     });
-  });
 }
+const monacoThemeKeys = ["comment", "keyword", "identifier", "string", "number", "constant"];
+const colorRulesKeys = [...monacoThemeKeys, "date"];
 function updateThemeColors(theme, colorRules) {
-  if (colorRules === undefined) {
-    setupArcadeTheme();
-    return;
-  }
-  const base = theme === "light" ? "vs" : "vs-dark";
-  const rules = [];
-  ["comment", "keyword", "identifier", "string", "number", "constant"].forEach((key) => {
-    // @ts-expect-error
-    const foreground = colorRules[key];
-    if (!foreground) {
-      return;
+    if (colorRules === undefined) {
+        setupArcadeTheme();
+        return;
     }
-    rules.push({ token: `${key}.arc`, foreground });
-  });
-  editor.defineTheme(base, { base, inherit: true, rules, colors: {} });
+    const base = theme === "light" ? "vs" : "vs-dark";
+    const rules = [];
+    monacoThemeKeys.forEach((key) => {
+        const foreground = colorRules[key];
+        if (!foreground) {
+            return;
+        }
+        rules.push({ token: `${key}.arc`, foreground });
+    });
+    editor.defineTheme(base, { base, inherit: true, rules, colors: {} });
 }
 
-const arcadeEditorCss = "arcgis-arcade-editor{display:flex;flex-direction:column;height:100%;width:100%;position:relative;overflow:hidden;border:1px solid var(--calcite-ui-border-3);box-sizing:border-box;background-color:var(--calcite-ui-foreground-1)}arcgis-arcade-editor .flex-adjustable{flex:1 1 auto;overflow:hidden}arcgis-arcade-editor .flex-panel{flex:1 0 auto}arcgis-arcade-editor .position-relative{position:relative}arcgis-arcade-editor .flex-row{display:flex;flex-direction:row;overflow:hidden}arcgis-arcade-editor .flex-column{display:flex;flex-direction:column;overflow:hidden}arcgis-arcade-editor .border-inline-start{border-inline-start:1px solid var(--calcite-ui-border-3);box-sizing:border-box}arcgis-arcade-editor .border-inline-end{border-inline-end:1px solid var(--calcite-ui-border-3);box-sizing:border-box}arcgis-arcade-editor .sticky{position:sticky;top:0px;z-index:10}arcgis-arcade-editor .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-ui-foreground-1);text-align:center}arcgis-arcade-editor .side-action-bar{max-width:25%}arcgis-arcade-editor .side-panel{max-width:45%;width:600px}arcgis-arcade-editor .side-panel calcite-flow{height:100%}arcgis-arcade-editor .main-action-bar{border-bottom:1px solid var(--calcite-ui-border-3);flex:0 0 auto}arcgis-arcade-editor .main-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group:last-child{border-inline-end-width:0px}arcgis-arcade-editor .main-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}arcgis-arcade-editor arcgis-arcade-results{border-top:1px solid var(--calcite-ui-border-3);box-sizing:border-box;max-height:50%;min-height:50%;margin-bottom:-1px}arcgis-arcade-editor calcite-flow [slot=footer-actions]{word-break:break-word}arcgis-arcade-editor calcite-list-item-group calcite-list-item{margin-bottom:1px;box-shadow:0 1px 0 var(--calcite-ui-border-3)}arcgis-arcade-editor calcite-list-item-group calcite-list-item:last-child{box-shadow:none}arcgis-arcade-editor calcite-list-item-group:last-child{margin-bottom:var(--calcite-spacing-1)}";
+const arcadeEditorCss = "arcgis-arcade-editor{display:flex;flex-direction:column;height:100%;width:100%;position:relative;overflow:hidden;border:1px solid var(--calcite-color-border-3);box-sizing:border-box;background-color:var(--calcite-color-foreground-1)}arcgis-arcade-editor .flex-adjustable{flex:1 1 auto;overflow:hidden}arcgis-arcade-editor .flex-panel{flex:1 0 auto}arcgis-arcade-editor .position-relative{position:relative}arcgis-arcade-editor .flex-row{display:flex;flex-direction:row;overflow:hidden}arcgis-arcade-editor .flex-column{display:flex;flex-direction:column;overflow:hidden}arcgis-arcade-editor .border-inline-start{border-inline-start:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .border-inline-end{border-inline-end:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .sticky{position:sticky;top:0px;z-index:10}arcgis-arcade-editor .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1);text-align:center}arcgis-arcade-editor .side-action-bar{max-width:25%}arcgis-arcade-editor .side-panel{max-width:45%;width:600px}arcgis-arcade-editor .side-panel calcite-flow{height:100%}arcgis-arcade-editor .main-action-bar{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}arcgis-arcade-editor .main-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}arcgis-arcade-editor .main-action-bar calcite-action-group:last-child{border-inline-end-width:0px}arcgis-arcade-editor .main-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}arcgis-arcade-editor arcgis-arcade-results{border-top:1px solid var(--calcite-color-border-3);box-sizing:border-box;max-height:50%;min-height:50%;margin-bottom:-1px}arcgis-arcade-editor calcite-flow [slot=footer]{word-break:break-word}arcgis-arcade-editor calcite-list-item-group calcite-list-item{margin-bottom:1px;box-shadow:0 1px 0 var(--calcite-color-border-3)}arcgis-arcade-editor calcite-list-item-group calcite-list-item:last-child{box-shadow:none}arcgis-arcade-editor calcite-list-item-group:last-child{margin-bottom:var(--calcite-spacing-1)}";
 
 setupArcadeTheme();
-const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.scriptChange = createEvent(this, "scriptChange", 3);
-    this.diagnosticsChange = createEvent(this, "diagnosticsChange", 3);
-    this._componentReadyDefer = new h();
-    this._modelId = _();
-    this._editorProfilePromise = Promise.resolve(undefined);
-    this._disposables = [];
-    this._executeScript = async () => {
-      const testContext = this.testData;
-      if (!this._codeEditorElt || !testContext) {
-        return;
-      }
-      const editorProfile = await this._editorProfilePromise;
-      if (!editorProfile) {
-        this._executionResult = { type: "error", value: "Missing editor profile", error: null };
-        return;
-      }
-      this._showExecutionPanel = true;
-      this._executingScript = true;
-      this._consoleLogs = [];
-      setTimeout(async () => {
-        const script = await this._codeEditorElt?.getValue();
-        this._executionResult = await executeScript(editorProfile.definition, script, testContext, (log) => setTimeout(() => (this._consoleLogs = [...this._consoleLogs, log]), 0));
+const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcadeEditor extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.scriptChange = createEvent(this, "scriptChange", 3);
+        this.diagnosticsChange = createEvent(this, "diagnosticsChange", 3);
+        this._componentReadyDefer = new h();
+        this._modelId = U();
+        this._editorProfilePromise = Promise.resolve(undefined);
+        this._disposables = [];
+        this._executeScript = async () => {
+            const testContext = this.testData;
+            if (!this._codeEditorElt || !testContext) {
+                return;
+            }
+            const editorProfile = await this._editorProfilePromise;
+            if (!editorProfile) {
+                this._executionResult = { type: "error", value: "Missing editor profile", error: null };
+                return;
+            }
+            this._showExecutionPanel = true;
+            this._executingScript = true;
+            this._consoleLogs = [];
+            setTimeout(() => void (async () => {
+                const script = await this._codeEditorElt?.getValue();
+                this._executionResult = await executeScript(editorProfile.definition, script, testContext, (log) => setTimeout(() => (this._consoleLogs = [...this._consoleLogs, log]), 0));
+                this._executingScript = false;
+            })(), 0);
+        };
+        this._toggleShowExecutionPanel = () => void (this._showExecutionPanel = !this._showExecutionPanel);
+        this._toggleSideActionBarExpanded = () => void (this.sideActionBarExpanded = !this.sideActionBarExpanded);
+        this._toggleSidePanel = async (e) => {
+            if (!e.target) {
+                return;
+            }
+            const panelName = e.target?.dataset.panelName ?? "none";
+            // Setup the new panel. Toggle to none if already opened
+            this.openedSidePanel = panelName === this.openedSidePanel ? "none" : panelName;
+            if (this.openedSidePanel === "none") {
+                // Reset focus on the code editor if no panel displayed
+                await this._codeEditorElt?.setFocus();
+            }
+        };
+        this._openArcadeHelp = () => void window.open(DevelopersWebSitePath, "Arcade Help");
+        this._emitScriptChange = (e) => {
+            e.stopPropagation();
+            this.scriptChange.emit(e.detail);
+        };
+        this._insertAsSnippet = async (e) => await this._codeEditorElt?.insertSnippet(e.detail);
+        this._insertAsText = async (e) => await this._codeEditorElt?.insertText(e.detail);
+        this._onResultPanelChange = (e) => void (this._resultPanel = e.detail);
+        this._onExecutionPanelClose = () => void (this._showExecutionPanel = false);
+        this._lang = "";
+        this._t9nLocale = "";
+        this._t9nStrings = undefined;
+        this._standaloneCodeEditor = undefined;
+        this._preparingProfile = false;
+        this._editorProfile = undefined;
+        this._showExecutionPanel = false;
+        this._resultPanel = "output";
         this._executingScript = false;
-      }, 0);
-    };
-    this._toggleShowExecutionPanel = () => (this._showExecutionPanel = !this._showExecutionPanel);
-    this._toggleSideActionBarExpanded = () => (this.sideActionBarExpanded = !this.sideActionBarExpanded);
-    this._toggleSidePanel = async (e) => {
-      if (!e.target) {
-        return;
-      }
-      const panelName = e.target?.dataset.panelName ?? "none";
-      // Setup the new panel. Toggle to none if already opened
-      this.openedSidePanel = panelName === this.openedSidePanel ? "none" : panelName;
-      if (this.openedSidePanel === "none") {
-        // Reset focus on the code editor if no panel displayed
+        this._consoleLogs = [];
+        this._executionResult = undefined;
+        this.profile = undefined;
+        this.script = "";
+        this.testData = undefined;
+        this.suggestions = undefined;
+        this.snippets = undefined;
+        this.hideDocumentationActions = false;
+        this.hideSideBar = false;
+        this.sideActionBarExpanded = false;
+        this.openedSidePanel = "none";
+    }
+    _profileChanged(newValue, oldValue) {
+        // Prevent the execution as long as the component has not been fully loaded
+        if (newValue === oldValue) {
+            return;
+        }
+        this._updateEditorProfile().catch(console.error);
+    }
+    _testDataChanged(newValue, oldValue) {
+        if (newValue === oldValue || !this._showExecutionPanel) {
+            return;
+        }
+        this._executeScript().catch(console.error);
+    }
+    _snippetChanged(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        arcadeDefaults.updateApiContextForModel(this._modelId, {
+            snippets: this.snippets
+        });
+    }
+    // #endregion
+    // #region Public methods API
+    /**
+     * Returns the current script.
+     * @returns {Promise<string>}
+     */
+    async getScript() {
+        await this._componentReadyDefer.promise;
+        return await this._codeEditorElt?.getValue();
+    }
+    /**
+     * Set the focus on the element.
+     */
+    async setFocus() {
+        await this._componentReadyDefer.promise;
         await this._codeEditorElt?.setFocus();
-      }
-    };
-    this._openArcadeHelp = () => window.open(DevelopersWebSitePath, "Arcade Help");
-    this._emitScriptChange = (e) => {
-      e.stopPropagation();
-      this.scriptChange.emit(e.detail);
-    };
-    this._insertAsSnippet = (e) => this._codeEditorElt?.insertSnippet(e.detail);
-    this._insertAsText = (e) => this._codeEditorElt?.insertText(e.detail);
-    this._onResultPanelChange = (e) => (this._resultPanel = e.detail);
-    this._onExecutionPanelClose = () => (this._showExecutionPanel = false);
-    this._locale = "";
-    this._t9nStrings = undefined;
-    this._standaloneCodeEditor = undefined;
-    this._preparingProfile = false;
-    this._editorProfile = undefined;
-    this._showExecutionPanel = false;
-    this._resultPanel = "output";
-    this._executingScript = false;
-    this._consoleLogs = [];
-    this._executionResult = undefined;
-    this.profile = undefined;
-    this.script = "";
-    this.testData = undefined;
-    this.suggestions = undefined;
-    this.snippets = undefined;
-    this.hideDocumentationActions = false;
-    this.hideSideBar = false;
-    this.sideActionBarExpanded = false;
-    this.openedSidePanel = "none";
-  }
-  _profileChanged(newValue, oldValue) {
-    // Prevent the execution as long as the component has not been fully loaded
-    if (newValue === oldValue) {
-      return;
     }
-    this._updateEditorProfile();
-  }
-  _testDataChanged(newValue, oldValue) {
-    if (newValue === oldValue || !this._showExecutionPanel) {
-      return;
+    /**
+     * @internal
+     * Returns the editor instance.
+     * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
+     */
+    async getEditorInstance() {
+        await this._componentReadyDefer.promise;
+        return (await this._codeEditorElt?.getEditorInstance());
     }
-    this._executeScript();
-  }
-  _snippetChanged(newValue, oldValue) {
-    if (newValue === oldValue) {
-      return;
+    /**
+     * Returns the Arcade result for the script for the provided test data.
+     */
+    async getTestResult() {
+        if (!this.testData) {
+            return { type: "error", value: "Missing test data", error: null };
+        }
+        const editorProfile = await this._editorProfilePromise;
+        if (!editorProfile) {
+            return { type: "error", value: "Missing editor profile", error: null };
+        }
+        await this._componentReadyDefer.promise;
+        const script = await this._codeEditorElt?.getValue();
+        return await executeScript(editorProfile.definition, script, this.testData);
     }
-    arcadeDefaults.updateApiContextForModel(this._modelId, {
-      snippets: this.snippets
-    });
-  }
-  // #endregion
-  // #region Public methods API
-  /**
-   * Returns the current script.
-   * @returns {Promise<string>}
-   */
-  async getScript() {
-    await this._componentReadyDefer.promise;
-    return this._codeEditorElt?.getValue();
-  }
-  /**
-   * Set the focus on the element.
-   */
-  async setFocus() {
-    await this._componentReadyDefer.promise;
-    await this._codeEditorElt?.setFocus();
-  }
-  /**
-   * @internal
-   * Returns the editor instance.
-   * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
-   */
-  async getEditorInstance() {
-    await this._componentReadyDefer.promise;
-    return this._codeEditorElt?.getEditorInstance();
-  }
-  /**
-   * Returns the Arcade result for the script for the provided test data.
-   */
-  async getTestResult() {
-    if (!this.testData) {
-      return { type: "error", value: "Missing test data", error: null };
+    /**
+     * Allows to change theme colors
+     * @internal
+     */
+    async updateThemeColors(colorRules) {
+        const theme = k(this._hostElement);
+        updateThemeColors(theme, colorRules);
+        if (colorRules === undefined) {
+            colorRulesKeys.forEach((key) => {
+                this._hostElement.style.removeProperty(`--arcgis-arcade-editor-${key}`);
+            });
+            return;
+        }
+        colorRulesKeys.forEach((key) => {
+            const foreground = colorRules[key];
+            if (!foreground) {
+                return;
+            }
+            this._hostElement.style.setProperty(`--arcgis-arcade-editor-${key}`, foreground);
+        });
     }
-    const editorProfile = await this._editorProfilePromise;
-    if (!editorProfile) {
-      return { type: "error", value: "Missing editor profile", error: null };
+    // #endregion
+    // #region Component lifecycle events
+    async componentWillLoad() {
+        const assetsPath = getAssetPath("./assets");
+        // We are a bit in a chicken and egg situation here.
+        // Normally, it is the code editor that is responsible for setting up the Monaco environement.
+        // However, we need to setup the environment before the code editor is instantiated because
+        // we need to access the arcade language service to get the api library.
+        setupMonacoEnvironment(assetsPath);
+        // Starts a locale observer. It will load the correct t9n strings for the component
+        // when the locale changes. We also pass updateEditorProfile. It will be invoked the first
+        // and on each locale change. The profile has to be refreshed on locale change as well.
+        await B(this, assetsPath, async () => await this._updateEditorProfile());
     }
-    await this._componentReadyDefer.promise;
-    const script = await this._codeEditorElt?.getValue();
-    return executeScript(editorProfile.definition, script, this.testData);
-  }
-  /**
-   * Returns the Arcade output type for the script.
-   * @deprecated Use getTestResult
-   * @internal
-   */
-  async getOutputType() {
-    return (await this.getTestResult()).type;
-  }
-  /**
-   * Allows to change theme colors
-   * @internal
-   */
-  async updateThemeColors(colorRules) {
-    const theme = C(this._hostElt);
-    updateThemeColors(theme, colorRules);
-    if (colorRules === undefined) {
-      ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
-        this._hostElt.style.removeProperty(`--arcgis-arcade-editor-${key}`);
-      });
-      return;
+    async componentDidLoad() {
+        // Mark on component as ready.
+        // Some methods are waiting for this state to actually continue.
+        this._componentReadyDefer.resolve();
+        // Start listening to the validation diagnostics.
+        // We are doing this as late as possible
+        const diagnosticsService = await getArcadeDiagnosticService();
+        this._disposables.push(diagnosticsService.onDiagnosticsChange((event) => !this._preparingProfile && this.diagnosticsChange.emit(event.diagnostics)));
+        // Get editor instance and add action
+        this._standaloneCodeEditor = await this.getEditorInstance();
+        this._standaloneCodeEditor?.addAction({
+            // An unique identifier for the action.
+            id: "run-script",
+            label: "Run Arcade Expression",
+            keybindings: [KeyCode.F5],
+            contextMenuGroupId: "code",
+            contextMenuOrder: 1,
+            run: () => {
+                if (this.testData) {
+                    this._executeScript().catch(console.error);
+                }
+            }
+        });
+        await this._codeEditorElt?.setFocus();
     }
-    ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
-      // @ts-expect-error
-      const foreground = colorRules[key];
-      if (!foreground) {
-        return;
-      }
-      this._hostElt.style.setProperty(`--arcgis-arcade-editor-${key}`, foreground);
-    });
-  }
-  // #endregion
-  // #region Component lifecycle events
-  async componentWillLoad() {
-    const assetsPath = getAssetPath("./assets");
-    // We are a bit in a chicken and egg situation here.
-    // Normally, it is the code editor that is responsible for setting up the Monaco environement.
-    // However, we need to setup the environment before the code editor is instantiated because
-    // we need to access the arcade language service to get the api library.
-    setupMonacoEnvironment(assetsPath);
-    // Starts a locale observer. It will load the correct t9n strings for the component
-    // when the locale changes. We also pass updateEditorProfile. It will be invoked the first
-    // and on each locale change. The profile has to be refreshed on locale change as well.
-    await $(this, assetsPath, async () => await this._updateEditorProfile());
-  }
-  async componentDidLoad() {
-    // Mark on component as ready.
-    // Some methods are waiting for this state to actually continue.
-    this._componentReadyDefer.resolve();
-    // Start listening to the validation diagnostics.
-    // We are doing this as late as possible
-    const diagnosticsService = await getArcadeDiagnosticService();
-    this._disposables.push(diagnosticsService.onDiagnosticsChange((ev) => !this._preparingProfile && this.diagnosticsChange.emit(ev.diagnostics)));
-    // Get editor instance and add action
-    this._standaloneCodeEditor = await this.getEditorInstance();
-    this._standaloneCodeEditor?.addAction({
-      // An unique identifier for the action.
-      id: "run-script",
-      label: "Run Arcade Expression",
-      keybindings: [KeyCode.F5],
-      contextMenuGroupId: "code",
-      contextMenuOrder: 1,
-      run: () => {
-        if (this.testData) {
-          this._executeScript();
+    disconnectedCallback() {
+        H(this);
+        arcadeDefaults.disposeApiContextForModel(this._modelId);
+        arcadeDefaults.disposeEditorProfileForModel(this._modelId);
+        while (this._disposables.length) {
+            this._disposables.pop()?.dispose();
         }
-      }
-    });
-    await this._codeEditorElt?.setFocus();
-  }
-  disconnectedCallback() {
-    F(this);
-    arcadeDefaults.disposeApiContextForModel(this._modelId);
-    arcadeDefaults.disposeEditorProfileForModel(this._modelId);
-    while (this._disposables.length) {
-      this._disposables.pop()?.dispose();
     }
-  }
-  // #endregion
-  // #region Private methods API
-  async _updateEditorProfile() {
-    // The goal is to
-    // - convert the runtime profile into a specialized instance that will serve the UI better.
-    // - extract the language service  profile that is specialized for completion and validation
-    this._preparingProfile = true;
-    try {
-      // Set a new profile for the model using the profile definition and the locale.
-      await arcadeDefaults.setProfileForModel(this._modelId, this.profile, {
-        locale: this._locale,
-        snippets: this.snippets
-      });
-      // Get the corresponding editor profile for the model.
-      // The editor profile contains the specialized profile for the UI.
-      this._editorProfile = arcadeDefaults.getEditorProfileForModel(this._modelId);
+    // #endregion
+    // #region Private methods API
+    async _updateEditorProfile() {
+        // The goal is to
+        // - convert the runtime profile into a specialized instance that will serve the UI better.
+        // - extract the language service  profile that is specialized for completion and validation
+        this._preparingProfile = true;
+        try {
+            // Set a new profile for the model using the profile definition and the locale.
+            await arcadeDefaults.setProfileForModel(this._modelId, this.profile, {
+                locale: this._t9nLocale,
+                snippets: this.snippets
+            });
+            // Get the corresponding editor profile for the model.
+            // The editor profile contains the specialized profile for the UI.
+            this._editorProfile = arcadeDefaults.getEditorProfileForModel(this._modelId);
+        }
+        catch {
+            this._editorProfile = undefined;
+        }
+        finally {
+            this._editorProfilePromise = Promise.resolve(this._editorProfile);
+            this._preparingProfile = false;
+        }
     }
-    catch (e) {
-      this._editorProfile = undefined;
+    // #endregion
+    //#region Render Main Action Bar
+    renderMainActionBar() {
+        if (!this.testData) {
+            return null;
+        }
+        return (h$1("calcite-action-bar", { class: "main-action-bar", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h$1("calcite-action-group", { scale: "s" }, h$1("calcite-action", { text: this._t9nStrings?.run ?? "Run", "text-enabled": true, icon: "play", scale: "s", loading: this._preparingProfile, onClick: this._executeScript }), this._executionResult ? (h$1("calcite-action", { text: this._t9nStrings?.lastresults ?? "Last results", active: this._showExecutionPanel, "text-enabled": true, icon: "access-string-results", iconFlipRtl: true, scale: "s", onClick: this._toggleShowExecutionPanel })) : null)));
     }
-    finally {
-      this._editorProfilePromise = Promise.resolve(this._editorProfile);
-      this._preparingProfile = false;
+    //#endregion
+    //#region Render Main Panel
+    renderMainPanel() {
+        return (
+        // <div class="flex-adjustable">
+        h$1("arcgis-code-editor", { class: "flex-adjustable", language: arcadeDefaults.languageId, value: this.script ?? "", modelId: this._modelId, onValueChange: this._emitScriptChange, ref: (e) => (this._codeEditorElt = e) })
+        // </div>
+        );
     }
-  }
-  // #endregion
-  //#region Render Main Action Bar
-  renderMainActionBar() {
-    if (!this.testData) {
-      return null;
+    //#endregion
+    //#region Rendering the Action Bar
+    renderAction({ id, label, icon, active, panelName, onClick = this._toggleSidePanel }) {
+        return (h$1(Fragment, null, h$1("calcite-action", { id: id, text: label, icon: icon, active: active, onClick: onClick, "data-panel-name": panelName }), !this.sideActionBarExpanded && (h$1("calcite-tooltip", { label: label, "reference-element": id }, h$1("span", null, label)))));
     }
-    return (h$1("calcite-action-bar", { class: "main-action-bar", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h$1("calcite-action-group", { layout: "horizontal", scale: "s" }, h$1("calcite-action", { text: this._t9nStrings?.run ?? "Run", "text-enabled": true, icon: "play", scale: "s", loading: this._preparingProfile, onClick: this._executeScript }), this._executionResult ? (h$1("calcite-action", { text: this._t9nStrings?.lastresults ?? "Last results", active: this._showExecutionPanel, "text-enabled": true, icon: "access-string-results", iconFlipRtl: true, scale: "s", onClick: this._toggleShowExecutionPanel })) : null)));
-  }
-  //#endregion
-  //#region Render Main Panel
-  renderMainPanel() {
-    return (
-    // <div class="flex-adjustable">
-    h$1("arcgis-code-editor", { class: "flex-adjustable", language: arcadeDefaults.languageId, value: this.script ?? "", modelId: this._modelId, onValueChange: this._emitScriptChange, ref: (e) => (this._codeEditorElt = e) })
-    // </div>
-    );
-  }
-  //#endregion
-  //#region Rendering the Action Bar
-  renderSideActionBar() {
-    if (this.hideSideBar) {
-      return null;
+    renderSideActionBar() {
+        if (this.hideSideBar) {
+            return null;
+        }
+        console.log("expanded", this.sideActionBarExpanded);
+        return (h$1("calcite-action-bar", { class: "side-action-bar border-inline-start", expanded: !!this.sideActionBarExpanded, position: "end", onCalciteActionBarToggle: this._toggleSideActionBarExpanded }, h$1("calcite-action-group", null, this.renderAction({
+            id: "profile-variables-action",
+            label: this._t9nStrings?.profilevariables ?? "Profile variables",
+            icon: "profile-variables",
+            active: this.openedSidePanel === "variables",
+            panelName: "variables"
+        }), this.renderAction({
+            id: "function-action",
+            label: this._t9nStrings?.constantsandfunctions ?? "Constants and functions",
+            icon: "function",
+            active: this.openedSidePanel === "api",
+            panelName: "api"
+        }), this.suggestions?.length
+            ? this.renderAction({
+                id: "suggestions-action",
+                label: this._t9nStrings?.suggestions ?? "Suggestions",
+                icon: "lightbulb",
+                active: this.openedSidePanel === "suggestions",
+                panelName: "suggestions"
+            })
+            : null, this.hideDocumentationActions
+            ? null
+            : this.renderAction({
+                id: "developer-website-action",
+                label: this._t9nStrings?.help ?? "Help",
+                icon: "question",
+                active: false,
+                panelName: "none",
+                onClick: this._openArcadeHelp
+            }))));
     }
-    return (h$1("calcite-action-bar", { class: "side-action-bar border-inline-start", expanded: !!this.sideActionBarExpanded, position: "end", onCalciteActionBarToggle: this._toggleSideActionBarExpanded }, h$1("calcite-action-group", null, h$1("calcite-action", { id: "profile-variables-action", text: this._t9nStrings?.profilevariables ?? "Profile variables", icon: "profile-variables", active: this.openedSidePanel === "variables", onClick: this._toggleSidePanel, "data-panel-name": "variables" }), h$1("calcite-action", { id: "function-action", text: this._t9nStrings?.constantsandfunctions ?? "Constants and functions", icon: "function", active: this.openedSidePanel === "api", onClick: this._toggleSidePanel, "data-panel-name": "api" }), this.suggestions?.length ? (h$1(Fragment, null, h$1("calcite-action", { id: "suggestions-action", text: this._t9nStrings?.suggestions ?? "Suggestions", icon: "lightbulb", active: this.openedSidePanel === "suggestions", onClick: this._toggleSidePanel, "data-panel-name": "suggestions" }))) : null, this.hideDocumentationActions ? null : (h$1(Fragment, null, h$1("calcite-action", { id: "developer-website-action", text: this._t9nStrings?.help ?? "Help", icon: "question", iconFlipRtl: this._locale === "ar", onClick: this._openArcadeHelp }))))));
-  }
-  // private renderTooltip(id: string, label: string | undefined): VNode | null {
-  //   if (this.sideActionBarExpanded || !label) {
-  //     return null;
-  //   }
-  //   return (
-  //     <calcite-tooltip label={label} reference-element={id} placement="leading-start">
-  //       <span>{label}</span>
-  //     </calcite-tooltip>
-  //   );
-  // }
-  //#endregion
-  //#region Render Side Panel
-  renderSidePanel() {
-    if (this.hideSideBar) {
-      return null;
+    //#endregion
+    //#region Render Side Panel
+    renderSidePanel() {
+        if (this.hideSideBar) {
+            return null;
+        }
+        switch (this.openedSidePanel) {
+            case "api":
+                return (h$1("arcgis-arcade-api", { class: "side-panel flex-panel border-inline-start", modelId: this._modelId, hideDocumentationActions: this.hideDocumentationActions, onItemSelected: void this._insertAsSnippet, onClose: void this._toggleSidePanel, "data-panel-name": "none" }));
+            case "variables":
+                return (h$1("arcgis-arcade-variables", { class: "side-panel flex-panel border-inline-start", loading: this._preparingProfile, modelId: this._modelId, onItemSelected: void this._insertAsText, onClose: void this._toggleSidePanel, "data-panel-name": "none" }));
+            case "suggestions":
+                return (h$1("arcgis-arcade-suggestions", { class: "side-panel flex-panel border-inline-start", suggestions: this.suggestions, onItemSelected: void this._insertAsText, onClose: void this._toggleSidePanel, "data-panel-name": "none" }));
+            default:
+                return null;
+        }
     }
-    switch (this.openedSidePanel) {
-      case "api":
-        return (h$1("arcgis-arcade-api", { class: "side-panel flex-panel border-inline-start", modelId: this._modelId, hideDocumentationActions: this.hideDocumentationActions, onItemSelected: this._insertAsSnippet, onClose: this._toggleSidePanel, "data-panel-name": "none" }));
-      case "variables":
-        return (h$1("arcgis-arcade-variables", { class: "side-panel flex-panel border-inline-start", loading: this._preparingProfile, modelId: this._modelId, onItemSelected: this._insertAsText, onClose: this._toggleSidePanel, "data-panel-name": "none" }));
-      case "suggestions":
-        return (h$1("arcgis-arcade-suggestions", { class: "side-panel flex-panel border-inline-start", suggestions: this.suggestions, onItemSelected: this._insertAsText, onClose: this._toggleSidePanel, "data-panel-name": "none" }));
-      default:
-        return null;
+    //#endregion
+    //#region Rendering Results Panel
+    renderResultsPanel() {
+        if (!this._showExecutionPanel) {
+            return null;
+        }
+        return (h$1("arcgis-arcade-results", { class: "flex-adjustable", openedResultPanel: this._resultPanel, loading: this._executingScript, result: this._executionResult, consoleLogs: this._consoleLogs, onOpenedResultPanelChange: this._onResultPanelChange, onClose: this._onExecutionPanelClose }));
     }
-  }
-  //#endregion
-  //#region Rendering Results Panel
-  renderResultsPanel() {
-    if (!this._showExecutionPanel) {
-      return null;
+    //#endregion
+    //#region Render
+    render() {
+        return (h$1(Host, null, this.renderMainActionBar(), h$1("div", { class: "flex-row flex-adjustable" }, h$1("div", { class: "flex-column flex-adjustable" }, this.renderMainPanel(), this.renderResultsPanel()), this.renderSidePanel(), this.renderSideActionBar())));
     }
-    return (h$1("arcgis-arcade-results", { class: "flex-adjustable", openedResultPanel: this._resultPanel, loading: this._executingScript, result: this._executionResult, consoleLogs: this._consoleLogs, onOpenedResultPanelChange: this._onResultPanelChange, onClose: this._onExecutionPanelClose }));
-  }
-  //#endregion
-  //#region Render
-  render() {
-    return (h$1(Host, null, this.renderMainActionBar(), h$1("div", { class: "flex-row flex-adjustable" }, h$1("div", { class: "flex-column flex-adjustable" }, this.renderMainPanel(), this.renderResultsPanel()), this.renderSidePanel(), this.renderSideActionBar())));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElt() { return this; }
-  static get watchers() { return {
-    "profile": ["_profileChanged"],
-    "testData": ["_testDataChanged"],
-    "snippets": ["_snippetChanged"]
-  }; }
-  static get style() { return arcadeEditorCss; }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElement() { return this; }
+    static get watchers() { return {
+        "profile": ["_profileChanged"],
+        "testData": ["_testDataChanged"],
+        "snippets": ["_snippetChanged"]
+    }; }
+    static get style() { return arcadeEditorCss; }
 }, [0, "arcgis-arcade-editor", {
-    "profile": [16],
-    "script": [1],
-    "testData": [16],
-    "suggestions": [16],
-    "snippets": [16],
-    "hideDocumentationActions": [4, "hide-documentation-actions"],
-    "hideSideBar": [4, "hide-side-bar"],
-    "sideActionBarExpanded": [1540, "side-action-bar-expanded"],
-    "openedSidePanel": [1537, "opened-side-panel"],
-    "_locale": [32],
-    "_t9nStrings": [32],
-    "_standaloneCodeEditor": [32],
-    "_preparingProfile": [32],
-    "_editorProfile": [32],
-    "_showExecutionPanel": [32],
-    "_resultPanel": [32],
-    "_executingScript": [32],
-    "_consoleLogs": [32],
-    "_executionResult": [32],
-    "getScript": [64],
-    "setFocus": [64],
-    "getEditorInstance": [64],
-    "getTestResult": [64],
-    "getOutputType": [64],
-    "updateThemeColors": [64]
-  }]);
+        "profile": [16],
+        "script": [1],
+        "testData": [16],
+        "suggestions": [16],
+        "snippets": [16],
+        "hideDocumentationActions": [4, "hide-documentation-actions"],
+        "hideSideBar": [4, "hide-side-bar"],
+        "sideActionBarExpanded": [1540, "side-action-bar-expanded"],
+        "openedSidePanel": [1537, "opened-side-panel"],
+        "_lang": [32],
+        "_t9nLocale": [32],
+        "_t9nStrings": [32],
+        "_standaloneCodeEditor": [32],
+        "_preparingProfile": [32],
+        "_editorProfile": [32],
+        "_showExecutionPanel": [32],
+        "_resultPanel": [32],
+        "_executingScript": [32],
+        "_consoleLogs": [32],
+        "_executionResult": [32],
+        "getScript": [64],
+        "setFocus": [64],
+        "getEditorInstance": [64],
+        "getTestResult": [64],
+        "updateThemeColors": [64]
+    }, undefined, {
+        "profile": ["_profileChanged"],
+        "testData": ["_testDataChanged"],
+        "snippets": ["_snippetChanged"]
+    }]);
 function defineCustomElement$1() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["arcgis-arcade-editor", "arcgis-arcade-api", "arcgis-arcade-results", "arcgis-arcade-suggestions", "arcgis-arcade-variables", "arcgis-code-editor"];
-  components.forEach(tagName => { switch (tagName) {
-    case "arcgis-arcade-editor":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ArcgisArcadeEditor$1);
-      }
-      break;
-    case "arcgis-arcade-api":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$6();
-      }
-      break;
-    case "arcgis-arcade-results":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$5();
-      }
-      break;
-    case "arcgis-arcade-suggestions":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$4();
-      }
-      break;
-    case "arcgis-arcade-variables":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$3();
-      }
-      break;
-    case "arcgis-code-editor":
-      if (!customElements.get(tagName)) {
-        defineCustomElement$2();
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["arcgis-arcade-editor", "arcgis-arcade-api", "arcgis-arcade-results", "arcgis-arcade-suggestions", "arcgis-arcade-variables", "arcgis-code-editor"];
+    components.forEach(tagName => { switch (tagName) {
+        case "arcgis-arcade-editor":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ArcgisArcadeEditor$1);
+            }
+            break;
+        case "arcgis-arcade-api":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "arcgis-arcade-results":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "arcgis-arcade-suggestions":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "arcgis-arcade-variables":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "arcgis-code-editor":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
 }
 defineCustomElement$1();