@arcgis/map-components 5.2.0-next.16 → 5.2.0-next.161

package/dist/components/arcgis-link-chart/customElement.d.ts

@@ -16,6 +16,7 @@ import type Error from "@arcgis/core/core/Error.js";
 import type HighlightOptions from "@arcgis/core/views/support/HighlightOptions.js";
 import type Magnifier from "@arcgis/core/views/Magnifier.js";
 import type Navigation from "@arcgis/core/views/navigation/Navigation.js";
+import type ViewOptions from "@arcgis/core/views/interactive/options/ViewOptions.js";
 import type Popup from "@arcgis/core/widgets/Popup.js";
 import type SelectionManager from "@arcgis/core/views/SelectionManager.js";
 import type SpatialReference from "@arcgis/core/geometry/SpatialReference.js";
@@ -24,7 +25,7 @@ import type TimeExtent from "@arcgis/core/time/TimeExtent.js";
 import type { PublicLitElement as LitElement } from "@arcgis/lumina";
 import type { LoadErrorSource } from "../types.js";
 import type { ArcgisPopup } from "../arcgis-popup/customElement.js";
-import type { DoubleTapDragEvent, VerticalTwoFingerDragEvent, PointerUpEvent, PointerMoveEvent, PointerLeaveEvent, PointerEnterEvent, PointerDownEvent, ViewMouseWheelEvent, LayerViewDestroyEvent, LayerViewCreateErrorEvent, LayerViewCreateEvent, KeyUpEvent, KeyDownEvent, ImmediateDoubleClickEvent, ImmediateClickEvent, HoldEvent, DragEvent, DoubleClickEvent, ClickEvent } from "@arcgis/core/views/input/types.js";
+import type { DoubleTapDragEvent, FocusRegionSelectEvent, VerticalTwoFingerDragEvent, PointerUpEvent, PointerMoveEvent, PointerLeaveEvent, PointerEnterEvent, PointerDownEvent, ViewMouseWheelEvent, LayerViewDestroyEvent, LayerViewCreateErrorEvent, LayerViewCreateEvent, KeyUpEvent, KeyDownEvent, ImmediateDoubleClickEvent, ImmediateClickEvent, HoldEvent, DragEvent, DoubleClickEvent, ClickEvent } from "@arcgis/core/views/input/types.js";
 import type { AnalysisViewDestroyEvent, AnalysisViewCreateErrorEvent, AnalysisViewCreateEvent, ToScreenOptions2D, GoToOptions2D, GoToTarget2D } from "@arcgis/core/views/types.js";
 import type { AnalysisView2DUnion } from "@arcgis/core/views/2d/analysis/types.js";
 import type { ScreenPoint, ScreenRect } from "@arcgis/core/core/types.js";
@@ -34,18 +35,36 @@ import type { ViewPadding } from "@arcgis/core/views/ui/types.js";
 import type { ResizeAlign } from "@arcgis/core/views/2d/types.js";
 import type { SlotGroupRefs } from "../../support/slots.js";
 
+declare module "@arcgis/lumina" {
+export interface DeclareCssProperties {
+  /** _Since 4.34_ Specifies the top padding for the layout. */
+  "--arcgis-layout-overlay-space-top": "*";
+  /** _Since 4.34_ Specifies the bottom padding for the layout. */
+  "--arcgis-layout-overlay-space-bottom": "*";
+  /** _Since 4.34_ Specifies the left padding for the layout. */
+  "--arcgis-layout-overlay-space-left": "*";
+  /** _Since 4.34_ Specifies the right padding for the layout. */
+  "--arcgis-layout-overlay-space-right": "*";
+  /** _Since 5.0_ Specifies the focus outline color for the view. */
+  "--arcgis-view-color-focus": "*";
+  /** _Since 5.1_ Specifies the background color for table rows. */
+  "--arcgis-table-row-background-color": "*";
+  /** _Since 5.1_ Specifies the background color for alternate table rows. */
+  "--arcgis-table-row-alt-background-color": "*";
+  /** _Since 5.2_ Specifies the outer border color of the focus region. */
+  "--arcgis-focus-region-outer-border-color": "*";
+  /** _Since 5.2_ Specifies the inner border color of the focus region. */
+  "--arcgis-focus-region-inner-border-color": "*";
+  /** _Since 5.2_ Specifies the border width of the focus region. */
+  "--arcgis-focus-region-border-width": "*";
+}
+}
+
 /**
  * Loads a [WebLinkChart](https://developers.arcgis.com/javascript/latest/references/core/WebLinkChart/) from an [ArcGIS Enterprise portal](https://doc.esri.com/en/arcgis-enterprise/latest/plan/what-is-portal-for-arcgis-.html) into a [LinkChartView](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/).
  *
  * Note: Sign in to access the data in this demo, U/P: `viewer01`/`I68VGU^nMurF`
  *
- * @cssproperty [--arcgis-layout-overlay-space-top] - _Since 4.34_ Specifies the top padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-bottom] - _Since 4.34_ Specifies the bottom padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-left] - _Since 4.34_ Specifies the left padding for the layout.
- * @cssproperty [--arcgis-layout-overlay-space-right] - _Since 4.34_ Specifies the right padding for the layout.
- * @cssproperty [--arcgis-view-color-focus] - _Since 5.0_ Specifies the focus outline color for the view.
- * @cssproperty [--arcgis-table-row-background-color] - _Since 5.1_ Specifies the background color for table rows.
- * @cssproperty [--arcgis-table-row-alt-background-color] - _Since 5.1_ Specifies the background color for alternate table rows.
  * @slot  - Default slot for adding components to the link chart. User is responsible for positioning the content via CSS.
  * @slot [top-left] - Slot for components positioned in the top-left corner.
  * @slot [top-right] - Slot for components positioned in the top-right corner.
@@ -107,13 +126,15 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   get attributionItems(): LinkChartView["attributionItems"];
   /**
-   * The light or dark mode used to display the attribution.
-   * By default, the mode is inherited from the [Calcite's mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes).
-   * You can override the value to style the attribution alongside the map or scene content.
+   * The display mode used for the attribution. Defaults to null.
+   *
+   * Set this property to "auto" to automatically synchronize the attribution with the nearest [Calcite mode](https://developers.arcgis.com/calcite-design-system/core-concepts/#modes). If no Calcite mode is detected, the attribution defaults to light mode. **The "auto" mode was added in version 5.2.**
+   *
+   * Set this property to "light" or "dark" to explicitly use that mode without synchronization.
    *
    * @since 5.0
    */
