@esri/calcite-components/dist/components/calcite-table/customElement.d.ts

Web Components for Esri's Calcite Design System.

/// <reference path="../../index.d.ts" />
import type { PublicLitElement as LitElement } from "@arcgis/lumina";
import type { Scale, SelectionMode } from "../interfaces.js";
import type { NumberingSystem } from "../../utils/locale.js";
import type { TableRow } from "../calcite-table-row/customElement.js";
import type { TableInteractionMode, TableLayout, TableSelectionDisplay } from "./interfaces.js";

/**
 * @cssproperty [--calcite-table-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-table-corner-radius] - Specifies the component's border radius.
 * @cssproperty [--calcite-table-shadow] - Specifies the component's shadow.
 * @cssproperty [--calcite-table-number-cell-background-color] - Specifies the background color of the component's `numbered` cell.
 * @cssproperty [--calcite-table-number-cell-text-color] - Specifies the text color of the component's `numbered` cell.
 * @cssproperty [--calcite-table-selection-cell-background-color] - When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons.
 * @cssproperty [--calcite-table-selection-cell-background-color-selected] - When `selectionMode` is `"multiple"` or `"single"`, specifies the background color of cells containing selection icons on `selected` `calcite-table-row`s.
 * @cssproperty [--calcite-table-selection-cell-icon-color] - When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `calcite-table-row`s where `selected` is `false`.
 * @cssproperty [--calcite-table-selection-cell-icon-color-selected] - When `selectionMode` is `"multiple"` or `"single"`, specifies the icon color of the component's selection icon on `selected` `calcite-table-row`s.
 * @cssproperty [--calcite-table-selection-chip-background-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the background color of the component's selection chip.
 * @cssproperty [--calcite-table-selection-chip-border-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the border color of the component's selection chip.
 * @cssproperty [--calcite-table-selection-chip-corner-radius] - When `selectionMode` is `"multiple"` or `"single"`, specifies the corner radius of the component's selection chip.
 * @cssproperty [--calcite-table-selection-chip-shadow] - When `selectionMode` is `"multiple"` or `"single"`, specifies the shadow of the component's selection chip.
 * @cssproperty [--calcite-table-selection-chip-text-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are not `selected`, specifies the text color of the component's selection chip.
 * @cssproperty [--calcite-table-selection-chip-background-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection chip.
 * @cssproperty [--calcite-table-selection-chip-border-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection chip.
 * @cssproperty [--calcite-table-selection-chip-text-color-selected] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection chip.
 * @cssproperty [--calcite-table-selection-out-of-view-chip-background-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the background color of the component's selection out of view chip.
 * @cssproperty [--calcite-table-selection-out-of-view-chip-border-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the border color of the component's selection out of view chip.
 * @cssproperty [--calcite-table-selection-out-of-view-chip-corner-radius] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the corner radius of the component's selection out of view chip.
 * @cssproperty [--calcite-table-selection-out-of-view-chip-icon-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the icon color of the component's selection out of view chip.
 * @cssproperty [--calcite-table-selection-out-of-view-chip-shadow] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the shadow of the component's selection out of view chip.
 * @cssproperty [--calcite-table-selection-out-of-view-chip-text-color] - When `selectionMode` is `"multiple"` or `"single"`, `pageSize` is set,  and `calcite-table-row`s are `selected` on non-current pages, specifies the text color of the component's selection out of view chip.
 * @cssproperty [--calcite-table-selection-dismiss-button-background-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when active.
 * @cssproperty [--calcite-table-selection-dismiss-button-background-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip when hovered.
 * @cssproperty [--calcite-table-selection-dismiss-button-background-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the background color of the component's selection dismiss chip.
 * @cssproperty [--calcite-table-selection-dismiss-button-border-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when active.
 * @cssproperty [--calcite-table-selection-dismiss-button-border-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip when hovered.
 * @cssproperty [--calcite-table-selection-dismiss-button-border-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the border color of the component's selection dismiss chip.
 * @cssproperty [--calcite-table-selection-dismiss-button-corner-radius] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the corner radius of the component's selection dismiss chip.
 * @cssproperty [--calcite-table-selection-dismiss-button-shadow] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the shadow of the component's selection dismiss chip.
 * @cssproperty [--calcite-table-selection-dismiss-button-text-color-active] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when active.
 * @cssproperty [--calcite-table-selection-dismiss-button-text-color-hover] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip when hovered.
 * @cssproperty [--calcite-table-selection-dismiss-button-text-color] - When `selectionMode` is `"multiple"` or `"single"` and `calcite-table-row`s are `selected`, specifies the text color of the component's selection dismiss chip.
 * @cssproperty [--calcite-table-pagination-color] - When `pageSize` is set, specifies the component's pagination item color.
 * @cssproperty [--calcite-table-pagination-color-hover] - When `pageSize` is set, specifies the component's pagination item color when hovered or selected.
 * @cssproperty [--calcite-table-pagination-color-border-hover] - When `pageSize` is set, specifies the component's pagination item bottom border color when hovered.
 * @cssproperty [--calcite-table-pagination-color-border-active] - When `pageSize` is set, specifies the component's pagination item bottom border color when selected.
 * @cssproperty [--calcite-table-pagination-background-color] - When `pageSize` is set, specifies the component's pagination item background color when active.
 * @cssproperty [--calcite-table-pagination-icon-color-background-hover] - When `pageSize` is set, specifies the component's pagination chevron item background color when hovered.
 * @slot  - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
 * @slot [table-header] - A slot for adding `calcite-table-row` elements containing `calcite-table-header` elements.
 * @slot [table-footer] - A slot for adding `calcite-table-row` elements containing `calcite-table-cell` and/or `calcite-table-header` elements.
 * @slot [selection-actions] - A slot for adding `calcite-actions` or other elements to display when `selectionMode` is not `"none"` and `selectionDisplay` is not `"none"`.
 */
