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

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

@@ -7,11 +7,11 @@ import { defineCustomElements as x } from "@arcgis/instant-apps-components/loade
 import { u as E } from "../../chunks/useT9n.js";
 import { nothing as d, html as n } from "lit";
 import { createRef as f, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as O, createEvent as u, noShadowRoot as S, safeClassMap as _ } from "@arcgis/lumina";
+import { LitElement as S, createEvent as u, noShadowRoot as O, safeClassMap as _ } from "@arcgis/lumina";
 import { css as T } 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 = T`@layer{/** @license
  * Copyright 2025 Esri
  *
@@ -27,9 +27,9 @@ const F = T`@layer{/** @license
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */:host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.display-none{display:none}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=rtl] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none!important}vaadin-grid-cell-content{font-size:14px!important;color:var(--calcite-color-text-3)!important}.share-action{position:absolute;right:0;left:unset}html[dir=rtl] .share-action{left:0;right:unset}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.instant-app-share{height:50px!important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding: 0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-foreground-1)!important}.search{--calcite-color-border-input: var(--calcite-color-border-3);width:60%;padding:10px}.delete-red{--calcite-icon-color: var(--calcite-color-status-danger);--calcite-color-text-1: var(--calcite-color-status-danger);--calcite-color-text-3: var(--calcite-color-status-danger)}}`;
-class C extends O {
+class C extends S {
   constructor() {
-    super(), this.enableColumnReorder = !0, this.selectedIds = [], this.createFilterModal = !0, this._allIds = [], this._csvExporting = !1, this._fetchingData = !1, this._filterActive = !1, this._filterOpen = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._translations = E({ name: "layer-table" }), this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._defaultFilterHonored = !1, this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._filterList = f(), this._loaded = !1, this._observerSet = !1, this._selectionFromMap = !1, this._shareNode = f(), this._showHideDropdown = f(), this._moreDropdown = f(), this._toolbar = f(), this._skipEditCheck = !1, this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this.featureSelectionChange = u(), this.toggleFilter = u(), this.showDelete = u(), this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), x(window);
+    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.honorMapFieldSettings = !1, this.isMobile = !1, this.locale = "", this.mapHidden = !1, this.onlyShowUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, this.createFilterModal = !0, this._allIds = [], this._controlsThatFit = [], this._csvExporting = !1, this._fetchingData = !1, this._filterActive = !1, this._filterOpen = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = E({ name: "layer-table" }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._defaultFilterHonored = !1, this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._definitionExpression = "", this._deleteEnabled = !1, this._filterList = f(), this._floorExpression = "", this._floorField = "", this._floorFacility = "", this._floorLevel = "", this._floorSite = "", this._layerExpressions = [], this._loaded = !1, this._observerSet = !1, this._selectionFromMap = !1, this._shareNode = f(), this._showHideDropdown = f(), this._moreDropdown = f(), this._toolbar = f(), this._toolbarSizeInfos = [], this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this.featureSelectionChange = u(), this.toggleFilter = u(), this.showDelete = u(), this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), x(window);
   }
   static {
     this.properties = { appLayout: 1, defaultGlobalId: 0, defaultLayerId: 1, defaultOid: 0, enableAutoRefresh: 5, enableColumnReorder: 5, enableCSV: 5, enableInlineEdit: 5, enableShare: 5, honorMapFieldSettings: 5, isMobile: 5, locale: 1, mapHidden: 5, mapInfo: 0, mapView: 0, onlyShowUpdatableLayers: 5, selectedIds: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, zoomAndScrollToSelected: 5, zoomToScale: 9, createFilterModal: 5, _allIds: 16, _controlsThatFit: 16, _csvExporting: 16, _fetchingData: 16, _filterActive: 16, _filterOpen: 16, _layer: 16, _selectAllActive: 16, _showHideOpen: 16, _showOnlySelected: 16, _toolInfos: 16, _translations: 16, _fullTextSearchInfo: 16, _searchPlaceHolder: 16, _size: 16, _queryingData: 16 };
@@ -38,7 +38,7 @@ class C extends O {
     this.styles = F;
   }
   static {
-    this.shadowRootOptions = S;
+    this.shadowRootOptions = O;
   }
   /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(e) {
@@ -102,7 +102,7 @@ class C extends O {
   }
   /** watch for changes in map view and get the first layer */
   async mapViewWatchHandler() {
-    this._mapClickHandle && this._mapClickHandle.remove(), this.mapView && (this._floorExpression = void 0, this._searchExpression = void 0, this.mapView.highlights = [
+    this._mapClickHandle && this._mapClickHandle.remove(), this.mapView && (this._floorExpression = "", this._searchExpression = "undefined", this.mapView.highlights = [
       {
         name: "default",
         color: "#00FFFF"
@@ -115,14 +115,14 @@ class C extends O {
         name: "temporary",
         color: "#FFFF00"
       }
-    ], this._updateShareUrl(), this._mapClickHandle = this.reactiveUtils.on(() => this.mapView, "click", (e) => {
+    ], this._updateShareUrl(), this._mapClickHandle = this.reactiveUtils?.on(() => this.mapView, "click", (e) => {
       this._mapClicked(e);
     }));
   }
   /** watch for changes in layer view and verify if it has editing enabled */
   async _layerWatchHandler() {
     this._fetchingData = !0, await this._layer?.when(async () => {
-      this._definitionExpression = this._layer?.definitionExpression, this._floorField = this._layer?.floorInfo?.floorField, this._updateFloorDefinitionExpression(), await this._resetTable(), this.createFilterModal && this._initLayerExpressions(), this._updateShareUrl(), this._fetchingData = !1;
+      this._definitionExpression = this._layer?.definitionExpression || "", this._floorField = this._layer?.floorInfo?.floorField || "", this._updateFloorDefinitionExpression(), await this._resetTable(), this.createFilterModal && this._initLayerExpressions(), this._updateShareUrl(), this._fetchingData = !1;
     });
   }
   /** watch for selection changes */
@@ -140,11 +140,11 @@ class C extends O {
   }
   /** Reset the filter */
   async filterReset() {
-    this._filterByExtentHandle && (this._table.filterGeometry = void 0, this._filterByExtentHandle.remove(), this._filterByExtentHandle = void 0), await this._handleFilterListReset();
+    this._filterByExtentHandle && (this._table && (this._table.filterGeometry = void 0), this._filterByExtentHandle.remove(), this._filterByExtentHandle = void 0), await this._handleFilterListReset();
   }
   /** Updates the filter */
   async filterUpdate(e, t) {
-    await this._handleFilterUpdate(e), t ? (this._shouldUpdateTableOnExtentChange = !0, this._handleTableOnMapExtent()) : t === !1 && (this._table.filterGeometry = void 0, this._filterByExtentHandle?.remove(), this._filterByExtentHandle = void 0, await this._updateAllIds());
+    await this._handleFilterUpdate(e), t ? (this._shouldUpdateTableOnExtentChange = !0, this._handleTableOnMapExtent()) : t === !1 && (this._table && (this._table.filterGeometry = void 0), this._filterByExtentHandle?.remove(), this._filterByExtentHandle = void 0, await this._updateAllIds());
   }
   /** Validate if the table should update */
   async validateTableUpdate(e) {
@@ -191,12 +191,12 @@ class C extends O {
    */
   async selectionChanged(e) {
     const t = e.detail.selectedFeature[0], i = Number(t.getObjectId()), s = this._table;
-    if (s.rowHighlightIds.length && s.rowHighlightIds.removeAll(), s.rowHighlightIds.add(i), this._highlightFeatures(i), this.zoomAndScrollToSelected) {
-      const l = this._table.viewModel.getObjectIdIndex(i);
-      this._table.scrollToIndex(l);
+    if (s.rowHighlightIds.length && s.rowHighlightIds.removeAll(), s.rowHighlightIds.add(i), this._highlightFeatures(i), this.zoomAndScrollToSelected && s && this.mapView) {
+      const l = s.viewModel.getObjectIdIndex(i);
+      s.scrollToIndex(l);
       const a = t.layer, h = this.mapView.allLayerViews.toArray();
       let o;
-      h.some(async (r) => r.layer.title === a?.title && r.layer.type === "feature" ? (o = r, await b([i], o, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
+      h.some(async (r) => r.layer.title === a?.title && r.layer.type === "feature" ? (o = r, this.mapView && await b([i], o, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
     }
   }
   /**
@@ -259,7 +259,7 @@ class C extends O {
   }
   /** Called once after the component is loaded */
   loaded() {
-    !this.isMobile && !this._observerSet && this._toolbar.value && (this._resizeObserver.observe(this._toolbar.value), this._observerSet = !0);
+    !this.isMobile && !this._observerSet && this._toolbar.value && (this._resizeObserver?.observe(this._toolbar.value), this._observerSet = !0);
   }
   /** Called after the component is rendered */
   updated() {
@@ -309,12 +309,12 @@ class C extends O {
       const s = this._layer?.createQuery();
       s.fullText = this._fullTextSearchInfo, i = this._layer ? await this._layer.queryObjectIds(s) : [], t && e?.length && (i = i.filter((l) => e.includes(l))), await this._updateSearchDefinitionExpression(i?.length ? i : [-1]);
     }
-    t && i?.length && (this._showOnlySelected = !0, this._table.highlightIds.addMany(i.reverse())), await new Promise((s) => setTimeout(s, 800)), await this._updateAllIds();
+    t && i?.length && (this._showOnlySelected = !0, this._table?.highlightIds.addMany(i.reverse())), await new Promise((s) => setTimeout(s, 800)), await this._updateAllIds();
   }
   /** Clears the applied search expression on the layer */
   _clearSearchDefinitionExpression() {
     const e = this._layer?.definitionExpression;
-    this._searchExpression && e && e?.indexOf(this._searchExpression) > -1 && this._layer && (e?.indexOf(" AND (" + this._searchExpression) > -1 ? this._layer.definitionExpression = e.replace(` AND (${this._searchExpression})`, "") : this._layer.definitionExpression = e.replace(this._searchExpression, "")), this._searchExpression = void 0;
+    this._searchExpression && e && e?.indexOf(this._searchExpression) > -1 && this._layer && (e?.indexOf(" AND (" + this._searchExpression) > -1 ? this._layer.definitionExpression = e.replace(` AND (${this._searchExpression})`, "") : this._layer.definitionExpression = e.replace(this._searchExpression, "")), this._searchExpression = "";
   }
   /**
    * Update the search expression in layer
@@ -384,7 +384,7 @@ class C extends O {
    * @returns VNode[] the action nodes
    */
   _getActions() {
-    return this._getActionItems()?.reduce((t, i) => (i && !i.isOverflow && t.push(i.isDanger ? this._getDangerAction(i.icon, i.label, i.func, i.disabled) : i.isSublist && this._table?.columns?.length > 0 ? n`<calcite-dropdown close-on-select-disabled id=${this._getId(i.icon) ?? d} @calciteDropdownBeforeClose=${() => this._forceShowHide()} ${c(this._showHideDropdown)}>${this._getAction(i.active, this._showHideOpen ? "chevron-down" : i.icon, i.indicator, i.label, i.func, i.disabled, !!i.loading, "trigger")}${this._showHideOpen ? this._getFieldlist() : void 0}</calcite-dropdown>` : this._getAction(i.active, i.icon, i.indicator, i.label, i.func, i.disabled, !!i.loading)), t), []);
+    return this._getActionItems()?.reduce((t, i) => (i && !i.isOverflow && t.push(i.isDanger ? this._getDangerAction(i.icon, i.label, i.func, i.disabled) : i.isSublist && this._table && this._table?.columns?.length > 0 ? n`<calcite-dropdown close-on-select-disabled id=${this._getId(i.icon) ?? d} @calciteDropdownBeforeClose=${() => this._forceShowHide()} ${c(this._showHideDropdown)}>${this._getAction(i.active, this._showHideOpen ? "chevron-down" : i.icon, i.indicator, i.label, i.func, i.disabled, !!i.loading, "trigger")}${this._showHideOpen ? this._getFieldlist() : void 0}</calcite-dropdown>` : this._getAction(i.active, i.icon, i.indicator, i.label, i.func, i.disabled, !!i.loading)), t), []);
   }
   /**
    * Get the list of fields as dropdown items and store the current selected state so
@@ -394,10 +394,10 @@ class C extends O {
    */
   _getFieldlist() {
     return this._columnsInfo ? n`<calcite-dropdown-group selection-mode=multiple>${Object.keys(this._columnsInfo).map((e) => {
-      const t = this._columnsInfo[e];
+      const t = this._columnsInfo && this._columnsInfo[e];
       return n`<calcite-dropdown-item .id=${`layer-table-${e.toLowerCase().replaceAll(" ", "")}`} .label=${e} @click=${(i) => {
         const s = i.target;
-        this._columnsInfo[s.label] = !s.selected, s.selected ? this._table.hideColumn(s.label) : this._table.showColumn(s.label);
+        this._columnsInfo && this._table && (this._columnsInfo[s.label] = !s.selected, s.selected ? this._table.hideColumn(s.label) : this._table.showColumn(s.label));
       }} .selected=${t}>${e}</calcite-dropdown-item>`;
     })}</calcite-dropdown-group>` : void 0;
   }
@@ -650,7 +650,7 @@ class C extends O {
    * @returns VNode The node representing the DOM element that will contain the action
    */
   _getShare(e) {
-    return n`<div class="share-action" id=${this._getId(e) ?? d}><instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${c(this._shareNode)}></instant-apps-social-share>${this._getToolTip("bottom", e, this._translations.share || "")}</div>`;
+    return this.mapView && n`<div class="share-action" id=${this._getId(e) ?? d}><instant-apps-social-share class="instant-app-share" .embed=${this.shareIncludeEmbed} flip-rtl popover-button-icon-scale=s scale=m share-button-color=neutral share-button-type=action .socialMedia=${this.shareIncludeSocial} .view=${this.mapView} ${c(this._shareNode)}></instant-apps-social-share>${this._getToolTip("bottom", e, this._translations.share || "")}</div>` || "";
   }
   /** Called each time the values that are used for custom url params change */
   _updateShareUrl() {
@@ -658,7 +658,7 @@ class C extends O {
     if (!e)
       return;
     const t = new URL(e);
-    this.mapInfo?.id ? t.searchParams.set("webmap", this.mapInfo.id) : t.searchParams.delete("webmap"), this._layer?.id ? t.searchParams.set("layer", this._layer.id) : t.searchParams.delete("layer"), this.selectedIds?.length > 0 ? t.searchParams.set("oid", this.selectedIds.join(",")) : t.searchParams.delete("oid"), t.searchParams.set("applayout", this.appLayout), this._shareNode.value && (this._shareNode.value.shareUrl = t.href);
+    this.mapInfo?.id ? t.searchParams.set("webmap", this.mapInfo.id) : t.searchParams.delete("webmap"), this._layer?.id ? t.searchParams.set("layer", this._layer.id) : t.searchParams.delete("layer"), this.selectedIds?.length > 0 ? t.searchParams.set("oid", this.selectedIds.join(",")) : t.searchParams.delete("oid"), this.appLayout && t.searchParams.set("applayout", this.appLayout), this._shareNode.value && (this._shareNode.value.shareUrl = t.href);
   }
   /**
    * Get a tooltip
@@ -700,7 +700,7 @@ class C extends O {
    * @returns number[] the selected ids
    */
   _getIds() {
-    return this._table?.highlightIds?.map((e) => parseInt(e.toString(), 10)).toArray();
+    return this._table?.highlightIds?.map((e) => parseInt(e.toString(), 10)).toArray() || [];
   }
   /**
    * Store a reference to the table node after it's first created
@@ -718,7 +718,7 @@ class C extends O {
    */
   async _getTable(e, t) {
     this._layer && (await this._layer.when(() => {
-      this._table = new this.FeatureTable({
+      this._table = this.FeatureTable && new this.FeatureTable({
         autoRefreshEnabled: this.enableAutoRefresh,
         layer: this._layer,
         view: this.mapView,
@@ -738,10 +738,10 @@ class C extends O {
         },
         container: e
       });
-    }), await this._table.when(() => {
-      this._table.viewModel.addHandles(this._table.highlightIds.on("change", (i) => {
+    }), await this._table?.when(() => {
+      this._table?.viewModel.addHandles(this._table.highlightIds.on("change", (i) => {
         this._handleOnChange(i);
-      })), this._table.viewModel.addHandles(this._table.on("cell-pointerover", this.tempHighlightOnHover.bind(this))), this._table.viewModel.addHandles(this._table.on("cell-pointerout", this._removeTempHighlight.bind(this))), this.listenOn(this._tableNode, "mouseleave", this._removeTempHighlight), this._table.viewModel.addHandles(this.reactiveUtils.watch(() => this._table.size, (i) => {
+      })), this._table?.viewModel.addHandles(this._table.on("cell-pointerover", this.tempHighlightOnHover.bind(this))), this._table?.viewModel.addHandles(this._table.on("cell-pointerout", this._removeTempHighlight.bind(this))), this.listenOn(this._tableNode, "mouseleave", this._removeTempHighlight), this.reactiveUtils && this._table?.viewModel.addHandles(this.reactiveUtils.watch(() => this._table.size, (i) => {
         this._size = i;
       }));
     }));
@@ -771,7 +771,7 @@ class C extends O {
         } catch (a) {
           l = a?.name === "workflow:cancel-denied";
         }
-        l && (i = !1, this._skipEditCheck = !0, e.length > 0 ? this._table.highlightIds.removeMany(e) : t.length > 0 && this._table.highlightIds.addMany(t));
+        l && (i = !1, this._skipEditCheck = !0, e.length > 0 ? this._table?.highlightIds.removeMany(e) : t.length > 0 && this._table?.highlightIds.addMany(t));
       }
     } else
       i = !this._skipEditCheck, this._skipEditCheck = !1;
@@ -784,7 +784,7 @@ class C extends O {
   }
   /** Handle any updates after a selection change has occured and emit the results */
   _finishOnChange() {
-    this._showOnlySelected && (this._featuresSelected() ? this._table.filterBySelectionEnabled = !0 : this._toggleShowSelected()), this.featureSelectionChange.emit(this.selectedIds);
+    this._showOnlySelected && (this._featuresSelected() && this._table ? this._table.filterBySelectionEnabled = !0 : this._toggleShowSelected()), this.featureSelectionChange.emit(this.selectedIds);
   }
   /**
    * Highlight feature when hovered over table row
@@ -823,7 +823,7 @@ class C extends O {
       e?.length === 0 ? this._tableNode?.classList.add("display-none") : this._tableNode?.classList.remove("display-none");
       const t = this._table?.tableTemplate?.columnTemplates, i = t && e && t.length !== e.length || e?.some((s, l) => t && t[l] ? JSON.stringify(t[l]) !== JSON.stringify(s) : !1);
       if (this._table && e && (i || !this._columnsInfo)) {
-        this._table.tableTemplate = new this.TableTemplate({
+        this._table.tableTemplate = this.TableTemplate && new this.TableTemplate({
           columnTemplates: e
         });
         const s = e.map((l) => l.fieldName);
@@ -835,20 +835,19 @@ class C extends O {
   async _resetTable() {
     if (this._loaded = !1, this._clearSelection(), this._allIds = await this.queryAllIds(), !this._table && this._layer) {
       const e = this._getColumnTemplates(this._layer.id, this._layer?.fields);
-      await this._getTable(this._tableNode, e);
-    } else
-      this._table.view = this.mapView, this._table.layer = this._layer;
-    await this._initLayerRefresh(), this._checkEditEnabled(), this._table.editingEnabled = this._editEnabled && this.enableInlineEdit, await this._table.when(), setTimeout(() => {
+      this._tableNode && await this._getTable(this._tableNode, e);
+    } else this._table && (this._table.view = this.mapView, this._table.layer = this._layer);
+    await this._initLayerRefresh(), this._checkEditEnabled(), this._table && (this._table.editingEnabled = this._editEnabled && this.enableInlineEdit, await this._table.when(), setTimeout(() => {
       this._loaded || this.finishLoading();
-    }, 1e3), await this.reactiveUtils.once(() => this._table.state === "loaded").then(async () => {
+    }, 1e3), await this.reactiveUtils?.once(() => this._table?.state === "loaded").then(async () => {
       await this.finishLoading();
-    });
+    }));
   }
   /** Finish the table loading tasks */
   async finishLoading() {
     try {
-      this._loaded = !0, this._table.highlightIds.removeAll(), this._table.objectIds.removeAll(), this._resetColumnTemplates(), this._showOnlySelected = !1, await this._handleDefaults(), await this._sortTable(), this._initToolInfos(), this._controlsThatFitWatchHandler(), this._updateToolbar(), ["esri-feature-table", "esri-widget"].forEach((t) => {
-        this._tableNode.classList.contains(t) || this._tableNode.classList.add(t);
+      this._loaded = !0, this._table?.highlightIds.removeAll(), this._table.objectIds.removeAll(), this._resetColumnTemplates(), this._showOnlySelected = !1, await this._handleDefaults(), await this._sortTable(), this._initToolInfos(), this._controlsThatFitWatchHandler(), this._updateToolbar(), ["esri-feature-table", "esri-widget"].forEach((t) => {
+        this._tableNode && !this._tableNode.classList.contains(t) && this._tableNode.classList.add(t);
       });
     } catch (e) {
       console.log(e);
@@ -867,9 +866,9 @@ class C extends O {
   }
   /** Handle default OID or GlobalID from url parameters */
   async _handleDefaults() {
-    if (!this._defaultOidHonored && this.defaultOid && this.defaultOid?.length > 0 && this.defaultOid[0] > -1 && this._table && (await this._selectDefaultFeature(this.defaultOid), this._defaultOidHonored = !0, this.defaultOid = void 0, this._showOnlySelected = !1, this._toggleShowSelected()), !this._defaultGlobalIdHonored && this.defaultGlobalId && this.defaultGlobalId?.length > 0 && this._table && this._layer) {
+    if (!this._defaultOidHonored && this.defaultOid?.length > 0 && this.defaultOid[0] > -1 && this._table && (await this._selectDefaultFeature(this.defaultOid), this._defaultOidHonored = !0, this.defaultOid = [], this._showOnlySelected = !1, this._toggleShowSelected()), !this._defaultGlobalIdHonored && this.defaultGlobalId && this.defaultGlobalId?.length > 0 && this._table && this._layer) {
       const e = await I(this.defaultGlobalId, this._layer), t = e?.length > 0 ? e.map((i) => Number(i.getObjectId())) : void 0;
-      t && await this._selectDefaultFeature(t), this._defaultGlobalIdHonored = !0, this.defaultGlobalId = void 0, this._showOnlySelected = !1, this._toggleShowSelected();
+      t && await this._selectDefaultFeature(t), this._defaultGlobalIdHonored = !0, this.defaultGlobalId = [], this._showOnlySelected = !1, this._toggleShowSelected();
     }
   }
   /**
@@ -879,13 +878,13 @@ class C extends O {
    */
   _initColumnsInfo(e) {
     const t = this._table?.columns.reduce((l, a) => ((!e || e?.indexOf(a.name) > -1) && (l[a.name] = !a.hidden), l), {}), i = this._table?.columns.map((l) => l.name);
-    (e ? e.filter((l) => i.indexOf(l) < 0) : []).forEach((l) => {
+    (e && i ? e.filter((l) => i.indexOf(l) < 0) : []).forEach((l) => {
       t[l] = !0;
     }), this._columnsInfo = e ? e.reduce((l, a) => (l[a] = t[a], l), {}) : t;
   }
   /** Select the feature that was specified via url params */
   async _selectDefaultFeature(e) {
-    e.length > 0 && this._table.highlightIds.addMany(e);
+    e.length > 0 && this._table?.highlightIds.addMany(e);
   }
   /** Verify edit capabilities of the layer */
   _checkEditEnabled() {
@@ -896,7 +895,7 @@ class C extends O {
     let e = this._layer?.objectIdField, t = "desc", i;
     const s = this.mapInfo?.layerOptions?.layers, l = this._layer?.id;
     s && s.length > 0 && l !== void 0 && (i = s.filter((a) => a.id === l), i && i.length > 0 && (i = i[0], i.sortField && i.fields?.includes(i.sortField) && (e = i.sortField), t = i?.sortOrder ? i.sortOrder : "desc")), this._table && this._layer && (await this._table.when(), await this._layer.when(() => {
-      e && this._table.sortColumn(e, t);
+      e && this._table?.sortColumn(e, t);
     }));
   }
   /** Open show/hide dropdown */
@@ -919,7 +918,7 @@ class C extends O {
    */
   _handleDocumentClick(e) {
     const t = e.target?.id;
-    t.startsWith("layer-table-") && this._moreDropdown.value ? this._moreDropdown.value.open = !0 : this._showHideOpen && Object.keys(this._columnsInfo).indexOf(t) < 0 && t !== "chevron-right" && (this._closeShowHide(), this._moreDropdown.value && (this._moreDropdown.value.open = !1), this._showHideDropdown.value && (this._showHideDropdown.value.open = !1));
+    t.startsWith("layer-table-") && this._moreDropdown.value ? this._moreDropdown.value.open = !0 : this._showHideOpen && this._columnsInfo && Object.keys(this._columnsInfo).indexOf(t) < 0 && t !== "chevron-right" && (this._closeShowHide(), this._moreDropdown.value && (this._moreDropdown.value.open = !1), this._showHideDropdown.value && (this._showHideDropdown.value.open = !1));
   }
   /**
    * Show filter component in modal
@@ -928,7 +927,7 @@ class C extends O {
    * @protected
    */
   _filterModal() {
-    return n`<calcite-dialog class="filter-content-space" .heading=${this._translations?.filter?.replace("{{title}}", this._layer?.title || "")} id=solutions-filter-dialog kind=brand modal @calciteDialogClose=${() => void this._closeFilter()} .open=${this._filterOpen} width-scale=s><instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._layerExpressions} @filterListReset=${() => void this._handleFilterListReset()} @filterUpdate=${() => this._filterList?.value?.filterCount && void this._handleFilterUpdate(this._filterList?.value?.filterCount > 0)} .view=${this.mapView} ${c(this._filterList)}></instant-apps-filter-list></calcite-dialog>`;
+    return n`<calcite-dialog class="filter-content-space" .heading=${this._translations?.filter?.replace("{{title}}", this._layer?.title || "")} id=solutions-filter-dialog kind=brand modal @calciteDialogClose=${() => void this._closeFilter()} .open=${this._filterOpen} width-scale=s>${this.mapView && n`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._layerExpressions} @filterListReset=${() => void this._handleFilterListReset()} @filterUpdate=${() => this._filterList?.value?.filterCount && void this._handleFilterUpdate(this._filterList?.value?.filterCount > 0)} .view=${this.mapView} ${c(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-dialog>`;
   }
   /**
    * Reset the filter active prop
@@ -952,18 +951,20 @@ class C extends O {
   }
   /** Update the table when extent is changed */
   _handleTableOnMapExtent() {
-    this._table && (this._filterByExtentHandle = this.reactiveUtils.when(
-      () => this.mapView.stationary,
+    this._table && (this._filterByExtentHandle = this.reactiveUtils?.when(
+      () => this.mapView?.stationary,
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       async () => {
         if (this._shouldUpdateTableOnExtentChange) {
-          await new Promise((l) => setTimeout(l, 800)), this._table.filterGeometry = this.mapView.extent;
-          const e = {
-            geometry: this.mapView.extent
-          }, t = this._layer && await this._layer.queryObjectIds(e), i = this.selectedIds.filter((l) => !t?.includes(l)), s = this._outOFExtentOids.filter((l) => t?.includes(l));
-          i.length > 0 && (this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._table.highlightIds.removeMany(i), this._outOFExtentOids = [...this._outOFExtentOids, ...i]), s.length > 0 && (this.selectedIds = [.../* @__PURE__ */ new Set([...this.selectedIds, ...s])], this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(this.selectedIds.reverse()), this._outOFExtentOids = this._outOFExtentOids.filter((l) => !s.includes(l)));
+          if (await new Promise((e) => setTimeout(e, 800)), this._table && this.mapView) {
+            this._table.filterGeometry = this.mapView.extent;
+            const e = {
+              geometry: this.mapView.extent
+            }, t = this._layer && await this._layer.queryObjectIds(e), i = this.selectedIds.filter((l) => !t?.includes(l)), s = this._outOFExtentOids.filter((l) => t?.includes(l));
+            i.length > 0 && (this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._table.highlightIds.removeMany(i), this._outOFExtentOids = [...this._outOFExtentOids, ...i]), s.length > 0 && (this.selectedIds = [.../* @__PURE__ */ new Set([...this.selectedIds, ...s])], this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(this.selectedIds.reverse()), this._outOFExtentOids = this._outOFExtentOids.filter((l) => !s.includes(l)));
+          }
+          this._allIds = await this.queryAllIds();
         }
-        this._allIds = await this.queryAllIds();
       },
       {
         initial: !0
@@ -986,7 +987,7 @@ class C extends O {
   async queryAllIds() {
     if (this._layer) {
       const e = this._layer.createQuery();
-      return e.geometry = this._filterByExtentHandle ? this.mapView.extent : null, e.where = this._layer.definitionExpression || "1=1", await this._layer.queryObjectIds(e);
+      return e.geometry = this._filterByExtentHandle && this.mapView ? this.mapView.extent : null, e.where = this._layer.definitionExpression || "1=1", await this._layer.queryObjectIds(e);
     } else
       return [];
   }
@@ -999,11 +1000,11 @@ class C extends O {
   async _mapClicked(e) {
     const t = {
       include: this._layer
-    }, i = await this.mapView.hitTest(e.screenPoint, t);
-    i.results.length > 0 ? (i.results.forEach((s) => {
-      const l = Number(s.graphic.getObjectId());
-      this._table.highlightIds.indexOf(l) < 0 && (this._selectionFromMap = !0, this._table.highlightIds.add(l));
-    }), this._showOnlySelected && (this._table.filterBySelectionEnabled = !0)) : await this.clearSelection();
+    }, i = await this.mapView?.hitTest(e.screenPoint, t);
+    i && i.results.length > 0 ? (i.results.forEach((s) => {
+      const l = Number(s.graphic.getObjectId()), a = this._table?.highlightIds.indexOf(l);
+      a !== void 0 && a < 0 && (this._selectionFromMap = !0, this._table?.highlightIds.add(l));
+    }), this._showOnlySelected && this._table && (this._table.filterBySelectionEnabled = !0)) : await this.clearSelection();
   }
   /**
    * Select or deselect all rows
@@ -1012,7 +1013,7 @@ class C extends O {
    */
   async _selectAll() {
     const e = this._allIds, t = e.filter((s) => this.selectedIds.indexOf(s) < 0);
-    await this._validateActiveEdits(t, this.selectedIds) ? (this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(e), this.selectedIds = e, this._finishOnChange(), this._selectAllActive = !0) : this._skipEditCheck = !1;
+    await this._validateActiveEdits(t, this.selectedIds) && this._table ? (this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(e), this.selectedIds = e, this._finishOnChange(), this._selectAllActive = !0) : this._skipEditCheck = !1;
   }
   /**
    * Toggle the show only selected flag
@@ -1021,7 +1022,7 @@ class C extends O {
    * @protected
    */
   _toggleShowSelected() {
-    this._showOnlySelected = !this._showOnlySelected, this._table.filterBySelectionEnabled = this._showOnlySelected;
+    this._showOnlySelected = !this._showOnlySelected, this._table && (this._table.filterBySelectionEnabled = this._showOnlySelected);
   }
   /**
    * Clears the selected indexes
@@ -1056,7 +1057,7 @@ class C extends O {
    */
   async _switchSelected() {
     const e = [...this.selectedIds], t = this._allIds.reduce((s, l) => (e.indexOf(l) < 0 && s.push(l), s), []).sort((s, l) => s - l);
-    await this._validateActiveEdits(t, e) ? (this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(t), this.selectedIds = t, this._finishOnChange()) : this._skipEditCheck = !1;
+    await this._validateActiveEdits(t, e) && this._table ? (this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(t), this.selectedIds = t, this._finishOnChange()) : this._skipEditCheck = !1;
   }
   /**
    * Export all selected rows as CSV
@@ -1071,14 +1072,14 @@ class C extends O {
       ids: t,
       layer: this._layer
     });
-    const i = this._table.columns.toArray().reduce((s, l) => {
+    const i = this._table && this._table.columns.toArray().reduce((s, l) => {
       if (!l.hidden) {
         const a = l?.name || l?.fieldName;
         a && s.push(a.toLocaleLowerCase());
       }
       return s;
     }, []);
-    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, await v(
+    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView && await v(
       this.mapView.map,
       e,
       !1,
@@ -1115,7 +1116,7 @@ class C extends O {
    * @protected
    */
   async _zoom() {
-    this._layer && await b(this.selectedIds, this._selectedLayerView, this.mapView, !0, void 0, this.zoomToScale);
+    this._layer && this.mapView && await b(this.selectedIds, this._selectedLayerView, this.mapView, !0, void 0, this.zoomToScale);
   }
   /**
    * Handles layer selection change to show new table
@@ -1128,9 +1129,9 @@ class C extends O {
     const t = e.detail[0];
     if (t !== this._layer?.id || this._featuresEmpty()) {
       this._fetchingData = !0;
-      const i = await y(this.mapView, t);
+      const i = this.mapView && await y(this.mapView, t);
       i && await i.when(async () => {
-        this._selectedLayerView = i.isTable ? null : await w(this.mapView, i.id), this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._shouldUpdateTableOnExtentChange = !0, this._layer = i, this._getFullTextSearchInfo();
+        this._selectedLayerView = !i.isTable && this.mapView ? await w(this.mapView, i.id) : null, this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._shouldUpdateTableOnExtentChange = !0, this._layer = i, this._getFullTextSearchInfo();
       });
     }
     this._fetchingData = !1;
@@ -1188,9 +1189,9 @@ class C extends O {
    * @protected
    */
   _handleHideClick(e) {
-    this._columnsInfo[e] = !1, this._table.hideColumn(e), this._table.tableTemplate && this._table.tableTemplate.columnTemplates.forEach((t) => {
+    this._columnsInfo && this._table && (this._columnsInfo[e] = !1, this._table.hideColumn(e), this._table.tableTemplate && this._table.tableTemplate.columnTemplates.forEach((t) => {
       t.fieldName === e && (t.visible = !1);
-    });
+    }));
   }
 }
 g("layer-table", C);

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

@@ -9,7 +9,7 @@ import { MapPicker } from '../map-picker/customElement.js';
 
 export declare class MapCard extends LitElement {
     /** AppLayout: the current app layout */
-    appLayout: AppLayout;
+    appLayout: AppLayout | undefined;
     /** Array of objects containing proxy information for premium platform services. */
     appProxies: any;
     /** string: Item ID of the web map that should be selected by default when the app loads */
@@ -36,7 +36,7 @@ export declare class MapCard extends LitElement {
     /** boolean: when true the basemap widget will be available */
     enableBasemap: boolean;
     /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
-    basemapConfig: IBasemapConfig;
+    basemapConfig: IBasemapConfig | undefined;
     /** boolean: When true the map display will be hidden */
     hide: boolean;
     /**
@@ -68,14 +68,14 @@ export declare class MapCard extends LitElement {
     /** "s" | "m" | "l": Used for optional map tool widget */
     mapWidgetsSize: 's' | 'm' | 'l';
     /** 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 the map widget tools will have no margin between them.
      * When false the map widget tools will have a margin between them.
      */
     stackTools: boolean;
     /** theme: "light" | "dark" theme to be used */
-    theme: theme;
+    theme: theme | undefined;
     /** Valid tools: "legend", "search", "fullscreen", "basemap", "floorfilter" */
     toolOrder: string[];
     /** boolean: When true map will shown is full screen */
@@ -87,15 +87,15 @@ export declare class MapCard extends LitElement {
     /** number[]: A list of ids that are currently selected */
     selectedFeaturesIds: number[];
     /** __esri.FeatureLayer: Selected layer */
-    selectedLayer: __esri.FeatureLayer | nullish;
+    selectedLayer: __esri.FeatureLayer | undefined;
     /** number: default scale to zoom to when zooming to a single point feature */
-    zoomToScale: number;
+    zoomToScale: number | undefined;
     /** boolean: When true only editable layers that support the update capability will be available */
     onlyShowUpdatableLayers: boolean;
     /** When true the component will render an optimized view for mobile devices */
     isMobile: boolean;
     /** IMapInfo: key configuration details about the current map */
-    mapInfo: IMapInfo;
+    mapInfo: IMapInfo | undefined;
     /** Reset the filter */
     resetFilter(): Promise<void>;
     /** updates the filter */