-  accessor attributionMode: "dark" | "light" | null | undefined;
+  accessor attributionMode: AttributionMode;
   /**
    * If true, the component will not be destroyed automatically when it is
    * disconnected from the document. This is useful when you want to move the
@@ -122,6 +143,15 @@ export abstract class ArcgisLinkChart extends LitElement {
    * prevent memory leaks.
    *
    * @default false
+   * @example
+   * ```html
+   * <arcgis-link-chart auto-destroy-disabled></arcgis-link-chart>
+   * ```
+   *
+   * ```js
+   * linkChartElement.autoDestroyDisabled = true;
+   * ```
+   * 
    */
   accessor autoDestroyDisabled: boolean;
   /**
@@ -138,7 +168,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    *   }
    * });
    * @example
-   * let view = new MapView({
+   * let view = new LinkChartView({
    *   container: "viewDiv",
    *   map: map,
    *   background: { // autocasts new ColorBackground()
@@ -179,8 +209,8 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   get canZoomOut(): boolean;
   /**
-   * Represents the view's center point; when setting the center, you may pass a
-   * esri/geometry/Point instance or a string representing
+   * Represents the position of the view's center. The property can be set with
+   * a [Point](https://developers.arcgis.com/javascript/latest/references/core/geometry/Point/) or a string representing
    * a longitude/latitude pair (`"-100.4593, 36.9014"`).
    * Setting the center immediately changes the current view.
    * For animating the view, see this component's goTo() method.
@@ -237,8 +267,8 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor constraints: MapViewConstraints;
   /**
-   * Indicates whether layer's displayFilter are honored when rendering layers in the view.
-   * If `false`, display filters are ignored and all features are rendered.
+   * Indicates whether a layer's displayFilter is honored when rendering layers in the view.
+   * If `true`, display filters are ignored and all features are rendered.
    *
    * @default false
    */
@@ -266,6 +296,50 @@ export abstract class ArcgisLinkChart extends LitElement {
    * );
    */
   accessor fatalError: Error<any> | null | undefined;
