Class Modal

core/src/components/modal/modal.tsx:77–1671

  shadow: true,
})
export class Modal implements ComponentInterface, OverlayInterface {
  private readonly lockController = createLockController();
  private readonly triggerController = createTriggerController();
  private gesture?: Gesture;
  private coreDelegate: FrameworkDelegate = CoreDelegate();
  private sheetTransition?: Promise<any>;
  @State() private isSheetModal = false;
  /**
   * The breakpoint value that has been committed for a sheet modal.
   * This represents the modal's resting state when it is not being dragged
   * or animating toward a new position.
   */
  private currentBreakpoint?: number;
  private wrapperEl?: HTMLElement;
  private backdropEl?: HTMLIonBackdropElement;
  private dragHandleEl?: HTMLButtonElement;
  private sortedBreakpoints?: number[];
  private keyboardOpenCallback?: () => void;
  private moveSheetToBreakpoint?: (options: MoveSheetToBreakpointOptions) => Promise<void>;
  private inheritedAttributes: Attributes = {};
  private statusBarStyle?: StatusBarStyle;

  private inline = false;
  private workingDelegate?: FrameworkDelegate;

  // Reference to the user's provided modal content
  private usersElement?: HTMLElement;

  // Whether or not modal is being dismissed via gesture
  private gestureAnimationDismissing = false;

  // View transition properties for handling portrait/landscape switches
  private currentViewIsPortrait?: boolean;
  private viewTransitionAnimation?: Animation;
  private resizeTimeout?: any;

  // Mutation observer to watch for parent removal
  private parentRemovalObserver?: MutationObserver;
  // Cached original parent from before modal is moved to body during presentation
  private cachedOriginalParent?: HTMLElement;
  // Cached ion-page ancestor for child route passthrough
  private cachedPageParent?: HTMLElement | null;

  lastFocus?: HTMLElement;
  animation?: Animation;

  @State() presented = false;

  @Element() el!: HTMLIonModalElement;

  /** @internal */
  @Prop() hasController = false;

  /** @internal */
  @Prop() overlayIndex!: number;

  /** @internal */
  @Prop() delegate?: FrameworkDelegate;