@esri/solutions-components 0.7.17 → 0.7.18

package/dist/collection/components/basemap-gallery/basemap-gallery.css

@@ -1,19 +1,19 @@
-/** @license
- * Copyright 2022 Esri
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *    http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-:host {
-  display: block;
-}
+/** @license
+ * Copyright 2022 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}

package/dist/collection/components/basemap-gallery/basemap-gallery.js

@@ -94,8 +94,6 @@ export class BasemapGallery {
     /**
      * Initialize the basemap gallery or reset the current view if it already exists
      *
-     * @returns void
-     *
      * @protected
      */
     async _initBaseMapGallery(view) {

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

@@ -24,6 +24,7 @@ import { queryFeaturesByID } from "../../utils/queryUtils";
 import { getLayerOrTable } from "../../utils/mapViewUtils";
 export class CardManager {
     constructor() {
+        this.isMobile = undefined;
         this.layer = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
@@ -85,7 +86,7 @@ export class CardManager {
         var _a, _b;
         const featuresClass = ((_a = this._graphics) === null || _a === void 0 ? void 0 : _a.length) > 0 ? "" : "display-none";
         const messageClass = ((_b = this._graphics) === null || _b === void 0 ? void 0 : _b.length) > 0 ? "display-none" : "";
-        return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
+        return (h(Host, null, h("div", { class: "overflow-auto height-full" }, h("calcite-shell", { class: "position-relative " + featuresClass }, h("div", null, h("info-card", { graphics: this._graphics, isLoading: this._cardLoading, isMobile: this.isMobile, mapView: this.mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))), h("calcite-shell", { class: "position-relative " + messageClass }, h("div", { class: "padding-1" }, h("calcite-notice", { icon: "table", open: true }, h("div", { slot: "message" }, this._translations.selectFeaturesToStart)))))));
     }
     //--------------------------------------------------------------------------
     //
@@ -115,6 +116,23 @@ export class CardManager {
     }
     static get properties() {
         return {
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the component will render an optimized view for mobile devices"
+                },
+                "attribute": "is-mobile",
+                "reflect": false
+            },
             "layer": {
                 "type": "unknown",
                 "mutable": false,

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

@@ -170,3 +170,8 @@
   left: 0px;
   right: 0px;
 }
+
+.visibility-hidden {
+  visibility: hidden;
+  height: 0px;
+}

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

@@ -58,11 +58,15 @@ export class CrowdsourceManager {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this._expandPopup = false;
+        this._hideFooter = false;
+        this._hideTable = false;
+        this._isMobile = undefined;
         this._translations = undefined;
         this._layoutMode = ELayoutMode.GRID;
         this._mapInfo = undefined;
         this._mapView = undefined;
         this._panelOpen = true;
+        this._numSelected = 0;
         this._tableOnly = false;
     }
     //--------------------------------------------------------------------------
@@ -103,6 +107,13 @@ export class CrowdsourceManager {
     enableZoomWatchHandler() {
         this._initMapZoom();
     }
+    /**
+     * Show the map, popup, and table if the user switches out of mobile mode
+     */
+    async _isMobileWatchHandler() {
+        const show = !this._isMobile ? false : this._numSelected > 0;
+        this.showHideMapPopupAndTable(show);
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -113,6 +124,21 @@ export class CrowdsourceManager {
     //  Events (public)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Listen for changes in feature selection and show or hide the map, popup, and table
+     */
+    async featureSelectionChange(evt) {
+        var _a;
+        this._numSelected = (_a = evt.detail) === null || _a === void 0 ? void 0 : _a.length;
+    }
+    /**
+     * Listen for when the popup is closed in mobile mode and hide the appropriate UI elements
+     */
+    async popupClosed() {
+        if (this._isMobile) {
+            this.showHideMapPopupAndTable(false);
+        }
+    }
     /**
      * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
      */
@@ -159,12 +185,13 @@ export class CrowdsourceManager {
      */
     async componentWillLoad() {
         await this._getTranslations();
+        this._resizeObserver = new ResizeObserver(() => this._onResize());
     }
     /**
      * 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)))));
+        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())));
     }
     /**
      * Called after each render
@@ -176,11 +203,27 @@ export class CrowdsourceManager {
             await this._setMapView();
         }
     }
+    /**
+     * Called once after the component is loaded
+     */
+    async componentDidLoad() {
+        this._resizeObserver.observe(this.el);
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (protected)
     //
     //--------------------------------------------------------------------------
+    /**
+     * Show View and Delete buttons in the footer when in isMobile is true
+     *
+     * @returns the footer node
+     * @protected
+     */
+    _getFooter() {
+        const hasSelectedFeatures = this._numSelected > 0;
+        return this._isMobile && hasSelectedFeatures && !this._hideFooter ? (h("div", { class: `width-100`, slot: "footer" }, h("div", { class: "display-flex padding-1-2" }, h("calcite-button", { appearance: "solid", id: "solutions-show", onClick: () => this.showHideMapPopupAndTable(true), width: "full" }, this._translations.view.replace("{{n}}", this._numSelected.toString())), h("calcite-button", { appearance: "outline", class: "padding-inline-start-1", id: "solutions-delete", kind: "danger", onClick: () => this._layerTable.deleteFeatures(), width: "full" }, this._translations.delete.replace("{{n}}", this._numSelected.toString()))))) : undefined;
+    }
     /**
      * Get the icon name to use for the divider icon based on the current layout
      *
@@ -224,7 +267,7 @@ export class CrowdsourceManager {
         let sizeClass = "";
         switch (layoutMode) {
             case ELayoutMode.HORIZONTAL:
-                sizeClass = `${panelOpen ? "height-1-2" : "height-0"} width-full position-relative`;
+                sizeClass = `${this._isMobile && this._hideTable ? "height-full" : panelOpen ? "height-1-2" : "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` :
@@ -272,10 +315,10 @@ export class CrowdsourceManager {
      * @returns the parent node that contains the table and map
      * @protected
      */
-    _getBody(layoutMode, panelOpen, hideMap) {
+    _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 ${contentClass}` }, this._getTable(layoutMode, panelOpen), this._getMapAndCard(layoutMode, panelOpen, hideMap)))) : (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideMap), this._getTable(layoutMode, panelOpen))));
+        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))));
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -303,8 +346,10 @@ export class CrowdsourceManager {
     _getMapNode(layoutMode, hideMap) {
         var _a;
         const mapDisplayClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "display-flex height-full width-1-2" :
-            layoutMode === ELayoutMode.GRID && !hideMap ? "" : "display-none";
-        const mapContainerClass = this.classicGrid && layoutMode === ELayoutMode.GRID ? "width-full" : "adjusted-height-50";
+            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"] })));
     }
     /**
@@ -319,8 +364,10 @@ export class CrowdsourceManager {
         const id = "expand-popup";
         const tooltip = this._expandPopup ? this._translations.collapsePopup : this._translations.expandPopup;
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        const popupNodeClass = !this._expandPopup ? "height-full" : ((_a = this.mapInfos) === null || _a === void 0 ? void 0 : _a.length) === 1 ? "position-absolute-0" : "position-absolute-50";
-        return (h("div", { class: "calcite-mode-dark " + popupNodeClass }, h("calcite-panel", null, h("div", { class: "display-flex align-items-center", slot: "header-content" }, h("calcite-icon", { icon: "information", scale: "s" }), h("div", { class: "padding-inline-start-75" }, this._translations.information)), h("calcite-action", { 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 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())));
     }
     /**
      * Toggle the popup information
@@ -331,18 +378,15 @@ export class CrowdsourceManager {
         this._expandPopup = !this._expandPopup;
     }
     /**
-     * Get the card node based for the current layout options
-     *
-     * @param layoutMode ELayoutMode the current layout mode
-     * @param hideMap when true no map is displayed
+     * Get the card node
      *
-     * @returns the map node
+     * @returns the card node
      * @protected
      */
     _getCardNode() {
-        const cardManagerHeight = !this._expandPopup ? "height-50" : "height-full";
+        const cardManagerHeight = !this._expandPopup && !this._isMobile ? "height-50" : "height-full";
         const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
+        return (h("div", { class: `width-50 height-full ${themeClass}` }, h("card-manager", { class: `${cardManagerHeight} width-full`, isMobile: this._isMobile, mapView: this === null || this === void 0 ? void 0 : this._mapView, zoomAndScrollToSelected: this.zoomAndScrollToSelected })));
     }
     /**
      * Get the table node based for the current layout
@@ -353,7 +397,8 @@ export class CrowdsourceManager {
      * @returns the table node
      * @protected
      */
-    _getTable(layoutMode, panelOpen) {
+    _getTable(layoutMode, panelOpen, hideTable) {
+        const tableClass = hideTable ? "visibility-hidden" : "";
         const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
         const icon = this._getDividerIcon(layoutMode, panelOpen);
         const tooltip = panelOpen ? this._translations.close : this._translations.open;
@@ -363,18 +408,34 @@ export class CrowdsourceManager {
             this.classicGrid && layoutMode === ELayoutMode.VERTICAL ? "panel-end" :
                 layoutMode === ELayoutMode.HORIZONTAL ? "header" : "panel-start";
         const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
-        return (h("calcite-shell", { class: tableSizeClass + " border-bottom" }, 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))), 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, enableZoom: this.enableZoom, mapInfo: this._mapInfo, mapView: this === null || this === void 0 ? void 0 : this._mapView, onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, shareIncludeEmbed: this.shareIncludeEmbed, shareIncludeSocial: this.shareIncludeSocial, showNewestFirst: this.showNewestFirst, zoomAndScrollToSelected: this.zoomAndScrollToSelected }))));
+        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 }))));
+    }
+    /**
+     * Update the component layout when its size changes
+     */
+    _onResize() {
+        this._isMobile = this.el.offsetWidth < 1024;
+        this._layoutMode = this._isMobile ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
+        this._panelOpen = true;
     }
     /**
      * Open/Close the appropriate panel.
      * The panel that is toggled is dependent upon the layout mode and if using classic grid or not
-     *
-     * @returns void
-     * @protected
      */
     _toggleLayout() {
         this._panelOpen = !this._panelOpen;
     }
+    /**
+     * Show/Hide the map, popup, and table
+     *
+     * @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;
+    }
     /**
      * Get the current map info (configuration details) when maps change
      *
@@ -991,11 +1052,15 @@ export class CrowdsourceManager {
     static get states() {
         return {
             "_expandPopup": {},
+            "_hideFooter": {},
+            "_hideTable": {},
+            "_isMobile": {},
             "_translations": {},
             "_layoutMode": {},
             "_mapInfo": {},
             "_mapView": {},
             "_panelOpen": {},
+            "_numSelected": {},
             "_tableOnly": {}
         };
     }
@@ -1016,10 +1081,25 @@ export class CrowdsourceManager {
             }, {
                 "propName": "enableZoom",
                 "methodName": "enableZoomWatchHandler"
+            }, {
+                "propName": "_isMobile",
+                "methodName": "_isMobileWatchHandler"
             }];
     }
     static get listeners() {
         return [{
+                "name": "featureSelectionChange",
+                "method": "featureSelectionChange",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
+                "name": "popupClosed",
+                "method": "popupClosed",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }, {
                 "name": "idsFound",
                 "method": "idsFound",
                 "target": "window",

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

@@ -131,8 +131,6 @@ export class EditCard {
     }
     /**
      * Init the Editor widget so we can display the popup content
-     *
-     * @returns void
      */
     async _initEditorWidget() {
         if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
@@ -180,8 +178,6 @@ export class EditCard {
     }
     /**
      * Close the edit widget
-     *
-     * @returns void
      */
     async _closeEdit() {
         var _a, _b, _c, _d;
@@ -198,8 +194,6 @@ export class EditCard {
     }
     /**
      * Start the update workflow for the editor widget
-     *
-     * @returns void
      */
     async _startUpdate() {
         await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]);

package/dist/collection/components/floor-filter/floor-filter.js

@@ -80,10 +80,6 @@ export class FloorFilter {
     }
     /**
      * Initialize the floor filter or reset the current view if it already exists
-     *
-     * @returns void
-     *
-     * @protected
      */
     _initFloorFilter(view) {
         var _a;

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

@@ -66,3 +66,32 @@
   background-color: var(--calcite-color-foreground-1) !important;
   height: 100% !important;
 }
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.height-40 {
+  height: 40px;
+}
+
+.padding-top-46 {
+  padding-top: 46px;
+}
+
+.end-border {
+  border-inline-end: 1px solid var(--calcite-color-border-1);
+}
+
+.font-bold {
+  font-weight: bold;
+}
+
+.visibility-hidden {
+  visibility: hidden;
+  height: 0px;
+}
+
+.padding-inline-start-1 {
+  padding-inline-start: 1rem;
+}

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

@@ -25,11 +25,13 @@ export class InfoCard {
     constructor() {
         this.graphics = undefined;
         this.isLoading = false;
+        this.isMobile = undefined;
         this.mapView = undefined;
         this.zoomAndScrollToSelected = undefined;
         this._alertOpen = false;
         this._count = "";
         this._editRecordOpen = false;
+        this._mobileTitle = "";
         this._showListView = false;
         this._translations = undefined;
     }
@@ -58,6 +60,14 @@ export class InfoCard {
             this._features.close();
         }
     }
+    /**
+     * Watch for changes to the isMobile prop then init the Features widget
+     * We need to know if the title should be displayed by the widget (non mobile)
+     * or by us (mobile)
+     */
+    async isMobileWatchHandler() {
+        await this._initFeaturesWidget();
+    }
     /**
      * Watch for changes to the mapView and re-init the Feature widget
      */
@@ -111,11 +121,13 @@ export class InfoCard {
     render() {
         var _a, _b, _c;
         const loadingClass = this.isLoading ? "" : "display-none";
-        const featureNodeClass = this.isLoading || this._editRecordOpen ? "display-none" : "position-absolute";
+        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 = ((_b = (_a = this._features) === null || _a === void 0 ? void 0 : _a.features) === null || _b === void 0 ? void 0 : _b.length) < 2;
-        return (h(Host, null, h("calcite-shell", null, 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", "icon-start": "pencil", id: "solutions-edit", onClick: () => this._openEditRecord(), width: "full" }, this._translations.edit), h("calcite-tooltip", { label: "", placement: "bottom", "reference-element": "solutions-edit" }, h("span", null, this._translations.edit))), h("div", { class: "display-flex padding-1-2 button-container top-border" }, 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)))));
+        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)))));
     }
     //--------------------------------------------------------------------------
     //
@@ -145,7 +157,8 @@ export class InfoCard {
      * @protected
      */
     async _initFeaturesWidget() {
-        return await this.mapView.when(() => {
+        var _a;
+        return this.isMobile !== undefined ? await ((_a = this.mapView) === null || _a === void 0 ? void 0 : _a.when(() => {
             if (!this._features) {
                 this._features = new this.Features({
                     view: this.mapView,
@@ -153,7 +166,7 @@ export class InfoCard {
                     visibleElements: {
                         actionBar: false,
                         closeButton: false,
-                        heading: true
+                        heading: !this.isMobile
                     }
                 });
                 this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (isOpen) => {
@@ -161,39 +174,39 @@ 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) {
-                            this.selectionChanged.emit(this._features.selectedFeature);
+                            this.selectionChanged.emit([this._features.selectedFeature]);
                         }
                     });
                 }
             }
             else {
                 this._features.view = this.mapView;
+                this._features.visibleElements.actionBar = false;
+                this._features.visibleElements.closeButton = false;
+                this._features.visibleElements.heading = !this.isMobile;
             }
-        });
+        })) : Promise.resolve();
     }
     /**
-     * Set the alertOpen member to false when the alert is closed
-     *
-     * @returns void
+     * Close the popup and emit the selected features
      */
-    _alertClosed() {
-        this._alertOpen = false;
+    _closePopup() {
+        this.popupClosed.emit();
     }
     /**
-     * Close the edit record
-     *
-     * @returns void
+     * Set the alertOpen member to false when the alert is closed
      */
-    _editRecordClosed() {
-        this._editRecordOpen = false;
+    _alertClosed() {
+        this._alertOpen = false;
     }
     /**
      * Open the edit record
-     *
-     * @returns void
      */
     _openEditRecord() {
         if (this._editEnabled) {
@@ -205,8 +218,6 @@ export class InfoCard {
     }
     /**
      * Go to the previous feature in the features widget
-     *
-     * @returns void
      */
     _back() {
         this._features.previous();
@@ -214,8 +225,6 @@ export class InfoCard {
     }
     /**
      * Go to the next feature in the features widget
-     *
-     * @returns void
      */
     _next() {
         this._features.next();
@@ -307,6 +316,23 @@ export class InfoCard {
                 "reflect": false,
                 "defaultValue": "false"
             },
+            "isMobile": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "When true the component will render an optimized view for mobile devices"
+                },
+                "attribute": "is-mobile",
+                "reflect": false
+            },
             "mapView": {
                 "type": "unknown",
                 "mutable": false,
@@ -351,12 +377,28 @@ export class InfoCard {
             "_alertOpen": {},
             "_count": {},
             "_editRecordOpen": {},
+            "_mobileTitle": {},
             "_showListView": {},
             "_translations": {}
         };
     }
     static get events() {
         return [{
+                "method": "popupClosed",
+                "name": "popupClosed",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted on demand when the popup is closed"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
                 "method": "selectionChanged",
                 "name": "selectionChanged",
                 "bubbles": true,
@@ -367,8 +409,8 @@ export class InfoCard {
                     "text": "Emitted on demand when the selected index changes"
                 },
                 "complexType": {
-                    "original": "__esri.Graphic",
-                    "resolved": "Graphic",
+                    "original": "__esri.Graphic[]",
+                    "resolved": "Graphic[]",
                     "references": {
                         "___esri": {
                             "location": "global",
@@ -407,6 +449,9 @@ export class InfoCard {
         return [{
                 "propName": "graphics",
                 "methodName": "graphicsWatchHandler"
+            }, {
+                "propName": "isMobile",
+                "methodName": "isMobileWatchHandler"
             }, {
                 "propName": "mapView",
                 "methodName": "mapViewWatchHandler"

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

@@ -127,3 +127,7 @@ html[dir="rtl"] .share-action {
   height: 50px !important;
   display: inline-flex;
 }
+
+.border-top {
+  border-top: 1px solid var(--calcite-color-border-2);
+}