mirror of https://github.com/ghostfolio/ghostfolio
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
102 lines
2.6 KiB
102 lines
2.6 KiB
@if (icon) {
|
|
<div class="align-self-center mr-3">
|
|
<ion-icon class="h3 m-0" [name]="icon" />
|
|
</div>
|
|
}
|
|
<div class="d-flex flex-column w-100">
|
|
<ng-template #label><ng-content></ng-content></ng-template>
|
|
<ng-container *ngIf="value || value === 0 || value === null">
|
|
<div
|
|
class="align-items-center d-flex"
|
|
[ngClass]="position === 'end' ? 'justify-content-end' : ''"
|
|
>
|
|
@if (isNumber || value === null) {
|
|
@if (colorizeSign && !useAbsoluteValue) {
|
|
@if (+value > 0) {
|
|
<div class="mr-1 text-success">+</div>
|
|
}
|
|
@if (+value < 0) {
|
|
<div class="mr-1 text-danger">-</div>
|
|
}
|
|
}
|
|
@if (isPercent) {
|
|
<div
|
|
class="mb-0 value"
|
|
[ngClass]="{
|
|
'font-weight-bold h2': size === 'large',
|
|
h4: size === 'medium'
|
|
}"
|
|
>
|
|
@if (value === null) {
|
|
<span class="text-monospace text-muted">*****</span>%
|
|
} @else {
|
|
{{ formattedValue }}%
|
|
}
|
|
</div>
|
|
} @else {
|
|
<div
|
|
class="mb-0 value"
|
|
[ngClass]="{
|
|
'font-weight-bold h2': size === 'large',
|
|
h4: size === 'medium'
|
|
}"
|
|
>
|
|
@if (value === null) {
|
|
<span class="text-monospace text-muted">*****</span>
|
|
} @else {
|
|
{{ formattedValue }}
|
|
}
|
|
</div>
|
|
}
|
|
@if (unit) {
|
|
@if (size === 'medium') {
|
|
<small class="ml-1">
|
|
{{ unit }}
|
|
</small>
|
|
} @else {
|
|
<div class="ml-1">
|
|
{{ unit }}
|
|
</div>
|
|
}
|
|
}
|
|
}
|
|
@if (isString) {
|
|
<div
|
|
class="mb-0 text-truncate value"
|
|
[ngClass]="{
|
|
'font-weight-bold h2': size === 'large',
|
|
h4: size === 'medium'
|
|
}"
|
|
>
|
|
{{ formattedValue }}
|
|
</div>
|
|
}
|
|
</div>
|
|
</ng-container>
|
|
|
|
@if (value === undefined) {
|
|
<ngx-skeleton-loader
|
|
animation="pulse"
|
|
[theme]="{
|
|
height:
|
|
size === 'large' ? '2rem' : size === 'medium' ? '1.8rem' : '1.5rem',
|
|
width: '5rem'
|
|
}"
|
|
/>
|
|
}
|
|
|
|
@if (size === 'large') {
|
|
<div class="text-truncate">
|
|
<span class="h6"
|
|
><ng-container *ngTemplateOutlet="label"></ng-container
|
|
></span>
|
|
@if (subLabel) {
|
|
<span class="text-muted"> {{ subLabel }}</span>
|
|
}
|
|
</div>
|
|
} @else {
|
|
<small class="d-block text-truncate">
|
|
<ng-container *ngTemplateOutlet="label"></ng-container>
|
|
</small>
|
|
}
|
|
</div>
|
|
|