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

/**
 * @cssproperty [--calcite-flow-item-footer-padding] - [Deprecated] Use `--calcite-flow-footer-space` instead. Specifies the padding of the component's footer.
 * @cssproperty [--calcite-flow-item-header-border-block-end] - [Deprecated] Use `--calcite-flow-border-color` instead. Specifies the component header's block end border.
 * @cssproperty [--calcite-flow-corner-radius] - Specifies the component's corner radius.
 * @cssproperty [--calcite-flow-heading-text-color] - Specifies the text color of the component's `heading`.
 * @cssproperty [--calcite-flow-icon-color] - Specifies the color of the component's `icon`.
 * @cssproperty [--calcite-flow-description-text-color] - Specifies the text color of the component's `description`.
 * @cssproperty [--calcite-flow-border-color] - Specifies the component's border color.
 * @cssproperty [--calcite-flow-background-color] - Specifies the component's background color.
 * @cssproperty [--calcite-flow-header-background-color] - Specifies the background color of the component's header.
 * @cssproperty [--calcite-flow-footer-background-color] - Specifies the background color of the component's footer.
 * @cssproperty [--calcite-flow-space] - Specifies the padding of the component's `unnamed (default)` slot.
 * @cssproperty [--calcite-flow-header-content-space] - Specifies the padding of the `header-content` slot.
 * @cssproperty [--calcite-flow-footer-space] - Specifies the padding of the component's footer.
 * @cssproperty [--calcite-action-background-color] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s. Applies to any slotted `calcite-action`s.
 * @cssproperty [--calcite-action-background-color-hover] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
 * @cssproperty [--calcite-action-background-color-pressed] - Specifies the background color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
 * @cssproperty [--calcite-action-text-color-hover] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when hovered. Applies to any slotted `calcite-action`s.
 * @cssproperty [--calcite-action-text-color-pressed] - Specifies the text and icon color of the component's `closable`, `collapsible`, and `back` `calcite-action`s when pressed. Applies to any slotted `calcite-action`s.
 * @cssproperty [--calcite-popover-border-color] - Specifies the border color of the component's internally rendered `calcite-popover`, which is rendered within a `calcite-action` menu when slotted `calcite-action`s are present in the `header-actions-end` slot. Applies to any slotted `calcite-popover`s.
 * @cssproperty [--calcite-flow-header-action-background-color-hover] - Specifies the background color of any `calcite-action`s in the component's header when hovered.
 * @cssproperty [--calcite-flow-header-action-background-color-press] - Specifies the background color of any `calcite-action`s in the component's header when pressed.
 * @cssproperty [--calcite-flow-header-action-background-color] - Specifies the background color of any `calcite-action`s in the component's header.
 * @cssproperty [--calcite-flow-header-action-indicator-color] - Specifies the color of any `calcite-action`s indicator in the component's header.
 * @cssproperty [--calcite-flow-header-action-text-color-press] - Specifies the text color of any `calcite-action`s in the component's header when pressed.
 * @cssproperty [--calcite-flow-header-action-text-color] - Specifies the text color of any `calcite-action`s in the component's header.
 * @slot  - A slot for adding custom content.
 * @slot [action-bar] - A slot for adding a `calcite-action-bar` to the component.
 * @slot [alerts] - A slot for adding `calcite-alert`s to the component.
 * @slot [content-top] - A slot for adding content above the unnamed (default) slot and below the action-bar slot (if populated).
 * @slot [content-bottom] - A slot for adding content below the unnamed (default) slot and above the footer slot (if populated)
 * @slot [header-actions-start] - A slot for adding `calcite-action`s or content to the start side of the component's header.
 * @slot [header-actions-end] - A slot for adding `calcite-action`s or content to the end side of the component's header.
 * @slot [header-content] - A slot for adding custom content to the component's header.
 * @slot [header-menu-actions] - A slot for adding an overflow menu with `calcite-action`s inside a `calcite-dropdown`.
 * @slot [fab] - A slot for adding a `calcite-fab` (floating action button) to perform an action.
 * @slot [footer] - A slot for adding custom content to the component's footer. Should not be used with the `footer-start` or `footer-end` slots.
 * @slot [footer-end] - A slot for adding a trailing footer custom content. Should not be used with the `footer` slot.
 * @slot [footer-start] - A slot for adding a leading footer custom content. Should not be used with the `footer` slot.
 */
