Base Component Input: Text-Field (#288)

angular.json

@@ -44,6 +44,12 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/@fontsource/jost/400.css",
+              "node_modules/@fontsource/jost/400-italic.css",
+              "node_modules/@fontsource/jost/500.css",
+              "node_modules/@fontsource/jost/500-italic.css",
+              "node_modules/@fontsource/ubuntu-mono/400.css",
+              "node_modules/@fontsource/ubuntu-mono/400-italic.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
@@ -118,6 +124,12 @@
               "src/assets"
             ],
             "styles": [
+              "node_modules/@fontsource/jost/400.css",
+              "node_modules/@fontsource/jost/400-italic.css",
+              "node_modules/@fontsource/jost/500.css",
+              "node_modules/@fontsource/jost/500-italic.css",
+              "node_modules/@fontsource/ubuntu-mono/400.css",
+              "node_modules/@fontsource/ubuntu-mono/400-italic.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {

package.json

@@ -25,6 +25,7 @@
     "@angular/platform-browser-dynamic": "~13.2.5",
     "@angular/router": "~13.2.5",
     "@fontsource/jost": "^4.5.4",
+    "@fontsource/ubuntu-mono": "^4.5.4",
     "@sentry/angular": "^6.18.2",
     "ng-particles": "^2.40.2",
     "rxjs": "~7.5.0",

src/app/base-components/base-components.component.html

@@ -98,5 +98,60 @@ <h2>Buttons - Text only</h2>
     Info disabled
   </design-button-text>
 </div>
+<div class="componentContainer">
+  <h2>Textinput</h2>
+  <design-text-input
+    [formControl]="controlWithValidator"
+    class="component"
+    flavor="primary"
+    [hintColored]="true"
+    [label]="'Label'"
+    [placeholder]="'Primary field'"
+    [hintText]="getValidatorHintText()"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    [formControl]="control"
+    class="component"
+    [label]="'Label'"
+    [placeholder]="'Disabled'"
+    [hintText]="'A hint.'">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="success"
+    [hintColored]="true"
+    [label]="'Label'"
+    [placeholder]="'Success field'"
+    [hintText]="'A colored hint.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="warning"
+    [hintColored]="false"
+    [label]="'Label'"
+    [placeholder]="'Warning field'"
+    [hintText]="'A grey hint.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="danger"
+    [hintColored]="true"
+    [label]="'Label'"
+    [placeholder]="'Danger field'"
+    [hintText]="'A colored hint.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="info"
+    [hintColored]="false"
+    [label]="'Label'"
+    [placeholder]="'Info field'"
+    [hintText]="'A grey hint.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+</div>
 </div>
-<!-- Cloudflare trigger -->

src/app/base-components/base-components.component.ts

@@ -1,4 +1,5 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
+import {FormControl, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-base-components',
@@ -7,9 +8,22 @@ import { Component } from '@angular/core';
 })
 export class BaseComponentsComponent {
 
-  constructor() { }
+  control: FormControl = new FormControl({value: 0, disabled: true}, [Validators.required]);
+  controlWithValidator: FormControl = new FormControl(0, [Validators.required]);
 
   pressedAlert(name: string) {
     alert(name + " was pressed!");
   }
+
+  changedText(event: any) {
+    console.log(event)
+    alert("Text changed! Text: " + event.target.value);
+  }
+
+  getValidatorHintText() {
+    if (this.controlWithValidator.errors?.['required']) {
+      return "Value is required";
+    }
+    return "";
+  }
 }

src/app/base-components/base-components.module.ts

@@ -6,18 +6,22 @@ import { BaseComponentsComponent } from './base-components.component';
 import {ButtonModule} from "../../core/components/buttons/button/button.module";
 import {ButtonOutlineModule} from "../../core/components/buttons/button-outline/button-outline.module";
 import {ButtonTextModule} from "../../core/components/buttons/button-text/button-text.module";
+import {TextInputModule} from "../../core/components/inputs/text-input/text-input.module";
+import {ReactiveFormsModule} from "@angular/forms";
 
 
 @NgModule({
   declarations: [
     BaseComponentsComponent
   ],
-  imports: [
-    CommonModule,
-    BaseComponentsRoutingModule,
-    ButtonModule,
-    ButtonOutlineModule,
-    ButtonTextModule
-  ]
+    imports: [
+        CommonModule,
+        BaseComponentsRoutingModule,
+        ButtonModule,
+        ButtonOutlineModule,
+        ButtonTextModule,
+        TextInputModule,
+        ReactiveFormsModule
+    ]
 })
 export class BaseComponentsModule { }

src/core/components/inputs/text-input/text-input.component.html

