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

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

@@ -1,19 +1,19 @@
-import { c as b } from "../../chunks/runtime.js";
-import { l as y } from "../../chunks/loadModules.js";
-import { b as g, d as m, g as w } from "../../chunks/mapViewUtils.js";
-import { c as I } from "../../chunks/queryUtils.js";
-import { d as v } from "../../chunks/downloadUtils.js";
-import { defineCustomElements as x } from "@arcgis/instant-apps-components/loader";
-import { u as T } from "../../chunks/useT9n.js";
-import { nothing as o, html as d } from "lit";
+import { c as w } from "../../chunks/runtime.js";
+import { l as I } from "../../chunks/loadModules.js";
+import { b, d as v, g as T } from "../../chunks/mapViewUtils.js";
+import { c as x } from "../../chunks/queryUtils.js";
+import { d as E } from "../../chunks/downloadUtils.js";
+import { defineCustomElements as F } from "@arcgis/instant-apps-components/loader";
+import { u as S } from "../../chunks/useT9n.js";
+import { html as d, nothing as o } from "lit";
 import { createRef as u, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as E, createEvent as f, noShadowRoot as S, safeClassMap as p } from "@arcgis/lumina";
-import { css as F } from "@lit/reactive-element/css-tag.js";
+import { LitElement as O, createEvent as f, noShadowRoot as C, safeClassMap as g } from "@arcgis/lumina";
+import { css as A } from "@lit/reactive-element/css-tag.js";
 import "@arcgis/map-config-components";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250513.1 */
