@esri/calcite-components/dist/components/calcite-sheet/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 { Height, LogicalFlowPosition, Scale, Width } from "../interfaces.js";
import type { FocusTrapOptions } from "../../controllers/useFocusTrap.js";
import type { DisplayMode } from "./interfaces.js";
import type { T9nMeta } from "@arcgis/lumina/controllers";

/**
 * @cssproperty [--calcite-sheet-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-sheet-corner-radius] - Specifies the component's corner radius.
 * @cssproperty [--calcite-sheet-shadow] - Specifies the component's shadow.
 * @cssproperty [--calcite-sheet-text-color] - Specifies the component's text color.
 * @cssproperty [--calcite-sheet-resize-background-color] - Specifies the resize handle's background color.
 * @cssproperty [--calcite-sheet-resize-icon-color] - Specifies the resize handle's text color.
 * @cssproperty [--calcite-sheet-scrim-background] - Specifies the background color of the component's scrim.
 * @cssproperty [--calcite-sheet-width] - When `position` is `"inline-start"` or `"inline-end"`, specifies the component's width.
 * @cssproperty [--calcite-sheet-max-width] - When `position` is `"inline-start"` or `"inline-end"`, specifies the component's maximum width.
 * @cssproperty [--calcite-sheet-min-width] - When `position` is `"inline-start"` or `"inline-end"`, specifies the component's minimum width.
 * @cssproperty [--calcite-sheet-height] - When `position` is `"block-start"` or `"block-end"`, specifies the component's height.
 * @cssproperty [--calcite-sheet-max-height] - When `position` is `"block-start"` or `"block-end"`, specifies the component's maximum height.
 * @cssproperty [--calcite-sheet-min-height] - When `position` is `"block-start"` or `"block-end"`, specifies the component's minimum height.
 * @slot  - A slot for adding custom content.
 */
export abstract class Sheet extends LitElement {
  /** Passes a function to run before the component closes. */
  accessor beforeClose: (el: Sheet) => Promise<void>;
  /**
   * Specifies the display mode - `"float"` separates content from main layout,
   * and `"overlay"` displays on top of center content.
   *
   * @default "overlay"
   */
  accessor displayMode: DisplayMode;
  /**
   * When `true`, disables the default close on escape behavior.
   *
   * @default false
   */
  accessor escapeDisabled: boolean;
  /**
   * When `true`, prevents focus trapping.
   *
   * @default false
   */
  accessor focusTrapDisabled: boolean;
  /**
   * Specifies custom focus trap configuration on the component, where
   *
   * `"allowOutsideClick"` allows outside clicks,
   * `"initialFocus"` enables initial focus,
   * `"returnFocusOnDeactivate"` returns focus when not active,
   * `"extraContainers"` specifies additional focusable elements external to the trap, such as 3rd-party components appending elements to the document body, and
   * `"setReturnFocus"` customizes the element to which focus is returned when the trap is deactivated. Return `false` to prevent focus return, or `undefined` to use the default behavior (returning focus to the element focused before activation).
   */
  accessor focusTrapOptions: Partial<FocusTrapOptions>;
  /** Specifies the component's height. */
  accessor height: Height;
  /**
   * When `position` is `"block-start"` or `"block-end"`, specifies the component's height.
   *
   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `height` property instead.
   * @default "m"
   */
  accessor heightScale: Scale;
  /**
   * Specifies an accessible label for the component.
   *
   * @required
   */
  accessor label: string;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: { resizeEnabled?: string; };
  /** @internal */
  protected messages: Partial<{ resizeEnabled: string; }> & T9nMeta<{ resizeEnabled: string; }>;
  /**
   * When `true`, displays and positions the component.
   *
   * @default false
   */
  accessor open: boolean;
  /**
   * When `true`, disables closing the component when the area outside of the component is clicked.
   *
   * @default false
   */
  accessor outsideCloseDisabled: boolean;
  /**
   * Determines where the component will be positioned.
   *
   * @default "inline-start"
   */
  accessor position: LogicalFlowPosition;
  /**
   * When `true`, the component is resizable.
   *
   * @default false
   */
  accessor resizable: boolean;
  /**
   * 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;
  /** Specifies the component's width. */
  accessor width: Extract<Width, Scale>;
  /**
   * When `position` is `"inline-start"` or `"inline-end"`, specifies the component's width.
   *
   * @deprecated in v3.0.0, removal target v6.0.0 - Use the `width` property instead.
   * @default "m"
   */
  accessor widthScale: Scale;
  /**
   * Sets focus on the component's "close" button - the first focusable item.
   *
   * @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>;
  /**
   * Updates the element(s) that are included in the component's focus-trap.
   *
   * @param extraContainers - Additional elements to include in the focus trap. This is useful for including elements that may have related parts rendered outside the main focus trapping element.
   */
  updateFocusTrapElements(extraContainers?: FocusTrapOptions["extraContainers"]): Promise<void>;
  /**
   * Updates the component's size by setting its inline and/or block dimensions.
   *
   * Use this method to programmatically override the components's width (inline) and/or height (block).
   * Pass `null` to clear the override and revert to the default or CSS variable size.
   *
   * @param size
   */
  updateSize(size: {
      inline?: number | null;
      block?: number | null;
  }): Promise<void>;
  /** Fires when the component is requested to be closed and before the closing transition begins. */
  readonly calciteSheetBeforeClose: 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 calciteSheetBeforeOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is closed and animation is complete. */
  readonly calciteSheetClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component is open and animation is complete. */
  readonly calciteSheetOpen: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteSheetBeforeClose: Sheet["calciteSheetBeforeClose"]["detail"];
    calciteSheetBeforeOpen: Sheet["calciteSheetBeforeOpen"]["detail"];
    calciteSheetClose: Sheet["calciteSheetClose"]["detail"];
    calciteSheetOpen: Sheet["calciteSheetOpen"]["detail"];
  };
}