[SDC-29] rebase continue work to align source

Change-Id: I218f1c5ee23fb2c8314f1c70921d3ad8682c10f4
Signed-off-by: Michael Lando <ml636r@att.com>

3 files changed, 179 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.html b/catalog-ui/src/app/ng2/components/modal/modal.component.html
new file mode 100644
index 0000000000..4882449596
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.html
@@ -0,0 +1,18 @@
+<div class="custom-modal {{size}}">
+    <div class="ng2-modal-content">
+        <div class="ng2-modal-header">
+            <span class="title">{{ title }}</span>
+            <span class="close-button" (click)="close()"></span>
+        </div>
+        <div class="ng2-modal-body">
+            <ng-content></ng-content>
+        </div>
+        <div class="ng2-modal-footer">
+            <button *ngFor="let buttonName of buttonsNames"
+                    class="tlv-btn {{buttons[buttonName].cssClass}}"
+                    [disabled] = "buttons[buttonName].getDisabled && buttons[buttonName].getDisabled()"
+                    (click) = "buttons[buttonName].callback()">{{buttons[buttonName].text}}</button>
+        </div>
+    </div>
+</div>
+<div class="modal-background"></div>
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.less b/catalog-ui/src/app/ng2/components/modal/modal.component.less
new file mode 100644
index 0000000000..a35f829e6a
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.less
@@ -0,0 +1,115 @@
+@import '../../../../assets/styles/variables';
+@import '../../../../assets/styles/mixins';
+@import '../../../../assets/styles/sprite-old';
+/deep/ modal {
+    display: none;
+
+    .custom-modal {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 1000;
+        overflow: auto;
+        margin: auto;
+        display: flex;
+        align-items: center;
+
+        .ng2-modal-content {
+            background: #fff;
+            width: 100%;
+            box-shadow: 0 5px 15px rgba(0,0,0,.5);
+            border-radius: 4px;
+            .ng2-modal-body{
+                padding: 20px;
+            }
+
+            .ng2-modal-header{
+                .m_18_m;
+                font-weight: bold;
+                -webkit-box-flex: 1;
+                -ms-flex-positive: 1;
+                flex-grow: 1;
+                height: 50px;
+                line-height: 50px;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                text-align: left;
+                border-bottom: solid 1px @main_color_o;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                align-items: center;
+                margin: 0px 20px;
+                .title{
+                    -webkit-box-flex: 999;
+                    -ms-flex-positive: 999;
+                    flex-grow: 999;
+                }
+                .close-button{
+                    .sprite;
+                    .sprite.x-btn-black;
+                    cursor: pointer;
+                }
+            }
+
+            .ng2-modal-footer{
+                background-color: @tlv_color_t;
+                padding: 17px 30px;
+                clear: both;
+                -webkit-box-flex: 1;
+                -ms-flex-positive: 1;
+                flex-grow: 1;
+                display: -webkit-box;
+                display: -ms-flexbox;
+                display: flex;
+                -webkit-box-align: center;
+                -ms-flex-align: center;
+                align-items: center;
+                -webkit-box-pack: end;
+                -ms-flex-pack: end;
+                justify-content: flex-end;
+                border-radius: 4px;
+                button{
+                    margin: 0 12px 0 6px;
+                }
+            }
+        }
+    }
+
+    .modal-background {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: #000;
+        opacity: 0.5;
+        z-index: 900;
+    }
+}
+
+.xl {
+    width: 1200px;
+}
+
+.l {
+    width: 875px;
+}
+
+.md {
+    width: 650px;
+}
+
+.sm {
+    width: 552px;
+}
+
+.xsm {
+    width: 432px;
+}
+
+body.modal-open {
+    overflow: hidden;
+}
diff --git a/catalog-ui/src/app/ng2/components/modal/modal.component.ts b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
new file mode 100644
index 0000000000..4a00871b21
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/modal/modal.component.ts
@@ -0,0 +1,46 @@
+/**
+ * Created by rc2122 on 6/1/2017.
+ */
+import { Component, ElementRef, Input, OnInit, OnDestroy } from '@angular/core';
+import * as $ from 'jquery';
+import {ButtonsModelMap} from "app/models/button";
+
+@Component({
+    selector: 'modal',
+    templateUrl: './modal.component.html',
+    styleUrls:['modal.component.less']
+})
+
+export class ModalComponent implements OnInit, OnDestroy {
+    @Input() size: string; 'xl|l|md|sm|xsm'
+    @Input() title: string;
+    @Input() public buttons:ButtonsModelMap;
+    private modalElement: JQuery;
+    private buttonsNames:Array<string>;
+
+    constructor( el: ElementRef ) {
+        this.modalElement = $(el.nativeElement);
+    }
+
+    ngOnInit(): void {
+        let modal = this;
+        this.modalElement.appendTo('body');
+        if(this.buttons){
+            this.buttonsNames = Object.keys(this.buttons);
+        }
+    }
+
+    ngOnDestroy(): void {
+        this.modalElement.remove();
+    }
+
+    open(): void {
+        this.modalElement.show();
+        $('body').addClass('modal-open');
+    }
+
+    close(): void {
+        this.modalElement.hide();
+        $('body').removeClass('modal-open');
+    }
+}