Layout

/**
 * Primary card container component
 */
class MatCard {
  @Input() appearance: MatCardAppearance;
  
  // Card container for content grouping
}

type MatCardAppearance = 'outlined' | 'raised';

/**
 * Card module with all card-related components
 */
class MatCardModule {
  // NgModule for card functionality including all card directives
}

// Card header section
class MatCardHeader {
  // Header area for title, subtitle, and avatar
}

// Card title
class MatCardTitle {
  // Primary title content
}

// Card subtitle
class MatCardSubtitle {
  // Secondary title content
}

// Card content area
class MatCardContent {
  // Main content area
}

// Card actions area
class MatCardActions {
  @Input() align: 'start' | 'end';
  // Action buttons area
}

// Card footer
class MatCardFooter {
  // Footer content area
}

// Card image
class MatCardImage {
  // Full-width image
}

// Card avatar image
class MatCardAvatar {
  // Avatar image in header
}

// Extra-large card image
class MatCardXlImage {
  // Extra-large image variant
}

// Large card image
class MatCardLgImage {
  // Large image variant
}

// Medium card image
class MatCardMdImage {
  // Medium image variant
}

// Small card image  
class MatCardSmImage {
  // Small image variant
}

// Card title group
class MatCardTitleGroup {
  // Groups title and subtitle together
}

/**
 * Basic list container
 */
class MatList {
  @Input() disableRipple: boolean;
  
  // Basic list for read-only content
}

/**
 * Interactive action list
 */
class MatActionList {
  @Input() disableRipple: boolean;
  
  // List with clickable items
}

/**
 * Navigation list for routing
 */
class MatNavList {
  @Input() disableRipple: boolean;
  
  // Navigation-focused list with routing support
}

/**
 * Multi-selectable list
 */
class MatSelectionList {
  @Input() compareWith: (o1: any, o2: any) => boolean;
  @Input() disabled: boolean;
  @Input() disableRipple: boolean;
  @Input() multiple: boolean;
  @Input() color: ThemePalette;
  
  @Output() readonly selectionChange: EventEmitter<MatSelectionListChange>;
  
  readonly options: QueryList<MatListOption>;
  readonly selectedOptions: SelectionModel<MatListOption>;
  
  selectAll(): void;
  deselectAll(): void;
}

/**
 * Selectable list item
 */
class MatListOption {
  @Input() value: any;
  @Input() disabled: boolean;
  @Input() selected: boolean;
  @Input() color: ThemePalette;
  @Input() togglePosition: MatListOptionTogglePosition;
  @Input() disableRipple: boolean;
  @Input() checkboxPosition: MatListOptionCheckboxPosition; // Deprecated
  
  @Output() readonly toggleChange: EventEmitter<MatListOptionToggleChange>;
  
  readonly selectionList: MatSelectionList;
  
  focus(): void;
  toggle(): void;
  getHostElement(): HTMLElement;
}

/**
 * List subheader directive
 */
class MatSubheader {
  // Subheader for list sections
}

/**
 * List item line directive
 */
class MatLine {
  // Individual line in list item
}

/**
 * List option change event
 */
class MatSelectionListChange {
  constructor(
    public source: MatSelectionList,
    public options: MatListOption[]
  ) {}
}

/**
 * List option toggle change event
 */
class MatListOptionToggleChange {
  constructor(
    public source: MatListOption,
    public selected: boolean
  ) {}
}

type MatListOptionTogglePosition = 'before' | 'after';
type MatListOptionCheckboxPosition = 'before' | 'after'; // Deprecated

/**
 * List module
 */
class MatListModule {
  // NgModule for list functionality
}

/**
 * Grid list container
 */
class MatGridList {
  @Input() cols: number;
  @Input() gutterSize: string;
  @Input() rowHeight: string | number;
  
  readonly _tiles: QueryList<MatGridTile>;
}

/**
 * Individual grid tile
 */
class MatGridTile {
  @Input() colspan: number;
  @Input() rowspan: number;
  
  _gridList: MatGridList;
}

/**
 * Grid tile header
 */
class MatGridTileText {
  @Input() lines: number;
  
  // Header or footer text content
}

/**
 * Grid tile footer
 */
class MatGridTileHeaderText extends MatGridTileText {
  // Header text
}

/**
 * Grid tile footer text
 */
class MatGridTileFooterText extends MatGridTileText {  
  // Footer text
}

/**
 * Tile coordinator for internal layout (exported for harness)
 */
class ɵTileCoordinator {
  // Internal tile coordination logic
}

/**
 * Grid list module
 */
class MatGridListModule {
  // NgModule for grid list functionality
}

/**
 * Accordion container for expansion panels
 */
class MatAccordion extends CdkAccordion {
  @Input() multi: boolean;
  @Input() hideToggle: boolean;
  @Input() displayMode: MatAccordionDisplayMode;
  @Input() togglePosition: MatAccordionTogglePosition;
  
  readonly _headers: QueryList<MatExpansionPanelHeader>;
  
  openAll(): void;
  closeAll(): void;
}

/**
 * Individual expansion panel
 */
class MatExpansionPanel extends CdkAccordionItem {
  @Input() disabled: boolean;
  @Input() expanded: boolean;
  @Input() hideToggle: boolean;
  @Input() togglePosition: MatAccordionTogglePosition;
  
