@esri/solutions-components 5.1.0-next.14 → 5.1.0-next.140

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

@@ -1,31 +1,40 @@
 /* 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 { 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}}`;
-class y extends _ {
+import { c as r } from "../../chunks/runtime.js";
+import { g as h } from "../../chunks/mapViewUtils.js";
+import { u as n } from "../../chunks/useT9n.js";
+import { css as d, html as s } from "lit";
+import { createRef as c, ref as p } from "lit-html/directives/ref.js";
+import { LitElement as f, createEvent as i, noShadowRoot as g, safeClassMap as o } from "@arcgis/lumina";
+import * as a from "@arcgis/core/core/reactiveUtils.js";
+const m = d`@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 u extends f {
   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._layerInfos = null, this._translations = n({ name: "edit-card", blocking: !0 }), this._editor = c(), this._shouldClose = !1, this._shouldEmitEditsComplete = !1, this.closeEdit = i(), this.editorInitialized = i(), this.editsComplete = i(), this.refreshGraphics = i(), this.creatingFeature = i(), this._onEditorReady = async () => {
+      this._attachmentHandle && this._activeWorkflowHandle && (this._attachmentHandle.remove(), this._activeWorkflowHandle.remove());
+      const t = this._editor.value;
+      this._attachmentHandle = a.when(() => t?.state === "adding-attachment" || t?.state === "editing-attachment" || t?.state === "creating-features", () => {
+        this._shouldClose = !1;
+      }), this._activeWorkflowHandle = a.watch(() => t?.activeWorkflow, (e) => {
+        (e?.type === "update" || e?.type === "create-features") && (this._shouldClose = !1), (!e?.type && !e?.hasPendingEdits && !t?.activeWorkflow || !t?.activeWorkflow?.started) && (this.allowMultipleEditing = !1, this.open = !1);
+      }), a.watch(() => t?.state, (e) => {
+        e === "creating-features" && this.graphics[0].layer.isTable && !t?.viewModel?.featureTemplatesLayers?.items.length && !t?.viewModel?.featureTemplatesLayers?.items[0]?.isTable && this.creatingFeature.emit(), this._shouldEmitEditsComplete && e === "ready" && !t?.activeWorkflow && (this.editsComplete.emit(), this._shouldEmitEditsComplete = !1);
+      }), t && this.editorInitialized.emit(t), this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose && await this._startUpdate(), this._editorLoading = !1;
+    }, 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 };
+    this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphicIndex: 9, graphics: 0, mapView: 0, open: 5, allowMultipleEditing: 5, _editorLoading: 16, _layerInfos: 16, _translations: 16 };
   }
   static {
-    this.styles = w;
+    this.styles = m;
   }
   static {
-    this.shadowRootOptions = m;
+    this.shadowRootOptions = g;
   }
   async graphicsWatchHandler() {
     this.graphics.length === 0 && this.open && await this._closeEdit(!0);
   }
   async openWatchHandler(t) {
-    t && this.graphics?.length > 0 && this.graphicIndex > -1 && (this._editorLoading = !0, await this._initEditorWidget(), this.graphicIndex > -1 && this.graphics.length > 0 && this.open && !this._shouldClose && await this._startUpdate(), this._editorLoading = !1), t || await this._closeEdit(!0);
+    t && this.graphics?.length > 0 && this.graphicIndex > -1 && (this._editorLoading = !0, await this._loadLayerInfos()), t || await this._closeEdit(!0);
   }
   async featureSelectionChange() {
     this.open && await this._closeEdit(!1);
@@ -43,43 +52,29 @@ 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>`;
+    const t = this.graphics?.length > 0 && this.graphics[0] ? !this.graphics[0].layer.editingEnabled : !0, e = this._editorLoading ? "display-none" : "position-absolute", l = this._editorLoading ? "" : "display-none";
+    return s`<div class="position-absolute">${t ? s`<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">${this.open && this.mapView && this._layerInfos !== null && s`<arcgis-editor class=${o(e)} .view=${this.mapView} .layerInfos=${this._layerInfos} .hideSettingsMenu=${!(this.enableSnapping && this.enableEditGeometry)} hide-sketch .hideSnappingControlsElementsEnabledToggle=${!(this.enableSnapping && this.enableEditGeometry)} @arcgisReady=${this._onEditorReady} ${p(this._editor)}></arcgis-editor>` || ""}<calcite-loader class=${o(l)} label scale=s></calcite-loader></div></div>`;
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._editor.value && this._editor.value.destroy(), this._attachmentHandle?.remove(), this._activeWorkflowHandle?.remove(), this._layerEditHandle?.remove();
   }
-  async _initEditorWidget() {
+  async _loadLayerInfos() {
     if (this.mapView && this.graphics && this.graphics.length > 0 && this.graphics[0]) {
-      this._editor && this._editor.destroy();
-      const t = document.createElement("div"), e = await d(this.mapView), a = this.enableSnapping && this.enableEditGeometry, h = e.map((i) => ({
-        layer: i,
+      const t = await h(this.mapView);
+      this._layerInfos = t.map((e) => ({
+        layer: e,
         geometryUpdatesEnabled: this.enableEditGeometry
       }));
-      this._editor = new u({
-        view: this.mapView,
-        layerInfos: h,
-        visibleElements: {
-          flow: !0,
-          settingsMenu: a,
-          sketch: !1,
-          snappingControls: a
-        },
-        container: t
-      }), this._attachmentHandle && this._activeWorkflowHandle && (this._attachmentHandle.remove(), this._activeWorkflowHandle.remove()), this._attachmentHandle = o.when(() => this._editor?.viewModel.state === "adding-attachment" || this._editor?.viewModel.state === "editing-attachment" || this._editor?.viewModel.state === "creating-features", () => {
-        this._shouldClose = !1;
-      }), this._activeWorkflowHandle = o.watch(() => this._editor?.viewModel.activeWorkflow, (i) => {
-        (i?.type === "update" || i?.type === "create-features") && (this._shouldClose = !1), (!i?.type && !i?.hasPendingEdits && !this._editor?.activeWorkflow || !this._editor?.activeWorkflow?.started) && (this.allowMultipleEditing = !1, this.open = !1);
-      }), o.watch(() => this._editor?.viewModel.state, (i) => {
-        i === "creating-features" && this.graphics[0].layer.isTable && !(this._editor?.viewModel).featureTemplatesLayers.items[0].isTable && this.creatingFeature.emit(), this._shouldEmitEditsComplete && i === "ready" && !this._editor?.activeWorkflow && (this.editsComplete.emit(), this._shouldEmitEditsComplete = !1);
-      }), this.enableSnapping || t.classList.add("hide-editor-toolbar"), this._editContainer.value && this._editContainer.value.appendChild(t), this._editor && this.editorInitialized.emit(this._editor);
     }
   }
   async _closeEdit(t) {
-    this._shouldClose = !0, t && this._editor?.activeWorkflow ? (this._editor.activeWorkflow?.activeWorkflow?.hasPendingEdits && (await this._editor.activeWorkflow.reset(), await this._editor.cancelWorkflow()), this._editor.destroy()) : this.graphicIndex > -1 && this.graphics?.length > 0 && this.refreshGraphics.emit(this.graphics), this.enableSnapping && ((this.mapView?.ui.view).grid = null), this._shouldClose = !1, this.closeEdit.emit();
+    this._shouldClose = !0, t && this._editor.value?.activeWorkflow ? (this._editor.value.activeWorkflow?.activeWorkflow?.hasPendingEdits && (await this._editor.value.activeWorkflow.reset(), await this._editor.value.cancelWorkflow()), await this._editor.value.destroy()) : this.graphicIndex > -1 && this.graphics?.length > 0 && this.refreshGraphics.emit(this.graphics), this.enableSnapping && ((this.mapView?.ui.view).grid = null), this._shouldClose = !1, this.closeEdit.emit();
   }
   async _startUpdate() {
-    this.allowMultipleEditing ? await this._editor?.startUpdateFeaturesWorkflow(this.graphics) : await this._editor?.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]), this._shouldClose = !0;
+    this.allowMultipleEditing ? await this._editor.value?.startUpdateFeaturesWorkflow(this.graphics) : await this._editor.value?.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]), this._shouldClose = !0;
   }
 }
-n("edit-card", y);
+r("edit-card", u);
 export {
-  y as EditCard
+  u as EditCard
 };

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

@@ -1,3 +1,4 @@
 import "@esri/calcite-components/components/calcite-notice";
+import "@arcgis/map-components/components/arcgis-editor";
 import "@esri/calcite-components/components/calcite-loader";
 export * from "./customElement.js";

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

@@ -1,12 +1,12 @@
 /* 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 { a 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";
@@ -52,8 +53,8 @@ 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 */
-  accessor mapView: __esri.MapView | undefined;
+  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  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

