@esri/solutions-components 0.7.23 → 0.7.25

package/dist/components/crowdsource-reporter.js

@@ -4,15 +4,45 @@
  * http://www.apache.org/licenses/LICENSE-2.0
  */
 import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { g as getLocaleComponentStrings } from './locale.js';
+import { d as defineCustomElement$u } from './action.js';
+import { d as defineCustomElement$t } from './action-menu.js';
+import { d as defineCustomElement$s } from './alert.js';
+import { d as defineCustomElement$r } from './button.js';
+import { d as defineCustomElement$q } from './chip.js';
+import { d as defineCustomElement$p } from './filter2.js';
+import { d as defineCustomElement$o } from './flow.js';
+import { d as defineCustomElement$n } from './flow-item.js';
+import { d as defineCustomElement$m } from './handle.js';
+import { d as defineCustomElement$l } from './icon.js';
+import { d as defineCustomElement$k } from './input.js';
+import { d as defineCustomElement$j } from './list.js';
+import { d as defineCustomElement$i } from './list-item.js';
+import { d as defineCustomElement$h } from './loader.js';
+import { d as defineCustomElement$g } from './modal.js';
+import { d as defineCustomElement$f } from './notice.js';
+import { d as defineCustomElement$e } from './pagination.js';
+import { d as defineCustomElement$d } from './panel.js';
+import { d as defineCustomElement$c } from './popover.js';
+import { d as defineCustomElement$b } from './progress.js';
+import { d as defineCustomElement$a } from './scrim.js';
+import { d as defineCustomElement$9 } from './shell.js';
+import { d as defineCustomElement$8 } from './stack.js';
+import { d as defineCustomElement$7 } from './tooltip.js';
+import { d as defineCustomElement$6 } from './delete-button2.js';
+import { d as defineCustomElement$5 } from './edit-card2.js';
+import { d as defineCustomElement$4 } from './feature-list2.js';
+import { d as defineCustomElement$3 } from './info-card2.js';
+import { d as defineCustomElement$2 } from './layer-list2.js';
 
-const crowdsourceReporterCss = ":host{display:block}";
+const crowdsourceReporterCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.width-full{width:100% !important}.width-0{width:0}.height-full{height:100% !important}.height-0{height:0}.overflow-hidden{overflow:hidden}.border{border:1px solid var(--calcite-color-border-3)}.map-container{position:absolute;width:calc(100% - 390px);left:390px}.side-panel{padding:2px;width:390px;height:100%;position:absolute;top:0;left:0;z-index:60}.error-msg{padding:10px}.collapsed-side-panel{top:calc(100% - 55px);height:54px}";
 
 const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class CrowdsourceReporter extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
-        this.__attachShadow();
         this.description = undefined;
+        this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
         this.enableAnonymousComments = undefined;
         this.enableComments = undefined;
@@ -26,22 +56,39 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         this.reportSubmittedMessage = undefined;
         this.searchConfiguration = undefined;
         this.showComments = undefined;
+        this.defaultWebmap = "";
+        this.enableSearch = true;
+        this.enableHome = true;
+        this.mapInfos = [];
+        this.theme = "light";
+        this.enableZoom = true;
+        this._mapInfo = undefined;
+        this._flowItems = ["layer-list"];
+        this._sidePanelCollapsed = false;
+        this._translations = undefined;
+        this._hasValidLayers = false;
     }
     //--------------------------------------------------------------------------
     //
-    //  State (internal)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Properties (protected)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Watch handlers
     //
     //--------------------------------------------------------------------------
+    /**
+     * Called each time the mapView prop is changed.
+     */
+    async isMobileWatchHandler() {
+        if (this.isMobile) {
+            this._sidePanelCollapsed = false;
+        }
+    }
+    /**
+     * Called each time the mapView prop is changed.
+     */
+    async mapViewWatchHandler() {
+        await this.mapView.when(async () => {
+            await this.setMapView();
+        });
+    }
     //--------------------------------------------------------------------------
     //
     //  Methods (public)
