@esri/solutions-components 1.0.0-next.20250422.3 → 1.0.0-next.20250425

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

@@ -1,18 +1,19 @@
-import { c as g } from "../../chunks/runtime.js";
-import { l as m } from "../../chunks/loadModules.js";
-import { b, d as y, g as w } from "../../chunks/mapViewUtils.js";
+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 { b as I } from "../../chunks/queryUtils.js";
-import { d as v } from "../../chunks/downloadUtils.js";
-import { defineCustomElements as x } from "@arcgis/instant-apps-components/loader";
-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 S, createEvent as u, noShadowRoot as O, safeClassMap as _ } from "@arcgis/lumina";
+import { d as x } from "../../chunks/downloadUtils.js";
+import { defineCustomElements as E } from "@arcgis/instant-apps-components/loader";
+import { u as v } 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 "@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.20250422.3 */
-const F = T`@layer{/** @license
+v1.0.0-next.20250425 */
+const C = T`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -26,23 +27,23 @@ const F = 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}.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 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)}}`;
+class F extends S {
   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.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", 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 = 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);
+    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._csvExporting = !1, this._fetchingData = !1, this._filterActive = !1, this._filterOpen = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = v({ 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), E(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 };
+    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, _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 = F;
+    this.styles = C;
   }
   static {
     this.shadowRootOptions = O;
   }
   /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */
   willUpdate(e) {
-    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("enableShare") && this.enableShareWatchHandler(), e.has("_controlsThatFit") && this._controlsThatFitWatchHandler(), e.has("locale") && this.localeWatchHandler(), 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("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("locale") && this.localeWatchHandler(), 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();
   }
   //--------------------------------------------------------------------------
   //
@@ -69,21 +70,6 @@ class C extends S {
   enableInlineEditWatchHandler() {
     this._table && (this._table.editingEnabled = this._editEnabled && this.enableInlineEdit);
   }
-  /** Update the toolbar when the share button is enabled/disabled */
-  enableShareWatchHandler() {
-    this._toolbar.value && this._updateToolbar();
-  }
-  /** watch for changes to the list of controls that will currently fit in the display */
-  _controlsThatFitWatchHandler() {
-    const e = this._controlsThatFit ? this._controlsThatFit.reduce((t, i) => (t.push(i.id), t), []) : [];
-    this._toolInfos = this._toolInfos?.reduce((t, i) => {
-      if (i && this._controlsThatFit) {
-        const s = this._getId(i.icon);
-        i.isOverflow = e.indexOf(s) < 0, t.push(i);
-      }
-      return t;
-    }, []);
-  }
   /** Fetch translations when the locale is updated */
   async localeWatchHandler() {
     this.el.lang = this.locale;
@@ -163,8 +149,8 @@ class C extends S {
     const t = e.detail.ref, i = e.detail.mapInfo;
     if (this._hasPendingEdits()) {
       e.preventDefault();
-      const l = await this._validateActiveEdits([], this.selectedIds);
-      await t.setMapByID(l ? i.id : e.detail.currentId, !l);
+      const s = await this._validateActiveEdits([], this.selectedIds);
+      await t.setMapByID(s ? i.id : e.detail.currentId, !s);
     }
   }
   /**
@@ -190,13 +176,13 @@ class C extends S {
    * @param evt CustomEvent the graphic for the current selection
    */
   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 && 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, this.mapView && await b([i], o, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
+    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);
     }
   }
   /**
@@ -207,8 +193,8 @@ class C extends S {
   async beforeLayerSelectionChange(e) {
     if (this._hasPendingEdits()) {
       e.preventDefault();
-      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);
+      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);
     }
   }
   /**
@@ -250,20 +236,12 @@ class C extends S {
    * @returns Promise when complete
    */
   async load() {
-    await this._initModules(), this._initToolInfos(), this._resizeObserver || (this._resizeObserver = new ResizeObserver(() => this._onResize()));
+    await this._initModules(), this._initToolInfos();
   }
   /** Renders the component. */
   render() {
-    const e = this._fetchingData ? "display-none" : "", t = this._fetchingData ? "" : "display-none", i = this._queryingData ? "" : "display-none", s = this._size.toString(), l = this.selectedIds.length.toString(), a = this.isMobile ? "height-full" : "height-full-adjusted", h = this._canShowFullTextSearch();
-    return this._validateActiveActions(), n`<div><calcite-scrim class=${_(i)} .loading=${this._queryingData}></calcite-scrim><calcite-shell>${this._getTableControlRow("header")}<div class=${`width-full ${a}`}><calcite-panel class="height-full width-full">${h && n`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(o) => void this._searchTextChanged(o)} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? d} type=search></calcite-input></div>` || ""}<calcite-loader class=${_(t)} .label=${this._translations.fetchingData || ""} scale=l></calcite-loader><div class=${_(e)} ${c(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : n`<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}}", l)).replace("{{total}}", s).replace("{{selected}}", l)}</div>`}</calcite-shell>${this.createFilterModal && this._filterModal() || ""}</div>`;
-  }
-  /** Called once after the component is loaded */
-  loaded() {
-    !this.isMobile && !this._observerSet && this._toolbar.value && (this._resizeObserver?.observe(this._toolbar.value), this._observerSet = !0);
-  }
-  /** Called after the component is rendered */
-  updated() {
-    document.onclick = (e) => this._handleDocumentClick(e), this._updateToolbar();
+    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>`;
   }
   //--------------------------------------------------------------------------
   //
