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

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

@@ -7,7 +7,7 @@ import { LitElement as m, createEvent as a, noShadowRoot as v, safeStyleMap as y
 import { css as x } 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 $ = x`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -25,7 +25,7 @@ const $ = x`@layer{/** @license
  */: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}.overflow-hidden{overflow:hidden}.height-40{height:40px}.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 F extends m {
   constructor() {
-    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.isLoading = !1, this.allowEditing = !0, this.highlightEnabled = !0, this.paginationEnabled = !0, this.position = "absolute", this.showCloseBtn = !1, this._alertOpen = !1, this._count = "", this._editRecordOpen = !1, this._mobileTitle = "", this._showListView = !1, this._translations = b({ name: "info-card" }), this._featuresNodeId = "features-node" + (/* @__PURE__ */ new Date()).getMilliseconds().toString(), this.popupClosed = a(), this.clearSelection = a(), this.selectionChanged = a(), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "refreshGraphics", this.refreshGraphics);
+    super(), this.enableEditGeometry = !1, this.enableSnapping = !1, this.graphics = [], this.isLoading = !1, this.isMobile = !1, this.allowEditing = !0, this.highlightEnabled = !0, this.locale = "", this.paginationEnabled = !0, this.position = "absolute", this.showCloseBtn = !1, this._alertOpen = !1, this._count = "", this._editRecordOpen = !1, this._mobileTitle = "", this._showListView = !1, this._translations = b({ name: "info-card" }), this._navigatedToRelatedFeature = !1, this._editEnabled = !1, this._featuresNodeId = "features-node" + (/* @__PURE__ */ new Date()).getMilliseconds().toString(), this.popupClosed = a(), this.clearSelection = a(), this.selectionChanged = a(), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "refreshGraphics", this.refreshGraphics);
   }
   static {
     this.properties = { enableEditGeometry: 5, enableSnapping: 5, graphics: 0, isLoading: 5, isMobile: 5, mapView: 0, allowEditing: 5, highlightEnabled: 5, locale: 1, paginationEnabled: 5, position: 1, showCloseBtn: 5, _alertOpen: 16, _count: 16, _editRecordOpen: 16, _mobileTitle: 16, _showListView: 16, _translations: 16, _navigatedToRelatedFeature: 16 };
@@ -36,6 +36,10 @@ class F extends m {
   static {
     this.shadowRootOptions = v;
   }
+  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
+  willUpdate(e) {
+    e.has("graphics") && this.graphicsWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler();
+  }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -75,7 +79,7 @@ class F extends m {
    * @returns Promise resolving with the current feature
    */
   async getSelectedFeature() {
-    return this._features.selectedFeature;
+    return this._features?.selectedFeature;
   }
   /**
    * Refresh the feature info
@@ -87,24 +91,25 @@ class F extends m {
   }
   /** Go to the previous feature in the features widget */
   async back() {
-    this._features.previous(), this._count = this._getCount();
+    this._features?.previous(), this._count = this._getCount();
   }
   /** Go to the next feature in the features widget */
   async next() {
-    this._features.next(), this._count = this._getCount();
+    this._features?.next(), this._count = this._getCount();
   }
   /** Toggle the visibility of the features list view */
   async toggleListView() {
-    this._showListView = !this._showListView;
-    const e = this._features.selectedFeatureIndex;
-    this._features.open({
-      features: this.graphics,
-      featureMenuOpen: this._showListView
-    }), this._features.selectedFeatureIndex = e;
+    if (this._showListView = !this._showListView, this._features) {
+      const e = this._features.selectedFeatureIndex;
+      this._features.open({
+        features: this.graphics,
+        featureMenuOpen: this._showListView
+      }), this._features.selectedFeatureIndex = e;
+    }
   }
   /** update the current graphics to the features widget */
   async updateCurrentGraphic(e) {
-    this._features.selectedFeatureWidget && console.log(e);
+    this._features?.selectedFeatureWidget && console.log(e);
   }
   /**
    * Respond to and close the edit record display
@@ -141,8 +146,8 @@ class F extends m {
   }
   /** Renders the component. */
   render() {
-    const e = this.isLoading ? "" : "display-none", t = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute", r = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", h = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", s = this._features?.features?.length < 2 || this._navigatedToRelatedFeature, c = this.isMobile ? "display-none" : "", o = Number(this._features?.selectedFeature?.getObjectId()), d = isNaN(o) ? [] : [o], l = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, p = this._relatedFeature ? [this._relatedFeature] : this.graphics, u = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
-    return i`<calcite-shell class="z-index-1" style=${y({ position: this.position })}>${this._getHeader()}<calcite-loader class=${n(e)} .label=${this._translations.fetchingData || ""}></calcite-loader><div class=${n("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? w}></div><div class=${`${h} width-100`} slot=footer>${this.allowEditing && i`<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 && l ? i`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${d} .layer=${this._layer} .locale=${this.locale} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && l ? i`<calcite-tooltip placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` || ""}${this.paginationEnabled && !s && i`<div class=${`display-flex padding-1-2 button-container top-border ${c}`}><div><calcite-button appearance=transparent .disabled=${s} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action 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=${s} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card class=${n(r)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${u} .graphics=${p} .locale=${this.locale} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert 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>`;
+    const e = this.isLoading ? "" : "display-none", t = this.isLoading || this._editRecordOpen ? "visibility-hidden" : "position-absolute", r = !this.isLoading && this._editRecordOpen ? "position-absolute" : "display-none", h = !this.isLoading && this._editRecordOpen || this._showListView ? "display-none" : "", s = this._features?.features && this._features.features.length < 2 || this._navigatedToRelatedFeature, c = this.isMobile ? "display-none" : "", l = Number(this._features?.selectedFeature?.getObjectId()), d = isNaN(l) ? [] : [l], o = this._layer?.editingEnabled && this._layer?.capabilities?.operations?.supportsDelete, p = this._relatedFeature ? [this._relatedFeature] : this.graphics, u = this._navigatedToRelatedFeature ? 0 : this._features?.selectedFeatureIndex;
+    return i`<calcite-shell class="z-index-1" style=${y({ position: this.position })}>${this._getHeader()}<calcite-loader class=${n(e)} .label=${this._translations.fetchingData || ""}></calcite-loader><div class=${n("esri-widget feature-node " + t)} id=${this._featuresNodeId ?? w}></div><div class=${`${h} width-100`} slot=footer>${this.allowEditing && i`<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 && o ? i`<delete-button class="padding-inline-start-1 width-100" id=solutions-delete .ids=${d} .layer=${this._layer} .locale=${this.locale} @editsComplete=${() => this._closePopup()}></delete-button>` : void 0}<calcite-tooltip placement=bottom reference-element=solutions-edit><span>${this._translations.edit}</span></calcite-tooltip>${this.isMobile && o ? i`<calcite-tooltip placement=bottom reference-element=solutions-delete><span>${this._translations.delete}</span></calcite-tooltip>` : void 0}</div>` || ""}${this.paginationEnabled && !s && i`<div class=${`display-flex padding-1-2 button-container top-border ${c}`}><div><calcite-button appearance=transparent .disabled=${s} icon-flip-rtl=both icon-start=chevron-left id=solutions-back @click=${() => this._back()} width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-back><span>${this._translations.back}</span></calcite-tooltip></div><calcite-action 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=${s} icon-flip-rtl=both icon-start=chevron-right id=solutions-next @click=${() => this._next()} width=full></calcite-button><calcite-tooltip placement=top reference-element=solutions-next><span>${this._translations.next}</span></calcite-tooltip></div></div>` || ""}</div><edit-card class=${n(r)} .enableEditGeometry=${this.enableEditGeometry} .enableSnapping=${this.enableSnapping} .graphicIndex=${u} .graphics=${p} .locale=${this.locale} .mapView=${this.mapView} .open=${this._editRecordOpen}></edit-card><calcite-alert 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>`;
   }
   //--------------------------------------------------------------------------
   //
@@ -165,7 +170,7 @@ class F extends m {
    * @protected
    */
   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 = await this._popupUtils.getPopupTitle(this.graphics[0], this.mapView.map), this._features.open({
+    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 && await this._popupUtils?.getPopupTitle(this.graphics[0], this.mapView.map) || "", this._features?.open({
       features: this.graphics
     })) : (this._features?.clear(), this._features?.close()), this._count = this._getCount();
   }
@@ -179,24 +184,24 @@ class F extends m {
     return this.isMobile !== void 0 ? await this.mapView?.when(() => {
       if (this._features)
         this._features.view = this.mapView, this._features.visibleElements.actionBar = !1, this._features.visibleElements.closeButton = !!this.showCloseBtn, this._features.visibleElements.heading = !this.isMobile;
-      else {
-        this._features = new this.Features({
-          view: this.mapView,
-          container: this._featuresNodeId,
-          visibleElements: {
-            actionBar: !1,
-            closeButton: this.showCloseBtn,
-            featureMenuHeading: !1,
-            heading: !this.isMobile
-          }
-        }), this._features.viewModel.highlightEnabled = !!this.highlightEnabled, this.reactiveUtils.watch(() => this._features.viewModel.featureMenuOpen, (t) => {
+      else if (this._features = this.Features && new this.Features({
+        view: this.mapView,
+        container: this._featuresNodeId,
+        visibleElements: {
+          actionBar: !1,
+          closeButton: this.showCloseBtn,
+          featureMenuHeading: !1,
+          heading: !this.isMobile
+        }
+      }), this._features) {
+        this._features.viewModel.highlightEnabled = !!this.highlightEnabled, this.reactiveUtils?.watch(() => (this._features?.viewModel).featureMenuOpen, (t) => {
           this._count = this._getCount(), t || (this._showListView = t);
-        }), this.reactiveUtils.watch(() => this._features.selectedFeatureIndex, (t) => {
-          t > -1 && this._features.selectedFeature && this.selectionChanged.emit({
+        }), this.reactiveUtils?.watch(() => this._features?.selectedFeatureIndex, (t) => {
+          t !== void 0 && t > -1 && this._features?.selectedFeature && this.selectionChanged.emit({
             selectedFeature: [this._features.selectedFeature],
             selectedFeatureIndex: this._features.selectedFeatureIndex
           });
-        }), this.reactiveUtils.watch(() => this._features.selectedDrillInFeature, (t) => {
+        }), this.reactiveUtils?.watch(() => this._features.selectedDrillInFeature, (t) => {
           t ? (this._relatedFeature = t, this._navigatedToRelatedFeature = !0) : (this._relatedFeature = void 0, this._navigatedToRelatedFeature = !1);
         });
         const e = this.el.querySelector("#" + this._featuresNodeId);
@@ -229,11 +234,11 @@ class F extends m {
   }
   /** Go to the previous feature in the features widget */
   _back() {
-    this._features.previous(), this._count = this._getCount();
+    this._features?.previous(), this._count = this._getCount();
   }
   /** Go to the next feature in the features widget */
   _next() {
-    this._features.next(), this._count = this._getCount();
+    this._features?.next(), this._count = this._getCount();
   }
   /**
    * Get the current index of total string
@@ -241,31 +246,18 @@ class F extends m {
    * @returns the index of total string
    */
   _getCount() {
-    const e = (this._features?.viewModel.selectedFeatureIndex + 1).toString(), t = this._features?.features?.length.toString();
+    const e = this._features?.viewModel && (this._features?.viewModel.selectedFeatureIndex + 1).toString() || "", t = this._features?.features?.length.toString() || "";
     return this._translations.indexOfTotal?.replace("{{index}}", e).replace("{{total}}", t) || "";
   }
   /** Toggle the visibility of the features list view */
   _toggleListView() {
-    this._showListView = !this._showListView;
-    const e = this._features.selectedFeatureIndex;
-    this._features.open({
-      features: this.graphics,
-      featureMenuOpen: this._showListView
-    }), this._features.selectedFeatureIndex = e;
-  }
-  /**
-   * 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 InfoCard_T9n;
-  // }
-  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
-  willUpdate(e) {
-    e.has("graphics") && this.graphicsWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler();
+    if (this._showListView = !this._showListView, this._features) {
+      const e = this._features.selectedFeatureIndex;
+      this._features.open({
+        features: this.graphics,
+        featureMenuOpen: this._showListView
+      }), this._features.selectedFeatureIndex = e;
+    }
   }
 }
 f("info-card", F);

package/dist/components/json-editor/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as u, noShadowRoot as p } from "@arcgis/lumina";
 import { css as f } 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 _ = f`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -23,7 +23,7 @@ const _ = f`@layer{/** @license
  */:host{@apply block;}.editor-container{@apply relative h-full;}.editor-controls{@apply h-11 pr-2;}.editor-buttons{@apply float-right;}html[dir=rtl] .editor-buttons{@apply float-left;}.edit-error-flag{@apply pt-2;color:red;visibility:hidden}.edit-button{@apply p-inline-start-2;}.editor-text{@apply w-full overflow-y-auto;}.edit-width{@apply w-full;}.edit-parent{@apply w-full box-border;height:calc(100% - 46px)}.json-edit-container{@apply w-full h-full border-lightgray;}.padding-right{@apply p-inline-end-0.5;}.btn{@apply flex mb-4 content-center;height:25px;width:120px}.select-ctrl{@apply mb-4;}.all-edits{@apply mt-16;}.floating-title{font-size:2rem;z-index:100;position:absolute;left:.5rem;pointer-events:none}.floating-title-button{pointer-events:auto}.json-editor-position1{@apply absolute left-0 top-0 w-full h-full m-0 p-0 overflow-hidden;max-height:100%!important}.json-editor-position2a{@apply absolute left-0 top-0 w-1/2 h-full m-0 p-0 overflow-hidden;max-height:100%!important}.json-editor-position2b{@apply absolute right-0 top-0 w-1/2 h-full m-0 p-0 overflow-hidden;max-height:100%!important}}`;
 class g extends u {
   constructor() {
-    super(...arguments), this.hasChanges = !1, this.hasErrors = !1, this.instanceid = "", this.value = "", this._loaded = !1, this._translations = c({ name: "json-editor" }), this._useDiffEditor = !1;
+    super(...arguments), this.hasChanges = !1, this.hasErrors = !1, this.instanceid = "", this.locale = "", this.value = "", this._loaded = !1, this._translations = c({ name: "json-editor" }), this._useDiffEditor = !1;
   }
   static {
     this.properties = { hasChanges: 7, hasErrors: 7, instanceid: 3, locale: 1, value: 3, _translations: 16 };

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

@@ -6,17 +6,17 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 
 export declare class LayerList extends LitElement {
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** string[]: If passed will show only these layers in the list if they are present in map and are editable */
     layers: string[];
     /** string: Locale to use for translation of stings in the UI */
     locale: string;
     /** boolean: if true display's feature count for each layer */
-    showFeatureCount?: boolean;
+    showFeatureCount?: boolean | undefined;
     /** boolean: If true display's arrow icon on each layer item */
-    showNextIcon?: boolean;
+    showNextIcon?: boolean | undefined;
     /** boolean: If true will consider the FeatureFilter applied on the layerview */
-    applyLayerViewFilter?: boolean;
+    applyLayerViewFilter?: boolean | undefined;
     /** boolean: when true the features count from map view extent will shown */
     filterByMapExtent: boolean;
     /**

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

@@ -2,14 +2,14 @@ import { c as h } from "../../chunks/runtime.js";
 import { e as c, i as y, g as d } from "../../chunks/mapViewUtils.js";
 import { f as p } from "../../chunks/languageUtil.js";
 import { a as m } from "../../chunks/loadModules.js";
-import { u as L } from "../../chunks/useT9n.js";
+import { u as f } from "../../chunks/useT9n.js";
 import { html as a } from "lit";
-import { LitElement as f, createEvent as o, noShadowRoot as u } from "@arcgis/lumina";
+import { LitElement as L, createEvent as l, noShadowRoot as u } from "@arcgis/lumina";
 import { css as w } 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 */
-const g = w`@layer{/** @license
+v1.0.0-next.20250421 */
+const _ = w`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,19 +24,23 @@ const g = w`@layer{/** @license
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */:host{display:block}.error-msg{padding:10px}.layer-name{font-weight:500;word-break:break-word}.feature-count{padding:0 10px}}`;
-class _ extends f {
+class g extends L {
   constructor() {
-    super(...arguments), this.showFeatureCount = !0, this.showNextIcon = !1, this.applyLayerViewFilter = !1, this.filterByMapExtent = !1, this._noLayersToDisplay = !1, this._mapLayerIds = [], this._isLoading = !1, this._translations = L({ name: "layer-list" }), this.layerSelect = o(), this.layersListLoaded = o();
+    super(...arguments), this.layers = [], this.locale = "", this.showFeatureCount = !0, this.showNextIcon = !1, this.applyLayerViewFilter = !1, this.filterByMapExtent = !1, this._noLayersToDisplay = !1, this._mapLayerIds = [], this._isLoading = !1, this._translations = f({ name: "layer-list" }), this.layerSelect = l(), this.layersListLoaded = l();
   }
   static {
     this.properties = { mapView: 0, layers: 0, locale: 1, showFeatureCount: 5, showNextIcon: 5, applyLayerViewFilter: 5, filterByMapExtent: 5, _noLayersToDisplay: 16, _mapLayerIds: 16, _isLoading: 16, _translations: 16 };
   }
   static {
-    this.styles = g;
+    this.styles = _;
   }
   static {
     this.shadowRootOptions = u;
   }
+  /** 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("filterByMapExtent") && (this.hasUpdated || this.filterByMapExtent !== !1) && this.filterByMapExtentWatchHandler(this.filterByMapExtent);
+  }
   //--------------------------------------------------------------------------
   //
   //  Watch handlers
@@ -101,7 +105,7 @@ class _ extends f {
    * @protected
    */
   initializeMapExtentFilter() {
-    this._filterByMapExtentHandle = this.reactiveUtils.when(() => this.mapView.stationary, () => {
+    this._filterByMapExtentHandle = this.reactiveUtils?.when(() => this.mapView?.stationary, () => {
       this.setLayers();
     }, {
       initial: !0
@@ -124,32 +128,34 @@ class _ extends f {
    */
   async initLayerHash() {
     const e = [];
-    this._layerItemsHash = await c(this.mapView, !0);
-    const s = await y(this.mapView);
-    for (const t of s)
-      if (t?.type === "feature" && this.showFeatureCount) {
-        const i = t.createQuery();
-        if (t?.definitionExpression && (i.where = i.where + " AND " + t.definitionExpression), this.applyLayerViewFilter) {
-          const r = await d(this.mapView, t.id);
-          r?.filter?.where && (i.where = i.where ? i.where + " AND " + r.filter.where : r.filter.where);
-        }
-        i.geometry = this.filterByMapExtent ? this.mapView.extent : null;
-        const n = t.queryFeatureCount(i);
-        e.push(n), n.then(async (r) => {
-          const l = isNaN(r) ? "" : await p(r, {
-            places: 0,
-            api: 4,
-            type: "decimal"
+    if (this.mapView) {
+      this._layerItemsHash = await c(this.mapView, !0);
+      const s = await y(this.mapView);
+      for (const t of s)
+        if (t?.type === "feature" && this.showFeatureCount) {
+          const i = t.createQuery();
+          if (t?.definitionExpression && (i.where = i.where + " AND " + t.definitionExpression), this.applyLayerViewFilter) {
+            const r = await d(this.mapView, t.id);
+            r?.filter?.where && (i.where = i.where ? i.where + " AND " + r.filter.where : r.filter.where);
+          }
+          i.geometry = this.filterByMapExtent ? this.mapView.extent : null;
+          const n = t.queryFeatureCount(i);
+          e.push(n), n.then(async (r) => {
+            const o = isNaN(r) ? "" : await p(r, {
+              places: 0,
+              api: 4,
+              type: "decimal"
+            });
+            this._layerItemsHash && (this._layerItemsHash[t.id].formattedFeatureCount = o);
           });
-          this._layerItemsHash[t.id].formattedFeatureCount = l;
-        });
-      }
-    await Promise.all(e).then(() => {
-      const t = this.getLayersToBeShownInList(this._layerItemsHash);
-      this._mapLayerIds = t.reverse(), this.handleNoLayersToDisplay();
-    }, () => {
-      this._mapLayerIds = [], this.handleNoLayersToDisplay();
-    });
+        }
+      await Promise.all(e).then(() => {
+        const t = this._layerItemsHash && this.getLayersToBeShownInList(this._layerItemsHash);
+        this._mapLayerIds = t?.reverse() || [], this.handleNoLayersToDisplay();
+      }, () => {
+        this._mapLayerIds = [], this.handleNoLayersToDisplay();
+      });
+    }
   }
   /** Set no layers to display state and emit event */
   handleNoLayersToDisplay() {
@@ -173,7 +179,7 @@ class _ extends f {
    */
   renderLayerList() {
     return this._mapLayerIds.length > 0 ? this._mapLayerIds.reduce((e, s) => {
-      if (this._layerItemsHash[s]) {
+      if (this._layerItemsHash && this._layerItemsHash[s]) {
         const t = this.getLayerListItem(s);
         t && e.push(t);
       }
@@ -188,7 +194,7 @@ class _ extends f {
    * @protected
    */
   getLayerListItem(e) {
-    const s = this._layerItemsHash[e].name, t = this._layerItemsHash[e].formattedFeatureCount;
+    const s = this._layerItemsHash && this._layerItemsHash[e].name, t = this._layerItemsHash && this._layerItemsHash[e].formattedFeatureCount;
     return a`<calcite-list-item @calciteListItemSelect=${() => {
       this.onLayerItemSelected(e);
     }}><div class="layer-name" slot=content-start>${s}</div>${this.showFeatureCount && t !== void 0 && t !== "" && a`<div class="feature-count" slot=content-end>${"(" + t + ")"}</div>` || ""}${this.showNextIcon && a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
@@ -200,24 +206,10 @@ class _ extends f {
    * @protected
    */
   onLayerItemSelected(e) {
-    this.layerSelect.emit({ layerId: e, layerName: this._layerItemsHash[e].name });
-  }
-  /**
-   * 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 LayerList_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("filterByMapExtent") && (this.hasUpdated || this.filterByMapExtent !== !1) && this.filterByMapExtentWatchHandler(this.filterByMapExtent);
+    this._layerItemsHash && this.layerSelect.emit({ layerId: e, layerName: this._layerItemsHash[e]?.name });
   }
 }
-h("layer-list", _);
+h("layer-list", g);
 export {
-  _ as LayerList
+  g as LayerList
 };

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

@@ -7,13 +7,13 @@ import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/
 
 export declare class LayerTable extends LitElement {
     /** AppLayout: the current app layout */
-    appLayout: AppLayout;
+    appLayout: AppLayout | undefined;
     /** string: Global ID of the feature to select */
-    defaultGlobalId: string[] | undefined;
+    defaultGlobalId: string[];
     /** string: when provided this layer ID will be used when the app loads */
     defaultLayerId: string;
     /** number: when provided this will be used to select a feature in the table by default */
-    defaultOid: number[] | undefined;
+    defaultOid: number[];
     /** boolean: when true the layer table will auto refresh the data */
     enableAutoRefresh: boolean;
     /** boolean: when true the layer table will support drag/drop of columns to adjust order */
@@ -39,9 +39,9 @@ export declare class LayerTable extends LitElement {
     /** boolean: when true the map is hidden and map specific controls should be hidden */
     mapHidden: boolean;
     /** IMapInfo: key configuration details about the current map */
-    mapInfo: IMapInfo;
+    mapInfo: IMapInfo | undefined;
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
-    mapView: __esri.MapView;
+    mapView: __esri.MapView | undefined;
     /** boolean: When true only editable layers that support the update capability will be available */
     onlyShowUpdatableLayers: boolean;
     /** number[]: A list of ids that are currently selected */
@@ -55,7 +55,7 @@ export declare class LayerTable extends LitElement {
     /** boolean: When true the selected feature will zoomed to in the map and the row will be scrolled to within the table */
     zoomAndScrollToSelected: boolean;
     /** number: default scale to zoom to when zooming to a single point feature */
-    zoomToScale: number;
+    zoomToScale: number | undefined;
     /** boolean: create filter modal optional (default true) boolean value to create filter modal in layer table */
     createFilterModal: boolean;
     /** Closes the filter */