35 lines
1.2 KiB
TypeScript
35 lines
1.2 KiB
TypeScript
|
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;">
|
||
|
|
<div class="uk-margin-small-left stepper-text uk-text-uppercase uk-margin-bottom"
|
||
|
|
[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;
|
||
|
|
}
|