@esri/solutions-components 5.0.4-next.3 → 5.0.5

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

@@ -1,322 +1,164 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-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-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 {
+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-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 {
   constructor() {
-    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();
+    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();
   }
   static {
-    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 }] };
+    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 };
   }
   static {
-    this.styles = styles;
+    this.styles = F;
   }
   static {
-    this.shadowRootOptions = noShadowRoot;
+    this.shadowRootOptions = f;
   }
-  willUpdate(changes) {
-    if (changes.has("graphics")) {
-      void this.graphicsWatchHandler();
-    }
+  willUpdate(i) {
+    i.has("graphics") && 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(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 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 back() {
-    this._infoCard.value && void this._infoCard.value.back();
+    this._infoCard.value && this._infoCard.value.back();
   }
   async next() {
-    this._infoCard.value && void this._infoCard.value.next();
+    this._infoCard.value && this._infoCard.value.next();
   }
   async toggleListView() {
-    this._infoCard.value && void this._infoCard.value.toggleListView();
+    this._infoCard.value && 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 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) => {
+    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) => {
       this.featureSelectionChange.emit(e.detail);
-    }} 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=${() => {
+    }} 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=${() => {
       this.addComment.emit();
-    }} 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=${() => {
+    }} 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=${() => {
       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=${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];
+    }} 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];
       }
     }
   }
   async processComments() {
-    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],
+    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],
           outFields: ["*"],
-          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;
-          }
-        }
+          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));
       });
     }
-    return likeFieldAvailable || dislikeFieldAvailable;
+    return e || s;
   }
   checkLikeDislikeFields() {
-    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) {
+    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)
         return;
-      }
-      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();
+      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();
     }
   }
   onLikeButtonClick() {
-    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);
+    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);
   }
   onDislikeButtonClick() {
-    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);
+    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);
         });
       }
     }
   }
   getFromLocalStorage() {
-    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;
-      }
+    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);
     }
   }
   setInLocalStorage() {
-    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);
-      }
+    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);
     }
-    information.push({
+    s.push({
       id: this._selectedGraphic?.getObjectId(),
       like: this._isLikeBtnClicked && this._likeCount !== 0,
       dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
-    });
-    if (uniqueLayerId?.toString()) {
-      localStorage.setItem(uniqueLayerId.toString(), JSON.stringify(information));
-    }
+    }), i?.toString() && localStorage.setItem(i.toString(), JSON.stringify(s));
   }
 }
-customElement("feature-details", FeatureDetails);
+u("feature-details", I);
 export {
-  FeatureDetails
+  I as 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://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/View: https://developers.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