  @Output() readonly opened: EventEmitter<void>;
  @Output() readonly closed: EventEmitter<void>;
  @Output() readonly expandedChange: EventEmitter<boolean>;
  @Output() readonly afterExpand: EventEmitter<void>;
  @Output() readonly afterCollapse: EventEmitter<void>;
  
  readonly accordion: MatAccordion;
  
  open(): void;
  close(): void;
  toggle(): void;
  getExpandedState(): MatExpansionPanelState;
}

/**
 * Expansion panel header
 */
class MatExpansionPanelHeader {
  @Input() tabIndex: number;
  @Input() expandedHeight: string;
  @Input() collapsedHeight: string;
  
  readonly panel: MatExpansionPanel;
  readonly _parentChangeSubscription: Subscription;
  
  _toggle(): void;
  _isExpanded(): boolean;
  _getExpandedState(): string;
  _getTogglePosition(): MatAccordionTogglePosition;
  focus(origin?: FocusOrigin, options?: FocusOptions): void;
}

/**
 * Expansion panel content (lazy-loaded)
 */
class MatExpansionPanelContent {
  constructor(public _template: TemplateRef<any>);
}

/**
 * Expansion panel title directive
 */
class MatExpansionPanelTitle {
  // Panel title content
}

/**
 * Expansion panel description directive
 */
class MatExpansionPanelDescription {
  // Panel description content
}

/**
 * Expansion panel action row
 */
class MatExpansionPanelActionRow {
  // Action buttons row
}

type MatAccordionDisplayMode = 'default' | 'flat';
type MatAccordionTogglePosition = 'before' | 'after';
type MatExpansionPanelState = 'expanded' | 'collapsed';

/**
 * Expansion panel injection token
 */
const MAT_EXPANSION_PANEL: InjectionToken<any>;

/**
 * Expansion module
 */
class MatExpansionModule {
  // NgModule for expansion panel functionality
}

/**
 * Divider component for visual separation
 */
class MatDivider {
  @Input() vertical: boolean;
  @Input() inset: boolean;
  
  // Visual separator line
}

/**
 * Divider module
 */
class MatDividerModule {
  // NgModule for divider functionality
}

import { MatCardModule } from '@angular/material/card';
import { MatListModule } from '@angular/material/list';
import { MatExpansionModule } from '@angular/material/expansion';
import { MatGridListModule } from '@angular/material/grid-list';
import { MatDividerModule } from '@angular/material/divider';
import { MatButtonModule } from '@angular/material/button';
import { MatIconModule } from '@angular/material/icon';

@Component({
  imports: [
    MatCardModule, 
    MatListModule, 
    MatExpansionModule, 
    MatGridListModule,
    MatDividerModule,
    MatButtonModule,
    MatIconModule
  ],
  template: `
    <!-- Card Layout -->
    <mat-card>
      <mat-card-header>
        <div mat-card-avatar class="example-header-image"></div>
        <mat-card-title>Shiba Inu</mat-card-title>
        <mat-card-subtitle>Dog Breed</mat-card-subtitle>
      </mat-card-header>
      <img mat-card-image src="shiba2.jpg" alt="Shiba Inu">
      <mat-card-content>
        <p>The Shiba Inu is the smallest of the six original and distinct spitz breeds of dog from Japan.</p>
      </mat-card-content>
      <mat-card-actions>
        <button mat-button>LIKE</button>
        <button mat-button>SHARE</button>
      </mat-card-actions>
    </mat-card>

    <mat-divider></mat-divider>

    <!-- Grid List Layout -->
    <mat-grid-list cols="2" rowHeight="2:1">
      <mat-grid-tile>
        <mat-grid-tile-header>
          <h3 matGridTileText>One</h3>
        </mat-grid-tile-header>
      </mat-grid-tile>
      <mat-grid-tile>
        <mat-grid-tile-header>
          <h3 matGridTileText>Two</h3>
        </mat-grid-tile-header>
      </mat-grid-tile>
    </mat-grid-list>

    <!-- Selection List -->
    <mat-selection-list #shoes>
      <mat-list-option *ngFor="let shoe of typesOfShoes">
        {{shoe}}
      </mat-list-option>
    </mat-selection-list>

    <!-- Expansion Panel Accordion -->
    <mat-accordion>
      <mat-expansion-panel>
        <mat-expansion-panel-header>
          <mat-panel-title>
            Personal data
          </mat-panel-title>
          <mat-panel-description>
            Type your name and age
          </mat-panel-description>
        </mat-expansion-panel-header>
        
        <mat-form-field>
          <input matInput placeholder="First name">
        </mat-form-field>
        
        <mat-form-field>
          <input matInput placeholder="Age">
        </mat-form-field>
      </mat-expansion-panel>
      
      <mat-expansion-panel disabled>
        <mat-expansion-panel-header>
          <mat-panel-title>
            Destination
          </mat-panel-title>
          <mat-panel-description>
            Type the country name
          </mat-panel-description>
        </mat-expansion-panel-header>
      </mat-expansion-panel>
    </mat-accordion>
  `
})
export class LayoutExample {
  typesOfShoes: string[] = [
    'Boots', 'Clogs', 'Loafers', 'Moccasins', 'Sneakers'
  ];
}