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

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

@@ -1,14 +1,14 @@
-import { c as u } from "../../chunks/runtime.js";
-import { l as f } from "../../chunks/loadModules.js";
-import { u as b } from "../../chunks/useT9n.js";
-import { html as c, nothing as F } from "lit";
-import { createRef as o, ref as l } from "lit-html/directives/ref.js";
-import { LitElement as W, safeClassMap as a } from "@arcgis/lumina";
-import { css as v } from "@lit/reactive-element/css-tag.js";
+import { c as W } from "../../chunks/runtime.js";
+import { l as v } from "../../chunks/loadModules.js";
+import { u as T } from "../../chunks/useT9n.js";
+import { html as n, nothing as m } from "lit";
+import { createRef as a, ref as h } from "lit-html/directives/ref.js";
+import { LitElement as y, safeClassMap as l } from "@arcgis/lumina";
+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.20250513.1 */
-const x = v`/** @license
+v1.0.0-next.20250521 */
+const E = F`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,25 +22,28 @@ const x = v`/** @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}.display-none{display:none}.margin-top-1-2{margin-top:.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.width-40{width:40px}.square-40-41{width:40px;height:41px}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.box-shadow{box-shadow:0 1px 2px #0000004d}.margin-bottom-1-2{margin-bottom:.5rem}`;
-class S extends W {
+ */:host{display:block}.display-none{display:none}.display-flex{display:flex}.margin-top-1-2{margin-top:.5rem}.margin-left-1-2{margin-left:.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.width-40{width:40px}.square-40-41{width:40px;height:41px}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.box-shadow{box-shadow:0 1px 2px #0000004d}.margin-bottom-1-2{margin-bottom:.5rem}`;
+class $ extends y {
   constructor() {
-    super(...arguments), this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableSearch = !1, this.enableBasemap = !1, this.enableHome = !1, this.enableSingleExpand = !1, this.homeZoomToolsSize = "m", this.layout = "vertical", this.mapWidgetsSize = "m", this.position = "top-right", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "selectiontool"], this._hasFloorInfo = !1, this._translations = b({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showFullscreen = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._selectionToolActive = !1, this._basemapElement = o(), this._floorFilterElement = o(), this._fullscreenElement = o(), this._legendElement = o(), this._searchElement = o(), this._widgets = [], this._selectionToolElement = o();
+    super(...arguments), this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableSearch = !1, this.enableBasemap = !1, this.enableHome = !1, this.enableSingleExpand = !1, this.zoomToolsSize = "m", this.layout = "vertical", this.mapWidgetsSize = "m", this.enableMapPicker = !1, this.enableMapLayerPicker = !1, this.position = "top-right", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "selectiontool", "map-picker", "map-layer-picker"], this.mapInfos = [], this.defaultLayerId = "", this.isMobile = !1, this.selectedWebMapId = "", this.showOnlyUpdatableLayers = !1, this._hasFloorInfo = !1, this._translations = T({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showFullscreen = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._selectionToolActive = !1, this._showEllipsisTools = !0, this._ellipsisTools = [], this._basemapElement = a(), this._floorFilterElement = a(), this._fullscreenElement = a(), this._legendElement = a(), this._searchElement = a(), this._widgets = [], this._selectionToolElement = a(), this._mapTools = [], this._mapTool = a();
   }
   static {
-    this.properties = { basemapConfig: 0, enableLegend: 5, enableFloorFilter: 5, enableFullscreen: 5, enableSearch: 5, enableBasemap: 5, enableHome: 5, enableSingleExpand: 5, homeZoomToolsSize: 1, layout: 1, mapView: 0, mapWidgetsSize: 1, position: 1, searchConfiguration: 0, stackTools: 5, enableSelectionTool: 5, toolOrder: 0, selectedLayer: 0, _hasFloorInfo: 16, _translations: 16, _showTools: 16, _showBasemapWidget: 16, _showFloorFilter: 16, _showFullscreen: 16, _showLegendWidget: 16, _showSearchWidget: 16, _selectionToolActive: 16 };
+    this.properties = { basemapConfig: 0, enableLegend: 5, enableFloorFilter: 5, enableFullscreen: 5, enableSearch: 5, enableBasemap: 5, enableHome: 5, enableSingleExpand: 5, zoomToolsSize: 1, layout: 1, mapView: 0, mapWidgetsSize: 1, enableMapPicker: 5, enableMapLayerPicker: 5, position: 1, searchConfiguration: 0, stackTools: 5, enableSelectionTool: 5, toolOrder: 0, selectedLayer: 0, mapInfos: 0, defaultLayerId: 1, isMobile: 5, parentComponentHeight: 9, parentComponentWidth: 9, selectedWebMapId: 1, showOnlyUpdatableLayers: 5, _hasFloorInfo: 16, _translations: 16, _showTools: 16, _showBasemapWidget: 16, _showFloorFilter: 16, _showFullscreen: 16, _showLegendWidget: 16, _showSearchWidget: 16, _selectionToolActive: 16, _showEllipsisTools: 16, _ellipsisTools: 16 };
   }
   static {
-    this.styles = x;
+    this.styles = E;
   }
   willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler(), e.has("_showBasemapWidget") && (this.hasUpdated || this._showBasemapWidget !== !1) && this._showBasemapWidgetWatchHandler(this._showBasemapWidget), e.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== !1) && this._showFloorFilterWatchHandler(this._showFloorFilter), e.has("_showFullscreen") && (this.hasUpdated || this._showFullscreen !== !1) && this._showFullscreenWatchHandler(this._showFullscreen), e.has("_showLegendWidget") && (this.hasUpdated || this._showLegendWidget !== !1) && this._showLegendWidgetWatchHandler(this._showLegendWidget), e.has("_showSearchWidget") && (this.hasUpdated || this._showSearchWidget !== !1) && this._showSearchWidgetWatchHandler(this._showSearchWidget);
+    e.has("mapView") && this.mapViewWatchHandler(), e.has("parentComponentWidth") && this.parentComponentWidth && this.parentComponentWidthWatchHandler(this.parentComponentWidth), e.has("_showBasemapWidget") && (this.hasUpdated || this._showBasemapWidget !== !1) && this._showBasemapWidgetWatchHandler(this._showBasemapWidget), e.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== !1) && this._showFloorFilterWatchHandler(this._showFloorFilter), e.has("_showFullscreen") && (this.hasUpdated || this._showFullscreen !== !1) && this._showFullscreenWatchHandler(this._showFullscreen), e.has("_showLegendWidget") && (this.hasUpdated || this._showLegendWidget !== !1) && this._showLegendWidgetWatchHandler(this._showLegendWidget), e.has("_showSearchWidget") && (this.hasUpdated || this._showSearchWidget !== !1) && this._showSearchWidgetWatchHandler(this._showSearchWidget);
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
-      this._hasFloorInfo = this.mapView?.map?.floorInfo;
+      this.enableHome && this._initHome(), this.parentComponentWidth && this._updateTools(this.parentComponentWidth);
     });
   }
+  async parentComponentWidthWatchHandler(e) {
+    this._updateTools(e);
+  }
   async _showBasemapWidgetWatchHandler(e) {
     const s = this._basemapElement.value ? this._basemapElement.value.basemapWidget : void 0;
     s && (e ? this.mapView?.ui.add(s, {
@@ -74,42 +77,68 @@ class S extends W {
     }) : this.mapView?.ui.remove(s));
   }
   async load() {
-    await this._initModules();
+    this._mapTools = [...this.toolOrder], await this._initModules();
   }
   render() {
     this._setZoomToolsSize();
-    const e = this._showTools ? "chevrons-up" : "chevrons-down", s = this._showTools ? "" : "display-none", i = this._showSearchWidget ? "" : "display-none", t = this._showBasemapWidget ? "" : "display-none", n = this._showLegendWidget ? "" : "display-none", h = this._showFloorFilter ? "" : "display-none", r = this._showFullscreen ? "" : "display-none", d = this._showTools ? this._translations.collapse : this._translations.expand, p = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "", g = this.enableSingleExpand ? "margin-top-1-2" : "", m = this.toolOrder ? this.toolOrder : ["legend", "search", "fullscreen", "floorfilter"], _ = this.stackTools ? "box-shadow" : "";
-    return c`<div class=${a(p)}>${this.enableSingleExpand ? c`<div class="box-shadow">${this._getActionGroup(e, !1, d || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${g} ${_} ${s}`}>${this._getMapWidgets(m)}</div></div><basemap-gallery .basemapConfig=${this.basemapConfig} class=${a(t)} .mapView=${this.mapView} ${l(this._basemapElement)}></basemap-gallery><map-search class=${a(i)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${l(this._searchElement)}></map-search><map-legend class=${a(n)} .mapView=${this.mapView} ${l(this._legendElement)}></map-legend><map-fullscreen class=${a(r)} .mapView=${this.mapView} @fullscreenStateChange=${(w) => this._fullscreenStateChange(w.detail)} ${l(this._fullscreenElement)}></map-fullscreen><floor-filter class=${a(h)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${l(this._floorFilterElement)}></floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
+    const e = this.layout === "horizontal" ? "display-flex" : "", s = this._getToggleIcon(), t = this._showTools ? e : "display-none", i = this._showEllipsisTools ? "" : "display-none", o = this._showSearchWidget ? "" : "display-none", r = this._showBasemapWidget ? "" : "display-none", d = this._showLegendWidget ? "" : "display-none", c = this._showFloorFilter ? "" : "display-none", g = this._showFullscreen ? "" : "display-none", _ = this._showTools ? this._translations.collapse : this._translations.expand, f = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch ? "display-none" : "", w = this.enableSingleExpand ? this.layout === "horizontal" ? "margin-left-1-2" : "margin-top-1-2" : "", u = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", p = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "";
+    return n`<div class=${`${f} ${e}`}>${this.enableSingleExpand ? n`<div class=${l(p)}>${this._getActionGroup(s, !1, _ || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${w} ${p} ${t}`}>${this._getMapWidgets(this._mapTools)}</div><div><div class=${l(u)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${l(i)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><basemap-gallery .basemapConfig=${this.basemapConfig} class=${l(r)} .mapView=${this.mapView} ${h(this._basemapElement)}></basemap-gallery><map-search class=${l(o)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${h(this._searchElement)}></map-search><map-legend class=${l(d)} .mapView=${this.mapView} ${h(this._legendElement)}></map-legend><map-fullscreen class=${l(g)} .mapView=${this.mapView} @fullscreenStateChange=${(b) => this._fullscreenStateChange(b.detail)} ${h(this._fullscreenElement)}></map-fullscreen><floor-filter class=${l(c)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${h(this._floorFilterElement)}></floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
       this._selectionToolActive = !this._selectionToolActive;
-    }} .selectedLayerId=${this.selectedLayer?.id} tool=rectangle ${l(this._selectionToolElement)}></selection-tool>`;
+    }} .selectedLayerId=${this.selectedLayer?.id} tool=rectangle ${h(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && n`<map-picker class=mapPickerClass .height=${(this.parentComponentHeight ?? 0) - 25} id=map-picker .mapInfos=${this.mapInfos} reference-element=map .selectedWebMapId=${this.selectedWebMapId} show-map-list-in-popover></map-picker>` || ""}${this.enableMapLayerPicker && n`<map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} .height=${(this.parentComponentHeight ?? 0) - 25} .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} reference-element=layers scale=s .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-layers-list-in-popover show-tables type=dropdown></map-layer-picker>` || ""}`;
   }
   async _initModules() {
-    const [e] = await f(["esri/widgets/Expand"]);
-    this.Expand = e;
+    const [e, s] = await v(["esri/widgets/Expand", "esri/widgets/Home"]);
+    this.Expand = e, this.Home = s;
+  }
+  _initHome() {
+    this.enableHome && (this._homeWidget = this.Home && new this.Home({
+      view: this.mapView
+    }));
   }
   _setZoomToolsSize() {
     const e = document.getElementsByClassName("esri-zoom")[0]?.children[0], s = document.getElementsByClassName("esri-zoom")[0]?.children[1];
     if (e && s) {
-      const i = this.homeZoomToolsSize === "s" ? "32px" : this.homeZoomToolsSize === "m" ? "40px" : "48px";
-      e.style.width = i, e.style.height = i, s.style.width = i, s.style.height = i;
+      const t = this.zoomToolsSize === "s" ? "32px" : this.zoomToolsSize === "m" ? "40px" : "48px";
+      e.style.width = t, e.style.height = t, s.style.width = t, s.style.height = t;
     }
+    this.layout === "horizontal" && (document.getElementsByClassName("esri-zoom")[0]?.setAttribute("style", "position: absolute; top: 50px;"), document.getElementsByClassName("esri-ui-top-left")[0]?.setAttribute("style", "flex-direction: row; gap: 5px; align-items: flex-start;"));
+  }
+  _getToggleIcon() {
+    let e;
+    return this.layout === "horizontal" ? e = this._showTools ? "chevrons-left" : "chevrons-right" : e = this._showTools ? "chevrons-up" : "chevrons-down", e;
+  }
+  _updateTools(e) {
+    const s = JSON.parse(JSON.stringify(this.toolOrder));
+    this._hasFloorInfo = this.mapView?.map?.floorInfo;
+    const t = s.indexOf("floorfilter");
+    t > -1 && !this._hasFloorInfo && s.splice(t, 1);
+    const o = Math.ceil(e / 40) - 1;
+    o && o !== s.length - 1 ? (this._mapTools = s.slice(0, o), this._ellipsisTools = s.slice(o, s.length)) : (this._mapTools = s, this._ellipsisTools = []);
   }
   _getMapWidgets(e) {
-    const s = this._showFullscreen ? "full-screen-exit" : "full-screen", i = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
-    return e.map((t) => {
-      switch (t) {
+    const s = this._showFullscreen ? "full-screen-exit" : "full-screen", t = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
+    return e.map((i) => {
+      switch (i) {
         case "legend":
-          return this.enableLegend && this.enableSingleExpand ? this._getActionGroup("legend", !1, this._translations.legend, () => this._showLegend()) : this.enableLegend ? this._getWidget(t, this._legendElement.value?.legendWidget, !0) : void 0;
+          return this.enableLegend && this.enableSingleExpand ? this._getActionGroup("legend", !1, this._translations.legend, () => this._showLegend()) : this.enableLegend ? this._getWidget(i, this._legendElement.value?.legendWidget, !0) : void 0;
         case "search":
-          return this.enableSearch && this.enableSingleExpand ? this._getActionGroup("magnifying-glass", !1, this._translations.search, () => this._search()) : this.enableSearch ? this._getWidget(t, this._searchElement.value?.searchWidget, !0) : void 0;
+          return this.enableSearch && this.enableSingleExpand ? this._getActionGroup("magnifying-glass", !1, this._translations.search, () => this._search()) : this.enableSearch ? this._getWidget(i, this._searchElement.value?.searchWidget, !0) : void 0;
         case "fullscreen":
-          return this.enableFullscreen && this.enableSingleExpand ? this._getActionGroup(s, !1, i || "", () => this._expand()) : this.enableFullscreen ? this._getWidget(t, this._fullscreenElement.value?.fullscreenWidget, !1) : void 0;
+          return this.enableFullscreen && this.enableSingleExpand ? this._getActionGroup(s, !1, t || "", () => this._expand()) : this.enableFullscreen ? this._getWidget(i, this._fullscreenElement.value?.fullscreenWidget, !1) : void 0;
         case "basemap":
-          return this.enableBasemap && this.enableSingleExpand ? this._getActionGroup("basemap", !1, this._translations.basemap, () => this._toggleBasemapPicker()) : this.enableBasemap ? this._getWidget(t, this._basemapElement.value?.basemapWidget, !0) : void 0;
+          return this.enableBasemap && this.enableSingleExpand ? this._getActionGroup("basemap", !1, this._translations.basemap, () => this._toggleBasemapPicker()) : this.enableBasemap ? this._getWidget(i, this._basemapElement.value?.basemapWidget, !0) : void 0;
         case "floorfilter":
-          return this.enableFloorFilter && this._hasFloorInfo && this.enableSingleExpand ? this._getActionGroup("urban-model", !1, this._translations.floorFilter, () => this._toggleFloorFilter()) : this.enableFloorFilter && this._hasFloorInfo ? this._getWidget(t, this._floorFilterElement.value?.floorFilterWidget, !0) : void 0;
+          return this.enableFloorFilter && this._hasFloorInfo && this.enableSingleExpand ? this._getActionGroup("urban-model", !1, this._translations.floorFilter, () => this._toggleFloorFilter()) : this.enableFloorFilter && this._hasFloorInfo ? this._getWidget(i, this._floorFilterElement.value?.floorFilterWidget, !0) : void 0;
         case "selectiontool":
           return this.enableSelectionTool ? this._getActionGroup("cursor-selection", !1, this._translations.selectByRectangle, () => this._toggleSelectionTool(), this._selectionToolActive) : void 0;
+        case "home":
+          return this.enableHome ? this._getActionGroup("home", !1, this._translations.defaultMapView, () => this._homeWidget?.go()) : void 0;
+        case "map-picker":
+          return this.enableMapPicker ? this._getActionGroup("map", !1, "", () => {
+          }) : void 0;
+        case "map-layer-picker":
+          return this.enableMapLayerPicker ? this._getActionGroup("layers", !1, "", () => {
+          }) : void 0;
         default:
           return "";
       }
@@ -118,33 +147,33 @@ class S extends W {
   _fullscreenStateChange(e) {
     e === "ready" && this._showFullscreen ? this._showFullscreen = !1 : e === "active" && !this._showFullscreen && (this._showFullscreen = !0);
   }
-  _getActionGroup(e, s, i, t, n) {
-    const h = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", r = this.stackTools ? "" : "margin-bottom-1-2", d = this.stackTools ? "" : "box-shadow";
-    return c`<div><calcite-action alignment=center .indicator=${n} class=${`${h} ${r} border-bottom ${d}`} .disabled=${s} .icon=${e} id=${e ?? F} @click=${t} scale=s text><calcite-icon icon=cheveron-up scale=s slot=icon></calcite-icon></calcite-action><calcite-tooltip label placement=trailing .referenceElement=${e}><span>${i}</span></calcite-tooltip></div>`;
+  _getActionGroup(e, s, t, i, o) {
+    const r = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", d = this.stackTools ? "" : "margin-bottom-1-2", c = this.stackTools ? "" : "box-shadow";
+    return n`<div><calcite-action alignment=center .indicator=${o} class=${`map-actions ${r} ${d} border-bottom ${c}`} .disabled=${s} .icon=${e} id=${e ?? m} @click=${i} scale=s text ${h(this._mapTool)}><calcite-icon icon=cheveron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && n`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${e ?? m}><span>${t}</span></calcite-tooltip>` || ""}</div>`;
   }
-  _getWidget(e, s, i) {
+  _getWidget(e, s, t) {
     if (this._widgets.indexOf(e) < 0 && this.mapView && s) {
-      const t = this.toolOrder.indexOf(e), n = this.Expand && new this.Expand({
+      const i = this.toolOrder.indexOf(e), o = this.Expand && new this.Expand({
         view: this.mapView,
         content: s
-      }), h = this.enableHome ? 2 : 1;
-      this.mapView.ui.add(i ? n : s, {
+      }), r = this.enableHome ? 2 : 1;
+      this.mapView.ui.add(t ? o : s, {
         position: this.position,
-        index: t > -1 ? t + h : 1
+        index: i > -1 ? i + r : 1
       }), this._widgets.push(e);
     }
   }
   _showLegend() {
-    this._showLegendWidget = !this._showLegendWidget, this._showTools = !1;
+    this._showLegendWidget = !this._showLegendWidget, this._showTools = !1, this._toggleEllipsisTools();
   }
   _search() {
-    this._showSearchWidget = !this._showSearchWidget, this._showTools = !1;
+    this._showSearchWidget = !this._showSearchWidget, this._showTools = !1, this._toggleEllipsisTools();
   }
   _toggleBasemapPicker() {
-    this._showBasemapWidget = !this._showBasemapWidget, this._showTools = !1;
+    this._showBasemapWidget = !this._showBasemapWidget, this._showTools = !1, this._toggleEllipsisTools();
   }
   _toggleFloorFilter() {
-    this._showFloorFilter = !this._showFloorFilter, this._showTools = !1;
+    this._showFloorFilter = !this._showFloorFilter, this._showTools = !1, this._toggleEllipsisTools();
   }
   _toggleSelectionTool() {
     this._selectionToolActive = !this._selectionToolActive, this._selectionToolElement.value?.toggleSelectionTool();
@@ -153,10 +182,13 @@ class S extends W {
     this._showFullscreen = !this._showFullscreen;
   }
   _toggleTools() {
-    this._showTools || (this._showBasemapWidget = !1, this._showSearchWidget = !1, this._showLegendWidget = !1, this._showFloorFilter = !1), this._showTools = !this._showTools;
+    this._showTools || (this._showBasemapWidget = !1, this._showSearchWidget = !1, this._showLegendWidget = !1, this._showFloorFilter = !1), this._showTools = !this._showTools, this._toggleEllipsisTools();
+  }
+  _toggleEllipsisTools() {
+    this._showEllipsisTools = !this._showEllipsisTools;
   }
 }
-u("map-tools", S);
+W("map-tools", $);
 export {
-  S as MapTools
+  $ as MapTools
 };

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

@@ -4,6 +4,8 @@ import "../map-legend/index.js";
 import "../map-fullscreen/index.js";
 import "../floor-filter/index.js";
 import "../selection-tool/index.js";
+import "../map-picker/index.js";
+import "../map-layer-picker/index.js";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-tooltip";

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

@@ -4,6 +4,8 @@ import "../map-legend/index.js";
 import "../map-fullscreen/index.js";
 import "../floor-filter/index.js";
 import "../selection-tool/index.js";
+import "../map-picker/index.js";
+import "../map-layer-picker/index.js";
 import "@esri/calcite-components/components/calcite-action";
 import "@esri/calcite-components/components/calcite-icon";
 import "@esri/calcite-components/components/calcite-tooltip";

package/dist/components/pci-calculator/customElement.js

@@ -6,7 +6,7 @@ import { LitElement as n, safeClassMap as a } from "@arcgis/lumina";
 import { css as r } 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 u = r`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/pdf-download/customElement.js

@@ -8,7 +8,7 @@ import { LitElement as m } 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 u = [
   {
     descriptionPDF: {

package/dist/components/public-notification/customElement.js

@@ -11,7 +11,7 @@ import { LitElement as x, createEvent as E, noShadowRoot as T, safeClassMap as p
 import { css as C } 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 I = C`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/refine-selection/customElement.js

@@ -10,7 +10,7 @@ import { LitElement as R, createEvent as w, noShadowRoot as O } from "@arcgis/lu
 import { css as A } 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 D = A`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/selection-tool/customElement.d.ts

@@ -4,12 +4,6 @@ import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina';
 
 export declare class SelectionTool extends LitElement {
-    /**
-     * string: Locale to use for translation of stings in the UI
-     *
-     * @default ''
-     */
-    locale: string;
     /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /**

package/dist/components/selection-tool/customElement.js

@@ -1,13 +1,12 @@
 import { c as o } from "../../chunks/runtime.js";
 import { l as r } from "../../chunks/loadModules.js";
-import { g as l } from "../../chunks/mapViewUtils.js";
-import { u as c } from "../../chunks/useT9n.js";
-import { LitElement as h, createEvent as s, noShadowRoot as n } from "@arcgis/lumina";
-import { css as p } from "@lit/reactive-element/css-tag.js";
+import { g as c } from "../../chunks/mapViewUtils.js";
+import { LitElement as h, createEvent as s, noShadowRoot as l } from "@arcgis/lumina";
+import { css as n } 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 */
-const d = p`@layer{/** @license
+v1.0.0-next.20250521 */
+const p = n`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -22,24 +21,21 @@ const d = p`@layer{/** @license
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */:host{display:block;pointer-events:all!important}}`;
-class m extends h {
+class d extends h {
   constructor() {
-    super(...arguments), this.locale = "", this.selectedLayerId = "", this.tool = "rectangle", this._translations = c({ name: "selection-tool" }), this.drawingComplete = s(), this.featuresSelected = s();
+    super(...arguments), this.selectedLayerId = "", this.tool = "rectangle", this.drawingComplete = s(), this.featuresSelected = s();
   }
   static {
-    this.properties = { locale: 1, mapView: 0, selectedLayerId: 1, tool: 1, _translations: 16 };
+    this.properties = { mapView: 0, selectedLayerId: 1, tool: 1 };
   }
   static {
-    this.styles = d;
+    this.styles = p;
   }
   static {
-    this.shadowRootOptions = n;
+    this.shadowRootOptions = l;
   }
   willUpdate(e) {
-    e.has("locale") && this.localeWatchHandler(), e.has("mapView") && this.mapViewWatchHandler();
-  }
-  async localeWatchHandler() {
-    this.el.lang = this.locale;
+    e.has("mapView") && this.mapViewWatchHandler();
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
@@ -81,7 +77,7 @@ class m extends h {
     }), this.mapView?.map && this._graphicsLayer && this.mapView.map.layers.add(this._graphicsLayer);
   }
   async _selectFeatures(e) {
-    const t = this.mapView && await l(this.mapView, this.selectedLayerId);
+    const t = this.mapView && await c(this.mapView, this.selectedLayerId);
     try {
       const i = { geometry: e }, a = t && await t.queryObjectIds(i);
       this.featuresSelected.emit(a);
@@ -90,7 +86,7 @@ class m extends h {
     }
   }
 }
-o("selection-tool", m);
+o("selection-tool", d);
 export {
-  m as SelectionTool
+  d as SelectionTool
 };

package/dist/components/solution-article-card/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as r } from "@arcgis/lumina";
 import { css as o } 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 n = o`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-configuration/customElement.js

@@ -10,7 +10,7 @@ import { LitElement as _, noShadowRoot as g, safeClassMap as I } from "@arcgis/l
 import { css as v } 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 b = v`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-configure-panel/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as n } from "@arcgis/lumina";
 import { css as o } 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 r = o`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-configure-titles/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as o } from "@arcgis/lumina";
 import { css as n } 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 r = n`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-contents/customElement.js

@@ -4,7 +4,7 @@ import { LitElement as a, createEvent as l, noShadowRoot as d } from "@arcgis/lu
 import { css as o } 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 h = o`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-delete-dialog/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as o } from "@arcgis/lumina";
 import { css as n } 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 r = n`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-deploy-dialog/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as o } from "@arcgis/lumina";
 import { css as n } 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 r = n`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-deploy-panel/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as o } from "@arcgis/lumina";
 import { css as n } 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 r = n`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-deployed-card/customElement.d.ts

@@ -2,4 +2,18 @@
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 
 export declare class SolutionDeployedCard extends LitElement {
+    /** @default '' */
+    deployedDate: string;
+    /** @default '' */
+    description: string;
+    /** @default '' */
+    heading: string;
+    /** @default '' */
+    itemId: string;
+    /** @default '' */
+    owner: string;
+    /** @default '' */
+    thumbnail: string;
+    /** @default false */
+    updateAvailable: boolean;
 }

package/dist/components/solution-deployed-card/customElement.js

@@ -1,12 +1,12 @@
-import { c as e } from "../../chunks/runtime.js";
+import { c as a } from "../../chunks/runtime.js";
 import { html as t } from "lit-html";
-import { u as i } from "../../chunks/useT9n.js";
-import { LitElement as s, noShadowRoot as o } from "@arcgis/lumina";
-import { css as r } from "@lit/reactive-element/css-tag.js";
+import { u as o } from "../../chunks/useT9n.js";
+import { LitElement as l, nothing as i } from "@arcgis/lumina";
+import { css as n } 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 */
-const n = r`@layer{/** @license
+v1.0.0-next.20250521 */
+const r = n`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -20,25 +20,58 @@ const n = r`@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.
- */}`;
-class a extends s {
+ */calcite-card{width:220px}@media (max-width: 400px){calcite-card{width:100%}}calcite-card:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transition:all 1s ease;-moz-transition:all 1s ease;-o-transition:all 1s ease;-ms-transition:all 1s ease;transition:all 1s ease}calcite-card:hover .hover-text{opacity:1;color:var(--calcite-color-text-inverse)}calcite-card:hover{outline:2px solid var(--calcite-ui-brand);box-sizing:border-box;cursor:pointer}.hover-text{transition:.5s ease;opacity:0;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);-ms-transform:translate(-50%,-50%);text-align:center;display:flex;flex-direction:row;align-items:center;height:100%}.card-image-wrap{flex:0 0 auto}.card-image-wrap{width:100%;position:relative;margin-bottom:0;-webkit-box-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.card-image{width:100%;display:block}video,img{max-width:100%;height:auto}img{overflow-clip-margin:content-box;overflow:clip}.width-full{width:100%}.deployed-label-override{--calcite-label-text-color: var(--calcite-color-text-3);--calcite-label-margin-bottom: 0px}.deployed-icon-override{--calcite-icon-color: var(--calcite-color-text-3)}.padding-end-1-2{padding-inline-end:.5rem}.display-flex{display:flex}.align-items-center{align-items:center}.font-weight-bold{font-weight:700}.font-weight-normal{font-weight:400}.icon-brand-color{--calcite-icon-color: var(--calcite-color-brand)}.update-icon-absolute{position:absolute;right:1rem}.update-icon-absolute[dir=rtl]{position:absolute;left:1rem}.header-line-height{line-height:2.5rem}`;
+class s extends l {
   constructor() {
-    super(...arguments), this._translations = i({ name: "solution-deployed-card", blocking: !0 });
+    super(...arguments), this.deployedDate = "", this.description = "", this.heading = "", this.itemId = "", this.owner = "", this.thumbnail = "", this.updateAvailable = !1, this._translations = o({ name: "solution-deployed-card", blocking: !0 });
   }
   static {
-    this.properties = { _translations: 16 };
+    this.properties = { deployedDate: 1, description: 1, heading: 1, itemId: 1, owner: 1, thumbnail: 1, updateAvailable: 5, _translations: 16 };
   }
   static {
-    this.styles = n;
-  }
-  static {
-    this.shadowRootOptions = o;
+    this.styles = r;
   }
   render() {
-    return t`<calcite-card></calcite-card>`;
+    return t`<div><calcite-card .label=${this.description} @click=${this._cardSelected}>${this._getImage()}${this._getHeader()}<p slot=description>${this.description}</p><div>${this._getOwnerLabel()}${this._getDeployedDate()}</div><div class="width-full" slot=footer-start>${this._getConfigureButton()}</div></calcite-card></div>`;
+  }
+  _getImage() {
+    return t`<div class="card-image-wrap" slot=thumbnail><img class="thumbnail card-image" alt="Sample image alt" src=${this.thumbnail ?? i}><div class="hover-text">${this._translations.configure}</div></div>`;
+  }
+  _getHeader() {
+    return t`<div class="display-flex align-items-center header-line-height" slot=heading>${this.heading}<calcite-icon class="icon-brand-color update-icon-absolute" icon=refresh id=solution-update-available-icon @click=${this._updateAvailable} scale=s></calcite-icon><calcite-tooltip placement=bottom reference-element=solution-update-available-icon>${this._translations.updateAvailable}</calcite-tooltip></div>`;
+  }
+  _getOwnerLabel() {
+    return t`<calcite-label class="font-weight-bold padding-end-1-2" layout=inline>${`${this._translations.owner}:`}<calcite-link class="font-weight-normal" @click=${this._openUserProfile}>${this.owner}</calcite-link></calcite-label>`;
+  }
+  _getDeployedDate() {
+    return t`<div class="display-flex align-items-center"><calcite-icon class="deployed-icon-override padding-end-1-2" icon=projects scale=s></calcite-icon><calcite-label class="deployed-label-override">${this._translations.deployedDate.replace("{{date}}", this.deployedDate)}</calcite-label></div>`;
+  }
+  _getConfigureButton() {
+    return t`<calcite-split-button appearance=outline @click=${(e) => e.stopPropagation()} overlay-positioning=fixed primary-text=${this._translations.configure ?? i} width=full><calcite-dropdown-group selection-mode=none><calcite-dropdown-item icon-start=model @click=${this._viewDiagram}>${this._translations.viewDiagram}</calcite-dropdown-item><calcite-dropdown-item icon-start=file-text @click=${this._viewDocumentation}>${this._translations.documentation}</calcite-dropdown-item><calcite-dropdown-item icon-start=information @click=${this._viewItemDetails}>${this._translations.viewItemDetails}</calcite-dropdown-item><calcite-dropdown-item icon-start=trash @click=${this._deleteSolution}>${this._translations.deleteSolution}</calcite-dropdown-item></calcite-dropdown-group></calcite-split-button>`;
+  }
+  _cardSelected() {
+    alert(`Do actions for ${this.itemId}`);
+  }
+  _viewDiagram(e) {
+    e.stopPropagation(), alert("_viewDiagram");
+  }
+  _viewDocumentation(e) {
+    e.stopPropagation(), alert("_viewDocumentation");
+  }
+  _viewItemDetails(e) {
+    e.stopPropagation(), alert("_viewItemDetails");
+  }
+  _deleteSolution(e) {
+    e.stopPropagation(), alert("_viewDiagram");
+  }
+  _openUserProfile(e) {
+    e.stopPropagation(), alert("_openUserProfile");
+  }
+  _updateAvailable(e) {
+    e.stopPropagation(), alert("_updateAvailable");
   }
 }
-e("solution-deployed-card", a);
+a("solution-deployed-card", s);
 export {
-  a as SolutionDeployedCard
+  s as SolutionDeployedCard
 };

package/dist/components/solution-deployed-card/index.d.ts

@@ -1,2 +1,9 @@
 import "@esri/calcite-components/components/calcite-card";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-tooltip";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-link";
+import "@esri/calcite-components/components/calcite-split-button";
+import "@esri/calcite-components/components/calcite-dropdown-group";
+import "@esri/calcite-components/components/calcite-dropdown-item";
 export * from "./customElement.js";

package/dist/components/solution-deployed-card/index.js

@@ -1,2 +1,9 @@
 import "@esri/calcite-components/components/calcite-card";
+import "@esri/calcite-components/components/calcite-icon";
+import "@esri/calcite-components/components/calcite-tooltip";
+import "@esri/calcite-components/components/calcite-label";
+import "@esri/calcite-components/components/calcite-link";
+import "@esri/calcite-components/components/calcite-split-button";
+import "@esri/calcite-components/components/calcite-dropdown-group";
+import "@esri/calcite-components/components/calcite-dropdown-item";
 export * from "./customElement.js";

package/dist/components/solution-deploying-panel/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as s, noShadowRoot as n } from "@arcgis/lumina";
 import { css as o } 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 r = o`@layer{/** @license
  * Copyright 2025 Esri
  *