Final commit to master merge from

Change-Id: Ib464f9a8828437c86fe6def8af238aaf83473507
Issue-ID: SDC-714
Signed-off-by: Tal Gitelman <tg851x@intl.att.com>

5 files changed, 257 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts
new file mode 100644
index 0000000000..0c1669ec4b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard-header-base.component.ts
@@ -0,0 +1,10 @@
+/**
+ * Created by rc2122 on 9/27/2017.
+ */
+import {Component, Input} from "@angular/core";
+@Component({
+})
+export class WizardHeaderBaseComponent {
+
+    @Input() currentStepIndex:number;
+}
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
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
new file mode 100644
index 0000000000..3a2168aeb0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.less
@@ -0,0 +1,90 @@
+@import './../../../../../assets/styles/variables.less';
+
+@circle_size: 13px;
+
+.custom-modal{
+  font-family: @font-opensans-regular;
+}
+
+/deep/ multi-steps-wizard {
+  display: none;
+}
+
+.ng2-modal-header{
+  border: none !important;
+}
+
+.ng2-modal-body{
+  padding-top: 0 !important;
+}
+
+header{
+  margin-bottom: 10px;
+  .dynamic-header-container{
+    position: relative;
+    top: -9px;
+  }
+  .steps-header{
+    display: flex;
+    .step-title{
+      flex: 1;
+      .title-text{
+        width: 100%;
+        text-align: center;
+        line-height: 40px;
+        background-color: @tlv_color_u;
+        font-size: 13px;
+      }
+      .line{
+        width: calc(~'100% - @{circle_size}');
+        position: relative;
+        left: calc(~'(100% - @{circle_size})/2 * (-1)');
+        float: left;
+        height: 2px;
+        .inner-line{
+          background-color: @main_color_a;
+          height: 100%;
+        }
+      }
+      .circle{
+        margin:0 auto;
+        border: @main_color_o solid 1px;
+        height: @circle_size;
+        width: @circle_size;
+        border-radius: 50%;
+        position: relative;
+        top: -@circle_size/2;
+        background-color: @main_color_p;
+        z-index: 1;
+      }
+      .full-circle{
+        border-color: @main_color_a;
+        background-color: @main_color_a;
+      }
+      &.active{
+        color: @main_color_a;
+        font-family: @font-opensans-medium;
+        .circle{
+          border-color: @main_color_a;
+        }
+      }
+    }
+  }
+}
+
+.navigation-buttons{
+  padding-left: 6px;
+  border-left: 1px solid @main_color_a;
+  .navigation-button{
+    padding: 0 8px;
+    .navigation-icon{
+      margin: 3px 0;
+      &.blue-arrow-back{
+        float: left;
+      }
+      &.white-arrow-next{
+        float: right;
+      }
+    }
+  }
+}
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
new file mode 100644
index 0000000000..9219a30738
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.component.ts
@@ -0,0 +1,78 @@
+/**
+ * Created by rc2122 on 8/15/2017.
+ */
+/*-
+ * ============LICENSE_START=======================================================
+ * SDC
+ * ================================================================================
+ * Copyright (C) 2017 AT&T Intellectual Property. All rights reserved.
+ * ================================================================================
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * ============LICENSE_END=========================================================
+ */
+import {
+    Component, ElementRef, forwardRef, Inject, Input, trigger, state, style,
+    transition, animate, ViewChild, ViewContainerRef, ComponentRef
+} from "@angular/core";
+import {StepModel} from "app/models";
+import {ModalService} from "../../../services/modal.service";
+import {ModalComponent} from "../modal/modal.component";
+import {WizardHeaderBaseComponent} from "./multi-steps-wizard-header-base.component";
+
+
+@Component({
+    selector: 'multi-steps-wizard',
+    templateUrl: './multi-steps-wizard.component.html',
+    styleUrls: ['./../modal/modal.component.less','./multi-steps-wizard.component.less'],
+    animations: [
+        trigger('displayLineAnimation', [
+            state('true', style({
+                width: '100%',
+            })),
+            state('false', style({
+                width:'0px',
+            })),
+            transition('* => *', animate('500ms')),
+        ]),
+    ],
+})
+export class MultiStepsWizardComponent extends ModalComponent {
+
+    @Input() steps:Array<StepModel>;
+    @Input() callback: Function;
+    @Input() data:any;
+    @Input() dynamicHeader: ComponentRef<WizardHeaderBaseComponent>;
+
+    @ViewChild('dynamicHeaderContainer', { read: ViewContainerRef }) dynamicHeaderContainer: ViewContainerRef;
+    constructor(@Inject(forwardRef(() => ModalService)) public modalService: ModalService, el: ElementRef ) {
+        super(el);
+    }
+
+    private currentStepIndex:number = 0;
+
+    nextStep = ():void => {
+        if(this.currentStepIndex + 1 < this.steps.length){
+            this.currentStepIndex++;
+            this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
+            this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
+        }
+    }
+
+    prevStep = ():void => {
+        if(this.currentStepIndex > 0){
+            this.currentStepIndex--;
+            this.modalService.addDynamicContentToModal(this.modalService.currentModal, this.steps[this.currentStepIndex].component);
+            this.dynamicHeader.instance.currentStepIndex = this.currentStepIndex;
+        }
+    }
+}
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
new file mode 100644
index 0000000000..3db217d282
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/ui/multi-steps-wizard/multi-steps-wizard.module.ts
@@ -0,0 +1,22 @@
+/**
+ * Created by rc2122 on 8/15/2017.
+ */
+import { NgModule } from "@angular/core";
+import {MultiStepsWizardComponent} from "./multi-steps-wizard.component";
+import {CommonModule} from "@angular/common";
+import {ConnectionWizardModule} from "../../../pages/connection-wizard/connection-wizard.module";
+
+@NgModule({
+    declarations: [
+        MultiStepsWizardComponent
+    ],
+    imports: [CommonModule
+    ],
+    exports: [],
+    entryComponents: [
+        MultiStepsWizardComponent
+    ],
+    providers: []
+})
+export class MultiStepsWizardModule {
+}
\ No newline at end of file