dspace-angular/src/app/shared/form/number-picker/number-picker.component.html at a448157eefaaa0e7fcadf134254e1c4e40a709ba · 4Science/dspace-angular · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
<div class="d-flex flex-column align-items-center">
  <label class="ml-n3" [for]="id">{{'form.number-picker.label.' + placeholder | translate }}</label>
  <div class="d-flex flex-column align-items-stretch justify-content-around position-relative">
    <button id="increment-{{id}}"
            class="btn btn-link-focus btn-date ml-2"
            type="button"
            tabindex="0"
            [dsBtnDisabled]="disabled"
            (click)="toggleUp()"
            title="{{'form.number-picker.increment' | translate: {field: placeholder} }}"
            [attr.aria-label]="'form.number-picker.increment' | translate: {field: placeholder}">
      <span class="chevron"></span>
      <span class="sr-only">{{'form.number-picker.increment' | translate: {field: name} }}</span>
    </button>
    <input
        id="{{id}}"
        type="text"
        class="form-control d-inline-block text-center {{ widthClass }}"
        maxlength="{{size}}"
        size="{{size}}"
        [name]="name"
        [(ngModel)]="value"
        (blur)="onBlur($event); $event.stopPropagation();"
        (change)="update($event); $event.stopPropagation();"
        (focus)="onFocus($event); $event.stopPropagation();"
        [readonly]="disabled"
        [disabled]="disabled"
        [ngClass]="{'is-invalid': invalid}"
        title="{{'form.number-picker.label.' + placeholder | translate}}"
        [attr.aria-labelledby]="id + ' increment-' + id + ' decrement-' + id"
    >

        <button id="decrement-{{id}}"
                class="btn btn-link-focus btn-date ml-2"
                type="button"
                tabindex="0"
                [dsBtnDisabled]="disabled"
                (click)="toggleDown()"
                title="{{'form.number-picker.decrement' | translate: {field: placeholder} }}"
                [attr.aria-label]="'form.number-picker.decrement' | translate: {field: placeholder}">
            <span class="chevron bottom"></span>
            <span class="sr-only">{{'form.number-picker.decrement' | translate: {field: name} }}</span>
        </button>
  </div>
</div>