refactor(HelpIconComponent): Convert to standalone (#1841)

WISE-Community · Jun 21, 2024 · 273bb3b · 273bb3b
1 parent c58dad8
commit 273bb3b
Show file tree

Hide file tree

Showing 7 changed files with 14 additions and 23 deletions.
diff --git a/src/assets/wise5/components/component/component-student.module.ts b/src/assets/wise5/components/component/component-student.module.ts
@@ -2,7 +2,6 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { HighchartsChartModule } from 'highcharts-angular';
 import { StudentComponentModule } from '../../../../app/student/student.component.module';
-import { HelpIconModule } from '../../themes/default/themeComponents/helpIcon/help-icon.module';
 import { PreviewComponentComponent } from '../../authoringTool/components/preview-component/preview-component.component';
 import { StudentAssetsDialogModule } from '../../vle/studentAsset/student-assets-dialog/student-assets-dialog.module';
 import { AnimationStudentModule } from '../animation/animation-student/animation-student.module';
@@ -26,6 +25,7 @@ import { SummaryStudentModule } from '../summary/summary-student/summary-student
 import { TableStudentModule } from '../table/table-student/table-student.module';
 import { ComponentComponent } from './component.component';
 import { AiChatStudentModule } from '../aiChat/ai-chat-student/ai-chat-student.module';
+import { HelpIconComponent } from '../../themes/default/themeComponents/helpIcon/help-icon.component';
 
 @NgModule({
   declarations: [ComponentComponent],
@@ -40,7 +40,7 @@ import { AiChatStudentModule } from '../aiChat/ai-chat-student/ai-chat-student.m
     DrawStudentModule,
     EmbeddedStudentModule,
     GraphStudentModule,
-    HelpIconModule,
+    HelpIconComponent,
     HighchartsChartModule,
     HtmlStudentComponent,
     LabelStudentModule,

diff --git a/src/assets/wise5/components/component/component.component.html b/src/assets/wise5/components/component/component.component.html
@@ -1,5 +1,5 @@
 <div *ngIf="showRubric" class="component__rubric">
-  <help-icon [content]="rubric" label="Teaching Tips" i18n-label icon="info"></help-icon>
+  <help-icon [content]="rubric" label="Teaching Tips" i18n-label icon="info" />
 </div>
 <div class="component__wrapper">
   <div #component></div>

diff --git a/src/assets/wise5/themes/default/themeComponents/helpIcon/help-icon.component.ts b/src/assets/wise5/themes/default/themeComponents/helpIcon/help-icon.component.ts
@@ -1,14 +1,17 @@
-'use strict';
-
 import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { DialogWithCloseComponent } from '../../../../directives/dialog-with-close/dialog-with-close.component';
 import { WiseLinkService } from '../../../../../../app/services/wiseLinkService';
 import { VLEProjectService } from '../../../../vle/vleProjectService';
+import { CommonModule } from '@angular/common';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 
 @Component({
+  imports: [CommonModule, MatButtonModule, MatIconModule],
   selector: 'help-icon',
-  styleUrls: ['help-icon.component.scss'],
+  standalone: true,
+  styleUrl: 'help-icon.component.scss',
   templateUrl: 'help-icon.component.html'
 })
 export class HelpIconComponent {
@@ -24,7 +27,7 @@ export class HelpIconComponent {
     private wiseLinkService: WiseLinkService
   ) {}
 
-  showRubric() {
+  protected showRubric(): void {
     this.dialog.open(DialogWithCloseComponent, {
       data: {
         content: this.wiseLinkService.generateHtmlWithWiseLink(

diff --git a/src/assets/wise5/themes/default/themeComponents/helpIcon/help-icon.module.ts b/src/assets/wise5/themes/default/themeComponents/helpIcon/help-icon.module.ts
diff --git a/src/assets/wise5/vle/node/node.component.html b/src/assets/wise5/vle/node/node.component.html
@@ -10,7 +10,7 @@
       fxLayout="row"
       fxLayoutAlign="center center"
     >
-      <help-icon [content]="rubric" label="Step Info" i18n-label icon="info"> </help-icon>
+      <help-icon [content]="rubric" label="Step Info" i18n-label icon="info" />
     </div>
     <div
       *ngFor="let component of components"

diff --git a/src/assets/wise5/vle/node/node.module.ts b/src/assets/wise5/vle/node/node.module.ts
@@ -4,7 +4,7 @@ import { FlexLayoutModule } from '@angular/flex-layout';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { NodeComponent } from './node.component';
-import { HelpIconModule } from '../../themes/default/themeComponents/helpIcon/help-icon.module';
+import { HelpIconComponent } from '../../themes/default/themeComponents/helpIcon/help-icon.component';
 import { ComponentStudentModule } from '../../components/component/component-student.module';
 import { MatTooltipModule } from '@angular/material/tooltip';
 import { ComponentStateInfoComponent } from '../../common/component-state-info/component-state-info.component';
@@ -16,7 +16,7 @@ import { ComponentStateInfoComponent } from '../../common/component-state-info/c
     ComponentStateInfoComponent,
     ComponentStudentModule,
     FlexLayoutModule,
-    HelpIconModule,
+    HelpIconComponent,
     MatButtonModule,
     MatIconModule,
     MatTooltipModule

diff --git a/src/messages.xlf b/src/messages.xlf
@@ -21939,7 +21939,7 @@ If this problem continues, let your teacher know and move on to the next activit
         <source>Rubric</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/assets/wise5/themes/default/themeComponents/helpIcon/help-icon.component.ts</context>
-          <context context-type="linenumber">33</context>
+          <context context-type="linenumber">36</context>
         </context-group>
       </trans-unit>
       <trans-unit id="2e1aeaf8d183e6846a0463a08c784f472184fcf0" datatype="html">