From 7d9c9dfaeca516ba17e345d3974b3994cc387477 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 21:44:21 +0100
Subject: [PATCH 01/18] Initial creation of input-field. (#288)

---
 .../base-components.component.html            |  4 +++
 .../base-components/base-components.module.ts |  4 ++-
 .../text-input/text-input.component.html      |  1 +
 .../text-input/text-input.component.scss      |  5 ++++
 .../text-input/text-input.component.spec.ts   | 25 +++++++++++++++++++
 .../inputs/text-input/text-input.component.ts | 12 +++++++++
 .../inputs/text-input/text-input.module.ts    | 18 +++++++++++++
 7 files changed, 68 insertions(+), 1 deletion(-)
 create mode 100644 src/core/components/inputs/text-input/text-input.component.html
 create mode 100644 src/core/components/inputs/text-input/text-input.component.scss
 create mode 100644 src/core/components/inputs/text-input/text-input.component.spec.ts
 create mode 100644 src/core/components/inputs/text-input/text-input.component.ts
 create mode 100644 src/core/components/inputs/text-input/text-input.module.ts

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index daae8da9..7bdd03c9 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -98,4 +98,8 @@ <h2>Buttons - Text only</h2>
     Info disabled
   </design-button-text>
 </div>
+<div class="componentContainer">
+  <design-text-input>
+  </design-text-input>
+</div>
 </div>
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index 5f0daab6..50c648df 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -6,6 +6,7 @@ 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";
 
 
 @NgModule({
@@ -17,7 +18,8 @@ import {ButtonTextModule} from "../../core/components/buttons/button-text/button
     BaseComponentsRoutingModule,
     ButtonModule,
     ButtonOutlineModule,
-    ButtonTextModule
+    ButtonTextModule,
+    TextInputModule
   ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
new file mode 100644
index 00000000..db6203a9
--- /dev/null
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -0,0 +1 @@
+<input type="text" placeholder="test" (change)="onChange.emit()">
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
new file mode 100644
index 00000000..0c7f5289
--- /dev/null
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -0,0 +1,5 @@
+@import "src/global-styles/_theme-colors.scss";
+
+input {
+  border: $primary-default
+}
diff --git a/src/core/components/inputs/text-input/text-input.component.spec.ts b/src/core/components/inputs/text-input/text-input.component.spec.ts
new file mode 100644
index 00000000..f895776f
--- /dev/null
+++ b/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();
+  });
+});
diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
new file mode 100644
index 00000000..75786124
--- /dev/null
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -0,0 +1,12 @@
+import {Component, EventEmitter, Output} from '@angular/core';
+
+@Component({
+  selector: 'design-text-input',
+  templateUrl: './text-input.component.html',
+  styleUrls: ['./text-input.component.scss']
+})
+export class TextInputComponent {
+
+  // eslint-disable-next-line @angular-eslint/no-output-on-prefix
+  @Output() public onChange = new EventEmitter<InputEvent>();
+}
diff --git a/src/core/components/inputs/text-input/text-input.module.ts b/src/core/components/inputs/text-input/text-input.module.ts
new file mode 100644
index 00000000..6ba804e1
--- /dev/null
+++ b/src/core/components/inputs/text-input/text-input.module.ts
@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { TextInputComponent } from './text-input.component';
+
+
+
+@NgModule({
+  declarations: [
+    TextInputComponent
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    TextInputComponent
+  ]
+})
+export class TextInputModule { }

