@arcgis/coding-components 4.29.0-beta.47 → 4.29.0-beta.49

package/dist/esm/arcgis-arcade-api_6.entry.js

@@ -1,37 +1,37 @@
-import { h, r as registerInstance, c as createEvent, g as getAssetPath, H as Host, a as getElement, F as Fragment } from './index-fd6b2fd8.js';
-import { g as generateTokensCSSForColorMap, e as editor, S as StandaloneServices, I as IStandaloneThemeService, c as createCommonjsModule, b as commonjsGlobal, X, V, i as importRequest, l as languages, d as arcadeDefaults, F, U as Uri, f as U, O, h as filterCollection, q, j as importArcade, p, k as j, P, K as KeyCode, H, z, s as supportedFields, B, R as Range, T, m as KeyMod } from './arcade-defaults-d7893362.js';
+import { h, r as registerInstance, c as createEvent, g as getAssetPath, H as Host, a as getElement, F as Fragment } from './index-022fb97b.js';
+import { g as generateTokensCSSForColorMap, e as editor, S as StandaloneServices, I as IStandaloneThemeService, c as createCommonjsModule, b as commonjsGlobal, X, V, i as importRequest, l as languages, d as arcadeDefaults, F, U as Uri, f as U, O, h as filterCollection, q, j as importArcade, p, $, P, K as KeyCode, H, z, s as supportedFields, B, R as Range, T, k as KeyMod } from './arcade-defaults-0bafa696.js';
 
 async function colorizeCode(code) {
-  return editor.colorize(code, "arcade", { tabSize: 2 });
+    return editor.colorize(code, "arcade", { tabSize: 2 });
 }
 async function colorizedAllCodeElements(e) {
-  if (!e) {
-    return;
-  }
-  const codeElements = Array.from(e.querySelectorAll("code.language-arcade"));
-  await Promise.all(codeElements.map(async (codeElement) => await colorizeCodeElement(codeElement, codeElement.textContent)));
+    if (!e) {
+        return;
+    }
+    const codeElements = Array.from(e.querySelectorAll("code.language-arcade"));
+    await Promise.all(codeElements.map(async (codeElement) => await colorizeCodeElement(codeElement, codeElement.textContent)));
 }
 async function colorizeCodeElement(e, text) {
-  if (!e || e.tagName !== "CODE") {
-    return;
-  }
-  e.innerHTML = await colorizeCode(text ?? "");
+    if (!e || e.tagName !== "CODE") {
+        return;
+    }
+    e.innerHTML = await colorizeCode(text ?? "");
 }
 function generateColorizeStyles() {
-  const themeService = StandaloneServices.get(IStandaloneThemeService);
-  const theme = themeService.getColorTheme();
-  return generateTokensCSSForColorMap(theme.tokenTheme.getColorMap());
+    const themeService = StandaloneServices.get(IStandaloneThemeService);
+    const theme = themeService.getColorTheme();
+    return generateTokensCSSForColorMap(theme.tokenTheme.getColorMap());
 }
 function onColorizeThemeChanged(func) {
-  const themeService = StandaloneServices.get(IStandaloneThemeService);
-  return themeService.onDidColorThemeChange(() => func());
+    const themeService = StandaloneServices.get(IStandaloneThemeService);
+    return themeService.onDidColorThemeChange(() => func());
 }
 
 const StickyFilterInput = ({ filterValue, ...rest }) => (
 // TODO: Remove when calcite-input bug with scale is fixed
 // @ts-expect-error
 h("div", { class: "sticky", scale: "m" },
-  h("calcite-input", { value: filterValue, icon: "magnifying-glass", clearable: true, ...rest })));
+    h("calcite-input", { value: filterValue, icon: "magnifying-glass", clearable: true, ...rest })));
 
 var marked_umd = createCommonjsModule(function (module, exports) {
 /**
@@ -2911,76 +2911,76 @@ var marked_umd = createCommonjsModule(function (module, exports) {
 });
 
 marked_umd.marked.use({
-  gfm: true,
-  renderer: {
-    link(href, title, text) {
-      return `<calcite-link href="${href}" title="${title ?? text}" target="Arcade Help">${text}</calcite-link>`;
+    gfm: true,
+    renderer: {
+        link(href, title, text) {
+            return `<calcite-link href="${href}" title="${title ?? text}" target="Arcade Help">${text}</calcite-link>`;
+        }
     }
-  }
 });
 function convertMarkdownString(value) {
-  value = value ?? "";
-  const result = marked_umd.marked(typeof value === "string" ? value : value.value, {
-    gfm: true,
-    breaks: true,
-    headerIds: false,
-    mangle: false
-  });
-  return result;
+    value ?? (value = "");
+    const result = marked_umd.marked(typeof value === "string" ? value : value.value, {
+        gfm: true,
+        breaks: true,
+        headerIds: false,
+        mangle: false
+    });
+    return result;
 }
 
 function isMonacoEnvironmentSetup() {
-  return !!self.MonacoEnvironment?.getWorkerUrl;
+    return !!globalThis.MonacoEnvironment?.getWorkerUrl;
 }
 const additionalLanguageWorkersMap = new Map();
 function getAssetsPath() {
-  return self.MonacoEnvironment?.assetsPath;
+    return globalThis.MonacoEnvironment?.assetsPath;
 }
 function setupMonacoEnvironment(assetsPath) {
-  //
-  // Check if the worker loading logic has already been defined.
-  if (isMonacoEnvironmentSetup()) {
-    return;
-  }
-  // Since we are using workers, monaco needs to find them.
-  // Using the global MonacoEnvironment.
-  self.MonacoEnvironment = {
-    assetsPath,
-    getWorker: async (_, languageId) => {
-      // Manufacture the url for the web worker
-      let url = additionalLanguageWorkersMap.get(languageId) ?? `${assetsPath}/code-editor/editor.worker.js`;
-      switch (languageId) {
-        case "json":
-          url = `${assetsPath}/code-editor/json.worker.js`;
-          break;
-        case "css":
-          url = `${assetsPath}/code-editor/css.worker.js`;
-          break;
-        case "html":
-          url = `${assetsPath}/code-editor/html.worker.js`;
-          break;
-        case "typescript":
-        case "javascript":
-          url = `${assetsPath}/code-editor/ts.worker.js`;
-          break;
-        case "arcade":
-          url = `${assetsPath}/code-editor/arcade.worker.js`;
-          break;
-      }
-      // If we have a relative path or we are on same orgin, we can use the default js implementation
-      if (!X(url) || V(url, location.href, true)) {
-        return new Worker(url, { name: languageId });
-      }
-      // For cross orgin, we will load the worker code as a string and manufacture a blob
-      const esriRequest = await importRequest();
-      const response = await esriRequest(url, {
-        responseType: "text"
-      });
-      return new Worker(URL.createObjectURL(new Blob([response.data], {
-        type: "text/javascript"
-      })));
+    //
+    // Check if the worker loading logic has already been defined.
+    if (isMonacoEnvironmentSetup()) {
+        return;
     }
-  };
+    // Since we are using workers, monaco needs to find them.
+    // Using the global MonacoEnvironment.
+    globalThis.MonacoEnvironment = {
+        assetsPath,
+        getWorker: async (_, languageId) => {
+            // Manufacture the url for the web worker
+            let url = additionalLanguageWorkersMap.get(languageId) ?? `${assetsPath}/code-editor/editor.worker.js`;
+            switch (languageId) {
+                case "json":
+                    url = `${assetsPath}/code-editor/json.worker.js`;
+                    break;
+                case "css":
+                    url = `${assetsPath}/code-editor/css.worker.js`;
+                    break;
+                case "html":
+                    url = `${assetsPath}/code-editor/html.worker.js`;
+                    break;
+                case "typescript":
+                case "javascript":
+                    url = `${assetsPath}/code-editor/ts.worker.js`;
+                    break;
+                case "arcade":
+                    url = `${assetsPath}/code-editor/arcade.worker.js`;
+                    break;
+            }
+            // If we have a relative path or we are on same orgin, we can use the default js implementation
+            if (!X(url) || V(url, globalThis.location.href, true)) {
+                return new Worker(url, { name: languageId });
+            }
+            // For cross orgin, we will load the worker code as a string and manufacture a blob
+            const esriRequest = await importRequest();
+            const response = await esriRequest(url, {
+                responseType: "text"
+            });
+            return new Worker(URL.createObjectURL(new Blob([response.data], {
+                type: "text/javascript"
+            })));
+        }
+    };
 }
 
 /**
@@ -2995,8 +2995,8 @@ function setupMonacoEnvironment(assetsPath) {
  * ```
  */
 async function getArcadeDiagnosticService() {
-  const mode = await getMode();
-  return mode.getArcadeDiagnosticService();
+    const mode = await getMode();
+    return mode.getArcadeDiagnosticService();
 }
 /**
  * Returns the arcade worker for the model.
@@ -3007,180 +3007,180 @@ async function getArcadeDiagnosticService() {
  * @returns arcade worker
  */
 async function getArcadeWorker(uri) {
-  const mode = await getMode();
-  return mode.getArcadeWorker(uri);
+    const mode = await getMode();
+    return mode.getArcadeWorker(uri);
 }
 /**
  * Request the arcade mode
  * @returns mode for arcade
  */
 function getMode() {
-  return import('./arcade-mode-70e22d22.js');
+    return import('./arcade-mode-c17a1fa1.js');
 }
 // Register the language in Monaco
 languages.register({
-  id: arcadeDefaults.languageId,
-  aliases: ["Arcade", "arcade"],
-  extensions: [".arc"],
-  mimetypes: ["application/arcade"]
+    id: arcadeDefaults.languageId,
+    aliases: ["Arcade", "arcade"],
+    extensions: [".arc"],
+    mimetypes: ["application/arcade"]
 });
 // An event emitted when a language is first time needed
 languages.onLanguage(arcadeDefaults.languageId, async () => {
-  // Setup the assets path on the arcadeDefaults
-  arcadeDefaults.setLanguageOptions({ assetsPath: `${getAssetsPath() ?? "."}/arcade-language` });
-  // Async import the language mode
-  const mode = await getMode();
-  // Setup the language mode
-  mode.setupMode(arcadeDefaults);
+    // Setup the assets path on the arcadeDefaults
+    arcadeDefaults.setLanguageOptions({ assetsPath: `${getAssetsPath() ?? "."}/arcade-language` });
+    // Async import the language mode
+    const mode = await getMode();
+    // Setup the language mode
+    mode.setupMode(arcadeDefaults);
 });
 
 const arcadeApiCss = ":host{background-color:var(--calcite-ui-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-ui-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}:host calcite-block p:first-of-type{margin-top:0}:host calcite-block code{font-family:var(--calcite-code-family)}:host calcite-block pre{direction:ltr;overflow-x:auto;background-color:var(--calcite-ui-foreground-2);padding:var(--calcite-spacing-half)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}";
 
 const ArcgisArcadeApi = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 3);
-    this.itemSelected = createEvent(this, "itemSelected", 3);
-    this._emitItemSelected = (e) => {
-      // @ts-expect-error
-      const item = e.target?.["data-item"];
-      if (!item) {
-        return;
-      }
-      const keyEvent = e;
-      if (!keyEvent.key || keyEvent.key === "Enter") {
-        e.preventDefault();
-        this.itemSelected.emit(item.completion.insertText);
-      }
-    };
-    this._emitClose = () => this.close.emit();
-    this._emitItemSelectedAndClose = (e) => {
-      if (!e.target) {
-        return;
-      }
-      const keyEvent = e;
-      if (!keyEvent.key || keyEvent.key === "Enter") {
-        e.preventDefault();
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 3);
+        this.itemSelected = createEvent(this, "itemSelected", 3);
+        this._emitItemSelected = (e) => {
+            // @ts-expect-error
+            const item = e.target?.["data-item"];
+            if (!item) {
+                return;
+            }
+            const keyEvent = e;
+            if (!keyEvent.key || keyEvent.key === "Enter") {
+                e.preventDefault();
+                this.itemSelected.emit(item.completion.insertText);
+            }
+        };
+        this._emitClose = () => this.close.emit();
+        this._emitItemSelectedAndClose = (e) => {
+            if (!e.target) {
+                return;
+            }
+            const keyEvent = e;
+            if (!keyEvent.key || keyEvent.key === "Enter") {
+                e.preventDefault();
+                // @ts-expect-error
+                this.itemSelected.emit(e.target["data-item"].completion.insertText);
+            }
+        };
+        this._selectItem = (e) => {
+            if (!e.target) {
+                return;
+            }
+            e.stopPropagation();
+            // @ts-expect-error
+            this._selectedApiItem = e.target["data-item"];
+        };
+        this._unselectItem = async () => {
+            this._selectedApiItem = undefined;
+        };
         // @ts-expect-error
-        this.itemSelected.emit(e.target["data-item"].completion.insertText);
-      }
-    };
-    this._selectItem = (e) => {
-      if (!e.target) {
-        return;
-      }
-      e.stopPropagation();
-      // @ts-expect-error
-      this._selectedApiItem = e.target["data-item"];
-    };
-    this._unselectItem = async () => {
-      this._selectedApiItem = undefined;
-    };
-    // @ts-expect-error
-    this._updateFilterValue = (e) => (this._filterValue = e.target?.["value"] ?? "");
-    this._lang = "";
-    this._t9nLocale = "";
-    this._t9nStrings = undefined;
-    this._selectedApiItem = undefined;
-    this._filterValue = "";
-    this._colorizeStyle = "";
-    this._preparingApi = false;
-    this._apiLibrary = undefined;
-    this.hideDocumentationActions = false;
-    this.modelId = undefined;
-  }
-  //#endregion
-  // #region Component lifecycle events
-  async componentWillLoad() {
-    this._colorizeStyle = generateColorizeStyles();
-    this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
-    await F(this, getAssetPath("./assets"));
-    arcadeDefaults.onModelContextDidChange((key) => {
-      if (!this.modelId || key !== Uri.parse(this.modelId).toString()) {
-        return;
-      }
-      this._updateApiLibrary();
-    });
-    this._updateApiLibrary();
-  }
-  disconnectedCallback() {
-    U(this);
-    this._flowObserver?.disconnect();
-    this._themeChangedListner?.dispose();
-  }
-  // #endregion
-  //#region Private Methods
-  async _updateApiLibrary() {
-    if (!this.modelId) {
-      return;
+        this._updateFilterValue = (e) => (this._filterValue = e.target?.value ?? "");
+        this._lang = "";
+        this._t9nLocale = "";
+        this._t9nStrings = undefined;
+        this._selectedApiItem = undefined;
+        this._filterValue = "";
+        this._colorizeStyle = "";
+        this._preparingApi = false;
+        this._apiLibrary = undefined;
+        this.hideDocumentationActions = false;
+        this.modelId = undefined;
     }
-    this._preparingApi = true;
-    try {
-      const arcadeWorker = await getArcadeWorker(Uri.parse(this.modelId));
-      if (!arcadeWorker) {
-        // Something went wrong
-        throw new Error("Undefined worker");
-      }
-      // Fetch the api definitions from the arcade LS worker.
-      const context = arcadeDefaults.getApiContextForModel(this.modelId);
-      this._apiLibrary = await arcadeWorker.getApiLibrary(context);
+    //#endregion
+    // #region Component lifecycle events
+    async componentWillLoad() {
+        this._colorizeStyle = generateColorizeStyles();
+        this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
+        await F(this, getAssetPath("./assets"));
+        arcadeDefaults.onModelContextDidChange((key) => {
+            if (!this.modelId || key !== Uri.parse(this.modelId).toString()) {
+                return;
+            }
+            this._updateApiLibrary();
+        });
+        this._updateApiLibrary();
     }
-    catch (e) {
-      console.error("Could not load api library", e);
-      console.error(e.stack);
-      this._apiLibrary = undefined;
+    disconnectedCallback() {
+        U(this);
+        this._flowObserver?.disconnect();
+        this._themeChangedListner?.dispose();
     }
-    finally {
-      this._preparingApi = false;
+    // #endregion
+    //#region Private Methods
+    async _updateApiLibrary() {
+        if (!this.modelId) {
+            return;
+        }
+        this._preparingApi = true;
+        try {
+            const arcadeWorker = await getArcadeWorker(Uri.parse(this.modelId));
+            if (!arcadeWorker) {
+                // Something went wrong
+                throw new Error("Undefined worker");
+            }
+            // Fetch the api definitions from the arcade LS worker.
+            const context = arcadeDefaults.getApiContextForModel(this.modelId);
+            this._apiLibrary = await arcadeWorker.getApiLibrary(context);
+        }
+        catch (e) {
+            console.error("Could not load api library", e);
+            console.error(e.stack);
+            this._apiLibrary = undefined;
+        }
+        finally {
+            this._preparingApi = false;
+        }
     }
-  }
-  flowFocusHandler(ref) {
-    // When a flow is removed from the document then a null ref will be passed in
-    if (!ref) {
-      this._flowObserver?.disconnect();
-      this._flowObserver = undefined;
-      return;
+    flowFocusHandler(ref) {
+        // When a flow is removed from the document then a null ref will be passed in
+        if (!ref) {
+            this._flowObserver?.disconnect();
+            this._flowObserver = undefined;
+            return;
+        }
+        if (this._flowObserver) {
+            return;
+        }
+        // Observer panel added/removed and also observe the flow id
+        // When switching between flow the same reference is reused
+        this._flowObserver = new MutationObserver(() => {
+            // Get the last panel and try to set focus on the input element
+            O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+        });
+        this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
-    if (this._flowObserver) {
-      return;
+    //#endregion
+    //#region Renderers
+    renderApiCategory(category) {
+        const filteredApiItems = filterCollection(category.items, "name", this._filterValue);
+        if (!filteredApiItems.length) {
+            return null;
+        }
+        return (h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (h("calcite-list-item", { label: q(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
     }
-    // Observer panel added/removed and also observe the flow id
-    // When switching between flow the same reference is reused
-    this._flowObserver = new MutationObserver(() => {
-      // Get the last panel and try to set focus on the input element
-      O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
-    });
-    this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
-  }
-  //#endregion
-  //#region Renderers
-  renderApiCategory(category) {
-    const filteredApiItems = filterCollection(category.items, "name", this._filterValue);
-    if (!filteredApiItems.length) {
-      return null;
+    renderApiItemFlowItem() {
+        const apiItem = this._selectedApiItem;
+        if (!apiItem) {
+            return null;
+        }
+        return (h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this._t9nStrings?.moreinformation)), h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => e?.setFocus() }, this._t9nStrings?.insert ?? "Insert"), h("calcite-block", { open: true, heading: q(apiItem.completion.detail) }, h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (h("div", { ref: (e) => {
+                if (!e) {
+                    return;
+                }
+                e.innerHTML = convertMarkdownString(apiItem.examples);
+                colorizedAllCodeElements(e);
+            } })) : null)));
     }
-    return (h("calcite-list-item-group", { heading: category.title }, filteredApiItems.map((apiItem) => (h("calcite-list-item", { label: q(apiItem.completion.detail), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": apiItem }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "Expand", icon: "chevron-right", iconFlipRtl: true, scale: "s", onClick: this._selectItem, "data-item": apiItem }))))));
-  }
-  renderApiItemFlowItem() {
-    const apiItem = this._selectedApiItem;
-    if (!apiItem) {
-      return null;
+    render() {
+        const categories = (this._apiLibrary ?? []).map((apiCategory) => this.renderApiCategory(apiCategory));
+        const empty = categories.every((g) => !g);
+        return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), this._preparingApi ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, empty ? h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
     }
-    return (h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, beforeBack: this._unselectItem, closable: true, onCalciteFlowItemClose: this._emitClose }, this.hideDocumentationActions ? null : (h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", scale: "s", href: apiItem.link, target: "Arcade Help", "icon-start": "information" }, this._t9nStrings?.moreinformation)), h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelectedAndClose, "data-item": apiItem, ref: (e) => e?.setFocus() }, this._t9nStrings?.insert ?? "Insert"), h("calcite-block", { open: true, heading: q(apiItem.completion.detail) }, h("div", { innerHTML: convertMarkdownString(apiItem.completion.documentation) }), apiItem.examples ? (h("div", { ref: (e) => {
-        if (!e) {
-          return;
-        }
-        e.innerHTML = convertMarkdownString(apiItem.examples);
-        colorizedAllCodeElements(e);
-      } })) : null)));
-  }
-  render() {
-    const categories = (this._apiLibrary ?? []).map((apiCategory) => this.renderApiCategory(apiCategory));
-    const empty = categories.every((g) => !g);
-    return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.constantsandfunctions, closable: true, onCalciteFlowItemClose: this._emitClose }, h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), this._preparingApi ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, empty ? h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No items") : categories))), this.renderApiItemFlowItem())));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElement() { return getElement(this); }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElement() { return getElement(this); }
 };
 ArcgisArcadeApi.style = arcadeApiCss;
 
@@ -3189,177 +3189,177 @@ const MaxArrayItems = 100;
 const BatchSize = 100;
 
 function isArcadeFeatureSet(value) {
-  return value.declaredRootClass === "esri.arcade.featureset.support.FeatureSet";
+    return value.declaredRootClass === "esri.arcade.featureset.support.FeatureSet";
 }
 function isArcadeFeature(value) {
-  return value.arcadeDeclaredClass === "esri.arcade.Feature";
+    return value.arcadeDeclaredClass === "esri.arcade.Feature";
 }
 function isArcadeDictionary(value) {
-  return value.declaredClass === "esri.arcade.Dictionary";
+    return value.declaredClass === "esri.arcade.Dictionary";
 }
 function isGeometry(value) {
-  const declaredClass = value.declaredClass;
-  return typeof declaredClass === "string" && declaredClass.startsWith("esri.geometry.");
+    const declaredClass = value.declaredClass;
+    return typeof declaredClass === "string" && declaredClass.startsWith("esri.geometry.");
 }
 function isArcadePortal(value) {
-  const declaredClass = value.declaredClass;
-  return typeof declaredClass === "string" && declaredClass === "esri.arcade.Portal";
+    const declaredClass = value.declaredClass;
+    return typeof declaredClass === "string" && declaredClass === "esri.arcade.Portal";
 }
 function isArcadeAttachment(value) {
-  const declaredClass = value.declaredClass;
-  return typeof declaredClass === "string" && declaredClass === "esri.arcade.Attachment";
+    const declaredClass = value.declaredClass;
+    return typeof declaredClass === "string" && declaredClass === "esri.arcade.Attachment";
 }
 function isArcadeDate(value) {
-  const declaredRootClass = value.declaredRootClass;
-  return typeof declaredRootClass === "string" && declaredRootClass === "esri.arcade.arcadedate";
+    const declaredRootClass = value.declaredRootClass;
+    return typeof declaredRootClass === "string" && declaredRootClass === "esri.arcade.arcadedate";
 }
 function isArcadeDateOnly(value) {
-  const declaredRootClass = value.declaredRootClass;
-  return typeof declaredRootClass === "string" && declaredRootClass === "esri.core.sql.dateonly";
+    const declaredRootClass = value.declaredRootClass;
+    return typeof declaredRootClass === "string" && declaredRootClass === "esri.core.sql.dateonly";
 }
 function isArcadeTimeOnly(value) {
-  const declaredRootClass = value.declaredRootClass;
-  return typeof declaredRootClass === "string" && declaredRootClass === "esri.core.sql.timeonly";
+    const declaredRootClass = value.declaredRootClass;
+    return typeof declaredRootClass === "string" && declaredRootClass === "esri.core.sql.timeonly";
 }
 function isArcadeImmutableArray(value) {
-  return (typeof value.length === "function" &&
-    typeof value.get === "function" &&
-    typeof value.toArray === "function" &&
-    Array.isArray(value._elements));
+    return (typeof value.length === "function" &&
+        typeof value.get === "function" &&
+        typeof value.toArray === "function" &&
+        Array.isArray(value._elements));
 }
 function valueToArcadeResult(value) {
-  if (value == null || value === undefined) {
-    return { type: "null" };
-  }
-  if (Array.isArray(value)) {
-    return { type: "array", value };
-  }
-  if (isArcadeImmutableArray(value)) {
-    return { type: "array", value: value.toArray() };
-  }
-  if (value instanceof Date) {
-    return { type: "date", value };
-  }
-  if (typeof value === "string") {
-    return { type: "text", value };
-  }
-  if (typeof value === "number") {
-    return { type: "number", value };
-  }
-  if (typeof value === "boolean") {
-    return { type: "boolean", value };
-  }
-  if (typeof value !== "object") {
+    if (value == null || value === undefined) {
+        return { type: "null" };
+    }
+    if (Array.isArray(value)) {
+        return { type: "array", value };
+    }
+    if (isArcadeImmutableArray(value)) {
+        return { type: "array", value: value.toArray() };
+    }
+    if (value instanceof Date) {
+        return { type: "date", value };
+    }
+    if (typeof value === "string") {
+        return { type: "text", value };
+    }
+    if (typeof value === "number") {
+        return { type: "number", value };
+    }
+    if (typeof value === "boolean") {
+        return { type: "boolean", value };
+    }
+    if (typeof value !== "object") {
+        return { type: "unknown" };
+    }
+    if (isArcadeDate(value)) {
+        return { type: "date", value };
+    }
+    if (isArcadeDateOnly(value)) {
+        return { type: "dateOnly", value };
+    }
+    if (isArcadeTimeOnly(value)) {
+        return { type: "time", value };
+    }
+    if (isArcadeAttachment(value)) {
+        return { type: "attachment", value };
+    }
+    if (isArcadePortal(value)) {
+        return { type: "portal", value };
+    }
+    if (isArcadeFeatureSet(value)) {
+        return { type: "featureSet", value, features: [], iterator: null };
+    }
+    if (isArcadeFeature(value)) {
+        return { type: "feature", value };
+    }
+    if (isArcadeDictionary(value)) {
+        return { type: "dictionary", value };
+    }
+    if (isGeometry(value)) {
+        return { type: "geometry", value };
+    }
     return { type: "unknown" };
-  }
-  if (isArcadeDate(value)) {
-    return { type: "date", value };
-  }
-  if (isArcadeDateOnly(value)) {
-    return { type: "dateOnly", value };
-  }
-  if (isArcadeTimeOnly(value)) {
-    return { type: "time", value };
-  }
-  if (isArcadeAttachment(value)) {
-    return { type: "attachment", value };
-  }
-  if (isArcadePortal(value)) {
-    return { type: "portal", value };
-  }
-  if (isArcadeFeatureSet(value)) {
-    return { type: "featureSet", value, features: [], iterator: null };
-  }
-  if (isArcadeFeature(value)) {
-    return { type: "feature", value };
-  }
-  if (isArcadeDictionary(value)) {
-    return { type: "dictionary", value };
-  }
-  if (isGeometry(value)) {
-    return { type: "geometry", value };
-  }
-  return { type: "unknown" };
 }
 function formatArcadeResultDate(dateObject, lang = "en") {
-  // Default to english
-  if (dateObject.value instanceof Date) {
-    return new Intl.DateTimeFormat(lang, { dateStyle: "medium", timeStyle: "long" }).format(dateObject.value);
-  }
-  return dateObject.value
-    .toDateTime()
-    .setLocale(lang)
-    .toFormat(dateObject.value.isUnknownTimeZone ? "FF" : "FF ZZZZZ");
+    // Default to english
+    if (dateObject.value instanceof Date) {
+        return new Intl.DateTimeFormat(lang, { dateStyle: "medium", timeStyle: "long" }).format(dateObject.value);
+    }
+    return dateObject.value
+        .toDateTime()
+        .setLocale(lang)
+        .toFormat(dateObject.value.isUnknownTimeZone ? "FF" : "FF ZZZZZ");
 }
 function formatArcadeResultDateOnly(dateObject) {
-  return dateObject.value.toString();
+    return dateObject.value.toString();
 }
 function formatArcadeResultTimeOnly(dateObject) {
-  return dateObject.value.toString();
+    return dateObject.value.toString();
 }
 async function loadArcadeResult(result, timeZone = "system") {
-  if (result.type !== "featureSet") {
-    return result;
-  }
-  // Feature Set needs to be loaded
-  await result.value.load();
-  // Create the first iterator
-  result.iterator = result.value.iterator({ aborted: false });
-  if (result.iterator == null) {
+    if (result.type !== "featureSet") {
+        return result;
+    }
+    // Feature Set needs to be loaded
+    await result.value.load();
+    // Create the first iterator
+    result.iterator = result.value.iterator({ aborted: false });
+    if (result.iterator == null) {
+        return result;
+    }
+    // Load the first batch of items
+    result.features = (await result.iterator.nextBatchAsArcadeFeatures(BatchSize, timeZone)) ?? [];
     return result;
-  }
-  // Load the first batch of items
-  result.features = (await result.iterator.nextBatchAsArcadeFeatures(BatchSize, timeZone)) ?? [];
-  return result;
 }
 async function executeScript(editorProfile, script, testContext, console) {
-  //
-  const timeStamp = new Date();
-  // Provide a default console function is missing
-  console = console ?? (() => undefined);
-  try {
-    // We want to measure compilation time
-    const t0 = performance.now();
-    // Setup an executor with the script
-    const arcade = await importArcade();
-    const executor = await arcade.createArcadeExecutor(script ?? "", {
-      variables: editorProfile?.variables ?? []
-    });
-    // We want to measure the execution time
-    const t1 = performance.now();
-    // Manufacture our execution context
-    const { profileVariableInstances, spatialReference, timeZone } = testContext;
-    const executeContext = {
-      spatialReference,
-      timeZone,
-      rawOutput: true,
-      console
-    };
-    // Execute the script
-    const scriptOutput = await executor.executeAsync(profileVariableInstances ?? {}, executeContext);
-    // Convert script output to arcade result object and load data if necessary
-    const scriptResult = await loadArcadeResult(valueToArcadeResult(scriptOutput), timeZone);
-    // Timestamp and measure cost
-    scriptResult.timeStamp = timeStamp;
-    scriptResult.compilationTime = t1 - t0;
-    scriptResult.executionTime = performance.now() - t1;
-    return scriptResult;
     //
-  }
-  catch (error) {
-    let message = "Unknown Error";
-    if (error instanceof Error) {
-      message = error.message;
+    const timeStamp = new Date();
+    // Provide a default console function if missing
+    console ?? (console = () => undefined);
+    try {
+        // We want to measure compilation time
+        const t0 = performance.now();
+        // Setup an executor with the script
+        const arcade = await importArcade();
+        const executor = await arcade.createArcadeExecutor(script ?? "", {
+            variables: editorProfile?.variables ?? []
+        });
+        // We want to measure the execution time
+        const t1 = performance.now();
+        // Manufacture our execution context
+        const { profileVariableInstances, spatialReference, timeZone } = testContext;
+        const executeContext = {
+            spatialReference,
+            timeZone,
+            rawOutput: true,
+            console
+        };
+        // Execute the script
+        const scriptOutput = await executor.executeAsync(profileVariableInstances ?? {}, executeContext);
+        // Convert script output to arcade result object and load data if necessary
+        const scriptResult = await loadArcadeResult(valueToArcadeResult(scriptOutput), timeZone);
+        // Timestamp and measure cost
+        scriptResult.timeStamp = timeStamp;
+        scriptResult.compilationTime = t1 - t0;
+        scriptResult.executionTime = performance.now() - t1;
+        return scriptResult;
+        //
+    }
+    catch (error) {
+        let message = "Unknown Error";
+        if (error instanceof Error) {
+            message = error.message;
+        }
+        return {
+            type: "error",
+            value: message,
+            error,
+            timeStamp,
+            compilationTime: 0,
+            executionTime: 0
+        };
     }
-    return {
-      type: "error",
-      value: message,
-      error,
-      timeStamp: timeStamp,
-      compilationTime: 0,
-      executionTime: 0
-    };
-  }
 }
 
 const themeConfig = {
@@ -3384,912 +3384,908 @@ 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: {}
+        });
     });
-  });
 }
 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 = [];
