@esri/solutions-components 1.2.0-next.57 → 1.2.0-next.59

package/dist/components/crowdsource-manager/customElement.js

@@ -1,15 +1,16 @@
-import { c as v } from "../../chunks/runtime.js";
-import { E as s } from "../../chunks/interfaces.js";
-import { d as $ } from "../../chunks/mapViewUtils.js";
-import { defineCustomElements as C } from "@arcgis/instant-apps-components/dist/loader";
-import { u as L } from "../../chunks/useT9n.js";
-import { css as I, html as l, nothing as x } from "lit";
-import { createRef as p, ref as u } from "lit-html/directives/ref.js";
-import { LitElement as T, createEvent as m, noShadowRoot as M, safeClassMap as f, safeStyleMap as S } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.2/esri/copyright.txt for details.
-v1.2.0-next.57 */
-const F = I`@layer{/** @license
+v1.2.0-next.59 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { E as ELayoutMode } from "../../chunks/interfaces.js";
+import { d 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");
@@ -23,64 +24,405 @@ const F = I`@layer{/** @license
  * 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:.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:.75rem}.align-items-center{align-items:center}.esri-floor-filter__close-levels-button,.esri-floor-filter__level-button,.esri-floor-filter__browse-button{width:40px!important;height:40px!important}.position-absolute-0{position:absolute;inset:0}.visibility-hidden{visibility:hidden;height:0px}.border-width-0{border-width:0px}.floating-container{position:fixed;width:100px;height:10px;bottom:0;margin:100px 0;z-index:1}.left-0{left:0}.right-0{right:0}.floating-container .floating-button{box-shadow:0 10px 25px #5c5d5e99;-webkit-transform:translatey(5px);transform:translatey(5px);-webkit-transition:all .3s;transition:all .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}}`;
-class V extends T {
+ */
+
+: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;
+}
+}`;
+class CrowdsourceManager extends LitElement {
   constructor() {
-    super(), this.coverPageEnabled = !1, this.customInfoText = "", this.defaultCenter = "", this.defaultGlobalId = "", this.defaultLayer = "", this.defaultLevel = "", this.defaultOid = "", this.defaultWebmap = "", this.honorMapFieldSettings = !1, this.introductionWindowEnabled = !1, this.enableAutoRefresh = !1, this.enableBasemap = !0, this.enableColumnReorder = !0, this.enableCSV = !0, this.enableFloorFilter = !0, this.enableFullscreen = !0, this.enableHome = !0, this.enableLegend = !0, this.enableSearch = !0, this.enableShare = !1, this.enableSnapping = !0, this.enableZoom = !0, this.mapInfos = [], this.onlyShowUpdatableLayers = !0, this.popupHeaderColor = "", this.popupHeaderHoverColor = "", this.popupHeaderHoverTextColor = "", this.popupHeaderTextColor = "", this.shareIncludeEmbed = !1, this.shareIncludeSocial = !1, this.showNewestFirst = !0, this.theme = "light", this.zoomAndScrollToSelected = !1, this.enableSelectionTool = !0, this.featureSelectionMode = "multiple", this._deleteDialogOpen = !1, this._enableCreateFeatures = !0, this._hideFooter = !1, this._hideTable = !1, this._isMobile = !1, this._translations = L({ name: "crowdsource-manager", blocking: !0 }), this._layoutMode = s.GRID, this._panelOpen = !0, this._numSelected = 0, this._filterOpen = !1, this._showInformationHeader = !0, this._layerExpressions = [], this._layerIds = [], this._isLoading = !0, this._mapExtentFilterChecked = !1, this._deleteIds = [], this._showInvalidMapAlert = !1, this._defaultAppLayoutHonored = !1, this._defaultCenterHonored = !1, this._defaultLevelHonored = !1, this._layerTable = p(), this._shouldSetMapView = !1, this._filterList = p(), this._mapCard = p(), this._isMapViewOnLoad = !1, this.showIntroductionWindow = m(), this.showCoverPage = m(), 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, "idsFound", this.idsFound), this.listenOn(window, "clearSelection", this.clearSelection), this.listenOn(window, "relatedRecordToggled", this.relatedRecordToggled), this.listenOn(window, "creatingFeature", this.creatingFeature), C(window);
+    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.enableSearch = true;
+    this.enableShare = false;
+    this.enableSnapping = true;
+    this.enableZoom = true;
+    this.mapInfos = [];
+    this.onlyShowUpdatableLayers = true;
+    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 = ELayoutMode.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._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, "idsFound", this.idsFound);
+    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, coverPageEnabled: 5, customInfoText: 1, defaultAppLayout: 1, defaultCenter: 1, defaultGlobalId: 1, defaultLayer: 1, defaultLevel: 1, defaultOid: 1, defaultWebmap: 1, honorMapFieldSettings: 5, introductionWindowEnabled: 5, enableAutoRefresh: 5, enableBasemap: 5, enableColumnReorder: 5, enableCSV: 5, enableFloorFilter: 5, enableFullscreen: 5, enableHome: 5, enableLegend: 5, enableSearch: 5, enableShare: 5, enableSnapping: 5, enableZoom: 5, mapInfos: 0, onlyShowUpdatableLayers: 5, popupHeaderColor: 1, popupHeaderHoverColor: 1, popupHeaderHoverTextColor: 1, popupHeaderTextColor: 1, searchConfiguration: 0, shareIncludeEmbed: 5, shareIncludeSocial: 5, showNewestFirst: 5, theme: 1, zoomAndScrollToSelected: 5, zoomToScale: 9, enableSelectionTool: 5, featureSelectionMode: 1, _deleteDialogOpen: 16, _enableCreateFeatures: 16, _hideFooter: 16, _hideTable: 16, _isMobile: 16, _translations: 16, _layer: 16, _layoutMode: 16, _mapInfo: 16, _mapView: 16, _panelOpen: 16, _numSelected: 16, _filterOpen: 16, _showInformationHeader: 16, _layerExpressions: 16, _layerIds: 16, _isLoading: 16, _mapExtentFilterChecked: 16, _deleteIds: 16, _showInvalidMapAlert: 16 };
+    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 }], 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 }] };
   }
   static {
-    this.styles = F;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = M;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("appLayout") && this.appLayout && this.appLayoutWatchHandler(this.appLayout, e.get("appLayout")), e.has("enableZoom") && (this.hasUpdated || this.enableZoom !== !0) && this.enableZoomWatchHandler();
+  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();
+    }
   }
-  appLayoutWatchHandler(e, t) {
-    e !== t && (this._layerTable.value?.validateTableUpdate(e === "splitView"), this._setActiveLayout(e), this.appLayout === "mapView" && this._layer?.isTable && this._mapCard.value && this._mapCard.value.updateLayer(), this._isMapViewOnLoad && this._layerTable.value && this._layerTable.value.refresh());
+  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();
   }
-  async featureSelectionChange(e) {
-    this._numSelected = e.detail?.length;
+  async featureSelectionChange(_evt) {
+    this._numSelected = _evt.detail?.length;
   }
   async popupClosed() {
-    this._isMobile && this.showHideMapPopupAndTable(!1);
+    if (this._isMobile) {
+      this.showHideMapPopupAndTable(false);
+    }
   }
-  async layoutChanged(e) {
-    this._layoutMode = e.detail;
+  async layoutChanged(_evt) {
+    this._layoutMode = _evt.detail;
   }
-  async mapChanged(e) {
-    this._isMapViewOnLoad && (this._showMapInFullView(), this._isMapViewOnLoad = !1), this._mapChange = e.detail, this.showHideMapPopupAndTable(!1), this._mapChange?.isValid ? await this._mapChange.mapView?.when(async () => {
-      await this._setMapView();
-    }) : (this._mapInfo = this._mapChange && this._getMapInfo(this._mapChange.id), this._showInvalidMapAlert = !0);
+  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(e) {
-    const t = e.detail[0], i = this._mapView && await $(this._mapView, t);
-    i && await i.when(() => {
-      i.isTable && !this._isMobile && (this.appLayout = "tableView"), this._layer = i, this._initLayerExpressions(), this._handleFilterListReset(), this._isLoading = !1;
+  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(e) {
-    this._deleteIds = e.detail.ids, this._deleteDialogOpen = !0;
+  async showDelete(_evt) {
+    this._deleteIds = _evt.detail.ids;
+    this._deleteDialogOpen = true;
   }
   async noLayersFound() {
-    this._layer = void 0, this._isLoading = !1;
+    this._layer = void 0;
+    this._isLoading = false;
   }
-  async idsFound(e) {
-    this._layerIds = e.detail.layerIds;
+  async idsFound(_evt) {
+    this._layerIds = _evt.detail.layerIds;
   }
   async clearSelection() {
-    this.showHideMapPopupAndTable(!1);
+    this.showHideMapPopupAndTable(false);
   }
-  async relatedRecordToggled(e) {
-    const t = e.detail;
-    this._relatedTableLayer = t;
+  async relatedRecordToggled(_evt) {
+    const layerOrTable = _evt.detail;
+    this._relatedTableLayer = layerOrTable;
   }
   async creatingFeature() {
     this.appLayout = "splitView";
@@ -89,63 +431,90 @@ class V extends T {
     this._resizeObserver = new ResizeObserver(() => this._onResize());
   }
   render() {
-    const e = this.popupHeaderColor && this.popupHeaderColor !== "#FFFFFF" ? "border-width-0" : "", t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", i = this._translations.invalidWebMapMsg?.replace("{{web_map}}", this._mapInfo?.name || "");
-    return l`${this._showInvalidMapAlert && l`<calcite-alert auto-close class=${f(t)} icon=check-circle kind=danger label @calciteAlertClose=${() => {
-      this._showInvalidMapAlert = !1;
-    }} open placement=top><div slot=message>${i}</div></calcite-alert>` || ""}<calcite-shell class="position-relative"><calcite-panel class=${`width-full height-full ${e}`} .loading=${this._isLoading}>${this._getBody(this._layoutMode, this._panelOpen, this._hideTable)}</calcite-panel>${this._getFooter()}</calcite-shell>${this._filterModal()}${!this._isMobile && this._deleteModal() || ""}`;
+    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() {
-    this._shouldSetMapView && (this._shouldSetMapView = !1, this._mapChange && await this._setMapView());
+    if (this._shouldSetMapView) {
+      this._shouldSetMapView = false;
+      if (this._mapChange) {
+        await this._setMapView();
+      }
+    }
   }
   loaded() {
-    this._resizeObserver?.observe(this.el), !this._defaultAppLayoutHonored && this.defaultAppLayout ? (this._defaultAppLayoutHonored = !0, this.appLayout = this.defaultAppLayout) : this.appLayout || (this.appLayout = "splitView"), this._isMapViewOnLoad = this.appLayout === "mapView", this._setActiveLayout(this.appLayout);
+    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 e = this._numSelected > 0, t = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._relatedTableLayer : this._layer, i = this._layer?.editingEnabled && this._layer.capabilities?.operations.supportsDelete;
-    return this._isMobile && e && !this._hideFooter ? l`<div class=${"width-100"} slot=footer><div class="display-flex padding-1-2"><calcite-button appearance=solid id=solutions-show @click=${() => this.showHideMapPopupAndTable(!0)} width=full>${this._translations.view.replace("{{n}}", this._numSelected.toString())}</calcite-button>${i ? l`<delete-button class="padding-inline-start-1 width-full" id=solutions-delete .ids=${this.updateIdsToBeDeleted()} @deleteClicked=${this.updateIdsToBeDeleted} .layer=${t}></delete-button>` : void 0}</div></div>` : void 0;
+    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() {
-    return this._deleteIds = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._layerTable.value.selectedRelatedIds : this._layerTable.value?.selectedIds, this._deleteIds;
+    this._deleteIds = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._layerTable.value.selectedRelatedIds : this._layerTable.value?.selectedIds;
+    return this._deleteIds;
   }
-  _setActiveLayout(e) {
-    e === "splitView" && !this._panelOpen && this._toggleLayout(), e === "mapView" ? this._showMapInFullView() : this._showMapInCardView();
+  _setActiveLayout(appLayout) {
+    if (appLayout === "splitView" && !this._panelOpen) {
+      this._toggleLayout();
+    }
+    if (appLayout === "mapView") {
+      this._showMapInFullView();
+    } else {
+      this._showMapInCardView();
+    }
   }
-  _getDividerIcon(e, t) {
-    return e === s.HORIZONTAL ? t ? "chevrons-up" : "chevrons-down" : e === s.VERTICAL || e === s.GRID ? t ? "chevrons-left" : "chevrons-right" : void 0;
+  _getDividerIcon(layoutMode, panelOpen) {
+    return layoutMode === ELayoutMode.HORIZONTAL ? panelOpen ? "chevrons-up" : "chevrons-down" : layoutMode === ELayoutMode.VERTICAL ? panelOpen ? "chevrons-left" : "chevrons-right" : layoutMode === ELayoutMode.GRID ? panelOpen ? "chevrons-left" : "chevrons-right" : void 0;
   }
-  _getMapSizeClass(e, t, i) {
-    let a = "";
-    switch (e) {
-      case s.HORIZONTAL:
-        a = `${t && !i ? "height-1-2 display-grid" : t && i ? "height-full" : "height-0"} width-full position-relative`;
+  _getMapSizeClass(layoutMode, panelOpen, hideTable) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen && !hideTable ? "height-1-2 display-grid" : panelOpen && hideTable ? "height-full" : "height-0"} width-full position-relative`;
         break;
