catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.html

   1 <!--
   2   ~ Copyright (C) 2018 AT&T Intellectual Property. All rights reserved.
   3   ~
   4   ~ Licensed under the Apache License, Version 2.0 (the "License");
   5   ~ you may not use this file except in compliance with the License.
   6   ~ You may obtain a copy of the License at
   7   ~
   8   ~      http://www.apache.org/licenses/LICENSE-2.0
   9   ~
  10   ~ Unless required by applicable law or agreed to in writing, software
  11   ~ distributed under the License is distributed on an "AS IS" BASIS,
  12   ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  13   ~ See the License for the specific language governing permissions and
  14   ~ limitations under the License.
  15   -->
  16
  17 <div class="custom-modal {{input.size}}">
  18     <div class="ng2-modal-content w-sdc-classic-top-line-modal">
  19         <div class="ng2-modal-header modal-type-{{input.type}}">
  20             <span class="title">{{ input.title }}</span>
  21             <span class="close-button" (click)="close()"></span>
  22         </div>
  23         <div class="ng2-modal-body" >
  24             <div class="multi-steps-wizard-component">
  25                 <header>
  26                     <div class="steps-header">
  27                         <div *ngFor="let step of steps; let i = index" class="step-title" [ngClass]="{'active':i == currentStepIndex}">
  28                             <div class="title-text">{{step.title}}</div>
  29                             <div class="line">
  30                                 <div class="inner-line" [@displayLineAnimation]="i <= currentStepIndex && i!=0" [hidden]="!i || i > currentStepIndex"></div>
  31                             </div>
  32                             <div class="circle" [ngClass]="{'full-circle': i < currentStepIndex}"></div>
  33                         </div>
  34                     </div>
  35                     <div class="dynamic-header-container">
  36                         <div #dynamicHeaderContainer></div>
  37                     </div>
  38                 </header>
  39                 <div #dynamicContentContainer></div>
  40             </div>
  41         </div>
  42
  43         <div class="ng2-modal-footer">
  44             <button *ngFor="let button of input.buttons"
  45                     class="tlv-btn {{button.cssClass}}"
  46                     [disabled] = "button.getDisabled && button.getDisabled()"
  47                     (click) = "button.callback()">{{button.text}}</button>
  48             <div class="navigation-buttons">
  49                 <button (click)="prevStep()"
  50                         class="navigation-button tlv-btn outline blue"
  51                         [disabled]="dynamicContent.instance.preventBack()">
  52                     <div class="navigation-icon sprite-new blue-arrow-back"></div>
  53                     Back
  54                 </button>
  55                 <button (click)="nextStep()"
  56                         *ngIf="currentStepIndex < (steps.length - 1)"
  57                         [disabled]="dynamicContent.instance.preventNext()"
  58                         class="navigation-button tlv-btn blue">
  59                     Next
  60                     <div class="navigation-icon sprite-new white-arrow-next"></div>
  61                 </button>
  62                 <button (click)="callback();modalService.closeCurrentModal();"
  63                         *ngIf="currentStepIndex == (steps.length - 1)"
  64                         [disabled]="dynamicContent.instance.preventNext()"
  65                         class="tlv-btn blue">
  66                     Finish
  67                 </button>
  68             </div>
  69
  70         </div>
  71     </div>
  72 </div>
  73 <div class="modal-background"></div>