@esri/solutions-components 0.8.7 → 0.8.9

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

@@ -577,14 +577,14 @@ export interface IManagedLayers {
  * Key is the layers guid
  */
 export interface IReportingOptions {
-  [key: string]: IReportOption;
+  [key: string]: IReportingOption;
 }
 
-export interface IReportOption {
+export interface IReportingOption {
   reporting: boolean;
   comment: boolean;
   like: boolean;
+  likeField?: string;
   dislike: boolean;
-  likeField: string;
-  dislikeField: string;
+  dislikeField?: string;
 }

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

@@ -182,6 +182,7 @@ export async function getAllLayers(
  * @param layerView the layer view to highlight
  * @param mapView the map view used if updateExtent is true
  * @param updateExtent optional (default false) boolean to indicate if we should zoom to the extent
+ * @param zoomToScale optional (default 0) zoomScale that individual points will use when zoomed to
  *
  * @returns Promise resolving with the highlight handle
  */
@@ -189,10 +190,11 @@ export async function highlightFeatures(
   ids: number[],
   layerView: __esri.FeatureLayerView,
   mapView: __esri.MapView,
-  updateExtent = false
+  updateExtent = false,
+  zoomToScale = 0
 ): Promise<__esri.Handle> {
   if (updateExtent) {
-    await goToSelection(ids, layerView, mapView, false);
+    await goToSelection(ids, layerView, mapView, false, undefined, zoomToScale);
     //wait for sometime to load the feature in layerView then only the highlight will work
     await new Promise(resolve => setTimeout(resolve, 1000));
   }
@@ -295,7 +297,8 @@ export async function flashSelection(
  * @param layerView the layer view that contains the OIDs
  * @param mapView the map view to show the extent change
  * @param flashFeatures optional (default true) boolean to indicate if we should flash the features
- *
+ * @param featureEffect optional (default undefined) feature effect when flashing the features
+ * @param zoomToScale optional (default to 0) zoomScale that individual points will use when zoomed to
  * @returns Promise resolving when the operation is complete
  *
  */
@@ -304,10 +307,15 @@ export async function goToSelection(
   layerView: __esri.FeatureLayerView,
   mapView: __esri.MapView,
   flashFeatures = true,
-  featureEffect: __esri.FeatureEffect = undefined
+  featureEffect: __esri.FeatureEffect = undefined,
+  zoomToScale = 0
 ): Promise<void> {
   const result = await queryExtent(ids, layerView.layer);
-  await mapView.goTo(result.extent);
+  const goToParams: { target: __esri.Extent; scale?: number; } = { target: result.extent };
+  if (result.count === 1 && layerView.layer.geometryType === 'point' && zoomToScale) {
+    goToParams.scale = zoomToScale
+  }
+  await mapView.goTo(goToParams);
   if (flashFeatures) {
     await flashSelection(ids, layerView, featureEffect);
   }

package/dist/types/components/create-feature/create-feature.d.ts

@@ -72,10 +72,6 @@ export declare class CreateFeature {
      * boolean: Flag to maintain the add attachment
      */
     protected _addingAttachment: boolean;
-    /**
-     * ISearchConfiguration: config for search widget
-     */
-    protected searchConfiguration1: ISearchConfiguration;
     /**
     * Called each time the mapView prop is changed.
     */
@@ -106,6 +102,10 @@ export declare class CreateFeature {
     * Emitted on demand when editing attachments
     */
     editingAttachment: EventEmitter<boolean>;
+    /**
+     * Emitted on demand when editor panel changes
+     */
+    progressStatus: EventEmitter<number>;
     /**
      * StencilJS: Called once just after the component is first connected to the DOM.
      * @returns Promise when complete

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

@@ -112,6 +112,22 @@ export declare class CrowdsourceManager {
      * boolean: When true only editable layers that support the update capability will be available
      */
     onlyShowUpdatableLayers: boolean;
+    /**
+     * string: The background color to apply to the popup header
+     */
+    popupHeaderColor: string;
+    /**
+     * string: The color that will be displayed on hover when expanding the popup header
+     */
+    popupHeaderHoverColor: string;
+    /**
+     * string: The font color that will be displayed on hover when expanding the popup header
+     */
+    popupHeaderHoverTextColor: string;
+    /**
+     * string: The font color to apply to the popup header
+     */
+    popupHeaderTextColor: string;
     /**
      * ISearchConfiguration: Configuration details for the Search widget
      */

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

@@ -15,7 +15,7 @@
  */
 /// <reference types="arcgis-js-api" />
 import { VNode, EventEmitter } from "../../stencil-public-runtime";
-import { IMapChange, IMapClick, IMapInfo, IReportingOptions, ISearchConfiguration, theme } from "../../utils/interfaces";
+import { ILayerExpression, IMapChange, IMapClick, IMapInfo, IReportingOptions, ISearchConfiguration, theme } from "../../utils/interfaces";
 import CrowdsourceReporter_T9n from "../../assets/t9n/crowdsource-reporter/resources.json";
 import { ILayerItemsHash } from "../layer-list/layer-list";
 export declare class CrowdsourceReporter {
@@ -48,10 +48,6 @@ export declare class CrowdsourceReporter {
      * boolean: When true the user will be allowed to submit new reports
      */
     enableNewReports: boolean;
-    /**
-     * string[]: list of layer ids
-     */
-    layers: string[];
     /**
      * string: The text that will display at the top of the landing page
      */
@@ -76,14 +72,6 @@ export declare class CrowdsourceReporter {
      * string: Id of the zoom level from URL params
      */
     level: string;
-    /**
-     * string: The color that will be displayed on hover when expanding the popup header
-     */
-    popupHeaderHoverColor: string;
-    /**
-     * string: The background color to apply to the popup header
-     */
-    popupHeaderColor: string;
     /**
      * string: The word(s) to display in the reports submit button
      */
@@ -136,6 +124,10 @@ export declare class CrowdsourceReporter {
      * number: default scale to zoom to when zooming to a single point feature
      */
     zoomToScale: number;
+    /**
+     * ILayerExpression[]: Array of layer expressions for layers (filter configuration)
+     */
+    layerExpressions: ILayerExpression[];
     /**
      * IMapInfo: The current map info stores configuration details
      */
@@ -169,10 +161,26 @@ export declare class CrowdsourceReporter {
      * boolean: When true show the submit and cancel button
      */
     _showSubmitCancelButton: boolean;
+    /**
+     * boolean: show loading indicator for feature details component upto completing pending operations
+     */
+    _loadingFeatureDetails: boolean;
     /**
      * string: Error message when feature creation fails
      */
     _featureCreationFailedErrorMsg: string;
+    /**
+     * number: Show the updated progress bar status
+     */
+    _updatedProgressBarStatus: number;
+    /**
+     * boolean: When true the filter component will be displayed
+     */
+    _filterOpen: boolean;
+    /**
+     * boolean: When true an indicator will be shown on the action
+     */
+    _filterActive: boolean;
     /**
      * IMapChange: The current map change details
      */
@@ -185,6 +193,10 @@ export declare class CrowdsourceReporter {
      * number: zoom level the map should go to
      */
     protected _defaultLevel: number;
+    /**
+     * string[]: list of configured reporting layer ids
+     */
+    protected layers: string[];
     /**
      * __esri.FeatureLayer[]: Valid layers from the current map
      */
@@ -213,6 +225,10 @@ export declare class CrowdsourceReporter {
      * HTMLCreateFeatureElement: Create Feature component instance
      */
     protected _createFeature: HTMLCreateFeatureElement;
+    /**
+     * HTMLCreateFeatureElement: features details component instance
+     */
+    protected _featureDetails: HTMLFeatureDetailsElement;
     /**
      * HTMLLayerListElement: Create Layer list component instance
      */
@@ -238,6 +254,14 @@ export declare class CrowdsourceReporter {
      */
     protected _highlightHandle: __esri.Handle;
     protected _noLayerToDisplayErrorMsg: string;
+    /**
+     * HTMLInstantAppsFilterListElement: Component from Instant Apps that supports interacting with the current filter config
+     */
+    protected _filterList: HTMLInstantAppsFilterListElement;
+    /**
+     * number: selected feature index
+     */
+    protected selectedFeatureIndex: number;
     /**
      * Called each time the mapView prop is changed.
      */
@@ -246,6 +270,11 @@ export declare class CrowdsourceReporter {
      * Called each time the mapView prop is changed.
      */
     mapViewWatchHandler(): Promise<void>;
+    /**
+     * On Feature details change update the Layer title and the current selected layer id
+     * @param evt Event hold the details of current feature graphic in the info-card
+     */
+    selectionChanged(evt: CustomEvent): Promise<void>;
     /**
     * Emitted when toggle panel button is clicked in reporter
     */
@@ -279,6 +308,31 @@ export declare class CrowdsourceReporter {
      * @protected
      */
     protected _getReporter(): VNode;
+    /**
+     * Show filter component in modal
+     * @returns node to interact with any configured filters for the current layer
+     */
+    protected filterModal(): VNode;
+    /**
+     * Close the filter modal
+     * @protected
+     */
+    protected _closeFilter(): void;
+    /**
+     * When true the filter modal will be displayed
+     * @protected
+     */
+    protected _toggleFilter(): void;
+    /**
+     * Reset the filter active prop
+     * @protected
+     */
+    protected _handleFilterListReset(): void;
+    /**
+     * Check if the layers definitionExpression has been modified
+     * @protected
+     */
+    protected _handleFilterUpdate(): void;
     /**
      * Get the feature layer list
      * @returns the layer list items
@@ -297,6 +351,12 @@ export declare class CrowdsourceReporter {
      * @protected
      */
     protected getFeatureCreateFlowItem(): Node;
+    /**
+     * Update the progress bar status when editor panel changes
+     * @param evt Event which has progress bar status
+     * @protected
+     */
+    protected updatedProgressStatus(evt: CustomEvent): void;
     /**
      * When drawing of incident location completed on map show the submit and cancel button
      * @protected
@@ -370,6 +430,11 @@ export declare class CrowdsourceReporter {
      * @param evt Event which has details of selected feature
      */
     protected onFeatureSelectFromList(evt: CustomEvent): Promise<void>;
+    /**
+     * Show loading indicator while updating the feature details component
+     * @param isLoading is feature detail component loading
+     */
+    protected updatingFeatureDetails(isLoading: boolean): Promise<void>;
     /**
      * Get feature list of the selected feature layer
      * @param layerId Layer id
@@ -383,6 +448,12 @@ export declare class CrowdsourceReporter {
      * @returns Node
      */
     protected getFeatureDetailsFlowItem(): Node;
+    /**
+     * Returns the pagination for the multiple features
+     * Create pagination to avoid the overlap of like, dislike and comment section
+     * @returns Node
+     */
+    protected getFeaturesPagination(): Node;
     /**
      * Sets the selected features and updates the first feature as the current selected feature
      * @param features Graphics array of the features selected
@@ -393,11 +464,6 @@ export declare class CrowdsourceReporter {
      * @param selectedFeature Graphic currently shown in feature details
      */
     protected setCurrentFeature(selectedFeature?: __esri.Graphic): void;
-    /**
-     * On Feature details change update the Layer title and the current selected layer id
-     * @param evt Event hold the details of current feature graphic in the info-card
-     */
-    protected featureDetailsChanged(evt: CustomEvent): void;
     /**
      * Highlights the feature on map
      * @param selectedFeature Graphic currently shown in feature details
@@ -432,6 +498,13 @@ export declare class CrowdsourceReporter {
      * @protected
      */
     protected onMapClick(event: IMapClick): Promise<void>;
+    /**
+   * Get the current index of total string
+   *
+   * @returns the index of total string
+   * @protected
+   */
+    protected _getCount(): string;
     /**
      * Fetches the component's translations
      * @returns Promise when complete

package/dist/types/components/feature-details/feature-details.d.ts

@@ -0,0 +1,151 @@
+/// <reference types="arcgis-js-api" />
+import { EventEmitter } from '../../stencil-public-runtime';
+import { IReportingOptions } from '../../components';
+export declare class FeatureDetails {
+    el: HTMLFeatureDetailsElement;
+    /**
+     * esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html
+     */
+    mapView: __esri.MapView;
+    /**
+     * esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
+     */
+    graphics: __esri.Graphic[];
+    /**
+     * IReportingOptions: Key options for reporting
+     */
+    reportingOptions: IReportingOptions;
+    /**
+     * boolean: When true configured like field is available in selected layer
+     */
+    _likeFieldAvailable: boolean;
+    /**
+     * number: Increment the liked count for feature when like button is clicked
+     */
+    _likeCount: number;
+    /**
+     * number: Decrement the disliked count for feature when dislike button is clicked
+     */
+    _disLikeCount: number;
+    /**
+     * boolean: When true configured dislike field is available in selected layer
+     */
+    _dislikeFieldAvailable: boolean;
+    /**
+     * boolean: When true button will get brand color
+     */
+    _isLikeBtnClicked: boolean;
+    /**
+     * boolean: When true button will get brand color
+     */
+    _isDislikeBtnClicked: boolean;
+    /**
+     * HTMLCreateFeatureElement: info card component instance
+     */
+    protected _infoCard: HTMLInfoCardElement;
+    /**
+     * __esri.Graphic: The current selected feature graphic
+     */
+    protected _selectedGraphic: __esri.Graphic;
+    /**
+     * string: Available like field in the layer
+     */
+    protected _likeField: string;
+    /**
+     * string: Available dislike field in the layer
+     */
+    protected _dislikeField: string;
+    /**
+     * esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html
+     */
+    protected Graphic: typeof import("esri/Graphic");
+    /**
+     * string[]: Valid field types for like and dislike
+     */
+    protected _validFieldTypes: string[];
+    /**
+     * Called each time the graphics prop is changed
+     */
+    graphicsWatchHandler(): Promise<void>;
+    /**
+     * Refresh the features comments which will fetch like, dislike and update the component
+     * @returns Promise that resolves when the operation is complete
+     */
+    refresh(graphic?: __esri.Graphic): Promise<void>;
+    /**
+     * Go to the previous feature in the features widget
+     */
+    back(): Promise<void>;
+    /**
+     * Go to the next feature in the features widget
+     */
+    next(): Promise<void>;
+    /**
+     * Toggle the visibility of the features list view
+     */
+    toggleListView(): Promise<void>;
+    /**
+     * Emitted on demand when like or dislike button is clicked
+     */
+    loadingStatus: EventEmitter<boolean>;
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    componentWillLoad(): Promise<void>;
+    render(): any;
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    protected _initModules(): Promise<void>;
+    /**
+     * Get complete graphic with complete attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    protected getCompleteGraphic(graphic: __esri.Graphic): Promise<void>;
+    /**
+     * Checks if the layers is configured for like dislike or not
+     * @param selectedLayer Feature layer
+     * @returns boolean
+     * @protected
+     */
+    protected isLikeDislikeConfigured(selectedLayer: __esri.FeatureLayer): boolean;
+    /**
+     * Check if configured like or dislike fields are available in the selected layer
+     * @protected
+     */
+    protected checkLikeDislikeFields(): void;
+    /**
+     * On like button click highlight the like button and update the feature
+     * @protected
+     */
+    protected onLikeButtonClick(): void;
+    /**
+     * On dislike button click highlight the dislike button and update the feature
+     * @protected
+     */
+    protected onDislikeButtonClick(): void;
+    /**
+     * Update the feature if user click on like or dislike button
+     * @param fieldName field name of the feature for like or dislike attribute
+     * @param buttonClicked is like or dislike button clicked
+     * @protected
+     */
+    protected updateFeaturesLikeDislikeField(fieldName: string, buttonClicked: boolean): Promise<void>;
+    /**
+     * Gets the like/dislike information form local storage and updates the like and dislike button states
+     * @protected
+     */
+    protected getFromLocalStorage(): void;
+    /**
+     * Sets the like/dislike information for the current selected graphic in local storage
+     * @protected
+     */
+    protected setInLocalStorage(): void;
+}

package/dist/types/components/feature-list/feature-list.d.ts

@@ -127,6 +127,12 @@ export declare class FeatureList {
      * @protected
      */
     protected featureClicked(event: any, selectedFeature: __esri.Graphic): Promise<void>;
+    /**
+     * Emit selected feature with its complete graphics and attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    protected emitSelectedFeature(graphic: __esri.Graphic): Promise<void>;
     /**
      * On feature hover in feature list highlight the feature on the map
      * @param selectedFeature mouseovered feature graphic

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

@@ -47,6 +47,14 @@ export declare class InfoCard {
      * boolean: If true will highlights the features on map using Features Widget
      */
     highlightEnabled?: boolean;
+    /**
+     * boolean: If true will show the pagination for multiple features
+     */
+    paginationEnabled?: boolean;
+    /**
+     * string: Set the position of the feature info
+     */
+    position?: string;
     /**
      * boolean: When true a alert will be shown to indicate a problem or confirm the current action
      */
@@ -120,6 +128,27 @@ export declare class InfoCard {
      * @returns Promise resolving with the current feature
      */
     getSelectedFeature(): Promise<any>;
+    /**
+     * Get the current selected feature from the Features widget
+     * @returns Promise resolving with the current feature
+     */
+    refresh(): Promise<any>;
+    /**
+     * Go to the previous feature in the features widget
+     */
+    back(): Promise<void>;
+    /**
+     * Go to the next feature in the features widget
+     */
+    next(): Promise<void>;
+    /**
+     * Toggle the visibility of the features list view
+     */
+    toggleListView(): Promise<void>;
+    /**
+     * update the current graphics to the features widget
+     */
+    updateCurrentGraphic(selectedGraphic: __esri.Graphic): Promise<void>;
     /**
      * Emitted on demand when the popup is closed
      */
@@ -127,7 +156,10 @@ export declare class InfoCard {
     /**
      * Emitted on demand when the selected index changes
      */
-    selectionChanged: EventEmitter<__esri.Graphic[]>;
+    selectionChanged: EventEmitter<{
+        selectedFeature: __esri.Graphic[];
+        selectedFeatureIndex: number;
+    }>;
     /**
      * Respond to and close the edit record display
      *