@geoscene/map-components 4.34.9 → 5.0.20

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

@@ -1,15 +1,21 @@
-/// <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;
+import type FeaturesViewModel from "@geoscene/core/widgets/Features/FeaturesViewModel.js";
+import type ActionButton from "@geoscene/core/support/actions/ActionButton.js";
+import type ActionToggle from "@geoscene/core/support/actions/ActionToggle.js";
+import type Graphic from "@geoscene/core/Graphic.js";
+import type Collection from "@geoscene/core/core/Collection.js";
+import type Widget from "@geoscene/core/widgets/Widget.js";
+import type Point from "@geoscene/core/geometry/Point.js";
+import type { GeosceneReferenceElement, HeadingLevel } from "../types.js";
+import type { Alignment, DockOptions, PopupPositionResult, FetchFeaturesOptions } from "./types.js";
+import type { PublicLitElement as LitElement } from "@geoscene/lumina";
+import type { GeosceneFeature } from "../geoscene-feature/customElement.js";
+import type { ActionEvent, PopupOpenOptions, PopupAction, InitialDisplayOptions, State } from "@geoscene/core/widgets/Popup/types.js";
+import type { ScreenPoint } from "@geoscene/core/core/types.js";
+import type { ClickEvent } from "@geoscene/core/views/input/types.js";
+import type { T9nMeta } from "@geoscene/lumina/controllers";
+import type { GoToOverride } from "@geoscene/core/widgets/support/types.js";
+import type { MapViewOrSceneView } from "@geoscene/core/views/MapViewOrSceneView.js";
 
 /**
  * ## Overview
@@ -17,21 +23,24 @@ declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewMo
  * 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.
+ * The popup component can be added to the [geoscene-map](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/) assigned to the selected feature.
  *
  * ```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`.
+ *
+ * The Popup component can also be opened manually at a specific location using the [open](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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 [geoscene-map](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-link-chart/) using the `popup` slot.
+ * Before setting the `open` property to `true`, you must set the [location](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#location) property to specify where the popup should open or call the [fetchFeatures()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#fetchFeatures) method to open the popup template for features at a specific screen location.
+ *
+ * Example of opening the popup at a clicked location with custom content:
  *
  * ```html
- * <!-- Set popup-disabled attribute -->
+ * <!-- Set popup-disabled and popup-component-enabled attributes -->
  * <geoscene-map id="06ca49d0ddb447e7817cfc343ca30df9" popup-disabled>
  *   <!-- Add the popup component to the popup slot. -->
  *   <geoscene-popup slot="popup"></geoscene-popup>
@@ -42,637 +51,593 @@ declare const useFeaturesViewModel: (component: LitElement & Pick<FeaturesViewMo
  * // 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)
- *   });
+ *   popupComponent.clear();
+ *   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 [fetchFeatures()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#fetchFeatures) method within the view element's click event listener to open the popup with features at the clicked location.
+ * ```html
+ * <!-- Set popup-disabled and popup-component-enabled attributes -->
+ * <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 populate the popup with features at that location.
+ * viewElement.addEventListener("geosceneViewClick", async (event) => {
+ *   await popupComponent.fetchFeatures(event.detail);
+ * });
+ * // 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 [geoscene-map.popupComponentEnabled](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/#popupComponentEnabled), [geoscene-scene.popupComponentEnabled](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/#popupComponentEnabled), or [geoscene-link-chart.popupComponentEnabled](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-link-chart/#popupComponentEnabled) to open the popup component automatically when clicking on features.
+ *
+ * ```html
+ * <geoscene-map id="06ca49d0ddb447e7817cfc343ca30df9" popup-component-enabled></geoscene-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 [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.
+ * The [geoscene-map](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-link-chart/) components contain a default popup.
+ * This popup can display generic content, which is set in its [heading](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#heading)
+ * and [content](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/4.33/assets/img/apiref/widgets/popup/popup-basic.png)
+ * ![popup-basic-example](https://doc.geoscene.cn/javascript/5.0/assets/references/core/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).
+ * In the image above, the text "Marriage in Nassau County Census Tract 5177.01" is the popup's [heading](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#heading).
+ * The remaining text is the popup's [content](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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](#dockOptions) property.
+ * The options for docking may be set in the [dockOptions](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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](#actions) which execute a function defined by the developer when clicked.
+ * Popups can also contain [actions](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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](#actions) property for information about adding custom actions to a popup.
+ * See the [actions](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#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
+ * The Popup component is tied to an [geoscene-map](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/5.0/references/map-components/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/5.0/references/map-components/components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-link-chart/), the [geoscene-features](https://doc.geoscene.cn/javascript/5.0/references/map-components/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
+ * [PopupTemplates](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/) are closely related to Popup, but are more specific to [layers](https://doc.geoscene.cn/javascript/5.0/references/core/layers/Layer/)
+ * and [graphics](https://doc.geoscene.cn/javascript/5.0/references/core/Graphic/). Popup templates allow you to define custom titles and content templates based on the source of the
+ * [selectedFeature](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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 [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.
+ * The content may contain field values from the attributes of the [selectedFeature](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#selectedFeature).
  *
- * [Read more...](https://doc.geoscene.cn/javascript/4.33/references/map-components/geoscene-popup/)
+ * Custom PopupTemplates may also be assigned directly to a popup by setting [graphics](https://doc.geoscene.cn/javascript/5.0/references/core/Graphic/) on the
+ * [features](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#features) property.
  *
  * @since 4.34
  * @beta
- * @see [PopupTemplate](https://doc.geoscene.cn/javascript/4.33/api-reference/geoscene-PopupTemplate.html)
+ * @see [PopupTemplate](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/)
  */
