@esri/solutions-components 0.7.17 → 0.7.19

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

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

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.hideMap ? "height-0 " : 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` :
@@ -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,11 @@ 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";
+        const containerClass = this._isMobile && this._hideTable && this.hideMap ? "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
@@ -331,18 +379,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 +398,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 +409,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 +1053,15 @@ export class CrowdsourceManager {
     static get states() {
         return {
             "_expandPopup": {},
+            "_hideFooter": {},
+            "_hideTable": {},
+            "_isMobile": {},
             "_translations": {},
             "_layoutMode": {},
             "_mapInfo": {},
             "_mapView": {},
             "_panelOpen": {},
+            "_numSelected": {},
             "_tableOnly": {}
         };
     }
@@ -1016,10 +1082,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]) {
@@ -152,8 +150,7 @@ export class EditCard {
                 view: this.mapView,
                 layerInfos,
                 visibleElements: {
-                    snappingControls: false,
-                    sketchTooltipControls: false
+                    snappingControls: false
                 },
                 container
             });
@@ -180,8 +177,6 @@ export class EditCard {
     }
     /**
      * Close the edit widget
-     *
-     * @returns void
      */
     async _closeEdit() {
         var _a, _b, _c, _d;
@@ -198,8 +193,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;
+}