+    ["comment", "keyword", "identifier", "string", "number", "constant"].forEach((key) => {
+        // @ts-expect-error
+        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]{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)}";
 
 setupArcadeTheme();
 const ArcgisArcadeEditor = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.scriptChange = createEvent(this, "scriptChange", 3);
-    this.diagnosticsChange = createEvent(this, "diagnosticsChange", 3);
-    this._componentReadyDefer = new p();
-    this._modelId = j();
-    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));
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.scriptChange = createEvent(this, "scriptChange", 3);
+        this.diagnosticsChange = createEvent(this, "diagnosticsChange", 3);
+        this._componentReadyDefer = new p();
+        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));
+                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
+                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._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
-        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._lang = "";
-    this._t9nLocale = "";
-    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._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";
     }
-    this._updateEditorProfile();
-  }
-  _testDataChanged(newValue, oldValue) {
-    if (newValue === oldValue || !this._showExecutionPanel) {
-      return;
+    _profileChanged(newValue, oldValue) {
+        // Prevent the execution as long as the component has not been fully loaded
+        if (newValue === oldValue) {
+            return;
+        }
+        this._updateEditorProfile();
     }
-    this._executeScript();
-  }
-  _snippetChanged(newValue, oldValue) {
-    if (newValue === oldValue) {
-      return;
+    _testDataChanged(newValue, oldValue) {
+        if (newValue === oldValue || !this._showExecutionPanel) {
+            return;
+        }
+        this._executeScript();
     }
-    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 };
+    _snippetChanged(newValue, oldValue) {
+        if (newValue === oldValue) {
+            return;
+        }
+        arcadeDefaults.updateApiContextForModel(this._modelId, {
+            snippets: this.snippets
+        });
     }
-    const editorProfile = await this._editorProfilePromise;
-    if (!editorProfile) {
-      return { type: "error", value: "Missing editor profile", error: null };
+    // #endregion
+    // #region Public methods API
+    /**
+     * Returns the current script.
+     * @returns {Promise<string>}
+     */
+    async getScript() {
+        await this._componentReadyDefer.promise;
+        return this._codeEditorElt?.getValue();
     }
-    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 = P(this._hostElement);
-    updateThemeColors(theme, colorRules);
-    if (colorRules === undefined) {
-      ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
-        this._hostElement.style.removeProperty(`--arcgis-arcade-editor-${key}`);
-      });
-      return;
+    /**
+     * Set the focus on the element.
+     */
+    async setFocus() {
+        await this._componentReadyDefer.promise;
+        await this._codeEditorElt?.setFocus();
     }
-    ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
-      // @ts-expect-error
-      const foreground = colorRules[key];
-      if (!foreground) {
-        return;
-      }
-      this._hostElement.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 F(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();
+    /**
+     * @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 };
         }
-      }
-    });
-    await this._codeEditorElt?.setFocus();
-  }
-  disconnectedCallback() {
-    U(this);
-    arcadeDefaults.disposeApiContextForModel(this._modelId);
-    arcadeDefaults.disposeEditorProfileForModel(this._modelId);
-    while (this._disposables.length) {
-      this._disposables.pop()?.dispose();
+        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 executeScript(editorProfile.definition, script, this.testData);
     }
-  }
-  // #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);
+    /**
+     * Returns the Arcade output type for the script.
+     * @deprecated Use getTestResult
+     * @internal
+     */
+    async getOutputType() {
+        return (await this.getTestResult()).type;
     }
-    catch (e) {
-      this._editorProfile = undefined;
+    /**
+     * Allows to change theme colors
+     * @internal
+     */
+    async updateThemeColors(colorRules) {
+        const theme = P(this._hostElement);
+        updateThemeColors(theme, colorRules);
+        if (colorRules === undefined) {
+            ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
+                this._hostElement.style.removeProperty(`--arcgis-arcade-editor-${key}`);
+            });
+            return;
+        }
+        ["comment", "keyword", "identifier", "string", "number", "constant", "date"].forEach((key) => {
+            // @ts-expect-error
+            const foreground = colorRules[key];
+            if (!foreground) {
+                return;
+            }
+            this._hostElement.style.setProperty(`--arcgis-arcade-editor-${key}`, foreground);
+        });
     }
-    finally {
-      this._editorProfilePromise = Promise.resolve(this._editorProfile);
-      this._preparingProfile = false;
+    // #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 F(this, assetsPath, async () => await this._updateEditorProfile());
     }
-  }
-  // #endregion
-  //#region Render Main Action Bar
-  renderMainActionBar() {
-    if (!this.testData) {
-      return null;
+    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();
+                }
+            }
+        });
+        await this._codeEditorElt?.setFocus();
     }
