@esri/calcite-components/dist/components/calcite-accordion-item/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 { FlipContext } from "../interfaces.js";
import type { IconName } from "../calcite-icon/interfaces.js";
import type { HeadingLevel } from "../functional/Heading.js";

/**
 * @cssproperty [--calcite-accordion-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-accordion-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-accordion-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-accordion-text-color-hover] - Specifies the component's main text color on hover.
 * @cssproperty [--calcite-accordion-text-color-press] - Specifies the component's main text color when pressed.
 * @cssproperty [--calcite-accordion-item-background-color] - [Deprecated] Use `--calcite-accordion-background-color`. Specifies the component's background color.
 * @cssproperty [--calcite-accordion-item-border-color] - [Deprecated] Use `--calcite-accordion-border-color`. Specifies the component's border color.
 * @cssproperty [--calcite-accordion-item-content-space] - Specifies the component's padding.
 * @cssproperty [--calcite-accordion-item-end-icon-color] - Specifies the component's `iconEnd` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
 * @cssproperty [--calcite-accordion-item-expand-icon-color] - Specifies the component's expand icon color.
 * @cssproperty [--calcite-accordion-item-header-background-color] - Specifies the component's `heading` background color.
 * @cssproperty [--calcite-accordion-item-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
 * @cssproperty [--calcite-accordion-item-header-background-color-press] - Specifies the component's `heading` background color when pressed.
 * @cssproperty [--calcite-accordion-item-heading-text-color] - Specifies the component's `heading` text color.
 * @cssproperty [--calcite-accordion-item-icon-color] - [Deprecated] Use `--calcite-icon-color`. Specifies the component's default icon color.
 * @cssproperty [--calcite-accordion-item-start-icon-color] - Specifies the component's `iconStart` color. Falls back to `--calcite-accordion-item-icon-color` or current color.
 * @cssproperty [--calcite-accordion-item-text-color] - [Deprecated] Use `--calcite-accordion-text-color`. Specifies the component's text color.
 * @cssproperty [--calcite-accordion-item-text-color-hover] - [Deprecated] Use `--calcite-accordion-text-color-hover`. Specifies the component's text color on hover.
 * @slot  - A slot for adding custom content, including nested `calcite-accordion-item`s.
 * @slot [actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
 * @slot [actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.
 * @slot [content-end] - A slot for adding non-actionable elements after the component's header text.
 * @slot [content-start] - A slot for adding non-actionable elements before the component's header text.
 */
export abstract class AccordionItem extends LitElement {
  /** Specifies a description for the component. */
  accessor description: string;
  /**
   * When `true`, expands the component and its contents.
   *
   * @default false
   */
  accessor expanded: boolean;
  /** Specifies the component's heading text. */
  accessor heading: string;
  /** Specifies the heading level number of the component's `heading` for proper document structure, without affecting visual styling. */
  accessor headingLevel: HeadingLevel;
  /** Specifies an icon to display at the end of the component. */
  accessor iconEnd: IconName;
  /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */
  accessor iconFlipRtl: FlipContext;
  /** Specifies an icon to display at the start of the component. */
  accessor iconStart: IconName;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      collapse?: string;
      expand?: string;
  };
  /**
   * Sets focus on the component.
   *
   * @param options - When specified an optional object customizes the component's focusing process. When `preventScroll` is `true`, scrolling will not occur on the component.
   * @mdn [focus(options)](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus#options)
   */
  setFocus(options?: FocusOptions): Promise<void>;
  /** Fires when the component's content area is collapsed. */
  readonly calciteAccordionItemCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's content area is expanded. */
  readonly calciteAccordionItemExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteAccordionItemCollapse: AccordionItem["calciteAccordionItemCollapse"]["detail"];
    calciteAccordionItemExpand: AccordionItem["calciteAccordionItemExpand"]["detail"];
  };
}