@esri/solutions-components 0.7.18 → 0.7.20

package/dist/cjs/spatial-ref.cjs.entry.js

@@ -21062,16 +21062,19 @@ const spatialRefCss = ".spatial-ref-container{max-height:200px;margin-bottom:1re
 
 const SpatialRef = class {
     valueChanged(newValue) {
-        this.spatialReferenceChange.emit({
-            oldValue: this.value,
-            newValue: newValue
-        });
         this._spatialRef = this._createSpatialRefDisplay(newValue);
         const searchBox = document.getElementById("calcite-sr-search");
         if (searchBox) {
             searchBox.value = this._srSearchText = "";
         }
         this._clearSelection();
+        if (this._cachedValue !== this.value) {
+            this.spatialReferenceChange.emit({
+                oldValue: this._cachedValue,
+                newValue: this.value
+            });
+            this._cachedValue = this.value;
+        }
     }
     //--------------------------------------------------------------------------
     //
@@ -21084,6 +21087,7 @@ const SpatialRef = class {
         this.defaultWkid = 102100;
         this.disabled = false;
         this.value = this.defaultWkid.toString();
+        this._cachedValue = this.defaultWkid.toString();
         this._spatialRef = undefined;
         this._srSearchText = undefined;
         this._translations = undefined;

package/dist/cjs/styles-c9e1375a.js

@@ -0,0 +1,13 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+'use strict';
+
+const DEFAULT_FONT_FAMILY = "'Avenir Next','Avenir','Helvetica Neue',sans-serif";
+function getFontFamily(fontFamily) {
+  return fontFamily ? fontFamily : DEFAULT_FONT_FAMILY;
+}
+
+exports.getFontFamily = getFontFamily;

package/dist/cjs/{utils-35b31785.js → utils-6c713ba8.js}

@@ -5,7 +5,7 @@
  */
 'use strict';
 
-const locale = require('./locale-9b9d0e94.js');
+const locale = require('./locale-dab3f46a.js');
 const index = require('./index-22bb61da.js');
 
 exports.EInputType = void 0;
@@ -28,6 +28,12 @@ exports.EIcons = void 0;
   EIcons["Copy"] = "copy-to-clipboard";
   EIcons["Breadcrumb"] = "chevron-right";
   EIcons["DefaultIcon"] = "language";
+  EIcons["Title"] = "title";
+  EIcons["Subtitle"] = "subheading";
+  EIcons["Text"] = "text";
+  EIcons["Description"] = "description";
+  EIcons["Button"] = "button";
+  EIcons["String"] = "string";
 })(exports.EIcons || (exports.EIcons = {}));
 exports.ECalciteMode = void 0;
 (function (ECalciteMode) {
@@ -56,15 +62,19 @@ function generateUIData(appSettings, locales) {
   uiData.set('locales', locales);
   uiData.set('translatedLanguageLabels', Object.assign({}, appSettings.translatedLanguageLabels));
   appSettings.content.forEach(contentItem => {
-    var _a;
+    var _a, _b;
     const { type, label, value, uiLocation } = contentItem;
     const setting = existingUIData === null || existingUIData === void 0 ? void 0 : existingUIData.get(contentItem.id);
     uiData.set(contentItem.id, {
-      userLocaleData: { type, label, value },
+      userLocaleData: {
+        type: type !== null && type !== void 0 ? type : null,
+        label: label !== null && label !== void 0 ? label : null,
+        value: value !== null && value !== void 0 ? value : null,
+      },
       expanded: true,
       selected: (_a = setting === null || setting === void 0 ? void 0 : setting['selected']) !== null && _a !== void 0 ? _a : false,
       uiLocation,
-      tip: contentItem === null || contentItem === void 0 ? void 0 : contentItem.tip,
+      tip: (_b = contentItem === null || contentItem === void 0 ? void 0 : contentItem.tip) !== null && _b !== void 0 ? _b : null,
     });
   });
   const settingKeys = appSettings.content.map(contentItem => contentItem.id);

package/dist/collection/components/crowdsource-manager/crowdsource-manager.css

@@ -110,7 +110,6 @@
   height: calc(100% - 50px);
 }
 
-
 .display-none {
   display: none;
 }
@@ -175,3 +174,7 @@
   visibility: hidden;
   height: 0px;
 }
+
+.position-fixed {
+  position: fixed;
+}

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

@@ -28,7 +28,6 @@ export class CrowdsourceManager {
          * MapView.when is not fired when mapView is not currently visible
          */
         this._shouldSetMapView = false;
-        this.classicGrid = false;
         this.defaultCenter = "";
         this.defaultGlobalId = "";
         this.defaultLayer = "";
@@ -49,7 +48,6 @@ export class CrowdsourceManager {
         this.enableBasemap = true;
         this.basemapConfig = undefined;
         this.showNewestFirst = true;
-        this.hideMap = false;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
         this.searchConfiguration = undefined;
@@ -191,7 +189,7 @@ export class CrowdsourceManager {
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this.hideMap, this._hideTable)), this._getFooter())));
+        return (h(Host, null, h("calcite-shell", { class: "position-relative" }, h("calcite-panel", { class: "width-full height-full" }, this._getBody(this._layoutMode, this._panelOpen, this._hideTable)), this._getFooter())));
     }
     /**
      * Called after each render
@@ -237,19 +235,13 @@ export class CrowdsourceManager {
         let icon = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-down" : "chevrons-up") :
-                    (panelOpen ? "chevrons-up" : "chevrons-down");
+                icon = (panelOpen ? "chevrons-up" : "chevrons-down");
                 break;
             case ELayoutMode.VERTICAL:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-right" : "chevrons-left") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
             case ELayoutMode.GRID:
-                icon = this.classicGrid ?
-                    (panelOpen ? "chevrons-up" : "chevrons-down") :
-                    (panelOpen ? "chevrons-left" : "chevrons-right");
+                icon = (panelOpen ? "chevrons-left" : "chevrons-right");
                 break;
         }
         return icon;
@@ -267,11 +259,10 @@ export class CrowdsourceManager {
         let sizeClass = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                sizeClass = `${this._isMobile && this._hideTable ? "height-full" : panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+                sizeClass = `${panelOpen ? "height-1-2 display-grid" : "height-0"} width-full position-relative`;
                 break;
             case ELayoutMode.GRID:
-                sizeClass = this.classicGrid ? `${panelOpen ? "position-relative" : "position-absolute-53"} height-full width-full display-flex` :
-                    `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
+                sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
                 break;
             case ELayoutMode.VERTICAL:
                 sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
@@ -295,9 +286,7 @@ export class CrowdsourceManager {
                 sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
                 break;
             case ELayoutMode.GRID:
-                sizeClass = this.classicGrid ?
-                    `${panelOpen ? "height-full" : "height-53"} position-relative width-full display-flex` :
-                    `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
+                sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
                 break;
             case ELayoutMode.VERTICAL:
                 sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
@@ -310,47 +299,41 @@ export class CrowdsourceManager {
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the parent node that contains the table and map
      * @protected
      */