-    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._t9nStrings?.run ?? "Run", "text-enabled": true, icon: "play", scale: "s", loading: this._preparingProfile, onClick: this._executeScript }), this._executionResult ? (h("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("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;
+    disconnectedCallback() {
+        U(this);
+        arcadeDefaults.disposeApiContextForModel(this._modelId);
+        arcadeDefaults.disposeEditorProfileForModel(this._modelId);
+        while (this._disposables.length) {
+            this._disposables.pop()?.dispose();
+        }
     }
-    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, h("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("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(Fragment, null, h("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(Fragment, null, h("calcite-action", { id: "developer-website-action", text: this._t9nStrings?.help ?? "Help", icon: "question", iconFlipRtl: this._t9nLocale === "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 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 (e) {
+            this._editorProfile = undefined;
+        }
+        finally {
+            this._editorProfilePromise = Promise.resolve(this._editorProfile);
+            this._preparingProfile = false;
+        }
     }
-    switch (this.openedSidePanel) {
-      case "api":
-        return (h("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("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("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 Render Main Action Bar
+    renderMainActionBar() {
+        if (!this.testData) {
+            return 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._t9nStrings?.run ?? "Run", "text-enabled": true, icon: "play", scale: "s", loading: this._preparingProfile, onClick: this._executeScript }), this._executionResult ? (h("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 Rendering Results Panel
-  renderResultsPanel() {
-    if (!this._showExecutionPanel) {
-      return null;
+    //#endregion
+    //#region Render Main Panel
+    renderMainPanel() {
+        return (
+        // <div class="flex-adjustable">
+        h("arcgis-code-editor", { class: "flex-adjustable", language: arcadeDefaults.languageId, value: this.script ?? "", modelId: this._modelId, onValueChange: this._emitScriptChange, ref: (e) => (this._codeEditorElt = e) })
+        // </div>
+        );
     }
-    return (h("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(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 getElement(this); }
-  static get watchers() { return {
-    "profile": ["_profileChanged"],
-    "testData": ["_testDataChanged"],
-    "snippets": ["_snippetChanged"]
-  }; }
+    //#endregion
+    //#region Rendering the Action Bar
+    renderSideActionBar() {
+        if (this.hideSideBar) {
+            return null;
+        }
+        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, h("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("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(Fragment, null, h("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(Fragment, null, h("calcite-action", { id: "developer-website-action", text: this._t9nStrings?.help ?? "Help", icon: "question", iconFlipRtl: this._t9nLocale === "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;
+        }
+        switch (this.openedSidePanel) {
+            case "api":
+                return (h("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("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("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("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(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 getElement(this); }
+    static get watchers() { return {
+        "profile": ["_profileChanged"],
+        "testData": ["_testDataChanged"],
+        "snippets": ["_snippetChanged"]
+    }; }
 };
 ArcgisArcadeEditor.style = arcadeEditorCss;
 
 const indentSpecs = { char: " ", size: 2 };
 const indentType = new Array(indentSpecs.size + 1).join(indentSpecs.char);
 function createPushFunc(p) {
-  return (substring) => "\\" + p.push(substring) + "\\";
+    return (substring) => `\\${p.push(substring)}\\`;
 }
 function createPopFunc(p) {
-  return (_, offset) => p[offset - 1];
+    return (_, offset) => p[offset - 1];
 }
 function indent(index, indentType) {
-  return new Array(index + 1).join(indentType);
+    return new Array(index + 1).join(indentType);
 }
 function jsonFormat(json) {
-  // Convert to string and extract backslashes and strings
-  const p = [];
-  const pushFunc = createPushFunc(p);
-  const jsonString = JSON.stringify(json)
-    .replace(/\\./g, pushFunc)
-    .replace(/(".*?"|'.*?')/g, pushFunc)
-    .replace(/\s+/, "");
-  // Indent and insert newlines
-  let indentIndex = 0;
-  let out = "";
-  for (let i = 0; i < jsonString.length; i++) {
-    const c = jsonString.charAt(i);
-    switch (c) {
-      case "{":
-      case "[":
-        out += c + "\n" + indent(++indentIndex, indentType);
-        break;
-      case "}":
-      case "]":
-        out += "\n" + indent(--indentIndex, indentType) + c;
-        break;
-      case ",":
-        out += ",\n" + indent(indentIndex, indentType);
-        break;
-      case ":":
-        out += ": ";
-        break;
-      default:
-        out += c;
-        break;
+    // Convert to string and extract backslashes and strings
+    const p = [];
+    const pushFunc = createPushFunc(p);
+    const jsonString = JSON.stringify(json)
+        .replace(/\\./gu, pushFunc)
+        .replace(/(".*?"|'.*?')/gu, pushFunc)
+        .replace(/\s+/u, "");
+    // Indent and insert newlines
+    let indentIndex = 0;
+    let out = "";
+    for (let i = 0; i < jsonString.length; i += 1) {
+        const c = jsonString.charAt(i);
+        switch (c) {
+            case "{":
+            case "[":
+                indentIndex += 1;
+                out += `${c}\n${indent(indentIndex, indentType)}`;
+                break;
+            case "}":
+            case "]":
+                indentIndex -= 1;
+                out += `\n${indent(indentIndex, indentType)}${c}`;
+                break;
+            case ",":
+                out += `,\n${indent(indentIndex, indentType)}`;
+                break;
+            case ":":
+                out += ": ";
+                break;
+            default:
+                out += c;
+                break;
+        }
     }
-  }
-  // Strip whitespace from numeric arrays and put backslashes
-  // and strings back in
-  const popFunc = createPopFunc(p);
-  return out
-    .replace(/\[[\d,\s]+?\]/g, function (m) {
-    return m.replace(/\s/g, "");
-  })
-    .replace(/\\(\d+)\\/g, popFunc) // strings
-    .replace(/\\(\d+)\\/g, popFunc); // backslashes in strings
+    // Strip whitespace from numeric arrays and put backslashes
+    // and strings back in
+    const popFunc = createPopFunc(p);
+    return out
+        .replace(/\[[\d,\s]+?\]/gu, (m) => m.replace(/\s/gu, ""))
+        .replace(/\\(\d+)\\/gu, popFunc) // strings
+        .replace(/\\(\d+)\\/gu, popFunc); // backslashes in strings
 }
 
 const arcadeResultsCss = ":host{display:flex;flex-direction:column;width:100%;background-color:var(--calcite-ui-foreground-1);color:var(--calcite-ui-text-2)}:host .flex-adjustable{flex:1 1 auto;overflow:hidden}:host .flex-row{display:flex;flex-direction:row;overflow:hidden}:host .flex-column{display:flex;flex-direction:column;overflow:hidden}:host .y-scrollable-container{overflow-y:auto;block-size:100%;background-color:var(--calcite-ui-foreground-1)}:host header{border-bottom:1px solid var(--calcite-ui-border-3);flex:0 0 auto}:host .ltr-container{direction:ltr}:host calcite-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host calcite-action-bar calcite-action-group:last-child{border-inline-end-width:0px}:host calcite-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-half)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-ui-foreground-1)}:host .color-info{color:var(--calcite-ui-info)}:host .color-error{color:var(--calcite-ui-danger)}:host .color-success{color:var(--calcite-ui-success)}:host [class*=result-value-]{font-size:var(--calcite-font-size--2);line-height:1.25rem;background-color:var(--calcite-ui-foreground-1);margin:var(--calcite-spacing-three-quarter)}:host .console-logs-container{background-color:var(--calcite-ui-foreground-1);padding:0 var(--calcite-spacing-three-quarter);font-family:var(--calcite-code-family);font-size:var(--calcite-font-size--2);font-weight:var(--calcite-font-weight-normal)}:host .result-value-table table{display:block;max-width:fit-content;overflow-x:auto;border-spacing:0;border-collapse:collapse;text-align:start;white-space:nowrap}:host .result-value-table table thead{background-color:var(--calcite-ui-foreground-2)}:host .result-value-table table tr{border-top:1px solid var(--calcite-ui-border-3);border-bottom:1px solid var(--calcite-ui-border-3)}:host .result-value-table table th,:host .result-value-table table td{border-inline-start:1px solid var(--calcite-ui-border-3);border-inline-end:1px solid var(--calcite-ui-border-3);text-align:start;padding:var(--calcite-spacing-quarter)}:host .result-value-table table th .string-value,:host .result-value-table table td .string-value{white-space:pre}:host .result-value-table table th{font-weight:var(--calcite-font-weight-medium)}:host .tree-item-label,:host .number-value,:host .string-value,:host .boolean-value{font-family:var(--calcite-code-family)}:host .tree-item-label,:host .value-type{color:var(--calcite-text-2);font-weight:var(--calcite-font-weight-normal)}:host .dictionary-property{color:var(--arcgis-arcade-editor-identifier)}:host .number-value{color:var(--arcgis-arcade-editor-number)}:host .string-value{color:var(--arcgis-arcade-editor-string);white-space:pre-wrap}:host .constant-value{color:var(--arcgis-arcade-editor-constant)}:host .date-value{color:var(--arcgis-arcade-editor-date)}";
 
 //#region Specialized Constants
 const treeProps = {
-  lines: true,
-  selectionMode: "none",
-  scale: "s",
-  onCalciteTreeSelect: (e) => e.target.selectedItems.forEach((itemElt) => (itemElt.selected = false))
+    lines: true,
+    selectionMode: "none",
+    scale: "s",
+    onCalciteTreeSelect: (e) => e.target.selectedItems.forEach((itemElt) => (itemElt.selected = false))
 };
 const expandableTreeItemProps = {
-  onClick: (e) => {
-    const item = e.currentTarget;
-    item.expanded = !item.expanded;
-  }
+    onClick: (e) => {
+        const item = e.currentTarget;
+        item.expanded = !item.expanded;
+    }
 };
 const ArcgisArcadeResults = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.openedResultPanelChange = createEvent(this, "openedResultPanelChange", 3);
-    this.close = createEvent(this, "close", 3);
-    this._switchResultPanel = (e) => {
-      if (!e.target) {
-        return;
-      }
-      const panelName = e.target?.dataset.panelName;
-      if (!panelName) {
-        return;
-      }
-      this.updateResultPanel(panelName);
-    };
-    this._emitClose = () => this.close.emit();
-    this._lang = "";
-    this._t9nLocale = "";
-    this._t9nStrings = undefined;
-    this.loading = true;
-    this.openedResultPanel = "output";
-    this.result = undefined;
-    this.consoleLogs = undefined;
-  }
-  //#endregion
-  // #region Component lifecycle events
-  async componentWillLoad() {
-    await F(this, getAssetPath("./assets"));
-  }
-  disconnectedCallback() {
-    U(this);
-  }
-  // #endregion
-  //#region Private Methods
-  updateResultPanel(resultPanelType) {
-    this.openedResultPanel = resultPanelType;
-    this.openedResultPanelChange.emit(resultPanelType);
-  }
-  //#endregion
-  //#region Rendering
-  renderConsolePanel() {
-    if (this.openedResultPanel !== "console") {
-      return null;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.openedResultPanelChange = createEvent(this, "openedResultPanelChange", 3);
+        this.close = createEvent(this, "close", 3);
+        this._switchResultPanel = (e) => {
+            if (!e.target) {
+                return;
+            }
+            const panelName = e.target?.dataset.panelName;
+            if (!panelName) {
+                return;
+            }
+            this.updateResultPanel(panelName);
+        };
+        this._emitClose = () => this.close.emit();
+        this._lang = "";
+        this._t9nLocale = "";
+        this._t9nStrings = undefined;
+        this.loading = true;
+        this.openedResultPanel = "output";
+        this.result = undefined;
+        this.consoleLogs = undefined;
     }
-    if (this.loading && !this.consoleLogs?.length) {
-      return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
+    //#endregion
+    // #region Component lifecycle events
+    async componentWillLoad() {
+        await F(this, getAssetPath("./assets"));
     }
-    return (h("div", { class: "console-logs-container ltr-container" }, this.consoleLogs?.length ? (this.consoleLogs.map((log) => {
-      return h("p", null, log);
-    })) : (h("p", null, this._t9nStrings?.consolemessage))));
-  }
-  renderLogPanel() {
-    if (this.openedResultPanel !== "log") {
-      return null;
+    disconnectedCallback() {
+        U(this);
     }
-    if (this.loading) {
-      return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
-    }
-    const iconClass = this.result?.type === "error" ? "color-error" : "color-success";
-    return (h("calcite-list", null, this.result ? (h(Fragment, null, h("calcite-list-item", { label: H(this._t9nStrings?.lastexecutionformat, {
-        timeStamp: new Intl.DateTimeFormat(this._t9nLocale, {
-          dateStyle: "medium",
-          timeStyle: "medium"
-        }).format(this.result.timeStamp)
-      }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: H(this._t9nStrings?.compilationtimeformat, {
-        time: new Intl.NumberFormat(this._t9nLocale, {
-          style: "unit",
-          unit: "millisecond",
-          maximumFractionDigits: 2
-        }).format(this.result.compilationTime ?? 0)
-      }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: H(this._t9nStrings?.executiontimeformat, {
-        time: new Intl.NumberFormat(this._t9nLocale, {
-          style: "unit",
-          unit: "millisecond",
-          maximumFractionDigits: 2
-        }).format(this.result.executionTime ?? 0)
-      }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })))) : (h("calcite-list-item", { label: this._t9nStrings?.runscriptmessage ?? "No output, run the script once." }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: "color-info" })))));
-  }
-  renderOutputPanel() {
-    if (this.openedResultPanel !== "output") {
-      return null;
+    // #endregion
+    //#region Private Methods
+    updateResultPanel(resultPanelType) {
+        this.openedResultPanel = resultPanelType;
+        this.openedResultPanelChange.emit(resultPanelType);
     }
-    if (this.loading) {
-      return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
+    //#endregion
+    //#region Rendering
+    renderConsolePanel() {
+        if (this.openedResultPanel !== "console") {
+            return null;
+        }
+        if (this.loading && !this.consoleLogs?.length) {
+            return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
+        }
+        return (h("div", { class: "console-logs-container ltr-container" }, this.consoleLogs?.length ? (this.consoleLogs.map((log) => h("p", null, log))) : (h("p", null, this._t9nStrings?.consolemessage))));
     }
-    switch (this.result?.type) {
-      case "error":
-        return (h("div", { class: "result-value-simple flex-adjustable" }, H(this._t9nStrings?.executionerrorformat, {
-          message: this.result.value
-        })));
-      case "null":
-      case "unknown":
-        return h("div", { class: "result-value-simple ltr-container" }, this.renderSimpleValue(this.result));
-      case "text":
-      case "number":
-      case "date":
-      case "dateOnly":
-      case "time":
-      case "boolean":
-        return (h("div", { class: "result-value-simple ltr-container" }, h("span", { class: "value-type" }, this.result.type, ":\u00A0"), this.renderSimpleValue(this.result)));
-      case "array": {
-        const items = this.result.value ?? [];
-        const firstItems = items.slice(0, MaxArrayItems);
-        return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderArrayHeader(this.result)), this.renderArrayTree(firstItems, true)))));
-      }
-      case "geometry":
-        return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.result.type), this.renderGeometryTree(this.result.value, true)))));
-      case "attachment":
-        return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.result.type), this.renderDictionaryAsJsonTree(this.result.value, true)))));
-      case "feature":
-      case "dictionary":
-      case "portal":
-        return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.result.type), this.renderDictionaryTree(this.result.value, true)))));
-      case "featureSet":
-        return (h("div", { class: "result-value-table ltr-container" }, this.renderFeatureSetLabel(this.result), this.renderFeatureSetTable(this.result)));
-      default:
-        return (h("div", { class: "result-value-simple flex-adjustable ltr-container" }, this._t9nStrings?.runscriptmessage));
+    renderLogPanel() {
+        if (this.openedResultPanel !== "log") {
+            return null;
+        }
+        if (this.loading) {
+            return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
+        }
+        const iconClass = this.result?.type === "error" ? "color-error" : "color-success";
+        return (h("calcite-list", null, this.result ? (h(Fragment, null, h("calcite-list-item", { label: H(this._t9nStrings?.lastexecutionformat, {
+                timeStamp: new Intl.DateTimeFormat(this._t9nLocale, {
+                    dateStyle: "medium",
+                    timeStyle: "medium"
+                }).format(this.result.timeStamp)
+            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: H(this._t9nStrings?.compilationtimeformat, {
+                time: new Intl.NumberFormat(this._t9nLocale, {
+                    style: "unit",
+                    unit: "millisecond",
+                    maximumFractionDigits: 2
+                }).format(this.result.compilationTime ?? 0)
+            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })), h("calcite-list-item", { label: H(this._t9nStrings?.executiontimeformat, {
+                time: new Intl.NumberFormat(this._t9nLocale, {
+                    style: "unit",
+                    unit: "millisecond",
+                    maximumFractionDigits: 2
+                }).format(this.result.executionTime ?? 0)
+            }) }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: iconClass })))) : (h("calcite-list-item", { label: this._t9nStrings?.runscriptmessage ?? "No output, run the script once." }, h("calcite-icon", { slot: "content-start", icon: "information", scale: "s", class: "color-info" })))));
     }
-  }
-  renderDictionaryProperty(key) {
-    return (h(Fragment, null, h("span", { class: "dictionary-property" }, key), h("span", null, ":\u00A0")));
-  }
-  renderSimpleValue(arcadeResult) {
-    switch (arcadeResult.type) {
-      case "unknown":
-      case "null":
-        return h("span", { class: "constant-value" }, arcadeResult.type);
-      case "text":
-        return h("span", { class: "string-value" }, z(arcadeResult.value));
-      case "number":
-        return h("span", { class: "number-value" }, arcadeResult.value.toString());
-      case "boolean":
-        return h("span", { class: "constant-value" }, arcadeResult.value.toString());
-      case "date":
-        return h("span", { class: "date-value" }, formatArcadeResultDate(arcadeResult));
-      case "dateOnly":
-        return h("span", { class: "string-value" }, z(formatArcadeResultDateOnly(arcadeResult)));
-      case "time":
-        return h("span", { class: "string-value" }, z(formatArcadeResultTimeOnly(arcadeResult)));
-      default:
-        return null;
+    renderOutputPanel() {
+        if (this.openedResultPanel !== "output") {
+            return null;
+        }
+        if (this.loading) {
+            return h("calcite-loader", { scale: "s", type: "indeterminate", label: "" });
+        }
+        switch (this.result?.type) {
+            case "error":
+                return (h("div", { class: "result-value-simple flex-adjustable" }, H(this._t9nStrings?.executionerrorformat, {
+                    message: this.result.value
+                })));
+            case "null":
+            case "unknown":
+                return h("div", { class: "result-value-simple ltr-container" }, this.renderSimpleValue(this.result));
+            case "text":
+            case "number":
+            case "date":
+            case "dateOnly":
+            case "time":
+            case "boolean":
+                return (h("div", { class: "result-value-simple ltr-container" }, h("span", { class: "value-type" }, this.result.type, ":\u00A0"), this.renderSimpleValue(this.result)));
+            case "array": {
+                const items = this.result.value ?? [];
+                const firstItems = items.slice(0, MaxArrayItems);
+                return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderArrayHeader(this.result)), this.renderArrayTree(firstItems, true)))));
+            }
+            case "geometry":
+                return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.result.type), this.renderGeometryTree(this.result.value, true)))));
+            case "attachment":
+                return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.result.type), this.renderDictionaryAsJsonTree(this.result.value, true)))));
+            case "feature":
+            case "dictionary":
+            case "portal":
+                return (h("div", { class: "result-value-simple ltr-container" }, h("calcite-tree", { ...treeProps }, h("calcite-tree-item", { expanded: true, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.result.type), this.renderDictionaryTree(this.result.value, true)))));
+            case "featureSet":
+                return (h("div", { class: "result-value-table ltr-container" }, this.renderFeatureSetLabel(this.result), this.renderFeatureSetTable(this.result)));
+            default:
+                return (h("div", { class: "result-value-simple flex-adjustable ltr-container" }, this._t9nStrings?.runscriptmessage));
+        }
     }
