@esri/solutions-components 1.2.0-next.96 → 1.2.0-next.97

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

@@ -1,13 +1,13 @@
-import { c as i } from "../../chunks/runtime.js";
-import { css as t, html as s } from "lit";
-import { createRef as n, ref as l } from "lit-html/directives/ref.js";
-import { LitElement as a, createEvent as r } from "@arcgis/lumina";
-import c from "@arcgis/core/widgets/Fullscreen";
-import * as h from "@arcgis/core/core/reactiveUtils";
 /*! 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.95 */
-const d = t`/** @license
+v1.2.0-next.96 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent } from "@arcgis/lumina";
+import Fullscreen from "@arcgis/core/widgets/Fullscreen";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
+const styles = css`/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -21,19 +21,27 @@ const d = 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}`;
-class o extends a {
+ */
+
+:host {
+  display: block;
+}`;
+class MapFullscreen extends LitElement {
   constructor() {
-    super(...arguments), this._fullscreenElement = n(), this.fullscreenStateChange = r();
+    super(...arguments);
+    this._fullscreenElement = createRef();
+    this.fullscreenStateChange = createEvent();
   }
   static {
-    this.properties = { mapView: 0, fullscreenWidget: 0 };
+    this.properties = { mapView: [0, {}, { attribute: false }], fullscreenWidget: [0, {}, { attribute: false }] };
   }
   static {
-    this.styles = d;
+    this.styles = styles;
   }
-  willUpdate(e) {
-    e.has("mapView") && this.mapViewWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(async () => {
@@ -41,23 +49,33 @@ class o extends a {
     });
   }
   render() {
-    return s`<div class="fullscreen-widget" ${l(this._fullscreenElement)}></div>`;
+    return html`<div class="fullscreen-widget" ${ref(this._fullscreenElement)}></div>`;
   }
   async updated() {
-    this.hasUpdated || await this._initFullscreenWidget();
+    if (!this.hasUpdated) {
+      await this._initFullscreenWidget();
+    }
   }
   async loaded() {
     await this._initFullscreenWidget();
   }
   async _initFullscreenWidget() {
-    this.mapView && this._fullscreenElement.value && !this.fullscreenWidget ? (this.fullscreenWidget = new c({
-      view: this.mapView
-    }), await this.fullscreenWidget?.when(() => {
-      this._fullscreenStateChangeHandle && this._fullscreenStateChangeHandle.remove(), this._fullscreenStateChangeHandle = h?.watch(() => this.fullscreenWidget?.viewModel.state, (e) => e && this.fullscreenStateChange.emit(e));
-    })) : this.fullscreenWidget && (this.fullscreenWidget.view = this.mapView);
+    if (this.mapView && this._fullscreenElement.value && !this.fullscreenWidget) {
+      this.fullscreenWidget = new Fullscreen({
+        view: this.mapView
+      });
+      await this.fullscreenWidget?.when(() => {
+        if (this._fullscreenStateChangeHandle) {
+          this._fullscreenStateChangeHandle.remove();
+        }
+        this._fullscreenStateChangeHandle = reactiveUtils?.watch(() => this.fullscreenWidget?.viewModel.state, (state) => state && this.fullscreenStateChange.emit(state));
+      });
+    } else if (this.fullscreenWidget) {
+      this.fullscreenWidget.view = this.mapView;
+    }
   }
 }
-i("map-fullscreen", o);
+customElement("map-fullscreen", MapFullscreen);
 export {
-  o as MapFullscreen
+  MapFullscreen
 };

package/dist/components/map-layer-picker/customElement.d.ts

@@ -45,7 +45,7 @@ export declare class MapLayerPicker extends LitElement {
      * @default false
      */
     isMobile: boolean;
-    /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /**
      * boolean: When true only editable layers that support the update capability will be available

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

@@ -1,15 +1,16 @@
-import { c as m } from "../../chunks/runtime.js";
-import { d as p, e as b, f as _ } from "../../chunks/mapViewUtils.js";
-import { u as f } from "../../chunks/useT9n.js";
-import { css as u, 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 h, 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.2/esri/copyright.txt for details.
-v1.2.0-next.95 */
-const I = u`@layer{/** @license
+v1.2.0-next.96 */
+import { c as customElement } from "../../chunks/runtime.js";
+import { d as getLayerOrTable, e as getMapLayerHash, f as getMapTableHash } from "../../chunks/mapViewUtils.js";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html, nothing } from "lit";
+import { createRef, ref } from "lit-html/directives/ref.js";
+import { LitElement, createEvent, noShadowRoot, safeStyleMap, safeClassMap } from "@arcgis/lumina";
+import { useContextConsumer } from "@arcgis/lumina/context";
+import { p as pnContext } from "../../chunks/publicNotificationContext.js";
+const styles = css`@layer{
+/** @license
  * Copyright 2025 Esri
  *
  * Licensed under the Apache License, Version 2.0 (the "License");
@@ -23,175 +24,373 @@ const I = u`@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}.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 O extends g {
+ */
+
+: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 MapLayerPicker extends LitElement {
   constructor() {
-    super(), this.appearance = "transparent", this.configLayerOrderDefined = !1, this.defaultLayerId = "", this.display = "inline-block", this.enabledLayerIds = [], this.isMobile = !1, this.showOnlyUpdatableLayers = !1, 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 = f({ 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 = h(), this.idsFound = h(), this.noLayersFound = h(), this.layerSelectionChange = h(), this.listenOn(window, "mapChanged", this.mapChanged);
+    super();
+    this.appearance = "transparent";
+    this.configLayerOrderDefined = false;
+    this.defaultLayerId = "";
+    this.display = "inline-block";
+    this.enabledLayerIds = [];
+    this.isMobile = false;
+    this.showOnlyUpdatableLayers = false;
+    this.selectedIds = [];
+    this.scale = "m";
+    this.showTables = false;
+    this.showTablesDisabled = false;
+    this.showSingleLayerAsLabel = false;
+    this.type = "select";
+    this.showLayersListInPopover = false;
+    this.referenceElement = "";
+    this.force = false;
+    this._hasMultipleLayers = true;
+    this._hasValidLayers = true;
+    this._isDropdownOpen = false;
+    this.ids = [];
+    this.selectedName = "";
+    this._translations = useT9n({ name: "map-layer-picker", blocking: true });
+    this.defaultLayerHonored = false;
+    this._layerSelectElement = createRef();
+    this._layerComboboxElement = createRef();
+    this._pnContextConsumer = useContextConsumer({
+      context: pnContext,
+      subscribe: true
+    });
+    this._skipEditCheck = false;
+    this._popover = createRef();
+    this.beforeLayerSelectionChange = createEvent();
+    this.idsFound = createEvent();
+    this.noLayersFound = createEvent();
+    this.layerSelectionChange = createEvent();
+    this.listenOn(window, "mapChanged", this.mapChanged);
   }
   static {
-    this.properties = { appearance: 1, configLayerOrderDefined: 5, defaultLayerId: 1, display: 1, enabledLayerIds: 0, height: 9, isMobile: 5, mapView: 0, showOnlyUpdatableLayers: 5, placeholderIcon: 0, 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 };
+    this.properties = { appearance: 1, configLayerOrderDefined: [5, {}, { type: Boolean }], defaultLayerId: 1, display: 1, enabledLayerIds: [0, {}, { attribute: false }], height: [9, {}, { type: Number }], isMobile: [5, {}, { type: Boolean }], mapView: [0, {}, { attribute: false }], showOnlyUpdatableLayers: [5, {}, { type: Boolean }], placeholderIcon: [0, {}, { attribute: false }], selectedIds: [0, {}, { attribute: false }], scale: 1, showTables: [5, {}, { type: Boolean }], showTablesDisabled: [5, {}, { type: Boolean }], showSingleLayerAsLabel: [5, {}, { type: Boolean }], type: 1, showLayersListInPopover: [5, {}, { type: Boolean }], referenceElement: 1, force: [16, {}, { state: true }], _hasMultipleLayers: [16, {}, { state: true }], _hasValidLayers: [16, {}, { state: true }], _isDropdownOpen: [16, {}, { state: true }], ids: [16, {}, { state: true }], selectedName: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = I;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = L;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(e) {
-    e.has("mapView") && this.hasUpdated && this.mapViewWatchHandler(), e.has("type") && (this._layerElement = this.type === "select" ? this._layerSelectElement : this._layerComboboxElement), e.has("selectedIds") && this.hasUpdated && this.mapView && (async () => {
-      const t = await p(this.mapView, this.selectedIds[0]);
-      this.selectedName = t?.title ?? "";
-    })(), e.has("enabledLayerIds") && this.hasUpdated && this.enabledLayerIdsWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("mapView") && this.hasUpdated) {
+      void this.mapViewWatchHandler();
+    }
+    if (changes.has("type")) {
+      this._layerElement = this.type === "select" ? this._layerSelectElement : this._layerComboboxElement;
+    }
+    if (changes.has("selectedIds") && this.hasUpdated) {
+      if (this.mapView) {
+        void (async () => {
+          const layer = await getLayerOrTable(this.mapView, this.selectedIds[0]);
+          this.selectedName = layer?.title ?? "";
+        })();
+      }
+    }
+    if (changes.has("enabledLayerIds") && this.hasUpdated) {
+      void this.enabledLayerIdsWatchHandler();
+    }
   }
   async enabledLayerIdsWatchHandler() {
-    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;
+    const selectedLayerRemoved = this.selectedIds.length > 0 && !this.enabledLayerIds.includes(this.selectedIds[0]);
+    const newLayerAdded = this.enabledLayerIds.some((id) => !this.ids.includes(id));
+    const hasOrderChanged = this.ids.toString() !== this.enabledLayerIds.toString();
+    if (selectedLayerRemoved) {
+      void this.mapViewWatchHandler();
+    } else if (newLayerAdded || hasOrderChanged) {
+      void 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());
+    await this._setLayers();
+    if (this.ids?.length > 0) {
+      this._hasValidLayers = true;
+      this._hasMultipleLayers = this.ids.length > 1;
+      await this._setSelectedLayer(this.ids[0]);
+    } else if (this.mapView) {
+      this._hasValidLayers = false;
+      this.noLayersFound.emit();
+    }
   }
-  async setLayerById(e, t = !1) {
-    this._skipEditCheck = t, !t || t && e !== this.selectedIds[0] ? this._setSelectedLayer(e) : t && e === this.selectedIds[0] && (this.force = !0, setTimeout(() => {
-      this.force = !1;
-    }, 10)), this._skipEditCheck = !1;
+  async setLayerById(id, skipEditCheck = false) {
+    this._skipEditCheck = skipEditCheck;
+    if (!skipEditCheck || skipEditCheck && id !== this.selectedIds[0]) {
+      this._setSelectedLayer(id);
+    } else if (skipEditCheck && id === this.selectedIds[0]) {
+      this.force = true;
+      setTimeout(() => {
+        this.force = false;
+      }, 10);
+    }
+    this._skipEditCheck = false;
   }
-  async setLayerByIds(e, t = !1) {
-    this._skipEditCheck = t, this._layerSelectionChange(e), this._skipEditCheck = !1;
+  async setLayerByIds(ids, skipEditCheck = false) {
+    this._skipEditCheck = skipEditCheck;
+    this._layerSelectionChange(ids);
+    this._skipEditCheck = false;
   }
   async updateLayer() {
     await this._setSelectedLayer(this.ids[0]);
   }
-  async mapChanged(e) {
-    e.detail.isValid || (this._hasValidLayers = !1, this.noLayersFound.emit());
+  async mapChanged(_evt) {
+    const isValid = _evt.detail.isValid;
+    if (!isValid) {
+      this._hasValidLayers = false;
+      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());
+    await this._setLayers();
+    if (this.ids?.length > 0) {
+      this._hasValidLayers = true;
+      this._hasMultipleLayers = this.ids.length > 1;
+      await this._setSelectedLayer(this.ids[0]);
+    } else if (this.mapView) {
+      this._hasValidLayers = false;
+      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 }, 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>`;
+    const id = "map-layer-picker";
+    let style = this.height && this.height > 0 && !this.showLayersListInPopover ? { height: `${this.height.toString()}px` } : {};
+    style = { ...style, display: this.display };
+    return html`<div class="map-layer-picker-container" style=${safeStyleMap(style)}><div class="map-layer-picker" style=${safeStyleMap(style)}>${!this._hasValidLayers ? this._getInvalidPlaceholder() : !this._hasMultipleLayers && this.showSingleLayerAsLabel ? this._getSingleLayerPlaceholder() : this.type === "combobox" ? this._getCombobox(id) : this.type === "select" ? this._getSelect(id) : this.showLayersListInPopover ? this._getMapLayerPopOver() : this._getDropdown(id)}</div></div>`;
   }
   loaded() {
     if (this.ids?.length > 0 || this.selectedIds?.length === 1) {
-      const e = this.selectedIds.length === 1 ? this.selectedIds[0] : this.ids[0];
-      this.type === "select" ? this._layerElement.value && (this._layerElement.value.value = e) : this.type === "dropdown" && (this.selectedName = this._layerNameHash && Object.keys(this._layerNameHash).indexOf(e) > -1 ? this._layerNameHash[e].name : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(e) > -1 ? this._tableNameHash[e].name : "");
+      const id = this.selectedIds.length === 1 ? this.selectedIds[0] : this.ids[0];
+      if (this.type === "select") {
+        if (this._layerElement.value) {
+          this._layerElement.value.value = id;
+        }
+      } else if (this.type === "dropdown") {
+        this.selectedName = this._layerNameHash && Object.keys(this._layerNameHash).indexOf(id) > -1 ? this._layerNameHash[id].name : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(id) > -1 ? this._tableNameHash[id].name : "";
+      }
     }
     this._popover.value?.addEventListener("calcitePopoverOpen", () => {
-      this.el.querySelector("calcite-dropdown-item[selected]")?.setFocus();
+      const selected = this.el.querySelector("calcite-dropdown-item[selected]");
+      void selected?.setFocus();
     });
   }
   _getMapLayerPopOver() {
-    const e = this.height && this.height > 0 ? { "max-height": `${this.height.toString()}px` } : {};
-    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>`;
+    const style = this.height && this.height > 0 ? { "max-height": `${this.height.toString()}px` } : {};
+    return html`<calcite-popover auto-close focus-trap-disabled .label=${this.referenceElement} placement=left .referenceElement=${this.referenceElement} scale=s ${ref(this._popover)}><div class=popover-list style=${safeStyleMap(style)}>${this._getMapLayerOptions()}</div></calcite-popover>`;
   }
   _getInvalidPlaceholder() {
-    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>`;
+    return html`<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 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>`;
+    const itemTypeIcon = this._getItemTypeIcon();
+    return html`<div class="layer-picker-label-container cursor-default"><calcite-icon .icon=${itemTypeIcon} scale=s></calcite-icon><calcite-label class="no-bottom-margin padding-start-1">${this.selectedName}</calcite-label></div>`;
   }
-  _getSelect(e) {
-    return i`<calcite-select id=${e ?? l} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${d(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
+  _getSelect(id) {
+    return html`<calcite-select id=${id ?? nothing} label @calciteSelectChange=${() => this._layerSelectionChange()} .scale=${this.scale} ${ref(this._layerElement)}>${this._getMapLayerOptions()}</calcite-select>`;
   }
-  _getCombobox(e) {
-    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>`;
+  _getCombobox(id) {
+    return html`<calcite-combobox clear-disabled id=${id ?? nothing} label @calciteComboboxChange=${() => this._layerSelectionChange()} .placeholderIcon=${this.placeholderIcon} .scale=${this.scale} selection-mode=single ${ref(this._layerElement)}>${this._getMapLayerOptions()}</calcite-combobox>`;
   }
-  _getDropdown(e) {
-    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>`;
+  _getDropdown(id) {
+    return html`<calcite-dropdown class="layer-picker-dropdown" @calciteDropdownBeforeClose=${() => this._isDropdownOpen = false} @calciteDropdownBeforeOpen=${() => this._isDropdownOpen = true}>${this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(id)}<calcite-dropdown-group selection-mode=single>${this._getMapLayerOptions()}</calcite-dropdown-group></calcite-dropdown>`;
   }
-  _getActionDropdownButton(e) {
-    return i`<calcite-action appearance=solid id=${e ?? l} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
+  _getActionDropdownButton(id) {
+    return html`<calcite-action appearance=solid id=${id ?? nothing} slot=trigger text>${this._getDropdownButton()}</calcite-action>`;
   }
   _getDropdownButton() {
-    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>`;
+    const itemTypeIcon = this._getItemTypeIcon();
+    const buttonClass = this.isMobile ? "" : "max-width-350";
+    const buttonSlot = this.isMobile ? "trigger" : "";
+    const buttonIcon = this._isDropdownOpen ? "chevron-up" : "chevron-down";
+    return html`<calcite-button alignment=icon-end-space-between .appearance=${this.appearance} class=${safeClassMap(buttonClass)} .iconEnd=${buttonIcon} .iconStart=${itemTypeIcon} kind=neutral slot=${buttonSlot ?? nothing} width=full><div>${this.selectedName}</div></calcite-button>`;
   }
   _getItemTypeIcon() {
-    const e = this.selectedIds.length > 0 && this._layerNameHash, t = e ? this.selectedIds[0] : void 0;
-    return e ? Object.keys(this._layerNameHash).indexOf(t) > -1 ? "layers" : "table" : "layers";
+    const hasId = this.selectedIds.length > 0 && this._layerNameHash;
+    const id = hasId ? this.selectedIds[0] : void 0;
+    return hasId ? Object.keys(this._layerNameHash).indexOf(id) > -1 ? "layers" : "table" : "layers";
   }
   _getMapLayerOptions() {
-    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, a = this.showOnlyUpdatableLayers ? s && !s.supportsUpdate : !1, r = s?.name || "", n = this.selectedIds.indexOf(e) > -1;
-    return this.type === "combobox" ? i`<calcite-combobox-item .disabled=${a} .heading=${r} .selected=${n} .value=${e}></calcite-combobox-item>` : this.type === "select" ? i`<calcite-option .disabled=${a} .label=${r} .selected=${n} .value=${e}></calcite-option>` : this.force && n || !this.force ? i`<calcite-dropdown-group class=${y(a ? "disabled" : "")} id=${r ?? l} .selectionMode=${a ? "none" : "single"}><calcite-dropdown-item .disabled=${!!(t === "table" && this.showTablesDisabled)} .iconStart=${t} @click=${a ? void 0 : () => {
-      this._setSelectedLayer(e);
-    }} .selected=${n}>${r}</calcite-dropdown-item></calcite-dropdown-group>` : null;
-  }
-  async _setSelectedLayer(e) {
-    if (e !== this.selectedIds[0]) {
-      let t;
-      if (this.defaultLayerId && !this.defaultLayerHonored && (t = this._getLayerFromHash(this.defaultLayerId), this.defaultLayerHonored = t !== void 0, e = this.defaultLayerHonored ? this.defaultLayerId : e), t = t || this._getLayerFromHash(e), !this._skipEditCheck && this.beforeLayerSelectionChange.emit({
-        currentId: this.selectedIds[0],
-        newId: e,
-        ref: this.el
-      }).defaultPrevented)
-        return;
-      this.selectedName = t?.name, this.selectedIds = [e], this._popover.value && (this._popover.value.open = !1), this.layerSelectionChange.emit(this.selectedIds);
+    return this.ids.reduce((prev, cur) => {
+      if (this._validLayer(cur)) {
+        prev.push(this._getItem(cur, "layer"));
+      } else if (this._validTable(cur)) {
+        prev.push(this._getItem(cur, "table"));
+      }
+      return prev;
+    }, []);
+  }
+  _getItem(id, itemType) {
+    const item = itemType === "layer" && this._layerNameHash ? this._layerNameHash[id] : this._tableNameHash ? this._tableNameHash[id] : void 0;
+    const disabled = this.showOnlyUpdatableLayers ? item && !item.supportsUpdate : false;
+    const name = item?.name || "";
+    const selected = this.selectedIds.indexOf(id) > -1;
+    return this.type === "combobox" ? html`<calcite-combobox-item .disabled=${disabled} .heading=${name} .selected=${selected} .value=${id}></calcite-combobox-item>` : this.type === "select" ? html`<calcite-option .disabled=${disabled} .label=${name} .selected=${selected} .value=${id}></calcite-option>` : this.force && selected || !this.force ? html`<calcite-dropdown-group class=${safeClassMap(disabled ? "disabled" : "")} id=${name ?? nothing} .selectionMode=${disabled ? "none" : "single"}><calcite-dropdown-item .disabled=${itemType === "table" && this.showTablesDisabled ? true : false} .iconStart=${itemType} @click=${disabled ? void 0 : () => void this._setSelectedLayer(id)} .selected=${selected}>${name}</calcite-dropdown-item></calcite-dropdown-group>` : null;
+  }
+  async _setSelectedLayer(id) {
+    if (id !== this.selectedIds[0]) {
+      let item;
+      const hasDefaultLayer = this.defaultLayerId && !this.defaultLayerHonored;
+      if (hasDefaultLayer) {
+        item = this._getLayerFromHash(this.defaultLayerId);
+        this.defaultLayerHonored = item !== void 0;
+        id = this.defaultLayerHonored ? this.defaultLayerId : id;
+      }
+      item = item ? item : this._getLayerFromHash(id);
+      if (!this._skipEditCheck) {
+        const _evt = this.beforeLayerSelectionChange.emit({
+          currentId: this.selectedIds[0],
+          newId: id,
+          ref: this.el
+        });
+        if (_evt.defaultPrevented) {
+          return;
+        }
+      }
+      this.selectedName = item?.name;
+      this.selectedIds = [id];
+      if (this._popover.value) {
+        this._popover.value.open = false;
+      }
+      this.layerSelectionChange.emit(this.selectedIds);
     } else {
-      const t = this.mapView && await p(this.mapView, this.selectedIds[0]);
-      this.selectedName = t?.title || "";
+      const layer = this.mapView && await getLayerOrTable(this.mapView, this.selectedIds[0]);
+      this.selectedName = layer?.title || "";
     }
   }
-  _getLayerFromHash(e) {
-    return this._layerNameHash && Object.keys(this._layerNameHash).indexOf(e) > -1 ? this._layerNameHash[e] : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(e) > -1 ? this._tableNameHash[e] : void 0;
+  _getLayerFromHash(id) {
+    return this._layerNameHash && Object.keys(this._layerNameHash).indexOf(id) > -1 ? this._layerNameHash[id] : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(id) > -1 ? this._tableNameHash[id] : void 0;
   }
   async _setLayers() {
     if (this.mapView) {
       await this._initLayerTableHash();
-      let e = [];
-      this._layerNameHash && (e = this.showOnlyUpdatableLayers ? this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash));
-      let t = [];
-      if (this._tableNameHash && (t = this.showTables ? this.showOnlyUpdatableLayers ? this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : []), this.configLayerOrderDefined) {
-        const s = [...e.reverse(), ...t.reverse()];
-        this.ids = this.enabledLayerIds.length > 0 ? this.enabledLayerIds.filter((a) => s.includes(a)) : s;
-      } else
+      let layerIds = [];
+      if (this._layerNameHash) {
+        layerIds = this.showOnlyUpdatableLayers ? this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);
+      }
+      let tableIds = [];
+      if (this._tableNameHash) {
+        tableIds = this.showTables ? this.showOnlyUpdatableLayers ? this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash) : [];
+      }
+      if (this.configLayerOrderDefined) {
+        const allIds = [...layerIds.reverse(), ...tableIds.reverse()];
+        this.ids = this.enabledLayerIds.length > 0 ? this.enabledLayerIds.filter((id) => allIds.includes(id)) : allIds;
+      } else {
         this.ids = [
-          ...e.reverse().filter((s) => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(s) > -1 : !0),
-          ...t.reverse().filter((s) => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(s) > -1 : !0)
+          ...layerIds.reverse().filter((n) => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true),
+          ...tableIds.reverse().filter((n) => this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true)
         ];
+      }
       this.idsFound.emit({
-        layerIds: e,
-        tableIds: t
+        layerIds,
+        tableIds
       });
     }
   }
-  _getEditableIds(e) {
-    return Object.keys(e).filter((t) => e[t].supportsUpdate);
+  _getEditableIds(hash) {
+    return Object.keys(hash).filter((i) => hash[i].supportsUpdate);
   }
   async _initLayerTableHash() {
-    this._layerNameHash = this.mapView && await b(this.mapView, this.showOnlyUpdatableLayers), this._tableNameHash = this.showTables && this.mapView ? await _(this.mapView, this.showOnlyUpdatableLayers) : {};
+    this._layerNameHash = this.mapView && await getMapLayerHash(this.mapView, this.showOnlyUpdatableLayers);
+    this._tableNameHash = this.showTables && this.mapView ? await getMapTableHash(this.mapView, this.showOnlyUpdatableLayers) : {};
   }
-  _validLayer(e) {
-    const t = this._pnContextConsumer.value, s = this._layerNameHash && this._layerNameHash[e]?.name;
-    return s !== void 0 && Object.keys(t?.managedLayers || []).indexOf(s) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(e) > -1 : !0);
+  _validLayer(id) {
+    const _state = this._pnContextConsumer.value;
+    const name = this._layerNameHash && this._layerNameHash[id]?.name;
+    return name !== void 0 && Object.keys(_state?.managedLayers || []).indexOf(name) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(id) > -1 : true);
   }
-  _validTable(e) {
-    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;
+  _validTable(id) {
+    const _state = this._pnContextConsumer.value;
+    const name = this._tableNameHash && this._tableNameHash[id]?.name;
+    const validName = name && this.showTables;
+    return validName ? (_state?.managedTables || []).indexOf(name) < 0 && (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(id) > -1 : true) : validName !== void 0;
   }
-  _layerSelectionChange(e) {
+  _layerSelectionChange(ids) {
     if (this._layerElement.value) {
-      const t = e || (Array.isArray(this._layerElement.value.value) ? this._layerElement.value.value : [this._layerElement.value.value]);
-      if (JSON.stringify(t) !== JSON.stringify([""])) {
-        if (!this._skipEditCheck && this.beforeLayerSelectionChange.emit({
-          currentIds: this.selectedIds,
-          newIds: t,
-          ref: this.el
-        }).defaultPrevented)
-          return;
-        this.selectedIds = t, this.layerSelectionChange.emit(this.selectedIds);
+      const _ids = ids ? ids : Array.isArray(this._layerElement.value.value) ? this._layerElement.value.value : [this._layerElement.value.value];
+      if (JSON.stringify(_ids) !== JSON.stringify([""])) {
+        if (!this._skipEditCheck) {
+          const _evt = this.beforeLayerSelectionChange.emit({
+            currentIds: this.selectedIds,
+            newIds: _ids,
+            ref: this.el
+          });
+          if (_evt.defaultPrevented) {
+            return;
+          }
+        }
+        this.selectedIds = _ids;
+        this.layerSelectionChange.emit(this.selectedIds);
       }
     }
   }
 }
-m("map-layer-picker", O);
+customElement("map-layer-picker", MapLayerPicker);
 export {
-  O as MapLayerPicker
+  MapLayerPicker
 };

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

@@ -4,10 +4,10 @@ import { PropertyValues } from 'lit';
 import { PublicLitElement as LitElement, TargetedEvent, JsxNode } from '@arcgis/lumina';
 
 export declare class MapLegend extends LitElement {
-    /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+    /** esri/views/View: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
     mapView: __esri.MapView | undefined;
     /**
-     * esri/widgets/Legend: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html
+     * esri/widgets/Legend: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-Legend.html
      *
      * Legend instance
      */