@esri/solutions-components 0.11.21 → 0.11.23

package/dist/components/crowdsource-manager.js

@@ -59,6 +59,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this.enableLegend = true;
         this.enableSearch = true;
         this.enableShare = false;
+        this.enableSnapping = true;
         this.enableZoom = true;
         this.locale = undefined;
         this.mapInfos = [];
@@ -283,7 +284,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     render() {
         // only avoid border when we have a header color that is not white
         const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
-        return (h(Host, { key: '4ec349cf53a543077a3b938d5dad2e767f533181' }, h("calcite-shell", { key: '08c56e11ff814419aeb7295bba240b0e96856cae', class: "position-relative" }, h("calcite-panel", { key: 'aac7ff804b7e98f3b5d1b11dbc5ee8e18c9467ca', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal(), this._deleteModal()));
+        return (h(Host, { key: '1d30ec71032cffd61c016cc846f59a8e437253de' }, h("calcite-shell", { key: '836f6e8cde7c3e5b177803b607e26a41bdea42a3', class: "position-relative" }, h("calcite-panel", { key: '0c968ccf6d19aa754b56dc5a3714e3b6f44dcac9', class: `width-full height-full ${borderClass}`, loading: this._isLoading }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter()), this._filterModal(), this._deleteModal()));
     }
     /**
      * Called after each render
@@ -494,7 +495,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const containerClass = this._isPortraitMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isPortraitMobile ? "display-none height-0" : "";
         const tableViewClass = this.mapInfos?.length > 1 && this.appLayout === "tableView" ? "position-relative top-51" : "";
         // position-sticky added to avoid an issue where this dialog would overlap the delete message modal in some small screens
-        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass} position-sticky`, style: {
+        // position-sticky not set when in tableView as it will cause the map-picker to not be visible
+        const stickyClass = this.appLayout !== "tableView" ? "position-sticky" : "";
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass} ${stickyClass}`, 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 */
@@ -512,7 +515,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         const isTableLayout = this.appLayout === 'tableView';
         const cardManagerHeight = isTableLayout && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : isMapLayout || isTableLayout ? "height-full" : (this._numSelected > 0 && !this._isMobile) ? "height-50" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isPortraitMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, isMobile: this._isPortraitMobile, layer: this._layer, locale: this.locale, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
+        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, customInfoText: this.customInfoText, enableCreateFeatures: this._enableCreateFeatures && !this._isMobile, enableEditGeometry: this?._mapInfo?.enableEditGeometry, enableSnapping: this.enableSnapping, isMobile: this._isPortraitMobile, layer: this._layer, locale: this.locale, mapView: this?._mapView, onBackFromCreateWorkFlow: () => {
                 this._showInformationHeader = true;
             }, onCreateWorkFlowStarted: () => {
                 this.appLayout = this._layer.isTable ? "tableView" : "mapView";
@@ -800,6 +803,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "enableLegend": [4, "enable-legend"],
         "enableSearch": [4, "enable-search"],
         "enableShare": [4, "enable-share"],
+        "enableSnapping": [4, "enable-snapping"],
         "enableZoom": [4, "enable-zoom"],
         "locale": [1],
         "mapInfos": [16],

package/dist/components/crowdsource-reporter.js

@@ -40,6 +40,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.enableLogin = undefined;
         this.enableNewReports = undefined;
         this.enableSearch = true;
+        this.enableSnapping = false;
         this.enableZoom = true;
         this.isMobile = undefined;
         this.layerExpressions = [];
@@ -64,6 +65,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.zoomToScale = undefined;
         this.floorLevel = undefined;
         this.showFullCommentTitle = true;
+        this.filterByMapExtent = false;
+        this.sortOption = "newest";
         this._featureCreationFailedErrorMsg = undefined;
         this._filterActive = false;
         this._flowItems = [];
@@ -77,9 +80,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._translations = undefined;
         this._updatedProgressBarStatus = 25;
         this._updatedSorting = undefined;
-        this._updatedSortOption = "sortNewest";
+        this._updatedSortOption = "newest";
         this._commentSubmitted = false;
         this._addingCommentFailed = false;
+        this._filterOpen = false;
     }
     get el() { return this; }
     //--------------------------------------------------------------------------
@@ -236,8 +240,17 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     /**
      * Called each time the mapView prop is changed.
      */
-    async isMobileWatchHandler() {
+    async isMobileWatchHandler(isMobile) {
         this.updatePanelState(false, this._showFullPanel);
+        if (isMobile && this._flowItems[this._flowItems.length - 1] === "filter-panel") {
+            // while switching always first take back from filter panel to store currentLayerExpressions to restore the filter applied
+            await this.backFromFilterPanel();
+            this._filterOpen = true;
+        }
+        else if (!isMobile && this._filterOpen) {
+            await this._closeFilter();
+            this._flowItems = [...this._flowItems, "filter-panel"];
+        }
     }
     /**
      * Fetch translations when the locale is updated
@@ -287,17 +300,15 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     async showMyReportsOnlyWatchHandler() {
         if (this._editableLayerIds) {
             await this._updateFeatures();
-            setTimeout(() => {
-                // refresh layer list when user is on layer list panel
-                if (this._flowItems[this._flowItems.length - 1] === "layer-list" && this._layerList) {
-                    void this._layerList.refresh();
-                }
-                if (this._featureList) {
-                    void this._featureList.refresh();
-                }
-            }, 50);
+            this.refreshLists();
         }
     }
+    /**
+     * Called each time the filterByMapExtent prop is changed
+     */
+    filterByMapExtentChangeWatchHandler() {
+        this.refreshLists();
+    }
     /**
      * Called each time the layerExpressions prop is changed
     */
@@ -369,7 +380,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     * Update the filter list's initial definition expressions when the filter list component is available
     */
     componentWillRender() {
-        if (this._flowItems.includes('filter-panel')) {
+        if (this._flowItems.includes('filter-panel') || this._filterOpen) {
             void this._filterList?.updateInitDefExpressions({ initDefExpressions: this._initDefExpressions });
         }
     }
@@ -378,7 +389,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: 'b97883be773d948b75e6df1be453cde018a0dba1' }, this._reportSubmitted && h("calcite-alert", { key: '5fd17c13a0d4dc3c7fed1bb253e9196b83c20e1d', "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: '5c7a00cb3eaaaeb3a0501324c10b407746ecca46', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: 'd83c690d60c2e6f12a5ec356c5ae67185edc6a1e', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: '9cbac1cf8698f1f918004764e4e43c25af766e4a', slot: "title" }, this._translations.error), h("div", { key: 'b4dbe07b4af7ab6c543596c6a3374b785fac4c7e', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: 'cde843955c6538ea857a0a187c995062efd777e7', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '86e3d820aa0d4362c07470bd60d8f0efd0614bc2', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: 'a0bdeec1bb3a33f3bfa938c0a1f4e631c6a76399', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: 'b161d8e42a078d961ec4e42888d26f4314e9d5a4', slot: "title" }, this._translations.error), h("div", { key: 'cf3908f91448dfbb7cf6ec78b413eaa3327372be', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '42e2c8abaf43d6a587729229347efb2836827b98' }, h("calcite-shell", { key: '9e3174a699c37be8f20f4609f52c94ecb95d599f', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: '11cf5f3a1674460c6ab9d2979d621417431e7130' }, this._reportSubmitted && h("calcite-alert", { key: 'ab40068608e235cbbeda293d62f501c1bcc2a123', "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: '91e436fa80c41457465f0816b66e205793f5a91d', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '6dbcd02898e6328f343af94985f069d8261dce1f', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'fc97e5f02b5241af076243b7fa8bb19f29c3dad6', slot: "title" }, this._translations.error), h("div", { key: '9583f6bd62f2a36c50e8309a353dd634300aa835', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '0d216fc75481b249ee63468b2c0145ed7f09d09e', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '700a788d9f0f12200bee0625576571a8c352a6a1', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '28ef0e56c42d3d366e33374368461eba9bb5e896', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '90e8757ee650b3f55c456d0fd56a45dac6df263e', slot: "title" }, this._translations.error), h("div", { key: 'b819d951be7340af388767b40e423a279b33ea85', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '167d0cb576feaaa77279110ab40df63e1a6146ae' }, h("calcite-shell", { key: 'b4d83790aa3a47a9c336821c54bc3e0fa1d9e308', "content-behind": true }, this._getReporter())), this.isMobile && this.filterModal()));
     }
     //--------------------------------------------------------------------------
     //
@@ -465,6 +476,36 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             ? h("calcite-flow", null, renderLists?.length > 0 && renderLists)
             : h("calcite-loader", { label: "", scale: "m" })));
     }