-  }
-  renderArrayHeader(arcadeResult) {
-    const items = arcadeResult.value ?? [];
-    const leftoverCount = Math.max(items.length - MaxArrayItems, 0);
-    return (h(Fragment, null, h("span", null, `${arcadeResult.type}(${items.length ?? 0})`), leftoverCount > 0 ? (h("span", null, "\u00A0", H(this._t9nStrings?.showingfirstitemsformat, {
-      count: MaxArrayItems.toString()
-    }))) : null));
-  }
-  renderArrayTree(items, subtree = false) {
-    return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, items.map((value, key) => {
-      const arcadeValue = valueToArcadeResult(value);
-      return this.renderTreeItem(arcadeValue, key, !subtree);
-    })));
-  }
-  renderGeometryTree(value, subtree = false) {
-    return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, h("calcite-tree-item", null, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty("type"), value.type)), h("calcite-tree-item", null, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty("value"), h("span", { class: "string-value" }, jsonFormat(value.toJSON()))))));
-  }
-  renderDictionaryAsJsonTree(value, subtree = false) {
-    return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, h("calcite-tree-item", { class: "string-value" }, jsonFormat(value.castAsJson()))));
-  }
-  renderDictionaryTree(value, subtree = false) {
-    const geometry = value.geometry?.();
-    return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, value.keys().map((key) => {
-      const arcadeValue = valueToArcadeResult(value.field(key));
-      return this.renderTreeItem(arcadeValue, key);
-    }), geometry ? this.renderTreeItem({ type: "geometry", value: geometry }, "geometry") : null));
-  }
-  renderTreeItem(arcadeResult, key, expanded = false) {
-    switch (arcadeResult.type) {
-      case "null":
-      case "unknown":
-      case "text":
-      case "number":
-      case "date":
-      case "dateOnly":
-      case "time":
-      case "boolean":
-        return (h("calcite-tree-item", null, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), this.renderSimpleValue(arcadeResult))));
-      case "array": {
-        const items = arcadeResult.value ?? [];
-        const firstItems = items.slice(0, MaxArrayItems);
-        return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), this.renderArrayHeader(arcadeResult)), this.renderArrayTree(firstItems, true)));
-      }
-      case "geometry":
-        return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), h("span", null, arcadeResult.type)), this.renderGeometryTree(arcadeResult.value, true)));
-      case "attachment":
-        return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), h("span", null, arcadeResult.type)), this.renderDictionaryAsJsonTree(arcadeResult.value, true)));
-      case "feature":
-      case "dictionary":
-      case "portal":
-        return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), h("span", null, arcadeResult.type)), this.renderDictionaryTree(arcadeResult.value, true)));
-      default:
-        return null;
+    renderDictionaryProperty(key) {
+        return (h(Fragment, null, h("span", { class: "dictionary-property" }, key), h("span", null, ":\u00A0")));
     }
