feat(Authoring): Use slider to set activity width

Author: hirokiterashima

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

@@ -1,20 +1,45 @@
 import { Component } from '@angular/core';
 import { EditComponentFieldComponent } from '../edit-component-field.component';
-import { MatFormFieldModule } from '@angular/material/form-field';
-import { MatInputModule } from '@angular/material/input';
 import { FormsModule } from '@angular/forms';
+import { MatSliderModule } from '@angular/material/slider';
 
 @Component({
-  imports: [FormsModule, MatFormFieldModule, MatInputModule],
+  imports: [FormsModule, MatSliderModule],
   selector: 'edit-component-width',
-  template: `<mat-form-field>
-    <mat-label i18n>Activity Width</mat-label>
-    <input
-      matInput
-      type="number"
-      [(ngModel)]="componentContent.componentWidth"
-      (ngModelChange)="inputChanged.next($event)"
-    />
-  </mat-form-field> `
+  template: `<span i18n>Activity width:</span>
+    <mat-slider
+      min="0"
+      [max]="possibleValues.length - 1"
+      step="1"
+      discrete
+      showTickMarks
+      [displayWith]="formatLabel"
+      style="min-width: 300px;"
+    >
+      <input matSliderThumb (input)="onSliderChange($event)" [value]="selectedIndex" />
+    </mat-slider>
+    <span>{{ selectedValue }}%</span>
+    <p i18n>
+      *Setting the activities' widths determines how they appear on the screen. For example, if two
+      adjacent activities' widths are both set to 50%, they will appear side-by-side.
+    </p>`
 })
-export class EditComponentWidthComponent extends EditComponentFieldComponent {}
+export class EditComponentWidthComponent extends EditComponentFieldComponent {
+  protected possibleValues = [25, 33, 50, 66, 75, 100];
+  protected selectedIndex = 0;
+  protected selectedValue = this.possibleValues[0];
+
+  public override ngOnInit(): void {
+    super.ngOnInit();
+    this.selectedValue = this.componentContent.componentWidth ?? 100;
+    this.selectedIndex = this.possibleValues.indexOf(this.selectedValue);
+  }
+
+  protected formatLabel = (index: number): string => `${this.possibleValues[index]}%`;
+
+  protected onSliderChange(event: any): void {
+    this.selectedValue = this.possibleValues[event.target.value];
+    this.componentContent.componentWidth = this.selectedValue;
+    this.inputChanged.next(this.selectedValue);
+  }
+}

src/messages.xlf

@@ -1096,11 +1096,18 @@
           <context context-type="linenumber">85</context>
         </context-group>
       </trans-unit>
-      <trans-unit id="2810375050239191789" datatype="html">
-        <source>Activity Width</source>
+      <trans-unit id="7007219426980695734" datatype="html">
+        <source>Activity width:</source>
         <context-group purpose="location">
           <context context-type="sourcefile">src/app/authoring-tool/edit-component-width/edit-component-width.component.ts</context>
-          <context context-type="linenumber">11,15</context>
+          <context context-type="linenumber">9,12</context>
+        </context-group>
+      </trans-unit>
+      <trans-unit id="1197041381998976714" datatype="html">
+        <source> *Setting the activities&apos; widths determines how they appear on the screen. For example, if two adjacent activities&apos; widths are both set to 50%, they will appear side-by-side. </source>
+        <context-group purpose="location">
+          <context context-type="sourcefile">src/app/authoring-tool/edit-component-width/edit-component-width.component.ts</context>
+          <context context-type="linenumber">23,27</context>
         </context-group>
       </trans-unit>
       <trans-unit id="8650499415827640724" datatype="html">