@esri/solutions-components 5.1.0-next.110 → 5.1.0-next.112

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

@@ -1,43 +1,27 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as t } from "../../chunks/runtime.js";
-import { css as i, html as s } from "lit";
-import { createRef as n, ref as a } from "lit-html/directives/ref.js";
-import { LitElement as r } from "@arcgis/lumina";
-import d from "@arcgis/core/widgets/Legend.js";
-const m = i`:host{display:block}`;
-class l extends r {
+import { c as e } from "../../chunks/runtime.js";
+import { css as t, html as s } from "lit";
+import { createRef as i, ref as r } from "lit-html/directives/ref.js";
+import { LitElement as l } from "@arcgis/lumina";
+const n = t`:host{display:block}`;
+class o extends l {
   constructor() {
-    super(...arguments), this._legendElement = n();
+    super(...arguments), this.legendRef = i();
   }
   static {
-    this.properties = { mapView: 0, legendWidget: 0 };
+    this.properties = { mapView: 0, legendRef: 0 };
   }
   static {
-    this.styles = m;
-  }
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
-  }
-  async mapViewWatchHandler() {
-    await this.mapView?.when(() => {
-      this.mapView && this._initLegend(this.mapView);
-    });
+    this.styles = n;
   }
   render() {
-    return s`<div ${a(this._legendElement)}></div>`;
-  }
-  async loaded() {
-    this.mapView && await this.mapViewWatchHandler();
+    return this.mapView && s`<arcgis-legend auto-destroy-disabled respect-layer-definition-expression .view=${this.mapView} ${r(this.legendRef)}></arcgis-legend>` || "";
   }
-  _initLegend(e) {
-    e && (this.legendWidget ? this.legendWidget.view = e : this.legendWidget = new d({
-      container: this._legendElement.value,
-      respectLayerDefinitionExpression: !0,
-      view: e
-    }));
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.legendRef.value && this.legendRef.value.destroy();
   }
 }
-t("map-legend", l);
+e("map-legend", o);
 export {
-  l as MapLegend
+  o as MapLegend
 };

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

@@ -1 +1,2 @@
+import "@arcgis/map-components/components/arcgis-legend";
 export * from "./customElement.js";

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

@@ -1,14 +1,15 @@
 /// <reference path="../../index.d.ts" />
-import type Search from "@arcgis/core/widgets/Search.js";
 import type MapView from "@arcgis/core/views/MapView.js";
 import type { ISearchConfiguration } from "../../utils/interfaces.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
+import type { Ref } from "lit-html/directives/ref.js";
+import type { ArcgisSearch as ArcgisSearch2 } from "@arcgis/map-components/components/arcgis-search";
 
 export abstract class MapSearch extends LitElement {
-  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views/MapView.html */
   accessor mapView: MapView | undefined;
   /**
-   * boolean: When true the selected feature popup will be shown when serach result is found
+   * boolean: When true the selected feature popup will be shown when search result is found
    *
    * @default false
    */
@@ -19,6 +20,8 @@ export abstract class MapSearch extends LitElement {
    * @default false
    */
   accessor resultGraphicEnabled: boolean;
+  /** ArcgisSearch: The search widget element */
+  accessor searchComponent: Ref<ArcgisSearch2>;
   /** ISearchConfiguration: Configuration details for the Search widget */
   accessor searchConfiguration: ISearchConfiguration | undefined;
   /**
@@ -28,6 +31,4 @@ export abstract class MapSearch extends LitElement {
    * @default ''
    */
   accessor searchTerm: string;
-  /** esri/widgets/Search: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Search.html */
-  accessor searchWidget: Search | undefined;
 }

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

@@ -1,74 +1,47 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as n } from "../../chunks/runtime.js";
-import { css as d, html as p } from "lit";
+import { c as h } from "../../chunks/runtime.js";
+import { css as p, html as d } from "lit";
 import { createRef as u, ref as m } from "lit-html/directives/ref.js";
 import { LitElement as f } from "@arcgis/lumina";