-  }
-  renderFeatureSetLabel(arcadeResult) {
-    return (h("div", { class: "value-type" }, h("span", null, arcadeResult.type, ":"), arcadeResult.features.length >= BatchSize ? (h("span", null, "\u00A0", H(this._t9nStrings?.showingfirstitemsformat, {
-      count: BatchSize.toString()
-    }))) : null));
-  }
-  renderFeatureSetTable(arcadeResult) {
-    const fields = supportedFields(arcadeResult.value.fields);
-    return (h("table", null, h("thead", null, h("tr", null, fields.map((field) => (h("th", null, field.name))))), h("tbody", null, arcadeResult.features.map((feature) => {
-      return (h("tr", null, fields.map((field) => {
-        try {
-          const arcadeResult = valueToArcadeResult(feature.field(field.name));
-          return h("td", null, this.renderSimpleValue(arcadeResult));
+    renderSimpleValue(arcadeResult) {
+        switch (arcadeResult.type) {
+            case "unknown":
+            case "null":
+                return h("span", { class: "constant-value" }, arcadeResult.type);
+            case "text":
+                return h("span", { class: "string-value" }, z(arcadeResult.value));
+            case "number":
+                return h("span", { class: "number-value" }, arcadeResult.value.toString());
+            case "boolean":
+                return h("span", { class: "constant-value" }, arcadeResult.value.toString());
+            case "date":
+                return h("span", { class: "date-value" }, formatArcadeResultDate(arcadeResult));
+            case "dateOnly":
+                return h("span", { class: "string-value" }, z(formatArcadeResultDateOnly(arcadeResult)));
+            case "time":
+                return h("span", { class: "string-value" }, z(formatArcadeResultTimeOnly(arcadeResult)));
+            default:
+                return null;
         }
-        catch (e) {
-          return h("td", null);
+    }
+    renderArrayHeader(arcadeResult) {
+        const items = arcadeResult.value ?? [];
+        const leftoverCount = Math.max(items.length - MaxArrayItems, 0);
+        return (h(Fragment, null, h("span", null, `${arcadeResult.type}(${items.length ?? 0})`), leftoverCount > 0 ? (h("span", null, "\u00A0", H(this._t9nStrings?.showingfirstitemsformat, {
+            count: MaxArrayItems.toString()
+        }))) : null));
+    }
+    renderArrayTree(items, subtree = false) {
+        return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, items.map((value, key) => {
+            const arcadeValue = valueToArcadeResult(value);
+            return this.renderTreeItem(arcadeValue, key, !subtree);
+        })));
+    }
+    renderGeometryTree(value, subtree = false) {
+        return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, h("calcite-tree-item", null, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty("type"), value.type)), h("calcite-tree-item", null, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty("value"), h("span", { class: "string-value" }, jsonFormat(value.toJSON()))))));
+    }
+    renderDictionaryAsJsonTree(value, subtree = false) {
+        return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, h("calcite-tree-item", { class: "string-value" }, jsonFormat(value.castAsJson()))));
+    }
+    renderDictionaryTree(value, subtree = false) {
+        const geometry = value.geometry?.();
+        return (h("calcite-tree", { slot: subtree ? "children" : undefined, ...treeProps }, value.keys().map((key) => {
+            const arcadeValue = valueToArcadeResult(value.field(key));
+            return this.renderTreeItem(arcadeValue, key);
+        }), geometry ? this.renderTreeItem({ type: "geometry", value: geometry }, "geometry") : null));
+    }
+    renderTreeItem(arcadeResult, key, expanded = false) {
+        switch (arcadeResult.type) {
+            case "null":
+            case "unknown":
+            case "text":
+            case "number":
+            case "date":
+            case "dateOnly":
+            case "time":
+            case "boolean":
+                return (h("calcite-tree-item", null, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), this.renderSimpleValue(arcadeResult))));
+            case "array": {
+                const items = arcadeResult.value ?? [];
+                const firstItems = items.slice(0, MaxArrayItems);
+                return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), this.renderArrayHeader(arcadeResult)), this.renderArrayTree(firstItems, true)));
+            }
+            case "geometry":
+                return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), h("span", null, arcadeResult.type)), this.renderGeometryTree(arcadeResult.value, true)));
+            case "attachment":
+                return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), h("span", null, arcadeResult.type)), this.renderDictionaryAsJsonTree(arcadeResult.value, true)));
+            case "feature":
+            case "dictionary":
+            case "portal":
+                return (h("calcite-tree-item", { expanded: expanded, ...expandableTreeItemProps }, h("div", { class: "tree-item-label" }, this.renderDictionaryProperty(key), h("span", null, arcadeResult.type)), this.renderDictionaryTree(arcadeResult.value, true)));
+            default:
+                return null;
         }