export abstract class Table extends LitElement {
  /**
   * When `true`, displays borders between `calcite-table-rows`.
   *
   * @default false
   */
  accessor bordered: boolean;
  /**
   * Specifies an accessible title for the component.
   *
   * @required
   */
  accessor caption: string;
  /**
   * Sets/gets the current page
   *
   * @default 0
   */
  accessor currentPage: number;
  /**
   * When `true`, number values are displayed with a group separator corresponding to the language and country format.
   *
   * @default false
   */
  accessor groupSeparator: boolean;
  /**
   * When `"interactive"`, allows focus and keyboard navigation of `table-header`s and `table-cell`s.  When `"static"`, prevents focus and keyboard navigation of `table-header`s and `table-cell`s when assistive technologies are not active. Selection affordances and slotted content within `table-cell`s remain focusable.
   *
   * @default "interactive"
   */
  accessor interactionMode: TableInteractionMode;
  /**
   * Specifies the layout of the component.
   *
   * @default "auto"
   */
  accessor layout: TableLayout;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      clear?: string;
      hiddenSelected?: string;
      page?: string;
      row?: string;
      selected?: string;
  };
  /**
   * When `true`, displays the position of the row in numeric form.
   *
   * @default false
   */
  accessor numbered: boolean;
  /** Specifies the Unicode numeral system used by the component for localization. */
  accessor numberingSystem: NumberingSystem | undefined;
  /**
   * Specifies the page size of the component. When present, renders `calcite-pagination`.
   *
   * @default 0
   */
  accessor pageSize: number;
  /**
   * Specifies the component's size.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /** Specifies the component's selected items. */
  get selectedItems(): TableRow[];
  /**
   * When `selectionMode` is `"single"` or `"multiple"`, specifies the display of the selection interface. When  `selectionMode` is `"none"`, content slotted in the `selection-actions` slot will not be displayed.
   *
   * @default "top"
   */
  accessor selectionDisplay: TableSelectionDisplay;
  /**
   * Specifies the selection mode of the component, where:
   *
   * `"multiple"` allows any number of selections,
   *
   * `"single"` allows only one selection, and
   *
   * `"none"` does not allow any selections.
   *
   * @default "none"
   */
  accessor selectionMode: Extract<"none" | "multiple" | "single", SelectionMode>;
  /**
   * When `true`, displays striped styling on the component's `calcite-table-rows`.
   *
   * @default false
   */
  accessor striped: boolean;
  /** Emits when the component's page selection changes. */
  readonly calciteTablePageChange: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Emits when the component's selected rows change. */
  readonly calciteTableSelect: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteTablePageChange: Table["calciteTablePageChange"]["detail"];
    calciteTableSelect: Table["calciteTableSelect"]["detail"];
  };
}