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 | 15x 7x 7x 7x | /**
* Copyright (c) Siemens 2016 - 2026
* SPDX-License-Identifier: MIT
*/
import { Component, input } from '@angular/core';
export interface MicrochartProgressSeries {
/** Value in percent */
valuePercent: number;
/**
* Use a data-color. See: {@link https://element.siemens.io/fundamentals/colors/data-visualization-colors/#tokens}
*
* @example "element-data-10"
*/
colorToken: string;
}
@Component({
selector: 'si-microchart-progress',
templateUrl: './si-microchart-progress.component.html',
styleUrl: './si-microchart-progress.component.scss',
host: {
role: 'progressbar',
'[attr.aria-valuenow]': 'series().valuePercent',
'[attr.aria-valuemin]': '0',
'[attr.aria-valuemax]': '100',
'[attr.aria-valuetext]': 'series().valuePercent + "%"'
}
})
export class SiMicrochartProgressComponent {
/**
* Microchart progress series.
* Example series can be:
* @example
* ```ts
* Series: MicrochartProgressSeries = { valuePercent: 80, colorToken: 'element-data-7' };
* ```
*/
readonly series = input.required<MicrochartProgressSeries>();
/**
* Progress bar width in pixels.
*
* @defaultValue 64
*/
readonly barWidth = input<number>(64);
/**
* Progress bar height in pixels.
*
* @defaultValue 4
*/
readonly barHeight = input<number>(4);
}
|