-import g from "@arcgis/core/widgets/Search.js";
-import S from "@arcgis/core/layers/FeatureLayer.js";
-const w = d`:host{display:block}.search-widget{width:100%!important;border:1px solid var(--calcite-color-border-input)}`;
-class y extends f {
+import y from "@arcgis/core/layers/FeatureLayer.js";
+const S = p`:host{display:block}.search-widget{width:100%!important;border:1px solid var(--calcite-color-border-input)}`;
+class E extends f {
   constructor() {
-    super(...arguments), this.popupEnabled = !1, this.resultGraphicEnabled = !1, this.searchTerm = "", this._searchElement = u();
+    super(...arguments), this.popupEnabled = !1, this.resultGraphicEnabled = !1, this.searchTerm = "", this.searchComponent = u();
   }
   static {
-    this.properties = { mapView: 0, popupEnabled: 5, resultGraphicEnabled: 5, searchConfiguration: 0, searchTerm: 1, searchWidget: 0 };
+    this.properties = { mapView: 0, popupEnabled: 5, resultGraphicEnabled: 5, searchConfiguration: 0, searchTerm: 1, searchComponent: 0 };
   }
   static {
-    this.styles = w;
-  }
-  willUpdate(t) {
-    t.has("searchConfiguration") && this.watchSearchConfigurationHandler(), t.has("mapView") && this.mapViewWatchHandler();
-  }
-  async watchSearchConfigurationHandler() {
-    this._initSearchWidget();
-  }
-  async mapViewWatchHandler() {
-    await this.mapView?.when(() => {
-      this._initSearchWidget();
-    });
-  }
-  loaded() {
-    return this._initSearchWidget();
+    this.styles = S;
   }
   render() {
-    return p`<div class="search-widget" ${m(this._searchElement)}></div>`;
-  }
-  _initSearchWidget() {
-    if (this.mapView && this._searchElement.value && !this.searchWidget) {
-      let t = {
-        view: this.mapView,
-        container: this._searchElement.value,
-        searchTerm: this.searchTerm
-      };
-      this.searchConfiguration && (t = {
-        ...this._getSearchConfig(this.searchConfiguration, this.mapView)
-      }), this.searchWidget = new g(t), this.searchWidget && (this.searchWidget.popupEnabled = this.popupEnabled, this.searchWidget.resultGraphicEnabled = this.resultGraphicEnabled);
-    } else
-      this.searchWidget && (this.searchWidget.view = this.mapView);
-  }
-  _getSearchConfig(t, s) {
-    const o = "includeDefaultSources", r = t.sources;
-    return r && r?.length > 0 ? (t[o] = !1, r.forEach((i) => {
-      if (i.hasOwnProperty("layer")) {
-        const e = i, a = e.layer?.id, c = a ? s.map?.findLayerById(a) : null, h = e?.layer?.url;
-        c ? e.layer = c : h && (e.layer = new S(h));
+    const r = this.searchConfiguration && this.mapView ? this._getSearchConfig(this.searchConfiguration, this.mapView) : void 0;
+    return this.mapView && d`<arcgis-search auto-destroy-disabled class="search-widget" .view=${this.mapView} .popupDisabled=${!this.popupEnabled} .resultGraphicDisabled=${!this.resultGraphicEnabled} .sources=${r?.sources} .searchTerm=${this.searchTerm} ${m(this.searchComponent)}></arcgis-search>` || "";
+  }
+  _getSearchConfig(r, c) {
+    const l = "includeDefaultSources", t = r.sources;
+    return t && t?.length > 0 ? (r[l] = !1, t.forEach((s) => {
+      if (s.hasOwnProperty("layer")) {
+        const e = s, a = e.layer?.id, o = a ? c.map?.findLayerById(a) : null, i = e?.layer?.url;
+        o ? e.layer = o : i && (e.layer = new y(i));
       }
-    }), r?.forEach((i) => {
-      if (i.hasOwnProperty("locator")) {
-        const e = i;
+    }), t?.forEach((s) => {
+      if (s.hasOwnProperty("locator")) {
+        const e = s;
         if (e?.name === "ArcGIS World Geocoding Service") {
           const a = e.outFields || ["Addr_type", "Match_addr", "StAddr", "City"];
           e.outFields = a, e.singleLineFieldName = "SingleLine";
         }
         e.url = e.url, delete e.url;
       }
-    })) : t = {
-      ...t,
+    })) : r = {
+      ...r,
       includeDefaultSources: !0
-    }, t;
+    }, r;
   }
 }
-n("map-search", y);
+h("map-search", E);
 export {
-  y as MapSearch
+  E as MapSearch
 };

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

@@ -1 +1,2 @@
+import "@arcgis/map-components/components/arcgis-search";
 export * from "./customElement.js";

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

@@ -46,6 +46,12 @@ export abstract class MapTools extends LitElement {
   }>;
   /** IBasemapConfig: List of any basemaps to filter out from the basemap widget */
   accessor basemapConfig: IBasemapConfig | undefined;
+  /**
+   * boolean: when true the layer order should be defined in the enabledLayerIds, when false we will use the older logic of layers first then tables
+   *
+   * @default false
+   */
+  accessor configLayerOrderDefined: boolean;
   /**
    * string: when provided this layer ID will be used when the app loads
    *
@@ -148,12 +154,12 @@ export abstract class MapTools extends LitElement {
    * @default 'm'
    */
   accessor mapWidgetsSize: "l" | "m" | "s";
-  /** component height */
+  /** Parent component height */
   accessor parentComponentHeight: number | undefined;
   /** Parent component width */
   accessor parentComponentWidth: number | undefined;
   /**
-   * __esri.UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
+   * UIPosition: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-ui-UI.html#UIPosition
    * The position details for the tools
    *
    * @default 'top-leading'
@@ -163,7 +169,7 @@ export abstract class MapTools extends LitElement {
   accessor searchConfiguration: ISearchConfiguration | undefined;
   /** number[]: A list of ids that are currently selected */
   accessor selectedFeaturesIds: (number | string)[];
-  /** __esri.FeatureLayer: Selected feature layer */
+  /** FeatureLayer: Selected feature layer */
   accessor selectedLayer: FeatureLayer | undefined;
   /**
    * string: selected web map

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

@@ -1,77 +1,71 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
-import { c as W } from "../../chunks/runtime.js";
-import { u as L } from "../../chunks/useT9n.js";
-import { css as S, html as r, nothing as f } from "lit";
-import { createRef as n, ref as h } from "lit-html/directives/ref.js";
-import { LitElement as F, createEvent as $, safeClassMap as a } from "@arcgis/lumina";
-import E from "@arcgis/core/widgets/Expand.js";
-import C from "@arcgis/core/widgets/Home.js";
-const x = S`: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}.margin-right-1-2{margin-right:.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.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}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}`;
-class M extends F {
+import { c as T } from "../../chunks/runtime.js";
+import { u as v } from "../../chunks/useT9n.js";
+import { css as W, html as h, nothing as _ } from "lit";
+import { createRef as a, ref as r } from "lit-html/directives/ref.js";
+import { LitElement as L, createEvent as S, safeClassMap as n } from "@arcgis/lumina";
+const $ = 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}.margin-right-1-2{margin-right:.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.height-fit-content{height:fit-content!important}.height-0{height:0!important}.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}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}.map-actions{--calcite-action-background-color: var(--calcite-color-foreground-1);--calcite-action-background-color-hover: var(--calcite-color-foreground-3);--calcite-color-transparent-press: var(--calcite-color-foreground-2)}`;
+class x extends L {
   constructor() {
-    super(), this.enabledLayerIds = [], this.enableLegend = !1, this.enableLayerList = !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-leading", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "layers-list", "selectiontool", "map-picker", "map-layer-picker"], this.selectionTools = ["rectangle-select", "lasso-select", "clear-selection"], this.mapInfos = [], this.defaultLayerId = "", this.isMobile = !1, this.selectedFeaturesIds = [], this.selectedWebMapId = "", this.showOnlyUpdatableLayers = !1, this.visibilityIcon = "eyeball", this._hasFloorInfo = !1, this._translations = L({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showFullscreen = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._showLayersListWidget = !1, this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !1, this._showEllipsisTools = !0, this._ellipsisTools = [], this._isValidWebMap = !0, this._showSelectionTools = !1, this._basemapElement = n(), this._floorFilterElement = n(), this._fullscreenElement = n(), this._layerListWidgetElement = n(), this._legendElement = n(), this._searchElement = n(), this._widgets = [], this._selectionToolElement = n(), this._mapTools = [], this._mapTool = n(), this.clearSelection = $(), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "layerSelectionChange", this._layerSelectionChange);
+    super(), this.enabledLayerIds = [], this.enableLegend = !1, this.enableLayerList = !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-leading", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "layers-list", "selectiontool", "map-picker", "map-layer-picker"], this.selectionTools = ["rectangle-select", "lasso-select", "clear-selection"], this.mapInfos = [], this.defaultLayerId = "", this.isMobile = !1, this.selectedFeaturesIds = [], this.selectedWebMapId = "", this.showOnlyUpdatableLayers = !1, this.visibilityIcon = "eyeball", this.configLayerOrderDefined = !1, this._hasFloorInfo = !1, this._translations = v({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._showLayersListWidget = !1, this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !1, this._showEllipsisTools = !0, this._ellipsisTools = [], this._isValidWebMap = !0, this._showSelectionTools = !1, this._basemapElement = a(), this._floorFilterElement = a(), this._fullscreenElement = a(), this._layerListWidgetElement = a(), this._legendElement = a(), this._searchElement = a(), this._widgets = [], this._selectionToolElement = a(), this._mapTools = [], this._mapTool = a(), this.clearSelection = S(), this.listenOn(window, "mapChanged", this.mapChanged), this.listenOn(window, "layerSelectionChange", this._layerSelectionChange);
   }
   static {
-    this.properties = { basemapConfig: 0, enabledLayerIds: 0, enableLegend: 5, enableLayerList: 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, selectionTools: 0, selectedLayer: 0, mapInfos: 0, defaultLayerId: 1, isMobile: 5, parentComponentHeight: 9, parentComponentWidth: 9, selectedFeaturesIds: 0, selectedWebMapId: 1, showOnlyUpdatableLayers: 5, mapInfo: 0, visibilityIcon: 1, _hasFloorInfo: 16, _translations: 16, _showTools: 16, _showBasemapWidget: 16, _showFloorFilter: 16, _showFullscreen: 16, _showLegendWidget: 16, _showSearchWidget: 16, _showLayersListWidget: 16, _rectangleSelectionToolActive: 16, _lassoSelectionToolActive: 16, _showEllipsisTools: 16, _ellipsisTools: 16, _isValidWebMap: 16, _showSelectionTools: 16 };
+    this.properties = { basemapConfig: 0, enabledLayerIds: 0, enableLegend: 5, enableLayerList: 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, selectionTools: 0, selectedLayer: 0, mapInfos: 0, defaultLayerId: 1, isMobile: 5, parentComponentHeight: 9, parentComponentWidth: 9, selectedFeaturesIds: 0, selectedWebMapId: 1, showOnlyUpdatableLayers: 5, mapInfo: 0, visibilityIcon: 1, configLayerOrderDefined: 5, _hasFloorInfo: 16, _translations: 16, _showTools: 16, _showBasemapWidget: 16, _showFloorFilter: 16, _showLegendWidget: 16, _showSearchWidget: 16, _showLayersListWidget: 16, _rectangleSelectionToolActive: 16, _lassoSelectionToolActive: 16, _showEllipsisTools: 16, _ellipsisTools: 16, _isValidWebMap: 16, _showSelectionTools: 16 };
   }
   static {
-    this.styles = x;
+    this.styles = $;
   }
-  willUpdate(s) {
-    s.has("mapView") && this.mapViewWatchHandler(), s.has("parentComponentWidth") && this.parentComponentWidth && this.parentComponentWidthWatchHandler(this.parentComponentWidth), s.has("_showBasemapWidget") && (this.hasUpdated || this._showBasemapWidget !== !1) && this._showBasemapWidgetWatchHandler(this._showBasemapWidget), s.has("_showLayersListWidget") && (this.hasUpdated || this._showLayersListWidget !== !1) && this._showLayersListWidgetWatchHandler(this._showLayersListWidget), s.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== !1) && this._showFloorFilterWatchHandler(this._showFloorFilter), s.has("_showFullscreen") && (this.hasUpdated || this._showFullscreen !== !1) && this._showFullscreenWatchHandler(this._showFullscreen), s.has("_showLegendWidget") && (this.hasUpdated || this._showLegendWidget !== !1) && this._showLegendWidgetWatchHandler(this._showLegendWidget), s.has("_showSearchWidget") && (this.hasUpdated || this._showSearchWidget !== !1) && this._showSearchWidgetWatchHandler(this._showSearchWidget);
+  willUpdate(e) {
+    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("_showLayersListWidget") && (this.hasUpdated || this._showLayersListWidget !== !1) && this._showLayersListWidgetWatchHandler(this._showLayersListWidget), e.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== !1) && this._showFloorFilterWatchHandler(this._showFloorFilter), 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.enableHome && this._initHome(), this.parentComponentWidth && this._updateTools(this.parentComponentWidth);
     });
   }
-  async parentComponentWidthWatchHandler(s) {
-    this._updateTools(s);
+  async parentComponentWidthWatchHandler(e) {
+    this._updateTools(e);
   }
-  async _showBasemapWidgetWatchHandler(s) {
-    const e = this._basemapElement.value ? this._basemapElement.value.basemapWidget : void 0, t = document.dir === "rtl" ? "rtl" : "ltr";
-    e && (s ? (this.mapView?.ui.add(e, {
+  async _showBasemapWidgetWatchHandler(e) {
+    const t = this._basemapElement.value ? this._basemapElement.value.basemapGalleryRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
+    t && (e ? (this.mapView?.ui.add(t, {
       position: this.position,
       index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
+    }), t.style.setProperty("direction", s), t.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(t));
   }
-  async _showLayersListWidgetWatchHandler(s) {
-    const e = this._layerListWidgetElement.value ? this._layerListWidgetElement.value.layerListWidget : void 0, t = document.dir === "rtl" ? "rtl" : "ltr";
-    e && (s ? (this.mapView?.ui.add(e, {
+  async _showLayersListWidgetWatchHandler(e) {
+    const t = this._layerListWidgetElement.value ? this._layerListWidgetElement.value.layerListRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
+    t && (e ? (this.mapView?.ui.add(t, {
       position: this.position,
       index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
+    }), t.style.setProperty("direction", s), t.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(t));
   }
-  async _showFloorFilterWatchHandler(s) {
-    const e = this._floorFilterElement.value ? this._floorFilterElement.value.floorFilterWidget : void 0, t = document.dir === "rtl" ? "rtl" : "ltr";
-    e && (s ? (this.mapView?.ui.add(e, {
+  async _showFloorFilterWatchHandler(e) {
+    const t = this._floorFilterElement.value ? this._floorFilterElement.value.floorFilterRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
+    t && (e ? (this.mapView?.ui.add(t, {
       position: this.position,
       index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
+    }), t.style.setProperty("direction", s), t.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(t));
   }
-  async _showFullscreenWatchHandler(s) {
-    const e = this._fullscreenElement.value ? this._fullscreenElement.value.fullscreenWidget : void 0;
-    e && (s ? e.viewModel.state === "ready" && e.viewModel.enter() : e.viewModel.state === "active" && e.viewModel.exit());
-  }
-  async _showLegendWidgetWatchHandler(s) {
-    const e = this._legendElement.value ? this._legendElement.value.legendWidget : void 0, t = document.dir === "rtl" ? "rtl" : "ltr";
-    e && (s ? (this.mapView?.ui.add(e, {
+  async _showLegendWidgetWatchHandler(e) {
+    const t = this._legendElement.value ? this._legendElement.value.legendRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
+    t && (e ? (this.mapView?.ui.add(t, {
       position: this.position,
       index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
+    }), t.style.setProperty("direction", s), t.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(t));
   }
-  async _showSearchWidgetWatchHandler(s) {
-    const e = this._searchElement.value ? this._searchElement.value.searchWidget : void 0, t = document.dir === "rtl" ? "rtl" : "ltr";
-    e && (s ? (this.mapView?.ui.add(e, {
+  async _showSearchWidgetWatchHandler(e) {
+    const t = this._searchElement.value ? this._searchElement.value.searchComponent.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
+    t && (e ? (this.mapView?.ui.add(t, {
       position: this.position,
       index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
+    }), t.style.setProperty("direction", s), t.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(t));
   }
-  async mapChanged(s) {
-    const e = s.detail.isValid;
-    this._isValidWebMap = e, this._showTools || this._toggleTools();
+  async mapChanged(e) {
+    const t = e.detail.isValid;
+    this._isValidWebMap = t, this._showTools || this._toggleTools();
   }
-  async _layerSelectionChange(s) {
+  async _layerSelectionChange(e) {
     this._showTools || this._toggleTools();
   }
   async load() {
@@ -79,59 +73,60 @@ class M extends F {
   }
   render() {
     this._setZoomToolsSize();
-    const s = this.layout === "horizontal" ? "display-flex" : "", e = this._getToggleIcon(), t = !this._showTools && !this._showSelectionTools ? "display-none" : s, o = this._showEllipsisTools ? "" : "display-none", l = this._showSearchWidget ? "" : "display-none", i = this._showBasemapWidget ? "" : "display-none", c = this._showLegendWidget ? "" : "display-none", d = this._showFloorFilter ? "" : "display-none", p = this._showFullscreen ? "" : "display-none", m = this._showLayersListWidget ? "" : "display-none", w = this._showTools ? this._translations.collapse : this._translations.expand, u = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableLayerList && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "", y = document.dir === "rtl" ? "margin-right-1-2" : "margin-left-1-2", b = this.enableSingleExpand ? this.layout === "horizontal" ? y : "margin-top-1-2" : "", T = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", _ = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "", v = this._showSelectionTools ? this.selectionTools : this._mapTools;
-    return r`<div class=${`${u} ${s}`}>${this.enableSingleExpand ? r`<div class=${a(_)}>${this._getActionGroup(e, !1, w || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${b} ${_} ${t}`}>${this._getMapWidgets(v)}</div><div><div class=${a(T)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${a(o)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${a(i)} .mapView=${this.mapView} ${h(this._basemapElement)}></map-basemap-gallery><map-search class=${a(l)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${h(this._searchElement)}></map-search><map-legend class=${a(c)} .mapView=${this.mapView} ${h(this._legendElement)}></map-legend><map-fullscreen class=${a(p)} .mapView=${this.mapView} @fullscreenStateChange=${(g) => this._fullscreenStateChange(g.detail)} ${h(this._fullscreenElement)}></map-fullscreen><layer-list-widget class=${a(m)} .mapView=${this.mapView} @fullscreenStateChange=${(g) => this._fullscreenStateChange(g.detail)} .visibilityIcon=${this.visibilityIcon} ${h(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${a(d)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${h(this._floorFilterElement)}></map-floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
+    const e = this.layout === "horizontal" ? "display-flex" : "", t = this._getToggleIcon(), s = !this._showTools && !this._showSelectionTools ? "display-none" : e, i = this._showEllipsisTools ? "" : "display-none", o = this._showSearchWidget ? "" : "display-none", l = this._showBasemapWidget ? "" : "display-none", d = this._showLegendWidget ? "" : "display-none", c = this._showFloorFilter ? "" : "display-none", p = this._showLayersListWidget ? "" : "display-none", g = this._showTools ? this._translations.collapse : this._translations.expand, f = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableLayerList && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "", w = document.dir === "rtl" ? "margin-right-1-2" : "margin-left-1-2", u = this.enableSingleExpand ? this.layout === "horizontal" ? w : "margin-top-1-2" : "", y = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", m = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "", b = this._showSelectionTools ? this.selectionTools : this._mapTools;
+    return h`<div class=${`${f} ${e} height-0`}>${this.enableSingleExpand ? h`<div class=${n(m)}>${this._getActionGroup(t, !1, g || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${u} ${m} ${s}`}>${this._getMapWidgets(b)}</div><div><div class=${n(y)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${n(i)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${n(l)} .mapView=${this.mapView} ${r(this._basemapElement)}></map-basemap-gallery><map-search class=${n(o)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${r(this._searchElement)}></map-search><map-legend class=${n(d)} .mapView=${this.mapView} ${r(this._legendElement)}></map-legend><layer-list-widget class=${n(p)} .mapView=${this.mapView} .visibilityIcon=${this.visibilityIcon} ${r(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${n(c)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${r(this._floorFilterElement)}></map-floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
       this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !1;
-    }} .selectedLayerId=${this.selectedLayer?.id} ${h(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && r`<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 && this.selectedLayer && r`<map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this.enabledLayerIds} .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>` || ""}`;
+    }} .selectedLayerId=${this.selectedLayer?.id} ${r(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && h`<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 && this.selectedLayer && h`<map-layer-picker appearance=transparent .configLayerOrderDefined=${this.configLayerOrderDefined} .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this.enabledLayerIds} .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>` || ""}`;
   }
   _initHome() {
-    this.enableHome && (this._homeWidget = new C({
-      view: this.mapView
-    }));
+    this.enableHome && (this._homeComponent = document.createElement("arcgis-home"), this._homeComponent.view = this.mapView, this._homeComponent.viewpoint = this.mapView?.viewpoint?.clone());
   }
   _setZoomToolsSize() {
-    const s = document.getElementsByClassName("esri-zoom")[0]?.children[0], e = document.getElementsByClassName("esri-zoom")[0]?.children[1];
-    if (s && e) {
-      const t = this.zoomToolsSize === "s" ? "32px" : this.zoomToolsSize === "m" ? "40px" : "48px";
-      s.style.width = t, s.style.height = t, e.style.width = t, e.style.height = t;
+    const e = document.getElementById("arcgis-map");
+    if (!!!e?.shadowRoot?.querySelector(".esri-zoom"))
+      return;
+    const s = e.shadowRoot?.querySelectorAll(".esri-widget--button")[0], i = e.shadowRoot?.querySelectorAll(".esri-widget--button")[1];
+    if (s && i) {
+      const o = this.zoomToolsSize === "s" ? "32px" : this.zoomToolsSize === "m" ? "40px" : "48px";
+      s.style.width = o, s.style.height = o, i.style.width = o, i.style.height = o;
     }
     if (this.layout === "horizontal") {
-      const t = document.dir || "ltr", o = t === "ltr" ? "esri-ui-top-left" : "esri-ui-top-right", l = t === "ltr" ? 0 : this.parentComponentWidth - 62;
-      let i = t === "ltr" ? this._showTools ? "ltr" : "rtl" : this._showTools ? "rtl" : "ltr";
-      document.getElementsByClassName(o)[0]?.firstElementChild?.tagName === "MAP-TOOLS" && !this._showTools && (i = t), document.getElementsByClassName("esri-zoom")[0]?.setAttribute("style", `position: absolute; top: 50px; left: ${l}px`), this._showSelectionTools || document.getElementsByClassName(o)[0]?.setAttribute("style", `flex-direction: row; gap: 5px; align-items: flex-start; direction: ${i} !important; z-index: 1;`);
+      const o = document.dir || "ltr", l = o === "ltr" ? ".esri-ui-top-left" : ".esri-ui-top-right", d = o === "ltr" ? 0 : this.parentComponentWidth - 62;
+      let c = o === "ltr" ? this._showTools ? "ltr" : "rtl" : this._showTools ? "rtl" : "ltr";
+      e.shadowRoot?.querySelector(l)?.firstElementChild?.tagName === "MAP-TOOLS" && !this._showTools && (c = o), e.shadowRoot && (e.shadowRoot.querySelector(".esri-zoom")?.setAttribute("style", `position: absolute; top: 50px; left: ${d}px`), this._showSelectionTools || e.shadowRoot.querySelector(l)?.setAttribute("style", `flex-direction: row; gap: 5px; align-items: flex-start; direction: ${c} !important; z-index: 1;`));
     }
   }
   _getToggleIcon() {
-    const s = document.dir || "ltr";
-    return this.layout === "horizontal" ? s === "ltr" ? this._showTools ? "chevrons-left" : "chevrons-right" : this._showTools ? "chevrons-right" : "chevrons-left" : this._showTools ? "chevrons-up" : "chevrons-down";
+    const e = document.dir || "ltr";
+    return this.layout === "horizontal" ? e === "ltr" ? this._showTools ? "chevrons-left" : "chevrons-right" : this._showTools ? "chevrons-right" : "chevrons-left" : this._showTools ? "chevrons-up" : "chevrons-down";
   }
-  _updateTools(s) {
-    const e = this._showSelectionTools ? JSON.parse(JSON.stringify(this.selectionTools)) : JSON.parse(JSON.stringify(this.toolOrder));
+  _updateTools(e) {
+    const t = this._showSelectionTools ? JSON.parse(JSON.stringify(this.selectionTools)) : JSON.parse(JSON.stringify(this.toolOrder));
     this._hasFloorInfo = this.mapView?.map?.floorInfo;
-    const t = e.indexOf("floorfilter");
-    t > -1 && !this._hasFloorInfo && e.splice(t, 1);
-    const o = 40;
-    let l = 110;
-    this.isMobile && (this.enableMapPicker || this.enableMapLayerPicker) && (l = 160);
-    const i = Math.ceil((s - l) / o) - 1;
-    i && i !== e.length - 1 ? (this._mapTools = e.slice(0, i), this._ellipsisTools = e.slice(i, e.length)) : (this._mapTools = e, this._ellipsisTools = []);
-  }
-  _getMapWidgets(s) {
-    const e = this._showFullscreen ? "full-screen-exit" : "full-screen", t = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen, o = this._isValidWebMap ? "map" : "exclamation-mark-triangle", l = this.selectedLayer === void 0 ? "exclamation-mark-triangle" : "layers";
-    return s.map((i) => {
+    const s = t.indexOf("floorfilter");
+    s > -1 && !this._hasFloorInfo && t.splice(s, 1);
+    const i = this.mapWidgetsSize === "s" ? 32 : this.mapWidgetsSize === "m" ? 40 : 48;
+    let o = 110;
+    this.isMobile && (this.enableMapPicker || this.enableMapLayerPicker) && (o = 160);
+    const l = Math.ceil((e - o) / i) - 1;
+    l && l !== t.length - 1 ? (this._mapTools = t.slice(0, l), this._ellipsisTools = t.slice(l, t.length)) : (this._mapTools = t, this._ellipsisTools = []);
+  }
+  _getMapWidgets(e) {
+    const t = this._isValidWebMap ? "map" : "exclamation-mark-triangle", s = this.selectedLayer === void 0 ? "exclamation-mark-triangle" : "layers";
+    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(i, 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?.legendRef.value, !0) : void 0;
         case "search":
-          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;
+          return this.enableSearch && this.enableSingleExpand ? this._getActionGroup("magnifying-glass", !1, this._translations.search, () => this._search()) : this.enableSearch ? this._getWidget(i, this._searchElement.value?.searchComponent.value, !0) : void 0;
         case "fullscreen":
-          return this.enableFullscreen && this.enableSingleExpand ? this._getActionGroup(e, !1, t || "", () => this._expand()) : this.enableFullscreen ? this._getWidget(i, this._fullscreenElement.value?.fullscreenWidget, !1) : void 0;
+          return this.enableFullscreen && this.enableSingleExpand ? this._getFullScreenComponent() : this.enableFullscreen ? this._getWidget(i, this._fullscreenElement.value?.fullscreenRef.value, !1) : void 0;
         case "basemap":
-          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;
+          return this.enableBasemap && this.enableSingleExpand ? this._getActionGroup("basemap", !1, this._translations.basemap, () => this._toggleBasemapPicker()) : this.enableBasemap ? this._getWidget(i, this._basemapElement.value?.basemapGalleryRef.value, !0) : void 0;
         case "layers-list":
-          return this.enableLayerList && this.enableSingleExpand ? this._getActionGroup("layers", !1, this._translations.layers || "", () => this._toggleLayerListWidget()) : this.enableLayerList ? this._getWidget(i, this._layerListWidgetElement.value?.layerListWidget, !0) : void 0;
+          return this.enableLayerList && this.enableSingleExpand ? this._getActionGroup("layers", !1, this._translations.layers || "", () => this._toggleLayerListWidget()) : this.enableLayerList ? this._getWidget(i, this._layerListWidgetElement.value?.layerListRef.value, !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(i, 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?.floorFilterRef.value, !0) : void 0;
         case "selectiontool":
           return this.enableSelectionTool && this.selectedLayer ? (
             // if selection tool is enabled and a layer is selected only then show selection tool
@@ -153,35 +148,36 @@ class M extends F {
             this._getActionGroup("erase", !1, this._translations.clearSelection, () => this.clearSelection.emit())
           ) : void 0;
         case "home":
-          return this.enableHome ? this._getActionGroup("home", !1, this._translations.defaultMapView, () => this._homeWidget?.go()) : void 0;
+          return this.enableHome ? this._getActionGroup("home", !1, this._translations.defaultMapView, () => {
+            this._homeComponent?.go();
+          }) : void 0;
         case "map-picker":
-          return this.enableMapPicker ? this._getActionGroup(o, !1, "", () => {
+          return this.enableMapPicker ? this._getActionGroup(t, !1, "", () => {
           }, !this._isValidWebMap) : void 0;
         case "map-layer-picker":
-          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(l, !1, "", () => {
+          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(s, !1, "", () => {
           }, this.selectedLayer === void 0) : void 0;
         default:
           return "";
       }
     });
   }
-  _fullscreenStateChange(s) {
-    s === "ready" && this._showFullscreen ? this._showFullscreen = !1 : s === "active" && !this._showFullscreen && (this._showFullscreen = !0);
+  _getFullScreenComponent() {
+    return h`<map-fullscreen .mapView=${this.mapView}></map-fullscreen>`;
   }
-  _getActionGroup(s, e, t, o, l, i) {
-    const c = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", d = this.stackTools ? "" : "margin-bottom-1-2", p = this.stackTools ? "" : "box-shadow";
-    return r`<div><calcite-action alignment=center appearance=solid .indicator=${i} class=${`map-actions ${c} ${d} border-bottom ${p} ${l ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${s} id=${s ?? f} @click=${o} scale=s .text=${t} ${h(this._mapTool)}><calcite-icon aria-hidden=true icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && t && r`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${s ?? f}><span>${t}</span></calcite-tooltip>` || ""}</div>`;
+  _getActionGroup(e, t, s, i, o, l) {
+    const d = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", c = this.stackTools ? "" : "margin-bottom-1-2", p = this.stackTools ? "" : "box-shadow";
+    return h`<div class="height-fit-content"><calcite-action alignment=center .indicator=${l} class=${`map-actions ${d} ${c} border-bottom ${p} ${o ? "danger-icon-color" : ""}`} .disabled=${t} .icon=${e} id=${e ?? _} @click=${i} scale=m .text=${s} ${r(this._mapTool)}><calcite-icon aria-hidden=true icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && s && h`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${e ?? _}><span>${s}</span></calcite-tooltip>` || ""}</div>`;
   }
-  _getWidget(s, e, t) {
-    if (this._widgets.indexOf(s) < 0 && this.mapView && e) {
-      const o = this.toolOrder.indexOf(s), l = new E({
-        view: this.mapView,
-        content: e
-      }), i = this.enableHome ? 2 : 1;
-      this.mapView.ui.add(t ? l : e, {
+  _getWidget(e, t, s) {
+    if (this._widgets.indexOf(e) < 0 && this.mapView && t) {
+      const i = this.toolOrder.indexOf(e), o = document.createElement("arcgis-expand");
+      o.view = this.mapView, o.appendChild(t);
+      const l = this.enableHome ? 2 : 1;
+      this.mapView.ui.add(s ? o : t, {
         position: this.position,
-        index: o > -1 ? o + i : 1
-      }), this._widgets.push(s);
+        index: i > -1 ? i + l : 1
+      }), this._widgets.push(e);
     }
   }
   _showLegend() {
@@ -202,11 +198,8 @@ class M extends F {
   _onSelectionToolClick() {
     this._showSelectionTools = !this._showSelectionTools, this._showTools = !1, this._toggleEllipsisTools();
   }
-  _toggleSelectionTool(s) {
-    s === "rectangle" ? (this._lassoSelectionToolActive = !1, this._rectangleSelectionToolActive = !this._rectangleSelectionToolActive) : s === "freehandPolygon" && (this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !this._lassoSelectionToolActive), this._selectionToolElement.value?.toggleSelectionTool(s, this._rectangleSelectionToolActive || this._lassoSelectionToolActive);
-  }
-  _expand() {
-    this._showFullscreen = !this._showFullscreen;
+  _toggleSelectionTool(e) {
+    e === "rectangle" ? (this._lassoSelectionToolActive = !1, this._rectangleSelectionToolActive = !this._rectangleSelectionToolActive) : e === "freehandPolygon" && (this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !this._lassoSelectionToolActive), this._selectionToolElement.value?.toggleSelectionTool(e, this._rectangleSelectionToolActive || this._lassoSelectionToolActive);
   }
   _toggleTools() {
     this._showTools || (this._showSelectionTools = !1, this._showBasemapWidget = !1, this._showLayersListWidget = !1, this._showSearchWidget = !1, this._showLegendWidget = !1, this._showFloorFilter = !1), this._rectangleSelectionToolActive ? this._toggleSelectionTool("rectangle") : this._lassoSelectionToolActive && this._toggleSelectionTool("freehandPolygon"), this._showTools = !this._showTools, this._toggleEllipsisTools(), this._updateTools(this.parentComponentWidth);
@@ -215,7 +208,7 @@ class M extends F {
     this._showEllipsisTools = !this._showEllipsisTools;
   }
 }
-W("map-tools", M);
+T("map-tools", x);
 export {
-  M as MapTools
+  x as MapTools
 };

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

@@ -1,12 +1,12 @@
 import "../map-basemap-gallery/index.js";
 import "../map-search/index.js";
 import "../map-legend/index.js";
-import "../map-fullscreen/index.js";
 import "../layer-list-widget/index.js";
 import "../map-floor-filter/index.js";
 import "../selection-tool/index.js";
 import "../map-picker/index.js";
 import "../map-layer-picker/index.js";
+import "../map-fullscreen/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/selection-tool/customElement.d.ts

@@ -3,7 +3,7 @@ import type MapView from "@arcgis/core/views/MapView.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 
 export abstract class SelectionTool extends LitElement {
-  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views/MapView.html */
   accessor mapView: MapView | undefined;
   /**
    * string: Selected layer id

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

@@ -30,7 +30,7 @@ class d extends c {
   async toggleSelectionTool(e, t) {
     if (this._graphicsLayer?.removeAll(), this._selectionTool?.state === "active" && this._selectionTool.cancel(), t) {
       const i = e ?? this.tool;
-      this._selectionTool?.create(i);
+      await this._selectionTool?.create(i);
     }
   }
   async loaded() {