@esri/solutions-components 5.0.3 → 5.0.4-next.2

package/dist/components/layer-list/customElement.js

@@ -1,123 +1,207 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as y } from "../../chunks/runtime.js";
-import { d, a as m, c as p } from "../../chunks/mapViewUtils.js";
-import * as o from "@arcgis/core/intl";
-import { u as f } from "../../chunks/useT9n.js";
-import { css as L, html as a } from "lit";
-import { LitElement as u, createEvent as h, noShadowRoot as w } from "@arcgis/lumina";
-import * as g from "@arcgis/core/core/reactiveUtils";
-async function _(n, t) {
-  const { style: i = "decimal", places: e = 2 } = t || {}, s = o.convertNumberFormatToIntlOptions({
-    places: e,
-    digitSeparator: !0
+import { c as customElement } from "../../chunks/runtime.js";
+import { d as getMapLayerHash, a as getAllFeatureLayers, c as getFeatureLayerView } from "../../chunks/mapViewUtils.js";
+import * as intl from "@arcgis/core/intl";
+import { u as useT9n } from "../../chunks/useT9n.js";
+import { css, html } from "lit";
+import { LitElement, createEvent, noShadowRoot } from "@arcgis/lumina";
+import * as reactiveUtils from "@arcgis/core/core/reactiveUtils";
+async function formatNumber(number, options) {
+  const { style = "decimal", places = 2 } = options || {};
+  const numberFormatIntlOptions = intl.convertNumberFormatToIntlOptions({
+    places,
+    digitSeparator: true
   });
-  return s.style = i, o.formatNumber(n, s);
+  numberFormatIntlOptions.style = style;
+  return intl.formatNumber(number, numberFormatIntlOptions);
 }
-const x = L`@layer{:host{display:block}.notice-msg{width:calc(100% - 20px);padding:10px}.layer-name{font-weight:500;word-break:break-word}.feature-count{padding:0 10px}}`;
-class I extends u {
+const styles = css`@layer{
+/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}
+
+.notice-msg {
+  width: calc(100% - 20px);
+  padding: 10px;
+}
+
+.layer-name {
+  font-weight: 500;
+  word-break: break-word;
+}
+
+.feature-count {
+  padding: 0 10px;
+}
+}`;
+class LayerList extends LitElement {
   constructor() {
-    super(), this.layers = [], this.showFeatureCount = !0, this.showNextIcon = !1, this.applyLayerViewFilter = !1, this.filterByMapExtent = !1, this._noLayersToDisplay = !1, this._mapLayerIds = [], this._isLoading = !1, this._translations = f({ name: "layer-list", blocking: !0 }), this.layerSelect = h(), this.layersListLoaded = h(), this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
+    super();
+    this.layers = [];
+    this.showFeatureCount = true;
+    this.showNextIcon = false;
+    this.applyLayerViewFilter = false;
+    this.filterByMapExtent = false;
+    this._noLayersToDisplay = false;
+    this._mapLayerIds = [];
+    this._isLoading = false;
+    this._translations = useT9n({ name: "layer-list", blocking: true });
+    this.layerSelect = createEvent();
+    this.layersListLoaded = createEvent();
+    this.listenOn(window, "selectedLanguageUpdated", this.selectedLanguageUpdated);
   }
   static {
-    this.properties = { mapView: 0, layers: 0, showFeatureCount: 5, showNextIcon: 5, applyLayerViewFilter: 5, filterByMapExtent: 5, _noLayersToDisplay: 16, _mapLayerIds: 16, _isLoading: 16, _translations: 16 };
+    this.properties = { mapView: [0, {}, { attribute: false }], layers: [0, {}, { attribute: false }], showFeatureCount: [5, {}, { type: Boolean }], showNextIcon: [5, {}, { type: Boolean }], applyLayerViewFilter: [5, {}, { type: Boolean }], filterByMapExtent: [5, {}, { type: Boolean }], _noLayersToDisplay: [16, {}, { state: true }], _mapLayerIds: [16, {}, { state: true }], _isLoading: [16, {}, { state: true }], _translations: [16, {}, { state: true }] };
   }
   static {
-    this.styles = x;
+    this.styles = styles;
   }
   static {
-    this.shadowRootOptions = w;
+    this.shadowRootOptions = noShadowRoot;
   }
-  willUpdate(t) {
-    t.has("filterByMapExtent") && this.hasUpdated && this.filterByMapExtentWatchHandler(this.filterByMapExtent);
+  willUpdate(changes) {
+    if (changes.has("filterByMapExtent") && this.hasUpdated) {
+      this.filterByMapExtentWatchHandler(this.filterByMapExtent);
+    }
   }
-  filterByMapExtentWatchHandler(t) {
-    t ? this.initializeMapExtentFilter() : this._filterByMapExtentHandle && this._filterByMapExtentHandle.remove();
+  filterByMapExtentWatchHandler(enabled) {
+    if (enabled) {
+      this.initializeMapExtentFilter();
+    } else if (this._filterByMapExtentHandle) {
+      this._filterByMapExtentHandle.remove();
+    }
   }
   async refresh() {
     await this.setLayers();
   }
-  async selectedLanguageUpdated(t) {
+  async selectedLanguageUpdated(_evt) {
     await this.setLayers();
   }
   async load() {
-    this.filterByMapExtent && this.initializeMapExtentFilter();
+    if (this.filterByMapExtent) {
+      this.initializeMapExtentFilter();
+    }
   }
   async loaded() {
     await this.setLayers();
   }
   render() {
-    return a`${this._isLoading && a`<calcite-loader label scale=m></calcite-loader>` || ""}${!this._isLoading && this.mapView && this._noLayersToDisplay && a`<calcite-notice class="notice-msg" icon=layers-reference kind=danger open><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.noLayerToDisplayErrorMsg}</div></calcite-notice>` || ""}${!this._isLoading && this.mapView && a`<calcite-list label selection-appearance=border selection-mode=none>${this.filterByMapExtent && this._mapLayerIds.length > 0 && this.getExtentNotice() || ""}${this.renderLayerList()}</calcite-list>` || ""}`;
+    return html`${this._isLoading && html`<calcite-loader label scale=m></calcite-loader>` || ""}${!this._isLoading && this.mapView && this._noLayersToDisplay && html`<calcite-notice class="notice-msg" icon=layers-reference kind=danger open><div slot=title>${this._translations.error}</div><div slot=message>${this._translations.noLayerToDisplayErrorMsg}</div></calcite-notice>` || ""}${!this._isLoading && this.mapView && html`<calcite-list label selection-appearance=border selection-mode=none>${this.filterByMapExtent && this._mapLayerIds.length > 0 && this.getExtentNotice() || ""}${this.renderLayerList()}</calcite-list>` || ""}`;
   }
   initializeMapExtentFilter() {
-    this._filterByMapExtentHandle = g.when(() => this.mapView?.stationary, () => {
-      this.setLayers();
+    this._filterByMapExtentHandle = reactiveUtils.when(() => this.mapView?.stationary, () => {
+      void this.setLayers();
     }, {
-      initial: !0
+      initial: true
     });
   }
   async setLayers() {
-    this.mapView && (this._isLoading = !0, await this.initLayerHash(), this._isLoading = !1);
+    if (this.mapView) {
+      this._isLoading = true;
+      await this.initLayerHash();
+      this._isLoading = false;
+    }
   }
   async initLayerHash() {
-    const t = [];
+    const def = [];
     if (this.mapView) {
-      this._layerItemsHash = await d(this.mapView, !0);
-      const i = await m(this.mapView);
-      for (const e of i)
-        if (e?.type === "feature" && this.showFeatureCount) {
-          const s = e.createQuery();
-          if (e?.definitionExpression && (s.where = s.where + " AND " + e.definitionExpression), this.applyLayerViewFilter) {
-            const r = await p(this.mapView, e.id);
-            r?.filter?.where && (s.where = s.where ? s.where + " AND " + r.filter.where : r.filter.where);
-          }
-          s.geometry = this.filterByMapExtent ? this.mapView.extent : null;
-          const l = e.queryFeatureCount(s);
-          t.push(l), l.then(async (r) => {
-            const c = Number.isNaN(r) ? "" : await _(r, {
-              places: 0,
-              style: "decimal"
+      this._layerItemsHash = await getMapLayerHash(this.mapView, true);
+      const allMapLayers = await getAllFeatureLayers(this.mapView);
+      for (const eachLayer of allMapLayers) {
+        if (eachLayer?.type === "feature") {
+          if (this.showFeatureCount) {
+            const q = eachLayer.createQuery();
+            if (eachLayer?.definitionExpression) {
+              q.where = q.where + " AND " + eachLayer.definitionExpression;
+            }
+            if (this.applyLayerViewFilter) {
+              const featureLayerView = await getFeatureLayerView(this.mapView, eachLayer.id);
+              if (featureLayerView?.filter?.where) {
+                q.where = q.where ? q.where + " AND " + featureLayerView.filter.where : featureLayerView.filter.where;
+              }
+            }
+            q.geometry = this.filterByMapExtent ? this.mapView.extent : null;
+            const result = eachLayer.queryFeatureCount(q);
+            def.push(result);
+            void result.then(async (resCount) => {
+              const formattedCount = !Number.isNaN(resCount) ? await formatNumber(resCount, {
+                places: 0,
+                style: "decimal"
+              }) : "";
+              if (this._layerItemsHash?.[eachLayer.id]) {
+                this._layerItemsHash[eachLayer.id].formattedFeatureCount = formattedCount;
+              }
             });
-            this._layerItemsHash?.[e.id] && (this._layerItemsHash[e.id].formattedFeatureCount = c);
-          });
+          }
         }
-      await Promise.all(t).then(() => {
-        const e = this._layerItemsHash && this.getLayersToBeShownInList(this._layerItemsHash);
-        this._mapLayerIds = e?.reverse() || [], this.handleNoLayersToDisplay();
+      }
+      await Promise.all(def).then(() => {
+        const editableLayerIds = this._layerItemsHash && this.getLayersToBeShownInList(this._layerItemsHash);
+        this._mapLayerIds = editableLayerIds?.reverse() || [];
+        this.handleNoLayersToDisplay();
       }, () => {
-        this._mapLayerIds = [], this.handleNoLayersToDisplay();
+        this._mapLayerIds = [];
+        this.handleNoLayersToDisplay();
       });
     }
   }
   handleNoLayersToDisplay() {
-    this._noLayersToDisplay = !(this._mapLayerIds.length > 0), this.layersListLoaded.emit(this._mapLayerIds);
-  }
-  getLayersToBeShownInList(t) {
-    const i = this.layers?.length > 0 ? this.layers : [];
-    return Object.keys(t).reduce((e, s) => (i.indexOf(s) > -1 && e.push(s), e), []);
+    this._noLayersToDisplay = !(this._mapLayerIds.length > 0);
+    this.layersListLoaded.emit(this._mapLayerIds);
+  }
+  getLayersToBeShownInList(hash) {
+    const configuredLayers = this.layers?.length > 0 ? this.layers : [];
+    return Object.keys(hash).reduce((prev, cur) => {
+      if (configuredLayers.indexOf(cur) > -1) {
+        prev.push(cur);
+      }
+      return prev;
+    }, []);
   }
   renderLayerList() {
-    return this._mapLayerIds.length > 0 ? this._mapLayerIds.reduce((t, i) => {
-      if (this._layerItemsHash && this._layerItemsHash[i]) {
-        const e = this.getLayerListItem(i);
-        e && t.push(e);
+    return this._mapLayerIds.length > 0 ? this._mapLayerIds.reduce((prev, layerId) => {
+      if (this._layerItemsHash && this._layerItemsHash[layerId]) {
+        const li = this.getLayerListItem(layerId);
+        if (li) {
+          prev.push(li);
+        }
       }
-      return t;
+      return prev;
     }, []) : void 0;
   }
-  getLayerListItem(t) {
-    const i = this._layerItemsHash && this._layerItemsHash[t].name, e = this._layerItemsHash && this._layerItemsHash[t].formattedFeatureCount;
-    return a`<calcite-list-item @calciteListItemSelect=${() => {
-      this.onLayerItemSelected(t);
-    }}><div class="layer-name" slot=content-start>${i}</div>${this.showFeatureCount && e !== void 0 && e !== "" && a`<div class="feature-count" slot=content-end>${`(${e})`}</div>` || ""}${this.showNextIcon && a`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
+  getLayerListItem(layerId) {
+    const layerName = this._layerItemsHash && this._layerItemsHash[layerId].name;
+    const featureCount = this._layerItemsHash && this._layerItemsHash[layerId].formattedFeatureCount;
+    return html`<calcite-list-item @calciteListItemSelect=${() => {
+      this.onLayerItemSelected(layerId);
+    }}><div class="layer-name" slot=content-start>${layerName}</div>${this.showFeatureCount && featureCount !== void 0 && featureCount !== "" && html`<div class="feature-count" slot=content-end>${`(${featureCount})`}</div>` || ""}${this.showNextIcon && html`<calcite-icon flip-rtl icon=chevron-right scale=s slot=content-end></calcite-icon>` || ""}</calcite-list-item>`;
   }
   getExtentNotice() {
-    return a`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;
+    return html`<calcite-notice class="notice-msg" icon=extent-filter kind=brand open scale=s><div slot=message>${this._translations.extentFilterMsg}</div></calcite-notice>`;
   }
-  onLayerItemSelected(t) {
-    this._layerItemsHash && this.layerSelect.emit({ layerId: t, layerName: this._layerItemsHash[t]?.name });
+  onLayerItemSelected(layerId) {
+    if (this._layerItemsHash) {
+      this.layerSelect.emit({ layerId, layerName: this._layerItemsHash[layerId]?.name });
+    }
   }
 }
-y("layer-list", I);
+customElement("layer-list", LayerList);
 export {
-  I as LayerList
+  LayerList
 };

package/dist/components/layer-list-widget/customElement.d.ts

@@ -4,9 +4,9 @@ import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { VisibilityIconType } from "../../utils/interfaces.js";
 
 export abstract class LayerListWidget extends LitElement {
-  /** arcgis/core/widgets/LayerList: https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html */
+  /** arcgis/core/widgets/LayerList: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-widgets-LayerList.html */
   accessor layerListWidget: __esri.LayerList | undefined;
-  /** esri/views/MapView: https://developers.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
+  /** esri/views/MapView: https://next.gha.afd.arcgis.com/javascript/latest/api-reference/esri-views-MapView.html */
   accessor mapView: __esri.MapView | undefined;
   /**
    * VisibilityIconType: visibility icon for the layer list widget

package/dist/components/layer-list-widget/customElement.js

@@ -1,21 +1,46 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.0/LICENSE.txt */
-import { c as t } from "../../chunks/runtime.js";
-import { css as e, html as s } from "lit";
-import { LitElement as a, createEvent as c } from "@arcgis/lumina";
-import l from "@arcgis/core/widgets/LayerList";
-const r = e`:host{display:block}`;
-class n extends a {
+import { c as customElement } from "../../chunks/runtime.js";
+import { css, html } from "lit";
+import { LitElement, createEvent } from "@arcgis/lumina";
+import LayerList from "@arcgis/core/widgets/LayerList";
+const styles = css`/** @license
+ * Copyright 2025 Esri
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+:host {
+  display: block;
+}`;
+class LayerListWidget extends LitElement {
   constructor() {
-    super(...arguments), this.visibilityIcon = "eyeball", this.fullscreenStateChange = c();
+    super(...arguments);
+    this.visibilityIcon = "eyeball";
+    this.fullscreenStateChange = createEvent();
   }
   static {
-    this.properties = { mapView: 0, layerListWidget: 0, visibilityIcon: 1 };
+    this.properties = { mapView: [0, {}, { attribute: false }], layerListWidget: [0, {}, { attribute: false }], visibilityIcon: 1 };
   }
   static {
-    this.styles = r;
+    this.styles = styles;
   }
-  willUpdate(i) {
-    i.has("mapView") && this.mapViewWatchHandler(), i.has("visibilityIcon") && this.visibilityIconWatchHandler();
+  willUpdate(changes) {
+    if (changes.has("mapView")) {
+      void this.mapViewWatchHandler();
+    }
+    if (changes.has("visibilityIcon")) {
+      void this.visibilityIconWatchHandler();
+    }
   }
   async mapViewWatchHandler() {
     await this.mapView?.when(async () => {
@@ -23,25 +48,31 @@ class n extends a {
     });
   }
   async visibilityIconWatchHandler() {
-    this.layerListWidget && (this.layerListWidget.visibilityAppearance = this.visibilityIcon === "checkbox" ? "checkbox" : "default");
+    if (this.layerListWidget) {
+      this.layerListWidget.visibilityAppearance = this.visibilityIcon === "checkbox" ? "checkbox" : "default";
+    }
   }
   render() {
-    return s`<div class="layer-list-widget"></div>`;
+    return html`<div class="layer-list-widget"></div>`;
   }
   async updated() {
-    this.hasUpdated || await this._initLayerListWidget();
+    if (!this.hasUpdated) {
+      await this._initLayerListWidget();
+    }
   }
   async loaded() {
     await this._initLayerListWidget();
   }
   async _initLayerListWidget() {
-    this.mapView && (this.layerListWidget = new l({
-      view: this.mapView,
-      visibilityAppearance: this.visibilityIcon === "checkbox" ? "checkbox" : "default"
-    }));
+    if (this.mapView) {
+      this.layerListWidget = new LayerList({
+        view: this.mapView,
+        visibilityAppearance: this.visibilityIcon === "checkbox" ? "checkbox" : "default"
+      });
+    }
   }
 }
-t("layer-list-widget", n);
+customElement("layer-list-widget", LayerListWidget);
 export {
-  n as LayerListWidget
+  LayerListWidget
 };

package/dist/components/layer-table/customElement.d.ts

@@ -142,7 +142,7 @@ export abstract class LayerTable extends LitElement {
   accessor mapHidden: boolean;
   /** IMapInfo: key configuration details about the current map */
   accessor mapInfo: IMapInfo | undefined;
-  /** 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 */
   accessor mapView: __esri.MapView | undefined;
   /** number[]: A list of ids that are currently selected */
   accessor selectedIds: (number | string)[];