@esri/solutions-components 1.1.0-next.20250918 → 1.1.0-next.20250919

package/dist/components/map-layer-picker/customElement.js

@@ -1,15 +1,15 @@
 import { c as m } from "../../chunks/runtime.js";
 import { d as p, e as b, f as _ } from "../../chunks/mapViewUtils.js";
 import { u } from "../../chunks/useT9n.js";
-import { css as f, html as a, nothing as l } from "lit";
+import { css as g, html as i, nothing as l } from "lit";
 import { createRef as o, ref as d } from "lit-html/directives/ref.js";
-import { LitElement as g, createEvent as n, noShadowRoot as L, safeStyleMap as c, safeClassMap as y } from "@arcgis/lumina";
+import { LitElement as f, createEvent as r, noShadowRoot as L, safeStyleMap as c, safeClassMap as y } from "@arcgis/lumina";
 import { useContextConsumer as w } from "@arcgis/lumina/context";
 import { p as v } from "../../chunks/publicNotificationContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
-const I = f`@layer{/** @license
+v1.1.0-next.20250919 */
+const I = g`@layer{/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -24,12 +24,12 @@ const I = f`@layer{/** @license
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */:host{display:block}.map-layer-picker-container{width:100%;align-items:center}.map-layer-picker{position:relative;width:100%;display:inline-block}.padding-bottom-1{padding-bottom:1rem}.layer-picker-dropdown{height:100%;width:100%}.max-width-350{max-width:350px}.height-100{height:100%}.disabled{cursor:default!important;user-select:none;opacity:var(--calcite-opacity-disabled);pointer-events:none}.no-bottom-margin{--calcite-label-margin-bottom: 0px}.layer-picker-label-container{align-items:center;display:inline-flex;height:100%;padding-inline-start:1rem;padding-inline-end:1rem}.padding-start-1{padding-inline-start:1rem}.cursor-default{cursor:default}.popover-list{overflow:auto;width:250px}}`;
-class $ extends g {
+class $ extends f {
   constructor() {
-    super(...arguments), this.appearance = "transparent", this.defaultLayerId = "", this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.placeholderIcon = "", this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = u({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = o(), this._layerComboboxElement = o(), this._pnContextConsumer = w({
+    super(), this.appearance = "transparent", this.defaultLayerId = "", this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, this.placeholderIcon = "", this.selectedIds = [], this.scale = "m", this.showTables = !1, this.showTablesDisabled = !1, this.showSingleLayerAsLabel = !1, this.type = "select", this.showLayersListInPopover = !1, this.referenceElement = "", this.force = !1, this._hasMultipleLayers = !0, this._hasValidLayers = !0, this._isDropdownOpen = !1, this.ids = [], this.selectedName = "", this._translations = u({ name: "map-layer-picker", blocking: !0 }), this.defaultLayerHonored = !1, this._layerSelectElement = o(), this._layerComboboxElement = o(), this._pnContextConsumer = w({
       context: v,
       subscribe: !0
-    }), this._skipEditCheck = !1, this._popover = o(), this.beforeLayerSelectionChange = n(), this.idsFound = n(), this.noLayersFound = n(), this.layerSelectionChange = n();
+    }), this._skipEditCheck = !1, this._popover = o(), this.beforeLayerSelectionChange = r(), this.idsFound = r(), this.noLayersFound = r(), this.layerSelectionChange = r(), this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
     this.properties = { appearance: 1, defaultLayerId: 1, display: 1, enabledLayerIds: 0, height: 9, isMobile: 5, mapView: 0, showOnlyUpdatableLayers: 5, placeholderIcon: 1, selectedIds: 0, scale: 1, showTables: 5, showTablesDisabled: 5, showSingleLayerAsLabel: 5, type: 1, showLayersListInPopover: 5, referenceElement: 1, force: 16, _hasMultipleLayers: 16, _hasValidLayers: 16, _isDropdownOpen: 16, ids: 16, selectedName: 16, _translations: 16 };
@@ -47,8 +47,8 @@ class $ extends g {
     })(), e.has("enabledLayerIds") && this.hasUpdated && this.enabledLayerIdsWatchHandler();
   }
   async enabledLayerIdsWatchHandler() {
-    const e = this.selectedIds.length > 0 && !this.enabledLayerIds.includes(this.selectedIds[0]), t = this.enabledLayerIds.some((s) => !this.ids.includes(s));
-    e ? this.mapViewWatchHandler() : t && this._setLayers(), this._hasMultipleLayers = this.enabledLayerIds.length > 1;
+    const e = this.selectedIds.length > 0 && !this.enabledLayerIds.includes(this.selectedIds[0]), t = this.enabledLayerIds.some((a) => !this.ids.includes(a)), s = this.ids.toString() !== this.enabledLayerIds.toString();
+    e ? this.mapViewWatchHandler() : (t || s) && this._setLayers(), this._hasMultipleLayers = this.enabledLayerIds.length > 1;
   }
   async mapViewWatchHandler() {
     await this._setLayers(), this.ids?.length > 0 ? (this._hasValidLayers = !0, this._hasMultipleLayers = this.ids.length > 1, await this._setSelectedLayer(this.ids[0])) : (this._hasValidLayers = !1, this.noLayersFound.emit());
@@ -64,13 +64,16 @@ class $ extends g {
   async updateLayer() {
     await this._setSelectedLayer(this.ids[0]);
   }
+  async mapChanged(e) {
+    e.detail.isValid || (this._hasValidLayers = !1, this.noLayersFound.emit());
+  }
   async load() {
     await this._setLayers(), this.ids?.length > 0 ? (this._hasValidLayers = !0, this._hasMultipleLayers = this.ids.length > 1, await this._setSelectedLayer(this.ids[0])) : (this._hasValidLayers = !1, this.noLayersFound.emit());
   }
   render() {
     const e = "map-layer-picker";
     let t = this.height && this.height > 0 && !this.showLayersListInPopover ? { height: `${this.height.toString()}px` } : {};
-    return t = { ...t, display: this.display }, a`<div class="map-layer-picker-container" style=${c(t)}><div class="map-layer-picker" style=${c(t)}>${this._hasValidLayers ? !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() : this.type === "combobox" ? this._getCombobox(e) : this.type === "select" ? this._getSelect(e) : this.showLayersListInPopover ? this._getMapLayerPopOver() : this._getDropdown(e) : this._getInvalidPlaceholder()}</div></div>`;
+    return t = { ...t, display: this.display }, i`<div class="map-layer-picker-container" style=${c(t)}><div class="map-layer-picker" style=${c(t)}>${this._hasValidLayers ? !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() : this.type === "combobox" ? this._getCombobox(e) : this.type === "select" ? this._getSelect(e) : this.showLayersListInPopover ? this._getMapLayerPopOver() : this._getDropdown(e) : this._getInvalidPlaceholder()}</div></div>`;
   }
   loaded() {
     if (this.ids?.length > 0 || this.selectedIds?.length === 1) {
@@ -83,30 +86,30 @@ class $ extends g {
   }
   _getMapLayerPopOver() {
     const e = this.height && this.height > 0 ? { "max-height": `${this.height.toString()}px` } : {};
-    return a`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${d(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
+    return i`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${d(this._popover)}><div class=popover-list style=${c(e)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
   }
   _getInvalidPlaceholder() {
-    return a`<div><calcite-notice class="height-100" icon=exclamation-mark-triangle id=no-valid-layers kind=danger open><div slot=message>${this._translations.noLayersFound}</div></calcite-notice><calcite-tooltip .label=${this._translations.enableEditUpdate} placement=bottom reference-element=no-valid-layers><span>${this._translations.enableEditUpdate}</span></calcite-tooltip></div>`;
+    return i`<div><calcite-notice class="height-100" icon=exclamation-mark-triangle id=no-valid-layers kind=danger open><div slot=message>${this._translations.noLayersFound}</div></calcite-notice><calcite-tooltip .label=${this._translations.enableEditUpdate} placement=bottom reference-element=no-valid-layers><span>${this._translations.enableEditUpdate}</span></calcite-tooltip></div>`;
   }
   _getSingleLayerPlaceholder() {
     const e = this._getItemTypeIcon();
-    return a`<div class="layer-picker-label-container cursor-default"><calcite-icon .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
+    return i`<div class="layer-picker-label-container cursor-default"><calcite-icon .icon=${e} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
   }
   _getSelect(e) {
-    return a`<calcite-select id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
+    return i`<calcite-select id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
   }
   _getCombobox(e) {
-    return a`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
+    return i`<calcite-combobox clear-disabled id=${e ?? l} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
   }
   _getDropdown(e) {
-    return a`<calcite-dropdown class="layer-picker-dropdown" @calciteDropdownBeforeClose=${() => this._isDropdownOpen = !1} @calciteDropdownBeforeOpen=${() => this._isDropdownOpen = !0}>${this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(e)}<calcite-dropdown-group selection-mode=single>${this._getMapLayerOptions()}</calcite-dropdown-group></calcite-dropdown>`;
+    return i`<calcite-dropdown class="layer-picker-dropdown" @calciteDropdownBeforeClose=${() => this._isDropdownOpen = !1} @calciteDropdownBeforeOpen=${() => this._isDropdownOpen = !0}>${this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(e)}<calcite-dropdown-group selection-mode=single>${this._getMapLayerOptions()}</calcite-dropdown-group></calcite-dropdown>`;
   }
   _getActionDropdownButton(e) {
-    return a`<calcite-action id=${e ?? l} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
+    return i`<calcite-action id=${e ?? l} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
   }
   _getDropdownButton() {
-    const e = this._getItemTypeIcon(), t = this.isMobile ? "" : "max-width-350", s = this.isMobile ? "trigger" : "", i = this._isDropdownOpen ? "chevron-up" : "chevron-down";
-    return a`<calcite-button alignment=icon-end-space-between .appearance=${this.appearance} class=${y(t)} .iconEnd=${i} .iconStart=${e} kind=neutral slot=${s ?? l} width=full><div>${this.selectedName}</div></calcite-button>`;
+    const e = this._getItemTypeIcon(), t = this.isMobile ? "" : "max-width-350", s = this.isMobile ? "trigger" : "", a = this._isDropdownOpen ? "chevron-up" : "chevron-down";
+    return i`<calcite-button alignment=icon-end-space-between .appearance=${this.appearance} class=${y(t)} .iconEnd=${a} .iconStart=${e} kind=neutral slot=${s ?? l} width=full><div>${this.selectedName}</div></calcite-button>`;
   }
   _getItemTypeIcon() {
     let e = "layers";
@@ -120,8 +123,8 @@ class $ extends g {
     return this.ids.reduce((e, t) => (this._validLayer(t) ? e.push(this._getItem(t, "layer")) : this._validTable(t) && e.push(this._getItem(t, "table")), e), []);
   }
   _getItem(e, t) {
-    const s = t === "layer" && this._layerNameHash ? this._layerNameHash[e] : this._tableNameHash ? this._tableNameHash[e] : void 0, i = this.showOnlyUpdatableLayers ? s && !s.supportsUpdate : !1, r = s?.name, h = this.selectedIds.indexOf(e) > -1;
-    return this.type === "combobox" ? a`<calcite-combobox-item .disabled=${i} .selected=${h} .textLabel=${r} .value=${e}></calcite-combobox-item>` : this.type === "select" ? a`<calcite-option .disabled=${i} .label=${r} .selected=${h} .value=${e}></calcite-option>` : this.force && h || !this.force ? a`<calcite-dropdown-group class=${y(i ? "disabled" : "")} id=${r ?? l} .selectionMode=${i ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${i ? void 0 : () => void this._setSelectedLayer(e)} .selected=${h}>${r}</calcite-dropdown-item></calcite-dropdown-group>` : null;
+    const s = t === "layer" && this._layerNameHash ? this._layerNameHash[e] : this._tableNameHash ? this._tableNameHash[e] : void 0, a = this.showOnlyUpdatableLayers ? s && !s.supportsUpdate : !1, n = s?.name, h = this.selectedIds.indexOf(e) > -1;
+    return this.type === "combobox" ? i`<calcite-combobox-item .disabled=${a} .selected=${h} .textLabel=${n} .value=${e}></calcite-combobox-item>` : this.type === "select" ? i`<calcite-option .disabled=${a} .label=${n} .selected=${h} .value=${e}></calcite-option>` : this.force && h || !this.force ? i`<calcite-dropdown-group class=${y(a ? "disabled" : "")} id=${n ?? l} .selectionMode=${a ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${a ? void 0 : () => void this._setSelectedLayer(e)} .selected=${h}>${n}</calcite-dropdown-item></calcite-dropdown-group>` : null;
   }
   async _setSelectedLayer(e) {
     if (e !== this.selectedIds[0]) {
@@ -147,10 +150,9 @@ class $ extends g {
       let e = [];
       this._layerNameHash && (e = this.showOnlyUpdatableLayers ? this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash));
       let t = [];
-      this._tableNameHash && (t = this.showTables ? this.showOnlyUpdatableLayers ? this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : []), this.ids = [
-        ...e.reverse().filter((s) => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.reverse().indexOf(s) > -1 : !0),
-        ...t.reverse().filter((s) => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.reverse().indexOf(s) > -1 : !0)
-      ], this.idsFound.emit({
+      this._tableNameHash && (t = this.showTables ? this.showOnlyUpdatableLayers ? this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : []);
+      const s = [...e.reverse(), ...t.reverse()];
+      this.ids = this.enabledLayerIds.length > 0 ? this.enabledLayerIds.filter((a) => s.includes(a)) : s, this.idsFound.emit({
         layerIds: e,
         tableIds: t
       });
@@ -167,8 +169,8 @@ class $ extends g {
     return s !== void 0 && Object.keys(t?.managedLayers || []).indexOf(s) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0);
   }
   _validTable(e) {
-    const t = this._pnContextConsumer.value, s = this._tableNameHash && this._tableNameHash[e]?.name, i = s && this.showTables;
-    return i ? (t?.managedTables || []).indexOf(s) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0) : i !== void 0;
+    const t = this._pnContextConsumer.value, s = this._tableNameHash && this._tableNameHash[e]?.name, a = s && this.showTables;
+    return a ? (t?.managedTables || []).indexOf(s) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0) : a !== void 0;
   }
   _layerSelectionChange(e) {
     if (this._layerElement.value) {

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

@@ -5,7 +5,7 @@ import { createRef as a, ref as r } from "lit-html/directives/ref.js";
 import { LitElement as d } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const o = s`/**
  * @license
  * Copyright 2025 Esri

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

@@ -1,11 +1,11 @@
-import { c as h } from "../../chunks/runtime.js";
-import { u as c } from "../../chunks/useT9n.js";
+import { c } from "../../chunks/runtime.js";
+import { u as h } from "../../chunks/useT9n.js";
 import { css as m, html as a } from "lit";
-import { createRef as n, ref as r } from "lit-html/directives/ref.js";
-import { LitElement as f, createEvent as l, safeClassMap as p, safeStyleMap as b } from "@arcgis/lumina";
+import { createRef as l, ref as r } from "lit-html/directives/ref.js";
+import { LitElement as f, createEvent as p, safeClassMap as d, safeStyleMap as b } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const u = m`/** @license
  * Copyright 2025 Esri
  *
@@ -23,10 +23,10 @@ const u = m`/** @license
  */:host{display:block;--solutions-theme-foreground-color: var(--calcite-color-foreground-1);width:100%}.width-full{width:100%}.width-26{width:26%!important}.height-full{height:100%}.display-flex{display:flex}.border-bottom-1{border-bottom-width:1px!important;border-width:0px}.border-bottom-2{border-bottom-width:2px!important;border-width:0px}.border-solid{border-style:solid;border-color:var(--calcite-color-border-3)}.border-left-right{border-left:1px solid var(--calcite-color-border-3);border-right:1px solid var(--calcite-color-border-3)}.action-bar-size{height:51px;width:100%}.map-list{display:flex;flex-direction:column;animation:calcite-scrim-fade-in var(--calcite-internal-animation-timing-medium) ease-in-out;background-color:var(--calcite-color-background);z-index:1000}.display-none{display:none}.align-center{align-items:center}.adjusted-height{max-height:calc(100% - 68px);overflow-y:auto}.position-absolute{position:absolute}.position-relative{position:relative}.popover-map-list{overflow:auto;width:250px}.max-width-200{max-width:200px}.min-width-150{min-width:150px}`;
 class g extends f {
   constructor() {
-    super(...arguments), this.mapInfos = [], this.isMapLayout = !1, this.showMapListInPopover = !1, this.referenceElement = "", this.selectedWebMapId = "", this._mapListExpanded = !1, this._translations = c({ name: "map-picker", blocking: !0 }), this._list = n(), this._loadedId = "", this._skipEditCheck = !1, this._popover = n(), this.beforeMapInfoChange = l(), this.mapInfoChange = l();
+    super(), this.mapInfos = [], this.isMapLayout = !1, this.showMapListInPopover = !1, this.referenceElement = "", this.selectedWebMapId = "", this._mapListExpanded = !1, this._isValidWebMap = !0, this._translations = h({ name: "map-picker", blocking: !0 }), this._list = l(), this._loadedId = "", this._skipEditCheck = !1, this._popover = l(), this._mapPickerButton = l(), this.beforeMapInfoChange = p(), this.mapInfoChange = p(), this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
-    this.properties = { mapInfos: 0, isMapLayout: 5, height: 9, showMapListInPopover: 5, referenceElement: 1, selectedWebMapId: 1, _mapListExpanded: 16, _translations: 16 };
+    this.properties = { mapInfos: 0, isMapLayout: 5, height: 9, showMapListInPopover: 5, referenceElement: 1, selectedWebMapId: 1, _mapListExpanded: 16, _isValidWebMap: 16, _translations: 16 };
   }
   static {
     this.styles = u;
@@ -57,6 +57,10 @@ class g extends f {
   async toggle(e) {
     this._mapListExpanded = e;
   }
+  async mapChanged(e) {
+    const t = e.detail.isValid;
+    this._isValidWebMap = t;
+  }
   render() {
     return a`${!this.showMapListInPopover && this._getToolbar() || ""}${this.showMapListInPopover ? this._getMapListPopover() : this._getMapNameList(this._mapListExpanded)}`;
   }
@@ -65,16 +69,27 @@ class g extends f {
     e && this._webMapSelected(e);
   }
   _getMapPicker() {
-    const e = "map-picker-expand-toggle", t = this._mapListExpanded ? "chevron-up" : "chevron-down", i = this.isMapLayout ? "" : "position-absolute", s = this.isMapLayout ? "max-width-200" : "width-full";
-    return a`<div class=${p(s)}><calcite-button alignment=icon-end-space-between appearance=transparent class=${`width-full height-full ${i}`} .iconEnd=${t} icon-start=map id=${e} kind=neutral @click=${() => this._chooseMap()} width=full>${this._getWebMapInfo().name}</calcite-button><calcite-tooltip placement=bottom .referenceElement=${e}><span>${this._translations.switchMap}</span></calcite-tooltip></div>`;
+    const e = "map-picker-expand-toggle", t = this._mapListExpanded ? "chevron-up" : "chevron-down", i = this.isMapLayout ? "" : "position-absolute", s = this.isMapLayout ? "max-width-200" : "width-full", n = this._isValidWebMap ? "map" : "exclamation-mark-triangle";
+    return a`<div class=${d(s)}><calcite-button alignment=icon-end-space-between appearance=transparent class=${`width-full height-full ${i}`} .iconEnd=${t} .iconStart=${n} id=${e} kind=neutral @click=${() => this._chooseMap()} width=full ${r(this._mapPickerButton)}>${this._getWebMapInfo().name}</calcite-button><calcite-tooltip placement=bottom .referenceElement=${e}><span>${this._translations.switchMap}</span></calcite-tooltip></div>`;
   }
   _getToolbar() {
     const e = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", t = this.isMapLayout ? "" : "position-relative";
-    return a`<div class=${`display-flex border-left-right ${t}`}><calcite-action-bar class=${`border-solid action-bar-size overflow-hidden ${e}`} expand-disabled layout=horizontal slot=header>${this._getMapPicker()}</calcite-action-bar></div>`;
+    return a`<div class=${`display-flex border-left-right ${t}`}><calcite-action-bar class=${`border-solid action-bar-size overflow-hidden ${e}`} expand-disabled layout=horizontal slot=header>${this._getMapPicker()}${this._updateMapPickerIconColor()}</calcite-action-bar></div>`;
+  }
+  _updateMapPickerIconColor() {
+    this._mapPickerButton.value?.componentOnReady().then(() => {
+      const t = this._mapPickerButton.value?.shadowRoot?.lastChild;
+      let i = null;
+      if (t && t instanceof HTMLElement) {
+        const s = t.getElementsByClassName("icon icon--start");
+        s.length > 0 && (i = s[0]);
+      }
+      i && (this._isValidWebMap ? i.style.setProperty("color", "var(--calcite-color-text-1)") : i.style.setProperty("color", "var(--calcite-color-status-danger)"));
+    });
   }
   _getMapNameList(e) {
-    const t = this.showMapListInPopover ? "position-relative" : "position-absolute", i = this.isMapLayout ? "max-width-200 min-width-150" : "width-full", s = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", d = e ? `map-list border-solid ${s} adjusted-height ${i} ${t}` : "display-none";
-    return a`<div class=${p(d)}><calcite-list id=mapList label selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => a`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
+    const t = this.showMapListInPopover ? "position-relative" : "position-absolute", i = this.isMapLayout ? "max-width-200 min-width-150" : "width-full", s = this.isMapLayout ? "border-bottom-1" : "border-bottom-2", n = e ? `map-list border-solid ${s} adjusted-height ${i} ${t}` : "display-none";
+    return a`<div class=${d(n)}><calcite-list id=mapList label selection-appearance=border selection-mode=single-persist ${r(this._list)}>${this.mapInfos.map((o) => a`<calcite-list-item .label=${o.name} @click=${() => this._webMapSelected(o)} .selected=${o.id === this._loadedId} .value=${o.id}></calcite-list-item>`)}</calcite-list></div>`;
   }
   _getMapListPopover() {
     const e = this.height && this.height > 0 && this.showMapListInPopover ? { "max-height": `${this.height.toString()}px` } : {};
@@ -100,7 +115,7 @@ class g extends f {
     this._mapListExpanded = !this._mapListExpanded;
   }
 }
-h("map-picker", g);
+c("map-picker", g);
 export {
   g as MapPicker
 };

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

@@ -5,7 +5,7 @@ import { createRef as m, ref as f } from "lit-html/directives/ref.js";
 import { LitElement as y } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const S = u`/** @license
  * Copyright 2025 Esri
  *

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

@@ -11,7 +11,7 @@ import { useContextConsumer as F } from "@arcgis/lumina/context";
 import { p as D } from "../../chunks/publicNotificationContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const x = k`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/map-tools/customElement.d.ts

@@ -152,4 +152,6 @@ export declare class MapTools extends LitElement {
      * @default false
      */
     showOnlyUpdatableLayers: boolean;
+    /** IMapInfo: key configuration details about the current map */
+    mapInfo: IMapInfo | undefined;
 }

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

@@ -1,13 +1,13 @@
 import { c as y } from "../../chunks/runtime.js";
 import { l as W } from "../../chunks/loadModules.js";
 import { u as v } from "../../chunks/useT9n.js";
-import { css as T, html as h, nothing as m } from "lit";
-import { createRef as a, ref as n } from "lit-html/directives/ref.js";
-import { LitElement as F, safeClassMap as l } from "@arcgis/lumina";
+import { css as T, html as r, nothing as _ } from "lit";
+import { createRef as n, ref as h } from "lit-html/directives/ref.js";
+import { LitElement as F, safeClassMap as a } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
-const E = T`/** @license
+v1.1.0-next.20250919 */
+const x = T`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,16 +21,16 @@ const E = T`/** @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}.display-none{display:none}.display-flex{display:flex}.margin-top-1-2{margin-top:.5rem}.margin-left-1-2{margin-left:.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.width-40{width:40px}.square-40-41{width:40px;height:41px}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.box-shadow{box-shadow:0 1px 2px #0000004d}.margin-bottom-1-2{margin-bottom:.5rem}`;
+ */:host{display:block}.display-none{display:none}.display-flex{display:flex}.margin-top-1-2{margin-top:.5rem}.margin-left-1-2{margin-left:.5rem}.square-32{width:32px;height:32px}.square-40{width:40px;height:40px}.square-48{width:48px;height:48px}.width-40{width:40px}.square-40-41{width:40px;height:41px}.border-bottom{border-bottom:1px solid var(--calcite-color-border-3)}.box-shadow{box-shadow:0 1px 2px #0000004d}.margin-bottom-1-2{margin-bottom:.5rem}.danger-icon-color{--calcite-icon-color: var(--calcite-color-status-danger)}`;
 class $ extends F {
   constructor() {
-    super(...arguments), this.enabledLayerIds = [], this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableSearch = !1, this.enableBasemap = !1, this.enableHome = !1, this.enableSingleExpand = !1, this.zoomToolsSize = "m", this.layout = "vertical", this.mapWidgetsSize = "m", this.enableMapPicker = !1, this.enableMapLayerPicker = !1, this.position = "top-right", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "selectiontool", "map-picker", "map-layer-picker"], this.mapInfos = [], this.defaultLayerId = "", this.isMobile = !1, this.selectedWebMapId = "", this.showOnlyUpdatableLayers = !1, this._hasFloorInfo = !1, this._translations = v({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showFullscreen = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._selectionToolActive = !1, this._showEllipsisTools = !0, this._ellipsisTools = [], this._basemapElement = a(), this._floorFilterElement = a(), this._fullscreenElement = a(), this._legendElement = a(), this._searchElement = a(), this._widgets = [], this._selectionToolElement = a(), this._mapTools = [], this._mapTool = a();
+    super(), this.enabledLayerIds = [], this.enableLegend = !1, this.enableFloorFilter = !1, this.enableFullscreen = !1, this.enableSearch = !1, this.enableBasemap = !1, this.enableHome = !1, this.enableSingleExpand = !1, this.zoomToolsSize = "m", this.layout = "vertical", this.mapWidgetsSize = "m", this.enableMapPicker = !1, this.enableMapLayerPicker = !1, this.position = "top-right", this.stackTools = !0, this.enableSelectionTool = !1, this.toolOrder = ["home", "legend", "search", "fullscreen", "floorfilter", "selectiontool", "map-picker", "map-layer-picker"], this.mapInfos = [], this.defaultLayerId = "", this.isMobile = !1, this.selectedWebMapId = "", this.showOnlyUpdatableLayers = !1, this._hasFloorInfo = !1, this._translations = v({ name: "map-tools", blocking: !0 }), this._showTools = !0, this._showBasemapWidget = !1, this._showFloorFilter = !1, this._showFullscreen = !1, this._showLegendWidget = !1, this._showSearchWidget = !1, this._selectionToolActive = !1, this._showEllipsisTools = !0, this._ellipsisTools = [], this._isValidWebMap = !0, this._basemapElement = n(), this._floorFilterElement = n(), this._fullscreenElement = n(), this._legendElement = n(), this._searchElement = n(), this._widgets = [], this._selectionToolElement = n(), this._mapTools = [], this._mapTool = n(), this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
-    this.properties = { basemapConfig: 0, enabledLayerIds: 0, enableLegend: 5, enableFloorFilter: 5, enableFullscreen: 5, enableSearch: 5, enableBasemap: 5, enableHome: 5, enableSingleExpand: 5, zoomToolsSize: 1, layout: 1, mapView: 0, mapWidgetsSize: 1, enableMapPicker: 5, enableMapLayerPicker: 5, position: 1, searchConfiguration: 0, stackTools: 5, enableSelectionTool: 5, toolOrder: 0, selectedLayer: 0, mapInfos: 0, defaultLayerId: 1, isMobile: 5, parentComponentHeight: 9, parentComponentWidth: 9, selectedWebMapId: 1, showOnlyUpdatableLayers: 5, _hasFloorInfo: 16, _translations: 16, _showTools: 16, _showBasemapWidget: 16, _showFloorFilter: 16, _showFullscreen: 16, _showLegendWidget: 16, _showSearchWidget: 16, _selectionToolActive: 16, _showEllipsisTools: 16, _ellipsisTools: 16 };
+    this.properties = { basemapConfig: 0, enabledLayerIds: 0, enableLegend: 5, enableFloorFilter: 5, enableFullscreen: 5, enableSearch: 5, enableBasemap: 5, enableHome: 5, enableSingleExpand: 5, zoomToolsSize: 1, layout: 1, mapView: 0, mapWidgetsSize: 1, enableMapPicker: 5, enableMapLayerPicker: 5, position: 1, searchConfiguration: 0, stackTools: 5, enableSelectionTool: 5, toolOrder: 0, selectedLayer: 0, mapInfos: 0, defaultLayerId: 1, isMobile: 5, parentComponentHeight: 9, parentComponentWidth: 9, selectedWebMapId: 1, showOnlyUpdatableLayers: 5, mapInfo: 0, _hasFloorInfo: 16, _translations: 16, _showTools: 16, _showBasemapWidget: 16, _showFloorFilter: 16, _showFullscreen: 16, _showLegendWidget: 16, _showSearchWidget: 16, _selectionToolActive: 16, _showEllipsisTools: 16, _ellipsisTools: 16, _isValidWebMap: 16 };
   }
   static {
-    this.styles = E;
+    this.styles = x;
   }
   willUpdate(e) {
     e.has("mapView") && this.mapViewWatchHandler(), e.has("parentComponentWidth") && this.parentComponentWidth && this.parentComponentWidthWatchHandler(this.parentComponentWidth), e.has("_showBasemapWidget") && (this.hasUpdated || this._showBasemapWidget !== !1) && this._showBasemapWidgetWatchHandler(this._showBasemapWidget), e.has("_showFloorFilter") && (this.hasUpdated || this._showFloorFilter !== !1) && this._showFloorFilterWatchHandler(this._showFloorFilter), e.has("_showFullscreen") && (this.hasUpdated || this._showFullscreen !== !1) && this._showFullscreenWatchHandler(this._showFullscreen), e.has("_showLegendWidget") && (this.hasUpdated || this._showLegendWidget !== !1) && this._showLegendWidgetWatchHandler(this._showLegendWidget), e.has("_showSearchWidget") && (this.hasUpdated || this._showSearchWidget !== !1) && this._showSearchWidgetWatchHandler(this._showSearchWidget);
@@ -75,15 +75,19 @@ class $ extends F {
       index: 1
     }) : this.mapView?.ui.remove(s));
   }
+  async mapChanged(e) {
+    const s = e.detail.isValid;
+    this._isValidWebMap = s;
+  }
   async load() {
     this._mapTools = [...this.toolOrder], await this._initModules();
   }
   render() {
     this._setZoomToolsSize();
-    const e = this.layout === "horizontal" ? "display-flex" : "", s = this._getToggleIcon(), t = this._showTools ? e : "display-none", i = this._showEllipsisTools ? "" : "display-none", o = this._showSearchWidget ? "" : "display-none", r = this._showBasemapWidget ? "" : "display-none", d = this._showLegendWidget ? "" : "display-none", c = this._showFloorFilter ? "" : "display-none", g = this._showFullscreen ? "" : "display-none", _ = this._showTools ? this._translations.collapse : this._translations.expand, f = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "", w = this.enableSingleExpand ? this.layout === "horizontal" ? "margin-left-1-2" : "margin-top-1-2" : "", u = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", p = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "";
-    return h`<div class=${`${f} ${e}`}>${this.enableSingleExpand ? h`<div class=${l(p)}>${this._getActionGroup(s, !1, _ || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${w} ${p} ${t}`}>${this._getMapWidgets(this._mapTools)}</div><div><div class=${l(u)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${l(i)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><basemap-gallery .basemapConfig=${this.basemapConfig} class=${l(r)} .mapView=${this.mapView} ${n(this._basemapElement)}></basemap-gallery><map-search class=${l(o)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${n(this._searchElement)}></map-search><map-legend class=${l(d)} .mapView=${this.mapView} ${n(this._legendElement)}></map-legend><map-fullscreen class=${l(g)} .mapView=${this.mapView} @fullscreenStateChange=${(b) => this._fullscreenStateChange(b.detail)} ${n(this._fullscreenElement)}></map-fullscreen><floor-filter class=${l(c)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${n(this._floorFilterElement)}></floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
+    const e = this.layout === "horizontal" ? "display-flex" : "", s = this._getToggleIcon(), i = this._showTools ? e : "display-none", l = this._showEllipsisTools ? "" : "display-none", t = this._showSearchWidget ? "" : "display-none", o = this._showBasemapWidget ? "" : "display-none", d = this._showLegendWidget ? "" : "display-none", c = this._showFloorFilter ? "" : "display-none", p = this._showFullscreen ? "" : "display-none", m = this._showTools ? this._translations.collapse : this._translations.expand, f = !this.enableBasemap && !this.enableFullscreen && !this.enableLegend && !this.enableSearch && !this.enableMapPicker && !this.enableMapLayerPicker ? "display-none" : "", w = this.enableSingleExpand ? this.layout === "horizontal" ? "margin-left-1-2" : "margin-top-1-2" : "", u = this._ellipsisTools.length > 0 && this._showTools ? "" : "display-none", g = this.stackTools && this._ellipsisTools.length === 0 ? "box-shadow" : "";
+    return r`<div class=${`${f} ${e}`}>${this.enableSingleExpand ? r`<div class=${a(g)}>${this._getActionGroup(s, !1, m || "", () => this._toggleTools())}</div>` : void 0}<div class=${`${w} ${g} ${i}`}>${this._getMapWidgets(this._mapTools)}</div><div><div class=${a(u)}>${this._getActionGroup("ellipsis", !1, "", () => this._toggleEllipsisTools())}<div class=${a(l)}>${this._getMapWidgets(this._ellipsisTools)}</div></div></div></div><basemap-gallery .basemapConfig=${this.basemapConfig} class=${a(o)} .mapView=${this.mapView} ${h(this._basemapElement)}></basemap-gallery><map-search class=${a(t)} .mapView=${this.mapView} result-graphic-enabled .searchConfiguration=${this.searchConfiguration} ${h(this._searchElement)}></map-search><map-legend class=${a(d)} .mapView=${this.mapView} ${h(this._legendElement)}></map-legend><map-fullscreen class=${a(p)} .mapView=${this.mapView} @fullscreenStateChange=${(b) => this._fullscreenStateChange(b.detail)} ${h(this._fullscreenElement)}></map-fullscreen><floor-filter class=${a(c)} .enabled=${this.enableFloorFilter} .mapView=${this.mapView} ${h(this._floorFilterElement)}></floor-filter><selection-tool .mapView=${this.mapView} @drawingComplete=${() => {
       this._selectionToolActive = !this._selectionToolActive;
-    }} .selectedLayerId=${this.selectedLayer?.id} tool=rectangle ${n(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && h`<map-picker class=mapPickerClass .height=${(this.parentComponentHeight ?? 0) - 25} id=map-picker .mapInfos=${this.mapInfos} reference-element=map .selectedWebMapId=${this.selectedWebMapId} show-map-list-in-popover></map-picker>` || ""}${this.enableMapLayerPicker && h`<map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this.enabledLayerIds} .height=${(this.parentComponentHeight ?? 0) - 25} .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} reference-element=layers scale=s .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-layers-list-in-popover show-tables type=dropdown></map-layer-picker>` || ""}`;
+    }} .selectedLayerId=${this.selectedLayer?.id} tool=rectangle ${h(this._selectionToolElement)}></selection-tool>${this.enableMapPicker && r`<map-picker class=mapPickerClass .height=${(this.parentComponentHeight ?? 0) - 25} id=map-picker .mapInfos=${this.mapInfos} reference-element=map .selectedWebMapId=${this.selectedWebMapId} show-map-list-in-popover></map-picker>` || ""}${this.enableMapLayerPicker && this.selectedLayer && r`<map-layer-picker appearance=transparent .defaultLayerId=${this.defaultLayerId} .enabledLayerIds=${this.enabledLayerIds} .height=${(this.parentComponentHeight ?? 0) - 25} .isMobile=${this.isMobile} .mapView=${this.mapView} .showOnlyUpdatableLayers=${this.showOnlyUpdatableLayers} reference-element=layers scale=s .selectedIds=${this.selectedLayer ? [this.selectedLayer.id] : []} show-layers-list-in-popover show-tables type=dropdown></map-layer-picker>` || ""}`;
   }
   async _initModules() {
     const [e, s] = await W(["esri/widgets/Expand", "esri/widgets/Home"]);
@@ -97,8 +101,8 @@ class $ extends F {
   _setZoomToolsSize() {
     const e = document.getElementsByClassName("esri-zoom")[0]?.children[0], s = document.getElementsByClassName("esri-zoom")[0]?.children[1];
     if (e && s) {
-      const t = this.zoomToolsSize === "s" ? "32px" : this.zoomToolsSize === "m" ? "40px" : "48px";
-      e.style.width = t, e.style.height = t, s.style.width = t, s.style.height = t;
+      const i = this.zoomToolsSize === "s" ? "32px" : this.zoomToolsSize === "m" ? "40px" : "48px";
+      e.style.width = i, e.style.height = i, s.style.width = i, s.style.height = i;
     }
     this.layout === "horizontal" && (document.getElementsByClassName("esri-zoom")[0]?.setAttribute("style", "position: absolute; top: 50px; left: 0"), document.getElementsByClassName("esri-ui-top-left")[0]?.setAttribute("style", "flex-direction: row; gap: 5px; align-items: flex-start; direction: ltr !important; z-index: 1;"));
   }
@@ -109,35 +113,38 @@ class $ extends F {
   _updateTools(e) {
     const s = JSON.parse(JSON.stringify(this.toolOrder));
     this._hasFloorInfo = this.mapView?.map?.floorInfo;
-    const t = s.indexOf("floorfilter");
-    t > -1 && !this._hasFloorInfo && s.splice(t, 1);
-    const o = Math.ceil(e / 40) - 1;
-    o && o !== s.length - 1 ? (this._mapTools = s.slice(0, o), this._ellipsisTools = s.slice(o, s.length)) : (this._mapTools = s, this._ellipsisTools = []);
+    const i = s.indexOf("floorfilter");
+    i > -1 && !this._hasFloorInfo && s.splice(i, 1);
+    const t = Math.ceil(e / 40) - 1;
+    t && t !== s.length - 1 ? (this._mapTools = s.slice(0, t), this._ellipsisTools = s.slice(t, s.length)) : (this._mapTools = s, this._ellipsisTools = []);
   }
   _getMapWidgets(e) {
-    const s = this._showFullscreen ? "full-screen-exit" : "full-screen", t = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen;
-    return e.map((i) => {
-      switch (i) {
+    const s = this._showFullscreen ? "full-screen-exit" : "full-screen", i = this._showFullscreen ? this._translations.exitFullscreen : this._translations.enterFullscreen, l = this._isValidWebMap ? "map" : "exclamation-mark-triangle", t = this.selectedLayer === void 0 ? "exclamation-mark-triangle" : "layers";
+    return e.map((o) => {
+      switch (o) {
         case "legend":
-          return this.enableLegend && this.enableSingleExpand ? this._getActionGroup("legend", !1, this._translations.legend, () => this._showLegend()) : this.enableLegend ? this._getWidget(i, this._legendElement.value?.legendWidget, !0) : void 0;
+          return this.enableLegend && this.enableSingleExpand ? this._getActionGroup("legend", !1, this._translations.legend, () => this._showLegend()) : this.enableLegend ? this._getWidget(o, this._legendElement.value?.legendWidget, !0) : void 0;
         case "search":
-          return this.enableSearch && this.enableSingleExpand ? this._getActionGroup("magnifying-glass", !1, this._translations.search, () => this._search()) : this.enableSearch ? this._getWidget(i, this._searchElement.value?.searchWidget, !0) : void 0;
+          return this.enableSearch && this.enableSingleExpand ? this._getActionGroup("magnifying-glass", !1, this._translations.search, () => this._search()) : this.enableSearch ? this._getWidget(o, this._searchElement.value?.searchWidget, !0) : void 0;
         case "fullscreen":
-          return this.enableFullscreen && this.enableSingleExpand ? this._getActionGroup(s, !1, t || "", () => this._expand()) : this.enableFullscreen ? this._getWidget(i, this._fullscreenElement.value?.fullscreenWidget, !1) : void 0;
+          return this.enableFullscreen && this.enableSingleExpand ? this._getActionGroup(s, !1, i || "", () => this._expand()) : this.enableFullscreen ? this._getWidget(o, this._fullscreenElement.value?.fullscreenWidget, !1) : void 0;
         case "basemap":
-          return this.enableBasemap && this.enableSingleExpand ? this._getActionGroup("basemap", !1, this._translations.basemap, () => this._toggleBasemapPicker()) : this.enableBasemap ? this._getWidget(i, this._basemapElement.value?.basemapWidget, !0) : void 0;
+          return this.enableBasemap && this.enableSingleExpand ? this._getActionGroup("basemap", !1, this._translations.basemap, () => this._toggleBasemapPicker()) : this.enableBasemap ? this._getWidget(o, this._basemapElement.value?.basemapWidget, !0) : void 0;
         case "floorfilter":
-          return this.enableFloorFilter && this._hasFloorInfo && this.enableSingleExpand ? this._getActionGroup("urban-model", !1, this._translations.floorFilter, () => this._toggleFloorFilter()) : this.enableFloorFilter && this._hasFloorInfo ? this._getWidget(i, this._floorFilterElement.value?.floorFilterWidget, !0) : void 0;
+          return this.enableFloorFilter && this._hasFloorInfo && this.enableSingleExpand ? this._getActionGroup("urban-model", !1, this._translations.floorFilter, () => this._toggleFloorFilter()) : this.enableFloorFilter && this._hasFloorInfo ? this._getWidget(o, this._floorFilterElement.value?.floorFilterWidget, !0) : void 0;
         case "selectiontool":
-          return this.enableSelectionTool ? this._getActionGroup("cursor-selection", !1, this._translations.selectByRectangle, () => this._toggleSelectionTool(), this._selectionToolActive) : void 0;
+          return this.enableSelectionTool && this.selectedLayer ? (
+            // if selection tool is enabled and a layer is selected then only show selection tool
+            this._getActionGroup("cursor-selection", !1, this._translations.selectByRectangle, () => this._toggleSelectionTool(), this._selectionToolActive)
+          ) : void 0;
         case "home":
           return this.enableHome ? this._getActionGroup("home", !1, this._translations.defaultMapView, () => this._homeWidget?.go()) : void 0;
         case "map-picker":
-          return this.enableMapPicker ? this._getActionGroup("map", !1, "", () => {
-          }) : void 0;
+          return this.enableMapPicker ? this._getActionGroup(l, !1, "", () => {
+          }, !this._isValidWebMap) : void 0;
         case "map-layer-picker":
-          return this.enableMapLayerPicker ? this._getActionGroup("layers", !1, "", () => {
-          }) : void 0;
+          return this.enableMapLayerPicker && this._isValidWebMap ? this._getActionGroup(t, !1, "", () => {
+          }, this.selectedLayer === void 0) : void 0;
         default:
           return "";
       }
@@ -146,19 +153,19 @@ class $ extends F {
   _fullscreenStateChange(e) {
     e === "ready" && this._showFullscreen ? this._showFullscreen = !1 : e === "active" && !this._showFullscreen && (this._showFullscreen = !0);
   }
-  _getActionGroup(e, s, t, i, o) {
-    const r = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", d = this.stackTools ? "" : "margin-bottom-1-2", c = this.stackTools ? "" : "box-shadow";
-    return h`<div><calcite-action alignment=center .indicator=${o} class=${`map-actions ${r} ${d} border-bottom ${c}`} .disabled=${s} .icon=${e} id=${e ?? m} @click=${i} scale=s text ${n(this._mapTool)}><calcite-icon icon=cheveron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && h`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${e ?? m}><span>${t}</span></calcite-tooltip>` || ""}</div>`;
+  _getActionGroup(e, s, i, l, t, o) {
+    const d = this.mapWidgetsSize === "s" ? "square-32" : this.mapWidgetsSize === "m" ? "square-40" : "square-48", c = this.stackTools ? "" : "margin-bottom-1-2", p = this.stackTools ? "" : "box-shadow";
+    return r`<div><calcite-action alignment=center .indicator=${o} class=${`map-actions ${d} ${c} border-bottom ${p} ${t ? "danger-icon-color" : ""}`} .disabled=${s} .icon=${e} id=${e ?? _} @click=${l} scale=s text ${h(this._mapTool)}><calcite-icon icon=cheveron-up scale=s slot=icon></calcite-icon></calcite-action>${!this.isMobile && r`<calcite-tooltip .placement=${this.layout === "vertical" ? "auto" : "bottom"} reference-element=${e ?? _}><span>${i}</span></calcite-tooltip>` || ""}</div>`;
   }
-  _getWidget(e, s, t) {
+  _getWidget(e, s, i) {
     if (this._widgets.indexOf(e) < 0 && this.mapView && s) {
-      const i = this.toolOrder.indexOf(e), o = this.Expand && new this.Expand({
+      const l = this.toolOrder.indexOf(e), t = this.Expand && new this.Expand({
         view: this.mapView,
         content: s
-      }), r = this.enableHome ? 2 : 1;
-      this.mapView.ui.add(t ? o : s, {
+      }), o = this.enableHome ? 2 : 1;
+      this.mapView.ui.add(i ? t : s, {
         position: this.position,
-        index: i > -1 ? i + r : 1
+        index: l > -1 ? l + o : 1
       }), this._widgets.push(e);
     }
   }

package/dist/components/pci-calculator/customElement.js

@@ -5,7 +5,7 @@ import { createRef as o, ref as n } from "lit-html/directives/ref.js";
 import { LitElement as r, safeClassMap as a } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const u = d`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/pdf-download/customElement.js

@@ -7,7 +7,7 @@ import { createRef as c, ref as m } from "lit-html/directives/ref.js";
 import { LitElement as h } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const u = [
   {
     descriptionPDF: {

package/dist/components/public-notification/customElement.js

@@ -12,7 +12,7 @@ import { useContextProvider as P } from "@arcgis/lumina/context";
 import { Controller as D } from "@arcgis/lumina/controllers";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const O = L`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/refine-selection/customElement.js

@@ -11,7 +11,7 @@ import { useContextConsumer as R } from "@arcgis/lumina/context";
 import { p as V } from "../../chunks/publicNotificationContext.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const A = L`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/selection-tool/customElement.js

@@ -5,7 +5,7 @@ import { LitElement as h, createEvent as s, noShadowRoot as l } from "@arcgis/lu
 import { css as n } from "lit";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const p = n`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-article-card/customElement.js

@@ -4,7 +4,7 @@ import { u as s } from "../../chunks/useT9n.js";
 import { LitElement as r, createEvent as n, nothing as e } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const o = a`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-configuration/customElement.js

@@ -9,7 +9,7 @@ import { createRef as m, ref as _ } from "lit-html/directives/ref.js";
 import { LitElement as g, noShadowRoot as I, safeClassMap as v } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const b = p`@layer{/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-configure-dialog/customElement.js

@@ -7,7 +7,7 @@ import { a as f } from "../../chunks/deployAppContexts.js";
 import { createRef as n } from "lit-html/directives/ref.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const _ = m`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-configure-titles/customElement.js

@@ -10,7 +10,7 @@ import { updateGroup as L, updateItem as w } from "@esri/solution-common";
 import { h as f } from "../../chunks/helpers.js";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const E = C`/** @license
  * Copyright 2025 Esri
  *

package/dist/components/solution-contents/customElement.js

@@ -3,7 +3,7 @@ import { css as a, html as r, nothing as c } from "lit";
 import { LitElement as l, createEvent as d, noShadowRoot as o } from "@arcgis/lumina";
 /*! All material copyright Esri, All Rights Reserved, unless otherwise specified.
 See https://js.arcgis.com/1.1/esri/copyright.txt for details.
-v1.1.0-next.20250918 */
+v1.1.0-next.20250919 */
 const h = a`@layer{/** @license
  * Copyright 2025 Esri
  *