feat(Activity): Add Title field

package.json

@@ -53,6 +53,7 @@
     "iframe-resizer": "^3.6.6",
     "jquery": "^3.6.0",
     "jwt-decode": "^3.1.2",
+    "lightningcss": "^1.33.0",
     "lz-string": "^1.4.4",
     "marked": "^18.0.3",
     "mathjax": "^3.2.2",
@@ -235,4 +236,4 @@
       ]
     ]
   }
-}
+}

src/app/possible-score/possible-score.component.ts

@@ -12,6 +12,6 @@ export class PossibleScoreComponent {
   constructor(private projectService: ProjectService) {}
 
   ngOnInit(): void {
-    this.hidePossibleScores = this.projectService.getThemeSettings().hidePossibleScores;
+    this.hidePossibleScores = this.projectService.getThemeSettings()?.hidePossibleScores;
   }
 }

src/assets/wise5/authoringTool/components/edit-component-dialog/edit-component-dialog.component.ts

@@ -10,11 +10,13 @@ import { Component as WISEComponent } from '../../../common/Component';
 import { EditComponentAdvancedComponent } from '../../../../../app/authoring-tool/edit-component-advanced/edit-component-advanced.component';
 import { TeacherProjectService } from '../../../services/teacherProjectService';
 import { ComponentInfoService } from '../../../services/componentInfoService';
