@esri/calcite-components/dist/types/components/panel/panel.d.ts

Web Components for Esri's Calcite Design System.

import { Event, EventEmitter, VNode } from "../../stencil-public-runtime";
import { InteractiveComponent } from "../../utils/interactive";
import { LoadableComponent } from "../../utils/loadable";
import { HeadingLevel } from "../functional/Heading";
import { LocalizedComponent } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { PanelMessages } from "./assets/panel/t9n";
/**
 * @slot - A slot for adding custom content.
 * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
 * @slot header-actions-start - A slot for adding actions or content to the start side of the header.
 * @slot header-actions-end - A slot for adding actions or content to the end side of the header.
 * @slot header-content - A slot for adding custom content to the header.
 * @slot header-menu-actions - A slot for adding an overflow menu with actions inside a `calcite-dropdown`.
 * @slot fab - A slot for adding a `calcite-fab` (floating action button) to perform an action.
 * @slot footer-actions - [Deprecated] Use the `"footer"` slot instead. A slot for adding `calcite-button`s to the component's footer.
 * @slot footer - A slot for adding custom content to the footer.
 */
export declare class Panel implements InteractiveComponent, LoadableComponent, LocalizedComponent, T9nComponent {
  /** When `true`, the component will be hidden. */
  closed: boolean;
  /**
   *  When `true`, interaction is prevented and the component is displayed with lower opacity.
   */
  disabled: boolean;
  /** When `true`, displays a close button in the trailing side of the header. */
  closable: boolean;
  /**
   * Specifies the number at which section headings should start.
   */
  headingLevel: HeadingLevel;
  /**
   * When `true`, a busy indicator is displayed.
   */
  loading: boolean;
  /**
   * The component header text.
   */
  heading: string;
  /** A description for the component. */
  description: string;
  /**
   * When `true`, the action menu items in the `header-menu-actions` slot are open.
   */
  menuOpen: boolean;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<PanelMessages>;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: PanelMessages;
  onMessagesChange(): void;
  connectedCallback(): void;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  componentDidRender(): void;
  disconnectedCallback(): void;
  el: HTMLCalcitePanelElement;
  backButtonEl: HTMLCalciteActionElement;
  closeButtonEl: HTMLCalciteActionElement;
  containerEl: HTMLElement;
  panelScrollEl: HTMLElement;
  resizeObserver: ResizeObserver;
  hasStartActions: boolean;
  hasEndActions: boolean;
  hasMenuItems: boolean;
  hasHeaderContent: boolean;
  hasActionBar: boolean;
  hasFooterContent: boolean;
  hasFooterActions: boolean;
  hasFab: boolean;
  defaultMessages: PanelMessages;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  /**
   * Fires when the close button is clicked.
   */
  calcitePanelClose: EventEmitter<void>;
  /**
   * Fires when the content is scrolled.
   */
  calcitePanelScroll: EventEmitter<void>;
  resizeHandler: () => void;
  setContainerRef: (node: HTMLElement) => void;
  setCloseRef: (node: HTMLCalciteActionElement) => void;
  setBackRef: (node: HTMLCalciteActionElement) => void;
  panelKeyDownHandler: (event: KeyboardEvent) => void;
  close: () => void;
  panelScrollHandler: () => void;
  handleHeaderActionsStartSlotChange: (event: Event) => void;
  handleHeaderActionsEndSlotChange: (event: Event) => void;
  handleHeaderMenuActionsSlotChange: (event: Event) => void;
  handleActionBarSlotChange: (event: Event) => void;
  handleHeaderContentSlotChange: (event: Event) => void;
  handleFooterSlotChange: (event: Event) => void;
  handleFooterActionsSlotChange: (event: Event) => void;
  handleFabSlotChange: (event: Event) => void;
  /**
   * Sets focus on the component's first focusable element.
   */
  setFocus(): Promise<void>;
  /**
   * Scrolls the component's content to a specified set of coordinates.
   *
   * @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).
   * });
   * @param options
   */
  scrollContentTo(options?: ScrollToOptions): Promise<void>;
  renderHeaderContent(): VNode;
  renderActionBar(): VNode;
  /**
   * Allows user to override the entire header-content node.
   */
  renderHeaderSlottedContent(): VNode;
  renderHeaderStartActions(): VNode;
  renderHeaderActionsEnd(): VNode;
  renderMenu(): VNode;
  renderHeaderNode(): VNode;
  renderFooterNode(): VNode;
  setPanelScrollEl: (el: HTMLElement) => void;
  renderContent(): VNode;
  renderFab(): VNode;
  render(): VNode;
}