@esri/solutions-components 1.0.0-next.20250415 → 1.0.0-next.20250421

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

@@ -8,7 +8,7 @@ import { LitElement as f, createEvent as a, noShadowRoot as m, safeClassMap as r
 import { css as _ } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const u = _`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -26,7 +26,7 @@ const u = _`@layer{/** @license
  */:host{display:block}.padding-bottom-1{padding-bottom:1rem}.font-bold{font-weight:var(--calcite-font-weight-bold)}.font-500{font-weight:var(--calcite-font-weight-medium)}.font-italic{font-style:italic}#feature-form{padding-top:0}.padding-sides-bottom-1{padding:0 1rem 1rem}.position-relative{position:relative}.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 w extends f {
   constructor() {
-    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphicIndex = 0, this.open = !1, this._editorLoading = !1, this._translations = c({ name: "edit-card" }), this._editContainer = p(), this._shouldClose = !1, this.closeEdit = a(), this.editorInitialized = a(), this.editsComplete = a(), this.refreshGraphics = a(), this.listenOn(window, "featureSelectionChange", this.featureSelectionChange);
+    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphicIndex = 0, this.graphics = [], this.locale = "", this.open = !1, this._editorLoading = !1, this._translations = c({ name: "edit-card" }), this._editContainer = p(), this._editControlElements = [], this._editingDisabled = "", this._shouldClose = !1, this.closeEdit = a(), this.editorInitialized = a(), this.editsComplete = a(), this.refreshGraphics = a(), this.listenOn(window, "featureSelectionChange", this.featureSelectionChange);
   }
   static {
     this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphicIndex: 9, graphics: 0, locale: 1, mapView: 0, open: 5, _editorLoading: 16, _translations: 16 };
@@ -111,7 +111,7 @@ class w extends f {
         layer: e,
         geometryUpdatesEnabled: this.enableEditGeometry
       }));
-      this._editor = new this.Editor({
+      this._editor = this.Editor && new this.Editor({
         view: this.mapView,
         layerInfos: n,
         visibleElements: {
@@ -121,20 +121,20 @@ class w extends f {
           snappingControls: s
         },
         container: t
-      }), this._attachmentHandle && this._activeWorkflowHandle && (this._attachmentHandle.remove(), this._activeWorkflowHandle.remove()), this._attachmentHandle = this.reactiveUtils.when(() => this._editor.viewModel.state === "adding-attachment" || this._editor.viewModel.state === "editing-attachment" || this._editor.viewModel.state === "creating-features", () => {
+      }), this._attachmentHandle && this._activeWorkflowHandle && (this._attachmentHandle.remove(), this._activeWorkflowHandle.remove()), this._attachmentHandle = this.reactiveUtils?.when(() => this._editor?.viewModel.state === "adding-attachment" || this._editor?.viewModel.state === "editing-attachment" || this._editor?.viewModel.state === "creating-features", () => {
         this._shouldClose = !1;
-      }), this._activeWorkflowHandle = this.reactiveUtils.watch(() => this._editor.viewModel.activeWorkflow?.activeWorkflow, (e) => {
-        (e?.type === "update-table-record" || e?.type === "create-features") && (this._shouldClose = !1), (!e?.type && !e?.hasPendingEdits && !this._editor.activeWorkflow || !this._editor?.activeWorkflow?.started) && (this.open = !1);
-      }), this.enableSnapping || t.classList.add("hide-editor-toolbar"), this._editContainer.value && this._editContainer.value.appendChild(t), this.editorInitialized.emit(this._editor);
+      }), this._activeWorkflowHandle = this.reactiveUtils?.watch(() => this._editor?.viewModel.activeWorkflow?.activeWorkflow, (e) => {
+        (e?.type === "update-table-record" || e?.type === "create-features") && (this._shouldClose = !1), (!e?.type && !e?.hasPendingEdits && !this._editor?.activeWorkflow || !this._editor?.activeWorkflow?.started) && (this.open = !1);
+      }), this.enableSnapping || t.classList.add("hide-editor-toolbar"), this._editContainer.value && this._editContainer.value.appendChild(t), this._editor && this.editorInitialized.emit(this._editor);
     }
   }
   /** Close the edit widget */
   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?.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();
   }
   /** Start the update workflow for the editor widget */
   async _startUpdate() {
-    await this._editor.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]), this._shouldClose = !0;
+    await this._editor?.startUpdateWorkflowAtFeatureEdit(this.graphics[this.graphicIndex]), this._shouldClose = !0;
   }
 }
 l("edit-card", w);

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

