dspace-angular/src/app/shared/form/chips/chips.component.html at 66ea0d84756010ab5016086f93c198cd76310cc5 · 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
46
47
48
49
50
51
52
53
<div [className]="'float-start w-100 ' + wrapperClass">
  <div role="list" class="nav nav-pills d-flex flex-column flex-sm-row" cdkDropList cdkDropListOrientation="mixed" (cdkDropListDropped)="onDrop($event)">
    <ng-template #tipContent>
      @for (tip of tipText; track tip) {
        <p class="text-start p-0 m-0">
          {{tip}}
        </p>
      }
    </ng-template>
    @for (c of chips.getChips(); track c; let i = $index) {
      <div role="listitem" class="nav-item me-2 mb-1 d-flex flex-row"
        #t="ngbTooltip"
        triggers="manual"
        [ngbTooltip]="tipContent"
        (mouseover)="showTooltip(t, i)"
        (mouseout)="t.close()">
        <a class="flex-sm-fill text-sm-center nav-link active bg-info"
          cdkDrag
          (cdkDragStarted)="onDrag(i)"
          href="javascript:void(0);"
          [ngClass]="{'chip-selected disabled': (editable && c.editMode) || dragged === i}"
          (click)="chipsSelected($event, i);">
          <span>
            @if (showIcons && !c.isNestedItem()) {
              <i dsAuthorityConfidenceState [authorityValue]="c.item" class="far fa-circle" aria-hidden="true">&nbsp;</i>
            }
            @if (showIcons && c.hasVisibleIcons()) {
              @for (icon of c.icons; track icon; let l = $last) {
                <i
                  [ngbTooltip]="tipContent"
                  triggers="manual"
                  #t="ngbTooltip"
                  class="{{icon.style}}"
                  [class.me-1]="!l"
                  [class.me-2]="l"
                  dsAuthorityConfidenceState
                  [authorityValue]="c.item[icon.metadata] || c.item"
                  [visibleWhenAuthorityEmpty]="icon.visibleWhenAuthorityEmpty"
                  aria-hidden="true"
                  (mouseover)="showTooltip(t, i, icon.metadata)"
                (mouseout)="t.close()"></i>
              }
            }
            <p class="chip-label text-truncate d-table-cell">{{c.display}}</p><i class="fas fa-times ms-2" (click)="removeChips($event, i)" [title]="'chips.remove' | translate"></i>
          </span>
        </a>
      </div>
    }
    <div [class.chips-sort-ignore]="(isDragging | async)" class="flex-grow-1">
      <ng-content ></ng-content>
    </div>
  </div>
</div>