ghostfolio/libs/ui/src/lib/value/value.component.html
Thomas Kaul fa66cd5bce
Feature/add countries and sectors to position detail dialog (#692)
* Add asset and asset sub class

* Add countries and sectors to position detail dialog

* Update changelog
2022-02-12 11:22:03 +01:00

59 lines
1.7 KiB
HTML

<ng-container *ngIf="value || value === 0 || value === null">
<div
class="d-flex"
[ngClass]="position === 'end' ? 'justify-content-end' : ''"
>
<ng-container *ngIf="isNumber || value === null">
<ng-container *ngIf="colorizeSign && !useAbsoluteValue">
<div *ngIf="value > 0" class="mr-1 text-success">+</div>
<div *ngIf="value < 0" class="mr-1 text-danger">-</div>
</ng-container>
<div
*ngIf="isPercent"
class="mb-0"
[ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
>
{{ formattedValue }}%
</div>
<div
*ngIf="!isPercent"
class="mb-0"
[ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
>
<ng-container *ngIf="value === null">
<span class="text-monospace text-muted">***</span>
</ng-container>
<ng-container *ngIf="value !== null">
{{ formattedValue }}
</ng-container>
</div>
<small *ngIf="currency && size === 'medium'" class="ml-1">
{{ currency }}
</small>
<div *ngIf="currency && size !== 'medium'" class="ml-1">
{{ currency }}
</div>
</ng-container>
<ng-container *ngIf="isString">
<div
class="mb-0 text-truncate"
[ngClass]="{ h2: size === 'large', h4: size === 'medium' }"
>
{{ formattedValue | titlecase }}
</div>
</ng-container>
</div>
<small *ngIf="label">
{{ label }}
</small>
</ng-container>
<ngx-skeleton-loader
*ngIf="value === undefined"
animation="pulse"
[theme]="{
height: size === 'large' ? '2.5rem' : '1.5rem',
width: '5rem'
}"
></ngx-skeleton-loader>