@arcgis/coding-components 5.2.0-next.24 → 5.2.0-next.26

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

@@ -2,11 +2,11 @@
 import { g as Z, c as ee } from "../../chunks/runtime.js";
 import { css as te, html as d, nothing as z } from "lit";
 import { i as se } from "../../chunks/monaco-importer.js";
-import { LitElement as ie, createEvent as N, safeClassMap as P } from "@arcgis/lumina";
+import { LitElement as ie, createEvent as N, safeClassMap as v } from "@arcgis/lumina";
 import { generateGuid as ae } from "@arcgis/toolkit/string";
 import { i as y, D as ne, e as K } from "../../chunks/arcade-executor.js";
 import { s as oe, a as re } from "../../chunks/arcade-service-accessors.js";
-import { b as v } from "../../chunks/arcade-defaults.js";
+import { b as $ } from "../../chunks/arcade-defaults.js";
 import { setArcadeAskAiBinding as B, arcadeAskAiCommandId as ce, arcadeQuickFixKind as le } from "../../chunks/arcade-mode.js";
 import { u as de } from "../../chunks/useT9n.js";
 import { createRef as H, ref as j } from "lit/directives/ref.js";
@@ -15,8 +15,8 @@ import he from "@arcgis/core/config.js";
 import Q from "@arcgis/core/identity/IdentityManager.js";
 import { log as ge, rethrowError as u } from "@arcgis/toolkit/log";
 import { watch as L } from "@arcgis/core/core/reactiveUtils.js";
-import m from "@arcgis/core/core/Accessor.js";
-import { property as c, subclass as f } from "@arcgis/core/core/accessorSupport/decorators.js";
+import f from "@arcgis/core/core/Accessor.js";
+import { property as c, subclass as x } from "@arcgis/core/core/accessorSupport/decorators.js";
 import { A as W } from "../../chunks/ArcadeDebuggerPreviewTabsState.js";
 import { r as pe } from "../../chunks/utilities.js";
 import { Range as V, KeyCode as be, Uri as _e } from "monaco-editor";
