@esri/solutions-components 0.7.25 → 0.7.27

package/dist/esm/crowdsource-reporter.entry.js

@@ -3,16 +3,17 @@
  * Licensed under the Apache License, Version 2.0
  * http://www.apache.org/licenses/LICENSE-2.0
  */
-import { r as registerInstance, h, H as Host, g as getElement } from './index-7183ce4a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-7183ce4a.js';
 import { g as getLocaleComponentStrings } from './locale-731e75a8.js';
 import './esri-loader-eda07632.js';
 import './_commonjsHelpers-d5f9d613.js';
 
-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 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)}.error-msg{padding:10px}";
 
 const CrowdsourceReporter = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.togglePanel = createEvent(this, "togglePanel", 7);
         this.description = undefined;
         this.isMobile = undefined;
         this.enableAnonymousAccess = undefined;
@@ -49,9 +50,7 @@ const CrowdsourceReporter = class {
      * Called each time the mapView prop is changed.
      */
     async isMobileWatchHandler() {
-        if (this.isMobile) {
-            this._sidePanelCollapsed = false;
-        }
+        this._sidePanelCollapsed = false;
     }
     /**
      * Called each time the mapView prop is changed.
@@ -63,16 +62,6 @@ const CrowdsourceReporter = class {
     }
     //--------------------------------------------------------------------------
     //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
     //  Functions (lifecycle)
     //
     //--------------------------------------------------------------------------
@@ -114,13 +103,8 @@ const CrowdsourceReporter = class {
                     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
+        return (h("calcite-panel", { class: "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" })));
     }
@@ -130,7 +114,10 @@ const CrowdsourceReporter = class {
      * @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) }))));
+        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
@@ -165,6 +152,7 @@ const CrowdsourceReporter = class {
      */
     toggleSidePanel() {
         this._sidePanelCollapsed = !this._sidePanelCollapsed;
+        this.togglePanel.emit(this._sidePanelCollapsed);
     }
     /**
      * When feature is selected from list store that and show feature details
@@ -181,7 +169,8 @@ const CrowdsourceReporter = class {
      * @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 }))));
+        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: 30, selectedLayerId: layerId }))));
     }
     /**
      * Returns the calcite-flow item for feature details