@esri/solutions-components 5.1.9 → 5.1.11

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

@@ -1,23 +1,23 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as E } from "../../chunks/runtime.js";
-import { e as I, g as T, c as v } from "../../chunks/mapViewUtils.js";
+import { c as v } from "../../chunks/runtime.js";
+import { e as I, g as T, c as E } from "../../chunks/mapViewUtils.js";
 import { b as F } from "../../chunks/queryUtils.js";
 import { d as x } from "../../chunks/downloadUtils.js";
 import { b } from "../../chunks/interfaces.js";
 import { defineCustomElements as S } from "@arcgis/instant-apps-components/loader";
 import { u as O } from "../../chunks/useT9n.js";
-import { css as C, html as c, nothing as u } from "lit";
+import { css as C, html as c, nothing as p } from "lit";
 import { createRef as y, ref as g } from "lit-html/directives/ref.js";
 import { LitElement as A, createEvent as o, noShadowRoot as H, safeClassMap as m } from "@arcgis/lumina";
 import { f as L } from "../../chunks/helpers.js";
 import $ from "@arcgis/core/widgets/FeatureTable.js";
-import * as p from "@arcgis/core/core/reactiveUtils.js";
+import * as u from "@arcgis/core/core/reactiveUtils.js";
 import D from "@arcgis/core/rest/support/RelationshipQuery.js";
 import w from "@arcgis/core/widgets/FeatureTable/support/TableTemplate.js";
 const V = C`@layer{: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-surface-1)}.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-dialog-content-space: 0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-surface-2)!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{white-space:nowrap}.padding-start-1-4{padding-inline-start:.5rem}.panel-header-override{--calcite-panel-header-content-space: 0px}.danger-label-color{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}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
 class M extends A {
   constructor() {
-    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.enableTableAutosave = !0, 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.pasteEnabled = !1, this.showCopyPasteActions = !1, this.layerIds = [], this._allIds = [], this._configLayerOrderDefined = !1, this._csvExporting = !1, this._fetchingData = !1, this._hideTable = !1, this._filterActive = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = O({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._enabledLayerIds = [], this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._deleteEnabled = !1, this._floorExpression = "", this._floorField = "", this._floorLevel = "", this._loaded = !1, this._shareNode = y(), this._toolbar = y(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this._creatingFeature = !1, this._searchNode = y(), this._layerEditsHandles = [], this._pastedFeaturesIds = [], this._shouldSelectCreatedFeatures = !1, this._isAddingListeners = !1, this.columnReorder = o(), this.featureSelectionChange = o(), this.toggleFilter = o(), this.showDelete = o(), this.relatedRecordToggled = o(), this.editMultipleFeatures = o(), this.copyFeatures = o(), this.pasteFeatures = o(), this.featuresAdded = o(), this.initCreateComponent = o(), this.requestLayerSelectionChange = o(), this.beforeFeatureSelectionChange = o(), this.continueEditing = o(), this.createFeatureEditorInitialized = (e) => {
+    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.enableTableAutosave = !0, 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.pasteEnabled = !1, this.showCopyPasteActions = !1, this.layerIds = [], this._allIds = [], this._configLayerOrderDefined = !1, this._csvExporting = !1, this._fetchingData = !1, this._hideTable = !1, this._filterActive = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = O({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._enabledLayerIds = [], this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._deleteEnabled = !1, this._floorExpression = "", this._floorField = "", this._floorLevel = "", this._loaded = !1, this._shareNode = y(), this._toolbar = y(), this._searchExpression = "", this._skipEditCheck = !1, this._highlightedKey = "", this._highlightGeneration = 0, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this._creatingFeature = !1, this._searchNode = y(), this._layerEditsHandles = [], this._pastedFeaturesIds = [], this._shouldSelectCreatedFeatures = !1, this._isAddingListeners = !1, this.columnReorder = o(), this.featureSelectionChange = o(), this.toggleFilter = o(), this.showDelete = o(), this.relatedRecordToggled = o(), this.editMultipleFeatures = o(), this.copyFeatures = o(), this.pasteFeatures = o(), this.featuresAdded = o(), this.initCreateComponent = o(), this.requestLayerSelectionChange = o(), this.beforeFeatureSelectionChange = o(), this.continueEditing = o(), this.createFeatureEditorInitialized = (e) => {
       this._createFeatureEditor = e.detail;
     }, this.createFeatureEditorClosed = () => {
       this._createFeatureEditor = void 0;
@@ -68,22 +68,32 @@ class M extends A {
     this._configLayerOrderDefined = "configLayerOrder" in (this.mapInfo?.layerOptions || {}), this._enabledLayerIds = L(this.mapInfo?.layerOptions?.layers || [], this.mapInfo?.layerOptions?.configLayerOrder), this._table && (this._resetColumnTemplates(), this._sortTable(), await this._initToolInfos());
   }
   async mapViewWatchHandler() {
-    this._mapClickHandle && this._mapClickHandle.remove(), this.mapView && (this._floorExpression = "", this._searchExpression = "", this.mapView.highlights = [
-      {
-        name: "default",
-        color: "#00FFFF"
-      },
-      {
-        name: "current-selection",
-        color: "#ff00ff"
-      },
-      {
-        name: "temporary",
-        color: "#FFFF00"
-      }
-    ], this._updateShareUrl(), this._mapClickHandle = p.on(() => this.mapView, "click", (e) => {
-      this._creatingFeature || this._mapClicked(e);
-    }));
+    if (this._mapClickHandle && this._mapClickHandle.remove(), this.mapView) {
+      this._floorExpression = "", this._searchExpression = "", this._updateShareUrl(), this._mapClickHandle = u.on(() => this.mapView, "click", (t) => {
+        this._creatingFeature || this._mapClicked(t);
+      });
+      const e = this.mapView;
+      (async () => {
+        try {
+          await e.when(), e.updating && await u.once(() => !e.updating);
+        } catch {
+        }
+        this.mapView === e && (e.highlights = [
+          {
+            name: "default",
+            color: "#00FFFF"
+          },
+          {
+            name: "current-selection",
+            color: "#ff00ff"
+          },
+          {
+            name: "temporary",
+            color: "#FFFF00"
+          }
+        ]);
+      })();
+    }
   }
   async _layerWatchHandler() {
     if (this._hideTable = !1, this._fetchingData = !0, !this._layer) {
@@ -149,9 +159,9 @@ class M extends A {
     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 I([i], h, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
+      const l = t.layer, h = this.mapView.allLayerViews.toArray();
+      let r;
+      h.some(async (n) => n.layer.title === l?.title && n.layer.type === "feature" ? (r = n, this.mapView && await I([i], r, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
     }
   }
   async beforeLayerSelectionChange(e) {
@@ -210,10 +220,10 @@ class M extends A {
     await this._initToolInfos();
   }
   render() {
-    const e = this._fetchingData || this._hideTable ? "display-none" : "height-full", 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(), c`<div><calcite-scrim class=${m(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.isMobile && c`${this._getTableControlRow("header-content")}${this._getActionsEnd("header-actions-end")}` || ""}${r && c`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(h) => {
-      this._searchTextChanged(h);
-    }} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? u} type=search ${g(this._searchNode)}></calcite-input></div>` || ""}<calcite-loader class=${m(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${m(e)} ${g(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : c`<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></div>`;
+    const e = this._fetchingData || this._hideTable ? "display-none" : "height-full", 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", h = this._canShowFullTextSearch();
+    return this._validateActiveActions(), c`<div><calcite-scrim class=${m(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.isMobile && c`${this._getTableControlRow("header-content")}${this._getActionsEnd("header-actions-end")}` || ""}${h && c`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(r) => {
+      this._searchTextChanged(r);
+    }} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? p} type=search ${g(this._searchNode)}></calcite-input></div>` || ""}<calcite-loader class=${m(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${m(e)} ${g(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : c`<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></div>`;
   }
   updated() {
     this._table && this.updateRelatedAttachmentColumns();
@@ -237,7 +247,7 @@ class M extends A {
       const a = this._layer?.createQuery();
       a.fullText = this._fullTextSearchInfo, s = this._layer ? await this._layer.queryObjectIds(a) : [], i && t?.length && (s = s.filter((l) => t.includes(l))), await this._updateSearchDefinitionExpression(s?.length ? s : [-1]);
     }
-    i && s?.length && (this._showOnlySelected = !0, this._table?.highlightIds.addMany(s.reverse())), this._selectedLayerView && this._selectedLayerView.updating ? await p.once(() => !this._selectedLayerView.updating) : await new Promise((a) => setTimeout(a, 800)), this._allIds = await this.queryAllIds(), this.selectedIds = this.selectedIds.filter((a) => this._allIds.indexOf(a) > -1), await this._refresh(!1, !0);
+    i && s?.length && (this._showOnlySelected = !0, this._table?.highlightIds.addMany(s.reverse())), this._selectedLayerView && this._selectedLayerView.updating ? await u.once(() => !this._selectedLayerView.updating) : await new Promise((a) => setTimeout(a, 800)), this._allIds = await this.queryAllIds(), this.selectedIds = this.selectedIds.filter((a) => this._allIds.indexOf(a) > -1), await this._refresh(!1, !0);
   }
   _clearSearchDefinitionExpression() {
     const e = this._layer?.definitionExpression;
@@ -277,7 +287,7 @@ class M extends A {
   }
   _getMapLayerPicker(e) {
     const t = this.isMobile ? "display-none" : "";
-    return c`<div class=${`border-end ${t}`} id=solutions-map-layer-picker-container slot=${e ?? u}><map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} 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>`;
+    return c`<div class=${`border-end ${t}`} id=solutions-map-layer-picker-container slot=${e ?? p}><map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} 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>`;
   }
   _getLayerOption(e) {
     let t;
@@ -286,13 +296,13 @@ class M extends A {
   _getActionsEnd(e) {
     const t = this._relatedFeatureTable ? this._relatedFeatureTable.layer : this._layer, i = this._relatedFeatureTable || this._table;
     let s = this._getLayerOption(t?.id || "");
-    return c`<div class="display-flex" slot=${e ?? u}><field-selection .configExtraFields=${s?.extraFields} .layer=${t} .mapView=${this.mapView} .table=${i} .tableRef=${this.el}></field-selection>${this.enableShare && !this.isMobile ? this._getShare("share") : void 0}</div>`;
+    return c`<div class="display-flex" slot=${e ?? p}><field-selection .configExtraFields=${s?.extraFields} .layer=${t} .mapView=${this.mapView} .table=${i} .tableRef=${this.el}></field-selection>${this.enableShare && !this.isMobile ? this._getShare("share") : void 0}</div>`;
   }
   _getTableControlRow(e) {
-    return c`<div class=${"height-51-px width-full display-flex"} slot=${e ?? u} ${g(this._toolbar)}>${this._getActionBar()}</div>`;
+    return c`<div class=${"height-51-px width-full display-flex"} slot=${e ?? p} ${g(this._toolbar)}>${this._getActionBar()}</div>`;
   }
   _getActionBar() {
-    return c`<calcite-action-bar class=width-full expand-disabled id=${this._getId("bar") ?? u} layout=horizontal><calcite-action-group>${this.isMobile ? void 0 : this._getActions()}</calcite-action-group></calcite-action-bar>`;
+    return c`<calcite-action-bar class=width-full expand-disabled id=${this._getId("bar") ?? p} 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, t.toolTip)), e), []);
@@ -310,7 +320,7 @@ class M extends A {
     });
   }
   async _initToolInfos() {
-    const e = this._getIds().length > 0, t = this._relatedFeatureTable ? this._relatedFeatureTable.layer.isTable : this._layer?.isTable, i = this.featureSelectionMode === "multiple" && this._layer?.capabilities?.operations.supportsUpdate, s = this._getSelectedIds().length < 2 || this._getSelectedIds().length > b, a = !this.mapHidden && !t, l = !this._relatedFeatureTable && (!this._layer?.isTable || this._hasFilterExpressions()), r = this._featuresEmpty(), h = this.featureSelectionMode === "single";
+    const e = this._getIds().length > 0, t = this._relatedFeatureTable ? this._relatedFeatureTable.layer.isTable : this._layer?.isTable, i = this.featureSelectionMode === "multiple" && this._layer?.capabilities?.operations.supportsUpdate, s = this._getSelectedIds().length < 2 || this._getSelectedIds().length > b, a = !this.mapHidden && !t, l = !this._relatedFeatureTable && (!this._layer?.isTable || this._hasFilterExpressions()), h = this._featuresEmpty(), r = this.featureSelectionMode === "single";
     let n = this.enableCSV;
     if (this._relatedFeatureTable) {
       const f = await this._queryRelatedFeatures();
@@ -386,21 +396,21 @@ class M extends A {
       func: () => this._toggleShowSelected(),
       disabled: !e,
       toolTip: this._showOnlySelected ? this._translations.showAll : this._translations.showSelected
-    }), !h && !this._relatedFeatureTable && d.push({
+    }), !r && !this._relatedFeatureTable && d.push({
       active: !1,
       icon: "list-check-all",
       indicator: !1,
       func: async () => await this._selectAll(),
       label: this._translations.selectAll,
-      disabled: r,
+      disabled: h,
       toolTip: this._translations.selectAll
-    }), !h && !this._relatedFeatureTable && d.push({
+    }), !r && !this._relatedFeatureTable && d.push({
       active: !1,
       icon: "compare",
       indicator: !1,
       func: async () => await this._switchSelected(),
       label: this._translations.switchSelected,
-      disabled: r,
+      disabled: h,
       toolTip: this._translations.switchSelected
     }), d.push({
       active: !1,
@@ -421,7 +431,7 @@ class M extends A {
       },
       label: this._translations.exportCSV,
       loading: this._csvExporting,
-      disabled: r,
+      disabled: h,
       toolTip: this._translations.exportCSV
     }), this._toolInfos = [...d];
   }
