@geoscene/map-components 4.33.19 → 4.34.9

package/dist/components/geoscene-popup/customElement.d.ts

@@ -0,0 +1,678 @@
+/// <reference types="@geoscene/core/interfaces.d.ts" />
+/// <reference path="../../index.d.ts" />
+import { default as FeaturesViewModel } from '@geoscene/core/widgets/Features/FeaturesViewModel.js';
+import { GeosceneReferenceElement } from '../../utils/component-utils';
+import { HeadingLevel } from '../../support/heading';
+import { Use } from '@geoscene/lumina/controllers';
+import { Alignment, DockOptions, PopupPositionResult, PopupPositionStyle, FetchFeaturesOptions } from './interfaces';
+import { JsxNode, PublicLitElement as LitElement, TargetedEvent } from '@geoscene/lumina';
+import { nil } from '@arcgis/toolkit/type';
+import { GeosceneFeature } from '../geoscene-feature/customElement.js';
+import { default as ActionButton } from '@geoscene/core/support/actions/ActionButton.js';
+declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewModel, never> & import('../../controllers/useViewModel').ViewModelControllerUses<FeaturesViewModel>) => FeaturesViewModel;
+
+/**
+ * ## 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 [geoscene-map](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/), and [geoscene-link-chart](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-link-chart/) components currently use the [Popup widget](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Popup.html) by default.
+ * To use the Popup component, add it to the [geoscene-map.popup](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/#popup), [geoscene-scene.popup](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/#popup), or [geoscene-link-chart.popup](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-link-chart/#popup) component using the `popup` slot.
+ * The Popup component will be opened automatically to display the selected feature's popup template when features in the Map, Scene, or Link Chart are clicked.
+ *
+ * ```html
+ * <geoscene-map id="06ca49d0ddb447e7817cfc343ca30df9">
+ *   <!-- Add the popup component to the popup slot. -->
+ *   <geoscene-popup slot="popup"></geoscene-popup>
+ * </geoscene-map>
+ * ```
+ * The Popup component can also be opened manually at a specific location with custom content specified in the method parameters using the `open()` method.
+ * To prevent the popup from opening automatically when clicking on features within view components, set the `popup-disabled` attribute to `true`.
+ *
+ * ```html
+ * <!-- Set popup-disabled attribute -->
+ * <geoscene-map id="06ca49d0ddb447e7817cfc343ca30df9" popup-disabled>
+ *   <!-- Add the popup component to the popup slot. -->
+ *   <geoscene-popup slot="popup"></geoscene-popup>
+ * </geoscene-map>
+ * <script>
+ * const viewElement = document.querySelector("geoscene-map");
+ * const popupComponent = document.querySelector("geoscene-popup");
+ * // Listen for clicks on the view and open the popup at the clicked location with custom content.
+ * viewElement.addEventListener("geosceneViewClick", (event) => {
+ *   const { mapPoint } = event.detail;
+ *   popupComponent.open({
+ *     location: mapPoint,
+ *     heading: "You clicked here",
+ *     content: "Latitude: " + mapPoint.latitude.toFixed(3) + ", Longitude: " + mapPoint.longitude.toFixed(3)
+ *   });
+ * });
+ * </script>
+ * ```
+ *
+ * ## Popup UI
+ * The [geoscene-map](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-link-chart/) components contain a default popup.
+ * This popup can display generic content, which is set in its [heading](#heading)
+ * and [content](#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://doc.geoscene.cn/javascript/4.33/assets/img/apiref/widgets/popup/popup-basic.png)
+ *
+ * In the image above, the text "Marriage in Nassau County Census Tract 5177.01" is the popup's [heading](#heading).
+ * The remaining text is the popup's [content](#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](#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](#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](#actions) property for information about adding custom actions to a popup.
+ *
+ * The Popup component is tied to a [geoscene-map](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-link-chart/) component, whether it's docked or anchored to the selected feature.
+ * If wanting to utilize the Popup functionality outside of [geoscene-map](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-link-chart/), the [geoscene-features](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-features/) component can be used to display the same content
+ * in its own container.
+ *
+ * ## Popup and PopupTemplate
+ * [PopupTemplates](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) are closely related to Popup, but are more specific to [layers](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-Layer.html)
+ * and [graphics](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-Graphic.html). Popup templates allow you to define custom titles and content templates based on the source of the
+ * [selected feature](#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 [selected feature](#selectedFeature).
+ *
+ * Custom PopupTemplates may also be assigned directly to a popup by setting [graphics](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-Graphic.html) on the
+ * [features](#features) property.
+ *
+ * [Read more...](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-popup/)
+ *
+ * @since 4.34
+ * @beta
+ * @see [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html)
+ */
+export declare class GeoscenePopup extends LitElement {
+    /**
+     * A [collection](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-core-Collection.html) of [action button](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-support-actions-ActionButton.html) or [action toggle](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-support-actions-ActionToggle.html) objects.
+     * Each action may be executed by clicking the icon or image symbolizing them.
+     *
+     * By default, popups have a `Zoom To` action styled with a magnifying glass icon.
+     * When this icon is clicked, the view zooms in four LODs and centers on the selected feature.
+     * You may remove this default action by setting [includeDefaultActionsDisabled](#includeDefaultActionsDisabled) to `true`, or by setting the
+     * [`overwriteActions`](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html#overwriteActions) property to `true` in a [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html).
+     *
+     * The order of each action is the order in which they appear in the actions [Collection](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-core-Collection.html).
+     *
+     * The [geosceneTriggerAction](#geosceneTriggerAction) event fires each time an action is clicked.
+     *
+     * @autocast { "value": "Object[]", "typedCollection": true, "byTypeProperty": true }
+     * @see [geosceneTriggerAction](#geosceneTriggerAction)
+     * @example
+     * ```js
+     * // Defines an action button to zoom out from the selected feature
+     * const zoomOutAction = {
+     *   type: "button",
+     *   // This text is displayed as a tooltip
+     *   title: "Zoom out",
+     *   // The ID by which to reference the action in the event handler
+     *   id: "zoom-out",
+     *   // Sets the icon used to style the action button
+     *   icon: "magnifying-glass-minus"
+     * };
+     * // Adds the custom action to the popup.
+     * popupComponent.actions.push(zoomOutAction);
+     * ```
+     */
+    actions: __geoscene.Collection<ActionButton | __geoscene.ActionToggle>;
+    /**
+     * Indicates if the component is active when it is visible and is not [waiting](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-widgets-Popup-PopupViewModel.html#waitingForResult).
+     *
+     * @default false
+     */
+    readonly 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`.
+     *
+     * @example
+     * ```js
+     * // Popup will display on the bottom-right of the selected feature regardless of where that feature is located
+     * popupComponent.alignment = "bottom-right";
+     * ```
+     * @default "auto"
+     */
+    alignment: Alignment;
+    /**
+     * This closes the popup when the [View](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-views-View.html) camera or [Viewpoint](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-Viewpoint.html) changes.
+     *
+     * @default false
+     */
+    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://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-popup/#destroy) method when you are done to
+     * prevent memory leaks.
+     *
+     * @default false
+     */
+    autoDestroyDisabled: boolean;
+    /**
+     * Indicates whether the popup displays its content. If `true`, only the header displays.
+     *
+     * @default false
+     */
+    readonly collapsed: boolean;
+    /**
+     * The content of the popup. When set directly on the Popup, 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://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html#content).
+     *
+     * @noautocast
+     * @example
+     * ```js
+     * // This sets generic instructions in the popup that will always be displayed
+     * // unless it is overridden by a PopupTemplate
+     * popupComponent.content = "Click a feature on the map to view its attributes";
+     * ```
+     */
+    content: string | HTMLElement | nullish | __geoscene.Widget;
+    /** Dock position in the [geoscene-map](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-link-chart/) component. */
+    get currentDockPosition(): nil | 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. (Supported for
+     * [FeatureLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-FeatureLayer.html),
+     * [GeoJSONLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-GeoJSONLayer.html),
+     * [OGCFeatureLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-OGCFeatureLayer.html),
+     * [SceneLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-SceneLayer.html),
+     * [CSVLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-CSVLayer.html),
+     * [PointCloudLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-PointCloudLayer.html),
+     * [StreamLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-StreamLayer.html),
+     * [ImageryLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-ImageryLayer.html), and
+     * [VoxelLayer](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-VoxelLayer.html)).
+     *
+     * **Note:**
+     * * Starting with version 4.12, [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) content can no longer be set using a
+     * wildcard, e.g. `*`. Instead, set the `defaultPopupTemplateEnabled` property to `true`.
+     * * Starting with 4.16, the default popup has been improved to no longer display system
+     * [fields](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-popup-FieldInfo.html)
+     * that do not hold significant value, e.g. `Shape__Area` and `Shape__Length` are two fields that
+     * no longer display.
+     * * Starting with version 4.28, `date` fields are formatted using the `short-date-short-time` preset [dateFormat](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-popup-support-FieldInfoFormat.html#dateFormat)
+     * rather than `long-month-day-year` in default [popup](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) 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
+     */
+    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 [selected feature](#selectedFeature) or the [location](#location)
+     * assigned to it. Rather it is attached to a side, the top, or the bottom of the view.
+     *
+     * See [dockOptions](#dockOptions) to override default options related to docking the popup.
+     *
+     * @example
+     * ```html
+     * <!-- Setting this property in HTML -->
+     * <geoscene-popup dock-enabled></geoscene-popup>
+     * ```
+     * @example
+     * ```js
+     * // Setting this property using JS.
+     * // The popup will automatically be dockEnabled when made visible
+     * popupComponent.dockEnabled = true;
+     * ```
+     * @default false
+     */
+    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 [selected feature](#selectedFeature) or the [location](#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
+     *   }
+     * };
+     * ```
+     */
+    get dockOptions(): DockOptions;
+    set dockOptions(dockOptions: DockOptions);
+    /**
+     * The number of selected [features](#features) available to the popup.
+     *
+     * @default 0
+     */
+    readonly featureCount: number;
+    /**
+     * This property enables showing a list of features.
+     * Setting this to `true` allows the user to scroll through the list of features.
+     * This value will only be honored if [`initialDisplayMode`](#initialDisplayMode) is set to "feature".
+     *
+     * @default false
+     */
+    featureMenuOpen: boolean;
+    /**
+     * An array of features associated with the popup. Each graphic in this array must
+     * have a valid [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) set. They may share the same
+     * [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) or have unique
+     * [PopupTemplates](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) depending on their attributes.
+     * The [content](#content) and [title](#title)
+     * of the popup is set based on the `content` and `title` properties of each graphic's respective
+     * [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html).
+     *
+     * When more than one graphic exists in this array, the current content of the
+     * Popup is set based on the value of the [selected feature](#selectedFeature).
+     *
+     * This value is `null` if no features are associated with the popup.
+     *
+     * @noautocast
+     * @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 popup 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];
+     * popupComponent.features = graphics;
+     * ```
+     */
+    features: __geoscene.Graphic[];
+    /**
+     * This function provides the ability to override either the [geoscene-map.goTo](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/#goTo) or [geoscene-scene.goTo](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/#goTo) methods.
+     *
+     * @example
+     * ```js
+     * popupComponent.goToOverride = (viewElement, goToParams)=>  {
+     *   goToParams.options = {
+     *     speedFactor: 2
+     *   };
+     *   return viewElement.goTo(goToParams.target, goToParams.options);
+     * };
+     * ```
+     */
+    goToOverride: nullish | __geoscene.GoToOverride;
+    /**
+     * The title of the popup. This can be set generically on the popup no
+     * matter the features that are selected. If the [selected feature](#selectedFeature)
+     * has a [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html), then the title set in the
+     * corresponding template is used here.
+     *
+     * @see [headingLevel](#headingLevel)
+     * @example
+     * ```html
+     * <!-- This title will display in the popup unless a selected feature's
+     *     PopupTemplate overrides it -->
+     * <geoscene-popup heading="Population by zip codes in Southern California"></geoscene-popup>
+     * ```
+     * @example
+     * ```js
+     * // This title will display in the popup unless a selected feature's
+     * // PopupTemplate overrides it
+     * popupComponent.title = "Population by zip codes in Southern California";
+     * ```
+     */
+    heading: string | nullish;
+    /**
+     * Indicates the heading level to use for the [heading](#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.
+     *
+     * @see [Heading Elements](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements)
+     * @see [heading](#heading)
+     * @example
+     * ```html
+     * <!-- Render the popup heading as a level 3 heading -->
+     * <geoscene-popup heading="Popup title" heading-level="3"></geoscene-popup>
+     * ```
+     * @default 2
+     */
+    headingLevel: HeadingLevel;
+    /**
+     * Indicates whether to hide the action bar that holds the feature's [actions](#actions).
+     *
+     * @default false
+     */
+    hideActionBar: boolean;
+    /**
+     * Indicates whether to hide the close button in the component.
+     *
+     * @default false
+     */
+    hideCloseButton: boolean;
+    /**
+     * Indicates whether to hide the collapse button in the component.
+     *
+     * @default false
+     */
+    hideCollapseButton: boolean;
+    /**
+     * Indicates whether to hide a heading and description on the component feature menu list.
+     *
+     * @default false
+     */
+    hideFeatureMenuHeading: boolean;
+    /**
+     * Indicates whether pagination for feature navigation will be displayed. This allows the user to scroll through various [selected features](#features) using pagination arrows.
+     *
+     * @default false
+     */
+    hideFeatureNavigation: boolean;
+    /**
+     * Indicates whether to hide the group heading for a list of multiple features in the feature menu.
+     *
+     * @default false
+     */
+    hideFeatureListLayerTitle: boolean;
+    /**
+     * Indicates whether to hide the heading in the component.
+     *
+     * @default false
+     */
+    hideHeading: boolean;
+    /**
+     * Indicates whether to hide the spinner in the component.
+     *
+     * @default false
+     */
+    hideSpinner: boolean;
+    /**
+     * Indicates if the selected feature will be highlighted.
+     * This is done using the [geoscene-map.highlights](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/#highlights) or the [geoscene-scene.highlights](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/#highlights).
+     *
+     * @default false
+     */
+    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
+     */
+    includeDefaultActionsDisabled: boolean;
+    /**
+     * Indicates whether to initially display a list of features, or the content for one feature.
+     *
+     * @default "feature"
+     */
+    initialDisplayMode: "list" | "feature";
+    /** The component's default label. */
+    label?: string;
+    /**
+     * 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 making the popup [visible](#visible) to the user.
+     *
+     * @autocast { "byTypeProperty": false }
+     * @example
+     * ```js
+     * // Sets the location of the popup to the center of the view
+     * popupComponent.location = viewELement.center;
+     * // Displays the popup
+     * popupComponent.visible = 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, "geosceneViewClick", (event)=>{
+     *   popupComponent.location = event.detail.mapPoint;
+     *   // Displays the popup
+     *   popupComponent.visible = true;
+     * });
+     * ```
+     */
+    location: nullish | __geoscene.Point;
+    /** Overwrite localized strings for this component */
+    messageOverrides?: typeof this.messages._overrides;
+    /**
+     * 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](#features) array.
+     */
+    promises: Promise<__geoscene.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://doc.geoscene.cn/javascript/4.33/programming-patterns/#associate-components-with-a-map-or-scene-component)
+     */
+    referenceElement?: GeosceneReferenceElement | string;
+    /**
+     * The feature that the component has drilled into.
+     * This feature is either associated with the selected feature in a [relationship](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-popup-content-RelationshipContent.html) or [utility network](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-popup-content-UtilityNetworkAssociationsContent.html) element.
+     */
+    get selectedDrillInFeature(): __geoscene.Graphic | nil;
+    /**
+     * The selected feature accessed by the popup. The content of the Popup is
+     * determined based on the [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) assigned to
+     * this feature.
+     */
+    readonly selectedFeature: nullish | __geoscene.Graphic;
+    /**
+     * Returns a reference to the current [geoscene-feature](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-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(): HTMLGeosceneFeatureElement | null;
+    /**
+     * Index of the feature that is [selected](#selectedFeature). When [features](#features) are set,
+     * the first index is automatically selected.
+     */
+    selectedFeatureIndex: number;
+    /**
+     * The current state of the component.
+     *
+     * @default "disabled"
+     */
+    readonly state: "ready" | "disabled";
+    /**
+     * 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 Popup component will be associated with a map or scene component rather than using the `view` property.
+     */
+    view?: __geoscene.MapView | __geoscene.SceneView | nullish;
+    /**
+     * Indicates whether the popup is visible. This property is `true` when the popup is querying for results, even if it is not open.
+     * Use the property to check if the popup is visible.
+     *
+     * @name visible
+     * @type {boolean}
+     * @default false
+     */
+    visible: boolean;
+    /** @internal */
+    handleViewClick(event: __geoscene.ViewClickEvent): Promise<__geoscene.FeaturesViewModelOpenOptions>;
+    /**
+     * Removes all [promises](#promises), [features](#features), [content](#content),
+     * [heading](#heading) and [location](#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://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-views-layers-LayerView.html)
+     * in the [view](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-views-View.html). In order to use this, a layer must already have an
+     * associated [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) and have its [popupEnabled](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-layers-FeatureLayer.html#popupEnabled).
+     *
+     * @example
+     * ```js
+     * // Example showing how to use fetchFeatures in an application
+     * // with the popup and feature components.
+     * const popupComponent = document.querySelector("geoscene-popup");
+     * const viewElement = document.querySelector("geoscene-map");
+     * const featureComponent = document.querySelector("geoscene-feature");
+     * // Get viewElement's click event
+     * reactiveUtils.on(()=>viewElement, "geosceneViewClick", (event)=>{
+     *   const { screenPoint } = event.detail;
+     *   // Call fetchFeatures on the popup and pass in the click event screenPoint
+     *   popupComponent.fetchFeatures(screenPoint).then((response) => {
+     *     // Access the response from fetchFeatures
+     *     response.allGraphicsPromise.then((graphics) => {
+     *       // Set the feature component's graphic to the returned graphic from fetchFeatures
+     *       featureComponent.graphic = graphics[0];
+     *     });
+     *   });
+     * });
+     * ```
+     */
+    fetchFeatures(screenPoint: __geoscene.ScreenPoint, options?: FetchFeaturesOptions): Promise<__geoscene.FetchPopupFeaturesResult>;
+    /**
+     * Selects the feature at the next index in relation to the selected feature.
+     *
+     * @see [selectedFeatureIndex](#selectedFeatureIndex)
+     */
+    next(): Promise<FeaturesViewModel>;
+    /**
+     * Opens the popup at the given location with content defined either explicitly with `content`
+     * or driven from the [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html) of input features. This method sets
+     * the popup's [visible](#visible) property to `true`. Users can alternatively open the popup
+     * by directly setting the [visible](#visible) property to `true`.
+     *
+     * ***Note:***
+     * The popup will only display if the [geoscene-map](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-map/) or [geoscene-scene](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-scene/) size constraints in [dockOptions](#dockOptions) are met or the [location](#location)
+     * property is set to a geometry.
+     *
+     * @see [visible](#visible)
+     * @example
+     * ```js
+     * reactiveUtils.on(()=>viewElement, "geosceneViewClick", (event)=>{
+     *  const { mapPoint } = event.detail;
+     *   popupComponent.open({
+     *    location: mapPoint,  // location of the click on the view
+     *    title: "You clicked here",  // title displayed in the popup
+     *    content: "This is a point of interest"  // content displayed in the popup
+     *   });
+     * });
+     * ```
+     * @example
+     * ```js
+     * reactiveUtils.on(()=>viewElement, "geosceneViewClick", (event)=>{
+     *    const { mapPoint } = event.detail;
+     *    popupComponent.open({
+     *      location: mapPoint,  // location of the click on the view
+     *      fetchFeatures: true // display the content for the selected feature if a popupTemplate is defined.
+     *    });
+     *  });
+     * ```
+     * @example
+     * ```js
+     * popupComponent.open({
+     *   title: "You clicked here",  // title displayed in the popup
+     *   content: "This is a point of interest",  // content displayed in the popup
+     *   location: event.detail.mapPoint,
+     *   updateLocationEnabled: true  // updates the location of popup based on
+     *   // selected feature's geometry
+     * });
+     * ```
+     * @example
+     * ```js
+     * popupComponent.open({
+     *   features: graphics,  // array of graphics
+     *   featureMenuOpen: true, // selected features initially display in a list
+     *   location: graphics[0].geometry // location of the first graphic in the array of graphics
+     * });
+     * ```
+     */
+    open(options?: __geoscene.FeaturesViewModelOpenOptions): Promise<void>;
+    /**
+     * Selects the feature at the previous index in relation to the selected feature.
+     *
+     * @see [selectedFeatureIndex](#selectedFeatureIndex)
+     */
+    previous(): Promise<FeaturesViewModel>;
+    /** Use this method to give focus to the component if the component is able to be focused. */
+    setFocus(): Promise<void>;
+    /**
+     * Triggers the [geosceneTriggerAction](#geosceneTriggerAction) event and executes the [action](#actions)
+     * at the specified index in the [actions](#actions) array.
+     */
+    triggerAction(action: __geoscene.ActionButton | __geoscene.ActionToggle): Promise<void>;
+    readonly geoscenePropertyChange: TargetedEvent<this, {
+        name: "state" | "active" | "collapsed" | "featureCount" | "visible" | "selectedFeature" | "featureMenuOpen" | "features" | "promises" | "selectedFeatureIndex" | "selectedDrillInFeature" | "selectedFeatureComponent" | "currentAlignment" | "dockEnabled";
+    }>;
+    /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
+    readonly geosceneReady: TargetedEvent<this, void>;
+    /** Emitted when the component's close button is clicked. */
+    readonly geosceneClose: 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](#actions)
+     * @see [PopupTemplate.actions](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html#actions)
+     * @see [open()](#open)
+     * @example
+     * ```js
+     * viewElement.addEventListener("geosceneViewClick", (event) => {
+     *   const { mapPoint } = event.detail;
+     *   popupComponent.open({
+     *     location: mapPoint,
+     *     fetchFeatures: true,
+     *     actions: [{
+     *       // This text is displayed as a tooltip
+     *       title: "Zoom out",
+     *       // The ID used to reference this action in the event handler
+     *       id: "zoom-out",
+     *       // Sets the icon font used to style the action button
+     *       icon: "magnifying-glass-minus"
+     *     },
+     *     {
+     *       title: "Delete Feature",
+     *       id: "delete-feature-action",
+     *       icon: "trash"
+     *     }]
+     *   });
+     * });
+     *
+     * // Fires each time an action is clicked
+     * reactiveUtils.on(()=> popupComponent, "geosceneTriggerAction", (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 geosceneTriggerAction: TargetedEvent<this, __geoscene.PopupTriggerActionEvent>;
+    private messages;
+}
+export {};