Navigation

/**
 * Container for headers, navigation, and actions
 */
class MatToolbar {
  @Input() color: ThemePalette;
  
  _toolbarRows: QueryList<MatToolbarRow>;
}

/**
 * Directive for creating toolbar rows
 */
class MatToolbarRow {
  // Applied to elements that should be styled as toolbar rows
}

/**
 * Toolbar module
 */
class MatToolbarModule {
  // NgModule for toolbar functionality
}

/**
 * Sidenav container that manages sidenav and content areas
 */
class MatSidenavContainer {
  @Input() autosize: boolean;
  @Input() hasBackdrop: boolean | null;
  
  @Output() readonly backdropClick: EventEmitter<void>;
  
  readonly scrollable: CdkScrollable;
  
  open(): Promise<MatDrawerToggleResult>;
  close(): Promise<MatDrawerToggleResult>;
}

/**
 * Side navigation panel component
 */
class MatSidenav {
  @Input() mode: MatDrawerMode;
  @Input() opened: boolean;
  @Input() position: 'start' | 'end';
  @Input() disableClose: boolean;
  @Input() autoFocus: boolean;
  @Input() restoreFocus: boolean;
  
  @Output() readonly openedChange: EventEmitter<boolean>;
  @Output() readonly openedStart: EventEmitter<void>;
  @Output() readonly closedStart: EventEmitter<void>;
  @Output() readonly onPositionChanged: EventEmitter<void>;
  
  readonly animationStarted: Observable<AnimationEvent>;
  readonly animationDone: Observable<AnimationEvent>;
  
  open(): Promise<MatDrawerToggleResult>;
  close(): Promise<MatDrawerToggleResult>;
  toggle(): Promise<MatDrawerToggleResult>;
}

/**
 * Content area of sidenav container
 */
class MatSidenavContent {
  constructor(
    changeDetectorRef: ChangeDetectorRef,
    container: MatSidenavContainer,
    elementRef: ElementRef<HTMLElement>,
    scrollDispatcher: ScrollDispatcher,
    ngZone: NgZone
  );
}

/**
 * Basic drawer component (foundation for sidenav)
 */
class MatDrawer {
  @Input() mode: MatDrawerMode;
  @Input() opened: boolean;
  @Input() position: 'start' | 'end';
  @Input() disableClose: boolean;
  @Input() autoFocus: boolean;
  @Input() restoreFocus: boolean;
  
  @Output() readonly openedChange: EventEmitter<boolean>;
  @Output() readonly openedStart: EventEmitter<void>;
  @Output() readonly closedStart: EventEmitter<void>;
  @Output() readonly onPositionChanged: EventEmitter<void>;
  
  open(): Promise<MatDrawerToggleResult>;
  close(): Promise<MatDrawerToggleResult>;
  toggle(): Promise<MatDrawerToggleResult>;
}

/**
 * Drawer container component
 */
class MatDrawerContainer {
  @Input() autosize: boolean;
  @Input() hasBackdrop: boolean | null;
  
  @Output() readonly backdropClick: EventEmitter<void>;
  
  open(): Promise<MatDrawerToggleResult>;
  close(): Promise<MatDrawerToggleResult>;
}

/**
 * Drawer content component
 */
class MatDrawerContent {
  // Content area for drawer container
}

type MatDrawerMode = 'over' | 'push' | 'side';
type MatDrawerToggleResult = 'open' | 'close';

/**
 * Default autosize setting injection token
 */
const MAT_DRAWER_DEFAULT_AUTOSIZE: InjectionToken<boolean>;

/**
 * Error function for duplicate drawers
 */
function throwMatDuplicatedDrawerError(position: string): void;

/**
 * Sidenav module
 */
class MatSidenavModule {
  // NgModule for sidenav functionality
}

/**
 * Menu panel component
 */
class MatMenu {
  @Input() xPosition: MenuPositionX;
  @Input() yPosition: MenuPositionY;
  @Input() overlapTrigger: boolean;
  @Input() hasBackdrop: boolean | undefined;
  @Input() panelClass: string;
  @Input() classList: string;
  @Input() backdropClass: string;
  
