Merge "providing search packages functionalities"
authorDan Timoney <dtimoney@att.com>
Tue, 16 Jun 2020 23:05:29 +0000 (23:05 +0000)
committerGerrit Code Review <gerrit@onap.org>
Tue, 16 Jun 2020 23:05:29 +0000 (23:05 +0000)
18 files changed:
cds-ui/designer-client/src/app/modules/feature-modules/packages/configuration-dashboard/configuration-dashboard.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.css
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/designer/designer.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/imports-tab/imports-tab.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/scripts-tab/scripts-tab.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-creation/templ-mapp-creation.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.css
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.html
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/templ-mapp-listing/templ-mapp-listing.component.ts
cds-ui/designer-client/src/app/modules/feature-modules/packages/package-creation/template-mapping/template-mapping.component.html
cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot
cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.svg
cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf
cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff
cds-ui/designer-client/src/assets/icomoon/style.css
ms/blueprintsprocessor/modules/inbounds/designer-api/src/main/kotlin/org/onap/ccsdk/cds/blueprintsprocessor/designer/api/utils/BlueprintSortByOption.kt

index 4abc93b..ebfad93 100644 (file)
@@ -22,7 +22,7 @@
             <div class="container">
                 <div class="creat-action-container">
 
-                    <a href="#" class="action-button save" (click)="editBluePrint()">
+                    <a class="action-button save" (click)="editBluePrint()">
                         <i class="icon-save-sm" aria-hidden="true"></i>
                         <span>Save</span>
                     </a>
index 8b79844..1441406 100644 (file)
@@ -1,7 +1,9 @@
 
 body{
-  background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
-  background-size: 6px 6px !important;  
+  /* background-image: linear-gradient(-45deg, #000 9%, #fff 0) !important;
+  background-size: 6px 6px !important;   */
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJ2LTQiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiPjxkZWZzIGlkPSJ2LTMiPjxwYXR0ZXJuIGlkPSJwYXR0ZXJuXzAiIHBhdHRlcm5Vbml0cz0idXNlclNwYWNlT25Vc2UiIHg9IjAiIHk9IjAiIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMCI+PHJlY3QgaWQ9InYtNSIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0iI0FBQUFBQSIvPjwvcGF0dGVybj48L2RlZnM+PHJlY3QgaWQ9InYtNyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgZmlsbD0idXJsKCNwYXR0ZXJuXzApIi8+PC9zdmc+") !important;
+  background-color: #fff !important;
 }
 
 /*Icons*/
@@ -25,22 +27,29 @@ body{
 }
 
 .editNavbar .nav-tabs{
-  border-bottom-width: 2px;
+  border-bottom-width: 0;
 }
 .editNavbar .nav-tabs .nav-link{
-  padding: 12px 15px !important;
+  padding: 12px 28px !important;
   text-align: center;
 }
 .editNavbar .nav-tabs .nav-link::before{
   content: "";
 }
