<div class="d-flex a-i-center l-h-tight form-control">
  <i
    class="m-r-4"
    [c8yIcon]="displayIcon()"
  ></i>
  <div class="d-col text-left fit-w min-width-0">
    <span
      class="text-10 l-h-1 text-muted text-truncate"
      title="{{ 'Aggregation' | translate }}"
    >
      {{ 'Aggregation' | translate }}
    </span>
    @let titleText =
      autoMode()
        ? autoPoints() != null
          ? ((autoKeepPointCount() ? AUTO_POINTS_TOOLTIP_KEPT : AUTO_POINTS_TOOLTIP)
            | translate: { points: autoPoints() })
          : (AUTO_AGGREGATION_TEXT | translate)
        : aggregation()
          ? (AGGREGATION_TEXTS[aggregation()] | translate)
          : (AGGREGATION_TEXTS.null | translate);
    <span
      class="text-12 l-h-1 text-medium d-flex a-i-center gap-4"
      [title]="titleText"
      data-cy="global-date-context--Aggregation-display-value"
    >
      <span class="text-truncate">{{ displayText() | translate }}</span>
      @if (autoMode() && autoPoints() != null) {
        <span
          class="m-l-auto badge badge-info flex-no-shrink l-h-1 text-10"
          style="min-height: 12px"
        >
          {{ autoPoints() }}
        </span>
      }
    </span>
  </div>
</div>