24 lines
1.1 KiB
HTML
24 lines
1.1 KiB
HTML
|
<article class="dashboard-card" [class.dashboard-card--error]="status === 'error'" [class.dashboard-card--pending]="status === 'pending-backend'">
|
||
|
|
<header class="dashboard-card__header">
|
||
|
|
<span class="dashboard-card__icon" *ngIf="icon" aria-hidden="true">{{ icon }}</span>
|
||
|
|
<h3 class="dashboard-card__title">{{ title }}</h3>
|
||
|
|
</header>
|
||
|
|
|
||
|
|
<div class="dashboard-card__body">
|
||
|
|
<ng-container [ngSwitch]="status">
|
||
|
|
<div class="dashboard-card__skeleton" *ngSwitchCase="'loading'"></div>
|
||
|
|
|
||
|
|
<p class="dashboard-card__muted" *ngSwitchCase="'empty'">{{ 'dashboard.stateEmpty' | translate }}</p>
|
||
|
|
|
||
|
|
<p class="dashboard-card__muted dashboard-card__muted--error" *ngSwitchCase="'error'">{{ 'dashboard.stateError' | translate }}</p>
|
||
|
|
|
||
|
|
<p class="dashboard-card__muted" *ngSwitchCase="'pending-backend'">{{ 'dashboard.statePendingBackend' | translate }}</p>
|
||
|
|
|
||
|
|
<ng-container *ngSwitchDefault>
|
||
|
|
<p class="dashboard-card__value">{{ value }}</p>
|
||
|
|
<p class="dashboard-card__subtitle" *ngIf="subtitle">{{ subtitle }}</p>
|
||
|
|
</ng-container>
|
||
|
|
</ng-container>
|
||
|
|
</div>
|
||
|
|
</article>
|