@esri/calcite-components/dist/components/calcite-block/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 { HeadingLevel } from "../functional/Heading.js";
import type { FlipContext, Scale, Status } from "../interfaces.js";
import type { FlipPlacement, LogicalPlacement, OverlayPositioning } from "../../utils/floating-ui.js";
import type { IconName } from "../calcite-icon/interfaces.js";

/**
 * @cssproperty [--calcite-block-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-block-content-space] - Specifies the space of the component's `default` slot.
 * @cssproperty [--calcite-block-header-background-color] - Specifies the component's `heading` background color.
 * @cssproperty [--calcite-block-header-background-color-hover] - Specifies the component's `heading` background color when hovered.
 * @cssproperty [--calcite-block-header-background-color-press] - Specifies the component's `heading` background color when pressed.
 * @cssproperty [--calcite-block-heading-text-color] - Specifies the component's `heading` text color.
 * @cssproperty [--calcite-block-heading-text-color-press] - [Deprecated]  use `--calcite-block-heading-text-color` instead - When the component is `expanded`, specifies the `heading` text color.
 * @cssproperty [--calcite-block-padding] - [Deprecated] use `--calcite-block-content-space` instead - Specifies the padding of the component's `default` slot.
 * @cssproperty [--calcite-block-text-color] - [Deprecated] Specifies the component's text color.
 * @cssproperty [--calcite-block-description-text-color] - Specifies the component's `description` text color.
 * @cssproperty [--calcite-block-icon-color] - Specifies the component's `collapsible` icon, `iconStart` and `iconEnd` color.
 * @cssproperty [--calcite-block-icon-color-hover] - Specifies the component's `collapsible` icon color when hovered.
 * @slot  - A slot for adding custom content.
 * @slot [actions-end] - A slot for adding actionable `calcite-action` elements after the content of the component. It is recommended to use two or fewer actions.
 * @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.
 * @slot [header-menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu.
 */
export abstract class Block extends LitElement {
  /**
   * When `true`, the component is collapsible.
   *
   * @default false
   */
  accessor collapsible: boolean;
  /** Specifies a description for the component. Displays below the heading. */
  accessor description: string;
  /**
   * When `true`, interaction is prevented and the component is displayed with lower opacity.
   *
   * @default false
   */
  accessor disabled: boolean;
  /**
   * When `true`, and a parent `calcite-block-group` is `dragEnabled`, the component is not draggable.
   *
   * @default false
   */
  accessor dragDisabled: boolean;
  /**
   * When `true`, the component displays a draggable button.
   *
   * @deprecated in v3.0.0, removal target v6.0.0 - No longer necessary. Use Block Group for draggable functionality.
   * @default false
   */
  accessor dragHandle: boolean;
  /**
   * 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;
  /** Specifies an accessible label for the component. */
  accessor label: string;
  /**
   * When `true`, a busy indicator is displayed.
   *
   * @default false
   */
  accessor loading: boolean;
  /** Specifies the component's fallback `menuPlacement` when it's initial or specified `menuPlacement` has insufficient space available. */
  accessor menuFlipPlacements: FlipPlacement[];
  /**
   * Determines where the action menu will be positioned.
   *
   * @default "bottom-end"
   */
  accessor menuPlacement: LogicalPlacement;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      collapse?: string;
      expand?: string;
      loading?: string;
      options?: string;
  };
  /**
   * When `true`, expands the component and its contents.
   *
   * @deprecated in v3.1.0, removal target v6.0.0 - Use the `expanded` property instead.
   * @default false
   */
  accessor open: boolean;
  /**
   * Specifies the type of positioning to use for overlaid content, where:
   *
   * `"absolute"` works for most cases - positioning the component inside of overflowing parent containers, which affects the container's layout, and
   *
   * `"fixed"` is used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
   *
   * @default "absolute"
   */
  accessor overlayPositioning: OverlayPositioning;
  /**
   * Specifies the size of the component.
   *
   * @default "m"
   */
  accessor scale: Scale;
  /**
   * When `true`, displays and positions the sort handle.
   *
   * @default false
   */
  accessor sortHandleOpen: boolean;
  /**
   * Displays a status-related indicator icon.
   *
   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `icon-start` property instead.
   */
  accessor status: Status;
  /**
   * When `true` and the component is `open`, disables top layer placement.
   *
   * Only set this if you need complex z-index control or if top layer placement causes conflicts with third-party components.
   *
   * @default false
   * @mdn [Top Layer](https://developer.mozilla.org/en-US/docs/Glossary/Top_layer)
   */
  accessor topLayerDisabled: boolean;
  /**
   * Sets focus on the component's first tabbable element.
   *
   * @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 is requested to be closed and before the closing transition begins. */
  readonly calciteBlockBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
  readonly calciteBlockBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is closed and animation is complete. */
  readonly calciteBlockClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's content area is collapsed. */
  readonly calciteBlockCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's content area is expanded. */
  readonly calciteBlockExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is open and animation is complete. */
  readonly calciteBlockOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the sort handle is requested to be closed and before the closing transition begins. */
  readonly calciteBlockSortHandleBeforeClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */
  readonly calciteBlockSortHandleBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the sort handle is closed and animation is complete. */
  readonly calciteBlockSortHandleClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the sort handle is open and animation is complete. */
  readonly calciteBlockSortHandleOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /**
   * Fires when the component's header is clicked.
   *
   * @deprecated in v3.0.0, removal target v6.0.0 - Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead.
   */
  readonly calciteBlockToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteBlockBeforeClose: Block["calciteBlockBeforeClose"]["detail"];
    calciteBlockBeforeOpen: Block["calciteBlockBeforeOpen"]["detail"];
    calciteBlockClose: Block["calciteBlockClose"]["detail"];
    calciteBlockCollapse: Block["calciteBlockCollapse"]["detail"];
    calciteBlockExpand: Block["calciteBlockExpand"]["detail"];
    calciteBlockOpen: Block["calciteBlockOpen"]["detail"];
    calciteBlockSortHandleBeforeClose: Block["calciteBlockSortHandleBeforeClose"]["detail"];
    calciteBlockSortHandleBeforeOpen: Block["calciteBlockSortHandleBeforeOpen"]["detail"];
    calciteBlockSortHandleClose: Block["calciteBlockSortHandleClose"]["detail"];
    calciteBlockSortHandleOpen: Block["calciteBlockSortHandleOpen"]["detail"];
    calciteBlockToggle: Block["calciteBlockToggle"]["detail"];
  };
}