@@ -0,0 +1,12 @@
+<label for="inputElement">{{label}}</label>
+<input id="inputElement" type="text"
+       [placeholder]="placeholder"
+       (keydown.enter)="onEnter.emit()"
+       [class]="flavor"
+       [disabled]="disabled"
+       (input)="onInput($event.target)"
+       (blur)="onTouched?.()"
+       (compositionstart)="compositionStart()"
+       (compositionend)="compositionEnd($event.target)">
+<small [className]="getLabelColor()">{{hintText}}</small>
+<ng-content></ng-content>

src/core/components/inputs/text-input/text-input.component.scss

@@ -0,0 +1,70 @@
+@import "src/global-styles/_theme-colors.scss";
+
+$flavors: (
+  primary: $primary-default,
+  success: $success-default,
+  warning: $warning-default,
+  danger: $danger-default,
+  info: $info-default,
+);
+
+:host {
+  vertical-align: top;
+  display: inline-block;
+}
+
+label {
+  font-weight: 500;
+  color: $light-font;
+}
+
+input {
+  width: 100%;
+  margin-top: 2px;
+  margin-bottom: 1px;
+
+  background-color: $input-background;
+  color: $light-font;
+  font-family: inherit;
+  font-size: inherit;
+
+  padding: 8px 16px 8px 16px;
+  border: 2px solid transparent;
+  border-radius: 8px;
+  outline: none;
+
+  &::placeholder {
+    color: $placeholder-font
+  }
+
+  &:disabled::placeholder {
+    color: $disabled-placeholder-font
+  }
+
+  @each $name, $color in $flavors {
+    &.#{$name} {
+
+      @if $name == "danger"
+      or $name == "warning"
+      or $name == "success"
+      or $name == "info" {
+        border: 2px solid $color;
+      } @else {
+        &:focus {
+          border: 2px solid $color;
+        }
+      }
+    }
+  }
+}
+
+small {
+  font-size: 16px;
+  display: block;
+  color: $grey-font;
+  @each $name, $color in $flavors {
+    &.#{$name} {
+      color: $color;
+    }
+  }
+}

src/core/components/inputs/text-input/text-input.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TextInputComponent } from './text-input.component';
+
+describe('TextInputComponent', () => {
+  let component: TextInputComponent;
+  let fixture: ComponentFixture<TextInputComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ TextInputComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TextInputComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/core/components/inputs/text-input/text-input.component.ts

@@ -0,0 +1,96 @@
+import {Component, EventEmitter, Input, Output, ViewChild} from '@angular/core';
+import {ControlValueAccessor, NG_VALUE_ACCESSOR} from "@angular/forms";
+import {ɵgetDOM as getDOM} from '@angular/common';
+
+export type Flavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+/**
+ * We must check whether the agent is Android because composition events
+ * behave differently between iOS and Android.
+ */
+function isAndroid(): boolean {
+  const userAgent = getDOM() ? getDOM().getUserAgent() : '';
+  return /android (\d+)/.test(userAgent.toLowerCase());
+}
+
+@Component({
+  selector: 'design-text-input',
+  templateUrl: './text-input.component.html',
+  styleUrls: ['./text-input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: TextInputComponent
+    }
+  ]
+})
+export class TextInputComponent implements ControlValueAccessor {
+
+  public disabled = false;
+  @Input() placeholder: string = "";
+  @Input() hintText: string = "";
+  @Input() label: string = "";
+  @Input() hintColored: boolean = false;
+  @Input() public flavor: Flavor = 'primary';
+  @ViewChild(HTMLInputElement) private input?: HTMLInputElement;
+
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() public onEnter = new EventEmitter<InputEvent>();
+  onChanged: ((_: any) => void) | null = null;
+  onTouched: (() => void) | null = null;
+  composing: boolean = false;
+
+  private readonly compositionMode: boolean | null;
+
+  constructor() {
+    if (this.compositionMode === null) {
+      this.compositionMode = !isAndroid();
+    }
+  }
+
+  writeValue(obj: any): void {
+    if(this.input) {
+      this.input.value = obj
+    }
+  }
+
+  registerOnChange(fn: (_: any) => void): void {
+    this.onChanged = fn;
+  }
+
+  registerOnTouched(fn: () => void): void {
+    this.onTouched = fn;
+  }
+
+  setDisabledState(isDisabled: boolean) {
+    this.disabled = isDisabled;
+  }
+
+  getLabelColor() {
+    if (this.hintColored && !this.disabled && this.flavor != "primary") {
+      return this.flavor;
+    } else {
+      return "";
+    }
+  }
+
+  onInput(target: EventTarget | null) {
+    if (!this.compositionMode || (this.compositionMode && !this.composing)) {
+      // @ts-ignore
+      this.onChanged?.(target.value)
+    }
+  }
+
+  compositionStart() {
+    this.composing = true;
+  }
+
+  compositionEnd(target: EventTarget | null) {
+    this.composing = false;
+    if (this.compositionMode) {
+      // @ts-ignore
+      this.onChanged?.(target.value);
+    }
+  }
+}