+import { EditComponentTitleComponent } from '../edit-component-title/edit-component-title.component';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
   imports: [
     EditComponentComponent,
+    EditComponentTitleComponent,
     EditComponentAdvancedComponent,
     FormsModule,
     MatButtonModule,
@@ -36,8 +38,9 @@ import { ComponentInfoService } from '../../../services/componentInfoService';
       @if (advancedMode) {
         <edit-component-advanced class="h-full" [component]="component" />
       } @else {
+        <edit-component-title class="block pt-4" [componentContent]="data.componentContent" />
         <edit-component
-          class="block h-full py-4"
+          class="block h-full pb-4"
           [componentContent]="data.componentContent"
           [nodeId]="data.nodeId"
         />

src/assets/wise5/authoringTool/components/edit-component-title/edit-component-title.component.ts

@@ -0,0 +1,29 @@
+import { Component, inject, Input } from '@angular/core';
+import { FormsModule } from '@angular/forms';
+import { ComponentContent } from '../../../common/ComponentContent';
+import { TeacherProjectService } from '../../../services/teacherProjectService';
+import { TranslatableInputComponent } from '../translatable-input/translatable-input.component';
+
+@Component({
+  imports: [FormsModule, TranslatableInputComponent],
+  selector: 'edit-component-title',
+  template: `
+    <translatable-input
+      [content]="componentContent"
+      [hasClearButton]="true"
+      key="title"
+      label="Activity Title"
+      i18n-label
+      (defaultLanguageTextChanged)="titleChanged($event)"
+    />
+  `
+})
+export class EditComponentTitleComponent {
+  @Input() componentContent: ComponentContent;
+  private projectService = inject(TeacherProjectService);
+
+  titleChanged(title: string): void {
+    this.componentContent.title = title;
+    this.projectService.saveProject();
+  }
+}

src/assets/wise5/authoringTool/components/edit-component/edit-component.component.ts

@@ -37,7 +37,7 @@ export class EditComponentComponent {
       nodeId: this.nodeId
     });
     this.applicationRef.attachView(this.componentRef.hostView);
-    setTimeout(() => hostElement.focus());
+    setTimeout(() => hostElement.focus({ preventScroll: true }));
   }
 
   ngOnDestroy(): void {

src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.html

@@ -8,6 +8,17 @@
       (ngModelChange)="translationTextChanged.next($event)"
       placeholder="{{ placeholder }}"
     />
+    @if (hasClearButton && translationText) {
+      <button
+        matSuffix
+        mat-icon-button
+        (click)="translationText = ''; translationTextChanged.next('')"
+        aria-label="Clear"
+        i18n-aria-label
+      >
+        <mat-icon>clear</mat-icon>
+      </button>
+    }
     @if (hint) {
       <mat-hint>{{ hint }}</mat-hint>
     }
@@ -33,6 +44,17 @@
       (ngModelChange)="defaultLanguageTextChanged.next($event)"
       placeholder="{{ placeholder }}"
     />
+    @if (hasClearButton && content[key]) {
+      <button
+        matSuffix
+        mat-icon-button
+        (click)="content[key] = ''; defaultLanguageTextChanged.next('')"
+        aria-label="Clear"
+        i18n-aria-label
+      >
+        <mat-icon>clear</mat-icon>
+      </button>
+    }
     @if (hint) {
       <mat-hint>{{ hint }}</mat-hint>
     }

src/assets/wise5/authoringTool/components/translatable-input/translatable-input.component.ts

@@ -1,14 +1,17 @@
-import { Component, ViewEncapsulation } from '@angular/core';
+import { Component, Input, ViewEncapsulation } from '@angular/core';
 import { MatInputModule } from '@angular/material/input';
+import { MatButtonModule } from '@angular/material/button';
+import { MatIconModule } from '@angular/material/icon';
 import { FormsModule } from '@angular/forms';
 import { AbstractTranslatableFieldComponent } from '../abstract-translatable-field/abstract-translatable-field.component';
-import { MatIconModule } from '@angular/material/icon';
 
 @Component({
   encapsulation: ViewEncapsulation.None,
-  imports: [FormsModule, MatIconModule, MatInputModule],
+  imports: [FormsModule, MatButtonModule, MatIconModule, MatInputModule],
   selector: 'translatable-input',
   styleUrl: '../abstract-translatable-field/abstract-translatable-field.component.scss',
   templateUrl: './translatable-input.component.html'
 })
-export class TranslatableInputComponent extends AbstractTranslatableFieldComponent {}
+export class TranslatableInputComponent extends AbstractTranslatableFieldComponent {
+  @Input() protected hasClearButton: boolean = false;
+}

src/assets/wise5/common/ComponentContent.ts

@@ -13,6 +13,7 @@ export interface ComponentContent {
   cRaterRubric?: CRaterRubric;
   dynamicPrompt?: DynamicPrompt;
   excludeFromTotalScore?: boolean;
+  title?: string;
   maxScore?: number;
   maxSubmitCount?: number;
   prompt?: string;

src/assets/wise5/components/embedded/embedded-student/embedded-student.component.html

@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="main-div">
   @if (isShowAddToNotebookButton) {
     <add-to-notebook-button [isDisabled]="isDisabled" (snipImage)="snipModel()" />

src/assets/wise5/components/embedded/embedded-student/embedded-student.component.ts

@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import html2canvas from 'html2canvas';
 import { ChangeDetectorRef, Component } from '@angular/core';
 import { AnnotationService } from '../../../services/annotationService';
@@ -19,6 +20,7 @@ import { ComponentAnnotationsComponent } from '../../../directives/componentAnno
 
 @Component({
   imports: [
+    ComponentHeaderComponent,
     AddToNotebookButtonComponent,
     ComponentSaveSubmitButtonsComponent,
     ComponentAnnotationsComponent

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

@@ -1 +1,2 @@
+<component-header [component]="component" />
 <div [innerHTML]="html"></div>

src/assets/wise5/components/html/html-student/html-student.component.ts

@@ -9,9 +9,11 @@ import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
 import { ComponentStudent } from '../../component-student.component';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ComponentService } from '../../componentService';
 
 @Component({
+  imports: [ComponentHeaderComponent],
   selector: 'html-student',
   styleUrl: 'html-student.component.scss',
   templateUrl: 'html-student.component.html'

src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.html

@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="outside-content">
   <div style="width: {{ width }}; height: {{ height }}">
     <iframe [src]="url" width="100%" height="100%" allowfullscreen> </iframe>

src/assets/wise5/components/outsideURL/outside-url-student/outside-url-student.component.ts

@@ -8,9 +8,11 @@ import { NotebookService } from '../../../services/notebookService';
 import { StudentAssetService } from '../../../services/studentAssetService';
 import { StudentDataService } from '../../../services/studentDataService';
 import { ComponentStudent } from '../../component-student.component';
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { ComponentService } from '../../componentService';
 
 @Component({
+  imports: [ComponentHeaderComponent],
   selector: 'outside-url-student',
   templateUrl: 'outside-url-student.component.html'
 })

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

@@ -1,3 +1,4 @@
+<component-header [component]="component" />
 <div class="summary">
   @if (componentContent.prompt) {
     <div [innerHTML]="prompt" class="prompt"></div>

src/assets/wise5/components/summary/summary-student/summary-student.component.ts

@@ -1,3 +1,4 @@
+import { ComponentHeaderComponent } from '../../../directives/component-header/component-header.component';
 import { Component, Input } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
 import { AnnotationService } from '../../../services/annotationService';
@@ -13,7 +14,8 @@ import { CompletionService } from '../../../services/completionService';
 import { StudentSummaryDisplay } from '../../../directives/student-summary-display/student-summary-display.component';
 
 @Component({
-  imports: [StudentSummaryDisplay],
+  imports: [
+    ComponentHeaderComponent,StudentSummaryDisplay],
   styles: ['.prompt { font-weight: 500; padding-bottom: 8px; }'],
   templateUrl: 'summary-student.component.html'
 })

src/assets/wise5/directives/component-header/component-header.component.html

@@ -1,6 +1,9 @@
-<div class="component-header flex flex-wrap gap-1">
+@if (title) {
+  <div class="mat-headline-6">{{ title }}</div>
+}
+<div class="flex flex-wrap gap-1 mb-4">
   <prompt
-    [prompt]="component.content.prompt"
+    [prompt]="prompt"
     [nodeId]="component.nodeId"
     [componentId]="component.id"
     [dynamicPrompt]="dynamicPrompt"

src/assets/wise5/directives/component-header/component-header.component.ts

@@ -1,5 +1,4 @@
 import { Component, EventEmitter, Input, Output } from '@angular/core';
-import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
 import { Component as WISEComponent } from '../../common/Component';
 import { FeedbackRule } from '../../components/common/feedbackRule/FeedbackRule';
 import { DynamicPrompt } from '../dynamic-prompt/DynamicPrompt';
@@ -9,19 +8,24 @@ import { PromptComponent } from '../prompt/prompt.component';
 @Component({
   imports: [PossibleScoreComponent, PromptComponent],
   selector: 'component-header',
-  styles: ['.component-header { padding-bottom: 8px; } .prompt { font-weight: 500; }'],
   templateUrl: 'component-header.component.html'
 })
 export class ComponentHeaderComponent {
   @Input() component: WISEComponent;
   protected dynamicPrompt: DynamicPrompt;
   @Output() dynamicPromptChanged: EventEmitter<FeedbackRule> = new EventEmitter<FeedbackRule>();
-  protected prompt: SafeHtml;
 
-  constructor(protected sanitizer: DomSanitizer) {}
+  constructor() {}
+
+  protected get title(): string {
+    return this.component.content.title || '';
+  }
+
+  protected get prompt(): string {
+    return this.component.content.prompt || '';
+  }
 
   ngOnInit(): void {
-    this.prompt = this.sanitizer.bypassSecurityTrustHtml(this.component.content.prompt);
     this.dynamicPrompt = new DynamicPrompt(this.component.content.dynamicPrompt);
   }
 

src/assets/wise5/services/createComponentService.ts

@@ -2,11 +2,13 @@ import { Injectable } from '@angular/core';
 import { TeacherProjectService } from './teacherProjectService';
 import { ComponentServiceLookupService } from './componentServiceLookupService';
 import { Node } from '../common/Node';
+import { ComponentInfoService } from './componentInfoService';
 
 @Injectable()
 export class CreateComponentService {
   constructor(
     private componentServiceLookupService: ComponentServiceLookupService,
+    private componentInfoService: ComponentInfoService,
     private projectService: TeacherProjectService
   ) {}
 
@@ -22,6 +24,7 @@ export class CreateComponentService {
     const node = this.projectService.getNode(nodeId);
     const service = this.componentServiceLookupService.getService(componentType);
     const component = service.createComponent();
+    component.title = this.componentInfoService.getInfo(componentType).getLabel();
     if (service.componentHasWork(component)) {
       if (node.showSaveButton == false) {
         if (this.projectService.doesAnyComponentInNodeShowSubmitButton(node.id)) {

src/assets/wise5/services/projectService.ts

@@ -804,7 +804,7 @@ export class ProjectService {
    */
   getThemeSettings(): any {
     let themeSettings = {};
-    if (this.project.themeSettings) {
+    if (this.project?.themeSettings) {
       if (this.project.theme) {
         // TODO: check if this is a valid theme (using ConfigService) rather than just truthy
         themeSettings = this.project.themeSettings[this.project.theme];
@@ -1873,7 +1873,7 @@ export class ProjectService {
   }
 
   getSpeechToTextSettings(): any {
-    return this.project.speechToText;
+    return this.project?.speechToText;
   }
 
   getPreviousNodeId(nodeId: string): string {