From e791f02d3c7bfe68dad453633a3952b534c35ba6 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Tue, 22 Mar 2022 23:15:36 +0100
Subject: [PATCH 02/18] Initial styling with open todos. (#288)

---
 .../base-components.component.html            |  7 +++-
 .../base-components.component.ts              |  9 ++--
 .../text-input/text-input.component.html      |  9 +++-
 .../text-input/text-input.component.scss      | 41 ++++++++++++++++++-
 .../inputs/text-input/text-input.component.ts |  8 +++-
 5 files changed, 66 insertions(+), 8 deletions(-)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 7bdd03c9..a3eebbd5 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -99,7 +99,12 @@ <h2>Buttons - Text only</h2>
   </design-button-text>
 </div>
 <div class="componentContainer">
-  <design-text-input>
+  <h2>Input fields</h2>
+  <design-text-input
+    [label]="'Label'"
+    [placeholder]="'Platzhalter'"
+    [hintText]="'Das ist der Tipp.'"
+    (keydown.enter)="changedText($event)">
   </design-text-input>
 </div>
 </div>
diff --git a/src/app/base-components/base-components.component.ts b/src/app/base-components/base-components.component.ts
index ec2fc41d..e6462173 100644
--- a/src/app/base-components/base-components.component.ts
+++ b/src/app/base-components/base-components.component.ts
@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import {Component} from '@angular/core';
 
 @Component({
   selector: 'app-base-components',
@@ -7,9 +7,12 @@ import { Component } from '@angular/core';
 })
 export class BaseComponentsComponent {
 
-  constructor() { }
-
   pressedAlert(name: string) {
     alert(name + " was pressed!");
   }
+
+  changedText(event: any) {
+    console.log(event)
+    alert("Text changed! Text: " + event.target.value);
+  }
 }
diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
index db6203a9..196cf2c7 100644
--- a/src/core/components/inputs/text-input/text-input.component.html
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -1 +1,8 @@
-<input type="text" placeholder="test" (change)="onChange.emit()">
+<span>
+<label for="inputElement">{{label}}</label>
+<input id="inputElement" type="text"
+       [placeholder]="placeholder"
+       (keydown.enter)="onEnter.emit()">
+  <small class="hint">{{hintText}}</small>
+</span>
+
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 0c7f5289..e297b97b 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -1,5 +1,44 @@
 @import "src/global-styles/_theme-colors.scss";
 
 input {
-  border: $primary-default
+  width: auto; //TODO @Marcel. Richte das bitte mal anständig aus. Dankee :)
+  min-width: 95%;
+  // Die beiden margins sind iwie kacke. Sollten nicht nötig sein.
+  margin-top: 2px;
+  margin-bottom: 1px;
+
+  font-size: 20px;
+
+  background-color: $input-background;
+  color: $light-font;
+  padding: 8px 16px 8px 16px;
+  border: 0;
+  border-radius: 8px;
+
+  &:focus {
+    accent-color: $primary-default;
+  }
+
+  &::placeholder {
+    color: $placeholder-font
+  }
+}
+
+.hint {
+  font-size: 16px;
+  display: block;
+  color: $grey-font;
 }
+
+label {
+  font-size: 20px;
+  font-weight: bold; //Durch Jost medium ersetzen.
+  color: $light-font;
+}
+
+span {
+  vertical-align: top;
+  display: inline-block;
+}
+
+
diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index 75786124..5e9f9ee9 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -1,4 +1,4 @@
-import {Component, EventEmitter, Output} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 
 @Component({
   selector: 'design-text-input',
@@ -7,6 +7,10 @@ import {Component, EventEmitter, Output} from '@angular/core';
 })
 export class TextInputComponent {
 
+  @Input() placeholder: string = "Placeholder";
+  @Input() hintText: string = "This is a small hint.";
+  @Input() label: string = "Label";
+
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
-  @Output() public onChange = new EventEmitter<InputEvent>();
+  @Output() public onEnter = new EventEmitter<InputEvent>();
 }

From c620997f082817e2b2cfe78958cbfa7885c6cad2 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 12:25:18 +0100
Subject: [PATCH 03/18] Replaced font-weight: bold with 500. (#260)

---
 src/core/components/inputs/text-input/text-input.component.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index e297b97b..86c9dc63 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -32,7 +32,7 @@ input {
 
 label {
   font-size: 20px;
-  font-weight: bold; //Durch Jost medium ersetzen.
+  font-weight: 500;
   color: $light-font;
 }
 

From 405dbe22b0f8f60bd30e2f99cdc60f86dfb56de3 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 13:23:23 +0100
Subject: [PATCH 04/18] Added flavor and placeholder-styling. (#288)

---
 .../base-components.component.html            | 52 +++++++++++++++++-
 .../text-input/text-input.component.html      |  6 +-
 .../text-input/text-input.component.scss      | 55 ++++++++++++++-----
 .../inputs/text-input/text-input.component.ts |  7 +++
 4 files changed, 102 insertions(+), 18 deletions(-)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index d55d86d1..75ffc518 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -99,11 +99,57 @@ <h2>Buttons - Text only</h2>
   </design-button-text>
 </div>
 <div class="componentContainer">
-  <h2>Input fields</h2>
+  <h2>Textinput</h2>
   <design-text-input
+    class="component"
+    flavor="primary"
+    [hintColored]="true"
     [label]="'Label'"
-    [placeholder]="'Platzhalter'"
-    [hintText]="'Das ist der Tipp.'"
+    [placeholder]="'Primary field'"
+    [hintText]="'Das ist der bunte Tipp.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    [label]="'Label'"
+    [placeholder]="'Deaktiviert'"
+    [hintText]="'Das ist ein Tipp.'"
+    [disabled]="true">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="success"
+    [hintColored]="true"
+    [label]="'Label'"
+    [placeholder]="'Success field'"
+    [hintText]="'Das ist der bunte Tipp.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="warning"
+    [hintColored]="false"
+    [label]="'Label'"
+    [placeholder]="'Warning field'"
+    [hintText]="'Das ist der graue Tipp.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="danger"
+    [hintColored]="true"
+    [label]="'Label'"
+    [placeholder]="'Danger field'"
+    [hintText]="'Das ist der bunte Tipp.'"
+    (keydown.enter)="changedText($event)">
+  </design-text-input>
+  <design-text-input
+    class="component"
+    flavor="info"
+    [hintColored]="false"
+    [label]="'Label'"
+    [placeholder]="'Info field'"
+    [hintText]="'Das ist der graue Tipp.'"
     (keydown.enter)="changedText($event)">
   </design-text-input>
 </div>
diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
index 196cf2c7..070c2d61 100644
--- a/src/core/components/inputs/text-input/text-input.component.html
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -2,7 +2,9 @@
 <label for="inputElement">{{label}}</label>
 <input id="inputElement" type="text"
        [placeholder]="placeholder"
-       (keydown.enter)="onEnter.emit()">
-  <small class="hint">{{hintText}}</small>
+       (keydown.enter)="onEnter.emit()"
+       [class]="flavor"
+       [disabled]="disabled">
+  <small [class]="flavor" >{{hintText}}</small>
 </span>
 
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 86c9dc63..1c10d15b 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -1,37 +1,68 @@
+@use "sass:list";
 @import "src/global-styles/_theme-colors.scss";
 
+$flavors: (
+  primary: (
+    $primary-default
+  ),
+  success: (
+    $success-default
+  ),
+  warning: (
+    $warning-default
+  ),
+  danger: (
+    $danger-default
+  ),
+  info: (
+    $info-default
+  ),
+);
+
 input {
-  width: auto; //TODO @Marcel. Richte das bitte mal anständig aus. Dankee :)
-  min-width: 95%;
-  // Die beiden margins sind iwie kacke. Sollten nicht nötig sein.
+  // TODO Clean up..
+  width: fit-content;
+  min-width: 90%;
   margin-top: 2px;
   margin-bottom: 1px;
 
-  font-size: 20px;
-
   background-color: $input-background;
   color: $light-font;
+  font-family: inherit;
+  font-size: inherit;
+
   padding: 8px 16px 8px 16px;
   border: 0;
   border-radius: 8px;
 
-  &:focus {
-    accent-color: $primary-default;
-  }
-
   &::placeholder {
     color: $placeholder-font
   }
+  &:disabled::placeholder {
+    color: $disabled-placeholder-font
+  }
+
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      &:focus {
+        accent-color: list.nth($colors, 1);
+      }
+    }
+  }
 }
 
-.hint {
+small {
   font-size: 16px;
   display: block;
   color: $grey-font;
+  @each $name, $colors in $flavors {
+    &.#{$name} { //TODO if(hintColored && !disabled)
+      color: list.nth($colors, 1);
+    }
+  }
 }
 
 label {
-  font-size: 20px;
   font-weight: 500;
   color: $light-font;
 }
@@ -40,5 +71,3 @@ span {
   vertical-align: top;
   display: inline-block;
 }
-
-
diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index 5e9f9ee9..1d3c8e91 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -1,5 +1,8 @@
 import {Component, EventEmitter, Input, Output} from '@angular/core';
 
+export type Flavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
+
+
 @Component({
   selector: 'design-text-input',
   templateUrl: './text-input.component.html',
@@ -7,9 +10,13 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
 })
 export class TextInputComponent {
 
+  @Input() public disabled = false;
   @Input() placeholder: string = "Placeholder";
   @Input() hintText: string = "This is a small hint.";
   @Input() label: string = "Label";
+  @Input() hintColored: boolean = false;
+  @Input() public flavor: Flavor = 'primary';
+
 
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() public onEnter = new EventEmitter<InputEvent>();

From ad18acd7b337ce1628ca922d9d4b62aa871fc564 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 14:38:31 +0100
Subject: [PATCH 05/18] Fixed coloring for the hint-text. (#288)

---
 .../components/inputs/text-input/text-input.component.html  | 6 +++---
 .../components/inputs/text-input/text-input.component.scss  | 2 +-
 .../components/inputs/text-input/text-input.component.ts    | 4 ++++
 3 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
index 070c2d61..43c6557c 100644
--- a/src/core/components/inputs/text-input/text-input.component.html
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -1,10 +1,10 @@
 <span>
-<label for="inputElement">{{label}}</label>
-<input id="inputElement" type="text"
+  <label for="inputElement">{{label}}</label>
+  <input id="inputElement" type="text"
        [placeholder]="placeholder"
        (keydown.enter)="onEnter.emit()"
        [class]="flavor"
        [disabled]="disabled">
-  <small [class]="flavor" >{{hintText}}</small>
+  <small [class]="flavor+hintHaveColor()">{{hintText}}</small>
 </span>
 
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 1c10d15b..956c3a8f 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -56,7 +56,7 @@ small {
   display: block;
   color: $grey-font;
   @each $name, $colors in $flavors {
-    &.#{$name} { //TODO if(hintColored && !disabled)
+    &.#{$name}true {
       color: list.nth($colors, 1);
     }
   }
diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index 1d3c8e91..af666893 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -20,4 +20,8 @@ export class TextInputComponent {
 
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() public onEnter = new EventEmitter<InputEvent>();
+
+  hintHaveColor() {
+    return this.hintColored && !this.disabled;
+  }
 }

From 91cbbb23705d29e718ec2c9c19b7648e73812432 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 14:47:13 +0100
Subject: [PATCH 06/18] Improved coloring for the hint-text. (#288)

---
 .../inputs/text-input/text-input.component.html          | 2 +-
 .../inputs/text-input/text-input.component.scss          | 2 +-
 .../components/inputs/text-input/text-input.component.ts | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
index 43c6557c..bd0d378d 100644
--- a/src/core/components/inputs/text-input/text-input.component.html
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -5,6 +5,6 @@
        (keydown.enter)="onEnter.emit()"
        [class]="flavor"
        [disabled]="disabled">
-  <small [class]="flavor+hintHaveColor()">{{hintText}}</small>
+  <small [className]="coloredLabel() ? flavor : ''">{{hintText}}</small>
 </span>
 
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 956c3a8f..0865027c 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -56,7 +56,7 @@ small {
   display: block;
   color: $grey-font;
   @each $name, $colors in $flavors {
-    &.#{$name}true {
+    &.#{$name} {
       color: list.nth($colors, 1);
     }
   }
diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index af666893..e8776052 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -17,11 +17,14 @@ export class TextInputComponent {
   @Input() hintColored: boolean = false;
   @Input() public flavor: Flavor = 'primary';
 
-
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() public onEnter = new EventEmitter<InputEvent>();
 
-  hintHaveColor() {
-    return this.hintColored && !this.disabled;
+  coloredLabel(): string {
+    if(this.hintColored && !this.disabled){
+      return "colored";
+    } else {
+      return "";
+    }
   }
 }

From a9a9d86abae9b094fbc99a7f053bca8ff8484ae9 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 15:17:35 +0100
Subject: [PATCH 07/18] Empty defaults. (#288)

---
 .../components/inputs/text-input/text-input.component.ts    | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index e8776052..d605985e 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -11,9 +11,9 @@ export type Flavor = 'primary' | 'success' | 'warning' | 'danger' | 'info';
 export class TextInputComponent {
 
   @Input() public disabled = false;
-  @Input() placeholder: string = "Placeholder";
-  @Input() hintText: string = "This is a small hint.";
-  @Input() label: string = "Label";
+  @Input() placeholder: string = "";
+  @Input() hintText: string = "";
+  @Input() label: string = "";
   @Input() hintColored: boolean = false;
   @Input() public flavor: Flavor = 'primary';
 

From 83bfd5e63aeea9750eb9a23f8b0a1c40a45b37ec Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 15:18:07 +0100
Subject: [PATCH 08/18] Removed cloudflare trigger. (#288)

---
 src/app/base-components/base-components.component.html | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 75ffc518..954eb796 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -154,4 +154,3 @@ <h2>Textinput</h2>
   </design-text-input>
 </div>
 </div>
-<!-- Cloudflare trigger -->

From 451437c4295ee29857486b049d97e669875a9805 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 15:42:29 +0100
Subject: [PATCH 09/18] Improved focus behaviour. (#288)

---
 .../inputs/text-input/text-input.component.scss | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 0865027c..1a92daed 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -38,14 +38,27 @@ input {
   &::placeholder {
     color: $placeholder-font
   }
+
   &:disabled::placeholder {
     color: $disabled-placeholder-font
   }
 
   @each $name, $colors in $flavors {
     &.#{$name} {
-      &:focus {
-        accent-color: list.nth($colors, 1);
+
+      @if $name == "danger"
+      or $name == "warning"
+      or $name == "success"
+      or $name == "info" {
+        border: 2px solid;
+        border-color: list.nth($colors, 1);
+        &:focus {
+          outline: none;
+        }
+      } @else {
+        &:focus {
+          accent-color: list.nth($colors, 1);
+        }
       }
     }
   }

From c16f8182b3aaf39ec78c2e1edd210da284cc7e3a Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 15:45:30 +0100
Subject: [PATCH 10/18] For whatever reason `accent-color` is not supported in
 my chrome v99, even though it should be since v93. (#288)

---
 .../components/inputs/text-input/text-input.component.scss   | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 1a92daed..25d28610 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -34,6 +34,7 @@ input {
   padding: 8px 16px 8px 16px;
   border: 0;
   border-radius: 8px;
+  outline: none;
 
   &::placeholder {
     color: $placeholder-font
@@ -53,11 +54,11 @@ input {
         border: 2px solid;
         border-color: list.nth($colors, 1);
         &:focus {
-          outline: none;
         }
       } @else {
         &:focus {
-          accent-color: list.nth($colors, 1);
+          border: 2px solid;
+          border-color: list.nth($colors, 1);
         }
       }
     }

From 387f92f7f9418181718ac01a8b9a580292ca9a9c Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 15:48:05 +0100
Subject: [PATCH 11/18] Cleanup. (#288)

---
 .../inputs/text-input/text-input.component.scss           | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 25d28610..f1e7038d 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -51,14 +51,10 @@ input {
       or $name == "warning"
       or $name == "success"
       or $name == "info" {
-        border: 2px solid;
-        border-color: list.nth($colors, 1);
-        &:focus {
-        }
+        border: 2px solid list.nth($colors, 1);
       } @else {
         &:focus {
-          border: 2px solid;
-          border-color: list.nth($colors, 1);
+          border: 2px solid list.nth($colors, 1);
         }
       }
     }

From 45a16370aeb92135c846d6d408c7690228d3635e Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 18:28:19 +0100
Subject: [PATCH 12/18] Changes examples to english. (#279)

---
 .../base-components/base-components.component.html | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 954eb796..7f0167f0 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -106,14 +106,14 @@ <h2>Textinput</h2>
     [hintColored]="true"
     [label]="'Label'"
     [placeholder]="'Primary field'"
-    [hintText]="'Das ist der bunte Tipp.'"
+    [hintText]="'A colored hint.'"
     (keydown.enter)="changedText($event)">
   </design-text-input>
   <design-text-input
     class="component"
     [label]="'Label'"
-    [placeholder]="'Deaktiviert'"
-    [hintText]="'Das ist ein Tipp.'"
+    [placeholder]="'Disabled'"
+    [hintText]="'A hint.'"
     [disabled]="true">
   </design-text-input>
   <design-text-input
@@ -122,7 +122,7 @@ <h2>Textinput</h2>
     [hintColored]="true"
     [label]="'Label'"
     [placeholder]="'Success field'"
-    [hintText]="'Das ist der bunte Tipp.'"
+    [hintText]="'A colored hint.'"
     (keydown.enter)="changedText($event)">
   </design-text-input>
   <design-text-input
@@ -131,7 +131,7 @@ <h2>Textinput</h2>
     [hintColored]="false"
     [label]="'Label'"
     [placeholder]="'Warning field'"
-    [hintText]="'Das ist der graue Tipp.'"
+    [hintText]="'A grey hint.'"
     (keydown.enter)="changedText($event)">
   </design-text-input>
   <design-text-input
@@ -140,7 +140,7 @@ <h2>Textinput</h2>
     [hintColored]="true"
     [label]="'Label'"
     [placeholder]="'Danger field'"
-    [hintText]="'Das ist der bunte Tipp.'"
+    [hintText]="'A colored hint.'"
     (keydown.enter)="changedText($event)">
   </design-text-input>
   <design-text-input
@@ -149,7 +149,7 @@ <h2>Textinput</h2>
     [hintColored]="false"
     [label]="'Label'"
     [placeholder]="'Info field'"
-    [hintText]="'Das ist der graue Tipp.'"
+    [hintText]="'A grey hint.'"
     (keydown.enter)="changedText($event)">
   </design-text-input>
 </div>

From 30bbdab4120d4179394239c9e8dcbf6554c79014 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 19:17:17 +0100
Subject: [PATCH 13/18] Fixes for ma philipp boy <3. (#279)

---
 .../components/inputs/text-input/text-input.component.html    | 2 +-
 .../components/inputs/text-input/text-input.component.scss    | 2 +-
 src/core/components/inputs/text-input/text-input.component.ts | 4 ++--
 3 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
index bd0d378d..d1773e8c 100644
--- a/src/core/components/inputs/text-input/text-input.component.html
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -5,6 +5,6 @@
        (keydown.enter)="onEnter.emit()"
        [class]="flavor"
        [disabled]="disabled">
-  <small [className]="coloredLabel() ? flavor : ''">{{hintText}}</small>
+  <small [className]="getLabelColor()">{{hintText}}</small>
 </span>
 
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index f1e7038d..58725e1f 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -32,7 +32,7 @@ input {
   font-size: inherit;
 
   padding: 8px 16px 8px 16px;
-  border: 0;
+  border: 2px solid transparent;
   border-radius: 8px;
   outline: none;
 
diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index d605985e..075ede2e 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -20,8 +20,8 @@ export class TextInputComponent {
   // eslint-disable-next-line @angular-eslint/no-output-on-prefix
   @Output() public onEnter = new EventEmitter<InputEvent>();
 
-  coloredLabel(): string {
-    if(this.hintColored && !this.disabled){
+  getLabelColor() {
+    if(this.hintColored && !this.disabled && this.flavor != "primary"){
       return "colored";
     } else {
       return "";

From 7656aa5b3b34fb46c6ba9ec0059e13075308d886 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 19:21:18 +0100
Subject: [PATCH 14/18] Fixed hint color. (#279)

---
 src/core/components/inputs/text-input/text-input.component.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index 075ede2e..81828848 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -22,7 +22,7 @@ export class TextInputComponent {
 
   getLabelColor() {
     if(this.hintColored && !this.disabled && this.flavor != "primary"){
-      return "colored";
+      return this.flavor;
     } else {
       return "";
     }

From c6bd61c286ea5810927c590edb7a073953259820 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 20:08:34 +0100
Subject: [PATCH 15/18] Fixed fonts. (#279)

---
 angular.json                                  | 16 +++++++++
 package-lock.json                             | 11 ++++++
 package.json                                  |  1 +
 .../text-input/text-input.component.scss      | 35 ++++++-------------
 src/global-styles/_variables.scss             |  3 +-
 src/styles.scss                               | 13 ++++---
 6 files changed, 49 insertions(+), 30 deletions(-)

diff --git a/angular.json b/angular.json
index 39ba2d35..d3c35b64 100644
--- a/angular.json
+++ b/angular.json
@@ -44,6 +44,14 @@
               "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",
+              "node_modules/@fontsource/ubuntu-mono/500.css",
+              "node_modules/@fontsource/ubuntu-mono/500-italic.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
@@ -118,6 +126,14 @@
               "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",
+              "node_modules/@fontsource/ubuntu-mono/500.css",
+              "node_modules/@fontsource/ubuntu-mono/500-italic.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
diff --git a/package-lock.json b/package-lock.json
index 8a5524cb..163d4094 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -18,6 +18,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",
@@ -2631,6 +2632,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz",
       "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ=="
     },
+    "node_modules/@fontsource/ubuntu-mono": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@fontsource/ubuntu-mono/-/ubuntu-mono-4.5.4.tgz",
+      "integrity": "sha512-zJL8ImnfNWrAzmjaWlxnYtAT54j2kxZm2sUtx/UQ6JPEypeaC51iQ3HAZOa8h8TzF0ZuJmxxlAsI+mHdvT+rkg=="
+    },
     "node_modules/@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
@@ -15362,6 +15368,11 @@
       "resolved": "https://registry.npmjs.org/@fontsource/jost/-/jost-4.5.4.tgz",
       "integrity": "sha512-KHTF84XsoO3MUxHjdUqwF7jsHbqyZAafceFngKURUfx2MdN795ilQ7noNW2gu7qlv2N1fwGJnAUhCTUGelkLwQ=="
     },
+    "@fontsource/ubuntu-mono": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/@fontsource/ubuntu-mono/-/ubuntu-mono-4.5.4.tgz",
+      "integrity": "sha512-zJL8ImnfNWrAzmjaWlxnYtAT54j2kxZm2sUtx/UQ6JPEypeaC51iQ3HAZOa8h8TzF0ZuJmxxlAsI+mHdvT+rkg=="
+    },
     "@gar/promisify": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz",
diff --git a/package.json b/package.json
index cb773f4b..4c086212 100644
--- a/package.json
+++ b/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",
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index 58725e1f..d557541a 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -1,28 +1,15 @@
-@use "sass:list";
 @import "src/global-styles/_theme-colors.scss";
 
 $flavors: (
-  primary: (
-    $primary-default
-  ),
-  success: (
-    $success-default
-  ),
-  warning: (
-    $warning-default
-  ),
-  danger: (
-    $danger-default
-  ),
-  info: (
-    $info-default
-  ),
+  primary: $primary-default,
+  success: $success-default,
+  warning: $warning-default,
+  danger: $danger-default,
+  info: $info-default,
 );
 
 input {
-  // TODO Clean up..
-  width: fit-content;
-  min-width: 90%;
+  width: 100%;
   margin-top: 2px;
   margin-bottom: 1px;
 
@@ -44,17 +31,17 @@ input {
     color: $disabled-placeholder-font
   }
 
-  @each $name, $colors in $flavors {
+  @each $name, $color in $flavors {
     &.#{$name} {
 
       @if $name == "danger"
       or $name == "warning"
       or $name == "success"
       or $name == "info" {
-        border: 2px solid list.nth($colors, 1);
+        border: 2px solid $color;
       } @else {
         &:focus {
-          border: 2px solid list.nth($colors, 1);
+          border: 2px solid $color;
         }
       }
     }
@@ -65,9 +52,9 @@ small {
   font-size: 16px;
   display: block;
   color: $grey-font;
-  @each $name, $colors in $flavors {
+  @each $name, $color in $flavors {
     &.#{$name} {
-      color: list.nth($colors, 1);
+      color: $color;
     }
   }
 }
diff --git a/src/global-styles/_variables.scss b/src/global-styles/_variables.scss
index 55fd1eff..88412ffd 100644
--- a/src/global-styles/_variables.scss
+++ b/src/global-styles/_variables.scss
@@ -18,7 +18,6 @@ $window-input-background: #1a1a1a;
 $task-manager-chart-back: rgba(12, 12, 12, 0.7);
 $task-manager-chart-border: #8c8c8c;
 $start-menu-background: rgba(0, 0, 0, 0.719);
-
 //  FONTS  //
 
-$default-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+$default-font: Jost, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
diff --git a/src/styles.scss b/src/styles.scss
index 82bfe68c..f1bb3ff5 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,23 +1,28 @@
 /* You can add global styles to this file, and also import other style files */
-@import url("https://fonts.googleapis.com/css?family=Ubuntu+Mono");
 @import "variables";
 @import "controls";
 @import "context-menu";
-@import "@fontsource/jost";
 
 app-root {
   width: 100%;
   height: 100%;
 }
 
+* {
+  box-sizing: border-box;
+}
+
 body,
 html {
   width: 100%;
   height: 100%;
   margin: 0;
-  overflow: hidden;
   font-size: 20px;
-  font-family: "Jost", Roboto, "Open Sans", sans-serif;
+  overflow: hidden;
   background-color: #000;
   color: #fff;
 }
+
+button, input, select, textarea, span, div, a, p, small {
+  font-family: $default-font;
+}

From eb7c403221eda4087162f383e5ffb932bf503c0f Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 20:11:47 +0100
Subject: [PATCH 16/18] Reduced DOMs. (#279)

---
 .../text-input/text-input.component.html      | 16 +++++++--------
 .../text-input/text-input.component.scss      | 20 +++++++++----------
 2 files changed, 17 insertions(+), 19 deletions(-)

diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
index d1773e8c..cace2274 100644
--- a/src/core/components/inputs/text-input/text-input.component.html
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -1,10 +1,8 @@
-<span>
-  <label for="inputElement">{{label}}</label>
-  <input id="inputElement" type="text"
-       [placeholder]="placeholder"
-       (keydown.enter)="onEnter.emit()"
-       [class]="flavor"
-       [disabled]="disabled">
-  <small [className]="getLabelColor()">{{hintText}}</small>
-</span>
+<label for="inputElement">{{label}}</label>
+<input id="inputElement" type="text"
+     [placeholder]="placeholder"
+     (keydown.enter)="onEnter.emit()"
+     [class]="flavor"
+     [disabled]="disabled">
+<small [className]="getLabelColor()">{{hintText}}</small>
 
diff --git a/src/core/components/inputs/text-input/text-input.component.scss b/src/core/components/inputs/text-input/text-input.component.scss
index d557541a..aa03a37a 100644
--- a/src/core/components/inputs/text-input/text-input.component.scss
+++ b/src/core/components/inputs/text-input/text-input.component.scss
@@ -8,6 +8,16 @@ $flavors: (
   info: $info-default,
 );
 
+:host {
+  vertical-align: top;
+  display: inline-block;
+}
+
+label {
+  font-weight: 500;
+  color: $light-font;
+}
+
 input {
   width: 100%;
   margin-top: 2px;
@@ -58,13 +68,3 @@ small {
     }
   }
 }
-
-label {
-  font-weight: 500;
-  color: $light-font;
-}
-
-span {
-  vertical-align: top;
-  display: inline-block;
-}

From 07ce26557d4753c32e0c0887bbd2dbd2a922c3d0 Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Wed, 23 Mar 2022 20:16:40 +0100
Subject: [PATCH 17/18] Fixed Font. (#279)

---
 angular.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/angular.json b/angular.json
index d3c35b64..c8a4b710 100644
--- a/angular.json
+++ b/angular.json
@@ -50,8 +50,6 @@
               "node_modules/@fontsource/jost/500-italic.css",
               "node_modules/@fontsource/ubuntu-mono/400.css",
               "node_modules/@fontsource/ubuntu-mono/400-italic.css",
-              "node_modules/@fontsource/ubuntu-mono/500.css",
-              "node_modules/@fontsource/ubuntu-mono/500-italic.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {
@@ -132,8 +130,6 @@
               "node_modules/@fontsource/jost/500-italic.css",
               "node_modules/@fontsource/ubuntu-mono/400.css",
               "node_modules/@fontsource/ubuntu-mono/400-italic.css",
-              "node_modules/@fontsource/ubuntu-mono/500.css",
-              "node_modules/@fontsource/ubuntu-mono/500-italic.css",
               "src/styles.scss"
             ],
             "stylePreprocessorOptions": {

From ae090c4558878a55d602405c7feefe67c70c264d Mon Sep 17 00:00:00 2001
From: Tristan-H11 <triddel02@gmx.de>
Date: Sun, 27 Mar 2022 14:57:21 +0200
Subject: [PATCH 18/18] =?UTF-8?q?Marcelsche=20=C3=84nderungen.=20(#288)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../base-components.component.html            |  7 +-
 .../base-components.component.ts              | 11 +++
 .../base-components/base-components.module.ts | 18 +++--
 .../text-input/text-input.component.html      | 14 ++--
 .../inputs/text-input/text-input.component.ts | 76 +++++++++++++++++--
 5 files changed, 105 insertions(+), 21 deletions(-)

diff --git a/src/app/base-components/base-components.component.html b/src/app/base-components/base-components.component.html
index 7f0167f0..e4fce684 100644
--- a/src/app/base-components/base-components.component.html
+++ b/src/app/base-components/base-components.component.html
@@ -101,20 +101,21 @@ <h2>Buttons - Text only</h2>
 <div class="componentContainer">
   <h2>Textinput</h2>
   <design-text-input
+    [formControl]="controlWithValidator"
     class="component"
     flavor="primary"
     [hintColored]="true"
     [label]="'Label'"
     [placeholder]="'Primary field'"
-    [hintText]="'A colored hint.'"
+    [hintText]="getValidatorHintText()"
     (keydown.enter)="changedText($event)">
   </design-text-input>
   <design-text-input
+    [formControl]="control"
     class="component"
     [label]="'Label'"
     [placeholder]="'Disabled'"
-    [hintText]="'A hint.'"
-    [disabled]="true">
+    [hintText]="'A hint.'">
   </design-text-input>
   <design-text-input
     class="component"
diff --git a/src/app/base-components/base-components.component.ts b/src/app/base-components/base-components.component.ts
index e6462173..3adfe97c 100644
--- a/src/app/base-components/base-components.component.ts
+++ b/src/app/base-components/base-components.component.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {FormControl, Validators} from "@angular/forms";
 
 @Component({
   selector: 'app-base-components',
@@ -7,6 +8,9 @@ import {Component} from '@angular/core';
 })
 export class BaseComponentsComponent {
 
+  control: FormControl = new FormControl({value: 0, disabled: true}, [Validators.required]);
+  controlWithValidator: FormControl = new FormControl(0, [Validators.required]);
+
   pressedAlert(name: string) {
     alert(name + " was pressed!");
   }
@@ -15,4 +19,11 @@ export class BaseComponentsComponent {
     console.log(event)
     alert("Text changed! Text: " + event.target.value);
   }
+
+  getValidatorHintText() {
+    if (this.controlWithValidator.errors?.['required']) {
+      return "Value is required";
+    }
+    return "";
+  }
 }
diff --git a/src/app/base-components/base-components.module.ts b/src/app/base-components/base-components.module.ts
index 50c648df..65298937 100644
--- a/src/app/base-components/base-components.module.ts
+++ b/src/app/base-components/base-components.module.ts
@@ -7,19 +7,21 @@ 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,
-    TextInputModule
-  ]
+    imports: [
+        CommonModule,
+        BaseComponentsRoutingModule,
+        ButtonModule,
+        ButtonOutlineModule,
+        ButtonTextModule,
+        TextInputModule,
+        ReactiveFormsModule
+    ]
 })
 export class BaseComponentsModule { }
diff --git a/src/core/components/inputs/text-input/text-input.component.html b/src/core/components/inputs/text-input/text-input.component.html
index cace2274..a3f0e798 100644
--- a/src/core/components/inputs/text-input/text-input.component.html
+++ b/src/core/components/inputs/text-input/text-input.component.html
@@ -1,8 +1,12 @@
 <label for="inputElement">{{label}}</label>
 <input id="inputElement" type="text"
-     [placeholder]="placeholder"
-     (keydown.enter)="onEnter.emit()"
-     [class]="flavor"
-     [disabled]="disabled">
+       [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>
diff --git a/src/core/components/inputs/text-input/text-input.component.ts b/src/core/components/inputs/text-input/text-input.component.ts
index 81828848..10b47f16 100644
--- a/src/core/components/inputs/text-input/text-input.component.ts
+++ b/src/core/components/inputs/text-input/text-input.component.ts
@@ -1,30 +1,96 @@
-import {Component, EventEmitter, Input, Output} from '@angular/core';
+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']
+  styleUrls: ['./text-input.component.scss'],
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      multi: true,
+      useExisting: TextInputComponent
+    }
+  ]
 })
-export class TextInputComponent {
+export class TextInputComponent implements ControlValueAccessor {
 
-  @Input() public disabled = false;
+  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"){
+    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);
+    }
+  }
 }