text-field-simple.component.ts

import {
  Component, EventEmitter, Input, Output, ViewEncapsulation
} from '@angular/core';
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',
  template: `
    <input #input
           class="clozeChild"
           autocomplete="off"
           autocapitalize="none"
           autocorrect="off"
           spellcheck="false"
           [class.text-field-simple-error]="elementFormControl.errors && elementFormControl.touched"
           [matTooltip]="elementFormControl.errors && elementFormControl.touched ?
                         (elementFormControl.errors | errorTransform: elementModel) : ''"
           [matTooltipClass]="{'text-field-simple-error-tooltip': true}"
           [attr.inputmode]="elementModel.showSoftwareKeyboard ? 'none' : 'text'"
           [style.line-height.%]="elementModel.styling.lineHeight"
           [style.color]="elementModel.styling.fontColor"
           [style.font-family]="elementModel.styling.font"
           [style.font-size.px]="elementModel.styling.fontSize"
           [style.font-weight]="elementModel.styling.bold ? 'bold' : ''"
           [style.font-style]="elementModel.styling.italic ? 'italic' : ''"
           [style.text-decoration]="elementModel.styling.underline ? 'underline' : ''"
           [readonly]="elementModel.readOnly"
           [formControl]="elementFormControl"
           [value]="elementModel.value"
           (keydown)="elementModel.showSoftwareKeyboard ? hardwareKeyDetected.emit() : null"
           (focus)="focusChanged.emit({ inputElement: input, focused: true })"
           (blur)="focusChanged.emit({ inputElement: input, focused: false })">
  `,
  styles: [
    'aspect-text-field-simple .clozeChild {border: 1px solid rgba(0,0,0,.12); border-radius: 5px}',
    'aspect-text-field-simple input{width: calc(100% - 2px); height: calc(100% - 2px);}',
    'aspect-text-field-simple input{vertical-align: top; padding: 0;}',
    'aspect-text-field-simple input:hover {border: 1px solid currentColor;}',
    'aspect-text-field-simple input:focus {outline: 1px solid #3f51b5;}',
    '.text-field-simple-error {outline: 2px solid #f44336 !important;}',
    '.text-field-simple-error:hover {border: 1px solid  #f44336;}',
    '.text-field-simple-error-tooltip {border: 1px solid #f44336; margin-top: 8px !important;}',
    '.text-field-simple-error-tooltip {background-color: white; color: #f44336 !important;}'
  ],
  encapsulation: ViewEncapsulation.None // Required for overriding tooltip
})
export class TextFieldSimpleComponent extends FormElementComponent {
  @Input() elementModel!: TextFieldSimpleElement;
  @Output() hardwareKeyDetected = new EventEmitter();
  @Output() focusChanged = new EventEmitter<{ inputElement: HTMLElement; focused: boolean }>();
}