79730: Show input labels when available

This commit is contained in:
Yura Bondarenko
2021-06-03 15:10:20 +02:00
parent 08878941ab
commit d37d043531
2 changed files with 24 additions and 17 deletions

View File

@@ -3,20 +3,25 @@
(keydown.arrowdown)="shiftFocusDown($event)" (keydown.arrowdown)="shiftFocusDown($event)"
(keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()" (keydown.arrowup)="shiftFocusUp($event)" (keydown.esc)="close()"
(dsClickOutside)="close();"> (dsClickOutside)="close();">
<label *ngIf="label; else searchInput" class="mb-0"> <div class="form-group mb-0">
<label *ngIf="label; else searchInput">
<span class="font-weight-bold d-block mb-2">
{{label}}
</span>
<ng-container *ngTemplateOutlet="searchInput"></ng-container> <ng-container *ngTemplateOutlet="searchInput"></ng-container>
<span class="d-none">{{label}}</span>
</label> </label>
</div>
<ng-template #searchInput> <ng-template #searchInput>
<input #inputField type="text" [(ngModel)]="value" [name]="name" <input #inputField type="text" [(ngModel)]="value" [name]="name"
class="form-control suggestion_input" class="form-control suggestion_input"
[ngClass]="{'is-invalid': !valid}" [ngClass]="{'is-invalid': !valid}"
[dsDebounce]="debounceTime" (onDebounce)="find($event)" [dsDebounce]="debounceTime" (onDebounce)="find($event)"
[placeholder]="placeholder" [placeholder]="placeholder"
[ngModelOptions]="{standalone: true}" autocomplete="off"/> [ngModelOptions]="{standalone: true}" autocomplete="off"
/>
</ng-template> </ng-template>
<label class="d-none"> <label class="d-none">
<input type="submit" class="d-none"/> <input type="submit"/>
<span>{{'search.filters.search.submit' | translate}}</span> <span>{{'search.filters.search.submit' | translate}}</span>
</label> </label>
<div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}"> <div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">

View File

@@ -2,26 +2,28 @@
<div class="filters py-2"> <div class="filters py-2">
<form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row" <form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
[action]="currentUrl"> [action]="currentUrl">
<div class="col-6"> <div class="col-6 form-group mb-0">
<label class="mb-0"> <label>
<span class="font-weight-bold d-block mb-2">
{{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
</span>
<input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'" <input type="text" [(ngModel)]="range[0]" [name]="filterConfig.paramName + '.min'"
class="form-control" (blur)="onSubmit()" class="form-control" (blur)="onSubmit()"
aria-label="Mininum value" aria-label="Mininum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder' | translate"/> [placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder' | translate"
<span class="d-none"> />
{{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
</span>
</label> </label>
</div> </div>
<div class="col-6"> <div class="col-6">
<label class="mb-0"> <label>
<span class="font-weight-bold d-block mb-2">
{{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
</span>
<input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'" <input type="text" [(ngModel)]="range[1]" [name]="filterConfig.paramName + '.max'"
class="form-control" (blur)="onSubmit()" class="form-control" (blur)="onSubmit()"
aria-label="Maximum value" aria-label="Maximum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder' | translate"/> [placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder' | translate"
<span class="d-none"> />
{{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
</span>
</label> </label>
</div> </div>
<label class="d-none"> <label class="d-none">