@esri/solutions-components 5.0.2 → 5.0.4-next.1

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

@@ -1,230 +1,518 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as b } from "../../chunks/runtime.js";
-import { z as y, b as c } from "../../chunks/interfaces.js";
-import { joinAppProxies as _ } from "templates-common-library/functionality/proxy";
-import { c as g, e as v } from "../../chunks/mapViewUtils.js";
-import { u as I } from "../../chunks/useT9n.js";
-import { css as $, html as o, nothing as m } from "lit";
-import { createRef as d, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as L, createEvent as p, noShadowRoot as w, safeClassMap as f } from "@arcgis/lumina";
-import { defineCustomElements as M } from "@arcgis/instant-apps-components/loader";
-import S from "@arcgis/core/config";
-import T from "@arcgis/core/views/MapView";
-import W from "@arcgis/core/WebMap";
-const k = $`@layer{:host{display:block;--calcite-label-margin-bottom: 0;--calcite-block-padding: 0}.map-height{height:calc(100% - 53px)}.height-full{height:100%}.height-49-px{height:49px}.box-shadow{box-shadow:none!important}.visibility-hidden-1{visibility:hidden;height:1px}.hidden{visibility:hidden!important}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}.esri-ui-inner-container.esri-ui-corner-container{direction:ltr}html[dir=rtl] .absolute-right{left:0;right:unset}.panel-header-override{--calcite-panel-header-content-space: 0px;--calcite-internal-panel-action-spacing: 0px !important}@media only screen and (max-width:1024px){.esri-zoom{display:none!important}}calcite-action-bar{--calcite-internal-action-bar-gap: 0px;--calcite-internal-action-bar-padding: 0px}}`;
-class C extends L {
+import { c as customElement } from "../../chunks/runtime.js";
+import { z as getEnabledLayerIds, b as BATCH_EDIT_LIMIT } from "../../chunks/interfaces.js";
+import { joinAppProxies } from "templates-common-library/functionality/proxy";
+import { c as getFeatureLayerView, e as goToSelection } from "../../chunks/mapViewUtils.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html, nothing } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, noShadowRoot, safeClassMap } from "@arcgis/lumina";
+import { defineCustomElements } from "@arcgis/instant-apps-components/loader";
+import config from "@arcgis/core/config";
+import MapView from "@arcgis/core/views/MapView";
+import WebMap from "@arcgis/core/WebMap";
+const styles = css`@layer{
+/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * 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;
+  --calcite-label-margin-bottom: 0;
+  --calcite-block-padding: 0;
+}
+
+.map-height {
+  height: calc(100% - 53px);
+}
+
+.height-full {
+  height: 100%;
+}
+
+.height-49-px {
+  height: 49px;
+}
+
+.box-shadow {
+  box-shadow: none !important;
+}
+
+.visibility-hidden-1 {
+  visibility: hidden;
+  height: 1px;
+  /* setting to 1 as 0 would cause the editor to not load in some cases */
+}
+
+.hidden {
+  visibility: hidden !important;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.display-none {
+  display: none;
+}
+
+.display-block {
+  display: block;
+}
+
+.absolute-right {
+  position: absolute;
+  right: 0;
+  left: unset;
+}
+
+.esri-ui-inner-container.esri-ui-corner-container {
+  direction: ltr;
+}
+
+html[dir='rtl'] .absolute-right {
+  left: 0;
+  right: unset;
+}
+
+.panel-header-override {
+  --calcite-panel-header-content-space: 0px;
+  --calcite-internal-panel-action-spacing: 0px !important;
+}
+
+@media only screen and (max-width: 1024px) {
+  .esri-zoom {
+    display: none !important;
+  }
+}
+
+calcite-action-bar {
+  --calcite-internal-action-bar-gap: 0px;
+  --calcite-internal-action-bar-padding: 0px;
+}
+}`;
+class MapCard extends LitElement {
   constructor() {
-    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableLayerList = !0, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableMapLayerPicker = !1, this.enableMapPicker = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.featureSelectionMode = "multiple", this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-leading", this.mobileMapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.mapToolsOrder = [], this.mobileToolsOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this.visibilityIcon = "eyeball", this._configLayerOrderDefined = !1, this._translations = I({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._layerIds = [], this._enabledLayerIds = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = d(), this._mapPicker = d(), this._mapTools = d(), this._mobMapTools = d(), this._mapLayerPicker = d(), this._selectedWebMapId = "", this._isValidWebMap = !0, this.mapChanged = p(), this.beforeMapChanged = p(), this.toggleFilter = p(), this.clearSelection = p(), this.editMultipleFeatures = p(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "idsFound", this._idsFound), this.enableSingleExpand = !0, this.stackTools = !0, M(window);
+    super();
+    this.defaultWebmapId = "";
+    this.defaultLayerId = "";
+    this.enableHome = false;
+    this.enableLegend = false;
+    this.enableLayerList = true;
+    this.enableFloorFilter = false;
+    this.enableFullscreen = false;
+    this.enableShare = false;
+    this.enableMapLayerPicker = false;
+    this.enableMapPicker = false;
+    this.enableSingleExpand = false;
+    this.enableSearch = false;
+    this.enableBasemap = false;
+    this.featureSelectionMode = "multiple";
+    this.hide = false;
+    this.zoomToolsSize = "m";
+    this.mapInfos = [];
+    this.mapWidgetsIndex = 0;
+    this.mapWidgetsPosition = "top-leading";
+    this.mobileMapWidgetsPosition = "top-right";
+    this.mapWidgetsSize = "m";
+    this.stackTools = false;
+    this.mapToolsOrder = [];
+    this.mobileToolsOrder = [];
+    this.isMapLayout = false;
+    this.shareIncludeEmbed = false;
+    this.shareIncludeSocial = false;
+    this.selectedFeaturesIds = [];
+    this.showOnlyUpdatableLayers = false;
+    this.isMobile = false;
+    this.enableSelectionTool = false;
+    this.visibilityIcon = "eyeball";
+    this._configLayerOrderDefined = false;
+    this._translations = useT9n({ name: "map-card", blocking: true });
+    this._toolInfos = [];
+    this._filterActive = false;
+    this._layerIds = [];
+    this._enabledLayerIds = [];
+    this._defaultWebmapHonored = false;
+    this._loadedId = "";
+    this._mapDiv = createRef();
+    this._mapPicker = createRef();
+    this._mapTools = createRef();
+    this._mobMapTools = createRef();
+    this._mapLayerPicker = createRef();
+    this._selectedWebMapId = "";
+    this._isValidWebMap = true;
+    this.mapChanged = createEvent();
+    this.beforeMapChanged = createEvent();
+    this.toggleFilter = createEvent();
+    this.clearSelection = createEvent();
+    this.editMultipleFeatures = createEvent();
+    this.listenOn(window, "mapInfoChange", this.mapInfoChange);
+    this.listenOn(window, "noLayersFound", this.noLayersFound);
+    this.listenOn(window, "layerSelectionChange", this.layerSelectionChange);
+    this.listenOn(window, "idsFound", this._idsFound);
+    this.enableSingleExpand = true;
+    this.stackTools = true;
+    defineCustomElements(window);
   }
   static {
-    this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableLayerList: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableMapLayerPicker: 5, enableMapPicker: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, featureSelectionMode: 1, basemapConfig: 0, hide: 5, zoomToolsSize: 1, mapInfos: 0, mapWidgetsIndex: 9, mapWidgetsPosition: 1, mobileMapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: 0, stackTools: 5, theme: 1, mapToolsOrder: 0, mobileToolsOrder: 0, isMapLayout: 5, shareIncludeEmbed: 5, shareIncludeSocial: 5, selectedFeaturesIds: 0, selectedLayer: 0, zoomToScale: 9, showOnlyUpdatableLayers: 5, isMobile: 5, mapInfo: 0, enableSelectionTool: 5, visibilityIcon: 1, _configLayerOrderDefined: 16, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _toolInfos: 16, _filterActive: 16, _mapDivHeight: 16, _mapDivWidth: 16, _layerIds: 16 };
+    this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: [5, {}, { type: Boolean }], enableLegend: [5, {}, { type: Boolean }], enableLayerList: [5, {}, { type: Boolean }], enableFloorFilter: [5, {}, { type: Boolean }], enableFullscreen: [5, {}, { type: Boolean }], enableShare: [5, {}, { type: Boolean }], enableMapLayerPicker: [5, {}, { type: Boolean }], enableMapPicker: [5, {}, { type: Boolean }], enableSingleExpand: [5, {}, { type: Boolean }], enableSearch: [5, {}, { type: Boolean }], enableBasemap: [5, {}, { type: Boolean }], featureSelectionMode: 1, basemapConfig: [0, {}, { attribute: false }], hide: [5, {}, { type: Boolean }], zoomToolsSize: 1, mapInfos: [0, {}, { attribute: false }], mapWidgetsIndex: [9, {}, { type: Number }], mapWidgetsPosition: 1, mobileMapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: [0, {}, { attribute: false }], stackTools: [5, {}, { type: Boolean }], theme: 1, mapToolsOrder: [0, {}, { attribute: false }], mobileToolsOrder: [0, {}, { attribute: false }], isMapLayout: [5, {}, { type: Boolean }], shareIncludeEmbed: [5, {}, { type: Boolean }], shareIncludeSocial: [5, {}, { type: Boolean }], selectedFeaturesIds: [0, {}, { attribute: false }], selectedLayer: [0, {}, { attribute: false }], zoomToScale: [9, {}, { type: Number }], showOnlyUpdatableLayers: [5, {}, { type: Boolean }], isMobile: [5, {}, { type: Boolean }], mapInfo: [0, {}, { attribute: false }], enableSelectionTool: [5, {}, { type: Boolean }], visibilityIcon: 1, _configLayerOrderDefined: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _searchConfiguration: [16, {}, { state: true }], _webMapInfo: [16, {}, { state: true }], _toolInfos: [16, {}, { state: true }], _filterActive: [16, {}, { state: true }], _mapDivHeight: [16, {}, { state: true }], _mapDivWidth: [16, {}, { state: true }], _layerIds: [16, {}, { state: true }] };
   }
   static {
-    this.styles = k;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("appLayout") && this.appLayoutWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("appLayout")) {
+      this.appLayoutWatchHandler();
+    }
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
+    if (changes.has("mapInfo")) {
+      void this.mapInfoWatchHandler();
+    }
+    if (changes.has("selectedFeaturesIds")) {
+      void this.selectedFeaturesIdsWatchHandler();
+    }
   }
   appLayoutWatchHandler() {
     this._updateShareUrl();
   }
   async mapInfoWatchHandler() {
-    this._configLayerOrderDefined = "configLayerOrder" in (this.mapInfo?.layerOptions || {}), this._enabledLayerIds = y(this.mapInfo?.layerOptions?.layers || [], this.mapInfo?.layerOptions?.configLayerOrder);
+    this._configLayerOrderDefined = "configLayerOrder" in (this.mapInfo?.layerOptions || {});
+    this._enabledLayerIds = getEnabledLayerIds(this.mapInfo?.layerOptions?.layers || [], this.mapInfo?.layerOptions?.configLayerOrder);
   }
   async mapViewWatchHandler() {
-    this.mapView && this._updateShareUrl();
+    if (this.mapView) {
+      this._updateShareUrl();
+    }
   }
   async selectedFeaturesIdsWatchHandler() {
-    this._updateShareUrl(), this._validateEnabledActions();
+    this._updateShareUrl();
+    this._validateEnabledActions();
   }
   async resetFilter() {
-    this._filterActive = !1, this._updateShareUrl();
+    this._filterActive = false;
+    this._updateShareUrl();
   }
