@esri/solutions-components 0.8.8 → 0.8.10

package/dist/esm/{calcite-flow_5.entry.js → calcite-flow_6.entry.js}

@@ -12,7 +12,7 @@ import { c as connectLocalized, d as disconnectLocalized } from './locale-904407
 import { c as connectMessages, s as setUpMessages, d as disconnectMessages, u as updateMessages } from './t9n-436fb2b1.js';
 import { S as SLOTS$1 } from './resources-00983bd3.js';
 import { l as loadModules, g as getLocaleComponentStrings, f as formatNumber } from './locale-bcbea4ef.js';
-import { a as getAllLayers, g as getLayerOrTable, b as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash } from './mapViewUtils-253178f1.js';
+import { a as getAllLayers, g as getLayerOrTable, b as getFeatureLayerView, h as highlightFeatures, c as getMapLayerHash } from './mapViewUtils-c83c03a4.js';
 import { P as PopupUtils } from './popupUtils-af124b47.js';
 import './guid-b75a5f7b.js';
 import './resources-8834f920.js';
@@ -345,6 +345,7 @@ const CreateFeature = class {
         this.fail = createEvent(this, "fail", 7);
         this.drawComplete = createEvent(this, "drawComplete", 7);
         this.editingAttachment = createEvent(this, "editingAttachment", 7);
+        this.progressStatus = createEvent(this, "progressStatus", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
@@ -489,6 +490,7 @@ const CreateFeature = class {
         //Add handle to watch featureTemplatesViewModel ready state and then start the creation
         const handle = this.reactiveUtils.watch(() => this._editor.viewModel.featureTemplatesViewModel.state, (state) => {
             if (state === 'ready') {
+                this.progressStatus.emit(0.5);
                 void this.startCreate();
             }
         });
@@ -512,6 +514,7 @@ const CreateFeature = class {
             //once the feature template is selected handle the event for formSubmit and sketch complete
             //also, hide the headers and footer in the editor as we will be showing our own submit and cancel button
             this._editor.viewModel.featureTemplatesViewModel.on('select', () => {
+                this.progressStatus.emit(0.75);
                 setTimeout(() => {
                     //on form submit 
                     this._editor.viewModel.featureFormViewModel.on('submit', this.submitted.bind(this));
@@ -519,6 +522,7 @@ const CreateFeature = class {
                     this._editor.viewModel.sketchViewModel.on("create", (evt) => {
                         if (evt.state === "complete") {
                             this.showSearchWidget = false;
+                            this.progressStatus.emit(1);
                             this.drawComplete.emit();
                         }
                     });
@@ -683,6 +687,313 @@ const CreateFeature = class {
 };
 CreateFeature.style = createFeatureCss;
 
+const featureDetailsCss = ":host{display:block}.buttons{align-items:center;background-color:white;display:flex;padding:10px 0 10px 15px;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}.comment-btn{display:flex;gap:5px;width:35px}";
+
+const FeatureDetails = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.loadingStatus = createEvent(this, "loadingStatus", 7);
+        /**
+         * string[]: Valid field types for like and dislike
+         */
+        this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
+        this.mapView = undefined;
+        this.graphics = undefined;
+        this.reportingOptions = undefined;
+        this._likeFieldAvailable = false;
+        this._likeCount = 0;
+        this._disLikeCount = 0;
+        this._dislikeFieldAvailable = false;
+        this._isLikeBtnClicked = false;
+        this._isDislikeBtnClicked = false;
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Watch handlers
+    //
+    //--------------------------------------------------------------------------
+    /**
+     * Called each time the graphics prop is changed
+     */
+    async graphicsWatchHandler() {
+        await this.getCompleteGraphic(this.graphics[0]);
+        this.checkLikeDislikeFields();
+    }
+    //--------------------------------------------------------------------------
+    //
+    //  Methods (public)
+    /**
+     * Refresh the features comments which will fetch like, dislike and update the component
+     * @returns Promise that resolves when the operation is complete
+     */
+    async refresh(graphic) {
+        if (this.isLikeDislikeConfigured(graphic.layer)) {
+            // in case of multiple features selected fetch complete feature and update like dislike for current feature 
+            if (graphic && this.graphics.length > 1) {
+                await this.getCompleteGraphic(graphic);
+                this.checkLikeDislikeFields();
+            }
+        }
+        else {
+            this._likeFieldAvailable = false;
+            this._dislikeFieldAvailable = false;
+        }
+    }
+    /**
+     * Go to the previous feature in the features widget
+     */
+    async back() {
+        void this._infoCard.back();
+    }
+    /**
+     * Go to the next feature in the features widget
+     */
+    async next() {
+        void this._infoCard.next();
+    }
+    /**
+     * Toggle the visibility of the features list view
+     */
+    async toggleListView() {
+        void this._infoCard.toggleListView();
+    }
+    /**
+     * StencilJS: Called once just after the component is first connected to the DOM.
+     *
+     * @returns Promise when complete
+     */
+    async componentWillLoad() {
+        await this._initModules();
+        await this.getCompleteGraphic(this.graphics[0]);
+        this.checkLikeDislikeFields();
+    }
+    render() {
+        var _a, _b, _c, _d;
+        return (h("calcite-panel", { "full-height": true }, h("info-card", { allowEditing: false, graphics: this.graphics, highlightEnabled: false, isLoading: false, isMobile: false, mapView: this.mapView, paginationEnabled: false, position: "relative", ref: el => this._infoCard = el, zoomAndScrollToSelected: true }), (this._likeFieldAvailable || this._dislikeFieldAvailable) &&
+            h("div", { class: 'buttons' }, this._likeFieldAvailable &&
+                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-up", kind: this._isLikeBtnClicked ? "brand" : "neutral", onClick: this.onLikeButtonClick.bind(this), scale: 's' }, (_b = (_a = this._likeCount) !== null && _a !== void 0 ? _a : this._selectedGraphic.attributes[this._likeField]) !== null && _b !== void 0 ? _b : 0), this._dislikeFieldAvailable &&
+                h("calcite-button", { appearance: "transparent", iconEnd: "thumbs-down", kind: this._isDislikeBtnClicked ? "brand" : "neutral", onClick: this.onDislikeButtonClick.bind(this), scale: 's' }, (_d = (_c = this._disLikeCount) !== null && _c !== void 0 ? _c : this._selectedGraphic.attributes[this._dislikeField]) !== null && _d !== void 0 ? _d : 0))));
+    }
+    /**
+     * Load esri javascript api modules
+     *
+     * @returns Promise resolving when function is done
+     *
+     * @protected
+     */
+    async _initModules() {
+        const [Graphic] = await loadModules([
+            "esri/Graphic"
+        ]);
+        this.Graphic = Graphic;
+    }
+    /**
+     * Get complete graphic with complete attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    async getCompleteGraphic(graphic) {
+        const layer = graphic.layer;
+        const query = layer.createQuery();
+        query.objectIds = [graphic.getObjectId()];
+        const completeGraphic = await layer.queryFeatures(query);
+        this._selectedGraphic = completeGraphic.features[0];
+    }
+    /**
+     * Checks if the layers is configured for like dislike or not
+     * @param selectedLayer Feature layer
+     * @returns boolean
+     * @protected
+     */
+    isLikeDislikeConfigured(selectedLayer) {
+        let likeFieldAvailable = false;
+        let dislikeFieldAvailable = false;
+        // check if reporting options are configured for the current selected feature's layer
+        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
+            //return false if both like and dislike are disabled for the layer
+            if (!this.reportingOptions[selectedLayer.id].like && !this.reportingOptions[selectedLayer.id].dislike) {
+                return false;
+            }
+            const likeField = this.reportingOptions[selectedLayer.id].likeField;
+            const dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
+            //if both fields are not configured return false
+            if (!likeField && !dislikeField) {
+                return false;
+            }
+            selectedLayer.fields.forEach((eachField) => {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                    if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
+                        likeFieldAvailable = true;
+                    }
+                    else if (eachField.name === dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
+                        dislikeFieldAvailable = true;
+                    }
+                }
+            });
+        }
+        return likeFieldAvailable || dislikeFieldAvailable;
+    }
+    /**
+     * Check if configured like or dislike fields are available in the selected layer
+     * @protected
+     */
+    checkLikeDislikeFields() {
+        this._likeFieldAvailable = false;
+        this._dislikeFieldAvailable = false;
+        this._isLikeBtnClicked = false;
+        this._isDislikeBtnClicked = false;
+        this._likeCount = 0;
+        this._disLikeCount = 0;
+        const selectedLayer = this._selectedGraphic.layer;
+        // check if reporting options are configured for the current selected feature's layer
+        if (this.reportingOptions && this.reportingOptions[selectedLayer.id]) {
+            this._likeField = this.reportingOptions[selectedLayer.id].likeField;
+            this._dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;
+            //if both fields are not found return
+            if (!this._likeField && !this._dislikeField) {
+                return;
+            }
+            //Check if selected layer have the configured like and dislike fields
+            //also, get the current value for like and dislike field from the attributes
+            selectedLayer.fields.forEach((eachField) => {
+                if (this._validFieldTypes.indexOf(eachField.type) > -1) {
+                    if (eachField.name === this._likeField && this.reportingOptions[this._selectedGraphic.layer.id].like) {
+                        this._likeFieldAvailable = true;
+                        this._likeCount = this._selectedGraphic.attributes[eachField.name];
+                    }
+                    else if (eachField.name === this._dislikeField && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
+                        this._dislikeFieldAvailable = true;
+                        this._disLikeCount = this._selectedGraphic.attributes[eachField.name];
+                    }
+                }
+            });
+            this.getFromLocalStorage();
+        }
+    }
+    /**
+     * On like button click highlight the like button and update the feature
+     * @protected
+     */
+    onLikeButtonClick() {
+        this.loadingStatus.emit(true);
+        if (this._isDislikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].dislike) {
+            this.onDislikeButtonClick();
+        }
+        this._isLikeBtnClicked = !this._isLikeBtnClicked;
+        if (this._isLikeBtnClicked) {
+            this._likeCount++;
+        }
+        else {
+            this._likeCount--;
+        }
+        void this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
+    }
+    /**
+     * On dislike button click highlight the dislike button and update the feature
+     * @protected
+     */
+    onDislikeButtonClick() {
+        this.loadingStatus.emit(true);
+        if (this._isLikeBtnClicked && this.reportingOptions[this._selectedGraphic.layer.id].like) {
+            this.onLikeButtonClick();
+        }
+        this._isDislikeBtnClicked = !this._isDislikeBtnClicked;
+        if (this._isDislikeBtnClicked) {
+            this._disLikeCount++;
+        }
+        else {
+            this._disLikeCount--;
+        }
+        void this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
+    }
+    /**
+     * 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
+     */
+    async updateFeaturesLikeDislikeField(fieldName, buttonClicked) {
+        const attributesToUpdate = {};
+        const selectedLayer = this._selectedGraphic.layer;
+        //Increment the value if button is clicked or else decrement it
+        const selectFeatureAttr = this._selectedGraphic;
+        if (buttonClicked) {
+            selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) + 1;
+        }
+        else {
+            selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) - 1;
+        }
+        //use the oid and like/dislike field value to update 
+        attributesToUpdate[selectedLayer.objectIdField] = selectFeatureAttr.attributes[selectedLayer.objectIdField];
+        attributesToUpdate[fieldName] = selectFeatureAttr.attributes[fieldName];
+        const newGraphicInstance = new this.Graphic();
+        newGraphicInstance.attributes = attributesToUpdate;
+        // Update the feature attribute in the feature layer
+        const param = { updateFeatures: [newGraphicInstance] };
+        await selectedLayer.applyEdits(param).then(() => {
+            this._selectedGraphic = selectFeatureAttr;
+            //update the current graphics in info card so that, the updated values are reflected in popup content
+            if (this._infoCard) {
+                void this._infoCard.updateCurrentGraphic(this._selectedGraphic);
+            }
+            //store the like dislike value for the current selected graphic in local storage
+            this.setInLocalStorage();
+            this.loadingStatus.emit(false);
+        }, (err) => {
+            this.loadingStatus.emit(false);
+            console.log(err);
+        });
+    }
+    /**
+     * Gets the like/dislike information form local storage and updates the like and dislike button states
+     * @protected
+     */
+    getFromLocalStorage() {
+        const uniqueLayerId = this._selectedGraphic.layer.id;
+        //get the data from local storage and check current feature is liked or disliked 
+        const localStorageUser = localStorage[uniqueLayerId];
+        if (localStorageUser) {
+            const parseArr = JSON.parse(localStorageUser);
+            const res = parseArr.filter((arr) => arr.id === this._selectedGraphic.getObjectId());
+            if (res.length > 0) {
+                this._isLikeBtnClicked = res[0].like;
+                this._isDislikeBtnClicked = res[0].dislike;
+            }
+        }
+    }
+    /**
+     * Sets the like/dislike information for the current selected graphic in local storage
+     * @protected
+     */
+    setInLocalStorage() {
+        const uniqueLayerId = this._selectedGraphic.layer.id;
+        const localStorageInfo = localStorage[uniqueLayerId];
+        let information = [];
+        //if information for the current layer found in local storage update it
+        //else add new information for the current layer in the local storage
+        if (localStorageInfo) {
+            information = JSON.parse(localStorageInfo);
+            const index = information.findIndex((arr) => arr.id === this._selectedGraphic.getObjectId());
+            //if information for current objectid found delete it, so that we always have info for each oid in a layer only once
+            if (index >= 0) {
+                information.splice(index, 1);
+            }
+        }
+        //add the information for current selected graphic
+        information.push({
+            id: this._selectedGraphic.getObjectId(),
+            like: this._isLikeBtnClicked && this._likeCount !== 0,
+            dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
+        });
+        localStorage.setItem(uniqueLayerId, JSON.stringify(information));
+    }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "graphics": ["graphicsWatchHandler"]
+    }; }
+};
+FeatureDetails.style = featureDetailsCss;
+
 const featureListCss = ":host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.popup-title{font-weight:500;padding:10px 12px}";
 
 const FeatureList = class {
@@ -812,7 +1123,20 @@ const FeatureList = class {
             const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayerId);
             this._highlightHandle = await highlightFeatures([selectedFeatureObjectId], selectedLayerView, this.mapView, true);
         }