-      case s.GRID:
-        a = `height-full position-relative ${t ? "width-1-3" : "width-0"}`;
+      case ELayoutMode.GRID:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-3" : "width-0"}`;
         break;
-      case s.VERTICAL:
-        a = `height-full position-relative ${t ? "width-1-2" : "width-0"}`;
+      case ELayoutMode.VERTICAL:
+        sizeClass = `height-full position-relative ${panelOpen ? "width-1-2" : "width-0"}`;
         break;
     }
-    return a;
+    return sizeClass;
   }
-  _getTableSizeClass(e, t) {
-    let i = "";
-    switch (e) {
-      case s.HORIZONTAL:
-        i = `${t ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
+  _getTableSizeClass(layoutMode, panelOpen) {
+    let sizeClass = "";
+    switch (layoutMode) {
+      case ELayoutMode.HORIZONTAL:
+        sizeClass = `${panelOpen ? "height-1-2" : "height-full"} width-full display-flex flex-column`;
         break;
-      case s.GRID:
-        i = `${t ? "width-2-3" : "width-full"} height-full display-flex`;
+      case ELayoutMode.GRID:
+        sizeClass = `${panelOpen ? "width-2-3" : "width-full"} height-full display-flex`;
         break;
-      case s.VERTICAL:
-        i = `${t ? "width-1-2" : "width-full"} height-full display-flex`;
+      case ELayoutMode.VERTICAL:
+        sizeClass = `${panelOpen ? "width-1-2" : "width-full"} height-full display-flex`;
         break;
     }
-    return i;
+    return sizeClass;
   }
-  _getBody(e, t, i) {
-    const a = e === s.HORIZONTAL ? "" : "display-flex", o = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", n = document.dir === "rtl" ? "left-0" : "right-0";
-    return l`<calcite-panel class="width-full height-full position-absolute"><div class=${`width-full height-full overflow-hidden ${a}`}>${this._getMapAndCard(e, t, i)}${this._getTable(e, t, i)}</div>${this.coverPageEnabled && l`<div class=${`floating-container ${n}`} @click=${this.coverPageButtonClick}><calcite-button appearance=solid class=${`floating-button ${o}`} icon-start=content-minimal kind=neutral label round scale=l split-child=primary width=auto></calcite-button></div>` || ""}${this.introductionWindowEnabled && l`<div class=${`floating-container ${n}`} @click=${this.infoButtonClick}><calcite-button appearance=solid class=${`floating-button ${o}`} icon-start=information-letter kind=neutral label round scale=l split-child=primary width=auto></calcite-button></div>` || ""}</calcite-panel>`;
+  _getBody(layoutMode, panelOpen, hideTable) {
+    const contentClass = layoutMode === ELayoutMode.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();
@@ -153,132 +522,211 @@ class V extends T {
   coverPageButtonClick() {
     this.showCoverPage.emit();
   }
-  _getMapAndCard(e, t, i) {
-    const a = this._getMapSizeClass(e, t, i);
-    return l`<div class=${`${a} overflow-hidden z-index-2`}>${this._getMapNode(t)}${this._getPopupExpandNode()}</div>`;
+  _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(e) {
-    const t = this.appLayout === "mapView", i = this.appLayout === "tableView", a = this._isMobile ? "height-full" : t || i ? "position-absolute-0" : this._layoutMode === s.HORIZONTAL && (!this._isMobile || e) ? "" : "adjusted-height-50", o = this.defaultWebmap && this.defaultLayer, n = this.enableSelectionTool && this.featureSelectionMode === "multiple" && !this._layer?.isTable, r = ["home", "legend", "search", "fullscreen", "basemap", "floorfilter", "selectiontool"], h = ["map-picker", "map-layer-picker"];
-    return l`<div class=${`${a} overflow-hidden`} id=card-mapView><map-card .appLayout=${this.appLayout} .appProxies=${this.appProxies} .basemapConfig=${this.basemapConfig} class="width-full" .defaultLayerId=${o ? this.defaultLayer : ""} .defaultWebmapId=${this.defaultWebmap} .enableBasemap=${this.enableBasemap} .enableFloorFilter=${this.enableFloorFilter} .enableFullscreen=${this.enableFullscreen} .enableHome=${this.enableHome} .enableLegend=${this.enableLegend} .enableSearch=${this.enableSearch} .enableSelectionTool=${n} .enableShare=${this.enableShare} enable-single-expand enable-map-layer-picker enable-map-picker .featureSelectionMode=${this.featureSelectionMode} .hide=${!this._isMobile && i} zoom-tools-size=s .isMapLayout=${t} .isMobile=${this._isMobile} .mapInfo=${this._mapInfo} .mapInfos=${this.mapInfos?.filter((d) => d.visible !== !1)} map-widgets-index=0 map-widgets-position=top-leading mobile-map-widgets-position=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} .mapToolsOrder=${r} .mobileToolsOrder=${h} .zoomToScale=${this.zoomToScale} ${u(this._mapCard)}></map-card></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 === ELayoutMode.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", "selectiontool"];
+    const mobileToolsOrder = ["map-picker", "map-layer-picker"];
+    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} .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.mapInfos?.filter((mapInfo) => mapInfo.visible !== false)} map-widgets-index=0 map-widgets-position=top-leading mobile-map-widgets-position=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} .mapToolsOrder=${mapToolsOrder} .mobileToolsOrder=${mobileToolsOrder} .zoomToScale=${this.zoomToScale} ${ref(this._mapCard)}></map-card></div>`;
   }
   _getPopupExpandNode() {
-    const e = this._isMobile ? "height-full" : "height-full position-relative", t = this._isMobile && this._showInformationHeader ? "display-none height-0" : "", i = this.popupHeaderColor ? "" : this._isMobile ? "calcite-mode-light" : "calcite-mode-dark", a = this._isMobile && this._hideTable ? "position-absolute-0 width-full height-full" : this._isMobile ? "display-none height-0" : "", o = this.mapInfos?.length > 1 && this.appLayout === "tableView" ? "position-relative top-51" : "", n = this.appLayout !== "tableView" ? "position-sticky" : "";
-    return l`<div class=${`${i} ${e} ${a} ${o} ${n}`} style=${S({
+    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.mapInfos?.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 ? l`<div class=${`display-flex align-items-center ${t}`} slot=header-content><calcite-icon icon=information scale=s></calcite-icon><div class="padding-inline-start-75">${this._translations.information}</div></div>` : l`<div></div>`}${this._getCardNode()}</calcite-panel></div>`;
+    })}><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 e = this.appLayout === "mapView", t = this.appLayout === "tableView", i = this._isMobile ? "height-full" : t && this.mapInfos?.length > 1 ? "adjusted-height-100-51" : e || t ? "height-full" : this._numSelected > 0 && !this._isMobile ? "height-50" : this._showInformationHeader ? this._isMobile ? "height-full" : "height-50" : "adjusted-height-50_25", a = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light", o = this._layerTable.value && this._layerTable.value.selectedRelatedIds?.length > 0 ? this._relatedTableLayer : this._layer;
-    return l`<div class=${`width-50 height-full ${a}`}><card-manager class=${`${i} width-full`} .customInfoText=${this.customInfoText} .enableCreateFeatures=${this._enableCreateFeatures && !this._isMobile} .enableEditGeometry=${this?._mapInfo?.enableEditGeometry} .enableSnapping=${this.enableSnapping} .isMobile=${this._isMobile} .layerOrTable=${o} .mapView=${this?._mapView} @backFromCreateWorkFlow=${() => {
-      this._showInformationHeader = !0;
+    const isMapLayout = this.appLayout === "mapView";
+    const isTableLayout = this.appLayout === "tableView";
+    const cardManagerHeight = this._isMobile ? "height-full" : isTableLayout && this.mapInfos?.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} .enableEditGeometry=${this?._mapInfo?.enableEditGeometry} .enableSnapping=${this.enableSnapping} .isMobile=${this._isMobile} .layerOrTable=${layerOrTable} .mapView=${this?._mapView} @backFromCreateWorkFlow=${() => {
+      this._showInformationHeader = true;
     }} @createWorkFlowStarted=${() => {
-      this.appLayout = o?.isTable ? "tableView" : "mapView", this._showInformationHeader = !1;
-    }} @featureOrRecordSubmitted=${() => this._layerTable.value && void this._layerTable.value.refresh()} .selectedFeaturesIds=${this._layerTable.value?.selectedIds} .selectingFeatureFromMap=${this.appLayout === "mapView"} .showSketchWidgets=${o?.geometryType !== "point"} .zoomAndScrollToSelected=${this.zoomAndScrollToSelected}></card-manager></div>`;
-  }
-  _getTable(e, t, i) {
-    const a = this.appLayout === "mapView", o = this.appLayout === "tableView", n = i && this._isMobile ? "visibility-hidden" : a ? "display-none" : "", r = a ? "height-full width-full z-index-0" : "display-none", h = this._getTableSizeClass(e, t), d = e === s.HORIZONTAL ? "horizontal" : "vertical", _ = e === s.HORIZONTAL ? "header" : "panel-start", c = this.defaultWebmap && this.defaultLayer, g = this._isMobile ? "border-top" : "", b = this.defaultGlobalId ? this.defaultGlobalId?.indexOf(",") > -1 ? this.defaultGlobalId.split(",") : [this.defaultGlobalId] : void 0, w = this.defaultOid ? this.defaultOid?.indexOf(",") > -1 ? this.defaultOid.split(",").map((y) => Number.parseInt(y, 10)) : [Number.parseInt(this.defaultOid, 10)] : void 0;
-    return l`<calcite-shell class=${`${h} ${g} border-bottom z-index-1`}>${this._isMobile ? void 0 : l`<calcite-action-bar class="border-sides" expand-disabled .layout=${d} slot=${_ ?? x}>${this.getActions(e, t)}</calcite-action-bar>`}<div class=${`width-full height-full position-relative z-index-0 ${n}`}><layer-table .appLayout=${this.appLayout} .defaultGlobalId=${c ? b : void 0} .defaultLayerId=${c ? this.defaultLayer : ""} .defaultOid=${c && !b ? w : void 0} .enableAutoRefresh=${this.enableAutoRefresh} .enableCSV=${this.enableCSV} .enableColumnReorder=${this.enableColumnReorder} .enableInlineEdit=${this?._mapInfo?.enableInlineEdit} .enableShare=${this.enableShare} .featureSelectionMode=${this.featureSelectionMode} .honorMapFieldSettings=${this.honorMapFieldSettings} .isMobile=${this._isMobile} .mapHidden=${o} .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} ${u(this._layerTable)}></layer-table></div><div class=${f(r)} id=full-map-view></div></calcite-shell>`;
-  }
-  getActions(e, t) {
-    const i = this._getDividerIcon(e, t), a = t ? this._translations.close : this._translations.open, o = "toggle-layout";
-    return l`<calcite-action .active=${this.appLayout === "splitView"} appearance=solid class="toggle-node" icon=browser id=browser-action @click=${() => {
+      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 === ELayoutMode.HORIZONTAL ? "horizontal" : "vertical";
+    const toggleSlot = layoutMode === ELayoutMode.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} .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"} 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"} 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"} 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 appearance=solid class="toggle-node" .icon=${i} id=${o} @click=${() => this._toggleLayout()} slot=actions-end text></calcite-action><calcite-tooltip placement=bottom .referenceElement=${o}><span>${a}</span></calcite-tooltip>`;
+    }} text></calcite-action><calcite-tooltip placement=right reference-element=browser-map-action><span>${this._translations.mapView}</span></calcite-tooltip><calcite-action 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 e = (this._layerTable.value?.selectedRelatedIds?.length ?? 0) > 0 ? this._relatedTableLayer : this._layer;
-    return l`<delete-dialog id=deleteDialogId .ids=${this._deleteIds} .layer=${e} @deleteDialogClose=${() => this._deleteDialogOpen = !1} .open=${this._deleteDialogOpen}></delete-dialog>`;
+    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 e = this._layerExpressions?.length === 0;
-    return l`<calcite-panel><div><calcite-block class=${f(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=${(t) => {
-      const a = !!(t.target.checked || this._filterList.value?.filterCount && this._filterList.value?.filterCount > 0);
-      this._layerTable.value && this._layerTable.value?.filterUpdate(a, t.target.checked), this._mapCard.value && this._mapCard.value?.updateFilterState(a), this._mapExtentFilterChecked = t.target.checked;
-    }} scale=m></calcite-switch></div></calcite-block>${e && l`<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>`;
+    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 e = this._layerExpressions?.length > 0, t = this.theme === "dark" ? "calcite-mode-dark" : "calcite-mode-light";
-    return l`<calcite-dialog class=${`filter-content-space ${t}`} .heading=${this._translations.filter.replace("{{title}}", this._layer?.title || "")} id=solutions-filter-dialog-manager kind=brand modal @calciteDialogClose=${() => {
-      this._closeFilter();
-    }} .open=${this._filterOpen} width=s>${!this._layer?.isTable && this._mapExtentFilter() || ""}${e && this._mapView && l`<instant-apps-filter-list close-btn .closeBtnOnClick=${() => {
-      this._closeFilter();
-    }} combobox-overlay-positioning=fixed .layerExpressions=${this._layerExpressions} @filterListReset=${this._handleFilterListReset} @filterUpdate=${() => {
-      this._updateFilter();
-    }} .view=${this._mapView} ${u(this._filterList)}></instant-apps-filter-list>` || ""}</calcite-dialog>`;
+    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 e = this._filterList?.value?.filterCount && this._filterList.value.filterCount > 0 || this._mapExtentFilterChecked;
-    this._layerTable.value && this._layerTable.value?.filterUpdate(e), this._mapCard.value && this._mapCard.value.updateFilterState(e);
+    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 e = this._mapInfo?.filterConfig?.layerExpressions;
-    this._layerExpressions = e ? e.filter((t) => t.id === this._layer?.id) : [];
+    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 = !1, this._mapCard.value && this._mapCard.value.resetFilter(), this._layerTable.value && this._layerTable.value.filterReset();
+    this._mapExtentFilterChecked = false;
+    this._mapCard.value && void this._mapCard.value.resetFilter();
+    this._layerTable.value && void this._layerTable.value.filterReset();
   }
   async _closeFilter() {
-    this._filterOpen && (this._filterOpen = !1, this._layerTable.value && this._layerTable.value.closeFilter());
+    if (this._filterOpen) {
+      this._filterOpen = false;
+      this._layerTable.value && void this._layerTable.value.closeFilter();
+    }
   }
   _onResize() {
-    const e = this.el.offsetWidth <= 1024, t = !this._isMobile && e;
-    this._isMobile = e, t && (this._panelOpen = !0), this._isMobile ? (this.showHideMapPopupAndTable(!this._isMobile), this.appLayout = "splitView") : (this._layer?.isTable && (this.appLayout = "tableView"), this._isMobile = !1), this._layoutMode = this._isMobile ? s.HORIZONTAL : s.GRID;
+    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 ? ELayoutMode.HORIZONTAL : ELayoutMode.GRID;
   }
   _toggleLayout() {
     this._panelOpen = !this._panelOpen;
   }
   _showMapInCardView() {
     if (this.appLayout !== "mapView") {
-      const e = document.getElementById("full-map-view")?.childNodes[0], t = document.getElementById("card-mapView");
-      e && t && t.appendChild(e);
+      const fullMapView = document.getElementById("full-map-view")?.childNodes[0];
+      const splitMapClass = document.getElementById("card-mapView");
+      if (fullMapView && splitMapClass) {
+        splitMapClass.appendChild(fullMapView);
+      }
     }
   }
   _showMapInFullView() {
-    const e = document.getElementById("card-mapView")?.childNodes;
-    let t;
-    e?.forEach((a) => {
-      !t && a.mapView && (t = a);
+    const childNodes = document.getElementById("card-mapView")?.childNodes;
+    let splitMap;
+    childNodes?.forEach((n) => {
+      if (!splitMap && n.mapView) {
+        splitMap = n;
+      }
     });
-    const i = document.getElementById("full-map-view");
-    t && i && i.appendChild(t);
-  }
-  showHideMapPopupAndTable(e) {
-    this._hideTable = e, this._hideFooter = e;
+    const fullMapViewClass = document.getElementById("full-map-view");
+    if (splitMap && fullMapViewClass) {
+      fullMapViewClass.appendChild(splitMap);
+    }
   }
-  _getMapInfo(e) {
-    let t;
-    return this.mapInfos.some((i) => i.id === e ? (t = { ...i }, !0) : !1), t;
+  showHideMapPopupAndTable(show) {
+    this._hideTable = show;
+    this._hideFooter = show;
+  }
+  _getMapInfo(id) {
+    let mapInfo = void 0;
+    this.mapInfos.some((mi) => {
+      if (mi.id === id) {
+        mapInfo = { ...mi };
+        return true;
+      } else {
+        return false;
+      }
+    });
+    return mapInfo;
   }
   async _setMapView() {
-    const e = this._mapChange && this._getMapInfo(this._mapChange.id);
-    if (e && this._mapChange) {
-      this._mapInfo = e, this._initLayerExpressions(), this._enableCreateFeatures = this._mapInfo.enableCreateFeatures, this._mapView = this._mapChange.mapView, this._initMapZoom(), this._mapView && (this._mapView.popupEnabled = !1);
-      const t = !this.defaultCenter || this._defaultCenterHonored ? void 0 : this.defaultCenter?.split(";").map((a) => Number.parseFloat(a)), i = !this.defaultLevel || this._defaultLevelHonored ? void 0 : Number.parseInt(this.defaultLevel, 10);
-      t && i && (await this._mapView?.goTo({
-        center: t,
-        zoom: i
-      }), this._defaultCenterHonored = !0, this._defaultLevelHonored = !0);
+    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() {
-    this.enableZoom ? this.enableZoom && this._mapView?.ui.add({
-      component: "zoom",
-      position: "top-left",
-      index: 0
-    }) : this._mapView?.ui.remove("zoom");
+    if (!this.enableZoom) {
+      this._mapView?.ui.remove("zoom");
+    } else if (this.enableZoom) {
+      this._mapView?.ui.add({
+        component: "zoom",
+        position: "top-left",
+        index: 0
+      });
+    }
   }
 }
-v("crowdsource-manager", V);
+customElement("crowdsource-manager", CrowdsourceManager);
 export {
-  V as CrowdsourceManager
+  CrowdsourceManager
 };
+//# sourceMappingURL=customElement.js.map