@@ -10,13 +10,13 @@ export declare class FeatureDetails extends LitElement {
     /** When true the snapping options will be exposed */
     enableSnapping: boolean;
     /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** esri/Graphic: https://developers.arcgis.com/javascript/latest/api-reference/esri-Graphic.html */
     graphics: __esri.Graphic[];
     /** IReportingOptions: Key options for reporting */
-    reportingOptions: IReportingOptions;
+    reportingOptions: IReportingOptions | undefined;
     /** ILayerItemsHash: LayerDetailsHash for each layer in the map */
-    layerItemsHash: ILayerItemsHash;
+    layerItemsHash: ILayerItemsHash | undefined;
     /** string: Locale to use for translation of stings in the UI */
     locale: string;
     /** boolean: When true the profile image of the comment creator will be shown in the comments list */

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

@@ -7,7 +7,7 @@ import { LitElement as g, createEvent as h, noShadowRoot as f } from "@arcgis/lu
 import { css as b } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const C = b`@layer{/**
  * @license
  * Copyright 2025 Esri
@@ -26,7 +26,7 @@ const C = b`@layer{/**
  */:host{display:block}.buttons-container{align-items:center;display:flex;padding:4px;color:var(--calcite-color-text-1)!important;background-color:var(--calcite-color-foreground-1)!important;border-block-start:1px solid var(--calcite-color-border-3);border-block-end:1px solid var(--calcite-color-border-3)}}`;
 class F extends g {
   constructor() {
-    super(...arguments), this.enableSnapping = !1, 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._updating = !1, this._infoCard = p(), this._commentsList = p(), this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this.loadingStatus = h(), this.commentSelect = h(), this.addComment = h(), this.likeOrDislikeClicked = h(), this.featureSelectionChange = h();
+    super(...arguments), this.enableSnapping = !1, this.graphics = [], this.locale = "", 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.commentSelect = h(), this.addComment = h(), this.likeOrDislikeClicked = h(), this.featureSelectionChange = h();
   }
   static {
     this.properties = { enableSnapping: 5, mapView: 0, graphics: 0, reportingOptions: 0, layerItemsHash: 0, locale: 1, showUserImageInCommentsList: 5, showFullCommentTitle: 5, _likeFieldAvailable: 16, _likeCount: 16, _disLikeCount: 16, _dislikeFieldAvailable: 16, _commentsAvailable: 16, _isLikeBtnClicked: 16, _isDislikeBtnClicked: 16, _relatedFeaturesOIDs: 16, _updating: 16 };
@@ -37,6 +37,10 @@ class F extends g {
   static {
     this.shadowRootOptions = f;
   }
+  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
+  willUpdate(i) {
+    i.has("graphics") && this.graphicsWatchHandler();
+  }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -85,7 +89,7 @@ class F extends g {
       this.featureSelectionChange.emit(e.detail);
     }} position=relative ${u(this._infoCard)}></info-card>${(this._likeFieldAvailable || this._dislikeFieldAvailable || this._commentsAvailable) && o`<div class="buttons-container">${this._commentsAvailable && o`<calcite-button appearance=transparent icon-end=speech-bubble kind=neutral @click=${() => {
       this.addComment.emit();
-    }} scale=m>${this._relatedFeaturesOIDs.length}</calcite-button>` || ""}${this._likeFieldAvailable && 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" .locale=${this.locale} .mapView=${this.mapView} @featureSelect=${(e) => {
+    }} 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" .locale=${this.locale} .mapView=${this.mapView} @featureSelect=${(e) => {
       this.commentSelect.emit(e.detail);
     }} page-size=5 .selectedLayerId=${this.relatedTableId} .showFullTitle=${this.showFullCommentTitle} .showUserImageInList=${this.showUserImageInCommentsList} text-size=small .whereClause=${i} ${u(this._commentsList)}></feature-list>` || ""}</calcite-panel>`;
   }
