@arcgis/core
Version:
ArcGIS Maps SDK for JavaScript: A complete 2D and 3D mapping and data visualization API
212 lines (208 loc) • 8.99 kB
TypeScript
import type Widget from "../Widget.js";
import type ListItem from "./ListItem.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { IdentifiableMixin, IdentifiableMixinProperties } from "../../core/Identifiable.js";
import type { WidgetProperties } from "../Widget.js";
export interface ListItemPanelProperties extends WidgetProperties, IdentifiableMixinProperties, Partial<Pick<ListItemPanel, "content" | "disabled" | "flowEnabled" | "image" | "listItem" | "open" | "title">> {
/**
* Icon which represents the panel.
*
* @since 4.27
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
*/
icon?: Icon["icon"] | null;
/**
* Indicates whether the ListItemPanel is visible.
*
* If `false`, the list item panel will not be rendered in the HTML document.
*
* @default true
* @example
* const layerList = new LayerList({
* listItemCreatedFunction: async (event) => {
* const { item } = event;
* const { layer } = item;
*
* item.panel = {
* content: "legend",
* open: true
* };
*
* // hide the panel for a specific layer
* if (layer.title.includes("Confidential")) {
* item.panel.visible = false;
* }
* },
* view
* });
* @example
* // Hides the widget in the view
* widget.visible = false;
*/
visible?: boolean;
}
/**
* The content displayed in the ListItem panel. This can be a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
* a [Widget](https://developers.arcgis.com/javascript/latest/references/core/widgets/Widget/) instance, or an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement).
* If the string `legend` is used, then an instance of the [Legend](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/) widget is placed in the content.
*
* @see [content](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItemPanel/#content)
*/
export type ListItemPanelContent = "legend" | Widget | HTMLElement | string;
/**
* Defines the content(s) that can be displayed in a ListItem panel. This can be a single content item
* or an array of content items, allowing for flexible panel layouts.
*
* @see [content](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItemPanel/#content)
*/
export type ListItemPanelContents = ListItemPanelContent | ListItemPanelContent[];
/**
* This class allows you to display custom content for each [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/)
* in the [LayerList](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/) widget. ListItemPanel objects typically aren't constructed.
* Rather, they are modified using the [LayerList.listItemCreatedFunction](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/#listItemCreatedFunction)
* property.
*
* A common scenario for using ListItemPanel is to display a [Legend](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/) widget within each list item.
* This allows users to create a legend for each layer in the map simply by adding the string "legend" as the [content](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItemPanel/#content).
*
* @since 4.7
* @see [LayerList](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/)
* @see [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/)
* @see [ListItem.panel](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/#panel)
* @example
* const layerList = new LayerList({
* view: view,
* listItemCreatedFunction: function(event){
* const { item } = event;
* // displays the legend for each layer list item
* item.panel = {
* content: "legend"
* };
* }
* });
*/
export default class ListItemPanel extends ListItemPanelSuperclass {
constructor(properties?: ListItemPanelProperties);
/**
* The content displayed in the ListItem panel. This can be a [String](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/String),
* a [Widget](https://developers.arcgis.com/javascript/latest/references/core/widgets/Widget/) instance, an [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement),
* or an [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array) of any of those elements.
*
* If the string `legend` is used, then an instance of the [Legend](https://developers.arcgis.com/javascript/latest/references/core/widgets/Legend/)
* widget is placed in the content.
*
* @example
* const layerList = new LayerList({
* view: view,
* listItemCreatedFunction: (event) => {
* const { item } = event;
* // displays the legend for each layer list item
* item.panel = {
* content: "legend"
* };
* }
* });
*/
accessor content: ListItemPanelContents | null | undefined;
/**
* If `true`, disables the ListItem's panel so the user cannot open or interact with it.
* The panel will be disabled by default if it does not have content or if it contains
* a legend with no active content in it.
*
* @since 4.25
* @example
* const layerList = new LayerList({
* view: view,
* listItemCreatedFunction: (event) => {
* const { item } = event;
* if (!item.layer.visible){
* item.panel.disabled = true;
* }
* }
* });
*/
accessor disabled: boolean;
/**
* Indicates whether the panel's content should be rendered as a [Calcite Flow Item](https://developers.arcgis.com/calcite-design-system/components/flow-item/).
* By default, the panel's content is rendered in the [content-bottom](https://developers.arcgis.com/calcite-design-system/components/list-item/#api-reference-slots-content-bottom) slot.
* [Flow](https://developers.arcgis.com/calcite-design-system/components/flow/) is a calcite component that allows for drilling in and out of panels.
*
* @default false
* @since 4.29
*/
accessor flowEnabled: boolean;
/**
* Icon which represents the panel.
*
* @since 4.27
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
* @see [Calcite Icon Search](https://developers.arcgis.com/calcite-design-system/icons/)
*/
accessor icon: Icon["icon"] | null | undefined;
/**
* The URL or data URI of an image used to represent the panel.
* This property will be used as a background image for the node.
* If neither `image` nor `icon` are specified, a default icon
*  will display.
*/
accessor image: string | null | undefined;
/** The panel's parent ListItem that represents a layer in the map. */
accessor listItem: ListItem | null | undefined;
/**
* Indicates if the panel's content is open and visible to the user.
*
* @default false
* @example
* const layerList = new LayerList({
* listItemCreatedFunction: async (event) => {
* const { item } = event;
* const { layer } = item;
*
* // add a legend as the content and open the panel by default
* item.panel = {
* content: "legend",
* open: true
* };
* },
* view
* });
*/
accessor open: boolean;
/**
* The title of the panel. By default, this title matches the
* [ListItem.title](https://developers.arcgis.com/javascript/latest/references/core/widgets/LayerList/ListItem/#title). Changing this
* value will not change the title of the ListItem in the LayerList.
*/
accessor title: string;
/**
* Indicates whether the ListItemPanel is visible.
*
* If `false`, the list item panel will not be rendered in the HTML document.
*
* @default true
* @example
* const layerList = new LayerList({
* listItemCreatedFunction: async (event) => {
* const { item } = event;
* const { layer } = item;
*
* item.panel = {
* content: "legend",
* open: true
* };
*
* // hide the panel for a specific layer
* if (layer.title.includes("Confidential")) {
* item.panel.visible = false;
* }
* },
* view
* });
* @example
* // Hides the widget in the view
* widget.visible = false;
*/
accessor visible: boolean;
}
declare const ListItemPanelSuperclass: typeof Widget & typeof IdentifiableMixin