diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts index d0c427aadc6c4d01ed18d0074f56424217aabb3f..546d36346cd3e7dadebbb6b1b328726dfb2de8e9 100644 --- a/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts +++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/text-field-simple.component.ts @@ -1,8 +1,10 @@ import { Component, EventEmitter, Input, Output } from '@angular/core'; -import { FormElementComponent } from '../../../../directives/form-element-component.directive'; -import { TextFieldSimpleElement } from 'common/models/elements/compound-elements/cloze/cloze-child-elements/text-field-simple'; +import { FormElementComponent } from 'common/directives/form-element-component.directive'; +import { + TextFieldSimpleElement +} from 'common/models/elements/compound-elements/cloze/cloze-child-elements/text-field-simple'; @Component({ selector: 'aspect-text-field-simple', @@ -24,9 +26,9 @@ import { TextFieldSimpleElement } from 'common/models/elements/compound-elements [readonly]="elementModel.readOnly" [formControl]="elementFormControl" [value]="elementModel.value" - (keydown)="elementModel.showSoftwareKeyboard ? onKeyDown.emit(input) : null" - (focus)="onFocusChanged.emit(input)" - (blur)="onFocusChanged.emit(null)"> + (keydown)="elementModel.showSoftwareKeyboard ? hardwareKeyDetected.emit(input) : null" + (focus)="focusChanged.emit(input)" + (blur)="focusChanged.emit(null)"> `, styles: [ '.clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}', @@ -35,6 +37,6 @@ import { TextFieldSimpleElement } from 'common/models/elements/compound-elements }) export class TextFieldSimpleComponent extends FormElementComponent { @Input() elementModel!: TextFieldSimpleElement; - @Output() onKeyDown = new EventEmitter<HTMLElement>(); - @Output() onFocusChanged = new EventEmitter<HTMLElement | null>(); + @Output() hardwareKeyDetected = new EventEmitter<HTMLElement>(); + @Output() focusChanged = new EventEmitter<HTMLElement | null>(); } diff --git a/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts b/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts index f8454041b9dd99b58cc0f4c05514536fd333cbdc..c55015ba551a30cd54080061792b23b5fdecdc68 100644 --- a/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts +++ b/projects/player/src/app/components/elements/compound-group-element/compound-group-element.component.ts @@ -57,23 +57,30 @@ export class CompoundGroupElementComponent extends ElementFormGroupDirective imp child, this.pageIndex); if (childModel.type === 'text-field-simple') { - const textFieldSimpleComponent = child as TextFieldSimpleComponent; - (child as TextFieldSimpleComponent) - .onFocusChanged - .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe(element => { - this.toggleKeyInput(element, textFieldSimpleComponent, childModel); - }); - (child as TextFieldSimpleComponent) - .onKeyDown - .pipe(takeUntil(this.ngUnsubscribe)) - .subscribe(element => { - this.detectHardwareKeyboard(element, textFieldSimpleComponent); - }); + this.manageKeyInputToggling(child as TextFieldSimpleComponent, childModel); + this.manageHardwareKeyBoardDetection(child as TextFieldSimpleComponent); } }); } + private manageHardwareKeyBoardDetection(textFieldSimpleComponent: TextFieldSimpleComponent): void { + (textFieldSimpleComponent) + .hardwareKeyDetected + .pipe(takeUntil(this.ngUnsubscribe)) + .subscribe(element => { + this.detectHardwareKeyboard(element, textFieldSimpleComponent); + }); + } + + private manageKeyInputToggling(textFieldSimpleComponent: TextFieldSimpleComponent, elementModel: InputElement): void { + (textFieldSimpleComponent) + .focusChanged + .pipe(takeUntil(this.ngUnsubscribe)) + .subscribe(element => { + this.toggleKeyInput(element, textFieldSimpleComponent, elementModel); + }); + } + private toggleKeyInput(inputElement: HTMLElement | null, elementComponent: TextFieldSimpleComponent, elementModel: InputElement): void {