@@ -50,27 +50,27 @@ async function Pe({
   const s = e.replace(/\/sharing\/rest(\/.*)?$/iu, "").replace(/\/$/u, "");
   if (!await Ae(s))
     return { shouldRender: !1 };
-  const a = await Se(e), o = `${s}/sharing/rest/portals/self?f=json&token=${a}`, n = `${s}/sharing/rest/portals/self/settings?f=json&token=${a}`, r = `${s}/sharing/rest/portals/self/signinSettings?f=json&token=${a}`, w = await Promise.allSettled([
-    fetch(o, { credentials: "include" }).then((A) => A.json()),
-    fetch(n, { credentials: "include" }).then((A) => A.json()),
-    fetch(r, { credentials: "include" }).then((A) => A.json())
-  ]), [x, R, I] = w, S = x.status === "fulfilled" ? x.value : (h("warn", `Failed to fetch selfUrl. Reason: ${x.reason}.`), {}), T = R.status === "fulfilled" ? R.value : (h("warn", `Failed to fetch settingsUrl. Reason: ${R.reason}.`), {}), J = I.status === "fulfilled" ? I.value : (h("warn", `Failed to fetch signinSettingsUrl. Reason: ${I.reason}.`), {});
-  if (S.isPortal)
+  const a = await Se(e), r = `${s}/sharing/rest/portals/self?f=json&token=${a}`, n = `${s}/sharing/rest/portals/self/settings?f=json&token=${a}`, o = `${s}/sharing/rest/portals/self/signinSettings?f=json&token=${a}`, b = await Promise.allSettled([
+    fetch(r, { credentials: "include" }).then((P) => P.json()),
+    fetch(n, { credentials: "include" }).then((P) => P.json()),
+    fetch(o, { credentials: "include" }).then((P) => P.json())
+  ]), [S, R, I] = b, A = S.status === "fulfilled" ? S.value : (h("warn", `Failed to fetch selfUrl. Reason: ${S.reason}.`), {}), T = R.status === "fulfilled" ? R.value : (h("warn", `Failed to fetch settingsUrl. Reason: ${R.reason}.`), {}), J = I.status === "fulfilled" ? I.value : (h("warn", `Failed to fetch signinSettingsUrl. Reason: ${I.reason}.`), {});
+  if (A.isPortal)
     return { shouldRender: !1 };
-  const M = S.helpBase || "";
+  const M = A.helpBase || "";
   if (!T)
     return h("warn", "Settings response is not available."), { shouldRender: !1 };
   const k = {
     orgAiAssistantsEnabled: xe(T),
     betaAppsAllowed: J.blockBetaApps !== !0,
-    serviceUrlAvailable: !!S?.helperServices?.aiAssistantServices?.url,
-    userHasUseAiAssistantsPrivilege: S?.user?.privileges?.includes("portal:user:useAIAssistants") === !0
+    serviceUrlAvailable: !!A?.helperServices?.aiAssistantServices?.url,
+    userHasUseAiAssistantsPrivilege: A?.user?.privileges?.includes("portal:user:useAIAssistants") === !0
   };
   k.betaAppsAllowed || h(
     "warn",
     "Arcade Assistant is blocked by the organization settings. To enable it, do not block beta apps in the organization settings."
   ), k.userHasUseAiAssistantsPrivilege || h("warn", "User does not have the required privileges to use AI Assistants.");
-  const F = q(k, fe), U = q(k, X), O = S?.helperServices?.aiAssistantServices?.url;
+  const F = q(k, fe), U = q(k, X), O = A?.helperServices?.aiAssistantServices?.url;
   return O ? {
     shouldRender: !0,
     portalUrl: e,
@@ -92,42 +92,42 @@ async function Pe({
     feedbackServiceUrl: G
   };
 }
-var ve = Object.defineProperty, ye = Object.getOwnPropertyDescriptor, _ = (t, e, s, i) => {
-  for (var a = i > 1 ? void 0 : i ? ye(e, s) : e, o = t.length - 1, n; o >= 0; o--)
-    (n = t[o]) && (a = (i ? n(e, s, a) : n(a)) || a);
+var ve = Object.defineProperty, $e = Object.getOwnPropertyDescriptor, m = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? $e(e, s) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (i ? n(e, s, a) : n(a)) || a);
   return i && a && ve(e, s, a), a;
 };
 const Y = 100;
-let g = class extends m {
+let g = class extends f {
   constructor(t) {
     super(t), this.collectionItems = [], this.errorMessage = "", this.expanded = !1, this.requestId = 0, this.status = "idle", this.visibleChildCount = Y;
   }
 };
-_([
+m([
   c()
 ], g.prototype, "collectionItems", 2);
-_([
+m([
   c()
 ], g.prototype, "errorMessage", 2);
-_([
+m([
   c()
 ], g.prototype, "expanded", 2);
-_([
+m([
   c()
 ], g.prototype, "requestId", 2);
-_([
+m([
   c()
 ], g.prototype, "schemaValue", 2);
-_([
+m([
   c()
 ], g.prototype, "status", 2);
-_([
+m([
   c()
 ], g.prototype, "visibleChildCount", 2);
-g = _([
-  f("ArcadeDebuggerLazyTreeNodeState")
+g = m([
+  x("ArcadeDebuggerLazyTreeNodeState")
 ], g);
-let C = class extends m {
+let C = class extends f {
   constructor(t) {
     super(t), this.generation = 0, this.nodes = /* @__PURE__ */ new Map();
   }
@@ -171,13 +171,13 @@ let C = class extends m {
     const i = this.nodes.get(t);
     if (!i || i.status === "loading" || i.status === "loaded")
       return;
-    const a = this.generation, o = i.requestId + 1;
-    i.requestId = o, i.status = "loading", i.errorMessage = "", i.schemaValue = void 0, i.collectionItems = [], e().then((n) => {
-      const r = this.nodes.get(t);
-      !r || this.generation !== a || r.requestId !== o || (s(r, n), r.status = "loaded");
+    const a = this.generation, r = i.requestId + 1;
+    i.requestId = r, i.status = "loading", i.errorMessage = "", i.schemaValue = void 0, i.collectionItems = [], e().then((n) => {
+      const o = this.nodes.get(t);
+      !o || this.generation !== a || o.requestId !== r || (s(o, n), o.status = "loaded");
     }).catch(() => {
       const n = this.nodes.get(t);
-      !n || this.generation !== a || n.requestId !== o || (n.status = "error");
+      !n || this.generation !== a || n.requestId !== r || (n.status = "error");
     });
   }
   destroyNodes() {
@@ -186,15 +186,15 @@ let C = class extends m {
     this.nodes.clear();
   }
 };
-C = _([
-  f("ArcadeDebuggerLazyTreeState")
+C = m([
+  x("ArcadeDebuggerLazyTreeState")
 ], C);
-var $e = Object.defineProperty, De = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
-  for (var a = i > 1 ? void 0 : i ? De(e, s) : e, o = t.length - 1, n; o >= 0; o--)
-    (n = t[o]) && (a = (i ? n(e, s, a) : n(a)) || a);
-  return i && a && $e(e, s, a), a;
+var ye = Object.defineProperty, Ee = Object.getOwnPropertyDescriptor, l = (t, e, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? Ee(e, s) : e, r = t.length - 1, n; r >= 0; r--)
+    (n = t[r]) && (a = (i ? n(e, s, a) : n(a)) || a);
+  return i && a && ye(e, s, a), a;
 };
-let b = class extends m {
+let _ = class extends f {
   constructor(t) {
     super(t), this.phase = "idle", this.sessionId = 0, this.consoleLogs = [], this.hasExecuted = !1;
   }
@@ -219,26 +219,26 @@ let b = class extends m {
 };
 l([
   c()
-], b.prototype, "phase", 2);
+], _.prototype, "phase", 2);
 l([
   c()
-], b.prototype, "mode", 2);
+], _.prototype, "mode", 2);
 l([
   c()
-], b.prototype, "sessionId", 2);
+], _.prototype, "sessionId", 2);
 l([
   c()
-], b.prototype, "result", 2);
+], _.prototype, "result", 2);
 l([
   c()
-], b.prototype, "consoleLogs", 2);
+], _.prototype, "consoleLogs", 2);
 l([
   c()
-], b.prototype, "hasExecuted", 2);
-b = l([
-  f("ArcadeDebuggerExecutionModel")
-], b);
-let $ = class extends m {
+], _.prototype, "hasExecuted", 2);
+_ = l([
+  x("ArcadeDebuggerExecutionModel")
+], _);
+let E = class extends f {
   constructor(t) {
     super(t), this.editorBreakpoints = [], this.executionBreakpoints = [];
   }
@@ -258,14 +258,14 @@ let $ = class extends m {
 };
 l([
   c()
-], $.prototype, "editorBreakpoints", 2);
+], E.prototype, "editorBreakpoints", 2);
 l([
   c()
-], $.prototype, "executionBreakpoints", 2);
-$ = l([
-  f("ArcadeDebuggerSessionModel")
-], $);
-let D = class extends m {
+], E.prototype, "executionBreakpoints", 2);
+E = l([
+  x("ArcadeDebuggerSessionModel")
+], E);
+let D = class extends f {
   constructor(t) {
     super(t), this.openedPanel = "output", this.showPanel = !1;
   }
@@ -277,9 +277,9 @@ l([
   c()
 ], D.prototype, "showPanel", 2);
 D = l([
-  f("ArcadeDebuggerUiModel")
+  x("ArcadeDebuggerUiModel")
 ], D);
-let E = class extends m {
+let w = class extends f {
   constructor(t) {
     super(t);
   }
@@ -298,16 +298,16 @@ let E = class extends m {
 };
 l([
   c()
-], E.prototype, "pausedState", 2);
+], w.prototype, "pausedState", 2);
 l([
   c()
-], E.prototype, "lastPausedState", 2);
-E = l([
-  f("ArcadeDebuggerPausedFrameModel")
-], E);
-let p = class extends m {
+], w.prototype, "lastPausedState", 2);
+w = l([
+  x("ArcadeDebuggerPausedFrameModel")
+], w);
+let p = class extends f {
   constructor(t) {
-    super(t), this.execution = new b(), this.lazyTreeState = new C(), this.pausedFrame = new E(), this.previewTabsState = new W(), this.session = new $(), this.ui = new D();
+    super(t), this.execution = new _(), this.lazyTreeState = new C(), this.pausedFrame = new w(), this.previewTabsState = new W(), this.session = new E(), this.ui = new D();
   }
   get editorBreakpoints() {
     return this.session.editorBreakpoints;
@@ -484,9 +484,9 @@ l([
   c()
 ], p.prototype, "ui", 2);
 p = l([
-  f("ArcadeDebuggerStore")
+  x("ArcadeDebuggerStore")
 ], p);
-const Ee = {
+const De = {
   glyphMargin: !0,
   lineNumbersMinChars: 1
 };
@@ -522,15 +522,18 @@ class we extends ie {
   static {
     this.styles = [me];
   }
+  get _canExecute() {
+    return !!(this.testData || this.externalExecutor);
+  }
   get _usesBottomExecutionDrawer() {
-    return this.enableDebugger && !!this.testData;
+    return this._canExecute && (this.enableDebugger || !!this.externalExecutor);
   }
   get editorInstance() {
     return this._codeEditorElt.value?.editorInstance;
   }
   get editorOptions() {
     return {
-      ...Ee,
+      ...De,
       ...this._editorOptions
     };
   }
@@ -567,7 +570,7 @@ class we extends ie {
     }));
   }
   willUpdate(e) {
-    (e.has("messages") || e.has("profile")) && this._updateDataModelDeps(), e.has("testData") && this._testDataChanged(), e.has("enableDebugger") && !this.enableDebugger && this._debuggerState.disableDebugger(), e.has("snippets") && v.updateApiContextForModel(this._modelId, {
+    (e.has("messages") || e.has("profile")) && this._updateDataModelDeps(), (e.has("testData") || e.has("externalExecutor")) && this._executionContextChanged(), e.has("enableDebugger") && !this.enableDebugger && this._debuggerState.disableDebugger(), e.has("snippets") && $.updateApiContextForModel(this._modelId, {
       snippets: this.snippets
     }), (e.has("arcadeAssistant") || e.has("disableAssistant")) && this._updateArcadeAssistantRemoteState();
   }
@@ -584,14 +587,14 @@ class we extends ie {
       if (!this.isConnected)
         return;
       const e = await re();
-      this._disposables.push(e.onDiagnosticsChange((r) => {
-        this._preparingArcade || (this._diagnostics = r.diagnostics, this.arcgisDiagnosticsChange.emit(r.diagnostics));
-      })), this.testData && !this._executeScriptAction && this._addExecuteScriptAction(), this._syncAskAiAction();
+      this._disposables.push(e.onDiagnosticsChange((o) => {
+        this._preparingArcade || (this._diagnostics = o.diagnostics, this.arcgisDiagnosticsChange.emit(o.diagnostics));
+      })), this._canExecute && !this._executeScriptAction && this._addExecuteScriptAction(), this._syncAskAiAction();
       const s = L(() => this._debuggerState.editorBreakpoints, () => this._updateBreakpointsDecorations(), { sync: !0 }), i = L(() => this._debuggerState.debuggerLine, () => this._updateDebuggerPausedLineDecoration(), { sync: !0 }), a = L(() => this._debuggerState.consoleLogs.length, () => this.requestUpdate(), { sync: !0 });
       this._disposables.push({ dispose: () => s.remove() }, { dispose: () => i.remove() }, { dispose: () => a.remove() });
-      const o = this.editorInstance?.onMouseDown((r) => this._onEditorMouseDown(r));
-      o && this._disposables.push(o);
-      const n = this.editorInstance?.onDidChangeModelContent((r) => this._onEditorModelContentChange(r));
+      const r = this.editorInstance?.onMouseDown((o) => this._onEditorMouseDown(o));
+      r && this._disposables.push(r);
+      const n = this.editorInstance?.onDidChangeModelContent((o) => this._onEditorModelContentChange(o));
       n && this._disposables.push(n), this._updateBreakpointsDecorations(), this._updateDebuggerPausedLineDecoration();
     })();
     try {
@@ -663,26 +666,26 @@ class we extends ie {
       return { type: "error", value: "Missing external executor", error: null };
     const a = new AbortController();
     this._abortExternalExecution(), this._externalExecutionAbortController = a;
-    const o = i.console ?? (() => {
+    const r = i.console ?? (() => {
     });
     try {
       if (e === "debug") {
-        const { breakpoints: n, onDebugPause: r } = i;
-        if (!n || !r)
+        const { breakpoints: n, onDebugPause: o } = i;
+        if (!n || !o)
           throw new Error("Missing debug execution options");
         return await this.externalExecutor.execute({
           mode: "debug",
           script: s,
-          console: o,
+          console: r,
           signal: a.signal,
           breakpoints: n,
-          onDebugPause: r
+          onDebugPause: o
         });
       }
       return await this.externalExecutor.execute({
         mode: "run",
         script: s,
-        console: o,
+        console: r,
         signal: a.signal
       });
     } catch (n) {
@@ -695,16 +698,16 @@ class we extends ie {
       this._externalExecutionAbortController === a && (this._externalExecutionAbortController = void 0);
     }
   }
-  _testDataChanged() {
-    !this.testData && this._executeScriptAction && (this._disposeSafely(this._executeScriptAction), this._executeScriptAction = void 0), this.testData && !this._executeScriptAction && this._addExecuteScriptAction(), !this.testData && this.enableDebugger && this._debuggerState.clearForMissingTestData(), this._debuggerState.showPanel && this._executeScript("run").catch(u(this));
+  _executionContextChanged() {
+    !this._canExecute && this._executeScriptAction && (this._disposeSafely(this._executeScriptAction), this._executeScriptAction = void 0), this._canExecute && !this._executeScriptAction && this._addExecuteScriptAction(), !this.testData && this.enableDebugger && this._debuggerState.clearForMissingTestData(), this._debuggerState.openedPanel === "debug-console" && !this.enableDebugger && this._debuggerState.closePanel(), this._debuggerState.showPanel && this._executeScript("run").catch(u(this));
   }
   async _updateEditorProfile() {
     this._preparingArcade = !0;
     try {
-      await v.setProfileForModel(this._modelId, this.profile, {
+      await $.setProfileForModel(this._modelId, this.profile, {
         locale: this.messages._t9nLocale,
         snippets: this.snippets
-      }), this._editorProfile = v.getEditorProfileForModel(this._modelId);
+      }), this._editorProfile = $.getEditorProfileForModel(this._modelId);
     } catch {
       this._editorProfile = void 0;
     } finally {
@@ -712,45 +715,46 @@ class we extends ie {
     }
   }
   async _updateApiLibrary() {
-    this._apiLibrary = await v.getApiLibraryForModel(this._modelId);
+    this._apiLibrary = await $.getApiLibraryForModel(this._modelId);
   }
   _setExecutionPanel(e) {
     this._debuggerState.setPanel(e);
   }
   async _executeScript(e) {
-    const s = this.testData;
-    if (!this._codeEditorElt.value || !s)
+    const s = this.testData, i = this.externalExecutor;
+    if (!this._codeEditorElt.value || !s && !i)
       return;
-    const i = e === "debug" ? this._debuggerState.startDebug() : this._debuggerState.startRun();
+    const a = e === "debug" ? this._debuggerState.startDebug() : this._debuggerState.startRun();
     setTimeout(() => {
       (async () => {
-        const a = this._codeEditorElt.value?.value ?? this.script, o = {
+        const r = this._codeEditorElt.value?.value ?? this.script, n = {
           mode: e,
-          console: (r) => this._debuggerState.addConsoleLog(r),
+          console: (b) => this._debuggerState.addConsoleLog(b),
           breakpoints: e === "debug" ? this._debuggerState.debuggerBreakpoints : void 0
         };
-        e === "debug" && (o.onDebugPause = this._handleDebugPause.bind(this, i));
-        let n;
-        if (this.externalExecutor)
-          n = await this._executeWithExternalExecutor(e, a, o);
-        else {
-          const r = await this._editorProfilePromise;
-          if (!r) {
+        e === "debug" && (n.onDebugPause = this._handleDebugPause.bind(this, a));
+        let o;
+        if (i)
+          o = await this._executeWithExternalExecutor(e, r, n);
+        else if (s) {
+          const b = await this._editorProfilePromise;
+          if (!b) {
             this._debuggerState.fail({ type: "error", value: "Missing editor profile", error: null });
             return;
           }
-          n = await K(r.definition, a, s, o);
-        }
-        if (i === this._debuggerState.sessionId) {
+          o = await K(b.definition, r, s, n);
+        } else
+          return;
+        if (a === this._debuggerState.sessionId) {
           if (e === "debug") {
-            if (y(n)) {
-              this._debuggerState.fail(n);
+            if (y(o)) {
+              this._debuggerState.fail(o);
               return;
             }
-            this._debuggerState.completeDebug(n);
+            this._debuggerState.completeDebug(o);
             return;
           }
-          y(n) ? this._debuggerState.completeRun(n) : this.externalExecutor ? this._debuggerState.completeRun(n, { useDebugRenderer: !0 }) : this._debuggerState.fail({ type: "error", value: "Unexpected debug result", error: null });
+          y(o) ? this._debuggerState.completeRun(o) : i ? this._debuggerState.completeRun(o, { useDebugRenderer: !0 }) : this._debuggerState.fail({ type: "error", value: "Unexpected debug result", error: null });
         }
       })();
     }, 0);
@@ -789,7 +793,7 @@ class we extends ie {
       contextMenuGroupId: "code",
       contextMenuOrder: 1,
       run: () => {
-        this.testData && this._executeScript("run").catch(u(this));
+        this._canExecute && this._executeScript("run").catch(u(this));
       }
     });
     e && (this._executeScriptAction = e, this._disposables.push(e));
@@ -855,15 +859,15 @@ class we extends ie {
     this.disableAssistant ? this._arcadeAssistantRemoteState = { shouldRender: !1 } : this._arcadeAssistantRemoteState = await Pe(e ?? {}), this._syncAskAiAction();
   }
   renderMainActionBar() {
-    return this.enableDebugger || !this.testData ? null : d`<calcite-action-bar class="main-action-bar" layout=horizontal scale=s expanded expand-disabled slot=top-action-bar><calcite-action-group scale=s><calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade} @click=${() => {
+    return this._usesBottomExecutionDrawer || !this._canExecute ? null : d`<calcite-action-bar class="main-action-bar" layout=horizontal scale=s expanded expand-disabled slot=top-action-bar><calcite-action-group scale=s><calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade} @click=${() => {
       this._executeScript("run").catch(u(this));
     }}></calcite-action>${this._debuggerState.result ? d`<calcite-action .text=${this.messages.lastresults ?? ""} .active=${this._debuggerState.showPanel} text-enabled icon=access-string-results icon-flip-rtl scale=s @click=${this._toggleShowExecutionPanel}></calcite-action>` : null}</calcite-action-group></calcite-action-bar>`;
   }
   renderMainPanel() {
-    return d`<arcgis-code-editor slot=editor .editorOptions=${this.editorOptions} .language=${v.languageId} .value=${this.script ?? ""} .modelId=${this._modelId} @arcgisValueChange=${this._onCodeEditorValueChange} ${j(this._codeEditorElt)}></arcgis-code-editor>`;
+    return d`<arcgis-code-editor slot=editor .editorOptions=${this.editorOptions} .language=${$.languageId} .value=${this.script ?? ""} .modelId=${this._modelId} @arcgisValueChange=${this._onCodeEditorValueChange} ${j(this._codeEditorElt)}></arcgis-code-editor>`;
   }
-  renderAction({ id: e, label: s, icon: i, active: a, panelName: o, iconFlipRtl: n = !1, onClick: r = this._toggleSidePanel }) {
-    return d`<calcite-action id=${e ?? z} .text=${s} .textEnabled=${this.sideActionBarExpanded} .icon=${i} .active=${a} @click=${r} data-panel-name=${o ?? z} .iconFlipRtl=${n}></calcite-action>${!this.sideActionBarExpanded && d`<calcite-tooltip .referenceElement=${e}><span>${s}</span></calcite-tooltip>` || ""}`;
+  renderAction({ id: e, label: s, icon: i, active: a, panelName: r, iconFlipRtl: n = !1, onClick: o = this._toggleSidePanel }) {
+    return d`<calcite-action id=${e ?? z} .text=${s} .textEnabled=${this.sideActionBarExpanded} .icon=${i} .active=${a} @click=${o} data-panel-name=${r ?? z} .iconFlipRtl=${n}></calcite-action>${!this.sideActionBarExpanded && d`<calcite-tooltip .referenceElement=${e}><span>${s}</span></calcite-tooltip>` || ""}`;
   }
   renderSideActionBar() {
     return this.hideSideBar ? null : d`<calcite-action-bar slot=side-action-bar class="side-action-bar" .expanded=${this.sideActionBarExpanded} position=end @calciteActionBarToggle=${this._toggleSideActionBarExpanded}><calcite-action-group>${this.renderAction({
@@ -910,10 +914,10 @@ class we extends ie {
     if (this.hideSideBar)
       return null;
     const { openedSidePanel: e, _arcadeAssistantRemoteState: s } = this;
-    return d`<arcgis-language-api-panel slot=side-panel class=${P(e === "api" ? "" : "hidden")} .loading=${this._preparingArcade} .apiLibrary=${this._apiLibrary} .hideDocumentationActions=${this.hideDocumentationActions} @arcgisInternalItemSelected=${this._insertAsSnippet} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none .closed=${e !== "api"}></arcgis-language-api-panel><arcgis-editor-variables slot=side-panel class=${P(e === "variables" ? "" : "hidden")} .loading=${this._preparingArcade} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none .variable=${this._editorProfile} .closed=${e !== "variables"} .messageOverrides=${{
+    return d`<arcgis-language-api-panel slot=side-panel class=${v(e === "api" ? "" : "hidden")} .loading=${this._preparingArcade} .apiLibrary=${this._apiLibrary} .hideDocumentationActions=${this.hideDocumentationActions} @arcgisInternalItemSelected=${this._insertAsSnippet} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none .closed=${e !== "api"}></arcgis-language-api-panel><arcgis-editor-variables slot=side-panel class=${v(e === "variables" ? "" : "hidden")} .loading=${this._preparingArcade} .modelId=${this._modelId} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none .variable=${this._editorProfile} .closed=${e !== "variables"} .messageOverrides=${{
       profileempty: this.messages.profileempty,
       profilevariables: this.messages.profilevariables
-    }}></arcgis-editor-variables>${this.suggestions?.length && d`<arcgis-arcade-suggestions slot=side-panel class=${P(e === "suggestions" ? "" : "hidden")} .closed=${e !== "suggestions"} .suggestions=${this.suggestions} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none></arcgis-arcade-suggestions>` || ""}${s?.shouldRender && d`<arcgis-arcade-coding-assistant slot=side-panel class=${P(e === "arcade-assistant" ? "" : "hidden")} .closed=${e !== "arcade-assistant"} .insertText=${this._insertText.bind(this)} .closePanel=${this._closeSidePanel} .portalUrl=${s.portalUrl} .serviceUrl=${"serviceUrl" in s ? s.serviceUrl : void 0} .helpBase=${s.helpBase} .promptingEnabled=${this._canPromptWithArcadeAssistant()} .feedbackServiceUrl=${s.feedbackServiceUrl} .editorRef=${this.el} .appVersion=${this.arcadeAssistant?.appVersion} .disableQuestionAnswerLogging=${this.arcadeAssistant?.disableQuestionAnswerLogging} .diagnostics=${this._diagnostics} ${j(this._arcadeAssistantElt)}></arcgis-arcade-coding-assistant>` || ""}${this.customPanels?.map((i) => d`<calcite-flow slot=side-panel class=${P(e === i.id ? "" : "hidden")}>${i?.useFlows ? i.renderer?.({
+    }}></arcgis-editor-variables>${this.suggestions?.length && d`<arcgis-arcade-suggestions slot=side-panel class=${v(e === "suggestions" ? "" : "hidden")} .closed=${e !== "suggestions"} .suggestions=${this.suggestions} @arcgisInternalItemSelected=${this._insertAsText} @arcgisInternalClosePanel=${this._closeSidePanel} data-panel-name=none></arcgis-arcade-suggestions>` || ""}${s?.shouldRender && d`<arcgis-arcade-coding-assistant slot=side-panel class=${v(e === "arcade-assistant" ? "" : "hidden")} .closed=${e !== "arcade-assistant"} .insertText=${this._insertText.bind(this)} .closePanel=${this._closeSidePanel} .portalUrl=${s.portalUrl} .serviceUrl=${"serviceUrl" in s ? s.serviceUrl : void 0} .helpBase=${s.helpBase} .promptingEnabled=${this._canPromptWithArcadeAssistant()} .feedbackServiceUrl=${s.feedbackServiceUrl} .editorRef=${this.el} .appVersion=${this.arcadeAssistant?.appVersion} .disableQuestionAnswerLogging=${this.arcadeAssistant?.disableQuestionAnswerLogging} .diagnostics=${this._diagnostics} ${j(this._arcadeAssistantElt)}></arcgis-arcade-coding-assistant>` || ""}${this.customPanels?.map((i) => d`<calcite-flow slot=side-panel class=${v(e === i.id ? "" : "hidden")}>${i?.useFlows ? i.renderer?.({
       closePanel: this._toggleSidePanel,
       insertText: this._insertText.bind(this),
       closed: e !== i.id,
@@ -936,18 +940,21 @@ class we extends ie {
     return d`<arcgis-arcade-results slot=results-panel .openedResultPanel=${e} .loading=${this._debuggerState.isExecuting} .result=${this._debuggerState.runResult} .consoleLogs=${this._debuggerState.consoleLogs} @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange} @arcgisInternalClosePanel=${this._onExecutionPanelClose}></arcgis-arcade-results>`;
   }
   renderBottomExecutionBody() {
-    const { showPanel: e, openedPanel: s, debugResult: i, isExecuting: a, mode: o } = this._debuggerState;
-    return e ? s === "debug-console" ? d`<arcgis-arcade-debugger-console slot=results-panel .modelId=${this._modelId} .debuggerStore=${this._debuggerState}></arcgis-arcade-debugger-console>` : s === "output" && (o === "debug" || i) ? d`<arcgis-arcade-debugger-output .outputTitle=${this.messages.output} slot=results-panel .debuggerStore=${this._debuggerState} .result=${i}></arcgis-arcade-debugger-output>` : d`<arcgis-arcade-results slot=results-panel class="bottom-results" .openedResultPanel=${s} .loading=${s === "console" && this._debuggerState.isPaused ? !1 : a} .result=${this._debuggerState.runResult} .consoleLogs=${this._debuggerState.consoleLogs} hide-header @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange}></arcgis-arcade-results>` : null;
+    const { showPanel: e, openedPanel: s, debugResult: i, isExecuting: a, mode: r } = this._debuggerState;
+    if (!e)
+      return null;
+    const n = s === "debug-console" ? "output" : s;
+    return this.enableDebugger && s === "debug-console" ? d`<arcgis-arcade-debugger-console slot=results-panel .modelId=${this._modelId} .debuggerStore=${this._debuggerState}></arcgis-arcade-debugger-console>` : s === "output" && (r === "debug" || i) ? d`<arcgis-arcade-debugger-output .outputTitle=${this.messages.output} slot=results-panel .debuggerStore=${this._debuggerState} .result=${i}></arcgis-arcade-debugger-output>` : d`<arcgis-arcade-results slot=results-panel class="bottom-results" .openedResultPanel=${n} .loading=${s === "console" && this._debuggerState.isPaused ? !1 : a} .result=${this._debuggerState.runResult} .consoleLogs=${this._debuggerState.consoleLogs} hide-header @arcgisInternalOpenedResultPanelChange=${this._onResultPanelChange}></arcgis-arcade-results>`;
   }
   renderBottomActionBar() {
     if (!this._usesBottomExecutionDrawer)
       return null;
-    const { showPanel: e, hasExecuted: s, openedPanel: i, isDebugging: a, isPaused: o, isExecuting: n } = this._debuggerState, r = this.messages.continue ?? "Continue", w = this.messages.reset ?? "Reset", x = this.messages.stop ?? "Stop";
-    return d`<div slot=bottom-action-bar class=${`main-action-bar bottom-action-bar ${e ? "" : "is-collapsed"}`}><calcite-action-bar class="bottom-action-bar__actions" layout=horizontal scale=s expand-disabled expanded><calcite-action-group scale=s>${a ? d`<calcite-action id=debugger-continue-action .text=${r} icon=forward scale=s .disabled=${!o} @click=${this._continueDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-continue-action placement=top><span>${r}</span></calcite-tooltip><calcite-action id=debugger-reset-action .text=${w} icon=reset scale=s @click=${this._resetDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-reset-action placement=top><span>${w}</span></calcite-tooltip><calcite-action id=debugger-stop-action .text=${x} icon=circle-stop scale=s @click=${this._stopDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-stop-action placement=top><span>${x}</span></calcite-tooltip>` : d`<calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade || n} @click=${() => {
+    const { showPanel: e, hasExecuted: s, openedPanel: i, isDebugging: a, isPaused: r, isExecuting: n } = this._debuggerState, o = this.messages.continue ?? "Continue", b = this.messages.reset ?? "Reset", S = this.messages.stop ?? "Stop";
+    return d`<div slot=bottom-action-bar class=${`main-action-bar bottom-action-bar ${e ? "" : "is-collapsed"}`}><calcite-action-bar class="bottom-action-bar__actions" layout=horizontal scale=s expand-disabled expanded><calcite-action-group scale=s>${this.enableDebugger && a ? d`<calcite-action id=debugger-continue-action .text=${o} icon=forward scale=s .disabled=${!r} @click=${this._continueDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-continue-action placement=top><span>${o}</span></calcite-tooltip><calcite-action id=debugger-reset-action .text=${b} icon=reset scale=s @click=${this._resetDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-reset-action placement=top><span>${b}</span></calcite-tooltip><calcite-action id=debugger-stop-action .text=${S} icon=circle-stop scale=s @click=${this._stopDebugSession}></calcite-action><calcite-tooltip reference-element=debugger-stop-action placement=top><span>${S}</span></calcite-tooltip>` : d`<calcite-action .text=${this.messages.run ?? ""} text-enabled icon=play scale=s .loading=${this._preparingArcade || n} @click=${() => {
       this._executeScript("run").catch(u(this));
-    }}></calcite-action><calcite-action .disabled=${this._debuggerState.editorBreakpoints.length === 0} .text=${this.messages.runanddebug ?? "Run and Debug"} text-enabled icon=debug-script scale=s .loading=${this._preparingArcade || n} @click=${() => {
+    }}></calcite-action>${this.enableDebugger && d`<calcite-action .disabled=${this._debuggerState.editorBreakpoints.length === 0} .text=${this.messages.runanddebug ?? "Run and Debug"} text-enabled icon=debug-script scale=s .loading=${this._preparingArcade || n} @click=${() => {
       this._executeScript("debug").catch(u(this));
-    }}></calcite-action>`}</calcite-action-group>${s ? d`<calcite-action-group scale=s><calcite-action .active=${i === "output" && e} .text=${this.messages.output ?? "Output"} text-enabled scale=s icon=list-show-all icon-flip-rtl @click=${() => this._setExecutionPanel("output")}></calcite-action><calcite-action .active=${i === "console" && e} .text=${this.messages.console ?? "Console"} text-enabled scale=s icon=console icon-flip-rtl @click=${() => this._setExecutionPanel("console")}></calcite-action><calcite-action .active=${i === "log" && e} .text=${this.messages.log ?? "Log"} text-enabled scale=s icon=list icon-flip-rtl @click=${() => this._setExecutionPanel("log")} .disabled=${this.enableDebugger && this._debuggerState.mode === "debug"}></calcite-action><calcite-action .active=${i === "debug-console" && e} .text=${this.messages.debugconsole ?? "Debug Console"} text-enabled scale=s icon=debug-script .disabled=${this._debuggerState.mode !== "debug"} @click=${() => this._setExecutionPanel("debug-console")}></calcite-action></calcite-action-group>` : null}</calcite-action-bar>${e ? d`<calcite-action .text=${this.messages.close ?? "Close"} scale=s icon=x icon-flip-rtl @click=${this._onExecutionPanelClose} slot=actions-end></calcite-action>` : null}</div>`;
+    }}></calcite-action>` || ""}`}</calcite-action-group>${s ? d`<calcite-action-group scale=s><calcite-action .active=${i === "output" && e} .text=${this.messages.output ?? "Output"} text-enabled scale=s icon=list-show-all icon-flip-rtl @click=${() => this._setExecutionPanel("output")}></calcite-action><calcite-action .active=${i === "console" && e} .text=${this.messages.console ?? "Console"} text-enabled scale=s icon=console icon-flip-rtl @click=${() => this._setExecutionPanel("console")}></calcite-action><calcite-action .active=${i === "log" && e} .text=${this.messages.log ?? "Log"} text-enabled scale=s icon=list icon-flip-rtl @click=${() => this._setExecutionPanel("log")} .disabled=${this.enableDebugger && this._debuggerState.mode === "debug"}></calcite-action>${this.enableDebugger && d`<calcite-action .active=${i === "debug-console" && e} .text=${this.messages.debugconsole ?? "Debug Console"} text-enabled scale=s icon=debug-script .disabled=${this._debuggerState.mode !== "debug"} @click=${() => this._setExecutionPanel("debug-console")}></calcite-action>` || ""}</calcite-action-group>` : null}</calcite-action-bar>${e ? d`<calcite-action .text=${this.messages.close ?? "Close"} scale=s icon=x icon-flip-rtl @click=${this._onExecutionPanelClose} slot=actions-end></calcite-action>` : null}</div>`;
   }
   render() {
     return d`<arcgis-code-editor-shell>${this.renderMainActionBar()}${this.renderMainPanel()}${this.renderBottomActionBar()}${this.renderResultsPanel()}${this.renderSidePanel()}${this.renderSideActionBar()}</arcgis-code-editor-shell>`;

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

@@ -106,6 +106,7 @@ class F extends f {
       case "feature":
       case "dictionary":
       case "portal":
+      case "pixel":
         return e`<div class="result-value-simple"><calcite-tree .lines=${s.lines} .selectionMode=${s.selectionMode} .scale=${s.scale} @calciteTreeSelect=${s.oncalciteTreeSelect}><calcite-tree-item expanded @click=${c.onClick}><div class="tree-item-label"><bdi>${a(this.result.type)}</bdi></div>${y({ value: this.result.value, subtree: !0, t9nStrings: this.messages })}</calcite-tree-item></calcite-tree></div>`;
       case "featureSet":
         return e`<div class="result-value-table">${$({ arcadeResult: this.result, t9nStrings: this.messages })}${x({ arcadeResult: this.result })}</div>`;

package/dist/components/arcgis-editor-variables/customElement.js

@@ -8,7 +8,7 @@ import { createFilterExpression as g } from "@arcgis/toolkit/string";
 import { u as b } from "../../chunks/useT9n.js";
 import { log as p } from "@arcgis/toolkit/log";
 import { g as o, h as n, j as _, k as v } from "../../chunks/utils.js";
-const w = h`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-list-item-group{background-color:var(--calcite-color-foreground-2);word-break:break-word}}`;
+const w = h`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-list-item-group{background-color:var(--calcite-color-foreground-2);word-break:break-word}.container{block-size:100%;display:grid;grid-template-rows:auto 1fr;overflow:hidden}.scrollable{min-block-size:0;overflow:auto}}`;
 function $(a) {
   a.key === "Enter" && a.stopPropagation();
 }
@@ -111,7 +111,7 @@ class I extends f {
       this._mutationCounter += 1;
     })).catch(() => {
       p("error", this, "Error loading collection"), r = !1;
-    }), r = !0), i`<calcite-flow-item heading-level=2 .heading=${this._getHeadingForCollection(e, t)} .description=${this._getDescriptionForCollection(e)} .beforeBack=${this._beforeBack} closable @calciteFlowItemClose=${this._emitClose} .selected=${s}><calcite-action slot=header-actions-end .text=${this.messages.backtotop ?? ""} scale=m .hidden=${t || this._isRootPresentation("featureSetRoot")} icon=chevrons-left icon-flip-rtl @click=${this._backToTop}></calcite-action><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m .label=${this.messages.filterthevariablesbyname ?? ""} name=variable-filter></calcite-input>${r ? i`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? ""}></calcite-loader>` : i`<calcite-list .label=${this.messages.profilevariables ?? "Profile variables"}>${this.renderEditorVariables(e)}</calcite-list>`}</calcite-flow-item>`;
+    }), r = !0), i`<calcite-flow-item heading-level=2 .heading=${this._getHeadingForCollection(e, t)} .description=${this._getDescriptionForCollection(e)} .beforeBack=${this._beforeBack} closable @calciteFlowItemClose=${this._emitClose} .selected=${s}><calcite-action slot=header-actions-end .text=${this.messages.backtotop ?? ""} scale=m .hidden=${t || this._isRootPresentation("featureSetRoot")} icon=chevrons-left icon-flip-rtl @click=${this._backToTop}></calcite-action><div class="container"><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m .label=${this.messages.filterthevariablesbyname ?? ""} name=variable-filter></calcite-input><div class="scrollable">${r ? i`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? ""}></calcite-loader>` : i`<calcite-list .label=${this.messages.profilevariables ?? "Profile variables"}>${this.renderEditorVariables(e)}</calcite-list>`}</div></div></calcite-flow-item>`;
   }
   renderEditorVariables(e) {
     const t = g(this._filterValue), s = e.variables.filter((r) => r.passFilter(t));

package/dist/components/arcgis-language-api-panel/customElement.js

@@ -1,14 +1,14 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as r } from "../../chunks/runtime.js";
-import { ref as c } from "lit/directives/ref.js";
-import { css as m, html as s } from "lit";
-import { setFocusOnElement as d, focusElement as u } from "@arcgis/toolkit/dom";
-import { addLtrMark as a } from "@arcgis/toolkit/string";
+import { ref as a } from "lit/directives/ref.js";
+import { css as d, html as l } from "lit";
+import { setFocusOnElement as m, focusElement as u } from "@arcgis/toolkit/dom";
+import { addLtrMark as c } from "@arcgis/toolkit/string";
 import { LitElement as h, createEvent as o } from "@arcgis/lumina";
 import { f } from "../../chunks/utilities.js";
 import { c as n } from "../../chunks/markdown.js";
 import { u as p } from "../../chunks/useT9n.js";
-const g = m`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}.sticky{position:sticky;top:0;z-index:10}calcite-flow{height:100%}calcite-block{p:first-of-type{margin-top:0}}calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}calcite-flow{[slot=footer]{word-break:break-word}}}`;
+const g = d`:host{background-color:var(--calcite-color-foreground-1);.notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}calcite-flow{height:100%}calcite-block{p:first-of-type{margin-top:0}}calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}calcite-flow{[slot=footer]{word-break:break-word}}.container{block-size:100%;display:grid;grid-template-rows:auto 1fr;overflow:hidden}.scrollable{min-block-size:0;overflow:auto}}`;
 class b extends h {
   constructor() {
     super(...arguments), this.messages = p(), this._unselectItem = async () => {
@@ -43,7 +43,7 @@ class b extends h {
       return;
     }
     this._flowObserver || (this._flowObserver = new MutationObserver(() => {
-      d(e.querySelector("calcite-flow-item:last-child"), "calcite-input");
+      m(e.querySelector("calcite-flow-item:last-child"), "calcite-input");
     }), this._flowObserver.observe(e, { attributes: !0, attributeFilter: ["id"], childList: !0 }));
   }
   _emitItemSelected(e, i) {
@@ -70,17 +70,17 @@ class b extends h {
   }
   renderApiCategory(e) {
     const i = f(e.items, "name", this._filterValue);
-    return i.length ? s`<calcite-list-item-group .heading=${e.title}>${i.map((t) => s`<calcite-list-item .label=${a(t.completion.detail)} @calciteListItemSelect=${(l) => this._emitItemSelected(l, t)} @keydown=${(l) => this._emitItemSelected(l, t)}><calcite-action slot=actions-end .text=${this.messages.expand ?? ""} icon=chevron-right icon-flip-rtl scale=s @click=${(l) => this._selectItem(l, t)}></calcite-action></calcite-list-item>`)}</calcite-list-item-group>` : null;
+    return i.length ? l`<calcite-list-item-group .heading=${e.title}>${i.map((t) => l`<calcite-list-item .label=${c(t.completion.detail)} @calciteListItemSelect=${(s) => this._emitItemSelected(s, t)} @keydown=${(s) => this._emitItemSelected(s, t)}><calcite-action slot=actions-end .text=${this.messages.expand ?? ""} icon=chevron-right icon-flip-rtl scale=s @click=${(s) => this._selectItem(s, t)}></calcite-action></calcite-list-item>`)}</calcite-list-item-group>` : null;
   }
   renderApiItemFlowItem() {
     const e = this._selectedApiItem;
-    return e ? s`<calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} .beforeBack=${this._unselectItem} closable @calciteFlowItemClose=${this._emitClose} selected>${this.hideDocumentationActions ? null : s`<calcite-button width=half slot=footer appearance=outline kind=brand scale=s .href=${e.link} target=Help icon-start=information>${this.messages.moreinformation}</calcite-button>`}<calcite-button .width=${this.hideDocumentationActions ? "full" : "half"} slot=footer appearance=outline kind=brand icon-start=code scale=s @click=${(i) => this._emitItemSelectedAndClose(i, e)} ${c(u)}>${this.messages.insert}</calcite-button><calcite-block expanded .heading=${a(e.completion.detail)}><div .innerHTML=${n(e.completion.documentation) ?? ""}></div>${e.examples ? s`<div ${c(this._elementToMarkdown)}></div>` : null}</calcite-block></calcite-flow-item>` : null;
+    return e ? l`<calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} .beforeBack=${this._unselectItem} closable @calciteFlowItemClose=${this._emitClose} selected>${this.hideDocumentationActions ? null : l`<calcite-button width=half slot=footer appearance=outline kind=brand scale=s .href=${e.link} target=Help icon-start=information>${this.messages.moreinformation}</calcite-button>`}<calcite-button .width=${this.hideDocumentationActions ? "full" : "half"} slot=footer appearance=outline kind=brand icon-start=code scale=s @click=${(i) => this._emitItemSelectedAndClose(i, e)} ${a(u)}>${this.messages.insert}</calcite-button><calcite-block expanded .heading=${c(e.completion.detail)}><div .innerHTML=${n(e.completion.documentation) ?? ""}></div>${e.examples ? l`<div ${a(this._elementToMarkdown)}></div>` : null}</calcite-block></calcite-flow-item>` : null;
   }
   render() {
     if (this.closed)
       return null;
     const e = (this.apiLibrary ?? []).map((t) => this.renderApiCategory(t)), i = e.every((t) => !t);
-    return s`<calcite-flow ${c(this.flowFocusHandler)}><calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} closable @calciteFlowItemClose=${this._emitClose} .selected=${!this._selectedApiItem}><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} class="sticky" scale=m></calcite-input>${this.loading ? s`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "Loading"}></calcite-loader>` : s`<calcite-list .label=${this.messages.api ?? "API"}>${i ? s`<div class="notice-container">${this.messages.noitems}</div>` : e}</calcite-list>`}</calcite-flow-item>${this.renderApiItemFlowItem()}</calcite-flow>`;
+    return l`<calcite-flow ${a(this.flowFocusHandler)}><calcite-flow-item heading-level=2 .heading=${this.messages.constantsandfunctions} closable @calciteFlowItemClose=${this._emitClose} .selected=${!this._selectedApiItem}><div class="container"><calcite-input .value=${this._filterValue} icon=magnifying-glass clearable @calciteInputInput=${this._updateFilterValue} scale=m></calcite-input><div class="scrollable">${this.loading ? l`<calcite-loader scale=s type=indeterminate .label=${this.messages.loading ?? "Loading"}></calcite-loader>` : l`<calcite-list .label=${this.messages.api ?? "API"}>${i ? l`<div class="notice-container">${this.messages.noitems}</div>` : e}</calcite-list>`}</div></div></calcite-flow-item>${this.renderApiItemFlowItem()}</calcite-flow>`;
   }
 }
 r("arcgis-language-api-panel", b);