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

more layout changes for the linking (eg filters, icons, etc)

This commit is contained in:
argirok 2022-04-05 18:36:08 +03:00
parent 6d7b1976a9
commit b20fcfa219
15 changed files with 98 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
claims/claim-utils/claimProjectSearchForm.component.html
View File

@ -34,7 +34,7 @@
<div class="uk-grid">
<div class="search-filters uk-width-1-1">
<div *ngIf="countFilters()>0" class="uk-grid uk-flex uk-flex-bottom">
<!--<div *ngIf="countFilters()>0 && openaireResultsNum > 0" class="uk-grid uk-flex uk-flex-bottom">
<div class="uk-grid">
<h6 class="uk-text-bold">Filters</h6>
<a *ngIf="countFilters()>1" (click)="clearFilters()"
@ -66,7 +66,7 @@
<ng-container *ngIf = "filter.countSelectedValues > 0">
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "
[title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
&lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;
<span class="selectedFilterLabel ">
<a [class]="((openaireResultsStatus ==
errorCodes.LOADING)?' uk-disabled':' ')+' uk-link-text '">
@ -82,14 +82,14 @@
</ng-container>
</ng-container>
</div>
</div>
</div>-->
<ng-container *ngIf="openaireResultsNum > 0">
<ng-container *ngFor="let filter of rangeFilters">
<div class="uk-inline">
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right"
type="button">{{filter.title}}<span uk-icon="chevron-down"></span></button>
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
type="button"><span *ngIf="!filter.selectedFromAndToValues">{{filter.title}}</span><span *ngIf="filter.selectedFromAndToValues">{{filter.selectedFromAndToValues}}</span><span uk-icon="chevron-down"></span></button>
<div uk-dropdown="mode: click" class="uk-width-large" style="max-width:460px !important;">
<div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
<range-filter [isDisabled]="openaireResultsStatus ==
@ -105,8 +105,8 @@
<ng-container *ngFor="let filter of filters ">
<div class="uk-inline">
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right"
type="button">{{filter.title}}<span uk-icon="chevron-down"></span></button>
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
type="button">{{filter.title}}<span *ngIf="filter.countSelectedValues>0"> ({{filter.countSelectedValues}})</span><span uk-icon="chevron-down"></span></button>
<div uk-dropdown="mode: click" class="uk-width-large uk-overflow-auto" style="max-width:460px !important; ">
<div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
<search-filter [isDisabled]="openaireResultsStatus ==

14
claims/claim-utils/claimResultSearchForm.component.html
View File

@ -94,7 +94,7 @@
<div class="uk-grid">
<div class="search-filters uk-width-1-1">
<div *ngIf="countFilters()>0" class="uk-grid uk-flex uk-flex-bottom">
<!--<div *ngIf="countFilters()>0" class="uk-grid uk-flex uk-flex-bottom">
<div class="uk-grid">
<h6 class="uk-text-bold">Filters</h6>
<a *ngIf="countFilters()>1" (click)="clearFilters()"
@ -126,7 +126,7 @@
<ng-container *ngIf = "filter.countSelectedValues > 0">
<span *ngFor="let value of getSelectedValues(filter); let i = index; let end = last; "
[title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
<!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
&lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;
<span class="selectedFilterLabel ">
<a [class]="((openaireResultsStatus ==
errorCodes.LOADING)?' uk-disabled':' ')+' uk-link-text '">
@ -142,12 +142,12 @@
</ng-container>
</ng-container>
</div>
</div>
</div>-->
<ng-container *ngIf="openaireResultsNum > 0">
<ng-container *ngFor="let filter of rangeFilters">
<div class="uk-inline">
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right"
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
type="button">{{filter.title}}<span uk-icon="chevron-down"></span></button>
<div uk-dropdown="mode: click" class="uk-width-large" style="max-width:460px !important;" >
<div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
@ -164,8 +164,8 @@
<ng-container *ngFor="let filter of openaireResultsfilters ">
<div class="uk-inline">
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right"
type="button">{{filter.title}}<span uk-icon="chevron-down"></span></button>
<button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
type="button">{{filter.title}}<span *ngIf="filter.countSelectedValues>0"> ({{filter.countSelectedValues}})</span><span uk-icon="chevron-down"></span></button>
<div uk-dropdown="mode: click" class=" uk-width-large uk-height-max-large " style="max-width:460px !important;">
<div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
<search-filter [isDisabled]="openaireResultsStatus ==
@ -179,7 +179,7 @@
</ng-container>
</div>
<div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
<div class="uk-margin-top">
<div class="">
<div *ngIf="openaireResultsStatus == errorCodes.NONE" class="uk-alert uk-alert-primary"
role="alert">No Results found
</div>

