refactor(ComponentGradingComponent): Convert to standalone (#1998)

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

@@ -7,7 +7,6 @@ import { ComponentSelectComponent } from '../classroom-monitor/component-select/
 import { StepInfoComponent } from '../classroom-monitor/step-info/step-info.component';
 import { PeerGroupGradingModule } from './peer-group-grading.module';
 import { SelectPeriodModule } from './select-period.module';
-import { ComponentGradingModule } from './component-grading.module';
 import { TeacherSummaryDisplay } from '../../assets/wise5/directives/teacher-summary-display/teacher-summary-display.component';
 import { HighchartsChartModule } from 'highcharts-angular';
 import { StudentTeacherCommonModule } from '../student-teacher-common.module';
@@ -37,6 +36,7 @@ import { RouterModule } from '@angular/router';
 import { SaveIndicatorComponent } from '../../assets/wise5/common/save-indicator/save-indicator.component';
 import { PreviewComponentComponent } from '../../assets/wise5/authoringTool/components/preview-component/preview-component.component';
 import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-tools.component';
+import { ComponentGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component';
 
 @NgModule({
   declarations: [
@@ -61,7 +61,7 @@ import { StepToolsComponent } from '../../assets/wise5/common/stepTools/step-too
     ViewComponentRevisionsComponent
   ],
   imports: [
-    ComponentGradingModule,
+    ComponentGradingComponent,
     ComponentNewWorkBadgeComponent,
     ComponentSelectComponent,
     ComponentStudentModule,

src/app/teacher/grading-common.module.ts

@@ -8,13 +8,15 @@ import { WorkgroupComponentGradingComponent } from '../../assets/wise5/classroom
 import { WorkgroupNodeStatusComponent } from '../classroom-monitor/workgroup-node-status/workgroup-node-status.component';
 import { WorkgroupSelectAutocompleteComponent } from '../classroom-monitor/workgroup-select/workgroup-select-autocomplete/workgroup-select-autocomplete.component';
 import { StudentTeacherCommonModule } from '../student-teacher-common.module';
-import { ComponentGradingModule } from './component-grading.module';
 import { StatusIconComponent } from '../classroom-monitor/status-icon/status-icon.component';
 import { NavItemProgressComponent } from '../classroom-monitor/nav-item-progress/nav-item-progress.component';
+import { ComponentGradingComponent } from '../../assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component';
+import { ComponentStateInfoComponent } from '../../assets/wise5/common/component-state-info/component-state-info.component';
 
 @NgModule({
   imports: [
-    ComponentGradingModule,
+    ComponentGradingComponent,
+    ComponentStateInfoComponent,
     EditComponentAnnotationsComponent,
     IntersectionObserverModule,
     NavItemProgressComponent,
@@ -30,7 +32,8 @@ import { NavItemProgressComponent } from '../classroom-monitor/nav-item-progress
     WorkgroupSelectAutocompleteComponent
   ],
   exports: [
-    ComponentGradingModule,
+    ComponentGradingComponent,
+    ComponentStateInfoComponent,
     EditComponentAnnotationsComponent,
     IntersectionObserverModule,
     NavItemProgressComponent,

src/assets/wise5/classroomMonitor/classroomMonitorComponents/component-grading.component.ts

@@ -10,9 +10,46 @@ import {
 } from '@angular/core';
 import { components } from '../../components/Components';
 import { TeacherProjectService } from '../../services/teacherProjectService';
+import { AiChatGradingModule } from '../../components/aiChat/ai-chat-grading/ai-chat-grading.module';
+import { AnimationGradingModule } from '../../components/animation/animation-grading/animation-grading.module';
+import { AudioOscillatorGradingModule } from '../../components/audioOscillator/audio-oscillator-grading/audio-oscillator-grading.module';
+import { ConceptMapGradingModule } from '../../components/conceptMap/concept-map-grading/concept-map-grading.module';
+import { DialogGuidanceGradingModule } from '../../components/dialogGuidance/dialog-guidance-grading/dialog-guidance-grading.module';
+import { DiscussionGradingModule } from '../../components/discussion/discussion-grading/discussion-grading.module';
+import { DrawGradingModule } from '../../components/draw/draw-grading/draw-grading.module';
+import { EmbeddedGradingModule } from '../../components/embedded/embedded-grading/embedded-grading.module';
+import { GraphGradingModule } from '../../components/graph/graph-grading/graph-grading.module';
+import { LabelGradingModule } from '../../components/label/label-grading/label-grading.module';
+import { MatchGradingModule } from '../../components/match/match-grading/match-grading.module';
+import { OpenResponseGradingModule } from '../../components/openResponse/open-response-grading/open-response-grading.module';
+import { PeerChatGradingModule } from '../../components/peerChat/peer-chat-grading/peer-chat-grading.module';
+import { ShowGroupWorkGradingModule } from '../../components/showGroupWork/show-group-work-grading/show-group-work-grading.module';
+import { TableGradingModule } from '../../components/table/table-grading/table-grading.module';
+import { ShowMyWorkGradingModule } from '../../components/showMyWork/show-my-work-grading/show-my-work-grading.module';
+import { MultipleChoiceGradingComponent } from '../../components/multipleChoice/multiple-choice-grading/multiple-choice-grading.component';
 
 @Component({
+  imports: [
+    AiChatGradingModule,
+    AnimationGradingModule,
+    AudioOscillatorGradingModule,
+    ConceptMapGradingModule,
+    DialogGuidanceGradingModule,
+    DiscussionGradingModule,
+    DrawGradingModule,
+    EmbeddedGradingModule,
+    GraphGradingModule,
+    LabelGradingModule,
+    MatchGradingModule,
+    MultipleChoiceGradingComponent,
+    OpenResponseGradingModule,
+    PeerChatGradingModule,
+    ShowGroupWorkGradingModule,
+    ShowMyWorkGradingModule,
+    TableGradingModule
+  ],
   selector: 'component-grading-component',
+  standalone: true,
   template: '<div #component></div>'
 })
 export class ComponentGradingComponent {

src/assets/wise5/classroomMonitor/classroomMonitorComponents/view-component-revisions/view-component-revisions.component.html

@@ -18,7 +18,7 @@ <h3 class="accent-1 mat-caption gray-lightest-bg component-header">
               [componentState]="revision.componentState"
               [workgroupId]="workgroupId"
               [isRevision]="true"
-            ></component-grading-component>
+            />
             <span fxFlex></span>
             <div class="component__actions__info component--grading__actions__info md-caption">
               <component-state-info [componentState]="revision.componentState" [isInactive]="true">

src/assets/wise5/classroomMonitor/classroomMonitorComponents/workgroup-component-grading/workgroup-component-grading.component.html

@@ -12,7 +12,7 @@
         [componentId]="component.id"
         [componentState]="latestComponentState"
         [workgroupId]="workgroupId"
-      ></component-grading-component>
+      />
     </ng-container>
     <span fxFlex></span>
     <div