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

package/dist/components/map-layer-picker/customElement.js

@@ -1,15 +1,15 @@
 import { c as m } from "../../chunks/runtime.js";
 import { d as b, e as _, f as u } from "../../chunks/mapViewUtils.js";
-import { s as o } from "../../chunks/publicNotificationStore.js";
+import { s as p } from "../../chunks/publicNotificationStore.js";
 import { u as g } from "../../chunks/useT9n.js";
 import { html as a, nothing as l } from "lit";
-import { createRef as d, ref as c } from "lit-html/directives/ref.js";
-import { LitElement as f, createEvent as h, noShadowRoot as L, safeStyleMap as y, safeClassMap as p } from "@arcgis/lumina";
+import { createRef as h, ref as d } from "lit-html/directives/ref.js";
+import { LitElement as f, createEvent as o, noShadowRoot as L, safeStyleMap as c, safeClassMap as y } from "@arcgis/lumina";
 import { css as w } 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.20250515 */
-const I = w`@layer{/** @license
+v1.0.0-next.20250521 */
+const v = w`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,22 +23,22 @@ const I = w`@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}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom: 0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}}`;
-class v extends f {
+ */:host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom: 0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}.popover-list{overflow:auto;width:250px}}`;
+class I extends f {
   constructor() {
-    super(...arguments), this.appearance = "transparent", this.defaultLayerId = "", this.display = "inline-block", this.enabledLayerIds = [], this.enabledTableIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.placeholderIcon = "", this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = g({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = d(), this._layerComboboxElement = d(), this._skipEditCheck = !1, this.beforeLayerSelectionChange = h(), this.idsFound = h(), this.noLayersFound = h(), this.layerSelectionChange = h();
+    super(...arguments), this.appearance = "transparent", this.defaultLayerId = "", this.display = "inline-block", this.enabledLayerIds = [], this.enabledTableIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.placeholderIcon = "", this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = g({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = h(), this._layerComboboxElement = h(), this._skipEditCheck = !1, this._popover = h(), this.beforeLayerSelectionChange = o(), this.idsFound = o(), this.noLayersFound = o(), this.layerSelectionChange = o();
   }
   static {
-    this.properties = { appearance: 1, defaultLayerId: 1, display: 1, enabledLayerIds: 0, enabledTableIds: 0, height: 9, isMobile: 5, mapView: 0, showOnlyUpdatableLayers: 5, placeholderIcon: 1, selectedIds: 0, scale: 1, showTables: 5, showTablesDisabled: 5, showSingleLayerAsLabel: 5, type: 1, force: 16, _hasMultipleLayers: 16, _hasValidLayers: 16, _isDropdownOpen: 16, ids: 16, selectedName: 16, _translations: 16 };
+    this.properties = { appearance: 1, defaultLayerId: 1, display: 1, enabledLayerIds: 0, enabledTableIds: 0, height: 9, isMobile: 5, mapView: 0, showOnlyUpdatableLayers: 5, placeholderIcon: 1, selectedIds: 0, scale: 1, showTables: 5, showTablesDisabled: 5, showSingleLayerAsLabel: 5, type: 1, showLayersListInPopover: 5, referenceElement: 1, force: 16, _hasMultipleLayers: 16, _hasValidLayers: 16, _isDropdownOpen: 16, ids: 16, selectedName: 16, _translations: 16 };
   }
   static {
-    this.styles = I;
+    this.styles = v;
   }
   static {
     this.shadowRootOptions = L;
   }
   willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler(), e.has("type") && (this._layerElement = this.type === "select" ? this._layerSelectElement : this._layerComboboxElement);
+    e.has("mapView") && this.hasUpdated && this.mapViewWatchHandler(), e.has("type") && (this._layerElement = this.type === "select" ? this._layerSelectElement : this._layerComboboxElement);
   }
   async mapViewWatchHandler() {
     await this._setLayers(), this.ids?.length > 0 ? (this._hasValidLayers = !0, this._hasMultipleLayers = this.ids.length > 1, this._setSelectedLayer(this.ids[0])) : (this._hasValidLayers = !1, this.noLayersFound.emit());
@@ -57,10 +57,15 @@ class v extends f {
   async load() {
     await this._setLayers();
   }
+  updated() {
+    this._popover.value?.addEventListener("calcitePopoverOpen", () => {
+      this.el.querySelector("calcite-dropdown-item[selected]").setFocus();
+    });
+  }
   render() {
     const e = "map-layer-picker";
-    let t = this.height && this.height > 0 ? { height: `${this.height.toString()}px` } : {};
-    return t = { ...t, display: this.display }, a`<div class="map-layer-picker-container" style=${y(t)}><div class="map-layer-picker" style=${y(t)}>${this._hasValidLayers ? !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() : this.type === "combobox" ? this._getCombobox(e) : this.type === "select" ? this._getSelect(e) : this._getDropdown(e) : this._getInvalidPlaceholder()}</div></div>`;
+    let t = this.height && this.height > 0 && !this.showLayersListInPopover ? { height: `${this.height.toString()}px` } : {};
+    return t = { ...t, display: this.display }, a`<div class="map-layer-picker-container" style=${c(t)}><div class="map-layer-picker" style=${c(t)}>${this._hasValidLayers ? !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() : this.type === "combobox" ? this._getCombobox(e) : this.type === "select" ? this._getSelect(e) : this.showLayersListInPopover ? this._getMapLayerPopOver() : this._getDropdown(e) : this._getInvalidPlaceholder()}</div></div>`;
   }
   loaded() {
     if (this.ids?.length > 0 || this.selectedIds?.length === 1) {
@@ -68,6 +73,10 @@ class v extends f {
       this.type === "select" ? this._layerElement.value && (this._layerElement.value.value = e) : this.type === "dropdown" && (this.selectedName = this._layerNameHash && Object.keys(this._layerNameHash).indexOf(e) > -1 ? this._layerNameHash[e].name : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(e) > -1 ? this._tableNameHash[e].name : "");
     }
   }
+  _getMapLayerPopOver() {
+    const e = this.height && this.height > 0 ? { height: `${this.height.toString()}px` } : {};
+    return a`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=auto .referenceElement=${this.referenceElement} scale=s ${d(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
+  }
   _getInvalidPlaceholder() {
     return a`<div><calcite-notice class="height-100" icon=exclamation-mark-triangle id=no-valid-layers kind=danger open><div slot=message>${this._translations.noLayersFound}</div></calcite-notice><calcite-tooltip .label=${this._translations.enableEditUpdate} placement=bottom reference-element=no-valid-layers><span>${this._translations.enableEditUpdate}</span></calcite-tooltip></div>`;
   }
@@ -76,10 +85,10 @@ class v extends f {
     return a`<div class="layer-picker-label-container cursor-default"><calcite-icon .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
   }
   _getSelect(e) {
-    return a`<calcite-select id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${c(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
+    return a`<calcite-select id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
   }
   _getCombobox(e) {
-    return a`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${c(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
+    return a`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
   }
   _getDropdown(e) {
     return a`<calcite-dropdown class="layer-picker-dropdown" @calciteDropdownBeforeClose=${() => this._isDropdownOpen = !1} @calciteDropdownBeforeOpen=${() => this._isDropdownOpen = !0}>${this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(e)}<calcite-dropdown-group selection-mode=single>${this._getMapLayerOptions()}</calcite-dropdown-group></calcite-dropdown>`;
@@ -89,7 +98,7 @@ class v extends f {
   }
   _getDropdownButton() {
     const e = this._getItemTypeIcon(), t = this.isMobile ? "" : "max-width-350", s = this.isMobile ? "trigger" : "", i = this._isDropdownOpen ? "chevron-up" : "chevron-down";
-    return a`<calcite-button alignment=icon-end-space-between .appearance=${this.appearance} class=${p(t)} .iconEnd=${i} .iconStart=${e} kind=neutral slot=${s ?? l} width=full><div>${this.selectedName}</div></calcite-button>`;
+    return a`<calcite-button alignment=icon-end-space-between .appearance=${this.appearance} class=${y(t)} .iconEnd=${i} .iconStart=${e} kind=neutral slot=${s ?? l} width=full><div>${this.selectedName}</div></calcite-button>`;
   }
   _getItemTypeIcon() {
     let e = "layers";
@@ -103,8 +112,8 @@ class v extends f {
     return this.ids.reduce((e, t) => (this._validLayer(t) ? e.push(this._getItem(t, "layer")) : this._validTable(t) && e.push(this._getItem(t, "table")), e), []);
   }
   _getItem(e, t) {
-    const s = t === "layer" && this._layerNameHash ? this._layerNameHash[e] : this._tableNameHash ? this._tableNameHash[e] : void 0, i = this.showOnlyUpdatableLayers ? s && !s.supportsUpdate : !1, n = s?.name, r = this.selectedIds.indexOf(e) > -1;
-    return this.type === "combobox" ? a`<calcite-combobox-item .disabled=${i} .selected=${r} .textLabel=${n} .value=${e}></calcite-combobox-item>` : this.type === "select" ? a`<calcite-option .disabled=${i} .label=${n} .selected=${r} .value=${e}></calcite-option>` : this.force && r || !this.force ? a`<calcite-dropdown-group class=${p(i ? "disabled" : "")} id=${n ?? l} .selectionMode=${i ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${i ? void 0 : () => void this._setSelectedLayer(e)} .selected=${r}>${n}</calcite-dropdown-item></calcite-dropdown-group>` : null;
+    const s = t === "layer" && this._layerNameHash ? this._layerNameHash[e] : this._tableNameHash ? this._tableNameHash[e] : void 0, i = this.showOnlyUpdatableLayers ? s && !s.supportsUpdate : !1, r = s?.name, n = this.selectedIds.indexOf(e) > -1;
+    return this.type === "combobox" ? a`<calcite-combobox-item .disabled=${i} .selected=${n} .textLabel=${r} .value=${e}></calcite-combobox-item>` : this.type === "select" ? a`<calcite-option .disabled=${i} .label=${r} .selected=${n} .value=${e}></calcite-option>` : this.force && n || !this.force ? a`<calcite-dropdown-group class=${y(i ? "disabled" : "")} id=${r ?? l} .selectionMode=${i ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${i ? void 0 : () => void this._setSelectedLayer(e)} .selected=${n}>${r}</calcite-dropdown-item></calcite-dropdown-group>` : null;
   }
   async _setSelectedLayer(e) {
     if (e !== this.selectedIds[0]) {
@@ -115,7 +124,7 @@ class v extends f {
         ref: this.el
       }).defaultPrevented)
         return;
-      this.selectedName = t?.name, this.selectedIds = [e], this.layerSelectionChange.emit(this.selectedIds);
+      this.selectedName = t?.name, this.selectedIds = [e], this._popover.value && (this._popover.value.open = !1), this.layerSelectionChange.emit(this.selectedIds);
     } else {
       const t = this.mapView && await b(this.mapView, this.selectedIds[0]);
       this.selectedName = t?.title || "";
@@ -147,11 +156,11 @@ class v extends f {
   }
   _validLayer(e) {
     const t = this._layerNameHash && this._layerNameHash[e]?.name;
-    return t !== void 0 && Object.keys(o.managedLayers).indexOf(t) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0);
+    return t !== void 0 && Object.keys(p.managedLayers).indexOf(t) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0);
   }
   _validTable(e) {
     const t = this._tableNameHash && this._tableNameHash[e]?.name, s = t && this.showTables;
-    return s ? o.managedTables.indexOf(t) < 0 && (this.enabledTableIds?.length > 0 ? this.enabledTableIds.indexOf(e) > -1 : !0) : s !== void 0;
+    return s ? p.managedTables.indexOf(t) < 0 && (this.enabledTableIds?.length > 0 ? this.enabledTableIds.indexOf(e) > -1 : !0) : s !== void 0;
   }
   _layerSelectionChange(e) {
     if (this._layerElement.value) {
@@ -168,7 +177,7 @@ class v extends f {
     }
   }
 }
-m("map-layer-picker", v);
+m("map-layer-picker", I);
 export {
-  v as MapLayerPicker
+  I as MapLayerPicker
 };

package/dist/components/map-layer-picker/index.d.ts

@@ -1,3 +1,4 @@
+import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-icon";

package/dist/components/map-layer-picker/index.js

@@ -1,3 +1,4 @@
+import "@esri/calcite-components/components/calcite-popover";
 import "@esri/calcite-components/components/calcite-notice";
 import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-icon";

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

@@ -6,7 +6,7 @@ import { LitElement as r } from "@arcgis/lumina";
 import { css as d } 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.20250515 */
+v1.0.0-next.20250521 */
 const o = d`/**
  * @license
  * Copyright 2025 Esri

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

@@ -12,6 +12,30 @@ export declare class MapPicker extends LitElement {
      * @default false
      */
     isMapLayout?: boolean | undefined;
+    /**
+     * number: optional fixed height value for the control.
+     * Specified as pixel height.
+     */
+    height: number | undefined;
+    /**
+     * boolean: When true the map list will shown inside a popover
+     * In this case the selected map will not shown as label
+     *
+     * @default false
+     */
+    showMapListInPopover: boolean;
+    /**
+     * string: Refrence element for the calcite popover to show the map list
+     *
+     * @default ''
+     */
+    referenceElement: string;
+    /**
+     * : selected web map
+     *
+     * @default ''
+     */
+    selectedWebMapId: string;
     setMapByID(id: string, skipEditCheck?: boolean): Promise<void>;
     /** Closes the list */
     close(): Promise<void>;

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

@@ -1,13 +1,13 @@
-import { c as n } from "../../chunks/runtime.js";
-import { u as l } from "../../chunks/useT9n.js";
+import { c as d } from "../../chunks/runtime.js";
+import { u as c } from "../../chunks/useT9n.js";
 import { html as s } from "lit";
-import { createRef as r, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as c, createEvent as o, safeClassMap as p } from "@arcgis/lumina";
-import { css as h } from "@lit/reactive-element/css-tag.js";
+import { createRef as n, ref as l } from "lit-html/directives/ref.js";
+import { LitElement as h, createEvent as r, safeClassMap as f, safeStyleMap as m } from "@arcgis/lumina";
+import { css as u } 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.20250515 */
-const m = h`/** @license
+v1.0.0-next.20250521 */
+const b = u`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,19 +21,19 @@ const m = h`/** @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;--solutions-theme-foreground-color: var(--calcite-color-foreground-1);width:100%}.width-full{width:100%}.width-26{width:26%!important}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}.border-left-right{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{position:absolute;display:flex;flex-direction:column;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-background);z-index:1000;width:100%;height:fit-content}.display-none{display:none}.align-center{align-items:center}.adjusted-height{max-height:calc(100% - 52px);overflow-y:auto}`;
-class f extends c {
+ */:host{display:block;--solutions-theme-foreground-color: var(--calcite-color-foreground-1);width:100%}.width-full{width:100%}.width-26{width:26%!important}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-width:0px;border-bottom-width:1px;border-style:solid;border-color:var(--calcite-color-border-3)}.border-left-right{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{display:flex;flex-direction:column;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-background);z-index:1000}.display-none{display:none}.align-center{align-items:center}.adjusted-height{max-height:calc(100% - 52px);overflow-y:auto}.position-absolute{position:absolute}.position-relative{position:relative}`;
+class g extends h {
   constructor() {
-    super(...arguments), this.mapInfos = [], this.isMapLayout = !1, this._mapListExpanded = !1, this._translations = l({ name: "map-picker", blocking: !0 }), this._list = r(), this._loadedId = "", this._skipEditCheck = !1, this.beforeMapInfoChange = o(), this.mapInfoChange = o();
+    super(...arguments), this.mapInfos = [], this.isMapLayout = !1, this.showMapListInPopover = !1, this.referenceElement = "", this.selectedWebMapId = "", this._mapListExpanded = !1, this._translations = c({ name: "map-picker", blocking: !0 }), this._list = n(), this._loadedId = "", this._skipEditCheck = !1, this._popover = n(), this.beforeMapInfoChange = r(), this.mapInfoChange = r();
   }
   static {
-    this.properties = { mapInfos: 0, isMapLayout: 5, _mapListExpanded: 16, _translations: 16 };
+    this.properties = { mapInfos: 0, isMapLayout: 5, height: 9, showMapListInPopover: 5, referenceElement: 1, selectedWebMapId: 1, _mapListExpanded: 16, _translations: 16 };
   }
   static {
-    this.styles = m;
+    this.styles = b;
   }
   willUpdate(e) {
-    e.has("mapInfos") && (this.hasUpdated || this.mapInfos?.length > 0) && this.mapInfosWatchHandler(this.mapInfos, e.get("mapInfos"));
+    e.has("mapInfos") && this.hasUpdated && this.mapInfosWatchHandler(this.mapInfos, e.get("mapInfos")), e.has("selectedWebMapId") && this.hasUpdated && this.selectedWebMapIdWatchHandler(this.selectedWebMapId);
   }
   _webMapInfoWatchHandler(e, t) {
     e && JSON.stringify(e) !== JSON.stringify(t) && (this._loadedId = e?.id, this.mapInfoChange.emit(e));
@@ -41,6 +41,9 @@ class f extends c {
   async mapInfosWatchHandler(e, t) {
     e && JSON.stringify(e) !== JSON.stringify(t) && this._webMapSelected(e[0]);
   }
+  async selectedWebMapIdWatchHandler(e) {
+    this._loadedId = e;
+  }
   async setMapByID(e, t = !1) {
     this._skipEditCheck = t;
     const i = this.mapInfos?.filter((a) => a.id === e);
@@ -53,22 +56,36 @@ class f extends c {
     this._mapListExpanded = e;
   }
   render() {
-    return s`${this._getToolbar()}${this._getMapNameList(this._mapListExpanded)}`;
+    return s`${!this.showMapListInPopover && this._getToolbar() || ""}${this.showMapListInPopover ? this._getMapListPopover() : this._getMapNameList(this._mapListExpanded)}`;
   }
   loaded() {
-    const e = this.mapInfos && this.mapInfos.length > 0 ? this.mapInfos[0] : void 0;
+    const e = this._getWebMapInfo();
     e && this._webMapSelected(e);
   }
+  updated() {
+    this._popover.value?.addEventListener("calcitePopoverOpen", () => {
+      (this._list.value?.querySelector("calcite-list-item[selected]")).setFocus();
+    });
+  }
   _getMapPicker() {
     const e = "map-picker-expand-toggle", t = this._mapListExpanded ? "chevron-up" : "chevron-down";
-    return s`<div class="width-full"><calcite-button alignment=icon-end-space-between appearance=transparent class="width-full height-full" .iconEnd=${t} icon-start=map id=${e} kind=neutral @click=${() => this._chooseMap()} width=full>${this._webMapInfo?.name}</calcite-button><calcite-tooltip placement=bottom .referenceElement=${e}><span>${this._translations.switchMap}</span></calcite-tooltip></div>`;
+    return s`<div class="width-full"><calcite-button alignment=icon-end-space-between appearance=transparent class="width-full height-full" .iconEnd=${t} icon-start=map id=${e} kind=neutral @click=${() => this._chooseMap()} width=full>${this._getWebMapInfo().name}</calcite-button><calcite-tooltip placement=bottom .referenceElement=${e}><span>${this._translations.switchMap}</span></calcite-tooltip></div>`;
   }
   _getToolbar() {
     return s`<div class="display-flex border-left-right"><calcite-action-bar class="border-bottom-1 action-bar-size" expand-disabled layout=horizontal slot=header>${this._getMapPicker()}</calcite-action-bar></div>`;
   }
   _getMapNameList(e) {
-    const t = this.isMapLayout ? "width-26" : "width-full", i = e ? `map-list border-bottom-1 adjusted-height ${t}` : "display-none";
-    return s`<div class=${p(i)}><calcite-list id=mapList label selection-appearance=border selection-mode=single ${d(this._list)}>${this.mapInfos.map((a) => s`<calcite-list-item .label=${a.name} @click=${() => this._webMapSelected(a)} .selected=${a.id === this._loadedId} .value=${a.id}></calcite-list-item>`)}</calcite-list></div>`;
+    const t = this.height && this.height > 0 && this.showMapListInPopover ? { height: `${this.height.toString()}px` } : {}, i = this.showMapListInPopover ? "position-relative" : "position-absolute", a = this.isMapLayout ? "width-26" : "width-full", p = e ? `map-list border-bottom-1 adjusted-height ${a} ${i}` : "display-none";
+    return s`<div class=${f(p)} style=${m(t)}><calcite-list id=mapList label selection-appearance=border selection-mode=single-persist ${l(this._list)}>${this.mapInfos.map((o) => s`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
+  }
+  _getMapListPopover() {
+    return s`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=auto .referenceElement=${this.referenceElement} ${l(this._popover)}>${this._getMapNameList(!0)}</calcite-popover>`;
+  }
+  _getWebMapInfo() {
+    let e = this.mapInfos.find((t) => this.selectedWebMapId === t.id);
+    if (!e && this.mapInfos.length > 0 && (e = this.mapInfos[0]), !e)
+      throw new Error("No valid web map info available");
+    return e;
   }
   _webMapSelected(e) {
     const t = this._loadedId;
@@ -78,13 +95,13 @@ class f extends c {
       currentId: t,
       mapInfo: e,
       ref: this.el
-    }).defaultPrevented || (i = !0), i && (this._webMapInfoWatchHandler(e, this._webMapInfo), this._webMapInfo = e), this._mapListExpanded = !1;
+    }).defaultPrevented || (i = !0), i && (this._webMapInfoWatchHandler(e, this._webMapInfo), this._webMapInfo = e), this._popover.value && (this._popover.value.open = !1), this._mapListExpanded = !1;
   }
   _chooseMap() {
     this._mapListExpanded = !this._mapListExpanded;
   }
 }
-n("map-picker", f);
+d("map-picker", g);
 export {
-  f as MapPicker
+  g as MapPicker
 };

package/dist/components/map-picker/index.d.ts

@@ -3,4 +3,5 @@ import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-action-bar";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-popover";
 export * from "./customElement.js";

package/dist/components/map-picker/index.js

@@ -3,4 +3,5 @@ import "@esri/calcite-components/components/calcite-tooltip";
 import "@esri/calcite-components/components/calcite-action-bar";
 import "@esri/calcite-components/components/calcite-list";
 import "@esri/calcite-components/components/calcite-list-item";
+import "@esri/calcite-components/components/calcite-popover";
 export * from "./customElement.js";

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

@@ -6,7 +6,7 @@ import { LitElement as f } from "@arcgis/lumina";
 import { css as y } 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.20250515 */
+v1.0.0-next.20250521 */
 const S = y`/** @license
  * Copyright 2025 Esri
  *

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

@@ -11,7 +11,7 @@ import { LitElement as E, createEvent as T, noShadowRoot as O, safeClassMap as f
 import { css as F } 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.20250515 */
+v1.0.0-next.20250521 */
 const D = F`@layer{/** @license
  * Copyright 2025 Esri
  *

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

@@ -1,6 +1,6 @@
 /// <reference types="@arcgis/core/interfaces.d.ts" />
 /// <reference types="../../index.d.ts" />
-import { IBasemapConfig, ISearchConfiguration } from '../../utils/interfaces';
+import { IBasemapConfig, IMapInfo, ISearchConfiguration } from '../../utils/interfaces';
 import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 import { MapSearch } from '../map-search/customElement.js';
@@ -57,11 +57,11 @@ export declare class MapTools extends LitElement {
      */
     enableSingleExpand: boolean;
     /**
-     * "s" | "m" | "l": Used for Zoom and Home tools
+     * "s" | "m" | "l": Used for Zoom tools
      *
      * @default 'm'
      */
-    homeZoomToolsSize: 'l' | 'm' | 's';
+    zoomToolsSize: 'l' | 'm' | 's';
     /**
      * "horizontal" | "vertical": used to control the orientation of the tools
      *
@@ -76,6 +76,18 @@ export declare class MapTools extends LitElement {
      * @default 'm'
      */
     mapWidgetsSize: 'l' | 'm' | 's';
+    /**
+     * boolean: when true the map picker will be available
+     *
+     * @default false
+     */
+    enableMapPicker: boolean;
+    /**
+     * boolean: when true the map layer picker will be available
+     *
+     * @default false
+     */
+    enableMapLayerPicker: boolean;
     /**
      * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
      * The position details for the tools
@@ -100,9 +112,39 @@ export declare class MapTools extends LitElement {
     enableSelectionTool: boolean;
     /**
      * Tools to show and its order
-     * Valid tools: "legend", "search", "fullscreen", "basemap", "floorfilter", "selectiontool"
+     * Valid tools: "home", "legend", "search", "fullscreen", "basemap", "floorfilter", "selectiontool", "map-picker", "map-layer-picker"
      */
     toolOrder: string[];
     /** __esri.FeatureLayer: Selected feature layer */
     selectedLayer: __esri.FeatureLayer | undefined;
+    /** IMapInfo[]: array of map infos (name and id) */
+    mapInfos: IMapInfo[];
+    /**
+     * string: when provided this layer ID will be used when the app loads
+     *
+     * @default ''
+     */
+    defaultLayerId: string;
+    /**
+     * When true the component will render an optimized view for mobile devices
+     *
+     * @default false
+     */
+    isMobile: boolean;
+    /** component height */
+    parentComponentHeight: number | undefined;
+    /** Parent component height */
+    parentComponentWidth: number | undefined;
+    /**
+     * string: selected web map
+     *
+     * @default ''
+     */
+    selectedWebMapId: string;
+    /**
+     * boolean: When true only editable layers that support the update capability will be available
+     *
+     * @default false
+     */
+    showOnlyUpdatableLayers: boolean;
 }