@arcgis/coding-components 4.31.0-next.77 → 4.31.0-next.79

package/dist/components/sql-expr-mode.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
 import { editor, languages, Emitter } from 'monaco-editor';
 import { D as Deferred, u as debounce } from './index2.js';
-import { a as sqlExprDefaults } from './sql-expr-defaults.js';
+import { d as sqlExprDefaults } from './sql-expr-defaults.js';
 
 // hold onto a promise that resolves when the worker is ready
 let deferredWorker = new Deferred();
@@ -137,7 +137,6 @@ const sqlExprKeywords = [
     "REAL",
     "SECOND",
     "SMALLINT",
-    "SUBSTRING",
     "THEN",
     "TIME",
     "TIMESTAMP",
@@ -157,7 +156,6 @@ const sqlExprOperators = [
     // Logical
     "AND",
     "BETWEEN",
-    "IN",
     "LIKE",
     "NOT",
     "OR",
@@ -183,17 +181,21 @@ const sqlExprFunctions = [
     "FLOOR",
     "LOG",
     "LOG10",
+    "MOD",
+    "NULLIF",
     "POWER",
     "ROUND",
     "SIGN",
     "SIN",
     "TAN",
+    "TRUNCATE",
     // String
     "CHAR_LENGTH",
     "COALESCE",
     "CONCAT",
     "LOWER",
     "POSITION",
+    "SUBSTRING",
     "TRIM",
     "UPPER",
 ];

package/dist/components/useT9n.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
 import { p as proxyExports, w as watch, C as Controller, s as setAmbientComponent } from './chunk-A4MUWALE.js';
 import { p as startLocaleObserver, r as getElementLocales } from './index2.js';

package/dist/components/utilities.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
 import { d as createFilterExpression } from './index2.js';
 

package/dist/esm/{app-globals-3fe7cb9f.js → app-globals-4d228c7f.js}

@@ -1,7 +1,7 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
 const globalScripts = () => {};
 

package/dist/esm/{arcade-defaults-dc90a65f.js → arcade-defaults-87dae5bb.js}

@@ -1,10 +1,10 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
-import { m as main, f as fieldsToProfileValues, i as isPredefinedProfile, a as isFeatureSetCollectionDefinition, b as isFeatureSetDefinition, c as isFeatureDefinition, d as supportedLocales, L as LanguageDefaultsBase, e as fetchT9nStringsBundle, E as EditorProfile } from './sql-expr-defaults-3a01e6ef.js';
-import { g as getAssetPath } from './index-5df9a0d7.js';
+import { m as main, f as fieldsToProfileValues, i as isPredefinedProfile, a as isFeatureSetCollectionDefinition, b as isFeatureSetDefinition, c as isFeatureDefinition, d as supportedLocales, L as LanguageDefaultsBase, e as fetchT9nStringsBundle, E as EditorProfile } from './sql-expr-defaults-b95d538c.js';
+import { g as getAssetPath } from './index-718a7ca6.js';
 
 // #region convert editor profile to apiProfile
 /**

package/dist/esm/{arcade-mode-5580d9f3.js → arcade-mode-95d965cd.js}

@@ -1,10 +1,10 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
-import { m as main, h as editor, Q as MarkerSeverity, R as Range, y as languages, T as debounce, D as Deferred, V as Emitter } from './sql-expr-defaults-3a01e6ef.js';
-import './index-5df9a0d7.js';
+import { m as main, h as editor, Q as MarkerSeverity, R as Range, x as languages, T as debounce, D as Deferred, V as Emitter } from './sql-expr-defaults-b95d538c.js';
+import './index-718a7ca6.js';
 
 var V={False:"false",Null:"null",True:"true"},f={Break:"break",Continue:"continue",Else:"else",For:"for",From:"from",Function:"function",If:"if",Import:"import",Export:"export",In:"in",Return:"return",Var:"var",While:"while"},xe=["++","--"],Ge=["-","+","!","~"],Je=["=","/=","*=","%=","+=","-="],Qe=["||","&&"],Lt=["|","&",">>","<<",">>>","^","==","!=","<","<=",">",">=","+","-","*","/","%"];var U=[[],[],[]];xe.forEach(e=>U[e.length-1]?.push(e));Ge.forEach(e=>U[e.length-1]?.push(e));Qe.forEach(e=>U[e.length-1]?.push(e));Je.forEach(e=>U[e.length-1]?.push(e));Lt.forEach(e=>U[e.length-1]?.push(e));var lt=Object.values(f),pt=Object.values(V);pt.map(e=>({label:e,kind:main.exports.CompletionItemKind.Constant}));lt.map(e=>({label:e,kind:main.exports.CompletionItemKind.Keyword}));
 

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

@@ -1,12 +1,12 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
-import { r as registerInstance, c as createEvent, g as getAssetPath, h, F as Fragment, H as Host, a as getElement } from './index-5df9a0d7.js';
-import { g as importArcade, h as editor, j as isURL, k as hasSameOrigin, l as importRequest, D as Deferred, n as generateGuid, o as getElementTheme, K as KeyCode, p as setValuesInString, q as quoteString, r as supportedFields, t as generateTokensCSSForColorMap, S as StandaloneServices, I as IStandaloneThemeService, u as commonjsGlobal, v as setFocusOnElement, w as filterCollection, x as createFilterExpression, y as languages, z as sqlExprDefaults, R as Range, A as observeAncestorsMutation, U as Uri, B as KeyMod, C as addLTRMark } from './sql-expr-defaults-3a01e6ef.js';
-import { u as useControllerManager, a as useT9n, g as getSet } from './useT9n-c7e8c91e.js';
-import { b as arcadeDefaults } from './arcade-defaults-dc90a65f.js';
+import { r as registerInstance, c as createEvent, g as getAssetPath, h, F as Fragment, H as Host, a as getElement } from './index-718a7ca6.js';
+import { g as importArcade, h as editor, j as isURL, k as hasSameOrigin, l as importRequest, D as Deferred, n as generateGuid, o as getElementTheme, K as KeyCode, p as setValuesInString, q as quoteString, r as supportedFields, t as generateTokensCSSForColorMap, S as StandaloneServices, I as IStandaloneThemeService, u as commonjsGlobal, v as setFocusOnElement, w as filterCollection, x as languages, y as sqlExprDefaults, R as Range, z as observeAncestorsMutation, U as Uri, A as KeyMod, B as createFilterExpression, C as addLTRMark } from './sql-expr-defaults-b95d538c.js';
+import { u as useControllerManager, a as useT9n, g as getSet } from './useT9n-4f519849.js';
+import { b as arcadeDefaults } from './arcade-defaults-87dae5bb.js';
 
 const DevelopersWebSitePath = "https://developers.arcgis.com/arcade/";
 const MaxArrayItems = 100;
@@ -363,7 +363,7 @@ async function getArcadeDiagnosticService() {
  * @returns arcade mode module
  */
 async function getMode$1() {
-    return await import('./arcade-mode-5580d9f3.js');
+    return await import('./arcade-mode-95d965cd.js');
 }
 
 const arcadeEditorCss = "arcgis-arcade-editor{display:flex;flex-direction:column;position:relative;overflow:hidden;border:1px solid var(--calcite-color-border-3);box-sizing:border-box;background-color:var(--calcite-color-foreground-1);height:100%}arcgis-arcade-editor .flex-adjustable{flex:1 1 auto;overflow:hidden}arcgis-arcade-editor .flex-panel{flex:1 0 auto}arcgis-arcade-editor .position-relative{position:relative}arcgis-arcade-editor .flex-row{display:flex;flex-direction:row;overflow:hidden}arcgis-arcade-editor .flex-column{display:flex;flex-direction:column;overflow:hidden}arcgis-arcade-editor .border-inline-start{border-inline-start:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .border-inline-end{border-inline-end:1px solid var(--calcite-color-border-3);box-sizing:border-box}arcgis-arcade-editor .sticky{position:sticky;top:0px;z-index:10}arcgis-arcade-editor .notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1);text-align:center}arcgis-arcade-editor .side-action-bar{max-width:25%}arcgis-arcade-editor .side-panel{max-width:45%;width:600px}arcgis-arcade-editor .side-panel calcite-flow{height:100%}arcgis-arcade-editor .main-action-bar{border-bottom:1px solid var(--calcite-color-border-3);flex:0 0 auto}arcgis-arcade-editor .main-action-bar calcite-action-group{padding-inline-end:var(--calcite-spacing-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action{padding-inline-end:var(--calcite-spacing-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group calcite-action:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}arcgis-arcade-editor .main-action-bar calcite-action-group:last-child{border-inline-end-width:0px}arcgis-arcade-editor .main-action-bar calcite-action-group:not(:first-child){padding-inline-start:var(--calcite-spacing-sm)}arcgis-arcade-editor arcgis-arcade-results{border-top:1px solid var(--calcite-color-border-3);box-sizing:border-box;max-height:50%;min-height:50%;margin-bottom:-1px}arcgis-arcade-editor calcite-flow [slot=footer]{word-break:break-word}";
@@ -660,7 +660,7 @@ const ArcgisArcadeEditor = class {
             case "api":
                 return (h("arcgis-language-api-panel", { class: "side-panel flex-panel border-inline-start", loading: this._preparingArcade, apiLibrary: this._apiLibrary, hideDocumentationActions: this.hideDocumentationActions, onArcgisItemSelected: this._insertAsSnippet, onArcgisClose: this._toggleSidePanel, "data-panel-name": "none" }));
             case "variables":
-                return (h("arcgis-arcade-variables", { class: "side-panel flex-panel border-inline-start", loading: this._preparingArcade, modelId: this._modelId, onArcgisItemSelected: this._insertAsText, onArcgisClose: this._toggleSidePanel, "data-panel-name": "none" }));
+                return (h("arcgis-editor-variables", { class: "side-panel flex-panel border-inline-start", loading: this._preparingArcade, modelId: this._modelId, onArcgisItemSelected: this._insertAsText, onArcgisClose: this._toggleSidePanel, "data-panel-name": "none", variable: this._editorProfile }));
             case "suggestions":
                 return (h("arcgis-arcade-suggestions", { class: "side-panel flex-panel border-inline-start", suggestions: this.suggestions, onArcgisItemSelected: this._insertAsText, onArcgisClose: this._toggleSidePanel, "data-panel-name": "none" }));
             default:
@@ -678,7 +678,7 @@ const ArcgisArcadeEditor = class {
     //#endregion
     //#region Render
     render() {
-        return (h(Host, { key: 'eb51d98e22574059128883f2aef749f822393903' }, this.renderMainActionBar(), h("div", { key: 'c62fd45179c745116af6c53b1d7429ca8554b3c7', class: "flex-row flex-adjustable" }, h("div", { key: 'e5a52d1c250a5790ccc495f26f4f4ea06688232d', class: "flex-column flex-adjustable" }, this.renderMainPanel(), this.renderResultsPanel()), this.renderSidePanel(), this.renderSideActionBar())));
+        return (h(Host, { key: '82573b59947bcd994ecd8735d367a69b4ce150cd' }, this.renderMainActionBar(), h("div", { key: '9b59e8c7dbb3f613e38eb77fc5e752bf18cdc059', class: "flex-row flex-adjustable" }, h("div", { key: '7f6972e8c7b43e6181f3f4581add686acb6d882d', class: "flex-column flex-adjustable" }, this.renderMainPanel(), this.renderResultsPanel()), this.renderSidePanel(), this.renderSideActionBar())));
     }
     static get assetsDirs() { return ["assets"]; }
     get el() { return getElement(this); }
@@ -3978,153 +3978,6 @@ const ArcgisArcadeSuggestions = class {
 };
 ArcgisArcadeSuggestions.style = ArcgisArcadeSuggestionsStyle0;
 
-const arcadeVariablesCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}:host calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}";
-const ArcgisArcadeVariablesStyle0 = arcadeVariablesCss;
-
-function stopEnterPropagation(e) {
-    if (e.key === "Enter") {
-        e.stopPropagation();
-    }
-}
-const ArcgisArcadeVariables = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
-        this.arcgisClose = createEvent(this, "arcgisClose", 3);
-        this.arcgisItemSelected = createEvent(this, "arcgisItemSelected", 3);
-        this.manager = useControllerManager(this);
-        this.messages = useT9n();
-        this._updateFilterValue = (e) => {
-            this._filterValue = e.target.value;
-        };
-        this._beforeBack = async () => {
-            this.removeLastPanelRenderer();
-            this._filterValue = "";
-        };
-        this._emitClose = () => {
-            this.arcgisClose.emit();
-        };
-        this._backToTop = () => {
-            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.arcgisItemSelected.emit(variable.snippet);
-            }
-        };
-        this._showCollectionPanel = (e) => {
-            const collectionVariable = e.target?.["data-item"];
-            if (!collectionVariable) {
-                return;
-            }
-            e.stopPropagation();
-            this.addPanelRenderer(this.collectionBasedVariableRenderer(collectionVariable));
-        };
-        this._mutationCounter = 1;
-        this._flowItemRenderers = [];
-        this._filterValue = "";
-        this.loading = false;
-        this.modelId = undefined;
-    }
-    modelIdPropChanged() {
-        this._flowItemRenderers = [];
-    }
-    //#endregion
-    disconnectedCallback() {
-        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;
-        }
-        // 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
-            setFocusOnElement(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;
-                }))
-                    .catch(() => {
-                    console.error("Error loading collection");
-                    loading = false;
-                });
-                loading = true;
-            }
-            return (h("calcite-flow-item", { heading: this.messages.profilevariables, description: collection.breadcrumb, beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-action", { slot: "header-actions-end", text: this.messages.backtotop ?? "", scale: "m", hidden: topPanel, icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this.messages.loading ?? "" })) : (h("calcite-list", null, this.renderEditorVariables(collection)))));
-        };
-    }
-    renderEditorVariables(collection) {
-        // Filter the variables. Skip group, we will filter the children later on.
-        const filterExpression = createFilterExpression(this._filterValue);
-        const filteredVariables = collection.variables.filter((variable) => variable.passFilter(filterExpression));
-        if (!filteredVariables.length) {
-            return h("div", { class: "notice-container" }, this.messages.noitems);
-        }
-        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.messages.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.messages.profilevariables, closable: true, onCalciteFlowItemClose: this._emitClose }, h("div", { class: "notice-container" }, this.messages.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 el() { return getElement(this); }
-    static get watchers() { return {
-        "modelId": ["modelIdPropChanged"]
-    }; }
-};
-ArcgisArcadeVariables.style = ArcgisArcadeVariablesStyle0;
-
 // Register the language in Monaco
 languages.register({
     id: arcadeDefaults.languageId,
@@ -4158,7 +4011,7 @@ languages.onLanguage(arcadeDefaults.languageId, () => {
  * @returns sql-expression mode module
  */
 async function getMode() {
-    return await import('./sql-expr-mode-6964367f.js');
+    return await import('./sql-expr-mode-e25cff46.js');
 }
 
 // Register the language in Monaco
@@ -4437,6 +4290,203 @@ const ArcgisCodeEditor = class {
 };
 ArcgisCodeEditor.style = ArcgisCodeEditorStyle0;
 
+const editorVariablesCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);background-color:var(--calcite-color-foreground-1)}:host .sticky{position:sticky;top:0px;z-index:10}:host calcite-flow{height:100%}:host calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}";
+const ArcgisEditorVariablesStyle0 = editorVariablesCss;
+
+function stopEnterPropagation(e) {
+    if (e.key === "Enter") {
+        e.stopPropagation();
+    }
+}
+const ArcgisEditorVariables = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.arcgisClose = createEvent(this, "arcgisClose", 3);
+        this.arcgisItemSelected = createEvent(this, "arcgisItemSelected", 3);
+        this.manager = useControllerManager(this);
+        this.messages = useT9n();
+        this._updateFilterValue = (e) => {
+            this._filterValue = e.target.value;
+        };
+        this._beforeBack = async () => {
+            this.removeLastPanelRenderer();
+            this._filterValue = "";
+        };
+        this._emitClose = () => {
+            this.arcgisClose.emit();
+        };
+        this._backToTop = () => {
+            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.arcgisItemSelected.emit(variable.snippet);
+            }
+        };
+        this._showCollectionPanel = (e) => {
+            const collectionVariable = e.target?.["data-item"];
+            if (!collectionVariable) {
+                return;
+            }
+            e.stopPropagation();
+            this.addPanelRenderer(this.collectionBasedVariableRenderer(collectionVariable));
+        };
+        this._mutationCounter = 1;
+        this._flowItemRenderers = [];
+        this._filterValue = "";
+        this._mode = "profile";
+        this.loading = false;
+        this.modelId = undefined;
+        this.variable = undefined;
+    }
+    modelIdPropChanged() {
+        this._flowItemRenderers = [];
+    }
+    _variableChanged() {
+        /**
+         * Update the mode of the component. Either "featureSet" or "profile"
+         * defaults to profile unless the variable is explicitly a featureSet
+         */
+        this._mode = this.variable?.type === "featureSet" ? "featureSet" : "profile";
+    }
+    //#endregion
+    disconnectedCallback() {
+        this._flowObserver?.disconnect();
+    }
+    // #endregion
+    // #region lifecycle methods
+    componentWillLoad() {
+        this._variableChanged();
+    }
+    // #endregion
+    //#region Private Methods
+    addPanelRenderer(panelRenderer) {
+        this._flowItemRenderers = [...this._flowItemRenderers, panelRenderer];
+    }
+    removeLastPanelRenderer() {
+        this._flowItemRenderers = this._flowItemRenderers.slice(0, -1);
+    }
+    _isMode(mode) {
+        return this._mode === mode;
+    }
+    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
+            setFocusOnElement(ref.querySelector("calcite-flow-item:last-child"), "calcite-input");
+        });
+        this._flowObserver.observe(ref, { attributes: true, attributeFilter: ["id"], childList: true });
+    }
+    _getHeadingForCollection(collection) {
+        if (!collection) {
+            return "";
+        }
+        switch (this._mode) {
+            case "profile":
+                return this.messages.profilevariables ?? "";
+            case "featureSet":
+                // In featureSet mode, we do not show "Profile Variables" as the heading
+                // Instead, we show the label of the collection, i.e. the name of the layer
+                return collection.variables[0]?.getLabel() ?? "";
+        }
+    }
+    _getDescriptionForCollection(collection) {
+        if (!collection) {
+            return "";
+        }
+        switch (this._mode) {
+            case "profile":
+                return collection.breadcrumb;
+            case "featureSet":
+                return "";
+        }
+    }
+    //#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._getHeadingForCollection(collection), description: this._getDescriptionForCollection(collection), beforeBack: this._beforeBack, closable: true, onCalciteFlowItemClose: this._emitClose }, h("calcite-action", { slot: "header-actions-end", text: this.messages.backtotop ?? "", scale: "m",
+                // do not show the back button if the top panel is already displayed or if we are in featureSet mode
+                hidden: topPanel || this._isMode("featureSet"), icon: "chevrons-left", iconFlipRtl: true, onClick: this._backToTop }), h("calcite-input", { value: this._filterValue, icon: "magnifying-glass", clearable: true, onCalciteInputInput: this._updateFilterValue, class: "sticky", scale: "m" }), loading ? (h("calcite-loader", { scale: "s", type: "indeterminate", label: this.messages.loading ?? "" })) : (h("calcite-list", null, this.renderEditorVariables(collection)))));
+        };
+    }
+    renderEditorVariables(collection) {
+        // Filter the variables. Skip group, we will filter the children later on.
+        const filterExpression = createFilterExpression(this._filterValue);
+        const filteredVariables = collection.variables.filter((variable) => variable.passFilter(filterExpression));
+        if (!filteredVariables.length) {
+            return h("div", { class: "notice-container" }, this.messages.noitems);
+        }
+        return filteredVariables.map((variable) => this.renderEditorVariable(variable));
+    }
+    renderEditorVariable(variable) {
+        switch (variable.type) {
+            case "group":
+                /**
+                 * Skip the header variable if we are in featureSet mode.
+                 * The header variable represents the namespace used to access a value inside a variable, i.e. $layer or $feature
+                 */
+                if (this._isMode("featureSet") && variable.isHeader) {
+                    return;
+                }
+                // 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.messages.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() {
+        if (!this.loading && this.variable?.loaded && !this.variable?.variables.length) {
+            return (h("calcite-flow", null, h("calcite-flow-item", { heading: this.messages.profilevariables, closable: true, onCalciteFlowItemClose: this._emitClose }, h("div", { class: "notice-container" }, this.messages.noprofilevariablesmessage))));
+        }
+        return (h("calcite-flow", { ref: (ref) => this.flowFocusHandler(ref) }, this.collectionBasedVariableRenderer(this.variable, true)(), this._flowItemRenderers.map((renderer) => renderer())));
+    }
+    static get assetsDirs() { return ["assets"]; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "modelId": ["modelIdPropChanged"],
+        "variable": ["_variableChanged"]
+    }; }
+};
+ArcgisEditorVariables.style = ArcgisEditorVariablesStyle0;
+
 const languageApiPanelCss = ":host{background-color:var(--calcite-color-foreground-1)}:host .notice-container{margin:var(--calcite-spacing-xxs);padding:var(--calcite-spacing-sm);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-sm)}:host calcite-block pre code{font-size:var(--calcite-font-size--2)}:host calcite-list-item-group{background-color:var(--calcite-color-foreground-2)}";
 const ArcgisLanguageApiPanelStyle0 = languageApiPanelCss;
 
