Add new element toggle-button

This is meant solely as a cloze child as a representation of a radio 
button functionality.

projects/common/id.service.ts

@@ -22,6 +22,7 @@ export class IdService {
     'drop-list': 0,
     cloze: 0,
     frame: 0,
+    'toggle-button': 0,
     value: 0
   };
 

projects/common/models/uI-element.ts

@@ -3,7 +3,7 @@ import { IdService } from '../id.service';
 
 export type UIElementType = 'text' | 'button' | 'text-field' | 'text-area' | 'checkbox'
 | 'dropdown' | 'radio' | 'image' | 'audio' | 'video' | 'likert' | 'likert_row' | 'radio-group-images'
-| 'drop-list' | 'cloze' | 'spell-correct' | 'slider' | 'frame';
+| 'drop-list' | 'cloze' | 'spell-correct' | 'slider' | 'frame' | 'toggle-button';
 export type InputElementValue = string[] | string | number | boolean | DragNDropValueObject[] | null;
 export type DragNDropValueObject = {
   id: string;

projects/common/shared.module.ts

@@ -14,6 +14,7 @@ import { MatTabsModule } from '@angular/material/tabs';
 import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatSnackBarModule } from '@angular/material/snack-bar';
 import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatButtonToggleModule } from '@angular/material/button-toggle';
 
 import { TranslateModule } from '@ngx-translate/core';
 import { MatDialogModule } from '@angular/material/dialog';
@@ -47,6 +48,7 @@ import { SliderComponent } from './ui-elements/slider/slider.component';
 import { SpellCorrectComponent } from './ui-elements/spell-correct/spell-correct.component';
 import { DropListSimpleComponent } from './ui-elements/drop-list-simple/drop-list-simple.component';
 import { FrameComponent } from './ui-elements/frame/frame.component';
