Initial styling with open todos. (#288)

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>

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);
+  }
 }

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>
+

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;
+}
+
+

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>();
 }