diff --git a/projects/common/ui-elements/text-area/text-area.component.ts b/projects/common/ui-elements/text-area/text-area.component.ts index 8963f5cf4366bb8cdeb60d9d1373c3569238783c..6bd7037a838566ccf736d848a4291c6406b1c44d 100644 --- a/projects/common/ui-elements/text-area/text-area.component.ts +++ b/projects/common/ui-elements/text-area/text-area.component.ts @@ -5,7 +5,8 @@ import { TextAreaElement } from './text-area-element'; @Component({ selector: 'app-text-area', template: ` - <mat-form-field [style.width.%]="100" + <mat-form-field [ngClass]="{ 'no-label' : !elementModel.label}" + [style.width.%]="100" [style.min-height.%]="100" appInputBackgroundColor [backgroundColor]="elementModel.surfaceProps.backgroundColor" [style.color]="elementModel.fontProps.fontColor" @@ -15,8 +16,9 @@ import { TextAreaElement } from './text-area-element'; [style.font-style]="elementModel.fontProps.italic ? 'italic' : ''" [style.text-decoration]="elementModel.fontProps.underline ? 'underline' : ''" [appearance]="$any(elementModel.appearance)"> + <mat-label *ngIf="elementModel.label">{{elementModel.label}}</mat-label> <textarea matInput #input - autocomplete="off" rows="{{elementModel.rowCount}}" placeholder="{{elementModel.label}}" + autocomplete="off" rows="{{elementModel.rowCount}}" [formControl]="elementFormControl" [value]="elementModel.value" [readonly]="elementModel.readOnly" @@ -30,7 +32,11 @@ import { TextAreaElement } from './text-area-element'; {{elementFormControl.errors | errorTransform: elementModel}} </mat-error> </mat-form-field> - ` + `, + styles: [ + ':host ::ng-deep div.mat-form-field-infix {padding-top: 0.2em;}', + ':host ::ng-deep .no-label .mat-form-field-outline-gap {border-top-color: unset !important}' + ] }) export class TextAreaComponent extends FormElementComponent { @Input() elementModel!: TextAreaElement; diff --git a/projects/common/ui-elements/text-field/text-field.component.ts b/projects/common/ui-elements/text-field/text-field.component.ts index 00606307308b125e11fe271fe25b80b2e22d2ecf..6dc465adaf2803ecb07b17df04f430ed23f21d24 100644 --- a/projects/common/ui-elements/text-field/text-field.component.ts +++ b/projects/common/ui-elements/text-field/text-field.component.ts @@ -67,7 +67,7 @@ import { TextFieldElement } from './text-field-element'; </mat-form-field> `, styles: [ - '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}' + '::ng-deep app-text-field .small-input div.mat-form-field-infix {border-top: none; padding: 0.55em 0 0.25em 0;}' // TODO ] }) export class TextFieldComponent extends FormElementComponent {