+import { ToggleButtonComponent } from './ui-elements/toggle-button/toggle-button.component';
 
 @NgModule({
   imports: [
@@ -65,7 +67,8 @@ import { FrameComponent } from './ui-elements/frame/frame.component';
     MatDialogModule,
     MatButtonModule,
     TranslateModule,
-    MatSliderModule
+    MatSliderModule,
+    MatButtonToggleModule
   ],
   declarations: [
     ButtonComponent,
@@ -95,7 +98,8 @@ import { FrameComponent } from './ui-elements/frame/frame.component';
     SliderComponent,
     SpellCorrectComponent,
     TextFieldSimpleComponent,
-    FrameComponent
+    FrameComponent,
+    ToggleButtonComponent
   ],
   exports: [
     CommonModule,

projects/common/ui-elements/cloze/cloze-element.ts

@@ -16,6 +16,7 @@ import { DropdownElement } from '../dropdown/dropdown-element';
 import { initFontElement, initPositionedElement } from '../../util/unit-interface-initializer';
 import { TextFieldSimpleElement } from '../textfield-simple/text-field-simple-element';
 import { DropListSimpleElement } from '../drop-list-simple/drop-list-simple';
+import { ToggleButtonElement } from '../toggle-button/toggle-button';
 
 // TODO styles like em dont continue after inserted components
 
@@ -26,7 +27,7 @@ export type ClozePart = {
 };
 
 export class ClozeElement extends CompoundElement implements PositionedElement, FontElement {
-  text: string = '<p>Lorem ipsum dolor \\z sdfsdf \\i sdfsdf</p>';
+  text: string = '<p>Lorem ipsum dolor \\r sdfsdf \\i sdfsdf</p>';
   parts: ClozePart[][] = [];
 
   positionProps: PositionProperties;
@@ -114,6 +115,9 @@ export class ClozeElement extends CompoundElement implements PositionedElement,
     if (p.indexOf('\\z') > 0) {
       x.push(p.indexOf('\\z'));
     }
+    if (p.indexOf('\\r') > 0) {
+      x.push(p.indexOf('\\r'));
+    }
 
     const y = Math.min(...x);
     let nextElementType = '';
@@ -121,6 +125,7 @@ export class ClozeElement extends CompoundElement implements PositionedElement,
       case 'd': nextElementType = 'dropdown'; break;
       case 'i': nextElementType = 'text-field'; break;
       case 'z': nextElementType = 'drop-list'; break;
+      case 'r': nextElementType = 'toggle-button'; break;
       default: return [-1, 'unknown'];
     }
     return [y, nextElementType];
@@ -147,6 +152,9 @@ export class ClozeElement extends CompoundElement implements PositionedElement,
         newElement.height = 25;
         newElement.width = 100;
         break;
+      case 'toggle-button':
+        newElement = new ToggleButtonElement(elementModel);
+        break;
       default:
         throw new Error(`ElementType ${elementModel.type} not found!`);
     }

projects/common/ui-elements/cloze/cloze.component.ts

@@ -60,6 +60,15 @@ import { FormElementComponent } from '../../directives/form-element-component.di
                           [elementModel]="$any(part.value)"
                           (elementValueChanged)="elementValueChanged.emit($event)">
           </app-text-field-simple>
+
+          <app-toggle-button *ngIf="part.type === 'toggle-button'" #radioComponent
+                          [parentForm]="parentForm"
+                          [style.display]="'inline-block'"
+                          [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
+                          [elementModel]="$any(part.value)"
+                          (elementValueChanged)="elementValueChanged.emit($event)">
+          </app-toggle-button>
+
           <div *ngIf="part.type === 'drop-list'"
                [style.display]="'inline-block'"
                [style.pointerEvents]="allowClickThrough ? 'auto' : 'none'"
@@ -88,7 +97,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
 export class ClozeComponent extends CompoundElementComponent {
   elementModel!: ClozeElement;
   @Output() elementSelected = new EventEmitter<{ element: ClozeElement, event: MouseEvent }>();
-  @ViewChildren('drowdownComponent, textfieldComponent, droplistComponent')
+  @ViewChildren('drowdownComponent, textfieldComponent, droplistComponent, radioComponent')
   compoundChildren!: QueryList<FormElementComponent>;
 
   getFormElementModelChildren(): InputElement[] {

projects/common/ui-elements/toggle-button/toggle-button.component.ts

+import { Component, Input } from '@angular/core';
+import { ToggleButtonElement } from './toggle-button';
+import { FormElementComponent } from '../../directives/form-element-component.directive';
+
+@Component({
+  selector: 'app-toggle-button',
+  template: `
+    <div class="mat-form-field">
+      <mat-button-toggle-group [formControl]="elementFormControl"
+                               [style.height.px]="elementModel.height"
+                               [style.background-color]="elementModel.surfaceProps.backgroundColor"
+                               [style.color]="elementModel.fontProps.fontColor"
+                               [style.font-family]="elementModel.fontProps.font"
+                               [style.font-size.px]="elementModel.fontProps.fontSize"
+                               [style.font-weight]="elementModel.fontProps.bold ? 'bold' : ''"
+                               [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''"
+                               [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''"
+                               [style.line-height.%]="elementModel.fontProps.lineHeight">
+        <mat-button-toggle *ngFor="let option of elementModel.options; let i = index"
+                           [value]="i"
+                           [ngClass]="{ 'strike' : elementModel.strikeOtherOptions &&
+                                                   elementFormControl.value !== null &&
+                                                   elementFormControl.value !== i }">
+          {{option}}
+        </mat-button-toggle>
+      </mat-button-toggle-group>
+    </div>
+  `,
+  styles: [
+    'mat-button-toggle-group {min-width: 70px; min-height: 20px}',
+    ':host ::ng-deep .mat-button-toggle-button {height: 100%}',
+    ':host ::ng-deep .mat-button-toggle-label-content {height: 100%; line-height: unset}',
+    ':host ::ng-deep .strike .mat-button-toggle-label-content {text-decoration: line-through}',
+  ]
+})
+export class ToggleButtonComponent extends FormElementComponent {
+  @Input() elementModel!: ToggleButtonElement;
+}

projects/common/ui-elements/toggle-button/toggle-button.ts

+import {
+  UIElement,
+  InputElement,
+  FontElement,
+  SurfaceElement,
+  FontProperties, SurfaceProperties
+} from '../../models/uI-element';
+import { initFontElement, initSurfaceElement } from '../../util/unit-interface-initializer';
+
+export class ToggleButtonElement extends InputElement implements FontElement, SurfaceElement {
+  options: string[] = ['abc', 'def'];
+  strikeOtherOptions: boolean = false;
+
+  fontProps: FontProperties;
+  surfaceProps: SurfaceProperties;
+
+  constructor(serializedElement: Partial<UIElement>) {
+    super(serializedElement);
+    Object.assign(this, serializedElement);
+    this.fontProps = initFontElement(serializedElement);
+    this.surfaceProps = initSurfaceElement(serializedElement);
+
+    this.height = serializedElement.height as number || 25;
+  }
+}