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

package/dist/components/arcade-suggestions.js

@@ -1,8 +1,13 @@
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.29/esri/copyright.txt for details.
+ * v4.29.0-beta.111
+ */
 import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h, Host } from '@stencil/core/internal/client';
 import { g as generateColorizeStyles, o as onColorizeThemeChanged, c as convertMarkdownString, b as colorizeCodeElement } from './markdown.js';
 import { S as StickyFilterInput } from './functional-components.js';
 import { f as filterCollection } from './utilities.js';
-import { $, F, O } from './index2.js';
+import { B, H, F } from './index2.js';
 import '@esri/calcite-components/dist/components/calcite-list-item-group.js';
 import '@esri/calcite-components/dist/components/calcite-list-item.js';
 import '@esri/calcite-components/dist/components/calcite-action.js';
@@ -13,147 +18,149 @@ import '@esri/calcite-components/dist/components/calcite-flow.js';
 import '@esri/calcite-components/dist/components/calcite-list.js';
 
 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 arcadeSuggestionsCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-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-color-foreground-2);padding:var(--calcite-spacing-half)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}";
 
-const ArcgisArcadeSuggestions = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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._locale = "";
-    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 $(this, getAssetPath("./assets"));
-  }
-  disconnectedCallback() {
-    this._flowObserver?.disconnect();
-    this._themeChangedListner?.dispose();
-    F(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;
+const ArcgisArcadeSuggestions = /*@__PURE__*/ proxyCustomElement(class ArcgisArcadeSuggestions extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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;
     }
-    if (this._flowObserver) {
-      return;
+    //#endregion
+    // #region Component lifecycle events
+    async componentWillLoad() {
+        this._colorizeStyle = generateColorizeStyles();
+        this._themeChangedListner = onColorizeThemeChanged(() => (this._colorizeStyle = generateColorizeStyles()));
+        await B(this, getAssetPath("./assets"));
     }
-    // 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;
+    disconnectedCallback() {
+        this._flowObserver?.disconnect();
+        this._themeChangedListner?.dispose();
+        H(this);
     }
-    if (isSuggestionGroups(this.suggestions)) {
-      return this.suggestions.map((suggestionGroup) => {
-        return (h("calcite-list-item-group", { heading: suggestionGroup.label }, this.renderSuggestionListItems(suggestionGroup.suggestions)));
-      });
+    // #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
+            F(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+        });
+        this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
-    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 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 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;
+    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 }))));
     }
-    return (h("calcite-flow-item", { heading: this._t9nStrings?.suggestions, closable: true, onCalciteFlowItemClose: this._emitClose, beforeBack: this._beforeBack }, h("calcite-button", { width: "half", slot: "footer-actions", 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 _hostElt() { return this; }
-  static get watchers() { return {
-    "suggestions": ["suggestionsPropChanged"]
-  }; }
-  static get style() { return arcadeSuggestionsCss; }
+    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) => void 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: (e) => e === undefined ? undefined : void colorizeCodeElement(e, suggestion.code).catch(console.error) })))));
+    }
+    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 this; }
+    static get watchers() { return {
+        "suggestions": ["suggestionsPropChanged"]
+    }; }
+    static get style() { return arcadeSuggestionsCss; }
 }, [1, "arcgis-arcade-suggestions", {
-    "suggestions": [16],
-    "_locale": [32],
-    "_t9nStrings": [32],
-    "_selectedSuggestion": [32],
-    "_filterValue": [32],
-    "_colorizeStyle": [32]
-  }]);
+        "suggestions": [16],
+        "_lang": [32],
+        "_t9nLocale": [32],
+        "_t9nStrings": [32],
+        "_selectedSuggestion": [32],
+        "_filterValue": [32],
+        "_colorizeStyle": [32]
+    }, undefined, {
+        "suggestions": ["suggestionsPropChanged"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["arcgis-arcade-suggestions"];
-  components.forEach(tagName => { switch (tagName) {
-    case "arcgis-arcade-suggestions":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ArcgisArcadeSuggestions);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["arcgis-arcade-suggestions"];
+    components.forEach(tagName => { switch (tagName) {
+        case "arcgis-arcade-suggestions":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ArcgisArcadeSuggestions);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/arcade-variables.js

@@ -1,6 +1,11 @@
+/*!
+ * All material copyright Esri, All Rights Reserved, unless otherwise specified.
+ * See https://js.arcgis.com/4.29/esri/copyright.txt for details.
+ * v4.29.0-beta.111
+ */
 import { proxyCustomElement, HTMLElement, createEvent, getAssetPath, h } from '@stencil/core/internal/client';
 import { S as StickyFilterInput } from './functional-components.js';
-import { $, F, O, z } from './index2.js';
+import { B, H, F, D } from './index2.js';
 import { b as arcadeDefaults } from './arcade-defaults.js';
 import '@esri/calcite-components/dist/components/calcite-flow-item.js';
 import '@esri/calcite-components/dist/components/calcite-action.js';
@@ -11,167 +16,176 @@ import '@esri/calcite-components/dist/components/calcite-list-item.js';
 import '@esri/calcite-components/dist/components/calcite-icon.js';
 import '@esri/calcite-components/dist/components/calcite-flow.js';
 
-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 arcadeVariablesCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-quarter);padding:var(--calcite-spacing-half);background-color:var(--calcite-color-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}";
 
-const ArcgisArcadeVariables = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
-  constructor() {
-    super();
-    this.__registerHost();
-    this.__attachShadow();
-    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") {
+function 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._locale = "";
-    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 $(this, getAssetPath("./assets"));
-  }
-  disconnectedCallback() {
-    F(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;
     }
-    if (this._flowObserver) {
-      return;
+}
+const ArcgisArcadeVariables = /*@__PURE__*/ proxyCustomElement(class ArcgisArcadeVariables extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.close = createEvent(this, "close", 3);
+        this.itemSelected = createEvent(this, "itemSelected", 3);
+        this._updateFilterValue = (e) => (this._filterValue = e.target.value);
+        this._beforeBack = async () => {
+            this.removeLastPanelRenderer();
+            this._filterValue = "";
+        };
+        this._emitClose = () => void this.close.emit();
+        this._backToTop = () => void (this._flowItemRenderers = []);
+        this._emitItemSelected = (e) => {
+            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._showCollectionPanel = (e) => {
+            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 B(this, getAssetPath("./assets"));
+    }
+    disconnectedCallback() {
+        H(this);
+        this._flowObserver?.disconnect();
     }
-    // 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 = z(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");
+    // #endregion
+    //#region Private Methods
+    addPanelRenderer(panelRenderer) {
+        this._flowItemRenderers = [...this._flowItemRenderers, panelRenderer];
     }
-    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));
+    removeLastPanelRenderer() {
+        this._flowItemRenderers = this._flowItemRenderers.slice(0, -1);
     }
-  }
-  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 ?? ""))));
+    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
+            F(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+        });
+        this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
     }