-      })));
-    }))));
-  }
-  render() {
-    return (h(Host, null, h("header", { class: "flex-row" }, h("calcite-action-bar", { class: "flex-adjustable", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h("calcite-action-group", { scale: "s" }, h("calcite-action", { active: this.openedResultPanel === "output", text: this._t9nStrings?.output ?? "Output", "text-enabled": true, scale: "s", icon: "list-show-all", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "output" }), h("calcite-action", { active: this.openedResultPanel === "console", text: this._t9nStrings?.console ?? "Console", "text-enabled": true, scale: "s", icon: "console", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "console" }), h("calcite-action", { active: this.openedResultPanel === "log", text: this._t9nStrings?.log ?? "Log", "text-enabled": true, scale: "s", icon: "list", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "log" }))), h("calcite-action", { scale: "s", icon: "x", text: this._t9nStrings?.close ?? "", onClick: this._emitClose })), h("article", { class: "flex-adjustable" }, this.loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: "" })) : (h("div", { class: "flex-column y-scrollable-container" }, this.renderOutputPanel(), this.renderConsolePanel(), this.renderLogPanel())))));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElement() { return getElement(this); }
+    }
+    renderFeatureSetLabel(arcadeResult) {
+        return (h("div", { class: "value-type" }, h("span", null, arcadeResult.type, ":"), arcadeResult.features.length >= BatchSize ? (h("span", null, "\u00A0", H(this._t9nStrings?.showingfirstitemsformat, {
+            count: BatchSize.toString()
+        }))) : null));
+    }
+    renderFeatureSetTable(arcadeResult) {
+        const fields = supportedFields(arcadeResult.value.fields);
+        return (h("table", null, h("thead", null, h("tr", null, fields.map((field) => (h("th", null, field.name))))), h("tbody", null, arcadeResult.features.map((feature) => (h("tr", null, fields.map((field) => {
+            try {
+                const arcadeResult = valueToArcadeResult(feature.field(field.name));
+                return h("td", null, this.renderSimpleValue(arcadeResult));
+            }
+            catch (e) {
+                return h("td", null);
+            }
+        })))))));
+    }
+    render() {
+        return (h(Host, null, h("header", { class: "flex-row" }, h("calcite-action-bar", { class: "flex-adjustable", layout: "horizontal", scale: "s", expanded: true, "expand-disabled": true }, h("calcite-action-group", { scale: "s" }, h("calcite-action", { active: this.openedResultPanel === "output", text: this._t9nStrings?.output ?? "Output", "text-enabled": true, scale: "s", icon: "list-show-all", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "output" }), h("calcite-action", { active: this.openedResultPanel === "console", text: this._t9nStrings?.console ?? "Console", "text-enabled": true, scale: "s", icon: "console", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "console" }), h("calcite-action", { active: this.openedResultPanel === "log", text: this._t9nStrings?.log ?? "Log", "text-enabled": true, scale: "s", icon: "list", iconFlipRtl: true, onClick: this._switchResultPanel, "data-panel-name": "log" }))), h("calcite-action", { scale: "s", icon: "x", text: this._t9nStrings?.close ?? "", onClick: this._emitClose })), h("article", { class: "flex-adjustable" }, this.loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: "" })) : (h("div", { class: "flex-column y-scrollable-container" }, this.renderOutputPanel(), this.renderConsolePanel(), this.renderLogPanel())))));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElement() { return getElement(this); }
 };
 ArcgisArcadeResults.style = arcadeResultsCss;
 
 function isSuggestionGroups(item) {
-  if (!Array.isArray(item)) {
-    return false;
-  }
-  if (!item.length) {
-    return false;
-  }
-  return Array.isArray(item[0]?.suggestions);
+    if (!Array.isArray(item)) {
+        return false;
+    }
+    if (!item.length) {
+        return false;
+    }
+    return Array.isArray(item[0]?.suggestions);
 }
 
 const arcadeSuggestionsCss = ":host{background-color:var(--calcite-ui-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-ui-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}:host calcite-block p:first-of-type{margin-top:0}:host calcite-block code{font-family:var(--calcite-code-family)}:host calcite-block pre{direction:ltr;overflow-x:auto;background-color:var(--calcite-ui-foreground-2);padding:var(--calcite-spacing-half)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}";
 
 const ArcgisArcadeSuggestions = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 3);
-    this.itemSelected = createEvent(this, "itemSelected", 3);
-    // @ts-expect-error
-    this._updateFilterValue = (e) => (this._filterValue = e.target?.["value"] ?? "");
-    this._emitItemSelected = (e) => {
-      // @ts-expect-error
-      const item = e.target?.["data-item"];
-      if (!item) {
-        return;
-      }
-      const keyEvent = e;
-      if (!keyEvent.key || keyEvent.key === "Enter") {
-        e.preventDefault();
-        this.itemSelected.emit(item.code);
-      }
-    };
-    this._showSuggestionDetail = (e) => {
-      // @ts-expect-error
-      const item = e.target?.["data-item"];
-      if (!item) {
-        return;
-      }
-      e.stopPropagation();
-      this._selectedSuggestion = item;
-    };
-    this._emitClose = () => this.close.emit();
-    this._beforeBack = async () => (this._selectedSuggestion = undefined);
-    this._lang = "";
-    this._t9nLocale = "";
-    this._t9nStrings = undefined;
-    this._selectedSuggestion = undefined;
-    this._filterValue = "";
-    this._colorizeStyle = "";
-    this.suggestions = undefined;
-  }
-  suggestionsPropChanged() {
-    this._selectedSuggestion = undefined;
-  }
-  //#endregion
-  // #region Component lifecycle events
-  async componentWillLoad() {
-    this._colorizeStyle = generateColorizeStyles();
-    this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
-    await F(this, getAssetPath("./assets"));
-  }
-  disconnectedCallback() {
-    this._flowObserver?.disconnect();
-    this._themeChangedListner?.dispose();
-    U(this);
-  }
-  // #endregion
-  //#region Private Methods
-  flowFocusHandler(ref) {
-    // When a flow is removed from the document then a null ref will be passed in
-    if (!ref) {
-      this._flowObserver?.disconnect();
-      this._flowObserver = undefined;
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 3);
+        this.itemSelected = createEvent(this, "itemSelected", 3);
+        // @ts-expect-error
+        this._updateFilterValue = (e) => (this._filterValue = e.target?.value ?? "");
+        this._emitItemSelected = (e) => {
+            // @ts-expect-error
+            const item = e.target?.["data-item"];
+            if (!item) {
+                return;
+            }
+            const keyEvent = e;
+            if (!keyEvent.key || keyEvent.key === "Enter") {
+                e.preventDefault();
+                this.itemSelected.emit(item.code);
+            }
+        };
+        this._showSuggestionDetail = (e) => {
+            // @ts-expect-error
+            const item = e.target?.["data-item"];
+            if (!item) {
+                return;
+            }
+            e.stopPropagation();
+            this._selectedSuggestion = item;
+        };
+        this._emitClose = () => this.close.emit();
+        this._beforeBack = async () => (this._selectedSuggestion = undefined);
+        this._lang = "";
+        this._t9nLocale = "";
+        this._t9nStrings = undefined;
+        this._selectedSuggestion = undefined;
+        this._filterValue = "";
+        this._colorizeStyle = "";
+        this.suggestions = undefined;
     }
-    if (this._flowObserver) {
-      return;
+    suggestionsPropChanged() {
+        this._selectedSuggestion = undefined;
     }
-    // Observer panel added/removed and also observe the flow id
-    // When switching between flow the same reference is reused
-    this._flowObserver = new MutationObserver(() => {
-      // Get the last panel and try to set focus on the input element
-      O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
-    });
-    this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
-  }
-  //#endregion
-  //#region Renderers
-  renderSuggestionGroups() {
-    if (this.suggestions === undefined) {
-      return null;
+    //#endregion
+    // #region Component lifecycle events
+    async componentWillLoad() {
+        this._colorizeStyle = generateColorizeStyles();
+        this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
+        await F(this, getAssetPath("./assets"));
     }
-    if (isSuggestionGroups(this.suggestions)) {
-      return this.suggestions.map((suggestionGroup) => {
-        return (h("calcite-list-item-group", { heading: suggestionGroup.label }, this.renderSuggestionListItems(suggestionGroup.suggestions)));
-      });
+    disconnectedCallback() {
+        this._flowObserver?.disconnect();
+        this._themeChangedListner?.dispose();
+        U(this);
     }
-    return this.renderSuggestionListItems(this.suggestions);
-  }
-  renderSuggestionListItems(suggestions) {
-    suggestions = filterCollection(suggestions, "label", this._filterValue);
-    if (!suggestions.length) {
-      return h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No item");
+    // #endregion
+    //#region Private Methods
+    flowFocusHandler(ref) {
+        // When a flow is removed from the document then a null ref will be passed in
+        if (!ref) {
+            this._flowObserver?.disconnect();
+            this._flowObserver = undefined;
+            return;
+        }
+        if (this._flowObserver) {
+            return;
+        }
+        // Observer panel added/removed and also observe the flow id
+        // When switching between flow the same reference is reused
+        this._flowObserver = new MutationObserver(() => {
+            // Get the last panel and try to set focus on the input element
+            O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+        });
+        this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
-    return suggestions.map((suggestion) => (h("calcite-list-item", { label: suggestion.label, description: suggestion.description, onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": suggestion }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showSuggestionDetail, "data-item": suggestion }))));
-  }
-  renderSuggestionFlowItem() {
-    const suggestion = this._selectedSuggestion;
-    if (!suggestion) {
-      return null;
+    //#endregion
+    //#region Renderers
+    renderSuggestionGroups() {
+        if (this.suggestions === undefined) {
+            return null;
+        }
+        if (isSuggestionGroups(this.suggestions)) {
+            return this.suggestions.map((suggestionGroup) => (h("calcite-list-item-group", { heading: suggestionGroup.label }, this.renderSuggestionListItems(suggestionGroup.suggestions))));
+        }
+        return this.renderSuggestionListItems(this.suggestions);
     }
-    return (h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose, beforeBack: this._beforeBack }, h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelected, ref: (e) => e?.setFocus(), "data-item": suggestion }, this._t9nStrings?.insert), h("calcite-block", { open: true, heading: suggestion.label, description: suggestion.description }, h("div", { innerHTML: convertMarkdownString(suggestion.documentation) }), h("pre", null, h("code", { ref: async (e) => await colorizeCodeElement(e, suggestion.code) })))));
-  }
-  render() {
-    return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose }, h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), h("calcite-list", null, this.renderSuggestionGroups())), this.renderSuggestionFlowItem())));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "suggestions": ["suggestionsPropChanged"]
-  }; }
+    renderSuggestionListItems(suggestions) {
+        suggestions = filterCollection(suggestions, "label", this._filterValue);
+        if (!suggestions.length) {
+            return h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No item");
+        }
+        return suggestions.map((suggestion) => (h("calcite-list-item", { label: suggestion.label, description: suggestion.description, onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": suggestion }, h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showSuggestionDetail, "data-item": suggestion }))));
+    }
+    renderSuggestionFlowItem() {
+        const suggestion = this._selectedSuggestion;
+        if (!suggestion) {
+            return null;
+        }
+        return (h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose, beforeBack: this._beforeBack }, h("calcite-button", { width: "half", slot: "footer", appearance: "outline", kind: "brand", "icon-start": "code", scale: "s", onClick: this._emitItemSelected, ref: (e) => e?.setFocus(), "data-item": suggestion }, this._t9nStrings?.insert), h("calcite-block", { open: true, heading: suggestion.label, description: suggestion.description }, h("div", { innerHTML: convertMarkdownString(suggestion.documentation) }), h("pre", null, h("code", { ref: async (e) => await colorizeCodeElement(e, suggestion.code) })))));
+    }
+    render() {
+        return (h(Host, null, h("style", null, this._colorizeStyle), h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose }, h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), h("calcite-list", null, this.renderSuggestionGroups())), this.renderSuggestionFlowItem())));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "suggestions": ["suggestionsPropChanged"]
+    }; }
 };
 ArcgisArcadeSuggestions.style = arcadeSuggestionsCss;
 
 const arcadeVariablesCss = ":host{background-color:var(--calcite-ui-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-ui-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}";
 
 const ArcgisArcadeVariables = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.close = createEvent(this, "close", 3);
