Base Component Input: Text-Field (#288)

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
+    class="component"
+    flavor="primary"
+    [hintColored]="true"
+    [label]="'Label'"
+    [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>
 </div>
 <!-- Cloudflare trigger -->

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/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 { }

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

@@ -0,0 +1,10 @@
+<span>
+  <label for="inputElement">{{label}}</label>
+  <input id="inputElement" type="text"
+       [placeholder]="placeholder"
+       (keydown.enter)="onEnter.emit()"
+       [class]="flavor"
+       [disabled]="disabled">
+  <small [className]="coloredLabel() ? flavor : ''">{{hintText}}</small>
+</span>
+

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

@@ -0,0 +1,73 @@
+@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 {
+  // TODO Clean up..
+  width: fit-content;
+  min-width: 90%;
+  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: 0;
+  border-radius: 8px;
+
+  &::placeholder {
+    color: $placeholder-font
+  }
+  &:disabled::placeholder {
+    color: $disabled-placeholder-font
+  }
+
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      &:focus {
+        accent-color: list.nth($colors, 1);
+      }
+    }
+  }
+}
+
+small {
+  font-size: 16px;
+  display: block;
+  color: $grey-font;
+  @each $name, $colors in $flavors {
+    &.#{$name} {
+      color: list.nth($colors, 1);
+    }
+  }
+}
+
+label {
+  font-weight: 500;
+  color: $light-font;
+}
+
+span {
+  vertical-align: top;
+  display: inline-block;
+}

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,30 @@
+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',
+  styleUrls: ['./text-input.component.scss']
+})
+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>();
+
+  coloredLabel(): string {
+    if(this.hintColored && !this.disabled){
+      return "colored";
+    } else {
+      return "";
+    }
+  }
+}

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 { }