2
claims/claim-utils/claimResults.component.ts
View File

@ -10,7 +10,7 @@ declare var UIkit: any;
<div *ngIf="results.length > 0 " class="uk-padding">
<div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-padding-small uk-margin-bottom">
<div>
<div class="uk-text-muted uk-text-small">
<div class="uk-text-small">
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div>
<div class="uk-grid">

25
claims/linking/insertClaim/insertClaim.component.ts
View File

@ -20,9 +20,10 @@ import {Subscriber} from "rxjs";
selector: 'claim-insert',
template: `
<div class="uk-width-1-1">
<modal-loading [message]="'Please wait...'"></modal-loading>
<div (click)="insert()"
class=" nextStep uk-margin-small-top uk-padding-small uk-text-center " [class.active]="(results.length > 0 && (sources.length > 0 || inlineEntity))" [class.disabled]="!(results.length > 0 && (sources.length > 0 || inlineEntity))">
<modal-loading [message]="'Please wait...'"></modal-loading>
<modal-alert (alertOutput)="confirmClose()">
<h4 class="modal-title uk-text-bold " id="myModalLabel">Confirmation notice</h4>
<p>All the links you provided will be published in the OpenAIRE platform. <br>
@ -34,17 +35,11 @@ import {Subscriber} from "rxjs";
Do you confirm the information you provide is valid?
</p>
</modal-alert>
<div class="uk-clearfix">
<div>
<a *ngIf="!claiming " (click)="insert()"
class="uk-text-center ">CONFIRM LINKING
<span [class]="(defaultColors?'':' uk-margin-small-top ')+'uk-icon uk-text-bold uk-margin-small-right'" uk-icon="arrow-right">
</span>
</a>
</div>
<span >CONFIRM LINKING
<span class="uk-icon uk-text-bold uk-margin-small-right" uk-icon="arrow-right"></span>
</span>
</div>
</div>
`
@ -91,7 +86,9 @@ export class ClaimInsertComponent {
private errorInRecords = [];
public insert() {
this.confirmOpen();
if(this.claiming) {
this.confirmOpen();
}
}
saveAndNavigate(){
localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));

0
claims/linking/linkingGeneric.component.css Normal file
View File

21
claims/linking/linkingGeneric.component.html
View File