  @Output() readonly closed: EventEmitter<MenuCloseReason>;
  
  readonly panelId: string;
  readonly direction: Direction;
  
  focusFirstItem(origin?: FocusOrigin): void;
  resetActiveItem(): void;
  setElevation(depth: number): void;
}

/**
 * Menu item component
 */
class MatMenuItem {
  @Input() disabled: boolean;
  @Input() disableRipple: boolean;
  @Input() role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
  
  readonly _highlighted: boolean;
  readonly _triggersSubmenu: boolean;
  
  focus(origin?: FocusOrigin, options?: FocusOptions): void;
  getHostElement(): HTMLElement;
  getLabel(): string;
}

/**
 * Menu trigger directive
 */
class MatMenuTrigger {
  @Input() matMenuTriggerFor: MatMenuPanel | null;
  @Input() matMenuTriggerData: any;
  @Input() matMenuTriggerRestoreFocus: boolean;
  
  @Output() readonly menuOpened: EventEmitter<void>;
  @Output() readonly onMenuOpen: EventEmitter<void>;
  @Output() readonly menuClosed: EventEmitter<void>;
  @Output() readonly onMenuClose: EventEmitter<void>;
  
  readonly menuOpen: boolean;
  readonly dir: Direction;
  readonly triggersSubmenu: boolean;
  readonly menu: MatMenuPanel | null;
  
  openMenu(): void;
  closeMenu(): void;
  toggleMenu(): void;
  focus(origin?: FocusOrigin, options?: FocusOptions): void;
}

/**
 * Context menu trigger directive
 */
class MatContextMenuTrigger {
  @Input() matContextMenuTriggerFor: MatMenuPanel | null;
  @Input() matContextMenuTriggerData: any;
  
  openContextMenu(event: MouseEvent): void;
}

/**
 * Dynamic menu content directive
 */
class MatMenuContent {
  constructor(
    template: TemplateRef<any>,
    componentFactoryResolver: ComponentFactoryResolver,
    appRef: ApplicationRef,
    injector: Injector,
    viewContainerRef: ViewContainerRef,
    document: any,
    changeDetectorRef: ChangeDetectorRef
  );
}

/**
 * Menu panel interface
 */
interface MatMenuPanel<T = any> {
  xPosition: MenuPositionX;
  yPosition: MenuPositionY;
  overlapTrigger: boolean;
  templateRef: TemplateRef<any>;
  readonly panelId?: string;
  readonly closed: EventEmitter<MenuCloseReason>;
  readonly direction?: Direction;
  focusFirstItem(origin?: FocusOrigin): void;
  resetActiveItem(): void;
  setPositionClasses?(x: MenuPositionX, y: MenuPositionY): void;
}

type MenuPositionX = 'before' | 'after';
type MenuPositionY = 'above' | 'below';
type MenuCloseReason = void | 'click' | 'keydown' | 'tab';

/**
 * Default menu options
 */
interface MatMenuDefaultOptions {
  overlapTrigger: boolean;
  xPosition: MenuPositionX;
  yPosition: MenuPositionY;
  backdropClass: string;
  hasBackdrop?: boolean;
}

/**
 * Menu default options injection token
 */
const MAT_MENU_DEFAULT_OPTIONS: InjectionToken<MatMenuDefaultOptions>;

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

/**
 * Menu panel top padding constant
 */
const MENU_PANEL_TOP_PADDING = 8;

/**
 * Menu module
 */
class MatMenuModule {
  // NgModule for menu functionality
}

/**
 * Tab group container component
 */
class MatTabGroup {
  @Input() selectedIndex: number | null;
  @Input() headerPosition: MatTabHeaderPosition;
  @Input() animationDuration: string;
  @Input() disablePagination: boolean;
  @Input() disableRipple: boolean;
  @Input() color: ThemePalette;
  @Input() backgroundColor: ThemePalette;
  @Input() dynamicHeight: boolean;
  @Input() preserveContent: boolean;
  @Input() mat-stretch-tabs: boolean;
  @Input() fitInkBarToContent: boolean;
  @Input() stretchTabs: boolean;
  
