@esri/calcite-components

/// <reference types="../../index.d.ts" /> import { PropertyValues } from 'lit'; import { PublicLitElement as LitElement, JsxNode, TargetedEvent } from '@arcgis/lumina'; import { InteractiveComponent } from '../../utils/interactive'; import { HeadingLevel } from '../functional/Heading'; import { FlipContext, Status } from '../interfaces'; import { OpenCloseComponent } from '../../utils/openCloseComponent'; import { FlipPlacement, LogicalPlacement, OverlayPositioning } from '../../utils/floating-ui'; import { IconNameOrString } from '../calcite-icon/interfaces'; import { MoveTo } from '../calcite-sort-handle/interfaces'; /** * @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 [icon] - [Deprecated] A slot for adding a leading header icon with `calcite-icon`. Use `icon-start` instead. * @slot [content-start] - A slot for adding non-actionable elements before content of the component. * @slot [control] - [Deprecated] A slot for adding a single HTML input element in a header. Use `actions-end` instead. * @slot [header-menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a dropdown menu. */ export declare class Block extends LitElement { /** * When `true`, the component is collapsible. * * @default false */ collapsible: boolean; /** A description for the component, which displays below the heading. */ description: string; /** * When `true`, interaction is prevented and the component is displayed with lower opacity. * * @default false */ disabled: boolean; /** * When `true`, and a parent Block Group is `dragEnabled`, the component is not draggable. * * @default false */ dragDisabled: boolean; /** * When `true`, the component displays a draggable button. * * @deprecated No longer necessary. Use Block Group for draggable functionality. * @default false */ dragHandle: boolean; /** * When `true`, the component is expanded to show child components. * * @default false */ expanded: boolean; /** The component header text. */ heading: string; /** Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling. */ headingLevel: HeadingLevel; /** Specifies an icon to display at the end of the component. */ iconEnd: IconNameOrString; /** Displays the `iconStart` and/or `iconEnd` as flipped when the element direction is right-to-left (`"rtl"`). */ iconFlipRtl: FlipContext; /** Specifies an icon to display at the start of the component. */ iconStart: IconNameOrString; /** * When `true`, a busy indicator is displayed. * * @default false */ loading: boolean; /** Specifies an accessible name for the component. */ label: string; /** Specifies the component's fallback menu `placement` when it's initial or specified `placement` has insufficient space available. */ menuFlipPlacements: FlipPlacement[]; /** * Determines where the action menu will be positioned. * * @default "bottom-end" */ menuPlacement: LogicalPlacement; /** Use this property to override individual strings used by the component. */ messageOverrides?: typeof this.messages._overrides; /** * When `true`, expands the component and its contents. * * @deprecated Use `expanded` prop instead. * @default false */ get open(): boolean; set open(value: boolean); /** * Determines the type of positioning to use for the overlaid content. * * Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout. * * `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`. * * @default "absolute" */ overlayPositioning: OverlayPositioning; /** * When `true`, displays and positions the sort handle. * * @default false */ sortHandleOpen: boolean; /** * Displays a status-related indicator icon. * * @deprecated Use `icon-start` instead. */ status: Status; /** Sets focus on the component's first tabbable element. */ setFocus(): Promise<void>; /** Fires when the component is requested to be closed and before the closing transition begins. */ readonly calciteBlockBeforeClose: TargetedEvent<this, void>; /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */ readonly calciteBlockBeforeOpen: TargetedEvent<this, void>; /** Fires when the component is closed and animation is complete. */ readonly calciteBlockClose: TargetedEvent<this, void>; /** Fires when the component is open and animation is complete. */ readonly calciteBlockOpen: TargetedEvent<this, void>; /** Fires when the sort handle is requested to be closed and before the closing transition begins. */ readonly calciteBlockSortHandleBeforeClose: TargetedEvent<this, void>; /** Fires when the sort handle is added to the DOM but not rendered, and before the opening transition begins. */ readonly calciteBlockSortHandleBeforeOpen: TargetedEvent<this, void>; /** Fires when the sort handle is closed and animation is complete. */ readonly calciteBlockSortHandleClose: TargetedEvent<this, void>; /** Fires when the sort handle is open and animation is complete. */ readonly calciteBlockSortHandleOpen: TargetedEvent<this, void>; /** * Fires when the component's header is clicked. * * @deprecated Use `openClose` events such as `calciteBlockOpen`, `calciteBlockClose`, `calciteBlockBeforeOpen`, and `calciteBlockBeforeClose` instead. */ readonly calciteBlockToggle: TargetedEvent<this, void>; private messages: Partial<{ collapse: string; expand: string; loading: string; options: string; }> & import('@arcgis/lumina/controllers').T9nMeta<{ collapse: string; expand: string; loading: string; options: string; }>; }