@esri/solutions-components 0.11.17 → 0.11.19

package/dist/esm/consent-manager.entry.js

@@ -3,13 +3,13 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, g as getElement, h as h$1, H as Host } from './index-3702583a.js';
-import { g as getLocaleComponentStrings } from './locale-aa656a2c.js';
+import { r as registerInstance, c as createEvent, g as getElement, h as h$1, H as Host } from './index-df5db8e9.js';
+import { g as getLocaleComponentStrings } from './locale-15e42305.js';
 import { g as getDefaultExportFromCjs, c as commonjsGlobal } from './_commonjsHelpers-089957fe.js';
-import { d as defineProperty, _ as _asyncToGenerator$1, a as _defineProperty$2 } from './asyncToGenerator-96b2368d.js';
-import { _ as _typeof$1, t as t$2 } from './typeof-ef2a007d.js';
+import { d as defineProperty, _ as _asyncToGenerator$1, a as _defineProperty$2 } from './asyncToGenerator-e51717ed.js';
+import { _ as _typeof$1, t as t$2 } from './typeof-a3e780e1.js';
 import { r as request, _ as __assign, g as getPortalUrl, u as updateItem } from './update-ad0b88fa.js';
-import './esri-loader-c6842c6b.js';
+import './esri-loader-d10d860d.js';
 
 function shouldDisableTracking(options = {}) {
     const { disabled, portal } = options;
@@ -8487,62 +8487,20 @@ const ConsentManager = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.consentGranted = createEvent(this, "consentGranted", 7);
+        this.amazonAppId = undefined;
+        this.amazonAppName = undefined;
+        this.amazonUserPoolID = undefined;
+        this.amazonVersion = undefined;
+        this.firstUseVar = undefined;
+        this.locale = undefined;
+        this.measurementIds = undefined;
+        this.portal = undefined;
+        this._open = undefined;
+        this._translations = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * string: The app id for the amazon tracking instance
-     */
-    amazonAppId;
-    /**
-     * string: The app name for the amazon tracking instance
-     */
-    amazonAppName;
-    /**
-     * string: The user pool id for the amazon tracking instance
-     */
-    amazonUserPoolID;
-    /**
-     * string: The version for the amazon tracking instance
-     */
-    amazonVersion;
-    /**
-     * string: The name to use for the variable stored in the browsers local storge that
-     * will keep track of the users choice for consent
-     */
-    firstUseVar;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * string[]: Any ids for the analytics configured to receive events from the telemety instance
-     */
-    measurementIds;
-    /**
-     * esri/portal/Portal: https://developers.arcgis.com/javascript/latest/api-reference/esri-portal-Portal.html
-     */
-    portal;
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true the alert should be opened
-     */
-    _open;
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------

package/dist/esm/create-feature_4.entry.js

@@ -3,15 +3,15 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment, H as Host } from './index-3702583a.js';
-import { l as loadModules, g as getLocaleComponentStrings } from './locale-aa656a2c.js';
-import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils-a854e298.js';
-import { P as PopupUtils } from './popupUtils-1314cb13.js';
-import './esri-loader-c6842c6b.js';
+import { r as registerInstance, c as createEvent, g as getElement, h, F as Fragment, H as Host } from './index-df5db8e9.js';
+import { l as loadModules, g as getLocaleComponentStrings } from './locale-15e42305.js';
+import { a as getAllLayers, g as getLayerOrTable } from './mapViewUtils-9da9be1c.js';
+import { P as PopupUtils } from './popupUtils-b71abb01.js';
+import './esri-loader-d10d860d.js';
 import './_commonjsHelpers-089957fe.js';
 import './interfaces-659e3836.js';
-import './downloadUtils-22a8f2d8.js';
-import './typeof-ef2a007d.js';
+import './downloadUtils-d04d4095.js';
+import './typeof-a3e780e1.js';
 import './index-d88c3eb6.js';
 import './solution-resource-30a29505.js';
 import './restHelpersGet-a7fda344.js';
