metadata-values.component.html

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

<ng-template #searchlink let-value="value">
  <a class="ds-search-link"
     [routerLink]="['/search']"
     [queryParams]="getSearchQueryParams(value)">
    {{ value }}
  </a>
</ng-template>

<!-- 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 translated valueof vocabulary entry -->
<ng-template #controlledVocabulary let-value="value">
  @let label = getVocabularyValue(value) | async;
  @if (hasBrowseDefinition()) {
    <ng-container *ngTemplateOutlet="browselink; context: {value: label}"></ng-container>
  } @else {
    <span class="dont-break-out preserve-line-breaks">{{label}}</span>
  }
</ng-template>