@arcgis/map-components 5.2.0-next.11 → 5.2.0-next.12

package/dist/components/arcgis-layer-list-next/types.d.ts

@@ -0,0 +1,18 @@
+import type CatalogLayer from "@arcgis/core/layers/CatalogLayer.js";
+import type KnowledgeGraphLayer from "@arcgis/core/layers/KnowledgeGraphLayer.js";
+import type MapImageLayer from "@arcgis/core/layers/MapImageLayer.js";
+import type TileLayer from "@arcgis/core/layers/TileLayer.js";
+import type { CatalogLayerListProperties } from "@arcgis/core/widgets/CatalogLayerList.js";
+import type { TableListProperties } from "@arcgis/core/widgets/TableList.js";
+
+/** Catalog layer list configuration passed through Layer List (next). */
+export type CatalogLayerListParams = CatalogLayerListProperties;
+
+/** Table list configuration passed through Layer List (next). */
+export type TableListParams = TableListProperties;
+
+/** Layer types that can open a nested flow list from Layer List (next). */
+export type FlowLayer = CatalogLayer | SubtablesLayer;
+
+/** Layer types that expose tables via the Table List flow. */
+export type SubtablesLayer = KnowledgeGraphLayer | MapImageLayer | TileLayer;

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

@@ -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>;
   /**
@@ -198,13 +202,12 @@ 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;
   /**
@@ -295,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
@@ -329,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,
@@ -341,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
@@ -364,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;
   /**
@@ -401,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;
   /**
@@ -418,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/)
@@ -441,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"
@@ -460,6 +465,9 @@ export abstract class ArcgisMap extends LitElement {
    *    layers: [ worldElevation, customElevation ]
    *   })
    * });
+   *
+   * viewElement.map = map;
+   * ```
    */
   get ground(): Ground;
   set ground(value: Ground | string);
@@ -504,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 = {
@@ -548,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>;
   /**
@@ -602,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;
   /**
@@ -731,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;
   /**
@@ -842,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;
   /**
@@ -858,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;
   /**
@@ -885,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;
   /**
@@ -1000,10 +1020,9 @@ export abstract class ArcgisMap extends LitElement {
    * **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), [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. |
-   * | [ParquetLayer](https://developers.arcgis.com/javascript/latest/references/core/layers/ParquetLayer) | Returns only the topmost [GraphicHit](https://developers.arcgis.com/javascript/latest/references/core/views/types/#GraphicHit) feature when the hit occurs on overlapping features. (as of version 4.34). |
+   * | [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. The `screenRect` hitTarget is not supported for these layers. |
+   * | [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. 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. |
@@ -1019,18 +1038,20 @@ export abstract class ArcgisMap extends LitElement {
    *
    * @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