@esri/solutions-components 0.10.30 → 0.10.31

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

@@ -62,7 +62,6 @@ export class CrowdsourceReporter {
         this._filterActive = false;
         this._flowItems = [];
         this._hasValidLayers = false;
-        this._loadingFeatureDetails = undefined;
         this._mapInfo = undefined;
         this._reportSubmitted = false;
         this._selectedLayerName = undefined;
@@ -220,6 +219,10 @@ export class CrowdsourceReporter {
      * FilterInitState: filter's init state
      */
     _filterInitState;
+    /**
+     * string: Previous selected layer id
+     */
+    _prevSelectedLayerId;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -320,7 +323,7 @@ export class CrowdsourceReporter {
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '198fe34894f73b66ac15c4f75b05e3159586a392' }, this._reportSubmitted && h("calcite-alert", { key: '2c07a26c0fce4f5b66a2245850f7fca6e7cc2333', "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: 'f3269fd5bc315913f25795fc4dda47d83de7166f', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '974254aa4eec7166ce23c9513633174b26d45a4d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f0e27267cb6bdc626340185ff3af5c8527c5755c', slot: "title" }, this._translations.error), h("div", { key: 'ce443229655784ecc106ef4f90375a0d2ba14679', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '8094e9db5856630b6dbbd4f37de35afc8fc0cab9', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '9fea022654934c6b58064f71e6c7cb59e4429732', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '21cd17c9a43553c40427759070ec5f7d86bcb471', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '82ca845385e34740ab2af082a5338a851ad0c006', slot: "title" }, this._translations.error), h("div", { key: '9dd641fe9e78e83387a266df51b8f709409bd332', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '1977a4e41c0f222385585f0a0a6c19a99432846b' }, h("calcite-shell", { key: '67d0771f744f5ba427cef2b453dee3470d2fe5bc', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: 'bb2f79258038360e5c0b894ce5a21dcdd41d0ce4' }, this._reportSubmitted && h("calcite-alert", { key: 'aa244cd93326c8817b851d2465c7b9c453117ad2', "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: '25d6d6bd01ee8dc260bce41ea6c43eafa609292e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '06851f2f8cabebd0e953c31bdddfdeac363a4e6e', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f0d73a00a8150a78c48cc09e8901ad7dcb438e90', slot: "title" }, this._translations.error), h("div", { key: '0747a85bbf4936a28dd85a9ea0e8b416f70ee7cf', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '55017090c066ad4e12023315bde39e8c7fa67091', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'cb63168c1fe507b7b93ac4f58d5283ad0d09b34b', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '36b551428b32c7d93f4d04639504bfe326bbc9c8', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '2e9865c5611f4960bb622f75f386a489abcbb484', slot: "title" }, this._translations.error), h("div", { key: 'ebdf339d63369e18b1c68867cdffb9bd40f52766', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'a08980aead377e11697e96e77aa514ed66dc9613' }, h("calcite-shell", { key: '6d96e769ece33073870f2b8f1a7ef6a44006c3f0', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -453,18 +456,29 @@ export class CrowdsourceReporter {
         this._filterActive = false;
         this._filterUrlParams = null;
         this._filterInitState = null;
-        void this._featureList.refresh();
+        if (this._featureList) {
+            await this._featureList.refresh();
+        }
+        if (this._layerList) {
+            await this._layerList.refresh();
+        }
     }
     /**
      * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
      * @protected
      */
-    _handleFilterUpdate() {
+    async _handleFilterUpdate() {
+        this._showLoadingIndicator = true;
         //if filter are applied the url params will be generated
         //set the filter active state based on the length of applied filters
         this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
         this._filterUrlParams = this._filterList.urlParams.getAll('filter');
-        void this._featureList.refresh();
+        this._filterInitState = await this._filterList.getFilterInitState();
+        await this._featureList.refresh();
+        if (this._layerList) {
+            await this._layerList.refresh();
+        }
+        this._showLoadingIndicator = false;
     }
     /**
      * Get the feature layer list
@@ -531,7 +545,6 @@ export class CrowdsourceReporter {
      */
     backFromCreateFeaturePanel() {
         if (this._createFeature) {
-            void this._createFeature.close();
             void this.updateNonVisibleLayersOnMap(false);
         }
         //on back form will be closed, so update the form state
@@ -552,7 +565,6 @@ export class CrowdsourceReporter {
      */
     backFromCreateRelatedFeaturePanel() {
         if (this._createRelatedFeature) {
-            void this._createRelatedFeature.close();
             this._showSubmitCancelButton = false;
         }
         //on back form will be closed, so update the form state
@@ -609,9 +621,6 @@ export class CrowdsourceReporter {
      * @protected
      */
     async navigateToHomePage() {
-        if (this._createFeature) {
-            void this._createFeature.close();
-        }
         if (this._layerList) {
             void this._layerList.refresh();
         }
@@ -633,6 +642,10 @@ export class CrowdsourceReporter {
         if (evt.detail.layerId && evt.detail.layerName) {
             await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
+        // reset the applied filter when switching to another layer
+        if (this._selectedLayerId !== this._prevSelectedLayerId && this._filterActive) {
+            await this.resetFilter();
+        }
         void this.updateNonVisibleLayersOnMap(true);
         // get the form template elements to pass in create-feature to create a LEVELID field in feature-form
         this._getFormElements();
@@ -692,27 +705,33 @@ export class CrowdsourceReporter {
             await this.loadFeatureFromURLParams();
         }
     }
-    /**On click of layer list item show feature list
+    /**
+     * On click of layer list item show feature list
      * @param evt Event which has details of selected layerId and layerName
      * @protected
      */
-    displayFeaturesList(evt) {
+    async displayFeaturesList(evt) {
         this._updatedSorting = {
             field: '',
             order: 'desc'
         };
-        this._filterActive = false;
         this._updatedSortOption = "sortNewest";
-        void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
+        // reset the applied filter when switching to another layer
+        if (this._selectedLayerId !== this._prevSelectedLayerId && this._filterActive) {
+            await this.resetFilter();
+        }
+        this._prevSelectedLayerId = this._selectedLayerId;
     }
     /**
-     * On back from filter panel get the filter's init state
+     * Reset's the applied filter
      * @protected
      */
-    async backFromFilterPanel() {
-        this._filterInitState = await this._filterList.getFilterInitState();
-        this.backFromSelectedPanel();
+    async resetFilter() {
+        const prevLayer = await getLayerOrTable(this.mapView, this._prevSelectedLayerId);
+        prevLayer.definitionExpression = this._filterInitState.initDefExpressions[this._prevSelectedLayerId];
+        void this._handleFilterListReset();
     }
     /**
      * On back from selected panel navigate to the previous panel
@@ -773,10 +792,14 @@ export class CrowdsourceReporter {
      */
     async getRelatedTable() {
         const selectedLayer = this._currentFeature.layer;
-        const allRelatedTableIds = selectedLayer.relationships.map(a => a.relatedTableId);
         const allTables = await getAllTables(this.mapView);
-        const relatedTables = allTables.filter((table) => selectedLayer.url === table.url && allRelatedTableIds.includes(table.layerId));
-        this._relatedTable = relatedTables[0];
+        selectedLayer.relationships.some((relationship) => {
+            const relatedTables = allTables.filter((table) => selectedLayer.url === table.url && table.layerId === relationship.relatedTableId);
+            if (relatedTables && relatedTables.length > 0) {
+                this._relatedTable = relatedTables[0];
+                return true;
+            }
+        });
     }
     /**
      * Show loading indicator while updating the feature details component
@@ -834,7 +857,7 @@ export class CrowdsourceReporter {
      */
     getFilterPanel() {
         const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
-        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) }, 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", onClick: () => { void this._filterList?.forceReset(); }, 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: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), 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.backFromSelectedPanel.bind(this) }, 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: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.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: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -1827,7 +1850,6 @@ export class CrowdsourceReporter {
             "_filterActive": {},
             "_flowItems": {},
             "_hasValidLayers": {},
-            "_loadingFeatureDetails": {},
             "_mapInfo": {},
             "_reportSubmitted": {},
             "_selectedLayerName": {},

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

@@ -228,14 +228,12 @@ export class FeatureDetails {
             const allTables = await getAllTables(this.mapView);
             let relatedTable = null;
             let validRelationshipId = null;
-            allTables.some((table) => {
-                if (selectedLayer.url === table.url) {
-                    const relationship = selectedLayer.relationships.filter(a => table.layerId === a.relatedTableId);
-                    if (relationship?.length) {
-                        relatedTable = table;
-                        validRelationshipId = relationship[0].id;
-                        return true;
-                    }
+            selectedLayer.relationships.some((relationship) => {
+                const relatedTables = allTables.filter((table) => selectedLayer.url === table.url && table.layerId === relationship.relatedTableId);
+                if (relatedTables && relatedTables.length > 0) {
+                    relatedTable = relatedTables[0];
+                    validRelationshipId = relationship.id;
+                    return true;
                 }
             });
             this.relatedTableId = relatedTable?.id ?? '';

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

@@ -132,7 +132,7 @@ export class FeatureList {
      * @returns Promise that resolves when the operation is complete
      */
     async refresh(maintainPageState) {
-        if (maintainPageState) {
+        if (maintainPageState && this._pagination) {
             const event = {
                 target: {
                     startItem: this._pagination.startItem
@@ -183,9 +183,9 @@ export class FeatureList {
      * Renders the component.
      */
     render() {
-        return (h("calcite-panel", { key: '3ba64729e3b56d8912424b65187fee65c5ed079f', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: 'd18959827b6f7feec0a42605ab93ee1147a3ddfc', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
-            h("calcite-notice", { key: '507e0031a5fb5a78b1d61bb4e893e4d9a314e207', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: '640c9e8ab31fea285f6db4199a5ff4d917a4feec', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: 'daa9fd622f3c97dad878854b70509e8cafcdea50', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
-            h("div", { key: 'b30411c22825e9ec631235e243e726d3fa2244e4', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'b3ee14ca6cde66bc45124b4de73fa019ffe634f8', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
+        return (h("calcite-panel", { key: 'fc2cc60231efb7fc4a05d3ade0bad6a3dd649b8e', "full-height": true, "full-width": true }, this._isLoading && h("calcite-loader", { key: '43c8176c2aaf0cc7f36a9f1ff477f53890cfcf2d', label: "", scale: "m" }), this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading &&
+            h("calcite-notice", { key: 'dff1bb7207397ded8a557b61e9185ea788520441', class: "error-msg", icon: "feature-details", kind: "info", open: true }, h("div", { key: 'c1dd4e7fb8398c4317270b50eba7e6270fd7051b', slot: "message" }, this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg)), h("calcite-list", { key: '49019c011e8667d193f566826644b0693b0fb6f9', "selection-appearance": "border", "selection-mode": "none" }, !this._isLoading && this._featureItems.length > 0 && this._featureItems), this._featuresCount > this.pageSize &&
+            h("div", { key: '12e767a001c4dffec7e771d12b772fb43bbf9b0f', class: "width-full", slot: "footer" }, h("calcite-pagination", { key: 'd6a8a9eac72fe7217eda926f46baedcb4e6d5859', class: "pagination", "full-width": true, onCalcitePaginationChange: this.pageChanged.bind(this), "page-size": this.pageSize, ref: el => this._pagination = el, "start-item": "1", "total-items": this._featuresCount }))));
     }
     //--------------------------------------------------------------------------
     //
@@ -359,10 +359,10 @@ export class FeatureList {
             let userInfo;
             let featureSymbol;
             if (this.showUserImageInList) {
-                const creatorField = this._selectedLayer.editFieldsInfo?.creatorField.toLowerCase();
+                const creatorField = this._selectedLayer.editFieldsInfo?.creatorField;
                 // if feature's creator field is present then only we can fetch the information of user
                 if (creatorField) {
-                    userInfo = await this.getUserInformation(feature, creatorField);
+                    userInfo = await this.getUserInformation(feature);
                 }
             }
             if (this.showFeatureSymbol) {
@@ -414,21 +414,27 @@ export class FeatureList {
         const popupTitleClass = this.textSize === 'small' ? 'feature-list-popup-title-small' : 'feature-list-popup-title';
         const popupTitlePaddingClass = this.showUserImageInList || this.showFeatureSymbol ? 'feature-list-popup-title-padding-reduced' : 'feature-list-popup-title-padding';
         return (h("calcite-list-item", { onCalciteListItemSelect: (e) => { void this.featureClicked(e, selectedFeature); }, onMouseLeave: () => { void this.clearHighlights(); }, onMouseOver: () => { void this.onFeatureHover(selectedFeature); }, value: oId }, this.showUserImageInList &&
-            h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, id: userInfo?.id, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl }), this.showFeatureSymbol &&
+            h("calcite-avatar", { class: 'profile-img', "full-name": userInfo?.fullName, scale: "m", slot: "content-start", thumbnail: userInfo?.userProfileUrl, userId: userInfo?.id, username: userInfo?.fullName ? userInfo.username : undefined }), this.showFeatureSymbol &&
             h("div", { class: 'feature-symbol', ref: (el) => el && el.appendChild(featureSymbol), slot: "content-start" }), h("div", { class: `${popupTitleClass} ${popupTitlePaddingClass}`, slot: "content-start" }, popupTitle), this._likeFieldAvailable &&
             h("div", { class: "like-container", id: oId.concat("like"), slot: "content-end" }, h("span", null, this._abbreviatedLikeCount), h("calcite-icon", { icon: "thumbs-up", scale: 's' }), h("calcite-tooltip", { overlayPositioning: "fixed", placement: "top", "reference-element": oId.concat("like") }, formattedLikeCount)), h("calcite-icon", { flipRtl: true, icon: "chevron-right", scale: "s", slot: "content-end" })));
     }
     /**
      *
      * @param feature Each individual feature instance to be listed
-     * @param creatorField Feature's creator field from the layer
      * @returns user information
      * @protected
      */
-    async getUserInformation(feature, creatorField) {
-        const userToken = this.mapView.map.portalItem.portal?.credential?.token;
+    async getUserInformation(feature) {
+        let creatorField = this._selectedLayer.editFieldsInfo?.creatorField;
+        if (feature.attributes.hasOwnProperty(creatorField.toLowerCase())) {
+            creatorField = creatorField.toLowerCase();
+        }
+        else if (feature.attributes.hasOwnProperty(creatorField.toUpperCase())) {
+            creatorField = creatorField.toUpperCase();
+        }
         //get the user information
         let url = `${this.esriConfig.portalUrl}/sharing/rest/community/users/${feature.attributes[creatorField]}?f=json&returnUserLicensedItems=true`;
+        const userToken = this.mapView.map.portalItem.portal?.credential?.token;
         if (userToken) {
             url += `&token=${userToken}`;
         }

package/dist/components/card-manager2.js

@@ -184,7 +184,6 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
      */
     async _backFromCreateFeature() {
         if (this._createFeature) {
-            await this._createFeature.close();
             this._showCreateFeatureComponent = false;
             this.backFromCreateWorkFlow.emit();
         }
@@ -195,7 +194,6 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
      * @protected
      */
     _featureCreated() {
-        void this._createFeature.close();
         this._showCreateFeatureComponent = false;
         this._showSubmitBtn = false;
         this._isFeatureCreated = true;

package/dist/components/create-feature2.js

@@ -11,7 +11,7 @@ import { d as defineCustomElement$3 } from './icon.js';
 import { d as defineCustomElement$2 } from './loader.js';
 import { d as defineCustomElement$1 } from './notice.js';
 
-const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 14px 20px 14px}.display-none{display:none !important}.hide-map{height:1%;visibility:hidden}.show-map{padding:10px !important;position:absolute;bottom:0;width:calc(100% - 22px);height:50%}.notice-msg{padding:10px;width:calc(100% - 20px)}.esri-editor__panel-content{padding-block:10px !important}";
+const createFeatureCss = ":host{display:block}.esri-editor__panel-toolbar{display:none !important}.esri-editor__panel-content{padding-block:0px !important}.esri-editor .esri-item-list__group__header{display:none !important}.esri-editor__panel-content__section .esri-widget__heading{display:none !important}.esri-editor .esri-item-list__filter-container--sticky{padding-block:0px !important;padding-inline:10px !important}.search-widget{width:92% !important;margin:5px 14px 20px 14px}.display-none{display:none !important}.hide-map{height:1%;visibility:hidden}.show-map{padding:10px !important;position:absolute;bottom:0;width:calc(100% - 22px)}.notice-msg{padding:10px;width:calc(100% - 20px)}.esri-editor__panel-content{padding-block:10px !important}@media only screen and (max-width: 600px){.esri-editor__panel-content{padding-block:0 !important;min-height:0 !important}}";
 const CreateFeatureStyle0 = createFeatureCss;
 
 const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature extends HTMLElement {
@@ -117,6 +117,14 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
      * __esri.FeatureLayer: selected feature layer;
      */
     _selectedLayer;
+    /**
+     * HTMLDivElement: refrence for search div element
+     */
+    _searchDiv;
+    /**
+     * HTMLCalciteNoticeElement: calcite notice refrence element
+     */
+    _calciteNotice;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -164,15 +172,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
-    /**
-     * Destroy the Editor widget instance
-     * @returns Promise that resolves when the operation is complete
-     */
-    async close() {
-        if (this._editor) {
-            this._editor.destroy();
-        }
-    }
     /**
      * Submit the created feature
      * @returns Promise that resolves when the operation is complete
@@ -240,6 +239,26 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
     async componentDidLoad() {
         await this.init();
     }
+    /**
+     * Called after each render
+     * Used to adjust the map top in case of mobile
+     */
+    componentDidRender() {
+        // update the map top according to space occupied by notice msg and search
+        if (this.isMobile) {
+            // get the height of notice, search and add 80px(editor msg) height to adjust the map top
+            const top = this._calciteNotice.offsetHeight + this._searchDiv.offsetHeight + 80;
+            this._mapViewContainer.style.top = `${top}px`;
+        }
+    }
+    /**
+     * StencilJS: Called every time the component is disconnected from the DOM,
+     */
+    disconnectedCallback() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+    }
     /**
      * Renders the component.
      */
@@ -257,7 +276,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         else if (this._currentPage === 'featureForm') {
             guidingMsg = this._translations.provideDetailsMsg;
         }
-        return (h(Fragment, { key: '204a51ffceb754c202bcf93fda18560e6101ca65' }, showGuidingMsg && h("calcite-notice", { key: '329daebd157ea330d746508dcf2198fa1d56f852', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '995898cf5e0ea57d41571429758baf6c459097af', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '59bc1bce0936df76a432d75a5a4613d89203571c', class: loaderClass, label: "", scale: "s" }), h("div", { key: '814e3e6c63dc1880f235d2ffc5aa8ca9e22eb51e', class: featureFormClass, id: "feature-form" }), this.enableSearch && h("div", { key: '22146ca4dd94f57dddf80a04b4aeaa92fc0d3b81', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref" }), h("div", { key: '8863876b3393fdcd4d2cdf254289f80d9fd16ef1', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
+        return (h(Fragment, { key: '89634bf5707ea8390416d3087bfbe4e747bafcd7' }, showGuidingMsg && h("calcite-notice", { key: '4269224c2904f29060081f6cb8f383f1cf8d741d', class: "notice-msg", icon: "lightbulb", kind: "success", open: true, ref: el => this._calciteNotice = el }, h("div", { key: 'ecc3cca85c81d1cb7ab7cdc89b99e31afcb55f76', slot: "message" }, guidingMsg)), h("calcite-loader", { key: '34e492c0c469b39d4cfbcda17c4ba196ccb39eb8', class: loaderClass, label: "", scale: "s" }), h("div", { key: 'b2073ef4b6124b54038de34798cdf83337626023', class: featureFormClass, id: "feature-form" }), this.enableSearch &&
+            h("div", { key: 'cd13e98b6a40d5d89d271b5785f797e9bfc19900', class: `search-widget ${showSearchWidget} ${featureFormClass}`, id: "search-widget-ref", ref: el => this._searchDiv = el }), h("div", { key: '2575b2d20f7713b05a2024e77452af93eb64e147', class: `${mobileMapClass}`, ref: (el) => { this._mapViewContainer = el; } })));
     }
     //--------------------------------------------------------------------------
     //
@@ -305,7 +325,8 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         this._mapViewContainer.classList.add('hide-map');
         await new this.MapView({
             map: this.mapView.map,
-            container: this._mapViewContainer
+            container: this._mapViewContainer,
+            zoom: this.mapView.zoom
         }).when((view) => {
             // update the mapView and load all widgets
             this._updatedMapView = view;
@@ -678,7 +699,6 @@ const CreateFeature = /*@__PURE__*/ proxyCustomElement(class CreateFeature exten
         "_editorLoading": [32],
         "_currentPage": [32],
         "_translations": [32],
-        "close": [64],
         "submit": [64],
         "refresh": [64]
     }, undefined, {

package/dist/components/create-related-feature2.js

@@ -90,14 +90,6 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
     //  Methods (public)
     //
     //--------------------------------------------------------------------------
-    /**
-     * Destroy the Editor widget instance
-     */
-    async close() {
-        if (this._editor) {
-            this._editor.destroy();
-        }
-    }
     /**
      * Submit the comment
      */
@@ -164,7 +156,7 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
     }
     render() {
         const loaderClass = this._editorLoading ? "" : "display-none";
-        return (h(Fragment, { key: '707536f66fc4de711e3f519a8869507bf2d6f566' }, this.showGuidingMsg && h("calcite-notice", { key: 'c3fb5a706d250b6db7dac9ab20b949a81eeb0c5f', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: 'a9aa0a8137a256240c5e8d0c77dc364b31b5b2a1', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: '4e1295a1a867da2c9f1fe4428bdc115bd8643f75', class: loaderClass, label: "", scale: "s" })));
+        return (h(Fragment, { key: '641b4f6f51bce04b6263a1d7dc72a31839df970d' }, this.showGuidingMsg && h("calcite-notice", { key: '1a6e577bcc0632a7bc69dd411a692062a7ad176e', class: "notice-msg", icon: "lightbulb", kind: "success", open: true }, h("div", { key: '55c5836314fcca69a259be3a36e34c527edcabf3', slot: "message" }, this._translations.provideDetailsMsg)), h("calcite-loader", { key: '18c5603a4a75c67a160a71caa15e94790f66d60b', class: loaderClass, label: "", scale: "s" })));
     }
     /**
      * StencilJS: Called once just after the component is fully loaded and the first render() occurs.
@@ -172,6 +164,14 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
     async componentDidLoad() {
         await this.init();
     }
+    /**
+     * StencilJS: Called every time the component is disconnected from the DOM,
+     */
+    disconnectedCallback() {
+        if (this._editor) {
+            this._editor.destroy();
+        }
+    }
     /**
      * Display editor widget to create the new feature
      * @protected
@@ -355,7 +355,6 @@ const CreateRelatedFeature = /*@__PURE__*/ proxyCustomElement(class CreateRelate
         "showGuidingMsg": [4, "show-guiding-msg"],
         "_editorLoading": [32],
         "_translations": [32],
-        "close": [64],
         "submit": [64]
     }, undefined, {
         "mapView": ["mapViewWatchHandler"],

package/dist/components/crowdsource-reporter.js

@@ -101,7 +101,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._filterActive = false;
         this._flowItems = [];
         this._hasValidLayers = false;
-        this._loadingFeatureDetails = undefined;
         this._mapInfo = undefined;
         this._reportSubmitted = false;
         this._selectedLayerName = undefined;
@@ -254,6 +253,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * FilterInitState: filter's init state
      */
     _filterInitState;
+    /**
+     * string: Previous selected layer id
+     */
+    _prevSelectedLayerId;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -354,7 +357,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     render() {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h(Host, { key: '198fe34894f73b66ac15c4f75b05e3159586a392' }, this._reportSubmitted && h("calcite-alert", { key: '2c07a26c0fce4f5b66a2245850f7fca6e7cc2333', "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: 'f3269fd5bc315913f25795fc4dda47d83de7166f', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '974254aa4eec7166ce23c9513633174b26d45a4d', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f0e27267cb6bdc626340185ff3af5c8527c5755c', slot: "title" }, this._translations.error), h("div", { key: 'ce443229655784ecc106ef4f90375a0d2ba14679', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '8094e9db5856630b6dbbd4f37de35afc8fc0cab9', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: '9fea022654934c6b58064f71e6c7cb59e4429732', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '21cd17c9a43553c40427759070ec5f7d86bcb471', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '82ca845385e34740ab2af082a5338a851ad0c006', slot: "title" }, this._translations.error), h("div", { key: '9dd641fe9e78e83387a266df51b8f709409bd332', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: '1977a4e41c0f222385585f0a0a6c19a99432846b' }, h("calcite-shell", { key: '67d0771f744f5ba427cef2b453dee3470d2fe5bc', "content-behind": true }, this._getReporter()))));
+        return (h(Host, { key: 'bb2f79258038360e5c0b894ce5a21dcdd41d0ce4' }, this._reportSubmitted && h("calcite-alert", { key: 'aa244cd93326c8817b851d2465c7b9c453117ad2', "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: '25d6d6bd01ee8dc260bce41ea6c43eafa609292e', slot: "message" }, this.reportSubmittedMessage ? this.reportSubmittedMessage : this._translations.submitMsg)), this._featureCreationFailedErrorMsg && h("calcite-alert", { key: '06851f2f8cabebd0e953c31bdddfdeac363a4e6e', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._featureCreationFailedErrorMsg = ""; }, open: true, placement: "top" }, h("div", { key: 'f0d73a00a8150a78c48cc09e8901ad7dcb438e90', slot: "title" }, this._translations.error), h("div", { key: '0747a85bbf4936a28dd85a9ea0e8b416f70ee7cf', slot: "message" }, this._featureCreationFailedErrorMsg)), this._commentSubmitted && h("calcite-alert", { key: '55017090c066ad4e12023315bde39e8c7fa67091', "auto-close": true, class: 'report-submitted ' + themeClass, icon: "check-circle", kind: "success", label: "", onCalciteAlertClose: () => { this._commentSubmitted = false; }, open: true, placement: "top" }, h("div", { key: 'cb63168c1fe507b7b93ac4f58d5283ad0d09b34b', slot: "message" }, this.commentSubmittedMessage || this._translations.commentSubmittedMsg)), this._addingCommentFailed && h("calcite-alert", { key: '36b551428b32c7d93f4d04639504bfe326bbc9c8', "auto-close": true, class: themeClass, icon: "x-octagon", kind: "danger", label: "", onCalciteAlertClose: () => { this._addingCommentFailed = false; }, open: true, placement: "top" }, h("div", { key: '2e9865c5611f4960bb622f75f386a489abcbb484', slot: "title" }, this._translations.error), h("div", { key: 'ebdf339d63369e18b1c68867cdffb9bd40f52766', slot: "message" }, this._translations.addingCommentFailedMsg)), h("div", { key: 'a08980aead377e11697e96e77aa514ed66dc9613' }, h("calcite-shell", { key: '6d96e769ece33073870f2b8f1a7ef6a44006c3f0', "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -487,18 +490,29 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this._filterActive = false;
         this._filterUrlParams = null;
         this._filterInitState = null;
-        void this._featureList.refresh();
+        if (this._featureList) {
+            await this._featureList.refresh();
+        }
+        if (this._layerList) {
+            await this._layerList.refresh();
+        }
     }
     /**
      * Check if the layers definitionExpression has been modified and update the feature list depending on the applied filters
      * @protected
      */
-    _handleFilterUpdate() {
+    async _handleFilterUpdate() {
+        this._showLoadingIndicator = true;
         //if filter are applied the url params will be generated
         //set the filter active state based on the length of applied filters
         this._filterActive = this._filterList.urlParams.getAll('filter').length > 0;
         this._filterUrlParams = this._filterList.urlParams.getAll('filter');
-        void this._featureList.refresh();
+        this._filterInitState = await this._filterList.getFilterInitState();
+        await this._featureList.refresh();
+        if (this._layerList) {
+            await this._layerList.refresh();
+        }
+        this._showLoadingIndicator = false;
     }
     /**
      * Get the feature layer list
@@ -565,7 +579,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     backFromCreateFeaturePanel() {
         if (this._createFeature) {
-            void this._createFeature.close();
             void this.updateNonVisibleLayersOnMap(false);
         }
         //on back form will be closed, so update the form state
@@ -586,7 +599,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     backFromCreateRelatedFeaturePanel() {
         if (this._createRelatedFeature) {
-            void this._createRelatedFeature.close();
             this._showSubmitCancelButton = false;
         }
         //on back form will be closed, so update the form state
@@ -643,9 +655,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      * @protected
      */
     async navigateToHomePage() {
-        if (this._createFeature) {
-            void this._createFeature.close();
-        }
         if (this._layerList) {
             void this._layerList.refresh();
         }
@@ -667,6 +676,10 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         if (evt.detail.layerId && evt.detail.layerName) {
             await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         }
+        // reset the applied filter when switching to another layer
+        if (this._selectedLayerId !== this._prevSelectedLayerId && this._filterActive) {
+            await this.resetFilter();
+        }
         void this.updateNonVisibleLayersOnMap(true);
         // get the form template elements to pass in create-feature to create a LEVELID field in feature-form
         this._getFormElements();
@@ -726,27 +739,33 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
             await this.loadFeatureFromURLParams();
         }
     }
-    /**On click of layer list item show feature list
+    /**
+     * On click of layer list item show feature list
      * @param evt Event which has details of selected layerId and layerName
      * @protected
      */
-    displayFeaturesList(evt) {
+    async displayFeaturesList(evt) {
         this._updatedSorting = {
             field: '',
             order: 'desc'
         };
-        this._filterActive = false;
         this._updatedSortOption = "sortNewest";
-        void this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
+        await this.setSelectedLayer(evt.detail.layerId, evt.detail.layerName);
         this._flowItems = [...this._flowItems, "feature-list"];
+        // reset the applied filter when switching to another layer
+        if (this._selectedLayerId !== this._prevSelectedLayerId && this._filterActive) {
+            await this.resetFilter();
+        }
+        this._prevSelectedLayerId = this._selectedLayerId;
     }
     /**
-     * On back from filter panel get the filter's init state
+     * Reset's the applied filter
      * @protected
      */
-    async backFromFilterPanel() {
-        this._filterInitState = await this._filterList.getFilterInitState();
-        this.backFromSelectedPanel();
+    async resetFilter() {
+        const prevLayer = await getLayerOrTable(this.mapView, this._prevSelectedLayerId);
+        prevLayer.definitionExpression = this._filterInitState.initDefExpressions[this._prevSelectedLayerId];
+        void this._handleFilterListReset();
     }
     /**
      * On back from selected panel navigate to the previous panel
@@ -807,10 +826,14 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     async getRelatedTable() {
         const selectedLayer = this._currentFeature.layer;
-        const allRelatedTableIds = selectedLayer.relationships.map(a => a.relatedTableId);
         const allTables = await getAllTables(this.mapView);
-        const relatedTables = allTables.filter((table) => selectedLayer.url === table.url && allRelatedTableIds.includes(table.layerId));
-        this._relatedTable = relatedTables[0];
+        selectedLayer.relationships.some((relationship) => {
+            const relatedTables = allTables.filter((table) => selectedLayer.url === table.url && table.layerId === relationship.relatedTableId);
+            if (relatedTables && relatedTables.length > 0) {
+                this._relatedTable = relatedTables[0];
+                return true;
+            }
+        });
     }
     /**
      * Show loading indicator while updating the feature details component
@@ -868,7 +891,7 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
      */
     getFilterPanel() {
         const currentLayersExpressions = this.layerExpressions ? this.layerExpressions.filter((exp) => exp.id === this._selectedLayerId) : [];
-        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) }, 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", onClick: () => { void this._filterList?.forceReset(); }, 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: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), 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.backFromSelectedPanel.bind(this) }, 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: () => { void this._filterList?.forceReset(); }, width: "full" }, this._translations.resetFilter), h("calcite-button", { appearance: "outline", class: "footer-button", onClick: this.backFromSelectedPanel.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: currentLayersExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, resetBtn: false, resetFiltersOnDisconnect: false, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Returns the calcite-flow item for feature details
@@ -1289,7 +1312,6 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "_filterActive": [32],
         "_flowItems": [32],
         "_hasValidLayers": [32],
-        "_loadingFeatureDetails": [32],
         "_mapInfo": [32],
         "_reportSubmitted": [32],
         "_selectedLayerName": [32],