openaire-library/sharedComponents/stepper/step.component.ts

35 lines
1.3 KiB
TypeScript
Raw Normal View History

2022-03-16 17:53:19 +01:00
import {Component, EventEmitter, Input, Output} from '@angular/core';
@Component({
selector: 'step',
template: `
<div class=" uk-width-auto uk-text-center " style="position: relative; ">
<div style="position: relative; z-index:10; min-width: 140px;" class="">
<div class="uk-margin-small-left stepper-text uk-text-uppercase uk-margin-bottom uk-text-truncate"
2022-03-16 17:53:19 +01:00
[class]="status">{{stepText}}</div>
<div>
<button class="uk-icon-button uk-border-circle" [class]="status" [class.uk-disabled]="status=='disabled'"
(click)="stepChanged.emit(stepId)">
<span *ngIf="status != 'done'">{{stepNumber}}</span>
<span *ngIf="status == 'done'" uk-icon="check"></span>
</button>
</div>
</div>
<step-line *ngIf="showStepLine" [status]="status" [stepNumber]="stepNumber" class="stepper-line-container"
[style.z-index]="(+stepNumber)"></step-line>
</div>
`
})
export class StepComponent {
@Input() status: 'active' | 'default' | 'disabled' | 'done';
@Input() stepId;
@Input() stepNumber;
@Input() stepText;
@Input() active;
@Output() stepChanged: EventEmitter<string> = new EventEmitter<string>();
@Input() showStepLine:boolean = false;
}