@@ -29,78 +29,24 @@ const CreateFeature = class {
         this.editingAttachment = createEvent(this, "editingAttachment", 7);
         this.progressStatus = createEvent(this, "progressStatus", 7);
         this.modeChanged = createEvent(this, "modeChanged", 7);
+        this.mapView = undefined;
+        this.selectedLayerId = undefined;
+        this.customizeSubmit = false;
+        this.locale = undefined;
+        this.searchConfiguration = undefined;
+        this.isMobile = undefined;
+        this.floorLevel = undefined;
+        this.formElements = undefined;
+        this.enableSearch = false;
+        this.showGuidingMsg = true;
+        this.showGuidingMsgWhileDrawing = true;
+        this._editorLoading = false;
+        this._currentPage = "templatePicker";
+        this._translations = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
-     */
-    mapView;
-    /**
-     * string: Layer id of the feature layer in which the new feature is to be created
-     */
-    selectedLayerId;
-    /**
-     * boolean: Set this to true when have a custom submit button in the app.
-     * This will hide the header and footer elements of the editor and user needs to execute the submit method manually.
-     */
-    customizeSubmit = false;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * ISearchConfiguration: Configuration details for the Search widget
-     */
-    searchConfiguration;
-    /**
-     * boolean: When true the application will be in mobile mode, controls the mobile or desktop view
-     */
-    isMobile;
-    /**
-     * string: selected floor level
-     */
-    floorLevel;
-    /**
-     * string: selected floor level
-     */
-    formElements;
-    /**
-     * boolean: When true the Search box will be displayed
-     */
-    enableSearch = false;
-    /**
-     * boolean: When true the notice message with the current state should be shown
-     */
-    showGuidingMsg = true;
-    /**
-     * boolean: When false the notice message at drawing page will be hidden
-     */
-    showGuidingMsgWhileDrawing = true;
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true a loading indicator will be shown while the editor loads
-     */
-    _editorLoading = false;
-    /**
-     * ICurrentPage: specifies the current page
-     */
-    _currentPage = "templatePicker";
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
@@ -764,65 +710,21 @@ const DeleteButton = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.editsComplete = createEvent(this, "editsComplete", 7);
+        this.deleteDialog = undefined;
+        this.buttonType = "button";
+        this.disabled = false;
+        this.icon = undefined;
+        this.ids = [];
+        this.layer = undefined;
+        this.locale = undefined;
+        this._confirmDelete = false;
+        this._deleteEndabled = false;
+        this._supportsDelete = undefined;
+        this._translations = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * calcite-dialog: Use this prop when using the button within a parent like a dropdown that would constrain the dialog and that is not desired
-     */
-    deleteDialog;
-    /**
-     * ButtonType (button | action): Support usage as action or button
-     */
-    buttonType = "button";
-    /**
-     * boolean: This overrides internal enable/disable logic that is based on checks if the layer supports delete
-     */
-    disabled = false;
-    /**
-     * string: The icon to display in the component
-     */
-    icon;
-    /**
-     * number[]: The ids that would be deleted
-     */
-    ids = [];
-    /**
-     * esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
-     */
-    layer;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true the user will be asked to confirm the delete operation
-     */
-    _confirmDelete = false;
-    /**
-     * boolean: When true the user can delete the current features
-     */
-    _deleteEndabled = false;
-    /**
-     * boolean: When true the layer supports delete and a button will be returned
-     */
-    _supportsDelete;
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
@@ -946,53 +848,18 @@ const EditCard = class {
         this.editorInitialized = createEvent(this, "editorInitialized", 7);
         this.editsComplete = createEvent(this, "editsComplete", 7);
         this.refreshGraphics = createEvent(this, "refreshGraphics", 7);
+        this.enableEditGeometry = false;
+        this.graphics = undefined;
+        this.locale = undefined;
+        this.mapView = undefined;
+        this.open = false;
+        this.graphicIndex = 0;
+        this._editorLoading = false;
+        this._translations = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When true the geometry of the current feature will be editable
-     */
-    enableEditGeometry = false;
-    /**
-     * esri/Graphic[]: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
-     */
-    graphics;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
-     */
-    mapView;
-    /**
-     * When true the component is displayed
-     */
-    open = false;
-    /**
-     * The index of the current graphic
-     */
-    graphicIndex = 0;
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true a loading indicator will be shown while the editor loads
-     */
-    _editorLoading = false;
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
@@ -1282,88 +1149,30 @@ const InfoCard = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
         this.popupClosed = createEvent(this, "popupClosed", 7);
+        this.clearSelection = createEvent(this, "clearSelection", 7);
         this.selectionChanged = createEvent(this, "selectionChanged", 7);
+        this.enableEditGeometry = false;
+        this.graphics = undefined;
+        this.isLoading = false;
+        this.isMobile = undefined;
+        this.mapView = undefined;
+        this.allowEditing = true;
+        this.highlightEnabled = true;
+        this.locale = undefined;
+        this.paginationEnabled = true;
+        this.position = 'absolute';
+        this.showCloseBtn = false;
+        this._alertOpen = false;
+        this._count = "";
+        this._editRecordOpen = false;
+        this._mobileTitle = "";
+        this._showListView = false;
+        this._translations = undefined;
+        this._navigatedToRelatedFeature = undefined;
     }
     get el() { return getElement(this); }
     //--------------------------------------------------------------------------
     //
-    //  Properties (public)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * When true the geometry of the current feature will be editable
-     */
-    enableEditGeometry = false;
-    /**
-     * esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
-     */
-    graphics;
-    /**
-     * boolean: when true a loading indicator will be shown
-     */
-    isLoading = false;
-    /**
-     * When true the component will render an optimized view for mobile devices
-     */
-    isMobile;
-    /**
-     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
-     */
-    mapView;
-    /**
-     * boolean: If true will show edit button
-     */
-    allowEditing = true;
-    /**
-     * boolean: If true will highlights the features on map using Features Widget
-     */
-    highlightEnabled = true;
-    /**
-     * string: Locale to use for translation of stings in the UI
-     */
-    locale;
-    /**
-     * boolean: If true will show the pagination for multiple features
-     */
-    paginationEnabled = true;
-    /**
-     * string: Set the position of the feature info
-     */
-    position = 'absolute';
-    //--------------------------------------------------------------------------
-    //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    /**
-     * boolean: When true a alert will be shown to indicate a problem or confirm the current action
-     */
-    _alertOpen = false;
-    /**
-     * string: Current index of total string
-     * This value is not displayed but will force a render if it changes
-     */
-    _count = "";
-    /**
-     * When true the add record modal will be displayed
-     */
-    _editRecordOpen = false;
-    /**
-     * When isMobile is true we will handle the display of the title so
-     * we can display beside a custom back button
-     */
-    _mobileTitle = "";
-    /**
-     * When true the features list view will be displayed
-     */
-    _showListView = false;
-    /**
-     * Contains the translations for this component.
-     * All UI strings should be defined here.
-     */
-    _translations;
-    //--------------------------------------------------------------------------
-    //
     //  Properties (protected)
     //
     //--------------------------------------------------------------------------
@@ -1397,6 +1206,10 @@ const InfoCard = class {
      * 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
@@ -1406,6 +1219,14 @@ const InfoCard = class {
      * 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();
     }
     /**
@@ -1496,6 +1317,10 @@ const InfoCard = class {
      * 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
      */
@@ -1522,7 +1347,10 @@ const InfoCard = class {
      * 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];
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -1556,13 +1384,16 @@ const InfoCard = class {
         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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -1622,7 +1453,7 @@ const InfoCard = class {
                     container: this._featuresNodeId,
                     visibleElements: {
                         actionBar: false,
-                        closeButton: false,
+                        closeButton: this.showCloseBtn,
                         heading: !this.isMobile
                     }
                 });
@@ -1638,11 +1469,26 @@ const InfoCard = class {
                         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();