@ -40,7 +40,7 @@
<div id="basketStickTop"></div>
<div class="uk-grid" *ngIf="showOptions.show!='claim'" >
<div class="uk-width-2-3 uk-padding">
<div *ngIf="showOptions.show=='source'">
<claim-result-search-form [selectedResults]="sources" [properties]=properties
[localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit"
@ -68,10 +68,10 @@
</div>
<!-- Basket-->
<div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3 uk-padding-remove-left"
<div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3 uk-padding-remove-left "
style="" >
<div id="basket" uk-sticky=" offset: 130; top:#basketStickTop; bottom: #basketStickBottom;"
style="z-index: 0" class="uk-card uk-card-default">
style="z-index: 0" class="uk-card uk-card-default linkingBasket">
<div class="linksbasket uk-inline uk-width-1-1" style="">
<div>
<ul class="uk-padding-small uk-padding-remove-bottom" uk-tab>
@ -119,11 +119,11 @@
</div>
<claim-selected-results *ngIf="inlineEntity" [results]="[inlineEntity]"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="false">
[enableRemove]="false" type="source" >
</claim-selected-results>
<claim-selected-results *ngIf="sources.length > 0" [results]="sources"
[localStoragePrefix]="localStoragePrefix+'sources'" class=""
[enableRemove]="true">
[enableRemove]="true" type="source">
</claim-selected-results>
</div>
</div>
@ -150,7 +150,7 @@
Basket reached the size limit. No more entities can be added.
</div>
<claim-selected-results sectionTitle="Selected Results" [results]="results"
[localStoragePrefix]="localStoragePrefix+'results'">
[localStoragePrefix]="localStoragePrefix+'results'" type="target">
</claim-selected-results>
<div *ngIf="(results.length) == 0 " class=" uk-text-center">
No entities to link with the sources. Start adding entities from the left panel.
@ -164,8 +164,8 @@
</ul>
<div *ngIf="showOptions.show=='source'"
[class]="((sources.length)>0?'uk-background-secondary uk-light ':'uk-disabled uk-background-muted ')+ ' linksbaskettitles uk-padding-small'"
(click)="stepHasChanged('source') ">
class=" nextStep uk-margin-small-top uk-padding-small " [class.active]="(sources.length)>0" [class.disabled]="(sources.length) == 0"
(click)="stepHasChanged('target') ">
<div class=" uk-margin-remove uk-text-center">
STEP 2 - LINK SOURCES TO ENTITIES
<span class="uk-icon uk-float-right uk-text-bold uk-margin-small-right">
@ -177,9 +177,8 @@
</div>
<div *ngIf="showOptions.show!='source'"
[class]="((results.length)>0?'uk-background-secondary uk-light ':'uk-disabled uk-background-muted ')+
' linksbaskettitles uk-margin-small-top uk-padding-small'"
style="height:auto !important; " (click)="stepHasChanged('source')">
class=" nextStep uk-margin-small-top uk-padding-small " [class.active]="(results.length)>0" [class.disabled]="(results.length) == 0"
style="height:auto !important; " (click)="stepHasChanged('claim')">
<div class="uk-margin-remove uk-text-center">
STEP {{inlineEntity?'2':'3'}} - FINALISE AND FINISH

6
claims/linking/linkingGeneric.component.ts
View File

@ -19,11 +19,7 @@ declare var UIkit:any;
@Component({
selector: 'linking-generic',
templateUrl: 'linkingGeneric.component.html',
styles:[ `
`]
styleUrls:[ 'linkingGeneric.component.css']
})
export class LinkingGenericComponent {

6
claims/linking/selected/ClaimEntityProjectMetadata.component.ts
View File

@ -8,16 +8,16 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
<div *ngIf="entity.type == 'project' && entity.project" class="uk-grid uk-margin-remove-top uk-text-small">
<div class="uk-width-1-2">
<div *ngIf="entity.project.funderName">
<span class="uk-text-muted uk-margin-small-right">Funder: </span>{{entity.project.funderName}}
<span class="uk-text-meta uk-margin-small-right">Funder: </span>{{entity.project.funderName}}
</div>
<div *ngIf="entity.project.code">
<span class="uk-text-muted uk-margin-small-right">GrandID: </span>{{entity.project.code}}
<span class="uk-text-meta uk-margin-small-right">GrandID: </span>{{entity.project.code}}
</div>
</div>
<div class="uk-width-1-2">
<div *ngIf=" !shortVersion && (entity.project.startDate || entity.project.endDate)">
<span
class="uk-text-muted uk-margin-small-right">Duration: </span>{{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}}
class="uk-text-meta uk-margin-small-right">Duration: </span>{{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}}
</div>
</div>
</div>

10
claims/linking/selected/ClaimEntityResultMetadata.component.ts
View File

@ -7,22 +7,22 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
`
<div *ngIf="entity.result">
<div *ngIf="entity.result.authors && entity.result.authors.length >0 " class="uk-text-small uk-margin-small-bottom">
<span class="uk-text-muted uk-margin-small-right">Authors: </span>
<span class="uk-text-meta uk-margin-small-right">Authors: </span>
{{sliceArray(entity.result.authors)}}
</div>
<div *ngIf="!shortVersion && entity.result.editors&& entity.result.editors.length > 0" class="uk-text-small uk-margin-small-bottom">
<span class="uk-text-muted uk-margin-small-right">Editors: </span>
<span class="uk-text-meta uk-margin-small-right">Editors: </span>
{{sliceArray(entity.result.editors)}}
</div>
<div *ngIf="!shortVersion" class="uk-grid uk-margin-remove uk-text-small">
<div class="uk-width-1-2 uk-padding-remove-left ">
<span *ngIf="entity.result.publisher!=null"><span
class="uk-text-muted uk-margin-small-right uk-margin-small-bottom">Publisher: </span> {{entity.result.publisher}}</span>
class="uk-text-meta uk-margin-small-right uk-margin-small-bottom">Publisher: </span> {{entity.result.publisher}}</span>
<span *ngIf="entity.result.journal!=null"><span
class="uk-text-muted uk-margin-small-right uk-margin-small-bottom">Journal: </span> {{entity.result.journal}}</span>
class="uk-text-meta uk-margin-small-right uk-margin-small-bottom">Journal: </span> {{entity.result.journal}}</span>
</div>
<div class="uk-width-1-2">
<span *ngIf="entity.result.date"><span class="uk-text-muted uk-margin-small-right uk-margin-small-bottom">Published: </span> <span
<span *ngIf="entity.result.date"><span class="uk-text-meta uk-margin-small-right uk-margin-small-bottom">Published: </span> <span
[class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">{{entity.result.date}}</span></span>
<div [class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">{{getProjectDurationMessage(entity)}}
</div>

12
claims/linking/selected/ClaimEntityTitle.component.ts
View File

@ -6,14 +6,15 @@ import {StringUtils} from "../../../utils/string-utils.class";
selector: 'claim-title',
template:
`
<div class="uk-margin-bottom" [class.uk-h6]="!shortVersion" [class.uk-text-bold]="shortVersion">
<a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url"
class="uk-link">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</a>
<div class="uk-grid uk-flex uk-flex-middle">
<div class="uk-width-expand" [class.uk-h6]="!shortVersion" [class.uk-text-bold]="shortVersion" [class.uk-text-truncate]="shortVersion" [class.uk-margin-bottom]="!shortVersion" [class.uk-margin-small-bottom]="shortVersion">
<a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url"
class="uk-text-link">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</a>
<span
*ngIf="(entity.result && !entity.result.url)">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</span>
<span *ngIf="entity.type=='project' && entity.project">
<a *ngIf="entity.project && entity.project.url" target="_blank" [href]="entity.project.url"
class="uk-link">
class="uk-text-link">
<span *ngIf="!shortVersion">
{{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}}
</span>
@ -40,6 +41,7 @@ import {StringUtils} from "../../../utils/string-utils.class";
<span> {{entity.context.concept.label}}</span>
</span>
</div>
</div>
`
@ -58,7 +60,7 @@ export class ClaimEntityTitleComponent {
}
sliceString(mystr:string): string {
if(this.slice){
return StringUtils.sliceString(mystr,this.sliceSize);
// return StringUtils.sliceString(mystr,this.sliceSize);
}
return mystr;
}

35
claims/linking/selected/metadataPreview.component.html
View File

@ -38,13 +38,22 @@
<!-- <div class="uk-text-muted">-->
<!-- {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}-->
<!-- </div>-->
<div>
<claim-title [shortVersion]="true" [entity]="inlineEntity"></claim-title>
</div>
<claim-result-metadata [entity]="inlineEntity"></claim-result-metadata>
<claim-project-metadata [entity]="inlineEntity"></claim-project-metadata>
<div class="uk-grid uk-flex uk-flex-middle">
<div>
<span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
<!-- <span class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>-->
</div>
<div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
<div>
<claim-title [shortVersion]="true" [entity]="inlineEntity"></claim-title>
</div>
<claim-result-metadata [entity]="inlineEntity"></claim-result-metadata>
<claim-project-metadata [entity]="inlineEntity"></claim-project-metadata>
</div>
</div>
</li>
</ul>
<div *ngIf="!inlineEntity && sources.length == 0 ">
<div class="uk-alert dangerBorder no-selected-message uk-text-center">
@ -67,7 +76,13 @@
</div>
</div>
<div class="uk-grid uk-margin-remove-top">
<div class="uk-width-expand">
<div>
<span class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
<!-- <span class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>-->
</div>
<div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
<claim-title [shortVersion]="true" [entity]="entity"></claim-title>
<claim-result-metadata [entity]="entity"></claim-result-metadata>
<claim-project-metadata [entity]="entity"></claim-project-metadata>
@ -256,10 +271,6 @@
</div>
</div>
<div class="uk-section uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1 uk-padding-remove-left ">
<div
[class]="((results.length > 0 && (sources.length > 0 || inlineEntity))?'uk-background-secondary uk-light':'uk-background-muted uk-disabled ')+' uk-padding-small'">
<div class="">
<div class="uk-grid uk-flex uk-flex-center">
<claim-insert [results]="results" [sources]="sources" [inlineEntity]="inlineEntity"
@ -267,9 +278,7 @@
class=" " [errors]="errors" (insertFinished)="runValidation(false); updateLocalStorage();"
[defaultColors]="defaultColors" [communityId]="communityId">
</claim-insert>
</div>
</div>
</div>
</div>
</div>

17
claims/linking/selected/metadataPreview.module.ts
View File

@ -10,16 +10,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
import { MatInputModule } from '@angular/material/input';
import { MatSelectModule } from '@angular/material/select';
import {HelperModule} from "../../../utils/helper/helper.module";
import {SelectedPublicationsModule} from "./selectedResults.module";
@NgModule({
imports: [
SharedModule,
AlertModalModule,
ClaimEntitiesMetadataModule,
InsertClaimsModule,
MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatSelectModule,
HelperModule
],
imports: [
SharedModule,
AlertModalModule,
ClaimEntitiesMetadataModule,
InsertClaimsModule,
MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatSelectModule,
HelperModule, SelectedPublicationsModule
],
declarations: [MetadataPreviewComponent],
exports:[MetadataPreviewComponent]
})

18
claims/linking/selected/selectedResults.component.html
View File

@ -1,13 +1,17 @@
<ul *ngIf="results.length > 0 " class="uk-list uk-list-divider">
<li *ngFor=" let entity of results " >
<div class="uk-text-muted">
<!--<div class="uk-text-muted">
{{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
</div>
<div class="uk-grid">
<div class="uk-width-expand">
<claim-title [entity]="entity" [slice]="true" [sliceSize]="45" [shortVersion]="true"></claim-title>
<claim-result-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="true"></claim-result-metadata>
<claim-project-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="true"></claim-project-metadata>
</div>-->
<div class="uk-grid uk-flex uk-flex-middle">
<div >
<span *ngIf="type == 'source'" class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
<span *ngIf="type == 'target'" class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>
</div>
<div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
<claim-title [entity]="entity" [slice]="true" [sliceSize]="45" [shortVersion]="shortVersion"></claim-title>
<claim-result-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="shortVersion"></claim-result-metadata>
<claim-project-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="shortVersion"></claim-project-metadata>
</div>
<div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left" *ngIf="enableRemove">
<a class=" uk-link " (click)="remove(entity)" >

3
claims/linking/selected/selectedResults.component.ts
View File

@ -11,7 +11,8 @@ export class ClaimSelectedResultsComponent {
@Input() sectionTitle: string = "Research Results";
@Input() localStoragePrefix: string = "";
@Input() enableRemove:boolean = true;
@Input() type: "source" | "target";
@Input() shortVersion:boolean = true;
ngOnInit() {
}

4
sharedComponents/stepper/step.component.ts
View File

@ -6,8 +6,8 @@ import {Component, EventEmitter, Input, Output} from '@angular/core';
<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"
<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"
[class]="status">{{stepText}}</div>
<div>
<button class="uk-icon-button uk-border-circle" [class]="status" [class.uk-disabled]="status=='disabled'"