@arcgis/map-components/dist/components/arcgis-table-list/customElement.d.ts

ArcGIS Map Components

/// <reference path="../../index.d.ts" />
import type Collection from "@arcgis/core/core/Collection.js";
import type LinkChartView from "@arcgis/core/views/LinkChartView.js";
import type MapView from "@arcgis/core/views/MapView.js";
import type SceneView from "@arcgis/core/views/SceneView.js";
import type TableListListItem from "@arcgis/core/widgets/TableList/ListItem.js";
import type WebMap from "@arcgis/core/WebMap.js";
import type WebScene from "@arcgis/core/WebScene.js";
import type ListItem from "@arcgis/core/widgets/TableList/ListItem.js";
import type Layer from "@arcgis/core/layers/Layer.js";
import type Sublayer from "@arcgis/core/layers/support/Sublayer.js";
import type { TableListViewModelTriggerActionEvent } from "@arcgis/core/widgets/TableList/TableListViewModel.js";
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { ArcgisReferenceElement, IconName } from "../types.js";
import type { FilterPredicate } from "@arcgis/core/widgets/TableList.js";
import type { HeadingLevel } from "@arcgis/core/widgets/support/types.js";
import type { Icon } from "@esri/calcite-components/components/calcite-icon";
import type { ListItemModifier, State } from "@arcgis/core/widgets/TableList/types.js";
import type { ReadonlyCollection } from "@arcgis/core/core/Collection.js";

/**
 * The Table List component provides a way to display a list of tables associated with a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/).
 * It is meant to be used with [feature layer](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/) tables.
 *
 * If a map contains feature layer tables, they will display within the component. Tables can also be added to the Map's
 * [tables](https://developers.arcgis.com/javascript/latest/references/core/Map/#tables) collection. Any tables referenced in the [map](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#map)
 * property will display in the component. If unsure of whether the layer is a table, check the feature layer's
 * [isTable](https://developers.arcgis.com/javascript/latest/references/core/layers/FeatureLayer/#isTable) property.
 *
 * The [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/) API provides access to each table, allows
 * the developer to configure actions related to the table, and allows the developer to add content to the item related to the table.
 *
 *
 * **Known Limitations**
 * * The TableList component is not supported with [arcgis-scene](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-scene/).
 *
 * @since 4.28
 * @example
 * ```js
 *
 * const tableListElement = document.createElement("arcgis-table-list");
 * tableListElement.referenceElement = viewElement;
 * tableListElement.slot = "top-left";
 * viewElement.appendChild(tableListElement);
 *
 * const layer = Layer.fromPortalItem({
 *   // Loads a layer (table) from a portal item
 *   portalItem: {
 *     id: "add portal item id"
 *   }
 * });
 *
 * // Wait for the layer to load
 * await layer.load()
 *
 * // Check if the layer is a table
 * if (layer.isTable) {
 *  // Add the table to the map's tables collection
 *   viewElement.map.tables.add(layer);
 * }
 * ```
 */
