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 81 82 83 84 85 86 87 88 89 90 91 92 93 94 | 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 1x 1x 1x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 919x 921x 921x 921x 921x 921x 919x 1x | /*******************************************************************************
* Copyright bei
* Entwicklungs- und Pflegeverbund für das gemeinsame Fachverfahren gefa
*
*******************************************************************************/
import { Component, computed, input, signal } 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,
host: {
'[class.gc-allow-text-wrap]': 'wrapText()',
},
})
export class BadgeComponent {
/**
* The text that shows on the badge.
*/
public readonly label = input('');
/**
* The visual variant of the badge.
*/
public readonly variant = input<BadgeVariant>('primary');
/**
* Color theme of the badge.
*/
public readonly color = input<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
*/
public readonly contentDisplay = input<LabelContentDisplay>('text-only');
/**
* Control if the text can be wrapped
* */
public readonly allowTextWrap = input(false);
/** @ignore */
public readonly forceTextWrap = signal(false);
/** @ignore */
protected readonly wrapText = computed(() =>
this.forceTextWrap() ? true : this.allowTextWrap(),
);
/** @ignore */
protected readonly contentDisplayHasIcon = computed(() =>
this.contentDisplay().includes('icon'),
);
/** @ignore */
protected readonly classes = computed(
() =>
`gc-badge-status-${this.computedColor()} gc-badge-variant-${this.variant()} gc-badge-${this.contentDisplay()}`,
);
/** @ignore */
protected readonly computedColor = computed(() => {
switch (this.color()) {
case 'black':
return 'critical';
case 'blue':
return 'basic';
case 'red':
return 'error';
case 'green':
return 'ok';
default:
return this.color();
}
});
}
|