refactor(MatchChoiceItem): Convert to standalone

src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.spec.ts

@@ -1,19 +1,16 @@
-import { NO_ERRORS_SCHEMA } from '@angular/core';
 import { ComponentFixture, TestBed } from '@angular/core/testing';
-import { DeleteChoiceButton } from './delete-choice-button.component';
+import { DeleteChoiceButtonComponent } from './delete-choice-button.component';
 
-let component: DeleteChoiceButton;
-let fixture: ComponentFixture<DeleteChoiceButton>;
+let component: DeleteChoiceButtonComponent;
+let fixture: ComponentFixture<DeleteChoiceButtonComponent>;
 
 describe('DeleteChoiceButtonComponent', () => {
   beforeEach(() => {
     TestBed.configureTestingModule({
-      imports: [],
-      declarations: [DeleteChoiceButton],
-      providers: [],
-      schemas: [NO_ERRORS_SCHEMA]
+      imports: [DeleteChoiceButtonComponent],
+      providers: []
     });
-    fixture = TestBed.createComponent(DeleteChoiceButton);
+    fixture = TestBed.createComponent(DeleteChoiceButtonComponent);
     component = fixture.componentInstance;
     component.buckets = [{ items: [{ id: 1 }, { id: 2 }] }, { items: [{ id: 3 }] }];
     component.item = { id: 2 };

src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.ts

@@ -1,33 +1,51 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @Component({
+  imports: [MatIconModule, MatTooltipModule],
   selector: 'delete-choice-button',
-  templateUrl: 'delete-choice-button.component.html',
-  styleUrls: ['delete-choice-button.component.scss']
+  standalone: true,
+  styles: `
+    .mat-mdc-icon-button {
+      height: 24px;
+      width: 24px;
+      line-height: 24px;
+    }
+  `,
+  template: `
+    <button
+      mat-icon-button
+      (click)="deleteChoice()"
+      [disabled]="isDisabled"
+      matTooltip="Delete item"
+      matTooltipPosition="above"
+      i18n-matTooltip
+    >
+      <mat-icon>clear</mat-icon>
+    </button>
+  `
 })
-export class DeleteChoiceButton {
-  @Input()
-  buckets: any;
+export class DeleteChoiceButtonComponent {
+  @Input() buckets: any;
 
-  @Input()
-  isDisabled: boolean;
+  @Input() isDisabled: boolean;
 
-  @Input()
-  item: any;
+  @Input() item: any;
 
-  @Output()
-  onItemDeleted = new EventEmitter<void>();
+  @Output() onItemDeleted = new EventEmitter<void>();
 
   deleteChoice(): void {
     if (confirm($localize`Are you sure you want to delete this item?`)) {
-      for (const bucket of this.buckets) {
-        const items = bucket.items;
-        for (let i = 0; i < items.length; i++) {
-          if (items[i].id === this.item.id) {
-            items.splice(i, 1);
+      this.buckets.forEach((bucket) => {
+        let i = 0;
+        bucket.items.forEach((bucketItem) => {
+          if (bucketItem.id === this.item.id) {
+            bucket.items.splice(i, 1);
           }
-        }
-      }
+          i++;
+        });
+      });
       this.onItemDeleted.next();
     }
   }

src/assets/wise5/components/match/match-choice-item/match-choice-item.component.html

@@ -1,29 +1,37 @@
 <mat-card appearance="outlined" class="match-item">
   <div fxLayout="row" fxLayoutGap="4px">
-    <mat-icon *ngIf="!isDisabled" class="text-disabled">drag_indicator</mat-icon>
+    @if (!isDisabled) {
+      <mat-icon class="text-disabled">drag_indicator</mat-icon>
+    }
     <div class="item-content" [innerHTML]="item.value"></div>
-    <span fxFlex *ngIf="item.studentCreated"></span>
-    <delete-choice-button
-      *ngIf="item.studentCreated"
-      [buckets]="buckets"
-      [isDisabled]="isDisabled"
-      [item]="item"
-      (onItemDeleted)="onStudentDataChanged.next()"
-    ></delete-choice-button>
-  </div>
-  <div
-    *ngIf="item.feedback"
-    class="feedback mat-small text-secondary-bg"
-    fxLayout="row"
-    fxLayoutAlign="start center"
-    fxLayoutGap="4px"
-    [ngClass]="{
-      'success-bg': item.status === 'correct',
-      'info-bg': item.status === 'warn',
-      'warn-bg': item.status === 'incorrect'
-    }"
-  >
-    <match-status-icon *ngIf="item.status" [status]="item.status" />
-    <div [innerHTML]="item.feedback"></div>
+    @if (item.studentCreated) {
+      <span fxFlex></span>
+    }
+    @if (item.studentCreated) {
+      <delete-choice-button
+        [buckets]="buckets"
+        [isDisabled]="isDisabled"
+        [item]="item"
+        (onItemDeleted)="onStudentDataChanged.next()"
+      />
+    }
   </div>
+  @if (item.feedback) {
+    <div
+      class="feedback mat-small text-secondary-bg"
+      fxLayout="row"
+      fxLayoutAlign="start center"
+      fxLayoutGap="4px"
+      [ngClass]="{
+        'success-bg': item.status === 'correct',
+        'info-bg': item.status === 'warn',
+        'warn-bg': item.status === 'incorrect'
+      }"
+    >
+      @if (item.status) {
+        <match-status-icon [status]="item.status" />
+      }
+      <div [innerHTML]="item.feedback"></div>
+    </div>
+  }
 </mat-card>

src/assets/wise5/components/match/match-choice-item/match-choice-item.component.ts

@@ -1,24 +1,34 @@
 import { Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import { DeleteChoiceButtonComponent } from '../delete-choice-button/delete-choice-button.component';
+import { FlexLayoutModule } from '@angular/flex-layout';
+import { MatchStatusIconComponent } from '../match-status-icon/match-status-icon.component';
+import { MatIconModule } from '@angular/material/icon';
+import { MatCardModule } from '@angular/material/card';
+import { NgClass } from '@angular/common';
 
 @Component({
+  encapsulation: ViewEncapsulation.None,
+  imports: [
+    DeleteChoiceButtonComponent,
+    FlexLayoutModule,
+    MatCardModule,
+    MatchStatusIconComponent,
+    MatIconModule,
+    NgClass
+  ],
   selector: 'match-choice-item',
-  templateUrl: 'match-choice-item.component.html',
-  styleUrls: ['match-choice-item.component.scss'],
-  encapsulation: ViewEncapsulation.None
+  standalone: true,
+  styleUrl: 'match-choice-item.component.scss',
+  templateUrl: 'match-choice-item.component.html'
 })
-export class MatchChoiceItem {
-  @Input()
-  buckets: any;
+export class MatchChoiceItemComponent {
+  @Input() buckets: any;
 
-  @Input()
-  hasCorrectAnswer: boolean;
+  @Input() hasCorrectAnswer: boolean;
 
-  @Input()
-  isDisabled: boolean;
+  @Input() isDisabled: boolean;
 
-  @Input()
-  item: any;
+  @Input() item: any;
 
-  @Output()
-  onStudentDataChanged = new EventEmitter();
+  @Output() onStudentDataChanged = new EventEmitter();
 }

src/assets/wise5/components/match/match-common.module.ts

@@ -1,28 +1,29 @@
+import { DeleteChoiceButtonComponent } from './delete-choice-button/delete-choice-button.component';
 import { DragDropModule } from '@angular/cdk/drag-drop';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FlexLayoutModule } from '@angular/flex-layout';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
 import { MatCardModule } from '@angular/material/card';
+import { MatchChoiceItemComponent } from './match-choice-item/match-choice-item.component';
 import { MatDialogModule } from '@angular/material/dialog';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatIconModule } from '@angular/material/icon';
 import { MatInputModule } from '@angular/material/input';
 import { MatTooltipModule } from '@angular/material/tooltip';
-import { DeleteChoiceButton } from './delete-choice-button/delete-choice-button.component';
-import { MatchChoiceItem } from './match-choice-item/match-choice-item.component';
 import { MatchStatusIconComponent } from './match-status-icon/match-status-icon.component';
 import { MatchFeedbackSectionComponent } from './match-student/match-feedback-section/match-feedback-section.component';
 
 @NgModule({
-  declarations: [DeleteChoiceButton, MatchChoiceItem],
   imports: [
     CommonModule,
+    DeleteChoiceButtonComponent,
     DragDropModule,
     FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
+    MatchChoiceItemComponent,
     MatchFeedbackSectionComponent,
     MatchStatusIconComponent,
     MatDialogModule,
@@ -34,13 +35,13 @@ import { MatchFeedbackSectionComponent } from './match-student/match-feedback-se
   ],
   exports: [
     CommonModule,
-    DeleteChoiceButton,
+    DeleteChoiceButtonComponent,
     DragDropModule,
     FlexLayoutModule,
     MatButtonModule,
     MatCardModule,
     MatDialogModule,
-    MatchChoiceItem,
+    MatchChoiceItemComponent,
     MatchFeedbackSectionComponent,
     MatchStatusIconComponent,
     MatFormFieldModule,

src/assets/wise5/components/match/match-show-work/match-show-work.component.html

@@ -29,7 +29,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="sourceBucket.value"></h3>
               [item]="item"
               [hasCorrectAnswer]="hasCorrectAnswer"
               [isDisabled]="true"
-            ></match-choice-item>
+            />
           </li>
         </ul>
       </div>
@@ -68,7 +68,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
                 [item]="item"
                 [hasCorrectAnswer]="hasCorrectAnswer"
                 [isDisabled]="true"
-              ></match-choice-item>
+              />
             </li>
           </ul>
         </div>

src/assets/wise5/components/match/match-student/match-student-default/match-student-default.component.html

@@ -40,7 +40,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="buckets[0].value"></h3>
             [hasCorrectAnswer]="hasCorrectAnswer"
             [isDisabled]="isDisabled"
             (onStudentDataChanged)="studentDataChanged()"
-          ></match-choice-item>
+          />
         </li>
       </ul>
     </div>
@@ -91,7 +91,7 @@ <h3 class="mat-subtitle-2" [innerHTML]="bucket.value"></h3>
               [hasCorrectAnswer]="hasCorrectAnswer"
               [isDisabled]="isDisabled"
               (onStudentDataChanged)="studentDataChanged()"
-            ></match-choice-item>
+            />
           </li>
         </ul>
       </div>

src/messages.xlf

@@ -16661,14 +16661,14 @@ Are you ready to receive feedback on this answer?</source>
         <source>Are you sure you want to delete this feedback?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.ts</context>
-          <context context-type="linenumber">73</context>
+          <context context-type="linenumber">76</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7484685939884481783" datatype="html">
         <source>Are you sure you want to delete this feedback rule?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/common/feedbackRule/edit-feedback-rules/edit-feedback-rules.component.ts</context>
-          <context context-type="linenumber">80</context>
+          <context context-type="linenumber">83</context>
         </context-group>
       </trans-unit>
       <trans-unit id="82efdf880fe90640388310171d05401a6fc62663" datatype="html">
@@ -19286,15 +19286,15 @@ Category Name: <x id="PH_1" equiv-text="categoryName"/></source>
       <trans-unit id="a7d56850122574ce933b94051d73d65817e8369b" datatype="html">
         <source>Delete item</source>
         <context-group purpose="location">
-          <context context-type="sourcefile">src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.html</context>
-          <context context-type="linenumber">5</context>
+          <context context-type="sourcefile">src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.ts</context>
+          <context context-type="linenumber">21</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8927837337329146438" datatype="html">
         <source>Are you sure you want to delete this item?</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/components/match/delete-choice-button/delete-choice-button.component.ts</context>
-          <context context-type="linenumber">22</context>
+          <context context-type="linenumber">39</context>
         </context-group>
       </trans-unit>
       <trans-unit id="43e2291ad2f3e8419aeefcc82006a294d86e3445" datatype="html">