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 e0c6518c92a48f1e8bfce55e87b778dccabd950d..1d31c21f81fad671b1d161d5b01e9239f4655d2b 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
@@ -9,6 +9,10 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
@Component({
selector: 'aspect-text-field-simple',
template: `
+ <aspect-cloze-child-error-message *ngIf="elementFormControl.errors && elementFormControl.touched"
+ [elementModel]="elementModel"
+ [elementFormControl]="elementFormControl">
+ </aspect-cloze-child-error-message>
<input #input
class="cloze-child"
autocomplete="off"
@@ -16,9 +20,6 @@ import { TextInputComponent } from 'common/directives/text-input-component.direc
autocorrect="off"
spellcheck="false"
[class.errors]="elementFormControl.errors && elementFormControl.touched"
- [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
- (elementFormControl.errors | errorTransform: elementModel) : ''"
- [matTooltipClass]="'error-tooltip'"
[attr.inputmode]="elementModel.showSoftwareKeyboard ? 'none' : 'text'"
[style.line-height.%]="elementModel.styling.lineHeight"
[style.color]="elementModel.styling.fontColor"
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
index d76869115b9a1ff613846fcf26bc3d087cd09d6a..d5d035b46a501d6cdcc549d2d9ca53c5cca69a17 100644
--- a/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
+++ b/projects/common/components/compound-elements/cloze/cloze-child-elements/toggle-button.component.ts
@@ -5,15 +5,16 @@ import { ToggleButtonElement } from 'common/models/elements/compound-elements/cl
@Component({
selector: 'aspect-toggle-button',
template: `
+ <aspect-cloze-child-error-message *ngIf="elementFormControl.errors && elementFormControl.touched"
+ [elementModel]="elementModel"
+ [elementFormControl]="elementFormControl">
+ </aspect-cloze-child-error-message>
<mat-button-toggle-group [class.errors]="elementFormControl.errors && elementFormControl.touched"
[formControl]="elementFormControl"
[isDisabled]="elementModel.readOnly"
[value]="elementModel.value"
[vertical]="elementModel.verticalOrientation"
[style.height.px]="elementModel.dimensions.isHeightFixed ? elementModel.dimensions.height : null"
- [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
- (elementFormControl.errors | errorTransform: elementModel) : ''"
- [matTooltipClass]="'error-tooltip'"
(focusout)="elementFormControl.markAsTouched()">
<!--Add dummy div - otherwise toggle button with empty options will not be in one line-->
<div *ngIf="elementModel.options.length === 0"
diff --git a/projects/common/components/compound-elements/cloze/cloze-child-error-message.ts b/projects/common/components/compound-elements/cloze/cloze-child-error-message.ts
new file mode 100644
index 0000000000000000000000000000000000000000..c6e4dedfce4b6fbcb4e58508125d52b0103466e8
--- /dev/null
+++ b/projects/common/components/compound-elements/cloze/cloze-child-error-message.ts
@@ -0,0 +1,28 @@
+import { Component, Input } from '@angular/core';
+import { InputElement } from 'common/models/elements/element';
+import { UntypedFormControl } from '@angular/forms';
+
+@Component({
+ selector: 'aspect-cloze-child-error-message',
+ template: `
+ {{elementFormControl.errors ? (elementFormControl.errors | errorTransform: elementModel) : null}}
+ `,
+ host: {
+ '[style.top.px]': 'elementModel.dimensions.height + 5'
+ },
+ styles: [`
+ :host {
+ padding: 0 5px;
+ position: absolute;
+ border: 1px solid #f44336;
+ font-size: 12px;
+ background-color: rgb(255, 255, 255, 0.9);
+ color: #f44336;
+ z-index: 1;
+ }
+ `]
+})
+export class ClozeChildErrorMessage {
+ @Input() elementModel!: InputElement;
+ @Input() elementFormControl!: UntypedFormControl;
+}
diff --git a/projects/common/components/input-elements/drop-list.component.ts b/projects/common/components/input-elements/drop-list.component.ts
index c89b752067273ece3a2ba714bc95662410abd6c9..0b1b694d0e60e069dba6b855ccfc769c793a7a56 100644
--- a/projects/common/components/input-elements/drop-list.component.ts
+++ b/projects/common/components/input-elements/drop-list.component.ts
@@ -155,7 +155,7 @@ import { FormElementComponent } from '../../directives/form-element-component.di
'.cdk-drag-placeholder {transition: transform 250ms cubic-bezier(0, 0, 0.2, 1);}',
'.cdk-drag-placeholder * {visibility: hidden;}',
'.static-placeholder .cdk-drag-placeholder {transform: unset !important;}',
- '.error-message {font-size: 75%;}',
+ '.error-message {font-size: 12px;}',
'.baseline-helper {width: 0; display: inline-block;}'
]
})
diff --git a/projects/common/pipes/error-transform.pipe.ts b/projects/common/pipes/error-transform.pipe.ts
index 85ad97828070fd5f60fb616655537e6c79ad87ed..1d9d9ffdef925e8aa1bab4086c523d235d422f4c 100644
--- a/projects/common/pipes/error-transform.pipe.ts
+++ b/projects/common/pipes/error-transform.pipe.ts
@@ -7,7 +7,7 @@ import { UIElement } from 'common/models/elements/element';
})
export class ErrorTransformPipe implements PipeTransform {
transform(validationErrors: ValidationErrors, elementModel: UIElement): string {
- const validationMessages = this.getValidationMessages(elementModel);
+ const validationMessages = ErrorTransformPipe.getValidationMessages(elementModel);
let returnMessage = '';
Object.keys(validationErrors).forEach(errorKey => {
@@ -19,7 +19,7 @@ export class ErrorTransformPipe implements PipeTransform {
return returnMessage;
}
- private getValidationMessages = (elementModel: UIElement): Record<string, string> => ({
+ private static getValidationMessages = (elementModel: UIElement): Record<string, string> => ({
required: elementModel.requiredWarnMessage as string,
minlength: elementModel.minLengthWarnMessage as string,
maxlength: elementModel.maxLengthWarnMessage as string,
diff --git a/projects/common/shared.module.ts b/projects/common/shared.module.ts
index e13627d3517eb32f20c2f1c3b19f90fc81a57a1c..ce8549ee9fc3509b57ef3e54b21496b4cf5b16dd 100644
--- a/projects/common/shared.module.ts
+++ b/projects/common/shared.module.ts
@@ -30,6 +30,7 @@ import { DynamicRowsDirective } from 'common/directives/dynamic-rows.directive';
import { TooltipEventTooltipDirective } from 'common/components/tooltip/tooltip-event-tooltip.directive';
import { TooltipComponent } from 'common/components/tooltip/tooltip.component';
import { PointerEventTooltipDirective } from 'common/components/tooltip/pointer-event-tooltip.directive';
+import { ClozeChildErrorMessage } from 'common/components/compound-elements/cloze/cloze-child-error-message';
import { TextComponent } from './components/text/text.component';
import { ButtonComponent } from './components/button/button.component';
import { TextFieldComponent } from './components/input-elements/text-field.component';
@@ -162,7 +163,8 @@ import { UnitDefErrorDialogComponent } from './components/unit-def-error-dialog.
UnitDefErrorDialogComponent,
TooltipComponent,
TooltipEventTooltipDirective,
- PointerEventTooltipDirective
+ PointerEventTooltipDirective,
+ ClozeChildErrorMessage
],
exports: [
CommonModule,
diff --git a/projects/player/src/styles.css b/projects/player/src/styles.css
index e4d43b3a227f398cdf59fd6af44afff4a2fcc653..d296915ddfd2ac121921bfaf9d94ce88ab348a55 100644
--- a/projects/player/src/styles.css
+++ b/projects/player/src/styles.css
@@ -7,14 +7,6 @@ body {
display: inline;
}
-.error-tooltip {
- border: 1px solid #f44336;
- margin-top: 8px !important;
- font-size: 12px;
- background-color: white;
- color: #f44336 !important;
-}
-
.active-anchor {
scroll-margin: 100px 0;
}