All files / projects/requisition-management/src/app/pages/requisition-detail/budget-bar budget-bar.component.html

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
3x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
@if (budget && overflowPercentage > 0) {
  <div class="budget-bar-overflow">
    <div
      class="overflow-indicator"
      [ngStyle]="{ width: overflowPercentage / 100 | percent }"
      [title]="budget | ishPrice"
    >
      <span class="overflow-display">{{ overflowPercentage / 100 | percent }}</span>
    </div>
  </div>
}
@if (budget) {
  <div class="budget-bar">
    <div
      aria-hidden="true"
      class="budget-bar-used"
      [ngClass]="displayClass"
      [ngStyle]="{ width: budgetPercentage / 100 | percent }"
      [title]="spentBudget | ishPrice"
    >
      {{ spentBudget | ishPrice }}
    </div>
    @if (additionalAmount?.value) {
      <div
        aria-hidden="true"
        class="budget-bar-used budget-bar-used-additional border-start"
        role="progressbar"
        [ngClass]="addDisplayClass"
        [ngStyle]="{ width: additionalPercentage / 100 | percent }"
        [title]="additionalAmount | ishPrice"
      >
        <span>{{ additionalAmount | ishPrice }}</span>
      </div>
    }
  </div>
}