Set up styling for cloze and improve drop list item styling

projects/common/element-components/compound-elements/cloze.component.ts

@@ -6,7 +6,14 @@ import { InputElement } from '../../models/uI-element';
 @Component({
   selector: 'app-cloze',
   template: `
-    <p *ngFor="let paragraph of elementModel.parts; let i = index">
+    <p *ngFor="let paragraph of elementModel.parts; let i = index"
+       [style.line-height.px]="elementModel.fontSize + 15"
+       [style.color]="elementModel.fontColor"
+       [style.font-family]="elementModel.font"
+       [style.font-size.px]="elementModel.fontSize"
+       [style.font-weight]="elementModel.bold ? 'bold' : ''"
+       [style.font-style]="elementModel.italic ? 'italic' : ''"
+       [style.text-decoration]="elementModel.underline ? 'underline' : ''">
       <ng-container *ngFor="let part of paragraph; let j = index">
 
         <span *ngIf="part.type === 'text'"
@@ -38,7 +45,9 @@ import { InputElement } from '../../models/uI-element';
   `,
   styles: [
     ':host ::ng-deep app-text-field .mat-form-field-wrapper {padding-bottom: 0; margin: 0}',
-    ':host ::ng-deep app-drop-list .cdk-drop-list {height: 100%; width: 100%;}'
+    ':host ::ng-deep app-drop-list .cdk-drop-list {height: 100%; width: 100%;}',
+    ':host ::ng-deep app-drop-list .item {padding: 0 10px; height: 30px; line-height: 30px; text-align: center;}',
+    'p {margin: 0}'
   ]
 })
 export class ClozeComponent extends CompoundElementComponent {

projects/common/models/compound-elements/cloze-element.ts

 import {
   CompoundElement, InputElement, InputElementValue, UIElement
 } from '../uI-element';
-import { ClozePart, LikertColumn, LikertRow } from '../../interfaces/UIElementInterfaces';
-import { TextElement } from '../text-element';
-import { ButtonElement } from '../button-element';
+import {
+  ClozePart, FontElement, LikertColumn, LikertRow
+} from '../../interfaces/UIElementInterfaces';
 import { TextFieldElement } from '../text-field-element';
 import { TextAreaElement } from '../text-area-element';
 import { CheckboxElement } from '../checkbox-element';
 import { DropdownElement } from '../dropdown-element';
-import { RadioButtonGroupElement } from '../radio-button-group-element';
-import { ImageElement } from '../image-element';
-import { AudioElement } from '../audio-element';
-import { VideoElement } from '../video-element';
-import { LikertElement } from './likert-element';
-import { RadioGroupImagesElement } from './radio-group-images';
 import { DropListElement } from './drop-list';
+import { initFontElement } from '../../util/unit-interface-initializer';
+
+export class ClozeElement extends CompoundElement implements FontElement {
+  text: string = '<p>Lorem ipsum dolor \\z sit amet \\i\n' +
+    '\n' +
+    'Lorem ipsum dolor \\z sit amet \\i\n' +
+    '\n' +
+    'Lorem ipsum dolor \\z sit amet \\i</p>';
 
-export class ClozeElement extends CompoundElement {
-  text: string = '<p>Lorem ipsum dolor \\z sit amet \\i</p>';
   parts: ClozePart[][] = [];
   childElements: InputElement[] = [];
 
+  fontColor: string = 'black';
+  font: string = 'Roboto';
+  fontSize: number = 20;
+  lineHeight: number = 120;
+  bold: boolean = false;
+  italic: boolean = false;
+  underline: boolean = false;
+
   constructor(serializedElement: UIElement) {
     super(serializedElement);
     Object.assign(this, serializedElement);
+    Object.assign(this, initFontElement(serializedElement));
     this.createParts(this.text as string);
 
     this.height = 200;