-    _getBody(layoutMode, panelOpen, hideMap, hideTable) {
-        const contentClass = this.classicGrid && layoutMode === ELayoutMode.GRID && panelOpen ? "display-grid" :
-            layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        return this.classicGrid ? (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getTable(layoutMode, panelOpen, hideTable), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen, hideTable))));
+    _getBody(layoutMode, panelOpen, hideTable) {
+        const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen), this._getTable(layoutMode, panelOpen, hideTable))));
     }
     /**
      * Get the map and card nodes based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
      * @param panelOpen boolean indicates if all panels are open
-     * @param hideMap when true no map is displayed
      *
      * @returns the map node
      * @protected
      */
-    _getMapAndCard(layoutMode, panelOpen, hideMap) {
+    _getMapAndCard(layoutMode, panelOpen) {
         const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen);
-        return this.classicGrid ? (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getCardNode(), this._getMapNode(layoutMode, hideMap))) : (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, hideMap), this._getPopupExpandNode()));
+        return (h("div", { class: `${mapSizeClass} overflow-hidden` }, this._getMapNode(layoutMode, panelOpen), this._getPopupExpandNode()));
     }
     /**
      * Get the map node based for the current layout options
      *
      * @param layoutMode ELayoutMode the current layout mode
-     * @param hideMap when true no map is displayed
+     * @param panelOpen boolean indicates if all panels are open
      *
      * @returns the map node
      * @protected
      */
