@esri/solutions-components 5.1.0-next.68 → 5.1.0-next.69

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

@@ -1,164 +1,322 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as u } from "../../chunks/runtime.js";
-import { b 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";
-const F = _`@layer{:host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;color:var(--calcite-color-text-1)!important;background-color:var(--calcite-color-surface-2)!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 {
+import { c as customElement } from "../../chunks/runtime.js";
+import { b 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
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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-surface-2) !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 r = s?.filter((n) => i.url === n.url && n.layerId === a.relatedTableId);
-        return r && r.length > 0 ? (t = r[0], l = a.id, !0) : !1;
-      }), this.relatedTableId = t?.id ?? "", this.relatedTableId) {
-        const a = this._selectedGraphic?.attributes[i?.objectIdField], r = 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
-        }), n = r && await i.queryRelatedFeatures(r).catch((d) => {
-          console.error(d);
-        }), c = [];
-        n && n[a] && n[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 r = { updateFeatures: [a] };
-        await t.applyEdits(r).then(() => {
-          this._selectedGraphic = l, this.setInLocalStorage(), this._updating = !1, this.likeOrDislikeClicked.emit();
-        }, (n) => {
-          this._updating = !1, console.log(n);
+    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
 };

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

@@ -52,7 +52,7 @@ export abstract class FeatureList extends LitElement {
    * @default false
    */
   accessor highlightOnMap: boolean | undefined;
-  /** 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 */
   accessor mapView: __esri.MapView | undefined;
   /**
    * string: Message to be displayed when features are not found