-  async updateFilterState(e) {
-    this._filterActive = e, this._updateShareUrl();
+  async updateFilterState(active) {
+    this._filterActive = active;
+    this._updateShareUrl();
   }
   async updateLayer() {
-    this._mapLayerPicker.value && this._mapLayerPicker.value.updateLayer();
+    this._mapLayerPicker.value && void this._mapLayerPicker.value.updateLayer();
   }
-  async mapInfoChange(e) {
-    this._selectedWebMapId = e.detail.id, await this._loadMap(e.detail);
+  async mapInfoChange(_evt) {
+    this._selectedWebMapId = _evt.detail.id;
+    await this._loadMap(_evt.detail);
   }
   noLayersFound() {
-    this.selectedLayer = void 0, this.selectedFeaturesIds = [];
+    this.selectedLayer = void 0;
+    this.selectedFeaturesIds = [];
   }
   layerSelectionChange() {
     setTimeout(() => {
       this._initToolInfos();
     }, 50);
   }
-  _idsFound(e) {
-    this._layerIds = e.detail;
+  _idsFound(_evt) {
+    this._layerIds = _evt.detail;
   }
   async load() {
-    this._initToolInfos(), this._mapSizeObserver || (this._mapSizeObserver = new ResizeObserver(() => {
-      this._mapDivWidth && this._mapDiv.value && (this._mapDivWidth = this._mapDiv.value.offsetWidth);
-    }));
+    this._initToolInfos();
+    if (!this._mapSizeObserver) {
+      this._mapSizeObserver = new ResizeObserver(() => {
+        if (this._mapDivWidth && this._mapDiv.value) {
+          this._mapDivWidth = this._mapDiv.value.offsetWidth;
+        }
+      });
+    }
   }
   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", n = this.isMobile ? "" : "hidden", l = this.enableMapPicker && this.mapInfos.length > 1, h = this.enableMapLayerPicker && this._layerIds.length > 1;
-    return this._handleMapVisibility(), this._validateActiveActions(), o`<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" ${r(this._mapDiv)}></div></div>${o`<map-tools .basemapConfig=${this.basemapConfig} class=${`box-shadow ${i} ${s}`} .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} ${r(this._mapTools)}></map-tools><map-tools class=${`box-shadow ${i} ${n}`} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${h} .enableMapPicker=${l} .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} ${r(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
+    const mapClass = this.hide ? "visibility-hidden-1" : "";
+    const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
+    const mapHeightClass = "height-full";
+    const progressClass = this.isMapLayout ? "" : "display-none";
+    const defaultToolsVisibility = !this._isValidWebMap ? "hidden" : "";
+    const mobileToolsVisibility = !this.isMobile ? "hidden" : "";
+    const enableMapPicker = this.enableMapPicker && this.mapInfos.length > 1;
+    const enableMapLayerPicker = this.enableMapLayerPicker && this._layerIds.length > 1;
+    this._handleMapVisibility();
+    this._validateActiveActions();
+    return html`<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=${safeClassMap(progressClass)} value=0></calcite-progress><div class=${`${mapClass} ${mapHeightClass}`}><div class="height-full" ${ref(this._mapDiv)}></div></div>${html`<map-tools .basemapConfig=${this.basemapConfig} class=${`box-shadow ${themeClass} ${defaultToolsVisibility}`} .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} ${ref(this._mapTools)}></map-tools><map-tools class=${`box-shadow ${themeClass} ${mobileToolsVisibility}`} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this._enabledLayerIds} .enableMapLayerPicker=${enableMapLayerPicker} .enableMapPicker=${enableMapPicker} .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} ${ref(this._mobMapTools)}></map-tools>`}</calcite-panel>`;
   }
   updated() {
-    this._mapDivHeight = this._mapDiv.value?.offsetHeight ?? 0, document.onclick = (e) => this._handleDocumentClick(e);
+    this._mapDivHeight = this._mapDiv.value?.offsetHeight ?? 0;
+    document.onclick = (e) => this._handleDocumentClick(e);
   }
   loaded() {
-    this._mapDiv.value && this._mapSizeObserver?.observe(this._mapDiv.value), this._updateShareUrl();
-  }
-  async _loadMap(e) {
-    const i = !this._defaultWebmapHonored && this.defaultWebmapId, a = this.mapInfos?.filter((l) => l.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, n = i && e?.id === this.defaultWebmapId;
-    if (this._loadedId !== s && !i || n) {
-      const l = new W({
-        portalItem: { id: s }
+    if (this._mapDiv.value) {
+      this._mapSizeObserver?.observe(this._mapDiv.value);
+    }
+    this._updateShareUrl();
+  }
+  async _loadMap(webMapInfo) {
+    const loadDefaultMap = !this._defaultWebmapHonored && this.defaultWebmapId;
+    const defaultMap = this.mapInfos?.filter((i) => i.id === this.defaultWebmapId);
+    const mapConfigChanged = JSON.stringify(webMapInfo) !== JSON.stringify(this._webMapInfo);
+    this._webMapInfo = loadDefaultMap && defaultMap ? defaultMap[0] : !webMapInfo?.id && this.mapInfos.length > 0 ? this.mapInfos[0] : webMapInfo;
+    const id = this._webMapInfo.id;
+    const isDefaultMap = loadDefaultMap && webMapInfo?.id === this.defaultWebmapId;
+    if (this._loadedId !== id && !loadDefaultMap || isDefaultMap) {
+      const webMap = new WebMap({
+        portalItem: { id }
       });
       try {
-        l && await l.load(), this.appProxies && l && await _(l, S, this.appProxies), this.mapView = new T({
+        if (webMap) {
+          await webMap.load();
+        }
+        if (this.appProxies && webMap) {
+          await joinAppProxies(webMap, config, this.appProxies);
+        }
+        this.mapView = new MapView({
           container: this._mapDiv.value,
-          map: l,
+          map: webMap,
           resizeAlign: "center"
-        }), this._loadedId = s, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(() => {
-          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 = n ? !0 : this._defaultWebmapHonored, this._isValidWebMap = !0, this.mapChanged.emit({
-            id: s,
-            mapView: this.mapView,
-            isValid: !0
-          }), this.isMobile || document.getElementsByClassName("esri-zoom")[0]?.classList.remove("display-none"));
         });
-      } catch (h) {
-        console.error(h), this._loadedId = s, this._isValidWebMap = !1, this.mapChanged.emit({
-          id: s,
+        this._loadedId = id;
+        this._searchConfiguration = this._webMapInfo.searchConfiguration;
+        this.beforeMapChanged.emit();
+        this.mapView && await this.mapView.when(() => {
+          if (this.mapView) {
+            this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth;
+            if (this._mapTools.value) {
+              this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex });
+            }
+            if (this._mobMapTools.value) {
+              this.mapView.ui.add(this._mobMapTools.value, { position: this.mobileMapWidgetsPosition, index: this.mapWidgetsIndex });
+            }
+            this._defaultWebmapHonored = isDefaultMap ? true : this._defaultWebmapHonored;
+            this._isValidWebMap = true;
+            this.mapChanged.emit({
+              id,
+              mapView: this.mapView,
+              isValid: true
+            });
+            if (!this.isMobile) {
+              document.getElementsByClassName("esri-zoom")[0]?.classList.remove("display-none");
+            }
+          }
+        });
+      } catch (err) {
+        console.error(err);
+        this._loadedId = id;
+        this._isValidWebMap = false;
+        this.mapChanged.emit({
+          id,
           mapView: void 0,
-          isValid: !1
-        }), document.getElementsByClassName("esri-zoom")[0]?.classList.add("display-none");
+          isValid: false
+        });
+        document.getElementsByClassName("esri-zoom")[0]?.classList.add("display-none");
         return;
       }
-    } 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,
-      mapView: this.mapView,
-      isValid: !0
-    }));
+    } else if (loadDefaultMap) {
+      this._defaultWebmapHonored = true;
+      if (this._mapPicker.value) {
+        void this._mapPicker.value.setMapByID(id);
+      }
+    } else if (mapConfigChanged && this.mapView) {
+      this._searchConfiguration = this._webMapInfo.searchConfiguration;
+      this.beforeMapChanged.emit();
+      this.mapChanged.emit({
+        id,
+        mapView: this.mapView,
+        isValid: true
+      });
+    }
     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 o`${!this.isMobile && o`<div slot=${e ?? m}><map-picker class=${`${i} ${a}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${r(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 && o`<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 ${r(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
+    const slot = this.isMapLayout ? "header-actions-start" : "";
+    const mapPickerClass = this.mapInfos?.length > 1 ? "" : "display-none";
+    const width = this.isMapLayout ? "height-0" : "width-full";
+    const containerClass = "display-flex";
+    const headerElements = this.isMapLayout ? "" : "display-none";
+    return html`${!this.isMobile && html`<div slot=${slot ?? nothing}><map-picker class=${`${mapPickerClass} ${width}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${ref(this._mapPicker)}></map-picker></div>` || ""}<div slot=header-actions-start class=${`mapView-header display-flex ${headerElements}`} id=solutions-map-layer-picker-container><div class=${`border-end ${containerClass}`}>${this.mapView && html`<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 ${ref(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>`;
   }
   _getHeaderActions() {
-    return o`<div slot=header-content><calcite-action-bar class=${f("display-flex")} expand-disabled expanded id=${this._getId("bar") ?? m} layout=horizontal><calcite-action-group>${this.isMapLayout ? this._getActions() : void 0}</calcite-action-group></calcite-action-bar></div>`;
-  }
-  _getShare(e) {
-    return o`<div class="share-action" id=${this._getId(e) ?? m}>${this.mapView && o`<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} ${r((i) => {
-      i && (this._shareNode = i, this._updateShareUrl());
-    })}></instant-apps-social-share>` || ""}${this._getToolTip("bottom", `map-${e}`, this._translations?.share)}</div>`;
+    const containerClass = "display-flex";
+    return html`<div slot=header-content><calcite-action-bar class=${safeClassMap(containerClass)} expand-disabled expanded id=${this._getId("bar") ?? nothing} layout=horizontal><calcite-action-group>${this.isMapLayout ? this._getActions() : void 0}</calcite-action-group></calcite-action-bar></div>`;
+  }
+  _getShare(icon) {
+    return html`<div class="share-action" id=${this._getId(icon) ?? nothing}>${this.mapView && html`<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} ${ref((el) => {
+      if (el) {
+        this._shareNode = el;
+        this._updateShareUrl();
+      }
+    })}></instant-apps-social-share>` || ""}${this._getToolTip("bottom", `map-${icon}`, this._translations?.share)}</div>`;
   }
   _updateShareUrl() {
-    const e = this._shareNode?.shareUrl;
-    if (!e)
+    const url = this._shareNode?.shareUrl;
+    if (!url) {
       return;
-    const i = new URL(e);
-    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);
+    }
+    const urlObj = new URL(url);
+    if (this._loadedId) {
+      urlObj.searchParams.set("webmap", this._loadedId);
+    } else {
+      urlObj.searchParams.delete("webmap");
+    }
+    if (this.selectedLayer?.id) {
+      urlObj.searchParams.set("layer", this.selectedLayer.id);
+    } else {
+      urlObj.searchParams.delete("layer");
+    }
+    if (this.selectedFeaturesIds?.length > 0) {
+      urlObj.searchParams.set("oid", this.selectedFeaturesIds.join(","));
+    } else {
+      urlObj.searchParams.delete("oid");
+    }
+    if (this.appLayout) {
+      urlObj.searchParams.set("applayout", this.appLayout);
+    }
+    if (this._shareNode) {
+      this._shareNode.autoUpdateShareUrl = false;
+      this._shareNode.shareUrl = urlObj.href;
+    }
   }
   _initToolInfos() {
-    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > c, a = this.featureSelectionMode === "multiple" && this.selectedLayer?.capabilities?.operations.supportsUpdate, t = [];
-    t.push({
-      active: !1,
+    const featuresSelected = this.selectedFeaturesIds.length > 0;
+    const multipleEditsDisabled = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > BATCH_EDIT_LIMIT;
+    const showMultipleEdits = this.featureSelectionMode === "multiple" && this.selectedLayer?.capabilities?.operations.supportsUpdate;
+    const toolInfos = [];
+    toolInfos.push({
+      active: false,
       icon: "filter",
-      indicator: !1,
+      indicator: false,
       label: this._translations.filters,
-      func: () => {
-        this._toggleFilter();
-      },
-      disabled: !1,
+      func: () => void this._toggleFilter(),
+      disabled: false,
       toolTip: this._translations.filters
-    }), t.push({
-      active: !1,
+    });
+    toolInfos.push({
+      active: false,
       icon: "zoom-to-object",
-      indicator: !1,
+      indicator: false,
       label: this._translations.zoom,
-      func: () => {
-        this._zoom();
-      },
-      disabled: !e,
+      func: () => void this._zoom(),
+      disabled: !featuresSelected,
       toolTip: this._translations.zoom
-    }), a && t.push({
-      active: !1,
-      icon: "pencil",
-      indicator: !1,
-      label: this._translations.editMultiple,
-      func: () => this.editMultipleFeatures.emit(this.selectedFeaturesIds),
-      disabled: i,
-      toolTip: this._translations.editMultiple
-    }), t.push({
-      active: !1,
+    });
+    if (showMultipleEdits) {
+      toolInfos.push({
+        active: false,
+        icon: "pencil",
+        indicator: false,
+        label: this._translations.editMultiple,
+        func: () => this.editMultipleFeatures.emit(this.selectedFeaturesIds),
+        disabled: multipleEditsDisabled,
+        toolTip: this._translations.editMultiple
+      });
+    }
+    toolInfos.push({
+      active: false,
       icon: "refresh",
-      indicator: !1,
+      indicator: false,
       label: this._translations.refresh,
       func: () => this.selectedLayer?.refresh(),
-      disabled: !1,
+      disabled: false,
       toolTip: this._translations.refresh
-    }), t.push({
-      active: !1,
+    });
+    toolInfos.push({
+      active: false,
       icon: "erase",
-      indicator: !1,
+      indicator: false,
       label: this._translations.clearSelection,
       func: () => this.clearSelection.emit(),
-      disabled: !e,
+      disabled: !featuresSelected,
       toolTip: this._translations.clearSelection
-    }), this._toolInfos = [...t];
+    });
+    this._toolInfos = [...toolInfos];
   }
   _validateActiveActions() {
-    const e = ["filter"];
-    this._toolInfos?.forEach((i) => {
-      i && e.indexOf(i.icon) > -1 && i.icon === "filter" && (i.indicator = this._filterActive);
+    const activeDependant = ["filter"];
+    this._toolInfos?.forEach((ti) => {
+      if (ti && activeDependant.indexOf(ti.icon) > -1) {
+        if (ti.icon === "filter") {
+          ti.indicator = this._filterActive;
+        }
+      }
     });
   }
   _handleMapVisibility() {
     if (this._mapDiv.value) {
-      const e = this._mapDiv.value.getElementsByClassName("esri-view-surface")[0], i = this._mapDiv.value.getElementsByClassName("esri-attribution")[0];
-      this._isValidWebMap ? (e?.classList.remove("hidden"), i?.classList.remove("hidden")) : (e?.classList.add("hidden"), i?.classList.add("hidden"));
+      const mapSurface = this._mapDiv.value.getElementsByClassName("esri-view-surface")[0];
+      const attribution = this._mapDiv.value.getElementsByClassName("esri-attribution")[0];
+      if (!this._isValidWebMap) {
+        mapSurface?.classList.add("hidden");
+        attribution?.classList.add("hidden");
+      } else {
+        mapSurface?.classList.remove("hidden");
+        attribution?.classList.remove("hidden");
+      }
     }
   }
   _validateEnabledActions() {
-    const e = this.selectedFeaturesIds.length > 0, i = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > c, a = ["zoom-to-object", "pencil", "erase"];
-    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 > c ? this._translations.featureEditLimitNotice : this._translations.editMultiple : t.toolTip);
+    const featuresSelected = this.selectedFeaturesIds.length > 0;
+    const multipleEditsDisabled = this.selectedFeaturesIds.length < 2 || this.selectedFeaturesIds.length > BATCH_EDIT_LIMIT;
+    const selectionDependant = ["zoom-to-object", "pencil", "erase"];
+    this._toolInfos?.forEach((ti) => {
+      if (ti && selectionDependant.indexOf(ti.icon) > -1) {
+        ti.disabled = ti.icon === "pencil" ? multipleEditsDisabled : !featuresSelected;
+        ti.toolTip = ti.icon === "pencil" ? this.selectedFeaturesIds.length > BATCH_EDIT_LIMIT ? this._translations.featureEditLimitNotice : this._translations.editMultiple : ti.toolTip;
+      }
     });
   }
   _handleDocumentClick(e) {
-    e.target.tagName !== "MAP-PICKER" && this._mapPicker.value && this._mapPicker.value.close();
+    if (e.target.tagName !== "MAP-PICKER") {
+      this._mapPicker.value && void this._mapPicker.value.close();
+    }
   }
   async _zoom() {
     if (this.selectedLayer && this.mapView) {
-      const e = await g(this.mapView, this.selectedLayer.id);
-      e && await v(this.selectedFeaturesIds, e, this.mapView, !0, void 0, this.zoomToScale);
+      const selectedLayerView = await getFeatureLayerView(this.mapView, this.selectedLayer.id);
+      if (selectedLayerView) {
+        await goToSelection(this.selectedFeaturesIds, selectedLayerView, this.mapView, true, void 0, this.zoomToScale);
+      }
     }
   }
   async _toggleFilter() {
     this.toggleFilter.emit();
   }
   _getActions() {
-    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), []);
+    return this._toolInfos?.reduce((prev, cur) => {
+      if (cur) {
+        prev.push(this._getAction(cur.active, cur.icon, cur.indicator, cur.label, cur.func, cur.disabled, cur.loading, cur.toolTip));
+      }
+      return prev;
+    }, []);
   }