-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 {};
+export abstract class GeoscenePopup extends LitElement {
+  /**
+   * A [collection](https://doc.geoscene.cn/javascript/5.0/references/core/core/Collection/) of [action button](https://doc.geoscene.cn/javascript/5.0/references/core/support/actions/ActionButton/) or [action toggle](https://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#includeDefaultActionsDisabled) to `true`, or by setting the [`overwriteActions`](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/#overwriteActions) property to `true` in a [PopupTemplate](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/).
+   *
+   * The order of each action is the order in which they appear in the actions [Collection](https://doc.geoscene.cn/javascript/5.0/references/core/core/Collection/). The [@geosceneTriggerAction](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#event-geosceneTriggerAction) event fires each time an action is clicked.
+   *
+   * @see [@geosceneTriggerAction](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#event-geosceneTriggerAction)
+   * @see [Popup actions sample](https://doc.geoscene.cn/javascript/5.0/sample-code/popup-actions/)
+   */
+  accessor actions: Collection<PopupAction>;
+  /**
+   * Indicates if the component is active when it is visible and is not [waiting](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/Popup/PopupViewModel/#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://doc.geoscene.cn/javascript/5.0/references/core/views/View/) camera or [Viewpoint](https://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/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 | Widget<any> | null | undefined;
+  /** Dock position in the [geoscene-map](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/), [geoscene-scene](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-scene/), or [geoscene-link-chart](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/references/core/popup/support/FieldInfoFormat/#dateFormat) rather than `long-month-day-year` in default [popup](https://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#selectedFeature) or the [location](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#location)
+   * assigned to it. Rather it is attached to a side, the top, or the bottom of the view.
+   *
+   * See [dockOptions](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#dockOptions) to override default options related to docking the popup.
+   *
+   * @default false
+   * @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;
+   * ```
+   */
+  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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#selectedFeature) or the [location](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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 number of [features](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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 | null | undefined;
+  /**
+   * An array of features associated with the component. Each graphic in this array must have a valid [PopupTemplate](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/) set. They may share the same [PopupTemplate](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/) or have unique [PopupTemplates](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/) depending on their attributes. The [content](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#content) and [heading](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#heading) of the component is set based on the `content` and `title` properties of each graphic's respective [PopupTemplate](https://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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>;
+  /**
+   * This function provides the ability to override either the [geoscene-map.goTo()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/#goTo) or [geoscene-scene.goTo()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#selectedFeature)
+   * has a [PopupTemplate](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/), then the title set in the
+   * corresponding template is used here.
+   *
+   * @see [headingLevel](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#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.heading = "Population by zip codes in Southern California";
+   * ```
+   */
+  accessor heading: string | null | undefined;
+  /**
+   * Indicates the heading level to use for the [heading](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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/en-US/docs/Web/HTML/Element/Heading_Elements)
+   * @see [heading](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#heading)
+   * @example
+   * ```html
+   * <!-- Render the popup heading as a level 3 heading -->
+   * <geoscene-popup heading="Popup title" heading-level="3"></geoscene-popup>
+   * ```
+   */
+  accessor headingLevel: HeadingLevel;
+  /**
+   * Indicates whether to hide the action bar that holds the feature's [actions](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#features) using pagination arrows.
+   *
+   * @default false
+   */
+  accessor hideFeatureNavigation: boolean;
+  /**
+   * Indicates whether to hide the heading in the component.
+   *
+   * @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 [geoscene-map.highlights](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-map/#highlights) or the [geoscene-scene.highlights](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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 or when calling the [fetchFeatures()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#fetchFeatures) method. 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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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, "geosceneViewClick", (event)=>{
+   *   popupComponent.location = event.detail.mapPoint;
+   *   // Displays the popup
+   *   popupComponent.open = true;
+   * });
+   * ```
+   * @see [Get started with popups](https://doc.geoscene.cn/javascript/5.0/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;
+  };
+  /** @internal */
+  protected messages: Partial<{
+      componentLabel: string;
+      zoom: string;
+      dock: string;
+      undock: string;
+  }> & T9nMeta<{
+      componentLabel: string;
+      zoom: string;
+      dock: string;
+      undock: 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.
+   *
+   * When setting the [content](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#content) and [heading](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#heading) directly, it is recommended to call [clear()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#clear) before setting `open` to `true` to remove any existing promises, features, heading, location, and content from the component. Otherwise, the old content will display.
+   *
+   * @default false
+   * @see [fetchFeatures()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#fetchFeatures)
+   * @see [active](https://doc.geoscene.cn/javascript/5.0/references/core/widgets/Features/FeaturesViewModel/#active)
+   * @see [clear()](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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("geosceneViewClick", (event) => {
+   *   const { mapPoint } = event.detail;
+   *   component.clear();
+   *   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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#features) array.
+   */
+  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://doc.geoscene.cn/javascript/5.0/programming-patterns/#associate-components-with-a-map-or-scene-component)
+   */
+  accessor referenceElement: GeosceneReferenceElement | string | undefined;
+  /**
+   * 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/5.0/references/core/popup/content/RelationshipContent/) or [utility network](https://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/) assigned to
+   * this feature.
+   */
+  get selectedFeature(): Graphic | null;
+  /**
+   * Returns a reference to the current [geoscene-feature](https://doc.geoscene.cn/javascript/5.0/references/map-components/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(): GeosceneFeature | null;
+  /**
+   * Index of the feature that is [selectedFeature](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#selectedFeature). When [features](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#location) when the [selectedFeatureIndex](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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 geoscene-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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#promises), [features](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#features), [content](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#content),
+   * [heading](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#heading) and [location](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-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://doc.geoscene.cn/javascript/5.0/references/core/views/layers/LayerView/) in the [view](https://doc.geoscene.cn/javascript/5.0/references/core/views/View/). In order to use this, a layer must already have an associated [PopupTemplate](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/) and have its [popupEnabled](https://doc.geoscene.cn/javascript/5.0/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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#location) based on the input event's screen coordinates.
+   *
+   * @param screenPoint
+   * @param options
+   * @see [open](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#open)
+   * @example
+   * ```js
+   * const viewElement = document.querySelector("geoscene-map");
+   * // Get viewElement's click event
+   * reactiveUtils.on(()=>viewElement, "geosceneViewClick", async (event)=>{
+   *   // Call fetchFeatures on the component and pass in the click event detail
+   *   await component.fetchFeatures(event.detail);
+   * });
+   * // Watch for changes to the features property and open the component when features are available.
+   * reactiveUtils.watch(
+   *   () => component.features,
+   *   () => {
+   *     component.open = component.features ? true : false;
+   *   },
+   * );
+   * ```
+   */
+  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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#selectedFeatureIndex)
+   */
+  next(): Promise<FeaturesViewModel>;
+  /**
+   * Selects the feature at the previous index in relation to the selected feature.
+   *
+   * @see [selectedFeatureIndex](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#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](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#event-geosceneTriggerAction) event and executes the [actions](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#actions)
+   * at the specified index in the [actions](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#actions) array.
+   *
+   * @param action
+   */
+  triggerAction(action: ActionButton | ActionToggle): Promise<void>;
+  /** Emitted when the component's close button is clicked. */
+  readonly geosceneClose: import("@geoscene/lumina").TargetedEvent<this, void>;
+  readonly geoscenePropertyChange: import("@geoscene/lumina").TargetedEvent<this, { name: "active" | "collapsed" | "currentAlignment" | "dockEnabled" | "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 geosceneReady: import("@geoscene/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://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#actions)
+   * @see [PopupTemplate.actions](https://doc.geoscene.cn/javascript/5.0/references/core/PopupTemplate/#actions)
+   * @see [open](https://doc.geoscene.cn/javascript/5.0/references/map-components/components/geoscene-popup/#open)
+   * @example
+   * ```js
+   * // Fires each time an action is clicked
+   * reactiveUtils.on(()=> component, "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: import("@geoscene/lumina").TargetedEvent<this, ActionEvent>;
+  readonly "@eventTypes": {
+    geosceneClose: GeoscenePopup["geosceneClose"]["detail"];
+    geoscenePropertyChange: GeoscenePopup["geoscenePropertyChange"]["detail"];
+    geosceneReady: GeoscenePopup["geosceneReady"]["detail"];
+    geosceneTriggerAction: GeoscenePopup["geosceneTriggerAction"]["detail"];
+  };
+}