@esri/solutions-components 0.11.16 → 0.11.18

package/dist/components/card-manager2.js

@@ -191,7 +191,7 @@ const CardManager = /*@__PURE__*/ proxyCustomElement(class CardManager extends H
         const heading = isTable ? this._translations.createRecord : this._translations.createFeature;
         const guideMsg = this.customInfoText ? this.customInfoText : this.selectingFeatureFromMap ? this._translations.selectFeaturesFromMapToStart : this._translations.selectFeaturesToStart;
         const showCreateFeatureOrRecordBtn = this.enableCreateFeatures && this.layer?.capabilities?.operations?.supportsAdd;
-        return (h(Host, { key: '5557aa4d80b859335e38db3f4255f4a61d00560f' }, h("div", { key: '6756e3314fc3444a982010a3cfa702d77f05f316', class: "overflow-auto height-full" }, h("calcite-shell", { key: '715eb7ed692a1d00347d44f20df370cf9a91ded5', class: "position-relative " + featuresClass }, h("div", { key: 'baf4e97c1884f477e4077a6dc8e59d98c77593a4', class: "position-static z-index-500" }, h("info-card", { key: 'e2ed262e2ebdf9b79ddd725f073f13d6a17909d2', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView }))), h("calcite-shell", { key: '536b1dec2a539191f30b648f70a6bdcd447a6d6c', class: "position-relative " + messageClass }, h("calcite-panel", { key: '285eb9f07fcaf53c23ccecb44d68ec5bb85c9528' }, h("div", { key: 'dd180d0c21823d5cb3007c6078c9daa81a487101', class: "padding-1" }, h("calcite-notice", { key: 'b7d4ffb57b912c0424bef1c828608fd41d12d561', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: '642339477aa8b9e1cba106dcb410ef293363311f', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '835562b5a083e7fc6f558d19787d5fa2680c2938', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: '5aeb16a8b0e6e693b7fddd64bf1ec2fe6553f133', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: '20487f672aa32832c3b6a576976ad1bb12116814' }, h("calcite-panel", { key: '9cc5d827a20afbf3381be0739cc3cc6713af8d66', heading: heading }, h("calcite-action", { key: 'c441e24039efd9ec28471e6b66bfea2a4b5a8454', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: 'a858b7a2fb25e257b6c92ca5719fb3a7cc8aedbb', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
+        return (h(Host, { key: '5557aa4d80b859335e38db3f4255f4a61d00560f' }, h("div", { key: '6756e3314fc3444a982010a3cfa702d77f05f316', class: "overflow-auto height-full" }, h("calcite-shell", { key: '715eb7ed692a1d00347d44f20df370cf9a91ded5', class: "position-relative " + featuresClass }, h("div", { key: 'baf4e97c1884f477e4077a6dc8e59d98c77593a4', class: "position-static z-index-500" }, h("info-card", { key: '0b9b30182fbc3482e9edf49b79f68aec8cf86adc', enableEditGeometry: this.enableEditGeometry, graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, locale: this.locale, mapView: this.mapView, showCloseBtn: true }))), h("calcite-shell", { key: '94b646061956a78dec4f96d9d1d9dedc5ad6aee7', class: "position-relative " + messageClass }, h("calcite-panel", { key: '00b660d474234f8156f3d4c627626f5891754051' }, h("div", { key: 'adb0732ff59c4fdedb19367a32ad9e3e060ddb60', class: "padding-1" }, h("calcite-notice", { key: 'a2c88bd4a0827111b0d1f3056ae571b47e5b380b', icon: this.selectingFeatureFromMap ? "map" : "table", iconFlipRtl: true, open: true }, h("div", { key: 'bffc2630de3f0376b6ea5827c89f65dc605a5356', slot: "message" }, guideMsg))), !this.isMobile && showCreateFeatureOrRecordBtn && h("calcite-button", { key: '08bef5c20d6b60e17abcfc9fc19d7d1eb5d04b1c', disabled: !this.layer, onClick: () => this._createFeatureBtnClicked(), slot: "footer", width: "full" }, isTable ? this._translations.createRecord : this._translations.createFeature))), h("calcite-shell", { key: '833a8de60b491008006034c1696fcb29f1bb6a08', class: "position-relative " + createFeatureClass }, h("calcite-flow-item", { key: 'dd2ae4509e4bec5a90f33484f8a28f422c0eeee4' }, h("calcite-panel", { key: '8fa68650f1933a88cdaf1fee8391cf433b7b54e9', heading: heading }, h("calcite-action", { key: '2b205887ff8703e01ef356cae09ce5d15dbec7c6', class: "back-button hydrated", icon: "chevron-left", onClick: this._backFromCreateFeature.bind(this), scale: "s", slot: "header-actions-start", text: "" }), this.getEditorComponent(), this._showSubmitBtn && h("calcite-button", { key: '0977a3974583266f6d90e18c8fbbc3e18f803983', appearance: "solid", class: "footer-top-button footer-button", onClick: () => void this._createFeature.submit(), slot: "footer", width: "full" }, this._translations.create)))))));
     }
     /**
    * Returns the editor component for adding feature

package/dist/components/crowdsource-manager.js

@@ -26,7 +26,7 @@ import { d as defineCustomElement$4 } from './map-picker2.js';
 import { d as defineCustomElement$3 } from './map-search2.js';
 import { d as defineCustomElement$2 } from './map-tools2.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-right{border-right:2px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.position-sticky{position:sticky}.height-50{height:50%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-51{height:calc(100% - 51px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}.z-index-1{z-index:1 !important}.filter-content-space{--calcite-dialog-content-space:0px}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-right{border-right:2px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.position-absolute{position:absolute}.position-sticky{position:sticky}.height-50{height:50%}.top-51{top:51px}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-51{height:calc(100% - 51px)}.display-none{display:none !important}.adjusted-height-50_25{height:calc(50% + 25px)}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}.z-index-0{z-index:0 !important}.z-index-1{z-index:1 !important}.filter-content-space{--calcite-dialog-content-space:0px}.background-dark{background:var(--calcite-color-background)}.filter-extent-container{display:flex;justify-content:space-between;align-items:center;padding:10px 0}.filter-modal-buttons{display:flex;padding:12px;gap:10px}.filter-extent-message{align-items:center;display:flex;gap:5px}";
 const CrowdsourceManagerStyle0 = crowdsourceManagerCss;
 
 const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceManager extends HTMLElement {
@@ -282,6 +282,10 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * boolean: if true panel will be in loading state
      */
     _isLoading = true;
+    /**
+     * boolean: if true map extent filter is applied
+     */
+    _mapExtentFilterChecked;
     //--------------------------------------------------------------------------
     //
     //  Properties (protected)
@@ -348,6 +352,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      */
     appLayoutWatchHandler(newAppLayout, oldAppLayout) {
         if (newAppLayout !== oldAppLayout) {
+            this._layerTable.validateTableUpdate(newAppLayout === 'splitView');
             this._setActiveLayout(newAppLayout);
             // update the layer if table selected while switching to map view
             if (this.appLayout === "mapView" && this._layer?.isTable) {
@@ -433,6 +438,7 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             }
             this._layer = layer;
             this._initLayerExpressions();
+            this._handleFilterListReset();
             this._isLoading = false;
         });
     }
@@ -469,7 +475,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: '24b7324257b94560153db83dd6b29730bef8f38f' }, h("calcite-shell", { key: 'c7a445ffdf9fa59c7bd1aff125a77e811f6ce736', class: "position-relative" }, h("calcite-panel", { key: '81598a858cfbdfcb6346bc3efa6eb55699d2c5ff', 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: 'ad9bee93d8478b4bdbfe93716471d3270c274b35' }, h("calcite-shell", { key: '2a8a2d5c316238db649fff0b769e0c578d395391', class: "position-relative" }, h("calcite-panel", { key: '15c1e4159de917fdd60412bf588857157af4431c', 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
@@ -750,6 +756,20 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _deleteModal() {
         return (h("delete-dialog", { id: "deleteDialogId", ids: this._deleteIds, layer: this._layer, locale: this.locale, onDeleteDialogClose: () => this._deleteDialogOpen = false, open: this._deleteDialogOpen }));
     }
+    /**
+     * Shows the map extent filter
+     * @returns map extent filter
+     * @protected
+     */
+    _mapExtentFilter() {
+        const showButtons = this._layerExpressions?.length === 0;
+        return (h("calcite-panel", null, h("div", null, h("calcite-block", { class: this.theme === "dark" ? "background-dark" : "", heading: '', "menu-placement": 'bottom-end', open: true }, h("div", { class: "filter-extent-container" }, h("div", { class: "filter-extent-message" }, h("span", null, this._translations.filterByExtentMsg, " "), h("calcite-icon", { icon: "information", id: "filter-message-info", scale: "s" }), h("calcite-tooltip", { overlayPositioning: "fixed", placement: "top", "reference-element": "filter-message-info" }, this._translations.filterByExtentTooltipMsg)), h("calcite-switch", { checked: this._mapExtentFilterChecked, onCalciteSwitchChange: (e) => {
+                const active = e.target.checked || this._filterList?.filterCount > 0;
+                void this._layerTable.filterUpdate(active, e.target.checked);
+                this._mapExtentFilterChecked = e.target.checked;
+            }, scale: "m" }))), showButtons &&
+            h("div", { class: "filter-modal-buttons", slot: "footer" }, h("calcite-button", { appearance: "outline", onClick: this._handleFilterListReset.bind(this), width: "full" }, this._translations.Resetfilter), h("calcite-button", { onClick: this._closeFilter.bind(this), width: "full" }, this._translations.close)))));
+    }
     /**
      * Show filter component in modal
      *
@@ -757,11 +777,9 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
      * @protected
      */
     _filterModal() {
-        return (h("calcite-dialog", { class: "filter-content-space", heading: this._translations?.filter?.replace("{{title}}", this._layer?.title), id: "solutions-filter-dialog", kind: "brand", modal: true, onCalciteDialogClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => {
-                this._handleFilterListReset();
-                void this._mapCard.resetFilter();
-            }, onFilterUpdate: async () => {
-                const active = this._filterList.filterCount > 0;
+        const showFilterModal = this._layerExpressions?.length > 0;
+        return (h("calcite-dialog", { class: "filter-content-space", heading: this._translations?.filter?.replace("{{title}}", this._layer?.title), id: "solutions-filter-dialog", kind: "brand", modal: true, onCalciteDialogClose: () => void this._closeFilter(), open: this._filterOpen, widthScale: "s" }, this._mapExtentFilter(), showFilterModal && h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: this._handleFilterListReset.bind(this), onFilterUpdate: async () => {
+                const active = this._filterList.filterCount > 0 || this._mapExtentFilterChecked;
                 await this._layerTable?.filterUpdate(active);
                 await this._mapCard.updateFilterState(active);
             }, ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false })));
@@ -775,7 +793,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
     _initLayerExpressions() {
         const layerExpressions = this._mapInfo?.filterConfig?.layerExpressions;
         this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer?.id) : [];
-        this._filterList.layerExpressions = this._layerExpressions;
         this._layerExpressions.filter(lyrExp => {
             return lyrExp.expressions.filter(exp => exp.active).length > 0;
         }).length > 0;
@@ -789,11 +806,13 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         this._filterOpen = !this._filterOpen;
     }
     /**
-     * Reset the filter active prop
+     * Reset the applied filters
      *
      * @protected
      */
     _handleFilterListReset() {
+        this._mapExtentFilterChecked = false;
+        void this._mapCard.resetFilter();
         void this._layerTable.filterReset();
     }
     /**
@@ -1004,7 +1023,8 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
         "_filterOpen": [32],
         "_showInformationHeader": [32],
         "_layerIds": [32],
-        "_isLoading": [32]
+        "_isLoading": [32],
+        "_mapExtentFilterChecked": [32]
     }, [[8, "featureSelectionChange", "featureSelectionChange"], [8, "popupClosed", "popupClosed"], [8, "layoutChanged", "layoutChanged"], [8, "mapChanged", "mapChanged"], [8, "layerSelectionChange", "layerSelectionChange"], [8, "showDelete", "showDelete"], [8, "idsFound", "idsFound"]], {
         "appLayout": ["appLayoutWatchHandler"],
         "enableZoom": ["enableZoomWatchHandler"],

package/dist/components/crowdsource-reporter.js

@@ -1040,7 +1040,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: () => this._handleFilterListReset(), onFilterUpdate: () => 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

package/dist/components/info-card2.js

@@ -19,6 +19,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         super();
         this.__registerHost();
         this.popupClosed = createEvent(this, "popupClosed", 7);
+        this.clearSelection = createEvent(this, "clearSelection", 7);
         this.selectionChanged = createEvent(this, "selectionChanged", 7);
     }
     get el() { return this; }
@@ -67,6 +68,10 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * string: Set the position of the feature info
      */
     position = 'absolute';
+    /**
+     * boolean: If true show close button on the feature info
+     */
+    showCloseBtn = false;
     //--------------------------------------------------------------------------
     //
     //  State (internal)
@@ -99,6 +104,10 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * All UI strings should be defined here.
      */
     _translations;
+    /**
+     * boolean: When true user has been navigated to related feature
+     */
+    _navigatedToRelatedFeature;
     //--------------------------------------------------------------------------
     //
     //  Properties (protected)
@@ -134,6 +143,10 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
      */
     reactiveUtils;
+    /**
+     * __esri.Graphic: Related feature selected from the features widget
+     */
+    _relatedFeature;
     //--------------------------------------------------------------------------
     //
     //  Watch handlers
@@ -143,6 +156,14 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * Watch for changes to the graphic and update the feature widget
      */
     async graphicsWatchHandler() {
+        // if user has been navigated to related record and graphics is changed then close the feature widget and then set graphics to avoid blank popup issue
+        // https://github.com/Esri/solutions-components/issues/1113
+        if (this._navigatedToRelatedFeature && this._features) {
+            this._features.clear();
+            this._features.close();
+            this._count = "";
+            this._navigatedToRelatedFeature = false;
+        }
         await this.setGraphics();
     }
     /**
@@ -233,6 +254,10 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * Emitted on demand when the popup is closed
      */
     popupClosed;
+    /**
+     * Emitted on demand when close button is clicked
+     */
+    clearSelection;
     /**
      * Emitted on demand when the selected index changes
      */
@@ -259,7 +284,10 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
      * Refresh the info-card graphics
      */
     async refreshGraphics(evt) {
-        this.graphics = [...evt.detail];
+        // if if user is not navigated to related feature then only update the graphics otherwise the related feature will shown instead of selected feature
+        if (!this._navigatedToRelatedFeature) {
+            this.graphics = [...evt.detail];
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -293,13 +321,16 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         const featureNodeClass = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute";
         const editClass = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none";
         const editButtonClass = (!this.isLoading && this._editRecordOpen) || this._showListView ? "display-none" : "";
-        const nextBackDisabled = this._features?.features?.length < 2;
+        const nextBackDisabled = this._features?.features?.length < 2 || this._navigatedToRelatedFeature;
         const nextBackClass = this.isMobile ? "display-none" : "";
         const id = this._features?.selectedFeature?.getObjectId();
         const ids = parseInt(id?.toString(), 10) > -1 ? [id] : [];
         const deleteEnabled = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete;
-        return (h(Host, { key: '66070d48134f89d9cf132572fe1adf790b6d3ec6' }, h("calcite-shell", { key: 'b77248dce176df940d8b0c347154b73738a5576d', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'c1638ca8320a0ae12a9ccd1fd8841efde4236ba5', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: 'cf5ee3be5c0ea3be36205dcf7c0747461802a5f1', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '6fbfa6947fa0fdb1b14a03217da60f07ecff2e1b', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
-            h("div", { key: 'fdcb078c3b3f183b06dc3a48d27fee46e3a4fffa', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: '7193bec80a40f353d24e5d327d99d94a2c5ff356', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: '228a9691edd916a5d644cb19db24898cdf7cab3b', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '5c696df370bcf230d3fc06523ec3cb9d96f2fe2b' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: 'e1b829a888913af6a9d777a2df0d65571ac3bec1', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '8746737a103266efe64a8f80c2359f9e170586d5' }, h("calcite-button", { key: 'ac6fc23dc2831608cc9c86fe384c0a927cd7d7ac', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: 'd4a1e2753c35e97064ca66d5c30deccd532fb158', placement: "top", "reference-element": "solutions-back" }, h("span", { key: 'caae32b5e32a0d89265293beccef157d227a7600' }, this._translations.back))), h("calcite-action", { key: 'a87f344a06896ad86886815254979793b057e4cd', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '6e6f84ebedb2540edb485fa0789fe8ea67e7188f', class: "pagination-count" }, this._count)), h("div", { key: '6acf22348a508c921865bb4c7e531f9a826a8eed' }, h("calcite-button", { key: 'f1d763e1747cff7e0b6bec08ec4fade3d1582379', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: 'def93e3d1f19b4e6eb3e54c5fbd918fed118cc0c', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'cb9b90a5b3129861b7f58fd0271c6120893dfd53' }, this._translations.next))))), h("edit-card", { key: '524819a6dc64775b88b22aaf24445fd5ebdeae24', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: this._features?.selectedFeatureIndex, graphics: this.graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '394c3b416a5dc94381c8b93afd3308121fbebd81', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'f4868bf3b710d91ed7e3f1e34b846bd408febac0', slot: "title" }, this._translations.editDisabled), h("div", { key: '457b7d0c76bfac52340bec73f5d1d2abbd10f25a', slot: "message" }, this._translations.enableEditing)))));
+        // if user has navigated to the related feature then pass the related feature to the graphics
+        const graphics = this._relatedFeature ? [this._relatedFeature] : this.graphics;
+        const selectedFeatureIndex = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
+        return (h(Host, { key: '9f75eb2e7aba944474e85c34b2abe23982629558' }, h("calcite-shell", { key: '748f9e50cd3aa7a52dd7910b171c0d7f54d09203', style: { position: this.position } }, this._getHeader(), h("calcite-loader", { key: 'feced4d4a66df36958644436acaa53ddabdfc02a', class: loadingClass, label: this._translations.fetchingData }), h("div", { key: '3bb912c80d610a21a5e283c6bd19ab0c63023c45', class: "esri-widget feature-node " + featureNodeClass, id: this._featuresNodeId }), h("div", { key: '479dcbda08f837b32bd19ed7f40856f081e92a6e', class: `${editButtonClass} width-100`, slot: "footer" }, this.allowEditing &&
+            h("div", { key: 'dd78b02ba8506c391aada6c5233691ec9babcfbe', class: "display-flex top-border padding-1-2" }, h("calcite-button", { key: 'c5a807609c60151a433fa9c0055fbfdf20b2935f', appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile && deleteEnabled ? (h("delete-button", { class: "padding-inline-start-1 width-100", id: "solutions-delete", ids: ids, layer: this._layer, locale: this.locale, onEditsComplete: () => this._closePopup() })) : undefined, h("calcite-tooltip", { key: 'a4cd4c77e982e23675ec9eaf08e2135de6c83b65', placement: "bottom", "reference-element": "solutions-edit" }, h("span", { key: '22533608996d1c87b9b04e339506ec01176379b0' }, this._translations.edit)), this.isMobile && deleteEnabled ? (h("calcite-tooltip", { placement: "bottom", "reference-element": "solutions-delete" }, h("span", null, this._translations.delete))) : undefined), this.paginationEnabled && !nextBackDisabled && h("div", { key: '183ff7da57a06de8f5419edf5973f18b41c46097', class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { key: '77e59229d1d516ccdc8f7c5be2f89a5ad9d5004b' }, h("calcite-button", { key: '4b6a6f1f85e9199e14d626ba66b6b319283d0c32', appearance: 'transparent', disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-left", id: "solutions-back", onClick: () => this._back(), width: "full" }), h("calcite-tooltip", { key: '7056c5cb3c790c804194f09f2586864a28dce5e1', placement: "top", "reference-element": "solutions-back" }, h("span", { key: '923fc5425a9faced6952a1b9acff9b7d0f3da286' }, this._translations.back))), h("calcite-action", { key: 'a34bfb4ae71a91373fd476e7b704a6a2f8f23157', class: 'pagination-action', iconFlipRtl: true, onClick: () => this._toggleListView(), scale: "s", text: "", textEnabled: true }, h("span", { key: '101a0fa592af65b540123c835e9031a18671ad8b', class: "pagination-count" }, this._count)), h("div", { key: 'c4f88f464a3091dfc77578470de4f42d05b9f5c7' }, h("calcite-button", { key: 'e4e35e539f0c7e01a31e0047db545d4d334ef2d8', appearance: "transparent", disabled: nextBackDisabled, iconFlipRtl: "both", iconStart: "chevron-right", id: "solutions-next", onClick: () => this._next(), width: "full" }), h("calcite-tooltip", { key: '40244ecf5566fde448b311272d2ee00d70bc531a', placement: "top", "reference-element": "solutions-next" }, h("span", { key: 'db01e2a2b9da9a80f9a25caf49bf8beb872e6ad9' }, this._translations.next))))), h("edit-card", { key: 'cfa193b01b67f7709ea6a491caa0c647c536e9e3', class: editClass, enableEditGeometry: this.enableEditGeometry, graphicIndex: selectedFeatureIndex, graphics: graphics, locale: this.locale, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { key: '709fd6d681d32a03fcf5fba959e81a0153676e26', icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { key: 'bbdd9cc98fcda8ffba294a4322f08468072f6aef', slot: "title" }, this._translations.editDisabled), h("div", { key: 'd07e32e9cd54cc82ff005e7e696e13e1b8bdaa4e', slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -359,7 +390,7 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                     container: this._featuresNodeId,
                     visibleElements: {
                         actionBar: false,
-                        closeButton: false,
+                        closeButton: this.showCloseBtn,
                         heading: !this.isMobile
                     }
                 });
@@ -375,11 +406,26 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
                         this.selectionChanged.emit({ selectedFeature: [this._features.selectedFeature], selectedFeatureIndex: this._features.selectedFeatureIndex });
                     }
                 });
+                this.reactiveUtils.watch(() => this._features.selectedDrillInFeature, (f) => {
+                    if (f) {
+                        this._relatedFeature = f;
+                        this._navigatedToRelatedFeature = true;
+                    }
+                    else {
+                        this._relatedFeature = null;
+                        this._navigatedToRelatedFeature = false;
+                    }
+                });
+                // get the info card node element and emit clear selection while clicking the close button
+                const infoCard = this.el.querySelector('#' + this._featuresNodeId);
+                infoCard.addEventListener('calciteFlowItemClose', () => {
+                    this.clearSelection.emit();
+                });
             }
             else {
                 this._features.view = this.mapView;
                 this._features.visibleElements.actionBar = false;
-                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.closeButton = this.showCloseBtn;
                 this._features.visibleElements.heading = !this.isMobile;
             }
         }) : Promise.resolve();
@@ -483,12 +529,14 @@ const InfoCard = /*@__PURE__*/ proxyCustomElement(class InfoCard extends HTMLEle
         "locale": [1],
         "paginationEnabled": [4, "pagination-enabled"],
         "position": [1],
+        "showCloseBtn": [4, "show-close-btn"],
         "_alertOpen": [32],
         "_count": [32],
         "_editRecordOpen": [32],
         "_mobileTitle": [32],
         "_showListView": [32],
         "_translations": [32],
+        "_navigatedToRelatedFeature": [32],
         "getSelectedFeature": [64],
         "refresh": [64],
         "back": [64],