-    return (h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, this.collectionBasedVariableRenderer(profile, true)(), this._flowItemRenderers.map((renderer) => renderer())));
-  }
-  static get assetsDirs() { return ["assets"]; }
-  get _hostElt() { return this; }
-  static get watchers() { return {
-    "modelId": ["modelIdPropChanged"]
-  }; }
-  static get style() { return arcadeVariablesCss; }
+    //#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;
+                }))
+                    .catch(() => {
+                    console.error("Error loading collection");
+                    loading = false;
+                });
+                loading = true;
+            }
+            return (h("calcite-flow-item", { heading: this._t9nStrings?.profilevariables, description: collection.breadcrumb, 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 = D(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: 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 this; }
+    static get watchers() { return {
+        "modelId": ["modelIdPropChanged"]
+    }; }
+    static get style() { return arcadeVariablesCss; }
 }, [1, "arcgis-arcade-variables", {
-    "loading": [4],
-    "modelId": [1, "model-id"],
-    "_locale": [32],
-    "_t9nStrings": [32],
-    "_mutationCounter": [32],
-    "_flowItemRenderers": [32],
-    "_filterValue": [32]
-  }]);
+        "loading": [4],
+        "modelId": [1, "model-id"],
+        "_lang": [32],
+        "_t9nLocale": [32],
+        "_t9nStrings": [32],
+        "_mutationCounter": [32],
+        "_flowItemRenderers": [32],
+        "_filterValue": [32]
+    }, undefined, {
+        "modelId": ["modelIdPropChanged"]
+    }]);
 function defineCustomElement() {
-  if (typeof customElements === "undefined") {
-    return;
-  }
-  const components = ["arcgis-arcade-variables"];
-  components.forEach(tagName => { switch (tagName) {
-    case "arcgis-arcade-variables":
-      if (!customElements.get(tagName)) {
-        customElements.define(tagName, ArcgisArcadeVariables);
-      }
-      break;
-  } });
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["arcgis-arcade-variables"];
+    components.forEach(tagName => { switch (tagName) {
+        case "arcgis-arcade-variables":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, ArcgisArcadeVariables);
+            }
+            break;
+    } });
 }
 defineCustomElement();
 

package/dist/components/arcgis-arcade-api.d.ts

@@ -2,8 +2,8 @@ import type { Components, JSX } from "../types/components";
 
 interface ArcgisArcadeApi extends Components.ArcgisArcadeApi, HTMLElement {}
 export const ArcgisArcadeApi: {
-  prototype: ArcgisArcadeApi;
-  new (): ArcgisArcadeApi;
+    prototype: ArcgisArcadeApi;
+    new (): ArcgisArcadeApi;
 };
 /**
  * Used to define this component and all nested components recursively.