refactor(Application): Remove remaining FlexLayout

package.json

@@ -16,7 +16,6 @@
     "@angular/compiler": "^20.1.7",
     "@angular/core": "^20.1.7",
     "@angular/elements": "^20.1.7",
-    "@angular/flex-layout": "^15.0.0-beta.42",
     "@angular/forms": "^20.1.7",
     "@angular/material": "^20.1.6",
     "@angular/platform-browser": "^20.1.7",

src/app/announcement/announcement.component.ts

@@ -8,11 +8,10 @@ import {
 } from '@angular/material/dialog';
 import { MatIconModule } from '@angular/material/icon';
 import { MatButtonModule } from '@angular/material/button';
-import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  imports: [FlexLayoutModule, MatButtonModule, MatDialogModule, MatIconModule],
+  imports: [MatButtonModule, MatDialogModule, MatIconModule],
   selector: 'app-announcement',
   styleUrl: './announcement.component.scss',
   templateUrl: './announcement.component.html'

src/app/app.component.html

@@ -1,8 +1,8 @@
 <mat-sidenav-container fullscreen [class.has-announcement]="hasAnnouncement" class="app-background">
   <mat-sidenav #mobileMenu class="primary-bg" [(opened)]="showMobileMenu" position="end">
-    <app-mobile-menu></app-mobile-menu>
+    <app-mobile-menu />
   </mat-sidenav>
