@esri/solutions-components 0.7.17 → 0.7.19

package/dist/solutions-components/utils/downloadUtils.ts

@@ -125,14 +125,15 @@ export async function consolidateLabels(
   exportInfos: IExportInfos,
   formatUsingLayerPopup = true,
   includeHeaderNames = false,
-  isCSVExport = false
+  isCSVExport = false,
+  fields = []
 ): Promise<string[][]> {
   const labelRequests = [];
 
   Object.keys(exportInfos).forEach(k => {
     const labelInfo: IExportInfo = exportInfos[k];
     labelRequests.push(
-      _prepareLabels(webmap, labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames)
+      _prepareLabels(webmap, labelInfo.layerView?.layer || labelInfo.layer, labelInfo.ids, formatUsingLayerPopup, includeHeaderNames, fields)
     );
     if (isCSVExport) {
       // add the layer id as a temp value separator that we can use to split values for CSV export
@@ -160,9 +161,10 @@ export async function downloadCSV(
   exportInfos: IExportInfos,
   formatUsingLayerPopup: boolean,
   removeDuplicates = false,
-  addColumnTitle = false
+  addColumnTitle = false,
+  fields = []
 ): Promise<void> {
-  let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true);
+  let labels = await consolidateLabels(webmap, exportInfos, formatUsingLayerPopup, addColumnTitle, true, fields);
   labels = removeDuplicates ? removeDuplicateLabels(labels) : labels;
 
   const layerIds = Object.keys(exportInfos);
@@ -838,7 +840,8 @@ export async function _prepareLabels(
   layer: __esri.FeatureLayer,
   ids: number[],
   formatUsingLayerPopup = true,
-  includeHeaderNames = false
+  includeHeaderNames = false,
+  fields = []
 ): Promise<string[][]> {
   // Get the label formatting, if any
   const labelFormatProps: ILabelFormatProps = await _getLabelFormat(webmap, layer, formatUsingLayerPopup);
@@ -909,7 +912,8 @@ export async function _prepareLabels(
 
   } else {
     // Get the features to export
-    featureSet = await queryFeaturesByID(ids, featureLayer, [], false);
+    const outFields = fields.length > 0 ? fields : undefined;
+    featureSet = await queryFeaturesByID(ids, featureLayer, [], false, undefined, outFields);
   }
 
   // Get field data types. Do we have any domain-based fields?
@@ -920,18 +924,22 @@ export async function _prepareLabels(
   if (featureLayer.fields) {
     featureLayer.fields.forEach(
       field => {
-        const lowercaseFieldname = field.name.toLowerCase();
-        attributeOrigNames[lowercaseFieldname] = field.name;
-        attributeDomains[lowercaseFieldname] = field.domain;
-        attributeTypes[lowercaseFieldname] = field.type;
+        if (fields.indexOf(field.name.toLowerCase()) > -1) {
+          const lowercaseFieldname = field.name.toLowerCase();
+          attributeOrigNames[lowercaseFieldname] = field.name;
+          attributeDomains[lowercaseFieldname] = field.domain;
+          attributeTypes[lowercaseFieldname] = field.type;
+        }
       }
     );
   } else {
     // Feature layer is missing fields, so get info from first feature
     Object.keys(featureSet[0]).forEach(
       fieldName => {
-        const lowercaseFieldname = fieldName.toLowerCase();
-        attributeOrigNames[lowercaseFieldname] = fieldName;
+        if (fields.indexOf(fieldName.toLowerCase()) > -1) {
+          const lowercaseFieldname = fieldName.toLowerCase();
+          attributeOrigNames[lowercaseFieldname] = fieldName;
+        }
       }
     )
   }

package/dist/solutions-components/utils/interfaces.ts

@@ -482,7 +482,9 @@ export interface IBasemapConfig {
 }
 
 export interface IToolInfo {
+  active: boolean;
   icon: string;
+  indicator: boolean;
   func: any;
   label: string;
   disabled: boolean;
@@ -537,3 +539,8 @@ export interface ILayerAndTableIds {
   layerIds: string[];
   tableIds: string[];
 }
+
+export interface IPopupUtils {
+  arcade: typeof import("esri/arcade");
+  getPopupTitle(graphic: __esri.Graphic): Promise<string>;
+}

package/dist/solutions-components/utils/popupUtils.ts

@@ -0,0 +1,104 @@
+/** @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.
+*/
+
+import { loadModules } from "./loadModules";
+
+export class PopupUtils {
+
+	/**
+	 * esri/arcade: https://developers.arcgis.com/javascript/latest/api-reference/esri-arcade.html
+	 */
+	arcade: typeof import("esri/arcade");
+
+  /**
+   * Get the popup title that honors arcade expressions
+   *
+   * @returns Promise resolving with the popup title
+   *
+   * @protected
+   */
+	public async getPopupTitle(
+		graphic: __esri.Graphic
+	): Promise<string> {
+		if (!this.arcade) {
+			await this._initModules()
+		}
+		let attributes = {};
+		for (const [key, value] of Object.entries(graphic.attributes)) {
+			attributes = {
+				...attributes,
+				[`{${key.toUpperCase()}}`]: value
+			};
+		}
+		const layer = graphic.layer as __esri.FeatureLayer;
+		const popupTitle = this._removeTags(layer?.popupTemplate?.title as string);
+		if (popupTitle.includes("{expression/expr") && layer?.popupTemplate?.expressionInfos != null) {
+			for (let i = 0; i < layer.popupTemplate?.expressionInfos.length; i++) {
+				const info = layer.popupTemplate.expressionInfos[i];
+				const profile = {
+					variables: [
+						{
+							name: "$feature",
+							type: "feature"
+						}
+					]
+				} as __esri.Profile;
+				try {
+					const arcadeExecutor = await this.arcade.createArcadeExecutor(info.expression, profile);
+					const arcadeTitle = arcadeExecutor.execute({ $feature: graphic });
+					if (arcadeTitle != null || arcadeTitle !== "") {
+						attributes[`{expression/${info.name}}`.toUpperCase()] = arcadeTitle;
+					}
+				} catch {
+					continue;
+				}
+			}
+		}
+
+		return popupTitle?.replace(/{.*?}/g, (placeholder: string) => {
+			return attributes[placeholder.toUpperCase()] != null ? (attributes[placeholder.toUpperCase()] as string) : "";
+		});
+	}
+
+  /**
+   * Remove any tags from the title
+   *
+   * @returns title string without tags
+   *
+   * @protected
+   */
+	protected _removeTags(str: string): string {
+		if (str == null || str === "") {
+			return "";
+		}
+		return str.toString().replace(/(<([^>]+)>)/gi, "");
+	}
+
+  /**
+   * Load esri javascript api modules
+   *
+   * @returns Promise resolving when function is done
+   *
+   * @protected
+   */
+	protected async _initModules(): Promise<void> {
+		const [arcade] = await loadModules([
+			"esri/arcade"
+		]);
+		this.arcade = arcade;
+	}
+
+}

package/dist/solutions-components/utils/queryUtils.ts

@@ -126,7 +126,8 @@ export async function queryFeaturesByID(
   layer: __esri.FeatureLayer,
   graphics: __esri.Graphic[],
   returnGeometry: boolean,
-  outSpatialReference?: __esri.SpatialReference
+  outSpatialReference?: __esri.SpatialReference,
+  fields?: string[]
 ): Promise<__esri.Graphic[]> {
   const num = layer.capabilities?.query.maxRecordCount;
   const start = 0;
@@ -141,6 +142,9 @@ export async function queryFeaturesByID(
   if (outSpatialReference) {
     q.outSpatialReference = outSpatialReference;
   }
+  if (fields) {
+    q.outFields = fields;
+  }
 
   const result = await layer.queryFeatures(q);
 

package/dist/types/components/basemap-gallery/basemap-gallery.d.ts

@@ -71,8 +71,6 @@ export declare class BasemapGallery {
     /**
      * Initialize the basemap gallery or reset the current view if it already exists
      *
-     * @returns void
-     *
      * @protected
      */
     protected _initBaseMapGallery(view: __esri.MapView): Promise<void>;

package/dist/types/components/card-manager/card-manager.d.ts

@@ -17,6 +17,10 @@
 import CardManager_T9n from "../../assets/t9n/card-manager/resources.json";
 export declare class CardManager {
     el: HTMLCardManagerElement;
+    /**
+     * When true the component will render an optimized view for mobile devices
+     */
+    isMobile: boolean;
     /**
      * esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html
      */

package/dist/types/components/crowdsource-manager/crowdsource-manager.d.ts

@@ -140,6 +140,18 @@ export declare class CrowdsourceManager {
      * When true the info panel with the popup details will take the full height and prevent the map from displaying
      */
     _expandPopup: boolean;
+    /**
+     * When true the mobile footer will be hidden
+     */
+    _hideFooter: boolean;
+    /**
+     * When true the table will be hidden
+     */
+    _hideTable: boolean;
+    /**
+     * When true the component will render an optimized view for mobile devices
+     */
+    _isMobile: boolean;
     /**
      * Contains the translations for this component.
      * All UI strings should be defined here.
@@ -161,6 +173,10 @@ export declare class CrowdsourceManager {
      * Controls the layout of the application
      */
     _panelOpen: boolean;
+    /**
+     * Number of selected features in the table
+     */
+    _numSelected: number;
     /**
      * When true only editable tables have been found and the map will be hidden
      */
@@ -181,10 +197,18 @@ export declare class CrowdsourceManager {
      * number[]: List of ids that should be selected by default
      */
     protected _defaultOid: number[];
+    /**
+     * HTMLLayerTableElement: The layer table element
+     */
+    protected _layerTable: HTMLLayerTableElement;
     /**
      * IMapChange: The current map change details
      */
     protected _mapChange: IMapChange;
+    /**
+     * ResizeObserver: The observer that watches for screen size changes
+     */
+    protected _resizeObserver: ResizeObserver;
     /**
      * boolean: When true the map view will be set after render due to popup obstructing the view
      * MapView.when is not fired when mapView is not currently visible
@@ -210,6 +234,18 @@ export declare class CrowdsourceManager {
      * When true the map zoom tools will be available
      */
     enableZoomWatchHandler(): void;
+    /**
+     * Show the map, popup, and table if the user switches out of mobile mode
+     */
+    _isMobileWatchHandler(): Promise<void>;
+    /**
+     * Listen for changes in feature selection and show or hide the map, popup, and table
+     */
+    featureSelectionChange(evt: CustomEvent): Promise<void>;
+    /**
+     * Listen for when the popup is closed in mobile mode and hide the appropriate UI elements
+     */
+    popupClosed(): Promise<void>;
     /**
      * Listen for idsFound event to be fired so we can know that all layer ids have been fetched
      */
@@ -241,6 +277,17 @@ export declare class CrowdsourceManager {
      * Used to delay the setting of the mapView when the popup is expaneded and obstructs the view
      */
     componentDidRender(): Promise<void>;
+    /**
+     * Called once after the component is loaded
+     */
+    componentDidLoad(): Promise<void>;
+    /**
+     * Show View and Delete buttons in the footer when in isMobile is true
+     *
+     * @returns the footer node
+     * @protected
+     */
+    protected _getFooter(): VNode;
     /**
      * Get the icon name to use for the divider icon based on the current layout
      *
@@ -281,7 +328,7 @@ export declare class CrowdsourceManager {
      * @returns the parent node that contains the table and map
      * @protected
      */
-    protected _getBody(layoutMode: ELayoutMode, panelOpen: boolean, hideMap: boolean): VNode;
+    protected _getBody(layoutMode: ELayoutMode, panelOpen: boolean, hideMap: boolean, hideTable: boolean): VNode;
     /**
      * Get the map and card nodes based for the current layout options
      *
@@ -317,12 +364,9 @@ export declare class CrowdsourceManager {
      */
     protected _togglePopup(): void;
     /**
-     * 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
      */
     protected _getCardNode(): VNode;
@@ -335,15 +379,22 @@ export declare class CrowdsourceManager {
      * @returns the table node
      * @protected
      */
-    protected _getTable(layoutMode: ELayoutMode, panelOpen: boolean): VNode;
+    protected _getTable(layoutMode: ELayoutMode, panelOpen: boolean, hideTable: boolean): VNode;
+    /**
+     * Update the component layout when its size changes
+     */
+    protected _onResize(): void;
     /**
      * 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
      */
     protected _toggleLayout(): void;
+    /**
+     * Show/Hide the map, popup, and table
+     *
+     * @param show when true the map, popup, and table will be displayed
+     */
+    protected showHideMapPopupAndTable(show: boolean): void;
     /**
      * Get the current map info (configuration details) when maps change
      *

package/dist/types/components/edit-card/edit-card.d.ts

@@ -142,20 +142,14 @@ export declare class EditCard {
     protected _initModules(): Promise<void>;
     /**
      * Init the Editor widget so we can display the popup content
-     *
-     * @returns void
      */
     protected _initEditorWidget(): Promise<void>;
     /**
      * Close the edit widget
-     *
-     * @returns void
      */
     protected _closeEdit(): Promise<void>;
     /**
      * Start the update workflow for the editor widget
-     *
-     * @returns void
      */
     protected _startUpdate(): Promise<void>;
     /**

package/dist/types/components/floor-filter/floor-filter.d.ts

@@ -56,10 +56,6 @@ export declare class FloorFilter {
     protected _initModules(): Promise<void>;
     /**
      * Initialize the floor filter or reset the current view if it already exists
-     *
-     * @returns void
-     *
-     * @protected
      */
     protected _initFloorFilter(view: __esri.MapView): void;
 }

package/dist/types/components/info-card/info-card.d.ts

@@ -16,6 +16,7 @@
 /// <reference types="arcgis-js-api" />
 import { EventEmitter } from "../../stencil-public-runtime";
 import InfoCard_T9n from "../../assets/t9n/info-card/resources.json";
+import { IPopupUtils } from "../../utils/interfaces";
 export declare class InfoCard {
     el: HTMLInfoCardElement;
     /**
@@ -26,6 +27,10 @@ export declare class InfoCard {
      * boolean: when true a loading indicator will be shown
      */
     isLoading: boolean;
+    /**
+     * When true the component will render an optimized view for mobile devices
+     */
+    isMobile: boolean;
     /**
      * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
      */
@@ -47,6 +52,11 @@ export declare class InfoCard {
      * When true the add record modal will be displayed
      */
     _editRecordOpen: boolean;
+    /**
+     * When isMobile is true we will handle the display of the title so
+     * we can display beside a custom back button
+     */
+    _mobileTitle: string;
     /**
      * When true the features list view will be displayed
      */
@@ -70,6 +80,10 @@ export declare class InfoCard {
      * used for widget instance
      */
     protected _features: __esri.Features;
+    /**
+     * IPopupUtils: When false alerts will be shown to indicate that the layer must have editing enabled for edit actions
+     */
+    protected _popupUtils: IPopupUtils;
     /**
      * esri/core/reactiveUtils: https://developers.arcgis.com/javascript/latest/api-reference/esri-core-reactiveUtils.html
      */
@@ -78,6 +92,12 @@ export declare class InfoCard {
      * Watch for changes to the graphic and update the feature widget
      */
     graphicsWatchHandler(): Promise<void>;
+    /**
+     * 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)
+     */
+    isMobileWatchHandler(): Promise<void>;
     /**
      * Watch for changes to the mapView and re-init the Feature widget
      */
@@ -88,10 +108,14 @@ export declare class InfoCard {
      * @returns Promise resolving with the current feature
      */
     getSelectedFeature(): Promise<any>;
+    /**
+     * Emitted on demand when the popup is closed
+     */
+    popupClosed: EventEmitter<void>;
     /**
      * Emitted on demand when the selected index changes
      */
-    selectionChanged: EventEmitter<__esri.Graphic>;
+    selectionChanged: EventEmitter<__esri.Graphic[]>;
     /**
      * Respond to and close the edit record display
      *
@@ -129,33 +153,23 @@ export declare class InfoCard {
      */
     protected _initFeaturesWidget(): Promise<void>;
     /**
-     * Set the alertOpen member to false when the alert is closed
-     *
-     * @returns void
+     * Close the popup and emit the selected features
      */
-    protected _alertClosed(): void;
+    protected _closePopup(): void;
     /**
-     * Close the edit record
-     *
-     * @returns void
+     * Set the alertOpen member to false when the alert is closed
      */
-    protected _editRecordClosed(): void;
+    protected _alertClosed(): void;
     /**
      * Open the edit record
-     *
-     * @returns void
      */
     protected _openEditRecord(): void;
     /**
      * Go to the previous feature in the features widget
-     *
-     * @returns void
      */
     protected _back(): void;
     /**
      * Go to the next feature in the features widget
-     *
-     * @returns void
      */
     protected _next(): void;
     /**