/* COPYRIGHT Esri - https://js.arcgis.com/1.2/LICENSE.txt */
import { c as customElement } from "../../chunks/runtime.js";
import { g as getLayerOrTable } from "../../chunks/mapViewUtils.js";
import { defineCustomElements } from "@arcgis/instant-apps-components/dist/loader";
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, noShadowRoot, safeClassMap, safeStyleMap } from "@arcgis/lumina";
const styles = css`@layer{
/** @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;
  --calcite-label-margin-bottom: 0px;
  --solutions-theme-foreground-color: var(--calcite-color-foreground-1);
}

.padding-1-2 {
  padding: 0.5rem;
}

.display-flex {
  display: flex;
}

.width-full {
  width: 100%;
}

.width-1-2 {
  position: relative;
  width: 50%;
}

.width-1-3 {
  position: relative;
  width: 33.33%;
}

.width-2-3 {
  position: relative;
  width: 66.66%;
}

.width-0 {
  width: 0;
}

.z-index-2 {
  z-index: 2 !important;
}

.height-full {
  height: 100%;
}

.height-1-2 {
  position: relative;
  height: 50%;
}

.height-0 {
  height: 0;
}

.toggle-node {
  width: 51px;
  height: 51px;
}

.overflow-hidden {
  overflow: hidden;
}

.flex-column {
  flex-direction: column;
}

.border {
  border: 1px solid var(--calcite-color-border-3);
}

.border-top {
  border-top: 1px solid var(--calcite-color-border-3);
}

.border-bottom {
  border-bottom: 1px solid var(--calcite-color-border-3);
}

.border-sides {
  border-left: 1px solid var(--calcite-color-border-3);
  border-right: 1px solid var(--calcite-color-border-3);
}

.position-relative {
  position: relative;
}

.position-absolute {
  position: absolute;
}

.position-sticky {
  position: sticky;
}

.height-50 {
  height: 50%;
}

.top-51 {
  top: 51px;
}

.adjusted-height-50 {
  height: calc(50% - 25px);
}

.adjusted-height-100 {
  height: calc(100% - 50px);
}

.adjusted-height-100-51 {
  height: calc(100% - 51px);
}

.display-none {
  display: none !important;
}

.adjusted-height-50_25 {
  height: calc(50% + 25px);
}

.display-grid {
  display: grid;
}

.padding-inline-start-75 {
  padding-inline-start: 0.75rem;
}

.align-items-center {
  align-items: center;
}

.esri-floor-filter__close-levels-button {
  width: 40px !important;
  height: 40px !important;
}

.esri-floor-filter__level-button {
  width: 40px !important;
  height: 40px !important;
}

.esri-floor-filter__browse-button {
  width: 40px !important;
  height: 40px !important;
}

.position-absolute-0 {
  position: absolute;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}

.visibility-hidden {
  visibility: hidden;
  height: 0px;
}

.border-width-0 {
  border-width: 0px;
}

.floating-container {
  position: fixed;
  width: 100px;
  height: 10px;
  bottom: 0;
  margin: 100px 0px;
  z-index: 1;
}

.left-0 {
  left: 0;
}

.right-0 {
  right: 0;
}

.floating-container .floating-button {
  box-shadow: 0 10px 25px rgb(92 93 94 / 60%);
  -webkit-transform: translatey(5px);
  transform: translatey(5px);
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

.z-index-0 {
  z-index: 0 !important;
}

.z-index-1 {
  z-index: 1 !important;
}

.filter-content-space {
  --calcite-dialog-content-space: 0px;
}

.background-dark {
  background: var(--calcite-color-background);
}

.filter-extent-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
}

.filter-modal-buttons {
  display: flex;
  padding: 12px;
  gap: 10px;
}

.filter-extent-message {
  align-items: center;
  display: flex;
  gap: 5px;
}

calcite-action-bar {
  --calcite-internal-action-bar-gap: 0px;
  --calcite-internal-action-bar-padding: 0px;
}
}`;
class CrowdsourceManager extends LitElement {
  constructor() {
    super();
    this.coverPageEnabled = false;
    this.customInfoText = "";
    this.defaultCenter = "";
    this.defaultGlobalId = "";
    this.defaultLayer = "";
    this.defaultLevel = "";
    this.defaultOid = "";
    this.defaultWebmap = "";
    this.honorMapFieldSettings = false;
    this.introductionWindowEnabled = false;
    this.enableAutoRefresh = false;
    this.enableBasemap = true;
    this.enableColumnReorder = true;
    this.enableCSV = true;
    this.enableFloorFilter = true;
    this.enableFullscreen = true;
    this.enableHome = true;
    this.enableLegend = true;
    this.enableLayerList = true;
    this.enableMapList = true;
    this.visibilityIcon = "eyeball";
    this.enableSearch = true;
    this.enableShare = false;
    this.enableSnapping = true;
    this.enableZoom = true;
    this.mapInfos = [];
    this.onlyShowUpdatableLayers = false;
    this.popupHeaderColor = "";
    this.popupHeaderHoverColor = "";
    this.popupHeaderHoverTextColor = "";
    this.popupHeaderTextColor = "";
    this.shareIncludeEmbed = false;
    this.shareIncludeSocial = false;
    this.showNewestFirst = true;
    this.theme = "light";
    this.zoomAndScrollToSelected = false;
    this.enableSelectionTool = true;
    this.featureSelectionMode = "multiple";
    this._deleteDialogOpen = false;
    this._enableCreateFeatures = true;
    this._hideFooter = false;
    this._hideTable = false;
    this._isMobile = false;
    this._translations = useT9n({ name: "crowdsource-manager", blocking: true });
    this._layoutMode = "GRID";
    this._panelOpen = true;
    this._numSelected = 0;
    this._filterOpen = false;
    this._showInformationHeader = true;
    this._layerExpressions = [];
    this._layerIds = [];
    this._isLoading = true;
    this._mapExtentFilterChecked = false;
    this._deleteIds = [];
    this._showInvalidMapAlert = false;
    this._currentMapInfos = [];
    this._defaultAppLayoutHonored = false;
    this._defaultCenterHonored = false;
    this._defaultLevelHonored = false;
    this._layerTable = createRef();
    this._shouldSetMapView = false;
    this._filterList = createRef();
    this._mapCard = createRef();
    this._isMapViewOnLoad = false;
    this.showIntroductionWindow = createEvent();
    this.showCoverPage = createEvent();
    this.listenOn(window, "featureSelectionChange", this.featureSelectionChange);
    this.listenOn(window, "popupClosed", this.popupClosed);
    this.listenOn(window, "layoutChanged", this.layoutChanged);
    this.listenOn(window, "mapChanged", this.mapChanged);
    this.listenOn(window, "layerSelectionChange", this.layerSelectionChange);
    this.listenOn(window, "showDelete", this.showDelete);
    this.listenOn(window, "noLayersFound", this.noLayersFound);
    this.listenOn(window, "clearSelection", this.clearSelection);
    this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled);
    this.listenOn(window, "creatingFeature", this.creatingFeature);
    defineCustomElements(window);
  }
  static {
    this.properties = { appLayout: 1, appProxies: 1, basemapConfig: [0, {}, { attribute: false }], coverPageEnabled: [5, {}, { type: Boolean }], customInfoText: 1, defaultAppLayout: 1, defaultCenter: 1, defaultGlobalId: 1, defaultLayer: 1, defaultLevel: 1, defaultOid: 1, defaultWebmap: 1, honorMapFieldSettings: [5, {}, { type: Boolean }], introductionWindowEnabled: [5, {}, { type: Boolean }], enableAutoRefresh: [5, {}, { type: Boolean }], enableBasemap: [5, {}, { type: Boolean }], enableColumnReorder: [5, {}, { type: Boolean }], enableCSV: [5, {}, { type: Boolean }], enableFloorFilter: [5, {}, { type: Boolean }], enableFullscreen: [5, {}, { type: Boolean }], enableHome: [5, {}, { type: Boolean }], enableLegend: [5, {}, { type: Boolean }], enableLayerList: [5, {}, { type: Boolean }], enableMapList: [5, {}, { type: Boolean }], visibilityIcon: 1, enableSearch: [5, {}, { type: Boolean }], enableShare: [5, {}, { type: Boolean }], enableSnapping: [5, {}, { type: Boolean }], enableZoom: [5, {}, { type: Boolean }], mapInfos: [0, {}, { attribute: false }], onlyShowUpdatableLayers: [5, {}, { type: Boolean }], popupHeaderColor: 1, popupHeaderHoverColor: 1, popupHeaderHoverTextColor: 1, popupHeaderTextColor: 1, searchConfiguration: [0, {}, { attribute: false }], shareIncludeEmbed: [5, {}, { type: Boolean }], shareIncludeSocial: [5, {}, { type: Boolean }], showNewestFirst: [5, {}, { type: Boolean }], theme: 1, zoomAndScrollToSelected: [5, {}, { type: Boolean }], zoomToScale: [9, {}, { type: Number }], enableSelectionTool: [5, {}, { type: Boolean }], featureSelectionMode: 1, _deleteDialogOpen: [16, {}, { state: true }], _enableCreateFeatures: [16, {}, { state: true }], _hideFooter: [16, {}, { state: true }], _hideTable: [16, {}, { state: true }], _isMobile: [16, {}, { state: true }], _translations: [16, {}, { state: true }], _layer: [16, {}, { state: true }], _layoutMode: [16, {}, { state: true }], _mapInfo: [16, {}, { state: true }], _mapView: [16, {}, { state: true }], _panelOpen: [16, {}, { state: true }], _numSelected: [16, {}, { state: true }], _filterOpen: [16, {}, { state: true }], _showInformationHeader: [16, {}, { state: true }], _layerExpressions: [16, {}, { state: true }], _layerIds: [16, {}, { state: true }], _isLoading: [16, {}, { state: true }], _mapExtentFilterChecked: [16, {}, { state: true }], _deleteIds: [16, {}, { state: true }], _showInvalidMapAlert: [16, {}, { state: true }], _currentMapInfos: [16, {}, { state: true }] };
  }
  static {
    this.styles = styles;
  }
  static {
    this.shadowRootOptions = noShadowRoot;
  }
  willUpdate(changes) {
    if (changes.has("appLayout")) {
      if (this.appLayout) {
        this.appLayoutWatchHandler(this.appLayout, changes.get("appLayout"));
      }
    }
    if (changes.has("enableZoom") && (this.hasUpdated || this.enableZoom !== true)) {
      this.enableZoomWatchHandler();
    }
    if (changes.has("mapInfos") && this.hasUpdated) {
      this.mapInfosWatchHandler();
    }
  }
  appLayoutWatchHandler(newAppLayout, oldAppLayout) {
    if (newAppLayout !== oldAppLayout) {
      void this._layerTable.value?.validateTableUpdate(newAppLayout === "splitView");
      this._setActiveLayout(newAppLayout);
      if (this.appLayout === "mapView" && this._layer?.isTable) {
        this._mapCard.value && void this._mapCard.value.updateLayer();
      }
      if (this._isMapViewOnLoad) {
        this._layerTable.value && void this._layerTable.value.refresh();
      }
    }
  }
  enableZoomWatchHandler() {
    this._initMapZoom();
  }
  mapInfosWatchHandler() {
    this.updateCurrentMapInfos();
  }
  async featureSelectionChange(_evt) {
    this._numSelected = _evt.detail?.length;
  }
  async popupClosed() {
    if (this._isMobile) {
      this.showHideMapPopupAndTable(false);
    }
  }
  async layoutChanged(_evt) {
    this._layoutMode = _evt.detail;
  }
  async mapChanged(_evt) {
    if (this._isMapViewOnLoad) {
      this._showMapInFullView();
      this._isMapViewOnLoad = false;
    }
    this._mapChange = _evt.detail;
    this.showHideMapPopupAndTable(false);
    if (this._mapChange?.isValid) {
      await this._mapChange.mapView?.when(async () => {
        await this._setMapView();
      });
    } else {
      this._mapInfo = this._mapChange && this._getMapInfo(this._mapChange.id);
      this._showInvalidMapAlert = true;
    }
  }
  async layerSelectionChange(_evt) {
    const id = _evt.detail[0];
    const layer = this._mapView && await getLayerOrTable(this._mapView, id);
    layer && await layer.when(() => {
      if (layer.isTable && !this._isMobile) {
        this.appLayout = "tableView";
      }
      this._layer = layer;
      this._initLayerExpressions();
      this._handleFilterListReset();
      this._isLoading = false;
    });
  }
  async showDelete(_evt) {
    this._deleteIds = _evt.detail.ids;
    this._deleteDialogOpen = true;
  }
  async noLayersFound() {
    this._layer = void 0;
    this._isLoading = false;
  }
  async clearSelection() {
    this.showHideMapPopupAndTable(false);
  }
  async relatedRecordToggled(_evt) {
    const layerOrTable = _evt.detail;
    this._relatedTableLayer = layerOrTable;
  }
  async creatingFeature() {
    this.appLayout = "splitView";
  }
  load() {
    this.updateCurrentMapInfos();
    this._resizeObserver = new ResizeObserver(() => this._onResize());
  }
  render() {
    const borderClass = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "";
    const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
    const message = this._translations.invalidWebMapMsg?.replace("{{web_map}}", this._mapInfo?.name || "");
    return html`${this._showInvalidMapAlert && html`<calcite-alert auto-close class=${safeClassMap(themeClass)} icon=check-circle kind=danger label @calciteAlertClose=${() => {
      this._showInvalidMapAlert = false;
    }} open placement=top><div slot=message>${message}</div></calcite-alert>` || ""}<calcite-shell class="position-relative"><calcite-panel class=${`width-full height-full ${borderClass}`} .loading=${this._isLoading}>${this._getBody(this._layoutMode, this._panelOpen, this._hideTable)}</calcite-panel>${this._getFooter()}</calcite-shell>${this._filterModal()}${!this._isMobile && this._deleteModal() || ""}`;
  }
  async updated() {
    if (this._shouldSetMapView) {
      this._shouldSetMapView = false;
      if (this._mapChange) {
        await this._setMapView();
      }
    }
  }
  loaded() {
    this._resizeObserver?.observe(this.el);
    if (!this._defaultAppLayoutHonored && this.defaultAppLayout) {
      this._defaultAppLayoutHonored = true;
      this.appLayout = this.defaultAppLayout;
    } else if (!this.appLayout) {
      this.appLayout = "splitView";
    }
    this._isMapViewOnLoad = this.appLayout === "mapView";
    this._setActiveLayout(this.appLayout);
  }
  _getFooter() {
    const hasSelectedFeatures = this._numSelected > 0;
    const layerOrTable = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._relatedTableLayer : this._layer;
    const deleteEnabled = this._layer?.editingEnabled && this._layer.capabilities?.operations.supportsDelete;
    return this._isMobile && hasSelectedFeatures && !this._hideFooter ? html`<div class=${`width-100`} slot=footer><div class="display-flex padding-1-2"><calcite-button appearance=solid id=solutions-show @click=${() => this.showHideMapPopupAndTable(true)} width=full>${this._translations.view.replace("{{n}}", this._numSelected.toString())}</calcite-button>${deleteEnabled ? html`<delete-button class="padding-inline-start-1 width-full" id=solutions-delete .ids=${this.updateIdsToBeDeleted()} @deleteClicked=${this.updateIdsToBeDeleted} .layer=${layerOrTable}></delete-button>` : void 0}</div></div>` : void 0;
  }
  updateIdsToBeDeleted() {
    this._deleteIds = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._layerTable.value.selectedRelatedIds : this._layerTable.value?.selectedIds;
    return this._deleteIds;
  }
  _setActiveLayout(appLayout) {
    if (appLayout === "splitView" && !this._panelOpen) {
      this._toggleLayout();
    }
    if (appLayout === "mapView") {
      this._showMapInFullView();
    } else {
      this._showMapInCardView();
    }
  }
  _getDividerIcon(layoutMode, panelOpen) {
    return layoutMode === "HORIZONTAL" ? panelOpen ? "chevrons-up" : "chevrons-down" : layoutMode === "VERTICAL" ? panelOpen ? "chevrons-left" : "chevrons-right" : layoutMode === "GRID" ? panelOpen ? "chevrons-left" : "chevrons-right" : void 0;
  }
  _getMapSizeClass(layoutMode, panelOpen, hideTable) {
    let sizeClass = "";
    switch (layoutMode) {
      case "HORIZONTAL":
        sizeClass = `${panelOpen && !hideTable ? "height-1-2 display-grid" : panelOpen && hideTable ? "height-full" : "height-0"} width-full position-relative`;
        break;
      case "GRID":
        sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
        break;
      case "VERTICAL":
        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
        break;
    }
    return sizeClass;
  }
  _getTableSizeClass(layoutMode, panelOpen) {
    let sizeClass = "";
    switch (layoutMode) {
      case "HORIZONTAL":
        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
        break;
      case "GRID":
        sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
        break;
      case "VERTICAL":
        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
        break;
    }
    return sizeClass;
  }
  _getBody(layoutMode, panelOpen, hideTable) {
    const contentClass = layoutMode === "HORIZONTAL" ? "" : "display-flex";
    const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
    const containerClass = document.dir === "rtl" ? "left-0" : "right-0";
    return html`<calcite-panel class="width-full height-full position-absolute"><div class=${`width-full height-full overflow-hidden ${contentClass}`}>${this._getMapAndCard(layoutMode, panelOpen, hideTable)}${this._getTable(layoutMode, panelOpen, hideTable)}</div>${this.coverPageEnabled && html`<div class=${`floating-container ${containerClass}`} @click=${this.coverPageButtonClick}><calcite-button appearance=solid class=${`floating-button ${themeClass}`} icon-start=content-minimal kind=neutral label round scale=l split-child=primary width=auto></calcite-button></div>` || ""}${this.introductionWindowEnabled && html`<div class=${`floating-container ${containerClass}`} @click=${this.infoButtonClick}><calcite-button appearance=solid class=${`floating-button ${themeClass}`} icon-start=information-letter kind=neutral label round scale=l split-child=primary width=auto></calcite-button></div>` || ""}</calcite-panel>`;
  }
  infoButtonClick() {
    this.showIntroductionWindow.emit();
  }
  coverPageButtonClick() {
    this.showCoverPage.emit();
  }
  _getMapAndCard(layoutMode, panelOpen, hideTable) {
    const mapSizeClass = this._getMapSizeClass(layoutMode, panelOpen, hideTable);
    return html`<div class=${`${mapSizeClass} overflow-hidden z-index-2`}>${this._getMapNode(panelOpen)}${this._getPopupExpandNode()}</div>`;
  }
  _getMapNode(panelOpen) {
    const isMapLayout = this.appLayout === "mapView";
    const isTableLayout = this.appLayout === "tableView";
    const mapContainerClass = this._isMobile ? "height-full" : isMapLayout || isTableLayout ? "position-absolute-0" : this._layoutMode === "HORIZONTAL" && (!this._isMobile || panelOpen) ? "" : "adjusted-height-50";
    const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
    const enableSelection = this.enableSelectionTool && this.featureSelectionMode === "multiple" && !this._layer?.isTable;
    const mapToolsOrder = ["home", "legend", "search", "fullscreen", "basemap", "floorfilter", "layers-list", "selectiontool"];
    const mobileToolsOrder = ["map-picker", "map-layer-picker"];
    const direction = document.dir || "ltr";
    return html`<div class=${`${mapContainerClass} overflow-hidden`} id=card-mapView><map-card .appLayout=${this.appLayout} .appProxies=${this.appProxies} .basemapConfig=${this.basemapConfig} class="width-full" .defaultLayerId=${hasMapAndLayer ? this.defaultLayer : ""} .defaultWebmapId=${this.defaultWebmap} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableLayerList=${this.enableLayerList} .enableSearch=${this.enableSearch} .enableSelectionTool=${enableSelection} .enableShare=${this.enableShare} enable-single-expand enable-map-layer-picker enable-map-picker .featureSelectionMode=${this.featureSelectionMode} .hide=${!this._isMobile && isTableLayout} zoom-tools-size=s .isMapLayout=${isMapLayout} .isMobile=${this._isMobile} .mapInfo=${this._mapInfo} .mapInfos=${this._currentMapInfos.filter((mapInfo) => mapInfo.visible !== false)} map-widgets-index=0 .mapWidgetsPosition=${direction === "rtl" ? "top-right" : "top-left"} .mobileMapWidgetsPosition=${direction === "rtl" ? "top-left" : "top-right"} map-widgets-size=m .showOnlyUpdatableLayers=${this.onlyShowUpdatableLayers} @toggleFilter=${this._toggleFilter} .selectedFeaturesIds=${this._layerTable.value?.selectedIds ?? []} .selectedLayer=${this._layer} .shareIncludeEmbed=${this.shareIncludeEmbed} .shareIncludeSocial=${this.shareIncludeSocial} stack-tools .theme=${this.theme} .visibilityIcon=${this.visibilityIcon} .mapToolsOrder=${mapToolsOrder} .mobileToolsOrder=${mobileToolsOrder} .zoomToScale=${this.zoomToScale} ${ref(this._mapCard)}></map-card></div>`;
  }
  _getPopupExpandNode() {
    const popupNodeClass = this._isMobile ? "height-full" : "height-full position-relative";
    const headerClass = this._isMobile && this._showInformationHeader ? "display-none height-0" : "";
    const headerTheme = this.popupHeaderColor ? "" : !this._isMobile ? "calcite-mode-dark" : "calcite-mode-light";
    const containerClass = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "";
    const tableViewClass = this._currentMapInfos?.length > 1 && this.appLayout === "tableView" ? "position-relative top-51" : "";
    const stickyClass = this.appLayout !== "tableView" ? "position-sticky" : "";
    return html`<div class=${`${headerTheme} ${popupNodeClass} ${containerClass} ${tableViewClass} ${stickyClass}`} style=${safeStyleMap({
      "--calcite-color-foreground-1": this.popupHeaderColor,
      "--calcite-color-foreground-2": this.popupHeaderHoverColor,
      "--calcite-color-text-3": this.popupHeaderTextColor,
      "--calcite-color-text-2": this.popupHeaderTextColor
    })}><calcite-panel>${!this._isMobile && this._showInformationHeader || this._numSelected > 0 && !this._isMobile ? html`<div class=${`display-flex align-items-center ${headerClass}`} slot=header-content><calcite-icon icon=information scale=s></calcite-icon><div class="padding-inline-start-75">${this._translations.information}</div></div>` : html`<div></div>`}${this._getCardNode()}</calcite-panel></div>`;
  }
  _getCardNode() {
    const isMapLayout = this.appLayout === "mapView";
    const isTableLayout = this.appLayout === "tableView";
    const cardManagerHeight = this._isMobile ? "height-full" : isTableLayout && this._currentMapInfos?.length > 1 ? "adjusted-height-100-51" : isMapLayout || isTableLayout ? "height-full" : this._numSelected > 0 && !this._isMobile ? "height-50" : !this._showInformationHeader ? "adjusted-height-50_25" : !this._isMobile ? "height-50" : "height-full";
    const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
    const layerOrTable = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._relatedTableLayer : this._layer;
    return html`<div class=${`width-50 height-full ${themeClass}`}><card-manager class=${`${cardManagerHeight} width-full`} .customInfoText=${this.customInfoText} .enableCreateFeatures=${this._enableCreateFeatures && !this._isMobile} .createBtnLabel=${this._mapInfo?.createFeatureButtonLabel} .enableEditGeometry=${this._mapInfo?.enableEditGeometry} .enableSnapping=${this.enableSnapping} .isMobile=${this._isMobile} .layerOrTable=${layerOrTable} .mapView=${this?._mapView} @backFromCreateWorkFlow=${() => {
      this._showInformationHeader = true;
    }} @createWorkFlowStarted=${() => {
      this.appLayout = layerOrTable?.isTable ? "tableView" : "mapView";
      this._showInformationHeader = false;
    }} @featureOrRecordSubmitted=${() => this._layerTable.value && void this._layerTable.value.refresh()} .selectedFeaturesIds=${this._layerTable.value?.selectedIds} .selectingFeatureFromMap=${this.appLayout === "mapView"} .showSketchWidgets=${layerOrTable?.geometryType !== "point"} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected}></card-manager></div>`;
  }
  _getTable(layoutMode, panelOpen, hideTable) {
    const isMapLayout = this.appLayout === "mapView";
    const isTableLayout = this.appLayout === "tableView";
    const tableClass = hideTable && this._isMobile ? "visibility-hidden" : isMapLayout ? "display-none" : "";
    const mapClass = isMapLayout ? "height-full width-full z-index-0" : "display-none";
    const tableSizeClass = this._getTableSizeClass(layoutMode, panelOpen);
    const toggleLayout = layoutMode === "HORIZONTAL" ? "horizontal" : "vertical";
    const toggleSlot = layoutMode === "HORIZONTAL" ? "header" : "panel-start";
    const hasMapAndLayer = this.defaultWebmap && this.defaultLayer;
    const borderTop = this._isMobile ? "border-top" : "";
    const globalId = !this.defaultGlobalId ? void 0 : this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId];
    const defaultOid = !this.defaultOid ? void 0 : this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map((o) => Number.parseInt(o, 10)) : [Number.parseInt(this.defaultOid, 10)];
    return html`<calcite-shell class=${`${tableSizeClass} ${borderTop} border-bottom z-index-1`}>${!this._isMobile ? html`<calcite-action-bar class="border-sides" expand-disabled .layout=${toggleLayout} slot=${toggleSlot ?? nothing}>${this.getActions(layoutMode, panelOpen)}</calcite-action-bar>` : void 0}<div class=${`width-full height-full position-relative z-index-0 ${tableClass}`}><layer-table .appLayout=${this.appLayout} .defaultGlobalId=${hasMapAndLayer ? globalId : void 0} .defaultLayerId=${hasMapAndLayer ? this.defaultLayer : ""} .defaultOid=${hasMapAndLayer && !globalId ? defaultOid : void 0} .enableAutoRefresh=${this.enableAutoRefresh} .enableCSV=${this.enableCSV} .enableColumnReorder=${this.enableColumnReorder} .enableInlineEdit=${this?._mapInfo?.enableInlineEdit} .enableTableAutosave=${this._mapInfo?.enableTableAutosave !== void 0 ? this._mapInfo?.enableTableAutosave : true} .enableShare=${this.enableShare} .featureSelectionMode=${this.featureSelectionMode} .honorMapFieldSettings=${this.honorMapFieldSettings} .isMobile=${this._isMobile} .mapHidden=${isTableLayout} .mapInfo=${this._mapInfo} .mapView=${this?._mapView} .showOnlyUpdatableLayers=${this.onlyShowUpdatableLayers} @toggleFilter=${this._toggleFilter} .shareIncludeEmbed=${this.shareIncludeEmbed} .shareIncludeSocial=${this.shareIncludeSocial} .showNewestFirst=${this.showNewestFirst} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected} .zoomToScale=${this.zoomToScale} ${ref(this._layerTable)}></layer-table></div><div class=${safeClassMap(mapClass)} id=full-map-view></div></calcite-shell>`;
  }
  getActions(layoutMode, panelOpen) {
    const icon = this._getDividerIcon(layoutMode, panelOpen);
    const tooltip = panelOpen ? this._translations.close : this._translations.open;
    const id = "toggle-layout";
    return html`<calcite-action .active=${this.appLayout === "splitView"} alignment=center appearance=solid class="toggle-node" icon=browser id=browser-action @click=${() => {
      this.appLayout = "splitView";
    }} text></calcite-action><calcite-tooltip placement=right reference-element=browser-action><span>${this._translations.splitView}</span></calcite-tooltip><calcite-action .active=${this.appLayout === "tableView"} alignment=center appearance=solid class="toggle-node" icon=dock-left id=dock-left-action @click=${() => {
      this.appLayout = "tableView";
    }} text></calcite-action><calcite-tooltip placement=right reference-element=dock-left-action><span>${this._translations.tableView}</span></calcite-tooltip><calcite-action .active=${this.appLayout === "mapView"} alignment=center appearance=solid class="toggle-node" .disabled=${this._layer?.isTable} icon=browser-map id=browser-map-action @click=${() => {
      this.appLayout = "mapView";
    }} text></calcite-action><calcite-tooltip placement=right reference-element=browser-map-action><span>${this._translations.mapView}</span></calcite-tooltip><calcite-action alignment=center appearance=solid class="toggle-node" .icon=${icon} id=${id} @click=${() => this._toggleLayout()} slot=actions-end text></calcite-action><calcite-tooltip placement=bottom .referenceElement=${id}><span>${tooltip}</span></calcite-tooltip>`;
  }
  _deleteModal() {
    const layerOrTable = (this._layerTable.value?.selectedRelatedIds?.length ?? 0) > 0 ? this._relatedTableLayer : this._layer;
    return html`<delete-dialog id=deleteDialogId .ids=${this._deleteIds} .layer=${layerOrTable} @deleteDialogClose=${() => this._deleteDialogOpen = false} .open=${this._deleteDialogOpen}></delete-dialog>`;
  }
  _mapExtentFilter() {
    const showButtons = this._layerExpressions?.length === 0;
    return html`<calcite-panel><div><calcite-block class=${safeClassMap(this.theme === "dark" ? "background-dark" : "")} heading menu-placement=bottom-end open><div class="filter-extent-container"><div class="filter-extent-message"><span>${this._translations.filterByExtentMsg}</span><calcite-icon icon=information id=filter-message-info scale=s></calcite-icon><calcite-tooltip overlay-positioning=fixed placement=top reference-element=filter-message-info>${this._translations.filterByExtentTooltipMsg}</calcite-tooltip></div><calcite-switch .checked=${this._mapExtentFilterChecked} @calciteSwitchChange=${(e) => {
      const active = e.target.checked || this._filterList.value?.filterCount && this._filterList.value?.filterCount > 0;
      const _active = active ? true : false;
      this._layerTable.value && void this._layerTable.value?.filterUpdate(_active, e.target.checked);
      this._mapCard.value && void this._mapCard.value?.updateFilterState(_active);
      this._mapExtentFilterChecked = e.target.checked;
    }} scale=m></calcite-switch></div></calcite-block>${showButtons && html`<div class="filter-modal-buttons" slot=footer><calcite-button appearance=outline @click=${this._handleFilterListReset} width=full>${this._translations.Resetfilter}</calcite-button><calcite-button @click=${this._closeFilter} width=full>${this._translations.close}</calcite-button></div>` || ""}</div></calcite-panel>`;
  }
  _filterModal() {
    const showFilterModal = this._layerExpressions?.length > 0;
    const themeClass = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
    return html`<calcite-dialog class=${`filter-content-space ${themeClass}`} .heading=${this._translations.filter.replace("{{title}}", this._layer?.title || "")} id=solutions-filter-dialog-manager kind=brand modal @calciteDialogClose=${() => void this._closeFilter()} .open=${this._filterOpen} width=s>${!this._layer?.isTable && this._mapExtentFilter() || ""}${showFilterModal && this._mapView && html`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => void this._closeFilter()} combobox-overlay-positioning=fixed .layerExpressions=${this._layerExpressions} @filterListReset=${this._handleFilterListReset} @filterUpdate=${() => void this._updateFilter()} .view=${this._mapView} ${ref(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-dialog>`;
  }
  _updateFilter() {
    const active = this._filterList?.value?.filterCount && this._filterList.value.filterCount > 0 || this._mapExtentFilterChecked;
    this._layerTable.value && void this._layerTable.value?.filterUpdate(active);
    this._mapCard.value && void this._mapCard.value.updateFilterState(active);
  }
  _initLayerExpressions() {
    const layerExpressions = this._mapInfo?.filterConfig?.layerExpressions;
    this._layerExpressions = layerExpressions ? layerExpressions.filter((exp) => exp.id === this._layer?.id) : [];
  }
  _toggleFilter() {
    this._filterOpen = !this._filterOpen;
  }
  _handleFilterListReset() {
    this._mapExtentFilterChecked = false;
    this._mapCard.value && void this._mapCard.value.resetFilter();
    this._layerTable.value && void this._layerTable.value.filterReset();
  }
  async _closeFilter() {
    if (this._filterOpen) {
      this._filterOpen = false;
      this._layerTable.value && void this._layerTable.value.closeFilter();
    }
  }
  _onResize() {
    const isMobile = this.el.offsetWidth <= 1024;
    const forceOpen = !this._isMobile && isMobile;
    this._isMobile = isMobile;
    if (forceOpen) {
      this._panelOpen = true;
    }
    if (this._isMobile) {
      this.showHideMapPopupAndTable(!this._isMobile);
      this.appLayout = "splitView";
    } else {
      if (this._layer?.isTable) {
        this.appLayout = "tableView";
      }
      this._isMobile = false;
    }
    this._layoutMode = this._isMobile ? "HORIZONTAL" : "GRID";
  }
  updateCurrentMapInfos() {
    this._currentMapInfos = this.mapInfos;
    if (!this.enableMapList && this.defaultWebmap) {
      this._currentMapInfos = this.mapInfos.filter((map) => map.id === this.defaultWebmap);
    }
  }
  _toggleLayout() {
    this._panelOpen = !this._panelOpen;
  }
  _showMapInCardView() {
    if (this.appLayout !== "mapView") {
      const fullMapView = document.getElementById("full-map-view")?.childNodes[0];
      const splitMapClass = document.getElementById("card-mapView");
      if (fullMapView && splitMapClass) {
        splitMapClass.appendChild(fullMapView);
      }
    }
  }
  _showMapInFullView() {
    const childNodes = document.getElementById("card-mapView")?.childNodes;
    let splitMap;
    childNodes?.forEach((n) => {
      if (!splitMap && n.mapView) {
        splitMap = n;
      }
    });
    const fullMapViewClass = document.getElementById("full-map-view");
    if (splitMap && fullMapViewClass) {
      fullMapViewClass.appendChild(splitMap);
    }
  }
  showHideMapPopupAndTable(show) {
    this._hideTable = show;
    this._hideFooter = show;
  }
  _getMapInfo(id) {
    let mapInfo = void 0;
    this._currentMapInfos.some((mi) => {
      if (mi.id === id) {
        mapInfo = { ...mi };
        return true;
      } else {
        return false;
      }
    });
    return mapInfo;
  }
  async _setMapView() {
    const mapInfo = this._mapChange && this._getMapInfo(this._mapChange.id);
    if (mapInfo && this._mapChange) {
      this._mapInfo = mapInfo;
      this._initLayerExpressions();
      this._enableCreateFeatures = this._mapInfo.enableCreateFeatures;
      this._mapView = this._mapChange.mapView;
      this._initMapZoom();
      if (this._mapView) {
        this._mapView.popupEnabled = false;
      }
      const center = !this.defaultCenter || this._defaultCenterHonored ? void 0 : this.defaultCenter?.split(";").map((v) => Number.parseFloat(v));
      const zoom = !this.defaultLevel || this._defaultLevelHonored ? void 0 : Number.parseInt(this.defaultLevel, 10);
      if (center && zoom) {
        await this._mapView?.goTo({
          center,
          zoom
        });
        this._defaultCenterHonored = true;
        this._defaultLevelHonored = true;
      }
    }
  }
  _initMapZoom() {
    if (!this.enableZoom) {
      this._mapView?.ui.remove("zoom");
    } else if (this.enableZoom) {
      this._mapView?.ui.add({
        component: "zoom",
        position: "top-left",
        index: 0
      });
    }
  }
}
customElement("crowdsource-manager", CrowdsourceManager);
export {
  CrowdsourceManager
};