+  /**
+   * The screen rectangle of the active focus region, or `null` when [focusRegionVisible](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionVisible) is `false`.
+   * This screen rectangle represents the area of the view that is currently in focus and can be used with methods that require a screen rectangle as input, such as `hitTest()`.
+   *
+   * | Action | Keyboard Shortcut / Property |
+   * |--------|----------------------------|
+   * | Enable or disable focus region | Use the `Shift` + `Alt`/`Option` + `O` keyboard shortcut while the view component is in focus or set the [focusRegionVisible](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionVisible) property to `true` or `false`. |
+   * | Resize focus region | Use the `Shift` + `Alt`/`Option` + Up/Down arrow keys while the focus region is enabled. |
+   * | Open the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) for features in the focus region | Press `Enter` or `Spacebar` while the focus region is enabled. |
+   *
+   * **Notes:**
+   * - To know when this focus region is selected, listen for the [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#event-arcgisViewFocusRegionSelect) event. The default behavior of the popup component opening with features in the focus region can be prevented by calling `event.preventDefault()` within the event handler.
+   * - The styling of the focus region can be customized using the [--arcgis-focus-region-outer-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#--arcgis-focus-region-outer-border-color), [--arcgis-focus-region-inner-border-color](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#--arcgis-focus-region-inner-border-color), and [--arcgis-focus-region-border-width](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#--arcgis-focus-region-border-width) CSS variables.
+   * -  When the [focusRegionVisible](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionVisible) is `true`, the opened [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
+   *
+   * @since 5.2
+   * @see [focusRegionShortcutEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionShortcutEnabled)
+   * @see [focusRegionVisible](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionVisible)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#event-arcgisViewFocusRegionSelect)
+   */
+  get focusRegion(): LinkChartView["focusRegion"];
+  /**
+   * Enables the `Shift` + `Alt`/`Option` + `O` keyboard shortcut for showing the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion). When `undefined`, the shortcut is enabled only when a [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) component is slotted into the ArcgisLinkChart component, or when [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupComponentEnabled) is set, and when the [popupDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupDisabled) property is `false`. Set to `true` to handle focus-region selection in a custom application, or `false` to disable the shortcut. When `false`, the shortcut does not change the [focusRegionVisible](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionVisible) property.
+   *
+   * @default false
+   * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion)
+   * @see [focusRegionVisible](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionVisible)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#event-arcgisViewFocusRegionSelect)
+   */
+  accessor focusRegionShortcutEnabled: boolean | undefined;
+  /**
+   * Indicates whether the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion) is visible. Set this property to `true` to show the centered focus region, or `false` to hide it.
+   * The focus region can also be shown or hidden by focusing on the ArcgisLinkChart component and pressing the `Shift` + `Alt`/`Option` + `O` keyboard shortcut. By default, this shortcut is available only when a popup component is available and [popupDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupDisabled) is `false`. Use [focusRegionShortcutEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionShortcutEnabled) to explicitly enable or disable it.
+   *
+   * **Note:** When the focus region is enabled, the [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement) or slotted [popup component](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) will be docked with the dock button hidden by default to prevent it from overlapping the focus region.
+   *
+   * @default false
+   * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion)
+   * @see [focusRegionShortcutEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionShortcutEnabled)
+   * @see [@arcgisViewFocusRegionSelect](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#event-arcgisViewFocusRegionSelect)
+   */
+  accessor focusRegionVisible: boolean;
   /**
    * Allows for adding graphics directly to the default graphics in the View.
    *
@@ -325,7 +399,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * @example
    * // Override the default highlights collection
    *
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   map: map,
    *   container: "viewDiv",
    *
@@ -351,7 +425,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor highlights: Collection<HighlightOptions>;
   /**
-   * Indication whether the view is being interacted with (for example when panning or by an interactive tool).
+   * Indicates whether the view is being interacted with (for example when panning or by an interactive tool).
    *
    * @default false
    */
@@ -388,7 +462,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor map: WebLinkChart;
   /**
-   * Indication whether the view is being navigated (for example when panning).
+   * Indicates whether the view is being navigated (for example when panning).
    *
    * @default false
    */