+.editNavbar .nav-link{
+  text-transform: initial !important;
+}
+.editNavbar .navbar,
+.editNavbar .navbar{
+  padding: 0;
+}
 
 /*Header*/
 header{
   position: relative;
   height: 60px;
   background-color: #1B3E6F;
-  box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0);
+  /* box-shadow: 0 4px 10px rgba(238, 240, 245, 1.0); */
   z-index: 200000000 !important;
 }
 .logo{
@@ -101,6 +110,9 @@ header{
 .topology-actions .btn-group{
   margin-top: 11px;
 }
+.btn-group > .btn:not(:first-child){
+  margin-left: 0;
+}
 .btn-topology-action,
 .btn-topology-action:hover{
   margin: 0 6px;
@@ -122,11 +134,11 @@ header{
 .dropdown-toggle:focus ~ .dropdown-text{
   top: 7px;
   text-indent: 15px;
-  background: #1273EB;
-  border-radius: 15px;
+  background: #1273EB !important;
+  border-radius: 15px !important;
   border: 0;
   box-shadow: none;
-  color: #fff;
+  color: #fff !important;
   font-weight: bold;
   font-size: 13px;
 }
@@ -244,8 +256,8 @@ button.rotate{
   text-decoration: none;
 }
 #board-paper svg{
-  top: 40px;
-  left: 30px;
+  top: 70px;
+  left: 0;
 }
 .componentsList tspan{
   /* width:30px !important;  */
@@ -329,7 +341,7 @@ p.compType-4{
   padding-left: 20px;
   background: #fff;
   border-top: solid 1px #C1CDDD;
-  font-size: 14px;
+  font-size: 13px;
   line-height: 40px;
   color: #0070F4;
 }
@@ -472,35 +484,52 @@ p.compType-4{
 }
  
 /*CANVAS*/
-.editBar{
-  width: 73.7%;
-  margin: 0 auto 0 -320px;
+.source-button.editBar{
+  position: absolute;
+  z-index: 9999999;
+  top: 60px;
+  /* left: 50%; */
+}
+.editBar,
+.editBar2{
+  width: calc(100% - 320px);
+  margin: 0 auto 0 320px;
   height: 45px;
-  padding: 6px 10px;
+  padding: 0;
+  padding-right: 20px;
   background:#F4F9FE;
-  /* border: solid 1px #E8EFF8; */
+  border-bottom: solid 1px #E8EFF8;
   box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
 }
-.editBar .btn-group{
+
+.editBar .btn-group,
+.editBar2 .btn-group{
   box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
 }
-.editBar .btn{
+.editBar .toggoleBtn,
+.editBar2 .toggoleBtn{
+  height: 43px;
+  margin-right: 12px;
   background-color: #fff;
   background-repeat: no-repeat;
   background-position: left center;
   border: 0;
   color: #1B3E6F;
   font-size: 10px;
+  border-top-left-radius: 0;
+  border-top-right-radius: 4px;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 4px;
 }
-.editBar .btn.active{
+.editBar .toggoleBtn i,
+.editBar2 .toggoleBtn i{
+  font-size: 20px;
+}
+.editBar .toggoleBtn.active,
+.editBar2 .toggoleBtn.active{
   background-color: #1B3E6F !important;
   color: #fff;
 }
-.viewBtns .btn{
-  background-position: 10px center;
-  padding-left: 30px!important;
-  margin-top: 14px;
-}
 .viewBtns .topologySource{
   background-image: url(src/assets/img/icon-topologyView-active.svg);
 }
@@ -701,12 +730,12 @@ p.compType-4{
   font-size: 10px;
 
 }
-.source-button{
+/* .source-button{
   position: absolute;
     z-index: 9999999;
     top: 60px;
     left: 50%;
-}
+} */
 /*jointjs paper*/
 /* #board-paper {
     position: relative;
@@ -753,39 +782,46 @@ p.compType-4{
   font-size:15px
 }
 
-.arrow{
-  margin-left: -10px;
-  border-radius: 3%
-}
-.arr-size{
-  font-size: 31px;
-}
 .editBar2{
-  width: 98.7%;
-  margin: 0 auto 0 -640px;
-  height: 45px;
-  padding: 6px 10px;
-  background:#F4F9FE;
-  /* border: solid 1px #E8EFF8; */
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .1);
-}
-.editBar2 .btn-group{
-  box-shadow: 0 2px 6px rgba(47, 83, 151, .15);
+  width: 100%;
+  margin: 0;
 }
-.editBar2 .btn{
-  background-color: #fff;
-  background-repeat: no-repeat;
-  background-position: left center;
+
+.viewBtns .btn{
+  margin-top: 14px;
+  padding-left: 30px!important;
   border: 0;
-  color: #1B3E6F;
-  font-size: 10px;
+  font-size: 12px;
+  color: #1B3E6F !important;
+  background-color: #fff !important;
+  background-repeat: no-repeat;
+  background-position: 10px center;
 }
-.editBar2 .btn.active{
+.viewBtns .btn.active{
   background-color: #1B3E6F !important;
-  color: #fff;
+  color: #fff !important;
 }
-.editBar2 .viewBtns .btn{
-  background-position: 10px center;
-  padding-left: 30px!important;
-  margin-top: 14px;
+
+
+.joint-paper{
+  width: 94% !important;
+  height: 100vh !important;
+  margin: 0 auto !important;
+}
+ul.templateLegend{
+  margin: 0;
+}
+.templateLegend li{
+  float: left;
+  list-style: none;
+  font-size: 11px;
+}
+.templateLegend li:not(:last-child){
+  margin-right: 24px;
+}
+.templateLegend .requirement i{
+  color: #FF6B6B;
+}
+.templateLegend .capability i{
+  color: #0ABDE3;
 }
index fe24f9d..08f9a07 100644 (file)
 </div> -->
 
 <nav class="editNavbar row source-button {{cl}} navbar navbar-expand-lg">
-    <button (click)="_toggleSidebar1()" class="active btn arrow">
+    <button (click)="_toggleSidebar1()" class="toggoleBtn active btn tooltip-bottom" title="" aria-pressed="true"
+        data-tooltip="Collapse Side bar">
         <i class="fa arr-size">&#xf100;</i>
     </button>
     <div class="collapse navbar-collapse ">
-        <ul class="navbar-nav mr-auto">
+        <ul class="navbar-nav">
             <li class="nav-item active">
                 <nav class="row">
                     <!--Nav Tabs-->
                 </nav>
             </li>
         </ul>
-        <ul class="navbar ml-auto" style="list-style: none;">
+        <ul class="templateLegend ml-auto mr-auto p-0">
+            <li class="requirement"><i class="icon-rectangle" aria-hidden="true"></i> Requirement</li>
+            <li class="capability"><i class="icon-rectangle" aria-hidden="true"></i> Capability</li>
+        </ul>
+        <ul class="navbar" style="list-style: none;">
             <li class="nav-item">
                 <div class="btn-group viewBtns" role="group">
                     <button type="button" class="btn btn-secondary topologySource active">Designer</button>
                 </div>
             </div>
         </div>
-        <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a></div>
+        <div class="helpBox"><i class="icon-info" aria-hidden="true"></i><a
+                href="https://wiki.onap.org/display/DW/CDS+Designer+Guide" target="_blank">Help - Learn The Basics</a>
+        </div>
     </ng-sidebar>
     <!-- Page content -->
 
         </div>
     </ng-sidebar>
 
-</ng-sidebar-container>
\ No newline at end of file
+</ng-sidebar-container>
index 4f31a08..e2a8d64 100644 (file)
@@ -205,8 +205,8 @@ export class DesignerComponent implements OnInit, OnDestroy {
       this.boardPaper = new joint.dia.Paper({
           el: $('#board-paper'),
           model: this.boardGraph,
-          height: 720,
-          width: 1100,
+          // height: 720,
+          // width: 1100,
           gridSize: 10,
           drawGrid: true,
           // background: {
index 9858fd5..e189231 100644 (file)
@@ -31,7 +31,7 @@ export class ImportsTabComponent implements OnInit {
         this.files = files;
         for (const droppedFile of files) {
             // Is it a file? & Not added before
-            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+            if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
                 console.log(fileEntry.name);
index a85ccf1..63a7347 100644 (file)
@@ -35,7 +35,7 @@ export class ScriptsTabComponent implements OnInit {
         this.files = files;
         for (const droppedFile of files) {
             // Is it a file & Not added before ?
-            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+            if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
                 console.log(fileEntry.name);
index 164f0ac..fdf10e0 100644 (file)
@@ -1,7 +1,8 @@
 
 <div class="row template-mapping-action">
     <div class="col">
-        <h6 class="create-title">Create Template</h6>
+        <h6 [hidden]="edit" class="create-title">Create Template</h6>
+        <button (click)="closeCreationForm()" [hidden]="!edit" class="btn btn-outline-secondary"><i class="fa fa-chevron-left mr-2"></i>Template List</button>
     </div>
     <div class="col text-right">
         <button (click)="cancel()" [disabled]="fileName?.length <=0" class="btn btn-outline-secondary">Cancel</button>
                     </div>
                 </div>
                 <div id="mapping-table" [hidden]="resourceDictionaryRes?.length == 0" class="mx-4 my-2">
-                    <table datatable [dtOptions]="dtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
+                    <table datatable [dtOptions]="initDtOptions" [dtTrigger]="dtTrigger" class="row-border hover">
                         <thead>
                             <tr>
                                 <th>Required</th>
                     </table>
                 </div>
 
-                <div id="mapping-table" [hidden]="mappingRes?.length == 0" class="mx-4 my-2">
+                <div id="mapping-table-res" [hidden]="mappingRes?.length == 0" class="mx-4 my-2">
                     <table datatable [dtOptions]="dtOptions" [dtTrigger]="resTableDtTrigger" class="row-border hover">
                         <thead>
                             <tr>
index 5129b38..7b77769 100644 (file)
@@ -28,6 +28,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     templateInfo = new TemplateInfo();
     variables: string[] = [];
     dtOptions: DataTables.Settings = {};
+    initDtOptions: DataTables.Settings = {};
     // We use this trigger because fetching the list of persons can be quite long,
     // thus we ensure the data is fetched before rendering
     dtTrigger = new Subject();
@@ -62,7 +63,6 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             console.log('URL contains Id');
             this.sharedService.enableEdit();
         }
-
         this.templateStore.state$.subscribe(templateInfo => {
             // init Template&mapping vars
             console.log('Oninit');
@@ -108,12 +108,18 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
             }
         });
 
-        this.dtOptions = {
+        this.initDtOptions = {
             pagingType: 'full_numbers',
             pageLength: 25,
             destroy: true,
             retrieve: true,
         };
+        this.dtOptions = {
+            pagingType: 'full_numbers',
+            pageLength: 25,
+            // destroy: true,
+            // retrieve: true,
+        };
     }
 
     getFileExtension() {
@@ -164,7 +170,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.files = files;
         for (const droppedFile of files) {
             // Is it a file? & Not added before
-            if (droppedFile.fileEntry.isFile && !this.fileNames.has(droppedFile.fileEntry.name)) {
+            if (droppedFile.fileEntry.isFile) {
                 const fileEntry = droppedFile.fileEntry as FileSystemFileEntry;
                 this.uploadedFiles.push(fileEntry);
                 this.fileNames.add(fileEntry.name);
@@ -191,6 +197,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                     this.variables = fileReader.result.toString().split(',');
                     console.log(this.variables);
                     this.getMappingTableFromTemplate(null);
+
                 };
                 fileReader.readAsText(file);
             });
@@ -285,7 +292,7 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
         this.mappingRes = [];
         this.currentMapping = {};
         this.currentTemplate = {};
-        this.closeCreationForm();
+        //   this.closeCreationForm();
     }
     saveToStore() {
         if (this.fileName) {
@@ -304,11 +311,11 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
                     this.resourceDictionaryRes = [];
                 }
                 // Save Template to store
-                if (this.templateFileContent) {
-                    this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(),
-                        this.templateFileContent);
-                    this.templateFileContent = '';
-                }
+                // if (this.templateFileContent) {
+                this.packageCreationStore.addTemplate('Templates/' + this.fileName + '-template' + this.getFileExtension(),
+                    this.templateFileContent);
+                this.templateFileContent = '';
+                //  }
                 this.fileName = '';
                 this.toastr.success('File is created', 'success');
                 this.closeCreationForm();
@@ -350,17 +357,19 @@ export class TemplMappCreationComponent implements OnInit, OnDestroy {
     }
 
     rerender(): void {
-        if (this.dtElement.dtInstance) {
-            console.log('rerender');
-            this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
-                dtInstance.destroy();
-                this.dtElement.dtOptions = this.dtOptions;
-                this.dtElement.dtTrigger.next();
-                dtInstance.draw();
-            });
-        } else {
-            this.dtTrigger.next();
-        }
+        this.dtTrigger.next();
+
+        // if (this.dtElement.dtInstance) {
+        //     console.log('rerender');
+        //     this.dtElement.dtInstance.then((dtInstance: DataTables.Api) => {
+        //         dtInstance.destroy();
+        //         this.dtElement.dtOptions = this.dtOptions;
+        //         this.dtElement.dtTrigger.next();
+        //         dtInstance.draw();
+        //     });
+        // } else {
+        //     this.dtTrigger.next();
+        // }
     }
 
     ngOnDestroy(): void {
index 054b568..f330b2f 100644 (file)
@@ -1,3 +1,23 @@
 .template-mapping-list {
     cursor: pointer;
+}
+
+a.accordion-delete i {
+    color: red;
+}
+
+a.accordion-delete i:hover {
+    color: #007bff;
+    cursor: pointer;
+    transition-duration: .5s;
+    /* for Safari & Chrome */
+    -webkit-transition-duration: .5s;
+}
+
+a.accordion-delete {
+    margin-top: 0;
+}
+
+.template-mapping-list p{
+    display: contents;
 }
\ No newline at end of file
index 6ae5c11..3a7b022 100644 (file)
@@ -4,11 +4,11 @@
 
 
 <div class="template-mapping-accordion" [hidden]="templateAndMappingMap?.size <= 0">
-    <div class="accordion" id="listAccordion">
+    <div class="" id="listAccordion">
         <div class="card">
             <div class="card-header" id="headingThree">
                 <h5 class="mb-0 d-flex justify-content-between">
-                    <button class="btn btn-link" data-toggle="collapse" data-target="#collapseThree"
+                    <button class="btn" data-toggle="collapse" data-target="#collapseThree"
                         aria-expanded="true" aria-controls="collapseThree">
                         Template and Mapping List
                     </button>
                 </h5>
             </div>
 
-            <div id="collapseThree" class="collapse show" aria-labelledby="headingThree" data-parent="#listAccordion">
+            <div id="collapseThree" class="show" aria-labelledby="headingThree" data-parent="#listAccordion">
                 <div class="card-body max-height-list">
                     <div class="row">
                         <!-- <div class="col-4" style="color:white" *ngFor="let file of templates.files | keyvalue; let mapIndex = index">-->
                         <div class="col-4" *ngFor="let file of  getKeys(templateAndMappingMap)">
-                            <a (click)="setSourceCodeEditor(file)" class="template-mapping-list"
-                                [ngClass]="{'active':currentFile == file}">{{file}}
+                            <a class="template-mapping-list" [ngClass]="{'active':currentFile == file}">
+                                <p (click)="setSourceCodeEditor(file)">{{file}}</p>
                                 <span *ngIf="getValue(file).isMapping">Mapping</span>
                                 <span *ngIf="getValue(file).isTemplate">Template</span>
-                                <button type="button" class="deleteTemplate" title="Delete Template">
-                                    <i class="icon-delete-sm"></i>
-                                </button>
+
+                                <a data-toggle="modal" (click)="initDelete(file)" data-target="#templateDeletionModal"
+                                    class="accordion-delete deleteTemplate" title="Delete Template"><i
+                                        class="icon-delete-sm"></i></a>
                             </a>
-                            
+
                         </div>
                     </div>
                 </div>
         </div>
 
     </div>
+</div>
+
+<!-- Delete Modal -->
+<div class="modal fade" id="templateDeletionModal" tabindex="-1" role="dialog"
+    aria-labelledby="templateDeletionModalLabel" aria-hidden="true">
+    <div class="modal-dialog" role="document">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h5 class="modal-title" id="templateDeletionModalLabel">Delete Script</h5>
+                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                </button>
+            </div>
+            <div class="modal-body">
+                <p>Are you sure you want to delete Template file
+                    <span>{{fileToDelete}}</span>?</p>
+            </div>
+            <div class="modal-footer">
+                <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
+                <button type="button" (click)="condifrmDelete()" data-dismiss="modal"
+                    class="btn btn-primary">Delete</button>
+            </div>
+        </div>
+    </div>
 </div>
\ No newline at end of file
index 338c8f7..f25dcb1 100644 (file)
@@ -21,6 +21,7 @@ export class TemplMappListingComponent implements OnInit {
     isCreate = true;
     currentFile: string;
     edit = false;
+    fileToDelete: any = {};
 
     constructor(
         private packageCreationStore: PackageCreationStore,
@@ -122,5 +123,21 @@ export class TemplMappListingComponent implements OnInit {
     getValue(file: string) {
         return this.templateAndMappingMap.get(file);
     }
+    initDelete(file) {
+        console.log(file);
+        this.fileToDelete = file;
+    }
+    condifrmDelete() {
+        console.log(this.templateAndMappingMap);
+        this.templateAndMappingMap.delete(this.fileToDelete);
+        if (this.templateAndMappingMap.size <= 0) {
+            this.openCreationView();
+        }
+        // Delete from templates
+        this.packageCreationStore.state.templates.files.delete('Templates/' + this.fileToDelete + '-template.vtl');
+        // Delete from Mapping
+        this.packageCreationStore.state.mapping.files.delete('Templates/' + this.fileToDelete + '-mapping.json');
+
+    }
 
 }
index 80df7c6..f4f305e 100644 (file)
@@ -1,5 +1,5 @@
-<div *ngIf="!listView">
-    <app-templ-mapp-listing (showCreationViewParentNotification)="openCreationView($event)"
+<div [hidden]="listView">
+    <app-templ-mapp-listing [hidden]="!creationView" (showCreationViewParentNotification)="openCreationView($event)"
         (showFullView)="openListView($event)">
     </app-templ-mapp-listing>
 </div>
index 46b2de6..70a4e60 100755 (executable)
Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.eot differ
index c966c11..3441e50 100755 (executable)
@@ -13,6 +13,7 @@
 <glyph unicode="&#xe903;" glyph-name="icon-action-close" d="M1011.886 947.884c-16.154 16.154-42.344 16.154-58.498 0l-941.272-941.27c-16.154-16.154-16.154-42.344 0-58.498 8.076-8.080 18.664-12.116 29.25-12.116s21.172 4.039 29.25 12.119l941.27 941.27c16.152 16.152 16.152 42.342 0 58.496zM1011.884 6.612l-941.272 941.27c-16.152 16.154-42.344 16.154-58.496 0-16.154-16.152-16.154-42.342 0-58.496l941.272-941.272c8.076-8.078 18.664-12.117 29.25-12.117s21.174 4.039 29.248 12.115c16.15 16.156 16.15 42.346-0.002 58.5z" />
 <glyph unicode="&#xe904;" glyph-name="icon-action-back" horiz-adv-x="1422" d="M479.778 915.244c19.067 19.733 50.8 19.733 70.533 0 19.067-19.067 19.067-50.8 0-69.822l-357.644-357.644h1180.178c27.511-0.044 49.378-21.911 49.378-49.422s-21.867-50.089-49.378-50.089h-1180.178l357.644-356.978c19.067-19.733 19.067-51.511 0-70.533-19.733-19.733-51.511-19.733-70.533 0l-442.311 442.311c-19.733 19.067-19.733 50.8 0 69.822l442.311 442.356z" />
 <glyph unicode="&#xe905;" glyph-name="icon-file" horiz-adv-x="751" d="M731.195 731.764l-208.496 208.494c-12.729 12.731-29.652 19.742-47.655 19.742h-407.653c-37.16 0-67.391-30.232-67.391-67.391v-851.058c0-37.16 30.232-67.391 67.391-67.391h616.15c37.16 0 67.391 30.232 67.391 67.391v642.56c0 17.997-7.009 34.92-19.738 47.653zM652.324 728.944h-122.82c-5.309 0-9.627 4.319-9.627 9.627v122.818l132.447-132.445zM683.542 31.923h-616.15c-5.309 0-9.627 4.319-9.627 9.627v851.058c0 5.309 4.319 9.627 9.627 9.627h394.721v-163.665c0-37.16 30.232-67.391 67.391-67.391h163.665v-629.629c0-5.309-4.319-9.627-9.627-9.627z" />
+<glyph unicode="&#xe906;" glyph-name="icon-rectangle" d="M0 960h1024v-1024h-1024v1024z" />
 <glyph unicode="&#xe915;" glyph-name="icon-add" d="M512 960c-282.785 0-512-229.215-512-512s229.215-512 512-512c282.785 0 512 229.249 512 512s-229.215 512-512 512zM512 0c-247.425 0-448 200.575-448 448s200.575 448 448 448c247.425 0 448-200.575 448-448s-200.575-448-448-448zM704 480h-160v160c0 17.664-14.336 32-32 32s-32-14.336-32-32v-160h-160c-17.664 0-32-14.336-32-32s14.336-32 32-32h160v-160c0-17.664 14.336-32 32-32s32 14.336 32 32v160h160c17.664 0 32 14.336 32 32s-14.336 32-32 32z" />
 <glyph unicode="&#xe952;" glyph-name="icon-archive-sm" d="M943.405 684.258h-864.783c-10.653 0-19.867-3.887-27.644-11.668-7.781-7.777-11.668-16.991-11.668-27.637v-589.626c0-10.644 3.887-19.863 11.668-27.637 7.777-7.781 16.991-11.677 27.644-11.677h864.783c10.647 0 19.854 3.896 27.637 11.677 7.775 7.773 11.662 16.991 11.662 27.637v589.626c0 10.653-3.872 19.858-11.662 27.637-7.775 7.781-16.991 11.668-27.637 11.668zM617.255 499.387c-7.773-7.779-16.991-11.668-27.637-11.668h-157.233c-10.64 0-19.854 3.892-27.637 11.668-7.777 7.781-11.668 16.991-11.668 27.644 0 10.644 3.892 19.858 11.668 27.637 7.781 7.781 16.995 11.673 27.637 11.673h157.249c10.638 0 19.85-3.892 27.637-11.673 7.775-7.777 11.662-16.991 11.662-27.637 0-10.651-3.896-19.863-11.677-27.644zM1010.357 947.749c-7.783 7.781-16.991 11.668-27.639 11.668h-943.409c-10.644 0-19.858-3.887-27.637-11.668-7.779-7.777-11.671-16.991-11.671-27.637v-157.233c0-10.644 3.892-19.854 11.673-27.637 7.779-7.781 16.991-11.668 27.637-11.668h943.394c10.644 0 19.863 3.887 27.652 11.668 7.773 7.781 11.66 16.991 11.66 27.637v157.233c0 10.653-3.887 19.86-11.66 27.637z" />
 <glyph unicode="&#xe953;" glyph-name="icon-btn-card-config" d="M971.283 561.778h-95.801c-15.398 0-28.084 8.476-33.982 22.699s-2.901 29.203 7.964 40.088l67.736 67.717c9.956 9.956 15.436 23.211 15.436 37.281 0 14.089-5.48 27.326-15.436 37.3l-86.338 86.338c-19.911 19.911-54.632 19.949-74.581 0l-67.717-67.717c-10.885-10.866-25.903-13.9-40.088-7.983-14.222 5.897-22.699 18.584-22.699 33.982v95.801c0 29.070-23.647 52.717-52.717 52.717h-122.121c-29.070 0-52.717-23.647-52.717-52.717v-95.801c0-15.398-8.476-28.084-22.699-33.982-14.184-5.935-29.203-2.882-40.088 7.983l-67.717 67.717c-19.949 19.949-54.67 19.911-74.581 0l-86.338-86.338c-9.956-9.956-15.436-23.211-15.436-37.3 0-14.071 5.48-27.307 15.436-37.281l67.736-67.717c10.866-10.885 13.843-25.865 7.964-40.088s-18.584-22.699-33.982-22.699h-95.801c-29.070 0-52.717-23.647-52.717-52.717v-122.103c0-29.089 23.647-52.736 52.717-52.736h95.801c15.398 0 28.084-8.476 33.982-22.699s2.901-29.203-7.964-40.088l-67.736-67.717c-9.956-9.956-15.436-23.211-15.436-37.281 0-14.089 5.48-27.326 15.436-37.3l86.338-86.338c19.93-19.93 54.632-19.968 74.581 0l67.717 67.736c10.885 10.866 25.847 13.862 40.088 7.964 14.222-5.897 22.699-18.584 22.699-33.982v-95.801c0-29.070 23.647-52.717 52.717-52.717h122.103c29.070 0 52.717 23.647 52.717 52.717v95.801c0 15.398 8.476 28.084 22.699 33.982 14.241 5.916 29.203 2.901 40.088-7.964l67.717-67.736c19.949-19.949 54.67-19.911 74.581 0l86.338 86.338c9.956 9.956 15.436 23.211 15.436 37.3 0 14.071-5.48 27.307-15.436 37.281l-67.736 67.717c-10.866 10.885-13.843 25.865-7.964 40.088s18.603 22.699 34.001 22.699h95.801c29.070 0 52.717 23.647 52.717 52.717v122.121c0 29.070-23.647 52.717-52.717 52.717zM986.074 386.939c0-8.154-6.637-14.791-14.791-14.791h-95.801c-30.796 0-57.249-17.673-69.025-46.118-11.795-28.444-5.594-59.657 16.194-81.427l67.736-67.717c5.784-5.784 5.784-15.17 0-20.935l-86.338-86.338c-5.765-5.765-15.151-5.803-20.935 0l-67.717 67.736c-21.788 21.788-52.983 27.951-81.427 16.194-28.444-11.776-46.118-38.229-46.118-69.025v-95.801c0-8.154-6.637-14.791-14.791-14.791h-122.121c-8.154 0-14.791 6.637-14.791 14.791v95.801c0 30.796-17.673 57.249-46.118 69.025-9.538 3.963-19.361 5.897-29.070 5.897-19.228 0-37.869-7.585-52.357-22.073l-67.717-67.736c-5.803-5.803-15.189-5.765-20.935 0l-86.338 86.338c-5.784 5.784-5.784 15.17 0 20.935l67.736 67.717c21.769 21.769 27.989 52.983 16.194 81.427-11.776 28.425-38.229 46.099-69.025 46.099h-95.801c-8.154 0-14.791 6.637-14.791 14.791v122.121c0 8.154 6.637 14.791 14.791 14.791h95.801c30.796 0 57.249 17.673 69.025 46.118 11.795 28.444 5.594 59.657-16.194 81.427l-67.736 67.717c-5.784 5.784-5.784 15.17 0 20.935l86.338 86.338c5.765 5.784 15.151 5.784 20.935 0l67.717-67.717c21.751-21.751 52.945-27.989 81.427-16.194 28.444 11.757 46.118 38.21 46.118 69.006v95.801c0 8.154 6.637 14.791 14.791 14.791h122.103c8.173 0 14.81-6.637 14.81-14.791v-95.801c0-30.796 17.673-57.249 46.118-69.025 28.482-11.795 59.657-5.575 81.427 16.194l67.717 67.717c5.803 5.784 15.189 5.784 20.935 0l86.338-86.338c5.784-5.784 5.784-15.17 0-20.935l-67.736-67.717c-21.769-21.769-27.989-52.983-16.194-81.427 11.776-28.444 38.229-46.118 69.025-46.118h95.801c8.154 0.019 14.791-6.618 14.791-14.772v-122.121zM512 618.667c-94.113 0-170.667-76.553-170.667-170.667s76.553-170.667 170.667-170.667c94.113 0 170.667 76.553 170.667 170.667s-76.553 170.667-170.667 170.667zM512 315.259c-73.178 0-132.741 59.563-132.741 132.741s59.563 132.741 132.741 132.741c73.178 0 132.741-59.563 132.741-132.741s-59.563-132.741-132.741-132.741z" />
index b8c3e01..94a4d73 100755 (executable)
Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.ttf differ
index 169d6d6..b989b33 100755 (executable)
Binary files a/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff and b/cds-ui/designer-client/src/assets/icomoon/fonts/icomoon.woff differ
index 945d9d3..5b11e4c 100755 (executable)
@@ -1,10 +1,10 @@
 @font-face {
   font-family: 'icomoon';
-  src:  url('fonts/icomoon.eot?rdm62r');
-  src:  url('fonts/icomoon.eot?rdm62r#iefix') format('embedded-opentype'),
-    url('fonts/icomoon.ttf?rdm62r') format('truetype'),
-    url('fonts/icomoon.woff?rdm62r') format('woff'),
-    url('fonts/icomoon.svg?rdm62r#icomoon') format('svg');
+  src:  url('fonts/icomoon.eot?mwwfrv');
+  src:  url('fonts/icomoon.eot?mwwfrv#iefix') format('embedded-opentype'),
+    url('fonts/icomoon.ttf?mwwfrv') format('truetype'),
+    url('fonts/icomoon.woff?mwwfrv') format('woff'),
+    url('fonts/icomoon.svg?mwwfrv#icomoon') format('svg');
   font-weight: normal;
   font-style: normal;
   font-display: block;
@@ -13,7 +13,7 @@
 [class^="icon-"], [class*=" icon-"] {
   /* use !important to prevent issues with browser extensions that change fonts */
   font-family: 'icomoon' !important;
-  speak: none;
+  speak: never;
   font-style: normal;
   font-weight: normal;
   font-variant: normal;
@@ -35,6 +35,9 @@
   -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-rectangle:before {
+  content: "\e906";
+}
 .icon-file:before {
   content: "\e905";
   color: #1b3e6f;