@@ -4579,4 +4629,4 @@ const ArcgisLanguageApiPanel = class {
 };
 ArcgisLanguageApiPanel.style = ArcgisLanguageApiPanelStyle0;
 
-export { ArcgisArcadeEditor as arcgis_arcade_editor, ArcgisArcadeResults as arcgis_arcade_results, ArcgisArcadeSuggestions as arcgis_arcade_suggestions, ArcgisArcadeVariables as arcgis_arcade_variables, ArcgisCodeEditor as arcgis_code_editor, ArcgisLanguageApiPanel as arcgis_language_api_panel };
+export { ArcgisArcadeEditor as arcgis_arcade_editor, ArcgisArcadeResults as arcgis_arcade_results, ArcgisArcadeSuggestions as arcgis_arcade_suggestions, ArcgisCodeEditor as arcgis_code_editor, ArcgisEditorVariables as arcgis_editor_variables, ArcgisLanguageApiPanel as arcgis_language_api_panel };

package/dist/esm/arcgis-coding-components.js

@@ -1,11 +1,11 @@
 /*!
  * All material copyright Esri, All Rights Reserved, unless otherwise specified.
  * See https://js.arcgis.com/4.31/esri/copyright.txt for details.
- * v4.31.0-next.77
+ * v4.31.0-next.79
  */