@@ -122,24 +126,24 @@ class F extends g {
    * @protected
    */
   async processComments() {
-    const i = this._selectedGraphic.layer;
+    const i = this._selectedGraphic?.layer;
     if (this.reportingOptions && this.reportingOptions[i.id] && this.reportingOptions[i.id].comment && i?.relationships && i.relationships?.length > 0) {
-      const s = await _(this.mapView);
+      const s = this.mapView && await _(this.mapView);
       let t = null, l = null;
       if (i?.relationships?.some((a) => {
-        const n = s.filter((r) => i.url === r.url && r.layerId === a.relatedTableId);
-        return n && n.length > 0 ? (t = n[0], l = a.id, !0) : !1;
+        const r = s?.filter((n) => i.url === n.url && n.layerId === a.relatedTableId);
+        return r && r.length > 0 ? (t = r[0], l = a.id, !0) : !1;
       }), this.relatedTableId = t?.id ?? "", this.relatedTableId) {
-        const a = this._selectedGraphic.attributes[i.objectIdField], n = new this.RelationshipQuery({
+        const a = this._selectedGraphic?.attributes[i?.objectIdField], r = this.RelationshipQuery && new this.RelationshipQuery({
           objectIds: [a],
           outFields: ["*"],
           relationshipId: l
-        }), r = await i.queryRelatedFeatures(n).catch((c) => {
-          console.error(c);
-        }), d = [];
-        r[a] && r[a].features.forEach((c) => {
-          d.push(c.attributes[t.objectIdField]);
-        }), this._relatedFeaturesOIDs = d, this._commentsAvailable = !0;
+        }), n = r && await i.queryRelatedFeatures(r).catch((d) => {
+          console.error(d);
+        }), c = [];
+        n[a] && n[a].features.forEach((d) => {
+          c.push(d.attributes[t.objectIdField]);
+        }), this._relatedFeaturesOIDs = c, this._commentsAvailable = !0;
       } else
         this._relatedFeaturesOIDs = [], this._commentsAvailable = !1;
     } else
@@ -161,7 +165,7 @@ class F extends g {
       if (!t && !l)
         return !1;
       i.fields.forEach((a) => {
-        this._validFieldTypes.indexOf(a.type) > -1 && this.layerItemsHash[i.id].supportsUpdate && (a.name === t && this.reportingOptions[i.id].like ? e = !0 : a.name === l && this.reportingOptions[i.id].dislike && (s = !0));
+        this._validFieldTypes.indexOf(a.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (a.name === t && this.reportingOptions[i.id].like ? e = !0 : a.name === l && this.reportingOptions[i.id].dislike && (s = !0));
       });
     }
     return e || s;
@@ -173,12 +177,12 @@ class F extends g {
    */
   checkLikeDislikeFields() {
     this._likeFieldAvailable = !1, this._dislikeFieldAvailable = !1, this._isLikeBtnClicked = !1, this._isDislikeBtnClicked = !1, this._likeCount = 0, this._disLikeCount = 0;
-    const i = this._selectedGraphic.layer;
+    const i = this._selectedGraphic?.layer;
     if (this.reportingOptions && this.reportingOptions[i.id]) {
       if (this._likeField = this.reportingOptions[i.id].likeField || "", this._dislikeField = this.reportingOptions[i.id].dislikeField || "", !this._likeField && !this._dislikeField)
         return;
       i.fields.forEach((e) => {
-        this._validFieldTypes.indexOf(e.type) > -1 && this.layerItemsHash[i.id].supportsUpdate && (e.name === this._likeField && this.reportingOptions[i.id].like ? (this._likeFieldAvailable = !0, this._likeCount = this._selectedGraphic.attributes[e.name]) : e.name === this._dislikeField && this.reportingOptions[i.id].dislike && (this._dislikeFieldAvailable = !0, this._disLikeCount = this._selectedGraphic.attributes[e.name]));
+        this._validFieldTypes.indexOf(e.type) > -1 && this.layerItemsHash && this.reportingOptions && this.layerItemsHash[i.id].supportsUpdate && (e.name === this._likeField && this.reportingOptions[i.id].like ? (this._likeFieldAvailable = !0, this._likeCount = this._selectedGraphic?.attributes[e.name]) : e.name === this._dislikeField && this.reportingOptions[i.id].dislike && (this._dislikeFieldAvailable = !0, this._disLikeCount = this._selectedGraphic?.attributes[e.name]));
       }), this.getFromLocalStorage();
     }
   }
@@ -188,7 +192,7 @@ class F extends g {
    * @protected
    */
   onLikeButtonClick() {
-    this._isDislikeBtnClicked && this._selectedGraphic.layer && this.reportingOptions[this._selectedGraphic.layer.id].dislike && this.onDislikeButtonClick(), this._isLikeBtnClicked = !this._isLikeBtnClicked, this._isLikeBtnClicked ? this._likeCount++ : this._likeCount--, this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
+    this._isDislikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && this.reportingOptions[this._selectedGraphic.layer.id].dislike && this.onDislikeButtonClick(), this._isLikeBtnClicked = !this._isLikeBtnClicked, this._isLikeBtnClicked ? this._likeCount++ : this._likeCount--, this.updateFeaturesLikeDislikeField(this._likeField, this._isLikeBtnClicked);
   }
   /**
    * On dislike button click highlight the dislike button and update the feature
@@ -196,7 +200,7 @@ class F extends g {
    * @protected
    */
   onDislikeButtonClick() {
-    this._isLikeBtnClicked && this._selectedGraphic.layer && this.reportingOptions[this._selectedGraphic.layer.id].like && this.onLikeButtonClick(), this._isDislikeBtnClicked = !this._isDislikeBtnClicked, this._isDislikeBtnClicked ? this._disLikeCount++ : this._disLikeCount--, this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
+    this._isLikeBtnClicked && this._selectedGraphic?.layer && this.reportingOptions && this.reportingOptions[this._selectedGraphic.layer.id].like && this.onLikeButtonClick(), this._isDislikeBtnClicked = !this._isDislikeBtnClicked, this._isDislikeBtnClicked ? this._disLikeCount++ : this._disLikeCount--, this.updateFeaturesLikeDislikeField(this._dislikeField, this._isDislikeBtnClicked);
   }
   /**
    * Update the feature if user click on like or dislike button
@@ -206,18 +210,22 @@ class F extends g {
    * @protected
    */
   async updateFeaturesLikeDislikeField(i, e) {
-    const s = {}, t = this._selectedGraphic.layer;
+    const s = {}, t = this._selectedGraphic?.layer;
     this._updating = !0;
     const l = this._selectedGraphic;
-    l.attributes[i] = Number(l.attributes[i]) + (e ? 1 : -1), s[t.objectIdField] = l.attributes[t.objectIdField], s[i] = l.attributes[i];
-    const a = new this.Graphic();
-    a.attributes = s;
-    const n = { updateFeatures: [a] };
-    await t.applyEdits(n).then(() => {
-      this._selectedGraphic = l, this.setInLocalStorage(), this._updating = !1, this.likeOrDislikeClicked.emit();
-    }, (r) => {
-      this._updating = !1, console.log(r);
-    });
+    if (l) {
+      l.attributes[i] = Number(l.attributes[i]) + (e ? 1 : -1), s[t.objectIdField] = l.attributes[t.objectIdField], s[i] = l.attributes[i];
+      const a = this.Graphic && new this.Graphic();
+      if (a) {
+        a.attributes = s;
+        const r = { updateFeatures: [a] };
+        await t.applyEdits(r).then(() => {
+          this._selectedGraphic = l, this.setInLocalStorage(), this._updating = !1, this.likeOrDislikeClicked.emit();
+        }, (n) => {
+          this._updating = !1, console.log(n);
+        });
+      }
+    }
   }
   /**
    * Gets the like/dislike information form local storage and updates the like and dislike button states
@@ -225,9 +233,9 @@ class F extends g {
    * @protected
    */
   getFromLocalStorage() {
-    const i = this._selectedGraphic.layer && this._selectedGraphic.layer.id, e = !isNaN(Number(i)) && i?.toString() && localStorage[i];
+    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = !isNaN(Number(i)) && i?.toString() && localStorage[i];
     if (e) {
-      const t = JSON.parse(e).filter((l) => l.id === this._selectedGraphic.getObjectId());
+      const t = JSON.parse(e).filter((l) => l.id === this._selectedGraphic?.getObjectId());
       t.length > 0 && (this._isLikeBtnClicked = t[0].like, this._isDislikeBtnClicked = t[0].dislike);
     }
   }
@@ -237,23 +245,19 @@ class F extends g {
    * @protected
    */
   setInLocalStorage() {
-    const i = this._selectedGraphic.layer && this._selectedGraphic.layer.id, e = i?.toString() && localStorage[i];
+    const i = this._selectedGraphic?.layer && this._selectedGraphic.layer.id, e = i?.toString() && localStorage[i];
     let s = [];
     if (e) {
       s = JSON.parse(e);
-      const t = s.findIndex((l) => l.id === this._selectedGraphic.getObjectId());
+      const t = s.findIndex((l) => l.id === this._selectedGraphic?.getObjectId());
       t >= 0 && s.splice(t, 1);
     }
     s.push({
-      id: this._selectedGraphic.getObjectId(),
+      id: this._selectedGraphic?.getObjectId(),
       like: this._isLikeBtnClicked && this._likeCount !== 0,
       dislike: this._isDislikeBtnClicked && this._disLikeCount !== 0
     }), i?.toString() && localStorage.setItem(i.toString(), JSON.stringify(s));
   }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
-  willUpdate(i) {
-    i.has("graphics") && this.graphicsWatchHandler();
-  }
 }
 k("feature-details", F);
 export {

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

@@ -8,15 +8,15 @@ export declare class FeatureList extends LitElement {
     /** string: Layer id of the feature layer to show the list */
     selectedLayerId: string;
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** string: Message to be displayed when features are not found */
-    noFeaturesFoundMsg?: string;
+    noFeaturesFoundMsg?: string | undefined;
     /** number: Number features to be fetched per page, by default 100 features will be fetched */
     pageSize?: number;
     /** boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight and zoom to the extent of the feature geometry */
-    highlightOnMap?: boolean;
+    highlightOnMap?: boolean | undefined;
     /** boolean: Highlight feature on map optional (default false) boolean to indicate if we should highlight when hover on Feature in list */
-    highlightOnHover?: boolean;
+    highlightOnHover?: boolean | undefined;
     /** string: Locale to use for translation of stings in the UI */
     locale: string;
     /** ISortingInfo: Sorting field and order using which features list will be sorted */
@@ -26,17 +26,17 @@ export declare class FeatureList extends LitElement {
     /** string(small/large): Controls the font size of the title */
     textSize?: 'small' | 'large';
     /** boolean: Show initial loading indicator when creating list */
-    showInitialLoading?: boolean;
+    showInitialLoading?: boolean | undefined;
     /** boolean: If true will show error msg when features are not present */
-    showErrorWhenNoFeatures?: boolean;
+    showErrorWhenNoFeatures?: boolean | undefined;
     /** boolean: If true display's profile img on each feature item */
-    showUserImageInList?: boolean;
+    showUserImageInList?: boolean | undefined;
     /** boolean: If true display's feature symbol on each feature item */
-    showFeatureSymbol?: boolean;
+    showFeatureSymbol?: boolean | undefined;
     /** boolean: If true will consider the FeatureFilter applied on the layerview */
-    applyLayerViewFilter?: boolean;
+    applyLayerViewFilter?: boolean | undefined;
     /** IReportingOptions: Key options for reporting */
-    reportingOptions: IReportingOptions;
+    reportingOptions: IReportingOptions | undefined;
     /** boolean: When false popup title will shown in single line */
     showFullTitle: boolean;
     /** boolean: when true the feature from map view extent will shown */

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

@@ -5,11 +5,11 @@ import { d as u, g as c, c as w } from "../../chunks/mapViewUtils.js";
 import { u as _ } from "../../chunks/useT9n.js";
 import { html as l, nothing as x } from "lit";
 import { createRef as f, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as L, createEvent as I, noShadowRoot as b, safeClassMap as F, safeStyleMap as v } from "@arcgis/lumina";
+import { LitElement as L, createEvent as I, noShadowRoot as F, safeClassMap as b, safeStyleMap as v } from "@arcgis/lumina";
 import { css as S } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const E = S`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -27,7 +27,7 @@ const E = S`@layer{/** @license
  */:host{display:block}.width-full{width:100%}.pagination{display:flex;justify-content:center}.error-msg{padding:10px;width:calc(100% - 20px)}.feature-list-popup-title{font-weight:500;white-space:pre-line}.feature-list-popup-title-small{font-size:small;white-space:pre-line}.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)}}`;
 class C extends L {
   constructor() {
-    super(...arguments), this.pageSize = 100, this.highlightOnMap = !1, this.highlightOnHover = !1, this.textSize = "large", this.showInitialLoading = !0, this.showErrorWhenNoFeatures = !0, 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._translations = _({ name: "feature-list" }), this._pagination = f(), this._calciteList = f(), this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this._likeFieldAvailable = !1, this.featureSelect = I();
+    super(...arguments), this.selectedLayerId = "", this.noFeaturesFoundMsg = "", this.pageSize = 100, this.highlightOnMap = !1, this.highlightOnHover = !1, this.locale = "", this.textSize = "large", this.showInitialLoading = !0, this.showErrorWhenNoFeatures = !0, 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 = _({ name: "feature-list" }), this._pagination = f(), this._calciteList = f(), this._validFieldTypes = ["small-integer", "integer", "big-integer", "single", "long"], this._abbreviatedLikeCount = "", this._likeFieldAvailable = !1, this._searchExpression = "", this.featureSelect = I();
   }
   static {
     this.properties = { selectedLayerId: 1, mapView: 0, noFeaturesFoundMsg: 1, pageSize: 9, highlightOnMap: 5, highlightOnHover: 5, locale: 1, sortingInfo: 0, whereClause: 1, textSize: 1, showInitialLoading: 5, showErrorWhenNoFeatures: 5, showUserImageInList: 5, showFeatureSymbol: 5, applyLayerViewFilter: 5, reportingOptions: 0, showFullTitle: 5, filterByMapExtent: 5, _featureItems: 16, _featuresCount: 16, _isLoading: 16, _searchPlaceHolder: 16, _fullTextSearchInfo: 16, _translations: 16 };
@@ -36,7 +36,11 @@ class C extends L {
     this.styles = E;
   }
   static {
-    this.shadowRootOptions = b;
+    this.shadowRootOptions = F;
+  }
+  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
+  willUpdate(e) {
+    e.has("locale") && this.localeWatchHandler(), e.has("selectedLayerId") && this.selectedLayerWatchHandler(), e.has("sortingInfo") && this.sortingInfoWatchHandler(), e.has("whereClause") && this.whereClauseHandler(), e.has("filterByMapExtent") && (this.hasUpdated || this.filterByMapExtent !== !1) && this.filterByMapExtentHandler(this.filterByMapExtent);
   }
   //--------------------------------------------------------------------------
   //
@@ -49,7 +53,7 @@ class C extends L {
   }
   /** Watch for selectedLayerId change and update layer instance and features list for new layerId */
   async selectedLayerWatchHandler() {
-    this._selectedLayer = await u(this.mapView, this.selectedLayerId), await this.initializeFeatureItems();
+    this._selectedLayer = this.mapView && await u(this.mapView, this.selectedLayerId), await this.initializeFeatureItems();
   }
   /** Watch for sorting field or order change and update the features list */
   async sortingInfoWatchHandler() {
@@ -100,7 +104,7 @@ class C extends L {
   /** Renders the component. */
   render() {
     const e = this._canShowFullTextSearch();
-    return l`<calcite-panel>${e && l`<calcite-input class=search clearable icon=search @calciteInputChange=${this._searchTextChanged} .placeholder=${this._searchPlaceHolder} title type=search></calcite-input>` || ""}${this._isLoading && l`<calcite-loader label scale=m></calcite-loader>` || ""}${this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading && l`<calcite-notice class="error-msg" icon=feature-details kind=info open><div slot=message>${this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg}</div></calcite-notice>` || ""}<calcite-list class=${F(this.textSize === "small" && !this.showFullTitle ? "overflow-hidden" : "")} label selection-appearance=border selection-mode=none ${d(this._calciteList)}>${!this._isLoading && this._featureItems.length > 0 && this._featureItems || ""}</calcite-list>${this.pageSize && this._featuresCount > this.pageSize && l`<div class="width-full" slot=footer><calcite-pagination class="pagination" @calcitePaginationChange=${this.pageChanged} .pageSize=${this.pageSize} start-item=1 .totalItems=${this._featuresCount} ${d(this._pagination)}></calcite-pagination></div>` || ""}</calcite-panel>`;
+    return l`<calcite-panel>${e && l`<calcite-input class=search clearable icon=search @calciteInputChange=${this._searchTextChanged} .placeholder=${this._searchPlaceHolder} title type=search></calcite-input>` || ""}${this._isLoading && l`<calcite-loader label scale=m></calcite-loader>` || ""}${this.showErrorWhenNoFeatures && this._featureItems.length === 0 && !this._isLoading && l`<calcite-notice class="error-msg" icon=feature-details kind=info open><div slot=message>${this.filterByMapExtent ? this._translations.featureErrorMsgInCurrentMapView : this.noFeaturesFoundMsg ? this.noFeaturesFoundMsg : this._translations.featureErrorMsg}</div></calcite-notice>` || ""}<calcite-list class=${b(this.textSize === "small" && !this.showFullTitle ? "overflow-hidden" : "")} label selection-appearance=border selection-mode=none ${d(this._calciteList)}>${!this._isLoading && this._featureItems.length > 0 && this._featureItems || ""}</calcite-list>${this.pageSize && this._featuresCount > this.pageSize && l`<div class="width-full" slot=footer><calcite-pagination class="pagination" @calcitePaginationChange=${this.pageChanged} .pageSize=${this.pageSize} start-item=1 .totalItems=${this._featuresCount} ${d(this._pagination)}></calcite-pagination></div>` || ""}</calcite-panel>`;
   }
   //--------------------------------------------------------------------------
   //
@@ -130,7 +134,7 @@ class C extends L {
   async getWhereCondition() {
     let e = "1=1";
     if (this.whereClause && (e = this.whereClause), this._selectedLayer?.definitionExpression && (e = e + " AND " + this._selectedLayer.definitionExpression), this.applyLayerViewFilter) {
-      const t = await c(this.mapView, this.selectedLayerId);
+      const t = this.mapView && await c(this.mapView, this.selectedLayerId);
       t?.filter?.where && (e = e + " AND " + t.filter.where);
     }
     return e;
@@ -145,14 +149,14 @@ class C extends L {
       this._pagination.value?.goTo("start"), this._isLoading = !!this.showInitialLoading, this._featureItems = await this.queryPage(0);
       const t = {
         where: await this.getWhereCondition(),
-        geometry: this.filterByMapExtent ? this.mapView.extent : null
+        geometry: this.filterByMapExtent ? this.mapView?.extent : null
       };
       this._featuresCount = await this._selectedLayer.queryFeatureCount(t), this._isLoading = !1;
     }
   }
   /** Updates the feature list based on map view extent */
   initializeMapExtentFilter() {
-    this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+    this._filterByMapExtentHandle = this.reactiveUtils?.when(() => this.mapView?.stationary, () => {
       this.initializeFeatureItems();
     }, {
       initial: !0
@@ -250,7 +254,7 @@ class C extends L {
       const e = this._selectedLayer?.definitionExpression;
       this._searchExpression && e && e?.indexOf(this._searchExpression) > -1 && (e?.indexOf(" AND (" + this._searchExpression) > -1 ? this._selectedLayer.definitionExpression = e.replace(` AND (${this._searchExpression})`, "") : this._selectedLayer.definitionExpression = e.replace(this._searchExpression, ""));
     }
-    this._searchExpression = void 0;
+    this._searchExpression = "";
   }
   /**
    * On feature click in feature list highlight the feature on the map
@@ -261,8 +265,8 @@ class C extends L {
    */
   async featureClicked(e, t) {
     if (this.clearHighlights(), this.highlightOnMap) {
-      const i = Number(e.target.value), s = await c(this.mapView, this.selectedLayerId);
-      this._highlightHandle = s ? await w([i], s, this.mapView, !0) : void 0;
+      const i = Number(e.target.value), s = this.mapView && await c(this.mapView, this.selectedLayerId);
+      this._highlightHandle = s && this.mapView ? await w([i], s, this.mapView, !0) : void 0;
     }
     await this.emitSelectedFeature(t);
   }
@@ -290,8 +294,8 @@ class C extends L {
    */
   async onFeatureHover(e) {
     if (this.clearHighlights(), this.highlightOnHover) {
-      const t = Number(e.getObjectId()), i = await c(this.mapView, this.selectedLayerId);
-      i && (this._highlights && (i.highlights = JSON.parse(this._highlights)), i.highlightOptions = { color: new this.Color("#FFFF00") }, this._highlights = JSON.stringify(i.highlights), this._highlightHandle = i.highlight([t]));
+      const t = Number(e.getObjectId()), i = this.mapView && await c(this.mapView, this.selectedLayerId);
+      i && (this._highlights && (i.highlights = JSON.parse(this._highlights)), this.Color && (i.highlightOptions = { color: new this.Color("#FFFF00") }), this._highlights = JSON.stringify(i.highlights), this._highlightHandle = i.highlight([t]));
     }
   }
   /**
@@ -318,8 +322,8 @@ class C extends L {
         outFields: ["*"],
         returnGeometry: !0,
         where: a,
-        outSpatialReference: this.mapView.spatialReference.toJSON(),
-        geometry: this.filterByMapExtent ? this.mapView.extent : null
+        outSpatialReference: this.mapView?.spatialReference.toJSON(),
+        geometry: this.filterByMapExtent ? this.mapView?.extent : null
       };
       i && s && (r.orderByFields = [i.toString() + " " + s]);
       const n = await t.queryFeatures(r);
@@ -336,9 +340,9 @@ class C extends L {
    */
   async createFeatureItem(e) {
     const t = e?.features, i = this.reportingOptions && this.reportingOptions[this.selectedLayerId].like, s = t.map(async (a) => {
-      const r = await this._popupUtils.getPopupTitle(a, this.mapView.map);
+      const r = this.mapView && 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)), i && this.getAbbreviatedLikeCount(a), this.getFeatureItem(a, r, o, n);
+      return this.showUserImageInList && this._selectedLayer?.editFieldsInfo?.creatorField && (n = await this.getUserInformation(a)), this.showFeatureSymbol && (o = await this.getFeatureSymbol(a)), i && this.getAbbreviatedLikeCount(a), r && this.getFeatureItem(a, r, o, n);
     });
     return Promise.all(s);
   }
@@ -351,12 +355,12 @@ class C extends L {
   getAbbreviatedLikeCount(e) {
     const t = this._selectedLayer;
     if (t) {
-      const i = this.reportingOptions[t.id].likeField;
+      const i = this.reportingOptions && this.reportingOptions[t.id].likeField;
       t.fields.forEach((s) => {
-        if (this._validFieldTypes.indexOf(s.type) > -1 && s.name === i && this.reportingOptions[t.id].like) {
+        if (this._validFieldTypes.indexOf(s.type) > -1 && s.name === i && this.reportingOptions && this.reportingOptions[t.id].like) {
           this._likeFieldAvailable = !0;
           let a = e.attributes[i] || 0;
-          a > 999 && this._translations.millionsAbbreviation && this._translations.thousandsAbbreviation && (a = a > 999999 ? this._translations.millionsAbbreviation.replace("{{abbreviated_value}}", Math.floor(a / 1e6).toString()) : this._translations.thousandsAbbreviation.replace("{{abbreviated_value}}", Math.floor(a / 1e3).toString())), this._abbreviatedLikeCount = a;
+          a > 999 && this._translations.millions_value && this._translations.thousands_value && (a = a > 999999 ? this._translations.millions_value.replace("{{abbreviated_value}}", Math.floor(a / 1e6).toString()) : this._translations.thousands_value.replace("{{abbreviated_value}}", Math.floor(a / 1e3).toString())), this._abbreviatedLikeCount = a;
         }
       });
     }
@@ -395,11 +399,11 @@ class C extends L {
     let t = this._selectedLayer?.editFieldsInfo?.creatorField;
     if (t) {
       e.attributes.hasOwnProperty(t.toLowerCase()) ? t = t.toLowerCase() : e.attributes.hasOwnProperty(t.toUpperCase()) && (t = t.toUpperCase());
-      let i = `${this.esriConfig.portalUrl}/sharing/rest/community/users/${e.attributes[t]}?f=json&returnUserLicensedItems=true`;
-      const s = this.mapView.map.portalItem.portal?.credential?.token;
+      let i = `${this.esriConfig?.portalUrl}/sharing/rest/community/users/${e.attributes[t]}?f=json&returnUserLicensedItems=true`;
+      const s = this.mapView?.map?.portalItem.portal?.credential?.token;
       s && (i += `&token=${s}`);
       const r = await (await fetch(i)).json(), n = r?.username ?? e.attributes[t];
-      let o = `${this.esriConfig.portalUrl}/sharing/rest/community/users/${n}/info/blob.png`;
+      let o = `${this.esriConfig?.portalUrl}/sharing/rest/community/users/${n}/info/blob.png`;
       return r?.access && s && (o += `?token=${s}`), r.userProfileUrl = o, r;
     } else
       return;
@@ -413,7 +417,7 @@ class C extends L {
    */
   async getFeatureSymbol(e) {
     const t = document.createElement("div");
-    return await this.symbolUtils.getDisplayedSymbol(e).then(async (i) => {
+    return await this.symbolUtils?.getDisplayedSymbol(e).then(async (i) => {
       if (i && await this.symbolUtils?.renderPreviewHTML(i, {
         node: t
       }), t.children?.length) {
@@ -425,20 +429,6 @@ class C extends L {
       }
     }), t;
   }
-  /**
-   * Fetches the component's translations
-   *
-   * @returns Promise when complete
-   * @protected
-   */
-  // protected async _getTranslations(): Promise<void> {
-  //   const messages = await getLocaleComponentStrings(this.el);
-  //   this._translations = messages[0] as typeof FeatureList_T9n;
-  // }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
-  willUpdate(e) {
-    e.has("locale") && this.localeWatchHandler(), e.has("selectedLayerId") && this.selectedLayerWatchHandler(), e.has("sortingInfo") && this.sortingInfoWatchHandler(), e.has("whereClause") && this.whereClauseHandler(), e.has("filterByMapExtent") && (this.hasUpdated || this.filterByMapExtent !== !1) && this.filterByMapExtentHandler(this.filterByMapExtent);
-  }
 }
 g("feature-list", C);
 export {

package/dist/components/floor-filter/customElement.d.ts

@@ -13,7 +13,7 @@ export declare class FloorFilter extends LitElement {
      */
     floorFilterWidget: __esri.FloorFilter | undefined;
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** Emitted on demand when the Facility is changed */
     readonly facilityChanged: TargetedEvent<this, string>;
     /** Emitted on demand when the Level is changed */

package/dist/components/floor-filter/customElement.js

@@ -1,12 +1,12 @@
-import { c as s } from "../../chunks/runtime.js";
+import { c as l } from "../../chunks/runtime.js";
 import { l as r } from "../../chunks/loadModules.js";
 import { html as o } from "lit";
 import { createRef as a, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as h, createEvent as l } from "@arcgis/lumina";
+import { LitElement as h, createEvent as s } from "@arcgis/lumina";
 import { css as d } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250415 */
+v1.0.0-next.20250421 */
 const c = d`/** @license
  * Copyright 2025 Esri
  *
@@ -24,11 +24,18 @@ const c = d`/** @license
  */:host{display:block}`;
 class f extends h {
   constructor() {
-    super(...arguments), this._floorFilterElement = a(), this.facilityChanged = l(), this.levelChanged = l(), this.siteChanged = l();
+    super(...arguments), this.enabled = !1, this._floorFilterElement = a(), this.facilityChanged = s(), this.levelChanged = s(), this.siteChanged = s();
   }
   static {
     this.properties = { enabled: 5, floorFilterWidget: 0, mapView: 0 };
   }
+  static {
+    this.styles = c;
+  }
+  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
+  willUpdate(e) {
+    e.has("mapView") && this.mapViewWatchHandler(), e.has("enabled") && this.enabledWatchHandler();
+  }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -36,11 +43,11 @@ class f extends h {
   //--------------------------------------------------------------------------
   /** Watch for changes to the mapView and re-init the floor filter */
   async mapViewWatchHandler() {
-    await this._initFloorFilter(this.mapView);
+    this.mapView && await this._initFloorFilter(this.mapView);
   }
   /** Watch for changes to the enabled property and re-init or destroy the floor filter */
   async enabledWatchHandler() {
-    this.enabled ? await this._initFloorFilter(this.mapView) : this.enabled || this._destroyWidget();
+    this.enabled ? this.mapView && await this._initFloorFilter(this.mapView) : this.enabled || this._destroyWidget();
   }
   /** Called once just after the component is first connected to the DOM. */
   load() {
@@ -96,24 +103,17 @@ class f extends h {
       e && this.enabled && this.FloorFilter && t?.floorInfo && (this._initContainer(), this.floorFilterWidget = new this.FloorFilter({
         container: this._floorFilterElement.value,
         view: e
-      }), this._facilityHandle?.remove(), this._facilityHandle = this.reactiveUtils.watch(() => this.floorFilterWidget?.facility, (i) => {
+      }), this._facilityHandle?.remove(), this._facilityHandle = this.reactiveUtils?.watch(() => this.floorFilterWidget?.facility, (i) => {
         i && this.facilityChanged.emit(i);
-      }), this._levelHandle?.remove(), this._levelHandle = this.reactiveUtils.watch(() => this.floorFilterWidget?.level, (i) => {
+      }), this._levelHandle?.remove(), this._levelHandle = this.reactiveUtils?.watch(() => this.floorFilterWidget?.level, (i) => {
         i && this.levelChanged.emit(i);
-      }), this._siteHandle?.remove(), this._siteHandle = this.reactiveUtils.watch(() => this.floorFilterWidget?.site, (i) => {
+      }), this._siteHandle?.remove(), this._siteHandle = this.reactiveUtils?.watch(() => this.floorFilterWidget?.site, (i) => {
         i && this.siteChanged.emit(i);
       }));
     });
   }
-  static {
-    this.styles = c;
-  }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler(), e.has("enabled") && this.enabledWatchHandler();
-  }
 }
-s("floor-filter", f);
+l("floor-filter", f);
 export {
   f as FloorFilter
 };

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

@@ -16,19 +16,19 @@ export declare class InfoCard extends LitElement {
     /** When true the component will render an optimized view for mobile devices */
     isMobile: boolean;
     /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** boolean: If true will show edit button */
-    allowEditing?: boolean;
+    allowEditing?: boolean | undefined;
     /** boolean: If true will highlights the features on map using Features Widget */
-    highlightEnabled?: boolean;
+    highlightEnabled?: boolean | undefined;
     /** string: Locale to use for translation of stings in the UI */
     locale: string;
     /** boolean: If true will show the pagination for multiple features */
-    paginationEnabled?: boolean;
+    paginationEnabled?: boolean | undefined;
     /** string: Set the position of the feature info */
     position?: string | undefined;
     /** boolean: If true show close button on the feature info */
-    showCloseBtn?: boolean;
+    showCloseBtn?: boolean | undefined;
     /**
      * Get the current selected feature from the Features widget
      *