psp_panel/src/app/shared/components/key-value.component/key-value.component.html

<div class="inline-flex flex-col gap-1 w-full">
  <div class="inline-flex gap-2 items-center w-full">
    <span class="text-muted-color text-base font-normal flex-auto grow-0">{{ label }}:</span>
    <div
      class="shrink-0 grow max-sm:text-left"
      [ngClass]="{
        'text-right': alignment === 'start',
        'text-center': alignment === 'center',
        'text-left': alignment === 'end',
      }"
    >
      <ng-content>
        @if (valueType() === "badge") {
          <p-badge [value]="valueToShow()?.toString()" [severity]="value ? 'success' : 'danger'" />
        } @else {
          <span class="text-text-color text-base font-bold grow"> {{ valueToShow() }}</span>
        }
      </ng-content>
    </div>
  </div>
  @if (hint) {
    <span class="text-muted-color text-sm font-normal">{{ hint }}</span>
  }
</div>