@esri/solutions-components 1.0.0-next.20250509 → 1.0.0-next.20250513.1

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

@@ -2,18 +2,18 @@ import { c as b } from "../../chunks/runtime.js";
 import { l as y } from "../../chunks/loadModules.js";
 import { b as g, d as m, g as w } from "../../chunks/mapViewUtils.js";
 import { c as I } from "../../chunks/queryUtils.js";
-import { d as x } from "../../chunks/downloadUtils.js";
-import { defineCustomElements as v } from "@arcgis/instant-apps-components/loader";
-import { u as E } from "../../chunks/useT9n.js";
-import { nothing as d, html as h } from "lit";
-import { createRef as _, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as S, createEvent as p, noShadowRoot as O, safeClassMap as u } from "@arcgis/lumina";
-import { css as T } from "@lit/reactive-element/css-tag.js";
+import { d as v } from "../../chunks/downloadUtils.js";
+import { defineCustomElements as x } from "@arcgis/instant-apps-components/loader";
+import { u as T } from "../../chunks/useT9n.js";
+import { nothing as o, html as d } from "lit";
+import { createRef as u, ref as c } from "lit-html/directives/ref.js";
+import { LitElement as E, createEvent as f, noShadowRoot as S, safeClassMap as p } from "@arcgis/lumina";
+import { css as F } from "@lit/reactive-element/css-tag.js";
 import "@arcgis/map-config-components";
 /*! 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.20250509 */
