refactor(PauseScreensMenu): Convert to standalone

src/app/teacher/classroom-monitor.module.ts

@@ -47,7 +47,6 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     NotebookGradingComponent,
     NotebookWorkgroupGradingComponent,
     NotificationsMenuComponent,
-    PauseScreensMenuComponent,
     StepItemComponent,
     StudentGradingComponent,
     StudentGradingToolsComponent,
@@ -67,6 +66,7 @@ import { SelectPeriodComponent } from '../../assets/wise5/classroomMonitor/class
     ManageStudentsModule,
     MilestoneModule,
     NavItemScoreComponent,
+    PauseScreensMenuComponent,
     PeerGroupGradingModule,
     PreviewComponentComponent,
     ProjectProgressComponent,

src/assets/wise5/classroomMonitor/classroomMonitorComponents/pause-screens-menu/pause-screens-menu.component.html

@@ -21,17 +21,18 @@
     >
       All Periods
     </mat-slide-toggle>
-    <mat-divider></mat-divider>
-    <mat-slide-toggle
-      *ngFor="let period of periods"
-      class="mat-primary account-menu__control"
-      aria-label="Pause student screens (Period: {{ period.periodName }})"
-      i18n-aria-label
-      [(ngModel)]="period.paused"
-      (ngModelChange)="togglePeriod(period)"
-      i18n
-    >
-      Period: {{ period.periodName }}
-    </mat-slide-toggle>
+    <mat-divider />
+    @for (period of periods; track period.periodId) {
+      <mat-slide-toggle
+        class="mat-primary account-menu__control"
+        aria-label="Pause student screens (Period: {{ period.periodName }})"
+        i18n-aria-label
+        [(ngModel)]="period.paused"
+        (ngModelChange)="togglePeriod(period)"
+        i18n
+      >
+        Period: {{ period.periodName }}
+      </mat-slide-toggle>
+    }
   </div>
 </div>

src/assets/wise5/classroomMonitor/classroomMonitorComponents/pause-screens-menu/pause-screens-menu.component.ts

@@ -1,20 +1,38 @@
 import { Component } from '@angular/core';
 import { TeacherDataService } from '../../../services/teacherDataService';
 import { TeacherPauseScreenService } from '../../../services/teacherPauseScreenService';
+import { CommonModule } from '@angular/common';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatSlideToggleModule } from '@angular/material/slide-toggle';
+import { MatIconModule } from '@angular/material/icon';
+import { MatToolbarModule } from '@angular/material/toolbar';
+import { MatDividerModule } from '@angular/material/divider';
+import { FormsModule } from '@angular/forms';
 
 class Period {
   paused: boolean;
   periodId: number;
+  periodName: string;
 }
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    FormsModule,
+    MatDividerModule,
+    MatIconModule,
+    MatSlideToggleModule,
+    MatToolbarModule
+  ],
   selector: 'pause-screens-menu',
-  styleUrls: ['./pause-screens-menu.component.scss'],
+  standalone: true,
+  styleUrl: './pause-screens-menu.component.scss',
   templateUrl: './pause-screens-menu.component.html'
 })
 export class PauseScreensMenuComponent {
-  allPeriodsPaused: boolean;
-  periods: Period[];
+  protected allPeriodsPaused: boolean;
+  protected periods: Period[];
 
   constructor(
     private dataService: TeacherDataService,
@@ -23,11 +41,11 @@ export class PauseScreensMenuComponent {
     this.periods = this.dataService.getPeriods().filter((period) => period.periodId !== -1);
   }
 
-  togglePeriod(period: Period): void {
+  protected togglePeriod(period: Period): void {
     this.pauseScreenService.pauseScreensChanged(period.periodId, period.paused);
   }
 
-  toggleAllPeriods(): void {
+  protected toggleAllPeriods(): void {
     this.periods.forEach((period) => {
       this.pauseScreenService.pauseScreensChanged(period.periodId, this.allPeriodsPaused);
     });

src/assets/wise5/classroomMonitor/classroomMonitorComponents/shared/top-bar/top-bar.component.spec.ts

@@ -1,18 +1,14 @@
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { FormsModule } from '@angular/forms';
-import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
 import { MatListModule } from '@angular/material/list';
 import { MatMenuModule } from '@angular/material/menu';
-import { MatSlideToggleModule } from '@angular/material/slide-toggle';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ConfigService } from '../../../../services/configService';
 import { NotificationService } from '../../../../services/notificationService';
 import { ClassroomMonitorTestingModule } from '../../../classroom-monitor-testing.module';
 import { PauseScreensMenuComponent } from '../../pause-screens-menu/pause-screens-menu.component';
 import { NotificationsMenuComponent } from '../notifications-menu/notifications-menu.component';
-
 import { TopBarComponent } from './top-bar.component';
 
 describe('TopBarComponent', () => {
@@ -21,15 +17,13 @@ describe('TopBarComponent', () => {
 
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [NotificationsMenuComponent, PauseScreensMenuComponent, TopBarComponent],
+      declarations: [NotificationsMenuComponent, TopBarComponent],
       imports: [
         ClassroomMonitorTestingModule,
-        FormsModule,
-        MatDividerModule,
+        PauseScreensMenuComponent,
         MatIconModule,
         MatListModule,
         MatMenuModule,
-        MatSlideToggleModule,
         MatToolbarModule,
         MatTooltipModule
       ]

src/messages.xlf

@@ -14404,7 +14404,7 @@ The branches will be removed but the steps will remain in the unit.</source>
           <context context-type="linenumber">28</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="17fab40eb78ceec55d9a0884e132fc2dd9f70e51" datatype="html">
+      <trans-unit id="ae01e13f07e3e6c87e05fdcd39228e846ec19532" datatype="html">
         <source> Period: <x id="INTERPOLATION" equiv-text="{{ period.periodName }}"/> </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/classroomMonitor/classroomMonitorComponents/pause-screens-menu/pause-screens-menu.component.html</context>