@esri/solutions-components 0.11.17 → 0.11.18

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,10 +777,12 @@ 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: () => void this._closeFilter(), comboboxOverlayPositioning: "fixed", layerExpressions: this._layerExpressions, onFilterListReset: () => {
-                this._handleFilterListReset();
-                void this._mapCard.resetFilter();
-            }, onFilterUpdate: () => void this._updateFilter(), ref: (el) => this._filterList = el, view: this._mapView, zoomBtn: false })));
+        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 })));
     }
     /**
      * Store any filters for the current layer.
@@ -771,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;
@@ -785,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();
     }
     /**
@@ -803,16 +826,6 @@ const CrowdsourceManager$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceM
             void this._layerTable.closeFilter();
         }
     }
-    /**
-     * Update the filter state
-     *
-     * @protected
-     */
-    async _updateFilter() {
-        const active = this._filterList.filterCount > 0;
-        await this._layerTable?.filterUpdate(active);
-        await this._mapCard.updateFilterState(active);
-    }
     /**
      * Update the component layout when its size changes
      *
@@ -1010,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/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],