  @Output() readonly selectedIndexChange: EventEmitter<number>;
  @Output() readonly focusChange: EventEmitter<MatTabChangeEvent>;
  @Output() readonly animationDone: EventEmitter<void>;
  @Output() readonly selectedTabChange: EventEmitter<MatTabChangeEvent>;
  
  readonly selectedTab: MatTab | null;
  
  realignInkBar(): void;
}

/**
 * Individual tab component
 */
class MatTab {
  @Input() textLabel: string;
  @Input() ariaLabel: string;
  @Input() ariaLabelledby: string;
  @Input() labelClass: string | string[];
  @Input() bodyClass: string | string[];
  @Input() disabled: boolean;
  @Input() isActive: boolean;
  
  readonly content: TemplateRef<any>;
  readonly position: number | null;
  readonly origin: number | null;
  
  readonly textLabel: string;
  readonly ariaLabel: string;
}

/**
 * Tab label directive for custom label content
 */
class MatTabLabel {
  constructor(public template: TemplateRef<any>);
}

/**
 * Tab content directive for lazy-loaded content
 */
class MatTabContent {
  constructor(public template: TemplateRef<any>);
}

/**
 * Tab navigation component for router integration
 */
class MatTabNav {
  @Input() backgroundColor: ThemePalette;
  @Input() disableRipple: boolean;
  @Input() color: ThemePalette;
  @Input() tabPanel: MatTabNavPanel;
  @Input() fitInkBarToContent: boolean;
  @Input() stretchTabs: boolean;
  
  readonly animationDone: Observable<void>;
  
  realignInkBar(): void;
}

/**
 * Tab nav panel component
 */
class MatTabNavPanel {
  @Input() id: string;
  
  readonly _activeTabId: string | null;
}

/**
 * Tab link directive for navigation tabs  
 */
class MatTabLink {
  @Input() disabled: boolean;
  @Input() disableRipple: boolean;
  @Input() tabIndex: number;
  @Input() active: boolean;
  @Input() id: string;
  
  readonly isActive: boolean;
  
  focus(): void;
}

/**
 * Tab change event
 */
class MatTabChangeEvent {
  constructor(
    public index: number,
    public tab: MatTab
  ) {}
}

/**
 * Tab header component
 */
class MatTabHeader {
  @Input() selectedIndex: number;
  @Input() disableRipple: boolean;
  @Input() disablePagination: boolean;
  
  @Output() readonly selectFocusedIndex: EventEmitter<number>;
  @Output() readonly indexFocused: EventEmitter<number>;
  
  focusIndex: number;
}

type MatTabHeaderPosition = 'above' | 'below';

/**
 * Tabs configuration interface
 */
interface MatTabsConfig {
  animationDuration?: string;
  disablePagination?: boolean;
  dynamicHeight?: boolean;
  contentTabIndex?: number | null;
  preserveContent?: boolean;
  fitInkBarToContent?: boolean;
  stretchTabs?: boolean;
}

/**
 * Tabs configuration injection token
 */
const MAT_TABS_CONFIG: InjectionToken<MatTabsConfig>;

/**
 * Tabs module
 */
class MatTabsModule {
  // NgModule for tabs functionality
}

/**
 * Base stepper component
 */
class MatStepper extends CdkStepper {
  @Input() disableRipple: boolean;
  @Input() color: ThemePalette;
  @Input() labelPosition: 'bottom' | 'end';
  @Input() headerPosition: 'top' | 'bottom';
  @Input() animationDuration: string;
  
  readonly _iconOverrides: Record<string, TemplateRef<MatStepperIconContext>>;
  readonly _animationDone: Subject<AnimationEvent>;
  
  _getIndicatorType(index: number, state: StepState): 'number' | 'edit' | 'done' | 'error';
}

/**
 * Horizontal stepper component
 */
