From 67990b727224189dde5cc5cbeed6b449734a6184 Mon Sep 17 00:00:00 2001
From: rhenck <richard.henck@iqb.hu-berlin.de>
Date: Thu, 28 Oct 2021 16:50:50 +0200
Subject: [PATCH] Change text field appearance depending on label existence
When the label is empty a smaller input field will be rendered which
also does not have the label placeholder.
---
.../text-field.component.ts | 33 +++++++++++++++++--
1 file changed, 31 insertions(+), 2 deletions(-)
diff --git a/projects/common/element-components/text-field.component.ts b/projects/common/element-components/text-field.component.ts
index 1bef0a063..90aa805e0 100644
--- a/projects/common/element-components/text-field.component.ts
+++ b/projects/common/element-components/text-field.component.ts
@@ -6,7 +6,8 @@ import { TextFieldElement } from '../models/text-field-element';
@Component({
selector: 'app-text-field',
template: `
- <mat-form-field [style.width.%]="100"
+ <mat-form-field *ngIf="elementModel.label !== ''"
+ [style.width.%]="100"
[style.height.%]="100"
[style.color]="elementModel.fontColor"
[style.font-family]="elementModel.font"
@@ -30,7 +31,35 @@ import { TextFieldElement } from '../models/text-field-element';
{{elementFormControl.errors | errorTransform: elementModel}}
</mat-error>
</mat-form-field>
- `
+ <mat-form-field *ngIf="elementModel.label === ''" class="small-input"
+ [style.width.%]="100"
+ [style.height.%]="100"
+ [style.color]="elementModel.fontColor"
+ [style.font-family]="elementModel.font"
+ [style.font-size.px]="elementModel.fontSize"
+ [style.font-weight]="elementModel.bold ? 'bold' : ''"
+ [style.font-style]="elementModel.italic ? 'italic' : ''"
+ [style.text-decoration]="elementModel.underline ? 'underline' : ''"
+ appInputBackgroundColor [backgroundColor]="elementModel.backgroundColor"
+ [appearance]="$any(elementModel.appearance)">
+ <input matInput type="text" #input
+ [pattern]="elementModel.pattern"
+ (focus)="onFocus.emit(input)"
+ (blur)="onBlur.emit(input)"
+ autocomplete="off"
+ [formControl]="elementFormControl">
+ <button *ngIf="elementModel.clearable" matSuffix mat-icon-button aria-label="Clear"
+ (click)="onClick($event)">
+ <mat-icon>close</mat-icon>
+ </button>
+ <mat-error *ngIf="elementFormControl.errors">
+ {{elementFormControl.errors | errorTransform: elementModel}}
+ </mat-error>
+ </mat-form-field>
+ `,
+ styles: [
+ '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.75em 0 0.25em 0;}'
+ ]
})
export class TextFieldComponent extends FormElementComponent {
@Output() onFocus = new EventEmitter<HTMLElement>();
--
GitLab