progress

1import { Component, computed, input, numberAttribute } from '@angular/core'
2import { RdxProgressIndicatorDirective, RdxProgressRootDirective } from '@radix-ng/primitives/progress'
3 
4import { cn } from '~/lib/utils'
5 
6@Component({
7  standalone: true,
8  selector: '[ubProgress]',
9  imports: [RdxProgressIndicatorDirective],
10  host: {
11    '[class]': 'computedClass()',
12  },
13  hostDirectives: [
14    {
15      directive: RdxProgressRootDirective,
16      inputs: ['value:progress', 'max', 'valueLabel'],
17    },
18  ],
19  template: `
20    <div rdxProgressIndicator class="h-full w-full flex-1 bg-primary transition-all" [style.transform]="'translateX(-' + (100 - (progress() || 0)) + '%)'"></div>
21  `,
22})
23export class ProgressDirective {
24  progress = input(0, {
25    transform: numberAttribute,
26  })
27 
28  class = input<string>()
29  computedClass = computed(() => cn('relative h-2 w-full overflow-hidden rounded-full bg-primary/20', this.class()))
30}