progress

1import { ChangeDetectionStrategy, Component, computed, input, ViewEncapsulation } from '@angular/core';
2 
3import type { ClassValue } from 'clsx';
4 
5import { mergeClasses } from '@/shared/utils/merge-classes';
6 
7import { progressVariants } from './progress.variants';
8 
9@Component({
10  selector: 'z-progress',
11  template: `
12    <div
13      data-slot="progress-indicator"
14      class="bg-primary size-full flex-1 transition-all"
15      [style.transform]="indicatorTransform()"
16    ></div>
17  `,
18  changeDetection: ChangeDetectionStrategy.OnPush,
19  encapsulation: ViewEncapsulation.None,
20  host: {
21    'data-slot': 'progress',
22    role: 'progressbar',
23    'aria-valuemin': '0',
24    'aria-valuemax': '100',
25    '[attr.aria-valuenow]': 'clampedValue()',
26    '[class]': 'classes()',
27  },
28  exportAs: 'zProgress',
29})
30export class ZardProgressComponent {
31  readonly value = input(0);
32  readonly class = input<ClassValue>('');
33 
34  protected readonly clampedValue = computed(() => {
35    const v = this.value();
36    if (v > 100) return 100;
37    if (v < 0) return 0;
38    return v;
39  });
40 
41  protected readonly indicatorTransform = computed(() => `translateX(-${100 - this.clampedValue()}%)`);
42 
43  protected readonly classes = computed(() => mergeClasses(progressVariants(), this.class()));
44}