Merge pull request #9117 from kalutkaz/relationTypeLabel

Update label logic for relation-type-autocomplete

ui-ngx/src/app/modules/home/components/relation/relation-filters.component.html

@@ -26,7 +26,7 @@
       <div class="tb-form-table-row"
            *ngFor="let relationFilterControl of relationFiltersFormArray.controls; let $index = index">
         <tb-relation-type-autocomplete subscriptSizing="dynamic"
-                                       class="flex-50"
+                                       class="flex-50" showLabel="false"
                                        [additionalClasses]="['tb-inline-field']"
                                        appearance="outline"
                                        [formControl]="relationFilterControl.get('relationType')">

ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.html

@@ -15,9 +15,9 @@
     limitations under the License.
 
 -->
-<mat-form-field [formGroup]="relationTypeFormGroup" [appearance]="appearance" [floatLabel]="floatLabel"
+<mat-form-field [formGroup]="relationTypeFormGroup" [appearance]="appearance" [floatLabel]="required ? 'auto' : 'always'"
                 class="mat-block" [class]="additionalClasses" subscriptSizing="{{ subscriptSizing }}">
-  <mat-label *ngIf="label">{{ label }}</mat-label>
+  <mat-label *ngIf="showLabel">{{ 'relation.relation-type' | translate }}</mat-label>
   <input matInput type="text"
          #relationTypeInput
          formControlName="relationType"

ui-ngx/src/app/shared/components/relation/relation-type-autocomplete.component.ts

@@ -15,16 +15,15 @@
 ///
 
 import { AfterViewInit, Component, ElementRef, forwardRef, Input, OnDestroy, OnInit, ViewChild } from '@angular/core';
-import { ControlValueAccessor, UntypedFormBuilder, UntypedFormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
+import { ControlValueAccessor, FormBuilder, FormGroup, NG_VALUE_ACCESSOR, Validators } from '@angular/forms';
 import { Observable, of } from 'rxjs';
 import { map, mergeMap, tap } from 'rxjs/operators';
 import { Store } from '@ngrx/store';
 import { AppState } from '@app/core/core.state';
 import { TranslateService } from '@ngx-translate/core';
 import { BroadcastService } from '@app/core/services/broadcast.service';
-import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { RelationTypes } from '@app/shared/models/relation.models';
-import { FloatLabelType, MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
+import { MatFormFieldAppearance, SubscriptSizing } from '@angular/material/form-field';
 import { coerceArray, coerceBoolean } from '@shared/decorators/coercion';
 
 @Component({
@@ -39,12 +38,13 @@ import { coerceArray, coerceBoolean } from '@shared/decorators/coercion';
 })
 export class RelationTypeAutocompleteComponent implements ControlValueAccessor, OnInit, AfterViewInit, OnDestroy {
 
-  relationTypeFormGroup: UntypedFormGroup;
+  relationTypeFormGroup: FormGroup;
 
   modelValue: string | null;
 
   @Input()
-  label: string;
+  @coerceBoolean()
+  showLabel = true;
 
   @Input()
   @coerceArray()
@@ -53,9 +53,6 @@ export class RelationTypeAutocompleteComponent implements ControlValueAccessor,
   @Input()
   appearance: MatFormFieldAppearance = 'fill';
 
-  @Input()
-  floatLabel: FloatLabelType = 'auto';
-
   @Input()
   @coerceBoolean()
   required: boolean;
@@ -79,7 +76,7 @@ export class RelationTypeAutocompleteComponent implements ControlValueAccessor,
   constructor(private store: Store<AppState>,
               private broadcast: BroadcastService,
               public translate: TranslateService,
-              private fb: UntypedFormBuilder) {
+              private fb: FormBuilder) {
     this.relationTypeFormGroup = this.fb.group({
       relationType: [null, this.required ? [Validators.required, Validators.maxLength(255)] : [Validators.maxLength(255)]]
     });