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.arrowup)="shiftFocusUp($event)" (keydown.esc)="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>
<span class="d-none">{{label}}</span>
</label>
</div>
<ng-template #searchInput>
<input #inputField type="text" [(ngModel)]="value" [name]="name"
class="form-control suggestion_input"
[ngClass]="{'is-invalid': !valid}"
[dsDebounce]="debounceTime" (onDebounce)="find($event)"
[placeholder]="placeholder"
[ngModelOptions]="{standalone: true}" autocomplete="off"/>
[ngModelOptions]="{standalone: true}" autocomplete="off"
/>
</ng-template>
<label class="d-none">
<input type="submit" class="d-none"/>
<input type="submit"/>
<span>{{'search.filters.search.submit' | translate}}</span>
</label>
<div class="autocomplete dropdown-menu" [ngClass]="{'show': (show | async) && isNotEmpty(suggestions)}">

View File

@@ -2,26 +2,28 @@
<div class="filters py-2">
<form #form="ngForm" (ngSubmit)="onSubmit()" class="add-filter row"
[action]="currentUrl">
<div class="col-6">
<label class="mb-0">
<div class="col-6 form-group 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'"
class="form-control" (blur)="onSubmit()"
aria-label="Mininum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder' | translate"/>
<span class="d-none">
{{'search.filters.filter.' + filterConfig.name + '.min.label' | translate}}
</span>
[placeholder]="'search.filters.filter.' + filterConfig.name + '.min.placeholder' | translate"
/>
</label>
</div>
<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'"
class="form-control" (blur)="onSubmit()"
aria-label="Maximum value"
[placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder' | translate"/>
<span class="d-none">
{{'search.filters.filter.' + filterConfig.name + '.max.label' | translate}}
</span>
[placeholder]="'search.filters.filter.' + filterConfig.name + '.max.placeholder' | translate"
/>
</label>
</div>
<label class="d-none">