@esri/solutions-components 0.10.21 → 0.10.23

package/dist/cjs/basemap-gallery_7.cjs.entry.js

@@ -732,7 +732,7 @@ const MapPicker = class {
     _getMapPicker() {
         const id = "map-picker-expand-toggle";
         const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-        return (index.h("div", { class: "width-full" }, index.h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, this._webMapInfo?.name), index.h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, index.h("span", null, this._translations.switchMap))));
+        return (index.h("div", { class: "width-full" }, index.h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, iconStart: "map", id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, this._webMapInfo?.name), index.h("calcite-tooltip", { placement: "bottom", "reference-element": id }, index.h("span", null, this._translations.switchMap))));
     }
     /**
      * Create the toolbar (controls used for map and app interactions)

package/dist/cjs/calcite-alert_5.cjs.entry.js

@@ -1287,6 +1287,8 @@ const EditCard = class {
     _editor;
     /**
      * esri/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
+     * OR
+     * esri/layers/support/SubtypeSublayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-SubtypeSublayer.html
      */
     _layer;
     /**
@@ -1391,7 +1393,9 @@ const EditCard = class {
             if (this._layerEditHandle) {
                 this._layerEditHandle.remove();
             }
-            this._layerEditHandle = this._layer.on("edits", () => {
+            // #896 Editing on sybtype group layer is failing in Manager
+            const layer = this._layer.type === "subtype-sublayer" ? this._layer.parent : this._layer;
+            this._layerEditHandle = layer.on("edits", () => {
                 this.editsComplete.emit();
             });
         }
@@ -1406,7 +1410,7 @@ const EditCard = class {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (index.h(index.Host, { key: '1520951922ca98ee92ccc8f7119d7fa3666eddfa' }, index.h("div", { key: 'd436d1660fd46bba90dd5dadc6962c619b99143e', class: "position-absolute" }, editDisabled ? (index.h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, index.h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, index.h("div", { key: 'cff16539fd7b4a85234e0d15d2170470d95d0ad9', class: "position-absolute" }, index.h("div", { key: '0b96a2d27a5df344da9192a01d5c42496e057cd1', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), index.h("calcite-loader", { key: '49cadf3456d1f3289abde18c35b726471ac551cd', class: loadingClass, label: "", scale: "s" })))));
+        return (index.h(index.Host, { key: '16dd78822ee6d7c4e2da97c4b7ec7c0678b51e68' }, index.h("div", { key: '8aba2b86c7bf8e7dfbf7567b156e02b23b728f4e', class: "position-absolute" }, editDisabled ? (index.h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, index.h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, index.h("div", { key: '8230d44ec05ff207681e6333b7f08c80748c4f3d', class: "position-absolute" }, index.h("div", { key: '71792b5737c43a024ebc677ae168d74569349585', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), index.h("calcite-loader", { key: '47176534c25769af8ae107c3864901c4294b4359', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/cjs/calcite-combobox_3.cjs.entry.js

@@ -1379,7 +1379,8 @@ const MapLayerPicker = class {
      * @returns Calcite label with the layer name and icon
      */
     _getSingleLayerPlaceholder() {
-        return (index.h("div", { class: "layer-picker-label-container cursor-default" }, index.h("calcite-icon", { icon: "layers", scale: "s" }), index.h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
+        const itemTypeIcon = this._getItemTypeIcon();
+        return (index.h("div", { class: "layer-picker-label-container cursor-default" }, index.h("calcite-icon", { icon: itemTypeIcon, scale: "s" }), index.h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
     }
     /**
      * Create a list of layers from the map
@@ -1427,10 +1428,24 @@ const MapLayerPicker = class {
      * @returns the node for the button
      */
     _getDropdownButton() {
+        const itemTypeIcon = this._getItemTypeIcon();
         const buttonClass = this.isMobile ? "" : "max-width-350";
         const buttonSlot = this.isMobile ? "trigger" : "";
         const buttonIcon = this._isDropdownOpen ? "chevron-up" : "chevron-down";
-        return (index.h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: "layers", kind: "neutral", slot: buttonSlot, width: "full" }, index.h("div", null, this.selectedName)));
+        return (index.h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: itemTypeIcon, kind: "neutral", slot: buttonSlot, width: "full" }, index.h("div", null, this.selectedName)));
+    }
+    /**
+     * Get the appropriate icon based on the selected layer or table
+     *
+     * @returns a string for the appropriate icon
+     */
+    _getItemTypeIcon() {
+        let itemTypeIcon = "layers";
+        if (this.selectedIds.length > 0) {
+            const id = this.selectedIds[0];
+            itemTypeIcon = Object.keys(this._layerNameHash).indexOf(id) > -1 ? "layers" : "table";
+        }
+        return itemTypeIcon;
     }
     /**
      * Get the appropriate type of dom nodes for each valid layer or table

package/dist/cjs/crowdsource-manager.cjs.entry.js

@@ -14,7 +14,7 @@ const mapViewUtils = require('./mapViewUtils-18c46b84.js');
 require('./esri-loader-08dc41bd.js');
 require('./_commonjsHelpers-baf43783.js');
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.height-51{height:51%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.height-51{height:51%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
 const CrowdsourceManagerStyle0 = crowdsourceManagerCss;
 
 const CrowdsourceManager = class {
@@ -420,7 +420,8 @@ const CrowdsourceManager = class {
         const headerClass = this._isMobile && this._showInformationHeader ? "display-none height-0" : "";
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
-        return (index.h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
+        const tableViewClass = this.appLayout === "tableView" ? "position-relative top-51" : "";
+        return (index.h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
                 '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
                 '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */

