25 lines
862 B
TypeScript
25 lines
862 B
TypeScript
import { Component, input } from '@angular/core';
|
|
|
|
/** Atom: native progress bar for an in-flight upload. Pure UI — the caller supplies
|
|
the percentage. */
|
|
@Component({
|
|
selector: 'app-upload-progress-bar',
|
|
styles: [`
|
|
:host { display: flex; align-items: center; gap: var(--rhc-space-max-md); }
|
|
progress { flex: 1; height: var(--rhc-space-max-md); }
|
|
.pct { font-size: var(--rhc-text-font-size-sm); color: var(--rhc-color-foreground-subtle); min-width: 3ch; text-align: end; }
|
|
`],
|
|
template: `
|
|
<progress
|
|
max="100"
|
|
[value]="progressPct()"
|
|
[attr.aria-label]="progressLabel"></progress>
|
|
<span class="pct">{{ progressPct() }}%</span>
|
|
`,
|
|
})
|
|
export class UploadProgressBarComponent {
|
|
progressPct = input.required<number>();
|
|
|
|
protected readonly progressLabel = $localize`:@@upload.progress.label:Uploadvoortgang`;
|
|
}
|