/* COPYRIGHT Esri - https://js.arcgis.com/5.1/LICENSE.txt */
import { c as T } from "../../chunks/runtime.js";
import { u as v } from "../../chunks/useT9n.js";
import { css as W, html as a, nothing as _ } from "lit";
import { createRef as n, ref as r } from "lit-html/directives/ref.js";
import { LitElement as L, createEvent as S, safeClassMap as h } 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.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 = 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 = 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, 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 = $;
  }
  willUpdate(t) {
    t.has("mapView") && this.mapViewWatchHandler(), t.has("parentComponentWidth") && this.parentComponentWidth && this.parentComponentWidthWatchHandler(this.parentComponentWidth), t.has("_showBasemapWidget") && (this.hasUpdated || this._showBasemapWidget !== !1) && this._showBasemapWidgetWatchHandler(this._showBasemapWidget), t.has("_showLayersListWidget") && (this.hasUpdated || this._showLayersListWidget !== !1) && this._showLayersListWidgetWatchHandler(this._showLayersListWidget), t.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== !1) && this._showFloorFilterWatchHandler(this._showFloorFilter), t.has("_showLegendWidget") && (this.hasUpdated || this._showLegendWidget !== !1) && this._showLegendWidgetWatchHandler(this._showLegendWidget), t.has("_showSearchWidget") && (this.hasUpdated || this._showSearchWidget !== !1) && this._showSearchWidgetWatchHandler(this._showSearchWidget);
  }
  async mapViewWatchHandler() {
    await this.mapView?.when(() => {
      this.parentComponentWidth && this._updateTools(this.parentComponentWidth);
    });
  }
  async parentComponentWidthWatchHandler(t) {
    this._updateTools(t);
  }
  async _showBasemapWidgetWatchHandler(t) {
    const e = this._basemapElement.value ? this._basemapElement.value.basemapGalleryRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
    e && (t ? (this.mapView?.ui.add(e, {
      position: this.position,
      index: 1
    }), e.style.setProperty("direction", s), e.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(e));
  }
  async _showLayersListWidgetWatchHandler(t) {
    const e = this._layerListWidgetElement.value ? this._layerListWidgetElement.value.layerListRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
    e && (t ? (this.mapView?.ui.add(e, {
      position: this.position,
      index: 1
    }), e.style.setProperty("direction", s), e.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(e));
  }
  async _showFloorFilterWatchHandler(t) {
    const e = this._floorFilterElement.value ? this._floorFilterElement.value.floorFilterRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
    e && (t ? (this.mapView?.ui.add(e, {
      position: this.position,
      index: 1
    }), e.style.setProperty("direction", s), e.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(e));
  }
  async _showLegendWidgetWatchHandler(t) {
    const e = this._legendElement.value ? this._legendElement.value.legendRef.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
    e && (t ? (this.mapView?.ui.add(e, {
      position: this.position,
      index: 1
    }), e.style.setProperty("direction", s), e.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(e));
  }
  async _showSearchWidgetWatchHandler(t) {
    const e = this._searchElement.value ? this._searchElement.value.searchComponent.value : void 0, s = document.dir === "rtl" ? "rtl" : "ltr";
    e && (t ? (this.mapView?.ui.add(e, {
      position: this.position,
      index: 1
    }), e.style.setProperty("direction", s), e.style.setProperty("max-height", "240px")) : this.mapView?.ui.remove(e));
  }
  async mapChanged(t) {
    const e = t.detail.isValid;
    this._isValidWebMap = e, this._showTools || this._toggleTools();
  }
  async _layerSelectionChange(t) {
    this._showTools || this._toggleTools();
  }
  async load() {
    this._mapTools = [...this.toolOrder];
  }
  render() {
    this._setZoomToolsSize();
    const t = this.layout === "horizontal" ? "display-flex" : "", e = this._getToggleIcon(), s = !this._showTools && !this._showSelectionTools ? "display-none" : t, i = this._showEllipsisTools ? "" : "display-none", l = this._showSearchWidget ? "" : "display-none", o = this._showBasemapWidget ? "" : "display-none", c = this._showLegendWidget ? "" : "display-none", p = this._showFloorFilter ? "" : "display-none", d = 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 a`<div class=${`${f} ${t} height-0`}>${this.enableSingleExpand ? a`<div class=${h(m)}>${this._getActionGroup(e, !1, g || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${u} ${m} ${s}`}>${this._getMapWidgets(b)}</div><div><div class=${h(y)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${h(i)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><map-basemap-gallery .basemapConfig=${this.basemapConfig} class=${h(o)} .mapView=${this.mapView} ${r(this._basemapElement)}></map-basemap-gallery><map-search class=${h(l)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${r(this._searchElement)}></map-search><map-legend class=${h(c)} .mapView=${this.mapView} ${r(this._legendElement)}></map-legend><layer-list-widget class=${h(d)} .mapView=${this.mapView} .visibilityIcon=${this.visibilityIcon} ${r(this._layerListWidgetElement)}></layer-list-widget><map-floor-filter class=${h(p)} .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} ${r(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && a`<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 && a`<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>` || ""}`;
  }
  _setZoomToolsSize() {
    const e = document.getElementById("arcgis-map")?.shadowRoot;
    if (!e)
      return;
    const s = e.querySelector(".esri-zoom"), i = e.querySelectorAll(".esri-widget--button")[0], l = e.querySelectorAll(".esri-widget--button")[1];
    if (i && l) {
      const o = this.zoomToolsSize === "s" ? "32px" : this.zoomToolsSize === "m" ? "40px" : "48px";
      i.style.width = o, i.style.height = o, l.style.width = o, l.style.height = o;
    }
    if (this.layout === "horizontal") {
      const o = document.dir || "ltr", c = o === "ltr" ? ".esri-ui-top-left" : ".esri-ui-top-right", p = o === "ltr" ? 0 : this.parentComponentWidth - 62;
      let d = o === "ltr" ? this._showTools ? "ltr" : "rtl" : this._showTools ? "rtl" : "ltr";
      e.querySelector(c)?.firstElementChild?.tagName === "MAP-TOOLS" && !this._showTools && (d = o), s && s.setAttribute("style", `position: absolute; top: 50px; left: ${p}px`), this._showSelectionTools || e.querySelector(c)?.setAttribute("style", `flex-direction: row; gap: 5px; align-items: flex-start; direction: ${d} !important; z-index: 1;`);
    }
  }
  _getToggleIcon() {
    const t = document.dir || "ltr";
    return this.layout === "horizontal" ? t === "ltr" ? this._showTools ? "chevrons-left" : "chevrons-right" : this._showTools ? "chevrons-right" : "chevrons-left" : this._showTools ? "chevrons-up" : "chevrons-down";
  }
  _updateTools(t) {
    const e = this._showSelectionTools ? JSON.parse(JSON.stringify(this.selectionTools)) : JSON.parse(JSON.stringify(this.toolOrder));
    this._hasFloorInfo = this.mapView?.map?.floorInfo;
    const s = e.indexOf("floorfilter");
    s > -1 && !this._hasFloorInfo && e.splice(s, 1);
    const i = this.mapWidgetsSize === "s" ? 32 : this.mapWidgetsSize === "m" ? 40 : 48;
    let l = 110;
    this.isMobile && (this.enableMapPicker || this.enableMapLayerPicker) && (l = 160);
    const o = Math.ceil((t - l) / i) - 1;
    o && o !== e.length - 1 ? (this._mapTools = e.slice(0, o), this._ellipsisTools = e.slice(o, e.length)) : (this._mapTools = e, this._ellipsisTools = []);
  }
  _getMapWidgets(t) {
    const e = this._isValidWebMap ? "map" : "exclamation-mark-triangle", s = this.selectedLayer === void 0 ? "exclamation-mark-triangle" : "layers";
    return t.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?.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?.searchComponent.value, !0) : void 0;
        case "fullscreen":
          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?.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?.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?.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
            this._getActionGroup("cursor-selection", !1, this._translations.selectionTools, this._onSelectionToolClick, !1)
          ) : 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)
          ) : 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)
          ) : 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())
          ) : void 0;
        case "home":
          return this.enableHome && this.mapView ? this._getHomeComponent() : void 0;
        case "map-picker":
          return this.enableMapPicker ? this._getActionGroup(e, !1, "", () => {
          }, !this._isValidWebMap) : void 0;
        case "map-layer-picker":
          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(s, !1, "", () => {
          }, this.selectedLayer === void 0) : void 0;
        default:
          return "";
      }
    });
  }
  _getFullScreenComponent() {
    return a`<map-fullscreen .mapView=${this.mapView}></map-fullscreen>`;
  }
  _getHomeComponent() {
    const t = (this.mapView?.map).initialViewProperties?.viewpoint?.clone();
    return a`<arcgis-home .view=${this.mapView} .viewpoint=${t}></arcgis-home>`;
  }
  _getActionGroup(t, e, s, i, l, o) {
    const c = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", p = this.stackTools ? "" : "margin-bottom-1-2", d = this.stackTools ? "" : "box-shadow";
    return a`<div class="height-fit-content"><calcite-action alignment=center .indicator=${o} class=${`map-actions ${c} ${p} border-bottom ${d} ${l ? "danger-icon-color" : ""}`} .disabled=${e} .icon=${t} id=${t ?? _} @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 && a`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${t ?? _}><span>${s}</span></calcite-tooltip>` || ""}</div>`;
  }
  _getWidget(t, e, s) {
    if (this._widgets.indexOf(t) < 0 && this.mapView && e) {
      const i = this.toolOrder.indexOf(t), l = document.createElement("arcgis-expand");
      l.view = this.mapView, l.appendChild(e);
      const o = this.enableHome ? 2 : 1;
      this.mapView.ui.add(s ? l : e, {
        position: this.position,
        index: i > -1 ? i + o : 1
      }), this._widgets.push(t);
    }
  }
  _showLegend() {
    this._showLegendWidget = !this._showLegendWidget, this._showTools = !1, this._toggleEllipsisTools();
  }
  _search() {
    this._showSearchWidget = !this._showSearchWidget, this._showTools = !1, this._toggleEllipsisTools();
  }
  _toggleBasemapPicker() {
    this._showBasemapWidget = !this._showBasemapWidget, this._showTools = !1, this._toggleEllipsisTools();
  }
  _toggleLayerListWidget() {
    this._showLayersListWidget = !this._showLayersListWidget, this._showTools = !1, this._toggleEllipsisTools();
  }
  _toggleFloorFilter() {
    this._showFloorFilter = !this._showFloorFilter, this._showTools = !1, this._toggleEllipsisTools();
  }
  _onSelectionToolClick() {
    this._showSelectionTools = !this._showSelectionTools, this._showTools = !1, this._toggleEllipsisTools();
  }
  _toggleSelectionTool(t) {
    t === "rectangle" ? (this._lassoSelectionToolActive = !1, this._rectangleSelectionToolActive = !this._rectangleSelectionToolActive) : t === "freehandPolygon" && (this._rectangleSelectionToolActive = !1, this._lassoSelectionToolActive = !this._lassoSelectionToolActive), this._selectionToolElement.value?.toggleSelectionTool(t, 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);
  }
  _toggleEllipsisTools() {
    this._showEllipsisTools = !this._showEllipsisTools;
  }
}
T("map-tools", x);
export {
  x as MapTools
};
