@esri/solutions-components 0.8.7 → 0.8.9

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

@@ -16,7 +16,7 @@ const locale = require('./locale-d237c9d5.js');
 const t9n = require('./t9n-993a84de.js');
 const resources = require('./resources-3e593312.js');
 const locale$1 = require('./locale-3d0a4bc2.js');
-const mapViewUtils = require('./mapViewUtils-3e0fa457.js');
+const mapViewUtils = require('./mapViewUtils-9dc05308.js');
 const popupUtils = require('./popupUtils-6be3588c.js');
 require('./guid-ae73cd27.js');
 require('./resources-9447c777.js');
@@ -349,6 +349,7 @@ const CreateFeature = class {
         this.fail = index.createEvent(this, "fail", 7);
         this.drawComplete = index.createEvent(this, "drawComplete", 7);
         this.editingAttachment = index.createEvent(this, "editingAttachment", 7);
+        this.progressStatus = index.createEvent(this, "progressStatus", 7);
         this.mapView = undefined;
         this.selectedLayerId = undefined;
         this.customizeSubmit = false;
@@ -493,6 +494,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();
             }
         });
@@ -516,6 +518,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));
@@ -523,6 +526,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();
                         }
                     });
@@ -687,6 +691,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) {
+        index.registerInstance(this, hostRef);
+        this.loadingStatus = index.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 (index.h("calcite-panel", { "full-height": true }, index.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) &&
+            index.h("div", { class: 'buttons' }, this._likeFieldAvailable &&
+                index.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 &&
+                index.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 locale$1.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 index.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 {
@@ -816,7 +1127,20 @@ const FeatureList = class {
             const selectedLayerView = await mapViewUtils.getFeatureLayerView(this.mapView, this.selectedLayerId);
             this._highlightHandle = await mapViewUtils.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
@@ -1102,5 +1426,6 @@ LayerList.style = layerListCss;
 exports.calcite_flow = Flow;
 exports.calcite_flow_item = FlowItem;
 exports.create_feature = CreateFeature;
+exports.feature_details = FeatureDetails;
 exports.feature_list = FeatureList;
 exports.layer_list = LayerList;

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

@@ -9,8 +9,8 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-105cf2b9.js');
 const locale = require('./locale-3d0a4bc2.js');
-const mapViewUtils = require('./mapViewUtils-3e0fa457.js');
-const downloadUtils = require('./downloadUtils-8b05d7cc.js');
+const mapViewUtils = require('./mapViewUtils-9dc05308.js');
+const downloadUtils = require('./downloadUtils-dc349b1a.js');
 require('./esri-loader-ce6c3d3d.js');
 require('./_commonjsHelpers-480c2e77.js');
 require('./interfaces-7cd0a48a.js');
@@ -305,7 +305,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);
@@ -462,7 +462,7 @@ const LayerTable = class {
     _getActionBar() {
         const containerClass = this.isMobile ? "width-full" : "";
         const mobileClass = this.isMobile ? "border-top" : "";
-        return (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, index.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 (index.h("calcite-action-bar", { class: containerClass, expandDisabled: true, expanded: true, id: this._getId("bar"), layout: "horizontal" }, index.h("div", { class: `border-end ${containerClass} ${mobileClass}`, id: "solutions-map-layer-picker-container" }, index.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
@@ -1749,7 +1749,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/cjs/crowdsource-manager.cjs.entry.js

@@ -10,7 +10,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 const index = require('./index-105cf2b9.js');
 const locale = require('./locale-3d0a4bc2.js');
 const interfaces = require('./interfaces-7cd0a48a.js');
-const mapViewUtils = require('./mapViewUtils-3e0fa457.js');
+const mapViewUtils = require('./mapViewUtils-9dc05308.js');
 require('./esri-loader-ce6c3d3d.js');
 require('./_commonjsHelpers-480c2e77.js');
 
@@ -62,6 +62,10 @@ const CrowdsourceManager = class {
         this.hideMapOnLoad = undefined;
         this.mapInfos = [];
         this.onlyShowUpdatableLayers = true;
+        this.popupHeaderColor = undefined;
+        this.popupHeaderHoverColor = undefined;
+        this.popupHeaderHoverTextColor = undefined;
+        this.popupHeaderTextColor = undefined;
         this.searchConfiguration = undefined;
         this.shareIncludeEmbed = undefined;
         this.shareIncludeSocial = undefined;