export abstract class ArcgisTableList extends LitElement {
  /**
   * If true, the component will not be destroyed automatically when it is
   * disconnected from the document. This is useful when you want to move the
   * component to a different place on the page, or temporarily hide it. If this
   * is set, make sure to call the [destroy()](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#destroy) method when you are done to
   * prevent memory leaks.
   *
   * @default false
   */
  accessor autoDestroyDisabled: boolean;
  /**
   * Indicates whether a component is closed. When `true`, the component will be hidden.
   *
   * @default false
   * @since 4.33
   */
  accessor closed: boolean;
  /**
   * Indicates whether the component is collapsed.
   * When collapsed, only the collapse button and heading are displayed.
   *
   * @default false
   * @since 4.29
   * @see [showCollapseButton](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#showCollapseButton)
   * @example
   * ```js
   * tableListElement.collapsed = true;
   * ```
   */
  accessor collapsed: boolean;
  /**
   * Indicates whether [list items](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/) may be reordered within the list by dragging and dropping.
   * Drag won't be enabled until the number of list items is equal to or greater than than the value set set in [minDragEnabledItems](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#minDragEnabledItems).
   *
   * @default false
   * @since 4.29
   * @see [minDragEnabledItems](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#minDragEnabledItems)
   * @example
   * ```js
   * tableListElement.dragEnabled = true;
   * ```
   */
  accessor dragEnabled: boolean;
  /**
   * Placeholder text used in the filter input if [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#showFilter) is true.
   *
   * @default ""
   * @since 4.29
   * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#showFilter)
   * @example
   * ```js
   * tableListElement.filterPlaceholder = "Filter layers";
   * ```
   */
  accessor filterPlaceholder: string;
  /**
   * Specifies a function to handle filtering [list items](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/).
   *
   * @since 4.32
   * @example
   * ```js
   * tableListElement.filterPredicate = (item) => item.title.toLowerCase().includes("streets");
   * ```
   */
  accessor filterPredicate: FilterPredicate | null | undefined;
  /**
   * The value of the filter input text string if [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#showFilter) is true.
   *
   * @default ""
   * @since 4.29
   * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#showFilter)
   * @example
   * ```js
   * reactiveUtils.watch(
   *   () => tableListElement.filterText,
   *   (filterText) => console.log(filterText)
   * );
   * ```
   */
  accessor filterText: string;
  accessor headingLevel: HeadingLevel;
  /**
   * Indicates whether the status indicators will be displayed.
   *
   * @default false
   * @since 5.0
   */
  accessor hideStatusIndicators: boolean;
  /**
   * Icon which represents the component.
   * Typically used when the component is controlled by another component (e.g. by the Expand component).
   *
   * @default "table"
   * @since 4.27
   * @see [Calcite Icons](https://developers.arcgis.com/calcite-design-system/icons/)
   */
  get icon(): Icon["icon"];
  set icon(value: IconName);
  /**
   * The component's default label.
   *
   * @since 4.11
   */
  accessor label: string;
  /**
   * Specifies a function that accesses each [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/).
   * Each list item can be modified according to its modifiable properties. Actions can be added
   * to list items using the [ListItem#actionsSections](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/#actionsSections)
   * property of the ListItem.
   *
   * @example
   * ```js
   * tableListElement.listItemCreatedFunction = (event) => {
   *   const { item } = event;
   *   item.actionsSections = [
   *     [
   *       {
   *         title: "Open in feature table",
   *         icon: "table",
   *         id: "open-table"
   *       }
   *     ]
   *   ];
   *  }
   * ```
   */
  accessor listItemCreatedFunction: ListItemModifier | null | undefined;
  /**
   * A reference to a [Map](https://developers.arcgis.com/javascript/latest/references/core/Map/) containing the tables. Set this property
   * to access the underlying tables within the map.
   *
   * @since 4.34
   * @see [Map#tables](https://developers.arcgis.com/javascript/latest/references/core/Map/#tables)
   * @see [WebMap#tables](https://developers.arcgis.com/javascript/latest/references/core/WebMap/#tables)
   */
  accessor map: WebMap | WebScene | null | undefined;
  /**
   * The minimum number of list items required to enable drag and drop reordering with [dragEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#dragEnabled).
   *
   * @default 2
   * @since 4.29
   * @see [dragEnabled](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#dragEnabled)
   * @example
   * ```js
   * tableListElement.dragEnabled = true;
   * tableListElement.minDragEnabledItems = 5;
   * ```
   */
  accessor minDragEnabledItems: number;
  /**
   * The minimum number of list items required to display the [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#showFilter) input box.
   *
   * @default 10
   * @since 4.29
   * @see [showFilter](https://developers.arcgis.com/javascript/latest/references/map-components/components/arcgis-table-list/#showFilter)
   * @example
   * ```js
   * tableListElement.showFilter = true;
   * tableListElement.minFilterItems = 5;
   * ```
   */
  accessor minFilterItems: number;
  /**
   * By assigning the `id` attribute of the Map or Scene component to this property, you can position a child component anywhere in the DOM while still maintaining a connection to the Map or Scene.
   *
   * @see [Associate components with a Map or Scene component](https://developers.arcgis.com/javascript/latest/programming-patterns/#associate-components-with-a-map-or-scene-component)
   */
  accessor referenceElement: ArcgisReferenceElement | string | undefined;
  /**
   * A collection of selected [ListItem](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/ListItem/)s representing table list items
   * selected by the user.
   *
   * @see [selectionMode](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#selectionMode)
   */
  accessor selectedItems: Collection<ListItem>;
  /**
   * Specifies the selection mode.
   * Selected items are available in the [selectedItems](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#selectedItems) property.
   *
   * | Value | Description |
   * | ----- | ----------- |
   * | multiple | Allows any number of items to be selected at once. This is useful when you want to apply an operation to multiple items at the same time. |
   * | none | Disables selection. Use this when you want to prevent selecting items. |
   * | single | Allows only one item to be selected at a time. If another item is selected, the previous selection is cleared. This is useful when you want to ensure that a maximum of one item is selected at a time. |
   * | single-persist | Allows only one item to be selected at a time and prevents de-selection. Once an item is selected, it remains selected until another item is selected. This is useful when you want to ensure that there is always exactly one selected item. |
   *
   * @default "none"
   * @since 4.29
   * @see [selectedItems](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#selectedItems)
   * @example
   * ```js
   * tableListElement.selectionMode = "multiple";
   * ```
   */
  accessor selectionMode: "multiple" | "single" | "none" | "single-persist";
  /**
   * Indicates whether to display a close button in the header.
   *
   * @default false
   * @since 5.0
   */
  accessor showCloseButton: boolean;
  /**
   * Indicates whether to display a collapse button in the header.
   *
   * @default false
   * @since 5.0
   */
  accessor showCollapseButton: boolean;
  /**
   * Indicates whether to display layers with load errors.
   *
   * @default false
   * @since 5.0
   */
  accessor showErrors: boolean;
  /**
   * Indicates whether to display a filter input box when then number of list items is equal to or greater than the value set in [TableList#minFilterItems](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#minFilterItems), allowing users to filter tables by their title.
   *
   * @default false
   * @since 5.0
   */
  accessor showFilter: boolean;
  /**
   * Indicates whether to display the table list heading. The heading text is "Table List". The heading level can be set with the [TableList#headingLevel](https://developers.arcgis.com/javascript/latest/references/core/widgets/TableList/#headingLevel).
   *
   * @default false
   * @since 5.0
   */
  accessor showHeading: boolean;
  /**
   * Indicates whether temporary table indicators will be displayed for tables with [Layer#persistenceEnabled](https://developers.arcgis.com/javascript/latest/references/core/layers/Layer/#persistenceEnabled) set to `false`. A [temporary icon](https://developers.arcgis.com/calcite-design-system/icons/?icon=temporary&library=Calcite%20UI&query=temporary) will be displayed on the near side of the table title.
   *
   * @default false
   * @since 5.0
   */
  accessor showTemporaryTableIndicators: boolean;
  /**
   * The current state of the component.
   *
   * @default "disabled"
   */
  get state(): State;
  /** The collection of table ListItems displayed within the component. */
  get tableItems(): Collection<TableListListItem>;
  /** @internal */
  accessor tables: ReadonlyCollection<Layer | Sublayer> | null | undefined;
  /**
   * The view associated with the component. 
   *   > **Note:** The recommended approach is to fully migrate applications to use map and scene components and avoid using MapView and SceneView directly. However, if you are migrating a large application from widgets to components, you might prefer a more gradual transition. To support this use case, the SDK includes this `view` property which connects a component to a MapView or SceneView. Ultimately, once migration is complete, the arcgis-table-list component will be associated with a map or scene component rather than using the `view` property.
   */
  accessor view: LinkChartView | MapView | SceneView | undefined;
  /** Permanently destroy the component. */
  destroy(): Promise<void>;
  "@setterTypes": {
    icon?: IconName;
  };
  /**
   * Emitted when the component's close button is clicked.
   *
   * @since 4.33
   */
  readonly arcgisClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** 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: "state"; }>;
  /** Emitted when the component associated with a map or scene view is ready to be interacted with. */
  readonly arcgisReady: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Emitted when an action is triggered on the component. */
  readonly arcgisTriggerAction: import("@arcgis/lumina").TargetedEvent<this, TableListViewModelTriggerActionEvent>;
  readonly "@eventTypes": {
    arcgisClose: ArcgisTableList["arcgisClose"]["detail"];
    arcgisPropertyChange: ArcgisTableList["arcgisPropertyChange"]["detail"];
    arcgisReady: ArcgisTableList["arcgisReady"]["detail"];
    arcgisTriggerAction: ArcgisTableList["arcgisTriggerAction"]["detail"];
  };
}