@arcgis/coding-components 4.30.0-next.9 → 4.31.0-next.0

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

@@ -1,14 +1,16 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
- * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.9
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.0
  */
-import { proxyCustomElement, HTMLElement, createEvent, h as h$1, Fragment, Host } from '@stencil/core/internal/client';
-import { editor, KeyCode } from 'monaco-editor';
+import { proxyCustomElement, HTMLElement, createEvent, forceUpdate, h, Fragment, Host } from '@stencil/core/internal/client';
+import { KeyCode } from 'monaco-editor';
 import { e as executeScript, D as DevelopersWebSitePath, d as defineCustomElement$5 } from './arcade-results.js';
-import { h, U, k, B, q } from './index2.js';
-import { s as setupMonacoEnvironment, a as getArcadeDiagnosticService } from './arcade-contribution.js';
+import { u as updateThemeColors, c as colorRulesKeys, s as setupMonacoEnvironment, a as getArcadeDiagnosticService } from './arcade-contribution.js';
+import { u as useControllerManager } from './chunk-63RMNUHL.js';
+import { D as Deferred, p as generateGuid, q as getElementTheme } from './index2.js';
 import { b as arcadeDefaults } from './arcade-defaults.js';
+import { u as useT9n } from './useT9n.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';
@@ -19,77 +21,19 @@ import "@esri/calcite-components/dist/components/calcite-action.js";
 import "@esri/calcite-components/dist/components/calcite-tooltip.js";
 import { getArcgisAssetPath as getAssetPath } from "./arcgis-assets.js";
 
-const themeConfig = {
-	"arcade-light-theme": {
-	comment: "#606060",
-	constant: "#9809C8",
-	date: "#296389",
-	identifier: "#0000B3",
-	keyword: "#BF4900",
-	number: "#136D3D",
-	string: "#A31515"
-},
-	"arcade-dark-theme": {
-	comment: "#BFBFBF",
-	constant: "#CDBAEA",
-	date: "#97A6CE",
-	identifier: "#9FD4F3",
-	keyword: "#EEAA5A",
-	number: "#AAD04B",
-	string: "#F2877B"
-}
-};
+const arcadeEditorCss = "arcgis-arcade-editor{display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid var(--calcite-color-border-3);box-sizing:border-box;background-color:var(--calcite-color-foreground-1);height:100%}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-xxs);padding:var(--calcite-spacing-sm);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-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}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-sm)}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}";
 
-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: {}
-        });
-    });
-}
-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 = [];
-    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-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 __cmpMeta = [0,"arcgis-arcade-editor",{"profile":[1040],"script":[1025],"testData":[1040],"suggestions":[1040],"snippets":[1040],"hideDocumentationActions":[1028,"hide-documentation-actions"],"hideSideBar":[1028,"hide-side-bar"],"sideActionBarExpanded":[1540,"side-action-bar-expanded"],"openedSidePanel":[1537,"opened-side-panel"],"editorOptions":[1040],"editorInstance":[1040],"messages":[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"]}];
 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.constructor.__registerControllers = ()=>__cmpMeta[2]??{};
+        this.arcgisScriptChange = createEvent(this, "arcgisScriptChange", 3);
+        this.arcgisDiagnosticsChange = createEvent(this, "arcgisDiagnosticsChange", 3);
+        this.manager = useControllerManager(this,forceUpdate);
+        this._componentReadyDefer = new Deferred();
+        this._modelId = generateGuid();
         this._editorProfilePromise = Promise.resolve(undefined);
         this._disposables = [];
         this._executeScript = async () => {
@@ -130,18 +74,16 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
             }
         };
         this._openArcadeHelp = () => void window.open(DevelopersWebSitePath, "Arcade Help");
-        this._emitScriptChange = (e) => {
+        this._onCodeEditorValueChange = (e) => {
             e.stopPropagation();
-            this.scriptChange.emit(e.detail);
+            this.script = e.detail;
+            this.arcgisScriptChange.emit(e.detail);
         };
         this._insertAsSnippet = (e) => void this._codeEditorElt?.insertSnippet(e.detail).catch(console.error);
         this._insertAsText = (e) => void this._codeEditorElt?.insertText(e.detail).catch(console.error);
         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.messages = useT9n();
         this._preparingProfile = false;
         this._editorProfile = undefined;
         this._showExecutionPanel = false;
@@ -159,6 +101,10 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
         this.sideActionBarExpanded = false;
         this.openedSidePanel = "none";
         this.editorOptions = undefined;
+        this.editorInstance = this.manager.getSet(undefined, {
+            get: () => this._codeEditorElt?.editorInstance,
+            set: "ignore",
+        });
     }
     _profileChanged() {
         this._updateEditorProfile().catch(console.error);
@@ -171,18 +117,17 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
     }
     _snippetChanged() {
         arcadeDefaults.updateApiContextForModel(this._modelId, {
-            snippets: this.snippets
+            snippets: this.snippets,
         });
     }
     // #endregion
     // #region Public methods API
     /**
-     * Returns the current script.
-     * @returns {Promise<string>}
+     * @deprecated Use `script` property instead.
      */
     async getScript() {
         await this._componentReadyDefer.promise;
-        return await this._codeEditorElt?.getValue();
+        return this._codeEditorElt?.value;
     }
     /**
      * Set the focus on the element.
@@ -193,12 +138,11 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
     }
     /**
      * @internal
-     * Returns the editor instance.
-     * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
+     * @deprecated Use `editorInstance` property instead.
      */
     async getEditorInstance() {
         await this._componentReadyDefer.promise;
-        return await this._codeEditorElt?.getEditorInstance();
+        return this._codeEditorElt?.editorInstance;
     }
     /**
      * Returns the Arcade result for the script for the provided test data.
@@ -220,11 +164,11 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
      * @internal
      */
     async updateThemeColors(colorRules) {
-        const theme = k(this._hostElement);
+        const theme = getElementTheme(this.el);
         updateThemeColors(theme, colorRules);
         if (colorRules === undefined) {
             colorRulesKeys.forEach((key) => {
-                this._hostElement.style.removeProperty(`--arcgis-arcade-editor-${key}`);
+                this.el.style.removeProperty(`--arcgis-arcade-editor-${key}`);
             });
             return;
         }
@@ -233,7 +177,7 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
             if (!foreground) {
                 return;
             }
-            this._hostElement.style.setProperty(`--arcgis-arcade-editor-${key}`, foreground);
+            this.el.style.setProperty(`--arcgis-arcade-editor-${key}`, foreground);
         });
     }
     // #endregion