@@ -59,18 +106,17 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     //--------------------------------------------------------------------------
     /**
      * StencilJS: Called once just after the component is first connected to the DOM.
-     *
+     * Create component translations and monitor the mediaQuery change to detect mobile/desktop mode
      * @returns Promise when complete
      */
-    // async componentWillLoad(): Promise<void> {
-    //   await this._getTranslations();
-    //   await this._initModules();
-    // }
+    async componentWillLoad() {
+        await this._getTranslations();
+    }
     /**
      * Renders the component.
      */
     render() {
-        return (h(Host, null, h("slot", null, this.loginTitle + this.description)));
+        return (h(Host, null, h("div", null, h("calcite-shell", { "content-behind": true }, this._getReporter()))));
     }
     //--------------------------------------------------------------------------
     //
@@ -78,37 +124,139 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
     //
     //--------------------------------------------------------------------------
     /**
-     * Load esri javascript api modules
-     *
-     * @returns Promise resolving when function is done
-     *
+     * Get the reporter app functionality
+     * @protected
+     */
+    _getReporter() {
+        const renderLists = [];
+        this._flowItems.forEach((item) => {
+            switch (item) {
+                case "layer-list":
+                    renderLists.push(this.getLayerListFlowItem());
+                    break;
+                case "feature-list":
+                    renderLists.push(this.getFeatureListFlowItem(this._selectedLayerId, this._selectedLayerName));
+                    break;
+                case "feature-details":
+                    renderLists.push(this.getFeatureDetailsFlowItem());
+                    break;
+            }
+        });
+        let sidePanelClass = "side-panel";
+        //in case of mobile handle for collapsed styles of the panel
+        if (this.isMobile && this._sidePanelCollapsed) {
+            sidePanelClass += " collapsed-side-panel";
+        }
+        const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
+        return (h("calcite-panel", { class: sidePanelClass + " width-full " + themeClass }, this.mapView
+            ? h("calcite-flow", null, (renderLists === null || renderLists === void 0 ? void 0 : renderLists.length) > 0 && renderLists)
+            : h("calcite-loader", { scale: "m" })));
+    }
+    /**
+     * Get the feature layer list
+     * @returns the layer list items
+     * @protected
+     */
+    getLayerListFlowItem() {
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this.reportsHeader }, this._hasValidLayers && h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), this._hasValidLayers && h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this._hasValidLayers && this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true, "full-width": true }, h("layer-list", { class: "height-full", layers: this.layers, mapView: this.mapView, noLayerErrorMsg: this._translations.noLayerToDisplayErrorMsg, onLayerSelect: this.displayFeaturesList.bind(this), onLayersListLoaded: this.layerListLoaded.bind(this) }))));
+    }
+    /**
+     * When layer list is loaded, we will receive the list of layers, if its  means we don't have any valid layer to be listed
+     * @param evt Event which has list of layers
+     * @protected
+     */
+    layerListLoaded(evt) {
+        const layersListed = evt.detail;
+        this._hasValidLayers = layersListed.length > 0;
+    }
+    /**On click of layer list item show feature list
+     * @param evt Event which has details of selected layerId and layerName
+     * @protected
+     */
+    displayFeaturesList(evt) {
+        this._selectedLayerId = evt.detail.layerId;
+        this._selectedLayerName = evt.detail.layerName;
+        this._flowItems = [...this._flowItems, "feature-list"];
+    }
+    /**
+     * On back from feature list navigate to the Layer list panel
+     * @protected
+     */
+    backFromFeatureList() {
+        const updatedFlowItems = [...this._flowItems];
+        updatedFlowItems.pop();
+        this._flowItems = [...updatedFlowItems];
+    }
+    /**
+     * Toggle side panel in case of mobile mode
      * @protected
      */