-import { p as promiseResolve, b as bootstrapLazy } from './index-5df9a0d7.js';
-export { s as setNonce } from './index-5df9a0d7.js';
-import { g as globalScripts } from './app-globals-3fe7cb9f.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-718a7ca6.js';
+export { s as setNonce } from './index-718a7ca6.js';
+import { g as globalScripts } from './app-globals-4d228c7f.js';
 
 /*
  Stencil Client Patch Browser v4.19.2 | MIT Licensed | https://stenciljs.com
@@ -21,5 +21,5 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await globalScripts();
-  return bootstrapLazy([["arcgis-sql-expression-fields",[[1,"arcgis-sql-expression-fields",{"loading":[4],"modelId":[1,"model-id"],"_mutationCounter":[32],"_flowItemRenderers":[32],"_filterValue":[32]},null,{"modelId":["modelIdPropChanged"]}]]],["arcgis-arcade-editor_6",[[0,"arcgis-arcade-editor",{"profile":[16],"script":[1025],"testData":[16],"suggestions":[16],"snippets":[16],"hideDocumentationActions":[4,"hide-documentation-actions"],"hideSideBar":[4,"hide-side-bar"],"sideActionBarExpanded":[1540,"side-action-bar-expanded"],"openedSidePanel":[1537,"opened-side-panel"],"editorOptions":[16],"editorInstance":[16],"_preparingArcade":[32],"_editorProfile":[32],"_apiLibrary":[32],"_showExecutionPanel":[32],"_resultPanel":[32],"_executingScript":[32],"_consoleLogs":[32],"_executionResult":[32],"messages":[32],"getScript":[64],"setFocus":[64],"getEditorInstance":[64],"getTestResult":[64],"updateThemeColors":[64]},null,{"messages":["_messagesChanged"],"profile":["_profileChanged"],"testData":["_testDataChanged"],"snippets":["_snippetChanged"]}],[1,"arcgis-arcade-results",{"loading":[4],"openedResultPanel":[1537,"opened-result-panel"],"result":[16],"consoleLogs":[16]}],[1,"arcgis-arcade-suggestions",{"suggestions":[16],"_selectedSuggestion":[32],"_filterValue":[32],"_colorizeStyle":[32]},null,{"suggestions":["suggestionsPropChanged"]}],[1,"arcgis-arcade-variables",{"loading":[4],"modelId":[1,"model-id"],"_mutationCounter":[32],"_flowItemRenderers":[32],"_filterValue":[32]},null,{"modelId":["modelIdPropChanged"]}],[0,"arcgis-code-editor",{"value":[1],"language":[1],"modelId":[1,"model-id"],"editorOptions":[16],"editorInstance":[16],"getValue":[64],"setValue":[64],"insertText":[64],"insertSnippet":[64],"getEditorInstance":[64],"setFocus":[64]},null,{"language":["languagePropChange"],"modelId":["modelIdPropChange"],"editorOptions":["editorOptionsPropChange"]}],[1,"arcgis-language-api-panel",{"hideDocumentationActions":[4,"hide-documentation-actions"],"loading":[4],"apiLibrary":[16],"_selectedApiItem":[32],"_filterValue":[32],"_colorizeStyle":[32]},null,{"apiLibrary":["_apiLibraryChanged"]}]]],["arcgis-sql-expression-editor",[[0,"arcgis-sql-expression-editor",{"profile":[16],"script":[1025],"_preparing":[32],"_editorProfile":[32],"_activeAction":[32],"_apiLibrary":[32],"messages":[32]},null,{"messages":["_messagesChanged"],"profile":["_profileChanged"]}]]]], options);
+  return bootstrapLazy([["arcgis-arcade-editor_6",[[0,"arcgis-arcade-editor",{"profile":[16],"script":[1025],"testData":[16],"suggestions":[16],"snippets":[16],"hideDocumentationActions":[4,"hide-documentation-actions"],"hideSideBar":[4,"hide-side-bar"],"sideActionBarExpanded":[1540,"side-action-bar-expanded"],"openedSidePanel":[1537,"opened-side-panel"],"editorOptions":[16],"editorInstance":[16],"_preparingArcade":[32],"_editorProfile":[32],"_apiLibrary":[32],"_showExecutionPanel":[32],"_resultPanel":[32],"_executingScript":[32],"_consoleLogs":[32],"_executionResult":[32],"messages":[32],"getScript":[64],"setFocus":[64],"getEditorInstance":[64],"getTestResult":[64],"updateThemeColors":[64]},null,{"messages":["_messagesChanged"],"profile":["_profileChanged"],"testData":["_testDataChanged"],"snippets":["_snippetChanged"]}],[1,"arcgis-arcade-results",{"loading":[4],"openedResultPanel":[1537,"opened-result-panel"],"result":[16],"consoleLogs":[16]}],[1,"arcgis-arcade-suggestions",{"suggestions":[16],"_selectedSuggestion":[32],"_filterValue":[32],"_colorizeStyle":[32]},null,{"suggestions":["suggestionsPropChanged"]}],[0,"arcgis-code-editor",{"value":[1],"language":[1],"modelId":[1,"model-id"],"editorOptions":[16],"editorInstance":[16],"getValue":[64],"setValue":[64],"insertText":[64],"insertSnippet":[64],"getEditorInstance":[64],"setFocus":[64]},null,{"language":["languagePropChange"],"modelId":["modelIdPropChange"],"editorOptions":["editorOptionsPropChange"]}],[1,"arcgis-editor-variables",{"loading":[4],"modelId":[1,"model-id"],"variable":[16],"_mutationCounter":[32],"_flowItemRenderers":[32],"_filterValue":[32],"_mode":[32]},null,{"modelId":["modelIdPropChanged"],"variable":["_variableChanged"]}],[1,"arcgis-language-api-panel",{"hideDocumentationActions":[4,"hide-documentation-actions"],"loading":[4],"apiLibrary":[16],"_selectedApiItem":[32],"_filterValue":[32],"_colorizeStyle":[32]},null,{"apiLibrary":["_apiLibraryChanged"]}]]],["arcgis-sql-expression-editor",[[0,"arcgis-sql-expression-editor",{"profile":[16],"script":[1025],"_preparing":[32],"_editorProfile":[32],"_activeAction":[32],"_apiLibrary":[32],"messages":[32]},null,{"messages":["_messagesChanged"],"profile":["_profileChanged"]}]]],["arcgis-sql-expression-fields",[[1,"arcgis-sql-expression-fields",{"loading":[4],"modelId":[1,"model-id"],"_mutationCounter":[32],"_flowItemRenderers":[32],"_filterValue":[32]},null,{"modelId":["modelIdPropChanged"]}]]]], options);
 });