-    this.itemSelected = createEvent(this, "itemSelected", 3);
-    // @ts-expect-error
-    this._updateFilterValue = (e) => (this._filterValue = e.target?.["value"] ?? "");
-    this._beforeBack = async () => {
-      this.removeLastPanelRenderer();
-      this._filterValue = "";
-    };
-    this._emitClose = () => this.close.emit();
-    this._backToTop = () => (this._flowItemRenderers = []);
-    this._emitItemSelected = (e) => {
-      // @ts-expect-error
-      const variable = e.target?.["data-item"];
-      if (!variable || variable.nonInteractive) {
-        return;
-      }
-      const keyEvent = e;
-      if (!keyEvent.key || keyEvent.key === "Enter") {
-        e.preventDefault();
-        this.itemSelected.emit(variable.snippet);
-      }
-    };
-    this._stopEnterPropagation = (e) => {
-      if (e.key === "Enter") {
-        e.stopPropagation();
-      }
-    };
-    this._showCollectionPanel = (e) => {
-      // @ts-expect-error
-      const collectionVariable = e.target?.["data-item"];
-      if (!collectionVariable) {
-        return;
-      }
-      e.stopPropagation();
-      this.addPanelRenderer(this.collectionBasedVariableRenderer(collectionVariable));
-    };
-    this._lang = "";
-    this._t9nLocale = "";
-    this._t9nStrings = undefined;
-    this._mutationCounter = 1;
-    this._flowItemRenderers = [];
-    this._filterValue = "";
-    this.loading = false;
-    this.modelId = undefined;
-  }
-  modelIdPropChanged() {
-    this._flowItemRenderers = [];
-  }
-  //#endregion
-  // #region Component lifecycle events
-  async componentWillLoad() {
-    await F(this, getAssetPath("./assets"));
-  }
-  disconnectedCallback() {
-    U(this);
-    this._flowObserver?.disconnect();
-  }
-  // #endregion
-  //#region Private Methods
-  addPanelRenderer(panelRenderer) {
-    this._flowItemRenderers = [...this._flowItemRenderers, panelRenderer];
-  }
-  removeLastPanelRenderer() {
-    this._flowItemRenderers = this._flowItemRenderers.slice(0, -1);
-  }
-  flowFocusHandler(ref) {
-    // When a flow is removed from the document then a null ref will be passed in
-    if (!ref) {
-      this._flowObserver?.disconnect();
-      this._flowObserver = undefined;
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.close = createEvent(this, "close", 3);
+        this.itemSelected = createEvent(this, "itemSelected", 3);
+        // @ts-expect-error
+        this._updateFilterValue = (e) => (this._filterValue = e.target?.value ?? "");
+        this._beforeBack = async () => {
+            this.removeLastPanelRenderer();
+            this._filterValue = "";
+        };
+        this._emitClose = () => this.close.emit();
+        this._backToTop = () => (this._flowItemRenderers = []);
+        this._emitItemSelected = (e) => {
+            // @ts-expect-error
+            const variable = e.target?.["data-item"];
+            if (!variable || variable.nonInteractive) {
+                return;
+            }
+            const keyEvent = e;
+            if (!keyEvent.key || keyEvent.key === "Enter") {
+                e.preventDefault();
+                this.itemSelected.emit(variable.snippet);
+            }
+        };
+        this._stopEnterPropagation = (e) => {
+            if (e.key === "Enter") {
+                e.stopPropagation();
+            }
+        };
+        this._showCollectionPanel = (e) => {
+            // @ts-expect-error
+            const collectionVariable = e.target?.["data-item"];
+            if (!collectionVariable) {
+                return;
+            }
+            e.stopPropagation();
+            this.addPanelRenderer(this.collectionBasedVariableRenderer(collectionVariable));
+        };
+        this._lang = "";
+        this._t9nLocale = "";
+        this._t9nStrings = undefined;
+        this._mutationCounter = 1;
+        this._flowItemRenderers = [];
+        this._filterValue = "";
+        this.loading = false;
+        this.modelId = undefined;
     }
-    if (this._flowObserver) {
-      return;
+    modelIdPropChanged() {
+        this._flowItemRenderers = [];
     }
-    // Observer panel added/removed and also observe the flow id
-    // When switching between flow the same reference is reused
-    this._flowObserver = new MutationObserver(() => {
-      // Get the last panel and try to set focus on the input element
-      O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
-    });
-    this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
-  }
-  //#endregion
-  //#region Renderers
-  collectionBasedVariableRenderer(collection, topPanel = false) {
-    // Returns a function to be added to the subpanel render collection
-    return () => {
-      if (!collection) {
-        return null;
-      }
-      // If the collection actually exists then two options:
-      // - the collection still need to be loaded
-      // - the collection is ready
-      let loading = this.loading;
-      if (!loading && !collection.loaded) {
-        // Request to load and update mutation counter when done
-        collection.loadSource().then(() => setTimeout(() => this._mutationCounter++));
-        loading = true;
-      }
-      return (h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-action", { slot: "header-actions-end", text: this._t9nStrings?.backtotop ?? "Back to top", scale: "m", hidden: topPanel, icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, this.renderEditorVariables(collection)))));
-    };
-  }
-  renderEditorVariables(collection) {
-    // Filter the variables. Skip group, we will filter the children later on.
-    const filterExpression = B(this._filterValue);
-    const filteredVariables = collection.variables.filter((variable) => variable.passFilter(filterExpression));
-    if (!filteredVariables.length) {
-      return h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No item");
-    }
-    return filteredVariables.map((variable) => this.renderEditorVariable(variable));
-  }
-  renderEditorVariable(variable) {
-    switch (variable.type) {
-      case "group":
-        // Group is a collection but we represent it differently
-        return (h("calcite-list-item-group", { heading: variable.getLabel() }, this.renderEditorVariables(variable)));
-      default:
-        return (h("calcite-list-item", { label: variable.getLabel(), description: variable.getDescription(), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": variable }, variable.isCollection ? (h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showCollectionPanel, onKeyPress: this._stopEnterPropagation, "data-item": variable })) : null, variable.icon ? h("calcite-icon", { icon: variable.icon, scale: "s", slot: "content-start" }) : null));
+    //#endregion
+    // #region Component lifecycle events
+    async componentWillLoad() {
+        await F(this, getAssetPath("./assets"));
     }
-  }
-  render() {
-    const profile = arcadeDefaults.getEditorProfileForModel(this.modelId ?? "");
-    if (!this.loading && !profile?.variables.length) {
-      return (h("calcite-flow", null, h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, closable: true, onCalciteFlowItemClose: this._emitClose }, h("div", { class: "notice-container" }, this._t9nStrings?.noprofilevariablesmessage ?? ""))));
+    disconnectedCallback() {
+        U(this);
+        this._flowObserver?.disconnect();
     }
-    return (h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, this.collectionBasedVariableRenderer(profile, true)(), this._flowItemRenderers.map((renderer) => renderer())));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElement() { return getElement(this); }
-  static get watchers() { return {
-    "modelId": ["modelIdPropChanged"]
-  }; }
+    // #endregion
+    //#region Private Methods
+    addPanelRenderer(panelRenderer) {
+        this._flowItemRenderers = [...this._flowItemRenderers, panelRenderer];
+    }
+    removeLastPanelRenderer() {
+        this._flowItemRenderers = this._flowItemRenderers.slice(0, -1);
+    }
+    flowFocusHandler(ref) {
+        // When a flow is removed from the document then a null ref will be passed in
+        if (!ref) {
+            this._flowObserver?.disconnect();
+            this._flowObserver = undefined;
+            return;
+        }
+        if (this._flowObserver) {
+            return;
+        }
+        // Observer panel added/removed and also observe the flow id
+        // When switching between flow the same reference is reused
+        this._flowObserver = new MutationObserver(() => {
+            // Get the last panel and try to set focus on the input element
+            O(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+        });
+        this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
+    }
+    //#endregion
+    //#region Renderers
+    collectionBasedVariableRenderer(collection, topPanel = false) {
+        // Returns a function to be added to the subpanel render collection
+        return () => {
+            if (!collection) {
+                return null;
+            }
+            // If the collection actually exists then two options:
+            // - the collection still need to be loaded
+            // - the collection is ready
+            let loading = this.loading;
+            if (!loading && !collection.loaded) {
+                // Request to load and update mutation counter when done
+                collection.loadSource().then(() => setTimeout(() => {
+                    this._mutationCounter += 1;
+                }));
+                loading = true;
+            }
+            return (h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-action", { slot: "header-actions-end", text: this._t9nStrings?.backtotop ?? "Back to top", scale: "m", hidden: topPanel, icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), h(StickyFilterInput, { filterValue: this._filterValue, onCalciteInputInput: this._updateFilterValue }), loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this._t9nStrings?.loading ?? "Loading" })) : (h("calcite-list", null, this.renderEditorVariables(collection)))));
+        };
+    }
+    renderEditorVariables(collection) {
+        // Filter the variables. Skip group, we will filter the children later on.
+        const filterExpression = B(this._filterValue);
+        const filteredVariables = collection.variables.filter((variable) => variable.passFilter(filterExpression));
+        if (!filteredVariables.length) {
+            return h("div", { class: "notice-container" }, this._t9nStrings?.noitems ?? "No item");
+        }
+        return filteredVariables.map((variable) => this.renderEditorVariable(variable));
+    }
+    renderEditorVariable(variable) {
+        switch (variable.type) {
+            case "group":
+                // Group is a collection but we represent it differently
+                return (h("calcite-list-item-group", { heading: variable.getLabel() }, this.renderEditorVariables(variable)));
+            default:
+                return (h("calcite-list-item", { label: variable.getLabel(), description: variable.getDescription(), onCalciteListItemSelect: this._emitItemSelected, onKeyPress: this._emitItemSelected, "data-item": variable }, variable.isCollection ? (h("calcite-action", { slot: "actions-end", text: this._t9nStrings?.expand ?? "", scale: "s", icon: "chevron-right", iconFlipRtl: true, onClick: this._showCollectionPanel, onKeyPress: this._stopEnterPropagation, "data-item": variable })) : null, variable.icon ? h("calcite-icon", { icon: variable.icon, scale: "s", slot: "content-start" }) : null));
+        }
+    }
+    render() {
+        const profile = arcadeDefaults.getEditorProfileForModel(this.modelId ?? "");
+        if (!this.loading && !profile?.variables.length) {
+            return (h("calcite-flow", null, h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, closable: true, onCalciteFlowItemClose: this._emitClose }, h("div", { class: "notice-container" }, this._t9nStrings?.noprofilevariablesmessage ?? ""))));
+        }
+        return (h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, this.collectionBasedVariableRenderer(profile, true)(), this._flowItemRenderers.map((renderer) => renderer())));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElement() { return getElement(this); }
+    static get watchers() { return {
+        "modelId": ["modelIdPropChanged"]
+    }; }
 };
 ArcgisArcadeVariables.style = arcadeVariablesCss;
 
@@ -4297,243 +4293,243 @@ const codeEditorCss = "@charset \"UTF-8\";.monaco-action-bar{white-space:nowrap;
 
 // Our default options for the Editor
 const EditorOptionsDefaults = {
-  autoIndent: "advanced",
-  automaticLayout: true,
-  bracketPairColorization: { enabled: true },
-  minimap: { enabled: false },
-  renderLineHighlight: "none",
-  suggest: {
-    snippetsPreventQuickSuggestions: false,
-    showWords: false
-  },
-  tabSize: 2,
-  useShadowDOM: true
+    autoIndent: "advanced",
+    automaticLayout: true,
+    bracketPairColorization: { enabled: true },
+    minimap: { enabled: false },
+    renderLineHighlight: "none",
+    suggest: {
+        snippetsPreventQuickSuggestions: false,
+        showWords: false
+    },
+    tabSize: 2,
+    useShadowDOM: true
 };
 const ArcgisCodeEditor = class {
-  constructor(hostRef) {
-    registerInstance(this, hostRef);
-    this.valueChange = createEvent(this, "valueChange", 3);
-    this._componentReadyDefer = new p();
-    this._disposables = [];
-    this.value = undefined;
-    this.language = undefined;
-    this.modelId = "";
-  }
-  valuePropChange(newValue, oldValue) {
-    if (!this._editorInstance || newValue === oldValue) {
-      return;
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.valueChange = createEvent(this, "valueChange", 3);
+        this._componentReadyDefer = new p();
+        this._disposables = [];
+        this.value = undefined;
+        this.language = undefined;
+        this.modelId = "";
     }
-    this._editorInstance.setValue(newValue ?? "");
-  }
-  languagePropChange(newValue, oldValue) {
-    if (!this._editorInstance || newValue === oldValue) {
-      return;
+    valuePropChange(newValue, oldValue) {
+        if (!this._editorInstance || newValue === oldValue) {
+            return;
+        }
+        this._editorInstance.setValue(newValue ?? "");
     }
-    this.updateModel();
-  }
-  modelIdPropChange(newValue, oldValue) {
-    if (!this._editorInstance || newValue === oldValue) {
-      return;
+    languagePropChange(newValue, oldValue) {
+        if (!this._editorInstance || newValue === oldValue) {
+            return;
+        }
+        this.updateModel();
     }
-    this.updateModel();
-  }
-  //#endregion
-  // #region Public methods API
-  /**
-   * Gets the current value in the editor.
-   * @returns {Promise<string>}
-   */
-  async getValue() {
-    await this._componentReadyDefer.promise;
-    return this._editorInstance?.getValue() ?? "";
-  }
-  /**
-   * Sets the new value in the editor. Use this method instead of setting the value
-   * on the model to preserve undo/redo stack.
-   * @param text
-   * @returns {Promise<void>}
-   */
-  async setValue(text) {
-    await this._componentReadyDefer.promise;
-    if (!this._editorInstance) {
-      return;
+    modelIdPropChange(newValue, oldValue) {
+        if (!this._editorInstance || newValue === oldValue) {
+            return;
+        }
+        this.updateModel();
     }
-    const model = this._editorInstance.getModel();
-    if (!model) {
-      return;
+    //#endregion
+    // #region Public methods API
+    /**
+     * Gets the current value in the editor.
+     * @returns {Promise<string>}
+     */
+    async getValue() {
+        await this._componentReadyDefer.promise;
+        return this._editorInstance?.getValue() ?? "";
     }
-    const range = model.getFullModelRange();
-    this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
-    this._editorInstance.pushUndoStop();
-  }
-  /**
-   * Inserts a text at the current position in the editor.
-   * @param {string} text - The string to insert
-   * @returns {Promise<void>}
-   */
-  async insertText(text) {
-    await this._componentReadyDefer.promise;
-    if (!this._editorInstance) {
-      return;
+    /**
+     * Sets the new value in the editor. Use this method instead of setting the value
+     * on the model to preserve undo/redo stack.
+     * @param text
+     * @returns {Promise<void>}
+     */
+    async setValue(text) {
+        await this._componentReadyDefer.promise;
+        if (!this._editorInstance) {
+            return;
+        }
+        const model = this._editorInstance.getModel();
+        if (!model) {
+            return;
+        }
+        const range = model.getFullModelRange();
+        this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
+        this._editorInstance.pushUndoStop();
     }
-    const model = this._editorInstance.getModel();
-    if (!model) {
-      return;
+    /**
+     * Inserts a text at the current position in the editor.
+     * @param {string} text - The string to insert
+     * @returns {Promise<void>}
+     */
+    async insertText(text) {
+        await this._componentReadyDefer.promise;
+        if (!this._editorInstance) {
+            return;
+        }
+        const model = this._editorInstance.getModel();
+        if (!model) {
+            return;
+        }
+        const range = this._editorInstance.getSelection() ?? new Range(1, 1, 1, 1);
+        this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
     }
-    const range = this._editorInstance.getSelection() ?? new Range(1, 1, 1, 1);
-    this._editorInstance.executeEdits("", [{ range, text: text ?? "", forceMoveMarkers: true }]);
-  }
-  /**
-   * Inserts a snippet at the current position in the editor.
-   * @param {string} text - The string snippet to insert
-   * @returns {Promise<void>}
-   */
-  async insertSnippet(text) {
-    await this._componentReadyDefer.promise;
-    if (!this._editorInstance) {
-      return;
+    /**
+     * Inserts a snippet at the current position in the editor.
+     * @param {string} text - The string snippet to insert
+     * @returns {Promise<void>}
+     */
+    async insertSnippet(text) {
+        await this._componentReadyDefer.promise;
+        if (!this._editorInstance) {
+            return;
+        }
+        const snippetController = this._editorInstance.getContribution("snippetController2");
+        snippetController.insert(text ?? "");
+        this._editorInstance.focus();
     }
-    const snippetController = this._editorInstance.getContribution("snippetController2");
-    snippetController.insert(text ?? "");
-    this._editorInstance.focus();
-  }
-  /**
-   * @internal
-   * Returns the editor instance.
-   * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
-   */
-  async getEditorInstance() {
-    await this._componentReadyDefer.promise;
-    return this._editorInstance;
-  }
-  /**
-   * Sets the focus on the editor.
-   * @returns {Promise<void>}
-   */
-  async setFocus() {
-    await this._componentReadyDefer.promise;
-    this._editorInstance?.focus();
-  }
-  //#endregion
-  //#region Listeners
-  //#endregion
-  // #region Component lifecycle events
-  componentWillLoad() {
-    // Define the Monaco environemt.
-    // Can only do this when assets path has been defined.
-    // If we were placing this logic in connectedCallback, assets path would have not yet been defined.
-    // setupMonacoEnvironment will not redefine if already defined.
-    setupMonacoEnvironment(getAssetPath("./assets"));
-  }
-  componentDidLoad() {
-    // Create and attach and instance of Monaco Editor to the inner element
-    editor.getModel(this.getUri())?.dispose();
-    // Create the model without the value.
-    // Since it's not yet attached to the editor the diagnostic service will not process it.
-    // We will set the value after the editor has been created to trigger the diagnostic again.
-    const model = editor.createModel("", this.language, this.getUri());
-    // Create the editor for the host element.
-    // This will not trigger a diagnostic.
-    this._editorInstance = editor.create(this._hostElt, {
-      model,
-      fixedOverflowWidgets: true,
-      scrollBeyondLastLine: false
-    });
-    this._disposables.push(this._editorInstance);
-    // Set the value now to trigger a diagnostic again
-    model.setValue(this.value ?? "");
-    // Now we can set are component as ready
-    this._componentReadyDefer.resolve();
-    this._editorInstance.updateOptions(EditorOptionsDefaults);
-    // Listen to the Monaco Editor content change event and propagate
-    this._editorInstance.onDidChangeModelContent(() => {
-      const script = this._editorInstance?.getValue() ?? "";
-      this.valueChange.emit(script);
-    });
-    // Detect if the host element or its ancestors got a theme attribute mutation
-    this._themeObserver = T(this._hostElt, ["class"], () => this.updateTheme());
-    // Update the theme of the Monaco Editor
-    this.updateTheme();
-    // Creates a resize observer to re-layout the editor on size changing
-    const resizeObserver = new ResizeObserver(() => this._editorInstance?.layout());
-    resizeObserver.observe(this._hostElt);
-    // Add common actions to the Monaco Editor's context menu and command palette
-    this.addCommonEditorActions();
-  }
-  disconnectedCallback() {
-    while (this._disposables.length) {
-      this._disposables.pop()?.dispose();
+    /**
+     * @internal
+     * Returns the editor instance.
+     * @returns {Promise<IStandaloneCodeEditor>} - The monaco editor instance
+     */
+    async getEditorInstance() {
+        await this._componentReadyDefer.promise;
+        return this._editorInstance;
     }
-    this._themeObserver?.disconnect();
-  }
-  //#endregion
-  // #region Private methods API
-  updateModel() {
-    if (!this._editorInstance) {
-      return;
+    /**
+     * Sets the focus on the editor.
+     * @returns {Promise<void>}
+     */
+    async setFocus() {
+        await this._componentReadyDefer.promise;
+        this._editorInstance?.focus();
     }
-    this._editorInstance.getModel()?.dispose();
-    this._editorInstance.setModel(editor.createModel(this.value ?? "", this.language, this.getUri()));
-  }
-  getUri() {
-    return this.modelId ? Uri.parse(this.modelId) : Uri.parse("");
-  }
-  updateTheme() {
-    // This is called the first time and subsequently by the Mutation Observer
-    // Figure out the theme by walking the ancestor path.
-    // If no theme is found then default to light.
-    const theme = P(this._hostElt) === "light" ? "vs" : "vs-dark";
-    if (theme === this._currentTheme) {
-      return;
+    //#endregion
+    //#region Listeners
+    //#endregion
+    // #region Component lifecycle events
+    componentWillLoad() {
+        // Define the Monaco environemt.
+        // Can only do this when assets path has been defined.
+        // If we were placing this logic in connectedCallback, assets path would have not yet been defined.
+        // setupMonacoEnvironment will not redefine if already defined.
+        setupMonacoEnvironment(getAssetPath("./assets"));
     }
-    this._currentTheme = theme;
-    editor.setTheme(theme);
-  }
-  //#endregion
-  // #region Private methods API
-  addCommonEditorActions() {
-    // Copy zoom in / out command functions
-    const zoomInFn = this._editorInstance?.getAction("editor.action.fontZoomIn");
-    const zoomOutFn = this._editorInstance?.getAction("editor.action.fontZoomOut");
-    // Override the two existing commands so that they appear in the context menu
-    this._editorInstance?.addAction({
-      // Use an existing action's ID to override it
-      id: "editor.action.fontZoomIn",
-      // A label of the action that will be presented to the user.
-      label: "Editor Font Zoom In",
-      // An optional array of keybindings for the action.
-      keybindings: [KeyMod.CtrlCmd | KeyCode.Equal],
-      contextMenuGroupId: "zooming",
-      contextMenuOrder: 1,
-      // Method that will be executed when the action is triggered.
-      // @param editor The editor instance is passed in as a convenience
-      run: () => {
-        zoomInFn?.run();
-      }
-    });
-    this._editorInstance?.addAction({
-      id: "editor.action.fontZoomOut",
-      label: "Editor Font Zoom Out",
-      keybindings: [KeyMod.CtrlCmd | KeyCode.Minus],
-      contextMenuGroupId: "zooming",
-      contextMenuOrder: 2,
-      run: () => {
-        zoomOutFn?.run();
-      }
-    });
-  }
-  //#endregion
-  // #region Rendering
-  render() {
-    return h(Host, null);
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElt() { return getElement(this); }
-  static get watchers() { return {
-    "value": ["valuePropChange"],
-    "language": ["languagePropChange"],
-    "modelId": ["modelIdPropChange"]
-  }; }
+    componentDidLoad() {
+        // Create and attach and instance of Monaco Editor to the inner element
+        editor.getModel(this.getUri())?.dispose();
+        // Create the model without the value.
+        // Since it's not yet attached to the editor the diagnostic service will not process it.
+        // We will set the value after the editor has been created to trigger the diagnostic again.
+        const model = editor.createModel("", this.language, this.getUri());
+        // Create the editor for the host element.
+        // This will not trigger a diagnostic.
+        this._editorInstance = editor.create(this._hostElt, {
+            model,
+            fixedOverflowWidgets: true,
+            scrollBeyondLastLine: false
+        });
+        this._disposables.push(this._editorInstance);
+        // Set the value now to trigger a diagnostic again
+        model.setValue(this.value ?? "");
+        // Now we can set are component as ready
+        this._componentReadyDefer.resolve();
+        this._editorInstance.updateOptions(EditorOptionsDefaults);
+        // Listen to the Monaco Editor content change event and propagate
+        this._editorInstance.onDidChangeModelContent(() => {
+            const script = this._editorInstance?.getValue() ?? "";
+            this.valueChange.emit(script);
+        });
+        // Detect if the host element or its ancestors got a theme attribute mutation
+        this._themeObserver = T(this._hostElt, ["class"], () => this.updateTheme());
+        // Update the theme of the Monaco Editor
+        this.updateTheme();
+        // Creates a resize observer to re-layout the editor on size changing
+        const resizeObserver = new ResizeObserver(() => this._editorInstance?.layout());
+        resizeObserver.observe(this._hostElt);
+        // Add common actions to the Monaco Editor's context menu and command palette
+        this.addCommonEditorActions();
+    }
+    disconnectedCallback() {
+        while (this._disposables.length) {
+            this._disposables.pop()?.dispose();
+        }
+        this._themeObserver?.disconnect();
+    }
+    //#endregion
+    // #region Private methods API
+    updateModel() {
+        if (!this._editorInstance) {
+            return;
+        }
+        this._editorInstance.getModel()?.dispose();
+        this._editorInstance.setModel(editor.createModel(this.value ?? "", this.language, this.getUri()));
+    }
+    getUri() {
+        return this.modelId ? Uri.parse(this.modelId) : Uri.parse("");
+    }
+    updateTheme() {
+        // This is called the first time and subsequently by the Mutation Observer
+        // Figure out the theme by walking the ancestor path.
+        // If no theme is found then default to light.
+        const theme = P(this._hostElt) === "light" ? "vs" : "vs-dark";
+        if (theme === this._currentTheme) {
+            return;
+        }
+        this._currentTheme = theme;
+        editor.setTheme(theme);
+    }
+    //#endregion
+    // #region Private methods API
+    addCommonEditorActions() {
+        // Copy zoom in / out command functions
+        const zoomInFn = this._editorInstance?.getAction("editor.action.fontZoomIn");
+        const zoomOutFn = this._editorInstance?.getAction("editor.action.fontZoomOut");
+        // Override the two existing commands so that they appear in the context menu
+        this._editorInstance?.addAction({
+            // Use an existing action's ID to override it
+            id: "editor.action.fontZoomIn",
+            // A label of the action that will be presented to the user.
+            label: "Editor Font Zoom In",
+            // An optional array of keybindings for the action.
+            keybindings: [KeyMod.CtrlCmd | KeyCode.Equal],
+            contextMenuGroupId: "zooming",
+            contextMenuOrder: 1,
+            // Method that will be executed when the action is triggered.
+            // @param editor The editor instance is passed in as a convenience
+            run: () => {
+                zoomInFn?.run();
+            }
+        });
+        this._editorInstance?.addAction({
+            id: "editor.action.fontZoomOut",
+            label: "Editor Font Zoom Out",
+            keybindings: [KeyMod.CtrlCmd | KeyCode.Minus],
+            contextMenuGroupId: "zooming",
+            contextMenuOrder: 2,
+            run: () => {
+                zoomOutFn?.run();
+            }
+        });
+    }
+    //#endregion
+    // #region Rendering
+    render() {
+        return h(Host, null);
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get _hostElt() { return getElement(this); }
+    static get watchers() { return {
+        "value": ["valuePropChange"],
+        "language": ["languagePropChange"],
+        "modelId": ["modelIdPropChange"]
+    }; }
 };
 ArcgisCodeEditor.style = codeEditorCss;