-const O = F`@layer{/** @license
+v1.0.0-next.20250521 */
+const H = A`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -28,18 +28,18 @@ const O = F`@layer{/** @license
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */:host{display:block}.height-full{height:100%}.height-full-adjusted{height:calc(100% - 20px)}.width-full{width:100%}.display-flex{display:flex}.display-none{display:none}.table-border{border:1px solid var(--calcite-color-border-2)}.border-end{border-inline-end:1px solid var(--calcite-color-border-2)}.border-bottom{border-bottom:1px solid var(--calcite-color-border-2)}.padding-5{padding:5px}.padding-end-1{padding-inline-end:1rem}.height-51-px{height:51px}.height-50-px{height:50px}.bottom-left{position:absolute;left:0;bottom:0;padding-left:5px}html[dir=rtl] .bottom-left{position:absolute;right:0;bottom:0;padding-right:5px}.height-19{height:19px}.background{background-color:var(--calcite-color-background)}.text-color{color:var(--calcite-color-text-1)}.align-center{align-items:center}.danger-color{color:var(--calcite-color-status-danger)}.esri-feature-table vaadin-grid{border:none!important}vaadin-grid-cell-content{font-size:14px!important;color:var(--calcite-color-text-3)!important}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.actions-end{height:50px!important;display:inline-flex}.border-top{border-top:1px solid var(--calcite-color-border-2)}.modal{--calcite-modal-content-padding: 0}.esri-feature-table__table-container{height:100%}.search-container{background-color:var(--calcite-color-foreground-1)!important}.search{--calcite-color-border-input: var(--calcite-color-border-3);width:60%;padding:10px}.delete-red{--calcite-icon-color: var(--calcite-color-status-danger);--calcite-color-text-1: var(--calcite-color-status-danger);--calcite-color-text-3: var(--calcite-color-status-danger)}.label-override{--calcite-label-margin-bottom: 0px}.padding-start-1-4{padding-inline-start:.5rem}.panel-header-override{--calcite-panel-header-content-space: 0px}.danger-label-color{--calcite-label-text-color: var(--calcite-color-status-danger)}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}.width-51{width:51px}.height-51{height:51px}}`;
-class C extends E {
+class $ extends O {
   constructor() {
-    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.featureSelectionMode = "multiple", this.selectedRelatedIds = [], this.honorMapFieldSettings = !1, this.isMobile = !1, this.mapHidden = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, this.createFilterModal = !0, this._allIds = [], this._csvExporting = !1, this._fetchingData = !1, this._filterActive = !1, this._filterOpen = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = T({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._defaultFilterHonored = !1, this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._definitionExpression = "", this._deleteEnabled = !1, this._filterList = u(), this._floorExpression = "", this._floorField = "", this._floorFacility = "", this._floorLevel = "", this._floorSite = "", this._layerExpressions = [], this._loaded = !1, this._shareNode = u(), this._toolbar = u(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this.featureSelectionChange = f(), this.toggleFilter = f(), this.showDelete = f(), this.relatedRecordToggled = f(), this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "featuresSelected", this.featuresSelected), x(window);
+    super(), this.defaultGlobalId = [], this.defaultLayerId = "", this.defaultOid = [], this.enableAutoRefresh = !1, this.enableColumnReorder = !0, this.enableCSV = !1, this.enableInlineEdit = !1, this.enableShare = !1, this.featureSelectionMode = "multiple", this.selectedRelatedIds = [], this.honorMapFieldSettings = !1, this.isMobile = !1, this.mapHidden = !1, this.showOnlyUpdatableLayers = !1, this.selectedIds = [], this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !1, this.zoomAndScrollToSelected = !1, this.createFilterModal = !0, this._allIds = [], this._csvExporting = !1, this._fetchingData = !1, this._filterActive = !1, this._filterOpen = !1, this._selectAllActive = !1, this._showHideOpen = !1, this._showOnlySelected = !1, this._toolInfos = [], this._translations = S({ name: "layer-table", blocking: !0 }), this._fullTextSearchInfo = [], this._searchPlaceHolder = "", this._size = 0, this._queryingData = !1, this._editEnabled = !1, this._defaultFilterHonored = !1, this._defaultGlobalIdHonored = !1, this._defaultOidHonored = !1, this._definitionExpression = "", this._deleteEnabled = !1, this._filterList = u(), this._floorExpression = "", this._floorField = "", this._floorFacility = "", this._floorLevel = "", this._floorSite = "", this._layerExpressions = [], this._loaded = !1, this._shareNode = u(), this._toolbar = u(), this._searchExpression = "", this._skipEditCheck = !1, this._tempSelectedIds = [], this._outOFExtentOids = [], this._shouldUpdateTableOnExtentChange = !0, this._creatingFeature = !1, this.featureSelectionChange = f(), this.toggleFilter = f(), this.showDelete = f(), this.relatedRecordToggled = f(), this.listenOn(window, "beforeMapInfoChange", this.beforeMapInfoChange, { capture: !0 }), this.listenOn(window, "editorInitialized", this.editorInitialized), this.listenOn(window, "closeEdit", this.closeEdit), this.listenOn(window, "selectionChanged", this.selectionChanged), this.listenOn(window, "beforeLayerSelectionChange", this.beforeLayerSelectionChange), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.listenOn(window, "editsComplete", this.editsComplete), this.listenOn(window, "facilityChanged", this.facilityChanged), this.listenOn(window, "levelChanged", this.levelChanged), this.listenOn(window, "siteChanged", this.siteChanged), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "featuresSelected", this.featuresSelected), this.listenOn(window, "createWorkFlowStarted", this.createWorkFlowStarted), this.listenOn(window, "backFromCreateWorkFlow", this.backFromCreateWorkFlow), F(window);
   }
   static {
     this.properties = { appLayout: 1, defaultGlobalId: 0, defaultLayerId: 1, defaultOid: 0, enableAutoRefresh: 5, enableColumnReorder: 5, enableCSV: 5, enableInlineEdit: 5, enableShare: 5, featureSelectionMode: 1, selectedRelatedIds: 0, honorMapFieldSettings: 5, isMobile: 5, mapHidden: 5, mapInfo: 0, mapView: 0, showOnlyUpdatableLayers: 5, selectedIds: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, zoomAndScrollToSelected: 5, zoomToScale: 9, createFilterModal: 5, _allIds: 16, _csvExporting: 16, _fetchingData: 16, _filterActive: 16, _filterOpen: 16, _layer: 16, _selectAllActive: 16, _showHideOpen: 16, _showOnlySelected: 16, _toolInfos: 16, _translations: 16, _fullTextSearchInfo: 16, _searchPlaceHolder: 16, _size: 16, _queryingData: 16 };
   }
   static {
-    this.styles = O;
+    this.styles = H;
   }
   static {
-    this.shadowRootOptions = S;
+    this.shadowRootOptions = C;
   }
   willUpdate(e) {
     if (e.has("appLayout") && this.appLayoutWatchHandler(), e.has("defaultOid") && this.defaultOidWatchHandler(), e.has("defaultGlobalId") && this.defaultGlobalIdWatchHandler(), e.has("enableCSV") && this.enableCSVWatchHandler(), e.has("enableInlineEdit") && this.enableInlineEditWatchHandler(), e.has("mapHidden") && this.mapHiddenWatchHandler(), e.has("isMobile") && this.isMobileWatchHandler(), e.has("mapInfo") && this.mapInfoWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("_layer") && this._layerWatchHandler(), e.has("selectedIds") && (this.hasUpdated || JSON.stringify(e.get("selectedIds")) !== JSON.stringify(this.selectedIds)) && this.selectedIdsWatchHandler(), e.has("selectedRelatedIds") && (this.hasUpdated || JSON.stringify(e.get("selectedRelatedIds")) !== JSON.stringify(this.selectedRelatedIds)) && this.selectedRelatedIdsWatchHandler(), e.has("_translations")) {
@@ -86,7 +86,7 @@ class C extends E {
         color: "#FFFF00"
       }
     ], this._updateShareUrl(), this._mapClickHandle = this.reactiveUtils?.on(() => this.mapView, "click", (e) => {
-      this._mapClicked(e);
+      this._creatingFeature || this._mapClicked(e);
     }));
   }
   async _layerWatchHandler() {
@@ -141,7 +141,7 @@ class C extends E {
       s.scrollToIndex(a);
       const l = t.layer, r = this.mapView.allLayerViews.toArray();
       let h;
-      r.some(async (n) => n.layer.title === l?.title && n.layer.type === "feature" ? (h = n, this.mapView && await g([i], h, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
+      r.some(async (n) => n.layer.title === l?.title && n.layer.type === "feature" ? (h = n, this.mapView && await b([i], h, this.mapView, !0, void 0, this.zoomToScale), !0) : !1);
     }
   }
   async beforeLayerSelectionChange(e) {
@@ -174,7 +174,7 @@ class C extends E {
     await this._validateActiveEdits([], this.selectedIds) && this._clearSelection();
   }
   async mapChanged() {
-    this._queryingData = !1, this._clearSelection();
+    this._queryingData = !1, this._creatingFeature = !1, this._clearSelection();
   }
   async featuresSelected(e) {
     e.detail.forEach((i) => {
@@ -182,15 +182,21 @@ class C extends E {
       s && s < 0 && this._table?.highlightIds.add(i);
     });
   }
+  createWorkFlowStarted() {
+    this._creatingFeature = !0;
+  }
+  backFromCreateWorkFlow() {
+    this._creatingFeature = !1;
+  }
   async load() {
     await this._initModules(), await this._initToolInfos();
   }
   render() {
     const e = this._fetchingData ? "display-none" : "", t = this._fetchingData ? "" : "display-none", i = this._queryingData ? "" : "display-none", s = this._size.toString(), a = this.selectedIds.length.toString(), l = this.isMobile ? "height-full" : "height-full-adjusted", r = this._canShowFullTextSearch();
-    return this._validateActiveActions(), d`<div><calcite-scrim class=${p(i)} .loading=${this._queryingData}></calcite-scrim><calcite-shell><div class=${`width-full ${l}`}><calcite-panel class="height-full width-full panel-header-override">${this._getMapLayerPicker("header-actions-start")}${this._getTableControlRow("header-content")}${this._getActionsEnd("header-actions-end")}${r && d`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(h) => void this._searchTextChanged(h)} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? o} type=search></calcite-input></div>` || ""}<calcite-loader class=${p(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${p(e)} ${c(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : d`<div class="bottom-left text-color height-19" id=solutions-selected-count-div>${(this._translations.recordsTotal?.replace("{{total-number-of-records}}", s) + " | " + this._translations.recordsSelected.replace("{{selected-number-of-records}}", a)).replace("{{total}}", s).replace("{{selected}}", a)}</div>`}</calcite-shell>${this.createFilterModal && this._filterModal() || ""}</div>`;
+    return this._validateActiveActions(), d`<div><calcite-scrim class=${g(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 && d`${this._getTableControlRow("header-content")}${this._getActionsEnd("header-actions-end")}` || ""}${r && d`<div class="search-container border-bottom"><calcite-input class=search clearable icon=search @calciteInputChange=${(h) => void this._searchTextChanged(h)} .placeholder=${this._searchPlaceHolder} title=${this._searchPlaceHolder ?? o} type=search></calcite-input></div>` || ""}<calcite-loader class=${g(t)} .label=${this._translations.fetchingData} scale=l></calcite-loader><div class=${g(e)} ${c(this.onTableNodeCreate)}></div></calcite-panel></div>${this.isMobile ? void 0 : d`<div class="bottom-left text-color height-19" id=solutions-selected-count-div>${(this._translations.recordsTotal?.replace("{{total-number-of-records}}", s) + " | " + this._translations.recordsSelected.replace("{{selected-number-of-records}}", a)).replace("{{total}}", s).replace("{{selected}}", a)}</div>`}</calcite-shell>${this.createFilterModal && this._filterModal() || ""}</div>`;
   }
   async _initModules() {
-    const [e, t, i, s] = await y([
+    const [e, t, i, s] = await I([
       "esri/widgets/FeatureTable",
       "esri/core/reactiveUtils",
       "esri/widgets/FeatureTable/support/TableTemplate",
@@ -256,7 +262,7 @@ class C extends E {
     }
   }
   _getMapLayerPicker(e) {
-    const t = this.isMobile ? "border-top" : "";
+    const t = this.isMobile ? "display-none" : "";
     return d`<div class=${`border-end ${t}`} id=solutions-map-layer-picker-container slot=${e ?? o}><map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} display=inline-flex height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this._layer ? [this._layer?.id] : []} show-single-layer-as-label show-tables type=dropdown></map-layer-picker></div>`;
   }
   _getActionsEnd(e) {
@@ -287,11 +293,11 @@ class C extends E {
   async _initToolInfos() {
     const e = this._featuresSelected(), t = this._relatedFeatureTable ? this._relatedFeatureTable.layer.isTable : this._layer?.isTable;
     this.selectedIds.length > 1 && this._layer?.capabilities?.operations.supportsUpdate;
-    const i = !this.mapHidden && !t, s = !this._relatedFeatureTable && this._hasFilterExpressions(), a = this._featuresEmpty(), l = this.featureSelectionMode === "single";
+    const i = !this.mapHidden && !t, s = !this._relatedFeatureTable && (!this._layer?.isTable || this._hasFilterExpressions()), a = this._featuresEmpty(), l = this.featureSelectionMode === "single";
     let r = this.enableCSV;
     if (this._relatedFeatureTable) {
       const n = await this._queryRelatedFeatures();
-      r = Object.keys(n).length > 0;
+      r = n && Object.keys(n).length > 0;
     }
     const h = [];
     s && h.push({
@@ -380,7 +386,7 @@ class C extends E {
   }
   _getAction(e, t, i, s, a, l, r) {
     const h = this._layer === void 0 ? !0 : l;
-    return d`<calcite-action .active=${e} appearance=solid .disabled=${h} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${r} @click=${a} text text-enabled><div class="display-flex"><calcite-icon .icon=${t} scale=s></calcite-icon><calcite-label class="label-override padding-start-1-4">${s}</calcite-label></div></calcite-action>`;
+    return d`<calcite-action .active=${e} appearance=solid .disabled=${h} .icon=${t} .id=${`layer-table-${t}`} .indicator=${i} .label=${s} .loading=${r} @click=${a} text text-enabled><div class="display-flex"><calcite-label class="label-override padding-start-1-4">${s}</calcite-label></div></calcite-action>`;
   }
   _showDelete() {
     this.showDelete.emit({
@@ -455,9 +461,9 @@ class C extends E {
               this._handleOnChange(s);
             }
             if (this._relatedFeatureTable = i, typeof i.layer?.id == "string" && i.layer?.fields) {
-              const s = this._getColumnTemplates(i.layer.id, i.layer.fields);
+              const s = i.layer.popupTemplate?.fieldInfos || i.layer.fields, a = this._getColumnTemplates(i.layer.id, s);
               this._relatedFeatureTable.tableTemplate = this.TableTemplate && new this.TableTemplate({
-                columnTemplates: s
+                columnTemplates: a
               });
             }
             i.highlightIds.on("change", (s) => {
@@ -532,22 +538,22 @@ class C extends E {
   }
   _resetColumnTemplates() {
     if (this._layer) {
-      const e = this._getColumnTemplates(this._layer?.id, this._layer?.fields);
-      e?.length === 0 ? this._tableNode?.classList.add("display-none") : this._tableNode?.classList.remove("display-none");
-      const t = this._table?.tableTemplate?.columnTemplates, i = t && e && t.length !== e.length || e?.some((s, a) => t && t[a] ? JSON.stringify(t[a]) !== JSON.stringify(s) : !1);
-      if (this._table && e && (i || !this._columnsInfo)) {
+      const e = this._layer.popupTemplate?.fieldInfos || this._layer.fields, t = this._getColumnTemplates(this._layer.id, e);
+      t?.length === 0 ? this._tableNode?.classList.add("display-none") : this._tableNode?.classList.remove("display-none");
+      const i = this._table?.tableTemplate?.columnTemplates, s = i && t && i.length !== t.length || t?.some((a, l) => i && i[l] ? JSON.stringify(i[l]) !== JSON.stringify(a) : !1);
+      if (this._table && t && (s || !this._columnsInfo)) {
         this._table.tableTemplate = this.TableTemplate && new this.TableTemplate({
-          columnTemplates: e
+          columnTemplates: t
         });
-        const s = e.map((a) => a.fieldName);
-        this._initColumnsInfo(s);
+        const a = t.map((l) => l.fieldName);
+        this._initColumnsInfo(a);
       }
     }
   }
   async _resetTable() {
     if (this._loaded = !1, this._clearSelection(), this._allIds = await this.queryAllIds(), !this._table && this._layer) {
-      const e = this._getColumnTemplates(this._layer.id, this._layer?.fields);
-      this._tableNode && await this._getTable(this._tableNode, e);
+      const e = this._layer.popupTemplate?.fieldInfos || this._layer.fields, t = this._getColumnTemplates(this._layer.id, e);
+      this._tableNode && await this._getTable(this._tableNode, t);
     } else this._table && (this._table.view = this.mapView, this._table.layer = this._layer);
     await this._initLayerRefresh(), this._checkEditEnabled(), this._table && (this._table.editingEnabled = this._editEnabled && this.enableInlineEdit, await this._table.when(), setTimeout(() => {
       this._loaded || this.finishLoading();
@@ -575,7 +581,7 @@ class C extends E {
   }
   async _handleDefaults() {
     if (!this._defaultOidHonored && this.defaultOid?.length > 0 && this.defaultOid[0] > -1 && this._table && (await this._selectDefaultFeature(this.defaultOid), this._defaultOidHonored = !0, this.defaultOid = [], this._showOnlySelected = !1, this._toggleShowSelected()), !this._defaultGlobalIdHonored && this.defaultGlobalId && this.defaultGlobalId?.length > 0 && this._table && this._layer) {
-      const e = await I(this.defaultGlobalId, this._layer), t = e?.length > 0 ? e.map((i) => Number(i.getObjectId())) : void 0;
+      const e = await x(this.defaultGlobalId, this._layer), t = e?.length > 0 ? e.map((i) => Number(i.getObjectId())) : void 0;
       t && await this._selectDefaultFeature(t), this._defaultGlobalIdHonored = !0, this.defaultGlobalId = [], this._showOnlySelected = !1, this._toggleShowSelected();
     }
   }
@@ -715,7 +721,7 @@ class C extends E {
       }
       return l;
     }, []);
-    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView?.map && await v(
+    this._updateToolInfoLoading("export", !0), this._csvExporting = !0, this.mapView?.map && await E(
       this.mapView.map,
       t,
       !1,
@@ -735,7 +741,7 @@ class C extends E {
       outFields: ["*"],
       relationshipId: s?.id
     });
-    return a && await i.queryRelatedFeatures(a).catch(async (r) => {
+    return t && a && await i.queryRelatedFeatures(a).catch(async (r) => {
       console.error(r);
     });
   }
@@ -760,18 +766,18 @@ class C extends E {
     return this._relatedFeatureTable ? e.length > 0 ? t = this._relatedFeatureTable.layer : t = this._relatedFeatureTable.tableParent?.layer : t = this._layer, t;
   }
   async _zoom() {
-    this._layer && this.mapView && await g(this.selectedIds, this._selectedLayerView, this.mapView, !0, void 0, this.zoomToScale);
+    this._layer && this.mapView && await b(this.selectedIds, this._selectedLayerView, this.mapView, !0, void 0, this.zoomToScale);
   }
   async _layerSelectionChanged(e) {
     const t = e.detail[0];
     if (t !== this._layer?.id || this._featuresEmpty()) {
       this._fetchingData = !0;
-      const i = this.mapView && await m(this.mapView, t);
+      const i = this.mapView && await v(this.mapView, t);
       i && await i.when(async () => {
-        this._selectedLayerView = !i.isTable && this.mapView ? await w(this.mapView, i.id) : null, this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._shouldUpdateTableOnExtentChange = !0, this._layer = i, await this._initToolInfos(), this._getFullTextSearchInfo();
+        this._selectedLayerView = !i.isTable && this.mapView ? await T(this.mapView, i.id) : null, this._table && this._table?.viewModel?.attachmentsViewOptions?.objectId && this._table.viewModel.hideAttachmentsView(), this._shouldUpdateTableOnExtentChange = !0, this._layer = i, await this._initToolInfos(), this._getFullTextSearchInfo();
       });
     }
-    this._fetchingData = !1;
+    this._creatingFeature = !1, this._fetchingData = !1;
   }
   _getColumnTemplates(e, t) {
     let i;
@@ -782,13 +788,13 @@ class C extends E {
     const l = i?.fields && i?.fieldOrder ? i.fieldOrder.filter((h) => i?.fields && i.fields.indexOf(h) > -1) : a.length > 0 ? a : void 0;
     let r;
     return t && (r = t.reduce((h, n) => {
-      const _ = {
+      const y = "fieldName" in n ? n.fieldName : n.name, m = "label" in n ? n.label : n.alias, _ = "label" in n ? n.label : n.name, p = {
         type: "field",
-        fieldName: n.name,
-        label: n.alias,
-        menuConfig: this._getMenuConfig(n.name)
+        fieldName: y,
+        label: m,
+        menuConfig: this._getMenuConfig(_ || "")
       };
-      return i && i?.fields ? i.fields.indexOf(n.name) > -1 && h.push(_) : a.length > 0 ? a.indexOf(n.name) > -1 && h.push(_) : h.push(_), h;
+      return i && i?.fields ? i.fields.indexOf(_ || "") > -1 && h.push(p) : a.length > 0 ? a.indexOf(_) > -1 && h.push(p) : h.push(p), h;
     }, [])), r ? l ? r?.sort(this._sortFields.bind(this, l)) : r : [];
   }
   _sortFields(e, t, i) {
@@ -814,7 +820,7 @@ class C extends E {
     }));
   }
 }
-b("layer-table", C);
+w("layer-table", $);
 export {
-  C as LayerTable
+  $ as LayerTable
 };

package/dist/components/layer-table/index.d.ts

@@ -8,10 +8,10 @@ import "../field-selection/index.js";
 import "@esri/calcite-components/components/calcite-action-bar";
 import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-action";
-import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-label";
 import "@arcgis/instant-apps-components/dist/components/instant-apps-social-share.js";
 import "@esri/calcite-components/components/calcite-tooltip";
+import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-dialog";
 import "@arcgis/instant-apps-components/dist/components/instant-apps-filter-list.js";
 export * from "./customElement.js";

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

@@ -8,10 +8,10 @@ import "../field-selection/index.js";
 import "@esri/calcite-components/components/calcite-action-bar";
 import "@esri/calcite-components/components/calcite-action-group";
 import "@esri/calcite-components/components/calcite-action";
-import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-label";
 import "@arcgis/instant-apps-components/dist/components/instant-apps-social-share.js";
 import "@esri/calcite-components/components/calcite-tooltip";
+import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-dialog";
 import "@arcgis/instant-apps-components/dist/components/instant-apps-filter-list.js";
 export * from "./customElement.js";

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

@@ -81,26 +81,12 @@ export declare class MapCard extends LitElement {
      * @default false
      */
     hide: boolean;
-    /**
-     * number: The placement index of the home and zoom components. This index shows where to place the component relative to other components.
-     * For example a value of 0 would place it topmost when position is top-*, leftmost for bottom-left and right most for bottom-right.
-     *
-     * @default 3
-     */
-    homeZoomIndex: number;
-    /**
-     * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
-     * The position details for the Home and Zoom tools
-     *
-     * @default 'top-left'
-     */
-    homeZoomPosition: __esri.UIPosition;
     /**
      * "s" | "m" | "l": Used for Zoom and Home tools
      *
      * @default 'm'
      */
-    homeZoomToolsSize: 'l' | 'm' | 's';
+    zoomToolsSize: 'l' | 'm' | 's';
     /** IMapInfo[]: array of map infos (name and id) */
     mapInfos: IMapInfo[];
     /**
@@ -112,11 +98,18 @@ export declare class MapCard extends LitElement {
     mapWidgetsIndex: number;
     /**
      * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
-     * The position details for the Home and Zoom tools
+     * The position details for the map tools
      *
-     * @default 'top-right'
+     * @default 'top-left'
      */
     mapWidgetsPosition: __esri.UIPosition;
+    /**
+     * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
+     * The position details for the mobile map tools
+     *
+     * @default 'top-right'
+     */
+    mobileMapWidgetsPosition: __esri.UIPosition;
     /**
      * "s" | "m" | "l": Used for optional map tool widget
      *
@@ -134,8 +127,10 @@ export declare class MapCard extends LitElement {
     stackTools: boolean;
     /** theme: "light" | "dark" theme to be used */
     theme: theme | undefined;
-    /** Valid tools: "legend", "search", "fullscreen", "basemap", "floorfilter" */
-    toolOrder: string[];
+    /** Valid tools: "legend", "search", "fullscreen", "basemap", "floorfilter", "selectiontool" */
+    mapToolsOrder: string[];
+    /** Valid tools: "map-picker", "map-layer-picker" */
+    mobileToolsOrder: string[];
     /**
      * boolean: When true map will shown is full screen
      *

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

@@ -3,15 +3,15 @@ import { l as u } from "../../chunks/loadModules.js";
 import { joinAppProxies as b } from "templates-common-library/functionality/proxy";
 import { g, b as y } from "../../chunks/mapViewUtils.js";
 import { u as _ } from "../../chunks/useT9n.js";
-import { html as l, nothing as p } from "lit";
-import { createRef as h, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as w, createEvent as d, noShadowRoot as I, safeClassMap as c } from "@arcgis/lumina";
-import { css as L } from "@lit/reactive-element/css-tag.js";
-import { defineCustomElements as $ } from "@arcgis/instant-apps-components/loader";
+import { html as o, nothing as c } from "lit";
+import { createRef as r, ref as n } from "lit-html/directives/ref.js";
+import { LitElement as w, createEvent as d, noShadowRoot as v, safeClassMap as m } from "@arcgis/lumina";
+import { css as $ } from "@lit/reactive-element/css-tag.js";
+import { defineCustomElements as I } from "@arcgis/instant-apps-components/loader";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250513.1 */
-const v = L`@layer{/** @license
+v1.0.0-next.20250521 */
+const L = $`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -25,29 +25,26 @@ const v = L`@layer{/** @license
  * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  * See the License for the specific language governing permissions and
  * limitations under the License.
- */:host{display:block;--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}.display-flex{display:flex}.display-none{display:none}.display-block{display:block}.absolute-right{position:absolute;right:0;left:unset}html[dir=rtl] .absolute-right{left:0;right:unset}}`;
-class S extends w {
+ */: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}@media only screen and (max-width: 1024px){.esri-zoom{display:none!important}}}`;
+class M extends w {
   constructor() {
-    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.hide = !1, this.homeZoomIndex = 3, this.homeZoomPosition = "top-left", this.homeZoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-right", this.mapWidgetsSize = "m", this.stackTools = !1, this.toolOrder = [], this.isMapLayout = !1, this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.selectedFeaturesIds = [], this.showOnlyUpdatableLayers = !1, this.isMobile = !1, this.enableSelectionTool = !1, this._translations = _({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = h(), this._mapPicker = h(), this._mapTools = h(), this._mapListExpanded = !1, this._filterActive = !1, this._definitionExpression = "", this._mapLayerPicker = h(), this._toolbar = h(), this.mapChanged = d(), this.beforeMapChanged = d(), this.toggleFilter = d(), this.clearSelection = d(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.enableSingleExpand = !0, this.stackTools = !0, $(window);
+    super(), this.defaultWebmapId = "", this.defaultLayerId = "", this.enableHome = !1, this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableShare = !1, this.enableSingleExpand = !1, this.enableSearch = !1, this.enableBasemap = !1, this.hide = !1, this.zoomToolsSize = "m", this.mapInfos = [], this.mapWidgetsIndex = 0, this.mapWidgetsPosition = "top-left", 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._translations = _({ name: "map-card", blocking: !0 }), this._toolInfos = [], this._filterActive = !1, this._defaultWebmapHonored = !1, this._loadedId = "", this._mapDiv = r(), this._mapPicker = r(), this._mapTools = r(), this._mobMapTools = r(), this._mapListExpanded = !1, this._definitionExpression = "", this._mapLayerPicker = r(), this._toolbar = r(), this._selectedWebMapId = "", this.mapChanged = d(), this.beforeMapChanged = d(), this.toggleFilter = d(), this.clearSelection = d(), this.listenOn(window, "mapInfoChange", this.mapInfoChange), this.listenOn(window, "noLayersFound", this.noLayersFound), this.listenOn(window, "layerSelectionChange", this.layerSelectionChange), this.enableSingleExpand = !0, this.stackTools = !0, I(window);
   }
   static {
-    this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, basemapConfig: 0, hide: 5, homeZoomIndex: 9, homeZoomPosition: 1, homeZoomToolsSize: 1, mapInfos: 0, mapWidgetsIndex: 9, mapWidgetsPosition: 1, mapWidgetsSize: 1, mapView: 0, stackTools: 5, theme: 1, toolOrder: 0, isMapLayout: 5, shareIncludeEmbed: 5, shareIncludeSocial: 5, selectedFeaturesIds: 0, selectedLayer: 0, zoomToScale: 9, showOnlyUpdatableLayers: 5, isMobile: 5, mapInfo: 0, enableSelectionTool: 5, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _toolInfos: 16 };
+    this.properties = { appLayout: 1, appProxies: 1, defaultWebmapId: 1, defaultLayerId: 1, enableHome: 5, enableLegend: 5, enableFloorFilter: 5, enableFullscreen: 5, enableShare: 5, enableSingleExpand: 5, enableSearch: 5, enableBasemap: 5, 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, _translations: 16, _searchConfiguration: 16, _webMapInfo: 16, _toolInfos: 16, _filterActive: 16, _mapDivHeight: 16, _mapDivWidth: 16 };
   }
   static {
-    this.styles = v;
+    this.styles = L;
   }
   static {
-    this.shadowRootOptions = I;
+    this.shadowRootOptions = v;
   }
   willUpdate(e) {
-    e.has("appLayout") && this.appLayoutWatchHandler(), e.has("enableHome") && this.enableHomeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("selectedLayer") && this.selectedLayerWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler();
+    e.has("appLayout") && this.appLayoutWatchHandler(), e.has("mapView") && this.mapViewWatchHandler(), e.has("selectedLayer") && this.selectedLayerWatchHandler(), e.has("selectedFeaturesIds") && this.selectedFeaturesIdsWatchHandler();
   }
   appLayoutWatchHandler() {
     this._updateShareUrl();
   }
-  enableHomeWatchHandler() {
-    this.mapView && this._initHome();
-  }
   async mapViewWatchHandler() {
     this.mapView && this._updateShareUrl();
   }
@@ -69,7 +66,7 @@ class S extends w {
     this._mapLayerPicker.value && this._mapLayerPicker.value.updateLayer();
   }
   async mapInfoChange(e) {
-    await this._loadMap(e.detail);
+    this._selectedWebMapId = e.detail.id, await this._loadMap(e.detail);
   }
   noLayersFound() {
     this.selectedLayer = void 0, this.selectedFeaturesIds = [];
@@ -80,57 +77,65 @@ class S extends w {
     }, 50);
   }
   async load() {
-    await this._initModules(), this._initToolInfos();
+    await this._initModules(), this._initToolInfos(), this._mapSizeObserver || (this._mapSizeObserver = new ResizeObserver(() => {
+      if (this._mapDivWidth && this._mapDiv.value) {
+        const e = this.isMobile ? 160 : 110;
+        this._mapDivWidth = this._mapDiv.value.offsetWidth - e;
+      }
+    }));
   }
   render() {
-    const e = this.isMapLayout ? "display-flex height-49-px" : "", i = this.hide ? "visibility-hidden-1" : "", s = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", t = this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full", a = this.isMapLayout ? "" : "display-none";
-    return this._validateActiveActions(), l`<div class=${`${e} width-full`} ${n(this._toolbar)}>${this._getActionBar()}<div slot=header-actions-end class="display-flex absolute-right">${this.enableShare && !this.isMobile && this.isMapLayout ? this._getShare("share") : void 0}</div></div><calcite-progress class=${c(a)} value=0></calcite-progress><div class=${`${t} ${i}`} ${n(this._mapDiv)}></div>${l`<map-tools .basemapConfig=${this.basemapConfig} class=${`box-shadow ${s}`} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableSearch=${this.enableSearch} .enableSingleExpand=${this.enableSingleExpand} .enableSelectionTool=${this.enableSelectionTool} .homeZoomToolsSize=${this.homeZoomToolsSize} .mapView=${this.mapView} .mapWidgetsSize=${this.mapWidgetsSize} .position=${this.mapWidgetsPosition} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.toolOrder} ${n(this._mapTools)}></map-tools>`}`;
+    const e = this.isMapLayout ? "display-flex height-49-px" : "", i = this.hide ? "visibility-hidden-1" : "", t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", s = this.isMobile ? "" : this.mapInfos?.length > 1 || this.isMapLayout ? "map-height" : "height-full", a = this.isMapLayout ? "" : "display-none", h = this.isMobile ? "" : "hidden";
+    return this._validateActiveActions(), o`${!this.isMobile && o`<div class=${`${e} width-full`} ${n(this._toolbar)}>${this._getActionBar()}<div slot=header-actions-end class="display-flex absolute-right">${this.enableShare && this.isMapLayout ? this._getShare("share") : void 0}</div></div>` || ""}<calcite-progress class=${m(a)} value=0></calcite-progress><div class=${`${i} ${s}`}><div class="height-full" ${n(this._mapDiv)}></div></div>${o`<map-tools .basemapConfig=${this.basemapConfig} class=${`box-shadow ${t}`} .defaultLayerId=${this.defaultLayerId} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .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} .selectedLayer=${this.selectedLayer} .searchConfiguration=${this._searchConfiguration} .stackTools=${this.stackTools} .toolOrder=${this.mapToolsOrder} ${n(this._mapTools)}></map-tools><map-tools class=${`box-shadow ${t} ${h}`} .enableBasemap=${this.enableBasemap} enable-map-layer-picker enable-map-picker .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} ${n(this._mobMapTools)}></map-tools>`}`;
   }
   updated() {
-    document.onclick = (e) => this._handleDocumentClick(e);
+    this._mapDivHeight = this._mapDiv.value?.offsetHeight ?? 0, document.onclick = (e) => this._handleDocumentClick(e);
   }
   loaded() {
-    this._updateShareUrl();
+    this._mapDiv.value && this._mapSizeObserver?.observe(this._mapDiv.value), this._updateShareUrl();
   }
   async _initModules() {
-    const [e, i, s, t] = await u([
+    const [e, i, t, s] = await u([
       "esri/WebMap",
       "esri/views/MapView",
       "esri/widgets/Home",
       "esri/config"
     ]);
-    this.WebMap = e, this.MapView = i, this.Home = s, this.esriConfig = t;
+    this.WebMap = e, this.MapView = i, this.Home = t, this.esriConfig = s;
   }
   async _loadMap(e) {
-    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, r = i && e?.id === this.defaultWebmapId;
-    if (this._loadedId !== a && !i || r) {
-      const o = this.WebMap && new this.WebMap({
+    const i = !this._defaultWebmapHonored && this.defaultWebmapId, t = this.mapInfos?.filter((l) => l.id === this.defaultWebmapId), s = JSON.stringify(e) !== JSON.stringify(this._webMapInfo);
+    this._webMapInfo = i && t ? t[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) {
+      const l = this.WebMap && new this.WebMap({
         portalItem: { id: a }
       });
-      this.appProxies && o && this.esriConfig && (await o.load(), await b(o, this.esriConfig, this.appProxies)), this.mapView = this.MapView && new this.MapView({
+      this.appProxies && l && this.esriConfig && (await l.load(), await b(l, this.esriConfig, this.appProxies)), this.mapView = this.MapView && new this.MapView({
         container: this._mapDiv.value,
-        map: o,
+        map: l,
         resizeAlign: "center"
       }), this._loadedId = a, this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapView && await this.mapView.when(() => {
-        this._initHome(), this.mapView && (this._mapTools.value && this.mapView.ui.add(this._mapTools.value, { position: this.mapWidgetsPosition, index: this.mapWidgetsIndex }), this._defaultWebmapHonored = r ? !0 : this._defaultWebmapHonored, this.mapChanged.emit({
-          id: a,
-          mapView: this.mapView
-        }));
+        if (this.mapView) {
+          const p = this.isMobile ? 160 : 110;
+          this._mapDivWidth = this._mapDiv.value && this._mapDiv.value.offsetWidth - p, 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.mapChanged.emit({
+            id: a,
+            mapView: this.mapView
+          });
+        }
       });
-    } 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({
+    } else i ? (this._defaultWebmapHonored = !0, this._mapPicker.value && this._mapPicker.value.setMapByID(a)) : s && this.mapView && (this._searchConfiguration = this._webMapInfo.searchConfiguration, this.beforeMapChanged.emit(), this.mapChanged.emit({
       id: a,
       mapView: this.mapView
     }));
     this._updateShareUrl();
   }
   _getActionBar() {
-    const e = this.mapInfos?.length > 1 ? "" : "display-none", i = this.isMapLayout ? "display-flex" : "display-block", s = this.isMobile ? "border-top" : "", t = this.isMapLayout ? "" : "display-none";
-    return l`<calcite-action-bar class=display-flex expand-disabled expanded id=${this._getId("bar") ?? p} layout=horizontal><map-picker class=${c(e)} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} ${n(this._mapPicker)}></map-picker><div class=${`mapView-header display-flex ${t}`} id=solutions-map-layer-picker-container><div class=${`border-end ${i} ${s}`}>${this.mapView && l`<map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} display=inline-flex height=50 .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} placeholder-icon=layers scale=l .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-single-layer-as-label show-tables show-tables-disabled type=dropdown ${n(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>${!this.isMobile && this.isMapLayout ? this._getActions() : void 0}</calcite-action-bar>`;
+    const e = this.mapInfos?.length > 1 ? "" : "display-none", i = this.isMapLayout ? "" : "width-full", t = "display-flex", s = this.isMapLayout ? "" : "display-none";
+    return o`<calcite-action-bar class=${m(t)} expand-disabled expanded id=${this._getId("bar") ?? c} layout=horizontal><map-picker class=${`${e} ${i}`} id=map-picker .isMapLayout=${this.isMapLayout} .mapInfos=${this.mapInfos} .selectedWebMapId=${this._selectedWebMapId} ${n(this._mapPicker)}></map-picker><div 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 .defaultLayerId=${this.defaultLayerId} display=inline-flex 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 ${n(this._mapLayerPicker)}></map-layer-picker>` || ""}</div></div>${this.isMapLayout ? this._getActions() : void 0}</calcite-action-bar>`;
   }
   _getShare(e) {
-    return l`<div class="share-action" id=${this._getId(e) ?? p}>${this.mapView && l`<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} ${n((i) => {
+    return o`<div class="share-action" id=${this._getId(e) ?? c}>${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} ${n((i) => {
       i && (this._shareNode = i, this._updateShareUrl());
     })}></instant-apps-social-share>` || ""}${this._getToolTip("bottom", e, this._translations?.share)}</div>`;
   }
@@ -182,22 +187,11 @@ class S extends w {
     });
   }
   _validateEnabledActions() {
-    const e = this.selectedFeaturesIds?.length > 0, i = this.selectedFeaturesIds?.length > 1 && this.selectedLayer?.capabilities?.operations?.supportsUpdate, s = ["zoom-to-object", "pencil", "erase"];
-    this._toolInfos?.forEach((t) => {
-      t && s.indexOf(t.icon) > -1 && (t.disabled = t.icon === "pencil" ? !i : !e);
+    const e = this.selectedFeaturesIds?.length > 0, i = this.selectedFeaturesIds?.length > 1 && this.selectedLayer?.capabilities?.operations?.supportsUpdate, t = ["zoom-to-object", "pencil", "erase"];
+    this._toolInfos?.forEach((s) => {
+      s && t.indexOf(s.icon) > -1 && (s.disabled = s.icon === "pencil" ? !i : !e);
     });
   }
-  _initHome() {
-    if (this.enableHome) {
-      if (this._homeWidget = this.Home && new this.Home({
-        view: this.mapView
-      }), this._homeWidget && this.mapView) {
-        this.mapView.ui.add(this._homeWidget, { position: this.homeZoomPosition, index: this.homeZoomIndex });
-        const e = this.homeZoomToolsSize === "s" ? "32px" : this.homeZoomToolsSize === "m" ? "40px" : "48px";
-        this._homeWidget.domNode.style.height = e, this._homeWidget.domNode.style.width = e;
-      }
-    } else this._homeWidget && this.mapView && this.mapView.ui.remove(this._homeWidget);
-  }
   _handleDocumentClick(e) {
     e.target.tagName !== "MAP-PICKER" && (this._mapListExpanded = !1, this._mapPicker.value && this._mapPicker.value.close());
   }
@@ -217,18 +211,18 @@ class S extends w {
   _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)), e), []);
   }
-  _getToolTip(e, i, s) {
-    return document.getElementById(i) ? l`<calcite-tooltip .placement=${e} .referenceElement=${"map-" + i}><span>${s}</span></calcite-tooltip>` : void 0;
+  _getToolTip(e, i, t) {
+    return document.getElementById(i) ? o`<calcite-tooltip .placement=${e} .referenceElement=${"map-" + i}><span>${t}</span></calcite-tooltip>` : void 0;
   }
-  _getAction(e, i, s, t, a, r, o) {
-    const m = this.selectedLayer === void 0 ? !0 : r;
-    return l`<calcite-action .active=${e} appearance=solid .disabled=${m} .icon=${i} .id=${"map-" + i} .indicator=${s} .label=${t} .loading=${o} @click=${a} .text=${t} text-enabled></calcite-action>`;
+  _getAction(e, i, t, s, a, h, l) {
+    const p = this.selectedLayer === void 0 ? !0 : h;
+    return o`<calcite-action .active=${e} appearance=solid .disabled=${p} .icon=${i} .id=${"map-" + i} .indicator=${t} .label=${s} .loading=${l} @click=${a} .text=${s} text-enabled></calcite-action>`;
   }
   _getId(e) {
     return `solutions-action-${e}`;
   }
 }
-f("map-card", S);
+f("map-card", M);
 export {
-  S as MapCard
+  M as MapCard
 };

package/dist/components/map-draw-tools/customElement.js

@@ -9,7 +9,7 @@ import { LitElement as f, createEvent as h, noShadowRoot as y, safeClassMap as o
 import { css as k } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250513.1 */
+v1.0.0-next.20250521 */
 const w = k`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -6,7 +6,7 @@ import { LitElement as r, createEvent as c } from "@arcgis/lumina";
 import { css as h } from "@lit/reactive-element/css-tag.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.0/esri/copyright.txt for details.
-v1.0.0-next.20250513.1 */
+v1.0.0-next.20250521 */
 const o = h`/** @license
  * Copyright 2025 Esri
  *