@arcgis/map-components 5.2.0-next.2 → 5.2.0-next.20

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

@@ -48,7 +48,7 @@ import type { SlotGroupRefs } from "../../support/slots.js";
  *
  * ##### 1. Using a WebMap
  * Load a [WebMap](https://developers.arcgis.com/javascript/latest/references/core/WebMap/) from [ArcGIS Online](https://www.arcgis.com/home/index.html)
- * or an [ArcGIS Enterprise portal](https://enterprise.arcgis.com/en/portal/latest/administer/windows/what-is-portal-for-arcgis-.htm) by specifying the [itemId](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#itemId) attribute.
+ * or an [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html) by specifying the [itemId](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#itemId) attribute.
  *
  * ```html
  * <arcgis-map item-id="05e015c5f0314db9a487a9b46cb37eca"></arcgis-map>
@@ -141,11 +141,15 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @since 4.34
    * @example
+   * ```js
    * // Adds an analysis to the View
    * view.analyses.add(elevationProfileAnalysis);
+   * ```
    * @example
+   * ```js
    * // Removes an analysis from the View
    * view.analyses.remove(elevationProfileAnalysis);
+   * ```
    */
   accessor analyses: Collection<Analysis>;
   /**
@@ -165,7 +169,7 @@ export abstract class ArcgisMap extends LitElement {
    */
   accessor animationsDisabled: boolean;
   /**
-   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/en-US/docs/Web/API/Element/ariaLabelledByElements).
+   * The ARIA attributes for the view container. Provides accessibility information to assistive technologies such as screen readers. Supports the following properties: [`label`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label), [`description`](https://developer.mozilla.org/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-description), [`describedByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaDescribedByElements), and [`labelledByElements`](https://developer.mozilla.org/docs/Web/API/Element/ariaLabelledByElements).
    *
    * @since 4.34
    */
@@ -198,24 +202,46 @@ export abstract class ArcgisMap extends LitElement {
    * The background color of the Map component.
    *
    * @example
-   * let view = new MapView({
-   *   container: "viewDiv",
-   *   map: map,
-   *   background: { // autocasts new ColorBackground()
-   *     color: "magenta" // autocasts as new Color()
-   *   }
+   * ```js
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.background = new ColorBackground ({
+   *   color: "magenta" // autocasts as new Color()
    * });
+   * ```
    */
   accessor background: ColorBackground | null | undefined;
   /**
    * Specifies a basemap for the map. The basemap is a set of layers that give
    * geographic context to the view and the other operational layers
    * in the map.
-   * It can either be set using a basemap ID string ([see values](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)),
-   * [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
-   * or [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/).
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
+   * The basemap can be set from a basemap ID string from the [basemap styles service](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/), such as `arcgis/navigation`, or from the [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/) class.
+   *
+   * > [!NOTE]
+   * > Accessing the basemap styles service requires authentication, see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/) for more information.
+   *
+   * @example
+   * ```html
+   * <!-- Basemap set using a basemap ID string from the basemap styles service -->
+   * <arcgis-map basemap="arcgis/navigation" center="-98, 39" zoom="4"></arcgis-map>
+   * ```
+   * @example
+   * ```js
+   * // Basemap set using a Basemap instance
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.basemap = new Basemap({
+   *   title: "Terrain",
+   *   baseLayers: [
+   *     new VectorTileLayer({
+   *        url: "https://arcgis.com/sharing/rest/content/items/b5676525747f499687f12746441101ef/resources/styles/root.json",
+   *     })
+   *   ]
+   * });
+   * ```
+   * @see [Map.basemap](https://developers.arcgis.com/javascript/latest/references/core/Map/#basemap)
+   * @see [Basemap](https://developers.arcgis.com/javascript/latest/references/core/Basemap/)
+   * @see [BasemapStyle](https://developers.arcgis.com/javascript/latest/references/core/support/BasemapStyle/)
+   * @see [Authentication and access tokens](https://developers.arcgis.com/javascript/latest/authentication/access-tokens/)
    */
   accessor basemap: Basemap | string | undefined;
   /** Represents the view for a single basemap after it has been added to the map. */
@@ -272,11 +298,11 @@ export abstract class ArcgisMap extends LitElement {
    *   x: 12804.24,
    *   y: -1894032.09,
    *   spatialReference: {
-   *     wkid: view.spatialReference  // wkid 2027
+   *     wkid: viewElement.spatialReference  // wkid 2027
    *   }
    * });
    * const viewElement = document.querySelector("arcgis-map");
-   * view.center = centerPoint;
+   * viewElement.center = centerPoint;
    * ```
    * @example
    * ```js
@@ -306,7 +332,9 @@ export abstract class ArcgisMap extends LitElement {
    * @see [TileInfo#create()](https://developers.arcgis.com/javascript/latest/references/core/layers/support/TileInfo/#create)
    * @see [Zoom and LODs](https://developers.arcgis.com/javascript/latest/references/core/views/View2D/#mapview-lods)
    * @example
-   * view.constraints = new MapViewConstraints({
+   * ```js
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.constraints = new MapViewConstraints({
    *   geometry: { // Constrain lateral movement to Lower Manhattan
    *     type: "extent",
    *     xmin: -74.020,
@@ -318,7 +346,9 @@ export abstract class ArcgisMap extends LitElement {
    *   maxScale: 0, // User can overzoom tiles
    *   rotationEnabled: false // Disables map rotation
    * });
+   * ```
    * @example
+   * ```js
    * // This snippet shows how to set the Map scale 1:1 while generating additional LODs for the constraints.
    * const spatialReference = new SpatialReference({
    *   wkid: 2154
@@ -341,11 +371,12 @@ export abstract class ArcgisMap extends LitElement {
    *   lods
    * });
    *
-   * const arcgisMap = document.querySelector("arcgis-map");
-   * arcgisMap.spatialReference = spatialReference;
-   * arcgisMap.center = center;
-   * arcgisMap.scale = 1;
-   * arcgisMap.constraints = constraints;
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.spatialReference = spatialReference;
+   * viewElement.center = center;
+   * viewElement.scale = 1;
+   * viewElement.constraints = constraints;
+   * ```
    */
   accessor constraints: MapViewConstraints;
   /**
@@ -378,13 +409,15 @@ export abstract class ArcgisMap extends LitElement {
    * @since 4.12
    * @see [tryFatalErrorRecovery()](https://developers.arcgis.com/javascript/latest/references/core/views/View/#tryFatalErrorRecovery)
    * @example
+   * ```js
    * reactiveUtils.when(
-   *   () => view.fatalError,
+   *   () => viewElement.fatalError,
    *   () => {
    *     console.error("Fatal Error! View has lost its WebGL context. Attempting to recover...");
-   *     view.tryFatalErrorRecovery();
+   *     viewElement.tryFatalErrorRecovery();
    *   }
    * );
+   * ```
    */
   accessor fatalError: Error<any> | null | undefined;
   /**
@@ -395,17 +428,17 @@ export abstract class ArcgisMap extends LitElement {
   /** Gamepad input specific configuration settings. */
   get gamepad(): GamepadSettings;
   /**
-   * Allows for adding graphics directly to the default graphics in the View.
+   * Allows for adding graphics directly to the default graphics in the map component.
    *
    * @example
    * ```js
-   * // Adds a graphic to the View
-   * graphics.add(pointGraphic);
+   * // Adds a graphic to the map component.
+   * viewElement.graphics.add(pointGraphic);
    * ```
    * @example
    * ```js
-   * // Removes a graphic from the View
-   * graphics.remove(pointGraphic);
+   * // Removes a graphic from the map component.
+   * viewElement.graphics.remove(pointGraphic);
    * ```
    * @see [Graphic](https://developers.arcgis.com/javascript/latest/references/core/Graphic/)
    * @see [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/)
@@ -418,12 +451,7 @@ export abstract class ArcgisMap extends LitElement {
    * @see [ElevationLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ElevationLayer/)
    * @see [Ground](https://developers.arcgis.com/javascript/latest/references/core/Ground/)
    * @example
-   * // Use the world elevation service
-   * const map = new Map({
-   *   basemap: "topo-vector",
-   *   ground: "world-elevation"
-   * });
-   * @example
+   * ```js
    * // Create a map with the world elevation layer overlaid by a custom elevation layer
    * const worldElevation = new ElevationLayer({
    *   url: "//elevation3d.arcgis.com/arcgis/rest/services/WorldElevation3D/Terrain3D/ImageServer"
@@ -437,6 +465,9 @@ export abstract class ArcgisMap extends LitElement {
    *    layers: [ worldElevation, customElevation ]
    *   })
    * });
+   *
+   * viewElement.map = map;
+   * ```
    */
   get ground(): Ground;
   set ground(value: Ground | string);
@@ -481,40 +512,47 @@ export abstract class ArcgisMap extends LitElement {
    * @see [Sample: Highlight point features](https://developers.arcgis.com/javascript/latest/sample-code/highlight-point-features/)
    * @since 4.32
    * @example
+   * ```js
    * // Use the default highlights collection to apply a highlight to features when you hover over them
-   *
    * // A handler can be used to remove any previous highlight when applying a new one
    * let hoverHighlight;
    *
-   * view.on("pointer-move", (event) => {
-   *   // Search for the first feature in the featureLayer at the hovered location
-   *   view.hitTest(event, { include: featureLayer }).then((response) => {
-   *     if (response.results[0]) {
-   *        const graphic = response.results[0].graphic;
-   *        view.whenLayerView(graphic.layer).then((layerView) => {
-   *          // Remove any previous highlight, if it exists
-   *          hoverHighlight?.remove();
-   *          // Highlight the hit features with the temporary highlight options, which are pre-configured for this use case
-   *          hoverHighlight = layerView.highlight(graphic, { name: "temporary"});
-   *        });
+   * viewElement.addEventListener("arcgisViewPointerMove", async (event) => {
+   *   try {
+   *     await updateHoverHighlight(event);
+   *   } catch (error) {
+   *     if (error.name !== "AbortError") {
+   *       console.error(error);
    *     }
-   *   });
+   *   }
    * });
-   * @example
-   * // Override the default highlights collection
    *
-   * const view = new MapView({
-   *   map: map,
-   *   container: "viewDiv",
+   * const updateHoverHighlight = promiseUtils.debounce(async (event) => {
+   *   // Search for the first feature in the featureLayer at the hovered location
+   *   const response = await viewElement.hitTest(event.detail, { include: featureLayer });
+   *   const result = response.results[0];
    *
-   *   // Set the highlight options to be used in the view
-   *   highlights: [
-   *     { name: "default", color: "orange" },
-   *     { name: "temporary", color: "magenta" },
-   *     { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
-   *   ]
+   *   // Remove any previous highlight, if it exists
+   *   hoverHighlight?.remove();
+   *
+   *   if (result?.type === "graphic") {
+   *     // Highlight the hit feature with the temporary highlight options
+   *     hoverHighlight = layerView.highlight(result.graphic, { name: "temporary" });
+   *   }
    * });
+   * ```
+   * @example
+   * ```js
+   * // Override the default highlights collection
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.highlights = new Collection([
+   *   { name: "default", color: "orange" },
+   *   { name: "temporary", color: "magenta" },
+   *   { name: "table", color: "cyan", fillOpacity: 0.5, haloOpacity: 0}
+   * ]);
+   * ```
    * @example
+   * ```js
    * // Add highlight options to the collection after initialization
    *
    * const selectionHighlightOptions = {
@@ -525,7 +563,8 @@ export abstract class ArcgisMap extends LitElement {
    * };
    *
    * // Add the options to the highlights collection at the first position
-   * view.highlights.add(selectionGroup, 0);
+   * viewElement.highlights.add(selectionGroup, 0);
+   * ```
    */
   accessor highlights: Collection<HighlightOptions>;
   /**
@@ -579,26 +618,21 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @since 4.9
    * @example
+   * ```js
    * // Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
-   * const view = new MapView({
-   *   container: "viewDiv",
-   *   map: new Map({
-   *     basemap: "satellite"
-   *   }),
-   *   center: [176.185, -37.643],
-   *   zoom: 13,
-   *   navigation: {
-   *     gamepad: {
-   *       enabled: false
-   *     },
-   *     actionMap: {
-   *       dragSecondary: "none", // Disable rotating the view with the right mouse button
-   *       mouseWheel: "none" // Disable zooming with the mouse wheel
-   *     },
-   *     browserTouchPanEnabled: false,
-   *     momentumEnabled: false,
-   *   }
-   * });
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.navigation = {
+   *   gamepad: {
+   *     enabled: false
+   *   },
+   *   actionMap: {
+   *     dragSecondary: "none", // Disable rotating the view with the right mouse button
+   *     mouseWheel: "none" // Disable zooming with the mouse wheel
+   *   },
+   *   browserTouchPanEnabled: false,
+   *   momentumEnabled: false,
+   * };
+   * ```
    */
   accessor navigation: Navigation;
   /**
@@ -708,22 +742,32 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @default 0
    * @example
-   * // Due north is rotated 90 degrees, pointing to the right side of the view
-   * view.rotation = 90;
+   * ```html
+   * <!-- Due north is rotated 90 degrees, pointing to the right side of the view -->
+   * <arcgis-map basemap="satellite" rotation="90"></arcgis-map>
+   * ```
    * @example
+   * ```js
    * // Due north is rotated 180 degrees, pointing to the bottom of the view
-   * view.rotation = 180;
+   * viewElement.rotation = 180;
+   * ```
    * @example
+   * ```js
    * // Due north is rotated 270 degrees, pointing to the left side of the view
-   * view.rotation = 270;
+   * viewElement.rotation = 270;
+   * ```
    * @example
+   * ```js
    * // Due north is rotated 0 degrees, pointing to the top of the view (the default)
-   * view.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.
+   * viewElement.rotation = 0; // 360 or multiple of 360 (e.g. 720) works here as well.
+   * ```
    * @example
+   * ```js
    * // Disables map rotation
-   * view.constraints = {
+   * viewElement.constraints = {
    *   rotationEnabled: false
    * };
+   * ```
    */
   accessor rotation: number;
   /**
@@ -819,12 +863,14 @@ export abstract class ArcgisMap extends LitElement {
    * @see [Theme](https://developers.arcgis.com/javascript/latest/references/core/views/Theme/)
    * @see [Sample - Color theming for interactive tools](https://developers.arcgis.com/javascript/latest/sample-code/view-theme/)
    * @example
+   * ```js
    * // Update the theme to use purple graphics
    * // and slightly transparent green text
    * view.theme = new Theme({
    *   accentColor: "purple",
    *   textColor: [125, 255, 13, 0.9]
    * });
+   * ```
    */
   accessor theme: Theme | null | undefined;
   /**
@@ -835,23 +881,21 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @since 4.12
    * @example
+   * ```js
    * // Create a csv layer from an online spreadsheet.
-   * let csvLayer = new CSVLayer({
+   * const csvLayer = new CSVLayer({
    *   url: "http://test.com/daily-magazines-sold-in-new-york.csv",
    *   timeInfo: {
    *     startField: "SaleDate" // The csv field contains date information.
    *   }
    * });
+   * viewElement.map.add(csvLayer);
    *
-   * // Create a mapview showing sales for the last week of March 2019 only.
-   * const view = new MapView({
-   *   map: map,
-   *   container: "viewDiv",
-   *   timeExtent: {
-   *     start: new Date("2019, 2, 24"),
-   *     end:   new Date("2019, 2, 31")
-   *   }
-   * });
+   * viewElement.timeExtent = {
+   *   start: new Date("2019, 2, 24"),
+   *   end: new Date("2019, 2, 31")
+   * };
+   * ```
    */
   accessor timeExtent: TimeExtent | null | undefined;
   /**
@@ -862,12 +906,11 @@ export abstract class ArcgisMap extends LitElement {
    * @default "system"
    * @see [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
    * @example
+   * ```js
    * // Date and time will be displayed in Pacific/Auckland (NZ) time zone
-   * const view = new MapView({
-   *   map: map,
-   *   container: "viewDiv",
-   *   timeZone: "Pacific/Auckland"
-   * });
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.timeZone = "Pacific/Auckland";
+   * ```
    */
   accessor timeZone: string;
   /**
@@ -883,6 +926,26 @@ export abstract class ArcgisMap extends LitElement {
    * Represents the current view as a Viewpoint or point of observation on the view.
    * Setting the viewpoint immediately changes the current view. For animating
    * the view, see this component's [goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) method.
+   *
+   * @example
+   * ```js
+   * // Set the viewpoint to the Empire State Building in New York City
+   * const viewElement = document.querySelector("arcgis-map");
+   * viewElement.viewpoint = new Viewpoint({
+   *   targetGeometry: new Point({
+   *     longitude: -73.9857,
+   *     latitude: 40.7484
+   *   }),
+   *   scale: 5000
+   * });
+   * ```
+   * @example
+   * ```js
+   * // Get the initial viewpoint of the view once the view is ready
+   * const viewElement = document.querySelector("arcgis-map");
+   * await viewElement.viewOnReady();
+   * const initialViewpoint = viewElement.viewpoint.clone();
+   * ```
    */
   accessor viewpoint: Viewpoint;
   /**
@@ -913,12 +976,38 @@ export abstract class ArcgisMap extends LitElement {
   destroy(): Promise<void>;
   /**
    * Use this method to query for features at a given screen location. These features come from origins (layers and sublayers) configured with a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) and have its [FeatureLayer.popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#popupEnabled) set. One example could be a custom side panel that displays feature-specific information based on an end user's click location. This method allows a developer to control how the input location is handled, and then subsequently, what to do with the results.
+   * > [!WARNING]
+   * > Using [ScreenRect](https://developers.arcgis.com/javascript/latest/references/core/core/types/#ScreenRect) as the hit target is considered **[beta](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-beta-tag-mean)** functionality.
    *
-   * @param screenPoint
+   * @param hitTarget
    * @param options
    * @since 5.1
+   * @example
+   * ```js
+   * const viewElement = document.querySelector("arcgis-map");
+   * // Get viewElement's click event
+   * viewElement.addEventListener("arcgisViewClick", async (event) => {
+   *   const generator = await viewElement.fetchPopupFeatures(event.detail.screenPoint, {
+   *     pointerType: event.detail.pointerType
+   *   });
+   *   // Access the features returned from the generator
+   *   for await (const feature of generator) {
+   *     console.log(feature);
+   *   }
+   * });
+   * ```
+   * @example
+   * ```js
+   * // Wait for all the features to be available
+   * view.on("click", async (event) => {
+   *   const generator = view.fetchPopupFeatures(event.screenPoint, {
+   *     pointerType: event.pointerType
+   *   });
+   *
+   *   const features = await Array.fromAsync(generator);
+   * });
    */
-  fetchPopupFeatures(screenPoint: ScreenPoint, options?: FetchPopupFeaturesOptions): Promise<AsyncGenerator<Graphic>>;
+  fetchPopupFeatures(hitTarget: ScreenPoint | ScreenRect, options?: FetchPopupFeaturesOptions): Promise<AsyncGenerator<Graphic>>;
   /**
    * Sets the view to a given target.
    *
@@ -927,57 +1016,44 @@ export abstract class ArcgisMap extends LitElement {
    */
   goTo(target: GoToTarget2D, options?: GoToOptions2D): Promise<unknown>;
   /**
-   * Returns [hit test results](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#HitTestResult)
-   * from each layer that intersects the specified screen coordinates. The results are
-   * organized as an array of objects containing different [result types](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#HitTestResult).
-   *
-   * The following layer types will return all [features](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#GraphicHit) if a hit is
-   * made on intersecting features: [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/),
-   * [CatalogLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CatalogLayer/),
-   * [CSVLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CSVLayer/),
-   * [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoJSONLayer/),
-   * [GeoRSSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoRSSLayer/),
-   * [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer/),
-   * [KMLLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/KMLLayer/),
-   * [MapNotesLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MapNotesLayer/),
-   * [OGCFeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/OGCFeatureLayer/),
-   * [StreamLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/StreamLayer/),
-   * [SubtypeSublayer](https://developers.arcgis.com/javascript/latest/references/core/layers/support/SubtypeSublayer/),
-   * [VectorTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/), and
-   * [WFSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/WFSLayer/).
-   *
-   * The [ParquetLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ParquetLayer/) hit result returns only the topmost feature
-   * when the hit occurs on overlapping features in a ParquetLayer.
-   *
-   * The [VectorTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer/) hit test result contains an array of objects containing
-   * a [graphic](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#GraphicHit).
-   * The graphic returns attributes of a style layer. In addition, the graphic's [origin](https://developers.arcgis.com/javascript/latest/references/core/Graphic/#origin)
-   * contains the style layer's [id](https://maplibre.org/maplibre-style-spec/layers/#id) and layer index within the [vector tile style](https://doc.arcgis.com/en/arcgis-online/reference/tile-layers.htm#ESRI_SECTION1_8F68399EB47B48FF9EF46719FCC96978).
-   * Spatial information about the actual feature represented in the style layer is returned only if the style layer is a [symbol layer](https://maplibre.org/maplibre-style-spec/layers/#symbol).
-   * Otherwise, the graphic's geometry is `null`.
-   *
-   * The [MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer/) hit test result contains all media elements if the hit is made on intersecting elements.
-   * The [RouteLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/RouteLayer/) hit test result contains all route elements if the hit is made on intersecting elements.
-   *
-   * If the [polygon](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polygon/) feature's symbol
-   * [style](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol/#style) is set to `none`, the hitTest method will not
+   * Returns [hit test results](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHitTestResult) from each layer that intersects the specified screen point or screen rectangle.
+   * The results are organized as an array of objects containing different [ViewHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHit) result types such as  graphics, raster pixels, media elements, or routes.
+   *
+   * **2D hitTest() behavior by layer type**
+   * | Layer type | Hit test behavior |
+   * | :--- | :--- |
+   * | [FeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer), [CatalogFootprintLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/catalog/CatalogFootprintLayer), [CSVLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/CSVLayer), [GeoJSONLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoJSONLayer), [OGCFeatureLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/OGCFeatureLayer), [OrientedImageryLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/OrientedImageryLayer), [ParquetLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ParquetLayer), [StreamLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/StreamLayer), [SubtypeGroupLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/SubtypeGroupLayer), [WFSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/WFSLayer) | Returns all intersecting [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) features at the hit location. |
+   * | [GeoRSSLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GeoRSSLayer), [GraphicsLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/GraphicsLayer), [KMLLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/KMLLayer), [MapNotesLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MapNotesLayer) | Returns all intersecting [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) features at the hit location. |
+   * | [ImageryLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ImageryLayer),  [ImageryTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ImageryTileLayer)| Returns [RasterHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#RasterHit) result containing raster pixel value used in rendering and bandId info on intersecting pixels. Support was added in version 5.1. The `screenRect` hitTarget returns hit result at the center of the rectangle. |
+   * | [VectorTileLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/VectorTileLayer) | Returns a result for all intersecting [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) features containing attributes of style layers (as of version 4.29; in prior releases, only the topmost style layer result was returned). In addition, the graphic's [origin](https://developers.arcgis.com/javascript/latest/references/core/Graphic#origin) contains the style layer's [id](https://maplibre.org/maplibre-style-spec/layers/#id) and layer index within the [vector tile style](https://doc.arcgis.com/en/arcgis-online/reference/tile-layers.htm#ESRI_SECTION1_8F68399EB47B48FF9EF46719FCC96978). Spatial information about the actual feature represented in the style layer is returned only if the style layer is a [symbol layer](https://maplibre.org/maplibre-style-spec/layers/#symbol). Otherwise, the graphic's geometry is `null`. |
+   * | [MediaLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/MediaLayer) | Returns [MediaHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#MediaHit) result containing all media elements if the hit is made on intersecting elements. |
+   * | [RouteLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/RouteLayer) | Returns [RouteHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#RouteHit) result containing all intersecting route elements if the hit is made on intersecting elements. |
+   *
+   * **Note:** If the [Polygon](https://developers.arcgis.com/javascript/latest/references/core/geometry/Polygon) feature's symbol [SimpleFillSymbol.style](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol#style) is set to "none", the hitTest method will not
    * return results when the fill is clicked. However, it will return results when the outline is clicked. To get results when clicking the fill, set the
-   * [color](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol/#color) to a transparent color instead.
+   * [SimpleFillSymbol.color](https://developers.arcgis.com/javascript/latest/references/core/symbols/SimpleFillSymbol#color) to a transparent color instead.
+   *
+   * Release-specific changes:
+   * * At version 5.1, **[beta](https://developers.arcgis.com/javascript/latest/faq/#what-does-the-beta-tag-mean)** support was added for [ScreenRect](https://developers.arcgis.com/javascript/latest/references/core/core/types/#ScreenRect), allowing hit tests across rectangular screen areas.
+   * * At version 4.24, [ViewHitTestResult](https://developers.arcgis.com/javascript/latest/references/core/views/types/#ViewHitTestResult) returns an array of objects containing [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) graphic, [MediaHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#MediaHit) media element, and [RouteHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#RouteHit) route.
+   * * At version 4.23, all hit test features from feature layers are returned in the result. In prior releases, only the top most feature was returned.
    *
    * @param hitTarget
    * @param options
+   * @see [Sample - Access features with hitTest](https://developers.arcgis.com/javascript/latest/sample-code/map-component-hittest/)
+   * @see [Sample - Hit test features by screen rectangle](https://developers.arcgis.com/javascript/latest/sample-code/map-hittest-screen-rectangle/)
+   * @see [Sample - VectorTileLayer hitTest](https://developers.arcgis.com/javascript/latest/sample-code/layers-vectortilelayer-hittest/)
    * @example
    * ```js
-   * viewElement.addEventListener("arcgisViewClick", (event) => {
-   *    viewElement.hitTest(event.detail).then((response) => {
-   *       const result = response.results[0];
-   *       if (result?.type === "graphic") {
-   *          const { longitude, latitude } = result.mapPoint;
-   *          console.log(`Hit graphic at (${longitude}, ${latitude})`, result.graphic);
-   *       } else {
-   *          console.log("Did not hit any graphic");
-   *       }
-   *    });
+   * viewElement.addEventListener("arcgisViewClick", async (event) => {
+   *    const response = await viewElement.hitTest(event.detail);
+   *    const result = response.results[0];
+   *    if (result?.type === "graphic") {
+   *       const { longitude, latitude } = result.mapPoint;
+   *       console.log(`Hit graphic at (${longitude}, ${latitude})`, result.graphic);
+   *    } else {
+   *       console.log("Did not hit any graphic");
+   *    }
    * });
    * ```
    * @example

package/dist/components/arcgis-measurement-content/customElement.js

@@ -6,8 +6,8 @@ import c from "@arcgis/core/applications/Components/QuantityFormatter.js";
 import { LitElement as o, safeClassMap as n } from "@arcgis/lumina";
 import { generateGuid as u } from "@arcgis/toolkit/string";
 import { f as g } from "../../chunks/measurementUtils.js";
-const p = s`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--arcgis-internal-panel-gap);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.results-grid{display:grid;column-gap:var(--calcite-spacing-xxs);row-gap:var(--calcite-spacing-md);grid-template-columns:1fr max-content max-content;&.vertical{display:flex;flex-direction:column;align-items:flex-start;.item{display:block}.title{margin-bottom:var(--calcite-spacing-xxs)}.value{align-self:flex-start}}}.item{display:contents;&.disabled>*{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}}.title{grid-column:1;word-break:break-word;--calcite-label-margin-bottom: 0}.value{grid-column:2;font-weight:var(--calcite-font-weight-semibold);white-space:nowrap;align-self:center;justify-self:flex-end;font-variant-numeric:tabular-nums;&:has(~:empty){grid-column:span 2}~:empty{display:none}}.unit{font-weight:var(--calcite-font-weight-semibold);text-align:left}.actions{justify-content:center;gap:var(--arcgis-internal-panel-actions-gap);&[hidden]{display:none}}`;
-class m extends o {
+const m = s`:host{--arcgis-internal-color-black-30: color-mix(in srgb, #000000 30.2%, transparent);--arcgis-internal-box-shadow: var(--calcite-spacing-none) var(--calcite-spacing-px) var(--calcite-spacing-base) var(--arcgis-internal-color-black-30);--arcgis-internal-top-max-width: calc(min(100cqw, 100vw) - var(--calcite-spacing-xxxl));--arcgis-internal-panel-width: 300px;--arcgis-internal-panel-height: 100%;--arcgis-internal-panel-height-sm: 240px;--arcgis-internal-panel-height-md: 420px;--arcgis-internal-panel-height-lg: 540px;--arcgis-internal-panel-height-xl: 680px;--arcgis-internal-panel-gap: var(--calcite-spacing-lg);--arcgis-internal-panel-actions-gap: var(--calcite-spacing-sm);--arcgis-internal-basemap-gallery-width-lg: 450px;--arcgis-internal-collapse-icon-flip: scaleX(1);--arcgis-internal-row-direction: row;--arcgis-internal-legend-width: 300px;--arcgis-internal-layout-overlay-space-top: var(--arcgis-layout-overlay-space-top, 0px);--arcgis-internal-layout-overlay-space-bottom: var(--arcgis-layout-overlay-space-bottom, 0px);--arcgis-internal-layout-overlay-space-left: var(--arcgis-layout-overlay-space-left, 0px);--arcgis-internal-layout-overlay-space-right: var(--arcgis-layout-overlay-space-right, 0px);--arcgis-internal-view-color-focus: var(--arcgis-view-color-focus, var(--calcite-color-brand));--arcgis-internal-attribution-space-bottom: var(--arcgis-internal-layout-overlay-space-bottom);--arcgis-internal-attribution-space-left: var(--arcgis-internal-layout-overlay-space-left);--arcgis-internal-attribution-space-right: var(--arcgis-internal-layout-overlay-space-right);--arcgis-internal-attribution-font-size: var(--calcite-font-size-sm);--arcgis-internal-attribution-font-size-sm: var(--calcite-font-size-xs);--arcgis-internal-sketch-justify-content: flex-start}:host,.hint,.error,.section,.actions,.item{display:flex;flex-direction:column;gap:var(--arcgis-internal-panel-gap);animation:esri-fade-in .25s ease-in-out}.error{color:var(--calcite-color-status-danger)}.error,.hint{overflow:hidden;p{margin:0;padding:0}}.results-grid{display:grid;column-gap:var(--calcite-spacing-xxs);row-gap:var(--calcite-spacing-md);grid-template-columns:auto minmax(0,1fr) max-content;&.vertical{display:flex;flex-direction:column;align-items:flex-start;.item{display:block}.title{margin-bottom:var(--calcite-spacing-xxs)}.value{align-self:flex-start}}}.item{display:contents;&.disabled>*{color:var(--calcite-color-text-1);opacity:var(--calcite-opacity-light)}}.title{grid-column:1;--calcite-label-margin-bottom: 0}.value{grid-column:2;font-weight:var(--calcite-font-weight-semibold);white-space:normal;min-width:0;max-width:100%;align-self:center;justify-self:flex-end;text-align:end;font-variant-numeric:tabular-nums;overflow-wrap:anywhere;word-break:normal;text-wrap:pretty;&:has(~:empty){grid-column:span 2}~:empty{display:none}}.unit{font-weight:var(--calcite-font-weight-semibold);text-align:left;grid-column:3;align-self:center}.actions{justify-content:center;gap:var(--arcgis-internal-panel-actions-gap);&[hidden]{display:none}}`;
+class p extends o {
   constructor() {
     super(...arguments), this._formatter = new c(), this._baseId = u(), this._hasActionsContent = !1, this.layout = "horizontal", this.items = [], this.state = "disabled", this.unsupportedLabel = "";
   }
@@ -15,7 +15,7 @@ class m extends o {
     this.properties = { _hasActionsContent: 16, hintLabel: 1, layout: 1, items: 0, state: 1, unsupportedLabel: 1 };
   }
   static {
-    this.styles = p;
+    this.styles = m;
   }
   async load() {
     await this._formatter.when();
@@ -61,7 +61,7 @@ function v(t) {
     disabled: t.measurement.state !== "available"
   })}><calcite-label layout=inline class="title" .for=${t.valueId}>${t.title ?? ""}</calcite-label>${h({ value: a })}</div>`;
 }
-r("arcgis-measurement-content", m);
+r("arcgis-measurement-content", p);
 export {
-  m as ArcgisMeasurementContent
+  p as ArcgisMeasurementContent
 };