All files / lib/badge badge.component.ts

91.25% Statements 73/80
83.33% Branches 5/6
100% Functions 4/4
91.25% Lines 73/80

Press n or j to go to the next uncovered block, b, p or k for the previous block.

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 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 811x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 1x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 862x 1x 1x 1x 11944x 11944x 11944x 11944x 11944x               11944x 11944x 11944x 11944x 1x  
/*******************************************************************************
 * Copyright bei
 * Entwicklungs- und Pflegeverbund für das gemeinsame Fachverfahren gefa
 *
 *******************************************************************************/
import { Component, HostBinding, Input } from '@angular/core';
 
import { BadgeColor, BadgeStatus, BadgeVariant } from '../utils/util.types';
 
export type LabelContentDisplay =
  | 'icon-only'
  | 'icon-left'
  | 'icon-right'
  | 'text-only';
 
/**
 * A Badge element can be used as a compact additional information about something in its basic variant, or it can be used as a status indicator of some action.
 * It can optionally display an icon.
 */
@Component({
  selector: 'gc-badge',
  templateUrl: './badge.component.html',
  styleUrls: ['./badge.component.css'],
  standalone: false,
})
export class BadgeComponent {
  /**
   * The text that shows on the badge.
   */
  @Input()
  public label = '';
 
  /**
   * The visual variant of the badge.
   */
  @Input()
  public variant: BadgeVariant = 'primary';
 
  /**
   * Color theme of the badge.
   */
  @Input()
  public color: BadgeStatus | BadgeColor = 'basic';
 
  /**
   * Define how the content is displayed
   * - icon-only: only the icon is shown
   * - icon-left: icon is shown on the left of the text
   * - icon-right: icon is shown on the right of the text
   * - text-only: only text is displayed
   */
  @Input()
  public contentDisplay: LabelContentDisplay = 'text-only';
 
  /**
   * Control if the text can be wrapped
   */
  @HostBinding('class.gc-allow-text-wrap')
  @Input()
  public allowTextWrap = false;
 
  /** @ignore */
  protected get computedColor(): Exclude<
    BadgeStatus | BadgeColor,
    'black' | 'blue' | 'red' | 'green'
  > {
    switch (this.color) {
      case 'black':
        return 'critical';
      case 'blue':
        return 'basic';
      case 'red':
        return 'error';
      case 'green':
        return 'ok';
      default:
        return this.color;
    }
  }
}