@@ -277,7 +255,7 @@ class C extends S {
    * @protected
    */
   async _initModules() {
-    const [e, t, i] = await m([
+    const [e, t, i] = await y([
       "esri/widgets/FeatureTable",
       "esri/core/reactiveUtils",
       "esri/widgets/FeatureTable/support/TableTemplate"
@@ -306,10 +284,10 @@ class C extends S {
     this._searchExpression && this._clearSearchDefinitionExpression();
     let i = [];
     if (this._fullTextSearchInfo?.length && this._fullTextSearchInfo[0].searchTerm) {
-      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]);
+      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]);
     }
-    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((a) => setTimeout(a, 800)), await this._updateAllIds();
   }
   /** Clears the applied search expression on the layer */
   _clearSearchDefinitionExpression() {
@@ -340,13 +318,13 @@ class C extends S {
       const e = this._layer.indexes?.filter((t) => t.indexType == "FullText");
       if (e?.length) {
         const t = [];
-        e.forEach((s) => {
-          t.push(...s.fields.split(","));
+        e.forEach((a) => {
+          t.push(...a.fields.split(","));
         });
         const i = [];
-        t.forEach((s) => {
-          const l = this._layer?.getField(s.trim());
-          l?.alias && i.push(l.alias);
+        t.forEach((a) => {
+          const s = this._layer?.getField(a.trim());
+          s?.alias && i.push(s.alias);
         }), this._searchPlaceHolder = (this._translations.searchPlaceholder || "").replace("{{fields}}", i.join(", ")), this._fullTextSearchInfo.push({
           onFields: ["*"],
           searchTerm: "",
@@ -355,10 +333,6 @@ class C extends S {
       }
     }
   }
-  /** Update the toolbar when its size changes */
-  _onResize() {
-    this._updateToolbar();
-  }
   /**
    * Gets a row of controls that can be used for various interactions with the table
    *
@@ -366,7 +340,7 @@ class C extends S {
    * @returns The dom node that contains the controls
    */
   _getTableControlRow(e) {
-    return n`<div class=${"display-flex height-51-px border-bottom"} slot=${e ?? d} ${c(this._toolbar)}>${this._getActionBar()}${this.isMobile ? void 0 : this._getDropdown("more-table-options")}${this.enableShare && !this.isMobile ? this._getShare("share") : void 0}</div>`;
+    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>`;
   }
   /**
    * Gets a row of controls that can be used for various interactions with the table
@@ -375,8 +349,8 @@ class C extends S {
    * @returns The dom node that contains the controls
    */
   _getActionBar() {
-    const e = this.isMobile ? "width-full" : "", t = this.isMobile ? "border-top" : "";
-    return n`<calcite-action-bar class=${_(e)} expand-disabled expanded id=${this._getId("bar") ?? d} layout=horizontal><div class=${`border-end ${e} ${t}`} id=solutions-map-layer-picker-container><map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} display=inline-flex height=50 .isMobile=${this.isMobile} .locale=${this.locale} .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>${this.isMobile ? void 0 : this._getActions()}</calcite-action-bar>`;
+    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} .locale=${this.locale} .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>`;
   }
   /**
    * Get the actions that are used for various interactions with the table
@@ -384,28 +358,13 @@ class C extends S {
    * @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 && 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
-   * we can show/hide the appropriate fields
-   *
-   * @returns Node with the fields as dropdown items
-   */
-  _getFieldlist() {
-    return this._columnsInfo ? n`<calcite-dropdown-group selection-mode=multiple>${Object.keys(this._columnsInfo).map((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 && 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;
+    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), []);
   }
   /** Update actions enabled prop based on number of selected indexes */
   _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((s) => {
-      s && i.indexOf(s.icon) > -1 && (s.disabled = s.icon === "pencil" ? !t : !e);
+    this._toolInfos?.forEach((a) => {
+      a && i.indexOf(a.icon) > -1 && (a.disabled = a.icon === "pencil" ? !t : !e);
     });
   }
   /** Update actions active prop based on a stored value */
@@ -423,93 +382,75 @@ class C extends S {
   _initToolInfos() {
     const e = this._featuresSelected();
     this.selectedIds.length > 1 && this._layer?.capabilities?.operations?.supportsUpdate;
-    const t = !this.mapHidden && !this._layer?.isTable, i = this._featuresEmpty(), s = !this._layer?.isTable || this._hasFilterExpressions();
+    const t = !this.mapHidden && !this._layer?.isTable, i = this._featuresEmpty(), a = !this._layer?.isTable || this._hasFilterExpressions();
     if (this._translations) {
-      const l = [];
-      t && l.push({
+      const s = [];
+      t && s.push({
         active: !1,
         icon: "zoom-to-object",
         indicator: !1,
         label: this._translations.zoom || "",
         func: () => this._zoom(),
-        disabled: !e,
-        isOverflow: !1
-      }), s && l.push({
+        disabled: !e
+      }), a && s.push({
         active: !1,
         icon: "filter",
         indicator: !1,
         label: this._translations.filters || "",
         func: () => this.createFilterModal ? this._toggleFilter() : this.toggleFilter.emit(),
-        disabled: !1,
-        isOverflow: !1
-      }), this._deleteEnabled && l.push({
+        disabled: !1
+      }), this._deleteEnabled && s.push({
         active: !1,
         icon: "trash",
         indicator: !1,
         label: this._translations.delete || "",
         func: () => this._showDelete(),
         disabled: !e,
-        isDanger: !0,
-        isOverflow: !1
-      }), l.push({
+        isDanger: !0
+      }), s.push({
         active: !1,
         icon: "erase",
         indicator: !1,
         label: this._translations.clearSelection || "",
         func: () => void this.clearSelection(),
-        disabled: !e,
-        isOverflow: !1
-      }), l.push({
+        disabled: !e
+      }), s.push({
         active: !1,
         icon: "selected-items-filter",
         indicator: !1,
         label: (this._showOnlySelected ? this._translations.showAll : this._translations.showSelected) || "",
         func: () => this._toggleShowSelected(),
-        disabled: !e,
-        isOverflow: !1
-      }), l.push({
+        disabled: !e
+      }), s.push({
         active: !1,
         icon: "list-check-all",
         indicator: !1,
         func: async () => await this._selectAll(),
         label: this._translations.selectAll || "",
-        disabled: i,
-        isOverflow: !1
-      }), l.push({
+        disabled: i
+      }), s.push({
         active: !1,
         icon: "compare",
         indicator: !1,
         func: async () => await this._switchSelected(),
         label: this._translations.switchSelected || "",
-        disabled: i,
-        isOverflow: !1
-      }), l.push({
+        disabled: i
+      }), s.push({
         active: !1,
         icon: "refresh",
         indicator: !1,
         func: () => this._refresh(),
         label: this._translations.refresh || "",
-        disabled: !1,
-        isOverflow: !1
-      }), this.enableCSV && l.push({
+        disabled: !1
+      }), this.enableCSV && s.push({
         active: !1,
         icon: "export",
         indicator: !1,
         func: () => void this._exportToCSV(),
         label: this._translations.exportCSV || "",
         loading: this._csvExporting,
-        disabled: i,
-        isOverflow: !1
-      }), l.push({
-        active: !1,
-        icon: this._showHideOpen ? "chevron-down" : "chevron-right",
-        indicator: !1,
-        func: () => this._toggleShowHide(),
-        label: this._translations.showHideColumns || "",
-        disabled: !1,
-        isOverflow: !1,
-        isSublist: !0
-      }), this._toolInfos = l, this._defaultVisibleToolSizeInfos = void 0;
+        disabled: i
+      }), this._toolInfos = s;
     }
   }
   /**
@@ -549,77 +490,6 @@ class C extends S {
     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;
   }
-  /** Add/Remove tools from the action bar and dropdown based on available size */
-  _updateToolbar() {
-    this._timeout && clearTimeout(this._timeout), !this.isMobile && this._toolbar.value && this._toolInfos && (this._timeout = setTimeout(() => {
-      clearTimeout(this._timeout), this._setToolbarSizeInfos();
-      const e = this._toolbar.value?.offsetWidth;
-      let t = this._toolbarSizeInfos.reduce((s, l) => (s += l.width, s), 0);
-      const i = ["solutions-more", "solutions-map-layer-picker-container", "map-picker", "solutions-action-share"];
-      if (e !== void 0 && t > e) {
-        if (this._toolbarSizeInfos.length > 0) {
-          const s = [...this._toolbarSizeInfos].reverse().reduce((l, a) => (i.indexOf(a.id) < 0 && (t > e ? t -= a.width : l.push(a)), l), []).reverse();
-          this._setControlsThatFit(s, i);
-        }
-      } else if (this._defaultVisibleToolSizeInfos) {
-        const s = this._toolbarSizeInfos.reduce((h, o) => (h.push(o.id), h), []);
-        let l = !1;
-        const a = [...this._defaultVisibleToolSizeInfos].reduce((h, o) => (!l && i.indexOf(o.id) < 0 && (s.indexOf(o.id) > -1 || e !== void 0 && t + o.width <= e) ? (s.indexOf(o.id) < 0 && (t += o.width), h.push(o)) : i.indexOf(o.id) < 0 && e !== void 0 && t + o.width > e && (l = !0), h), []);
-        this._setControlsThatFit(a, i);
-      }
-    }, 100));
-  }
-  /**
-   * Validate if controls that fit the current display has changed or
-   * is different from what is currently displayed
-   */
-  _setControlsThatFit(e, t) {
-    let i = JSON.stringify(e) !== JSON.stringify(this._controlsThatFit);
-    document.getElementById("solutions-action-bar")?.childNodes?.forEach((l) => {
-      l.nodeType === 1 && l.id && t.indexOf(l.id) < 0 && !i && (i = this._controlsThatFit.map((a) => a.id).indexOf(l.id) < 0);
-    }), i && (this._controlsThatFit = [...e]);
-  }
-  /** Get the id and size for the toolbars current items */
-  _setToolbarSizeInfos() {
-    let e = !1;
-    this._toolbarSizeInfos = [], this._toolbar.value?.childNodes.forEach((t) => {
-      t.nodeType === 1 && (t.id === "solutions-action-bar" ? t.childNodes.forEach((i) => {
-        i.id && i.offsetWidth > 0 && this._toolbarSizeInfos.push({
-          id: i.id,
-          width: i.offsetWidth
-        }), e || (e = i.offsetWidth > 0);
-      }) : !t.referenceElement && t.id && (this._toolbarSizeInfos.push({
-        id: t.id,
-        width: t.offsetWidth
-      }), e || (e = t.offsetWidth > 0)));
-    }), e && !this._defaultVisibleToolSizeInfos && (this._defaultVisibleToolSizeInfos = [...this._toolbarSizeInfos]);
-  }
-  /**
-   * Get a list of toolInfos that should display outside of the dropdown
-   *
-   * @returns IToolInfo[] the list of toolInfos that should not display in the overflow dropdown
-   */
-  _getActionItems() {
-    return this._toolInfos?.filter((e) => e && !e.isOverflow) || [];
-  }
-  /**
-   * Get a list of toolInfos that should display in the dropdown
-   *
-   * @param id string the id for the dropdown and its tooltip
-   * @returns VNode the dropdown node
-   */
-  _getDropdown(e) {
-    const t = this._getDropdownItems();
-    return t.length > 0 ? n`<calcite-dropdown close-on-select-disabled .disabled=${this._layer === void 0} id=solutions-more @calciteDropdownBeforeClose=${() => this._forceShowHide()} ${c(this._moreDropdown)}><calcite-action appearance=solid id=${e ?? d} label @click=${() => this._closeShowHide()} slot=trigger text><calcite-button appearance=transparent icon-end=chevron-down kind=neutral>${this._translations.more}</calcite-button></calcite-action><calcite-dropdown-group selection-mode=none>${t.reduce((i, s) => (i.push(n`<calcite-dropdown-group class=${`${s.disabled ? "disabled" : ""} ${s.icon === "trash" ? "delete-red" : ""}`} selection-mode=none><calcite-dropdown-item .disabled=${s.loading} .iconStart=${s.isSublist && this._showHideOpen ? "chevron-down" : s.loading ? "" : s.icon} .id=${`layer-table-${s.icon}`} @click=${s.func}>${s.loading ? n`<div class=display-flex><calcite-loader inline .label=${s.label} scale=m></calcite-loader>${s.label}</div>` : s.label}</calcite-dropdown-item></calcite-dropdown-group>`), i), [])}</calcite-dropdown-group>${this._showHideOpen ? this._getFieldlist() : void 0}</calcite-dropdown>` : void 0;
-  }
-  /**
-   * Get a list of toolInfos that should display in the dropdown
-   *
-   * @returns IToolInfo[] the list of toolInfos that should display in the dropdown
-   */
-  _getDropdownItems() {
-    return this._toolInfos?.filter((e) => e && e.isOverflow);
-  }
   /**
    * Get an action and tooltip
    *
@@ -629,9 +499,9 @@ class C extends S {
    * @param disabled boolean when true the user will not be able to interact with the action
    * @returns VNode The node representing the DOM element that will contain the action
    */
-  _getAction(e, t, i, s, l, a, h, o) {
-    const r = this._layer === void 0 ? !0 : a;
-    return n`<div class=display-flex id=${this._getId(t) ?? d} slot=${o ?? d}><calcite-action .active=${e} appearance=solid .disabled=${r} .icon=${t} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${h} @click=${l} .text=${s} text-enabled></calcite-action>${this._getToolTip("bottom", t, s)}</div>`;
+  _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>`;
   }
   /**
    * Show the delete dialog
@@ -650,7 +520,7 @@ class C extends S {
    * @returns VNode The node representing the DOM element that will contain the action
    */
   _getShare(e) {
-    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>` || "";
+    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>` || "";
   }
   /** Called each time the values that are used for custom url params change */
   _updateShareUrl() {
@@ -670,7 +540,7 @@ class C extends S {
    * @returns VNode The tooltip node
    */
   _getToolTip(e, t, i) {
-    return document.getElementById(t) ? n`<calcite-tooltip .placement=${e} .referenceElement=${t}><span>${i}</span></calcite-tooltip>` : void 0;
+    return document.getElementById(t) ? h`<calcite-tooltip .placement=${e} .referenceElement=${t}><span>${i}</span></calcite-tooltip>` : void 0;
   }
   /**
    * Get an id with a prefix to the user supplied value
@@ -690,9 +560,9 @@ class C extends S {
    * @param disabled boolean when true the user will not be able to interact with the action
    * @returns VNode The node representing the DOM element that will contain the action
    */
-  _getDangerAction(e, t, i, s) {
-    const l = this._layer === void 0 ? !0 : s;
-    return n`<div class="display-flex" id=${this._getId(e) ?? d}>${n`<calcite-action appearance=solid .disabled=${l} 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, 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>`;
   }
   /**
    * Return all currently selected IDs from the table
@@ -763,15 +633,15 @@ class C extends S {
     let i = !0;
     if (this._editor && !this._skipEditCheck) {
       if (this._hasPendingEdits()) {
-        let l = !1;
+        let s = !1;
         try {
           this._editor.viewModel.activeWorkflow && await this._editor.viewModel.activeWorkflow.cancel({
             force: !1
           });
-        } catch (a) {
-          l = a?.name === "workflow:cancel-denied";
+        } catch (l) {
+          s = l?.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));
+        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;
@@ -821,13 +691,13 @@ class C 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((s, l) => t && t[l] ? JSON.stringify(t[l]) !== JSON.stringify(s) : !1);
+      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);
       if (this._table && e && (i || !this._columnsInfo)) {
         this._table.tableTemplate = this.TableTemplate && new this.TableTemplate({
           columnTemplates: e
         });
-        const s = e.map((l) => l.fieldName);
-        this._initColumnsInfo(s);
+        const a = e.map((s) => s.fieldName);
+        this._initColumnsInfo(a);
       }
     }
   }
@@ -846,7 +716,7 @@ class C extends S {
   /** 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._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._tableNode && !this._tableNode.classList.contains(t) && this._tableNode.classList.add(t);
       });
     } catch (e) {
@@ -877,10 +747,10 @@ class C extends S {
    * @param fieldNames optional list of names from new config options
    */
   _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 && 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;
+    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;
   }
   /** Select the feature that was specified via url params */
   async _selectDefaultFeature(e) {
@@ -893,33 +763,11 @@ class C extends S {
   /** Sort the table with the configured field and the sort order */
   async _sortTable() {
     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(() => {
+    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(() => {
       e && this._table?.sortColumn(e, t);
     }));
   }
-  /** Open show/hide dropdown */
-  _forceShowHide() {
-    this._showHideDropdown.value && (this._showHideDropdown.value.open = this._showHideOpen), this._moreDropdown.value && (this._moreDropdown.value.open = this._showHideOpen);
-  }
-  /** Toggle show/hide dropdown */
-  _toggleShowHide() {
-    this._showHideOpen = !this._showHideOpen;
-  }
-  /** Open show/hide dropdown */
-  _closeShowHide() {
-    this._showHideOpen = !1;
-  }
-  /**
-   * Close show/hide dropdown when the user clicks outside of it
-   *
-   * @param e clicked event from mouse
-   * @protected
-   */
-  _handleDocumentClick(e) {
-    const t = e.target?.id;
-    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
    *
@@ -927,7 +775,7 @@ class C extends S {
    * @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>${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>`;
+    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>`;
   }
   /**
    * Reset the filter active prop
@@ -960,8 +808,8 @@ class C extends S {
             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)));
+            }, 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)));
           }
           this._allIds = await this.queryAllIds();
         }
@@ -1001,9 +849,9 @@ class C extends S {
     const t = {
       include: this._layer
     }, 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));
+    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();
   }
   /**
@@ -1012,7 +860,7 @@ class C extends S {
    * @protected
    */
   async _selectAll() {
-    const e = this._allIds, t = e.filter((s) => this.selectedIds.indexOf(s) < 0);
+    const e = this._allIds, t = e.filter((a) => this.selectedIds.indexOf(a) < 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;
   }
   /**
@@ -1056,7 +904,7 @@ class C extends S {
    * @protected
    */
   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);
+    const e = [...this.selectedIds], t = this._allIds.reduce((a, s) => (e.indexOf(s) < 0 && a.push(s), a), []).sort((a, s) => a - s);
     await this._validateActiveEdits(t, e) && this._table ? (this._table.highlightIds.removeAll(), this._table.highlightIds.addMany(t), this.selectedIds = t, this._finishOnChange()) : this._skipEditCheck = !1;
   }
   /**
@@ -1072,14 +920,14 @@ class C extends S {
       ids: t,
       layer: this._layer
     });
-    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());
+    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());
       }
-      return s;
+      return a;
     }, []);
-    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView && await v(
+    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView && await x(
       this.mapView.map,
       e,
       !1,
@@ -1116,7 +964,7 @@ class C extends S {
    * @protected
    */
   async _zoom() {
-    this._layer && this.mapView && await b(this.selectedIds, this._selectedLayerView, this.mapView, !0, void 0, this.zoomToScale);
+    this._layer && this.mapView && await g(this.selectedIds, this._selectedLayerView, this.mapView, !0, void 0, this.zoomToScale);
   }
   /**
    * Handles layer selection change to show new table
@@ -1129,7 +977,7 @@ class C extends S {
     const t = e.detail[0];
     if (t !== this._layer?.id || this._featuresEmpty()) {
       this._fetchingData = !0;
-      const i = this.mapView && await y(this.mapView, t);
+      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();
       });
@@ -1145,21 +993,21 @@ class C extends S {
    */
   _getColumnTemplates(e, t) {
     let i;
-    this.mapInfo?.layerOptions?.layers.some((o) => o.id === e ? (i = o, !0) : !1);
-    const s = this._layer?.attributeTableTemplate?.elements;
-    let l = [];
-    s?.length > 0 && this.honorMapFieldSettings && (l = s.map((o) => o.fieldName));
-    const a = i?.fields && i?.fieldOrder ? i.fieldOrder.filter((o) => i?.fields && i.fields.indexOf(o) > -1) : l.length > 0 ? l : void 0;
-    let h;
-    return t && (h = t.reduce((o, r) => {
-      const p = {
+    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 = {
         type: "field",
         fieldName: r.name,
         label: r.alias,
         menuConfig: this._getMenuConfig(r.name)
       };
-      return i && i?.fields ? i.fields.indexOf(r.name) > -1 && o.push(p) : l.length > 0 ? l.indexOf(r.name) > -1 && o.push(p) : o.push(p), o;
-    }, [])), h ? a ? h?.sort(this._sortFields.bind(this, a)) : h : [];
+      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 : [];
   }
   _sortFields(e, t, i) {
     return e?.indexOf(t.fieldName) - e.indexOf(i.fieldName);
@@ -1194,7 +1042,7 @@ class C extends S {
     }));
   }
 }
-g("layer-table", C);
+b("layer-table", F);
 export {
-  C as LayerTable
+  F as LayerTable
 };