Popups & Modals

/**
 * Service for opening modal dialogs
 */
class MatDialog {
  readonly openDialogs: MatDialogRef<any, any>[];
  readonly afterAllClosed: Observable<void>;
  readonly afterOpened: Subject<MatDialogRef<any>>;
  
  open<T, D = any, R = any>(
    component: ComponentType<T>,
    config?: MatDialogConfig<D>
  ): MatDialogRef<T, R>;
  
  closeAll(): void;
  getDialogById(id: string): MatDialogRef<any, any> | undefined;
}

/**
 * Reference to opened dialog
 */
class MatDialogRef<T, R = any> {
  readonly componentInstance: T;
  readonly disableClose: boolean | undefined;
  readonly id: string;
  
  readonly afterClosed: Observable<R | undefined>;
  readonly afterOpened: Observable<void>;
  readonly beforeClosed: Observable<R | undefined>;
  readonly backdropClick: Observable<MouseEvent>;
  readonly keydownEvents: Observable<KeyboardEvent>;
  
  close(dialogResult?: R): void;
  updatePosition(position?: DialogPosition): this;
  updateSize(width?: string, height?: string): this;
  addPanelClass(classes: string | string[]): this;
  removePanelClass(classes: string | string[]): this;
  getState(): MatDialogState;
}

/**
 * Dialog configuration options
 */
interface MatDialogConfig<D = any> {
  viewContainerRef?: ViewContainerRef;
  injector?: Injector;
  id?: string;
  role?: DialogRole;
  panelClass?: string | string[];
  hasBackdrop?: boolean;
  backdropClass?: string | string[];
  disableClose?: boolean;
  width?: string;
  height?: string;
  minWidth?: number | string;
  minHeight?: number | string;
  maxWidth?: number | string;
  maxHeight?: number | string;
  position?: DialogPosition;
  data?: D | null;
  direction?: Direction;
  ariaDescribedBy?: string | null;
  ariaLabelledBy?: string | null;
  ariaLabel?: string | null;
  ariaModal?: boolean;
  autoFocus?: AutoFocusTarget | string | boolean;
  restoreFocus?: boolean;
  closeOnNavigation?: boolean;
  delayFocusTrap?: boolean;
  enterAnimationDuration?: string | number;
  exitAnimationDuration?: string | number;
  closePredicate?: Function;
  scrollStrategy?: ScrollStrategy;
}

/**
 * Dialog container component
 */
class MatDialogContainer extends CdkDialogContainer {
  // Container for dialog content
}

/**
 * Dialog content directives
 */
class MatDialogTitle {
  @Input() id: string;
  // Dialog title directive
}

class MatDialogContent {
  // Main dialog content area
}

class MatDialogActions {
  @Input() align: 'start' | 'center' | 'end';
  // Dialog action buttons area
}

class MatDialogClose {
  @Input('mat-dialog-close') dialogResult: any;
  @Input('matDialogClose') _matDialogClose: any;
  @Input() type: 'submit' | 'button' | 'reset';
  
  // Directive for closing dialog
}

/**
 * Dialog position interface
 */
interface DialogPosition {
  top?: string;
  bottom?: string;
  left?: string;
  right?: string;
}

type DialogRole = 'dialog' | 'alertdialog';
type MatDialogState = 'open' | 'closing' | 'closed';
type AutoFocusTarget = 'dialog' | 'first-tabbable' | 'first-heading';

/**
 * Dialog module
 */
class MatDialogModule {
  // NgModule for dialog functionality
}

/**
 * Service for opening bottom sheets
 */
class MatBottomSheet {
  readonly _openedBottomSheetRef: MatBottomSheetRef<any, any> | null;
  
  open<T, D = any, R = any>(
    component: ComponentType<T>,
    config?: MatBottomSheetConfig<D>
  ): MatBottomSheetRef<T, R>;
  
  dismiss<R = any>(result?: R): void;
}

/**
 * Reference to opened bottom sheet
 */
class MatBottomSheetRef<T, R = any> {
  readonly componentInstance: T;
  readonly disableClose: boolean | undefined;
  
  readonly afterDismissed: Observable<R | undefined>;
  readonly afterOpened: Observable<void>;
  readonly backdropClick: Observable<MouseEvent>;
  readonly keydownEvents: Observable<KeyboardEvent>;
  
  dismiss(result?: R): void;
}

/**
 * Bottom sheet configuration options
 */