-    // protected async _initModules(): Promise<void> {
-    //   const [geometryEngine, jsonUtils]: [
-    //     __esri.geometryEngine,
-    //     __esri.symbolsSupportJsonUtils
-    //   ] = await loadModules([
-    //     "esri/geometry/geometryEngine",
-    //     "esri/symbols/support/jsonUtils"
-    //   ]);
-    //   this._geometryEngine = geometryEngine;
-    //   this._jsonUtils = jsonUtils;
-    // }
+    toggleSidePanel() {
+        this._sidePanelCollapsed = !this._sidePanelCollapsed;
+    }
+    /**
+     * When feature is selected from list store that and show feature details
+     * @param evt Event which has details of selected feature
+     */
+    async onFeatureSelectFromList(evt) {
+        this._selectedFeature = [evt.detail];
+        this._flowItems = [...this._flowItems, "feature-details"];
+    }
+    /**
+     * Get feature list of the selected feature layer
+     * @param layerId Layer id
+     * @returns feature list node
+     * @protected
+     */
+    getFeatureListFlowItem(layerId, layerName) {
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: layerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, h("calcite-action", { icon: "sort-ascending-arrow", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.sort, "text-enabled": this.isMobile }), h("calcite-action", { icon: "filter", slot: this.isMobile ? "header-menu-actions" : "header-actions-end", text: this._translations.filter, "text-enabled": this.isMobile }), this.isMobile && this.getActionToExpandCollapsePanel(), this.enableNewReports && h("calcite-button", { appearance: "secondary", slot: "footer", width: "full" }, this.reportButtonText), h("calcite-panel", { "full-height": true }, h("feature-list", { class: "height-full", highlightOnMap: true, mapView: this.mapView, noFeaturesFoundMsg: this._translations.featureErrorMsg, onFeatureSelect: this.onFeatureSelectFromList.bind(this), pageSize: 100, selectedLayerId: layerId }))));
+    }
+    /**
+     * Returns the calcite-flow item for feature details
+     * @returns Node
+     */
+    getFeatureDetailsFlowItem() {
+        return (h("calcite-flow-item", { collapsed: this.isMobile && this._sidePanelCollapsed, heading: this._selectedLayerName, onCalciteFlowItemBack: this.backFromFeatureList.bind(this) }, this.isMobile && this.getActionToExpandCollapsePanel(), h("calcite-action", { icon: "share", slot: "header-actions-end", text: this._translations.share }), h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this._selectedFeature, isLoading: false, isMobile: false, mapView: this.mapView, zoomAndScrollToSelected: true }))));
+    }
+    /**
+     * Returns the action button to Expand/Collapse side panel in mobile mode
+     */
+    getActionToExpandCollapsePanel() {
+        return (h("calcite-action", { icon: this._sidePanelCollapsed ? "chevrons-up" : "chevrons-down", onClick: this.toggleSidePanel.bind(this), slot: "header-actions-end", text: this._sidePanelCollapsed ? this._translations.expand : this._translations.collapse }));
+    }
+    /**
+     * Set the current map info when maps change
+     * @protected
+     */
+    async setMapView() {
+        this.mapView.popupEnabled = false;
+        if (this._defaultCenter && this._defaultLevel) {
+            await this.mapView.goTo({
+                center: this._defaultCenter,
+                zoom: this._defaultLevel
+            });
+            this._defaultCenter = undefined;
+            this._defaultLevel = undefined;
+        }
+    }
     /**
      * Fetches the component's translations
-     *
      * @returns Promise when complete
      * @protected
      */
     async _getTranslations() {
-        // const messages = await getLocaleComponentStrings(this.el);
-        // this._translations = messages[0] as typeof BufferTools_T9n;
+        const messages = await getLocaleComponentStrings(this.el);
+        this._translations = messages[0];
     }
     get el() { return this; }
+    static get watchers() { return {
+        "isMobile": ["isMobileWatchHandler"],
+        "mapView": ["mapViewWatchHandler"]
+    }; }
     static get style() { return crowdsourceReporterCss; }
