@esri/solutions-components 5.1.0-next.11 → 5.1.0-next.110

package/dist/components/edit-card/customElement.js

@@ -1,16 +1,16 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as n } from "../../chunks/runtime.js";
 import { a as d } from "../../chunks/mapViewUtils.js";
-import { u as p } from "../../chunks/useT9n.js";
-import { css as c, html as r } from "lit";
+import { u as c } from "../../chunks/useT9n.js";
+import { css as p, html as r } from "lit";
 import { createRef as f, ref as g } from "lit-html/directives/ref.js";
 import { LitElement as _, createEvent as s, noShadowRoot as m, safeClassMap as l } from "@arcgis/lumina";
-import u from "@arcgis/core/widgets/Editor";
-import * as o from "@arcgis/core/core/reactiveUtils";
-const w = c`@layer{:host{display:block}#feature-form{padding-top:0}.esri-editor__prompt--danger{position:relative!important;width:100%!important;background-color:var(--calcite-color-foreground-1)!important}.esri-feature__content-node{background-color:var(--calcite-color-foreground-1)!important}.hide-editor-toolbar .esri-editor__panel-toolbar{display:none!important}.position-absolute{position:absolute;inset:0;overflow:auto}.esri-editor__panel-content{padding-block:10px!important}}`;
+import u from "@arcgis/core/widgets/Editor.js";
+import * as o from "@arcgis/core/core/reactiveUtils.js";
+const w = p`@layer{:host{display:block}#feature-form{padding-top:0}.esri-editor__prompt--danger{position:relative!important;width:100%!important;background-color:var(--calcite-color-surface-2)!important}.esri-feature__content-node{background-color:var(--calcite-color-surface-2)!important}.hide-editor-toolbar .esri-editor__panel-toolbar{display:none!important}.position-absolute{position:absolute;inset:0;overflow:auto}.esri-editor__panel-content{padding-block:10px!important}}`;
 class y extends _ {
   constructor() {
-    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphicIndex = 0, this.graphics = [], this.open = !1, this.allowMultipleEditing = !1, this._editorLoading = !1, this._translations = p({ name: "edit-card", blocking: !0 }), this._editContainer = f(), this._shouldClose = !1, this._shouldEmitEditsComplete = !1, this.closeEdit = s(), this.editorInitialized = s(), this.editsComplete = s(), this.refreshGraphics = s(), this.creatingFeature = s(), this.listenOn(window, "featureSelectionChange", this.featureSelectionChange), this.listenOn(window, "mapChanged", this.mapChanged);
+    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphicIndex = 0, this.graphics = [], this.open = !1, this.allowMultipleEditing = !1, this._editorLoading = !1, this._translations = c({ name: "edit-card", blocking: !0 }), this._editContainer = f(), this._shouldClose = !1, this._shouldEmitEditsComplete = !1, this.closeEdit = s(), this.editorInitialized = s(), this.editsComplete = s(), this.refreshGraphics = s(), this.creatingFeature = s(), this.listenOn(window, "featureSelectionChange", this.featureSelectionChange), this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
     this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphicIndex: 9, graphics: 0, mapView: 0, open: 5, allowMultipleEditing: 5, _editorLoading: 16, _translations: 16 };
@@ -44,7 +44,7 @@ class y extends _ {
   }
   render() {
     const t = this.graphics?.length > 0 && this.graphics[0] ? !this.graphics[0].layer.editingEnabled : !0, e = this._editorLoading ? "display-none" : "position-absolute", a = this._editorLoading ? "" : "display-none";
-    return r`<div class="position-absolute">${t ? r`<calcite-notice kind=warning open slot=content-top width=full><div slot=message>${this._translations.enableEditing}</div></calcite-notice>` : void 0}<div class="position-absolute"><div class=${l(e)} id=feature-form ${g(this._editContainer)}></div><calcite-loader class=${l(a)} label scale=s></calcite-loader></div></div>`;
+    return r`<div class="position-absolute">${t ? r`<calcite-notice kind=warning open slot=content-top width=full><div slot=message>${this._translations.enableEditing}</div></calcite-notice>` : void 0}<div class="position-absolute"><div class=${l(e)} id=feature-form ${g(this._editContainer)}></div><calcite-loader class=${l(a)} .label=${this._translations.loading} scale=s></calcite-loader></div></div>`;
   }
   async _initEditorWidget() {
     if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {

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

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { ILayerItemsHash, IReportingOptions } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
@@ -11,11 +12,11 @@ export abstract class FeatureDetails extends LitElement {
    */
   accessor enableSnapping: boolean;
   /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
-  accessor graphics: __esri.Graphic[];
+  accessor graphics: Graphic[];
   /** ILayerItemsHash: LayerDetailsHash for each layer in the map */
   accessor layerItemsHash: ILayerItemsHash | undefined;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** IReportingOptions: Key options for reporting */
   accessor reportingOptions: IReportingOptions | undefined;
   /**
@@ -40,7 +41,7 @@ export abstract class FeatureDetails extends LitElement {
    * @param graphic
    * @returns Promise that resolves when the operation is complete
    */
-  refresh(graphic?: __esri.Graphic): Promise<void>;
+  refresh(graphic?: Graphic): Promise<void>;
   /** Toggle the visibility of the features list view */
   toggleListView(): Promise<void>;
   /** Emitted on demand when comment icon is clicked */
@@ -48,10 +49,10 @@ export abstract class FeatureDetails extends LitElement {
   /** Emitted on demand when comment is clicked using the feature-list */
   readonly commentClick: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when comment is selected using the feature-list */
-  readonly commentSelect: import("@arcgis/lumina").TargetedEvent<this, __esri.Graphic>;
+  readonly commentSelect: import("@arcgis/lumina").TargetedEvent<this, Graphic>;
   /** Emitted on demand when the selected index changes */
   readonly featureSelectionChange: import("@arcgis/lumina").TargetedEvent<this, {
-      selectedFeature: __esri.Graphic[];
+      selectedFeature: Graphic[];
       selectedFeatureIndex: number;
   }>;
   /** Emitted on demand when like or dislike button is clicked */

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

@@ -4,9 +4,9 @@ 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)}}`;
+import b from "@arcgis/core/Graphic.js";
+import C from "@arcgis/core/rest/support/RelationshipQuery.js";
+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 {
   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();
@@ -45,9 +45,9 @@ class I extends g {
     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 ${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 ${k(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && o`<div class="buttons-container">${this._commentsAvailable && o`<calcite-button appearance=transparent aria-label=${`${this._relatedFeaturesOIDs.length} comments`} 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 && o`<calcite-button appearance=transparent aria-label=${`${this._likeCount ?? this._selectedGraphic?.attributes[this._likeField] ?? 0} likes`} 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 aria-label=${`${this._disLikeCount ?? this._selectedGraphic?.attributes[this._dislikeField] ?? 0} dislikes`} 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);

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

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { IReportingOptions, ISortingInfo } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -53,7 +54,7 @@ export abstract class FeatureList extends LitElement {
    */
   accessor highlightOnMap: boolean | undefined;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * string: Message to be displayed when features are not found
    *
@@ -124,7 +125,7 @@ export abstract class FeatureList extends LitElement {
   /** Emitted on demand when feature is clicked using the list */
   readonly featureClick: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when feature is selected using the list */
-  readonly featureSelect: import("@arcgis/lumina").TargetedEvent<this, __esri.Graphic>;
+  readonly featureSelect: import("@arcgis/lumina").TargetedEvent<this, Graphic>;
   readonly "@eventTypes": {
     featureClick: FeatureList["featureClick"]["detail"];
     featureSelect: FeatureList["featureSelect"]["detail"];

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

@@ -6,10 +6,10 @@ import { u as L } from "../../chunks/useT9n.js";
 import { css as I, html as l, nothing as v } from "lit";
 import { createRef as f, ref as d } from "lit-html/directives/ref.js";
 import { LitElement as F, createEvent as g, noShadowRoot as b, safeClassMap as E, safeStyleMap as S } from "@arcgis/lumina";
-import m from "@arcgis/core/config";
-import * as y from "@arcgis/core/symbols/support/symbolUtils";
-import * as $ from "@arcgis/core/core/reactiveUtils";
-const C = I`@layer{:host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.notice-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500}.feature-list-popup-title-small{font-size:small}.feature-list-popup-title-small-ellipsis{font-size:small;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden}.popup-title{padding:0 5px;word-break:break-word}.profile-img{margin:0 5px;min-width:32px}.like-container{display:flex;align-items:center;gap:5px;color:gray!important;font-style:italic}.feature-symbol{padding:0 3px;min-width:30px;display:flex;justify-content:center}.search{padding:10px;background-color:var(--calcite-color-foreground-1)!important;border-block-end:1px solid var(--calcite-color-border-3)}}`;
+import m from "@arcgis/core/config.js";
+import * as y from "@arcgis/core/symbols/support/symbolUtils.js";
+import * as $ from "@arcgis/core/core/reactiveUtils.js";
+const C = I`@layer{:host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.notice-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500}.feature-list-popup-title-small{font-size:small}.feature-list-popup-title-small-ellipsis{font-size:small;white-space:nowrap!important;text-overflow:ellipsis;overflow:hidden}.popup-title{padding:0 5px;word-break:break-word}.profile-img{margin:0 5px;min-width:32px}.like-container{display:flex;align-items:center;gap:5px;color:gray!important;font-style:italic}.feature-symbol{padding:0 3px;min-width:30px;display:flex;justify-content:center}.search{padding:10px;background-color:var(--calcite-color-surface-2)!important;border-block-end:1px solid var(--calcite-color-border-3)}}`;
 class T extends F {
   constructor() {
     super(), this.selectedLayerId = "", this.noFeaturesFoundMsg = "", this.pageSize = 100, this.highlightOnMap = !1, this.highlightOnHover = !1, this.textSize = "large", this.showInitialLoading = !0, this.showErrorWhenNoFeatures = !1, this.showUserImageInList = !1, this.showFeatureSymbol = !1, this.applyLayerViewFilter = !1, this.showFullTitle = !0, this.filterByMapExtent = !1, this._featureItems = [], this._featuresCount = 0, this._isLoading = !1, this._searchPlaceHolder = "", this._fullTextSearchInfo = [], this._translations = L({ name: "feature-list", blocking: !0 }), this._pagination = f(), this._calciteList = f(), this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this._abbreviatedLikeCount = "", this._likeFieldAvailable = !1, this._searchExpression = "", this.featureClick = g(), this.featureSelect = g(), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
@@ -232,7 +232,7 @@ class T extends F {
         this.onFeatureHover(t);
       }} @calciteListItemSelect=${(h) => {
         this.featureClicked(h, t);
-      }} .value=${a}>${this.showUserImageInList && l`<calcite-avatar class=profile-img .fullName=${i?.fullName} scale=m slot=content-start .thumbnail=${i?.userProfileUrl} .userId=${i?.id} .username=${i?.fullName ? i.username : void 0}></calcite-avatar>` || ""}${this.showFeatureSymbol && s && l`<div class=feature-symbol slot=content-start ${d((h) => h && h.replaceChildren(s))}></div>` || ""}<div class=${`popup-title ${n}`} slot=content-start style=${S({ maxWidth: this.textSize === "large" ? "none" : `${p}px` })}>${e}</div>${this._likeFieldAvailable && l`<div class=like-container id=${a.concat("like") ?? v} slot=content-end><span>${this._abbreviatedLikeCount}</span><calcite-icon icon=thumbs-up scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top .referenceElement=${a.concat("like")}>${r}</calcite-tooltip></div>` || ""}<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`;
+      }} .value=${a}>${this.showUserImageInList && l`<calcite-avatar class=profile-img .fullName=${i?.fullName} scale=m slot=content-start .thumbnail=${i?.userProfileUrl} .userId=${i?.id} .username=${i?.fullName ? i.username : void 0}></calcite-avatar>` || ""}${this.showFeatureSymbol && s && l`<div class=feature-symbol slot=content-start ${d((h) => h && h.replaceChildren(s))}></div>` || ""}<div class=${`popup-title ${n}`} slot=content-start style=${S({ maxWidth: this.textSize === "large" ? "none" : `${p}px` })}>${e}</div>${this._likeFieldAvailable && l`<div class=like-container id=${a.concat("like") ?? v} slot=content-end><span>${this._abbreviatedLikeCount}</span><calcite-icon aria-hidden=true icon=thumbs-up scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top .referenceElement=${a.concat("like")}>${r}</calcite-tooltip></div>` || ""}<calcite-icon aria-hidden=true flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon></calcite-list-item>`;
     } else
       return;
   }

package/dist/components/field-selection/customElement.d.ts

@@ -1,5 +1,7 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type FeatureLayer from "@arcgis/core/layers/FeatureLayer.js";
+import type FeatureTable from "@arcgis/core/widgets/FeatureTable.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LayerTable } from "../layer-table/customElement.js";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
@@ -49,11 +51,11 @@ export abstract class FieldSelection extends LitElement {
   /** Extra fields such as attachments and related fields from IA config */
   accessor configExtraFields: any;
   /** esri/views/layers/FeatureLayer: https://developers.arcgis.com/javascript/latest/api-reference/esri-layers-FeatureLayer.html */
-  accessor layer: __esri.FeatureLayer | undefined;
+  accessor layer: FeatureLayer | undefined;
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /** esri/widgets/FeatureTable: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-FeatureTable.html */
-  accessor table: __esri.FeatureTable | undefined;
+  accessor table: FeatureTable | undefined;
   /** LayerTable reference to support column reorder */
   accessor tableRef: LayerTable;
 }

package/dist/components/field-selection/customElement.js

@@ -19,7 +19,7 @@ class C extends T {
     this.styles = v;
   }
   render() {
-    return y`<calcite-action alignment=center appearance=solid class="height-51 width-51" id=solutions-field-selection .text=${this._translations.fieldVisibility} scale=m @click=${() => this._handleFieldVisibilityClick()} @mouseover=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} @mouseout=${() => this._removeTableTooltip()} @focus=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} ${u((e) => this._fieldVisibilityActionNode = e)}><calcite-icon scale=s icon=gear></calcite-icon></calcite-action>`;
+    return y`<calcite-action alignment=center appearance=solid class="height-51 width-51" id=solutions-field-selection .text=${this._translations.fieldVisibility} scale=m @click=${() => this._handleFieldVisibilityClick()} @mouseover=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} @mouseout=${() => this._removeTableTooltip()} @focus=${() => this._addTableTooltip(this._fieldVisibilityActionNode, this._translations.fieldVisibility)} ${u((e) => this._fieldVisibilityActionNode = e)}><calcite-icon aria-hidden=true scale=s icon=gear></calcite-icon></calcite-action>`;
   }
   handleColumnReorder() {
     this._fieldSortOrder = "default", this._fieldVisibilityPopoverNode && (this.removeFieldsPickList(), this._handleFieldVisibilityClick());
@@ -30,113 +30,121 @@ class C extends T {
     const e = this.table?.tableTemplate?.columnTemplates;
     if (this.layer && this.mapView && e && this._fieldVisibilityActionNode) {
       document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler);
-      const t = this.table.fieldColumns.map((s) => ({
-        alias: s.field.alias,
-        description: s.field.description,
-        name: s.field.name,
-        type: s.field.type
+      const t = this.table.fieldColumns.map((l) => ({
+        alias: l.field.alias,
+        description: l.field.description,
+        name: l.field.name,
+        type: l.field.type
       }));
       if (this._hasAttachmentsEnabled(this.layer)) {
-        const s = "Attachments";
-        if (this._shouldShowField(s.toUpperCase(), !1)) {
-          if (!e.some((o) => o.fieldName.toUpperCase() === s.toUpperCase())) {
-            const o = {
-              fieldName: s,
+        const l = "Attachments";
+        if (this._shouldShowField(l.toUpperCase(), !1)) {
+          if (!e.some((a) => a.fieldName.toUpperCase() === l.toUpperCase())) {
+            const a = {
+              fieldName: l,
               type: "attachment",
               visible: !0
             };
-            e.push(o);
+            e.push(a);
           }
           t.push({
-            name: s,
+            name: l,
             alias: "Photos and files",
             type: "none",
-            description: s
+            description: l
           });
         }
       }
       if (this.table.relatedRecordsEnabled && this.layer.relationships && this.layer.relationships.length > 0) {
-        const s = this.layer.parent;
-        this.layer.relationships.forEach((o) => {
-          let a, r = this._shouldShowField(o.name || "", !0);
-          if (!e.some((n) => n.fieldName.toLowerCase() === o.name?.toLowerCase() ? (a = o.name, !0) : !1))
-            if (o.name) {
-              a = o.name;
-              const n = {
-                fieldName: a,
+        const l = this.layer.parent;
+        this.layer.relationships.forEach((a, p) => {
+          let o, n = this._shouldShowField(a.name || "", !0);
+          if (!n) {
+            const c = [...l?.layers || [], ...l?.tables || []].find((h) => h.layerId === a.relatedTableId), d = c ? c.title : void 0;
+            d && this._shouldShowField(d, !0) && (a.name = d, n = !0);
+          }
+          if (!n) {
+            const r = a.keyField || `related_${p}`;
+            this._shouldShowField(r, !0) && (a.name = a.name || r, n = !0);
+          }
+          if (!e.some((r) => r.fieldName.toLowerCase() === a.name?.toLowerCase() ? (o = a.name, !0) : !1))
+            if (a.name) {
+              o = a.name;
+              const r = {
+                fieldName: o,
                 type: "relationship",
                 visible: !0
               };
-              r = this._shouldShowField(a, !0), e.push(n);
+              n = this._shouldShowField(o, !0), e.push(r);
             } else {
-              const n = [...s?.layers || [], ...s?.tables];
-              let d;
-              if (n.some((c) => c.layerId === o.relatedTableId ? (d = c, !0) : !1), d) {
-                a = d.title, o.name = a;
-                const c = {
-                  fieldName: a,
+              const r = [...l?.layers || [], ...l?.tables];
+              let c;
+              if (r.some((d) => d.layerId === a.relatedTableId ? (c = d, !0) : !1), c) {
+                o = c.title, a.name = o;
+                const d = {
+                  fieldName: o,
                   type: "relationship",
                   visible: !0
                 };
-                r = this._shouldShowField(a, !0), e.push(c);
+                n = this._shouldShowField(o, !0), e.push(d);
               }
             }
-          a && r && t.push({
-            name: a,
-            alias: `Related ${a}`,
+          o && n && t.push({
+            name: o,
+            alias: `Related ${o}`,
             type: "none",
-            description: `related:${a}`
+            description: `related:${o}`
           });
         });
       }
       const i = this._fieldVisibilityPopoverNode ? this._fieldVisibilityPopoverNode : document.createElement("arcgis-field-pick-list");
       i.layer = this.layer, i.fields = t, i.showFieldInfo = !0, i.showFieldName = !0, i.showDescription = !1, i.showSelectionAll = !0, i.hideCancel = !0, i.hideSort = !1, i.showFilterLength = 5, i.multiple = !0, i.heading = this._translations.fieldVisibility, i.okBtnText = this._translations.doneWithFieldChanges, i.filterPlaceholderText = this._translations.filterFields, i.sortBy = this._fieldSortOrder ?? "default";
-      const p = this.table?.visibleColumns.map((s) => s.fieldName.startsWith("EsriFeatureTableRelationshipColumn") || s.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") ? s.effectiveLabel : s.fieldName);
-      i.selectedFields = e.reduce((s, o) => ((p ? p.indexOf(o.fieldName) > -1 : o.visible) && s.push(o.fieldName), s), []), this._selectedFields = i.selectedFields, i.style.minHeight = "340px", i.popoverProps = {
+      const m = this.table?.visibleColumns.map((l) => l.fieldName.startsWith("EsriFeatureTableRelationshipColumn") || l.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") ? l.effectiveLabel : l.fieldName);
+      i.selectedFields = e.reduce((l, a) => ((m ? m.indexOf(a.fieldName) > -1 : a.visible) && l.push(a.fieldName), l), []), this._selectedFields = i.selectedFields, i.style.minHeight = "340px", i.popoverProps = {
         refElement: this._fieldVisibilityActionNode,
         popoverWidth: 300,
         placement: "bottom-end",
         offsetDistance: -20,
         triggerDisabled: !1,
         autoClose: !1
-      }, i.addEventListener("arcgisChange", (s) => {
-        s.stopPropagation();
-        const o = s.detail.selectedFields, a = this._getDifference(o, this._selectedFields), r = this._getDifference(this._selectedFields, o);
-        a.concat(r).forEach((d) => {
-          const c = this.layer?.relationships?.map((m) => m.name) || [];
-          if (d === "Attachments") {
-            const m = this.table.columns.find((h) => "onShowAttachments" in h);
-            m.hidden = r.indexOf(d) > -1;
-          } else c.indexOf(d) > -1 ? this.table.columns.filter((h) => "relationshipId" in h).forEach((h) => {
-            r.indexOf(d) > -1, d == h.effectiveLabel && (h.hidden = r.indexOf(d) > -1);
-          }) : this.table.toggleColumnVisibility(d);
-        }), this._selectedFields = o, this._updateTable(this.table.tableTemplate);
-      }), i.addEventListener("arcgisSortByChange", (s) => {
-        s.stopPropagation(), this._fieldSortOrder = s.detail, this._sortFields(s.detail);
+      }, i.addEventListener("arcgisChange", (l) => {
+        l.stopPropagation();
+        const a = l.detail.selectedFields, p = this._getDifference(a, this._selectedFields), o = this._getDifference(this._selectedFields, a);
+        p.concat(o).forEach((r) => {
+          const c = this.layer?.relationships?.map((d) => d.name) || [];
+          if (r === "Attachments") {
+            const d = this.table.columns.find((h) => "onShowAttachments" in h);
+            d.hidden = o.indexOf(r) > -1;
+          } else c.indexOf(r) > -1 ? this.table.columns.filter((h) => "relationshipId" in h).forEach((h) => {
+            o.indexOf(r) > -1, r == h.effectiveLabel && (h.hidden = o.indexOf(r) > -1);
+          }) : this.table.toggleColumnVisibility(r);
+        }), this._selectedFields = a, this._updateTable(this.table.tableTemplate);
+      }), i.addEventListener("arcgisSortByChange", (l) => {
+        l.stopPropagation(), this._fieldSortOrder = l.detail, this._sortFields(l.detail);
       }), i.addEventListener("arcgisClose", () => {
         this._closePopovers(), setTimeout(() => this._fieldVisibilityActionNode.setFocus(), 200);
       }), document.body.appendChild(i), this._fieldVisibilityPopoverNode = i, setTimeout(() => document.addEventListener("click", this._fieldVisibilityPopoverClickHandler), 200);
     }
   }
   _shouldShowField(e, t) {
-    return (this.configExtraFields || []).some((l) => t ? l.replace("related:", "").toUpperCase() === e.toUpperCase() : l.toUpperCase() === e.toUpperCase());
+    return (this.configExtraFields || []).some((s) => t ? s.replace("related:", "").toUpperCase() === e.toUpperCase() : s.toUpperCase() === e.toUpperCase());
   }
   removeFieldsPickList() {
     this._fieldVisibilityPopoverNode && (document.body.removeChild(this._fieldVisibilityPopoverNode), this._fieldVisibilityPopoverNode = void 0);
   }
   _sortFields(e) {
-    const t = this.table.tableTemplate.columnTemplates, l = this._getSortOrder(e), p = t.filter((o) => o.type !== "attachment" && o.type !== "relationship").sort((o, a) => {
-      const r = l.indexOf(o.fieldName), n = l.indexOf(a.fieldName);
-      return r === -1 && n !== -1 ? 1 : r !== -1 && n === -1 ? -1 : r === -1 && n === -1 ? 0 : r - n;
-    }), s = t.filter((o) => o.type === "attachment" || o.type === "relationship");
-    this.tableRef.setColumnOrder([...p, ...s]), this._updateTable(this.table.tableTemplate);
+    const t = this.table.tableTemplate.columnTemplates, s = this._getSortOrder(e), m = t.filter((a) => a.type !== "attachment" && a.type !== "relationship").sort((a, p) => {
+      const o = s.indexOf(a.fieldName), n = s.indexOf(p.fieldName);
+      return o === -1 && n !== -1 ? 1 : o !== -1 && n === -1 ? -1 : o === -1 && n === -1 ? 0 : o - n;
+    }), l = t.filter((a) => a.type === "attachment" || a.type === "relationship");
+    this.tableRef.setColumnOrder([...m, ...l]), this._updateTable(this.table.tableTemplate);
   }
   _getSortOrder(e) {
     const t = [...this.layer.fields];
-    return e === "display" ? t.sort((l, i) => l.alias.localeCompare(i.alias)) : e === "field" ? t.sort((l, i) => l.name.localeCompare(i.name)) : e === "type" && t.sort((l, i) => l.type.localeCompare(i.type)), t.map((l) => l.name);
+    return e === "display" ? t.sort((s, i) => s.alias.localeCompare(i.alias)) : e === "field" ? t.sort((s, i) => s.name.localeCompare(i.name)) : e === "type" && t.sort((s, i) => s.type.localeCompare(i.type)), t.map((s) => s.name);
   }
   _getDifference(e, t) {
-    return e.filter((l) => !t.includes(l));
+    return e.filter((s) => !t.includes(s));
   }
   _updateTable(e) {
     this.table.tableTemplate = e, this._isStandardView() && this._syncAttributeTableTemplate();
@@ -144,13 +152,13 @@ class C extends T {
   async _syncAttributeTableTemplate() {
     const e = this.table.layer;
     if (e.attributeTableTemplate) {
-      const { _modules: t } = this, l = e.attributeTableTemplate.clone();
-      t?.attributeTableTemplateUtils.syncAttributeTableTemplate(this.table, l), JSON.stringify(l) !== JSON.stringify(e.attributeTableTemplate) && (e.attributeTableTemplate = l);
+      const { _modules: t } = this, s = e.attributeTableTemplate.clone();
+      t?.attributeTableTemplateUtils.syncAttributeTableTemplate(this.table, s), JSON.stringify(s) !== JSON.stringify(e.attributeTableTemplate) && (e.attributeTableTemplate = s);
     }
     if (e.attributeTableTemplate?.orderByFields?.length > 1) {
-      const t = e.attributeTableTemplate.clone(), l = this.table.activeSortOrders[0];
+      const t = e.attributeTableTemplate.clone(), s = this.table.activeSortOrders[0];
       t.orderByFields = [
-        { field: l.fieldName, order: l.direction }
+        { field: s.fieldName, order: s.direction }
       ], e.attributeTableTemplate = t, this._syncColumnDirectionsWithOrderByFields();
     }
   }
@@ -169,10 +177,10 @@ class C extends T {
     document.removeEventListener("click", this._fieldVisibilityPopoverClickHandler), this._fieldVisibilityPopoverNode && (document.body.removeChild(this._fieldVisibilityPopoverNode), this._fieldVisibilityPopoverNode = void 0);
   }
   _addTableTooltip(e, t) {
-    const l = document.createElement("calcite-tooltip");
-    l.className = "table-tooltip", l.referenceElement = e, l.placement = "trailing-start", l.open = !0;
+    const s = document.createElement("calcite-tooltip");
+    s.className = "table-tooltip", s.referenceElement = e, s.placement = "trailing-start", s.open = !0;
     const i = document.createElement("div");
-    i.className = "tooltip", i.innerHTML = t, l.append(i), document.body.append(l);
+    i.className = "tooltip", i.innerHTML = t, s.append(i), document.body.append(s);
   }
   _removeTableTooltip() {
     document.querySelectorAll(".table-tooltip").forEach((e) => e.parentNode?.removeChild(e));
@@ -188,8 +196,8 @@ class C extends T {
   _hasAttachmentsEnabled(e) {
     if (!e?.capabilities)
       return !1;
-    const { capabilities: { data: { supportsAttachment: t }, operations: { supportsQueryAttachments: l } } } = e;
-    return t && l;
+    const { capabilities: { data: { supportsAttachment: t }, operations: { supportsQueryAttachments: s } } } = e;
+    return t && s;
   }
 }
 f("field-selection", C);

package/dist/components/info-card/customElement.d.ts

@@ -1,5 +1,6 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type Graphic from "@arcgis/core/Graphic.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
@@ -19,6 +20,7 @@ export abstract class InfoCard extends LitElement {
       back: string;
       indexOfTotal: string;
       delete: string;
+      toggleListView: string;
   } & T9nMeta<{
       fetchingData: string;
       edit: string;
@@ -28,6 +30,7 @@ export abstract class InfoCard extends LitElement {
       back: string;
       indexOfTotal: string;
       delete: string;
+      toggleListView: string;
   }>;
   /**
    * boolean: If true will show edit button
@@ -48,7 +51,7 @@ export abstract class InfoCard extends LitElement {
    */
   accessor enableSnapping: boolean;
   /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
-  accessor graphics: __esri.Graphic[];
+  accessor graphics: Graphic[];
   /**
    * boolean: If true will highlights the features on map using Features Widget
    *
@@ -68,7 +71,7 @@ export abstract class InfoCard extends LitElement {
    */
   accessor isMobile: boolean;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * boolean: If true will show the pagination for multiple features
    *
@@ -110,14 +113,14 @@ export abstract class InfoCard extends LitElement {
    *
    * @param selectedGraphic
    */
-  updateCurrentGraphic(selectedGraphic: __esri.Graphic): Promise<void>;
+  updateCurrentGraphic(selectedGraphic: Graphic): Promise<void>;
   /** Emitted on demand when close button is clicked */
   readonly clearSelection: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when the popup is closed */
   readonly popupClosed: import("@arcgis/lumina").TargetedEvent<this, void>;
   /** Emitted on demand when the selected index changes */
   readonly selectionChanged: import("@arcgis/lumina").TargetedEvent<this, {
-      selectedFeature: __esri.Graphic[];
+      selectedFeature: Graphic[];
       selectedFeatureIndex: number;
   }>;
   readonly "@eventTypes": {

package/dist/components/info-card/customElement.js

@@ -4,9 +4,9 @@ import { P as g } from "../../chunks/popupUtils.js";
 import { u as b } from "../../chunks/useT9n.js";
 import { css as w, nothing as m, html as s } from "lit";
 import { LitElement as v, createEvent as r, noShadowRoot as y, safeStyleMap as $, safeClassMap as i } from "@arcgis/lumina";
-import x from "@arcgis/core/widgets/Features";
-import * as d from "@arcgis/core/core/reactiveUtils";
-const F = w`@layer{:host{display:block;--calcite-label-margin-bottom: 0}.padding-1-2{padding:.5rem}.display-none{display:none!important}.display-flex{display:flex}.position-absolute{position:absolute;inset:0;overflow:auto}.feature-node{position:relative!important}.feature-node .esri-features__footer{display:none!important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:.5rem!important;background-color:var(--calcite-color-foreground-1)!important;height:100%!important}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:700}.z-index-1{z-index:1}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:700}}`;
+import x from "@arcgis/core/widgets/Features.js";
+import * as d from "@arcgis/core/core/reactiveUtils.js";
+const F = w`@layer{:host{display:block;--calcite-label-margin-bottom: 0}.padding-1-2{padding:.5rem}.display-none{display:none!important}.display-flex{display:flex}.position-absolute{position:absolute;inset:0;overflow:auto}.feature-node{position:relative!important}.feature-node .esri-features__footer{display:none!important}.button-container{justify-content:center;align-items:center}.top-border{border-top:1px solid var(--calcite-color-border-1)}.width-100{width:100%}.esri-features__container{padding:.5rem!important;background-color:var(--calcite-color-surface-2)!important;height:100%!important}.end-border{border-inline-end:1px solid var(--calcite-color-border-1)}.font-bold{font-weight:700}.z-index-1{z-index:1}.visibility-hidden{visibility:hidden;height:0px}.padding-inline-start-1{padding-inline-start:1rem}.border-width-0{border-width:0px}.pagination-action{position:relative;left:3px}.pagination-count{color:var(--calcite-color-brand);border-bottom:1px solid var(--calcite-color-brand);font-weight:700}}`;
 class E extends v {
   constructor() {
     super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphics = [], this.isLoading = !1, this.isMobile = !1, this.allowEditing = !1, this.highlightEnabled = !0, this.paginationEnabled = !0, this.position = "absolute", this.showCloseBtn = !1, this._alertOpen = !1, this._count = "", this._editRecordOpen = !1, this._isMultipleEdits = !1, this._mobileTitle = "", this._showListView = !1, this._translations = b({ name: "info-card", blocking: !0 }), this._navigatedToRelatedFeature = !1, this._editEnabled = !1, this._featuresNodeId = `features-node${(/* @__PURE__ */ new Date()).getMilliseconds().toString()}`, this.popupClosed = r(), this.clearSelection = r(), this.selectionChanged = r(), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "refreshGraphics", this.refreshGraphics), this.listenOn(window, "editMultipleFeatures", this.editMultipleFeatures), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated), this.listenOn(window, "clearSelection", this._alertClosed);
@@ -85,7 +85,7 @@ class E extends v {
   }
   render() {
     const e = this.isLoading ? "" : "display-none", t = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute", a = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", n = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", o = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature, h = Number(this._features?.selectedFeature?.getObjectId()), p = Number.isNaN(h) ? [] : [h], c = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, u = this._relatedFeature ? [this._relatedFeature] : this.graphics, _ = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex, l = this.isMobile ? "display-none" : "";
-    return s`<calcite-shell class="z-index-1" style=${$({ position: this.position })}>${this._getHeader()}<calcite-loader class=${i(e)} .label=${this._translations.fetchingData}></calcite-loader><div class=${i("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? m}></div><div class=${`${n} width-100`} slot=footer>${this.allowEditing ? s`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && c ? s`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${p} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && c ? s`<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !o && s`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s text text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${i(a)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${_} .graphics=${u} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
+    return s`<calcite-shell class="z-index-1" style=${$({ position: this.position })}>${this._getHeader()}<calcite-loader class=${i(e)} .label=${this._translations.fetchingData}></calcite-loader><div class=${i("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? m}></div><div class=${`${n} width-100`} slot=footer>${this.allowEditing ? s`<div class="display-flex top-border padding-1-2"><calcite-button appearance=solid id=solutions-edit @click=${() => this._openEditRecord()} width=full>${this._translations.edit}</calcite-button>${this.isMobile && c ? s`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${p} .layer=${this._layer} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && c ? s`<calcite-tooltip class=${i(l)} placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` : ""}${this.paginationEnabled && !o && s`<div class=${"display-flex padding-1-2 button-container top-border"}><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action appearance=solid class="pagination-action" icon-flip-rtl @click=${() => this._toggleListView()} scale=s .text=${this._translations.toggleListView} text-enabled><span class="pagination-count">${this._count}</span></calcite-action><div><calcite-button appearance=transparent .disabled=${o} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip class=${i(l)} placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card .allowMultipleEditing=${this._isMultipleEdits} class=${i(a)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${_} .graphics=${u} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert auto-close icon=layer-broken kind=warning label @calciteAlertClose=${() => this._alertClosed()} .open=${this._alertOpen} placement=top><div slot=title>${this._translations.editDisabled}</div><div slot=message>${this._translations.enableEditing}</div></calcite-alert></calcite-shell>`;
   }
   async setGraphics() {
     this._features || await this._initFeaturesWidget(), this.graphics.length > 0 ? (this._layer = this.graphics[0]?.layer, this._editEnabled = !!(this._layer.editingEnabled && this._layer.capabilities?.operations.supportsUpdate), this._mobileTitle = this.mapView?.map && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "", this._features?.open({

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

@@ -1,5 +1,5 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { T9nMeta } from "@arcgis/lumina/controllers";
 
@@ -34,7 +34,7 @@ export abstract class LayerList extends LitElement {
   /** string[]: If passed will show only these layers in the list if they are present in map and are editable */
   accessor layers: string[];
   /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * boolean: if true display's feature count for each layer
    *

package/dist/components/layer-list/customElement.js

@@ -1,11 +1,11 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as y } from "../../chunks/runtime.js";
 import { d, a as m, c as p } from "../../chunks/mapViewUtils.js";
-import * as o from "@arcgis/core/intl";
+import * as o from "@arcgis/core/intl.js";
 import { u as f } from "../../chunks/useT9n.js";
 import { css as L, html as a } from "lit";
 import { LitElement as u, createEvent as h, noShadowRoot as w } from "@arcgis/lumina";
-import * as g from "@arcgis/core/core/reactiveUtils";
+import * as g from "@arcgis/core/core/reactiveUtils.js";
 async function _(n, t) {
   const { style: i = "decimal", places: e = 2 } = t || {}, s = o.convertNumberFormatToIntlOptions({
     places: e,
@@ -61,7 +61,7 @@ class I extends u {
   async initLayerHash() {
     const t = [];
     if (this.mapView) {
-      this._layerItemsHash = await d(this.mapView, !0);
+      this._layerItemsHash = await d(this.mapView, !1);
       const i = await m(this.mapView);
       for (const e of i)
         if (e?.type === "feature" && this.showFeatureCount) {
@@ -108,7 +108,7 @@ class I extends u {
     const i = this._layerItemsHash && this._layerItemsHash[t].name, e = this._layerItemsHash && this._layerItemsHash[t].formattedFeatureCount;
     return a`<calcite-list-item @calciteListItemSelect=${() => {
       this.onLayerItemSelected(t);
-    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
+    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon aria-hidden=true flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
   }
   getExtentNotice() {
     return a`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;

package/dist/components/layer-list-widget/customElement.d.ts

@@ -1,13 +1,14 @@
 /// <reference path="../../index.d.ts" />
-/// <reference types="@arcgis/core/interfaces.d.ts" />
+import type LayerList from "@arcgis/core/widgets/LayerList.js";
+import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { VisibilityIconType } from "../../utils/interfaces.js";
 
 export abstract class LayerListWidget extends LitElement {
   /** arcgis/core/widgets/LayerList: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html */
-  accessor layerListWidget: __esri.LayerList | undefined;
+  accessor layerListWidget: LayerList | undefined;
   /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-  accessor mapView: __esri.MapView | undefined;
+  accessor mapView: MapView | undefined;
   /**
    * VisibilityIconType: visibility icon for the layer list widget
    *

package/dist/components/layer-list-widget/customElement.js

@@ -2,7 +2,7 @@
 import { c as t } from "../../chunks/runtime.js";
 import { css as e, html as s } from "lit";
 import { LitElement as a, createEvent as c } from "@arcgis/lumina";
-import l from "@arcgis/core/widgets/LayerList";
+import l from "@arcgis/core/widgets/LayerList.js";
 const r = e`:host{display:block}`;
 class n extends a {
   constructor() {