@@ -241,14 +185,13 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
     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.
+        // Normally, it is the code editor that is responsible for setting up the Monaco environment.
         // 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._updateEditorProfile();
+        // The profile has to be refreshed on locale change
+        this.manager.watch("messages", () => void this._updateEditorProfile().catch(console.error));
     }
     async componentDidLoad() {
         // Mark on component as ready.
@@ -257,10 +200,9 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
         // 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)));
+        this._disposables.push(diagnosticsService.onDiagnosticsChange((event) => !this._preparingProfile && this.arcgisDiagnosticsChange.emit(event.diagnostics)));
         // Get editor instance and add action
-        this._standaloneCodeEditor = await this.getEditorInstance();
-        this._standaloneCodeEditor?.addAction({
+        this.editorInstance?.addAction({
             // An unique identifier for the action.
             id: "run-script",
             label: "Run Arcade Expression",
@@ -271,12 +213,11 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
                 if (this.testData) {
                     this._executeScript().catch(console.error);
                 }
-            }
+            },
         });
         await this._codeEditorElt?.setFocus();
     }
     disconnectedCallback() {
-        q(this);
         arcadeDefaults.disposeApiContextForModel(this._modelId);
         arcadeDefaults.disposeEditorProfileForModel(this._modelId);
         while (this._disposables.length) {
@@ -293,8 +234,8 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
         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
+                locale: this.messages._t9nLocale,
+                snippets: this.snippets,
             });
             // Get the corresponding editor profile for the model.
             // The editor profile contains the specialized profile for the UI.
@@ -314,51 +255,51 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
         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)));