-    _getMapNode(layoutMode, hideMap) {
+    _getMapNode(layoutMode, panelOpen) {
         var _a;
-        const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
-            layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" : layoutMode === ELayoutMode.GRID && !hideMap ? "" : "visibility-hidden";
-        const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" :
-            this._layoutMode === ELayoutMode.HORIZONTAL && !hideMap ? "" :
-                this._layoutMode === ELayoutMode.HORIZONTAL && this._isMobile && this.hideMap ? "height-0" : "adjusted-height-50";
-        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableMapToolsExpand: true, enableSearch: this.enableSearch, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
+        const mapDisplayClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : layoutMode === ELayoutMode.GRID ? "" : "visibility-hidden";
+        const mapContainerClass = this._layoutMode === ELayoutMode.HORIZONTAL && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
+        return (h("div", { class: `${mapContainerClass} overflow-hidden ${mapDisplayClass}` }, h("map-card", { basemapConfig: this.basemapConfig, class: "width-full", defaultWebmapId: this.defaultWebmap, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: true, hidden: this._expandPopup, homeZoomIndex: 3, homeZoomPosition: "top-left", homeZoomToolsSize: "s", mapInfos: (_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.filter(mapInfo => mapInfo.visible !== false), mapWidgetsIndex: 0, mapWidgetsPosition: "top-right", mapWidgetsSize: "m", stackTools: true, theme: this.theme, toolOrder: ["legend", "search", "fullscreen", "basemap", "floorfilter"] })));
     }
     /**
      * Get the expand node for the popup information
@@ -367,7 +350,8 @@ export class CrowdsourceManager {
         const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 || this._isMobile ? "position-absolute-0" : "position-absolute-50";
         const headerClass = this._isMobile ? "display-none height-0" : "";
         const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `${headerTheme} ${popupNodeClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
+        const containerClass = this._isMobile && this._hideTable ? "position-fixed width-full height-full" : this._isMobile ? "display-none height-0" : "";
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}` }, h("calcite-panel", null, !this._isMobile ? (h("div", { class: `display-flex align-items-center ${headerClass}`, slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information))) : undefined, h("calcite-action", { class: headerClass, disabled: this._tableOnly, icon: icon, id: id, onClick: () => this._togglePopup(), slot: "header-actions-end", text: "" }), !this._tableOnly ? h("calcite-tooltip", { class: themeClass, label: "", placement: "bottom", "reference-element": id }, h("span", null, tooltip)) : undefined, this._getCardNode())));
     }
     /**
      * Toggle the popup information
@@ -403,10 +387,8 @@ export class CrowdsourceManager {
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
         const id = "toggle-layout";
-        const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL || this.classicGrid ? "horizontal" : "vertical";
-        const toggleSlot = this.classicGrid && layoutMode !== ELayoutMode.VERTICAL ? "footer" :
-            this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
-                layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
+        const toggleLayout = layoutMode === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
+        const toggleSlot = layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
         return (h("calcite-shell", { class: `${tableSizeClass} ${tableClass} border-bottom` }, !this._isMobile ? (h("calcite-action-bar", { class: "border-sides", expandDisabled: true, layout: toggleLayout, slot: toggleSlot }, h("calcite-action", { class: "toggle-node", icon: icon, id: id, onClick: () => this._toggleLayout(), text: "" }), h("calcite-tooltip", { label: tooltip, placement: "bottom", "reference-element": id }, h("span", null, tooltip)))) : undefined, h("div", { class: `width-full height-full position-relative` }, h("layer-table", { defaultGlobalId: hasMapAndLayer ? this._defaultGlobalId : undefined, defaultLayerId: hasMapAndLayer ? this.defaultLayer : "", defaultOid: hasMapAndLayer && !this.defaultGlobalId ? this._defaultOid : undefined, enableAutoRefresh: this.enableAutoRefresh, enableCSV: this.enableCSV, enableColumnReorder: this.enableColumnReorder, enableInlineEdit: this.enableInlineEdit, enableShare: this.enableShare, isMobile: this._isMobile, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, ref: (el) => this._layerTable = el, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
     }
@@ -431,7 +413,6 @@ export class CrowdsourceManager {
      * @param show when true the map, popup, and table will be displayed
      */
     showHideMapPopupAndTable(show) {
-        this.hideMap = show;
         this._expandPopup = false;
         this._hideTable = show;
         this._hideFooter = show;
@@ -511,24 +492,6 @@ export class CrowdsourceManager {
     }
     static get properties() {
         return {
-            "classicGrid": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "boolean: when true the grid will display like the previous manager app with the table across the top"
-                },
-                "attribute": "classic-grid",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "defaultCenter": {
                 "type": "string",
                 "mutable": false,
@@ -892,24 +855,6 @@ export class CrowdsourceManager {
                 "reflect": false,
                 "defaultValue": "true"
             },
-            "hideMap": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "boolean: when true no map is displayed for the app"
-                },
-                "attribute": "hide-map",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "mapInfos": {
                 "type": "unknown",
                 "mutable": false,

package/dist/collection/components/edit-card/edit-card.js

@@ -150,8 +150,7 @@ export class EditCard {
                 view: this.mapView,
                 layerInfos,
                 visibleElements: {
-                    snappingControls: false,
-                    sketchTooltipControls: false
+                    snappingControls: false
                 },
                 container
             });

package/dist/collection/components/info-card/info-card.js

@@ -21,6 +21,7 @@
 import { Host, h } from "@stencil/core";
 import { getLocaleComponentStrings } from "../../utils/locale";
 import { loadModules } from "../../utils/loadModules";
+import { PopupUtils } from "../../utils/popupUtils";
 export class InfoCard {
     constructor() {
         this.graphics = undefined;
@@ -51,6 +52,7 @@ export class InfoCard {
         if (this.graphics.length > 0) {
             const featureLayer = (_a = this.graphics[0]) === null || _a === void 0 ? void 0 : _a.layer;
             this._editEnabled = featureLayer.editingEnabled && featureLayer.capabilities.operations.supportsUpdate;
+            this._mobileTitle = await this._popupUtils.getPopupTitle(this.graphics[0]);
             this._features.open({
                 features: this.graphics
             });
@@ -59,6 +61,7 @@ export class InfoCard {
             this._features.clear();
             this._features.close();
         }
+        this._count = this._getCount();
     }
     /**
      * Watch for changes to the isMobile prop then init the Features widget
@@ -95,6 +98,14 @@ export class InfoCard {
     async closeEdit() {
         this._editRecordOpen = false;
     }
+    /**
+     * Reset key properties when the layer selection changes
+     */
+    async layerSelectionChange() {
+        this._showListView = false;
+        this._features.viewModel.featureMenuOpen = false;
+        this._features.close();
+    }
     /**
      * Refresh the info-card graphics
      */
@@ -114,6 +125,7 @@ export class InfoCard {
     async componentWillLoad() {
         await this._initModules();
         await this._getTranslations();
+        this._popupUtils = new PopupUtils();
     }
     /**
      * Renders the component.
@@ -127,7 +139,7 @@ export class InfoCard {
         const nextBackDisabled = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
         const nextBackClass = this.isMobile ? "display-none" : "";
         const shellClass = this.isMobile && !this._editRecordOpen ? "padding-top-46" : "";
-        return (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile ? (h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-cancel" }, h("span", null, this._translations.cancel))) : undefined), h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._getCount(), textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
+        return (h(Host, null, this.isMobile && !this._editRecordOpen ? (h("calcite-panel", null, h("calcite-action", { class: "end-border", icon: "chevron-left", iconFlipRtl: true, onClick: () => this._closePopup(), scale: "s", slot: "header-actions-start", text: "" }), h("span", { class: "font-bold", slot: "header-content" }, this._mobileTitle))) : undefined, h("calcite-shell", { class: shellClass }, h("calcite-loader", { class: loadingClass, label: this._translations.fetchingData }), h("div", { class: "esri-widget " + featureNodeClass, id: "features-node" }), h("div", { class: `${editButtonClass} width-100`, slot: "footer" }, h("div", { class: "display-flex top-border padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), this.isMobile ? (h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-cancel", onClick: () => this._closePopup(), width: "full" }, this._translations.cancel)) : undefined, h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit)), this.isMobile ? (h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-cancel" }, h("span", null, this._translations.cancel))) : undefined), h("div", { class: `display-flex padding-1-2 button-container top-border ${nextBackClass}` }, h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-back", onClick: () => this._back(), width: "full" }, this._translations.back), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-back" }, h("span", null, this._translations.back))), h("div", null, h("calcite-action", { icon: "list", onClick: () => this._toggleListView(), scale: "s", text: this._count, textEnabled: true })), h("div", { class: "min-width-100" }, h("calcite-button", { appearance: "outline", disabled: nextBackDisabled, id: "solutions-next", onClick: () => this._next(), width: "full" }, this._translations.next), h("calcite-tooltip", { label: "", placement: "top", "reference-element": "solutions-next" }, h("span", null, this._translations.next))))), h("edit-card", { class: editClass, graphicIndex: (_c = this._features) === null || _c === void 0 ? void 0 : _c.selectedFeatureIndex, graphics: this.graphics, mapView: this.mapView, open: this._editRecordOpen }), h("calcite-alert", { icon: "layer-broken", kind: "warning", label: "", onCalciteAlertClose: () => this._alertClosed(), open: this._alertOpen, placement: "top" }, h("div", { slot: "title" }, this._translations.editDisabled), h("div", { slot: "message" }, this._translations.enableEditing)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -174,9 +186,6 @@ export class InfoCard {
                         this._showListView = isOpen;
                     }
                 });
-                this.reactiveUtils.watch(() => this._features.viewModel.title, (title) => {
-                    this._mobileTitle = title;
-                });
                 if (this.zoomAndScrollToSelected) {
                     this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (i) => {
                         if (i > -1) {
@@ -464,6 +473,12 @@ export class InfoCard {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "layerSelectionChange",
+                "method": "layerSelectionChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
             }, {
                 "name": "refreshGraphics",
                 "method": "refreshGraphics",

package/dist/collection/components/layer-table/layer-table.css

@@ -131,3 +131,7 @@ html[dir="rtl"] .share-action {
 .border-top {
   border-top: 1px solid var(--calcite-color-border-2);
 }
+
+.modal {
+  --calcite-modal-content-padding: 0;
+}

package/dist/collection/components/layer-table/layer-table.js

@@ -413,7 +413,8 @@ export class LayerTable {
         var _a;
         const activeDependant = [
             "filter",
-            "list-check-all"
+            "list-check-all",
+            "selected-items-filter"
         ];
         (_a = this._toolInfos) === null || _a === void 0 ? void 0 : _a.forEach(ti => {
             if (ti && activeDependant.indexOf(ti.icon) > -1) {
@@ -423,6 +424,9 @@ export class LayerTable {
                 if (ti.icon === "list-check-all") {
                     ti.active = this._selectAllActive;
                 }
+                if (ti.icon === "selected-items-filter") {
+                    ti.active = this._showOnlySelected;
+                }
             }
         });
     }
@@ -1051,7 +1055,7 @@ export class LayerTable {
      */
     _filterModal() {
         var _a, _b, _c;
-        return (h("calcite-modal", { "aria-labelledby": "modal-title", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView }))));
+        return (h("calcite-modal", { "aria-labelledby": "modal-title", class: "modal", kind: "brand", onCalciteModalClose: async () => this._closeFilter(), open: this._filterOpen, widthScale: "s" }, h("div", { class: "display-flex align-center", id: "modal-title", slot: "header" }, (_b = (_a = this._translations) === null || _a === void 0 ? void 0 : _a.filter) === null || _b === void 0 ? void 0 : _b.replace("{{title}}", (_c = this._layer) === null || _c === void 0 ? void 0 : _c.title)), h("div", { slot: "content" }, h("instant-apps-filter-list", { autoUpdateUrl: false, closeBtn: true, closeBtnOnClick: async () => this._closeFilter(), layerExpressions: this._layerExpressions, onFilterListReset: () => this._handleFilterListReset(), onFilterUpdate: () => this._handleFilterUpdate(), ref: (el) => this._filterList = el, view: this.mapView, zoomBtn: false }))));
     }
     /**
      * Reset the filter active prop
@@ -1164,6 +1168,7 @@ export class LayerTable {
         var _a;
         this._selectedIndexes = [];
         (_a = this._table) === null || _a === void 0 ? void 0 : _a.highlightIds.removeAll();
+        this._finishOnChange();
     }
     /**
      * When true the filter modal will be displayed
@@ -1210,10 +1215,17 @@ export class LayerTable {
             ids,
             layer: this._layer
         };
+        const fields = this._table.columns.toArray().reduce((prev, cur) => {
+            if (!cur.hidden) {
+                prev.push(cur.name.toLocaleLowerCase());
+            }
+            return prev;
+        }, []);
         void downloadUtils.downloadCSV(null, //???
         exportInfos, false, // formatUsingLayerPopup
         false, // removeDuplicates
-        true);
+        true, // addColumnTitle
+        fields);
     }
     /**
      * Refreshes the table and maintains the curent scroll position

package/dist/collection/components/map-card/map-card.js

@@ -41,7 +41,7 @@ export class MapCard {
         this.enableLegend = undefined;
         this.enableFloorFilter = undefined;
         this.enableFullscreen = undefined;
-        this.enableMapToolsExpand = true;
+        this.enableSingleExpand = true;
         this.enableSearch = undefined;
         this.enableBasemap = undefined;
         this.basemapConfig = undefined;
@@ -97,7 +97,7 @@ export class MapCard {
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
         const mapPickerClass = ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) > 1 ? "" : "display-none";
         const mapHeightClass = ((_b = this.mapInfos) === null || _b === void 0 ? void 0 : _b.length) > 1 ? "map-height" : "height-full";
-        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableLegend: this.enableLegend, enableMapToolsExpand: this.enableMapToolsExpand, enableSearch: this.enableSearch, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
+        return (h(Host, null, h("map-picker", { class: mapPickerClass, mapInfos: this.mapInfos, ref: (el) => this._mapPicker = el }), h("div", { class: `${mapHeightClass} ${mapClass}`, ref: (el) => (this._mapDiv = el) }), h("map-tools", { basemapConfig: this.basemapConfig, class: `box-shadow ${themeClass}`, enableBasemap: this.enableBasemap, enableFloorFilter: this.enableFloorFilter, enableFullscreen: this.enableFullscreen, enableHome: this.enableHome, enableLegend: this.enableLegend, enableSearch: this.enableSearch, enableSingleExpand: this.enableSingleExpand, homeZoomToolsSize: this.homeZoomToolsSize, mapView: this.mapView, mapWidgetsSize: this.mapWidgetsSize, position: this.mapWidgetsPosition, ref: (el) => this._mapTools = el, searchConfiguration: this._searchConfiguration, stackTools: this.stackTools, toolOrder: this.toolOrder })));
     }
     //--------------------------------------------------------------------------
     //
@@ -290,7 +290,7 @@ export class MapCard {
                 "attribute": "enable-fullscreen",
                 "reflect": false
             },
-            "enableMapToolsExpand": {
+            "enableSingleExpand": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -302,9 +302,9 @@ export class MapCard {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "boolean: when true map tools will be displayed within a expand/collapse widget"
+                    "text": "boolean: when true map tools will be displayed within a single expand/collapse widget\r\nwhen false widgets will be loaded individually into expand widgets"
                 },
-                "attribute": "enable-map-tools-expand",
+                "attribute": "enable-single-expand",
                 "reflect": false,
                 "defaultValue": "true"
             },