+    /**
+     * Show filter component in modal
+     * @returns node to interact with any configured filters for the current layer
+     */
+    filterModal() {
+        //get layer expression for current selected layer
+        const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
+        return (currentLayersExpressions.length > 0 &&
+            h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => {
+                    this._filterActive = false;
+                    void this._featureList.refresh();
+                }, onFilterUpdate: () => this._handleFilterUpdate(this._filterList?.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: true, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+    }
+    /**
+     * When true the filter modal will be displayed
+     * @protected
+     */
+    _toggleFilter() {
+        this._filterOpen = !this._filterOpen;
+    }
+    /**
+     * Close the filter modal
+     * @protected
+     */
+    async _closeFilter() {
+        this._filterOpen = false;
+        if (this._filterList != null) {
+            this._currentLayerExpressions = await this._filterList.getCurrentLayerExpressions();
+        }
+    }
     /**
      * On sort option click update the sort field and sort order
      * @param sortField sort field
@@ -485,8 +526,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     _toggleSort() {
         const canSortByVotes = this.reportingOptions && this.reportingOptions[this._selectedLayerId] &&
             this.reportingOptions[this._selectedLayerId].like && this.reportingOptions[this._selectedLayerId].likeField;
-        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { label: "", "selection-mode": "single" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "sortNewest"); }, selected: this._updatedSortOption === "sortNewest", value: "sortNewest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "sortOldest"); }, selected: this._updatedSortOption === "sortOldest", value: "sortOldest" }), canSortByVotes &&
-            h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "sortHighestVoted"); }, selected: this._updatedSortOption === "sortHighestVoted", value: "sortHighestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "sortLowestVoted"); }, selected: this._updatedSortOption === "sortLowestVoted", value: "sortLowestVoted" })))));
+        return (h("calcite-popover", { autoClose: true, label: "", offsetDistance: 0, placement: this.isMobile ? "leading-start" : "bottom-start", pointerDisabled: true, referenceElement: "sort-popover" }, h("calcite-list", { label: "", "selection-mode": "single-persist" }, h("calcite-list-item", { label: this._translations.sortNewest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "desc", "newest"); }, selected: this._updatedSortOption === "newest", value: "newest" }), h("calcite-list-item", { label: this._translations.sortOldest, onCalciteListItemSelect: () => { void this.sortOptionClick(this._selectedLayer.objectIdField, "asc", "oldest"); }, selected: this._updatedSortOption === "oldest", value: "oldest" }), canSortByVotes &&
+            h(Fragment, null, h("calcite-list-item", { label: this._translations.sortHighestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "desc", "highestVoted"); }, selected: this._updatedSortOption === "highestVoted", value: "highestVoted" }), h("calcite-list-item", { label: this._translations.sortLowestVoted, onCalciteListItemSelect: () => { void this.sortOptionClick(this.reportingOptions[this._selectedLayerId].likeField, "asc", "lowestVoted"); }, selected: this._updatedSortOption === "lowestVoted", value: "lowestVoted" })))));
     }
     /**
      * Reset the filter
@@ -513,7 +554,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getLayerListFlowItem() {
         return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader, selected: this._flowItems[this._flowItems.length - 1] === "layer-list" }, this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToChooseCategory.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", filterByMapExtent: this.filterByMapExtent, layers: this._editableLayerIds?.length > 0 ? this._editableLayerIds : this._layers, locale: this.locale, mapView: this.mapView, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this), ref: el => this._layerList = el, showFeatureCount: true, showNextIcon: true }))));
     }
     /**
      * Get the layer list for creating a report
@@ -532,7 +573,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFeatureCreateFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId, submitNewReportsMessage: this.submitNewReportsMessage }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromCreateFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-create" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateFeaturePanel.bind(this), width: "full" }, this._translations.cancel)), h("calcite-panel", { "full-height": true, "full-width": true }, h("div", { class: "progress-bar" }, h("calcite-progress", { type: "determinate", value: this._updatedProgressBarStatus })), h("create-feature", { customizeSubmit: true, enableSearch: true, enableSnapping: this.enableSnapping, floorLevel: this.floorLevel, formElements: this._formElements.find(elm => elm.id === this._selectedLayerId), isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, onDrawComplete: this.onFormReady.bind(this), onEditingAttachment: this.showSubmitCancelButton.bind(this), onFail: this.createFeatureFailed.bind(this), onModeChanged: this.backFromCreateFeaturePanel.bind(this), onProgressStatus: this.updatedProgressStatus.bind(this), onSuccess: this.onReportSubmitted.bind(this), ref: el => this._createFeature = el, searchConfiguration: this.searchConfiguration, selectedLayerId: this._selectedLayerId, submitNewReportsMessage: this.submitNewReportsMessage }))));
     }
     /**
      * Update the progress bar status when editor panel changes
@@ -700,32 +741,36 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     async layerListLoaded(evt) {
-        const layersListed = evt.detail;
-        //consider only the layers listed in the layer-list component
-        const allMapLayers = await getAllLayers(this.mapView);
-        const reportingEnabledLayerIds = [];
-        this._validLayers = [];
-        this._nonVisibleValidLayers = [];
-        allMapLayers.forEach((eachLayer) => {
-            if (layersListed.includes(eachLayer.id)) {
-                this._validLayers.push(eachLayer);
-                if (!eachLayer.visible) {
-                    this._nonVisibleValidLayers.push(eachLayer);
-                }
-                //create list of reporting enabled layers
-                if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
-                    reportingEnabledLayerIds.push(eachLayer.id);
+        // Check if user is present on the layer panel or if first component is feature list then only allow to store the non-reporting valid layers to avoid the feature visbility issue on map
+        const presentOnLayerListPanel = this._layerList && this._flowItems[this._flowItems.length - 1] === "layer-list" || this._flowItems[0] === "feature-list";
+        if (presentOnLayerListPanel) {
+            const layersListed = evt.detail;
+            //consider only the layers listed in the layer-list component
+            const allMapLayers = await getAllLayers(this.mapView);
+            const reportingEnabledLayerIds = [];
+            this._validLayers = [];
+            this._nonVisibleValidLayers = [];
+            allMapLayers.forEach((eachLayer) => {
+                if (layersListed.includes(eachLayer.id)) {
+                    this._validLayers.push(eachLayer);
+                    if (!eachLayer.visible) {
+                        this._nonVisibleValidLayers.push(eachLayer);
+                    }
+                    //create list of reporting enabled layers
+                    if (this._getLayersConfig(eachLayer.id)?.reporting && this._layerItemsHash[eachLayer.id] && this._layerItemsHash[eachLayer.id].supportsAdd) {
+                        reportingEnabledLayerIds.push(eachLayer.id);
+                    }
                 }
+            });
+            //handleMap click on layer list loaded
+            this.handleMapClick();
+            //When we have any reporting layer then only show the create report button on layerList
+            this._hasValidLayers = reportingEnabledLayerIds.length > 0;
+            //navigate to the feature details if URL params found
+            if (!this._urlParamsLoaded) {
+                this._urlParamsLoaded = true;
+                await this.loadFeatureFromURLParams();
             }
-        });
-        //handleMap click on layer list loaded
-        this.handleMapClick();
-        //When we have any reporting layer then only show the create report button on layerList
-        this._hasValidLayers = reportingEnabledLayerIds.length > 0;
-        //navigate to the feature details if URL params found
-        if (!this._urlParamsLoaded) {
-            this._urlParamsLoaded = true;
-            await this.loadFeatureFromURLParams();
         }
     }
     /**
@@ -734,16 +779,27 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     async displayFeaturesList(evt) {
-        this._updatedSorting = {
-            field: '',
-            order: 'desc'
-        };
-        this._updatedSortOption = "sortNewest";
         await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        void this.updateSortingOptions();
         void this.handleSelectedLayersFilter();
         this._flowItems = [...this._flowItems, "feature-list"];
         this._prevSelectedLayerId = this._selectedLayerId;
     }
+    /**
+     * Updates the sorting options based on the selected sort preference.
+     * @protected
+     */
+    updateSortingOptions() {
+        const sortingOption = this.sortOption === "" ? "newest" : this.sortOption;
+        const sortOrder = sortingOption === "oldest" || sortingOption === "lowestVoted" ? "asc" : "desc";
+        const likeField = this.reportingOptions?.[this._selectedLayerId]?.like ? this.reportingOptions?.[this._selectedLayerId]?.likeField : "";
+        const sortField = (sortingOption === "newest" || sortingOption === "oldest") ? this._selectedLayer.objectIdField : likeField;
+        this._updatedSorting = {
+            field: sortField,
+            order: sortOrder
+        };
+        this._updatedSortOption = !likeField && (sortingOption === "highestVoted" || sortingOption === "lowestVoted") ? "newest" : sortingOption;
+    }
     /**
      * On back from filter panel get the filter's init state
      * @protected
@@ -868,8 +924,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     getFeatureListFlowItem(layerId, layerName) {
         const canCreateReports = this._getLayersConfig(this._selectedLayerId)?.reporting && this._layerItemsHash[this._selectedLayerId].supportsAdd;
         const showFilterIcon = this._currentLayerExpressions?.length > 0;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
-            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", highlightOnHover: true, locale: this.locale, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, loading: !this.isMobile && this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-list" }, this._toggleSort(), h("calcite-action", { icon: "sort-ascending-arrow", id: "sort-popover", slot: "header-actions-end", text: this._translations.sort, title: this._translations.sort }), showFilterIcon && h("calcite-action", { icon: "filter", indicator: this._filterActive, onClick: () => { this.isMobile ? this._toggleFilter() : this._flowItems = [...this._flowItems, "filter-panel"]; }, slot: "header-actions-end", text: this._translations.filter, title: this._translations.filter }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && canCreateReports &&
+            h("calcite-button", { appearance: "solid", onClick: this.navigateToCreateFeature.bind(this), slot: "footer", width: "full" }, this.reportButtonText ? this.reportButtonText : this._translations.createReportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { applyLayerViewFilter: this.showMyReportsOnly, class: "height-full", filterByMapExtent: this.filterByMapExtent, highlightOnHover: true, locale: this.locale, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 30, ref: el => this._featureList = el, reportingOptions: this.reportingOptions, selectedLayerId: layerId, showFeatureSymbol: this.showFeatureSymbol, sortingInfo: this._updatedSorting }))));
     }
     /**
      * Returns the calcite-flow item for filter
@@ -877,7 +933,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     getFilterPanel() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._translations?.filterLayerTitle?.replace("{{title}}", this._selectedLayerName), loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromFilterPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "filter-panel" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", disabled: !this._filterActive, onClick: this.resetFilterList.bind(this), width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromFilterPanel.bind(this), width: "full" }, this._translations.close))), h("calcite-panel", { "full-height": true }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtnOnClick: () => undefined, comboboxOverlayPositioning: "fixed", layerExpressions: this._currentLayerExpressions, onFilterListReset: () => void this._handleFilterListReset(), onFilterUpdate: () => void this._handleFilterUpdate(this._filterList?.filterCount > 0), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -885,7 +941,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getFeatureDetailsFlowItem() {
         const showCommentBtn = this._getLayersConfig(this._selectedLayerId)?.comment && this._selectedLayer.relationships.length > 0 && this._relatedTable;
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, loading: this._showLoadingIndicator, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "feature-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("instant-apps-social-share", { autoUpdateShareUrl: false, class: "share-node", embed: false, popoverButtonIconScale: "s", ref: el => this._shareNode = el, removePopoverOffset: true, scale: "m", shareButtonColor: "neutral", shareButtonType: "action", slot: "header-actions-end", socialMedia: true, view: this.mapView }), this._selectedFeature.length > 1 && this.getFeaturesPagination(), h("calcite-panel", null, h("feature-details", { class: 'full-height', enableSnapping: this.enableSnapping, graphics: this._selectedFeature, layerItemsHash: this._layerItemsHash, locale: this.locale, mapView: this.mapView, onAddComment: this.showAddCommentsPanel.bind(this), onCommentSelect: this.onCommentSelectFromList.bind(this), onFeatureSelectionChange: this.selectionChanged.bind(this), onLikeOrDislikeClicked: () => { void this._featureList.refresh(true); }, onLoadingStatus: (evt) => void this.updatingFeatureDetails(evt.detail), ref: el => this._featureDetails = el, reportingOptions: this.reportingOptions, showFullCommentTitle: this.showFullCommentTitle, showUserImageInCommentsList: this.showUserImageInCommentsList }), showCommentBtn &&
             h("calcite-button", { appearance: "solid", onClick: this.showAddCommentsPanel.bind(this), slot: "footer", width: "full" }, this.commentButtonText || this._translations.comment))));
     }
     /**
@@ -901,14 +957,14 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @returns Node
      */
     getCommentDetailsFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromSelectedPanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "comment-details" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, enableSnapping: this.enableSnapping, graphics: this._selectedRelatedFeature, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, paginationEnabled: false }))));
     }
     /**
      * Returns the calcite-flow item for add comment
      * @returns Node
      */
     getAddCommentFlowItem() {
-        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._relatedTable.title, onCalciteFlowItemBack: this.backFromCreateRelatedFeaturePanel.bind(this), selected: this._flowItems[this._flowItems.length - 1] === "add-comment" }, this.isMobile && this.getActionToExpandCollapsePanel(), h("div", { class: "width-full", slot: "footer" }, this._showSubmitCancelButton && h("div", { class: "width-full", slot: "footer" }, h("calcite-button", { appearance: "solid", class: "footer-top-button footer-button", onClick: this.onCreateRelatedFeatureSubmitButtonClick.bind(this), width: "full" }, this._translations.submit), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromCreateRelatedFeaturePanel.bind(this), width: "full" }, this._translations.cancel))), h("calcite-panel", null, h("create-related-feature", { customizeSubmit: true, enableSnapping: this.enableSnapping, locale: this.locale, mapView: this.mapView, onFail: this.addCommentFailed.bind(this), onFormReady: this.onFormReady.bind(this), onIsActionPending: this.showSubmitCancelButton.bind(this), onSuccess: this.onCommentSubmitted.bind(this), ref: el => this._createRelatedFeature = el, selectedFeature: this._currentFeature, table: this._relatedTable }))));
     }
     /**
      * Sets the selected features and updates the first feature as the current selected feature
@@ -1135,6 +1191,22 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             return prev;
         }, []);
     }
+    /**
+     * Refreshes the layer and feature list
+     * @protected
+     */
+    refreshLists() {
+        // added setTimeout for when the value of prop is updated then refresh the lists
+        setTimeout(() => {
+            // refresh layer list when user is on layer list panel
+            if (this._layerList && this._flowItems[this._flowItems.length - 1] === "layer-list") {
+                void this._layerList.refresh();
+            }
+            if (this._featureList) {
+                void this._featureList.refresh();
+            }
+        }, 50);
+    }
     /**
      * updates the features for layer/feature list
      * @protected
@@ -1195,6 +1267,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         };
         await this.layerListLoaded(evt);
         await this.setSelectedLayer(this._validLayers[0].id, this._validLayers[0].title);
+        void this.updateSortingOptions();
         void this.handleSelectedLayersFilter();
     }
     /**
@@ -1368,6 +1441,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "mapView": ["mapViewWatchHandler"],
         "floorLevel": ["floorLevelWatchHandler"],
         "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentChangeWatchHandler"],
         "layerExpressions": ["layerExpressionsWatchHandler"],
         "showFeatureSymbol": ["showFeatureSymbolWatchHandler"]
     }; }
@@ -1385,6 +1459,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "enableLogin": [4, "enable-login"],
         "enableNewReports": [4, "enable-new-reports"],
         "enableSearch": [4, "enable-search"],
+        "enableSnapping": [4, "enable-snapping"],
         "enableZoom": [4, "enable-zoom"],
         "isMobile": [4, "is-mobile"],
         "layerExpressions": [16],
@@ -1409,6 +1484,8 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "zoomToScale": [2, "zoom-to-scale"],
         "floorLevel": [1, "floor-level"],
         "showFullCommentTitle": [4, "show-full-comment-title"],
+        "filterByMapExtent": [4, "filter-by-map-extent"],
+        "sortOption": [1, "sort-option"],
         "_featureCreationFailedErrorMsg": [32],
         "_filterActive": [32],
         "_flowItems": [32],
@@ -1425,6 +1502,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "_updatedSortOption": [32],
         "_commentSubmitted": [32],
         "_addingCommentFailed": [32],
+        "_filterOpen": [32],
         "updateLayerExpressionsT9n": [64]
     }, undefined, {
         "isMobile": ["isMobileWatchHandler"],
@@ -1432,6 +1510,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "mapView": ["mapViewWatchHandler"],
         "floorLevel": ["floorLevelWatchHandler"],
         "showMyReportsOnly": ["showMyReportsOnlyWatchHandler"],
+        "filterByMapExtent": ["filterByMapExtentChangeWatchHandler"],
         "layerExpressions": ["layerExpressionsWatchHandler"],
         "showFeatureSymbol": ["showFeatureSymbolWatchHandler"]
     }]);

package/dist/components/edit-card2.js

@@ -8,7 +8,7 @@ import { l as loadModules } from './loadModules.js';
 import { g as getLocaleComponentStrings } from './locale.js';
 import { a as getAllLayers } from './mapViewUtils.js';
 
-const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-color-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-color-foreground-1) !important}.esri-editor__panel-toolbar{display:none !important}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-editor__panel-content{padding-block:10px !important}";
+const editCardCss = ":host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{padding-top:0px}.padding-sides-bottom-1{padding:0 1rem 1rem 1rem}.position-relative{position:relative}.esri-editor__prompt--danger{position:relative !important;width:100% !important;background-color:var(--calcite-color-foreground-1) !important}.esri-feature__content-node{background-color:var(--calcite-color-foreground-1) !important}.hide-editor-toolbar .esri-editor__panel-toolbar{display:none !important}.position-absolute{position:absolute;top:0;right:0;bottom:0;left:0;overflow:auto}.esri-editor__panel-content{padding-block:10px !important}";
 const EditCardStyle0 = editCardCss;
 
 const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLElement {
@@ -20,11 +20,12 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
         this.editsComplete = createEvent(this, "editsComplete", 7);
         this.refreshGraphics = createEvent(this, "refreshGraphics", 7);
         this.enableEditGeometry = false;
+        this.enableSnapping = false;
+        this.graphicIndex = 0;
         this.graphics = undefined;
         this.locale = undefined;
         this.mapView = undefined;
         this.open = false;
-        this.graphicIndex = 0;
         this._editorLoading = false;
         this._translations = undefined;
     }
@@ -201,7 +202,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: 'e181f65e7218ce0350de5dcab9049ff63a5d39c1' }, h("div", { key: '44bf2b5cf31c5acc7f65fb7ec50fd84e77c95470', 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: '97119476aa2a992ccadc1d61119f2640d195e7b1', class: "position-absolute" }, h("div", { key: 'f429decea684a6a22db89de89da3755bdbff19cc', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: '3ea908ef8dadd2f1c85bfac1b344f8b4441b8706', class: loadingClass, label: "", scale: "s" })))));
+        return (h(Host, { key: 'bf9a2cc632deb0cc203f6a2fa837008f8e809482' }, h("div", { key: 'fa2ad6208c2274fe2982b71502d52694e3838162', 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: '98c1d2cb3dce8855b0c792328c893b6947e01f4c', class: "position-absolute" }, h("div", { key: 'ebf21d9145dabcc3b91a4fc44d3a3ae92a6ef5ea', class: tableNodeClass, id: "feature-form", ref: (el) => this._editContainer = el }), h("calcite-loader", { key: 'd3da2a76b0dda07540ca6f65a2f671e825af211a', class: loadingClass, label: "", scale: "s" })))));
     }
     //--------------------------------------------------------------------------
     //
@@ -242,7 +243,8 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
                 layerInfos,
                 visibleElements: {
                     flow: true,
-                    snappingControls: false
+                    settingsMenu: this.enableSnapping,
+                    snappingControls: this.enableSnapping,
                 },
                 container
             });
@@ -265,6 +267,9 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
                     this.open = false;
                 }
             });
+            if (!this.enableSnapping) {
+                container.classList.add("hide-editor-toolbar");
+            }
             // had issues with destroy before adding like this
             this._editContainer.appendChild(container);
             this.editorInitialized.emit(this._editor);
@@ -314,11 +319,12 @@ const EditCard = /*@__PURE__*/ proxyCustomElement(class EditCard extends HTMLEle
     static get style() { return EditCardStyle0; }
 }, [0, "edit-card", {
         "enableEditGeometry": [4, "enable-edit-geometry"],
+        "enableSnapping": [4, "enable-snapping"],
+        "graphicIndex": [2, "graphic-index"],
         "graphics": [1040],
         "locale": [1],
         "mapView": [16],
         "open": [1028],
-        "graphicIndex": [2, "graphic-index"],
         "_editorLoading": [32],
         "_translations": [32]
     }, [[8, "featureSelectionChange", "featureSelectionChange"]], {

package/dist/components/feature-details2.js

@@ -24,6 +24,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
         this.addComment = createEvent(this, "addComment", 7);
         this.likeOrDislikeClicked = createEvent(this, "likeOrDislikeClicked", 7);
         this.featureSelectionChange = createEvent(this, "featureSelectionChange", 7);
+        this.enableSnapping = false;
         this.mapView = undefined;
         this.graphics = undefined;
         this.reportingOptions = undefined;
@@ -178,12 +179,12 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
     render() {
         //When related features found show comments list of only those features else comments list will be empty
         const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';
-        return (h("calcite-panel", { key: '577f06f7bc41875b38e07a44f3c734ccc839e596', "full-height": true }, h("info-card", { key: 'e815f75d02bcdfe9cc11796c913be2a6c2bfecd2', allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
-            h("div", { key: '16d0af6b0e75b595573bd0816744f03d9d6dec37', class: "buttons-container" }, this._commentsAvailable &&
-                h("calcite-button", { key: '550b3af830911a1437fa3e967492666ec8c5a2e4', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
-                h("calcite-button", { key: '741848445c2083f4c0a3d9464cd810deee4a1218', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
-                h("calcite-button", { key: '4d5e8ae279559dbf981b1b91238706adbd6ebeef', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
-            h("feature-list", { key: '0daad9b37b13a05afc4b8a3a6eca70a7356afd8f', class: "height-full", locale: this.locale, mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showFullTitle: this.showFullCommentTitle, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
+        return (h("calcite-panel", { key: '9fea2f56281419fd95720cd6b0f7369017d975b0', "full-height": true }, h("info-card", { key: 'ae9f7a316ba49b59dbbfaeb011aa3475b70f809b', allowEditing: false, enableSnapping: this.enableSnapping, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, locale: this.locale, mapView: this.mapView, onSelectionChanged: (e) => { this.featureSelectionChange.emit(e.detail); }, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el }), (this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) &&
+            h("div", { key: '7da88cf71d12c05321895a04d8e4039d74a466e9', class: "buttons-container" }, this._commentsAvailable &&
+                h("calcite-button", { key: 'ebc7b32a69c551fe8e2a8dd10d69cde8b9078e4f', appearance: "transparent", iconEnd: "speech-bubble", kind: "neutral", onClick: () => { this.addComment.emit(); }, scale: 'm' }, this._relatedFeaturesOIDs.length), this._likeFieldAvailable &&
+                h("calcite-button", { key: 'ef43f47829ebb6b04dbaaf7a20ee9848d9c21c87', appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onLikeButtonClick.bind(this), scale: 'm' }, this._likeCount ?? this._selectedGraphic.attributes[this._likeField] ?? 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { key: '64651be363c2d1a5083002dcad4bff4d040a396a', appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", loading: this._updating, onClick: this.onDislikeButtonClick.bind(this), scale: 'm' }, this._disLikeCount ?? this._selectedGraphic.attributes[this._dislikeField] ?? 0)), this.relatedTableId && this._commentsAvailable &&
+            h("feature-list", { key: 'fff5e1ce72310a5a41b2223578165011026e1b8c', class: "height-full", locale: this.locale, mapView: this.mapView, onFeatureSelect: (e) => { this.commentSelect.emit(e.detail); }, pageSize: 5, ref: el => this._commentsList = el, selectedLayerId: this.relatedTableId, showErrorWhenNoFeatures: false, showFullTitle: this.showFullCommentTitle, showInitialLoading: false, showUserImageInList: this.showUserImageInCommentsList, textSize: "small", whereClause: commentsListWhereClause })));
     }
     /**
      * Load esri javascript api modules
@@ -457,6 +458,7 @@ const FeatureDetails = /*@__PURE__*/ proxyCustomElement(class FeatureDetails ext
     }; }
     static get style() { return FeatureDetailsStyle0; }
 }, [0, "feature-details", {
+        "enableSnapping": [4, "enable-snapping"],
         "mapView": [16],
         "graphics": [16],
         "reportingOptions": [16],