@@ -1,15 +1,15 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
 import { c as _ } from "../../chunks/runtime.js";
 import { P as w } from "../../chunks/popupUtils.js";
-import { g as u, c, h as x } from "../../chunks/mapViewUtils.js";
+import { d as u, b as c, j as x } from "../../chunks/mapViewUtils.js";
 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);
@@ -84,7 +84,7 @@ class T extends F {
         where: await this.getWhereCondition(),
         geometry: this.filterByMapExtent ? this.mapView?.extent : null
       };
-      this._featuresCount = await this._selectedLayer.queryFeatureCount(e), this._isLoading = !1;
+      this._featuresCount = await this._selectedLayer?.queryFeatureCount(e), this._isLoading = !1;
     }
   }
   initializeMapExtentFilter() {
@@ -198,7 +198,7 @@ class T extends F {
       return;
   }
   async createFeatureItem(t) {
-    const e = t?.features, s = this.reportingOptions && this.reportingOptions[this.selectedLayerId].like, i = e.map(async (a) => {
+    const e = t?.features, s = this.reportingOptions && this.reportingOptions[this.selectedLayerId]?.like, i = e.map(async (a) => {
       const r = this.mapView?.map && await this._popupUtils?.getPopupTitle(a, this.mapView.map) || "";
       let n, o;
       return this.showUserImageInList && this._selectedLayer?.editFieldsInfo?.creatorField && (n = await this.getUserInformation(a)), this.showFeatureSymbol && (o = await this.getFeatureSymbol(a)), s && this.getAbbreviatedLikeCount(a), this.getFeatureItem(a, r, o, n);
@@ -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 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);