-        this.featureSelect.emit(selectedFeature);
+        await this.emitSelectedFeature(selectedFeature);
+    }
+    /**
+     * Emit selected feature with its complete graphics and attributes
+     * @param graphic selected feature graphic
+     * @protected
+     */
+    async emitSelectedFeature(graphic) {
+        const layer = graphic.layer;
+        const query = layer.createQuery();
+        query.returnGeometry = true;
+        query.objectIds = [graphic.getObjectId()];
+        const completeGraphic = await layer.queryFeatures(query);
+        this.featureSelect.emit(completeGraphic.features[0]);
     }
     /**
      * On feature hover in feature list highlight the feature on the map
@@ -1095,4 +1419,4 @@ const LayerList = class {
 };
 LayerList.style = layerListCss;
 
-export { Flow as calcite_flow, FlowItem as calcite_flow_item, CreateFeature as create_feature, FeatureList as feature_list, LayerList as layer_list };
+export { Flow as calcite_flow, FlowItem as calcite_flow_item, CreateFeature as create_feature, FeatureDetails as feature_details, FeatureList as feature_list, LayerList as layer_list };

package/dist/esm/card-manager_3.entry.js

@@ -5,8 +5,8 @@
  */
 import { r as registerInstance, h, H as Host, g as getElement, c as createEvent } from './index-164d485a.js';
 import { g as getLocaleComponentStrings, l as loadModules } from './locale-bcbea4ef.js';
