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

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.57 */
-const I = u`@layer{/** @license
+v1.2.0-next.59 */
+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,374 @@ 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 {
+      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 {
+      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
 };
+//# sourceMappingURL=customElement.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"customElement.js","sources":["../../../src/components/map-layer-picker/map-layer-picker.tsx"],"sourcesContent":["/**\r\n * @license\r\n * Copyright 2025 Esri\r\n *\r\n * Licensed under the Apache License, Version 2.0 (the 'License');\r\n * you may not use this file except in compliance with the License.\r\n * You may obtain a copy of the License at\r\n *\r\n *    http://www.apache.org/licenses/LICENSE-2.0\r\n *\r\n * Unless required by applicable law or agreed to in writing, software\r\n * distributed under the License is distributed on an 'AS IS' BASIS,\r\n * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.\r\n * See the License for the specific language governing permissions and\r\n * limitations under the License.\r\n */\r\n\r\nimport type T9nStrings from './assets/t9n/messages.en.json';\r\nimport {\r\n  getLayerOrTable,\r\n  getMapLayerHash,\r\n  getMapTableHash\r\n} from '../../utils/mapViewUtils';\r\nimport type {\r\n  IBeforeLayerSelectionChange,\r\n  ILayerAndTableIds,\r\n  ILayerHashInfo,\r\n  IMapItemHash\r\n} from '../../utils/interfaces';\r\nimport { useT9n } from '../../controllers/useT9n';\r\nimport type { PropertyValues } from 'lit';\r\nimport { createRef } from 'lit-html/directives/ref.js';\r\nimport {\r\n  LitElement,\r\n  property,\r\n  createEvent,\r\n  h,\r\n  method,\r\n  noShadowRoot,\r\n  state,\r\n} from '@arcgis/lumina';\r\nimport type {\r\n  JsxNode,\r\n} from '@arcgis/lumina';\r\nimport { styles } from './map-layer-picker.css';\r\nimport {\r\n  useContextConsumer,\r\n} from '@arcgis/lumina/context';\r\nimport {\r\n  pnContext,\r\n} from '../../utils/publicNotificationContext';\r\n\r\ndeclare global {\r\n  interface DeclareElements {\r\n    'map-layer-picker': MapLayerPicker;\r\n  }\r\n}\r\n\r\nexport class MapLayerPicker extends LitElement {\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Overrides\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  static override styles = styles;\r\n  static override shadowRootOptions = noShadowRoot;\r\n\r\n  constructor() {\r\n    super();\r\n    this.listenOn<CustomEvent>(window, 'mapChanged', this.mapChanged);\r\n  }\r\n\r\n  /** TODO: [MIGRATION] Consider inlining some of the watch functions called inside of this method to reduce boilerplate code */\r\n  override willUpdate(\r\n    changes: PropertyValues<this>\r\n  ): void {\r\n    if (changes.has('mapView') && this.hasUpdated) {\r\n      void this.mapViewWatchHandler();\r\n    }\r\n\r\n    if (changes.has('type')) {\r\n      this._layerElement = this.type === 'select' ? this._layerSelectElement : this._layerComboboxElement;\r\n    }\r\n\r\n    // update the layer name when changing the layout (for crowdsource manager)\r\n    if (changes.has('selectedIds') && this.hasUpdated) {\r\n      if (this.mapView) {\r\n        void (async (): Promise<void> => {\r\n          const layer = await getLayerOrTable(this.mapView!, this.selectedIds[0]);\r\n          this.selectedName = layer?.title ?? '';\r\n        })();\r\n      }\r\n    }\r\n\r\n    if (changes.has('enabledLayerIds') && this.hasUpdated) {\r\n      void this.enabledLayerIdsWatchHandler();\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** 'transparent' | 'solid': controls the button appearance when using the 'dropdown' type */\r\n  @property() appearance: 'solid' | 'transparent' = 'transparent';\r\n\r\n  /** boolean: when true the layer order should be defined in the enabledLayerIds, when false we will use the older logic of layers first then tables */\r\n  @property() configLayerOrderDefined = false;\r\n\r\n  /** string: when provided this layer ID will be used when the app loads */\r\n  @property() defaultLayerId = '';\r\n\r\n  /** 'inline-flex' | 'inline-block': controls the display style of the dropdown */\r\n  @property() display: 'inline-block' | 'inline-flex' = 'inline-block';\r\n\r\n  /**\r\n   * string[]: Optional list of enabled layer ids\r\n   *  If empty all layers will be available\r\n   */\r\n  @property() enabledLayerIds: string[] = [];\r\n\r\n  /**\r\n   * number: optional fixed height value for the control.\r\n   * Specified as pixel height.\r\n   */\r\n  @property() height: number | undefined;\r\n\r\n  /** When true the component will render an optimized view for mobile devices */\r\n  @property() isMobile = false;\r\n\r\n  /** esri/views/View: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */\r\n  @property() mapView: __esri.MapView | undefined;\r\n\r\n  /** boolean: When true only editable layers that support the update capability will be available */\r\n  @property() showOnlyUpdatableLayers = false;\r\n\r\n  /** string: optional placeholder icon used with 'combobox' type */\r\n  @property() placeholderIcon: HTMLCalciteIconElement['icon'] | undefined;\r\n\r\n  /** string[]: list of layer ids that have been selected by the end user */\r\n  @property() selectedIds: string[] = [];\r\n\r\n  /** 's' | 'm' | 'l': scale to render the component */\r\n  @property() scale: 'l' | 'm' | 's' = 'm';\r\n\r\n  /** boolean: when true standalone tables will also be available */\r\n  @property() showTables = false;\r\n\r\n  /** boolean: when true table will shown as disabled */\r\n  @property() showTablesDisabled = false;\r\n\r\n  /**\r\n   * boolean: when true a map with a single layer will show a label rather than a dropdown\r\n   * Used in conjunction with _hasMultipleLayers\r\n   */\r\n  @property() showSingleLayerAsLabel = false;\r\n\r\n  /** 'select' | 'combobox' | 'dropdown': type of component to leverage */\r\n  @property() type: 'combobox' | 'dropdown' | 'select' = 'select';\r\n\r\n  /**\r\n   * boolean: When true all layers list should shown in a popover (reference element prop required)\r\n   * In this case the selected layer will not shown as label\r\n   */\r\n  @property() showLayersListInPopover = false;\r\n\r\n  /**\r\n   * string: Refrence element for the calcite popover to show the layer list\r\n   */\r\n  @property() referenceElement = '';\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  State (internal)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * boolean: when true only the selected dropdown item will be rendered\r\n   * temp workaround for https://devtopia.esri.com/WebGIS/arcgis-portal-app-templates/issues/11659\r\n   */\r\n  @state() force = false;\r\n\r\n  /**\r\n   * boolean: when true the map contains more than one valid layers\r\n   * Used in conjunction with showSingleLayerAsLabel\r\n   */\r\n  @state() _hasMultipleLayers = true;\r\n\r\n  /** boolean: when true the map contains valid layers and all expected tools will be enabled */\r\n  @state() _hasValidLayers = true;\r\n\r\n  /** boolean: when true the layer dropdown is open */\r\n  @state() _isDropdownOpen = false;\r\n\r\n  /** string[]: list of layer and table (if showTables is true) ids from the map */\r\n  @state() ids: string[] = [];\r\n\r\n  /** string: current layer name to display when using 'dropdown' type */\r\n  @state() selectedName = '';\r\n\r\n  /** T9nStrings: Strings for the UI */\r\n  @state() _translations = useT9n<typeof T9nStrings>({ name: 'map-layer-picker', blocking: true });\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Properties (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** boolean: When true the default layer has been loaded once and should no longer be used */\r\n  private defaultLayerHonored = false;\r\n\r\n  private _layerElement: any;\r\n\r\n  /** HTMLCalciteSelectElement: The html element for selecting layers */\r\n  private _layerSelectElement = createRef<HTMLCalciteSelectElement>();\r\n\r\n  /** HTMLCalciteComboboxElement: The html element for selecting layers */\r\n  private _layerComboboxElement = createRef<HTMLCalciteComboboxElement>();\r\n\r\n  /** IMapItemHash: id/name lookup */\r\n  private _layerNameHash: IMapItemHash | undefined;\r\n\r\n  /** The context consumer for shared PN state */\r\n  private _pnContextConsumer = useContextConsumer({\r\n    context: pnContext,\r\n    subscribe: true,\r\n  });\r\n\r\n  /** boolean: when true we will not test for any active edits on layer selection change */\r\n  private _skipEditCheck = false;\r\n\r\n  /** IMapItemHash: id/name lookup */\r\n  private _tableNameHash: IMapItemHash | undefined;\r\n\r\n  /** HTMLMapCardElement: Map card refrence element */\r\n  private _popover = createRef<HTMLCalcitePopoverElement['el']>();\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Watch handlers\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Called each time the enabledLayerIds prop is changed. */\r\n  private async enabledLayerIdsWatchHandler(): Promise<void> {\r\n    const selectedLayerRemoved = this.selectedIds.length > 0 && !this.enabledLayerIds.includes(this.selectedIds[0])\r\n    const newLayerAdded = this.enabledLayerIds.some(id => !this.ids.includes(id));\r\n    const hasOrderChanged = this.ids.toString() !== this.enabledLayerIds.toString();\r\n    if (selectedLayerRemoved) {\r\n      void this.mapViewWatchHandler();\r\n    } else if (newLayerAdded || hasOrderChanged) {\r\n      void this._setLayers();\r\n    }\r\n    this._hasMultipleLayers = this.enabledLayerIds.length > 1;\r\n  }\r\n\r\n  /** Called each time the mapView prop is changed. */\r\n  private async mapViewWatchHandler(): Promise<void> {\r\n    await this._setLayers();\r\n    if (this.ids?.length > 0) {\r\n      this._hasValidLayers = true;\r\n      this._hasMultipleLayers = this.ids.length > 1;\r\n      await this._setSelectedLayer(this.ids[0]);\r\n    } else {\r\n      this._hasValidLayers = false;\r\n      this.noLayersFound.emit();\r\n    }\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Methods (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Set the layer by id */\r\n  @method()\r\n  async setLayerById(\r\n    id: string,\r\n    skipEditCheck = false\r\n  ): Promise<void> {\r\n    this._skipEditCheck = skipEditCheck;\r\n    if (!skipEditCheck || (skipEditCheck && id !== this.selectedIds[0])) {\r\n      this._setSelectedLayer(id);\r\n    } else if (skipEditCheck && id === this.selectedIds[0]) {\r\n      // temp workaround should be removed when they add a cancelable event for dropdown items like calciteBeforeItemSelect\r\n      this.force = true;\r\n      setTimeout(() => {\r\n        this.force = false;\r\n      }, 10);\r\n    }\r\n    this._skipEditCheck = false;\r\n  }\r\n\r\n  /** Set the layers by ids */\r\n  @method()\r\n  async setLayerByIds(\r\n    ids: string[],\r\n    skipEditCheck = false\r\n  ): Promise<void> {\r\n    this._skipEditCheck = skipEditCheck;\r\n    this._layerSelectionChange(ids);\r\n    this._skipEditCheck = false;\r\n  }\r\n\r\n  /** updates the layers */\r\n  @method()\r\n  async updateLayer(): Promise<void> {\r\n    await this._setSelectedLayer(this.ids[0]);\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Events (public)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /** Emitted before a new map is loaded */\r\n  beforeLayerSelectionChange = createEvent<IBeforeLayerSelectionChange>();\r\n\r\n  /** Emitted on demand when valid layers are found */\r\n  idsFound = createEvent<ILayerAndTableIds>();\r\n\r\n  /** Emitted on demand when no valid layers are found */\r\n  noLayersFound = createEvent();\r\n\r\n  /** Emitted on demand when a layer is selected */\r\n  layerSelectionChange = createEvent<string[]>();\r\n\r\n\r\n  /** Emits an event when web map is loaded */\r\n  private async mapChanged(\r\n    _evt: CustomEvent\r\n  ): Promise<void> {\r\n    const isValid = _evt.detail.isValid;\r\n    if (!isValid) {\r\n      this._hasValidLayers = false;\r\n      this.noLayersFound.emit();\r\n    }\r\n  }\r\n\r\n  /** Called once just after the component is first connected to the DOM. */\r\n  async load(): Promise<void> {\r\n    await this._setLayers();\r\n    if (this.ids?.length > 0) {\r\n      this._hasValidLayers = true;\r\n      this._hasMultipleLayers = this.ids.length > 1;\r\n      await this._setSelectedLayer(this.ids[0]);\r\n    } else {\r\n      this._hasValidLayers = false;\r\n      this.noLayersFound.emit();\r\n    }\r\n  }\r\n\r\n  /** Renders the component. */\r\n  override render(): JsxNode {\r\n    const id = 'map-layer-picker';\r\n    let style: any = this.height && this.height > 0 && !this.showLayersListInPopover ? { height: `${this.height.toString()}px` } : {};\r\n    style = { ...style, display: this.display };\r\n    return (\r\n      <div class='map-layer-picker-container' style={style}>\r\n        <div class='map-layer-picker' style={style}>\r\n          {!this._hasValidLayers\r\n            ? this._getInvalidPlaceholder()\r\n            : !this._hasMultipleLayers && this.showSingleLayerAsLabel\r\n              ? this._getSingleLayerPlaceholder()\r\n              : this.type === 'combobox'\r\n                ? this._getCombobox(id)\r\n                : this.type === 'select'\r\n                  ? this._getSelect(id)\r\n                  : this.showLayersListInPopover ? this._getMapLayerPopOver() : this._getDropdown(id)\r\n          }\r\n        </div>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /** Called once just after the component is fully loaded and the first render() occurs. */\r\n  loaded(): void {\r\n    if (this.ids?.length > 0 || this.selectedIds?.length === 1) {\r\n      const id = this.selectedIds.length === 1 ? this.selectedIds[0] : this.ids[0];\r\n      if (this.type === 'select') {\r\n        if (this._layerElement.value) {\r\n          this._layerElement.value.value = id;\r\n        }\r\n      } else if (this.type === 'dropdown') {\r\n        this.selectedName =\r\n          this._layerNameHash && Object.keys(this._layerNameHash).indexOf(id) > -1 ? this._layerNameHash[id].name :\r\n            this._tableNameHash && Object.keys(this._tableNameHash).indexOf(id) > -1 ? this._tableNameHash[id].name : '';\r\n      }\r\n    }\r\n    // set focus of calcite popover to the selected element\r\n    this._popover.value?.addEventListener('calcitePopoverOpen', () => {\r\n      const selected = this.el.querySelector('calcite-dropdown-item[selected]') as HTMLCalciteDropdownItemElement;\r\n      void selected?.setFocus();\r\n    })\r\n  }\r\n\r\n  //--------------------------------------------------------------------------\r\n  //\r\n  //  Functions (private)\r\n  //\r\n  //--------------------------------------------------------------------------\r\n\r\n  /**\r\n   * Get the calcite popover for the map layers list\r\n   * @returns The dom node with the will calcite popover\r\n   */\r\n  private _getMapLayerPopOver(): JsxNode {\r\n    const style: any = this.height && this.height > 0 ? { 'max-height': `${this.height.toString()}px` } : {};\r\n    return (\r\n      <calcite-popover\r\n        autoClose\r\n        focusTrapDisabled={true}\r\n        label={this.referenceElement}\r\n        placement='left'\r\n        ref={this._popover}\r\n        referenceElement={this.referenceElement}\r\n        scale='s'>\r\n        <div class={'popover-list'} style={style}>\r\n          {this._getMapLayerOptions()}\r\n        </div>\r\n      </calcite-popover>)\r\n  }\r\n\r\n  /**\r\n   * Create a notice to inform the user that no layers were found\r\n   *\r\n   * @returns Calcite Notice component with the message\r\n   */\r\n  private _getInvalidPlaceholder(): JsxNode {\r\n    return (\r\n      <div>\r\n        <calcite-notice class='height-100' icon='exclamation-mark-triangle' id='no-valid-layers' kind='danger' open>\r\n          <div slot='message'>{this._translations.noLayersFound}</div>\r\n        </calcite-notice>\r\n        <calcite-tooltip label={this._translations.enableEditUpdate} placement='bottom' referenceElement='no-valid-layers'>\r\n          <span>{this._translations.enableEditUpdate}</span>\r\n        </calcite-tooltip>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Show layer name as a label with icon\r\n   *\r\n   * @returns Calcite label with the layer name and icon\r\n   */\r\n  private _getSingleLayerPlaceholder(): JsxNode {\r\n    const itemTypeIcon = this._getItemTypeIcon();\r\n    return (\r\n      <div class='layer-picker-label-container cursor-default'>\r\n        <calcite-icon icon={itemTypeIcon} scale='s' />\r\n        <calcite-label class='no-bottom-margin padding-start-1'>{this.selectedName}</calcite-label>\r\n      </div>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Create a list of layers from the map\r\n   * Used for selecting a single layer.\r\n   *\r\n   * @param id the id for the select component used to support the tooltip\r\n   * @returns Calcite Select component with the ids of the layers from the map\r\n   */\r\n  private _getSelect(\r\n    id: string\r\n  ): JsxNode {\r\n    return (\r\n      <calcite-select id={id} label='' oncalciteSelectChange={() => this._layerSelectionChange()} ref={this._layerElement} scale={this.scale}>\r\n        {this._getMapLayerOptions()}\r\n      </calcite-select>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Create a list of layer ids from the map\r\n   * Used for selecting multiple layers\r\n   *\r\n   * @param id the id for the combobox component used to support the tooltip\r\n   * @returns Calcite ComboBox component with the ids of the layers from the map\r\n   */\r\n  private _getCombobox(\r\n    id: string\r\n  ): JsxNode {\r\n    return (\r\n      <calcite-combobox\r\n        clearDisabled={true}\r\n        id={id}\r\n        label=''\r\n        oncalciteComboboxChange={() => this._layerSelectionChange()}\r\n        placeholderIcon={this.placeholderIcon}\r\n        ref={this._layerElement}\r\n        scale={this.scale}\r\n        selectionMode='single'\r\n      >\r\n        {this._getMapLayerOptions()}\r\n      </calcite-combobox>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Hydrate a dropdown component with items to display the layer names\r\n   *\r\n   * @param id the id for the dropdown component used to support the tooltip\r\n   * @returns Array of Dropdown items with layer names\r\n   */\r\n  private _getDropdown(\r\n    id: string\r\n  ): JsxNode {\r\n    return (\r\n      <calcite-dropdown\r\n        class='layer-picker-dropdown'\r\n        oncalciteDropdownBeforeClose={() => (this._isDropdownOpen = false)}\r\n        oncalciteDropdownBeforeOpen={() => (this._isDropdownOpen = true)}\r\n      >\r\n        {this.isMobile ? this._getDropdownButton() : this._getActionDropdownButton(id)}\r\n        <calcite-dropdown-group selectionMode='single'>{this._getMapLayerOptions()}</calcite-dropdown-group>\r\n      </calcite-dropdown>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get the button that will open the dropdown list wrapped in an action\r\n   *\r\n   * @returns the node for the action and button\r\n   */\r\n  private _getActionDropdownButton(\r\n    id: string\r\n  ): JsxNode {\r\n    return (\r\n      <calcite-action\r\n        appearance='solid'\r\n        id={id} \r\n        slot='trigger' \r\n        text=''\r\n      >\r\n        {this._getDropdownButton()}\r\n      </calcite-action>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get the button that will open the dropdown list\r\n   *\r\n   * @returns the node for the button\r\n   */\r\n  private _getDropdownButton(): JsxNode {\r\n    const itemTypeIcon = this._getItemTypeIcon();\r\n    const buttonClass = this.isMobile ? '' : 'max-width-350';\r\n    const buttonSlot = this.isMobile ? 'trigger' : '';\r\n    const buttonIcon = this._isDropdownOpen ? 'chevron-up' : 'chevron-down';\r\n    return (\r\n      <calcite-button\r\n        alignment='icon-end-space-between'\r\n        appearance={this.appearance}\r\n        class={buttonClass}\r\n        iconEnd={buttonIcon}\r\n        iconStart={itemTypeIcon}\r\n        kind='neutral'\r\n        slot={buttonSlot}\r\n        width='full'\r\n      >\r\n        <div>{this.selectedName}</div>\r\n      </calcite-button>\r\n    );\r\n  }\r\n\r\n  /**\r\n   * Get the appropriate icon based on the selected layer or table\r\n   *\r\n   * @returns a HTMLCalciteIconElement['icon'] for the appropriate icon\r\n   */\r\n  private _getItemTypeIcon(): HTMLCalciteIconElement['icon'] {\r\n    const hasId = this.selectedIds.length > 0 && this._layerNameHash;\r\n    const id = hasId ? this.selectedIds[0] : undefined;\r\n    return hasId ? (Object.keys(this._layerNameHash!).indexOf(id!) > -1 ? 'layers' : 'table') : 'layers';\r\n  }\r\n\r\n  /**\r\n   * Get the appropriate type of dom nodes for each valid layer or table\r\n   *\r\n   * @returns Array of dom nodes with the names of the layers and optionally of the tables\r\n   */\r\n  private _getMapLayerOptions(): JsxNode {\r\n    return this.ids.reduce((prev, cur) => {\r\n      if (this._validLayer(cur)) {\r\n        prev.push(this._getItem(cur, 'layer'));\r\n      } else if (this._validTable(cur)) {\r\n        prev.push(this._getItem(cur, 'table'));\r\n      }\r\n      return prev;\r\n    }, [] as JsxNode[]);\r\n  }\r\n\r\n  /**\r\n   * Get the appropriate type of dom node for the current layer or table id\r\n   *\r\n   * @returns A dom node with the name of the layer or table\r\n   */\r\n  private _getItem(\r\n    id: string,\r\n    itemType: 'layer' | 'table'\r\n  ): JsxNode {\r\n    const item = itemType === 'layer' && this._layerNameHash ? this._layerNameHash[id] : this._tableNameHash ? this._tableNameHash[id] : undefined;\r\n    const disabled = this.showOnlyUpdatableLayers ? item && !item.supportsUpdate : false;\r\n    const name = item?.name || '';\r\n    const selected = this.selectedIds.indexOf(id) > -1;\r\n    return this.type === 'combobox' ? (\r\n      <calcite-combobox-item \r\n        disabled={disabled} \r\n        heading={name} \r\n        selected={selected} \r\n        value={id} \r\n      />\r\n    ) : this.type === 'select' ? (\r\n      <calcite-option \r\n        disabled={disabled} \r\n        label={name} \r\n        selected={selected} \r\n        value={id} \r\n      />\r\n    ) : (this.force && selected) || !this.force ? (\r\n      <calcite-dropdown-group \r\n        class={disabled ? 'disabled' : ''} \r\n        id={name} \r\n        selectionMode={disabled ? 'none' : 'single'}\r\n      >\r\n        <calcite-dropdown-item\r\n          disabled={itemType === 'table' && this.showTablesDisabled ? true : false}\r\n          iconStart={itemType}\r\n          onClick={disabled ? undefined : () => void this._setSelectedLayer(id)}\r\n          selected={selected}\r\n        >\r\n          {name}\r\n        </calcite-dropdown-item>\r\n      </calcite-dropdown-group>\r\n    ) : null;\r\n  }\r\n\r\n  /** Store the layer name based on the user selection */\r\n  private async _setSelectedLayer(\r\n    id: string\r\n  ): Promise<void> {\r\n    if (id !== this.selectedIds[0]) {\r\n      let item;\r\n      const hasDefaultLayer = this.defaultLayerId && !this.defaultLayerHonored;\r\n      if (hasDefaultLayer) {\r\n        item = this._getLayerFromHash(this.defaultLayerId);\r\n        this.defaultLayerHonored = item !== undefined;\r\n        id = this.defaultLayerHonored ? this.defaultLayerId : id;\r\n      }\r\n      item = item ? item : this._getLayerFromHash(id);\r\n\r\n      if (!this._skipEditCheck) {\r\n        const _evt = this.beforeLayerSelectionChange.emit({\r\n          currentId: this.selectedIds[0],\r\n          newId: id,\r\n          ref: this.el,\r\n        });\r\n\r\n        if (_evt.defaultPrevented) {\r\n          return;\r\n        }\r\n      }\r\n      this.selectedName = item?.name;\r\n      this.selectedIds = [id];\r\n      if (this._popover.value) {\r\n        this._popover.value.open = false;\r\n      }\r\n      this.layerSelectionChange.emit(this.selectedIds);\r\n    } else {\r\n      // TODO this was previously done in willRender\r\n      // update the layer name when changing the layout (for crowdsource manager)\r\n      const layer = this.mapView && await getLayerOrTable(this.mapView, this.selectedIds[0]);\r\n      this.selectedName = layer?.title || '';\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Fetch layer hash info for the given id\r\n   *\r\n   * @returns ILayerHashInfo for the id\r\n   */\r\n  private _getLayerFromHash(\r\n    id: string\r\n  ): ILayerHashInfo {\r\n    return this._layerNameHash && Object.keys(this._layerNameHash).indexOf(id) > -1 ?\r\n      this._layerNameHash[id] : this._tableNameHash && Object.keys(this._tableNameHash).indexOf(id) > -1 ?\r\n        this._tableNameHash[id] : undefined as any; // TODO\r\n  }\r\n\r\n  /**\r\n   * Fetch the ids of the layers from the map\r\n   *\r\n   * @returns Promise when the operation has completed\r\n   */\r\n  private async _setLayers(): Promise<void> {\r\n    if (this.mapView) {\r\n      await this._initLayerTableHash();\r\n      let layerIds: string[] = [];\r\n      if (this._layerNameHash) {\r\n        layerIds = this.showOnlyUpdatableLayers ? this._getEditableIds(this._layerNameHash) : Object.keys(this._layerNameHash);\r\n      }\r\n      let tableIds: string[] = [];\r\n      if (this._tableNameHash) {\r\n        tableIds = this.showTables ? (this.showOnlyUpdatableLayers ? this._getEditableIds(this._tableNameHash) : Object.keys(this._tableNameHash)) : [];\r\n      }\r\n      if (this.configLayerOrderDefined) {\r\n        const allIds = [...layerIds.reverse(), ...tableIds.reverse()];\r\n        this.ids = this.enabledLayerIds.length > 0 ? this.enabledLayerIds.filter(id => allIds.includes(id)) : allIds;\r\n      } else {\r\n        // backwards compatability for when we didn't get configLayerOrder from IA config\r\n        this.ids = [\r\n          ...layerIds.reverse().filter(n => (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true)),\r\n          ...tableIds.reverse().filter(n => (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(n) > -1 : true)),\r\n        ];\r\n      }\r\n      this.idsFound.emit({\r\n        layerIds,\r\n        tableIds\r\n      });\r\n    }\r\n  }\r\n\r\n  /**\r\n   * Fetch the ids of all layers that support edits with the update capability\r\n   *\r\n   * @returns array of layer ids\r\n   */\r\n  private _getEditableIds(\r\n    hash: IMapItemHash\r\n  ): string[] {\r\n    return Object.keys(hash).filter((i) => hash[i].supportsUpdate);\r\n  }\r\n\r\n  /**\r\n   * Create a layer id:title hash for layer name display\r\n   *\r\n   * @returns Promise when the operation has completed\r\n   */\r\n  private async _initLayerTableHash(): Promise<void> {\r\n    this._layerNameHash = this.mapView && await getMapLayerHash(this.mapView, this.showOnlyUpdatableLayers);\r\n    this._tableNameHash = this.showTables && this.mapView ? await getMapTableHash(this.mapView, this.showOnlyUpdatableLayers) : {};\r\n  }\r\n\r\n  /**\r\n   * Evaluate if the id exists in the current hash and verify if it should be excluded\r\n   *\r\n   * @returns boolean when true the layer will be used in the current layer picker type\r\n   */\r\n  private _validLayer(\r\n    id: string\r\n  ): boolean {\r\n    const _state = this._pnContextConsumer.value;\r\n    const name = this._layerNameHash && this._layerNameHash[id]?.name;\r\n    return name !== undefined && Object.keys(_state?.managedLayers || []).indexOf(name) < 0 &&\r\n      (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(id) > -1 : true);\r\n  }\r\n\r\n  /**\r\n   * Evaluate if the id exists in the current hash and verify if it should be excluded\r\n   *\r\n   * @returns boolean when true the table will be used in the current layer picker type\r\n   */\r\n  private _validTable(\r\n    id: string\r\n  ): boolean {\r\n    const _state = this._pnContextConsumer.value;\r\n    const name = this._tableNameHash && this._tableNameHash[id]?.name;\r\n    const validName = name && this.showTables;\r\n    return validName ? (_state?.managedTables as any || []).indexOf(name) < 0 &&\r\n      (this.enabledLayerIds?.length > 0 ? this.enabledLayerIds.indexOf(id) > -1 : true) : validName !== undefined;\r\n  }\r\n\r\n  /**\r\n   * Fetch the ids of the layers from the map\r\n   *\r\n   * @returns Promise when the operation has completed\r\n   */\r\n  private _layerSelectionChange(\r\n    ids?: string[]\r\n  ): void {\r\n    if (this._layerElement.value) {\r\n      const _ids = ids ? ids : Array.isArray(this._layerElement.value.value) ? this._layerElement.value.value : [this._layerElement.value.value];\r\n      if (JSON.stringify(_ids) !== JSON.stringify([''])) {\r\n        if (!this._skipEditCheck) {\r\n          const _evt = this.beforeLayerSelectionChange.emit({\r\n            currentIds: this.selectedIds,\r\n            newIds: _ids,\r\n            ref: this.el,\r\n          });\r\n          if (_evt.defaultPrevented) {\r\n            return;\r\n          }\r\n        }\r\n        this.selectedIds = _ids;\r\n        this.layerSelectionChange.emit(this.selectedIds);\r\n      }\r\n    }\r\n  }\r\n}\r\n"],"names":["ref$jsx"],"mappings":"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"}

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
      */