@@ -438,10 +448,10 @@ class M extends A {
           if (!s)
             continue;
           const a = s.on("edits", async (l) => {
-            const r = Array.isArray(l?.addedFeatures) ? l.addedFeatures : [], h = Array.isArray(l?.updatedFeatures) ? l.updatedFeatures : [];
-            if (r.length === 0 && h.length === 0)
+            const h = Array.isArray(l?.addedFeatures) ? l.addedFeatures : [], r = Array.isArray(l?.updatedFeatures) ? l.updatedFeatures : [];
+            if (h.length === 0 && r.length === 0)
               return;
-            const n = r.map((_) => _.objectId).filter((_) => _ != null), d = h.map((_) => _.objectId).filter((_) => _ != null);
+            const n = h.map((_) => _.objectId).filter((_) => _ != null), d = r.map((_) => _.objectId).filter((_) => _ != null);
             if (n.length === 0 && d.length === 0)
               return;
             const f = this._layer?.id;
@@ -487,9 +497,9 @@ class M extends A {
     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, s, a, l, r, h) {
+  _getAction(e, t, i, s, a, l, h, r) {
     const n = this._layer === void 0 ? !0 : l;
-    return c`<calcite-action .active=${e} .disabled=${n} .icon=${t} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${r} @click=${a} text text-enabled><div class="display-flex"><span class="label-override padding-start-1-4">${s}</span></div></calcite-action>${this._getToolTip("auto", `layer-table-${t}`, h)}`;
+    return c`<calcite-action .active=${e} .disabled=${n} .icon=${t} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${h} @click=${a} text text-enabled><div class="display-flex"><span class="label-override padding-start-1-4">${s}</span></div></calcite-action>${this._getToolTip("auto", `layer-table-${t}`, r)}`;
   }
   _showDelete() {
     this.showDelete.emit({
@@ -497,7 +507,7 @@ class M extends A {
     });
   }
   _getShare(e) {
-    return c`<div id=${this._getId(e) ?? u}><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} ${g(this._shareNode)}></instant-apps-social-share>${this._getToolTip("bottom", e, this._translations.share)}</div>`;
+    return c`<div id=${this._getId(e) ?? p}><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} ${g(this._shareNode)}></instant-apps-social-share>${this._getToolTip("bottom", e, this._translations.share)}</div>`;
   }
   _updateShareUrl() {
     const e = this._shareNode.value?.shareUrl;
@@ -552,9 +562,9 @@ class M extends A {
     }), await this._table?.when(() => {
       this._table?.viewModel.addHandles(this._table.highlightIds.on("change", (i) => {
         this._handleOnChange(i);
-      })), this._table?.viewModel.addHandles(this._table.on("cell-pointerover", this.tempHighlightOnHover.bind(this))), this._table?.viewModel.addHandles(this._table.on("cell-pointerout", this._removeTempHighlight.bind(this))), this._table?.viewModel.addHandles(this._table.on("column-reorder", this._handleColumnReorder.bind(this))), this.listenOn(this._tableNode, "mouseleave", this._removeTempHighlight), this._table?.viewModel.addHandles(p.watch(() => this._table.size, (i) => {
+      })), this._table?.viewModel.addHandles(this._table.on("cell-pointerover", this.tempHighlightOnHover.bind(this))), this._table?.viewModel.addHandles(this._table.on("cell-pointerout", this._removeTempHighlight.bind(this))), this._table?.viewModel.addHandles(this._table.on("column-reorder", this._handleColumnReorder.bind(this))), this.listenOn(this._tableNode, "mouseleave", this._removeTempHighlight), this._table?.viewModel.addHandles(u.watch(() => this._table.size, (i) => {
         this._size = i;
-      })), p?.watch(
+      })), u?.watch(
         () => this._table?.relatedTable,
         // eslint-disable-next-line @typescript-eslint/no-misused-promises
         async (i) => {
@@ -641,21 +651,30 @@ class M extends A {
   }
   tempHighlightOnHover(e) {
     if (this._removeTempHighlight(), this._selectedLayerView) {
-      const t = e.feature;
-      t?.geometry && (this._temporaryFeatureHandle = this._selectedLayerView?.highlight([t], { name: "temporary" }));
+      const t = e.feature, i = t ? Number(t.getObjectId()) : NaN;
+      Number.isNaN(i) || (this._temporaryFeatureHandle = this._selectedLayerView?.highlight([i], { name: "temporary" }));
     }
   }
   _removeTempHighlight() {
     this._temporaryFeatureHandle && this._temporaryFeatureHandle.remove();
   }
-  _highlightFeatures(e) {
-    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" });
+  async _highlightFeatures(e) {
+    const t = this.selectedIds.length > 0 ? `${e ?? ""}|${[...this.selectedIds].sort((s, a) => Number(s) - Number(a)).join(",")}` : "";
+    if (t !== "" && t === this._highlightedKey && this._currentFeatureHighlightHandle)
+      return;
+    this._highlightedKey = t;
+    const i = ++this._highlightGeneration;
+    if (this._clearHighlights(), this.selectedIds.length > 0 && this._selectedLayerView) {
+      if (this._selectedLayerView.updating && await u.once(() => !this._selectedLayerView?.updating), i !== this._highlightGeneration || this.selectedIds.length === 0 || !this._selectedLayerView)
+        return;
+      if (this._currentFeatureHighlightHandle = this._selectedLayerView.highlight([e], { name: "current-selection" }), this.selectedIds.length > 1) {
+        const s = this.selectedIds.filter((a) => a !== e);
+        this._defaultFeaturesHandle = this._selectedLayerView.highlight(s, { name: "default" });
+      }
     }
   }
   _clearHighlights() {
-    this._removeTempHighlight(), this._currentFeatureHighlightHandle && this._currentFeatureHighlightHandle.remove(), this._defaultFeaturesHandle && this._defaultFeaturesHandle.remove();
+    this._removeTempHighlight(), this._currentFeatureHighlightHandle && (this._currentFeatureHighlightHandle.remove(), this._currentFeatureHighlightHandle = void 0), this._defaultFeaturesHandle && (this._defaultFeaturesHandle.remove(), this._defaultFeaturesHandle = void 0);
   }
   _resetColumnTemplates() {
     if (this._layer) {
@@ -683,7 +702,7 @@ class M extends A {
     } else this._table && (this._table.view = this.mapView, this._table.layer = this._layer);
     await this._initLayerRefresh(), this._checkEditEnabled(this._layer), this._table && (this._table.editingEnabled = this._editEnabled && this.enableInlineEdit, this._table.autoSaveEnabled = this.enableTableAutosave, await this._table.when(), setTimeout(() => {
       this._loaded || this.finishLoading();
-    }, 1e3), await p.once(() => this._table?.state === "loaded").then(async () => {
+    }, 1e3), await u.once(() => this._table?.state === "loaded").then(async () => {
       await this.finishLoading();
     }));
   }
@@ -726,7 +745,28 @@ class M extends A {
     }), this._columnsInfo = e ? e.reduce((a, l) => (a[l] = t[l], a), {}) : t;
   }
   async _selectDefaultFeature(e) {
-    e.length > 0 && this._table?.highlightIds.addMany(e);
+    if (e.length > 0) {
+      try {
+        await this.mapView?.when(), this._layer && this.mapView && await this.mapView.whenLayerView(this._layer), await this._whenMapSettled();
+      } catch {
+      }
+      this._table?.highlightIds.addMany(e);
+    }
+  }
+  async _whenMapSettled(e = 400, t = 8e3) {
+    const i = this.mapView;
+    if (!i)
+      return;
+    const s = Date.now() + t;
+    let a = 0;
+    for (; Date.now() < s; ) {
+      if (!i.updating && i.stationary) {
+        if (a === 0 && (a = Date.now()), Date.now() - a >= e)
+          return;
+      } else
+        a = 0;
+      await new Promise((h) => setTimeout(h, 100));
+    }
   }
   _checkEditEnabled(e) {
     this._editEnabled = !!(e?.editingEnabled && e?.capabilities?.operations.supportsUpdate), this._deleteEnabled = !!(e?.editingEnabled && e?.capabilities?.operations.supportsDelete);
@@ -749,7 +789,7 @@ class M extends A {
     this._filterActive = e, this._updateShareUrl(), await this._searchFullText();
   }
   _handleTableOnMapExtent() {
-    this._table && (this._filterByExtentHandle = p.when(
+    this._table && (this._filterByExtentHandle = u.when(
       () => this.mapView?.stationary,
       // eslint-disable-next-line @typescript-eslint/no-misused-promises
       async () => {
@@ -789,13 +829,13 @@ class M extends A {
         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);
+          const h = this._table?.highlightIds.indexOf(l);
+          h !== void 0 && h < 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);
+          const l = Number(a.graphic.getObjectId()), h = this._table?.highlightIds.indexOf(l);
+          h && h < 0 && l && this._table?.highlightIds.add(l);
         });
       this._showOnlySelected && this._table && (this._table.filterBySelectionEnabled = !0);
     }
@@ -823,10 +863,10 @@ class M extends A {
     if (this._relatedFeatureTable?.tableParent && this._relatedFeatureTable.highlightIds.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 : []);
+        const h = await this._queryRelatedFeatures(), r = [];
+        h && h[l]?.features && (h[l].features.forEach((n) => {
+          n.attributes && r.push(n.attributes[e.objectIdField]);
+        }), i = r.length > 0 ? r : []);
       }
     }
     t[e.id] = {
@@ -837,10 +877,10 @@ class M extends A {
     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());
+    const a = s && s.columns.toArray().reduce((l, h) => {
+      if (!h.hidden) {
+        const r = h?.name || h?.fieldName;
+        r && l.push(r.toLocaleLowerCase());
       }
       return l;
     }, []);
@@ -859,13 +899,13 @@ class M extends A {
     ), 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 = new D({
+    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((h) => i.relationships?.some((r) => r.id === h.id)), a = new D({
       objectIds: [t],
       outFields: ["*"],
       relationshipId: s?.id
     });
-    return t && a && await i.queryRelatedFeatures(a).catch(async (r) => {
-      console.error(r);
+    return t && a && await i.queryRelatedFeatures(a).catch(async (h) => {
+      console.error(h);
     });
   }
   _updateToolInfoLoading(e, t) {
@@ -909,7 +949,7 @@ class M extends A {
       this._fetchingData = !0, await this._clearSearchText();
       const i = this.mapView && await T(this.mapView, t);
       i && await i.when(async () => {
-        this._selectedLayerView = !i.isTable && this.mapView ? await v(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._selectedLayerView = !i.isTable && this.mapView ? await E(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._creatingFeature = !1, this._fetchingData = !1;
@@ -919,9 +959,9 @@ class M extends A {
     const a = this._layer?.attributeTableTemplate?.elements;
     let l = [];
     a?.length > 0 && this.honorMapFieldSettings && (l = a.map((n) => n.fieldName));
-    const r = s?.fields && s?.fieldOrder ? s.fieldOrder.filter((n) => s?.fields && s.fields.indexOf(n) > -1) : l.length > 0 ? l : void 0;
-    let h;
-    return t && (h = t.reduce((n, d) => {
+    const h = s?.fields && s?.fieldOrder ? s.fieldOrder.filter((n) => s?.fields && s.fields.indexOf(n) > -1) : l.length > 0 ? l : void 0;
+    let r;
+    return t && (r = t.reduce((n, d) => {
       const f = {
         type: "field",
         fieldName: d.name,
@@ -929,13 +969,13 @@ class M extends A {
         menuConfig: this._getMenuConfig(d.name)
       };
       return s && s.fields && s?.fields?.length > 0 ? s.fields.indexOf(d.name) > -1 && n.push(f) : l.length > 0 ? l.indexOf(d.name) > -1 && n.push(f) : n.push(f), n;
-    }, [])), h ? r ? h?.sort(this._sortFields.bind(this, r)) : h : [];
+    }, [])), r ? h ? r?.sort(this._sortFields.bind(this, h)) : r : [];
   }
   updateRelatedAttachmentColumns() {
     let e = this._getLayerOption(this._layer?.id || ""), t = this.hasAttachmentsEnabled(this._layer), i = !0;
-    const s = "attachments", a = (e?.extraFields || []).reduce((r, h) => (h.startsWith("related:") ? r.related.push(h.split("related:")[1]) : r.extra.push(h), r), { related: [], extra: [] }), l = a.extra.some((r) => r.toLowerCase() === s);
-    a && (t = l && t, i = a.related.length > 0, this._table?.columns.forEach((r) => {
-      r.fieldName.startsWith("EsriFeatureTableRelationshipColumn") && (r.hidden = !a.related.some((h) => h.toLowerCase() === (r.effectiveLabel || "").toLowerCase())), r.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") && (r.hidden = !a.extra.some((h) => h.toLowerCase() === r.effectiveLabel.toLowerCase()));
+    const s = "attachments", a = (e?.extraFields || []).reduce((h, r) => (r.startsWith("related:") ? h.related.push(r.split("related:")[1]) : h.extra.push(r), h), { related: [], extra: [] }), l = a.extra.some((h) => h.toLowerCase() === s);
+    a && (t = l && t, i = a.related.length > 0, this._table?.columns.forEach((h) => {
+      h.fieldName.startsWith("EsriFeatureTableRelationshipColumn") && (h.hidden = !a.related.some((r) => r.toLowerCase() === (h.effectiveLabel || "").toLowerCase())), h.fieldName.startsWith("EsriFeatureTableAttachmentsColumn") && (h.hidden = !a.extra.some((r) => r.toLowerCase() === h.effectiveLabel.toLowerCase()));
     })), this._table.relatedRecordsEnabled = i, this._table.attachmentsEnabled = t;
   }
   getFieldLabel(e, t) {
@@ -965,7 +1005,7 @@ class M extends A {
     }));
   }
 }
-E("layer-table", M);
+v("layer-table", M);
 export {
   M as LayerTable
 };

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

@@ -28,7 +28,7 @@ class W extends $ {
   }
   willUpdate(e) {
     if (e.has("appLayout") && this.appLayoutWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler(), e.has("pasteEnabled") && this.hasUpdated) {
-      const i = this._toolInfos.find((a) => a.icon === "paste-with-attribute");
+      const i = this._toolInfos.find((s) => s.icon === "paste-with-attribute");
       i && (i.disabled = !this.pasteEnabled);
     }
   }
@@ -73,8 +73,8 @@ class W extends $ {
     }));
   }
   render() {
-    const e = this.hide ? "visibility-hidden-1" : "", i = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", a = "height-full", t = this.isMapLayout ? "" : "display-none", s = this._isValidWebMap ? "" : "hidden", h = this.isMobile ? "" : "hidden", o = this.enableMapPicker && this.mapInfos.length > 1, n = this.enableMapLayerPicker && this._layerIds.length > 1;
-    return this._handleMapVisibility(), this._validateActiveActions(), l`<calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker()}${this._getHeaderActions()}<div slot=header-actions-end>${this.enableShare && this.isMapLayout ? this._getShare("share") : void 0}</div><calcite-progress class=${f(t)} value=0></calcite-progress><div class=${`${e} ${a}`}><div class="height-full" ${d(this._mapDiv)}><arcgis-map id=${this.mapComponentId ?? c} class="height-full" ${d(this._mapComponent)}></arcgis-map></div></div>${l`<map-tools style=${`visibility: ${s}`} .basemapConfig=${this.basemapConfig} class=${`box-shadow ${i} ${s}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableLayerList=${this.enableLayerList} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .enableSelectionTool=${this.enableSelectionTool} .isMobile=${this.isMobile} .parentComponentHeight=${this._mapDivHeight} .parentComponentWidth=${this._mapDivWidth} .zoomToolsSize=${this.zoomToolsSize} layout=horizontal .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .selectedFeaturesIds=${this.selectedFeaturesIds} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.mapToolsOrder} .visibilityIcon=${this.visibilityIcon} ${d(this._mapTools)}></map-tools><map-tools style=${`visibility: ${h}`} class=${`box-shadow ${i} ${h}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${n} .enableMapPicker=${o} .isMobile=${this.isMobile} .zoomToolsSize=${this.zoomToolsSize} layout=vertical .mapInfos=${this.mapInfos} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .parentComponentHeight=${this._mapDivHeight} .position=${this.mobileMapWidgetsPosition} .selectedLayer=${this.selectedLayer} .selectedWebMapId=${this._selectedWebMapId} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} .stackTools=${this.stackTools} .toolOrder=${this.mobileToolsOrder} ${d(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
+    const e = this.hide ? "visibility-hidden-1" : "", i = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", s = "height-full", t = this.isMapLayout ? "" : "display-none", a = this._isValidWebMap ? "" : "hidden", h = this.isMobile ? "" : "hidden", o = this.enableMapPicker && this.mapInfos.length > 1, n = this.enableMapLayerPicker && this._layerIds.length > 1;
+    return this._handleMapVisibility(), this._validateActiveActions(), l`<calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker()}${this._getHeaderActions()}<div slot=header-actions-end>${this.enableShare && this.isMapLayout ? this._getShare("share") : void 0}</div><calcite-progress class=${f(t)} value=0></calcite-progress><div class=${`${e} ${s}`}><div class="height-full" ${d(this._mapDiv)}><arcgis-map id=${this.mapComponentId ?? c} class="height-full" ${d(this._mapComponent)}></arcgis-map></div></div>${l`<map-tools style=${`visibility: ${a}`} .basemapConfig=${this.basemapConfig} class=${`box-shadow ${i} ${a}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableLayerList=${this.enableLayerList} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .enableSelectionTool=${this.enableSelectionTool} .isMobile=${this.isMobile} .parentComponentHeight=${this._mapDivHeight} .parentComponentWidth=${this._mapDivWidth} .zoomToolsSize=${this.zoomToolsSize} layout=horizontal .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .selectedFeaturesIds=${this.selectedFeaturesIds} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.mapToolsOrder} .visibilityIcon=${this.visibilityIcon} ${d(this._mapTools)}></map-tools><map-tools style=${`visibility: ${h}`} class=${`box-shadow ${i} ${h}`} .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${n} .enableMapPicker=${o} .isMobile=${this.isMobile} .zoomToolsSize=${this.zoomToolsSize} layout=vertical .mapInfos=${this.mapInfos} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .parentComponentHeight=${this._mapDivHeight} .position=${this.mobileMapWidgetsPosition} .selectedLayer=${this.selectedLayer} .selectedWebMapId=${this._selectedWebMapId} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} .stackTools=${this.stackTools} .toolOrder=${this.mobileToolsOrder} ${d(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
   }
   updated() {
     this._mapDivHeight = this._mapDiv.value?.offsetHeight ?? 0, document.onclick = (e) => this._handleDocumentClick(e);
@@ -83,20 +83,23 @@ class W extends $ {
     this._mapDiv.value && this._mapSizeObserver?.observe(this._mapDiv.value), this._updateShareUrl();
   }
   async _loadMap(e) {
-    const i = !this._defaultWebmapHonored && this.defaultWebmapId, a = this.mapInfos?.filter((o) => o.id === this.defaultWebmapId), t = JSON.stringify(e) !== JSON.stringify(this._webMapInfo);
-    this._webMapInfo = i && a ? a[0] : !e?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : e;
-    const s = this._webMapInfo.id, h = i && e?.id === this.defaultWebmapId;
-    if (this._loadedId !== s && !i || h) {
+    const i = !this._defaultWebmapHonored && this.defaultWebmapId, s = this.mapInfos?.filter((o) => o.id === this.defaultWebmapId), t = JSON.stringify(e) !== JSON.stringify(this._webMapInfo);
+    this._webMapInfo = i && s ? s[0] : !e?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : e;
+    const a = this._webMapInfo.id, h = i && e?.id === this.defaultWebmapId;
+    if (this._loadedId !== a && !i || h) {
+      if (this._loadingMapId === a)
+        return;
+      this._loadingMapId = a;
       const o = new T({
-        portalItem: { id: s }
+        portalItem: { id: a }
       });
       try {
         if (o && await o.load(), this.appProxies && o && await y(o, S, this.appProxies), this._mapComponent.value || await this.updateComplete, !this._mapComponent.value)
           throw new Error("Map component is not available.");
-        this._mapComponent.value.map = o, this._mapComponent.value.resizeAlign = "center", await this._mapComponent.value.viewOnReady(), this.mapView = this._mapComponent.value.view, this._loadedId = s, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(async () => {
+        this._mapComponent.value.map = o, this._mapComponent.value.resizeAlign = "center", await this._mapComponent.value.viewOnReady(), this.mapView = this._mapComponent.value.view, this._loadedId = a, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(async () => {
           if (this.mapView) {
             this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth, this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._mobMapTools.value && this.mapView.ui.add(this._mobMapTools.value, { position: this.mobileMapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = h ? !0 : this._defaultWebmapHonored, this._isValidWebMap = !0, this.mapChanged.emit({
-              id: s,
+              id: a,
               mapView: this.mapView,
               isValid: !0
             }), this.isMobile || document.getElementsByClassName("esri-zoom")[0]?.classList.remove("display-none");
@@ -106,24 +109,26 @@ class W extends $ {
         });
       } catch (n) {
         if (n.name !== "view:goto-interrupted") {
-          console.error(n), this._loadedId = s, this._isValidWebMap = !1, this.mapChanged.emit({
-            id: s,
+          console.error(n), this._loadedId = a, this._isValidWebMap = !1, this.mapChanged.emit({
+            id: a,
             mapView: void 0,
             isValid: !1
           }), document.getElementsByClassName("esri-zoom")[0]?.classList.add("display-none");
           return;
         }
+      } finally {
+        this._loadingMapId = void 0;
       }
-    } else i ? (this._defaultWebmapHonored = !0, this._mapPicker.value && this._mapPicker.value.setMapByID(s)) : t && this.mapView && (this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapChanged.emit({
-      id: s,
+    } else i ? (this._defaultWebmapHonored = !0, this._mapPicker.value && this._mapPicker.value.setMapByID(a)) : t && this.mapView && (this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapChanged.emit({
+      id: a,
       mapView: this.mapView,
       isValid: !0
     }));
     this._updateShareUrl();
   }
   _getMapLayerPicker() {
-    const e = this.isMapLayout ? "header-actions-start" : "", i = this.mapInfos?.length > 1 ? "" : "display-none", a = this.isMapLayout ? "height-0" : "width-full", t = "display-flex", s = this.isMapLayout ? "" : "display-none";
-    return l`${!this.isMobile && l`<div slot=${e ?? c}><map-picker class=${`${i} ${a}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${d(this._mapPicker)}></map-picker></div>` || ""}<div slot=header-actions-start class=${`mapView-header display-flex ${s}`} id=solutions-map-layer-picker-container><div class=${`border-end ${t}`}>${this.mapView && l`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-single-layer-as-label show-tables show-tables-disabled type=dropdown ${d(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
+    const e = this.isMapLayout ? "header-actions-start" : "", i = this.mapInfos?.length > 1 ? "" : "display-none", s = this.isMapLayout ? "height-0" : "width-full", t = "display-flex", a = this.isMapLayout ? "" : "display-none";
+    return l`${!this.isMobile && l`<div slot=${e ?? c}><map-picker class=${`${i} ${s}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${d(this._mapPicker)}></map-picker></div>` || ""}<div slot=header-actions-start class=${`mapView-header display-flex ${a}`} id=solutions-map-layer-picker-container><div class=${`border-end ${t}`}>${this.mapView && l`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this._configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} display=inline-flex .enabledLayerIds=${this._enabledLayerIds} height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-single-layer-as-label show-tables show-tables-disabled type=dropdown ${d(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
   }
   _getHeaderActions() {
     return l`<div slot=header-content><calcite-action-bar class=${f("display-flex")} expand-disabled expanded id=${this._getId("bar") ?? c} layout=horizontal><calcite-action-group>${this.isMapLayout ? this._getTools() : void 0}</calcite-action-group></calcite-action-bar></div>`;
@@ -141,7 +146,7 @@ class W extends $ {
     this._loadedId ? i.searchParams.set("webmap", this._loadedId) : i.searchParams.delete("webmap"), this.selectedLayer?.id ? i.searchParams.set("layer", this.selectedLayer.id) : i.searchParams.delete("layer"), this.selectedFeaturesIds?.length > 0 ? i.searchParams.set("oid", this.selectedFeaturesIds.join(",")) : i.searchParams.delete("oid"), this.appLayout && i.searchParams.set("applayout", this.appLayout), this._shareNode && (this._shareNode.autoUpdateShareUrl = !1, this._shareNode.shareUrl = i.href);
   }
   _initToolInfos() {
-    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > m, a = this.featureSelectionMode === "multiple" && this.selectedLayer?.capabilities?.operations.supportsUpdate, t = [];
+    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > m, s = this.featureSelectionMode === "multiple" && this.selectedLayer?.capabilities?.operations.supportsUpdate, t = [];
     t.push({
       active: !1,
       icon: "filter",
@@ -162,7 +167,7 @@ class W extends $ {
       },
       disabled: !e,
       toolTip: this._translations.zoom
-    }), a && t.push({
+    }), s && t.push({
       active: !1,
       icon: "pencil",
       indicator: !1,
@@ -217,9 +222,9 @@ class W extends $ {
     }
   }
   _validateEnabledActions() {
-    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > m, a = ["zoom-to-object", "pencil", "erase", "copy"];
+    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > m, s = ["zoom-to-object", "pencil", "erase", "copy"];
     this._toolInfos?.forEach((t) => {
-      t && a.indexOf(t.icon) > -1 && (t.disabled = t.icon === "pencil" ? i : !e, t.toolTip = t.icon === "pencil" ? this.selectedFeaturesIds.length > m ? this._translations.featureEditLimitNotice : this._translations.editMultiple : t.toolTip);
+      t && s.indexOf(t.icon) > -1 && (t.disabled = t.icon === "pencil" ? i : !e, t.toolTip = t.icon === "pencil" ? this.selectedFeaturesIds.length > m ? this._translations.featureEditLimitNotice : this._translations.editMultiple : t.toolTip);
     });
   }
   _handleDocumentClick(e) {
@@ -237,12 +242,12 @@ class W extends $ {
   _getTools() {
     return this._toolInfos?.reduce((e, i) => (i && e.push(this._getAction(i.active, i.icon, i.indicator, i.label, i.func, i.disabled, i.loading, i.toolTip)), e), []);
   }
-  _getToolTip(e, i, a) {
-    return l`<calcite-tooltip .placement=${e} .referenceElement=${i}><span>${a}</span></calcite-tooltip>`;
+  _getToolTip(e, i, s) {
+    return l`<calcite-tooltip .placement=${e} .referenceElement=${i}><span>${s}</span></calcite-tooltip>`;
   }
-  _getAction(e, i, a, t, s, h, o, n) {
+  _getAction(e, i, s, t, a, h, o, n) {
     const u = this.selectedLayer === void 0 ? !0 : h;
-    return l`<calcite-action .active=${e} .disabled=${u} .icon=${i} .id=${`map-${i}`} .indicator=${a} .label=${t} .loading=${o} @click=${s} .text=${t} text-enabled></calcite-action>${this._getToolTip("auto", `map-${i}`, n)}`;
+    return l`<calcite-action .active=${e} .disabled=${u} .icon=${i} .id=${`map-${i}`} .indicator=${s} .label=${t} .loading=${o} @click=${a} .text=${t} text-enabled></calcite-action>${this._getToolTip("auto", `map-${i}`, n)}`;
   }
   _getId(e) {
     return `solutions-action-${e}`;