add main module and hrml of designer component in new cds ui

Issue-ID: CCSDK-1779
Signed-off-by: Ahmed Abbas <ahmad.helmy@orange.com>
Change-Id: I144c151777d5d036b0f40780edf2c5f36c11956b

11 files changed, 983 insertions, 413 deletions

diff --git a/cds-ui/client-frankfurt/src/app/app-routing.module.ts b/cds-ui/client-frankfurt/src/app/app-routing.module.ts
index b42468b9f..e55393b03 100644
--- a/cds-ui/client-frankfurt/src/app/app-routing.module.ts
+++ b/cds-ui/client-frankfurt/src/app/app-routing.module.ts
@@ -22,6 +22,14 @@ limitations under the License.
 import {NgModule} from '@angular/core';
 import {Routes, RouterModule} from '@angular/router';
 
+const routes: Routes = [
+    {path: 'packages', loadChildren: './modules/feature-modules/packages/packages.module#PackagesModule'},
+    {
+        path: '',
+        redirectTo: 'packages',
+        pathMatch: 'full'
+    },
+];
 
 @NgModule({
     imports: [RouterModule.forRoot(routes)],
diff --git a/cds-ui/client-frankfurt/src/app/app.component.css b/cds-ui/client-frankfurt/src/app/app.component.css
index 4a4a5f153..e69de29bb 100644
--- a/cds-ui/client-frankfurt/src/app/app.component.css
+++ b/cds-ui/client-frankfurt/src/app/app.component.css
@@ -1,326 +0,0 @@
-/* Menu Styles */
-.primary-nav{
-    position: fixed;
-    z-index: 999;
-}
-.menu{
-  position: relative;
-}
-.menu ul{
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-.open-panel{
-  border: none;
-  background-color:#fff;
-  padding: 0;
-}
-  
-  .logo-icon {
-      background: #fff;
-      position: relative;
-      display: block;
-      text-align: center;
-      padding: 16px 0;
-      width: 50px;
-    height: 60px;
-      left: 0;
-    top: 0;
-      z-index: 1000;
-    cursor: pointer;
-  }
-  
-  /* .logo-icon:before {
-      content:"\2630"; 
-      display: block;
-    color: #000;
-    line-height: 32px;
-    font-size: 16px;
-  } */
-  
-  /* .openNav .logo-icon:before {
-      content:"\2715"; 
-      display: block;
-    color: #000;
-    line-height: 32px;
-    font-size: 16px;
-  }
-  
-  .logo-icon:hover:before {
-    color: #777;
-  } */
-  
-  .primary-nav .menu li {
-      position: relative;
-  }
-  
-  .menu .icon {
-      position: absolute;
-      top: 12px;
-      right: 10px;
-      pointer-events: none;
-    width: 30px;
-    height: 30px;
-    color: #fff;
-    text-align: center;
-  }
-  .menu .icon .fa{
-    vertical-align: middle;
-  }
-  .menu,
-  .menu a,
-  .menu a:visited {
-    color: #fff;
-    text-decoration: none!important;
-      position: relative;
-  }
-  
-.menu a{
-    display: block;
-    white-space: nowrap;
-    padding: 10px 1em;
-    font-size: 12px;
-    font-weight: bold;
-    height: 52px;
-line-height: 30px;
-}
-  
-  .menu a:hover {
-      color: #fff;
-  }
-  
-  /* .menu {
-      margin-bottom: 3em;
-  } */
-  
-  .menu-dropdown li .icon{
-    padding: 2px 6px;
-      color: #fff;
-      
-  }
-  
-  .menu-dropdown li.active .icon {
-      color: #fff;
-      background: #265699;
-      border-radius: 50%;
-  }
-  .menu-dropdown li:hover{
-    background: #172B4D;
-  }
-  
-  
-  .menu label {
-    margin-bottom: 0;
-    display: block;
-  }
-  
-  .menu label:hover {
-    cursor: pointer;
-  }
-  
-  .menu input[type="checkbox"] {
-    display: none;
-  }
-  
-  input#menu[type="checkbox"] {
-    display: none;
-  }
-  
-  
-  
-  
-  
-  
-  .sub-menu-dropdown {
-      display: none;
-  }
-  
-  .new-wrapper {
-      position: absolute;
-      left: 50px;
-    width: calc(100% - 50px);
-    transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
-  }
-  
-  #menu:checked + ul.menu-dropdown {
-      
-          left: 0;
-      -webkit-animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
-              animation: all .45s cubic-bezier(0.77, 0, 0.175, 1);
-  }
-  
-  .sub-menu-checkbox:checked + ul.sub-menu-dropdown {
-      display: block!important;
-      -webkit-animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
-              animation: grow .45s cubic-bezier(0.77, 0, 0.175, 1);
-  }
-  
-  
-  .openNav .new-wrapper {
-    position: absolute;
-    transform: translate3d(200px, 0, 0);
-    width: calc(100% - 250px);
-    transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
-  }
-  
-  
-  .downarrow {
-    background: transparent;
-      position: absolute;
-      right: 50px;
-      top: 12px;
-    color: #fff;
-    width: 24px;
-    height: 24px;
-    text-align: center;
-    display: block;
-  }
-  
-  .downarrow:hover {
-    color: #fff;
-  }
-  
-  .menu {
-      position: absolute;
-      display: block;
-      left: -200px;
-    top: 0;
-      width: 250px;
-      height: 100vh;
-    transition: all 0.45s cubic-bezier(0.77, 0, 0.175, 1);
-    background-color: #1B3E6F;
-      z-index: 999;
-  }
-  
-  .menu-dropdown {
-    top: 0;
-    overflow-y: auto;
-  }
-  
-  .overflow-container {
-    position: relative;
-    height: calc(100vh - 60px)!important;
-    overflow-y: auto;
-    border-top: 60px solid #fff;
-    z-index: -1;
-    display:block;
-  }
-  
-  .menu .logotype {
-    position: absolute !important;
-    top: 16px;
-    left: 55px;
-    display: block;
-  }
-
-  .sub-menu-dropdown {
-      background-color: #333;
-  }
-  
-  .menu:hover {
-      position: absolute;
-      left: 0;
-      top: 0;
-  }
-  
-  .openNav .menu:hover {
-      position: absolute;
-      left: -200px;
-      top: 60px;
-  }
-  
-  .openNav .menu {
-    top: 60px;
-          transform: translate3d(200px, 0, 0);
-      transition: transform .45s cubic-bezier(0.77, 0, 0.175, 1);
-  }
-      
-      /* label.logo-icon {
-          display: none;
-      } */
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  /* look and feel only, not needed for core menu*/
-  
-  @-webkit-keyframes grow {
-      
-    0% {
-      display: none;
-      opacity: 0;
-    }
-    50% {
-      display: block;
-      opacity: 0.5;
-    }
-    100% {
-      opacity: 1;
-    }
-      
-  }
-  
-  @keyframes grow {
-      
-    0% {
-      display: none;
-      opacity: 0;
-    }
-    50% {
-      display: block;
-      opacity: 0.5;
-    }
-    100% {
-      opacity: 1
-    }
-      
-  }
-  
-/*User Profile*/
-.userProfile .dropdown{
-  width: 100%;
-}
-.userProfile .dropdown:hover{
-  background: #172B4D;
-}
-.userProfile .dropdown-text{
-  background: transparent;
-  border: 0;
-  box-shadow: none;
-  font-size: 13px;
-  line-height: 40px;
-}
-.userProfile .dropdown-toggle{
-  height: 40px;
-}
-.userProfile .dropdown-text::after{
-  right: 14px;
-  top: 8px;
-  width: 24px;
-  height: 24px;
-  background: url(../assets/img/img-userProfile.png) center center no-repeat;
-  border: 0;
-  border-radius: 50%;
-} 
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
-  
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/app.component.html b/cds-ui/client-frankfurt/src/app/app.component.html
index b89b29573..0680b43f9 100644
--- a/cds-ui/client-frankfurt/src/app/app.component.html
+++ b/cds-ui/client-frankfurt/src/app/app.component.html
@@ -1,81 +1 @@
-<div class="primary-nav">
-  <img class="logo-icon open-panel nav-toggle" src="../assets/img/logo-icon.svg" title="CDS">
-  <nav role="navigation" class="menu">
-    <img class="logotype" src="../assets/img/logo-text.svg">
-    <div class="overflow-container">
-      <ul class="menu-dropdown">
-        <li class="active">
-          <a href="packages/list">Packages</a>
-          <span class="icon">
-            <!-- <i class="fa fa-dashboard"></i> -->
-            <img src="../assets/img/icon-nav-packages.svg">
-          </span>
-        </li>
-        <li class="menu-hasdropdown">
-          <a href="#">Data Dictionary</a>
-          <span class="icon">
-            <img src="../assets/img/icon-nav-dictionary.svg">
-          </span>
-          <label title="toggle menu" for="settings">
-            <span class="downarrow">
-              <i class="fa fa-caret-down"></i>
-            </span>
-          </label>
-          <input type="checkbox" class="sub-menu-checkbox" id="settings" />
-          <ul class="sub-menu-dropdown">
-            <li>
-              <a href="">Link</a>
-            </li>
-            <li>
-              <a href="">Link</a>
-            </li>
-            <li>
-              <a href="">Link</a>
-            </li>
-          </ul>
-        </li>
-        <!-- <li>
-          <a href="#">Favourites</a>
-          <span class="icon">
-            <i class="fa fa-heart"></i>
-          </span>
-        </li>
-        <li>
-          <a href="#">Messages</a>
-          <span class="icon">
-            <i class="fa fa-envelope"></i>
-          </span>
-        </li> -->
-      </ul>
-    </div>
-    <ul class="menu-dropdown userProfile">
-      <li>
-        <div class="dropdown">
-          <input class="dropdown-toggle" type="text">
-          <div class="dropdown-text">User name</div>
-          <ul class="dropdown-content">
-            <li>
-              <a href="#">Settings</a>
-            </li>
-            <li>
-              <a href="#">Projects</a>
-            </li>
-            <li>
-              <a href="#">Log out</a>
-            </li>
-          </ul>
-        </div>
-        <!-- <span class="icon">
-          <img src="../assets/img/img-userProfile.png">
-        </span> -->
-      </li>
-    </ul>
-
-  </nav>
-</div>
-
-<div class="new-wrapper">
-  <div class="container-fluid main-container">
-    <router-outlet></router-outlet>
-  </div>
-</div>
+<router-outlet></router-outlet>
diff --git a/cds-ui/client-frankfurt/src/app/app.component.ts b/cds-ui/client-frankfurt/src/app/app.component.ts
index 259653aaf..f60f622ce 100644
--- a/cds-ui/client-frankfurt/src/app/app.component.ts
+++ b/cds-ui/client-frankfurt/src/app/app.component.ts
@@ -24,7 +24,7 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
-  styleUrls: ['./app.component.css']
+  styleUrls: ['./app.component.css'],
 })
 
 export class AppComponent {
diff --git a/cds-ui/client-frankfurt/src/app/app.module.ts b/cds-ui/client-frankfurt/src/app/app.module.ts
index 66093b38c..c52da5cb9 100644
--- a/cds-ui/client-frankfurt/src/app/app.module.ts
+++ b/cds-ui/client-frankfurt/src/app/app.module.ts
@@ -1,3 +1,4 @@
+
 /*
 ============LICENSE_START==========================================
 ===================================================================
@@ -30,13 +31,9 @@ import {MatTabsModule} from '@angular/material/tabs';
 import {ApiService} from './common/core/services/api.service';
 import {HttpClientModule} from '@angular/common/http';
 
-
-
 @NgModule({
     declarations: [
         AppComponent,
-
-
     ],
     imports: [
         BrowserModule,
@@ -45,8 +42,9 @@ import {HttpClientModule} from '@angular/common/http';
         AppRoutingModule,
         NoopAnimationsModule,
         MatTabsModule,
-        HttpClientModule
+        HttpClientModule,
     ],
+
     providers: [ApiService],
     bootstrap: [AppComponent]
 })
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
new file mode 100644
index 000000000..d41bf5222
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.css
@@ -0,0 +1,545 @@
+
+body{
+  background-image: linear-gradient(-45deg, #000 6%, #fff 0) !important;
+  background-size: 6px 6px !important;  
+}
+
+
+/*Header*/
+header{
+  height: 60px;
+  background-color: #1B3E6F;
+  box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
+}
+.logo{
+  float: left;
+  width: 50px;
+  height: 60px;
+  background: url(/assets/img/logo-icon.svg) center center #fff no-repeat;
+}
+
+/**Bread Crumb**/
+.breadcrumb{
+  padding: 9px 20px;
+  background: transparent;
+  line-height: 40px;
+}
+.breadcrumb a,
+.breadcrumb a:hover{
+  color: #fff;
+}
+.breadcrumb .breadcrumb-item{
+  font-size: 12px;
+  font-weight: bold;
+}
+.breadcrumb .breadcrumb-item:first-child{
+  font-size: 16px;
+}
+.breadcrumb-item + .breadcrumb-item::before{
+  color: #fff;
+}
+.breadcrumb .breadcrumb-item.active p{
+  display: inline;
+  padding: 4px 10px;
+  background: #F4F9FE;
+  border-radius: 10px;
+  color: #C3CDDB;
+  font-size: 10px;
+}
+.sidebar-container{
+  height: calc(100vh - 60px) !important;
+}
+/**Topology Actions**/
+.topology-actions{
+  margin: 0;
+  height: 60px;
+}
+.topology-actions > li{
+  height: 59px;
+  display: inline-block;
+  padding: 0 20px;
+}
+.topology-actions > li:first-child{
+  border-right: solid 1px #16396A;
+}
+.topology-actions .btn-group{
+  margin-top: 11px;
+}
+.btn-topology-action,
+.btn-topology-action:hover{
+  margin: 0 6px;
+  padding: 6px 10px;
+  color: #fff;
+  border-radius: 50%;
+  border: solid .5px #fff;
+}
+.btn-topology-action:last-child{
+  margin-right: 0;
+}
+.btn-topology-action .fa{
+  width: 16px;
+  height: 16px;
+  text-align: center;
+}
+.topology-actions .dropdown-text,
+.dropdown-toggle:hover ~ .dropdown-text, 
+.dropdown-toggle:focus ~ .dropdown-text{
+  top: 7px;
+  text-indent: 15px;
+  background: #1273EB;
+  border-radius: 15px;
+  border: 0;
+  box-shadow: none;
+  color: #fff;
+  font-weight: bold;
+  font-size: 13px;
+}
+.topology-actions .dropdown-text::after{
+  right: 15px;
+  top: 13px;
+  border-width: 6px 6px 0 6px;
+  border-color: #fff transparent transparent transparent;
+}
+.topology-actions .dropdown-toggle:focus ~ .dropdown-text::after{
+  top: 13px;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent #fff transparent
+}
+.topology-actions .dropdown-content:hover, 
+.topology-actions .dropdown-toggle:focus ~ .dropdown-content{
+  padding: 12px 0;
+  text-indent: 0;
+  background: #fff;
+  border: 0;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .15)
+}
+.topology-actions .dropdown-content a{
+  padding: 0 20px;
+  color: #1B3E6F;
+  font-size: 13px;
+}
+.topology-actions .dropdown-content a:hover{
+  background: #F4F9FE;
+  text-decoration: none;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+/*Rotated Text*/
+button.rotate{
+  position: absolute;
+  margin-top: 1px;
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.rotate{
+  vertical-align: bottom;
+  /* text-align: center; */
+}
+.rotate span{
+  display: inline-table !important;
+  -ms-writing-mode: tb-rl;
+  -webkit-writing-mode: vertical-rl;
+  writing-mode: vertical-rl !important;
+  transform: rotate(180deg);
+  white-space: nowrap;
+  background: #1B3E6F; 
+  padding: 15px 12px;
+  font-weight: bold;
+  font-size: 12px;
+  color:#fff;
+  /* border-bottom-left-radius: 2px; */
+  border-top-left-radius: 2px;
+}
+.rotate i{
+  margin-right: 3px;
+  margin-top: 9px;
+  font-size: 15px;
+}
+.rotate span:first-child{
+  margin-bottom: 0;
+}
+.rotate a:hover{
+  text-decoration: none;
+}
+
+/*ACTIONS & COMPONENTS MENU*/
+.input-search-controller{
+  height: 50px;
+  padding-left: 30px;
+  background: url(/assets/img/icon-search-light.svg) #fff 10px center no-repeat;
+  border-radius: 0;
+  border: 0;
+  border-bottom: solid 1px #D7E7F9;
+  color: #1B3E6F;
+  font-size: 13px;
+}
+.input-search-controller::placeholder{
+  color: #D0D7E4;
+  font-size: 11px;
+}
+.input-search-controller:focus{
+  
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, .15);
+  border-color: #DEE8F3;
+}
+.actions-scroll{
+  max-height: 160px;
+  overflow-y: auto;
+  margin-top: 12px;
+  margin-bottom: 20px;
+}
+.componentsList p{
+  margin-bottom: 0;
+  padding-left: 30px;
+  background-position: left center;
+  background-repeat: no-repeat;
+}
+p.compType-1{
+  background-image: url(/assets/img/icon-comType1-sm.svg);
+}
+p.compType-2{
+  background-image: url(/assets/img/icon-comType2-sm.svg);
+}
+p.compType-3{
+  background-image: url(/assets/img/icon-comType3-sm.svg);
+}
+p.compType-4{
+  background-image: url(/assets/img/icon-comType4-sm.svg);
+}
+/*Actions Wrapper*/
+.actions-wrapper{
+  position: absolute;
+  width: 100%;
+  top: 0;
+}
+.actions-container{
+  width: 92%;
+  margin: 0 auto;
+  background: red;
+}
+
+.controllerSidebar{
+  width: 320px;
+  background: #F4F9FE;
+  border: solid 1px #C1CDDD;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .10);
+}
+.controllerSidebar h1{
+  margin-bottom: 15px;
+  padding: 12px 0 12px 12px;
+  background: #fff;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #C3CDDB;
+}
+.controllerSidebar b{
+  font-size: 12px;
+  color: #C3CDDB;
+}
+.actionBtns .btn{
+  margin: 0 15px 12px;
+  padding: 9px 20px;
+  border-radius: 2px !important;
+  font-size: 12px;
+  font-weight: bold;
+}
+.actionBtns .btn:first-child{
+  background: #1B3E6F;
+  border: solid 1px #1B3E6F;
+  color: #fff;
+}
+.actionBtns .btn:last-child{
+  padding-left: 34px;
+  background: url(src/assets/img/icon-import-blue.svg) 12px center #fff no-repeat;
+  border: solid 1px #D0DFF1;
+  color: #1B3E6F;
+}
+.actionsList,
+.componentsList{
+  padding: 0 12px 20px;
+}
+.componentsList{
+  padding-bottom: 0;
+}
+.actionsList .custom-checkbox,
+.componentsList .list-group-item{
+  margin-bottom: 10px;
+  padding-left: 40px;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
+  border-radius: 2px;
+}
+.actionsList .custom-control-label{
+  width: 100%;
+  padding: 6px;
+  vertical-align: unset;
+  color: #1B3E6F;
+  font-size: 14px;
+  line-height: 20px;
+  border-top-right-radius: 2px;
+  border-bottom-right-radius: 2px;
+}
+.actionsList .custom-control-label::before,
+.actionsList .custom-control-label::after{
+  top: 1.25rem;
+}
+.actionsList .custom-control-label p{
+  color: #C7D0DD;
+  font-size: 12px;
+}
+.custom-control-input:checked ~ .custom-control-label{
+  background-color: #1B3E6F !important;
+  color: #fff;
+}
+.inserActionBtns .btn{
+  border-radius: 15px !important;
+  padding: 6px 20px;
+  font-size: 12px;
+  font-weight: bold;
+  border: 0;
+
+}
+.inserActionBtns .btn:first-child{
+  background: #1273EB;
+  border: solid 1px #1273EB;
+  color: #fff;
+}
+.inserActionBtns .btn:last-child{
+  background: #fff;
+  border: solid 1px #D9E6F2;
+  color: #C3CDDB;
+}
+/*Components List*/
+.componentsList .list-group-item{
+  padding-left: 36px;
+  border: 0;
+  font-size: 14px;
+  background: url(/assets/img/icon-drag.svg) #fff 20px center no-repeat;
+}
+ 
+/*CANVAS*/
+.editBar{
+  width: 350px;
+  margin: 0 auto 0;
+  padding: 6px 10px;
+  background:#F4F9FE;
+  border: solid 1px #E8EFF8;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+}
+.editBar .btn-group{
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
+}
+.editBar .btn{
+  background-color: #fff;
+  background-repeat: no-repeat;
+  background-position: left center;
+  border: 0;
+  color: #1B3E6F;
+  font-size: 10px;
+}
+.editBar .btn.active{
+  background-color: #1B3E6F !important;
+  color: #fff;
+}
+.viewBtns .btn{
+  background-position: 10px center;
+  padding-left: 30px;
+}
+.viewBtns .topologySource{
+  background-image: url(/assets/img/icon-topologyView-active.svg);
+}
+.viewBtns .topologyView{
+  background-image: url(/assets/img/icon-topologySource.svg);
+}
+.card.actionContainer{
+  margin: 20px 20px 40px 60px;
+  background: transparent;
+  border: 0;
+}
+.actionContainer .card-header{
+  padding: 0;
+  background: transparent;
+  border: 0;
+}
+.actionContainer .card-header span{
+  padding: 12px 20px;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  font-size: 12px;
+  line-height: 38px;
+  font-weight: bold;
+  color: #1B3E6F;
+  background: #C3CDDB;
+}
+.actionContainer .card-body{
+  padding: 15px 20px !important;
+  border: solid 1px #C3CDDB;
+  background: #fff;
+  box-shadow: 0 2px 6px rgba(18, 115, 235, .1);
+}
+.actionContainer a{
+  display: inline-block;
+  width: 230px;
+  height: 130px;
+  margin: 20px;
+  padding: 24px;
+  background: #1B3E6F;
+  color: #fff !important;
+  text-align: center;
+  border-radius: 2px;
+  border: solid 1px #1B3E6F;
+}
+.actionContainer a:hover{
+  cursor: pointer;
+  border: dashed 1px #E9FCC6;
+}.componentContainer img{
+  height: 38px;
+}
+.componentContainer h2{
+  margin-top: 9px;
+  font-size: 14px;
+  font-weight: bold;
+}
+.componentContainer p{
+  font-size: 12px;
+}
+
+/*ATTRIBUTES SIDE BAR*/
+.attributesSideBar{
+  width: 396px;
+  padding: 0;
+}
+.attributesSideBar .attributesContainer{
+  background: #fff;
+  border: solid 1px #C1CDDD;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+}
+.closeBar{
+  float: right;
+  width: 90%;
+  height: 40px;
+  background: url(/assets/img/icon-close.svg) center center #DCE8F4 no-repeat ;
+  border: 0;
+  outline: 0;
+}
+.closeBar:focus{
+  outline: none;
+}
+.attributesContainer h1{
+  margin-bottom: 10px;
+  padding: 12px 0 12px 15px;
+  background: #DEE8F3;
+  font-size: 12px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: #1B3E6F;
+}
+.actionName{
+  margin-bottom: 21px;
+}
+.attributesContainer label{
+  color: #1B3E6F;
+  text-transform: uppercase;
+  font-size: 11px;
+  font-weight: bold;
+}
+.attributesContainer .form-group{
+  margin-bottom: 9px;
+}
+.attributesContainer .form-control{
+  border-color: #F0F5FC;
+  border-radius: 2px;
+  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
+  color: #103D73;
+  font-size: 13px;
+}
+.attributesContainer .form-control:focus{
+  border-color: #66bfff;
+  box-shadow: 0 0 0 4px rgba(0,149,255,0.15);
+}
+.attributesContainer .form-control::placeholder{
+  color: #CFD7E5;
+}
+.scrolll{
+  max-height: 88.75vh;
+  overflow-y: auto;
+}
+.accordion > .card{
+  margin-bottom: 0 !important;
+  border: 0;
+}
+.accordion > .card .card-header{
+  margin: 0;
+  padding: 0;
+  background-color: #F4F9FE;
+  border: 0;
+  border-radius: 0;
+}
+.accordion > .card .card-body{
+  padding-bottom: 10px !important; 
+}
+.accordion .btn-link{
+  padding: 0;
+  color: #C3CDDB;
+  font-weight: bold;
+  font-size: 13px;
+  text-transform: uppercase;
+  line-height: 38px;
+}
+.accordion .btn-link:hover{
+  color: #103D73;
+  text-decoration: unset;
+}
+.accordion .card-header .btn-link[aria-expanded="true"]:after,
+.accordion .card-header .btn-link[aria-expanded="false"]:after{
+  margin-right: 9px;
+  font-family: 'FontAwesome';
+  float: left;
+  font-weight: normal;
+  font-size: 12px;
+}
+.accordion .card-header .btn-link[aria-expanded="true"]:after{
+  content: "\f078";    
+}
+.accordion .card-header .btn-link[aria-expanded="false"]:after{    
+  content: "\f054";    
+}
+.btn-addAttribute{
+  width: 20px;
+  height: 20px;
+  background-image: url(/assets/img/icon-add.svg);
+  background-position: center center;
+  background-repeat: no-repeat; 
+  vertical-align: sub;
+}
+.btn-addAttribute:hover{
+  background-image: url(/assets/img/icon-add-hover.svg);
+}
+.btn-deleteAttribute{
+  padding: 5px 10px;
+  background: #FFE6E7;
+  border: solid .5px #FFC9CB;
+  border-radius: 2px;
+  color: #FF6469;
+  font-size: 10px;
+
+}
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html
new file mode 100644
index 000000000..0d55439dd
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.html
@@ -0,0 +1,337 @@
+<!--Header-->
+<header>
+  <div class="row m-0">
+    <div class="col pl-0">
+      <p class="logo mb-0"></p>
+      <nav aria-label="breadcrumb">
+        <ol class="breadcrumb mb-0">
+          <li class="breadcrumb-item">
+            <a href="#">CBA Packages</a>
+          </li>
+          <li class="breadcrumb-item">
+            <a href="#">Package Name</a>
+          </li>
+          <li class="breadcrumb-item active" aria-current="page">
+            <p class="mb-0">Topology View</p>
+          </li>
+        </ol>
+      </nav>
+    </div>
+    <div class="col pr-0 text-right">
+      <ul class="topology-actions">
+        <li>
+          <div class="btn-group" role="group" aria-label="Basic example">
+            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Preview">
+              <i class="fa fa-eye"></i>
+            </a>
+            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Download">
+              <i class="fa fa-download"></i>
+            </a>
+            <a href="#" role="button" aria-pressed="true" class="btn-topology-action float tooltip-bottom" data-tooltip="Share">
+              <i class="fa fa-share-square"></i>
+            </a>
+          </div>
+        </li>
+        <li>
+          <div class="dropdown">
+            <input class="dropdown-toggle" type="text">
+            <div class="dropdown-text">Save</div>
+            <ul class="dropdown-content">
+              <li>
+                <a href="">Save</a>
+              </li>
+              <li>
+                <a href="">Save &amp; Deploy</a>
+              </li>
+            </ul>
+          </div>
+        </li>
+      </ul>
+
+
+    </div>
+  </div>
+</header>
+<ng-sidebar-container class="sidebar-container">
+  <!-- Controller SideBar -->
+  <ng-sidebar [(opened)]="controllerSideBar" [sidebarClass]="'demo-sidebar controllerSidebar container-fluid'" [mode]="'push'"
+    #sidebarLeft>
+    <div class="row">
+      <div class="col-12 p-0">
+        <form>
+          <input type="text" class="form-control input-search-controller" placeholder="Search actions and functions">
+        </form>
+      </div>
+      <h1 class="col-12">Actions</h1>
+      <div class="col-12 text-center p-0">
+        <div class="btn-group actionBtns" role="group">
+          <button type="button" class="btn">Insert Custom</button>
+          <button type="button" class="btn">Import Action</button>
+        </div>
+      </div>
+      <div class="col-12 actionsList">
+        <b>Select from other packages:</b>
+        <div class="actions-scroll">
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck1">
+            <label class="custom-control-label" for="customCheck1">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck2">
+            <label class="custom-control-label" for="customCheck2">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck3">
+            <label class="custom-control-label" for="customCheck3">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+          <div class="custom-control custom-checkbox">
+            <input type="checkbox" class="custom-control-input" id="customCheck4">
+            <label class="custom-control-label" for="customCheck4">Action name
+              <p class="m-0">Toplogy name</p>
+            </label>
+          </div>
+        </div>
+        <div class="btn-group inserActionBtns" role="group" aria-label="Basic example">
+          <button type="button" class="btn btn-secondary mr-3">Insert</button>
+          <button type="button" class="btn btn-secondary">Cancel</button>
+        </div>
+      </div>
+      <h1 class="col-12">Functions</h1>
+      <div class="col-12 componentsList">
+        <b>Drag and drop function to Action’s box</b>
+        <ul class="list-group actions-scroll">
+          <li class="list-group-item">
+            <p class="compType-1">component-resource-resolution</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-2">component-netconf-executor</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-3">component-remote-ansible-executor</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-4">dg-generic</p>
+          </li>
+          <li class="list-group-item">
+            <p class="compType-1">component-resource-resolution</p>
+          </li>
+        </ul>
+      </div>
+    </div>
+  </ng-sidebar>
+  <!-- Page content -->
+  <div ng-sidebar-content>
+    <button class="rotate" (click)="_toggleSidebar1()">
+      <span>
+        Controller
+        <i class="fa fa-angle-double-left"></i>
+      </span>
+    </button>
+    <!-- Canvas -->
+    <div class="editBar text-center">
+      <div class="btn-group mr-2" role="group" aria-label="First group">
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Undo">
+          <img src="/assets/img/icon-undoActive.svg">
+        </button>
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Redo">
+          <img src="/assets/img/icon-redo.svg">
+        </button>
+      </div>
+      <div class="btn-group mr-2" role="group" aria-label="Second group">
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom Out">
+          <img src="/assets/img/icon-zoomOut.svg">
+        </button>
+        <button type="button" class="btn btn-secondary pl-0 pr-0">100%</button>
+        <button type="button" class="btn btn-secondary tooltip-bottom" data-tooltip="Zoom In">
+          <img src="/assets/img/icon-zoomIn.svg">
+        </button>
+      </div>
+      <div class="btn-group viewBtns" role="group" aria-label="Third group">
+        <button type="button" class="btn btn-secondary topologySource active">View</button>
+        <button type="button" class="btn btn-secondary topologyView">Source</button>
+      </div>
+    </div>
+    <div class="card actionContainer">
+      <div class="card-header">
+        <span>Action 1</span>
+      </div>
+      <div class="card-body">
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType1.svg" title="">
+          <h2>config-assign</h2>
+          <p>component-resource-resolution</p>
+        </a>
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType2.svg" title="">
+          <h2>execute</h2>
+          <p>component-netconf-executor</p>
+        </a>
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType3.svg" title="">
+          <h2>function 1</h2>
+          <p>dg-generic</p>
+        </a>
+        <a (click)="sidebarRight.open()" class="componentContainer text-center">
+          <img src="/assets/img/icon-comType2.svg" title="">
+          <h2>execute</h2>
+          <p>component-netconf-executor</p>
+        </a>
+      </div>
+    </div>
+    <!-- <button (click)="_toggleSidebar2()" style="float:right;">Toggle sidebar right</button> -->
+  </div>
+  <!-- Attribute SideBar -->
+  <ng-sidebar [(opened)]="attributesSideBar" [sidebarClass]="'demo-sidebar attributesSideBar '" [mode]="'push'" [position]="'right'"
+    #sidebarRight>
+    <div class="container-fluid0">
+      <div class="row m-0">
+        <div class="col-2 pr-0">
+          <button (click)="sidebarRight.close()" class="closeBar"></button>
+        </div>
+        <div class="col-10 attributesContainer p-0">
+          <h1>Action Attributes</h1>
+          <div class="scrolll">
+            <div class="row m-0">
+              <div class="col-12">
+                <div class="form-group actionName">
+                  <label for="exampleInputEmail1">Action Name</label>
+                  <input type="text" class="form-control" placeholder="Action 1">
+                </div>
+              </div>
+            </div>
+            <div class="accordion" id="accordionExample">
+              <div class="card">
+                <div class="card-header row" id="headingOne">
+                  <h2 class="col-10 mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+                      Steps
+                    </button>
+                  </h2>
+                  <div class="col-2 p-0 text-center">
+                    <button class="btn btn-addAttribute" type="button"></button>
+                  </div>
+                </div>
+
+                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-9">
+                        <label for="exampleInputEmail1">Name</label> &nbsp;
+                        <button type="button" class="btn p-0">
+                          <img src="/assets/img/icon-edit.svg">
+                        </button>
+                      </div>
+                      <div class="col-3">
+                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleFormControlTextarea1">Description</label>
+                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Target</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-header row" id="headingTwo">
+                  <h2 class="col-10 mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="true" aria-controls="collapseTwo">
+                      Inputs
+                    </button>
+                  </h2>
+                  <div class="col-2 p-0 text-center">
+                    <button class="btn btn-addAttribute" type="button"></button>
+                  </div>
+                </div>
+                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo" data-parent="#accordionExample">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-9">
+                        <label for="exampleInputEmail1">Name</label> &nbsp;
+                        <button type="button" class="btn p-0">
+                          <img src="/assets/img/icon-edit.svg">
+                        </button>
+                      </div>
+                      <div class="col-3">
+                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleFormControlTextarea1">Description</label>
+                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Target</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+              <div class="card">
+                <div class="card-header row" id="headingThree">
+                  <h2 class="col-10 mb-0">
+                    <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="true" aria-controls="collapseThree">
+                      Outputs
+                    </button>
+                  </h2>
+                  <div class="col-2 p-0 text-center">
+                    <button class="btn btn-addAttribute" type="button"></button>
+                  </div>
+                </div>
+                <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#accordionExample">
+                  <div class="card-body">
+                    <div class="row">
+                      <div class="col-9">
+                        <label for="exampleInputEmail1">Name</label> &nbsp;
+                        <button type="button" class="btn p-0">
+                          <img src="/assets/img/icon-edit.svg">
+                        </button>
+                      </div>
+                      <div class="col-3">
+                        <button type="button" class="btn btn-deleteAttribute">Delete</button>
+                      </div>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Name</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleFormControlTextarea1">Description</label>
+                      <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
+                    </div>
+                    <div class="form-group">
+                      <label for="exampleInputEmail1">Target</label>
+                      <input type="text" class="form-control" placeholder="Action 1">
+                    </div>
+
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </ng-sidebar>
+
+</ng-sidebar-container>
\ No newline at end of file
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts
new file mode 100644
index 000000000..3b767cb81
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { DesignerComponent } from './designer.component';
+
+describe('DesignerComponent', () => {
+  let component: DesignerComponent;
+  let fixture: ComponentFixture<DesignerComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ DesignerComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(DesignerComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts
new file mode 100644
index 000000000..2d3557cb1
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/designer/designer.component.ts
@@ -0,0 +1,27 @@
+import { Component, OnInit, ViewEncapsulation } from '@angular/core';
+
+@Component({
+  selector: 'app-designer',
+  templateUrl: './designer.component.html',
+  styleUrls: ['./designer.component.css'],
+  encapsulation: ViewEncapsulation.None
+})
+export class DesignerComponent implements OnInit {
+
+  private controllerSideBar: boolean;
+  private attributesSideBar: boolean;
+  constructor() {
+    this.controllerSideBar = true;
+    this.attributesSideBar = false;
+  }
+  private _toggleSidebar1() {
+    this.controllerSideBar = !this.controllerSideBar;
+  }
+  private _toggleSidebar2() {
+    this.attributesSideBar = !this.attributesSideBar;
+  }
+
+
+  ngOnInit() {
+  }
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
new file mode 100644
index 000000000..63b84ebb8
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.module.ts
@@ -0,0 +1,21 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {PackagesRoutingModule} from './packages.routing.module';
+import {NgbPaginationModule} from '@ng-bootstrap/ng-bootstrap';
+import { DesignerComponent } from './designer/designer.component';
+import { SidebarModule } from 'ng-sidebar';
+
+
+@NgModule({
+    declarations: [DesignerComponent],
+    imports: [
+        CommonModule,
+        PackagesRoutingModule,
+        NgbPaginationModule,
+        SidebarModule.forRoot(),
+    ],
+    providers: [],
+    bootstrap: []
+})
+export class PackagesModule {
+}
diff --git a/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
new file mode 100644
index 000000000..dc4856806
--- /dev/null
+++ b/cds-ui/client-frankfurt/src/app/modules/feature-modules/packages/packages.routing.module.ts
@@ -0,0 +1,15 @@
+import {NgModule} from '@angular/core';
+import {Routes, RouterModule} from '@angular/router';
+import { DesignerComponent } from './designer/designer.component';
+
+
+const routes: Routes = [
+    { path: 'designer', component: DesignerComponent },
+];
+
+@NgModule({
+    imports: [RouterModule.forChild(routes)],
+    exports: [RouterModule]
+})
+export class PackagesRoutingModule {
+}