refactor(ComponentTypeSelectorComponent): Convert to standalone (#1824)

src/app/teacher/authoring-tool.module.ts

@@ -82,7 +82,6 @@ import { PreviewComponentButtonComponent } from '../../assets/wise5/authoringToo
     ChooseSimulationComponent,
     ComponentInfoDialogComponent,
     ComponentTypeButtonComponent,
-    ComponentTypeSelectorComponent,
     ConcurrentAuthorsMessageComponent,
     ConfigureAutomatedAssessmentComponent,
     CopyComponentButtonComponent,
@@ -115,6 +114,7 @@ import { PreviewComponentButtonComponent } from '../../assets/wise5/authoringToo
     StudentTeacherCommonModule,
     ComponentAuthoringModule,
     ComponentStudentModule,
+    ComponentTypeSelectorComponent,
     MatBadgeModule,
     MatChipsModule,
     ImportComponentModule,

src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.html

@@ -4,7 +4,7 @@ <h2 mat-dialog-title i18n>Component Info</h2>
   <component-type-selector
     [componentType]="componentType"
     (componentTypeSelectedEvent)="displayComponent($event)"
-  ></component-type-selector>
+  />
 </div>
 <mat-dialog-content class="dialog-content-scroll">
   <h3 i18n>Description:</h3>

src/assets/wise5/authoringTool/components/component-info-dialog/component-info-dialog.component.spec.ts

@@ -34,11 +34,12 @@ let outsideUrlInfo = new OutsideUrlInfo();
 describe('ComponentInfoDialogComponent', () => {
   beforeEach(async () => {
     await TestBed.configureTestingModule({
-      declarations: [ComponentInfoDialogComponent, ComponentTypeSelectorComponent],
+      declarations: [ComponentInfoDialogComponent],
       imports: [
         BrowserAnimationsModule,
         ComponentHeaderComponent,
         ComponentStudentModule,
+        ComponentTypeSelectorComponent,
         ComponentTypeServiceModule,
         HttpClientTestingModule,
         MatButtonModule,

src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html

@@ -10,12 +10,9 @@
   </button>
   <mat-form-field [subscriptSizing]="'dynamic'">
     <mat-select [(value)]="componentType" (selectionChange)="selectComponent(componentType)">
-      <mat-option
-        *ngFor="let componentTypeOption of componentTypes"
-        [value]="componentTypeOption.type"
-      >
-        {{ componentTypeOption.name }}
-      </mat-option>
+      @for (componentTypeOption of componentTypes; track componentTypeOption.type) {
+      <mat-option [value]="componentTypeOption.type">{{ componentTypeOption.name }}</mat-option>
+      }
     </mat-select>
   </mat-form-field>
   <button

src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.spec.ts

@@ -2,9 +2,6 @@ import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { ComponentTypeSelectorComponent } from './component-type-selector.component';
 import { StudentTeacherCommonServicesModule } from '../../../../../app/student-teacher-common-services.module';
 import { HttpClientTestingModule } from '@angular/common/http/testing';
-import { MatIconModule } from '@angular/material/icon';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatSelectModule } from '@angular/material/select';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { ComponentTypeSelectorHarness } from './component-type-selector.harness';
 import { TestbedHarnessEnvironment } from '@angular/cdk/testing/testbed';
@@ -21,17 +18,13 @@ let userService: UserService;
 describe('ComponentTypeSelectorComponent', () => {
   beforeEach(async () => {
     TestBed.configureTestingModule({
-      declarations: [ComponentTypeSelectorComponent],
       imports: [
         BrowserAnimationsModule,
+        ComponentTypeSelectorComponent,
         ComponentTypeServiceModule,
         HttpClientTestingModule,
-        MatFormFieldModule,
-        MatIconModule,
-        MatSelectModule,
         StudentTeacherCommonServicesModule
-      ],
-      providers: []
+      ]
     });
     fixture = TestBed.createComponent(ComponentTypeSelectorComponent);
     configService = TestBed.inject(ConfigService);

src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.ts

@@ -1,10 +1,25 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { ComponentTypeService } from '../../../services/componentTypeService';
+import { MatButtonModule } from '@angular/material/button';
+import { CommonModule } from '@angular/common';
+import { MatSelectModule } from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatIconModule } from '@angular/material/icon';
+import { FlexLayoutModule } from '@angular/flex-layout';
 
 @Component({
+  imports: [
+    CommonModule,
+    FlexLayoutModule,
+    MatButtonModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatSelectModule
+  ],
   selector: 'component-type-selector',
-  templateUrl: './component-type-selector.component.html',
-  styleUrls: ['./component-type-selector.component.scss']
+  standalone: true,
+  styleUrl: './component-type-selector.component.scss',
+  templateUrl: './component-type-selector.component.html'
 })
 export class ComponentTypeSelectorComponent {
   @Input() componentType: string;

src/messages.xlf

@@ -9873,7 +9873,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Next component type</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/components/component-type-selector/component-type-selector.component.html</context>
-          <context context-type="linenumber">25</context>
+          <context context-type="linenumber">22</context>
         </context-group>
       </trans-unit>
       <trans-unit id="bc2e854e111ecf2bd7db170da5e3c2ed08181d88" datatype="html">