-import { q as queryFeaturesByID, g as getLayerOrTable, d as goToSelection, e as queryAllIds, f as queryFeatureIds, i as queryFeaturesByGlobalID } from './mapViewUtils-253178f1.js';
-import { d as downloadCSV } from './downloadUtils-0c1e4d7b.js';
+import { q as queryFeaturesByID, g as getLayerOrTable, d as goToSelection, e as queryAllIds, f as queryFeatureIds, i as queryFeaturesByGlobalID } from './mapViewUtils-c83c03a4.js';
+import { d as downloadCSV } from './downloadUtils-25aa808f.js';
 import './esri-loader-1b324844.js';
 import './_commonjsHelpers-0f74c230.js';
 import './interfaces-586e863c.js';
@@ -301,7 +301,7 @@ const LayerTable = class {
      * @param evt CustomEvent the graphic for the current selection
      */
     async selectionChanged(evt) {
-        const g = evt.detail[0];
+        const g = evt.detail.selectedFeature[0];
         const oid = g.getObjectId();
         if (this.zoomAndScrollToSelected) {
             const i = this._table.viewModel.getObjectIdIndex(oid);
@@ -458,7 +458,7 @@ const LayerTable = class {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
+        return (h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, h("map-layer-picker", { appearance: "transparent", defaultLayerId: this.defaultLayerId, display: "inline-flex", height: 50, isMobile: this.isMobile, mapView: this.mapView, onLayerSelectionChange: (evt) => void this._layerSelectionChanged(evt), onlyShowUpdatableLayers: this.onlyShowUpdatableLayers, placeholderIcon: "layers", scale: "l", showSingleLayerAsLabel: true, showTables: true, type: "dropdown" })), !this.isMobile ? this._getActions() : undefined));
     }
     /**
      * Get the actions that are used for various interactions with the table
@@ -1745,7 +1745,7 @@ const MapCard = class {
         }
         else if (loadDefaultMap) {
             this._defaultWebmapHonored = true;
-            this._mapPicker.setMapByID(id);
+            void this._mapPicker.setMapByID(id);
         }
         else if (mapConfigChanged) {
             // Map is the same so no need to reload but we need to update for any changes from the config

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

@@ -3,18 +3,19 @@
  * 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-164d485a.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-164d485a.js';
 import { g as getLocaleComponentStrings } from './locale-bcbea4ef.js';
 import { E as ELayoutMode } from './interfaces-586e863c.js';
-import { g as getLayerOrTable } from './mapViewUtils-253178f1.js';
+import { g as getLayerOrTable } from './mapViewUtils-c83c03a4.js';
 import './esri-loader-1b324844.js';
 import './_commonjsHelpers-0f74c230.js';
 
-const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}";
+const crowdsourceManagerCss = ":host{display:block;--calcite-label-margin-bottom:0px;--solutions-theme-foreground-color:var(--calcite-color-foreground-1)}.padding-1-2{padding:0.5rem}.display-flex{display:flex}.width-full{width:100%}.width-1-2{position:relative;width:50%}.width-1-3{position:relative;width:33.33%}.width-2-3{position:relative;width:66.66%}.width-0{width:0}.height-full{height:100%}.height-1-2{position:relative;height:50%}.height-0{height:0}.toggle-node{width:51px;height:51px}.overflow-hidden{overflow:hidden}.flex-column{flex-direction:column}.border{border:1px solid var(--calcite-color-border-3)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.border-sides{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.position-relative{position:relative}.height-50{height:50%}.adjusted-height-50{height:calc(50% - 25px)}.adjusted-height-100{height:calc(100% - 50px)}.adjusted-height-100-50{height:calc(100% - 50px)}.display-none{display:none}.height-53{height:53px}.position-absolute-53{position:absolute;top:53px}.display-grid{display:grid}.height-50-px{height:50px}.padding-inline-start-75{padding-inline-start:0.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button{width:40px !important;height:40px !important}.esri-floor-filter__level-button{width:40px !important;height:40px !important}.esri-floor-filter__browse-button{width:40px !important;height:40px !important}.position-absolute-50{position:absolute;top:50px;bottom:0px;left:0px;right:0px}.position-absolute-0{position:absolute;top:0px;bottom:0px;left:0px;right:0px}.visibility-hidden{visibility:hidden;height:0px}.position-fixed{position:fixed}.border-width-0{border-width:0px}.border-bottom-width-0{border-bottom-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;right:0;margin:100px 0px}.floating-container .floating-button{box-shadow:0 10px 25px rgb(92 93 94 / 60%);transform:translatey(5px);transition:all 0.3s}";
 
 const CrowdsourceManager = class {
     constructor(hostRef) {
         registerInstance(this, hostRef);
+        this.infoIconButtonClick = createEvent(this, "infoIconButtonClick", 7);
         //--------------------------------------------------------------------------
         //
         //  Properties (protected)
@@ -55,7 +56,7 @@ const CrowdsourceManager = class {
         this.enableSearch = true;
         this.enableShare = false;
         this.enableZoom = true;
-        this.hideMapOnLoad = undefined;
+        this.hideMapOnLoad = false;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
         this.popupHeaderColor = undefined;
@@ -69,7 +70,7 @@ const CrowdsourceManager = class {
         this.theme = "light";
         this.zoomAndScrollToSelected = false;
         this.zoomToScale = undefined;
-        this._expandPopup = false;
+        this._expandPopup = this.hideMapOnLoad;
         this._hideFooter = false;
         this._hideTable = false;
         this._isMobile = undefined;
@@ -93,16 +94,6 @@ const CrowdsourceManager = class {
     enableZoomWatchHandler() {
         this._initMapZoom();
     }
-    //--------------------------------------------------------------------------
-    //
-    //  Methods (public)
-    //
-    //--------------------------------------------------------------------------
-    //--------------------------------------------------------------------------
-    //
-    //  Events (public)
-    //
-    //--------------------------------------------------------------------------
     /**
      * Listen for changes in feature selection and show or hide the map, popup, and table
      */
@@ -149,7 +140,6 @@ const CrowdsourceManager = class {
     async beforeMapChanged() {
         if (this._expandPopup) {
             this._shouldSetMapView = true;
-            this._expandPopup = false;
         }
     }
     /**
@@ -162,6 +152,12 @@ const CrowdsourceManager = class {
             this._layer = layer;
         });
     }
+    /**
+     * Update the state expandPopup when mapInfoChange event occurs
+     */
+    async mapInfoChange() {
+        this._expandPopup = this.hideMapOnLoad;
+    }
     //--------------------------------------------------------------------------
     //
     //  Functions (lifecycle)
@@ -301,7 +297,14 @@ const CrowdsourceManager = class {
      */
     _getBody(layoutMode, panelOpen, hideTable) {
         const contentClass = layoutMode === ELayoutMode.HORIZONTAL ? "" : "display-flex";
-        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable))));
+        const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
+        return (h("calcite-panel", { class: "width-full height-full" }, h("div", { class: `width-full height-full overflow-hidden ${contentClass}` }, this._getMapAndCard(layoutMode, panelOpen, hideTable), this._getTable(layoutMode, panelOpen, hideTable)), h("div", { class: "floating-container", onClick: this.infoButtonClick.bind(this) }, h("calcite-button", { appearance: "solid", class: `floating-button ${themeClass}`, "icon-start": "information-letter", kind: "neutral", label: "", round: true, scale: "l", "split-child": "primary", width: "auto" }))));
+    }
+    /**
+     * Emit the event when info button clicked
+     */
+    infoButtonClick() {
+        this.infoIconButtonClick.emit();
     }
     /**
      * Get the map and card nodes based for the current layout options
@@ -347,7 +350,12 @@ const CrowdsourceManager = class {
         const headerClass = this._isMobile ? "display-none height-0" : "";
         const headerTheme = !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
         const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 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())));
+        return (h("div", { class: `${headerTheme} ${popupNodeClass} ${containerClass}`, style: {
+                '--calcite-color-foreground-1': this.popupHeaderColor,
+                '--calcite-color-foreground-2': this.popupHeaderHoverColor,
+                '--calcite-color-text-3': this.popupHeaderHoverTextColor,
+                '--calcite-color-text-2': this.popupHeaderTextColor, /* font color to apply to the popup header */
+            } }, 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