+        return (h("calcite-action-bar", { class: "main-action-bar", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h("calcite-action-group", { scale: "s" }, h("calcite-action", { text: this.messages.run ?? "Run", "text-enabled": true, icon: "play", scale: "s", loading: this._preparingProfile, onClick: this._executeScript }), this._executionResult ? (h("calcite-action", { text: this.messages.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 (h$1("arcgis-code-editor", { class: "flex-adjustable", language: arcadeDefaults.languageId, value: this.script ?? "", modelId: this._modelId, options: this.editorOptions, onValueChange: this._emitScriptChange, ref: (e) => (this._codeEditorElt = e) }));
+        return (h("arcgis-code-editor", { class: "flex-adjustable", language: arcadeDefaults.languageId, value: this.script ?? "", modelId: this._modelId, options: this.editorOptions, onArcgisValueChange: this._onCodeEditorValueChange, ref: (e) => (this._codeEditorElt = e) }));
     }
     //#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)))));
+    renderAction({ id, label, icon, active, panelName, onClick = this._toggleSidePanel, }) {
+        return (h(Fragment, null, h("calcite-action", { id: id, text: label, icon: icon, active: active, onClick: onClick, "data-panel-name": panelName }), !this.sideActionBarExpanded && (h("calcite-tooltip", { label: label, "reference-element": id }, h("span", null, label)))));
     }
     renderSideActionBar() {
         if (this.hideSideBar) {
             return null;
         }
-        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({
+        return (h("calcite-action-bar", { class: "side-action-bar border-inline-start", expanded: !!this.sideActionBarExpanded, position: "end", onCalciteActionBarToggle: this._toggleSideActionBarExpanded }, h("calcite-action-group", null, this.renderAction({
             id: "profile-variables-action",
-            label: this._t9nStrings?.profilevariables ?? "Profile variables",
+            label: this.messages.profilevariables ?? "Profile variables",
             icon: "profile-variables",
             active: this.openedSidePanel === "variables",
-            panelName: "variables"
+            panelName: "variables",
         }), this.renderAction({
             id: "function-action",
-            label: this._t9nStrings?.constantsandfunctions ?? "Constants and functions",
+            label: this.messages.constantsandfunctions ?? "Constants and functions",
             icon: "function",
             active: this.openedSidePanel === "api",
-            panelName: "api"
+            panelName: "api",
         }), this.suggestions?.length
             ? this.renderAction({
                 id: "suggestions-action",
-                label: this._t9nStrings?.suggestions ?? "Suggestions",
+                label: this.messages.suggestions ?? "Suggestions",
                 icon: "lightbulb",
                 active: this.openedSidePanel === "suggestions",
-                panelName: "suggestions"
+                panelName: "suggestions",
             })
             : null, this.hideDocumentationActions
             ? null
             : this.renderAction({
                 id: "developer-website-action",
-                label: this._t9nStrings?.help ?? "Help",
+                label: this.messages.help ?? "Help",
                 icon: "question",
                 active: false,
                 panelName: "none",
-                onClick: this._openArcadeHelp
+                onClick: this._openArcadeHelp,
             }))));
     }
     //#endregion
@@ -369,11 +310,11 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
         }
         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" }));
+                return (h("arcgis-arcade-api", { class: "side-panel flex-panel border-inline-start", modelId: this._modelId, hideDocumentationActions: this.hideDocumentationActions, onArcgisItemSelected: this._insertAsSnippet, onArcgisClose: 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" }));
+                return (h("arcgis-arcade-variables", { class: "side-panel flex-panel border-inline-start", loading: this._preparingProfile, modelId: this._modelId, onArcgisItemSelected: this._insertAsText, onArcgisClose: 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" }));
+                return (h("arcgis-arcade-suggestions", { class: "side-panel flex-panel border-inline-start", suggestions: this.suggestions, onArcgisItemSelected: this._insertAsText, onArcgisClose: this._toggleSidePanel, "data-panel-name": "none" }));
             default:
                 return null;
         }
@@ -384,53 +325,22 @@ const ArcgisArcadeEditor$1 = /*@__PURE__*/ proxyCustomElement(class ArcgisArcade
         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 }));
+        return (h("arcgis-arcade-results", { class: "flex-adjustable", openedResultPanel: this._resultPanel, loading: this._executingScript, result: this._executionResult, consoleLogs: this._consoleLogs, onArcgisOpenedResultPanelChange: this._onResultPanelChange, onArcgisClose: 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())));
+        return (h(Host, null, this.renderMainActionBar(), h("div", { class: "flex-row flex-adjustable" }, h("div", { class: "flex-column flex-adjustable" }, this.renderMainPanel(), this.renderResultsPanel()), this.renderSidePanel(), this.renderSideActionBar())));
     }
     static get assetsDirs() { return ["assets"]; }
-    get _hostElement() { return this; }
+    get el() { 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"],
-        "editorOptions": [16],
-        "_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"]
-    }]);
+}, __cmpMeta);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
- * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.9
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.0
  */
 import { A as ArcgisArcadeResults$1, d as defineCustomElement$1 } from './arcade-results.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
- * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.9
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.0
  */
 import { A as ArcgisArcadeSuggestions$1, d as defineCustomElement$1 } from './arcade-suggestions.js';
 

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
- * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.9
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.0
  */
 import { A as ArcgisArcadeVariables$1, d as defineCustomElement$1 } from './arcade-variables.js';
 

package/dist/components/arcgis-assets.d.ts

@@ -1,8 +1,8 @@
 
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
- * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.9
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.0
  */
 /**
  * Get the base path to where the package assets can be found.

package/dist/components/arcgis-assets.js

@@ -1,8 +1,8 @@
 
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
- * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.9
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.0
  */
 let resourceUrl = "https://js.arcgis.com/coding-components/next/";
 export const getArcgisAssetPath = (path) => {

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

@@ -1,7 +1,7 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
- * See https://js.arcgis.com/4.30/esri/copyright.txt for details.
- * v4.30.0-next.9
+ * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
+ * v4.31.0-next.0
  */
 import { A as ArcgisCodeEditor$1, d as defineCustomElement$1 } from './code-editor.js';