[SDC-29] rebase continue work to align source

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

3 files changed, 172 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.html b/catalog-ui/src/app/ng2/components/loader/loader.component.html
new file mode 100644
index 0000000000..0e13cee674
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.html
@@ -0,0 +1,5 @@
+<div *ngIf="display" data-tests-id="tlv-loader">
+    <div class="tlv-loader-back" [ngClass]="{'tlv-loader-relative':relative}"></div>
+    <div class="tlv-loader {{size}}"></div>
+</div>
+
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.less b/catalog-ui/src/app/ng2/components/loader/loader.component.less
new file mode 100644
index 0000000000..054b6021a1
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.less
@@ -0,0 +1,75 @@
+@import '../../../../assets/styles/variables';
+.tlv-loader-back {
+    background-color: @main_color_p;
+    position: fixed;
+    top: 50px;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 9999;
+    opacity: 0.5;
+}
+
+.tlv-loader-relative { position: absolute; top: 0;}
+
+.tlv-loader {
+    z-index: 10002;
+}
+
+@keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadein {
+    from { opacity: 0; }
+    to   { opacity: 0.8; }
+}
+
+@keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Firefox < 16 */
+@-moz-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Safari, Chrome and Opera > 12.1 */
+@-webkit-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Internet Explorer */
+@-ms-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
+
+/* Opera < 12.1 */
+@-o-keyframes fadeout {
+    from { opacity: 0.8; }
+    to   { opacity: 0; }
+}
diff --git a/catalog-ui/src/app/ng2/components/loader/loader.component.ts b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
new file mode 100644
index 0000000000..4d90b2853d
--- /dev/null
+++ b/catalog-ui/src/app/ng2/components/loader/loader.component.ts
@@ -0,0 +1,92 @@
+/**
+ * Created by rc2122 on 6/6/2017.
+ */
+import {Component, Input, ElementRef, Renderer, SimpleChanges} from "@angular/core";
+@Component({
+    selector: 'loader',
+    templateUrl: './loader.component.html',
+    styleUrls: ['./loader.component.less']
+})
+export class LoaderComponent {
+
+    @Input() display:boolean;
+    @Input() size:string;// small || medium || large
+    @Input() elementSelector:string; // required if is relative true
+    @Input() relative:boolean;
+
+    interval;
+
+    constructor (private el: ElementRef, private renderer: Renderer){
+    }
+
+    ngOnInit() {
+
+        if (this.elementSelector) {
+            let elemParent = angular.element(this.elementSelector);
+            let positionStyle:string = elemParent.css('position');
+            this.setStyle(positionStyle);
+        }
+
+        if (this.relative === true) {
+            let positionStyle:string = this.el.nativeElement.parentElement.style.position;
+            this.setStyle(positionStyle);
+        }
+        if (!this.size) {
+            this.size = 'large';
+        }
+    }
+
+    ngOnDestroy(){
+        clearInterval(this.interval);
+    }
+
+    calculateSizesForFixPosition = (positionStyle:string):void => {
+        // This is problematic, I do not want to change the parent position.
+        // set the loader on all the screen
+        let parentLeft = this.el.nativeElement.parentElement.offsetLeft;
+        let parentTop = this.el.nativeElement.parentElement.offsetTop;
+        let parentWidth = this.el.nativeElement.parentElement.offsetWidth;
+        let parentHeight = this.el.nativeElement.parentElement.offsetHeight;
+        this.renderer.setElementStyle(this.el.nativeElement, 'position', positionStyle);
+        this.renderer.setElementStyle(this.el.nativeElement, 'top', parentTop);
+        this.renderer.setElementStyle(this.el.nativeElement, 'left', parentLeft);
+        this.renderer.setElementStyle(this.el.nativeElement, 'width', parentWidth);
+        this.renderer.setElementStyle(this.el.nativeElement, 'height', parentHeight);
+    };
+
+    setStyle = (positionStyle:string):void => {
+
+        switch (positionStyle) {
+            case 'absolute':
+            case 'fixed':
+                // The parent size is not set yet, still loading, so need to use interval to update the size.
+                this.interval = window.setInterval(()=> {
+                    this.calculateSizesForFixPosition(positionStyle);
+                }, 2000);
+                break;
+            default:
+                // Can change the parent position to relative without causing style issues.
+                this.renderer.setElementStyle(this.el.nativeElement.parentElement,'position', 'relative');
+                break;
+        }
+    };
+
+    ngOnChanges(changes: SimpleChanges) {
+        if(changes.display){
+            this.changeLoaderDisplay(false);
+            if ( this.display ) {
+                window.setTimeout(():void => {
+                    this.changeLoaderDisplay(true);
+                }, 500);
+            } else {
+                window.setTimeout(():void => {
+                    this.changeLoaderDisplay(false);
+                }, 0);
+            }
+        }
+    }
+
+    changeLoaderDisplay = (display:boolean):void => {
+        this.renderer.setElementStyle(this.el.nativeElement, 'display', display ? 'block' : 'none');
+    }
+}