class MatHorizontalStepper extends MatStepper {
  @Input() labelPosition: 'bottom' | 'end';
}

/**
 * Vertical stepper component  
 */
class MatVerticalStepper extends MatStepper {
  // Vertical layout stepper
}

/**
 * Individual step component
 */
class MatStep extends CdkStep {
  @Input() color: ThemePalette;
  
  readonly _displayDefaultIndicatorType: boolean;
}

/**
 * Step label directive
 */
class MatStepLabel extends CdkStepLabel {
  // Custom step label content
}

/**
 * Step content component for lazy loading
 */
class MatStepContent {
  constructor(public template: TemplateRef<MatStepperIconContext>);
}

/**
 * Step header component
 */
class MatStepHeader {
  @Input() color: ThemePalette;
  @Input() index: number;
  @Input() selected: boolean;
  @Input() active: boolean;
  @Input() optional: boolean;
  @Input() errorMessage: string;
  @Input() iconOverrides: Record<string, TemplateRef<MatStepperIconContext>>;
  @Input() state: StepState;
  @Input() label: string;
  @Input() disableRipple: boolean;
  
  focus(): void;
}

/**
 * Stepper navigation directives
 */
class MatStepperNext extends CdkStepperNext {
  // Next step button directive
}

class MatStepperPrevious extends CdkStepperPrevious {
  // Previous step button directive
}

/**
 * Stepper icon directive for custom icons
 */
class MatStepperIcon {
  @Input('matStepperIcon') name: StepState;
  
  constructor(public templateRef: TemplateRef<MatStepperIconContext>);
}

/**
 * Stepper internationalization service
 */
class MatStepperIntl {
  readonly changes: Subject<void>;
  
  optionalLabel: string;
  completedLabel: string;
  editableLabel: string;
}

/**
 * Context for stepper icon templates
 */
interface MatStepperIconContext {
  index: number;
  active: boolean;
  optional: boolean;
}

// Re-exported from CDK
type StepperOrientation = 'horizontal' | 'vertical';
type StepState = 'number' | 'edit' | 'done' | 'error' | string;

/**
 * Stepper module
 */
class MatStepperModule {
  // NgModule for stepper functionality
}

import { MatStepperModule } from '@angular/material/stepper';
import { MatButtonModule } from '@angular/material/button';
import { MatInputModule } from '@angular/material/input';
import { MatFormFieldModule } from '@angular/material/form-field';
import { FormBuilder, Validators } from '@angular/forms';

@Component({
  imports: [MatStepperModule, MatButtonModule, MatInputModule, MatFormFieldModule],
  template: `
    <mat-stepper linear #stepper>
      <mat-step [stepControl]="firstFormGroup">
        <form [formGroup]="firstFormGroup">
          <ng-template matStepLabel>Fill out your name</ng-template>
          <mat-form-field>
            <input matInput placeholder="Last name, First name" 
                   formControlName="firstCtrl" required>
          </mat-form-field>
          <div>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step [stepControl]="secondFormGroup">
        <form [formGroup]="secondFormGroup">
          <ng-template matStepLabel>Fill out your address</ng-template>
          <mat-form-field>
            <input matInput placeholder="Address" 
                   formControlName="secondCtrl" required>
          </mat-form-field>
          <div>
            <button mat-button matStepperPrevious>Back</button>
            <button mat-button matStepperNext>Next</button>
          </div>
        </form>
      </mat-step>
      <mat-step>
        <ng-template matStepLabel>Done</ng-template>
        You are now done.
        <div>
          <button mat-button matStepperPrevious>Back</button>
          <button mat-button (click)="stepper.reset()">Reset</button>
        </div>
      </mat-step>
    </mat-stepper>
  `
})
export class StepperExample {
  firstFormGroup = this.formBuilder.group({
    firstCtrl: ['', Validators.required]
  });
  
  secondFormGroup = this.formBuilder.group({
    secondCtrl: ['', Validators.required]
  });
  
  constructor(private formBuilder: FormBuilder) {}
}