-const C = T`@layer{/** @license
+v1.0.0-next.20250513.1 */
+const O = F`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -27,28 +27,28 @@ const C = T`@layer{/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * 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}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.actions-end{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 F extends S {
+ */: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}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.actions-end{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)}.label-override{--calcite-label-margin-bottom: 0px}.padding-start-1-4{padding-inline-start:.5rem}.panel-header-override{--calcite-panel-header-content-space: 0px}.danger-label-color{--calcite-label-text-color: var(--calcite-color-status-danger)}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}.width-51{width:51px}.height-51{height:51px}}`;
+class C extends E {
   constructor() {
-    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.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._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", blocking: !0 }), 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 = _(), this._floorExpression = "", this._floorField = "", this._floorFacility = "", this._floorLevel = "", this._floorSite = "", this._layerExpressions = [], this._loaded = !1, this._selectionFromMap = !1, this._shareNode = _(), this._toolbar = _(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this.featureSelectionChange = p(), this.toggleFilter = p(), this.showDelete = p(), 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), v(window);
+    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.featureSelectionMode = "multiple", this.selectedRelatedIds = [], this.honorMapFieldSettings = !1, this.isMobile = !1, this.mapHidden = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, 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._toolInfos = [], this._translations = T({ name: "layer-table", blocking: !0 }), 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 = u(), this._floorExpression = "", this._floorField = "", this._floorFacility = "", this._floorLevel = "", this._floorSite = "", this._layerExpressions = [], this._loaded = !1, this._shareNode = u(), this._toolbar = u(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this.featureSelectionChange = f(), this.toggleFilter = f(), this.showDelete = f(), this.relatedRecordToggled = f(), 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), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "featuresSelected", this.featuresSelected), 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, mapHidden: 5, mapInfo: 0, mapView: 0, onlyShowUpdatableLayers: 5, selectedIds: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, zoomAndScrollToSelected: 5, zoomToScale: 9, createFilterModal: 5, _allIds: 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 };
+    this.properties = { appLayout: 1, defaultGlobalId: 0, defaultLayerId: 1, defaultOid: 0, enableAutoRefresh: 5, enableColumnReorder: 5, enableCSV: 5, enableInlineEdit: 5, enableShare: 5, featureSelectionMode: 1, selectedRelatedIds: 0, honorMapFieldSettings: 5, isMobile: 5, mapHidden: 5, mapInfo: 0, mapView: 0, showOnlyUpdatableLayers: 5, selectedIds: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, zoomAndScrollToSelected: 5, zoomToScale: 9, createFilterModal: 5, _allIds: 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 };
   }
   static {
-    this.styles = C;
+    this.styles = O;
   }
   static {
-    this.shadowRootOptions = O;
+    this.shadowRootOptions = S;
   }
   willUpdate(e) {
-    if (e.has("appLayout") && this.appLayoutWatchHandler(), e.has("defaultOid") && this.defaultOidWatchHandler(), e.has("defaultGlobalId") && this.defaultGlobalIdWatchHandler(), e.has("enableCSV") && this.enableCSVWatchHandler(), e.has("enableInlineEdit") && this.enableInlineEditWatchHandler(), e.has("mapHidden") && this.mapHiddenWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_layer") && this._layerWatchHandler(), e.has("selectedIds") && (this.hasUpdated || JSON.stringify(e.get("selectedIds")) !== JSON.stringify(this.selectedIds)) && this.selectedIdsWatchHandler(), e.has("_translations")) {
+    if (e.has("appLayout") && this.appLayoutWatchHandler(), e.has("defaultOid") && this.defaultOidWatchHandler(), e.has("defaultGlobalId") && this.defaultGlobalIdWatchHandler(), e.has("enableCSV") && this.enableCSVWatchHandler(), e.has("enableInlineEdit") && this.enableInlineEditWatchHandler(), e.has("mapHidden") && this.mapHiddenWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_layer") && this._layerWatchHandler(), e.has("selectedIds") && (this.hasUpdated || JSON.stringify(e.get("selectedIds")) !== JSON.stringify(this.selectedIds)) && this.selectedIdsWatchHandler(), e.has("selectedRelatedIds") && (this.hasUpdated || JSON.stringify(e.get("selectedRelatedIds")) !== JSON.stringify(this.selectedRelatedIds)) && this.selectedRelatedIdsWatchHandler(), e.has("_translations")) {
       const t = this._translations._lang, i = e.get("_translations")?._lang;
       t && i && t !== i && this._initToolInfos();
     }
   }
-  appLayoutWatchHandler() {
-    this._updateShareUrl();
+  async appLayoutWatchHandler() {
+    await this._initToolInfos(), this._updateShareUrl();
   }
   async defaultOidWatchHandler() {
     await this._handleDefaults();
@@ -56,17 +56,17 @@ class F extends S {
   async defaultGlobalIdWatchHandler() {
     await this._handleDefaults();
   }
-  enableCSVWatchHandler() {
-    this._toolInfos?.length > 0 && this._initToolInfos();
+  async enableCSVWatchHandler() {
+    this._toolInfos?.length > 0 && await this._initToolInfos();
   }
   enableInlineEditWatchHandler() {
     this._table && (this._table.editingEnabled = this._editEnabled && this.enableInlineEdit);
   }
-  mapHiddenWatchHandler() {
-    this._toolInfos?.length > 0 && this._initToolInfos();
+  async mapHiddenWatchHandler() {
+    this._toolInfos?.length > 0 && await this._initToolInfos();
   }
-  isMobileWatchHandler() {
-    !this._toolInfos && !this.isMobile && this._initToolInfos();
+  async isMobileWatchHandler() {
+    !this._toolInfos && !this.isMobile && await this._initToolInfos();
   }
   async mapInfoWatchHandler() {
     this._table && this._resetColumnTemplates();
@@ -95,7 +95,12 @@ class F extends S {
     });
   }
   async selectedIdsWatchHandler() {
-    this._updateShareUrl(), this._validateEnabledActions(), this._selectAllActive && this.selectedIds.length !== this._allIds.length && (this._selectAllActive = !1), this.selectedIds.length > 0 && (this._table.rowHighlightIds.removeAll(), this._table.rowHighlightIds.add(this.selectedIds[0]));
+    this._updateShareUrl(), this._validateEnabledActions(), this._selectAllActive && this.selectedIds.length !== this._allIds.length && (this._selectAllActive = !1), this.selectedIds.length > 0 && (this._table.rowHighlightIds.removeAll(), this._table.rowHighlightIds.add(this.selectedIds[0])), this.selectedIds.length === 0 && setTimeout(() => {
+      this.featureSelectionChange.emit(this.selectedIds);
+    }, 700);
+  }
+  async selectedRelatedIdsWatchHandler() {
+    this._validateEnabledActions(), this.selectedRelatedIds.length > 0 && (this._relatedFeatureTable?.rowHighlightIds.removeAll(), this._relatedFeatureTable?.rowHighlightIds.add(this.selectedRelatedIds[0]));
   }
   async closeFilter() {
     await this._closeFilter();
@@ -119,8 +124,8 @@ class F extends S {
     const t = e.detail.ref, i = e.detail.mapInfo;
     if (this._hasPendingEdits()) {
       e.preventDefault();
-      const s = await this._validateActiveEdits([], this.selectedIds);
-      await t.setMapByID(s ? i.id : e.detail.currentId, !s);
+      const a = await this._validateActiveEdits([], this.selectedIds);
+      await t.setMapByID(a ? i.id : e.detail.currentId, !a);
     }
   }
   async editorInitialized(e) {
@@ -130,20 +135,20 @@ class F extends S {
     this._shouldUpdateTableOnExtentChange = !0, this._filterByExtentHandle && this._handleTableOnMapExtent();
   }
   async selectionChanged(e) {
-    const t = e.detail.selectedFeature[0], i = Number(t.getObjectId()), a = this._table;
-    if (a.rowHighlightIds.length && a.rowHighlightIds.removeAll(), a.rowHighlightIds.add(i), this._highlightFeatures(i), this.zoomAndScrollToSelected && a && this.mapView) {
-      const s = a.viewModel.getObjectIdIndex(i);
-      a.scrollToIndex(s);
-      const l = t.layer, o = this.mapView.allLayerViews.toArray();
-      let n;
-      o.some(async (r) => r.layer.title === l?.title && r.layer.type === "feature" ? (n = r, this.mapView && await g([i], n, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
+    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 && s && this.mapView) {
+      const a = s.viewModel.getObjectIdIndex(i);
+      s.scrollToIndex(a);
+      const l = t.layer, r = this.mapView.allLayerViews.toArray();
+      let h;
+      r.some(async (n) => n.layer.title === l?.title && n.layer.type === "feature" ? (h = n, this.mapView && await g([i], h, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
     }
   }
   async beforeLayerSelectionChange(e) {
     if (this._hasPendingEdits()) {
       e.preventDefault();
-      const i = e.detail.ref, a = await this._validateActiveEdits([], this.selectedIds);
-      return e.detail.selectedIds ? await i.setLayerByIds(a ? e.detail.newIds : e.detail.currentIds, !0) : await i.setLayerById(a ? e.detail.newId : e.detail.currentId, !0);
+      const i = e.detail.ref, s = await this._validateActiveEdits([], this.selectedIds);
+      return e.detail.selectedIds ? await i.setLayerByIds(s ? e.detail.newIds : e.detail.currentIds, !0) : await i.setLayerById(s ? e.detail.newId : e.detail.currentId, !0);
     }
   }
   async layerSelectionChange(e) {
@@ -168,20 +173,30 @@ class F extends S {
   async clearSelection() {
     await this._validateActiveEdits([], this.selectedIds) && this._clearSelection();
   }
+  async mapChanged() {
+    this._queryingData = !1, this._clearSelection();
+  }
+  async featuresSelected(e) {
+    e.detail.forEach((i) => {
+      const s = this._table?.highlightIds.indexOf(i);
+      s && s < 0 && this._table?.highlightIds.add(i);
+    });
+  }
   async load() {
-    await this._initModules(), this._initToolInfos();
+    await this._initModules(), await this._initToolInfos();
   }
   render() {
-    const e = this._fetchingData ? "display-none" : "", t = this._fetchingData ? "" : "display-none", i = this._queryingData ? "" : "display-none", a = this._size.toString(), s = this.selectedIds.length.toString(), l = this.isMobile ? "height-full" : "height-full-adjusted", o = this._canShowFullTextSearch();
-    return this._validateActiveActions(), h`<div><calcite-scrim class=${u(i)} .loading=${this._queryingData}></calcite-scrim><calcite-shell>${this._getTableControlRow("header")}<div class=${`width-full ${l}`}><calcite-panel class="height-full width-full">${o && h`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(n) => void this._searchTextChanged(n)} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? d} type=search></calcite-input></div>` || ""}<calcite-loader class=${u(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${u(e)} ${c(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : h`<div class="bottom-left text-color height-19" id=solutions-selected-count-div>${(this._translations.recordsTotal?.replace("{{total-number-of-records}}", a) + " | " + this._translations.recordsSelected.replace("{{selected-number-of-records}}", s)).replace("{{total}}", a).replace("{{selected}}", s)}</div>`}</calcite-shell>${this.createFilterModal && this._filterModal() || ""}</div>`;
+    const e = this._fetchingData ? "display-none" : "", t = this._fetchingData ? "" : "display-none", i = this._queryingData ? "" : "display-none", s = this._size.toString(), a = this.selectedIds.length.toString(), l = this.isMobile ? "height-full" : "height-full-adjusted", r = this._canShowFullTextSearch();
+    return this._validateActiveActions(), d`<div><calcite-scrim class=${p(i)} .loading=${this._queryingData}></calcite-scrim><calcite-shell><div class=${`width-full ${l}`}><calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker("header-actions-start")}${this._getTableControlRow("header-content")}${this._getActionsEnd("header-actions-end")}${r && d`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(h) => void this._searchTextChanged(h)} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? o} type=search></calcite-input></div>` || ""}<calcite-loader class=${p(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${p(e)} ${c(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : d`<div class="bottom-left text-color height-19" id=solutions-selected-count-div>${(this._translations.recordsTotal?.replace("{{total-number-of-records}}", s) + " | " + this._translations.recordsSelected.replace("{{selected-number-of-records}}", a)).replace("{{total}}", s).replace("{{selected}}", a)}</div>`}</calcite-shell>${this.createFilterModal && this._filterModal() || ""}</div>`;
   }
   async _initModules() {
-    const [e, t, i] = await y([
+    const [e, t, i, s] = await y([
       "esri/widgets/FeatureTable",
       "esri/core/reactiveUtils",
-      "esri/widgets/FeatureTable/support/TableTemplate"
+      "esri/widgets/FeatureTable/support/TableTemplate",
+      "esri/rest/support/RelationshipQuery"
     ]);
-    this.FeatureTable = e, this.reactiveUtils = t, this.TableTemplate = i;
+    this.FeatureTable = e, this.reactiveUtils = t, this.TableTemplate = i, this.RelationshipQuery = s;
   }
   async _searchTextChanged(e) {
     this._fullTextSearchInfo.forEach((t) => {
@@ -199,10 +214,10 @@ class F extends S {
     this._searchExpression && this._clearSearchDefinitionExpression();
     let i = [];
     if (this._fullTextSearchInfo?.length && this._fullTextSearchInfo[0].searchTerm) {
-      const a = this._layer?.createQuery();
-      a.fullText = this._fullTextSearchInfo, i = this._layer ? await this._layer.queryObjectIds(a) : [], t && e?.length && (i = i.filter((s) => e.includes(s))), await this._updateSearchDefinitionExpression(i?.length ? i : [-1]);
+      const s = this._layer?.createQuery();
+      s.fullText = this._fullTextSearchInfo, i = this._layer ? await this._layer.queryObjectIds(s) : [], t && e?.length && (i = i.filter((a) => e.includes(a))), await this._updateSearchDefinitionExpression(i?.length ? i : [-1]);
     }
-    t && i?.length && (this._showOnlySelected = !0, this._table?.highlightIds.addMany(i.reverse())), await new Promise((a) => setTimeout(a, 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();
   }
   _clearSearchDefinitionExpression() {
     const e = this._layer?.definitionExpression;
@@ -225,13 +240,13 @@ class F extends S {
       const e = this._layer.indexes?.filter((t) => t.indexType == "FullText");
       if (e?.length) {
         const t = [];
-        e.forEach((a) => {
-          t.push(...a.fields.split(","));
+        e.forEach((s) => {
+          t.push(...s.fields.split(","));
         });
         const i = [];
-        t.forEach((a) => {
-          const s = this._layer?.getField(a.trim());
-          s?.alias && i.push(s.alias);
+        t.forEach((s) => {
+          const a = this._layer?.getField(s.trim());
+          a?.alias && i.push(a.alias);
         }), this._searchPlaceHolder = this._translations.searchPlaceholder.replace("{{fields}}", i.join(", ")), this._fullTextSearchInfo.push({
           onFields: ["*"],
           searchTerm: "",
@@ -240,20 +255,27 @@ class F extends S {
       }
     }
   }
+  _getMapLayerPicker(e) {
+    const t = this.isMobile ? "border-top" : "";
+    return d`<div class=${`border-end ${t}`} id=solutions-map-layer-picker-container slot=${e ?? o}><map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} display=inline-flex height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this._layer ? [this._layer?.id] : []} show-single-layer-as-label show-tables type=dropdown></map-layer-picker></div>`;
+  }
+  _getActionsEnd(e) {
+    const t = this._relatedFeatureTable ? this._relatedFeatureTable.layer : this._layer, i = this._relatedFeatureTable || this._table;
+    return d`<div class="display-flex" slot=${e ?? o}><field-selection .layer=${t} .mapView=${this.mapView} .table=${i}></field-selection>${this.enableShare && !this.isMobile ? this._getShare("share") : void 0}</div>`;
+  }
   _getTableControlRow(e) {
-    return h`<div class=${"display-flex height-51-px border-bottom"} slot=${e ?? d} ${c(this._toolbar)}>${this._getActionBar()}<div slot=header-actions-end class="display-flex absolute-right"><field-selection class="actions-end" .layer=${this._layer} .mapView=${this.mapView} .table=${this._table}></field-selection>${this.enableShare && !this.isMobile ? this._getShare("share") : void 0}</div></div>`;
+    return d`<div class=${"height-51-px width-full display-flex"} slot=${e ?? o} ${c(this._toolbar)}>${this._getActionBar()}</div>`;
   }
   _getActionBar() {
-    const e = this.isMobile ? "border-top" : "";
-    return h`<calcite-action-bar class=width-full expand-disabled expanded id=${this._getId("bar") ?? d} layout=horizontal><div class=${`border-end ${e}`} id=solutions-map-layer-picker-container><map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} display=inline-flex height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} @lyShowUpdatableLayers=${this.onlyShowUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this._layer ? [this._layer?.id] : []} show-single-layer-as-label show-tables type=dropdown></map-layer-picker></div><calcite-action-group>${this.isMobile ? void 0 : this._getActions()}</calcite-action-group></calcite-action-bar>`;
+    return d`<calcite-action-bar class=width-full expand-disabled id=${this._getId("bar") ?? o} layout=horizontal><calcite-action-group>${this.isMobile ? void 0 : this._getActions()}</calcite-action-group></calcite-action-bar>`;
   }
   _getActions() {
     return this._toolInfos?.reduce((e, t) => (t && e.push(t.isDanger ? this._getDangerAction(t.icon, t.label, t.func, t.disabled) : this._getAction(t.active, t.icon, t.indicator, t.label, t.func, t.disabled, !!t.loading)), e), []);
   }
   _validateEnabledActions() {
     const e = this._featuresSelected(), t = this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate, i = ["zoom-to-object", "pencil", "trash", "erase", "selected-items-filter"];
-    this._toolInfos?.forEach((a) => {
-      a && i.indexOf(a.icon) > -1 && (a.disabled = a.icon === "pencil" ? !t : !e);
+    this._toolInfos?.forEach((s) => {
+      s && i.indexOf(s.icon) > -1 && (s.disabled = s.icon === "pencil" ? !t : !e);
     });
   }
   _validateActiveActions() {
@@ -262,25 +284,31 @@ class F extends S {
       t && e.indexOf(t.icon) > -1 && (t.icon === "filter" && (t.indicator = this._filterActive), t.icon === "list-check-all" && (t.active = this._selectAllActive), t.icon === "selected-items-filter" && (t.active = this._showOnlySelected, t.label = this._showOnlySelected ? this._translations.showAll : this._translations.showSelected));
     });
   }
-  _initToolInfos() {
-    const e = this._featuresSelected();
-    this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
-    const t = !this.mapHidden && !this._layer?.isTable, i = this._featuresEmpty(), a = !this._layer?.isTable || this._hasFilterExpressions(), s = [];
-    t && s.push({
-      active: !1,
-      icon: "zoom-to-object",
-      indicator: !1,
-      label: this._translations.zoom,
-      func: () => this._zoom(),
-      disabled: !e
-    }), a && s.push({
+  async _initToolInfos() {
+    const e = this._featuresSelected(), t = this._relatedFeatureTable ? this._relatedFeatureTable.layer.isTable : this._layer?.isTable;
+    this.selectedIds.length > 1 && this._layer?.capabilities?.operations.supportsUpdate;
+    const i = !this.mapHidden && !t, s = !this._relatedFeatureTable && this._hasFilterExpressions(), a = this._featuresEmpty(), l = this.featureSelectionMode === "single";
+    let r = this.enableCSV;
+    if (this._relatedFeatureTable) {
+      const n = await this._queryRelatedFeatures();
+      r = Object.keys(n).length > 0;
+    }
+    const h = [];
+    s && h.push({
       active: !1,
       icon: "filter",
       indicator: !1,
       label: this._translations.filters,
       func: () => this.createFilterModal ? this._toggleFilter() : this.toggleFilter.emit(),
       disabled: !1
-    }), this._deleteEnabled && s.push({
+    }), i && h.push({
+      active: !1,
+      icon: "zoom-to-object",
+      indicator: !1,
+      label: this._translations.zoom,
+      func: () => this._zoom(),
+      disabled: !e
+    }), this._deleteEnabled && h.push({
       active: !1,
       icon: "trash",
       indicator: !1,
@@ -288,50 +316,50 @@ class F extends S {
       func: () => this._showDelete(),
       disabled: !e,
       isDanger: !0
-    }), s.push({
+    }), h.push({
       active: !1,
       icon: "erase",
       indicator: !1,
       label: this._translations.clearSelection,
       func: () => void this.clearSelection(),
       disabled: !e
-    }), s.push({
+    }), this._relatedFeatureTable || h.push({
       active: !1,
       icon: "selected-items-filter",
       indicator: !1,
       label: this._showOnlySelected ? this._translations.showAll : this._translations.showSelected,
       func: () => this._toggleShowSelected(),
       disabled: !e
-    }), s.push({
+    }), !l && !this._relatedFeatureTable && h.push({
       active: !1,
       icon: "list-check-all",
       indicator: !1,
       func: async () => await this._selectAll(),
       label: this._translations.selectAll,
-      disabled: i
-    }), s.push({
+      disabled: a
+    }), !l && !this._relatedFeatureTable && h.push({
       active: !1,
       icon: "compare",
       indicator: !1,
       func: async () => await this._switchSelected(),
       label: this._translations.switchSelected,
-      disabled: i
-    }), s.push({
+      disabled: a
+    }), h.push({
       active: !1,
       icon: "refresh",
       indicator: !1,
       func: () => this._refresh(),
       label: this._translations.refresh,
       disabled: !1
-    }), this.enableCSV && s.push({
+    }), r && h.push({
       active: !1,
       icon: "export",
       indicator: !1,
       func: () => void this._exportToCSV(),
       label: this._translations.exportCSV,
       loading: this._csvExporting,
-      disabled: i
-    }), console.log(s), this._toolInfos = [...s];
+      disabled: a
+    }), this._toolInfos = [...h];
   }
   _updateFloorDefinitionExpression() {
     if (this._floorField && this._floorLevel) {
@@ -340,19 +368,19 @@ class F extends S {
     }
   }
   _featuresSelected() {
-    return this.selectedIds.length > 0;
+    return this._relatedFeatureTable ? this._relatedFeatureTable.highlightIds.items.length > 0 : this.selectedIds.length > 0;
   }
   _featuresEmpty() {
-    return this._allIds.length === 0;
+    return this._allIds?.length === 0;
   }
   _hasFilterExpressions() {
     let e = [];
     const t = this._layer?.id;
     return this.mapInfo?.filterConfig?.layerExpressions && t !== void 0 && (e = this.mapInfo.filterConfig.layerExpressions.filter((i) => i.id === t)), e.length > 0;
   }
-  _getAction(e, t, i, a, s, l, o) {
-    const n = this._layer === void 0 ? !0 : l;
-    return h`<calcite-action .active=${e} appearance=solid .disabled=${n} .icon=${t} .id=${`layer-table-${t}`} .indicator=${i} .label=${a} .loading=${o} @click=${s} .text=${a} text-enabled></calcite-action>`;
+  _getAction(e, t, i, s, a, l, r) {
+    const h = this._layer === void 0 ? !0 : l;
+    return d`<calcite-action .active=${e} appearance=solid .disabled=${h} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${r} @click=${a} text text-enabled><div class="display-flex"><calcite-icon .icon=${t} scale=s></calcite-icon><calcite-label class="label-override padding-start-1-4">${s}</calcite-label></div></calcite-action>`;
   }
   _showDelete() {
     this.showDelete.emit({
@@ -360,7 +388,7 @@ class F extends S {
     });
   }
   _getShare(e) {
-    return this.mapView && h`<div id=${this._getId(e) ?? d}><instant-apps-social-share class="actions-end" .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 && d`<div id=${this._getId(e) ?? o}><instant-apps-social-share class="height-51 width-51 display-flex" .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>` || "";
   }
   _updateShareUrl() {
     const e = this._shareNode.value?.shareUrl;
@@ -370,17 +398,18 @@ class F extends S {
     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);
   }
   _getToolTip(e, t, i) {
-    return document.getElementById(t) ? h`<calcite-tooltip .placement=${e} .referenceElement=${t}><span>${i}</span></calcite-tooltip>` : void 0;
+    return document.getElementById(t) ? d`<calcite-tooltip .placement=${e} .referenceElement=${t}><span>${i}</span></calcite-tooltip>` : void 0;
   }
   _getId(e) {
     return `solutions-action-${e}`;
   }
-  _getDangerAction(e, t, i, a) {
-    const s = this._layer === void 0 ? !0 : a;
-    return h`<div class="display-flex" id=${this._getId(e) ?? d}>${h`<calcite-action appearance=solid .disabled=${s} id=${e ?? d} @click=${i} text><calcite-button appearance=transparent .iconStart=${e} kind=danger>${t}</calcite-button></calcite-action>`}${this._getToolTip("bottom", e, t)}</div>`;
+  _getDangerAction(e, t, i, s) {
+    const a = this._layer === void 0 ? !0 : s;
+    return d`<div class="display-flex" id=${this._getId(e) ?? o}>${d`<calcite-action appearance=solid .disabled=${a} id=${e ?? o} @click=${i} text><calcite-icon class="danger-icon-color" .icon=${e} scale=s></calcite-icon><calcite-label class="label-override padding-start-1-4 danger-label-color">${t}</calcite-label></calcite-action>`}${this._getToolTip("bottom", e, t)}</div>`;
   }
   _getIds() {
-    return this._table?.highlightIds?.map((e) => Number.parseInt(e.toString(), 10)).toArray() || [];
+    let e = this._relatedFeatureTable ?? this._table;
+    return this._relatedFeatureTable && this._table && this._table.highlightIds.getItemAt(0) !== this.selectedIds[0] && (e = this._table), e?.highlightIds.map((t) => Number.parseInt(t.toString(), 10)).toArray() ?? [];
   }
   onTableNodeCreate(e) {
     this._tableNode = e;
@@ -392,6 +421,7 @@ class F extends S {
         layer: this._layer,
         view: this.mapView,
         columnReorderingEnabled: this.enableColumnReorder,
+        relatedRecordsEnabled: !0,
         editingEnabled: this._editEnabled && this.enableInlineEdit,
         highlightEnabled: !1,
         multiSortEnabled: !1,
@@ -412,28 +442,60 @@ class F extends S {
         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.reactiveUtils && this._table?.viewModel.addHandles(this.reactiveUtils.watch(() => this._table.size, (i) => {
         this._size = i;
-      }));
+      })), this.reactiveUtils?.watch(
+        () => this._table?.relatedTable,
+        // eslint-disable-next-line @typescript-eslint/no-misused-promises
+        async (i) => {
+          if (i) {
+            if (i.rowHighlightIds.length) {
+              const s = {
+                added: [i.rowHighlightIds.getItemAt(0)],
+                removed: []
+              };
+              this._handleOnChange(s);
+            }
+            if (this._relatedFeatureTable = i, typeof i.layer?.id == "string" && i.layer?.fields) {
+              const s = this._getColumnTemplates(i.layer.id, i.layer.fields);
+              this._relatedFeatureTable.tableTemplate = this.TableTemplate && new this.TableTemplate({
+                columnTemplates: s
+              });
+            }
+            i.highlightIds.on("change", (s) => {
+              this._handleOnChange(s);
+            });
+          } else {
+            this.selectedRelatedIds = [], this._relatedFeatureTable = void 0;
+            const s = this._layer;
+            this._refresh(), s && this.relatedRecordToggled.emit(s), this._finishOnChange();
+          }
+          await this._initToolInfos();
+        }
+      );
     }));
   }
   async _handleOnChange(e) {
     if (!await this._validateActiveEdits([...e.added], [...e.removed]))
       return;
     const i = [...this._getIds()];
-    this.selectedIds = i.reverse(), this._tempSelectedIds = [...this.selectedIds], this._finishOnChange(), this._selectionFromMap = !1, this._highlightFeatures(this.selectedIds[0]);
+    let s = this._getSelectedLayer(i);
+    this._relatedFeatureTable && this._table?.highlightIds.getItemAt(0) !== this.selectedIds[0] && (s = this._layer, await this._initToolInfos()), s && this.relatedRecordToggled.emit(s), this.featureSelectionMode === "single" && (this._relatedFeatureTable && i.length > 1 ? (this._relatedFeatureTable.highlightIds.remove(i[0]), i.shift()) : i.length > 1 && !this._selectAllActive && (this._table?.highlightIds.remove(i[0]), i.shift())), !this._relatedFeatureTable || this._relatedFeatureTable && this._table?.highlightIds.getItemAt(0) !== this.selectedIds[0] ? (this.selectedRelatedIds = [], this.selectedIds = i.reverse(), this._tempSelectedIds = [...this.selectedIds], this._highlightFeatures(this.selectedIds[0])) : this.selectedRelatedIds = i.reverse(), this._finishOnChange();
   }
   async _validateActiveEdits(e, t) {
     let i = !0;
     if (this._editor && !this._skipEditCheck) {
       if (this._hasPendingEdits()) {
-        let s = !1;
+        let a = !1;
         try {
           this._editor.viewModel.activeWorkflow && await this._editor.viewModel.activeWorkflow.cancel({
             force: !1
           });
         } catch (l) {
-          s = l?.name === "workflow:cancel-denied";
+          a = l?.name === "workflow:cancel-denied";
+        }
+        if (a) {
+          const l = this._relatedFeatureTable && this._relatedFeatureTable.highlightIds.length > 0 ? this._relatedFeatureTable : this._table;
+          i = !1, this._skipEditCheck = !0, e.length > 0 ? l?.highlightIds.removeMany(e) : t.length > 0 && l?.highlightIds.addMany(t);
         }
-        s && (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;
@@ -444,7 +506,11 @@ class F extends S {
     return e || t;
   }
   _finishOnChange() {
-    this._showOnlySelected && (this._featuresSelected() && this._table ? this._table.filterBySelectionEnabled = !0 : this._toggleShowSelected()), this.featureSelectionChange.emit(this.selectedIds);
+    this._showOnlySelected && !this._relatedFeatureTable && (this._table && this._featuresSelected() ? this._table.filterBySelectionEnabled = !0 : this._toggleShowSelected());
+    const e = this._getSelectedIds();
+    setTimeout(() => {
+      this.featureSelectionChange.emit(e);
+    }, 50);
   }
   tempHighlightOnHover(e) {
     if (this._removeTempHighlight(), this._selectedLayerView) {
@@ -456,7 +522,7 @@ class F extends S {
     this._temporaryFeatureHandle && this._temporaryFeatureHandle.remove();
   }
   _highlightFeatures(e) {
-    if (this._clearHighlights(), this._selectedLayerView && (this._currentFeatureHighlightHandle = this._selectedLayerView?.highlight([e], { name: "current-selection" }), this.selectedIds.length > 1)) {
+    if (this._clearHighlights(), this.selectedIds.length > 0 && this._selectedLayerView && (this._currentFeatureHighlightHandle = this._selectedLayerView?.highlight([e], { name: "current-selection" }), this.selectedIds.length > 1)) {
       const t = this.selectedIds.filter((i) => i !== e);
       this._defaultFeaturesHandle = this._selectedLayerView?.highlight(t, { name: "default" });
     }
@@ -468,13 +534,13 @@ class F extends S {
     if (this._layer) {
       const e = this._getColumnTemplates(this._layer?.id, this._layer?.fields);
       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((a, s) => t && t[s] ? JSON.stringify(t[s]) !== JSON.stringify(a) : !1);
+      const t = this._table?.tableTemplate?.columnTemplates, i = t && e && t.length !== e.length || e?.some((s, a) => t && t[a] ? JSON.stringify(t[a]) !== JSON.stringify(s) : !1);
       if (this._table && e && (i || !this._columnsInfo)) {
         this._table.tableTemplate = this.TableTemplate && new this.TableTemplate({
           columnTemplates: e
         });
-        const a = e.map((s) => s.fieldName);
-        this._initColumnsInfo(a);
+        const s = e.map((a) => a.fieldName);
+        this._initColumnsInfo(s);
       }
     }
   }
@@ -491,7 +557,7 @@ class F extends S {
   }
   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(), ["esri-feature-table", "esri-widget"].forEach((t) => {
+      this._loaded = !0, this._table?.highlightIds.removeAll(), this._table.objectIds.removeAll(), this._resetColumnTemplates(), this._showOnlySelected = !1, await this._handleDefaults(), await this._sortTable(), await this._initToolInfos(), ["esri-feature-table", "esri-widget"].forEach((t) => {
         this._tableNode && !this._tableNode.classList.contains(t) && this._tableNode.classList.add(t);
       });
     } catch (e) {
@@ -514,10 +580,10 @@ class F extends S {
     }
   }
   _initColumnsInfo(e) {
-    const t = this._table?.columns.reduce((s, l) => ((!e || e?.indexOf(l.name) > -1) && (s[l.name] = !l.hidden), s), {}), i = this._table?.columns.map((s) => s.name);
-    (e && i ? e.filter((s) => i.indexOf(s) < 0) : []).forEach((s) => {
-      t[s] = !0;
-    }), this._columnsInfo = e ? e.reduce((s, l) => (s[l] = t[l], s), {}) : t;
+    const t = this._table?.columns.reduce((a, l) => ((!e || e?.indexOf(l.name) > -1) && (a[l.name] = !l.hidden), a), {}), i = this._table?.columns.map((a) => a.name);
+    (e && i ? e.filter((a) => i.indexOf(a) < 0) : []).forEach((a) => {
+      t[a] = !0;
+    }), this._columnsInfo = e ? e.reduce((a, l) => (a[l] = t[l], a), {}) : t;
   }
   async _selectDefaultFeature(e) {
     e.length > 0 && this._table?.highlightIds.addMany(e);
@@ -527,13 +593,13 @@ class F extends S {
   }
   async _sortTable() {
     let e = this._layer?.objectIdField, t = "desc", i;
-    const a = this.mapInfo?.layerOptions?.layers, s = this._layer?.id;
-    a && a.length > 0 && s !== void 0 && (i = a.filter((l) => l.id === s), 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(() => {
+    const s = this.mapInfo?.layerOptions?.layers, a = this._layer?.id;
+    s && s.length > 0 && a !== void 0 && (i = s.filter((l) => l.id === a), 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);
     }));
   }
   _filterModal() {
-    return h`<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 && h`<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 d`<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 && d`<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>`;
   }
   async _handleFilterListReset() {
     this._filterActive = !1, this._updateShareUrl(), await this._searchFullText();
@@ -550,13 +616,13 @@ class F extends S {
       () => this.mapView?.stationary,
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       async () => {
-        if (this._shouldUpdateTableOnExtentChange) {
+        if (this._shouldUpdateTableOnExtentChange && this.appLayout === "splitView") {
           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((s) => !t?.includes(s)), a = this._outOFExtentOids.filter((s) => t?.includes(s));
-            i.length > 0 && (this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._table.highlightIds.removeMany(i), this._outOFExtentOids = [...this._outOFExtentOids, ...i]), a.length > 0 && (this.selectedIds = [.../* @__PURE__ */ new Set([...this.selectedIds, ...a])], this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(this.selectedIds.reverse()), this._outOFExtentOids = this._outOFExtentOids.filter((s) => !a.includes(s)));
+            }, t = this._layer && await this._layer.queryObjectIds(e), i = this.selectedIds.filter((a) => !t?.includes(a)), s = this._outOFExtentOids.filter((a) => t?.includes(a));
+            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((a) => !s.includes(a)));
           }
           this._allIds = await this.queryAllIds();
         }
@@ -580,20 +646,33 @@ class F extends S {
     const t = {
       include: this._layer
     }, i = await this.mapView?.hitTest(e.screenPoint, t);
-    i && i.results.length > 0 ? (i.results.forEach((a) => {
-      const s = Number(a.graphic.getObjectId()), l = this._table?.highlightIds.indexOf(s);
-      l !== void 0 && l < 0 && (this._selectionFromMap = !0, this._table?.highlightIds.add(s));
-    }), this._showOnlySelected && this._table && (this._table.filterBySelectionEnabled = !0)) : await this.clearSelection();
+    if (i && i.results.length > 0) {
+      const s = i.results;
+      if (this.featureSelectionMode === "single") {
+        this._table?.highlightIds.removeAll();
+        const l = s[0].graphic.getObjectId();
+        if (l) {
+          const r = this._table?.highlightIds.indexOf(l);
+          r !== void 0 && r < 0 && this._table?.highlightIds.add(l);
+        }
+      } else
+        s.forEach((a) => {
+          const l = Number(a.graphic.getObjectId()), r = this._table?.highlightIds.indexOf(l);
+          r && r < 0 && l && this._table?.highlightIds.add(l);
+        });
+      this._showOnlySelected && this._table && (this._table.filterBySelectionEnabled = !0);
+    } else
+      await this.clearSelection();
   }
   async _selectAll() {
-    const e = this._allIds, t = e.filter((a) => this.selectedIds.indexOf(a) < 0);
+    const e = this._allIds, t = e.filter((s) => this.selectedIds.indexOf(s) < 0);
     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;
   }
   _toggleShowSelected() {
     this._showOnlySelected = !this._showOnlySelected, this._table && (this._table.filterBySelectionEnabled = this._showOnlySelected);
   }
   _clearSelection() {
-    this.selectedIds = [], this._outOFExtentOids = [], this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._table?.highlightIds.removeAll(), this._clearHighlights(), this._table?.rowHighlightIds.removeAll(), this._finishOnChange();
+    this._relatedFeatureTable || (this.selectedIds = [], this._outOFExtentOids = [], this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._table?.highlightIds.removeAll(), this._clearHighlights(), this._table?.rowHighlightIds.removeAll()), this._relatedFeatureTable && (this._relatedFeatureTable?.highlightIds.removeAll(), this.selectedRelatedIds = []), this._finishOnChange();
   }
   _toggleFilter() {
     this._filterOpen = !this._filterOpen;
@@ -603,42 +682,82 @@ class F extends S {
     this._layerExpressions = e ? e.filter((t) => t.id === this._layer?.id) : [], this._filterList.value && (this._filterList.value.layerExpressions = this._layerExpressions, this._filterActive = this._layerExpressions.filter((t) => t.expressions.filter((i) => i.active).length > 0).length > 0);
   }
   async _switchSelected() {
-    const e = [...this.selectedIds], t = this._allIds.reduce((a, s) => (e.indexOf(s) < 0 && a.push(s), a), []).sort((a, s) => a - s);
+    const e = [...this.selectedIds], t = this._allIds.reduce((s, a) => (e.indexOf(a) < 0 && s.push(a), s), []).sort((s, a) => s - a);
     await this._validateActiveEdits(t, e) && this._table ? (this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(t), this.selectedIds = t, this._finishOnChange()) : this._skipEditCheck = !1;
   }
   async _exportToCSV() {
-    const e = {}, t = this._getIds();
-    this._layer && this._layer.title && (e[this._layer.id] = {
-      selectionSetNames: [this._layer.title],
-      ids: t,
-      layer: this._layer
-    });
-    const i = this._table && this._table.columns.toArray().reduce((a, s) => {
-      if (!s.hidden) {
-        const l = s?.name || s?.fieldName;
-        l && a.push(l.toLocaleLowerCase());
+    const e = this._relatedFeatureTable ? this._relatedFeatureTable.layer : this._layer;
+    if (!e)
+      return;
+    const t = {};
+    let i = this._getIds();
+    if (this._relatedFeatureTable?.tableParent && this._relatedFeatureTable.rowHighlightIds.length === 0) {
+      const l = this._relatedFeatureTable.tableParent.highlightIds?.getItemAt(0);
+      if (l !== void 0) {
+        const r = await this._queryRelatedFeatures(), h = [];
+        r && r[l]?.features && (r[l].features.forEach((n) => {
+          n.attributes && h.push(n.attributes[e.objectIdField]);
+        }), i = h.length > 0 ? h : []);
       }
-      return a;
+    }
+    t[e.id] = {
+      selectionSetNames: [e.title || ""],
+      ids: i,
+      layer: e
+    };
+    const s = this._relatedFeatureTable ?? this._table;
+    if (!s)
+      return;
+    const a = s && s.columns.toArray().reduce((l, r) => {
+      if (!r.hidden) {
+        const h = r?.name || r?.fieldName;
+        h && l.push(h.toLocaleLowerCase());
+      }
+      return l;
     }, []);
-    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView?.map && await x(
+    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView?.map && await v(
       this.mapView.map,
-      e,
+      t,
       !1,
       // formatUsingLayerPopup
       !1,
       // removeDuplicates
       !0,
       // addColumnTitle
-      i,
+      a,
       !0,
       !0
     ), this._updateToolInfoLoading("export", !1), this._csvExporting = !1;
   }
+  async _queryRelatedFeatures() {
+    const e = this._relatedFeatureTable ? this._relatedFeatureTable ? this._relatedFeatureTable.layer : this._relatedFeatureTable.tableParent?.layer : this._layer, t = this._relatedFeatureTable?.tableParent?.highlightIds?.items[0], i = this._relatedFeatureTable?.tableParent?.layer, s = e?.relationships?.find((r) => i.relationships?.some((h) => h.id === r.id)), a = this.RelationshipQuery && new this.RelationshipQuery({
+      objectIds: [t],
+      outFields: ["*"],
+      relationshipId: s?.id
+    });
+    return a && await i.queryRelatedFeatures(a).catch(async (r) => {
+      console.error(r);
+    });
+  }
   _updateToolInfoLoading(e, t) {
     this._toolInfos.some((i) => i?.icon === e ? (i.loading = t, !0) : !1);
   }
   async _refresh() {
-    await this._validateActiveEdits([], this.selectedIds) && (await this._table?.refresh(), this._allIds = await this.queryAllIds(), this.featureSelectionChange.emit(this.selectedIds));
+    if (await this._validateActiveEdits([], this.selectedIds)) {
+      this._table && await this._table.refresh(), this._relatedFeatureTable && await this._relatedFeatureTable.refresh(), this._allIds = await this.queryAllIds();
+      const t = this._getSelectedLayer(this.selectedRelatedIds);
+      t && this.relatedRecordToggled.emit(t);
+      const i = this._getSelectedIds();
+      this.featureSelectionChange.emit(i);
+    }
+  }
+  _getSelectedIds() {
+    let e;
+    return this._relatedFeatureTable ? this.selectedRelatedIds.length > 0 ? e = this.selectedRelatedIds : e = this._relatedFeatureTable.tableParent?.highlightIds.toArray() ?? [] : e = this.selectedIds, e;
+  }
+  _getSelectedLayer(e) {
+    let t;
+    return this._relatedFeatureTable ? e.length > 0 ? t = this._relatedFeatureTable.layer : t = this._relatedFeatureTable.tableParent?.layer : t = this._layer, t;
   }
   async _zoom() {
     this._layer && this.mapView && await g(this.selectedIds, this._selectedLayerView, this.mapView, !0, void 0, this.zoomToScale);
@@ -649,28 +768,28 @@ class F extends S {
       this._fetchingData = !0;
       const i = this.mapView && await m(this.mapView, t);
       i && await i.when(async () => {
-        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._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, await this._initToolInfos(), this._getFullTextSearchInfo();
       });
     }
     this._fetchingData = !1;
   }
   _getColumnTemplates(e, t) {
     let i;
-    this.mapInfo?.layerOptions?.layers.some((n) => n.id === e ? (i = n, !0) : !1);
-    const a = this._layer?.attributeTableTemplate?.elements;
-    let s = [];
-    a?.length > 0 && this.honorMapFieldSettings && (s = a.map((n) => n.fieldName));
-    const l = i?.fields && i?.fieldOrder ? i.fieldOrder.filter((n) => i?.fields && i.fields.indexOf(n) > -1) : s.length > 0 ? s : void 0;
-    let o;
-    return t && (o = t.reduce((n, r) => {
-      const f = {
+    this.mapInfo?.layerOptions?.layers.some((h) => h.id === e ? (i = h, !0) : !1);
+    const s = this._layer?.attributeTableTemplate?.elements;
+    let a = [];
+    s?.length > 0 && this.honorMapFieldSettings && (a = s.map((h) => h.fieldName));
+    const l = i?.fields && i?.fieldOrder ? i.fieldOrder.filter((h) => i?.fields && i.fields.indexOf(h) > -1) : a.length > 0 ? a : void 0;
+    let r;
+    return t && (r = t.reduce((h, n) => {
+      const _ = {
         type: "field",
-        fieldName: r.name,
-        label: r.alias,
-        menuConfig: this._getMenuConfig(r.name)
+        fieldName: n.name,
+        label: n.alias,
+        menuConfig: this._getMenuConfig(n.name)
       };
-      return i && i?.fields ? i.fields.indexOf(r.name) > -1 && n.push(f) : s.length > 0 ? s.indexOf(r.name) > -1 && n.push(f) : n.push(f), n;
-    }, [])), o ? l ? o?.sort(this._sortFields.bind(this, l)) : o : [];
+      return i && i?.fields ? i.fields.indexOf(n.name) > -1 && h.push(_) : a.length > 0 ? a.indexOf(n.name) > -1 && h.push(_) : h.push(_), h;
+    }, [])), r ? l ? r?.sort(this._sortFields.bind(this, l)) : r : [];
   }
   _sortFields(e, t, i) {
     return e?.indexOf(t.fieldName) - e.indexOf(i.fieldName);
@@ -695,7 +814,7 @@ class F extends S {
     }));
   }
 }
-b("layer-table", F);
+b("layer-table", C);
 export {
-  F as LayerTable
+  C as LayerTable
 };