File

workflow-card/src/lib/workflow-card.component.ts

Description

Component that appears when users are completing a workflow process

Metadata

Index

Inputs

Inputs

progress
Type : number | undefined
Default value : undefined

Load progress

step
Default value : undefined, { transform: numberAttribute }

Step indicator value

tagline
Type : string
Required :  true

Card title

import { ChangeDetectionStrategy, Component, input, numberAttribute } from '@angular/core';
import { MatProgressBarModule } from '@angular/material/progress-bar';
import { StepIndicatorComponent } from '@hra-ui/design-system/indicators/step-indicator';

/** Actions placed next to the card title */
@Component({
  selector: 'hra-workflow-card-actions',
  template: '<ng-content />',
  styles: ':host { display: flex; gap: 0.75rem; }',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WorkflowCardActionsComponent {}

/** Additional content placed on very right side of the header */
@Component({
  selector: 'hra-workflow-card-extra',
  template: '<ng-content />',
  styles: ':host { display: flex; gap: 0.75rem; }',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WorkflowCardExtraComponent {}

/**
 * Component that appears when users are completing a workflow process
 */
@Component({
  selector: 'hra-workflow-card',
  imports: [MatProgressBarModule, StepIndicatorComponent],
  templateUrl: './workflow-card.component.html',
  styleUrl: './workflow-card.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
})
export class WorkflowCardComponent {
  /** Card title */
  readonly tagline = input.required<string>();
  /** Step indicator value */
  readonly step = input(undefined, { transform: numberAttribute });
  /** Load progress */
  readonly progress = input<number | undefined>(undefined);
}
<h2 class="header">
  @let stepValue = step();
  @if (stepValue !== undefined) {
    <hra-step-indicator [value]="stepValue" />
  }

  <span class="tagline">{{ tagline() }}</span>
  <ng-content select="hra-workflow-card-actions" />

  <div class="filler"></div>
  <ng-content select="hra-workflow-card-extra" />
</h2>

<div class="content">
  <ng-content />
</div>

@let progressValue = progress();
@if (progressValue !== undefined) {
  <mat-progress-bar class="progress" mode="determinate" [value]="100 * progressValue" />
}
Legend
Html element
Component
Html element with directive

results matching ""

    No results matching ""