@arcgis/map-components

/// <reference path="../../index.d.ts" /> import type Graphic from "@arcgis/core/Graphic.js"; import type Collection from "@arcgis/core/core/Collection.js"; import type Point from "@arcgis/core/geometry/Point.js"; import type { ArcgisReferenceElement, HeadingLevel } from "../types.js"; import type { Alignment, DockOptions, PopupPositionResult, FetchFeaturesOptions } from "./types.js"; import type { PublicLitElement as LitElement } from "@arcgis/lumina"; import type { ActionEvent, PopupOpenOptions } from "@arcgis/core/widgets/Popup/types.js"; import type { ScreenPoint } from "@arcgis/core/core/types.js"; import type { ClickEvent } from "@arcgis/core/views/input/types.js"; import type { ArcgisFeatureNext } from "../arcgis-feature-next/customElement.js"; import type { T9nMeta } from "@arcgis/lumina/controllers"; import type { PopupAction, InitialDisplayOptions, State } from "@arcgis/core/popup/types.js"; import type { GoToOverride } from "@arcgis/core/widgets/support/types.js"; import type { MapViewOrSceneView } from "@arcgis/core/views/MapViewOrSceneView.js"; /** * ## Overview * The Popup component allows users to view content from feature attributes. Popups enhance web applications * by providing users with a simple way to interact with and view attributes in a layer. * They play an important role in relaying information to the user, which improves the storytelling capabilities of the application. * * The popup component can be added to the [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/), [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/), or [arcgis-link-chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/) using the `popup` slot. * When added to a view component, the popup is automatically populated with content from the selected feature in the view and displays when clicking on features in the view. * The content of the popup is determined based on the [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) assigned to the selected feature. * * ```html * <arcgis-map id="06ca49d0ddb447e7817cfc343ca30df9"> * <arcgis-popup slot="popup"></arcgis-popup> * </arcgis-map> * ``` * * The Popup component can also be opened manually at a specific location using the [open](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#open) property. * To prevent the popup from opening automatically when clicking on features within view components, set the `popup-disabled` attribute to `true` and add the Popup component to the [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/), [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/), or [arcgis-link-chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/) using the `popup` slot. * Before setting the `open` property to `true`, you must set the [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) property to specify where the popup should open. * * Example of opening the popup at a clicked location with custom content: * * ```html *  * <arcgis-map id="06ca49d0ddb447e7817cfc343ca30df9" popup-disabled> *  * <arcgis-popup slot="popup"></arcgis-popup> * </arcgis-map> * <script> * const viewElement = document.querySelector("arcgis-map"); * const popupComponent = document.querySelector("arcgis-popup"); * // Listen for clicks on the view and open the popup at the clicked location with custom content. * viewElement.addEventListener("arcgisViewClick", (event) => { * const { mapPoint } = event.detail; * popupComponent.location = mapPoint; * popupComponent.heading = "You clicked here"; * popupComponent.content = "Latitude: " + mapPoint.latitude.toFixed(3) + ", Longitude: " + mapPoint.longitude.toFixed(3); * popupComponent.open = true; * }); * </script> * ``` * * Alternatively, you can call the [arcgis-map.fetchPopupFeatures()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#fetchPopupFeatures) method within the view element's click event listener to open the popup with features at the clicked location. * ```html *  * <arcgis-map id="06ca49d0ddb447e7817cfc343ca30df9" popup-disabled> *  * <arcgis-popup slot="popup"></arcgis-popup> * </arcgis-map> * <script> * const viewElement = document.querySelector("arcgis-map"); * const popupComponent = document.querySelector("arcgis-popup"); * // Listen for clicks on the view and populate the popup with features at that location. * viewElement.addEventListener("arcgisViewClick", async (event) => { * const generator = await viewElement.fetchPopupFeatures(event.detail.screenPoint, { * pointerType: event.detail.pointerType, * }); * * const features = await Array.fromAsync(generator); * popupComponent.features = features; * }); * // Open the popup when the features property changes. * reactiveUtils.watch( * () => popupComponent.features, * () => { * popupComponent.open = popupComponent.features ? true : false; * }); * </script> * ``` * * The popup component can be used with the view components by default. Set the `popup-component-enabled` attribute to `true` using [arcgis-map.popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#popupComponentEnabled), [arcgis-scene.popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#popupComponentEnabled), or [arcgis-link-chart.popupComponentEnabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#popupComponentEnabled) to open the popup component automatically when clicking on features. * * ```html * <arcgis-map id="06ca49d0ddb447e7817cfc343ca30df9" popup-component-enabled></arcgis-map> * ``` * > At version 6.0, the Popup component will be used by default and setting the `popup-component-enabled` attribute will no longer be necessary. * * ## Popup UI * The [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/), [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/), or [arcgis-link-chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/) components contain a default popup. * This popup can display generic content, which is set in its [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading) * and [content](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#content) properties. * When content is set directly on the Popup instance it is not tied to a specific feature or layer. * * ![popup-basic-example](https://developers.arcgis.com/javascript/latest/assets/references/core/widgets/popup/popup-basic.avif) * * In the image above, the text "Marriage in Nassau County Census Tract 5177.01" is the popup's [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading). * The remaining text is the popup's [content](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#content). * A dock button is displayed in the top right corner of the popup allowing the user to dock the popup to one of the sides or corners of the view. * The options for docking may be set in the [dockOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#dockOptions) property. * The popup may also be collapsed by clicking the collapse button (the down arrow icon) in the top right corner of the popup. * When collapsed, only the heading of the popup displays. * The popup may be closed by clicking the close button (the "x" icon) in the top right corner of the popup. * * Popups can also contain [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#actions) which execute a function defined by the developer when clicked. * By default, every popup has a "Zoom to" action (as shown in the image above with the magnifying glass) that allows users to zoom to the selected feature. * See the [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#actions) property for information about adding custom actions to a popup. * * The Popup component is tied to an [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/), [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/), or [arcgis-link-chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/) component, whether it's docked or anchored to the selected feature. * If wanting to utilize the Popup functionality outside of [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/), [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/), or [arcgis-link-chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/), the [arcgis-features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-features/) component can be used to display the same content * in its own container. * * ## Popup and PopupTemplate * [PopupTemplates](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) are closely related to Popup, but are more specific to [layers](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/) * and [graphics](https://developers.arcgis.com/javascript/latest/references/core/Graphic/). Popup templates allow you to define custom titles and content templates based on the source of the * [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature). When a layer or a graphic has a defined * popup template, the popup will display the content defined in the popup template when the feature is clicked. * The content may contain field values from the attributes of the [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature). * * Custom PopupTemplates may also be assigned directly to a popup by setting [graphics](https://developers.arcgis.com/javascript/latest/references/core/Graphic/) on the * [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) property. * * @since 4.34 * @beta * @see [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) */ export abstract class ArcgisPopup extends LitElement { /** * A [collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/) of [action button](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionButton/) or [action toggle](https://developers.arcgis.com/javascript/latest/references/core/support/actions/ActionToggle/) objects. Each action may be executed by clicking the icon or image symbolizing them. * There is a default `Zoom To` action styled with a magnifying glass icon to zoom in four LODs and center the map on the selected feature. This default action can be removed by setting [includeDefaultActionsDisabled](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#includeDefaultActionsDisabled) to `true`, or by setting the [`overwriteActions`](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#overwriteActions) property to `true` in a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/). * * The order of each action is the order in which they appear in the actions [Collection](https://developers.arcgis.com/javascript/latest/references/core/core/Collection/). The [@arcgisTriggerAction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#event-arcgisTriggerAction) event fires each time an action is clicked. * * @see [@arcgisTriggerAction](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#event-arcgisTriggerAction) * @see [Popup actions sample](https://developers.arcgis.com/javascript/latest/sample-code/popup-actions/) */ accessor actions: Collection<PopupAction>; /** * Indicates if the component is active when it is visible and is not [waiting](https://developers.arcgis.com/javascript/latest/references/core/popup/Features/#waitingForResult). * * @default false */ get active(): boolean; /** * Position of the popup in relation to the selected feature. The default behavior * is to display above the feature and adjust if not enough room. If needing * to explicitly control where the popup displays in relation to the feature, choose * an option besides `auto`. * * @default "auto" * @example * ```js * // Popup will display on the bottom-right of the selected feature regardless of where that feature is located * popupComponent.alignment = "bottom-right"; * ``` */ accessor alignment: Alignment; /** * This closes the popup when the [View](https://developers.arcgis.com/javascript/latest/references/core/views/View/) camera or [Viewpoint](https://developers.arcgis.com/javascript/latest/references/core/Viewpoint/) changes. * * @default false */ accessor autoCloseEnabled: boolean; /** * 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 * component to a different place on the page, or temporarily hide it. If this * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#destroy) method when you are done to * prevent memory leaks. * * @default false */ accessor autoDestroyDisabled: boolean; /** * Indicates whether the popup displays its content. If `true`, only the header displays. * * @default false */ accessor collapsed: boolean; /** * The content of the component. When set directly on the component, this content is static and cannot use fields to set content templates. To set a template for the content based on field or attribute names, see [PopupTemplate.content](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#content). * * @example * ```js * // This sets generic instructions in the component that will always be displayed * // unless it is overridden by a PopupTemplate. * component.content = "Click a feature on the map to view its attributes"; * ``` */ accessor content: string | HTMLElement | null | undefined; /** Dock position in the [arcgis-map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/), [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/), or [arcgis-link-chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/) component. */ get currentDockPosition(): null | undefined | PopupPositionResult; /** * Enables automatic creation of a popup template for layers that have popups enabled but no popupTemplate defined. Automatic popup templates are supported for layers that support the `createPopupTemplate` method. * * **Note:** Starting with version 4.28, `date` fields are formatted using the `short-date-short-time` preset [dateFormat](https://developers.arcgis.com/javascript/latest/references/core/popup/support/FieldInfoFormat/#dateFormat) rather than `long-month-day-year` in default [popup](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) created by setting the `defaultPopupTemplateEnabled` property to `true`. * For example, previously a date that may have appeared as `"December 30, 1997"` will now appear as `"12/30/1997 6:00 PM"`. * * @default false */ accessor defaultPopupTemplateEnabled: boolean; /** * Indicates whether the placement of the popup is docked to the side of the view. * * Docking the popup allows for a better user experience, particularly when opening * popups in apps on mobile devices. When a popup is "dockEnabled" it means the popup no * longer points to the [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature) or the [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) * assigned to it. Rather it is attached to a side, the top, or the bottom of the view. * * See [dockOptions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#dockOptions) to override default options related to docking the popup. * * @default false * @example * ```html *  * <arcgis-popup dock-enabled></arcgis-popup> * ``` * @example * ```js * // Setting this property using JS. * // The popup will automatically be dockEnabled when made visible * popupComponent.dockEnabled = true; * ``` */ accessor dockEnabled: boolean; /** * Docking the popup allows for a better user experience, particularly when opening * popups in apps on mobile devices. When a popup is "dockEnabled" it means the popup no * longer points to the [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature) or the [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) * assigned to it. Rather it is placed in one of the corners of the view or to the top or bottom * of it. This property allows the developer to set various options for docking the popup. * * See the object specification table below to override default docking properties on the popup. * * @example * ```js * popupComponent.dockOptions = { * // Disable the dock button so users cannot undock the popup * buttonEnabled: false, * // Dock the popup when the size of the view is less than or equal to 600x1000 pixels * breakpoint: { * width: 600, * height: 1000 * } * }; * ``` */ accessor dockOptions: DockOptions; /** * The heading currently displayed for the selected feature. This value resolves to the selected feature's [PopupTemplate title](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#title) when available, otherwise it falls back to the component's [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading). * * @since 5.1 * @see [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading) * @see [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature) */ get effectiveHeading(): string | null | undefined; /** * The number of [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) available in the component. * * @default 0 */ get featureCount(): number; /** * This property enables multiple features in the component to display in a list rather than displaying the first selected feature. Setting this to `true` allows the user to scroll through the list of features. This value will only be honored if [initialDisplayMode](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#initialDisplayMode) is set to "feature". * * @default false */ accessor featureMenuOpen: boolean; /** * Sets the title to display on the component while viewing the feature menu. * * @since 5.0 */ accessor featureMenuTitle: string | undefined; /** * An array of graphics associated with the component. Each graphic in this array must have a valid [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) set. They may share the same [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) or have unique [PopupTemplates](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) depending on their attributes. The [content](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#content) and [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading) of the component is set based on the `content` and `title` properties of each graphic's respective [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/). * * When more than one graphic exists in this array, the current content of the component is set based on the value of the [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature). * * This value is `null` if no features are associated with the component. * * @example * ```js * // When setting the features property, the graphics pushed to this property * // must have a PopupTemplate set. * let g1 = new Graphic(); * g1.popupTemplate = new PopupTemplate({ * title: "Results title", * content: "Results: {ATTRIBUTE_NAME}" * }); * // Set the graphics as an array to the popup instance. The content and title of * // the component will be set depending on the PopupTemplate of the graphics. * // Each graphic may share the same PopupTemplate or have a unique PopupTemplate * let graphics = [g1, g2, g3, g4, g5]; * component.features = graphics; * ``` */ accessor features: Array<Graphic>; /** * When `true`, this prevents the popup from trapping focus when opened. * Preventing focus trapping can be used in scenarios where interactions are expected within the user interface, such as when the popup resides in a panel. * * @default false * @since 5.1 */ accessor focusTrapDisabled: boolean; /** * This function provides the ability to override either the [arcgis-map.goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#goTo) or [arcgis-scene.goTo()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#goTo) methods. * * @since 4.33 * @example * ```js * component.goToOverride = function(view, goToParams) { * goToParams.options = { * duration: updatedDuration * }; * return view.goTo(goToParams.target, goToParams.options); * }; * ``` */ accessor goToOverride: GoToOverride | null | undefined; /** * The title of the popup. This can be set generically on the popup no * matter the features that are selected. If the [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature) * has a [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/), then the title set in the * corresponding template is used here. * * @see [headingLevel](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#headingLevel) * @example * ```html *  * <arcgis-popup heading="Population by zip codes in Southern California"></arcgis-popup> * ``` * @example * ```js * // This title will display in the popup unless a selected feature's * // PopupTemplate overrides it * popupComponent.heading = "Population by zip codes in Southern California"; * ``` */ accessor heading: string | null | undefined; /** * Indicates the heading level to use for the [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading) of the popup. * By default, the heading is rendered * as a level 2 heading (e.g. `<h2>Popup title</h2>`). Depending on the component's placement * in your app, you may need to adjust this heading for proper semantics. This is * important for meeting accessibility standards. * * @default 2 * @see [Heading Elements](https://developer.mozilla.org/docs/Web/HTML/Element/Heading_Elements) * @see [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading) * @example * ```html *  * <arcgis-popup heading="Popup title" heading-level="3"></arcgis-popup> * ``` */ accessor headingLevel: HeadingLevel; /** * Indicates whether to hide the action bar that holds the feature's [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#actions). * * @default false */ accessor hideActionBar: boolean; /** * Indicates whether to hide the close button in the component. * * @default false */ accessor hideCloseButton: boolean; /** * Indicates whether to hide the collapse button in the component. * * @default false */ accessor hideCollapseButton: boolean; /** * Indicates whether to hide the group heading for a list of multiple features. * * @default false */ accessor hideFeatureListLayerTitle: boolean; /** * Indicates whether to hide the feature menu heading and description in the component's feature menu list. * * @default false */ accessor hideFeatureMenuHeading: boolean; /** * Indicates whether to hide the feature navigation in the component. This allows the user to scroll through various [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) using pagination arrows. * * @default false */ accessor hideFeatureNavigation: boolean; /** * Indicates whether to hide the component's [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading). * * @default false */ accessor hideHeading: boolean; /** * Indicates whether to hide the spinner in the component. * * @default false */ accessor hideSpinner: boolean; /** * Indicates if the selected feature will be highlighted. * This is done using the [arcgis-map.highlights](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#highlights) or the [arcgis-scene.highlights](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#highlights). * * @default false */ accessor highlightDisabled: boolean; /** * Indicates whether to include the default actions in the component. * In order to disable any default actions, it is necessary to set `includeDefaultActionsDisabled` to `true`. * * @default false */ accessor includeDefaultActionsDisabled: boolean; /** * Indicates whether to initially display a list of features, or the content for one feature. * * @default "feature" */ accessor initialDisplayMode: InitialDisplayOptions; /** The component's default label. */ accessor label: string | undefined; /** * Point used to position the popup. This is automatically set when viewing the * popup by selecting a feature. If using the Popup to display content not related * to features in the map, such as the results from a task, then you must set this * property before [open](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#open) the popup. * * @example * ```js * // Sets the location of the popup to the center of the view * popupComponent.location = viewElement.center; * // Displays the popup * popupComponent.open = true; * ``` * @example * ```js * // Sets the location of the popup to a specific place (using autocast) * // Note: using latitude/longitude only works if view is in Web Mercator or WGS84 spatial reference. * popupComponent.location = {latitude: 34.0571, longitude: -117.1968}; * ``` * @example * ```js * // Sets the location of the popup to the location of a click on the view * reactiveUtils.on(()=>viewElement, "arcgisViewClick", (event)=>{ * popupComponent.location = event.detail.mapPoint; * // Displays the popup * popupComponent.open = true; * }); * ``` * @see [Get started with popups](https://developers.arcgis.com/javascript/latest/sample-code/intro-popup/) */ accessor location: Point | null | undefined; /** Overwrite localized strings for this component */ accessor messageOverrides: { componentLabel?: string | undefined; zoom?: string | undefined; dock?: string | undefined; undock?: string | undefined; collapse?: string | undefined; expand?: string | undefined; }; /** @internal */ protected messages: Partial<{ componentLabel: string; zoom: string; dock: string; undock: string; collapse: string; expand: string; }> & T9nMeta<{ componentLabel: string; zoom: string; dock: string; undock: string; collapse: string; expand: string; }>; /** * Indicates whether the component is visible. This property is `true` when the component is querying for results, even if it is not open. Use this property to check if the component is visible. * * @default false * @see [active](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#active) * @see [clear()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#clear) * @since 5.0 * @example * ```js * // Listen for clicks on the view and open the component at the clicked location with custom content. * viewElement.addEventListener("arcgisViewClick", (event) => { * const { mapPoint } = event.detail; * component.location = mapPoint; * component.heading = "You clicked here"; * component.content = "Latitude: " + mapPoint.latitude.toFixed(3) + ", Longitude: " + mapPoint.longitude.toFixed(3); * component.open = true; * }); * ``` */ accessor open: boolean; /** * An array of pending Promises that have not yet been fulfilled. If there are * no pending promises, the value is `null`. When the pending promises are * resolved they are removed from this array and the features they return * are pushed into the [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) array. * * @deprecated since 5.1. */ accessor promises: Array<Promise<Array<Graphic>>>; /** * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene. * * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component) */ accessor referenceElement: ArcgisReferenceElement | string | undefined; /** * The feature that the component has drilled into. * This feature is either associated with the selected feature in a [relationship](https://developers.arcgis.com/javascript/latest/references/core/popup/content/RelationshipContent/) or [utility network](https://developers.arcgis.com/javascript/latest/references/core/popup/content/UtilityNetworkAssociationsContent/) element. */ get selectedDrillInFeature(): Graphic | null | undefined; /** * The selected feature accessed by the popup. The content of the Popup is * determined based on the [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) assigned to * this feature. */ get selectedFeature(): Graphic | null; /** * Returns a reference to the current [arcgis-feature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-feature/) that the Popup is using. * This is useful if needing to get a reference to the component in order to make any changes to it. */ get selectedFeatureComponent(): ArcgisFeatureNext | null; /** * Index of the feature that is [selectedFeature](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeature). When [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features) are set, * the first index is automatically selected. */ accessor selectedFeatureIndex: number; /** * The current state of the component. * * @default "disabled" */ get state(): State; /** * When true, disables rendering in the top layer (above overlays and modals). * This can be useful for controlling stacking context in complex UI layouts. * * @default false * @since 5.0 */ accessor topLayerDisabled: boolean; /** * Indicates whether to update the [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) when the [selectedFeatureIndex](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeatureIndex) changes. * * @default false * @since 5.0 */ accessor updateLocationEnabled: boolean; /** * The view associated with the component. * > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-popup component will be associated with a map or scene component rather than using the `view` property. */ accessor view: MapViewOrSceneView | null | undefined; /** * Removes all [promises](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#promises), [features](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#features), [content](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#content), * [heading](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#heading) and [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) from the Popup. */ clear(): Promise<void>; /** Permanently destroy the component. */ destroy(): Promise<void>; /** * Use this method to return feature(s) at a given screen location. These features are fetched from all of the [LayerViews](https://developers.arcgis.com/javascript/latest/references/core/views/layers/LayerView/) in the [view](https://developers.arcgis.com/javascript/latest/references/core/views/View/). In order to use this, a layer must already have an associated [PopupTemplate](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/) and have its [popupEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#popupEnabled). This method allows a developer to control how the input location is handled. For example, you may want to fetch features on a `click` event or on a `pointer-move` event. This method automatically sets the [location](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#location) based on the input event's screen coordinates. * * @deprecated since 5.1. Use the `fetchPopupFeatures` method on the [Map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-map/#fetchPopupFeatures), [Scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/#fetchPopupFeatures), or [Link Chart](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-link-chart/#fetchPopupFeatures) component to fetch features based on a screen location. * @param screenPoint * @param options * @deprecated * @see [open](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#open) */ fetchFeatures(screenPoint?: ScreenPoint, options?: FetchFeaturesOptions): Promise<void>; /** * @param event * @internal */ handleViewClick(event: ClickEvent): Promise<PopupOpenOptions>; /** * Selects the feature at the next index in relation to the selected feature. * * @see [selectedFeatureIndex](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeatureIndex) */ next(): Promise<void>; /** * Selects the feature at the previous index in relation to the selected feature. * * @see [selectedFeatureIndex](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#selectedFeatureIndex) */ previous(): Promise<void>; /** Use this method to give focus to the component if the component is able to be focused. */ setFocus(): Promise<void>; /** Emitted when the component's close button is clicked. */ readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>; readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "active" | "collapsed" | "currentAlignment" | "dockEnabled" | "effectiveHeading" | "featureCount" | "featureMenuOpen" | "features" | "promises" | "selectedDrillInFeature" | "selectedFeature" | "selectedFeatureComponent" | "selectedFeatureIndex" | "state" | "open"; }>; /** Emitted when the component associated with a map or scene view is ready to be interacted with. */ readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>; /** * Fires after the user clicks on an action in the Popup component. * This event may be used to define a custom function to execute when particular actions are clicked. * * @see [actions](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#actions) * @see [PopupTemplate.actions](https://developers.arcgis.com/javascript/latest/references/core/PopupTemplate/#actions) * @see [open](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-popup/#open) * @example * ```js * // Fires each time an action is clicked * reactiveUtils.on(()=> component, "arcgisTriggerAction", (event)=>{ * // If the zoom-out action is clicked, execute the following code * if(event.detail.action.id === "zoom-out"){ * // Zoom out two levels (LODs) * viewElement.goTo({ * center: viewElement.center, * zoom: viewElement.zoom - 2 * }); * } * }); * ``` */ readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, ActionEvent>; readonly "@eventTypes": { arcgisClose: ArcgisPopup["arcgisClose"]["detail"]; arcgisPropertyChange: ArcgisPopup["arcgisPropertyChange"]["detail"]; arcgisReady: ArcgisPopup["arcgisReady"]["detail"]; arcgisTriggerAction: ArcgisPopup["arcgisTriggerAction"]["detail"]; }; }