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

Web Components for Esri's Calcite Design System.

import { VNode } from "../../stencil-public-runtime";
import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
import { LocalizedComponent } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { Layout, Position, Scale } from "../interfaces";
import { ShellPanelMessages } from "./assets/shell-panel/t9n";
import { DisplayMode } from "./interfaces";
/**
 * @slot - A slot for adding custom content.
 * @slot action-bar - A slot for adding a `calcite-action-bar` to the component.
 */
export declare class ShellPanel implements ConditionalSlotComponent, LocalizedComponent, T9nComponent {
  /**
   * When `true`, hides the component's content area.
   */
  collapsed: boolean;
  /**
   * When `true`, the content area displays like a floating panel.
   *
   * @deprecated use `displayMode` instead.
   */
  detached: boolean;
  handleDetached(value: boolean): void;
  /**
   * Specifies the display mode - `"dock"` (full height, displays adjacent to center content), `"float"` (not full height, content is separated detached from `calcite-action-bar`, displays on top of center content),
   * or `"overlay"` (full height, displays on top of center content).
   */
  displayMode: DisplayMode;
  handleDisplayMode(value: DisplayMode): void;
  /**
   * When `displayMode` is `float`, specifies the maximum height of the component.
   *
   * @deprecated use `heightScale` instead.
   */
  detachedHeightScale: Scale;
  handleDetachedHeightScale(value: Scale): void;
  /**
   * When `layout` is `horizontal`, or `layout` is `vertical` and `displayMode` is `float`, specifies the maximum height of the component.
   */
  heightScale: Scale;
  handleHeightScale(value: Scale): void;
  /**
   * When `layout` is `vertical`, specifies the width of the component.
   */
  widthScale: Scale;
  /**
   *  The direction of the component.
   */
  layout: Extract<"horizontal" | "vertical", Layout>;
  layoutHandler(): void;
  /**
   * Specifies the component's position. Will be flipped when the element direction is right-to-left (`"rtl"`).
   */
  position: Position;
  /**
   * When `true` and `displayMode` is not `float`, the component's content area is resizable.
   */
  resizable: boolean;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: ShellPanelMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<ShellPanelMessages>;
  onMessagesChange(): void;
  connectedCallback(): void;
  componentWillLoad(): Promise<void>;
  disconnectedCallback(): void;
  componentDidLoad(): void;
  el: HTMLCalciteShellPanelElement;
  contentWidth: number;
  contentHeight: number;
  initialContentWidth: number;
  initialContentHeight: number;
  initialClientX: number;
  initialClientY: number;
  contentEl: HTMLDivElement;
  separatorEl: HTMLDivElement;
  contentWidthMax: number;
  contentWidthMin: number;
  contentHeightMax: number;
  contentHeightMin: number;
  step: number;
  stepMultiplier: number;
  actionBars: HTMLCalciteActionBarElement[];
  defaultMessages: ShellPanelMessages;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  renderHeader(): VNode;
  render(): VNode;
  setContentWidth(width: number): void;
  updateAriaValues(): void;
  setContentHeight(height: number): void;
  updateWidths(computedStyle: CSSStyleDeclaration): void;
  updateHeights(computedStyle: CSSStyleDeclaration): void;
  storeContentEl: (contentEl: HTMLDivElement) => void;
  getKeyAdjustedSize: (event: KeyboardEvent) => number | null;
  initialKeydownWidth: (event: KeyboardEvent) => void;
  initialKeydownHeight: (event: KeyboardEvent) => void;
  separatorKeyDown: (event: KeyboardEvent) => void;
  separatorPointerMove: (event: PointerEvent) => void;
  separatorPointerUp: (event: PointerEvent) => void;
  setInitialContentHeight: () => void;
  setInitialContentWidth: () => void;
  separatorPointerDown: (event: PointerEvent) => void;
  connectSeparator: (separatorEl: HTMLDivElement) => void;
  disconnectSeparator: () => void;
  setActionBarsLayout: (actionBars: HTMLCalciteActionBarElement[]) => void;
  handleActionBarSlotChange: (event: Event) => void;
}