Skip to content
This repository has been archived by the owner on Sep 20, 2023. It is now read-only.

Commit

Permalink
Marcelsche Änderungen. (#288)
Browse files Browse the repository at this point in the history
  • Loading branch information
Tristan-H11 committed Mar 27, 2022
1 parent 07ce265 commit ae090c4
Show file tree
Hide file tree
Showing 5 changed files with 105 additions and 21 deletions.
7 changes: 4 additions & 3 deletions src/app/base-components/base-components.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
11 changes: 11 additions & 0 deletions src/app/base-components/base-components.component.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import {Component} from '@angular/core';
import {FormControl, Validators} from "@angular/forms";

@Component({
selector: 'app-base-components',
Expand All @@ -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!");
}
Expand All @@ -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 "";
}
}
18 changes: 10 additions & 8 deletions src/app/base-components/base-components.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 { }
14 changes: 9 additions & 5 deletions src/core/components/inputs/text-input/text-input.component.html
Original file line number Diff line number Diff line change
@@ -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>
76 changes: 71 additions & 5 deletions src/core/components/inputs/text-input/text-input.component.ts
Original file line number Diff line number Diff line change
@@ -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);
}
}
}

0 comments on commit ae090c4

Please sign in to comment.