[player] Use element classes instead of element interfaces

projects/player/src/app/app.component.ts

@@ -2,8 +2,8 @@ import { Component, OnInit } from '@angular/core';
 import { TranslateService } from '@ngx-translate/core';
 import { MatDialog } from '@angular/material/dialog';
 import {
-  Unit, UnitPage
-} from '../../../common/unit';
+  Unit
+} from '../../../common/classes/unit';
 import { VeronaSubscriptionService } from './services/verona-subscription.service';
 import { VeronaPostService } from './services/verona-post.service';
 import { NativeEventService } from './services/native-event.service';
@@ -12,6 +12,7 @@ import { PlayerConfig, VopStartCommand } from './models/verona';
 import { AlertDialogComponent } from './components/alert-dialog/alert-dialog.component';
 import { KeyboardService } from './services/keyboard.service';
 import { UnitStateService } from './services/unit-state.service';
+import { Page } from '../../../common/classes/page';
 
 @Component({
   selector: 'player-aspect',
@@ -23,7 +24,7 @@ import { UnitStateService } from './services/unit-state.service';
   `
 })
 export class AppComponent implements OnInit {
-  pages!: UnitPage[];
+  pages!: Page[];
   playerConfig!: PlayerConfig | undefined;
 
   constructor(private translateService: TranslateService,
@@ -63,7 +64,7 @@ export class AppComponent implements OnInit {
         this.pages = unitDefinition.pages;
         this.unitStateService.unitStateElementCodes = message.unitState?.dataParts?.elementCodes ?
           JSON.parse(message.unitState.dataParts.elementCodes) : [];
-        this.keyboardService.useKeyboard(false, 'full');
+        this.keyboardService.useKeyboard(true, 'mini');
       } else {
         this.dialog.open(AlertDialogComponent, {
           data: {

projects/player/src/app/components/element/element.component.ts

@@ -5,7 +5,6 @@ import {
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-import { UnitUIElement } from '../../../../../common/unit';
 import * as ComponentUtils from '../../../../../common/component-utils';
 import { KeyboardService } from '../../services/keyboard.service';
 import { TextFieldComponent } from '../../../../../common/element-components/text-field.component';
@@ -13,6 +12,7 @@ import { TextAreaComponent } from '../../../../../common/element-components/text
 import { FormService } from '../../../../../common/form.service';
 import { ValueChangeElement } from '../../../../../common/form';
 import { UnitStateService } from '../../services/unit-state.service';
+import { UIElement } from '../../../../../common/classes/uIElement';
 
 @Component({
   selector: 'app-element',
@@ -20,7 +20,7 @@ import { UnitStateService } from '../../services/unit-state.service';
   styleUrls: ['./element.component.css']
 })
 export class ElementComponent implements OnInit {
-  @Input() elementModel!: UnitUIElement;
+  @Input() elementModel!: UIElement;
   @Input() parentForm!: FormGroup;
   @Input() parentArrayIndex!: number;
 

projects/player/src/app/components/layout/layout.component.ts

@@ -5,9 +5,9 @@ import { FormGroup } from '@angular/forms';
 import { TranslateService } from '@ngx-translate/core';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
-import { UnitPage } from '../../../../../common/unit';
 import { PlayerConfig } from '../../models/verona';
 import { KeyboardService } from '../../services/keyboard.service';
+import { Page } from '../../../../../common/classes/page';
 
 @Component({
   selector: 'app-layout',
@@ -16,7 +16,7 @@ import { KeyboardService } from '../../services/keyboard.service';
 })
 export class LayoutComponent implements OnInit, OnDestroy {
   @Input() parentForm!: FormGroup;
-  @Input() pages!: UnitPage[];
+  @Input() pages!: Page[];
   @Input() selectedIndex!: number;
   @Input() selectIndex!: Subject<number>;
   @Input() playerConfig!: PlayerConfig;
@@ -28,9 +28,9 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
   isKeyboardOpen!: boolean;
   scrollPagesIndices!: number[];
-  scrollPages!: UnitPage[];
+  scrollPages!: Page[];
   hasScrollPages!: boolean;
-  alwaysVisiblePage!: UnitPage | undefined;
+  alwaysVisiblePage!: Page | undefined;
   alwaysVisibleUnitPageIndex!: number;
   alwaysVisiblePagePosition!: 'top' | 'bottom' | 'left' | 'right' ;
   layoutAlignment!: 'row' | 'column';
@@ -64,14 +64,14 @@ export class LayoutComponent implements OnInit, OnDestroy {
   }
 
   private initPages(): void {
-    this.alwaysVisibleUnitPageIndex = this.pages.findIndex((page: UnitPage): boolean => page.alwaysVisible);
+    this.alwaysVisibleUnitPageIndex = this.pages.findIndex((page: Page): boolean => page.alwaysVisible);
     this.alwaysVisiblePage = this.pages[this.alwaysVisibleUnitPageIndex];
-    this.scrollPages = this.pages.filter((page: UnitPage): boolean => !page.alwaysVisible);
+    this.scrollPages = this.pages.filter((page: Page): boolean => !page.alwaysVisible);
     this.hasScrollPages = this.scrollPages?.length > 0;
     this.scrollPagesIndices = this.scrollPages.map(
-      (scrollPage: UnitPage): number => this.pages.indexOf(scrollPage)
+      (scrollPage: Page): number => this.pages.indexOf(scrollPage)
     );
-    this.validPagesDetermined.emit(this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
+    this.validPagesDetermined.emit(this.scrollPages.map((page: Page, index: number): Record<string, string> => (
       {
         [index.toString(10)]: `${this.translateService.instant('pageIndication', {
           index: index + 1
@@ -101,7 +101,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
       this.maxWidth.alwaysVisiblePage
     );
     this.containerMaxWidth.scrollPages = this.getContainerMaxWidth(
-      this.scrollPages.findIndex((page: UnitPage): boolean => !page.hasMaxWidth) > -1,
+      this.scrollPages.findIndex((page: Page): boolean => !page.hasMaxWidth) > -1,
       this.maxWidth.scrollPages
     );
   }
@@ -120,10 +120,10 @@ export class LayoutComponent implements OnInit, OnDestroy {
 
   private getScrollPagesWidth(): number {
     return this.hasScrollPages ?
-      Math.max(...this.scrollPages.map((page: UnitPage): number => this.getAbsolutePageWidth(page))) : 0;
+      Math.max(...this.scrollPages.map((page: Page): number => this.getAbsolutePageWidth(page))) : 0;
   }
 
-  private getAbsolutePageWidth = (page: UnitPage | undefined): number => ((page) ? 2 * page.margin + page.maxWidth : 0);
+  private getAbsolutePageWidth = (page: Page | undefined): number => ((page) ? 2 * page.margin + page.maxWidth : 0);
 
   onSelectedIndexChange(selectedIndex: number): void {
     this.selectedIndexChange.emit(selectedIndex);

projects/player/src/app/components/page/page.component.ts

@@ -2,9 +2,9 @@ import {
   Component, Input, OnInit, Output, EventEmitter
 } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { UnitPage } from '../../../../../common/unit';
 import { FormService } from '../../../../../common/form.service';
 import { UnitStateService } from '../../services/unit-state.service';
+import { Page } from '../../../../../common/classes/page';
 
 @Component({
   selector: 'app-page',
@@ -12,7 +12,7 @@ import { UnitStateService } from '../../services/unit-state.service';
 })
 
 export class PageComponent implements OnInit {
-  @Input() page!: UnitPage;
+  @Input() page!: Page;
   @Input() isLastPage!: boolean;
   @Input() parentForm!: FormGroup;
   @Input() parentArrayIndex!: number;

projects/player/src/app/components/player-state/player-state.component.ts

@@ -4,13 +4,13 @@ import {
 import { FormGroup } from '@angular/forms';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
-import { UnitPage } from '../../../../../common/unit';
 import { VeronaSubscriptionService } from '../../services/verona-subscription.service';
 import {
   PlayerConfig, PlayerState, RunningState,
   VopContinueCommand, VopGetStateRequest, VopPageNavigationCommand, VopStopCommand
 } from '../../models/verona';
 import { VeronaPostService } from '../../services/verona-post.service';
+import { Page } from '../../../../../common/classes/page';
 
 @Component({
   selector: 'app-player-state',
@@ -19,7 +19,7 @@ import { VeronaPostService } from '../../services/verona-post.service';
 })
 export class PlayerStateComponent implements OnInit, OnDestroy {
   @Input() parentForm!: FormGroup;
-  @Input() pages!: UnitPage[];
+  @Input() pages!: Page[];
   @Input() playerConfig!: PlayerConfig;
 
   currentPlayerPageIndex: number = 0;

projects/player/src/app/components/section/section.component.ts

@@ -2,8 +2,8 @@ import {
   Component, Input, OnInit
 } from '@angular/core';
 import { FormBuilder, FormGroup } from '@angular/forms';
-import { UnitPageSection } from '../../../../../common/unit';
 import { FormService } from '../../../../../common/form.service';
+import { Section } from '../../../../../common/classes/section';
 
 @Component({
   selector: 'app-section',
@@ -11,7 +11,7 @@ import { FormService } from '../../../../../common/form.service';
 })
 export class SectionComponent implements OnInit {
   @Input() parentForm!: FormGroup;
-  @Input() section!: UnitPageSection;
+  @Input() section!: Section;
   @Input() parentArrayIndex!: number;
 
   sectionForm!: FormGroup;

projects/player/src/app/components/unit-state/unit-state.component.ts

@@ -19,15 +19,15 @@ import {
 import {
   PlayerConfig, Progress, UnitState, VopNavigationDeniedNotification
 } from '../../models/verona';
-import { UnitPage } from '../../../../../common/unit';
 import { UnitStateService } from '../../services/unit-state.service';
+import { Page } from '../../../../../common/classes/page';
 
 @Component({
   selector: 'app-unit-state',
   templateUrl: './unit-state.component.html'
 })
 export class UnitStateComponent implements OnInit, OnDestroy {
-  @Input() pages: UnitPage[] = [];
+  @Input() pages: Page[] = [];
   @Input() playerConfig!: PlayerConfig;
 
   form!: FormGroup;

projects/player/src/app/services/unit-state.service.ts

 import { Injectable } from '@angular/core';
 import { Observable, Subject } from 'rxjs';
-import { UnitUIElement } from '../../../../common/unit';
 import {
   StatusChangeElement,
   UnitStateElementCode,
@@ -8,6 +7,7 @@ import {
   UnitStateElementCodeStatusValue
 } from '../models/verona';
 import { ValueChangeElement } from '../../../../common/form';
+import { InputElement } from '../../../../common/classes/uIElement';
 
 @Injectable({
   providedIn: 'root'
@@ -49,7 +49,7 @@ export class UnitStateService {
     return this._presentedPageAdded.asObservable();
   }
 
-  registerElement(element: UnitUIElement): void {
+  registerElement(element: InputElement): void {
     this.addUnitStateElementCode(element.id, element.value);
   }