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

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

@@ -1,221 +1,515 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/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";
-import C from "@arcgis/core/widgets/Home";
-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 customElement } from "../../chunks/runtime.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html, nothing } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, safeClassMap } from "@arcgis/lumina";
+import Expand from "@arcgis/core/widgets/Expand";
+import Home from "@arcgis/core/widgets/Home";
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}
+
+.display-none {
+  display: none;
+}
+
+.display-flex {
+  display: flex;
+}
+
+.margin-top-1-2 {
+  margin-top: 0.5rem;
+}
+
+.margin-left-1-2 {
+  margin-left: 0.5rem;
+}
+
+.margin-right-1-2 {
+  margin-right: 0.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 rgba(0, 0, 0, 0.3);
+}
+
+.margin-bottom-1-2 {
+  margin-bottom: 0.5rem;
+}
+
+.danger-icon-color {
+  --calcite-icon-color: var(--calcite-color-status-danger);
+}`;
+class MapTools extends LitElement {
   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 = false;
+    this.enableLayerList = false;
+    this.enableFloorFilter = false;
+    this.enableFullscreen = false;
+    this.enableSearch = false;
+    this.enableBasemap = false;
+    this.enableHome = false;
+    this.enableSingleExpand = false;
+    this.zoomToolsSize = "m";
+    this.layout = "vertical";
+    this.mapWidgetsSize = "m";
+    this.enableMapPicker = false;
+    this.enableMapLayerPicker = false;
+    this.position = "top-leading";
+    this.stackTools = true;
+    this.enableSelectionTool = false;
+    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 = false;
+    this.selectedFeaturesIds = [];
+    this.selectedWebMapId = "";
+    this.showOnlyUpdatableLayers = false;
+    this.visibilityIcon = "eyeball";
+    this._hasFloorInfo = false;
+    this._translations = useT9n({ name: "map-tools", blocking: true });
+    this._showTools = true;
+    this._showBasemapWidget = false;
+    this._showFloorFilter = false;
+    this._showFullscreen = false;
+    this._showLegendWidget = false;
+    this._showSearchWidget = false;
+    this._showLayersListWidget = false;
+    this._rectangleSelectionToolActive = false;
+    this._lassoSelectionToolActive = false;
+    this._showEllipsisTools = true;
+    this._ellipsisTools = [];
+    this._isValidWebMap = true;
+    this._showSelectionTools = false;
+    this._basemapElement = createRef();
+    this._floorFilterElement = createRef();
+    this._fullscreenElement = createRef();
+    this._layerListWidgetElement = createRef();
+    this._legendElement = createRef();
+    this._searchElement = createRef();
+    this._widgets = [];
+    this._selectionToolElement = createRef();
+    this._mapTools = [];
+    this._mapTool = createRef();
+    this.clearSelection = createEvent();
+    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, {}, { attribute: false }], enabledLayerIds: [0, {}, { attribute: false }], enableLegend: [5, {}, { type: Boolean }], enableLayerList: [5, {}, { type: Boolean }], enableFloorFilter: [5, {}, { type: Boolean }], enableFullscreen: [5, {}, { type: Boolean }], enableSearch: [5, {}, { type: Boolean }], enableBasemap: [5, {}, { type: Boolean }], enableHome: [5, {}, { type: Boolean }], enableSingleExpand: [5, {}, { type: Boolean }], zoomToolsSize: 1, layout: 1, mapView: [0, {}, { attribute: false }], mapWidgetsSize: 1, enableMapPicker: [5, {}, { type: Boolean }], enableMapLayerPicker: [5, {}, { type: Boolean }], position: 1, searchConfiguration: [0, {}, { attribute: false }], stackTools: [5, {}, { type: Boolean }], enableSelectionTool: [5, {}, { type: Boolean }], toolOrder: [0, {}, { attribute: false }], selectionTools: [0, {}, { attribute: false }], selectedLayer: [0, {}, { attribute: false }], mapInfos: [0, {}, { attribute: false }], defaultLayerId: 1, isMobile: [5, {}, { type: Boolean }], parentComponentHeight: [9, {}, { type: Number }], parentComponentWidth: [9, {}, { type: Number }], selectedFeaturesIds: [0, {}, { attribute: false }], selectedWebMapId: 1, showOnlyUpdatableLayers: [5, {}, { type: Boolean }], mapInfo: [0, {}, { attribute: false }], visibilityIcon: 1, _hasFloorInfo: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _showTools: [16, {}, { state: true }], _showBasemapWidget: [16, {}, { state: true }], _showFloorFilter: [16, {}, { state: true }], _showFullscreen: [16, {}, { state: true }], _showLegendWidget: [16, {}, { state: true }], _showSearchWidget: [16, {}, { state: true }], _showLayersListWidget: [16, {}, { state: true }], _rectangleSelectionToolActive: [16, {}, { state: true }], _lassoSelectionToolActive: [16, {}, { state: true }], _showEllipsisTools: [16, {}, { state: true }], _ellipsisTools: [16, {}, { state: true }], _isValidWebMap: [16, {}, { state: true }], _showSelectionTools: [16, {}, { state: true }] };
   }
   static {
-    this.styles = x;
+    this.styles = 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(changes) {
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
+    if (changes.has("parentComponentWidth")) {
+      if (this.parentComponentWidth) {
+        void this.parentComponentWidthWatchHandler(this.parentComponentWidth);
+      }
+    }
+    if (changes.has("_showBasemapWidget") && (this.hasUpdated || this._showBasemapWidget !== false)) {
+      void this._showBasemapWidgetWatchHandler(this._showBasemapWidget);
+    }
+    if (changes.has("_showLayersListWidget") && (this.hasUpdated || this._showLayersListWidget !== false)) {
+      void this._showLayersListWidgetWatchHandler(this._showLayersListWidget);
+    }
+    if (changes.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== false)) {
+      void this._showFloorFilterWatchHandler(this._showFloorFilter);
+    }
+    if (changes.has("_showFullscreen") && (this.hasUpdated || this._showFullscreen !== false)) {
+      void this._showFullscreenWatchHandler(this._showFullscreen);
+    }
+    if (changes.has("_showLegendWidget") && (this.hasUpdated || this._showLegendWidget !== false)) {
+      void this._showLegendWidgetWatchHandler(this._showLegendWidget);
+    }
+    if (changes.has("_showSearchWidget") && (this.hasUpdated || this._showSearchWidget !== false)) {
+      void this._showSearchWidgetWatchHandler(this._showSearchWidget);
+    }
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(() => {
-      this.enableHome && this._initHome(), this.parentComponentWidth && this._updateTools(this.parentComponentWidth);
+      if (this.enableHome) {
+        this._initHome();
+      }
+      if (this.parentComponentWidth) {
+        this._updateTools(this.parentComponentWidth);
+      }
     });
   }
-  async parentComponentWidthWatchHandler(s) {
-    this._updateTools(s);
-  }
-  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, {
-      position: this.position,
-      index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
-  }
-  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, {
-      position: this.position,
-      index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
-  }
-  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, {
-      position: this.position,
-      index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
-  }
-  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, {
-      position: this.position,
-      index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
-  }
-  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, {
-      position: this.position,
-      index: 1
-    }), e.container?.style.setProperty("direction", t)) : this.mapView?.ui.remove(e));
-  }
-  async mapChanged(s) {
-    const e = s.detail.isValid;
-    this._isValidWebMap = e, this._showTools || this._toggleTools();
-  }
-  async _layerSelectionChange(s) {
-    this._showTools || this._toggleTools();
+  async parentComponentWidthWatchHandler(v) {
+    this._updateTools(v);
+  }
+  async _showBasemapWidgetWatchHandler(v) {
+    const widget = this._basemapElement.value ? this._basemapElement.value.basemapWidget : void 0;
+    const direction = document.dir === "rtl" ? "rtl" : "ltr";
+    if (widget) {
+      if (v) {
+        this.mapView?.ui.add(widget, {
+          position: this.position,
+          index: 1
+        });
+        widget.container?.style.setProperty("direction", direction);
+      } else {
+        this.mapView?.ui.remove(widget);
+      }
+    }
+  }
+  async _showLayersListWidgetWatchHandler(v) {
+    const widget = this._layerListWidgetElement.value ? this._layerListWidgetElement.value.layerListWidget : void 0;
+    const direction = document.dir === "rtl" ? "rtl" : "ltr";
+    if (widget) {
+      if (v) {
+        this.mapView?.ui.add(widget, {
+          position: this.position,
+          index: 1
+        });
+        widget.container?.style.setProperty("direction", direction);
+      } else {
+        this.mapView?.ui.remove(widget);
+      }
+    }
+  }
+  async _showFloorFilterWatchHandler(v) {
+    const widget = this._floorFilterElement.value ? this._floorFilterElement.value.floorFilterWidget : void 0;
+    const direction = document.dir === "rtl" ? "rtl" : "ltr";
+    if (widget) {
+      if (v) {
+        this.mapView?.ui.add(widget, {
+          position: this.position,
+          index: 1
+        });
+        widget.container?.style.setProperty("direction", direction);
+      } else {
+        this.mapView?.ui.remove(widget);
+      }
+    }
+  }
+  async _showFullscreenWatchHandler(v) {
+    const widget = this._fullscreenElement.value ? this._fullscreenElement.value.fullscreenWidget : void 0;
+    if (widget) {
+      if (v) {
+        if (widget.viewModel.state === "ready") {
+          widget.viewModel.enter();
+        }
+      } else {
+        if (widget.viewModel.state === "active") {
+          widget.viewModel.exit();
+        }
+      }
+    }
+  }
+  async _showLegendWidgetWatchHandler(v) {
+    const widget = this._legendElement.value ? this._legendElement.value.legendWidget : void 0;
+    const direction = document.dir === "rtl" ? "rtl" : "ltr";
+    if (widget) {
+      if (v) {
+        this.mapView?.ui.add(widget, {
+          position: this.position,
+          index: 1
+        });
+        widget.container?.style.setProperty("direction", direction);
+      } else {
+        this.mapView?.ui.remove(widget);
+      }
+    }
+  }
+  async _showSearchWidgetWatchHandler(v) {
+    const widget = this._searchElement.value ? this._searchElement.value.searchWidget : void 0;
+    const direction = document.dir === "rtl" ? "rtl" : "ltr";
+    if (widget) {
+      if (v) {
+        this.mapView?.ui.add(widget, {
+          position: this.position,
+          index: 1
+        });
+        widget.container?.style.setProperty("direction", direction);
+      } else {
+        this.mapView?.ui.remove(widget);
+      }
+    }
+  }
+  async mapChanged(_evt) {
+    const _isValid = _evt.detail.isValid;
+    this._isValidWebMap = _isValid;
+    if (!this._showTools) {
+      this._toggleTools();
+    }
+  }
+  async _layerSelectionChange(_evt) {
+    if (!this._showTools) {
+      this._toggleTools();
+    }
   }
   async load() {
     this._mapTools = [...this.toolOrder];
   }
   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=${() => {
-      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>` || ""}`;
+    const toggleIconClass = this.layout === "horizontal" ? "display-flex" : "";
+    const toggleIcon = this._getToggleIcon();
+    const toolsClass = !this._showTools && !this._showSelectionTools ? "display-none" : toggleIconClass;
+    const ellispsisToolsClass = this._showEllipsisTools ? "" : "display-none";
+    const searchClass = this._showSearchWidget ? "" : "display-none";
+    const basemapClass = this._showBasemapWidget ? "" : "display-none";
+    const legendClass = this._showLegendWidget ? "" : "display-none";
+    const floorFilterClass = this._showFloorFilter ? "" : "display-none";
+    const fullscreenClass = this._showFullscreen ? "" : "display-none";
+    const layersListClass = this._showLayersListWidget ? "" : "display-none";
+    const expandTip = this._showTools ? this._translations.collapse : this._translations.expand;
+    const containerClass = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableLayerList && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "";
+    const ellipsisToolsContainerMargin = document.dir === "rtl" ? "margin-right-1-2" : "margin-left-1-2";
+    const toolMarginClass = !this.enableSingleExpand ? "" : this.layout === "horizontal" ? ellipsisToolsContainerMargin : "margin-top-1-2";
+    const ellipsisToolsContainer = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none";
+    const shadowClass = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "";
+    const mapTools = this._showSelectionTools ? this.selectionTools : this._mapTools;
+    return html`<div class=${`${containerClass} ${toggleIconClass}`}>${this.enableSingleExpand ? html`<div class=${safeClassMap(shadowClass)}>${this._getActionGroup(toggleIcon, false, expandTip || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${toolMarginClass} ${shadowClass} ${toolsClass}`}>${this._getMapWidgets(mapTools)}</div><div><div class=${safeClassMap(ellipsisToolsContainer)}>${this._getActionGroup("ellipsis", false, "", () => this._toggleEllipsisTools())}<div class=${safeClassMap(ellispsisToolsClass)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${safeClassMap(basemapClass)} .mapView=${this.mapView} ${ref(this._basemapElement)}></map-basemap-gallery><map-search class=${safeClassMap(searchClass)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${ref(this._searchElement)}></map-search><map-legend class=${safeClassMap(legendClass)} .mapView=${this.mapView} ${ref(this._legendElement)}></map-legend><map-fullscreen class=${safeClassMap(fullscreenClass)} .mapView=${this.mapView} @fullscreenStateChange=${(_evt) => this._fullscreenStateChange(_evt.detail)} ${ref(this._fullscreenElement)}></map-fullscreen><layer-list-widget class=${safeClassMap(layersListClass)} .mapView=${this.mapView} @fullscreenStateChange=${(_evt) => this._fullscreenStateChange(_evt.detail)} .visibilityIcon=${this.visibilityIcon} ${ref(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${safeClassMap(floorFilterClass)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${ref(this._floorFilterElement)}></map-floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
+      this._rectangleSelectionToolActive = false;
+      this._lassoSelectionToolActive = false;
+    }} .selectedLayerId=${this.selectedLayer?.id} ${ref(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && html`<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 && html`<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>` || ""}`;
   }
   _initHome() {
-    this.enableHome && (this._homeWidget = new C({
-      view: this.mapView
-    }));
+    if (this.enableHome) {
+      this._homeWidget = new Home({
+        view: this.mapView
+      });
+    }
   }
   _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 zoomIn = document.getElementsByClassName("esri-zoom")[0]?.children[0];
+    const zoomOut = document.getElementsByClassName("esri-zoom")[0]?.children[1];
+    if (zoomIn && zoomOut) {
+      const size = this.zoomToolsSize === "s" ? "32px" : this.zoomToolsSize === "m" ? "40px" : "48px";
+      zoomIn.style.width = size;
+      zoomIn.style.height = size;
+      zoomOut.style.width = size;
+      zoomOut.style.height = size;
     }
     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 documentDir = document.dir || "ltr";
+      const mapTools = documentDir === "ltr" ? "esri-ui-top-left" : "esri-ui-top-right";
+      const zoomLeft = documentDir === "ltr" ? 0 : this.parentComponentWidth - 62;
+      let toolsDirection = documentDir === "ltr" ? this._showTools ? "ltr" : "rtl" : this._showTools ? "rtl" : "ltr";
+      const isMapTools = document.getElementsByClassName(mapTools)[0]?.firstElementChild?.tagName === "MAP-TOOLS";
+      if (isMapTools && !this._showTools) {
+        toolsDirection = documentDir;
+      }
+      document.getElementsByClassName("esri-zoom")[0]?.setAttribute("style", `position: absolute; top: 50px; left: ${zoomLeft}px`);
+      if (!this._showSelectionTools) {
+        document.getElementsByClassName(mapTools)[0]?.setAttribute("style", `flex-direction: row; gap: 5px; align-items: flex-start; direction: ${toolsDirection} !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 documentDir = document.dir || "ltr";
+    return this.layout === "horizontal" ? documentDir === "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(parentComponentWidth) {
+    const allMapTools = 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) => {
-      switch (i) {
+    const index = allMapTools.indexOf("floorfilter");
+    if (index > -1 && !this._hasFloorInfo) {
+      allMapTools.splice(index, 1);
+    }
+    const toolWidth = 40;
+    let widthToDeduct = 110;
+    if (this.isMobile && (this.enableMapPicker || this.enableMapLayerPicker)) {
+      widthToDeduct = 160;
+    }
+    const toolsToFit = Math.ceil((parentComponentWidth - widthToDeduct) / toolWidth) - 1;
+    if (toolsToFit && toolsToFit !== allMapTools.length - 1) {
+      this._mapTools = allMapTools.slice(0, toolsToFit);
+      this._ellipsisTools = allMapTools.slice(toolsToFit, allMapTools.length);
+    } else {
+      this._mapTools = allMapTools;
+      this._ellipsisTools = [];
+    }
+  }
+  _getMapWidgets(toolOrder) {
+    const fullscreenIcon = this._showFullscreen ? "full-screen-exit" : "full-screen";
+    const fullscreenTip = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
+    const mapIcon = this._isValidWebMap ? "map" : "exclamation-mark-triangle";
+    const layersIcon = this.selectedLayer === void 0 ? "exclamation-mark-triangle" : "layers";
+    return toolOrder.map((t) => {
+      switch (t) {
         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", false, this._translations.legend, () => this._showLegend()) : this.enableLegend ? this._getWidget(t, this._legendElement.value?.legendWidget, true) : 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", false, this._translations.search, () => this._search()) : this.enableSearch ? this._getWidget(t, this._searchElement.value?.searchWidget, true) : 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._getActionGroup(fullscreenIcon, false, fullscreenTip || "", () => this._expand()) : this.enableFullscreen ? this._getWidget(t, this._fullscreenElement.value?.fullscreenWidget, false) : 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", false, this._translations.basemap, () => this._toggleBasemapPicker()) : this.enableBasemap ? this._getWidget(t, this._basemapElement.value?.basemapWidget, true) : 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", false, this._translations.layers || "", () => this._toggleLayerListWidget()) : this.enableLayerList ? this._getWidget(t, this._layerListWidgetElement.value?.layerListWidget, true) : 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", false, this._translations.floorFilter, () => this._toggleFloorFilter()) : this.enableFloorFilter && this._hasFloorInfo ? this._getWidget(t, this._floorFilterElement.value?.floorFilterWidget, true) : void 0;
         case "selectiontool":
           return this.enableSelectionTool && this.selectedLayer ? (
             // if selection tool is enabled and a layer is selected only then show selection tool
-            this._getActionGroup("cursor-selection", !1, this._translations.selectionTools, this._onSelectionToolClick, !1)
+            this._getActionGroup("cursor-selection", false, this._translations.selectionTools, this._onSelectionToolClick, false)
           ) : void 0;
         case "rectangle-select":
           return this.enableSelectionTool && this.selectedLayer ? (
             // if selection tool is enabled and a layer is selected then only show selection tool
-            this._getActionGroup("cursor-marquee", !1, this._translations.selectByRectangle, () => this._toggleSelectionTool("rectangle"), !1, this._rectangleSelectionToolActive)
+            this._getActionGroup("cursor-marquee", false, this._translations.selectByRectangle, () => this._toggleSelectionTool("rectangle"), false, this._rectangleSelectionToolActive)
           ) : void 0;
         case "lasso-select":
           return this.enableSelectionTool && this.selectedLayer ? (
             // if selection tool is enabled and a layer is selected then only show selection tool
-            this._getActionGroup("lasso-select", !1, this._translations.selectByLasso, () => this._toggleSelectionTool("freehandPolygon"), !1, this._lassoSelectionToolActive)
+            this._getActionGroup("lasso-select", false, this._translations.selectByLasso, () => this._toggleSelectionTool("freehandPolygon"), false, this._lassoSelectionToolActive)
           ) : void 0;
         case "clear-selection":
           return this.selectedLayer && this.selectedFeaturesIds.length > 0 ? (
             // on mobile show clear selection tool only when a layer is selected
-            this._getActionGroup("erase", !1, this._translations.clearSelection, () => this.clearSelection.emit())
+            this._getActionGroup("erase", false, 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", false, this._translations.defaultMapView, () => this._homeWidget?.go()) : void 0;
         case "map-picker":
-          return this.enableMapPicker ? this._getActionGroup(o, !1, "", () => {
-          }, !this._isValidWebMap) : void 0;
+          return this.enableMapPicker ? this._getActionGroup(mapIcon, false, "", () => void 0, !this._isValidWebMap) : void 0;
         case "map-layer-picker":
-          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(l, !1, "", () => {
-          }, this.selectedLayer === void 0) : void 0;
+          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(layersIcon, false, "", () => void 0, this.selectedLayer === void 0) : void 0;
         default:
           return "";
       }
     });
   }
-  _fullscreenStateChange(s) {
-    s === "ready" && this._showFullscreen ? this._showFullscreen = !1 : s === "active" && !this._showFullscreen && (this._showFullscreen = !0);
-  }
-  _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 ${h(this._mapTool)}><calcite-icon 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>`;
+  _fullscreenStateChange(state) {
+    if (state === "ready" && this._showFullscreen) {
+      this._showFullscreen = false;
+    } else if (state === "active" && !this._showFullscreen) {
+      this._showFullscreen = true;
+    }
   }
-  _getWidget(s, e, t) {
-    if (this._widgets.indexOf(s) < 0 && this.mapView && e) {
-      const o = this.toolOrder.indexOf(s), l = new E({
+  _getActionGroup(icon, disabled, tip, func, isDanger, active) {
+    const sizeClass = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48";
+    const stackClass = this.stackTools ? "" : "margin-bottom-1-2";
+    const shadowClass = this.stackTools ? "" : "box-shadow";
+    const iconClass = isDanger ? "danger-icon-color" : "";
+    return html`<div><calcite-action alignment=center appearance=solid .indicator=${active} class=${`map-actions ${sizeClass} ${stackClass} border-bottom ${shadowClass} ${iconClass}`} .disabled=${disabled} .icon=${icon} id=${icon ?? nothing} @click=${func} scale=s text ${ref(this._mapTool)}><calcite-icon icon=chevron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && tip && html`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${icon ?? nothing}><span>${tip}</span></calcite-tooltip>` || ""}</div>`;
+  }
+  _getWidget(name, content, internalExpand) {
+    if (this._widgets.indexOf(name) < 0 && this.mapView && content) {
+      const i = this.toolOrder.indexOf(name);
+      const exp = new Expand({
         view: this.mapView,
-        content: e
-      }), i = this.enableHome ? 2 : 1;
-      this.mapView.ui.add(t ? l : e, {
+        content
+      });
+      const v = this.enableHome ? 2 : 1;
+      this.mapView.ui.add(internalExpand ? exp : content, {
         position: this.position,
-        index: o > -1 ? o + i : 1
-      }), this._widgets.push(s);
+        index: i > -1 ? i + v : 1
+      });
+      this._widgets.push(name);
     }
   }
   _showLegend() {
-    this._showLegendWidget = !this._showLegendWidget, this._showTools = !1, this._toggleEllipsisTools();
+    this._showLegendWidget = !this._showLegendWidget;
+    this._showTools = false;
+    this._toggleEllipsisTools();
   }
   _search() {
-    this._showSearchWidget = !this._showSearchWidget, this._showTools = !1, this._toggleEllipsisTools();
+    this._showSearchWidget = !this._showSearchWidget;
+    this._showTools = false;
+    this._toggleEllipsisTools();
   }
   _toggleBasemapPicker() {
-    this._showBasemapWidget = !this._showBasemapWidget, this._showTools = !1, this._toggleEllipsisTools();
+    this._showBasemapWidget = !this._showBasemapWidget;
+    this._showTools = false;
+    this._toggleEllipsisTools();
   }
   _toggleLayerListWidget() {
-    this._showLayersListWidget = !this._showLayersListWidget, this._showTools = !1, this._toggleEllipsisTools();
+    this._showLayersListWidget = !this._showLayersListWidget;
+    this._showTools = false;
+    this._toggleEllipsisTools();
   }
   _toggleFloorFilter() {
-    this._showFloorFilter = !this._showFloorFilter, this._showTools = !1, this._toggleEllipsisTools();
+    this._showFloorFilter = !this._showFloorFilter;
+    this._showTools = false;
+    this._toggleEllipsisTools();
   }
   _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);
+    this._showSelectionTools = !this._showSelectionTools;
+    this._showTools = false;
+    this._toggleEllipsisTools();
+  }
+  _toggleSelectionTool(selectionTool) {
+    if (selectionTool === "rectangle") {
+      this._lassoSelectionToolActive = false;
+      this._rectangleSelectionToolActive = !this._rectangleSelectionToolActive;
+    } else if (selectionTool === "freehandPolygon") {
+      this._rectangleSelectionToolActive = false;
+      this._lassoSelectionToolActive = !this._lassoSelectionToolActive;
+    }
+    void this._selectionToolElement.value?.toggleSelectionTool(selectionTool, this._rectangleSelectionToolActive || this._lassoSelectionToolActive);
   }
   _expand() {
     this._showFullscreen = !this._showFullscreen;
   }
   _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);
+    if (!this._showTools) {
+      this._showSelectionTools = false;
+      this._showBasemapWidget = false;
+      this._showLayersListWidget = false, this._showSearchWidget = false;
+      this._showLegendWidget = false;
+      this._showFloorFilter = false;
+    }
+    if (this._rectangleSelectionToolActive) {
+      this._toggleSelectionTool("rectangle");
+    } else if (this._lassoSelectionToolActive) {
+      this._toggleSelectionTool("freehandPolygon");
+    }
+    this._showTools = !this._showTools;
+    this._toggleEllipsisTools();
+    this._updateTools(this.parentComponentWidth);
   }
   _toggleEllipsisTools() {
     this._showEllipsisTools = !this._showEllipsisTools;
   }
 }
-W("map-tools", M);
+customElement("map-tools", MapTools);
 export {
-  M as MapTools
+  MapTools
 };