aboutsummaryrefslogtreecommitdiffstats
path: root/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html
diff options
context:
space:
mode:
Diffstat (limited to 'catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html')
-rw-r--r--catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html57
1 files changed, 57 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html
new file mode 100644
index 0000000000..9884b233ac
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html
@@ -0,0 +1,57 @@
+<div class="custom-modal {{input.size}}">
+ <div class="ng2-modal-content w-sdc-classic-top-line-modal">
+ <div class="ng2-modal-header modal-type-{{input.type}}">
+ <span class="title">{{ input.title }}</span>
+ <span class="close-button" (click)="close()"></span>
+ </div>
+ <div class="ng2-modal-body" >
+ <div class="multi-steps-wizard-component">
+ <header>
+ <div class="steps-header">
+ <div *ngFor="let step of steps; let i = index" class="step-title" [ngClass]="{'active':i == currentStepIndex}">
+ <div class="title-text">{{step.title}}</div>
+ <div class="line">
+ <div class="inner-line" [@displayLineAnimation]="i <= currentStepIndex && i!=0" [hidden]="!i || i > currentStepIndex"></div>
+ </div>
+ <div class="circle" [ngClass]="{'full-circle': i < currentStepIndex}"></div>
+ </div>
+ </div>
+ <div class="dynamic-header-container">
+ <div #dynamicHeaderContainer></div>
+ </div>
+ </header>
+ <div #dynamicContentContainer></div>
+ </div>
+ </div>
+
+ <div class="ng2-modal-footer">
+ <button *ngFor="let button of input.buttons"
+ class="tlv-btn {{button.cssClass}}"
+ [disabled] = "button.getDisabled && button.getDisabled()"
+ (click) = "button.callback()">{{button.text}}</button>
+ <div class="navigation-buttons">
+ <button (click)="prevStep()"
+ class="navigation-button tlv-btn outline blue"
+ [disabled]="dynamicContent.instance.preventBack()">
+ <div class="navigation-icon sprite-new blue-arrow-back"></div>
+ Back
+ </button>
+ <button (click)="nextStep()"
+ *ngIf="currentStepIndex < (steps.length - 1)"
+ [disabled]="dynamicContent.instance.preventNext()"
+ class="navigation-button tlv-btn blue">
+ Next
+ <div class="navigation-icon sprite-new white-arrow-next"></div>
+ </button>
+ <button (click)="callback();modalService.closeCurrentModal();"
+ *ngIf="currentStepIndex == (steps.length - 1)"
+ [disabled]="dynamicContent.instance.preventNext()"
+ class="tlv-btn blue">
+ Finish
+ </button>
+ </div>
+
+ </div>
+ </div>
+</div>
+<div class="modal-background"></div> \ No newline at end of file