Progress Breakdown

Installation

Variants

Files installed (2)

• src/app/components/blocks/progress-breakdown/progress-breakdown.component.ts1.6 kB

  Copy

  import { Component, Input, ChangeDetectionStrategy } from '@angular/core'
  import { LucideAngularModule, type LucideIconData } from 'lucide-angular'
  import { UiSectionCardComponent } from '@/ui/section-card/section-card.component'
  
  export { UiProgressItemComponent } from '@/ui/progress-item/progress-item.component'
  
  /**
   * ProgressBreakdown -- the React block, 1:1: labeled progress bars in a SectionCard.
   * Spell rows out inline with <ui-progress-item> (each takes [colorIndex] to cycle through
   * the chart-1..5 colours); they are projected into the card content. `headerIcon` renders
   * top-right of the header, like React's `headerIcon` prop.
   */
  @Component({
    changeDetection: ChangeDetectionStrategy.Eager,
    selector: 'ui-progress-breakdown, [ui-progress-breakdown]',
    standalone: true,
    imports: [LucideAngularModule, UiSectionCardComponent],
    // The SectionCard below is the block's box (React renders it as the root): keep this wrapper
    // out of layout, and keep the `title` input from becoming a native tooltip on the host.
    host: { '[attr.class]': '"contents"', '[attr.title]': 'null', 'data-slot': 'progress-breakdown' },
    template: `
      <div
        ui-section-card
        [title]="title ?? 'Breakdown'"
        [description]="description"
        [class]="className"
        contentClassName="space-y-4"
      >
        @if (headerIcon) {
          <lucide-icon slot="header-action" [img]="headerIcon" class="text-muted-foreground size-5" />
        }
        <ng-content />
      </div>
    `,
  })
  export class UiProgressBreakdownComponent {
    @Input() title?: string
    @Input() description?: string
    @Input() headerIcon?: LucideIconData
    @Input('class') className?: string
  }
  

• src/app/components/blocks/progress-breakdown/index.ts0.1 kB

  Copy

Raw manifest:https://uipkge.dev/r/angular/progress-breakdown.json