@arcgis/map-components
Version:
ArcGIS Map Components
94 lines (91 loc) • 4.13 kB
TypeScript
/// <reference path="../../index.d.ts" />
import type MapView from "@arcgis/core/views/MapView.js";
import type SceneView from "@arcgis/core/views/SceneView.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ActionBar as ActionBar } from "@esri/calcite-components/components/calcite-action-bar";
import type { Button as Button } from "@esri/calcite-components/components/calcite-button";
/**
* The View Popover component provides view-aware placement and sizing for popovers anchored to actions inside
* a map or scene view. This component is critical to enabling a great user experience with popovers
* when the exact placement and content of the popover is highly variable.
*
* This component was originally added to support arcgis-sketch, which can be placed in all corners
* of the view, in multiple orientations, and with highly configurable settings contents.
*
* Because layer lists and grid controls are included in the settings popover, it is very common for
* the popover to overflow the view. It is equally common for the settings popover to be quite compact.
*
* Provide the popover content through the default slot and assign a [view](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#view),
* [anchorElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#anchorElement), and [actionBarElement](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#actionBarElement)
* to enable automatic positioning within the view.
*
* @since 5.1
* @internal
*/
export abstract class ArcgisViewPopover extends LitElement {
/** The calcite action bar that owns the anchor action; must be set for correct layout. */
accessor actionBarElement: ActionBar | undefined;
get actionBarLayout(): ActionBarLayout;
/** The action element that anchors the popover. */
accessor anchorElement: HTMLElement | undefined;
/**
* Indicates whether the popover includes a close action in the header.
*
* @default true
*/
accessor closable: boolean;
/** The popover heading. */
accessor heading: string | undefined;
/** Accessible label for the popover. */
accessor label: string | undefined;
/**
* Maximum content width, in pixels, applied to the slotted popover content.
*
* @default 400
*/
accessor maxContentWidth: number;
/**
* Minimum content width, in pixels, applied to the slotted popover content.
*
* @default 300
*/
accessor minContentWidth: number;
/**
* Indicates whether the popover is open.
*
* Listen for [@arcgisPropertyChange](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-view-popover/#event-arcgisPropertyChange) to react to user-driven close actions.
*
* @default false
*/
accessor open: boolean;
/**
* Controls whether the popover appears attached to the action itself or to the containing action bar.
*
* @default "bar"
*/
accessor tailAttachmentAppearance: TailAttachmentAppearance;
/** The view that constrains popover placement and sizing. */
accessor view: MapView | SceneView | undefined;
/**
* Minimum inset, in pixels, between the popover and the edges of the view.
* The bottom edge will be relative to the attribution bar, if it is visible.
*
* @default 16
*/
accessor viewEdgeMargin: number;
/**
* Visual scale for the popover; this applies only to the header and close button.
*
* @default "m"
*/
accessor visualScale: Button["scale"];
/** Emitted when the value of a property is changed. Use this to listen to changes to properties. */
readonly arcgisPropertyChange: import("@arcgis/lumina").TargetedEvent<this, { name: "open"; }>;
readonly "@eventTypes": {
arcgisPropertyChange: ArcgisViewPopover["arcgisPropertyChange"]["detail"];
};
}
/** @internal */
export type ActionBarLayout = "horizontal" | "vertical";
/** @internal */
export type TailAttachmentAppearance = "action" | "bar";