export abstract class FlowItem extends LitElement {
  /** Specifies a function to run before the component is removed from its parent `calcite-flow`. */
  accessor beforeBack: (() => Promise<void>) | undefined;
  /** Specifies a function to run before the component closes. */
  accessor beforeClose: () => Promise<void>;
  /**
   * When `true`, displays a close button in the trailing side of the component's header.
   *
   * @default false
   */
  accessor closable: boolean;
  /**
   * When `true`, hides the component.
   *
   * @default false
   */
  accessor closed: boolean;
  /**
   * When `true`, hides the component's content area.
   *
   * @default false
   */
  accessor collapsed: boolean;
  /**
   * When `true`, the component is collapsible.
   *
   * @default false
   */
  accessor collapsible: boolean;
  /** Specifies a the component's description. */
  accessor description: string;
  /**
   * When `true`, prevents interaction and decreases the component's opacity.
   *
   * @default false
   */
  accessor disabled: 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. */
  accessor icon: IconName;
  /**
   * When `true` and the element direction is right-to-left (`"rtl"`), flips the component`s `icon`.
   *
   * @default false
   */
  accessor iconFlipRtl: boolean;
  /**
   * When `true`, a busy indicator is displayed.
   *
   * @default false
   */
  accessor loading: boolean;
  /**
   * When `true`, the action menu items in the `header-menu-actions` slot are open.
   *
   * @default false
   */
  accessor menuOpen: boolean;
  /** Overrides individual strings used by the component. */
  accessor messageOverrides: {
      back?: string;
      close?: string;
      options?: string;
  };
  /**
   * 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`, the component is displayed within a parent `calcite-flow`.
   *
   * @default false
   */
  accessor selected: boolean;
  /**
   * When `true`, displays a back button in the component's header.
   *
   * @default false
   * @internal
   */
  accessor showBackButton: 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;
  /**
   * Scrolls the component's content to a specified set of coordinates.
   *
   * @param options - allows specific coordinates to be defined.
   * @returns promise that resolves once the content is scrolled to.
   * @example
   * myCalciteFlowItem.scrollContentTo({
   *   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.
   *   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element
   *   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value).
   * });
   */
  scrollContentTo(options?: ScrollToOptions): Promise<void>;
  /**
   * 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.
   * @returns promise.
   * @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 back button is clicked. */
  readonly calciteFlowItemBack: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's close button is clicked. */
  readonly calciteFlowItemClose: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's content area is collapsed. */
  readonly calciteFlowItemCollapse: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's content area is expanded. */
  readonly calciteFlowItemExpand: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's content is scrolled. */
  readonly calciteFlowItemScroll: import("@arcgis/lumina").TargetedEvent<this, void>;
  /** Fires when the component's collapse button is clicked. */
  readonly calciteFlowItemToggle: import("@arcgis/lumina").TargetedEvent<this, void>;
  readonly "@eventTypes": {
    calciteFlowItemBack: FlowItem["calciteFlowItemBack"]["detail"];
    calciteFlowItemClose: FlowItem["calciteFlowItemClose"]["detail"];
    calciteFlowItemCollapse: FlowItem["calciteFlowItemCollapse"]["detail"];
    calciteFlowItemExpand: FlowItem["calciteFlowItemExpand"]["detail"];
    calciteFlowItemScroll: FlowItem["calciteFlowItemScroll"]["detail"];
    calciteFlowItemToggle: FlowItem["calciteFlowItemToggle"]["detail"];
  };
}