@esri/solutions-components 1.2.0-next.56 → 1.2.0-next.58

package/dist/components/feature-details/customElement.js

@@ -1,14 +1,15 @@
-import { c as u } from "../../chunks/runtime.js";
-import { i as m } from "../../chunks/mapViewUtils.js";
-import { css as _, html as o } from "lit";
-import { createRef as p, ref as k } from "lit-html/directives/ref.js";
-import { LitElement as g, createEvent as h, noShadowRoot as f } from "@arcgis/lumina";
-import b from "@arcgis/core/Graphic";
-import C from "@arcgis/core/rest/support/RelationshipQuery";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.56 */
-const F = _`@layer{/**
+v1.2.0-next.58 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { i as getAllTables } from "../../chunks/mapViewUtils.js";
+import { css, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, noShadowRoot } from "@arcgis/lumina";
+import Graphic from "@arcgis/core/Graphic";
+import RelationshipQuery from "@arcgis/core/rest/support/RelationshipQuery";
+const styles = css`@layer{
+/**
  * @license
  * Copyright 2025 Esri
  *
@@ -23,159 +24,302 @@ const F = _`@layer{/**
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */:host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;color:var(--calcite-color-text-1)!important;background-color:var(--calcite-color-foreground-1)!important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}}`;
-class I extends g {
+ */
+
+:host {
+  display: block;
+}
+
+.buttons-container {
+  align-items: center;
+  display: flex;
+  padding: 4px;
+  color: var(--calcite-color-text-1) !important;
+  background-color: var(--calcite-color-foreground-1) !important;
+  border-block-start: 1px solid var(--calcite-color-border-3);
+  border-block-end: 1px solid var(--calcite-color-border-3);
+}
+}`;
+class FeatureDetails extends LitElement {
   constructor() {
-    super(...arguments), this.enableSnapping = !1, this.graphics = [], this.showUserImageInCommentsList = !1, this.showFullCommentTitle = !0, this._likeFieldAvailable = !1, this._likeCount = 0, this._disLikeCount = 0, this._dislikeFieldAvailable = !1, this._commentsAvailable = !1, this._isLikeBtnClicked = !1, this._isDislikeBtnClicked = !1, this._relatedFeaturesOIDs = [], this._updating = !1, this._infoCard = p(), this._commentsList = p(), this._likeField = "", this._dislikeField = "", this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this.relatedTableId = "", this.loadingStatus = h(), this.commentClick = h(), this.commentSelect = h(), this.addComment = h(), this.likeOrDislikeClicked = h(), this.featureSelectionChange = h();
+    super(...arguments);
+    this.enableSnapping = false;
+    this.graphics = [];
+    this.showUserImageInCommentsList = false;
+    this.showFullCommentTitle = true;
+    this._likeFieldAvailable = false;
+    this._likeCount = 0;
+    this._disLikeCount = 0;
+    this._dislikeFieldAvailable = false;
+    this._commentsAvailable = false;
+    this._isLikeBtnClicked = false;
+    this._isDislikeBtnClicked = false;
+    this._relatedFeaturesOIDs = [];
+    this._updating = false;
+    this._infoCard = createRef();
+    this._commentsList = createRef();
+    this._likeField = "";
+    this._dislikeField = "";
+    this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"];
+    this.relatedTableId = "";
+    this.loadingStatus = createEvent();
+    this.commentClick = createEvent();
+    this.commentSelect = createEvent();
+    this.addComment = createEvent();
+    this.likeOrDislikeClicked = createEvent();
+    this.featureSelectionChange = createEvent();
   }
   static {
-    this.properties = { enableSnapping: 5, mapView: 0, graphics: 0, reportingOptions: 0, layerItemsHash: 0, showUserImageInCommentsList: 5, showFullCommentTitle: 5, _likeFieldAvailable: 16, _likeCount: 16, _disLikeCount: 16, _dislikeFieldAvailable: 16, _commentsAvailable: 16, _isLikeBtnClicked: 16, _isDislikeBtnClicked: 16, _relatedFeaturesOIDs: 16, _updating: 16 };
+    this.properties = { enableSnapping: [5, {}, { type: Boolean }], mapView: [0, {}, { attribute: false }], graphics: [0, {}, { attribute: false }], reportingOptions: [0, {}, { attribute: false }], layerItemsHash: [0, {}, { attribute: false }], showUserImageInCommentsList: [5, {}, { type: Boolean }], showFullCommentTitle: [5, {}, { type: Boolean }], _likeFieldAvailable: [16, {}, { state: true }], _likeCount: [16, {}, { state: true }], _disLikeCount: [16, {}, { state: true }], _dislikeFieldAvailable: [16, {}, { state: true }], _commentsAvailable: [16, {}, { state: true }], _isLikeBtnClicked: [16, {}, { state: true }], _isDislikeBtnClicked: [16, {}, { state: true }], _relatedFeaturesOIDs: [16, {}, { state: true }], _updating: [16, {}, { state: true }] };
   }
   static {
-    this.styles = F;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = f;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(i) {
-    i.has("graphics") && this.graphicsWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("graphics")) {
+      void this.graphicsWatchHandler();
+    }
   }
   async graphicsWatchHandler() {
-    await this.getCompleteGraphic(this.graphics[0]), this.checkLikeDislikeFields(), await this.processComments();
+    await this.getCompleteGraphic(this.graphics[0]);
+    this.checkLikeDislikeFields();
+    await this.processComments();
   }
-  async refresh(i) {
-    i && await this.getCompleteGraphic(i), await this.processComments(), i && this.isLikeDislikeConfigured(i.layer) ? this.graphics.length > 1 && this.checkLikeDislikeFields() : (this._likeFieldAvailable = !1, this._dislikeFieldAvailable = !1);
+  async refresh(graphic) {
+    graphic && await this.getCompleteGraphic(graphic);
+    await this.processComments();
+    if (graphic && this.isLikeDislikeConfigured(graphic.layer)) {
+      if (this.graphics.length > 1) {
+        this.checkLikeDislikeFields();
+      }
+    } else {
+      this._likeFieldAvailable = false;
+      this._dislikeFieldAvailable = false;
+    }
   }
   async back() {
-    this._infoCard.value && this._infoCard.value.back();
+    this._infoCard.value && void this._infoCard.value.back();
   }
   async next() {
-    this._infoCard.value && this._infoCard.value.next();
+    this._infoCard.value && void this._infoCard.value.next();
   }
   async toggleListView() {
-    this._infoCard.value && this._infoCard.value.toggleListView();
+    this._infoCard.value && void this._infoCard.value.toggleListView();
   }
   async load() {
-    await this.getCompleteGraphic(this.graphics[0]), this.checkLikeDislikeFields(), await this.processComments();
+    await this.getCompleteGraphic(this.graphics[0]);
+    this.checkLikeDislikeFields();
+    await this.processComments();
   }
   render() {
-    const i = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : "1=0";
-    return o`<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this.graphics} .mapView=${this.mapView} @selectionChanged=${(e) => {
+    const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : "1=0";
+    return html`<calcite-panel><info-card .enableSnapping=${this.enableSnapping} .graphics=${this.graphics} .mapView=${this.mapView} @selectionChanged=${(e) => {
       this.featureSelectionChange.emit(e.detail);
-    }} position=relative ${k(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && o`<div class="buttons-container">${this._commentsAvailable && o`<calcite-button appearance=transparent icon-end=speech-bubble kind=neutral @click=${() => {
+    }} position=relative ${ref(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && html`<div class="buttons-container">${this._commentsAvailable && html`<calcite-button appearance=transparent icon-end=speech-bubble kind=neutral @click=${() => {
       this.addComment.emit();
-    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-up .kind=${this._isLikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onLikeButtonClick} scale=m>${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}</calcite-button>` || ""}${this._dislikeFieldAvailable && o`<calcite-button appearance=transparent icon-end=thumbs-down .kind=${this._isDislikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onDislikeButtonClick} scale=m>${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}</calcite-button>` || ""}</div>` || ""}${this.relatedTableId && this._commentsAvailable && o`<feature-list class="height-full" .mapView=${this.mapView} @featureClick=${() => {
+    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && html`<calcite-button appearance=transparent icon-end=thumbs-up .kind=${this._isLikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onLikeButtonClick} scale=m>${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}</calcite-button>` || ""}${this._dislikeFieldAvailable && html`<calcite-button appearance=transparent icon-end=thumbs-down .kind=${this._isDislikeBtnClicked ? "brand" : "neutral"} .loading=${this._updating} @click=${this.onDislikeButtonClick} scale=m>${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}</calcite-button>` || ""}</div>` || ""}${this.relatedTableId && this._commentsAvailable && html`<feature-list class="height-full" .mapView=${this.mapView} @featureClick=${() => {
       this.commentClick.emit();
     }} @featureSelect=${(e) => {
       this.commentSelect.emit(e.detail);
-    }} page-size=5 .selectedLayerId=${this.relatedTableId} .showFullTitle=${this.showFullCommentTitle} .showUserImageInList=${this.showUserImageInCommentsList} text-size=small .whereClause=${i} ${k(this._commentsList)}></feature-list>` || ""}</calcite-panel>`;
-  }
-  async getCompleteGraphic(i) {
-    if (i) {
-      const e = i.layer, s = e.createQuery(), t = Number(i.getObjectId());
-      if (!Number.isNaN(t)) {
-        s.objectIds = [t];
-        const l = await e.queryFeatures(s);
-        this._selectedGraphic = l.features[0];
+    }} page-size=5 .selectedLayerId=${this.relatedTableId} .showFullTitle=${this.showFullCommentTitle} .showUserImageInList=${this.showUserImageInCommentsList} text-size=small .whereClause=${commentsListWhereClause} ${ref(this._commentsList)}></feature-list>` || ""}</calcite-panel>`;
+  }
+  async getCompleteGraphic(graphic) {
+    if (graphic) {
+      const layer = graphic.layer;
+      const query = layer.createQuery();
+      const oid = Number(graphic.getObjectId());
+      if (!Number.isNaN(oid)) {
+        query.objectIds = [oid];
+        const completeGraphic = await layer.queryFeatures(query);
+        this._selectedGraphic = completeGraphic.features[0];
       }
     }
   }
   async processComments() {
-    const i = this._selectedGraphic?.layer;
-    if (this.reportingOptions && this.reportingOptions[i.id] && this.reportingOptions[i.id].comment && i?.relationships && i.relationships?.length > 0) {
-      const s = this.mapView && await m(this.mapView);
-      let t = null, l = null;
-      if (i?.relationships?.some((a) => {
-        const n = s?.filter((r) => i.url === r.url && r.layerId === a.relatedTableId);
-        return n && n.length > 0 ? (t = n[0], l = a.id, !0) : !1;
-      }), this.relatedTableId = t?.id ?? "", this.relatedTableId) {
-        const a = this._selectedGraphic?.attributes[i?.objectIdField], n = new C({
-          objectIds: [a],
+    const selectedLayer = this._selectedGraphic?.layer;
+    const commentsConfigured = this.reportingOptions && this.reportingOptions[selectedLayer.id] && this.reportingOptions[selectedLayer.id].comment && selectedLayer?.relationships && selectedLayer.relationships?.length > 0;
+    if (commentsConfigured) {
+      const allTables = this.mapView && await getAllTables(this.mapView);
+      let relatedTable = null;
+      let validRelationshipId = null;
+      selectedLayer?.relationships?.some((relationship) => {
+        const relatedTables = allTables?.filter((table) => selectedLayer.url === table.url && table.layerId === relationship.relatedTableId);
+        if (relatedTables && relatedTables.length > 0) {
+          relatedTable = relatedTables[0];
+          validRelationshipId = relationship.id;
+          return true;
+        } else {
+          return false;
+        }
+      });
+      this.relatedTableId = relatedTable?.id ?? "";
+      if (this.relatedTableId) {
+        const objectId = this._selectedGraphic?.attributes[selectedLayer?.objectIdField];
+        const relationshipQuery = new RelationshipQuery({
+          objectIds: [objectId],
           outFields: ["*"],
-          relationshipId: l
-        }), r = n && await i.queryRelatedFeatures(n).catch((d) => {
-          console.error(d);
-        }), c = [];
-        r && r[a] && r[a].features.forEach((d) => {
-          c.push(d.attributes[t.objectIdField]);
-        }), this._relatedFeaturesOIDs = c, this._commentsAvailable = !0;
-      } else
-        this._relatedFeaturesOIDs = [], this._commentsAvailable = !1;
-    } else
-      this._relatedFeaturesOIDs = [], this._commentsAvailable = !1, this.relatedTableId = "";
-  }
-  isLikeDislikeConfigured(i) {
-    let e = !1, s = !1;
-    if (this.reportingOptions && i && this.reportingOptions[i.id]) {
-      if (!this.reportingOptions[i.id].like && !this.reportingOptions[i.id].dislike)
-        return !1;
-      const t = this.reportingOptions[i.id].likeField, l = this.reportingOptions[i.id].dislikeField;
-      if (!t && !l)
-        return !1;
-      i.fields.forEach((a) => {
-        this._validFieldTypes.indexOf(a.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (a.name === t && this.reportingOptions[i.id].like ? e = !0 : a.name === l && this.reportingOptions[i.id].dislike && (s = !0));
+          relationshipId: validRelationshipId
+        });
+        const result = relationshipQuery && await selectedLayer.queryRelatedFeatures(relationshipQuery).catch((e) => {
+          console.error(e);
+        });
+        const relatedOIDs = [];
+        if (result && result[objectId]) {
+          result[objectId].features.forEach((feature) => {
+            relatedOIDs.push(feature.attributes[relatedTable.objectIdField]);
+          });
+        }
+        this._relatedFeaturesOIDs = relatedOIDs;
+        this._commentsAvailable = true;
+      } else {
+        this._relatedFeaturesOIDs = [];
+        this._commentsAvailable = false;
+      }
+    } else {
+      this._relatedFeaturesOIDs = [];
+      this._commentsAvailable = false;
+      this.relatedTableId = "";
+    }
+  }
+  isLikeDislikeConfigured(selectedLayer) {
+    let likeFieldAvailable = false;
+    let dislikeFieldAvailable = false;
+    if (this.reportingOptions && selectedLayer && this.reportingOptions[selectedLayer.id]) {
+      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 (!likeField && !dislikeField) {
+        return false;
+      }
+      selectedLayer.fields.forEach((eachField) => {
+        if (this._validFieldTypes.indexOf(eachField.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[selectedLayer.id].supportsUpdate) {
+          if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {
+            likeFieldAvailable = true;
+          } else if (eachField.name === dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
+            dislikeFieldAvailable = true;
+          }
+        }
       });
     }
-    return e || s;
+    return likeFieldAvailable || dislikeFieldAvailable;
   }
   checkLikeDislikeFields() {
-    this._likeFieldAvailable = !1, this._dislikeFieldAvailable = !1, this._isLikeBtnClicked = !1, this._isDislikeBtnClicked = !1, this._likeCount = 0, this._disLikeCount = 0;
-    const i = this._selectedGraphic?.layer;
-    if (this.reportingOptions && i && this.reportingOptions[i?.id]) {
-      if (this._likeField = this.reportingOptions[i.id].likeField || "", this._dislikeField = this.reportingOptions[i.id].dislikeField || "", !this._likeField && !this._dislikeField)
+    this._likeFieldAvailable = false;
+    this._dislikeFieldAvailable = false;
+    this._isLikeBtnClicked = false;
+    this._isDislikeBtnClicked = false;
+    this._likeCount = 0;
+    this._disLikeCount = 0;
+    const selectedLayer = this._selectedGraphic?.layer;
+    if (this.reportingOptions && selectedLayer && this.reportingOptions[selectedLayer?.id]) {
+      this._likeField = this.reportingOptions[selectedLayer.id].likeField || "";
+      this._dislikeField = this.reportingOptions[selectedLayer.id].dislikeField || "";
+      if (!this._likeField && !this._dislikeField) {
         return;
-      i.fields.forEach((e) => {
-        this._validFieldTypes.indexOf(e.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (e.name === this._likeField && this.reportingOptions[i.id].like ? (this._likeFieldAvailable = !0, this._likeCount = this._selectedGraphic?.attributes[e.name] || 0) : e.name === this._dislikeField && this.reportingOptions[i.id].dislike && (this._dislikeFieldAvailable = !0, this._disLikeCount = this._selectedGraphic?.attributes[e.name] || 0));
-      }), this.getFromLocalStorage();
+      }
+      selectedLayer.fields.forEach((eachField) => {
+        if (this._validFieldTypes.indexOf(eachField.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[selectedLayer.id].supportsUpdate) {
+          if (eachField.name === this._likeField && this.reportingOptions[selectedLayer.id].like) {
+            this._likeFieldAvailable = true;
+            this._likeCount = this._selectedGraphic?.attributes[eachField.name] || 0;
+          } else if (eachField.name === this._dislikeField && this.reportingOptions[selectedLayer.id].dislike) {
+            this._dislikeFieldAvailable = true;
+            this._disLikeCount = this._selectedGraphic?.attributes[eachField.name] || 0;
+          }
+        }
+      });
+      this.getFromLocalStorage();
     }
   }
   onLikeButtonClick() {
-    this._isDislikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && this.reportingOptions[this._selectedGraphic.layer.id].dislike && this.onDislikeButtonClick(), this._isLikeBtnClicked = !this._isLikeBtnClicked, this._isLikeBtnClicked ? this._likeCount++ : this._likeCount--, this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
+    if (this._isDislikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && 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);
   }
   onDislikeButtonClick() {
-    this._isLikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && this.reportingOptions[this._selectedGraphic.layer.id].like && this.onLikeButtonClick(), this._isDislikeBtnClicked = !this._isDislikeBtnClicked, this._isDislikeBtnClicked ? this._disLikeCount++ : this._disLikeCount--, this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
-  }
-  async updateFeaturesLikeDislikeField(i, e) {
-    const s = {}, t = this._selectedGraphic?.layer;
-    this._updating = !0;
-    const l = this._selectedGraphic;
-    if (l) {
-      l.attributes[i] = Number(l.attributes[i]) + (e ? 1 : -1), s[t.objectIdField] = l.attributes[t.objectIdField], s[i] = l.attributes[i];
-      const a = new b();
-      if (a) {
-        a.attributes = s;
-        const n = { updateFeatures: [a] };
-        await t.applyEdits(n).then(() => {
-          this._selectedGraphic = l, this.setInLocalStorage(), this._updating = !1, this.likeOrDislikeClicked.emit();
-        }, (r) => {
-          this._updating = !1, console.log(r);
+    if (this._isLikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && 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);
+  }
+  async updateFeaturesLikeDislikeField(fieldName, buttonClicked) {
+    const attributesToUpdate = {};
+    const selectedLayer = this._selectedGraphic?.layer;
+    this._updating = true;
+    const selectFeatureAttr = this._selectedGraphic;
+    if (selectFeatureAttr) {
+      selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) + (buttonClicked ? 1 : -1);
+      attributesToUpdate[selectedLayer.objectIdField] = selectFeatureAttr.attributes[selectedLayer.objectIdField];
+      attributesToUpdate[fieldName] = selectFeatureAttr.attributes[fieldName];
+      const newGraphicInstance = new Graphic();
+      if (newGraphicInstance) {
+        newGraphicInstance.attributes = attributesToUpdate;
+        const param = { updateFeatures: [newGraphicInstance] };
+        await selectedLayer.applyEdits(param).then(() => {
+          this._selectedGraphic = selectFeatureAttr;
+          this.setInLocalStorage();
+          this._updating = false;
+          this.likeOrDislikeClicked.emit();
+        }, (err) => {
+          this._updating = false;
+          console.log(err);
         });
       }
     }
   }
   getFromLocalStorage() {
-    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = i?.toString() && localStorage[i];
-    if (e) {
-      const t = JSON.parse(e).filter((l) => l.id === this._selectedGraphic?.getObjectId());
-      t.length > 0 && (this._isLikeBtnClicked = t[0].like, this._isDislikeBtnClicked = t[0].dislike);
+    const uniqueLayerId = this._selectedGraphic?.layer && this._selectedGraphic.layer.id;
+    const localStorageUser = uniqueLayerId?.toString() && 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;
+      }
     }
   }
   setInLocalStorage() {
-    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = i?.toString() && localStorage[i];
-    let s = [];
-    if (e) {
-      s = JSON.parse(e);
-      const t = s.findIndex((l) => l.id === this._selectedGraphic?.getObjectId());
-      t >= 0 && s.splice(t, 1);
+    const uniqueLayerId = this._selectedGraphic?.layer && this._selectedGraphic.layer.id;
+    const localStorageInfo = uniqueLayerId?.toString() && localStorage[uniqueLayerId];
+    let information = [];
+    if (localStorageInfo) {
+      information = JSON.parse(localStorageInfo);
+      const index = information.findIndex((arr) => arr.id === this._selectedGraphic?.getObjectId());
+      if (index >= 0) {
+        information.splice(index, 1);
+      }
     }
-    s.push({
+    information.push({
       id: this._selectedGraphic?.getObjectId(),
       like: this._isLikeBtnClicked && this._likeCount !== 0,
       dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
-    }), i?.toString() && localStorage.setItem(i.toString(), JSON.stringify(s));
+    });
+    if (uniqueLayerId?.toString()) {
+      localStorage.setItem(uniqueLayerId.toString(), JSON.stringify(information));
+    }
   }
 }
-u("feature-details", I);
+customElement("feature-details", FeatureDetails);
 export {
-  I as FeatureDetails
+  FeatureDetails
 };
+//# sourceMappingURL=customElement.js.map

package/dist/components/feature-details/customElement.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/feature-details/feature-details.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport { getAllTables } from '../../utils/mapViewUtils';\r\nimport type {\r\n  ILayerItemsHash,\r\n  IReportingOptions\r\n} from '../../utils/interfaces';\r\nimport type { PropertyValues } from 'lit';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  createEvent,\r\n  h,\r\n  method,\r\n  noShadowRoot,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './feature-details.css';\r\nimport type { FeatureList } from '../feature-list/feature-list';\r\nimport type { InfoCard } from '../info-card/info-card';\r\nimport Graphic from '@arcgis/core/Graphic';\r\nimport RelationshipQuery from '@arcgis/core/rest/support/RelationshipQuery';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'feature-details': FeatureDetails;\r\n  }\r\n}\r\n\r\nexport class FeatureDetails extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n\r\n  static override shadowRootOptions = noShadowRoot;\r\n\r\n  override willUpdate(\r\n    changes: PropertyValues<this>\r\n  ): void {\r\n    if (changes.has('graphics')) {\r\n      void this.graphicsWatchHandler();\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** When true the snapping options will be exposed */\r\n  @property() enableSnapping = false;\r\n\r\n  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */\r\n  @property() mapView: __esri.MapView | undefined;\r\n\r\n  /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */\r\n  @property() graphics: __esri.Graphic[] = [];\r\n\r\n  /** IReportingOptions: Key options for reporting */\r\n  @property() reportingOptions: IReportingOptions | undefined;\r\n\r\n  /** ILayerItemsHash: LayerDetailsHash for each layer in the map */\r\n  @property() layerItemsHash: ILayerItemsHash | undefined;\r\n\r\n  /** boolean: When true the profile image of the comment creator will be shown in the comments list */\r\n  @property() showUserImageInCommentsList = false;\r\n\r\n  /** boolean: When false comment will shown in single line in the comments list */\r\n  @property() showFullCommentTitle = true;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: When true configured like field is available in selected layer */\r\n  @state() _likeFieldAvailable = false;\r\n\r\n  /** number: Increment the liked count for feature when like button is clicked */\r\n  @state() _likeCount = 0;\r\n\r\n  /** number: Decrement the disliked count for feature when dislike button is clicked */\r\n  @state() _disLikeCount = 0;\r\n\r\n  /** boolean: When true configured dislike field is available in selected layer */\r\n  @state() _dislikeFieldAvailable = false;\r\n\r\n  /** boolean: When true comments are configured and its table is available in selected layer */\r\n  @state() _commentsAvailable = false;\r\n\r\n  /** boolean: When true button will get brand color */\r\n  @state() _isLikeBtnClicked = false;\r\n\r\n  /** boolean: When true button will get brand color */\r\n  @state() _isDislikeBtnClicked = false;\r\n\r\n  /** string[]: objects ids of the related features (comments) */\r\n  @state() _relatedFeaturesOIDs: string[] = [];\r\n\r\n  /** boolean: When performing any operations set this to true (This will be used to show loading on like/dislike buttons) */\r\n  @state() _updating = false;\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** HTMLCreateFeatureElement: info card component instance */\r\n  private _infoCard = createRef<InfoCard['el']>();\r\n\r\n  /** HTMLFeatureListElement: Feature list component's instance to show the comments */\r\n  private _commentsList = createRef<FeatureList['el']>();\r\n\r\n  /** __esri.Graphic: The current selected feature graphic */\r\n  private _selectedGraphic: __esri.Graphic | undefined;\r\n\r\n  /** string: Available like field in the layer */\r\n  private _likeField = '';\r\n\r\n  /** string: Available dislike field in the layer */\r\n  private _dislikeField = '';\r\n\r\n  /** string[]: Valid field types for like and dislike */\r\n  private _validFieldTypes = ['small-integer', 'integer', 'big-integer', 'single', 'long'];\r\n\r\n  /** string: related table id of selected feature */\r\n  private relatedTableId = '';\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Called each time the graphics prop is changed */\r\n  private async graphicsWatchHandler(): Promise<void> {\r\n    await this.getCompleteGraphic(this.graphics[0]);\r\n    this.checkLikeDislikeFields();\r\n    await this.processComments();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Refresh the features comments which will fetch like, dislike and update the component\r\n   *\r\n   * @returns Promise that resolves when the operation is complete\r\n   */\r\n  @method()\r\n  async refresh(\r\n    graphic?: __esri.Graphic\r\n  ): Promise<void> {\r\n    graphic && await this.getCompleteGraphic(graphic);\r\n    await this.processComments();\r\n    if (graphic && this.isLikeDislikeConfigured(graphic.layer as __esri.FeatureLayer)) {\r\n      // in case of multiple features selected fetch complete feature and update like dislike for current feature\r\n      if (this.graphics.length > 1) {\r\n        this.checkLikeDislikeFields();\r\n      }\r\n    } else {\r\n      this._likeFieldAvailable = false;\r\n      this._dislikeFieldAvailable = false;\r\n    }\r\n  }\r\n\r\n  /** Go to the previous feature in the features widget */\r\n  @method()\r\n  async back(): Promise<void> {\r\n    this._infoCard.value && void this._infoCard.value.back();\r\n  }\r\n\r\n  /** Go to the next feature in the features widget */\r\n  @method()\r\n  async next(): Promise<void> {\r\n    this._infoCard.value && void this._infoCard.value.next();\r\n  }\r\n\r\n  /** Toggle the visibility of the features list view */\r\n  @method()\r\n  async toggleListView(): Promise<void> {\r\n    this._infoCard.value && void this._infoCard.value.toggleListView();\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted on demand when like or dislike button is clicked */\r\n  loadingStatus = createEvent<boolean>();\r\n\r\n  /** Emitted on demand when comment is clicked using the feature-list */\r\n  commentClick = createEvent();\r\n\r\n  /** Emitted on demand when comment is selected using the feature-list */\r\n  commentSelect = createEvent<__esri.Graphic>();\r\n\r\n  /** Emitted on demand when comment icon is clicked */\r\n  addComment = createEvent();\r\n\r\n  /** Emitted on demand when like or dislike button is clicked */\r\n  likeOrDislikeClicked = createEvent();\r\n\r\n  /** Emitted on demand when the selected index changes */\r\n  featureSelectionChange = createEvent<{ selectedFeature: __esri.Graphic[]; selectedFeatureIndex: number }>();\r\n\r\n  /**\r\n   * Called once just after the component is first connected to the DOM.\r\n   *\r\n   * @returns Promise when complete\r\n   */\r\n  async load(): Promise<void> {\r\n    //Apply query to get complete graphic with complete attributes\r\n    await this.getCompleteGraphic(this.graphics[0]);\r\n    this.checkLikeDislikeFields();\r\n    await this.processComments();\r\n  }\r\n\r\n  override render(): JsxNode {\r\n    //When related features found show comments list of only those features else comments list will be empty\r\n    const commentsListWhereClause = this._relatedFeaturesOIDs?.length > 0 ? `objectId in(${this._relatedFeaturesOIDs})` : '1=0';\r\n    return (\r\n      <calcite-panel>\r\n        <info-card\r\n          enableSnapping={this.enableSnapping}\r\n          graphics={this.graphics}\r\n          highlightEnabled={false}\r\n          isLoading={false}\r\n          isMobile={false}\r\n          mapView={this.mapView}\r\n          onselectionChanged={e => {\r\n            this.featureSelectionChange.emit(e.detail);\r\n          }}\r\n          paginationEnabled={false}\r\n          position='relative'\r\n          ref={this._infoCard}\r\n        />\r\n        {(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && (\r\n          <div class='buttons-container'>\r\n            {this._commentsAvailable && (\r\n              <calcite-button\r\n                appearance={'transparent'}\r\n                iconEnd='speech-bubble'\r\n                kind={'neutral'}\r\n                onClick={() => {\r\n                  this.addComment.emit();\r\n                }}\r\n                scale='m'\r\n              >\r\n                {this._relatedFeaturesOIDs.length}\r\n              </calcite-button>\r\n            )}\r\n            {this._likeFieldAvailable && (\r\n              <calcite-button\r\n                appearance={'transparent'}\r\n                iconEnd='thumbs-up'\r\n                kind={this._isLikeBtnClicked ? 'brand' : 'neutral'}\r\n                loading={this._updating}\r\n                onClick={this.onLikeButtonClick}\r\n                scale='m'\r\n              >\r\n                {this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0}\r\n              </calcite-button>\r\n            )}\r\n            {this._dislikeFieldAvailable && (\r\n              <calcite-button\r\n                appearance={'transparent'}\r\n                iconEnd='thumbs-down'\r\n                kind={this._isDislikeBtnClicked ? 'brand' : 'neutral'}\r\n                loading={this._updating}\r\n                onClick={this.onDislikeButtonClick}\r\n                scale='m'\r\n              >\r\n                {this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0}\r\n              </calcite-button>\r\n            )}\r\n          </div>\r\n        )}\r\n        {this.relatedTableId && this._commentsAvailable && (\r\n          <feature-list\r\n            class='height-full'\r\n            mapView={this.mapView}\r\n            onfeatureClick={() => {\r\n              this.commentClick.emit();\r\n            }}\r\n            onfeatureSelect={e => {\r\n              this.commentSelect.emit(e.detail);\r\n            }}\r\n            pageSize={5}\r\n            ref={this._commentsList}\r\n            selectedLayerId={this.relatedTableId}\r\n            showFullTitle={this.showFullCommentTitle}\r\n            showInitialLoading={false}\r\n            showUserImageInList={this.showUserImageInCommentsList}\r\n            textSize={'small'}\r\n            whereClause={commentsListWhereClause}\r\n          />\r\n        )}\r\n      </calcite-panel>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get complete graphic with complete attributes\r\n   *\r\n   * @param graphic selected feature graphic\r\n   * @private\r\n   */\r\n  private async getCompleteGraphic(\r\n    graphic: __esri.Graphic\r\n  ): Promise<void> {\r\n    if (graphic) {\r\n      const layer = graphic.layer as __esri.FeatureLayer;\r\n      const query: any = layer.createQuery();\r\n      const oid = Number(graphic.getObjectId());\r\n      if (!Number.isNaN(oid)) {\r\n        query.objectIds = [oid];\r\n        const completeGraphic = await layer.queryFeatures(query);\r\n        this._selectedGraphic = completeGraphic.features[0];\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Process the comments functionality.\r\n   * If comments are configured, fetches the related comments ans creates the input for comments list\r\n   *\r\n   * @private\r\n   */\r\n  private async processComments(): Promise<void> {\r\n    const selectedLayer = this._selectedGraphic?.layer as __esri.FeatureLayer;\r\n    const commentsConfigured =\r\n      this.reportingOptions && this.reportingOptions[selectedLayer.id] &&\r\n      this.reportingOptions[selectedLayer.id].comment && selectedLayer?.relationships && selectedLayer.relationships?.length > 0;\r\n    if (commentsConfigured) {\r\n      //Get comments table id from map\r\n      const allTables = this.mapView && await getAllTables(this.mapView);\r\n      let relatedTable: any = null;\r\n      let validRelationshipId: any = null;\r\n      selectedLayer?.relationships?.some((relationship: any) => {\r\n        const relatedTables = allTables?.filter(\r\n          table => selectedLayer.url === (table as __esri.FeatureLayer).url && (table as __esri.FeatureLayer).layerId === relationship.relatedTableId,\r\n        );\r\n        if (relatedTables && relatedTables.length > 0) {\r\n          relatedTable = relatedTables[0] as __esri.FeatureLayer;\r\n          validRelationshipId = relationship.id;\r\n          return true;\r\n        } else {\r\n          return false;\r\n        }\r\n      });\r\n      this.relatedTableId = relatedTable?.id ?? '';\r\n\r\n      //**Get the related records for the current selected feature**\r\n      if (this.relatedTableId) {\r\n        //current selected feature's objectId\r\n        const objectId = this._selectedGraphic?.attributes[selectedLayer?.objectIdField];\r\n        //create relationship query to get all the related records with the current selected feature\r\n        const relationshipQuery = new RelationshipQuery({\r\n          objectIds: [objectId],\r\n          outFields: ['*'],\r\n          relationshipId: validRelationshipId,\r\n        });\r\n        const result = relationshipQuery && await selectedLayer.queryRelatedFeatures(relationshipQuery).catch(e => {\r\n          console.error(e);\r\n        });\r\n        const relatedOIDs: any[] = [];\r\n        if (result && result[objectId]) {\r\n          result[objectId].features.forEach((feature: any) => {\r\n            relatedOIDs.push(feature.attributes[relatedTable.objectIdField]);\r\n          });\r\n        }\r\n\r\n        // Store the objectid's of the related features, this will be used to show the comments and its count\r\n        this._relatedFeaturesOIDs = relatedOIDs;\r\n        //Set comments available or not\r\n        this._commentsAvailable = true;\r\n      } else {\r\n        this._relatedFeaturesOIDs = [];\r\n        this._commentsAvailable = false;\r\n      }\r\n    } else {\r\n      this._relatedFeaturesOIDs = [];\r\n      this._commentsAvailable = false;\r\n      this.relatedTableId = '';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Checks if the layers is configured for like dislike or not\r\n   *\r\n   * @param selectedLayer Feature layer\r\n   * @returns boolean\r\n   * @private\r\n   */\r\n  private isLikeDislikeConfigured(\r\n    selectedLayer: __esri.FeatureLayer\r\n  ): boolean {\r\n    let likeFieldAvailable = false;\r\n    let dislikeFieldAvailable = false;\r\n    // check if reporting options are configured for the current selected feature's layer\r\n    if (this.reportingOptions && selectedLayer && this.reportingOptions[selectedLayer.id]) {\r\n      //return false if both like and dislike are disabled for the layer\r\n      if (!this.reportingOptions[selectedLayer.id].like && !this.reportingOptions[selectedLayer.id].dislike) {\r\n        return false;\r\n      }\r\n      const likeField = this.reportingOptions[selectedLayer.id].likeField;\r\n      const dislikeField = this.reportingOptions[selectedLayer.id].dislikeField;\r\n      //if both fields are not configured return false\r\n      if (!likeField && !dislikeField) {\r\n        return false;\r\n      }\r\n      //Check if selected layer have the configured like and dislike field and it is of integer types\r\n      selectedLayer.fields.forEach((eachField: __esri.Field) => {\r\n        if (this._validFieldTypes.indexOf(eachField.type) > -1 &&\r\n          this.layerItemsHash && this.reportingOptions &&\r\n          this.layerItemsHash[selectedLayer.id].supportsUpdate\r\n        ) {\r\n          if (eachField.name === likeField && this.reportingOptions[selectedLayer.id].like) {\r\n            likeFieldAvailable = true;\r\n          } else if (eachField.name === dislikeField && this.reportingOptions[selectedLayer.id].dislike) {\r\n            dislikeFieldAvailable = true;\r\n          }\r\n        }\r\n      });\r\n    }\r\n    return likeFieldAvailable || dislikeFieldAvailable;\r\n  }\r\n\r\n  /**\r\n   * Check if configured like or dislike fields are available in the selected layer\r\n   *\r\n   * @private\r\n   */\r\n  private checkLikeDislikeFields(): void {\r\n    this._likeFieldAvailable = false;\r\n    this._dislikeFieldAvailable = false;\r\n    this._isLikeBtnClicked = false;\r\n    this._isDislikeBtnClicked = false;\r\n    this._likeCount = 0;\r\n    this._disLikeCount = 0;\r\n    const selectedLayer = this._selectedGraphic?.layer as __esri.FeatureLayer;\r\n    // check if reporting options are configured for the current selected feature's layer\r\n    if (this.reportingOptions && selectedLayer && this.reportingOptions[selectedLayer?.id]) {\r\n      this._likeField = this.reportingOptions[selectedLayer.id].likeField || '';\r\n      this._dislikeField = this.reportingOptions[selectedLayer.id].dislikeField || '';\r\n      //if both fields are not found return\r\n      if (!this._likeField && !this._dislikeField) {\r\n        return;\r\n      }\r\n      //Check if selected layer have the configured like and dislike fields\r\n      //also, get the current value for like and dislike field from the attributes\r\n      selectedLayer.fields.forEach((eachField: __esri.Field) => {\r\n        if (this._validFieldTypes.indexOf(eachField.type) > -1 &&\r\n          this.layerItemsHash && this.reportingOptions &&\r\n          this.layerItemsHash[selectedLayer.id].supportsUpdate\r\n        ) {\r\n          if (eachField.name === this._likeField && this.reportingOptions[selectedLayer.id].like) {\r\n            this._likeFieldAvailable = true;\r\n            // Sets like count from selected graphic's attribute or defaults to 0 if not available.\r\n            // This will be used to show the like count in the button\r\n            this._likeCount = this._selectedGraphic?.attributes[eachField.name] || 0;\r\n          } else if (eachField.name === this._dislikeField && this.reportingOptions[selectedLayer.id].dislike) {\r\n            this._dislikeFieldAvailable = true;\r\n            // Sets dislike count from selected graphic's attribute or defaults to 0 if not available.\r\n            // This will be used to show the dislike count in the button\r\n            this._disLikeCount = this._selectedGraphic?.attributes[eachField.name] || 0;\r\n          }\r\n        }\r\n      });\r\n      this.getFromLocalStorage();\r\n    }\r\n  }\r\n\r\n  /**\r\n   * On like button click highlight the like button and update the feature\r\n   *\r\n   * @private\r\n   */\r\n  private onLikeButtonClick(): void {\r\n    if (this._isDislikeBtnClicked &&\r\n      this._selectedGraphic?.layer &&\r\n      this.reportingOptions &&\r\n      this.reportingOptions[this._selectedGraphic.layer.id].dislike\r\n    ) {\r\n      this.onDislikeButtonClick();\r\n    }\r\n    this._isLikeBtnClicked = !this._isLikeBtnClicked;\r\n    if (this._isLikeBtnClicked) {\r\n      this._likeCount++;\r\n    } else {\r\n      this._likeCount--;\r\n    }\r\n    void this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);\r\n  }\r\n\r\n  /**\r\n   * On dislike button click highlight the dislike button and update the feature\r\n   *\r\n   * @private\r\n   */\r\n  private onDislikeButtonClick(): void {\r\n    if (this._isLikeBtnClicked &&\r\n      this._selectedGraphic?.layer &&\r\n      this.reportingOptions &&\r\n      this.reportingOptions[this._selectedGraphic.layer.id].like\r\n    ) {\r\n      this.onLikeButtonClick();\r\n    }\r\n    this._isDislikeBtnClicked = !this._isDislikeBtnClicked;\r\n    if (this._isDislikeBtnClicked) {\r\n      this._disLikeCount++;\r\n    } else {\r\n      this._disLikeCount--;\r\n    }\r\n    void this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);\r\n  }\r\n\r\n  /**\r\n   * Update the feature if user click on like or dislike button\r\n   *\r\n   * @param fieldName field name of the feature for like or dislike attribute\r\n   * @param buttonClicked is like or dislike button clicked\r\n   * @private\r\n   */\r\n  private async updateFeaturesLikeDislikeField(\r\n    fieldName: string,\r\n    buttonClicked: boolean\r\n  ): Promise<void> {\r\n    const attributesToUpdate: any = {};\r\n    const selectedLayer = this._selectedGraphic?.layer as __esri.FeatureLayer;\r\n    this._updating = true;\r\n    //Increment the value if button is clicked or else decrement it\r\n    const selectFeatureAttr = this._selectedGraphic;\r\n    if (selectFeatureAttr) {\r\n      selectFeatureAttr.attributes[fieldName] = Number(selectFeatureAttr.attributes[fieldName]) + (buttonClicked ? 1 : -1);\r\n\r\n      //use the oid and like/dislike field value to update\r\n      attributesToUpdate[selectedLayer.objectIdField] = selectFeatureAttr.attributes[selectedLayer.objectIdField];\r\n      attributesToUpdate[fieldName] = selectFeatureAttr.attributes[fieldName];\r\n      const newGraphicInstance = new Graphic();\r\n      if (newGraphicInstance) {\r\n        newGraphicInstance.attributes = attributesToUpdate;\r\n        // Update the feature attribute in the feature layer\r\n        const param = { updateFeatures: [newGraphicInstance] };\r\n        await selectedLayer.applyEdits(param).then(\r\n          () => {\r\n            this._selectedGraphic = selectFeatureAttr;\r\n            //store the like dislike value for the current selected graphic in local storage\r\n            this.setInLocalStorage();\r\n            this._updating = false;\r\n            this.likeOrDislikeClicked.emit();\r\n          },\r\n          err => {\r\n            this._updating = false;\r\n            console.log(err);\r\n          },\r\n        );\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Gets the like/dislike information form local storage and updates the like and dislike button states\r\n   *\r\n   * @private\r\n   */\r\n  private getFromLocalStorage(): void {\r\n    const uniqueLayerId = this._selectedGraphic?.layer && this._selectedGraphic.layer.id;\r\n    //get the data from local storage and check current feature is liked or disliked\r\n    const localStorageUser = uniqueLayerId?.toString() && localStorage[uniqueLayerId];\r\n    if (localStorageUser) {\r\n      const parseArr = JSON.parse(localStorageUser);\r\n      const res = parseArr.filter((arr: any) => arr.id === this._selectedGraphic?.getObjectId());\r\n      if (res.length > 0) {\r\n        this._isLikeBtnClicked = res[0].like;\r\n        this._isDislikeBtnClicked = res[0].dislike;\r\n      }\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Sets the like/dislike information for the current selected graphic in local storage\r\n   *\r\n   * @private\r\n   */\r\n  private setInLocalStorage(): void {\r\n    const uniqueLayerId = this._selectedGraphic?.layer && this._selectedGraphic.layer.id;\r\n    const localStorageInfo = uniqueLayerId?.toString() && localStorage[uniqueLayerId];\r\n    let information = [];\r\n    //if information for the current layer found in local storage update it\r\n    //else add new information for the current layer in the local storage\r\n    if (localStorageInfo) {\r\n      information = JSON.parse(localStorageInfo);\r\n      const index = information.findIndex((arr: any) => arr.id === this._selectedGraphic?.getObjectId());\r\n      //if information for current objectid found delete it, so that we always have info for each oid in a layer only once\r\n      if (index >= 0) {\r\n        information.splice(index, 1);\r\n      }\r\n    }\r\n    //add the information for current selected graphic\r\n    information.push({\r\n      id: this._selectedGraphic?.getObjectId(),\r\n      like: this._isLikeBtnClicked && this._likeCount !== 0,\r\n      dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0,\r\n    });\r\n    if (uniqueLayerId?.toString()) {\r\n      localStorage.setItem(uniqueLayerId.toString(), JSON.stringify(information));\r\n    }\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":"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"}

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

@@ -11,7 +11,7 @@ export declare class FeatureList extends LitElement {
      * @default ''
      */
     selectedLayerId: string;
-    /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /**
      * string: Message to be displayed when features are not found