@esri/solutions-components 0.11.31 → 0.11.33

package/dist/collection/components/create-feature/create-feature.js

@@ -35,7 +35,6 @@ export class CreateFeature {
         this.searchConfiguration = undefined;
         this.selectedLayerId = undefined;
         this.showGuidingMsg = true;
-        this.showGuidingMsgWhileDrawing = true;
         this.submitNewReportsMessage = undefined;
         this._currentPage = "templatePicker";
         this._editorLoading = false;
@@ -291,8 +290,8 @@ export class CreateFeature {
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
         const mobileMapClass = this.isMobile ? "show-map" : "display-none";
-        // hide guiding msg for drawing page when showGuidingMsgWhileDrawing is false
-        const showGuidingMsg = this.showGuidingMsg && (this.showGuidingMsgWhileDrawing || this._currentPage !== "drawing");
+        // hide guiding msg for template picker page
+        const showGuidingMsg = this.showGuidingMsg && (this._currentPage !== "templatePicker");
         let guidingMsg = this._translations.chooseCategoryMsg;
         if (this._currentPage === 'drawing') {
             guidingMsg = this._translations.provideLocationMsg;
@@ -300,8 +299,8 @@ export class CreateFeature {
         else if (this._currentPage === 'featureForm') {
             guidingMsg = this._translations.provideDetailsMsg;
         }
-        return (h(Fragment, { key: '2c9644bd52600f493965881cd0be4975bc12112e' }, showGuidingMsg && h("calcite-notice", { key: '9059dcfd2ec9dd24b6e9005b8a3d164cd585b994', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '9ecdee9591e21ca0c19de55240c9c30f90c36098', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '81f0b3cabb02887df18d73e5e4bf372169863a1d', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'c820fbb57d7b85e2d03b827e62603fb47d4a494e', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
-            h("div", { key: 'c179237732e1da99329eeb489ad8778f5bb4eba4', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: 'f56d2e9ed6cb2b5abc088db3e2014187760b79fd', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: '3a448bdb1ffdef55993b20f99b3f1bd1643b6e2f' }, showGuidingMsg && h("calcite-notice", { key: '5a9f000003d75c93ff613f1a4ddba14711653173', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '751a2c932838a798b102e14340cba2103abdf971', slot: "message" }, guidingMsg)), h("calcite-loader", { key: 'e6ae257cd070bc9d7ea55c725ecf95d096effbc0', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'c25373774f6b87f7a6db4febd62a25b870d9be79', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
+            h("div", { key: '3deb4ffc1f8a633d92e3c27f64247a6f21c58e56', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: 'c72a6826cddbac45675a788e941a6cabd320740a', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -921,24 +920,6 @@ export class CreateFeature {
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "showGuidingMsgWhileDrawing": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": true,
-                "docs": {
-                    "tags": [],
-                    "text": "boolean: When false the notice message at drawing page will be hidden"
-                },
-                "attribute": "show-guiding-msg-while-drawing",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "submitNewReportsMessage": {
                 "type": "string",
                 "mutable": false,

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

@@ -305,6 +305,12 @@ export class CrowdsourceReporter {
             this.refreshLists();
         }
     }
+    /**
+     * Update sorting options when the sortOption prop is changed
+     */
+    async sortOptionWatchHandler() {
+        this.updateSortingOptions();
+    }
     /**
      * Called each time the filterByMapExtent prop is changed
      */
@@ -391,7 +397,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'b262a653d9af3a8f332f416af7f297cc15ac3355' }, this._reportSubmitted && h("calcite-alert", { key: 'efe33e5ec3ed708d21f8464aa70eb7ce9a258035', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '6c6a35bc84da9a13241313dd15dc4a5905f59866', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '21d8064c4bf5c0dd118cd012d9d30d2998011a00', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '93e68814f1f3cf62d9ed4d6673aec8124cfa0a4f', slot: "title" }, this._translations.error), h("div", { key: '156cd9169dbcbeafa605620938ba9aeccd0f9401', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '2cb152fe6734f80f6d9714c3597aaf064ffffd57', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '33369e8086740651ef26bfc765448fb6bded03fe', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '5b4fbac03c85e82e2bb11611772186140d0419e9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '31bd9f781304d1493dcbbee5914369742c8c0e03', slot: "title" }, this._translations.error), h("div", { key: '7844073654d79069fe7e54c72ec7bc85a1e77436', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '17eca819f0141e4945deb8013aa662d5b3c27626' }, h("calcite-shell", { key: 'c07f28fa3733f6be3a22d813a267e77a05038f3e', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
+        return (h(Host, { key: '67b22ff121842ed855d42c6e95f506da7a27fc03' }, this._reportSubmitted && h("calcite-alert", { key: 'a4687bb0a46e215f830418c934156adc1ca22d28', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '75c7f06e0c997cff02f2d03cf165a0d96556a99e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'db289e06eeff7d79511b0f2d94681931347b40ed', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '9f8c4ef83cafb13d17fd1051d308e59e00c277d5', slot: "title" }, this._translations.error), h("div", { key: 'c18221f220f9b1d28b296a9bab89b838f0884323', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '086aff48b20dbabcddb68fca5b57d7a14101c8d0', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '02125cd052ba81cc1fce0ac65ab517ae0eb46d13', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'c1e0966dde08f7f22f54cdadfc85f3024616fc77', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '0dd5af761fef31a4b85bfa0f66dff82e04b1cced', slot: "title" }, this._translations.error), h("div", { key: 'e8b8667855147b417cfc43d19e0c0a04f8870bfd', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '10c4c2d1673d63a8ced357312d57acf7faa46f0a' }, h("calcite-shell", { key: '8262117bc32e033f25f2864f4c5aa8a1bdde85ff', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -2240,6 +2246,9 @@ export class CrowdsourceReporter {
             }, {
                 "propName": "showMyReportsOnly",
                 "methodName": "showMyReportsOnlyWatchHandler"
+            }, {
+                "propName": "sortOption",
+                "methodName": "sortOptionWatchHandler"
             }, {
                 "propName": "filterByMapExtent",
                 "methodName": "filterByMapExtentChangeWatchHandler"

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

@@ -215,7 +215,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: 'd67dbfb453966623d26a1567df84bc58024305d7' }, h("div", { key: '9cd13eaf0125ab39e1d24398ccfda17c9534317a', 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: '6cb4122611d8d8595cd85cd07224baa374066658', class: "position-absolute" }, h("div", { key: 'c4498b1ecd165fa594d9d1cef43f01643b5e3efb', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'febb4d5c9a662ec9ffa6955114c8476c498116ee', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '5d0380d4dbd7412c90e6e3b9aa28b580bf5a6ac4' }, h("div", { key: '29825ee6c26acce86fcb6678d3e3db957358e314', 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: '35fc876d6857fb72c8808cff311e894dd9890afe', class: "position-absolute" }, h("div", { key: 'c95f3453d5fc4dac7ba5f1e7db69490405861059', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '211fd81ec4b13a731a895c882fafcb438fbf235c', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

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

@@ -312,8 +312,8 @@ export class InfoCard {
             });
         }
         else {
-            this._features.clear();
-            this._features.close();
+            this._features?.clear();
+            this._features?.close();
         }
         this._count = this._getCount();
     }

package/dist/collection/components/layer-table/layer-table.js

@@ -230,6 +230,18 @@ export class LayerTable {
      * boolean: When true we will not evaluate if the editor has any pending edits
      */
     _skipEditCheck = false;
+    /**
+     * __esri.Handle: highlight handle for the current feature
+     */
+    _currentFeatureHighlightHandle;
+    /**
+     * __esri.Handle: highlight handle for the default features
+     */
+    _defaultFeaturesHandle;
+    /**
+     * __esri.Handle: highlight handle for temporary / hovered feature
+    */
+    _temporaryFeatureHandle;
     /**
      * __esri.Handle: handle for the filter by extent
      */
@@ -246,6 +258,10 @@ export class LayerTable {
      * boolean: When true allow table to update the records
      */
     _shouldUpdateTableOnExtentChange = true;
+    /**
+     * any: layer view of the selected layer
+     */
+    _selectedLayerView;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -345,6 +361,19 @@ export class LayerTable {
         if (this.mapView) {
             this._floorExpression = undefined;
             this._searchExpression = undefined;
+            // highlight group for selections
+            this.mapView.highlights = [
+                {
+                    name: "default",
+                    color: "#00FFFF"
+                }, {
+                    name: "current-selection",
+                    color: "#ff00ff"
+                }, {
+                    name: "temporary",
+                    color: "#FFFF00"
+                }
+            ];
             this._updateShareUrl();
             this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (event) => {
                 void this._mapClicked(event);
@@ -507,6 +536,7 @@ export class LayerTable {
             table.rowHighlightIds.removeAll();
         }
         table.rowHighlightIds.add(oid);
+        this._highlightFeatures(oid);
         if (this.zoomAndScrollToSelected) {
             const i = this._table.viewModel.getObjectIdIndex(oid);
             this._table.scrollToIndex(i);
@@ -625,8 +655,8 @@ export class LayerTable {
         const tableHeightClass = this.isMobile ? "height-full" : "height-full-adjusted";
         const showSearch = this._canShowFullTextSearch();
         this._validateActiveActions();
-        return (h(Host, { key: '407c23b3b63455e5bab7e6c5fd239faae66a313a' }, h("div", { key: '9630101da8fef334861a236101d37f4a2b990dbc' }, h("calcite-scrim", { key: '8e7844a1ba4df87ab8d6fbe4ac9265688f5354dd', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: 'd0a5eaa5bdbaf0338125bbdc47c6f1801662b37a' }, this._getTableControlRow("header"), h("div", { key: '6747f6638aa3d1f7380c61451cb522d159e7ddb2', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: 'dc5b04234e48d6c466fc514a58eee4ef6c4886ba', class: "height-full width-full" }, showSearch &&
-            h("div", { key: '8aebcf99b0a159e3e7ce8c737f0558f9f147ee9b', class: "search-container border-bottom" }, h("calcite-input", { key: '7e4c1343755a966c4460506d6b1c205a81261155', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '2eaa2b221d9e401a0ac1c6b379718b29eb76ea9e', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: 'fa05975786b02a18c9c9866f3390c2f549d67961', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19", id: "solutions-selected-count-div" }, this._translations.recordsSelected
+        return (h(Host, { key: '2d4fa2f8d4cce83ef1f972444cac99ab17ccf09a' }, h("div", { key: 'b53e3d454a7c2c1886bfd61e960ca7aa27bf5761' }, h("calcite-scrim", { key: '9a0e507b26707b8010f4d0ac3acd5a1eb8820780', class: scrimClass, loading: this._queryingData }), h("calcite-shell", { key: '1f1815e38773a834b7c1f6bdb783717477331522' }, this._getTableControlRow("header"), h("div", { key: 'fd2b3ca04bbb6b5ed9c2e044722079704b1c778e', class: `width-full ${tableHeightClass}` }, h("calcite-panel", { key: '0355028dce084ac034fe4b5ea8f7a0b1fec18b83', class: "height-full width-full" }, showSearch &&
+            h("div", { key: '3169fdf7d876b504c6ee1d11a0b41a55815cbc87', class: "search-container border-bottom" }, h("calcite-input", { key: '116960c2b95658c23c2ed2ee4b5282af0fa44f27', class: "search", clearable: true, icon: "search", onCalciteInputChange: (evt) => void this._searchTextChanged(evt), placeholder: this._searchPlaceHolder, title: this._searchPlaceHolder, type: "search" })), h("calcite-loader", { key: '83fdb600a68786dc0dd0dbbcfee1bc59bd311763', class: loadingClass, label: this._translations.fetchingData, scale: "l" }), h("div", { key: '4983053113d687a459f7749bfe7723964551c3df', class: tableNodeClass, ref: this.onTableNodeCreate }))), !this.isMobile ? (h("div", { class: "bottom-left text-color height-19", id: "solutions-selected-count-div" }, this._translations.recordsSelected
             .replace("{{total}}", total)
             .replace("{{selected}}", selected))) : undefined), this.createFilterModal && this._filterModal())));
     }
@@ -1338,7 +1368,7 @@ export class LayerTable {
                     view: this.mapView,
                     columnReorderingEnabled: this.enableColumnReorder,
                     editingEnabled: this._editEnabled && this.enableInlineEdit,
-                    highlightEnabled: true,
+                    highlightEnabled: false,
                     multiSortEnabled: false,
                     attachmentsEnabled: true,
                     visibleElements: {
@@ -1358,6 +1388,9 @@ export class LayerTable {
                     void this._handleOnChange(evt);
                 });
                 this._table.viewModel.addHandles(changeHandle);
+                this._table.on('cell-pointerover', this.tempHighlightOnHover.bind(this));
+                this._table.on('cell-pointerout', this._removeTempHighlight.bind(this));
+                this._tableNode.addEventListener("mouseleave", this._removeTempHighlight.bind(this));
                 //Add handle to watch size of the table and update the state to reflect the total count
                 const handle = this.reactiveUtils.watch(() => this._table.size, (size) => {
                     this._size = size;
@@ -1376,6 +1409,7 @@ export class LayerTable {
         this._tempSelectedIds = [...this.selectedIds];
         this._finishOnChange();
         this._selectionFromMap = false;
+        this._highlightFeatures(this.selectedIds[0]);
     }
     /**
      * Validate if the editor has any pending edits
@@ -1438,6 +1472,47 @@ export class LayerTable {
         }
         this.featureSelectionChange.emit(this.selectedIds);
     }
+    /**
+     * Highlight feature when hovered over table row
+     * @param e The Feature table pointer over event
+     */
+    tempHighlightOnHover(e) {
+        this._removeTempHighlight();
+        const temporaryFeature = e.feature;
+        this._temporaryFeatureHandle = this._selectedLayerView.highlight([temporaryFeature], { name: "temporary" });
+    }
+    /**
+     * Clears the temporary highlight
+     */
+    _removeTempHighlight() {
+        if (this._temporaryFeatureHandle) {
+            this._temporaryFeatureHandle.remove();
+        }
+    }
+    /**
+     * Highlights the current and secondary features on map
+     * @param currentFeatureId selected current feature id
+     */
+    _highlightFeatures(currentFeatureId) {
+        this._clearHighlights();
+        this._currentFeatureHighlightHandle = this._selectedLayerView.highlight([currentFeatureId], { name: "current-selection" });
+        if (this.selectedIds.length > 1) {
+            const secondaryFeatures = this.selectedIds.filter((id) => id !== currentFeatureId);
+            this._defaultFeaturesHandle = this._selectedLayerView.highlight(secondaryFeatures, { name: "default" });
+        }
+    }
+    /**
+     * Clears the highlights
+     */
+    _clearHighlights() {
+        this._removeTempHighlight();
+        if (this._currentFeatureHighlightHandle) {
+            this._currentFeatureHighlightHandle.remove();
+        }
+        if (this._defaultFeaturesHandle) {
+            this._defaultFeaturesHandle.remove();
+        }
+    }
     /**
      * Reset the tables column templates when we get new column config
      */
@@ -1736,7 +1811,10 @@ export class LayerTable {
                         this._outOFExtentOids = [...this._outOFExtentOids, ...outOids];
                     }
                     if (restoreOids.length > 0) {
-                        this._table.highlightIds.addMany(restoreOids);
+                        // Merge this two array and then highlight the feature to maintain the current feature selection while restoring highlighted features
+                        this.selectedIds = [...new Set([...this.selectedIds, ...restoreOids])];
+                        this._table.highlightIds.removeAll();
+                        this._table.highlightIds.addMany(this.selectedIds.reverse());
                         this._outOFExtentOids = this._outOFExtentOids.filter(oid => !restoreOids.includes(oid));
                     }
                 }
@@ -1834,6 +1912,7 @@ export class LayerTable {
             this._table.viewModel.hideAttachmentsView();
         }
         this._table?.highlightIds.removeAll();
+        this._clearHighlights();
         this._table?.rowHighlightIds.removeAll();
         this._finishOnChange();
     }
@@ -1944,8 +2023,7 @@ export class LayerTable {
      */
     async _zoom() {
         if (this._layer) {
-            const selectedLayerView = await getFeatureLayerView(this.mapView, this._layer.id);
-            await goToSelection(this.selectedIds, selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
+            await goToSelection(this.selectedIds, this._selectedLayerView, this.mapView, true, undefined, this.zoomToScale);
         }
     }
     /**
@@ -1961,7 +2039,8 @@ export class LayerTable {
         if (id !== this._layer?.id || this._featuresEmpty()) {
             this._fetchingData = true;
             const layer = await getLayerOrTable(this.mapView, id);
-            layer && await layer.when(() => {
+            layer && await layer.when(async () => {
+                this._selectedLayerView = await getFeatureLayerView(this.mapView, layer.id);
                 if (this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId) {
                     this._table.viewModel.hideAttachmentsView();
                 }
@@ -2000,8 +2079,6 @@ export class LayerTable {
         if (fieldInfos) {
             columnTemplates = fieldInfos.reduce((prev, cur) => {
                 const template = {
-                    icon: "information",
-                    iconText: cur.description,
                     type: "field",
                     fieldName: cur.name,
                     label: cur.alias,

package/dist/components/basemap-gallery2.js

@@ -124,9 +124,6 @@ const BasemapGallery = /*@__PURE__*/ proxyCustomElement(class BasemapGallery ext
      */
     async _initBaseMapGallery(view) {
         if (this.BasemapGallery) {
-            if (this.basemapWidget) {
-                this.basemapWidget.destroy();
-            }
             const source = new this.PortalBasemapsSource({
                 query: this.basemapConfig?.basemapGroupId ? `id:${this.basemapConfig.basemapGroupId}` : null,
                 filterFunction: this.basemapConfig ? (basemap) => {
@@ -134,11 +131,19 @@ const BasemapGallery = /*@__PURE__*/ proxyCustomElement(class BasemapGallery ext
                 } : () => true
             });
             await source.refresh();
-            this.basemapWidget = new this.BasemapGallery({
-                container: this._basemapElement,
-                view,
-                source
-            });
+            // Don't destroy and re-create this widget as it leads to a duplication
+            // of the basemaps listed
+            if (!this.basemapWidget) {
+                this.basemapWidget = new this.BasemapGallery({
+                    container: this._basemapElement,
+                    view,
+                    source
+                });
+            }
+            else {
+                this.basemapWidget.view = view;
+                this.basemapWidget.source = source;
+            }
         }
     }
     static get watchers() { return {

package/dist/components/card-manager2.js

@@ -144,7 +144,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
         const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '803f5130e6f4fa0bf97cfdd2776e176786e736cc' }, h("div", { key: '7c0a756f5de5f536b52d2e9f6629593eb3c85781', class: "overflow-auto height-full" }, h("calcite-shell", { key: '9a6366bba429d5c29a5f1c556d6812f44d28ee2c', class: "position-relative " + featuresClass }, h("div", { key: '61cb9f7942eb209e5e0bd751ab4b5ca026086882', class: "position-static z-index-500" }, h("info-card", { key: '0c3b6f958384dab4bc1db2917a88215bafe330b1', enableEditGeometry: this.enableEditGeometry, enableSnapping: this.enableSnapping, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), h("calcite-shell", { key: 'db9233d29cc88ddc6cb023bcf9e9190ecb721214', class: "position-relative " + messageClass }, h("calcite-panel", { key: '0d1c22a3ad3d2d2a56054b2e8609697987b45ca7' }, h("div", { key: 'cc5f7faa934f474ddca2d0ab74fd46dac240cc6f', class: "padding-1" }, h("calcite-notice", { key: '2c2771696892455fcb1ec24d895cd321a84a8f49', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '0bbbd13e4e9a7b2240a85b41dbd00fc2a7e39c75', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '67bac627f68fc6bcda2b1a8965ab6d7fb12d2e4c', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: 'cd44af48bb05fd6ac41c0d66bdd9e01826ece1a4', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '648dfdc4fb559ecbf64ee43791e3d9799c346f1a', selected: true }, h("calcite-panel", { key: '855df56ed576e52c94dbe3cfa8f6d57427a37ba2', heading: heading }, h("calcite-action", { key: '156d1b20da3f02de66879531802aa2d2fb99b1ca', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '9b4556876d579a4f2bd02849737cd55b55f87cbd', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '803f5130e6f4fa0bf97cfdd2776e176786e736cc' }, h("div", { key: '7c0a756f5de5f536b52d2e9f6629593eb3c85781', class: "overflow-auto height-full" }, h("calcite-shell", { key: '9a6366bba429d5c29a5f1c556d6812f44d28ee2c', class: "position-relative " + featuresClass }, h("div", { key: '61cb9f7942eb209e5e0bd751ab4b5ca026086882', class: "position-static z-index-500" }, h("info-card", { key: 'aa2e8443af374a37dfebd0d5e87ca052221339a7', enableEditGeometry: this.enableEditGeometry, enableSnapping: this.enableSnapping, graphics: this._graphics, highlightEnabled: false, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), h("calcite-shell", { key: '4979b9d94cd68f36b5d9e6ea59ffc0baecd180c0', class: "position-relative " + messageClass }, h("calcite-panel", { key: '9e02f86010e2348668a995de7d3644f0ddf838a6' }, h("div", { key: '83a5ac2003838734308d81dc2903313cb6c07e9a', class: "padding-1" }, h("calcite-notice", { key: 'e380ab334a7b4d65fb64b51bc2b7feb61771f813', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '2ac48545c9c825d8d266a96b034dba7d17c024c1', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '300e922dcf00b72657ca48382579746073a1a646', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: '1c279da12e0885ed5ecae714a0958e76ac3734d5', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '8e54e6abf83e3d8ce487a2f76e1bdd8635f4d7b5', selected: true }, h("calcite-panel", { key: 'd31997df187797550eeaee6df294e4f41e6653b5', heading: heading }, h("calcite-action", { key: '636c83f8d5f361c1eb35a5b524565d0bd072489f', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'bd1a3ee472e275c57e9c40c217a3c0ac9c8e8715', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature
@@ -155,7 +155,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
                 setTimeout(() => {
                     this._isFeatureCreated = false;
                 }, 2000);
-            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id, showGuidingMsg: false, showGuidingMsgWhileDrawing: false })));
+            }, onSuccess: this._featureCreated.bind(this), ref: el => this._createFeature = el, selectedLayerId: this.layer?.id, showGuidingMsg: false })));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/create-feature2.js

@@ -34,7 +34,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this.searchConfiguration = undefined;
         this.selectedLayerId = undefined;
         this.showGuidingMsg = true;
-        this.showGuidingMsgWhileDrawing = true;
         this.submitNewReportsMessage = undefined;
         this._currentPage = "templatePicker";
         this._editorLoading = false;
@@ -285,8 +284,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         const loaderClass = this._editorLoading ? "" : "display-none";
         const featureFormClass = this._editorLoading ? "display-none" : "";
         const mobileMapClass = this.isMobile ? "show-map" : "display-none";
-        // hide guiding msg for drawing page when showGuidingMsgWhileDrawing is false
-        const showGuidingMsg = this.showGuidingMsg && (this.showGuidingMsgWhileDrawing || this._currentPage !== "drawing");
+        // hide guiding msg for template picker page
+        const showGuidingMsg = this.showGuidingMsg && (this._currentPage !== "templatePicker");
         let guidingMsg = this._translations.chooseCategoryMsg;
         if (this._currentPage === 'drawing') {
             guidingMsg = this._translations.provideLocationMsg;
@@ -294,8 +293,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         else if (this._currentPage === 'featureForm') {
             guidingMsg = this._translations.provideDetailsMsg;
         }
-        return (h(Fragment, { key: '2c9644bd52600f493965881cd0be4975bc12112e' }, showGuidingMsg && h("calcite-notice", { key: '9059dcfd2ec9dd24b6e9005b8a3d164cd585b994', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '9ecdee9591e21ca0c19de55240c9c30f90c36098', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '81f0b3cabb02887df18d73e5e4bf372169863a1d', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'c820fbb57d7b85e2d03b827e62603fb47d4a494e', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
-            h("div", { key: 'c179237732e1da99329eeb489ad8778f5bb4eba4', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: 'f56d2e9ed6cb2b5abc088db3e2014187760b79fd', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: '3a448bdb1ffdef55993b20f99b3f1bd1643b6e2f' }, showGuidingMsg && h("calcite-notice", { key: '5a9f000003d75c93ff613f1a4ddba14711653173', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: '751a2c932838a798b102e14340cba2103abdf971', slot: "message" }, guidingMsg)), h("calcite-loader", { key: 'e6ae257cd070bc9d7ea55c725ecf95d096effbc0', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'c25373774f6b87f7a6db4febd62a25b870d9be79', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
+            h("div", { key: '3deb4ffc1f8a633d92e3c27f64247a6f21c58e56', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: 'c72a6826cddbac45675a788e941a6cabd320740a', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -723,7 +722,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "searchConfiguration": [16],
         "selectedLayerId": [1, "selected-layer-id"],
         "showGuidingMsg": [4, "show-guiding-msg"],
-        "showGuidingMsgWhileDrawing": [4, "show-guiding-msg-while-drawing"],
         "submitNewReportsMessage": [1, "submit-new-reports-message"],
         "_currentPage": [32],
         "_editorLoading": [32],

package/dist/components/crowdsource-reporter.js

@@ -324,6 +324,12 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             this.refreshLists();
         }
     }
+    /**
+     * Update sorting options when the sortOption prop is changed
+     */
+    async sortOptionWatchHandler() {
+        this.updateSortingOptions();
+    }
     /**
      * Called each time the filterByMapExtent prop is changed
      */
@@ -410,7 +416,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'b262a653d9af3a8f332f416af7f297cc15ac3355' }, this._reportSubmitted && h("calcite-alert", { key: 'efe33e5ec3ed708d21f8464aa70eb7ce9a258035', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '6c6a35bc84da9a13241313dd15dc4a5905f59866', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '21d8064c4bf5c0dd118cd012d9d30d2998011a00', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '93e68814f1f3cf62d9ed4d6673aec8124cfa0a4f', slot: "title" }, this._translations.error), h("div", { key: '156cd9169dbcbeafa605620938ba9aeccd0f9401', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '2cb152fe6734f80f6d9714c3597aaf064ffffd57', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '33369e8086740651ef26bfc765448fb6bded03fe', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '5b4fbac03c85e82e2bb11611772186140d0419e9', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '31bd9f781304d1493dcbbee5914369742c8c0e03', slot: "title" }, this._translations.error), h("div", { key: '7844073654d79069fe7e54c72ec7bc85a1e77436', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '17eca819f0141e4945deb8013aa662d5b3c27626' }, h("calcite-shell", { key: 'c07f28fa3733f6be3a22d813a267e77a05038f3e', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
+        return (h(Host, { key: '67b22ff121842ed855d42c6e95f506da7a27fc03' }, this._reportSubmitted && h("calcite-alert", { key: 'a4687bb0a46e215f830418c934156adc1ca22d28', "auto-close": true, class: themeClass + " report-submitted-msg", icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._reportSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '75c7f06e0c997cff02f2d03cf165a0d96556a99e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'db289e06eeff7d79511b0f2d94681931347b40ed', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '9f8c4ef83cafb13d17fd1051d308e59e00c277d5', slot: "title" }, this._translations.error), h("div", { key: 'c18221f220f9b1d28b296a9bab89b838f0884323', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '086aff48b20dbabcddb68fca5b57d7a14101c8d0', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '02125cd052ba81cc1fce0ac65ab517ae0eb46d13', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'c1e0966dde08f7f22f54cdadfc85f3024616fc77', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '0dd5af761fef31a4b85bfa0f66dff82e04b1cced', slot: "title" }, this._translations.error), h("div", { key: 'e8b8667855147b417cfc43d19e0c0a04f8870bfd', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '10c4c2d1673d63a8ced357312d57acf7faa46f0a' }, h("calcite-shell", { key: '8262117bc32e033f25f2864f4c5aa8a1bdde85ff', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -1462,6 +1468,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "mapView": ["mapViewWatchHandler"],
         "floorLevel": ["floorLevelWatchHandler"],
         "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"],
+        "sortOption": ["sortOptionWatchHandler"],
         "filterByMapExtent": ["filterByMapExtentChangeWatchHandler"],
         "layerExpressions": ["layerExpressionsWatchHandler"],
         "showFeatureSymbol": ["showFeatureSymbolWatchHandler"]
@@ -1531,6 +1538,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "mapView": ["mapViewWatchHandler"],
         "floorLevel": ["floorLevelWatchHandler"],
         "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"],
+        "sortOption": ["sortOptionWatchHandler"],
         "filterByMapExtent": ["filterByMapExtentChangeWatchHandler"],
         "layerExpressions": ["layerExpressionsWatchHandler"],
         "showFeatureSymbol": ["showFeatureSymbolWatchHandler"]

package/dist/components/edit-card2.js

@@ -207,7 +207,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: 'd67dbfb453966623d26a1567df84bc58024305d7' }, h("div", { key: '9cd13eaf0125ab39e1d24398ccfda17c9534317a', 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: '6cb4122611d8d8595cd85cd07224baa374066658', class: "position-absolute" }, h("div", { key: 'c4498b1ecd165fa594d9d1cef43f01643b5e3efb', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'febb4d5c9a662ec9ffa6955114c8476c498116ee', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: '5d0380d4dbd7412c90e6e3b9aa28b580bf5a6ac4' }, h("div", { key: '29825ee6c26acce86fcb6678d3e3db957358e314', 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: '35fc876d6857fb72c8808cff311e894dd9890afe', class: "position-absolute" }, h("div", { key: 'c95f3453d5fc4dac7ba5f1e7db69490405861059', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '211fd81ec4b13a731a895c882fafcb438fbf235c', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //

package/dist/components/info-card2.js

@@ -313,8 +313,8 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
             });
         }
         else {
-            this._features.clear();
-            this._features.close();
+            this._features?.clear();
+            this._features?.close();
         }
         this._count = this._getCount();
     }