package/dist/cjs/map-select-tools_3.cjs.entry.js

@@ -64,6 +64,10 @@ const MapSelectTools = class {
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * esri/request: https://developers.arcgis.com/javascript/latest/api-reference/esri-request.html
+     */
+    _esriRequest;
     /**
      * esri/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
      */
@@ -293,7 +297,7 @@ const MapSelectTools = class {
     render() {
         const mapToolsClass = this.enableSketchTools ? "" : "display-none";
         const mapToolsContainerClass = this.enableSketchTools ? "padding-top-1" : "";
-        return (index.h(index.Host, { key: 'd9b4042323733785938a45be76688099b8a81b23' }, this._getMapLayerPicker(), index.h("div", { key: 'd468cd2df9971c02909fd0bc9603603bb213164f', class: "border-bottom" }), index.h("div", { key: '8cecea0a4387371c3af1ea76bbafd1cf7f205d77', class: "padding-top-sides-1" }, index.h("div", { key: 'd5364d20f014611ca73bbe1bc5b638aaa8e38738', class: "search-widget", ref: (el) => { this._searchElement = el; } }), index.h("div", { key: '2c1f16ce050e934e8dbd25a0ef430d8590438ce5', class: mapToolsContainerClass }, index.h("map-draw-tools", { key: '256ee8262662c1c54cee34bdc084e7555e3985c6', active: true, class: mapToolsClass, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this.enableSearchDistance ? this._getBufferOptions() : undefined, this.enableLayerFeatures ? this._getUseLayerFeaturesOptions() : undefined, this._getNumSelected()), index.h("div", { key: '92859f6a60356d7ddc0b5530a06e181d67f3274b', class: "border-bottom" }), this._getNameInput()));
+        return (index.h(index.Host, { key: '6753158d00a33dd5dfbb1f22cc27388baf4c0b5e' }, this._getMapLayerPicker(), index.h("div", { key: '082c6be48d3dfbe2e39be2c462959c7772a91d40', class: "border-bottom" }), index.h("div", { key: '0e8133a809b05bef34c2f19adeff43c1e57cc002', class: "padding-top-sides-1" }, index.h("div", { key: '4434b5b4d073f3ba9a7e44b82078b9b81733025b', class: "search-widget", ref: (el) => { this._searchElement = el; } }), index.h("div", { key: '6f01e27e06ea365de6ff98df3f9edd973d87117c', class: mapToolsContainerClass }, index.h("map-draw-tools", { key: '24ffe562d080955f2aacfd080c0baa1997f8eaab', active: true, class: mapToolsClass, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this.enableSearchDistance ? this._getBufferOptions() : undefined, this.enableLayerFeatures ? this._getUseLayerFeaturesOptions() : undefined, this._getNumSelected()), index.h("div", { key: '4c7cf401b5bcc7e4adef34e140d22676fce8ebbc', class: "border-bottom" }), this._getNameInput()));
     }
     /**
      * Renders the buffer tools component.
@@ -360,13 +364,15 @@ const MapSelectTools = class {
      * @protected
      */
     async _initModules() {
-        const [GraphicsLayer, Graphic, Search, geometryEngine, FeatureLayer] = await locale.loadModules([
+        const [esriRequest, GraphicsLayer, Graphic, Search, geometryEngine, FeatureLayer] = await locale.loadModules([
+            "esri/request",
             "esri/layers/GraphicsLayer",
             "esri/Graphic",
             "esri/widgets/Search",
             "esri/geometry/geometryEngine",
             "esri/layers/FeatureLayer"
         ]);
+        this._esriRequest = esriRequest;
         this.GraphicsLayer = GraphicsLayer;
         this.Graphic = Graphic;
         this.Search = Search;
@@ -443,25 +449,7 @@ const MapSelectTools = class {
                 void this._clearResults(false, clearLabel);
             });
             this._searchWidget.on("select-result", (searchResults) => {
-                if (searchResults.result) {
-                    this._searchResult = searchResults.result;
-                    const resultFeature = searchResults.result.feature;
-                    const resultLayer = resultFeature?.layer;
-                    const selectLayer = this.selectLayerView.layer;
-                    const oid = resultFeature?.getObjectId();
-                    const useOIDs = resultLayer?.url && selectLayer?.url && resultLayer.url === selectLayer.url && !isNaN(oid);
-                    const oids = useOIDs ? [oid] : undefined;
-                    this._workflowType = interfaces.EWorkflowType.SEARCH;
-                    void this._updateLabel();
-                    const graphics = [searchResults.result.feature];
-                    this._updateSelection(graphics, useOIDs, oids);
-                    this._drawTools.graphics = graphics;
-                    this._searchWidget.resultGraphic.visible = false;
-                }
-                else {
-                    const clearLabel = this._searchClearLabel();
-                    void this._clearResults(false, clearLabel);
-                }
+                void this._selectResult(searchResults.result);
             });
             await this._searchWidget.when(() => {
                 this._searchWidget.allPlaceholder = this.searchConfiguration?.allPlaceholder &&
@@ -470,6 +458,75 @@ const MapSelectTools = class {
             });
         }
     }
+    /**
+     * Handle the result from the search widget.
+     *
+     * @param url the url of the layer view
+     *
+     * @returns the url of the views source
+     * @protected
+     */
+    async _selectResult(result) {
+        if (result) {
+            this._searchResult = result;
+            const resultFeature = result.feature;
+            const resultLayer = resultFeature?.layer;
+            const selectLayer = this.selectLayerView.layer;
+            const oid = resultFeature?.getObjectId();
+            let resultLayerSourceUrl;
+            if (resultLayer.sourceJSON?.isView) {
+                resultLayerSourceUrl = await this._getViewSourceUrl(resultLayer.url);
+            }
+            let selectLayerSourceUrl;
+            if (selectLayer.sourceJSON?.isView) {
+                selectLayerSourceUrl = await this._getViewSourceUrl(selectLayer.url);
+            }
+            const rUrl = resultLayer?.url?.toLowerCase();
+            const rSourceUrl = resultLayerSourceUrl?.toLowerCase();
+            const sUrl = selectLayer?.url?.toLowerCase();
+            const sSourceUrl = selectLayerSourceUrl?.toLowerCase();
+            const useOIDs = rUrl && sUrl &&
+                (rUrl === sUrl || rUrl === sSourceUrl || rSourceUrl === sUrl || rSourceUrl === sSourceUrl) &&
+                !isNaN(oid);
+            const oids = useOIDs ? [oid] : undefined;
+            this._workflowType = interfaces.EWorkflowType.SEARCH;
+            void this._updateLabel();
+            const graphics = [result.feature];
+            this._updateSelection(graphics, useOIDs, oids);
+            this._drawTools.graphics = graphics;
+            this._searchWidget.resultGraphic.visible = false;
+        }
+        else {
+            const clearLabel = this._searchClearLabel();
+            void this._clearResults(false, clearLabel);
+        }
+    }
+    /**
+     * Get the source url for a view. This function supports single source views only.
+     *
+     * @param url the url of the layer view
+     *
+     * @returns the url of the views source
+     * @protected
+     */
+    async _getViewSourceUrl(url) {
+        let sourceUrl = "";
+        const resultLayerSourcesUrl = `${url}/sources?f=json`;
+        try {
+            const request = await this._esriRequest(resultLayerSourcesUrl, {
+                query: {
+                    f: "json"
+                }
+            });
+            if (request?.data?.services?.length === 1) {
+                sourceUrl = request.data.services[0].url;
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+        return sourceUrl;
+    }
     /**
      * Check if the current label should be cleared
      *

package/dist/collection/components/crowdsource-manager/crowdsource-manager.css

@@ -102,6 +102,10 @@
   height: 51%;
 }
 
+.top-51 {
+  top: 51px;
+}
+
 .adjusted-height-50 {
   height: calc(50% - 25px);
 }

package/dist/collection/components/crowdsource-manager/crowdsource-manager.js

@@ -427,7 +427,8 @@ export class CrowdsourceManager {
         const headerClass = this._isMobile && this._showInformationHeader ? "display-none height-0" : "";
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
-        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
+        const tableViewClass = this.appLayout === "tableView" ? "position-relative top-51" : "";
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
                 '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
                 '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */

package/dist/collection/components/edit-card/edit-card.js

@@ -75,6 +75,8 @@ export class EditCard {
     _editor;
     /**
      * esri/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
+     * OR
+     * esri/layers/support/SubtypeSublayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-SubtypeSublayer.html
      */
     _layer;
     /**
@@ -179,7 +181,9 @@ export class EditCard {
             if (this._layerEditHandle) {
                 this._layerEditHandle.remove();
             }
-            this._layerEditHandle = this._layer.on("edits", () => {
+            // #896 Editing on sybtype group layer is failing in Manager
+            const layer = this._layer.type === "subtype-sublayer" ? this._layer.parent : this._layer;
+            this._layerEditHandle = layer.on("edits", () => {
                 this.editsComplete.emit();
             });
         }
@@ -194,7 +198,7 @@ export class EditCard {
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: '1520951922ca98ee92ccc8f7119d7fa3666eddfa' }, h("div", { key: 'd436d1660fd46bba90dd5dadc6962c619b99143e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'cff16539fd7b4a85234e0d15d2170470d95d0ad9', class: "position-absolute" }, h("div", { key: '0b96a2d27a5df344da9192a01d5c42496e057cd1', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '49cadf3456d1f3289abde18c35b726471ac551cd', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '16dd78822ee6d7c4e2da97c4b7ec7c0678b51e68' }, h("div", { key: '8aba2b86c7bf8e7dfbf7567b156e02b23b728f4e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '8230d44ec05ff207681e6333b7f08c80748c4f3d', class: "position-absolute" }, h("div", { key: '71792b5737c43a024ebc677ae168d74569349585', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '47176534c25769af8ae107c3864901c4294b4359', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/collection/components/map-layer-picker/map-layer-picker.js

@@ -188,7 +188,8 @@ export class MapLayerPicker {
      * @returns Calcite label with the layer name and icon
      */
     _getSingleLayerPlaceholder() {
-        return (h("div", { class: "layer-picker-label-container cursor-default" }, h("calcite-icon", { icon: "layers", scale: "s" }), h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
+        const itemTypeIcon = this._getItemTypeIcon();
+        return (h("div", { class: "layer-picker-label-container cursor-default" }, h("calcite-icon", { icon: itemTypeIcon, scale: "s" }), h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
     }
     /**
      * Create a list of layers from the map
@@ -236,10 +237,24 @@ export class MapLayerPicker {
      * @returns the node for the button
      */
     _getDropdownButton() {
+        const itemTypeIcon = this._getItemTypeIcon();
         const buttonClass = this.isMobile ? "" : "max-width-350";
         const buttonSlot = this.isMobile ? "trigger" : "";
         const buttonIcon = this._isDropdownOpen ? "chevron-up" : "chevron-down";
-        return (h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: "layers", kind: "neutral", slot: buttonSlot, width: "full" }, h("div", null, this.selectedName)));
+        return (h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: itemTypeIcon, kind: "neutral", slot: buttonSlot, width: "full" }, h("div", null, this.selectedName)));
+    }
+    /**
+     * Get the appropriate icon based on the selected layer or table
+     *
+     * @returns a string for the appropriate icon
+     */
+    _getItemTypeIcon() {
+        let itemTypeIcon = "layers";
+        if (this.selectedIds.length > 0) {
+            const id = this.selectedIds[0];
+            itemTypeIcon = Object.keys(this._layerNameHash).indexOf(id) > -1 ? "layers" : "table";
+        }
+        return itemTypeIcon;
     }
     /**
      * Get the appropriate type of dom nodes for each valid layer or table

package/dist/collection/components/map-picker/map-picker.js

@@ -147,7 +147,7 @@ export class MapPicker {
     _getMapPicker() {
         const id = "map-picker-expand-toggle";
         const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-        return (h("div", { class: "width-full" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, this._webMapInfo?.name), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchMap))));
+        return (h("div", { class: "width-full" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, iconStart: "map", id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, this._webMapInfo?.name), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchMap))));
     }
     /**
      * Create the toolbar (controls used for map and app interactions)

package/dist/collection/components/map-select-tools/map-select-tools.js

@@ -69,6 +69,10 @@ export class MapSelectTools {
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * esri/request: https://developers.arcgis.com/javascript/latest/api-reference/esri-request.html
+     */
+    _esriRequest;
     /**
      * esri/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
      */
@@ -298,7 +302,7 @@ export class MapSelectTools {
     render() {
         const mapToolsClass = this.enableSketchTools ? "" : "display-none";
         const mapToolsContainerClass = this.enableSketchTools ? "padding-top-1" : "";
-        return (h(Host, { key: 'd9b4042323733785938a45be76688099b8a81b23' }, this._getMapLayerPicker(), h("div", { key: 'd468cd2df9971c02909fd0bc9603603bb213164f', class: "border-bottom" }), h("div", { key: '8cecea0a4387371c3af1ea76bbafd1cf7f205d77', class: "padding-top-sides-1" }, h("div", { key: 'd5364d20f014611ca73bbe1bc5b638aaa8e38738', class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { key: '2c1f16ce050e934e8dbd25a0ef430d8590438ce5', class: mapToolsContainerClass }, h("map-draw-tools", { key: '256ee8262662c1c54cee34bdc084e7555e3985c6', active: true, class: mapToolsClass, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this.enableSearchDistance ? this._getBufferOptions() : undefined, this.enableLayerFeatures ? this._getUseLayerFeaturesOptions() : undefined, this._getNumSelected()), h("div", { key: '92859f6a60356d7ddc0b5530a06e181d67f3274b', class: "border-bottom" }), this._getNameInput()));
+        return (h(Host, { key: '6753158d00a33dd5dfbb1f22cc27388baf4c0b5e' }, this._getMapLayerPicker(), h("div", { key: '082c6be48d3dfbe2e39be2c462959c7772a91d40', class: "border-bottom" }), h("div", { key: '0e8133a809b05bef34c2f19adeff43c1e57cc002', class: "padding-top-sides-1" }, h("div", { key: '4434b5b4d073f3ba9a7e44b82078b9b81733025b', class: "search-widget", ref: (el) => { this._searchElement = el; } }), h("div", { key: '6f01e27e06ea365de6ff98df3f9edd973d87117c', class: mapToolsContainerClass }, h("map-draw-tools", { key: '24ffe562d080955f2aacfd080c0baa1997f8eaab', active: true, class: mapToolsClass, editGraphicsEnabled: !this._useLayerFeaturesEnabled, graphics: this._graphics, mapView: this.mapView, onSketchGraphicsChange: (evt) => void this._sketchGraphicsChanged(evt), pointSymbol: this.sketchPointSymbol, polygonSymbol: this.sketchPolygonSymbol, polylineSymbol: this.sketchLineSymbol, ref: (el) => { this._drawTools = el; } })), this.enableSearchDistance ? this._getBufferOptions() : undefined, this.enableLayerFeatures ? this._getUseLayerFeaturesOptions() : undefined, this._getNumSelected()), h("div", { key: '4c7cf401b5bcc7e4adef34e140d22676fce8ebbc', class: "border-bottom" }), this._getNameInput()));
     }
     /**
      * Renders the buffer tools component.
@@ -365,13 +369,15 @@ export class MapSelectTools {
      * @protected
      */
     async _initModules() {
-        const [GraphicsLayer, Graphic, Search, geometryEngine, FeatureLayer] = await loadModules([
+        const [esriRequest, GraphicsLayer, Graphic, Search, geometryEngine, FeatureLayer] = await loadModules([
+            "esri/request",
             "esri/layers/GraphicsLayer",
             "esri/Graphic",
             "esri/widgets/Search",
             "esri/geometry/geometryEngine",
             "esri/layers/FeatureLayer"
         ]);
+        this._esriRequest = esriRequest;
         this.GraphicsLayer = GraphicsLayer;
         this.Graphic = Graphic;
         this.Search = Search;
@@ -448,25 +454,7 @@ export class MapSelectTools {
                 void this._clearResults(false, clearLabel);
             });
             this._searchWidget.on("select-result", (searchResults) => {
-                if (searchResults.result) {
-                    this._searchResult = searchResults.result;
-                    const resultFeature = searchResults.result.feature;
-                    const resultLayer = resultFeature?.layer;
-                    const selectLayer = this.selectLayerView.layer;
-                    const oid = resultFeature?.getObjectId();
-                    const useOIDs = resultLayer?.url && selectLayer?.url && resultLayer.url === selectLayer.url && !isNaN(oid);
-                    const oids = useOIDs ? [oid] : undefined;
-                    this._workflowType = EWorkflowType.SEARCH;
-                    void this._updateLabel();
-                    const graphics = [searchResults.result.feature];
-                    this._updateSelection(graphics, useOIDs, oids);
-                    this._drawTools.graphics = graphics;
-                    this._searchWidget.resultGraphic.visible = false;
-                }
-                else {
-                    const clearLabel = this._searchClearLabel();
-                    void this._clearResults(false, clearLabel);
-                }
+                void this._selectResult(searchResults.result);
             });
             await this._searchWidget.when(() => {
                 this._searchWidget.allPlaceholder = this.searchConfiguration?.allPlaceholder &&
@@ -475,6 +463,75 @@ export class MapSelectTools {
             });
         }
     }
+    /**
+     * Handle the result from the search widget.
+     *
+     * @param url the url of the layer view
+     *
+     * @returns the url of the views source
+     * @protected
+     */
+    async _selectResult(result) {
+        if (result) {
+            this._searchResult = result;
+            const resultFeature = result.feature;
+            const resultLayer = resultFeature?.layer;
+            const selectLayer = this.selectLayerView.layer;
+            const oid = resultFeature?.getObjectId();
+            let resultLayerSourceUrl;
+            if (resultLayer.sourceJSON?.isView) {
+                resultLayerSourceUrl = await this._getViewSourceUrl(resultLayer.url);
+            }
+            let selectLayerSourceUrl;
+            if (selectLayer.sourceJSON?.isView) {
+                selectLayerSourceUrl = await this._getViewSourceUrl(selectLayer.url);
+            }
+            const rUrl = resultLayer?.url?.toLowerCase();
+            const rSourceUrl = resultLayerSourceUrl?.toLowerCase();
+            const sUrl = selectLayer?.url?.toLowerCase();
+            const sSourceUrl = selectLayerSourceUrl?.toLowerCase();
+            const useOIDs = rUrl && sUrl &&
+                (rUrl === sUrl || rUrl === sSourceUrl || rSourceUrl === sUrl || rSourceUrl === sSourceUrl) &&
+                !isNaN(oid);
+            const oids = useOIDs ? [oid] : undefined;
+            this._workflowType = EWorkflowType.SEARCH;
+            void this._updateLabel();
+            const graphics = [result.feature];
+            this._updateSelection(graphics, useOIDs, oids);
+            this._drawTools.graphics = graphics;
+            this._searchWidget.resultGraphic.visible = false;
+        }
+        else {
+            const clearLabel = this._searchClearLabel();
+            void this._clearResults(false, clearLabel);
+        }
+    }
+    /**
+     * Get the source url for a view. This function supports single source views only.
+     *
+     * @param url the url of the layer view
+     *
+     * @returns the url of the views source
+     * @protected
+     */
+    async _getViewSourceUrl(url) {
+        let sourceUrl = "";
+        const resultLayerSourcesUrl = `${url}/sources?f=json`;
+        try {
+            const request = await this._esriRequest(resultLayerSourcesUrl, {
+                query: {
+                    f: "json"
+                }
+            });
+            if (request?.data?.services?.length === 1) {
+                sourceUrl = request.data.services[0].url;
+            }
+        }
+        catch (error) {
+            console.log(error);
+        }
+        return sourceUrl;
+    }
     /**
      * Check if the current label should be cleared
      *

package/dist/components/crowdsource-manager.js

@@ -67,7 +67,7 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.height-51{height:51%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.height-51{height:51%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}";
 const CrowdsourceManagerStyle0 = crowdsourceManagerCss;
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
@@ -474,7 +474,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const headerClass = this._isMobile && this._showInformationHeader ? "display-none height-0" : "";
         const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
-        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
+        const tableViewClass = this.appLayout === "tableView" ? "position-relative top-51" : "";
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass}`, style: {
                 '--calcite-color-foreground-1': this.popupHeaderColor, /* background color that will be displayed on the popup header */
                 '--calcite-color-foreground-2': this.popupHeaderHoverColor, /* background color that will be displayed on button when hovered */
                 '--calcite-color-text-3': this.popupHeaderTextColor, /* font color that will be displayed on button */

package/dist/components/edit-card2.js

@@ -67,6 +67,8 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
     _editor;
     /**
      * esri/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
+     * OR
+     * esri/layers/support/SubtypeSublayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-support-SubtypeSublayer.html
      */
     _layer;
     /**
@@ -171,7 +173,9 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
             if (this._layerEditHandle) {
                 this._layerEditHandle.remove();
             }
-            this._layerEditHandle = this._layer.on("edits", () => {
+            // #896 Editing on sybtype group layer is failing in Manager
+            const layer = this._layer.type === "subtype-sublayer" ? this._layer.parent : this._layer;
+            this._layerEditHandle = layer.on("edits", () => {
                 this.editsComplete.emit();
             });
         }
@@ -186,7 +190,7 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
             !this.graphics[0].layer.editingEnabled : true;
         const tableNodeClass = this._editorLoading ? "display-none" : "position-absolute";
         const loadingClass = this._editorLoading ? "" : "display-none";
-        return (h(Host, { key: '1520951922ca98ee92ccc8f7119d7fa3666eddfa' }, h("div", { key: 'd436d1660fd46bba90dd5dadc6962c619b99143e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: 'cff16539fd7b4a85234e0d15d2170470d95d0ad9', class: "position-absolute" }, h("div", { key: '0b96a2d27a5df344da9192a01d5c42496e057cd1', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '49cadf3456d1f3289abde18c35b726471ac551cd', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '16dd78822ee6d7c4e2da97c4b7ec7c0678b51e68' }, h("div", { key: '8aba2b86c7bf8e7dfbf7567b156e02b23b728f4e', class: "position-absolute" }, editDisabled ? (h("calcite-notice", { kind: "warning", open: true, slot: "content-top", width: "full" }, h("div", { slot: "message" }, this._translations.enableEditing))) : undefined, h("div", { key: '8230d44ec05ff207681e6333b7f08c80748c4f3d', class: "position-absolute" }, h("div", { key: '71792b5737c43a024ebc677ae168d74569349585', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '47176534c25769af8ae107c3864901c4294b4359', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/map-layer-picker2.js

@@ -192,7 +192,8 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
      * @returns Calcite label with the layer name and icon
      */
     _getSingleLayerPlaceholder() {
-        return (h("div", { class: "layer-picker-label-container cursor-default" }, h("calcite-icon", { icon: "layers", scale: "s" }), h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
+        const itemTypeIcon = this._getItemTypeIcon();
+        return (h("div", { class: "layer-picker-label-container cursor-default" }, h("calcite-icon", { icon: itemTypeIcon, scale: "s" }), h("calcite-label", { class: "no-bottom-margin padding-start-1" }, this.selectedName)));
     }
     /**
      * Create a list of layers from the map
@@ -240,10 +241,24 @@ const MapLayerPicker = /*@__PURE__*/ proxyCustomElement(class MapLayerPicker ext
      * @returns the node for the button
      */
     _getDropdownButton() {
+        const itemTypeIcon = this._getItemTypeIcon();
         const buttonClass = this.isMobile ? "" : "max-width-350";
         const buttonSlot = this.isMobile ? "trigger" : "";
         const buttonIcon = this._isDropdownOpen ? "chevron-up" : "chevron-down";
-        return (h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: "layers", kind: "neutral", slot: buttonSlot, width: "full" }, h("div", null, this.selectedName)));
+        return (h("calcite-button", { alignment: "icon-end-space-between", appearance: this.appearance, class: buttonClass, iconEnd: buttonIcon, iconStart: itemTypeIcon, kind: "neutral", slot: buttonSlot, width: "full" }, h("div", null, this.selectedName)));
+    }
+    /**
+     * Get the appropriate icon based on the selected layer or table
+     *
+     * @returns a string for the appropriate icon
+     */
+    _getItemTypeIcon() {
+        let itemTypeIcon = "layers";
+        if (this.selectedIds.length > 0) {
+            const id = this.selectedIds[0];
+            itemTypeIcon = Object.keys(this._layerNameHash).indexOf(id) > -1 ? "layers" : "table";
+        }
+        return itemTypeIcon;
     }
     /**
      * Get the appropriate type of dom nodes for each valid layer or table

package/dist/components/map-picker2.js

@@ -152,7 +152,7 @@ const MapPicker = /*@__PURE__*/ proxyCustomElement(class MapPicker extends HTMLE
     _getMapPicker() {
         const id = "map-picker-expand-toggle";
         const mapListIcon = this._mapListExpanded ? "chevron-up" : "chevron-down";
-        return (h("div", { class: "width-full" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, this._webMapInfo?.name), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchMap))));
+        return (h("div", { class: "width-full" }, h("calcite-button", { alignment: "icon-end-space-between", appearance: "transparent", class: "width-full height-full", iconEnd: mapListIcon, iconStart: "map", id: id, kind: "neutral", onClick: () => this._chooseMap(), width: "full" }, this._webMapInfo?.name), h("calcite-tooltip", { placement: "bottom", "reference-element": id }, h("span", null, this._translations.switchMap))));
     }
     /**
      * Create the toolbar (controls used for map and app interactions)