@@ -399,7 +473,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * @since 4.9
    * @example
    * // Disable the gamepad usage, single touch panning, panning momentum and mouse wheel zooming.
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   container: "viewDiv",
    *   map: new Map({
    *     basemap: "satellite"
@@ -421,8 +495,18 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor navigation: Navigation;
   /**
-   * Use the padding property to make the [center](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#center),
-   * and [extent](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#extent), etc. work off a
+   * Configures snapping, tooltips, display units, and input units for supported components, view models, and analyses.
+   * See [ViewOptions](https://developers.arcgis.com/javascript/latest/references/core/views/interactive/options/ViewOptions/) for supported options, exceptions, and opt-in requirements.
+   *
+   * These options are not saved in a WebMap or WebScene.
+   *
+   * @since 5.2
+   * @beta
+   */
+  accessor options: ViewOptions;
+  /**
+   * Use the padding property to make the [center](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#center),
+   * and [extent](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#extent), etc. work off a
    * subsection of the full view. This is particularly useful when layering UI
    * elements or semi-transparent content on top of portions of the view.
    *
@@ -434,6 +518,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    *
    * By default, the `popup` property is an empty object that allows you to set the popup options. A [Popup](https://developers.arcgis.com/javascript/latest/references/core/widgets/Popup/) instance is automatically created and assigned to the view's [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popup) when the user clicks on the view and [popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/views/PopupView/#popupEnabled) is `true`, when the [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#openPopup) method is called, or when some widgets need the popup, such as [Search](https://developers.arcgis.com/javascript/latest/references/core/widgets/Search/). If [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popup) is `null`, the popup instance will not be created.
    *
+   * @deprecated since 5.2, use [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement) instead. Set the [popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupComponentEnabled) property to `true` to enable the popup component.
    * @see [popupElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupElement)
    * @see [popupDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupDisabled)
    * @see [openPopup()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#openPopup)
@@ -629,7 +714,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    */
   accessor spatialReference: SpatialReference;
   /**
-   * Indication whether the view is animating, being navigated with or resizing.
+   * Indicates whether the view is animating, being navigated with or resizing.
    *
    * @default false
    */
@@ -673,7 +758,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * });
    *
    * // Create a mapview showing sales for the last week of March 2019 only.
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   map: map,
    *   container: "viewDiv",
    *   timeExtent: {
@@ -692,7 +777,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * @see [wikipedia - List of tz database time zones](https://en.wikipedia.org/wiki/List_of_tz_database_time_zones)
    * @example
    * // Date and time will be displayed in Pacific/Auckland (NZ) time zone
-   * const view = new MapView({
+   * const view = new LinkChartView({
    *   map: map,
    *   container: "viewDiv",
    *   timeZone: "Pacific/Auckland"
@@ -732,6 +817,8 @@ export abstract class ArcgisLinkChart 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 hitTarget
    * @param options
@@ -741,7 +828,8 @@ export abstract class ArcgisLinkChart extends LitElement {
    * const viewElement = document.querySelector("arcgis-map");
    * // Get viewElement's click event
    * viewElement.addEventListener("arcgisViewClick", async (event) => {
-   *   const generator = await viewElement.fetchPopupFeatures(event.detail.screenPoint, {
+   *   const screenPoint = { x: event.detail.x, y: event.detail.y };
+   *   const generator = await viewElement.fetchPopupFeatures(screenPoint, {
    *     pointerType: event.detail.pointerType
    *   });
    *   // Access the features returned from the generator
@@ -754,7 +842,7 @@ export abstract class ArcgisLinkChart extends LitElement {
    * ```js
    * // Wait for all the features to be available
    * view.on("click", async (event) => {
-   *   const generator = view.fetchPopupFeatures(event.screenPoint, {
+   *   const generator = view.fetchPopupFeatures({ x: event.x, y: event.y }, {
    *     pointerType: event.pointerType
    *   });
    *
@@ -804,7 +892,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Gets the analysis view created for the given analysis object.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#whenAnalysisView)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#whenAnalysisView)
    *
    * @param analysis
    * @since 4.34
@@ -847,7 +935,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Fires when the view for an analysis is created.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#event-analysis-view-create)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#event-analysis-view-create)
    *
    * @since 4.34
    */
@@ -855,7 +943,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Fires when an error occurs during the creation of an analysis view after an analysis is added to the view.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#event-analysis-view-create-error)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#event-analysis-view-create-error)
    *
    * @since 4.34
    */
@@ -863,7 +951,7 @@ export abstract class ArcgisLinkChart extends LitElement {
   /**
    * Fires after an analysis view is destroyed.
    *
-   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/MapView/#event-analysis-view-destroy)
+   * [Read more](https://developers.arcgis.com/javascript/latest/references/core/views/LinkChartView/#event-analysis-view-destroy)
    *
    * @since 4.34
    */
@@ -885,6 +973,31 @@ export abstract class ArcgisLinkChart extends LitElement {
   readonly arcgisViewDoubleTapDrag: import("@arcgis/lumina").TargetedEvent<this, DoubleTapDragEvent>;
   /** Fires during a pointer drag on the view. */
   readonly arcgisViewDrag: import("@arcgis/lumina").TargetedEvent<this, DragEvent>;
+  /**
+   * Fires when the focus region is selected using the `Enter` or `Space` key. Use this event to react to the selection of the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion) via keyboard input and perform any necessary actions based on that selection, such as performing a `hitTest()` on the [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion) and passing the returned graphics to the [selectionManager](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#selectionManager).
+   *
+   * Call `event.detail.preventDefault()` to suppress the default behavior of the [popup](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/) opening with the features in the focus region.
+   *
+   * @since 5.2
+   * @see [focusRegion](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegion)
+   * @see [focusRegionVisible](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionVisible)
+   * @see [focusRegionShortcutEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#focusRegionShortcutEnabled)
+   * @example
+   * ```js
+   * viewElement.addEventListener("arcgisViewFocusRegionSelect", async (event) => {
+   *   // prevent the default popup from appearing
+   *   event.detail.preventDefault();
+   *   // get the focus region and fetch the popup features for it
+   *   const focusRegion = viewElement.focusRegion;
+   *   const generator = await viewElement.fetchPopupFeatures(focusRegion, {
+   *     pointerType: event.detail.pointerType,
+   *   });
+   *   // process the features as needed
+   *   const features = await Array.fromAsync(generator);
+   * });
+   * ```
+   */
+  readonly arcgisViewFocusRegionSelect: import("@arcgis/lumina").TargetedEvent<this, FocusRegionSelectEvent>;
   /** Fires during a pointer drag on the view. */
   readonly arcgisViewHold: import("@arcgis/lumina").TargetedEvent<this, HoldEvent>;
   /** Fires right after a user clicks on the view. */
@@ -946,6 +1059,7 @@ export abstract class ArcgisLinkChart extends LitElement {
     arcgisViewDoubleClick: ArcgisLinkChart["arcgisViewDoubleClick"]["detail"];
     arcgisViewDoubleTapDrag: ArcgisLinkChart["arcgisViewDoubleTapDrag"]["detail"];
     arcgisViewDrag: ArcgisLinkChart["arcgisViewDrag"]["detail"];
+    arcgisViewFocusRegionSelect: ArcgisLinkChart["arcgisViewFocusRegionSelect"]["detail"];
     arcgisViewHold: ArcgisLinkChart["arcgisViewHold"]["detail"];
     arcgisViewImmediateClick: ArcgisLinkChart["arcgisViewImmediateClick"]["detail"];
     arcgisViewImmediateDoubleClick: ArcgisLinkChart["arcgisViewImmediateDoubleClick"]["detail"];
@@ -964,4 +1078,6 @@ export abstract class ArcgisLinkChart extends LitElement {
     arcgisViewReadyError: ArcgisLinkChart["arcgisViewReadyError"]["detail"];
     arcgisViewVerticalTwoFingerDrag: ArcgisLinkChart["arcgisViewVerticalTwoFingerDrag"]["detail"];
   };
-}
+}
+
+export type AttributionMode = LinkChartView["attributionMode"] | "auto";

package/dist/components/arcgis-link-chart/customElement.js

@@ -1,23 +1,24 @@
 /* COPYRIGHT Esri - https://js.arcgis.com/5.2/LICENSE.txt */
 import { c as C } from "../../chunks/runtime.js";
-import { watch as n } from "@arcgis/core/core/reactiveUtils.js";
+import { watch as h } from "@arcgis/core/core/reactiveUtils.js";
 import _ from "@arcgis/core/views/LinkChartView.js";
 import b from "@arcgis/core/WebLinkChart.js";
-import { LitElement as V, createEvent as c, safeClassMap as w } from "@arcgis/lumina";
-import { reCreateAccessor as A, reEmitEvent as e, makeAccessorController as f } from "@arcgis/lumina/controllers/accessor";
-import { createRef as v, ref as m } from "lit/directives/ref.js";
+import { LitElement as V, createEvent as p, safeClassMap as w } from "@arcgis/lumina";
+import { reEmitEvent as e } from "@arcgis/lumina-toolkit/reEmitEvent";
+import { makeAccessorController as f, reCreateAccessor as A } from "@arcgis/lumina-toolkit/useAccessor";
+import { createRef as u, ref as v } from "lit/directives/ref.js";
 import { s as I } from "../../chunks/esri-main.js";
 import { s as E } from "../../chunks/slots.js";
-import { C as u } from "../../chunks/resources.js";
-import { p as L, i as k } from "../../chunks/component-utils.js";
-import { U as M, u as R, a as U } from "../../chunks/useArcgisViewReadyError.js";
-import { fetchKnowledgeGraph as D } from "@arcgis/core/rest/knowledgeGraphService.js";
-import x from "@arcgis/core/rest/knowledgeGraph/GraphQueryStreaming.js";
-import { t as d } from "../../chunks/async-utils.js";
-import { isAbortError as g } from "@arcgis/core/core/promiseUtils.js";
+import { C as m } from "../../chunks/resources.js";
+import { b as L, c as R, p as M, i as k } from "../../chunks/component-utils.js";
+import { U, u as D, a as x, b as Q } from "../../chunks/useArcgisViewReadyError.js";
+import { fetchKnowledgeGraph as P } from "@arcgis/core/rest/knowledgeGraphService.js";
+import z from "@arcgis/core/rest/knowledgeGraph/GraphQueryStreaming.js";
+import { t as g } from "../../chunks/async-utils.js";
+import { isAbortError as d } from "@arcgis/core/core/promiseUtils.js";
 import { html as y } from "lit";
-import Q from "@arcgis/core/layers/LinkChartLayer.js";
-const P = f(
+import Z from "@arcgis/core/layers/LinkChartLayer.js";
+const F = f(
   b,
   /**
    * Since omitProps is only needed for typing, not runtime, `{} as { ... }` is
@@ -28,19 +29,22 @@ const P = f(
    * in an externalized package.
    */
   {}
-), z = f(_, {});
-class Z extends V {
+), S = f(_, {});
+class G extends V {
   constructor() {
-    super(), this._containerRef = v(), this._mapRef = v(), this._uiController = new M(this), this._activeLoadAbortController = null, this.arcgisLoadError = R(this), this.arcgisViewReadyError = U(this), this._map = P(this), this._baseCypherQuery = "", this._serviceUrl = "", this._propItemId = "", this.view = z(this), this.animationsDisabled = this.view.animationsEnabled, this.allLayerViews = this.view.allLayerViews, this.analyses = this.view.analyses, this.attributionMode = this.view.attributionMode, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.canZoomIn = this.view.canZoomIn, this.canZoomOut = this.view.canZoomOut, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.graphics = this.view.graphics, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.popupComponentEnabled = !1, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.selectionManager = this.view.selectionManager, this.slotGroupRefs = this._uiController.slotGroupRefs, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.updating = this.view.updating, this.arcgisViewAnalysisViewCreate = e(() => this.view, "analysis-view-create"), this.arcgisViewAnalysisViewCreateError = e(() => this.view, "analysis-view-create-error"), this.arcgisViewAnalysisViewDestroy = e(() => this.view, "analysis-view-destroy"), this.arcgisViewChange = c(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDoubleTapDrag = e(() => this.view, "double-tap-drag"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = c(), this.arcgisViewVerticalTwoFingerDrag = e(() => this.view, "vertical-two-finger-drag"), this.view.ui = {
+    super(), this._attributionMode = null, this._containerRef = u(), this._mapRef = u(), this._uiController = new U(this), this._activeLoadAbortController = null, this.arcgisLoadError = D(this), this.arcgisViewReadyError = x(this), this._map = F(this), this._baseCypherQuery = "", this._serviceUrl = "", this._propItemId = "", this.view = S(this), this.animationsDisabled = this.view.animationsEnabled, this.allLayerViews = this.view.allLayerViews, this.analyses = this.view.analyses, this.autoDestroyDisabled = !1, this.background = this.view.background, this.basemap = this._map.basemap, this.basemapView = this.view.basemapView, this.canZoomIn = this.view.canZoomIn, this.canZoomOut = this.view.canZoomOut, this.constraints = this.view.constraints, this.displayFilterDisabled = this.view.displayFilterEnabled, this.fatalError = this.view.fatalError, this.graphics = this.view.graphics, this.highlights = this.view.highlights, this.layerViews = this.view.layerViews, this.magnifier = this.view.magnifier, this.map = this.view.map, this.navigation = this.view.navigation, this.options = this.view.options, this.padding = this.view.padding, this.popup = this.view.popup, this.popupDisabled = this.view.popupEnabled, this.popupComponentEnabled = !1, this.ready = this.view.ready, this.resizeAlign = this.view.resizeAlign, this.resolution = this.view.resolution, this.rotation = this.view.rotation, this.selectionManager = this.view.selectionManager, this.focusRegionVisible = this.view.focusRegionVisible, this.slotGroupRefs = this._uiController.slotGroupRefs, this.spatialReference = this.view.spatialReference, this.suspended = this.view.suspended, this.theme = this.view.theme, this.timeExtent = this.view.timeExtent, this.timeZone = this.view.timeZone, this.arcgisViewAnalysisViewCreate = e(() => this.view, "analysis-view-create"), this.arcgisViewAnalysisViewCreateError = e(() => this.view, "analysis-view-create-error"), this.arcgisViewAnalysisViewDestroy = e(() => this.view, "analysis-view-destroy"), this.arcgisViewChange = p(), this.arcgisViewClick = e(() => this.view, "click"), this.arcgisViewDoubleClick = e(() => this.view, "double-click"), this.arcgisViewDoubleTapDrag = e(() => this.view, "double-tap-drag"), this.arcgisViewFocusRegionSelect = e(() => this.view, "focus-region-select"), this.arcgisViewDrag = e(() => this.view, "drag"), this.arcgisViewHold = e(() => this.view, "hold"), this.arcgisViewImmediateClick = e(() => this.view, "immediate-click"), this.arcgisViewImmediateDoubleClick = e(() => this.view, "immediate-double-click"), this.arcgisViewKeyDown = e(() => this.view, "key-down"), this.arcgisViewKeyUp = e(() => this.view, "key-up"), this.arcgisViewLayerviewCreate = e(() => this.view, "layerview-create"), this.arcgisViewLayerviewCreateError = e(() => this.view, "layerview-create-error"), this.arcgisViewLayerviewDestroy = e(() => this.view, "layerview-destroy"), this.arcgisViewMouseWheel = e(() => this.view, "mouse-wheel"), this.arcgisViewPointerDown = e(() => this.view, "pointer-down"), this.arcgisViewPointerEnter = e(() => this.view, "pointer-enter"), this.arcgisViewPointerLeave = e(() => this.view, "pointer-leave"), this.arcgisViewPointerMove = e(() => this.view, "pointer-move"), this.arcgisViewPointerUp = e(() => this.view, "pointer-up"), this.arcgisViewReadyChange = p(), this.arcgisViewVerticalTwoFingerDrag = e(() => this.view, "vertical-two-finger-drag"), Q(this), this.view.ui = {
       components: []
     };
   }
   static {
-    this.properties = { _map: 16, _baseCypherQuery: 16, _serviceUrl: 16, _propItemId: 16, view: 32, animationsDisabled: 5, aria: 0, allLayerViews: 32, analyses: 0, attributionItems: 32, attributionMode: 1, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, canZoomIn: 36, canZoomOut: 36, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, focusAreas: 0, graphics: 0, hideAttribution: 5, highlights: 0, interacting: 32, itemId: 3, baseCypherQuery: 3, serviceUrl: 3, layerViews: 32, magnifier: 32, map: 0, navigating: 32, navigation: 0, padding: 0, popup: 0, popupElement: 32, popupDisabled: 5, popupComponentEnabled: 5, ready: 36, resizeAlign: 1, resolution: 40, rotation: 9, selectionManager: 32, scale: 9, slotGroupRefs: 32, spatialReference: 0, stationary: 32, suspended: 39, theme: 0, timeExtent: 0, timeZone: 1, updating: 36, viewpoint: 0, zoom: 9, loadErrorSources: 0 };
+    this.properties = { _map: 16, _baseCypherQuery: 16, _serviceUrl: 16, _propItemId: 16, view: 32, animationsDisabled: 5, aria: 0, allLayerViews: 32, analyses: 0, attributionItems: 32, attributionMode: 1, autoDestroyDisabled: 5, background: 0, basemap: 1, basemapView: 0, canZoomIn: 36, canZoomOut: 36, center: 1, constraints: 0, displayFilterDisabled: 5, extent: 0, fatalError: 0, focusAreas: 0, graphics: 0, hideAttribution: 5, highlights: 0, interacting: 32, itemId: 3, baseCypherQuery: 3, serviceUrl: 3, layerViews: 32, magnifier: 32, map: 0, navigating: 32, navigation: 0, options: 0, padding: 0, popup: 0, popupElement: 32, popupDisabled: 5, popupComponentEnabled: 5, ready: 36, resizeAlign: 1, resolution: 40, rotation: 9, selectionManager: 32, focusRegionVisible: 5, focusRegionShortcutEnabled: 5, focusRegion: 32, scale: 9, slotGroupRefs: 32, spatialReference: 0, stationary: 32, suspended: 39, theme: 0, timeExtent: 0, timeZone: 1, updating: 32, viewpoint: 0, zoom: 9, loadErrorSources: 0 };
   }
   static {
     this.styles = [I, E];
   }
+  static {
+    this.shadowRootOptions = { mode: "open", delegatesFocus: !0 };
+  }
   get aria() {
     return this.view?.aria;
   }
@@ -50,11 +54,20 @@ class Z extends V {
   get attributionItems() {
     return this.view?.attributionItems ?? [];
   }
+  get attributionMode() {
+    return this._attributionMode;
+  }
+  set attributionMode(i) {
+    this._attributionMode = i, i !== "auto" && (this.view.attributionMode = i);
+  }
   get center() {
     return this.view.center;
   }
   set center(i) {
-    const t = L(i, this.view);
+    if (L(i, this._center))
+      return;
+    this._center = R(i);
+    const t = M(i, this.view);
     t && (this.view.center = t);
   }
   get extent() {
@@ -105,6 +118,9 @@ class Z extends V {
   get popupElement() {
     return this._uiController.popupElement || null;
   }
+  get focusRegion() {
+    return this.view.focusRegion;
+  }
   get scale() {
     return this.view.scale;
   }
@@ -114,6 +130,9 @@ class Z extends V {
   get stationary() {
     return this.view.stationary;
   }
+  get updating() {
+    return this.view.updating;
+  }
   get viewpoint() {
     return this.view.viewpoint;
   }
@@ -129,17 +148,17 @@ class Z extends V {
   async closePopup() {
     this._uiController.closePopup();
   }
-  async fetchPopupFeatures(i, t) {
-    return this.view.fetchPopupFeatures(i, t);
-  }
   async destroy() {
     await this.manager.destroy();
   }
+  async fetchPopupFeatures(i, t) {
+    return this.view.fetchPopupFeatures(i, t);
+  }
   async goTo(i, t) {
     return await this.view.goTo(i, t);
   }
   async openPopup(i) {
-    this._uiController.openPopup(i);
+    await this._uiController.openPopup(i);
   }
   toMap(i) {
     return this.view.toMap(i);
@@ -165,19 +184,6 @@ class Z extends V {
   async zoomOut() {
     this.view.zoomOut();
   }
-  loaded() {
-    const i = this;
-    i.el.childElem = this._mapRef.value, this.view.container ??= i.el.childElem, s.setLocalPublicMap(this, this._map), this.manager.onLifecycle(() => [
-      n(() => this.map, (t) => {
-        t && s.setLocalPrivateMap(this, t);
-      }, { initial: !0, sync: !0 }),
-      n(() => this.view.stationary, () => this.arcgisViewChange.emit(), { initial: !0 }),
-      n(() => this.view.ready, () => this.arcgisViewReadyChange.emit(), { initial: this.view.ready }),
-      n(() => this.view.attributionHeight, (t) => {
-        this._uiController.handleAttributionHeightChange(t);
-      }, { initial: !0 })
-    ]);
-  }
   willUpdate(i) {
     const t = () => {
       this._activeLoadAbortController?.abort();
@@ -191,31 +197,31 @@ class Z extends V {
         if (this._serviceUrl && !this._baseCypherQuery) {
           const a = t();
           s.fetchKnowledgeGraph(this._serviceUrl).then((l) => {
-            const h = new s.WebLinkChart(), o = new s.LinkChartLayer({
+            const n = new s.WebLinkChart(), o = new s.LinkChartLayer({
               url: l.url
             });
             o.load({
               signal: a?.signal
             });
             try {
-              d(a.signal), h.add(o), this._setLinkChartAndZoom(h);
-            } catch (p) {
-              if (!g(p))
-                throw p;
+              g(a.signal), n.add(o), this._setLinkChartAndZoom(n);
+            } catch (c) {
+              if (!d(c))
+                throw c;
             }
           });
         } else if (this._baseCypherQuery && this._serviceUrl) {
           const a = t();
           s.fetchKnowledgeGraph(this._serviceUrl).then((l) => {
-            s.WebLinkChart.fromCypherQuery(l, new x({
+            s.WebLinkChart.fromCypherQuery(l, new z({
               openCypherQuery: this._baseCypherQuery
             }), void 0, {
               signal: a?.signal
-            }).then(async (h) => {
+            }).then(async (n) => {
               try {
-                d(a.signal), this._setLinkChartAndZoom(h);
+                g(a.signal), this._setLinkChartAndZoom(n);
               } catch (o) {
-                if (!g(o))
+                if (!d(o))
                   throw o;
               }
             });
@@ -223,22 +229,35 @@ class Z extends V {
         } else !this._serviceUrl && i.has("_serviceUrl") && (t(), s.setMap(this.view, null));
     }
   }
+  loaded() {
+    const i = this;
+    i.el.childElem = this._mapRef.value, this.view.container ??= i.el.childElem, s.setLocalPublicMap(this, this._map), this.manager.onLifecycle(() => [
+      h(() => this.map, (t) => {
+        t && s.setLocalPrivateMap(this, t);
+      }, { initial: !0, sync: !0 }),
+      h(() => this.view.stationary, () => this.arcgisViewChange.emit(), { initial: !0 }),
+      h(() => this.view.ready, () => this.arcgisViewReadyChange.emit(), { initial: this.view.ready }),
+      h(() => this.view.attributionHeight, (t) => {
+        this._uiController.handleAttributionHeightChange(t);
+      }, { initial: !0 })
+    ]);
+  }
   _setLinkChartAndZoom(i) {
     s.reCreateAccessor(this._map, this), s.setLocalPrivateMap(this, i), s.setMap(this.view, i), this._map && this.view.when(() => {
       i.diagramNodesExtent && this.view.goTo(i.diagramNodesExtent);
     });
   }
   renderMain() {
-    return y`<div class=${w(u.base)} ${m(this._mapRef)}></div>`;
+    return y`<div class=${w(m.base)} ${v(this._mapRef)}></div>`;
   }
   render() {
-    return y`${this.renderMain()}<section class=${w(u.containerUI)} ${m(this._containerRef)}>${this._uiController.render()}</section>`;
+    return y`${this.renderMain()}<section class=${w(m.containerUI)} ${v(this._containerRef)}>${this._uiController.render()}</section>`;
   }
 }
 const s = {
-  fetchKnowledgeGraph: async (r) => await D(r),
+  fetchKnowledgeGraph: async (r) => await P(r),
   WebLinkChart: b,
-  LinkChartLayer: Q,
+  LinkChartLayer: Z,
   setMap: (r, i) => {
     r.map = i;
   },
@@ -253,8 +272,8 @@ const s = {
   },
   reCreateAccessor: A
 };
-C("arcgis-link-chart", Z);
+C("arcgis-link-chart", G);
 export {
-  Z as ArcgisLinkChart,
+  G as ArcgisLinkChart,
   s as exportsForTests
 };