feat(Multiple Languages): Convert EditComponentPrompt input to Transl…

…atableInput (#1585)

* Pass in ComponentContent to EditComponentPrompt instead of prompt. This
will let us convert the input to TranslatableInput.
* Convert EditComponentPrompt input into TranslatableInput

src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html

@@ -1,12 +1,14 @@
-<mat-form-field class="prompt" appearance="fill">
-  <mat-label i18n>Prompt</mat-label>
-  <textarea
-    matInput
-    [(ngModel)]="prompt"
-    (ngModelChange)="promptChangedEvent.next($event)"
-    placeholder="Enter Prompt Here"
-    i18n-placeholder
-    cdkTextareaAutosize
-  >
-  </textarea>
-</mat-form-field>
+<translatable-input [content]="componentContent" key="prompt" class="prompt" appearance="fill">
+  <mat-form-field>
+    <mat-label i18n>Prompt</mat-label>
+    <textarea
+      matInput
+      [(ngModel)]="componentContent.prompt"
+      (ngModelChange)="promptChangedEvent.next($event)"
+      placeholder="Enter Prompt Here"
+      i18n-placeholder
+      cdkTextareaAutosize
+    >
+    </textarea>
+  </mat-form-field>
+</translatable-input>

src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.ts

@@ -1,14 +1,12 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ComponentContent } from '../../../assets/wise5/common/ComponentContent';
 
 @Component({
   selector: 'edit-component-prompt',
-  styles: ['.prompt {width: 100%; }'],
+  styles: ['.prompt {width: 100%; mat-form-field { width:100%} }'],
   templateUrl: 'edit-component-prompt.component.html'
 })
 export class EditComponentPrompt {
-  @Input()
-  prompt: string;
-
-  @Output()
-  promptChangedEvent = new EventEmitter<string>();
+  @Input() componentContent: ComponentContent;
+  @Output() promptChangedEvent = new EventEmitter<string>();
 }

src/assets/wise5/components/animation/animation-authoring/animation-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row">

src/assets/wise5/components/audioOscillator/audio-oscillator-authoring/audio-oscillator-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <span i18n>Oscillator Types</span>

src/assets/wise5/components/conceptMap/concept-map-authoring/concept-map-authoring.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="column" fxLayoutGap="16px">
   <edit-component-prompt
-    [prompt]="componentContent.prompt"
+    [componentContent]="componentContent"
     (promptChangedEvent)="promptChanged($event)"
   ></edit-component-prompt>
   <div fxLayoutGap="16px">

src/assets/wise5/components/dialogGuidance/dialog-guidance-authoring/dialog-guidance-authoring.component.html

@@ -1,6 +1,6 @@
 <div fxLayout="column" fxLayoutGap="16px">
   <edit-component-prompt
-    [prompt]="componentContent.prompt"
+    [componentContent]="componentContent"
     (promptChangedEvent)="promptChanged($event)"
   ></edit-component-prompt>
   <mat-form-field>

src/assets/wise5/components/discussion/discussion-authoring/discussion-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div class="checkbox-container">

src/assets/wise5/components/draw/draw-authoring/draw-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row" fxLayoutAlign="start center">

src/assets/wise5/components/graph/graph-authoring/graph-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row wrap">

src/assets/wise5/components/label/label-authoring/label-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div>

src/assets/wise5/components/match/match-authoring/match-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <p>

src/assets/wise5/components/multipleChoice/multiple-choice-authoring/multiple-choice-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <p>

src/assets/wise5/components/openResponse/open-response-authoring/open-response-authoring.component.html

@@ -11,7 +11,7 @@
         >announcement</mat-icon
       >
       <edit-component-prompt
-        [prompt]="componentContent.prompt"
+        [componentContent]="componentContent"
         (promptChangedEvent)="promptChanged($event)"
       ></edit-component-prompt>
     </div>

src/assets/wise5/components/peerChat/peer-chat-authoring/peer-chat-authoring.component.html

@@ -1,6 +1,6 @@
 <edit-component-prompt
   *ngIf="!componentContent.dynamicPrompt?.enabled"
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <edit-dynamic-prompt

src/assets/wise5/components/showGroupWork/show-group-work-authoring/show-group-work-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayoutGap="20px">

src/assets/wise5/components/showMyWork/show-my-work-authoring/show-my-work-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayoutGap="20px">

src/assets/wise5/components/summary/summary-authoring/summary-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <p i18n>Choose the step and component to show the summary data for:</p>

src/assets/wise5/components/table/table-authoring/table-authoring.component.html

@@ -1,5 +1,5 @@
 <edit-component-prompt
-  [prompt]="componentContent.prompt"
+  [componentContent]="componentContent"
   (promptChangedEvent)="promptChanged($event)"
 ></edit-component-prompt>
 <div fxLayout="row wrap">

src/messages.xlf

@@ -967,7 +967,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Prompt</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html</context>
-          <context context-type="linenumber">2</context>
+          <context context-type="linenumber">3</context>
         </context-group>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-dynamic-prompt-rules/edit-dynamic-prompt-rules.component.html</context>
@@ -986,7 +986,7 @@ Click &quot;Cancel&quot; to keep the invalid JSON open so you can fix it.</sourc
         <source>Enter Prompt Here</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-prompt/edit-component-prompt.component.html</context>
-          <context context-type="linenumber">7</context>
+          <context context-type="linenumber">8</context>
         </context-group>
       </trans-unit>
       <trans-unit id="7affaae0e14529c0192d5a4bfabd6fcb1ea27529" datatype="html">