[SDC-29] catalog 1707 rebase commit.

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

3 files changed, 131 insertions, 0 deletions

diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
new file mode 100644
index 0000000000..2a2432fcea
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collaps-menu-box.ts
@@ -0,0 +1,47 @@
+'use strict';
+import {MenuItem, MenuItemGroup} from "app/utils";
+
+export interface IExpandCollapseMenuBoxDirectiveScope extends ng.IScope {
+    menuItemsGroup:MenuItemGroup;
+    menuTitle:string;
+    parentScope:ng.IScope;
+    onMenuItemClick(menuItem:MenuItem):void;
+}
+
+export class ExpandCollapseMenuBoxDirective implements ng.IDirective {
+
+    constructor() {
+    }
+
+    scope = {
+        menuTitle: '@',
+        menuItemsGroup: '=',
+        parentScope: '='
+    };
+
+    public replace = false;
+    public restrict = 'AE';
+    public transclude = true;
+
+    template = ():string => {
+        return require('./expand-collapse-menu-box.html');
+    };
+
+    link = (scope:IExpandCollapseMenuBoxDirectiveScope) => {
+        scope.onMenuItemClick = (menuItem:MenuItem):void => {
+            let onSuccess = ():void => {
+                scope.menuItemsGroup.selectedIndex = scope.menuItemsGroup.menuItems.indexOf(menuItem);
+            };
+            let onFailed = ():void => {
+            };
+            scope.parentScope[menuItem.action](menuItem.state).then(onSuccess, onFailed);
+        }
+    };
+
+    public static factory = ()=> {
+        return new ExpandCollapseMenuBoxDirective();
+    };
+
+}
+
+ExpandCollapseMenuBoxDirective.factory.$inject = [];
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
new file mode 100644
index 0000000000..f90f00f230
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.html
@@ -0,0 +1,17 @@
+<div class="expand-collapse-menu-box">
+    <expand-collapse expanded-selector=".w-sdc-designer-sidebar-section-content" class="expand-collapse-menu-box-title">
+        <div class="expand-collapse-header">
+            <div class="expand-collapse-menu-box-title-icon"></div>
+            <span class="w-sdc-designer-sidebar-section-title-text" data-ng-bind="menuTitle" tooltips tooltip-content="{{menuTitle}}"></span>
+        </div>
+    </expand-collapse>
+
+    <div class="w-sdc-designer-sidebar-section-content" >
+        <div class="i-sdc-designer-sidebar-section-content-item expand-collapse-menu-box-item second-level"
+             ng-class="{'selected': $index == menuItemsGroup.selectedIndex}" ng-repeat="(key, menuItem) in menuItemsGroup.menuItems track by $index">
+            <div class="expand-collapse-menu-box-item-text" ng-click="onMenuItemClick(menuItem)"  ng-class="{'disabled': menuItem.isDisabled }" data-tests-id="{{menuItem.text}}step" >{{menuItem.text}}</div>
+        </div>
+    </div>
+
+</div>
+
diff --git a/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
new file mode 100644
index 0000000000..13ec1c99be
--- /dev/null
+++ b/catalog-ui/src/app/directives/utils/expand-collapse-menu-box/expand-collapse-menu-box.less
@@ -0,0 +1,67 @@
+.expand-collapse-menu-box {
+    line-height: 20px;
+    //padding: 13px 0px 5px 10px;
+    background-color: @tlv_color_t;
+    //margin: 3px 3px 5px 0px;
+
+    .expand-collapse-header{
+        border-bottom: 1px solid @main_color_o;
+        height: @action_nav_height;
+        background-color:@main_color_p;
+        display:flex;
+        align-items:center;
+    }
+
+    .expand-collapse-menu-box-title {
+        .f-type._18_m;
+        color: @main_color_a;
+        //font-weight: bold;
+        .hand;
+        .w-sdc-designer-sidebar-section-title-text{
+            max-width: 185px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            display: inline-block;
+            white-space: nowrap;
+            padding: 8px 0;
+        }
+
+        &.expanded {
+            .expand-collapse-menu-box-title-icon {
+                transform: rotate(180deg);
+            }
+        }
+    }
+    .expand-collapse-menu-box-title-icon {
+        .hand;
+        .sprite-new;
+        .arrow-up;
+        margin-right: 6px;
+        transition: .3s all;
+        position: relative;
+        vertical-align: text-top;
+        margin-left: 14px;
+        vertical-align: 14px;
+    }
+    .w-sdc-designer-sidebar-section-content {
+        overflow: hidden;
+        //padding-top: 13px;
+        .expand-collapse-menu-box-item {
+            .hand;
+            padding-left: 14px;
+            //margin: 0px 0px 10px 10px;
+            font-family: @font-omnes-medium;
+            color: @main_color_m;
+
+            line-height: 18px;
+            &.selected {
+                //padding-left: 10px;
+                //font-weight: bold;
+                //border-left: 4px solid @main_color_a;
+                background-color: #009fdb;
+                color: #ffffff;
+            }
+
+        }
+    }
+}