add design for template and mapping

Issue-ID: CCSDK-2035
Signed-off-by: shady <snaguib.ext@orange.com>
Change-Id: I60d1fd623c84e98d0b762a0b5df0e375a7c75031

12 files changed, 428 insertions, 87 deletions

diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
index dc363b28a..776533845 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/package-creation.component.html
@@ -167,7 +167,7 @@
                                  aria-labelledby="nav-authentication-tab">...
                             </div>
                             <div class="tab-pane fade" id="nav-template" role="tabpanel"
-                                 aria-labelledby="nav-template-tab">...
+                                 aria-labelledby="nav-template-tab"><app-template-mapping></app-template-mapping>
                             </div>
                             <div class="tab-pane fade" id="nav-scripts" role="tabpanel"
                                  aria-labelledby="nav-scripts-tab">...
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.css b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.css
new file mode 100644
index 000000000..e69de29bb
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.css
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
new file mode 100644
index 000000000..c21bae3af
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
@@ -0,0 +1,100 @@
+<h6 class="create-title">CREATE</h6>
+<div class="card creat-card">
+    <div class="single-line">
+        <label class="label-name">Name</label>
+        <div class="label-input">
+            <input type="input" (input)="searchPackages($event)" [(ngModel)]="metaDataTab.name"
+                placeholder="Topology name.vLB.CDS">
+        </div>
+    </div>
+    <hr />
+    <div class="single-line">
+        <label class="label-name">Management Type</label>
+        <div class="label-input">
+            <div class="row">
+                <div class="col-md-4 d-flex">
+                    <a class="select-type active" href="#">
+                        <div class="select-type-icon"><span class="icon-template-mapping"></span></div>
+                        <div>Template And Support Mapping</div>
+                    </a>
+                </div>
+                <div class="col-md-4 d-flex">
+                    <a class="select-type" href="#">
+                        <div class="select-type-icon"><span class="icon-template"></span></div>
+                        <div>Template Only</div>
+                    </a>
+                </div>
+                <div class="col-md-4 d-flex">
+                    <a class="select-type" href="#">
+                        <div class="select-type-icon"><span class="icon-mapping"></span></div>
+                        <div>Mapping Only</div>
+                    </a>
+
+                </div>
+            </div>
+
+        </div>
+    </div>
+    <hr />
+    <div class="single-line">
+        <label class="label-name">Type</label>
+        <div class="label-input">
+            <label name="trst">
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>                                       
+
+                <span>
+                    Velcoity
+                    </span>
+            </label>
+            <label name="trst">
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>                                       
+
+                <span>
+                    Jinja
+                    </span>
+            </label>
+            <label name="trst">
+                <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value=Velcoity>                                       
+
+                <span>
+                    Kotlin
+                    </span>
+            </label>
+        </div>
+    </div>
+</div>
+
+<div class="template-mapping-accordion">
+<div id="accordion">
+    <div class="card">
+      <div class="card-header" id="headingOne">
+        <h5 class="mb-0 d-flex justify-content-between">
+          <button class="btn btn-link" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
+            1. Create Template
+          </button>
+          
+        </h5>
+      </div>
+  
+      <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
+        <div class="card-body">
+          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+        </div>
+      </div>
+    </div>
+    <div class="card">
+      <div class="card-header" id="headingTwo">
+        <h5 class="mb-0">
+          <button class="btn btn-link collapsed" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
+            2. Manage Mapping
+          </button>
+        </h5>
+      </div>
+      <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
+        <div class="card-body">
+          Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.spec.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.spec.ts
new file mode 100644
index 000000000..dc31bae85
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TemplateMappingComponent } from './template-mapping.component';
+
+describe('TemplateMappingComponent', () => {
+  let component: TemplateMappingComponent;
+  let fixture: ComponentFixture<TemplateMappingComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ TemplateMappingComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(TemplateMappingComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
new file mode 100644
index 000000000..6615a2d2c
--- /dev/null
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-template-mapping',
+  templateUrl: './template-mapping.component.html',
+  styleUrls: ['./template-mapping.component.css']
+})
+export class TemplateMappingComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
index 3bd2019ad..a83f6eca3 100644
--- a/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
+++ b/cds-ui/designer-client/src/app/modules/feature-modules/packages/packages.module.ts
@@ -20,6 +20,7 @@ import {PackageCreationComponent} from './package-creation/package-creation.comp
 import {FormsModule} from '@angular/forms';
 import { ImportsTabComponent } from './package-creation/imports-tab/imports-tab.component';
 import { NgxFileDropModule } from 'ngx-file-drop';
+import { TemplateMappingComponent } from './package-creation/template-mapping/template-mapping.component';
 
 @NgModule({
     declarations: [PackagesDashboardComponent,
@@ -35,6 +36,7 @@ import { NgxFileDropModule } from 'ngx-file-drop';
         ActionsComponent,
         PackageCreationComponent,
         ImportsTabComponent,
+        TemplateMappingComponent,
     ],
     imports: [
         CommonModule,
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
index 0022fbff6..b04c6c41e 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
index f30402d39..22693eb7a 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
@@ -14,4 +14,8 @@
 <glyph unicode="&#xe904;" glyph-name="archive" d="M945.238 644.924h-866.463c-10.674 0-19.905-3.895-27.697-11.691-7.796-7.792-11.691-17.024-11.691-27.691v-590.772c0-10.665 3.895-19.901 11.691-27.691 7.792-7.796 17.024-11.7 27.697-11.7h866.463c10.667 0 19.893 3.904 27.691 11.7 7.79 7.788 11.685 17.024 11.685 27.691v590.772c0 10.674-3.88 19.897-11.685 27.691-7.79 7.796-17.024 11.691-27.691 11.691zM618.454 459.694c-7.788-7.794-17.024-11.691-27.691-11.691h-157.539c-10.661 0-19.893 3.899-27.691 11.691-7.792 7.796-11.691 17.024-11.691 27.697 0 10.665 3.899 19.897 11.691 27.691 7.796 7.796 17.028 11.695 27.691 11.695h157.554c10.659 0 19.888-3.899 27.691-11.695 7.79-7.792 11.685-17.024 11.685-27.691 0-10.672-3.904-19.901-11.7-27.697zM1012.32 908.927c-7.798 7.796-17.024 11.691-27.693 11.691h-945.242c-10.665 0-19.897-3.895-27.691-11.691-7.794-7.792-11.693-17.024-11.693-27.691v-157.539c0-10.665 3.899-19.893 11.695-27.691 7.794-7.796 17.024-11.691 27.691-11.691h945.227c10.665 0 19.901 3.895 27.706 11.691 7.788 7.796 11.682 17.024 11.682 27.691v157.539c0 10.674-3.895 19.899-11.682 27.691z" />
 <glyph unicode="&#xe905;" glyph-name="enter" d="M677.571 437.241h-644.248c-18.395 0-33.323 14.929-33.323 33.323s14.929 33.323 33.323 33.323h644.248c18.395 0 33.323-14.929 33.323-33.323s-14.929-33.323-33.323-33.323zM499.849 259.519c-8.534 0-17.060 3.238-23.552 9.771-13.017 13.017-13.017 34.121 0 47.146l154.177 154.169-154.177 154.177c-13.017 13.017-13.017 34.129 0 47.146 13.025 13.017 34.129 13.017 47.146 0l177.722-177.73c13.017-13.017 13.017-34.121 0-47.137l-177.722-177.722c-6.533-6.582-15.059-9.82-23.593-9.82v0zM533.173-18.18c-202.21 0-380.728 121.651-454.884 309.957-6.753 17.060 1.684 36.431 18.793 43.184 17.060 6.663 36.48-1.643 43.232-18.842 64.027-162.573 218.245-267.652 392.859-267.652 232.726 0 422.098 189.372 422.098 422.098s-189.372 422.098-422.098 422.098c-174.614 0-328.832-105.079-392.859-267.652-6.801-17.199-26.172-25.505-43.232-18.842-17.109 6.753-25.546 26.123-18.793 43.184 74.156 188.306 252.675 309.957 454.884 309.957 269.475 0 488.744-219.27 488.744-488.744s-219.27-488.744-488.744-488.744z" />
 <glyph unicode="&#xe906;" glyph-name="file-code" horiz-adv-x="768" d="M512 960h-512v-1024h768v768l-256 256zM448 640h256v-640h-640v896h384v-256zM512 704v192l192-192h-192zM268.8 128h-44.8l-128 160 128 160h44.8l-128-160zM499.2 128h44.8l128 160-128 160h-44.8l128-160zM300.8 64h38.4l134.4 448h-51.2z" />
+<glyph unicode="&#xe907;" glyph-name="drag-menu" horiz-adv-x="372" d="M169.256 845.363c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546zM169.256 591.728c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546zM169.256 338.091c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546zM169.256 84.455c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546zM372.165 845.363c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546zM372.165 591.728c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546zM372.165 338.091c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546zM372.165 84.455c0-46.693-37.852-84.546-84.546-84.546s-84.546 37.852-84.546 84.546c0 46.693 37.852 84.546 84.546 84.546s84.546-37.852 84.546-84.546z" />
+<glyph unicode="&#xe908;" glyph-name="mapping" horiz-adv-x="1698" d="M439.686 447.811c0 118.806-96.658 215.464-215.464 215.464s-215.464-96.658-215.464-215.464c0-118.806 96.658-215.464 215.464-215.464s215.464 96.658 215.464 215.464zM224.222 293.908c-84.863 0-153.903 69.040-153.903 153.903s69.040 153.903 153.903 153.903c84.863 0 153.903-69.040 153.903-153.903s-69.040-153.903-153.903-153.903zM612.057 878.739c16.965 0 30.781 13.815 30.781 30.781 0 16.989-13.815 30.781-30.781 30.781s-30.781-13.791-30.781-30.781c0-16.965 13.815-30.781 30.781-30.781zM488.935 940.3h-169.293c-8.092 0-16.040-3.294-21.763-9.018s-9.018-13.671-9.018-21.763v-147.747c0-16.965 13.815-30.781 30.781-30.781s30.781 13.815 30.781 30.781v116.966h138.513c16.965 0 30.781 13.815 30.781 30.781s-13.815 30.781-30.781 30.781zM612.057 16.883c-16.965 0-30.781-13.815-30.781-30.781s13.815-30.781 30.781-30.781c16.965 0 30.781 13.815 30.781 30.781s-13.815 30.781-30.781 30.781zM488.935 16.883h-138.513v116.966c0 16.965-13.815 30.781-30.781 30.781s-30.781-13.815-30.781-30.781v-147.747c0-8.092 3.294-16.040 9.018-21.763s13.671-9.018 21.763-9.018h169.293c16.965 0 30.781 13.815 30.781 30.781s-13.815 30.781-30.781 30.781zM1129.404 550.103c-13.736 14.479-36.54 15.296-51.275 1.83l-117.198-111.703-49.442 51.275c-13.736 14.479-36.54 15.293-51.275 1.83-14.185-14.861-14.185-38.244 0-53.105l75.078-76.911c6.498-7.276 15.885-11.3 25.636-10.988 9.66 0.137 18.875 4.087 25.636 10.988l142.834 135.509c14.16 12.99 15.107 35.001 2.114 49.158-0.666 0.74-1.37 1.444-2.107 2.117zM1654.962 471.362h-421.178c-20.228 0-36.624-16.397-36.624-36.624s16.397-36.624 36.624-36.624h421.178c20.228 0 36.624 16.397 36.624 36.624s-16.397 36.624-36.624 36.624zM1129.404 843.097c-13.736 14.479-36.54 15.296-51.275 1.83l-117.198-111.703-49.442 51.275c-13.736 14.479-36.54 15.296-51.275 1.83-14.185-14.861-14.185-38.244 0-53.105l75.078-76.911c6.498-7.276 15.885-11.3 25.636-10.988 9.66 0.137 18.875 4.087 25.636 10.988l142.834 135.509c14.16 12.99 15.107 35.001 2.114 49.158-0.666 0.74-1.37 1.444-2.107 2.117zM1654.962 764.356h-421.178c-20.228 0-36.624-16.397-36.624-36.624s16.397-36.624 36.624-36.624h421.178c20.228 0 36.624 16.397 36.624 36.624s-16.397 36.624-36.624 36.624zM1129.404 257.112c-13.736 14.479-36.54 15.293-51.275 1.83l-117.198-111.703-49.442 51.275c-13.736 14.479-36.54 15.293-51.275 1.83-14.185-14.861-14.185-38.244 0-53.105l75.078-76.911c6.498-7.276 15.885-11.3 25.636-10.988 9.66 0.137 18.875 4.087 25.636 10.988l142.834 135.509c14.16 12.99 15.107 35.001 2.114 49.158-0.666 0.736-1.37 1.441-2.107 2.117zM1654.962 178.368h-421.178c-20.228 0-36.624-16.397-36.624-36.624s16.397-36.624 36.624-36.624h421.178c20.228 0 36.624 16.397 36.624 36.624s-16.397 36.624-36.624 36.624z" />
+<glyph unicode="&#xe909;" glyph-name="template-mapping" horiz-adv-x="1843" d="M872 448c0-66.273-53.727-120-120-120s-120 53.727-120 120c0 66.273 53.727 120 120 120s120-53.727 120-120zM892 448c0 77.195-62.805 140-140 140s-140-62.805-140-140c0-77.195 62.805-140 140-140s140 62.805 140 140zM752 348c-55.141 0-100 44.859-100 100s44.859 100 100 100c55.141 0 100-44.859 100-100s-44.859-100-100-100zM252 960h-232c-11.047 0-20-8.953-20-20v-232c0-11.047 8.953-20 20-20h232c11.047 0 20 8.953 20 20v232c0 11.047-8.953 20-20 20zM232 728h-192v192h192v-192zM252 208h-232c-11.047 0-20-8.953-20-20v-232c0-11.047 8.953-20 20-20h232c11.047 0 20 8.953 20 20v232c0 11.047-8.953 20-20 20zM232-24h-192v192h192v-192zM252 584h-232c-11.047 0-20-8.953-20-20v-232c0-11.047 8.953-20 20-20h232c11.047 0 20 8.953 20 20v232c0 11.047-8.953 20-20 20zM232 352h-192v192h192v-192zM332 428h140l-32-24c-8.836-6.625-10.625-19.164-4-28 3.93-5.234 9.938-8 16.016-8 4.18 0 8.383 1.305 11.984 4l80 60c0.102 0.070 8 6 8 16 0 6.172-3.039 12.305-8 16l-80 60c-8.836 6.633-21.375 4.836-28-4s-4.836-21.375 4-28l32-24h-140c-11.047 0-20-8.953-20-20s8.953-20 20-20zM332 804h169.711l140-140h-49.711c-11.047 0-20-8.953-20-20s8.953-20 20-20h100c12.82 0 22.789 13.312 19.203 25.602l-28 96c-3.094 10.602-14.203 16.703-24.805 13.602-10.602-3.094-16.688-14.195-13.594-24.805l6.961-23.875-127.625 127.625c-3.75 3.742-8.836 5.852-14.141 5.852h-178c-11.047 0-20-8.953-20-20s8.953-20 20-20zM692 268h-100c-11.047 0-20-8.953-20-20s8.953-20 20-20h49.711l-140-140h-169.711c-11.047 0-20-8.953-20-20s8.953-20 20-20h178c5.305 0 10.391 2.109 14.141 5.859l127.625 127.625-6.969-23.883c-3.094-10.609 3-21.711 13.602-24.797 1.875-0.547 3.758-0.813 5.609-0.813 8.664 0 16.641 5.68 19.195 14.406 0 0 27.867 95.562 28 96 3.578 12.297-6.437 25.602-19.203 25.602v0zM1004 728c11.023 0 20 8.977 20 20 0 11.039-8.977 20-20 20s-20-8.961-20-20c0-11.023 8.977-20 20-20zM924 768h-110c-5.258 0-10.422-2.141-14.141-5.859s-5.859-8.883-5.859-14.141v-96c0-11.023 8.977-20 20-20s20 8.977 20 20v76h90c11.023 0 20 8.977 20 20s-8.977 20-20 20zM1004 168c-11.023 0-20-8.977-20-20s8.977-20 20-20c11.023 0 20 8.977 20 20s-8.977 20-20 20zM924 168h-90v76c0 11.023-8.977 20-20 20s-20-8.977-20-20v-96c0-5.258 2.141-10.422 5.859-14.141s8.883-5.859 14.141-5.859h110c11.023 0 20 8.977 20 20s-8.977 20-20 20zM1387.759 524.215c-11.101 11.702-29.53 12.362-41.439 1.479l-94.715-90.273-39.957 41.439c-11.101 11.702-29.53 12.359-41.439 1.479-11.464-12.010-11.464-30.907 0-42.917l60.675-62.157c5.252-5.881 12.838-9.132 20.718-8.88 7.807 0.11 15.254 3.303 20.718 8.88l115.433 109.513c11.444 10.498 12.209 28.287 1.708 39.728-0.538 0.598-1.108 1.167-1.702 1.711zM1812.494 460.58h-340.379c-16.347 0-29.598-13.251-29.598-29.598s13.251-29.598 29.598-29.598h340.379c16.347 0 29.598 13.251 29.598 29.598s-13.251 29.598-29.598 29.598zM1387.759 761.001c-11.101 11.702-29.53 12.362-41.439 1.479l-94.715-90.273-39.957 41.439c-11.101 11.702-29.53 12.362-41.439 1.479-11.464-12.010-11.464-30.907 0-42.917l60.675-62.157c5.252-5.881 12.838-9.132 20.718-8.88 7.807 0.11 15.254 3.303 20.718 8.88l115.433 109.513c11.444 10.498 12.209 28.287 1.708 39.728-0.538 0.598-1.108 1.167-1.702 1.711zM1812.494 697.366h-340.379c-16.347 0-29.598-13.251-29.598-29.598s13.251-29.598 29.598-29.598h340.379c16.347 0 29.598 13.251 29.598 29.598s-13.251 29.598-29.598 29.598zM1387.759 287.432c-11.101 11.702-29.53 12.359-41.439 1.479l-94.715-90.273-39.957 41.439c-11.101 11.702-29.53 12.359-41.439 1.479-11.464-12.010-11.464-30.907 0-42.917l60.675-62.157c5.252-5.881 12.838-9.132 20.718-8.88 7.807 0.11 15.254 3.303 20.718 8.88l115.433 109.513c11.444 10.498 12.209 28.287 1.708 39.728-0.538 0.595-1.108 1.164-1.702 1.711zM1812.494 223.794h-340.379c-16.347 0-29.598-13.251-29.598-29.598s13.251-29.598 29.598-29.598h340.379c16.347 0 29.598 13.251 29.598 29.598s-13.251 29.598-29.598 29.598z" />
+<glyph unicode="&#xe90a;" glyph-name="template" horiz-adv-x="1109" d="M253.953 960h-233.798c-11.133 0-20.155-9.023-20.155-20.155v-233.798c0-11.133 9.023-20.155 20.155-20.155h233.798c11.133 0 20.155 9.023 20.155 20.155v233.798c0 11.133-9.023 20.155-20.155 20.155zM233.798 726.202h-193.488v193.488h193.488v-193.488zM1054.115 856.806h-518.829c-24.917 0-45.116-13.354-45.116-29.828s20.198-29.828 45.116-29.828h518.829c24.917 0 45.116 13.354 45.116 29.828s-20.198 29.828-45.116 29.828zM253.953 573.023h-233.798c-11.133 0-20.155-9.023-20.155-20.155v-233.798c0-11.133 9.023-20.155 20.155-20.155h233.798c11.133 0 20.155 9.023 20.155 20.155v233.798c0 11.133-9.023 20.155-20.155 20.155zM233.798 339.225h-193.488v193.488h193.488v-193.488zM1054.115 469.829h-518.829c-24.917 0-45.116-13.354-45.116-29.828s20.198-29.828 45.116-29.828h518.829c24.917 0 45.116 13.354 45.116 29.828s-20.198 29.828-45.116 29.828zM253.953 211.845h-233.798c-11.133 0-20.155-9.023-20.155-20.155v-233.798c0-11.133 9.023-20.155 20.155-20.155h233.798c11.133 0 20.155 9.023 20.155 20.155v233.798c0 11.133-9.023 20.155-20.155 20.155zM233.798-21.953h-193.488v193.488h193.488v-193.488zM1054.115 108.651h-518.829c-24.917 0-45.116-13.354-45.116-29.828s20.198-29.828 45.116-29.828h518.829c24.917 0 45.116 13.354 45.116 29.828s-20.198 29.828-45.116 29.828z" />
 </font></defs></svg>
\ No newline at end of file
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
index f16e62216..1f3af3988 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
diff --git a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
index a763911c0..e5f2266d2 100755
--- a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
+++ b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
diff --git a/cds-ui/designer-client/src/assets/icomoon/style.css b/cds-ui/designer-client/src/assets/icomoon/style.css
index f48119ce8..6294f3088 100755
--- a/cds-ui/designer-client/src/assets/icomoon/style.css
+++ b/cds-ui/designer-client/src/assets/icomoon/style.css
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?wg9fpe');
-  src:  url('fonts/icomoon.eot?wg9fpe#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?wg9fpe') format('truetype'),
-    url('fonts/icomoon.woff?wg9fpe') format('woff'),
-    url('fonts/icomoon.svg?wg9fpe#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?3g19qh');
+  src:  url('fonts/icomoon.eot?3g19qh#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?3g19qh') format('truetype'),
+    url('fonts/icomoon.woff?3g19qh') format('woff'),
+    url('fonts/icomoon.svg?3g19qh#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -25,6 +25,18 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-mapping:before {
+  content: "\e908";
+}
+.icon-template-mapping:before {
+  content: "\e909";
+}
+.icon-template:before {
+  content: "\e90a";
+}
+.icon-drag-menu:before {
+  content: "\e907";
+}
 .icon-file-code:before {
   content: "\e906";
 }
diff --git a/cds-ui/designer-client/src/styles.css b/cds-ui/designer-client/src/styles.css
index 17c49ce48..91bc3f9ad 100644
--- a/cds-ui/designer-client/src/styles.css
+++ b/cds-ui/designer-client/src/styles.css
@@ -9,6 +9,7 @@ body{
   /* font-family: 'Nunito' !important; */
   font-family: Arial, Helvetica, sans-serif !important;
   color: #1B3E6F !important;
+  font-size: 14px;
 }
 *:focus{
   outline: none;
@@ -250,7 +251,7 @@ background-color: #333;
 .import-container{
   width: 100%;
   background: #E0E8F2;
-  padding:30px ;
+  padding:25px ;
 }
 .import-container-input{
   width: 40%;
@@ -264,8 +265,9 @@ background-color: #333;
   padding: 5px 20px;
   border: 0px;
   -webkit-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
-  -moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
-  box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
+-moz-box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
+box-shadow: 0px 0px 42px -27px rgba(0,0,0,0.75);
+font-size: 13px;
 }
 .enter-link{
   position: absolute;
@@ -283,11 +285,6 @@ background-color: #333;
 .import-container-span{
   font-size: 12px;
 }
-.accordion .card{
-  margin-bottom: 0px !important;
-  background-color: #FAFAFA !important;
-  border: 0px;
-}
 .accordion-delete{
   color: #FF6469;
   font-size: 18px;
@@ -296,9 +293,6 @@ background-color: #333;
 .accordion-delete:hover{
   text-decoration: none;
 }
-.card-header{
-  background-color: #DEE8F3 !important;
-}
 /* .userProfile .dropdown-toggle{
 height: 40px;
 } */
@@ -1448,16 +1442,16 @@ ul.package-contributers{
   margin-bottom: -16px;
 }
 .btn{
-  padding-right: 20px !important;
-  padding-left: 20px !important;
-
+padding-right: 20px !important;
+padding-left: 20px !important;
+  
 }
 .btn.border-radius{
   border-radius: 20px !important;
 }
 .btn-primary{
-  background-color: #1273EB !important;
-  border-color: #1273EB !important;
+    background-color: #1273EB !important;
+    border-color: #1273EB !important;
 }
 .btn-primary:hover {
   background-color: #0069d9 !important;
@@ -1465,7 +1459,7 @@ ul.package-contributers{
 }
 .btn + .btn{
   margin-left: 10px;
-}
+  }
 .card.creat-card{
   margin: 0;
   border-radius: 2px;
@@ -1473,35 +1467,37 @@ ul.package-contributers{
   box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
 }
 .card.creat-card .single-line{
-  padding: 15px 70px 15px;
+  padding: 15px 25px 15px;
 }
 .single-line label{
   margin-bottom: 0px;
-}
-.label-name{
-  width: 300px;
-  display: inline-block;
-  margin-bottom: 0px;
-}
-.delete-key{
-  color: #FF6469;
-  font-size: 10px;
-  background: #FFE6E7;
-  border: 1px solid #FFC9CB;
-  padding: 3px 10px 2px;
-  margin-left: 10px;
-  border-radius: 5px;
-}
-.delete-key:hover{
-  color: #C94448;
-  background: #FFC9CB;
-  border: 1px solid #FF6469;
-  text-decoration: none;
-}
-.label-input{
-  width: calc(100% - 300px);
-  display: inline-block;
-}
+  }
+  .label-name{
+    width: 300px;
+    display: inline-block;
+    margin-bottom: 0px;
+    font-size: 14px;
+    font-weight: bold;
+  }
+  .delete-key{
+    color: #FF6469;
+    font-size: 10px;
+    background: #FFE6E7;
+    border: 1px solid #FFC9CB;
+    padding: 3px 10px 2px;
+    margin-left: 10px;
+    border-radius: 5px;
+  }
+  .delete-key:hover{
+    color: #C94448;
+    background: #FFC9CB;
+    border: 1px solid #FF6469;
+    text-decoration: none;
+  }
+  .label-input{
+    width: calc(100% - 300px);
+    display: inline-block;
+  }
 .form-check-input{
   margin-left: 0px !important;
   margin-top: 2px !important;
@@ -1509,44 +1505,55 @@ ul.package-contributers{
 .form-check-input+span{
   margin-left: 20px;
   margin-right: 50px;
-}
-.label-input input{
-  margin-bottom: 0px;
-  outline: 0px;
-  border: 0px;
-  font-size: 12px;
-  width: 100%;
-}
-.single-line select{
-  margin-bottom: 0px;
-  outline: 0px;
-  border: 0px;
-  background: none;
-  background: url(/assets/img/arrow.svg) center right no-repeat;
-  background-size: 10spx;
-  width: 100%;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  text-indent: 1px;
-  text-overflow: '';
-
-}
-.single-line select option:first-child{
-  color: #C3CDDB;
-}
-.single-line input::placeholder{
   font-size: 14px;
-  color: #C3CDDB;
-}
-.single-line .custom-key{
-  background: none;
-  border: 0px;
-  color:#1273EB ;
-  font-size: 15px;
-}
-.single-line .custom-key:focus{
-  outline: none;
 }
+  .label-input input{
+    margin-bottom: 0px;
+    outline: 0px;
+    border: 0px;
+    font-size: 14px;
+    width: 100%;
+    }
+    .label-input input[type=radio]{
+      width: auto;
+      
+    }
+    .label-input input[type=radio]+span{
+      font-size: 12px;
+      display: block;
+      margin-right: 100px;
+    }
+    .single-line select{
+      margin-bottom: 0px;
+      outline: 0px;
+      border: 0px;
+      background: none;
+      background: url(/assets/img/arrow.svg) center right no-repeat;
+      background-size: 10spx;
+      width: 100%;
+      -webkit-appearance: none;
+    -moz-appearance: none;
+    text-indent: 1px;
+    text-overflow: '';
+    font-size: 14px;
+    
+      }
+      .single-line select option:first-child{
+        color: #C3CDDB;
+      }
+    .single-line input::placeholder{
+      font-size: 14px;
+      color: #C3CDDB;
+      }
+  .single-line .custom-key{
+    background: none;
+    border: 0px;
+    color:#1273EB ;
+    font-size: 15px;
+  }
+  .single-line .custom-key:focus{
+    outline: none;
+  }
 .creat-container{
   padding:70px 100px 70px 70px;
   position: relative;
@@ -1609,7 +1616,7 @@ hr {
   content: "\f105";
   font-family:'FontAwesome';
   position: relative;
-  margin-right: 30px;
+  margin-right: 25px;
 }
 .btn-link i{
   margin-right: 10px;
@@ -1631,13 +1638,19 @@ hr {
   display: inline-block;
   text-align: center;
 }
+.btn-group-sm>.btn, .btn-sm{
+  font-size: 12px;
+}
+.create-title{
+  font-size: 14px;
+}
 .folder-upload-text{
   margin-top: 10px;
   width: 100%;
   display: inline-block;
   text-align: center;
   color:#242424 ;
-  font-size: 12px;
+  font-size: 14px;
 }
 .folder-upload-text button{
   margin-left: 10px;
@@ -1669,6 +1682,176 @@ hr {
   top: 11px;
   color: #66BB00;
 }
+.authentication-container-all{
+  background: #F4F9FE;
+  border:1px solid #D0DFF1 ;
+  flex: 1;
+  width: 100%;
+}
+.authentication-header{
+  width: 100%;
+  background: #fff;
+  font-size: 12px;
+  color: #C3CDDB;
+  font-weight: bold;
+  padding: 10px 20px ;
+}
+.authentication-search{
+  width: 100%;
+  background: #fff;
+  font-size: 12px;
+  color: #C3CDDB;
+  font-weight: bold;
+  position: relative;
+}
+.authentication-search::after{
+  content: "\f002";
+    font-family: 'FontAwesome';
+    position: absolute;
+    left: 20px;
+    top: 11px;
+}
+.authentication-search input{
+  width: 100%;
+  background: #fff;
+  font-size: 12px;
+  color: #C3CDDB;
+  font-weight: bold;
+  padding: 10px 20px 10px 35px;
+  border: 0px;
+  border-top: 1px solid #D7E7F9;
+}
+.authentication-search input::placeholder{
+  color: #D0D7E4;
+  font-size: 10px;
+  font-weight:100;
+}
+.authentication-accordion{
+  width: 100%; 
+  padding: 20px;
+  max-height: 300px;
+  overflow: auto;
+}
+.authentication-accordion .card{
+  border-radius: 0px !important;
+  margin-bottom: 10px !important;
+}
+.authentication-accordion .card-header{
+  padding: 0px !important;
+  background: #fff !important;
+  border-radius: 0px !important;
+  font-size: 18px;
+  font-weight: bold;
+}
+.authentication-accordion .card-header .btn-link{
+  color: #1B3E6F;
+  width: 100%;
+  text-align: left;
+  padding-left: 0px !important;
+  font-size: 14px;
+}
+.authentication-accordion .custom-control{
+  display: inline-block;
+}
+.authentication-accordion .btn-link::before{
+  margin-right: 10px;
+}
+.authentication-accordion .btn-link.collapsed::before{
+  margin-right: 14px;
+}
+.template-mapping-accordion{
+  width: 100%;
+}
+.card{
+  border-radius: 2px;
+  border: 0;
+  box-shadow: 0 2px 6px 0 rgba(47, 83, 151, 0.1);
+  border: 0px !important;
+}
+.card-header{
+  padding: 10px 25px !important;
+  background: #F4F9FE !important;
+  border-radius: 0px !important;
+  border-bottom: 1px solid #ECEDF2 !important;
+}
+.card-body {
+  padding: 20px 25px !important;
+  font-size: 14px;
+}
+.card-header .btn-link{
+  color: #1B3E6F;
+  width: 100%;
+  text-align: left;
+  padding-left: 0px !important;
+}
+.accordion .card{
+  margin-bottom: 0px !important;
+  border-top: 1px solid #ECEDF2 !important;
+}
+.template-mapping-accordion .card{
+  margin-bottom: 25px !important;
+}
+.custom-control{
+  display: inline-block;
+}
+.btn-link::before{
+  margin-right: 10px;
+}
+.btn-link.collapsed::before{
+  margin-right: 14px;
+}
+.drap-drop-action{
+  padding: 12px 20px 9px 20px;
+  color: #C3CDDB;
+  cursor:move;
+  font-size: 15px;
+}
+.modal-title {
+  font-size: 14px;
+}
+.select-type{
+  background: #F4F9FE;
+  border: 1px solid #D7E7F9;
+  padding: 10px;
+  text-align: center;
+  color: #1273EB;
+  font-size: 15px;
+  width: 100%;
+  position: relative;
+}
+.select-type:hover, .select-type.active{
+  background: #1B3E6F;
+  border: 1px solid #D7E7F9;
+  color: #fff; 
+  text-decoration: none;
+}
+.select-type-icon{
+  font-size: 35px;
+}
+.select-type::before{
+  content: '';
+  border: 1px solid #1273EB;
+  width: 18px;
+  height: 18px;
+  border-radius: 18px;
+  display: inline-block;
+  left: 10px;
+  position: absolute;
+}
+.select-type:hover::before, .select-type.active::before{
+  border: 1px solid #fff;
+}
+.select-type.active::after{
+  content: '';
+  background: #fff;
+  width: 12px;
+  height: 12px;
+  border-radius: 18px;
+  display: inline-block;
+  left: 13px;
+  position: absolute;
+  top: 13px;
+}
 /* Extra small devices (portrait phones, less than 576px) */
 @media (max-width: 575.98px) {
   .page-title{