[SDC-29] catalog 1707 rebase commit.

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

5 files changed, 179 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
new file mode 100644
index 0000000000..a41d9c59e4
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
@@ -0,0 +1,46 @@
+'use strict';
+
+export class SdcSingleTabDirective implements ng.IDirective {
+
+    constructor(private $compile:ng.ICompileService, private $parse:ng.IParseService) {
+    }
+
+    restrict = 'E';
+
+    link = (scope, elem:any, attrs:any, ctrl:any) => {
+        if (!elem.attr('inner-sdc-single-tab')) {
+            let name = this.$parse(elem.attr('ctrl'))(scope);
+            elem = elem.removeAttr('ctrl');
+            elem.attr('inner-sdc-single-tab', name);
+            this.$compile(elem)(scope);
+        }
+    };
+
+    public static factory = ($compile:ng.ICompileService, $parse:ng.IParseService)=> {
+        return new SdcSingleTabDirective($compile, $parse);
+    };
+}
+
+export class InnerSdcSingleTabDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        singleTab: "=",
+        isViewOnly: "="
+    };
+
+    replace = true;
+    restrict = 'A';
+    controller = '@';
+    template = '<div ng-include src="singleTab.templateUrl"></div>';
+
+    public static factory = ()=> {
+        return new InnerSdcSingleTabDirective();
+    };
+}
+
+SdcSingleTabDirective.factory.$inject = ['$compile', '$parse'];
+InnerSdcSingleTabDirective.factory.$inject = [];
+
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
@@ -0,0 +1 @@
+
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html
new file mode 100644
index 0000000000..4dc71b8780
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive-view.html
@@ -0,0 +1,17 @@
+<div class="sdc-tabs-body">
+    <div class="sdc-tabs" ng-class="{'not-active': !isActive}">
+        <div class="sdc-tab-arrow" ng-click="isActive = !isActive">
+            <span class="sprite-new close-open-left-arrow" ng-class="{'close-open-right-arrow': !isActive}"></span>
+        </div>
+        <div ng-repeat="tab in tabs track by $index">
+            <div class="sdc-tab" ng-click="onTabSelected(tab)" data-tests-id="{{tab.name}}-tab" ng-mouseenter="hover = true"
+                 ng-mouseleave="hover = false"
+                 ng-class="{'last-tab':$last, 'first-tab': $first, 'selected' :tab.name === selectedTab.name }">
+                <div class="sdc-tab-icon sprite-new {{tab.icon}}"  ng-class="{'selected' :tab.name === selectedTab.name, 'hover': hover}"></div>
+            </div>
+        </div>
+    </div>
+    <div class="sdc-single-tab-content" ng-show="isActive">
+        <sdc-single-tab class="sdc-single-tab-content-body" ng-if="selectedTab" ctrl="selectedTab.controller" data-dests-id="selected-tab" single-tab="selectedTab" is-view-only="isViewOnly"></sdc-single-tab>
+    </div>
+</div>
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts
new file mode 100644
index 0000000000..1567bfba53
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs-directive.ts
@@ -0,0 +1,48 @@
+/**
+ * Created by obarda on 7/28/2016.
+ */
+'use strict';
+import {Tab} from "app/models";
+
+export interface ISdcTabsDirectiveScope extends ng.IScope {
+    tabs:Array<Tab>;
+    selectedTab:Tab;
+    isActive:boolean;
+    onTabSelected(selectedTab:Tab);
+}
+
+export class SdcTabsDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        tabs: "=",
+        selectedTab: "=?",
+        isViewOnly: "="
+    };
+
+    replace = true;
+    restrict = 'E';
+    template = ():string => {
+        return require('./sdc-tabs-directive-view.html');
+    };
+
+    link = (scope:ISdcTabsDirectiveScope) => {
+        scope.isActive = true;
+
+        if (!scope.selectedTab) {
+            scope.selectedTab = scope.tabs[0];
+        }
+
+        scope.onTabSelected = (selectedTab:Tab) => {
+            scope.selectedTab = selectedTab;
+        }
+    };
+
+    public static factory = ()=> {
+        return new SdcTabsDirective();
+    };
+}
+
+SdcTabsDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less
new file mode 100644
index 0000000000..15b6fe9e1d
--- /dev/null
+++ b/catalog-ui/src/app/directives/sdc-tabs/sdc-tabs.less
@@ -0,0 +1,67 @@
+.sdc-tabs-body {
+    height: 100%;
+    width: 330px;
+    .sdc-tabs {
+        display: inline-block;
+        width: 40px;
+        vertical-align: top;
+        position: relative;
+        z-index: 99;
+
+        .sdc-tab-arrow {
+            cursor: pointer;
+            width: 40px;
+            height: 20px;
+            background-color: @tlv_color_u;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17);
+            text-align: center;
+            padding: 1px 4px 0px 0px;
+
+            &:hover {
+                background-color: @main_color_o;
+            }
+
+        }
+        .sdc-tab {
+            cursor: pointer;
+            width: 40px;
+            height: 43px;
+            background-color: @tlv_color_u;
+            box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.17);
+            text-align: center;
+
+            .sdc-tab-icon {
+                margin-top: 12px;
+            }
+        }
+        .selected {
+            background-color: @tlv_color_t;
+        }
+
+        .last-tab {
+            border-bottom-left-radius: 12px;
+        }
+    }
+
+    .not-active {
+        position: absolute;
+        right: 0px;
+    }
+
+    .sdc-single-tab-content {
+        padding: 15px 0px 0px 0px;
+        width: 290px;
+        background-color: @tlv_color_t;
+        height: 100%;
+        display: inline-block;
+        bottom: 0;
+        top: 0;
+        position: absolute;
+        box-shadow: 0.3px 1px 3px rgba(24, 24, 25, 0.42);
+
+        .sdc-single-tab-content-body {
+            height: 100%;
+            display: flex;
+        }
+    }
+}