-  _getToolTip(e, i, a) {
-    return o`<calcite-tooltip .placement=${e} .referenceElement=${i}><span>${a}</span></calcite-tooltip>`;
+  _getToolTip(placement, referenceElement, text) {
+    return html`<calcite-tooltip .placement=${placement} .referenceElement=${referenceElement}><span>${text}</span></calcite-tooltip>`;
   }
-  _getAction(e, i, a, t, s, n, l, h) {
-    const u = this.selectedLayer === void 0 ? !0 : n;
-    return o`<calcite-action .active=${e} appearance=solid .disabled=${u} .icon=${i} .id=${`map-${i}`} .indicator=${a} .label=${t} .loading=${l} @click=${s} .text=${t} text-enabled></calcite-action>${this._getToolTip("auto", `map-${i}`, h)}`;
+  _getAction(active, icon, indicator, label, func, disabled, loading, toolTip) {
+    const _disabled = this.selectedLayer === void 0 ? true : disabled;
+    return html`<calcite-action .active=${active} appearance=solid .disabled=${_disabled} .icon=${icon} .id=${`map-${icon}`} .indicator=${indicator} .label=${label} .loading=${loading} @click=${func} .text=${label} text-enabled></calcite-action>${this._getToolTip("auto", `map-${icon}`, toolTip)}`;
   }
-  _getId(e) {
-    return `solutions-action-${e}`;
+  _getId(id) {
+    return `solutions-action-${id}`;
   }
 }
-b("map-card", C);
+customElement("map-card", MapCard);
 export {
-  C as MapCard
+  MapCard
 };