Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
import { Component, ViewChild } from '@angular/core';
import { MatInput } from '@angular/material/input';
import { FormElementComponent } from '../form-element-component.directive';
import { SpellCorrectElement } from '../models/spell-correct-element';
@Component({
selector: 'app-spell-correct',
template: `
<div fxFlex
fxLayout="column"
[style.width.%]="100"
appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
[style.height.%]="100">
<mat-form-field class="small-input">
<input matInput type="text"
[style.text-align]="'center'"
autocomplete="off"
[formControl]="elementFormControl">
</mat-form-field>
<button mat-button
[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.width.%]="100"
[style.margin-top]="'-20px'"
[style.text-decoration-line]="strikethrough() ? 'line-through' : ''"
(click)="onClick($event)">
{{elementModel.label}}
</button>
</div>
`,
styles: [
'::ng-deep app-spell-correct .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
]
})
export class SpellCorrectComponent extends FormElementComponent {
elementModel!: SpellCorrectElement;
@ViewChild(MatInput) inputElement!: MatInput;
strikethrough(): boolean {
if (this.inputElement) {
const value = this.inputElement.value;
if (value === null) return false;
if (value === undefined) return false;
return value.length > 0;
}
return false;
}
onClick(event: MouseEvent) : void {
if (this.strikethrough()) {
this.elementFormControl.setValue('');
} else {
this.elementFormControl.setValue(this.elementModel.label);
this.inputElement.focus();
}
event.preventDefault();
event.stopPropagation();
}
}