-}, [1, "crowdsource-reporter", {
+}, [0, "crowdsource-reporter", {
         "description": [1],
+        "isMobile": [4, "is-mobile"],
         "enableAnonymousAccess": [4, "enable-anonymous-access"],
         "enableAnonymousComments": [4, "enable-anonymous-comments"],
         "enableComments": [4, "enable-comments"],
@@ -121,19 +269,178 @@ const CrowdsourceReporter$1 = /*@__PURE__*/ proxyCustomElement(class Crowdsource
         "reportsHeader": [1, "reports-header"],
         "reportSubmittedMessage": [1, "report-submitted-message"],
         "searchConfiguration": [16],
-        "showComments": [4, "show-comments"]
+        "showComments": [4, "show-comments"],
+        "defaultWebmap": [1, "default-webmap"],
+        "enableSearch": [4, "enable-search"],
+        "enableHome": [4, "enable-home"],
+        "mapInfos": [16],
+        "theme": [1],
+        "enableZoom": [4, "enable-zoom"],
+        "_mapInfo": [32],
+        "_flowItems": [32],
+        "_sidePanelCollapsed": [32],
+        "_translations": [32],
+        "_hasValidLayers": [32]
+    }, undefined, {
+        "isMobile": ["isMobileWatchHandler"],
+        "mapView": ["mapViewWatchHandler"]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["crowdsource-reporter"];
+    const components = ["crowdsource-reporter", "calcite-action", "calcite-action-menu", "calcite-alert", "calcite-button", "calcite-chip", "calcite-filter", "calcite-flow", "calcite-flow-item", "calcite-handle", "calcite-icon", "calcite-input", "calcite-list", "calcite-list-item", "calcite-loader", "calcite-modal", "calcite-notice", "calcite-pagination", "calcite-panel", "calcite-popover", "calcite-progress", "calcite-scrim", "calcite-shell", "calcite-stack", "calcite-tooltip", "delete-button", "edit-card", "feature-list", "info-card", "layer-list"];
     components.forEach(tagName => { switch (tagName) {
         case "crowdsource-reporter":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, CrowdsourceReporter$1);
             }
             break;
+        case "calcite-action":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$u();
+            }
+            break;
+        case "calcite-action-menu":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$t();
+            }
+            break;
+        case "calcite-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$s();
+            }
+            break;
+        case "calcite-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$r();
+            }
+            break;
+        case "calcite-chip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$q();
+            }
+            break;
+        case "calcite-filter":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$p();
+            }
+            break;
+        case "calcite-flow":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$o();
+            }
+            break;
+        case "calcite-flow-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$n();
+            }
+            break;
+        case "calcite-handle":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$m();
+            }
+            break;
+        case "calcite-icon":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$l();
+            }
+            break;
+        case "calcite-input":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$k();
+            }
+            break;
+        case "calcite-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$j();
+            }
+            break;
+        case "calcite-list-item":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$i();
+            }
+            break;
+        case "calcite-loader":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$h();
+            }
+            break;
+        case "calcite-modal":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$g();
+            }
+            break;
+        case "calcite-notice":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$f();
+            }
+            break;
+        case "calcite-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
+        case "calcite-panel":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
+        case "calcite-popover":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
+        case "calcite-progress":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
+            }
+            break;
+        case "calcite-scrim":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$a();
+            }
+            break;
+        case "calcite-shell":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "calcite-stack":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "calcite-tooltip":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "delete-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "edit-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "feature-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "info-card":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "layer-list":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
     } });
 }
 defineCustomElement$1();

package/dist/components/delete-button.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DeleteButton extends Components.DeleteButton, HTMLElement {}
+export const DeleteButton: {
+    prototype: DeleteButton;
+    new (): DeleteButton;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/delete-button.js

@@ -0,0 +1,11 @@
+/*!
+ * Copyright 2022 Esri
+ * Licensed under the Apache License, Version 2.0
+ * http://www.apache.org/licenses/LICENSE-2.0
+ */
+import { D as DeleteButton$1, d as defineCustomElement$1 } from './delete-button2.js';
+
+const DeleteButton = DeleteButton$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { DeleteButton, defineCustomElement };