course-item.component.html

<div
  class="course-item {{ disabled ? 'disabled' : '' }} {{ status }}"
  isFocusable="true"
  isTabbable="true"
  tabindex="0"
  (click)="openCourseDetailsDialog()"
  (keyup)="detectEnter($event)">
  <div fxLayout="row" fxLayoutAlign="space-between start">
    <div
      fxLayout="column"
      fxLayoutAlign="space-between start"
      fxFlex="80"
      aria-labelledby="courseMenu"
      aria-haspopup="true">
      <div fxLayout="row" fxLayoutAlign="start center">
        <div class="icon-number-wrapper">
          <p
            cdkFocusRegionStart
            class="course-number"
            [ngClass]="{ strikethrough: isStruckthrough }">
            {{ course | courseDescription }}
          </p>
          <span [ngSwitch]="status">
            <i
              *ngSwitchCase="'InProgress'"
              class="material-icons in-progress-icon"
              alt="Course in progress"
              aria-label="Course in progress"
              matTooltip="Course in progress"
              matTooltipPosition="above">
              check_circle
            </i>
            <i
              *ngSwitchCase="'Waitlisted'"
              class="material-icons problem-icon"
              alt="Course is waitlisted"
              aria-label="Course is waitlisted"
              matTooltip="Course is waitlisted"
              matTooltipPosition="above">
              report_problem
            </i>
            <i
              *ngSwitchCase="'Incomplete'"
              class="material-icons cancel-icon"
              alt="Course is incomplete"
              aria-label="Course is incomplete"
              matTooltip="Course is incomplete"
              matTooltipPosition="above">
              cancel
            </i>
            <i
              *ngSwitchCase="'NotOfferedInTerm'"
              class="material-icons error-icon"
              alt="Course not offered in term"
              aria-label="Course is not offered in term"
              matTooltip="Course is not offered in term"
              matTooltipPosition="above">
              error
            </i>
            <i
              *ngSwitchCase="'NoLongerOffered'"
              class="material-icons not-offered-icon"
              alt="Course no longer offered"
              aria-label="Course no longer offered"
              matTooltip="Course no longer offered"
              matTooltipPosition="above">
              remove
            </i>
          </span>
        </div>
      </div>
      <div fxLayout="row" fxLayoutAlign="start center">
        <p class="course-title" [ngClass]="{ strikethrough: isStruckthrough }">
          {{ course.title }}
        </p>
      </div>
    </div>

    <div fxLayout="column" fxLayoutAlign="space-between end" fxFlex="20">
      <div *ngIf="!disabled" fxLayout="row" fxLayoutAlign="end center">
        <button
          class="course-item-menu-button"
          cseClickStopPropigation
          mat-icon-button
          aria-label="Open course menu"
          [matMenuTriggerFor]="courseMenu"
          (menuOpened)="onMenuOpen()">
          <mat-icon
            aria-label="Course menu"
            alt="Course menu"
            matTooltip="Course menu"
            matTooltipPosition="right">
            more_horiz
          </mat-icon>
        </button>
        <mat-menu
          #courseMenu="matMenu"
          class="course-item-menu"
          isFocusable="true"
          isTabbable="true">
          <button
            mat-menu-item
            (click)="openCourseDetailsDialog()"
            aria-label="Open dialog to see course details">
            Course Details
          </button>
          <button
            mat-menu-item
            [matMenuTriggerFor]="academicYearsGroup"
            aria-label="Select to move this course to a different term">
            Move
          </button>
          <mat-menu #academicYearsGroup="matMenu" class="course-item-submenu">
            <button
              mat-menu-item
              *ngFor="let term of (droppableTermCodes$ | async)"
              aria-labelledby="Move course to this term"
              (click)="onMove(term)">
              {{ term | getTermDescription }}
            </button>
          </mat-menu>
          <button
            mat-menu-item
            aria-label="Move this course to Saved for later"
            *ngIf="type !== 'saved'"
            (click)="onSaveForLater()">
            Save for later
          </button>
          <button
            mat-menu-item
            aria-label="Remove this course from my plan"
            *ngIf="type !== 'search'"
            (click)="onRemove()">
            Remove
          </button>
        </mat-menu>
      </div>
      <div *ngIf="disabled" fxLayout="row" fxLayoutAlign="end center">
        <p>{{ course.grade || '&nbsp;' }}</p>
      </div>
      <div fxLayout="row" fxLayoutAlign="end center">
        <p *ngIf="type !== 'saved'"
          class="course-credits"
          cdkFocusRegionEnd
          aria-label="Total number of credits in term">
          <ng-container *ngIf="course.credits !== undefined || course.creditRange !== undefined">
            {{ course.credits ? course.credits : course.creditRange }} Cr
          </ng-container>
        </p>
      </div>
    </div>
  </div>
</div>