-  <mat-sidenav-content fxLayout="column" (scroll)="onYPositionChange($event)">
+  <mat-sidenav-content class="!flex flex-col" (scroll)="onYPositionChange($event)">
     @if (hasAnnouncement && showHeaderAndFooter) {
       <app-announcement
         class="top-content"
@@ -13,11 +13,11 @@
     @if (showHeaderAndFooter) {
       <app-header class="dark-theme top-content" />
     }
-    <div fxFlex>
-      <router-outlet></router-outlet>
+    <div class="flex-1">
+      <router-outlet />
     </div>
     @if (showHeaderAndFooter) {
-      <app-footer></app-footer>
+      <app-footer />
     }
     @if (showHeaderAndFooter) {
       <div class="to-top dark-theme" [ngClass]="{ active: scroll, inactive: !scroll }">

src/app/app.component.spec.ts

@@ -1,7 +1,6 @@
 import { TestBed, ComponentFixture } from '@angular/core/testing';
 import { AppComponent } from './app.component';
 import { NO_ERRORS_SCHEMA } from '@angular/core';
-import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { Observable, BehaviorSubject } from 'rxjs';
 import { UtilService } from './services/util.service';
 import { Announcement } from './domain/announcement';
@@ -48,19 +47,6 @@ export class MockUtilService {
   }
 }
 
-export class MockObservableMedia {
-  isActive(query: string): boolean {
-    return false;
-  }
-
-  asObservable(): Observable<MediaChange> {
-    return new Observable((observer) => {
-      observer.next(new MediaChange());
-      observer.complete();
-    });
-  }
-}
-
 describe('AppComponent', () => {
   let component: AppComponent;
   let fixture: ComponentFixture<AppComponent>;
@@ -72,7 +58,6 @@ describe('AppComponent', () => {
       providers: [
         { provide: ConfigService, useClass: MockConfigService },
         { provide: UtilService, useClass: MockUtilService },
-        { provide: MediaObserver, useClass: MockObservableMedia },
         provideRouter([])
       ],
       schemas: [NO_ERRORS_SCHEMA]

src/app/app.component.ts

@@ -4,11 +4,11 @@ import { Router, NavigationEnd, NavigationStart } from '@angular/router';
 import { DomSanitizer } from '@angular/platform-browser';
 import { MatIconRegistry } from '@angular/material/icon';
 import { Subscription } from 'rxjs';
-import { MediaChange, MediaObserver } from '@angular/flex-layout';
 import { UtilService } from './services/util.service';
 import { ConfigService } from './services/config.service';
 import { Announcement } from './domain/announcement';
 import { environment } from '../environments/environment';
+import { BreakpointObserver } from '@angular/cdk/layout';
 declare let gtag: Function;
 
 @Component({
@@ -21,7 +21,6 @@ export class AppComponent {
   title = 'app';
   showMobileMenu: boolean = false;
   theme: string = '';
-  mediaWatcher: Subscription;
   googleAnalyticsId: string = null;
   hasAnnouncement: boolean = false;
   showDefaultMode: boolean = true;
@@ -37,13 +36,13 @@ export class AppComponent {
   };
 
   constructor(
-    private router: Router,
+    private breakpointObserver: BreakpointObserver,
+    private configService: ConfigService,
+    @Inject(DOCUMENT) private document: Document,
     iconRegistry: MatIconRegistry,
+    private router: Router,
     sanitizer: DomSanitizer,
-    utilService: UtilService,
-    media: MediaObserver,
-    private configService: ConfigService,
-    @Inject(DOCUMENT) private document: Document
+    utilService: UtilService
   ) {
     iconRegistry.addSvgIcon(
       'ki-elicit',
@@ -96,10 +95,8 @@ export class AppComponent {
     utilService.getMobileMenuState().subscribe((state) => {
       this.showMobileMenu = state;
     });
-    this.mediaWatcher = media.asObservable().subscribe((change: MediaChange[]) => {
-      if (media.isActive('gt-sm')) {
-        utilService.showMobileMenu(false);
-      }
+    this.breakpointObserver.observe(['(max-width: 40rem)']).subscribe((result) => {
+      utilService.showMobileMenu(false);
     });
     router.events.subscribe((event) => {
       utilService.showMobileMenu(false);

src/app/classroom-monitor/milestones/milestones.component.html

@@ -1,6 +1,6 @@
 <div class="view-content view-content--with-sidemenu">
   <div class="l-constrained">
-    <div fxLayout="row wrap" fxLayoutAlign="center center" fxLayoutAlign.gt-xs="start center">
+    <div class="flex flex-wrap justify-center sm:justify-center">
       @for (milestone of milestones; track milestone) {
         <mat-card
           appearance="outlined"
@@ -12,8 +12,8 @@
           (click)="showMilestoneDetails(milestone, $event)"
           (keyup.enter)="showMilestoneDetails(milestone, $event)"
         >
-          <mat-card-content fxLayout="column" fxLayoutAlign="center center">
-            <div class="milestone__title" md-truncate>{{ milestone.name }}</div>
+          <mat-card-content class="!flex flex-col items-center justify-items-center">
+            <div class="milestone__title center" md-truncate>{{ milestone.name }}</div>
             <div class="milestone__progress mat-app-background">
               <mat-progress-spinner
                 diameter="96"
@@ -22,9 +22,7 @@
                 [ngClass]="{ success: milestone.percentageCompleted === 100 }"
               ></mat-progress-spinner>
               <div
-                class="milestone__progress__percent mat-subtitle-2"
-                fxLayout="row"
-                fxLayoutAlign="center center"
+                class="milestone__progress__percent mat-subtitle-2 flex justify-center items-center"
               >
                 @if (milestone.percentageCompleted < 100) {
                   <span>{{ milestone.percentageCompleted }}%</span>
@@ -34,7 +32,7 @@
                 }
               </div>
             </div>
-            <p class="text-secondary" i18n>
+            <p class="text-secondary center" i18n>
               {{ milestone.numberOfStudentsCompleted }}/{{ milestone.numberOfStudentsInRun }} teams
               completed
             </p>

src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.html

@@ -1,4 +1,4 @@
-<span fxLayout="row" fxLayoutAlign="start center">
+<span class="flex justify-start items-center">
   <span class="progress-wrapper" tabindex="0">
     @if (period.periodId === -1) {
       <mat-progress-bar
@@ -20,7 +20,7 @@
       />
     }
   </span>
-  <span class="nav-item__progress-value md-body-2 text-secondary" hide-xs
+  <span class="nav-item__progress-value md-body-2 text-secondary hidden md:block"
     >{{ nodeCompletion }}%</span
   >
 </span>

src/app/classroom-monitor/nav-item-progress/nav-item-progress.component.ts

@@ -1,13 +1,11 @@
 import { Component, Input, ViewEncapsulation } from '@angular/core';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatProgressBarModule } from '@angular/material/progress-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  imports: [FlexLayoutModule, MatProgressBarModule, MatTooltipModule],
+  imports: [MatProgressBarModule, MatTooltipModule],
   selector: 'nav-item-progress',
-  styleUrl: 'nav-item-progress.component.scss',
   templateUrl: 'nav-item-progress.component.html'
 })
 export class NavItemProgressComponent {

src/app/classroom-monitor/step-info/step-info.component.html

@@ -1,20 +1,12 @@
-<div fxLayout="row" fxLayoutAlign="start center">
-  <node-icon [nodeId]="nodeId" size="18" fxHide.xs />
-  <span fxHide.xs>&nbsp;&nbsp;</span>
+<div class="flex justify-start items-center">
+  <node-icon [nodeId]="nodeId" size="18" class="hidden sm:block" />
+  <span class="hidden sm:block">&nbsp;&nbsp;</span>
   <span>{{ stepTitle }}</span>
   @if (hasAlert) {
-    <status-icon
-      [class]="alertIconClass"
-      [name]="alertIconName"
-      [tooltip]="alertIconLabel"
-    />
+    <status-icon [class]="alertIconClass" [name]="alertIconName" [tooltip]="alertIconLabel" />
   }
   @if (hasRubrics) {
-    <status-icon
-      class="info"
-      name="info"
-      [tooltip]="rubricIconLabel"
-    />
+    <status-icon class="info" name="info" [tooltip]="rubricIconLabel" />
   }
   @if (hasNewWork) {
     <span class="badge badge--info animate-fade" i18n>New</span>

src/app/classroom-monitor/step-info/step-info.component.ts

@@ -1,11 +1,10 @@
 import { Component, Input } from '@angular/core';
 import { TeacherProjectService } from '../../../assets/wise5/services/teacherProjectService';
-import { FlexLayoutModule } from '@angular/flex-layout';
 import { StatusIconComponent } from '../status-icon/status-icon.component';
 import { NodeIconComponent } from '../../../assets/wise5/vle/node-icon/node-icon.component';
 
 @Component({
-  imports: [FlexLayoutModule, NodeIconComponent, StatusIconComponent],
+  imports: [NodeIconComponent, StatusIconComponent],
   selector: 'step-info',
   templateUrl: 'step-info.component.html'
 })