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

Web Components for Esri's Calcite Design System.

import { EventEmitter, VNode } from "../../stencil-public-runtime";
import { ConditionalSlotComponent } from "../../utils/conditionalSlot";
import { FocusTrap, FocusTrapComponent } from "../../utils/focusTrapComponent";
import { LoadableComponent } from "../../utils/loadable";
import { OpenCloseComponent } from "../../utils/openCloseComponent";
import { Kind, Scale } from "../interfaces";
import { LocalizedComponent } from "../../utils/locale";
import { T9nComponent } from "../../utils/t9n";
import { ModalMessages } from "./assets/modal/t9n";
/**
 * @slot header - A slot for adding header text.
 * @slot content - A slot for adding the component's content.
 * @slot content-top - A slot for adding content to the component's sticky header, where content remains at the top of the component when scrolling up and down.
 * @slot content-bottom - A slot for adding content to the component's sticky footer, where content remains at the bottom of the component when scrolling up and down.
 * @slot primary - A slot for adding a primary button.
 * @slot secondary - A slot for adding a secondary button.
 * @slot back - A slot for adding a back button.
 */
export declare class Modal implements ConditionalSlotComponent, OpenCloseComponent, FocusTrapComponent, LoadableComponent, LocalizedComponent, T9nComponent {
  el: HTMLCalciteModalElement;
  /** When `true`, displays and positions the component.  */
  open: boolean;
  /** Passes a function to run before the component closes. */
  beforeClose: (el: HTMLElement) => Promise<void>;
  /** When `true`, disables the component's close button. */
  closeButtonDisabled: boolean;
  /**
   * When `true`, prevents focus trapping.
   */
  focusTrapDisabled: boolean;
  handleFocusTrapDisabled(focusTrapDisabled: boolean): void;
  /** When `true`, disables the closing of the component when clicked outside. */
  outsideCloseDisabled: boolean;
  /** When `true`, prevents the component from expanding to the entire screen on mobile devices. */
  docked: boolean;
  /** When `true`, disables the default close on escape behavior. */
  escapeDisabled: boolean;
  /** Specifies the size of the component. */
  scale: Scale;
  /** Specifies the width of the component. */
  width: Scale;
  /** Sets the component to always be fullscreen (overrides `width` and `--calcite-modal-width` / `--calcite-modal-height`). */
  fullscreen: boolean;
  /** Specifies the kind of the component (will apply to top border). */
  kind: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
  /**
   * Made into a prop for testing purposes only
   *
   * @internal
   */
  messages: ModalMessages;
  /**
   * Use this property to override individual strings used by the component.
   */
  messageOverrides: Partial<ModalMessages>;
  onMessagesChange(): void;
  /**
   * This internal property, managed by a containing calcite-shell, is used
   * to inform the component if special configuration or styles are needed
   *
   * @internal
   */
  slottedInShell: boolean;
  componentWillLoad(): Promise<void>;
  componentDidLoad(): void;
  connectedCallback(): void;
  disconnectedCallback(): void;
  render(): VNode;
  renderFooter(): VNode;
  renderContentTop(): VNode;
  renderContentBottom(): VNode;
  renderCloseButton(): VNode;
  renderStyle(): VNode;
  modalContent: HTMLDivElement;
  private mutationObserver;
  private cssVarObserver;
  titleId: string;
  openTransitionProp: string;
  transitionEl: HTMLDivElement;
  focusTrap: FocusTrap;
  closeButtonEl: HTMLButtonElement;
  contentId: string;
  cssWidth: string | number;
  cssHeight: string | number;
  hasFooter: boolean;
  hasContentTop: boolean;
  hasContentBottom: boolean;
  /**
   * We use internal variable to make sure initially open modal can transition from closed state when rendered
   *
   * @private
   */
  isOpen: boolean;
  effectiveLocale: string;
  effectiveLocaleChange(): void;
  defaultMessages: ModalMessages;
  handleEscape(event: KeyboardEvent): void;
  /** Fires when the component is requested to be closed and before the closing transition begins. */
  calciteModalBeforeClose: EventEmitter<void>;
  /** Fires when the component is closed and animation is complete. */
  calciteModalClose: EventEmitter<void>;
  /** Fires when the component is added to the DOM but not rendered, and before the opening transition begins. */
  calciteModalBeforeOpen: EventEmitter<void>;
  /** Fires when the component is open and animation is complete. */
  calciteModalOpen: EventEmitter<void>;
  /**
   * Sets focus on the component's "close" button (the first focusable item).
   *
   */
  setFocus(): Promise<void>;
  /**
   * Updates the element(s) that are used within the focus-trap of the component.
   */
  updateFocusTrapElements(): Promise<void>;
  /**
   * Sets the scroll top of the component's content.
   *
   * @param top
   * @param left
   */
  scrollContent(top?: number, left?: number): Promise<void>;
  private setTransitionEl;
  onBeforeOpen(): void;
  onOpen(): void;
  onBeforeClose(): void;
  onClose(): void;
  toggleModal(value: boolean): Promise<void>;
  private openEnd;
  /** Open the modal */
  private openModal;
  handleOutsideClose: () => void;
  /** Close the modal, first running the `beforeClose` method */
  close: () => Promise<void>;
  private removeOverflowHiddenClass;
  private handleMutationObserver;
  private updateFooterVisibility;
  private updateSizeCssVars;
  private contentTopSlotChangeHandler;
  private contentBottomSlotChangeHandler;
}