interface MatBottomSheetConfig<D = any> {
  viewContainerRef?: ViewContainerRef;
  panelClass?: string | string[];
  backdropClass?: string;
  hasBackdrop?: boolean;
  disableClose?: boolean;
  ariaLabel?: string | null;
  ariaModal?: boolean;
  closeOnNavigation?: boolean;
  autoFocus?: AutoFocusTarget | string | boolean;
  restoreFocus?: boolean;
  data?: D | null;
  direction?: Direction;
  enterAnimationDuration?: string | number;
  exitAnimationDuration?: string | number;
}

/**
 * Bottom sheet container component
 */
class MatBottomSheetContainer extends CdkDialogContainer {
  // Container for bottom sheet content
}

/**
 * Bottom sheet module
 */
class MatBottomSheetModule {
  // NgModule for bottom sheet functionality
}

/**
 * Service for displaying snack bar notifications
 */
class MatSnackBar {
  open(message: string, action?: string, config?: MatSnackBarConfig): MatSnackBarRef<SimpleSnackBar>;
  open<T>(component: ComponentType<T>, config?: MatSnackBarConfig): MatSnackBarRef<T>;
  
  openFromComponent<T, D = any>(
    component: ComponentType<T>,
    config?: MatSnackBarConfig<D>
  ): MatSnackBarRef<T>;
  
  openFromTemplate(template: TemplateRef<any>, config?: MatSnackBarConfig): MatSnackBarRef<EmbeddedViewRef<any>>;
  
  dismiss(): void;
}

/**
 * Reference to opened snack bar
 */
class MatSnackBarRef<T> {
  readonly componentInstance: T;
  
  readonly afterDismissed: Observable<MatSnackBarDismiss>;
  readonly afterOpened: Observable<void>;
  readonly onAction: Observable<void>;
  
  dismiss(): void;
  dismissWithAction(): void;
}

/**
 * Snack bar configuration options
 */
interface MatSnackBarConfig<D = any> {
  politeness?: AriaLivePoliteness;
  announcementMessage?: string;
  duration?: number;
  data?: D | null;
  horizontalPosition?: MatSnackBarHorizontalPosition;
  verticalPosition?: MatSnackBarVerticalPosition;
  panelClass?: string | string[];
  viewContainerRef?: ViewContainerRef;
}

/**
 * Simple snack bar component
 */
class MatSimpleSnackBar {
  readonly data: { message: string; action: string };
  
  action(): void;
  hasAction(): boolean;
}

/**
 * Snack bar container component
 */
class MatSnackBarContainer extends CdkPortalOutlet implements OnDestroy {
  // Container for snack bar content
}

/**
 * Snack bar content directive
 */
class MatSnackBarContent implements OnDestroy {
  // Custom snack bar content
}

/**
 * Snack bar dismiss information
 */
interface MatSnackBarDismiss {
  dismissedByAction: boolean;
}

type MatSnackBarHorizontalPosition = 'start' | 'center' | 'end' | 'left' | 'right';
type MatSnackBarVerticalPosition = 'top' | 'bottom';

/**
 * Snack bar module
 */
class MatSnackBarModule {
  // NgModule for snack bar functionality
}

/**
 * Tooltip directive for displaying contextual information on hover
 */
class MatTooltip {
  @Input('matTooltip') message: string;
  @Input('matTooltipPosition') position: TooltipPosition;
  @Input('matTooltipPositionAtOrigin') positionAtOrigin: boolean;
  @Input('matTooltipDisabled') disabled: boolean;
  @Input('matTooltipShowDelay') showDelay: number;
  @Input('matTooltipHideDelay') hideDelay: number;
  @Input('matTooltipTouchGestures') touchGestures: TooltipTouchGestures;
  @Input('matTooltipClass') tooltipClass: string | string[] | Set<string> | { [key: string]: any };
  
  readonly message: string;
  readonly tooltipDisabled: boolean;
  readonly _isTooltipVisible: boolean;
  
  show(delay?: number): void;
  hide(delay?: number): void;
  toggle(): void;
  _getOrigin(): { main: OriginConnectionPosition; fallback: OriginConnectionPosition };
  _getOverlayPosition(): { main: OverlayConnectionPosition; fallback: OverlayConnectionPosition };
}

type TooltipPosition = 'left' | 'right' | 'above' | 'below' | 'before' | 'after';
type TooltipTouchGestures = 'auto' | 'on' | 'off';

