MaDgIK
/
openaire-library
13
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

stepper component v2

This commit is contained in:
argirok 2022-03-16 18:53:19 +02:00
parent f2217a4a38
commit 7a8358bb47
6 changed files with 69 additions and 47 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
claims/claim-utils/stepper/step.component.ts
View File

@ -1,26 +0,0 @@
import {Component, EventEmitter, Input, Output} from '@angular/core';
@Component({
selector: 'step',
template: `
<div class=" uk-width-auto" >
<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>
<span class="uk-margin-small-left stepper-text" [class]="status">{{stepText}}</span>
</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>();
}

19
claims/claim-utils/stepper/stepper.component.ts
View File

@ -1,19 +0,0 @@
import {Component} from '@angular/core';
@Component({
selector: 'stepper',
template: `
<div class="stepper" >
<div class=" uk-flex uk-flex-center uk-text-small" >
<div class=" uk-grid uk-flex uk-flex-center uk-flex-middle uk-width-auto">
<ng-content></ng-content>
</div>
</div>
</div>
`
})
export class StepperComponent {
}

34
sharedComponents/stepper/step.component.ts Normal file
View File

@ -0,0 +1,34 @@
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;
}

3
claims/claim-utils/stepper/stepLine.component.ts → sharedComponents/stepper/stepLine.component.ts
View File

@ -6,11 +6,12 @@ import {Component, Input} from '@angular/core';
<div class="stepper-line uk-margin-small-left" [class]="status"></div>
<div class="stepper-line uk-margin-bottom uk-width-medium@m uk-width-small@s" [class]="status + ' step' + stepNumber"></div>
`
})
export class StepLineComponent {
@Input() status: 'active' | 'default' | 'disabled' | 'done';
@Input() stepNumber;
}

32
sharedComponents/stepper/stepper.component.ts Normal file
View File

@ -0,0 +1,32 @@
import {Component} from '@angular/core';
/*
* usage example
*
* <stepper>
<step status="active" stepId="step1" stepNumber="1"
stepText="Step 1"
active="step1" [showStepLine]="false"></step>
<step status="disabled" stepId="step2" stepNumber="2"
stepText="Step 2"
active="step1"
[showStepLine]="true"></step>
</stepper>
* */
@Component({
selector: 'stepper',
template: `
<div class="stepper" >
<div class=" uk-flex uk-flex-center " >
<div class=" uk-grid uk-grid-small uk-flex uk-flex-bottom uk-text-small uk-width-auto">
<ng-content></ng-content>
</div>
</div>
</div>
`
})
export class StepperComponent {
}

2
claims/claim-utils/stepper/stepper.module.ts → sharedComponents/stepper/stepper.module.ts
View File

@ -1,5 +1,5 @@
import { NgModule } from '@angular/core';
import {SharedModule} from "../../../../shared/shared.module";
import {SharedModule} from "../../../shared/shared.module";
import {StepperComponent} from "./stepper.component";
import {StepComponent} from "./step.component";
import {StepLineComponent} from "./stepLine.component";