Initial OpenECOMP SDC commit

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

5 files changed, 222 insertions, 0 deletions

diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
new file mode 100644
index 0000000000..26390a7501
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab-directive.ts
@@ -0,0 +1,67 @@
+/*-
+ * ============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=========================================================
+ */
+/// <reference path="../../../references"/>
+module Sdc.Directives {
+    '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(private $templateCache:ng.ITemplateCacheService) {
+        }
+
+        scope = {
+            singleTab: "=",
+            isViewOnly: "="
+        };
+
+        replace = true;
+        restrict = 'A';
+        controller = '@';
+        template = '<div ng-include src="singleTab.templateUrl"></div>';
+
+        public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+            return new InnerSdcSingleTabDirective($templateCache);
+        };
+    }
+
+    SdcSingleTabDirective.factory.$inject = ['$compile', '$parse'];
+    InnerSdcSingleTabDirective.factory.$inject = ['$templateCache'];
+
+}
diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
new file mode 100644
index 0000000000..8b13789179
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-single-tab/sdc-single-tab.less
@@ -0,0 +1 @@
+
diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html
new file mode 100644
index 0000000000..d51d221922
--- /dev/null
+++ b/catalog-ui/app/scripts/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-if="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/app/scripts/directives/sdc-tabs/sdc-tabs-directive.ts b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive.ts
new file mode 100644
index 0000000000..91d1744ae5
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs-directive.ts
@@ -0,0 +1,69 @@
+/*-
+ * ============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=========================================================
+ */
+/**
+ * Created by obarda on 7/28/2016.
+ */
+/// <reference path="../../references"/>
+module Sdc.Directives {
+    'use strict';
+
+    export interface ISdcTabsDirectiveScope extends ng.IScope {
+        tabs:Array<Models.Tab>;
+        selectedTab: Models.Tab;
+        isActive: boolean;
+        onTabSelected(selectedTab: Models.Tab);
+    }
+
+    export class SdcTabsDirective implements ng.IDirective {
+
+        constructor(private $templateCache:ng.ITemplateCacheService) {
+        }
+
+        scope = {
+            tabs: "=",
+            selectedTab: "=?",
+            isViewOnly: "="
+        };
+
+        replace = true;
+        restrict = 'E';
+        template = ():string => {
+            return this.$templateCache.get('/app/scripts/directives/sdc-tabs/sdc-tabs-directive-view.html');
+        };
+
+        link = (scope:ISdcTabsDirectiveScope) => {
+            scope.isActive = true;
+
+            if(!scope.selectedTab){
+                scope.selectedTab = scope.tabs[0];
+            }
+
+            scope.onTabSelected = (selectedTab: Models.Tab) => {
+                scope.selectedTab = selectedTab;
+            }
+        };
+
+        public static factory = ($templateCache:ng.ITemplateCacheService)=> {
+            return new SdcTabsDirective($templateCache);
+        };
+    }
+
+    SdcTabsDirective.factory.$inject = ['$templateCache'];
+}
diff --git a/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs.less b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs.less
new file mode 100644
index 0000000000..ad390010ed
--- /dev/null
+++ b/catalog-ui/app/scripts/directives/sdc-tabs/sdc-tabs.less
@@ -0,0 +1,68 @@
+.sdc-tabs-body {
+    height: 100%;
+    width: 330px;
+    position: absolute;
+    .sdc-tabs {
+        display: inline-block;
+        width: 40px;
+        vertical-align: top;
+        position: relative;
+        z-index: 99;
+        right: 332px;
+        .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: 41px;
+    }
+
+    .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);
+        right: 331px;
+        .sdc-single-tab-content-body {
+            height: 100%;
+            display: flex;
+        }
+    }
+}