/**
 * Tooltip component (internal)
 */
class TooltipComponent {
  message: string;
  tooltipClass: string | string[] | Set<string> | { [key: string]: any };
  
  show(delay: number): void;
  hide(delay: number): void;
  afterHidden(): Observable<void>;
  isVisible(): boolean;
}

/**
 * Default tooltip options
 */
interface MatTooltipDefaultOptions {
  showDelay: number;
  hideDelay: number;
  touchendHideDelay: number;
  touchGestures?: TooltipTouchGestures;
  position?: TooltipPosition;
  positionAtOrigin?: boolean;
  disableTooltipInteractivity?: boolean;
}

/**
 * Tooltip default options injection token
 */
const MAT_TOOLTIP_DEFAULT_OPTIONS: InjectionToken<MatTooltipDefaultOptions>;

/**
 * Tooltip scroll strategy injection token  
 */
const MAT_TOOLTIP_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;

/**
 * Tooltip module
 */
class MatTooltipModule {
  // NgModule for tooltip functionality
}

import { MatDialogModule } from '@angular/material/dialog';
import { MatBottomSheetModule } from '@angular/material/bottom-sheet';
import { MatSnackBarModule } from '@angular/material/snack-bar';
import { MatTooltipModule } from '@angular/material/tooltip';
import { MatButtonModule } from '@angular/material/button';

// Dialog Example Component
@Component({
  selector: 'dialog-example',
  template: `
    <h1 mat-dialog-title>Delete file</h1>
    <div mat-dialog-content>
      <p>Would you like to delete cat.jpeg?</p>
    </div>
    <div mat-dialog-actions>
      <button mat-button (click)="onNoClick()">No Thanks</button>
      <button mat-button [mat-dialog-close]="data.animal" cdkFocusInitial>Ok</button>
    </div>
  `,
})
export class DialogExampleComponent {
  constructor(
    public dialogRef: MatDialogRef<DialogExampleComponent>,
    @Inject(MAT_DIALOG_DATA) public data: any,
  ) {}

  onNoClick(): void {
    this.dialogRef.close();
  }
}

// Bottom Sheet Example Component
@Component({
  selector: 'bottom-sheet-example',
  template: `
    <mat-nav-list>
      <a href="https://keep.google.com/" mat-list-item (click)="openLink($event)">
        <span matListItemTitle>Google Keep</span>
      </a>
      <a href="https://docs.google.com/" mat-list-item (click)="openLink($event)">
        <span matListItemTitle>Google Docs</span>
      </a>
    </mat-nav-list>
  `,
})
export class BottomSheetExampleComponent {
  constructor(private _bottomSheetRef: MatBottomSheetRef<BottomSheetExampleComponent>) {}

  openLink(event: MouseEvent): void {
    this._bottomSheetRef.dismiss();
    event.preventDefault();
  }
}

// Main Component
@Component({
  imports: [
    MatDialogModule,
    MatBottomSheetModule, 
    MatSnackBarModule,
    MatTooltipModule,
    MatButtonModule
  ],
  template: `
    <!-- Dialog Trigger -->
    <button mat-button (click)="openDialog()">Open dialog</button>
    
    <!-- Bottom Sheet Trigger -->
    <button mat-button (click)="openBottomSheet()">Open bottom sheet</button>
    
    <!-- Snack Bar Trigger -->
    <button mat-button (click)="openSnackBar('Hi there!', 'Close')">Open snack bar</button>
    
    <!-- Tooltip -->
    <button mat-button 
            matTooltip="Info about the action" 
            matTooltipPosition="above">
      Action
    </button>
  `
})
export class PopupsModalsExample {
  constructor(
    public dialog: MatDialog,
    private _bottomSheet: MatBottomSheet,
    private _snackBar: MatSnackBar
  ) {}
  
  openDialog(): void {
    const dialogRef = this.dialog.open(DialogExampleComponent, {
      width: '250px',
      data: { name: 'Example', animal: 'Cat' }
    });

    dialogRef.afterClosed().subscribe(result => {
      console.log('The dialog was closed');
      if (result) {
        console.log('Result:', result);
      }
    });
  }

  openBottomSheet(): void {
    this._bottomSheet.open(BottomSheetExampleComponent);
  }

  openSnackBar(message: string, action: string) {
    this._snackBar.open(message, action, {
      duration: 2000,
    });
  }
}