refactor(AddYourOwnNode): Convert to standalone

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

@@ -12,7 +12,7 @@ import { NodeAdvancedConstraintAuthoringComponent } from '../../assets/wise5/aut
 import { ChooseComponentLocationComponent } from '../../assets/wise5/authoringTool/node/chooseComponentLocation/choose-component-location.component';
 import { AddLessonConfigureComponent } from '../../assets/wise5/authoringTool/addLesson/add-lesson-configure/add-lesson-configure.component';
 import { ChooseNewNodeTemplateComponent } from '../../assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component';
-import { AddYourOwnNode } from '../../assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component';
+import { AddYourOwnNodeComponent } from '../../assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component';
 import { ChooseAutomatedAssessmentComponent } from '../../assets/wise5/authoringTool/addNode/choose-automated-assessment/choose-automated-assessment.component';
 import { ConfigureAutomatedAssessmentComponent } from '../../assets/wise5/authoringTool/addNode/configure-automated-assessment/configure-automated-assessment.component';
 import { ChooseSimulationComponent } from '../../assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component';
@@ -81,7 +81,7 @@ const routes: Routes = [
             children: [
               {
                 path: 'add-your-own',
-                component: AddYourOwnNode
+                component: AddYourOwnNodeComponent
               },
               {
                 path: 'automated-assessment',

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

@@ -1,7 +1,7 @@
 import { NgModule } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { NgSelectModule } from '@ng-select/ng-select';
-import { AddYourOwnNode } from '../../assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component';
+import { AddYourOwnNodeComponent } from '../../assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component';
 import { ChooseNewNodeTemplateComponent } from '../../assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component';
 import { AdvancedProjectAuthoringComponent } from '../../assets/wise5/authoringTool/advanced/advanced-project-authoring.component';
 import { CardSelectorComponent } from '../../assets/wise5/authoringTool/components/card-selector/card-selector.component';
@@ -69,7 +69,6 @@ import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/c
     AddLessonChooseTemplateComponent,
     AddLessonConfigureComponent,
     AddProjectComponent,
-    AddYourOwnNode,
     AdvancedProjectAuthoringComponent,
     AuthoringToolComponent,
     AuthoringToolBarComponent,
@@ -107,6 +106,7 @@ import { ComponentTypeButtonComponent } from '../../assets/wise5/authoringTool/c
     AddComponentButtonComponent,
     AddLessonButtonComponent,
     AddStepButtonComponent,
+    AddYourOwnNodeComponent,
     ChooseNewNodeTemplateComponent,
     StudentTeacherCommonModule,
     ChooseNewComponent,

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html

@@ -2,50 +2,52 @@
   <mat-form-field appearance="fill" class="title-field">
     <mat-label i18n>Step Title</mat-label>
     <input matInput type="text" id="title" name="title" formControlName="title" required />
-    <mat-error *ngIf="addNodeFormGroup.controls['title'].hasError('required')" i18n>
-      Step Title is required
-    </mat-error>
+    @if (addNodeFormGroup.controls['title'].hasError('required')) {
+      <mat-error i18n> Step Title is required </mat-error>
+    }
   </mat-form-field>
   <h5 i18n>Select components to add to your new step (optional):</h5>
   <div fxLayout="column" fxLayout.gt-sm="row">
     <div class="initial-components notice-bg-bg" fxFlex="100" fxFlex.gt-sm="25">
-      <div *ngIf="initialComponents.length == 0" class="mat-small" i18n>No components added</div>
-      <div
-        class="component-list"
-        *ngIf="initialComponents.length > 0"
-        cdkDropList
-        (cdkDropListDropped)="drop($event)"
-      >
-        <div
-          class="component-list-item"
-          *ngFor="let component of initialComponents; let i = index"
-          cdkDrag
-          fxLayout="row"
-          fxLayoutAlign="start center"
-          fxLayoutGap="8px"
-        >
-          <mat-icon class="secondary-text">reorder</mat-icon>
-          <span class="mat-small">{{ component.name }}</span>
-          <span fxFlex></span>
-          <button
-            mat-icon-button
-            (click)="deleteComponent(i)"
-            i18n-aria-label
-            aria-label="Delete component"
-          >
-            <mat-icon class="secondary-text">close</mat-icon>
-          </button>
+      @if (initialComponents.length == 0) {
+        <div class="mat-small" i18n>No components added</div>
+      }
+      @if (initialComponents.length > 0) {
+        <div class="component-list" cdkDropList (cdkDropListDropped)="drop($event)">
+          @for (component of initialComponents; track component.id) {
+            <div
+              class="component-list-item"
+              cdkDrag
+              fxLayout="row"
+              fxLayoutAlign="start center"
+              fxLayoutGap="8px"
+            >
+              <mat-icon class="secondary-text">reorder</mat-icon>
+              <span class="mat-small">{{ component.name }}</span>
+              <span fxFlex></span>
+              <button
+                mat-icon-button
+                (click)="deleteComponent(i)"
+                i18n-aria-label
+                aria-label="Delete component"
+              >
+                <mat-icon class="secondary-text">close</mat-icon>
+              </button>
+            </div>
+          }
         </div>
-      </div>
+      }
     </div>
     <div fxFlex="100" fxFlex.gt-sm="75">
       <div class="component-types" fxLayout="row wrap" fxLayoutAlign="start start">
-        <div class="component-type" *ngFor="let componentType of componentTypes">
-          <component-type-button
-            [componentType]="componentType.type"
-            (componentSelectedEvent)="addComponent(componentType)"
-          />
-        </div>
+        @for (componentType of componentTypes; track componentType.type) {
+          <div class="component-type">
+            <component-type-button
+              [componentType]="componentType.type"
+              (componentSelectedEvent)="addComponent(componentType)"
+            />
+          </div>
+        }
       </div>
       <p class="info mat-small" i18n>
         *Note: You can always add or remove content later by editing the step.
@@ -73,7 +75,9 @@ <h5 i18n>Select components to add to your new step (optional):</h5>
         (click)="submit()"
         class="button--progress"
       >
-        <mat-progress-bar *ngIf="submitting" mode="indeterminate"/>
+        @if (submitting) {
+          <mat-progress-bar mode="indeterminate" />
+        }
         <ng-container i18n>Submit</ng-container>
       </button>
     </div>

src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts

@@ -1,16 +1,47 @@
 import { Component } from '@angular/core';
-import { CdkDragDrop, moveItemInArray } from '@angular/cdk/drag-drop';
-import { FormControl, FormGroup, Validators, FormBuilder } from '@angular/forms';
+import { CdkDragDrop, DragDropModule, moveItemInArray } from '@angular/cdk/drag-drop';
+import {
+  FormControl,
+  FormGroup,
+  Validators,
+  FormBuilder,
+  FormsModule,
+  ReactiveFormsModule
+} from '@angular/forms';
 import { ComponentTypeService } from '../../../services/componentTypeService';
-import { ActivatedRoute, Router } from '@angular/router';
+import { ActivatedRoute, Router, RouterModule } from '@angular/router';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { CommonModule } from '@angular/common';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatIconModule } from '@angular/material/icon';
+import { ComponentTypeButtonComponent } from '../../components/component-type-button/component-type-button.component';
+import { MatDividerModule } from '@angular/material/divider';
+import { MatButtonModule } from '@angular/material/button';
+import { MatProgressBarModule } from '@angular/material/progress-bar';
+import { MatInputModule } from '@angular/material/input';
 
 @Component({
-  selector: 'add-your-own-node',
+  imports: [
+    CommonModule,
+    ComponentTypeButtonComponent,
+    DragDropModule,
+    FlexLayoutModule,
+    FormsModule,
+    MatButtonModule,
+    MatDividerModule,
+    MatFormFieldModule,
+    MatIconModule,
+    MatInputModule,
+    MatProgressBarModule,
+    ReactiveFormsModule,
+    RouterModule
+  ],
+  standalone: true,
   styleUrls: ['add-your-own-node.component.scss', '../../add-content.scss'],
   templateUrl: 'add-your-own-node.component.html'
 })
-export class AddYourOwnNode {
+export class AddYourOwnNodeComponent {
   protected addNodeFormGroup: FormGroup = this.fb.group({
     title: new FormControl($localize`New Step`, [Validators.required])
   });
@@ -25,11 +56,12 @@ export class AddYourOwnNode {
     private projectService: TeacherProjectService,
     private route: ActivatedRoute,
     private router: Router
-  ) {}
+  ) {
+    this.componentTypes = this.componentTypeService.getComponentTypes();
+  }
 
-  ngOnInit() {
+  ngOnInit(): void {
     this.targetId = history.state.targetId;
-    this.componentTypes = this.componentTypeService.getComponentTypes();
   }
 
   protected addComponent(componentType: any): void {

src/messages.xlf

@@ -449,7 +449,7 @@
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html</context>
-          <context context-type="linenumber">68</context>
+          <context context-type="linenumber">70</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-new-node-template/choose-new-node-template.component.html</context>
@@ -1560,7 +1560,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html</context>
-          <context context-type="linenumber">77</context>
+          <context context-type="linenumber">81</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/choose-simulation/choose-simulation.component.html</context>
@@ -9585,7 +9585,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html</context>
-          <context context-type="linenumber">64,66</context>
+          <context context-type="linenumber">66,68</context>
         </context-group>
       </trans-unit>
       <trans-unit id="891f639ffcf9d31aea80ea7e8e428a6597b059b3" datatype="html">
@@ -9595,11 +9595,11 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
           <context context-type="linenumber">3</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="e317fe2ce2ecd11a721eb3eab93eb4dd791485d5" datatype="html">
+      <trans-unit id="ca6422c7d869dd959da5fb47d9c438c65c09ffa8" datatype="html">
         <source> Step Title is required </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html</context>
-          <context context-type="linenumber">5,7</context>
+          <context context-type="linenumber">6</context>
         </context-group>
       </trans-unit>
       <trans-unit id="9ff39e032b731c11440ba7faf5eacbbc0ec420e7" datatype="html">
@@ -9613,28 +9613,28 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>No components added</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html</context>
-          <context context-type="linenumber">12</context>
+          <context context-type="linenumber">13</context>
         </context-group>
       </trans-unit>
       <trans-unit id="1b3029e37dfc811eb2cc8cd5511570177ecae18a" datatype="html">
         <source>Delete component</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html</context>
-          <context context-type="linenumber">34</context>
+          <context context-type="linenumber">32</context>
         </context-group>
       </trans-unit>
       <trans-unit id="607d049f4ce5dc907dd7a1cfdac6241e79eb1917" datatype="html">
         <source> *Note: You can always add or remove content later by editing the step. </source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.html</context>
-          <context context-type="linenumber">50,52</context>
+          <context context-type="linenumber">52,54</context>
         </context-group>
       </trans-unit>
       <trans-unit id="6009535360963985115" datatype="html">
         <source>New Step</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/authoringTool/addNode/add-your-own-node/add-your-own-node.component.ts</context>
-          <context context-type="linenumber">15</context>
+          <context context-type="linenumber">46</context>
         </context-group>
       </trans-unit>
       <trans-unit id="909afacc2d9d62ea57b1ba4b1e70b6c4314f668d" datatype="html">