metadata-values.component.html

<ds-metadata-field-wrapper [label]="label | translate">
  @for (mdValue of mdValues; track mdValue; let last = $last) {
    <!--
    Choose a template. Priority: ORCID authority, markdown, link, browse link.
    -->
      <ng-container *ngTemplateOutlet="(isOrcidAuthority(mdValue) ? orcidTemplate : (renderMarkdown ? markdown : (hasLink(mdValue) ? (hasValue(img) ? linkImg : link) : (hasBrowseDefinition() ? browselink : simple))));
        context: {value: mdValue.value, mdValue: mdValue, img}">
    </ng-container>
    @if (!last) {
      <span class="separator" [innerHTML]="separator"></span>
    }
  }
</ds-metadata-field-wrapper>

<!-- Render value as markdown -->
<ng-template #markdown let-value="value">
  <span class="dont-break-out" [dsMarkdown]="value">
  </span>
</ng-template>

<!-- Render value as a link (href and label) -->
<ng-template #link let-value="value">
  <a class="dont-break-out ds-simple-metadata-link"
    [href]="value"
    [attr.target]="getLinkAttributes(value).target"
    [attr.rel]="getLinkAttributes(value).rel" role="link" tabindex="0">
    {{value}}
  </a>
</ng-template>

<!-- Render value as a link with icon -->
<ng-template #linkImg let-img="img" let-value="value">
  <a [href]="value" class="link-anchor dont-break-out ds-simple-metadata-link" target="_blank" role="link" tabindex="0">
    <img class="link-logo"
      [alt]="img.alt | translate"
      [style.height]="'var(' + img.heightVar + ', --ds-item-page-img-field-default-inline-height)'"
      [src]="img.URI"/>
    {{value}}
  </a>
</ng-template>

<!-- Render simple value in a span  -->
<ng-template #simple let-value="value">
  <span class="dont-break-out preserve-line-breaks">{{value}}</span>
</ng-template>

<!-- Render value as a link to browse index -->
<ng-template #browselink let-value="value">
  <a class="dont-break-out preserve-line-breaks ds-browse-link"
    [routerLink]="['/browse', browseDefinition.id]"
  [queryParams]="getQueryParams(value)" role="link" tabindex="0">{{value}}</a>
</ng-template>

<!-- Render value with ORCID badge and clickable link to ORCID profile -->
<ng-template #orcidTemplate let-value="value" let-mdValue="mdValue">
  <span class="orcid-author">
    <a class="dont-break-out preserve-line-breaks ds-orcid-link"
       [href]="getOrcidUrl(mdValue.authority)"
       target="_blank"
       rel="noopener noreferrer"
       role="link"
       tabindex="0">
      {{value}}
    </a>
    <a class="orcid-badge"
       [href]="getOrcidUrl(mdValue.authority)"
       target="_blank"
       rel="noopener noreferrer">
      <img src="assets/images/orcid.logo.icon.svg"
           alt="ORCID iD icon"
           class="orcid-icon">
    </a>
  </span>
</ng-template>