/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
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 = 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, {}, { 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 = styles;
  }
  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(() => {
      if (this.enableHome) {
        this._initHome();
      }
      if (this.parentComponentWidth) {
        this._updateTools(this.parentComponentWidth);
      }
    });
  }
  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 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() {
    if (this.enableHome) {
      this._homeWidget = new Home({
        view: this.mapView
      });
    }
  }
  _setZoomToolsSize() {
    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 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 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(parentComponentWidth) {
    const allMapTools = this._showSelectionTools ? JSON.parse(JSON.stringify(this.selectionTools)) : JSON.parse(JSON.stringify(this.toolOrder));
    this._hasFloorInfo = this.mapView?.map?.floorInfo;
    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", 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", 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(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", 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", 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", 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", 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", 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", 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", false, this._translations.clearSelection, () => this.clearSelection.emit())
          ) : void 0;
        case "home":
          return this.enableHome ? this._getActionGroup("home", false, this._translations.defaultMapView, () => this._homeWidget?.go()) : void 0;
        case "map-picker":
          return this.enableMapPicker ? this._getActionGroup(mapIcon, false, "", () => void 0, !this._isValidWebMap) : void 0;
        case "map-layer-picker":
          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(layersIcon, false, "", () => void 0, this.selectedLayer === void 0) : void 0;
        default:
          return "";
      }
    });
  }
  _fullscreenStateChange(state) {
    if (state === "ready" && this._showFullscreen) {
      this._showFullscreen = false;
    } else if (state === "active" && !this._showFullscreen) {
      this._showFullscreen = true;
    }
  }
  _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
      });
      const v = this.enableHome ? 2 : 1;
      this.mapView.ui.add(internalExpand ? exp : content, {
        position: this.position,
        index: i > -1 ? i + v : 1
      });
      this._widgets.push(name);
    }
  }
  _showLegend() {
    this._showLegendWidget = !this._showLegendWidget;
    this._showTools = false;
    this._toggleEllipsisTools();
  }
  _search() {
    this._showSearchWidget = !this._showSearchWidget;
    this._showTools = false;
    this._toggleEllipsisTools();
  }
  _toggleBasemapPicker() {
    this._showBasemapWidget = !this._showBasemapWidget;
    this._showTools = false;
    this._toggleEllipsisTools();
  }
  _toggleLayerListWidget() {
    this._showLayersListWidget = !this._showLayersListWidget;
    this._showTools = false;
    this._toggleEllipsisTools();
  }
  _toggleFloorFilter() {
    this._showFloorFilter = !this._showFloorFilter;
    this._showTools = false;
    this._toggleEllipsisTools();
  }
  _onSelectionToolClick() {
    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() {
    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;
  }
}
customElement("map-tools", MapTools);
export {
  MapTools
};
