Merge remote-tracking branch 'origin/new-theme' into new-theme-linking

claims/claim-utils/claimContextSearchForm.component.html

@@ -4,32 +4,27 @@
       <div class="uk-width-expand">
 
         <div class="uk-grid uk-flex uk-flex-middle">
-          <div class="uk-width-1-2">
-            Select communities to link to
-          </div>
-          <div class="uk-width-1-2">
-            <div class="uk-margin">
-              <div class="uk-inline">
-                <span class="uk-form-icon uk-icon"  ><svg width="20" height="20" viewBox="0 0 20 20"
-                                                          xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
-                <input class=" uk-input  uk-width-medium" [(ngModel)]="keyword" name="keyword"
-                       placeholder="Search communities..."/>
-                <span *ngIf="keyword.length > 0" class="uk-margin-small-right uk-icon" style="cursor: pointer;"
-                      (click)="keyword='';">
-                    <svg width="20" height="20" viewBox="0 0 20 20"
-                         xmlns="http://www.w3.org/2000/svg" data-svg="close"><path fill="none" stroke="#000"
-                                                                                   stroke-width="1.06"
-                                                                                   d="M16,16 L4,4"></path><path
-                      fill="none"
-                      stroke="#000"
-                      stroke-width="1.06"
-                      d="M16,4 L4,16"></path></svg>
-                </span>
-              </div>
+          <div class="uk-margin">
+            <div class="uk-inline">
+              <claim-enities-selection *ngIf="showOptions && showOptions.linkToEntities.length > 0"
+                                       [showOptions]="showOptions"></claim-enities-selection>
+              <span class="uk-form-icon uk-icon"  ><svg width="20" height="20" viewBox="0 0 20 20"
+                                                        xmlns="http://www.w3.org/2000/svg" icon="search" ratio="1"><circle fill="none" stroke="#000" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="#000" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg></span>
+              <input class=" uk-input  uk-width-medium" [(ngModel)]="keyword" name="keyword"
+                     placeholder="Search communities..."/>
+              <span *ngIf="keyword.length > 0" class="uk-margin-small-right uk-icon" style="cursor: pointer;"
+                    (click)="keyword='';">
+                  <svg width="20" height="20" viewBox="0 0 20 20"
+                       xmlns="http://www.w3.org/2000/svg" data-svg="close"><path fill="none" stroke="#000"
+                                                                                 stroke-width="1.06"
+                                                                                 d="M16,16 L4,4"></path><path
+                    fill="none"
+                    stroke="#000"
+                    stroke-width="1.06"
+                    d="M16,4 L4,16"></path></svg>
+              </span>
             </div>
-
           </div>
-
         </div>
         <div class="uk-margin-right uk-padding">
         <span *ngFor="let community of communities" [title]="(this.results.length>=basketLimit)?'Basket reached the size limit':''">

claims/claim-utils/claimContextSearchForm.component.ts

@@ -21,6 +21,7 @@ export class ClaimContextSearchFormComponent {
   @Input() communityId: string = null;
   @Input() public inlineClaim: boolean = false;
   @Input() basketLimit;
+  @Input() showOptions;
 
   public selectedCommunityId: string = "0";
   public selectedCategoryId: string = "0";

claims/claim-utils/claimContextSearchForm.module.ts

@@ -5,12 +5,13 @@ import { ClaimContextSearchFormComponent } from './claimContextSearchForm.compon
  import {StaticAutocompleteModule} from '../../utils/staticAutoComplete/staticAutoComplete.module';
  import { RouterModule } from '@angular/router';
  import {HelperModule} from '../../utils/helper/helper.module';
+import {ClaimProjectsSearchFormModule} from "./claimProjectSearchForm.module";
 
 @NgModule({
   imports: [
-    SharedModule,RouterModule,
+    SharedModule, RouterModule,
     StaticAutocompleteModule,
-    HelperModule
+    HelperModule, ClaimProjectsSearchFormModule
 
   ],
   declarations: [

claims/claim-utils/claimEntitiesSelection.component.ts

@@ -0,0 +1,37 @@
+import {Component, Input, ViewChild} from '@angular/core';
+import {ShowOptions} from './claimHelper.class';
+import {MatSelect} from "@angular/material/select";
+
+ 
+@Component({
+    selector: 'claim-enities-selection',
+
+    template:`
+       <span *ngIf="showOptions && showOptions.linkToEntities && showOptions.linkToEntities.length > 0"
+            class=" entitiesSelection portal-box uk-text-small clickable" style=""
+            (click)="open()">
+      <mat-select  [(value)]="showOptions.show"
+                   [disableOptionCentering]="true" >
+  
+        <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1" value="result">Research outcomes</mat-option>
+        <mat-option  *ngIf="showOptions.linkToEntities.indexOf('project')!=-1" value="project">Projects</mat-option>
+        <mat-option  *ngIf="showOptions.linkToEntities.indexOf('context')!=-1" value="context">Research communities</mat-option>
+        
+      </mat-select>
+  
+      
+     </span>
+    `,
+
+})
+export class ClaimEntitiesSelectionComponent{
+  @ViewChild(MatSelect) matSelect: MatSelect;
+  @Input() showOptions:ShowOptions = new ShowOptions();
+   
+  open() {
+    if (this.matSelect && !this.matSelect.focused) {
+      this.matSelect.open();
+    }
+  }
+ 
+}

claims/claim-utils/claimHelper.class.ts

@@ -142,9 +142,9 @@ export class ShowOptions {
   show: string;   //show values: source, result, project, context, claim
   linkTo: string;   // linkTo /values: result, project, context
   linkToEntities: string[];   // show linkToEntities /values: result, project, context
-  basketShowSources: boolean;
-  basketShowLinksTo: boolean;
-
+  basketShowSources: boolean = true;
+  basketShowLinksTo: boolean = false;
+ 
   constructor() {
     this.show = "source";
     this.linkTo = "project";
@@ -155,23 +155,24 @@ export class ShowOptions {
 
   showSource() {
     this.show = "source";
+    this.basketswitchToSources();
+    HelperFunctions.scroll();
+  }
+  basketswitchToSources() {
     this.basketShowLinksTo = false;
-    this.basketShowSources = true;
-    HelperFunctions.scroll();
+    this.basketShowSources = true;  
   }
-
-  showLinkTo() {
-    this.show = this.linkTo;
+  basketswitchToLinkTo() {
     this.basketShowLinksTo = true;
-    this.basketShowSources = false;
+    this.basketShowSources = false;  
+  }
+  showLinkTo() {
+    console.log(this.linkTo, "showLinkTo")
+    this.show = this.linkTo;
+    this.basketswitchToLinkTo();
     HelperFunctions.scroll();
 
   }
 
-  showBasketSources() {
-    if (this.show != 'source') {
-      this.basketShowSources = !this.basketShowSources;
-      this.basketShowLinksTo = !this.basketShowSources;
-    }
-  }
+ 
 }

claims/claim-utils/claimProjectSearchForm.component.html

@@ -1,10 +1,8 @@
 <form class="  uk-margin-top uk-animation ">
-  <div class="uk-margin-small-bottom">Start searching for projects and add them to the basket to link them to your sources
-    <!-- <helper  div="link-project-form"   tooltip=true></helper>  -->
-  </div>
+ 
 
-<!--  <input class=" uk-input  uk-width-large" [(ngModel)]="keyword" name="keyword" placeholder="Search for projects..."/>-->
-  <div class="uk-inline">
+   <div class="uk-inline">
+    <claim-enities-selection *ngIf="showOptions && showOptions.linkToEntities.length > 0" [showOptions]="showOptions"></claim-enities-selection>
     <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip"
        (click)="keyword = ''"
        uk-icon="icon: close"></a>
@@ -34,40 +32,9 @@
   </div>
 
   <div class="uk-grid">
-    <div class="search-filters uk-width-medium">
-      <!-- <div   class="uk-width-1-1   uk-margin-small-bottom ">
-
-        <div *ngIf="countFilters()>0" class="uk-margin-small-bottom">
-
-          <span *ngIf = "searchUtils.keyword.length > 0"><span class="uk-text-bold">Keywords:</span>
-          <a (click) = "clearKeywords() " title="Remove keywords" [class]="((disableForms)?'  uk-disabled':'  ')+'  portal-color '"><span class=" clickable " aria-hidden="true"><span class="uk-icon ">
-            <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-            </span></span></a>
-          <span [innerHtml]="searchUtils.keyword"></span>
-
-          </span>
-          <div *ngFor="let filter of filters " >
-            <span *ngIf = "filter.countSelectedValues > 0"> <span class="uk-text-bold">{{filter.title}}:</span>
-              <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; " >
-                <a [title]="'Remove '+value.name"(click) = "removeFilter(value, filter) " [class]="((disableForms)?'  uk-disabled':'  ')+'  portal-color '"><span class=" clickable" aria-hidden="true"><span class="uk-icon">
-                  <svg width="16" height="16" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="close" ratio="0.8"><path fill="none" stroke="#000" stroke-width="1.6" d="M16,16 L4,4"></path><path fill="none" stroke="#000" stroke-width="1.6" d="M16,4 L4,16"></path></svg>
-                  </span></span></a>
-                <span [innerHtml]="(value.name.length > 25)?value.name.substring(0,25)+'...':value.name" [title]="value.name"></span><span *ngIf="!end" class="   ">, </span>
-              </span>
-            </span>
-          </div>
-
-
-        </div>
-
-       <div class="uk-margin-small-bottom uk-margin-small-top uk-grid">
-         <a  *ngIf="countFilters()>1" (click)="clearFilters()" [class]="((disableForms)?'uk-disabled uk-link-muted':'')+'  portal-link ' + 'uk-width-1-2'">
-           Clear All
-         </a>
-
-      </div>
-      </div> -->
-      <div *ngIf="countFilters()>0"  class="uk-grid uk-flex uk-flex-bottom">
+    <div class="search-filters uk-width-1-1">
+  
+      <!--<div *ngIf="countFilters()>0 && openaireResultsNum > 0"  class="uk-grid uk-flex uk-flex-bottom">
         <div class="uk-grid">
           <h6 class="uk-text-bold">Filters</h6>
           <a *ngIf="countFilters()>1"  (click)="clearFilters()"
@@ -99,7 +66,7 @@
             <ng-container *ngIf = "filter.countSelectedValues > 0">
                <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "
                      [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
-                        <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
+                        &lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;
                         <span class="selectedFilterLabel ">
                           <a [class]="((openaireResultsStatus ==
                             errorCodes.LOADING)?'  uk-disabled':'  ')+' uk-link-text '">
@@ -115,59 +82,49 @@
             </ng-container>
           </ng-container>
         </div>
-      </div>
+      </div>-->
 
-      <!--<ul class="uk-list">
-        <li class="uk-open">
-          <h6 class="uk-margin-bottom-remove ">Active between
-          </h6>
-          <div aria-expanded="false">
-            <div class="searchFilterBoxValues ">
-              <form class="uk-inline">
-
-                <input class=" uk-input  uk-width-2-5" [(ngModel)]="startYear" name="keyword"
-                       placeholder="Year (e.g 1990)"/>
-                <input class=" uk-input  uk-width-2-5" [(ngModel)]="endYear" name="keyword"
-                       placeholder="Year (e.g 1990)"/>
-                <button type="submit" (click)="yearChanged()" style="cursor: pointer;" class="uk-icon"><svg width="20"
-                                                                                                   height="20"
-                                                                                            viewBox="0 0 20 20"
-                                                                                            xmlns="http://www.w3.org/2000/svg"
-                                                                                            icon="chevron-right"
-                                                                                            ratio="1"><polyline
-                  fill="none" stroke="#000" stroke-width="1.03" points="7 4 13 10 7 16"></polyline></svg></button>
-
-              </form>
+      <ng-container *ngIf="openaireResultsNum > 0">
+        <ng-container *ngFor="let filter of rangeFilters">
+  
+          <div class="uk-inline">
+            <button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
+                    type="button"><span *ngIf="!filter.selectedFromAndToValues">{{filter.title}}</span><span *ngIf="filter.selectedFromAndToValues">{{filter.selectedFromAndToValues}}</span><span uk-icon="chevron-down"></span></button>
+            <div uk-dropdown="mode: click" class="uk-width-large"  style="max-width:460px !important;">
+              <div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
+                <range-filter [isDisabled]="openaireResultsStatus ==
+                            errorCodes.LOADING" [filter]="filter" (onFilterChange)="dateFilterChanged(filter)"
+                            [showQuickButtons]="false" 
+                ></range-filter>
+              </div>
             </div>
           </div>
-        </li>
-      </ul>-->
-      <ng-container *ngFor="let filter of rangeFilters">
-        <li>
-          <range-filter [isDisabled]="openaireResultsStatus ==
-                            errorCodes.LOADING" [filter]="filter" (onFilterChange)="dateFilterChanged(filter)"
-                        [showQuickButtons]="false"
-          ></range-filter>
-        </li>
+  
+  
+        </ng-container>
+  
+        <ng-container *ngFor="let filter of filters ">
+          <div class="uk-inline">
+            <button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
+                    type="button">{{filter.title}}<span *ngIf="filter.countSelectedValues>0"> ({{filter.countSelectedValues}})</span><span uk-icon="chevron-down"></span></button>
+            <div uk-dropdown="mode: click" class="uk-width-large uk-overflow-auto" style="max-width:460px !important; ">
+              <div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
+                <search-filter  [isDisabled]="openaireResultsStatus ==
+                              errorCodes.LOADING" [filter]="filter"
+                              [showResultCount]=true filterValuesNum="0"
+                              (onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
+              </div>
+            </div>
+          </div>
+        </ng-container>
       </ng-container>
-      <search-filter *ngFor="let filter of filters " [isDisabled]="false" [filter]="filter" [showResultCount]=true
-                     (onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
     </div>
     <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
-     <!-- <div *ngIf="openaireResultsNum != null && openaireResultsNum > 0" class="uk-clearfix portal-hr ">
-        <div class="uk-grid">
-          <div *ngIf="openaireResultsNum>0" class="uk-width-1-2">
-            <span class="portal-color">{{openaireResultsNum|number}}</span> projects, page <span
-            class="portal-color">{{openaireResultsPage | number}}</span> of <span
-            class="portal-color">{{totalPages(openaireResultsNum)|number}}</span>
-          </div>
-          <div class="uk-width-1-2  uk-padding-remove">
-            <paging-no-load class="uk-float-right" [currentPage]="openaireResultsPage"
-                            [totalResults]="openaireResultsNum" [term]="keyword" [size]="size"
-                            (pageChange)="openaireResultsPageChange($event)"></paging-no-load>
-          </div>
-        </div>
-      </div>-->
+      
+      <div *ngIf="openaireResultsStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1"
+           role="alert"><span class="loading-gif  uk-align-center"></span></div>
+      <claim-results [localStoragePrefix]="localStoragePrefix" [results]=openaireResults
+                     [selectedResults]=selectedProjects [basketLimit]="basketLimit"></claim-results>
       <div *ngIf="openaireResultsNum != null && openaireResultsNum > 0" class="uk-clearfix  ">
         <div class= "paging-hr searchPaging uk-margin-small-bottom"
              *ngIf="(openaireResultsNum > 0) || (openaireResultsStatus == errorCodes.LOADING)">
@@ -188,10 +145,6 @@
           </div>
         </div>
       </div>
-      <div *ngIf="openaireResultsStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1"
-           role="alert"><span class="loading-gif  uk-align-center"></span></div>
-      <claim-results [localStoragePrefix]="localStoragePrefix" [results]=openaireResults
-                     [selectedResults]=selectedProjects [basketLimit]="basketLimit"></claim-results>
     </div>
   </div>
 </div>

claims/claim-utils/claimProjectSearchForm.component.ts

@@ -39,6 +39,7 @@ export class ClaimProjectsSearchFormComponent {
   @Input() public inlineClaim:boolean=false;
   @Input()  localStoragePrefix:string = "";
   @Input() basketLimit;
+  @Input() showOptions;
 
   public errorCodes:ErrorCodes = new ErrorCodes();
   public projects:string[];

claims/claim-utils/claimProjectSearchForm.module.ts

@@ -16,20 +16,23 @@ import {ClaimResultsModule} from './claimResults.module';
 import {PagingModule } from '../../utils/paging.module';
 import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.module';
 import {RangeFilterModule} from "../../utils/rangeFilter/rangeFilter.module";
+import {ClaimEntitiesSelectionComponent} from "./claimEntitiesSelection.component";
+import {MatSelectModule} from "@angular/material/select";
 
  @NgModule({
    imports: [
      SharedModule, CommonModule,
      // LoadingModalModule,
      ProjectServiceModule, ProjectsServiceModule, EntitiesAutocompleteModule, HelperModule,
-     PagingModule, SearchFilterModule, ClaimResultsModule, RangeFilterModule
+     PagingModule, SearchFilterModule, ClaimResultsModule, RangeFilterModule, MatSelectModule
    ],
   providers:[
   ],
-  declarations: [
-    ClaimProjectsSearchFormComponent
+   declarations: [
+     ClaimProjectsSearchFormComponent,
+     ClaimEntitiesSelectionComponent
 
-  ],
-  exports: [ClaimProjectsSearchFormComponent ]
-})
+   ],
+   exports: [ClaimProjectsSearchFormComponent, ClaimEntitiesSelectionComponent]
+ })
 export class ClaimProjectsSearchFormModule { }

claims/claim-utils/claimResultSearchForm.component.html

@@ -1,11 +1,12 @@
 <form class="  uk-margin-top">
-  <div class="uk-margin-small-bottom">Start searching Research Outcomes and add them to the Basket to Link
-    <!-- <helper  div="link-entity-form" styleName="" tooltip=true></helper>  -->
-  </div>
+<!--  <div class="uk-margin-small-bottom">Start searching Research Outcomes and add them to the Basket to Link
+    &lt;!&ndash; <helper  div="link-entity-form" styleName="" tooltip=true></helper>  &ndash;&gt;
+  </div>-->
+
 
-<!--  <input class=" uk-input uk-width-large   form-control" [(ngModel)]="keyword" name="keyword"-->
-<!--         placeholder="Search for research outcomes..."/>-->
   <div class="uk-inline">
+    <claim-enities-selection *ngIf="showOptions && showOptions.linkToEntities.length > 0" 
+                             [showOptions]="showOptions"></claim-enities-selection>
     <a *ngIf="keyword.length > 0" class="uk-form-icon uk-form-icon-flip"
        (click)="keyword = ''"
        uk-icon="icon: close"></a>
@@ -14,7 +15,7 @@
            [(ngModel)]="keyword" name="keyword">
   </div>
   <span class="input-group-btn space">
-    <button (click)="search(true)" type="submit" class=" uk-button portal-button">Search</button>
+    <button (click)="search(true)" type="submit" class=" uk-button uk-button-primary">Search</button>
   </span>
 
   <!--helper  div="link-entity-form" styleName="uk-width-medium"></helper-->
@@ -22,7 +23,7 @@
 </form>
 <div *ngIf="!showSearchResults">
   <div class="uk-text-center uk-text-large uk-text-muted uk-margin-large-top">
-    No research outcomes yet...<br>Start searching for research outcomes to add them in the Basket
+    No sources yet...<br>Use the searchbar and find linking sources.
   </div>
 </div>
 <div *ngIf="showSearchResults" class="uk-margin-top uk-animation">
@@ -60,7 +61,7 @@
             class="portal-color">{{countTotalPages(crossrefResultsNum)|number}}</span>
 
           </div>-->
-          <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase"
+<!--          <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase"
                *ngIf="crossrefResultsNum > 0">
             {{crossrefResultsNum|number}}
             <span class="uk-text-muted uk-text-uppercase"> research outcomes, page </span>
@@ -72,7 +73,7 @@
             <paging-no-load class="uk-float-right" [currentPage]="crossrefPage" [totalResults]="crossrefResultsNum"
                             [term]="keyword"
                             [size]="size" (pageChange)="crossrefPageChange($event)"></paging-no-load>
-          </div>
+          </div>-->
         </div>
       </div>
       <div *ngIf="crossrefStatus === errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1"
@@ -82,14 +83,18 @@
         <claim-results [localStoragePrefix]=localStoragePrefix [results]=crossrefResults
                        [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
       </div>
+      <paging-no-load  *ngIf="crossrefStatus != errorCodes.LOADING && crossrefResultsNum>0 "  class="uk-float-right" 
+                       [currentPage]="crossrefPage" [totalResults]="crossrefResultsNum"
+                      [term]="keyword"
+                      [size]="size" (pageChange)="crossrefPageChange($event)"></paging-no-load>
     </div>
   </div>
   <div *ngIf="activeTab == 'openaire'" id="openaire" class="uk-animation-fade">
 
     <div class="uk-grid">
 
-      <div class="search-filters  uk-width-medium">
-        <div *ngIf="countFilters()>0"  class="uk-grid uk-flex uk-flex-bottom">
+      <div class="search-filters  uk-width-1-1">
+        <!--<div *ngIf="countFilters()>0"  class="uk-grid uk-flex uk-flex-bottom">
           <div class="uk-grid">
             <h6 class="uk-text-bold">Filters</h6>
             <a *ngIf="countFilters()>1"  (click)="clearFilters()"
@@ -121,7 +126,7 @@
               <ng-container *ngIf = "filter.countSelectedValues > 0">
                <span *ngFor="let value of getSelectedValues(filter); let i = index;  let end = last; "
               [title]="'Remove '+value.name" (click) = "removeFilter(value, filter) " >
-                        <!-- if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span -->
+                        &lt;!&ndash; if no grid on the div above, remove it and move class 'selectedFilterLabel' on top span &ndash;&gt;
                         <span class="selectedFilterLabel ">
                           <a [class]="((openaireResultsStatus ==
                             errorCodes.LOADING)?'  uk-disabled':'  ')+' uk-link-text '">
@@ -137,52 +142,44 @@
               </ng-container>
             </ng-container>
           </div>
-        </div>
-        <!-- Type filter-->
-        <ul class="uk-list"    >
-          <!--<li class="uk-open uk-margin-small-bottom">
-            <h6 class="uk-margin-bottom-remove ">Result Type (4)
-            </h6>
-            <div aria-expanded="false">
-              <div class="searchFilterBoxValues ">
-                <div *ngFor="let type of openaireTypeValues" class="uk-animation-fade filterItem">
-
-                  <div title="{{type.title}}">
-                    <input [value]="type.value" [(ngModel)]="openaireResultsType" [name]=type.value
-                           type="radio" (ngModelChange)="openaireTypeChanged(type.value)"/>
-                    {{_formatName(type.title,type.count)}}
-                    <span *ngIf="type.count!=null">{{' (' + (type.count|number) + ')'}}</span>
-                  </div>
-
+        </div>-->
+        <ng-container *ngIf="openaireResultsNum > 0">
+        <ng-container *ngFor="let filter of rangeFilters">
+      
+            <div class="uk-inline">
+              <button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
+                      type="button">{{filter.title}}<span uk-icon="chevron-down"></span></button>
+              <div uk-dropdown="mode: click" class="uk-width-large" style="max-width:460px !important;" >
+                <div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
+                  <range-filter [isDisabled]="openaireResultsStatus ==
+                            errorCodes.LOADING" [filter]="filter" (onFilterChange)="dateFilterChanged(filter)"
+                                [showQuickButtons]="false"
+                  ></range-filter>
                 </div>
               </div>
             </div>
-          </li>-->
-
-          <ng-container *ngFor="let filter of rangeFilters">
-            <li>
-              <range-filter [isDisabled]="openaireResultsStatus ==
-                            errorCodes.LOADING" [filter]="filter" (onFilterChange)="dateFilterChanged(filter)"
-                            [showQuickButtons]="false"
-              ></range-filter>
-            </li>
-          </ng-container>
-
-        </ul>
-
-        <search-filter *ngFor="let filter of openaireResultsfilters " [isDisabled]="openaireResultsStatus ==
-                            errorCodes.LOADING" [filter]="filter"
-                       [showResultCount]=true
-                       (onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
+           
+       
+        </ng-container>
+        
+        <ng-container *ngFor="let filter of openaireResultsfilters ">
+          <div class="uk-inline">
+            <button class="uk-button uk-button-default uk-button-small uk-margin-small-right uk-margin-small-bottom "
+                    type="button">{{filter.title}}<span *ngIf="filter.countSelectedValues>0"> ({{filter.countSelectedValues}})</span><span uk-icon="chevron-down"></span></button>
+            <div uk-dropdown="mode: click" class=" uk-width-large  uk-height-max-large " style="max-width:460px !important;">
+              <div class="uk-padding-small uk-overflow-auto uk-height-max-large uk-height-min-medium">
+                <search-filter  [isDisabled]="openaireResultsStatus ==
+                              errorCodes.LOADING" [filter]="filter" [filterValuesNum]="0"
+                               [showResultCount]=true
+                               (onFilterChange)="filterChanged($event)" [actionRoute]="false"></search-filter>
+              </div>
+            </div>
+          </div>
+        </ng-container>
+        </ng-container>
       </div>
       <div class="uk-width-expand@m uk-width-1-1@s uk-first-column">
-        <div class="uk-margin-top">
-      <!--    <quick-selections    [resultTypes]="resultTypes"
-                            (typeChange)="openaireTypeChanged()"  [isDisabled]="openaireResultsStatus ==
-                            errorCodes.LOADING"
-                            [quickFilter]="quickFilter" [QFselected]="(quickFilter)?quickFilter.selected:null"
-                            [properties]="properties">
-          </quick-selections>-->
+        <div class="">
           <div *ngIf="openaireResultsStatus == errorCodes.NONE" class="uk-alert uk-alert-primary"
                role="alert">No Results found
           </div>
@@ -192,31 +189,17 @@
           <div *ngIf="openaireResultsStatus == errorCodes.NOT_AVAILABLE" class="uk-alert uk-alert-danger"
                role="alert">Service not available
           </div>
-          <div *ngIf="openaireResultsNum != null && openaireResultsNum > 0" class="uk-clearfix  ">
-            <div class= "paging-hr searchPaging uk-margin-small-bottom"
-                 *ngIf="(openaireResultsNum > 0) || (openaireResultsStatus == errorCodes.LOADING)">
-              <div class="uk-panel uk-margin-small-top uk-grid  uk-flex uk-flex-middle">
-                <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase"
-                     *ngIf="openaireResultsNum > 0">
-                  <span class="uk-text-bold">{{openaireResultsNum|number}}</span>
-                  <span class="uk-text-muted uk-text-uppercase"> research outcomes, page </span>
-                  <span class="uk-text-bold">{{openaireResultsPage | number}}</span>
-                  <span class="uk-text-muted uk-text-uppercase"> of </span>
-                  <span class="uk-text-bold">{{(countTotalPages(openaireResultsNum)|number)}}</span>
-                </div>
-                <div class="float-children-right-at-medium margin-small-top-at-small uk-width-expand uk-padding-remove-left" *ngIf=" openaireResultsStatus != errorCodes.LOADING">
-                  <paging-no-load class="uk-float-right" [currentPage]="openaireResultsPage"
-                                  [totalResults]="openaireResultsNum" [term]="keyword"
-                                  [size]="size" (pageChange)="openaireResultsPageChange($event)"></paging-no-load>
-                </div>
-              </div>
-            </div>
-          </div>
+
           <div *ngIf="openaireResultsStatus === errorCodes.LOADING"
                class="uk-animation-fade uk-margin-top  uk-width-1-1"
-               role="alert"><span class="loading-gif  uk-align-center"></span></div>
+               role="alert"><span class="loading-gif  uk-align-center">Loading...</span></div>
           <claim-results [localStoragePrefix]=localStoragePrefix
                          [results]=openaireResults [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
+          <div  class="float-children-right-at-medium margin-small-top-at-small uk-width-expand uk-padding-remove-left" *ngIf=" openaireResultsStatus != errorCodes.LOADING  && openaireResultsNum != null && openaireResultsNum > 0" >
+            <paging-no-load class="uk-float-right" [currentPage]="openaireResultsPage"
+                            [totalResults]="openaireResultsNum" [term]="keyword"
+                            [size]="size" (pageChange)="openaireResultsPageChange($event)"></paging-no-load>
+          </div>
         </div>
       </div>
     </div>
@@ -231,30 +214,7 @@
       <div *ngIf="orcidStatus == errorCodes.NONE && orcidResultsNum == -1"
            class="uk-alert uk-alert-primary "> No results found
       </div>
-      <div *ngIf=" ((orcidResultsNum >0) && (totalPages > 1) && ( 0 < page &&  page <= totalPages )) "
-           class="uk-clearfix">
-        <div class="uk-grid">
-          <!--<div *ngIf="orcidResultsNum>0" class="uk-width-1-2">
-            <span class="portal-color">{{orcidResultsNum|number}}</span> research outcomes, page <span
-            class="portal-color">{{orcidPage | number}}</span> of <span
-            class="portal-color">{{countTotalPages(orcidResultsNum)|number}}</span>
-
-          </div>-->
-          <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase"
-               *ngIf="orcidResultsNum > 0">
-            {{orcidResultsNum|number}}
-            <span class="uk-text-muted uk-text-uppercase"> research outcomes, page </span>
-            {{orcidPage | number}}
-            <span class="uk-text-muted uk-text-uppercase"> of </span>
-            {{(countTotalPages(orcidResultsNum)|number)}}
-          </div>
-          <div class="uk-width-1-2 uk-padding-remove-left">
-            <paging-no-load class="uk-float-right" [currentPage]="orcidPage" [totalResults]="orcidResultsNum"
-                            [term]="keyword" [size]="size"
-                            (pageChange)="orcidPageChange($event)"></paging-no-load>
-          </div>
-        </div>
-      </div>
+      
       <div *ngIf="orcidResultsNum >= 0" class="panel-body">
                <span><span class="uk-text-bold">Showing results for</span>
                  <a target="_blank" href="http://orcid.org/{{authorId}}"> <span
@@ -284,6 +244,15 @@
                          [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
           <div *ngIf="orcidResultsNum == 0" class="uk-alert uk-alert-primary uk-margin-top"> No results found</div>
         </div>
+        <div *ngIf=" ((orcidResultsNum >0) && (totalPages > 1) && ( 0 < page &&  page <= totalPages )) "
+             class="uk-clearfix">
+         
+              <paging-no-load class="uk-float-right" [currentPage]="orcidPage" [totalResults]="orcidResultsNum"
+                              [term]="keyword" [size]="size"
+                              (pageChange)="orcidPageChange($event)"></paging-no-load>
+             
+        
+        </div>
       </div>
       <div *ngIf="orcidStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1" role="alert">
         <span class="loading-gif  uk-align-center"></span></div>
@@ -297,35 +266,18 @@
          role="alert">Service not available
     </div>
     <div class="uk-margin-top">
-      <div *ngIf="dataciteResultsNum != null && dataciteResultsNum > 0" class="uk-clearfix ">
-        <div class="uk-grid">
-         <!-- <div *ngIf="dataciteResultsNum>0" class="uk-width-1-2">
-            <span class="portal-color">{{dataciteResultsNum|number}}</span> research outcomes, page <span
-            class="portal-color">{{datacitePage | number}}</span> of <span
-            class="portal-color">{{countTotalPages(dataciteResultsNum)|number}}</span>
-
-          </div>-->
-          <div class="uk-width-1-1@s uk-width-1-2@m  uk-text-uppercase"
-               *ngIf="dataciteResultsNum > 0">
-            {{dataciteResultsNum|number}}
-            <span class="uk-text-muted uk-text-uppercase"> research outcomes, page </span>
-            {{datacitePage | number}}
-            <span class="uk-text-muted uk-text-uppercase"> of </span>
-            {{(countTotalPages(dataciteResultsNum)|number)}}
-          </div>
-          <div class="uk-width-1-2 uk-padding-remove-left">
-            <paging-no-load class="uk-float-right" [currentPage]="datacitePage" [totalResults]="dataciteResultsNum"
-                            [term]="keyword"
-                            [size]="size" (pageChange)="datacitePageChange($event)"></paging-no-load>
-          </div>
-        </div>
-      </div>
+      
       <div *ngIf="dataciteStatus == errorCodes.LOADING" class="uk-animation-fade uk-margin-top  uk-width-1-1"
            role="alert"><span class="loading-gif  uk-align-center"></span></div>
       <div>
         <claim-results [localStoragePrefix]=localStoragePrefix *ngIf="dataciteResults.length > 0 "
                        [results]=dataciteResults [selectedResults]=selectedResults [basketLimit]="basketLimit"></claim-results>
       </div>
+      <div *ngIf="dataciteResultsNum != null && dataciteResultsNum > 0" class="uk-clearfix ">         
+            <paging-no-load class="uk-float-right" [currentPage]="datacitePage" [totalResults]="dataciteResultsNum"
+                            [term]="keyword"
+                            [size]="size" (pageChange)="datacitePageChange($event)"></paging-no-load>
+      </div>
     </div>
   </div>
 

claims/claim-utils/claimResultSearchForm.component.ts

@@ -29,6 +29,7 @@ export class ClaimResultSearchFormComponent {
   @Input() public properties: EnvProperties;
   @Input() localStoragePrefix: string = "";
   @Input() basketLimit;
+  @Input() showOptions;
 
   public errorCodes: ErrorCodes = new ErrorCodes();
 

claims/claim-utils/claimResultSearchForm.module.ts

@@ -17,10 +17,11 @@ import {HelperModule} from '../../utils/helper/helper.module';
 import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.module';
 import {QuickSelectionsModule} from "../../searchPages/searchUtils/quick-selections.module";
 import {RangeFilterModule} from "../../utils/rangeFilter/rangeFilter.module";
+import {ClaimProjectsSearchFormModule} from "./claimProjectSearchForm.module";
 
  @NgModule({
    imports: [SharedModule, CommonModule, SearchResearchResultsServiceModule, PagingModule, SearchCrossrefServiceModule,
-     SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule, MatSelectModule, QuickSelectionsModule, RangeFilterModule],
+     SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule, MatSelectModule, QuickSelectionsModule, RangeFilterModule, ClaimProjectsSearchFormModule],
   providers:[
      SearchOrcidService
   ],

claims/claim-utils/claimResults.component.ts

@@ -7,10 +7,10 @@ declare var UIkit: any;
   selector: 'claim-results',
   template: `
 
-    <ul *ngIf="results.length > 0 " class="uk-list uk-list-divider">
-      <li *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''">
+    <div *ngIf="results.length > 0 "   class="uk-padding">
+      <div *ngFor=" let entity of results " [class]="(isSelected(entity))?'uk-block-muted':''" class=" uk-card uk-card-default uk-padding-small uk-margin-bottom">
         <div>
-          <div class="uk-text-muted">
+          <div class="uk-text-small">
             {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
           </div>
           <div class="uk-grid">
@@ -19,8 +19,8 @@ declare var UIkit: any;
               <claim-result-metadata [entity]="entity"></claim-result-metadata>
               <claim-project-metadata [entity]="entity"></claim-project-metadata>
             </div>
-            <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left" [title]="(this.selectedResults.length>=basketLimit)?'Basket reached the size limit':''">
-              <a [class]="(this.selectedResults.length>=basketLimit)?'uk-icon-button uk-disabled':'uk-icon-button'" *ngIf="!isSelected(entity)" 
+            <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left  uk-margin-small-right" [title]="(this.selectedResults.length>=basketLimit)?'Basket reached the size limit':''">
+              <a [class]="(this.selectedResults.length>=basketLimit)?'uk-icon-button uk-disabled':'uk-icon-button '" *ngIf="!isSelected(entity)" 
                  (click)="add(entity)">
                         <span class="uk-icon">
                         <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus"
@@ -28,7 +28,7 @@ declare var UIkit: any;
                                                                                             height="1"></rect></svg>
                      </span>
               </a>
-              <span *ngIf="isSelected(entity)" class="uk-icon-button portal-icon-button">
+              <span *ngIf="isSelected(entity)" class="uk-icon-button uk-button-primary ">
                      <span class="uk-icon" >
                       <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="check" ratio="1"><polyline fill="none" stroke="#000" stroke-width="1.1" points="4,10 8,15 17,4"></polyline></svg>
                      </span>
@@ -37,8 +37,8 @@ declare var UIkit: any;
           </div>
 
         </div>
-      </li>
-    </ul>`,
+      </div>
+    </div>`,
 
 })
 export class ClaimResultsComponent {

claims/linking/insertClaim/insertClaim.component.ts

@@ -20,9 +20,10 @@ import {Subscriber} from "rxjs";
   selector: 'claim-insert',
   template: `
 
-
-    <div class="uk-width-1-1">
-      <modal-loading [message]="'Please wait...'"></modal-loading>
+    <div (click)="insert()"
+        class=" nextStep uk-margin-small-top uk-padding-small uk-text-center " [class.active]="(results.length > 0 && (sources.length > 0 || inlineEntity))" [class.disabled]="!(results.length > 0 && (sources.length > 0 || inlineEntity))">
+ 
+       <modal-loading [message]="'Please wait...'"></modal-loading>
       <modal-alert (alertOutput)="confirmClose()">
         <h4 class="modal-title uk-text-bold " id="myModalLabel">Confirmation notice</h4>
         <p>All the links you provided will be published in the OpenAIRE platform. <br>
@@ -34,19 +35,11 @@ import {Subscriber} from "rxjs";
           Do you confirm the information you provide is valid?
         </p>
       </modal-alert>
-      <div class="uk-clearfix">
-
+    
         <div>
-          <div *ngIf="!claiming  " (click)="insert()" style="width: 350px;"
-               [class]="getButtonClass()">CONFIRM LINKING
-            <span [class]="(defaultColors?'':' uk-margin-small-top ')+'uk-icon uk-float-right uk-text-bold uk-margin-small-right'">
-                          <svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
-                               icon="chevron-right" ratio="1.5"><polyline fill="none" stroke="#000" stroke-width="1.03"
-                                                                          points="7 4 13 10 7 16"></polyline></svg>
-                          </span>
-          </div>
-
-        </div>
+          <span >CONFIRM LINKING
+            <span class="uk-icon uk-text-bold uk-margin-small-right" uk-icon="arrow-right"></span>
+          </span>
       </div>
     </div>
   `
@@ -93,7 +86,9 @@ export class ClaimInsertComponent {
   private errorInRecords = [];
 
   public insert() {
-    this.confirmOpen();
+    if(this.claiming) {
+      this.confirmOpen();
+    }
   }
   saveAndNavigate(){
     localStorage.setItem(this.localStoragePrefix + "results", JSON.stringify(this.results));
@@ -524,9 +519,7 @@ export class ClaimInsertComponent {
     }
     if(this.defaultColors){
       buttonClass+=" linksbaskettitles  uk-padding-small ";
-    }else{
-      buttonClass+="  uk-button  uk-button-large  ";
-    }
+    } 
     return buttonClass + "uk-text-center ";
   }
 }

claims/linking/linkingGeneric.component.html

@@ -1,3 +1,21 @@
+<breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs> 
+ <stepper>
+   <step [status]="stepStatus('source')" stepId="source" stepNumber="1"
+         [stepText]="'Find Sources'" (stepChanged)="stepHasChanged($event)"
+         [active]="this.showOptions.show" [showStepLine]="false"></step>
+<!--   <step-line [status]="stepStatus('source')"></step-line>-->
+   <step [status]="stepStatus('target')" stepId="target" [stepNumber]="inlineEntity?1:2"
+         [stepText]="'Link Source' + (inlineEntity?'':'s') + ' to Entities'"
+         (stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show"
+         [showStepLine]="true"></step>
+<!--   <step-line [status]="stepStatus('target')"></step-line>-->
+   <step [status]="stepStatus('claim')" stepId="claim" [stepNumber]="inlineEntity?2:3" 
+         [stepText]="'Summarize and finish'"
+         (stepChanged)="stepHasChanged($event)" [active]="this.showOptions.show"
+         [showStepLine]="true"></step>
+
+ </stepper>
+ 
 <metadata-preview *ngIf="showOptions.show=='claim' && properties" class="uk-margin-top"
                   [results]="results" [sources]="sources"
                   [localStoragePrefix]="localStoragePrefix" [inlineEntity]="inlineEntity"
@@ -11,11 +29,8 @@
       <schema2jsonld *ngIf="url" [URL]="url" name="Link your research outcomes" type="other"></schema2jsonld>
       <div [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
         <div>
-          <!-- <div class="uk-width-1-1">
-            <helper position="top"></helper>
-          </div> -->
+
           <div class="uk-grid  helper-grid">
-<!--            <helper position="left" styleName=" uk-width-1-5 uk-padding-left"></helper>-->
             <div class="uk-width-expand">
 
               <div *ngIf="properties" class="uk-section uk-section-default white-box-with-border uk-padding-small uk-padding-remove-top">
@@ -24,58 +39,8 @@
                      [class]="((showOptions.show == 'claim')?'':' uk-margin-top ')+' uk-container uk-container-large '">
                   <div id="basketStickTop"></div>
                   <div class="uk-grid" *ngIf="showOptions.show!='claim'"  >
-                    <div class="uk-width-2-3">
-                      <div class="uk-margin-small-bottom">
+                    <div class="uk-width-2-3 uk-padding">
 
-<!--                        <div *ngIf="showOptions.show!='source' && showOptions.show != 'claim' && showOptions.linkToEntities.length > 1">-->
-<!--                          <mat-form-field class="matSelectionFormField">-->
-<!--                            <mat-label>Sort by:</mat-label>-->
-<!--                            <mat-select [(ngModel)]="showOptions.show" class="uk-width-auto  uk-text-bold matSelection"-->
-<!--                                        *ngIf="showOptions.linkToEntities.length > 1"-->
-<!--                                        [disableOptionCentering]="true"-->
-<!--                                        panelClass="matSelectionPanel">-->
-<!--                              <mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "-->
-<!--                                          value="project">PROJECTS</mat-option>-->
-<!--                              <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH-->
-<!--                                RESULTS</mat-option>-->
-<!--                              <mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES-->
-<!--                              </mat-option>-->
-<!--                            </mat-select>-->
-<!--                          </mat-form-field>-->
-<!--                        </div>-->
-
-                          <span *ngIf="showOptions.show!='source' && showOptions.show != 'claim' && showOptions.linkToEntities.length > 1"
-                                class="uk-flex-inline uk-flex-middle uk-width-3-5@m uk-width-1-1@s">
-                            <span class="uk-width-1-4 uk-text-muted uk-text-large">LINK TO </span>
-                            <mat-select [(ngModel)]="showOptions.show" class="uk-width-3-4@m matSelection"
-                                          *ngIf="showOptions.linkToEntities.length > 1"
-                                          [disableOptionCentering]="true"
-                                          panelClass="matSelectionPanel">
-                                <mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
-                                            value="project">PROJECTS</mat-option>
-                                <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
-                                  RESULTS</mat-option>
-                                <mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
-                                </mat-option>
-                              </mat-select>
-                          </span>
-
-                           <span *ngIf="showOptions.show!='source' && showOptions.show != 'claim' && showOptions.linkToEntities.length ==1">
-                             <span>LINK TO </span>
-                             <span class=" uk-width-auto  uk-text-bold">
-                               <span *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
-                                     value="project">PROJECTS</span>
-                               <span *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
-                                 RESULTS</span>
-                               <span *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
-                               </span>
-                             </span>
-                           </span>
-                        <span *ngIf="showOptions.show=='source'" class="uk-text-bold">
-                            ADD LINKING SOURCES
-                           </span>
-
-                      </div>
                       <div *ngIf="showOptions.show=='source'">
                         <claim-result-search-form [selectedResults]="sources" [properties]=properties
                                                   [localStoragePrefix]="localStoragePrefix+'sources'" [basketLimit]="basketLimit"
@@ -83,64 +48,55 @@
                       </div>
                       <div *ngIf="showOptions.show=='project'">
                         <claim-projects-search-form [selectedProjects]="results" [properties]=properties
-                                                    [localStoragePrefix]="localStoragePrefix+'results'" [basketLimit]="basketLimit"
+                                                    [localStoragePrefix]="localStoragePrefix+'results'" 
+                                                    [basketLimit]="basketLimit" [showOptions]="showOptions"
                         ></claim-projects-search-form>
                       </div>
                       <div *ngIf="showOptions.show=='context'">
                         <claim-contexts-search-form [communityId]=communityId [results]="results" [sources]="sources"
                                                     [properties]=properties
-                                                    [localStoragePrefix]="localStoragePrefix+'results'" [basketLimit]="basketLimit"
+                                                    [localStoragePrefix]="localStoragePrefix+'results'" 
+                                                    [basketLimit]="basketLimit" [showOptions]="showOptions"
                         ></claim-contexts-search-form>
                       </div>
                       <div *ngIf="showOptions.show=='result'">
                         <claim-result-search-form [selectedResults]="results" [properties]=properties
-                                                  [localStoragePrefix]="localStoragePrefix+'results'" [basketLimit]="basketLimit"
+                                                  [localStoragePrefix]="localStoragePrefix+'results'" 
+                                                  [basketLimit]="basketLimit" [showOptions]="showOptions"
                         ></claim-result-search-form>
                       </div>
 
                     </div>
                     <!-- Basket-->
-                    <div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3" style="" >
+                    <div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3   uk-padding-remove-left "
+                         style="" >
                       <div id="basket" uk-sticky=" offset: 130; top:#basketStickTop; bottom: #basketStickBottom;"
-                           style="z-index: 0">
-                      <h6 class="linksbasketheader uk-margin-bottom uk-text-bold">
-                        LINKS BASKET
-                      </h6>
+                           style="z-index: 0" class="uk-card uk-card-default linkingBasket">
                       <div class="linksbasket uk-inline uk-width-1-1" style="">
-                        <div *ngIf="inlineEntity == null">
-                          <div class="linksbaskettitles  uk-padding-small uk-animation-toggle"
-                               (click)="showOptions.showBasketSources()"
-                               [style.cursor]="(showOptions.show!='source'?'pointer':'default')">
-                            <div class="uk-h6 uk-margin-remove portal-color" >
-                              SOURCES ({{(sources.length) | number}})
-                              <span *ngIf="showOptions.show!='source' && !showOptions.basketShowSources"
-                                    class="uk-icon"><svg width="20"
-                                                         height="20"
-                                                         viewBox="0 0 20 20"
-                                                         xmlns="http://www.w3.org/2000/svg"
-                                                         icon="chevron-left"
-                                                         ratio="1"><polyline
-                                fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span>
-                              <span *ngIf="showOptions.show!='source' &&  showOptions.basketShowSources"
-                                    class="uk-icon"><svg width="20"
-                                                         height="20"
-                                                         viewBox="0 0 20 20"
-                                                         xmlns="http://www.w3.org/2000/svg"
-                                                         icon="chevron-down"
-                                                         ratio="1"><polyline
-                                fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline></svg></span>
-                            </div>
-                            Research results to link
-                          </div>
-
-                          <div *ngIf="showOptions.basketShowSources"
+                        <div>
+                          <ul class="uk-padding-small  uk-padding-remove-bottom" uk-tab>
+                            <li 
+                              [class.uk-active]="showOptions.basketShowSources" 
+                              (click)="showOptions.basketswitchToSources()"><a 
+                              href="#">Sources to 
+                              link  
+                              ({{(sources.length  + (inlineEntity?1:0)) | 
+                                number}})
+                            </a></li>
+                            <li [class.uk-disabled]="sources.length == 0" [class.uk-active]="showOptions.basketShowLinksTo"
+                                (click)="showOptions.basketswitchToLinkTo()"><a  href="#">Link to <span 
+                              *ngIf="results.length
+                             > 0">(
+                              {{(results.length)  | number}})</span></a></li>
+                           </ul>
+                          <ul  class="uk-switcher" >
+            
+                            <li>  
+                          
+                          <div  
                                class="  uk-margin-remove-top uk-height-medium  uk-overflow-auto ">
-                            <div class="uk-background-muted uk-padding-small  " style="min-height: 17px;">
-                              <div *ngIf="showOptions.show != 'source'" class="uk-text-center">
-                                <a (click)="showOptions.showSource()">
-                                  <!--span class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="plus" ratio="1"><rect x="9" y="1" width="1" height="17"></rect><rect x="1" y="9" width="17" height="1"></rect></svg></span-->
-                                  Edit sources</a>
-                              </div>
+                            <div *ngIf="showOptions.show == 'source'" class=" uk-padding-small  " style="min-height: 
+                            17px;">
                               <start-over *ngIf="showOptions.show == 'source' && (sources.length)> 0"
                                           [results]="sources"
                                           [localStoragePrefix]="localStoragePrefix+'sources'"
@@ -154,83 +110,32 @@
                             </div>
                             <div class="uk-animation-slide-top-small  uk-padding-small">
 
-                              <div *ngIf="(sources.length) == 0 " class="uk-alert no-selected-message uk-text-center">
+                              <div *ngIf="(sources.length) == 0 && !inlineEntity " class=" uk-text-center">
                                 No Sources added yet. Start adding sources from the left panel. Or upload a DOI's CSV file.
                               </div>
                               <div *ngIf="sources.length >= basketLimit "
                                    class="uk-alert uk-alert-warning uk-text-center">
                                 Basket reached the size limit. No more sources can be added.
                               </div>
-                              <claim-selected-results [results]="sources"
+                              <claim-selected-results *ngIf="inlineEntity" [results]="[inlineEntity]"
                                                       [localStoragePrefix]="localStoragePrefix+'sources'" class=""
-                                                      [enableRemove]="showOptions.show == 'source'">
+                                                      [enableRemove]="false" type="source" >
                               </claim-selected-results>
-                              <div id="test1"></div>
-                            </div>
+                              <claim-selected-results *ngIf="sources.length > 0" [results]="sources"
+                                                      [localStoragePrefix]="localStoragePrefix+'sources'" class=""
+                                                      [enableRemove]="true" type="source">
+                              </claim-selected-results>
+                             </div>
                           </div>
-                        </div>
-                        <div *ngIf="inlineEntity"
-                             class="linkInlineEntity   uk-padding-small">
-                          <div class="uk-h6 linkInlineEntity uk-margin-small-bottom ">
-                            SOURCE
-
-                          </div>
-                          <claim-title [entity]="inlineEntity" [slice]="true" [sliceSize]="45"
-                                       [shortVersion]="true"></claim-title>
-                          <div class="uk-margin-small-top">
-                            <span class="uk-label custom-label linkInlineEntityLabel"
-                                  title="Type">{{inlineEntity.type}}</span>
-                            <span *ngIf="inlineEntity.project">
-                            <span class="uk-label custom-label linkInlineEntityLabel"
-                                  title="Funder">{{inlineEntity.project.funderName}}</span>
-                              <!--                            <span class="uk-label custom-label " title="Type">{{inlineEntity.type}}</span>-->
-                          </span>
-                            <span *ngIf="inlineEntity.result">
-                            <span class="uk-label custom-label linkInlineEntityLabel "
-                                  title="Access mode">{{inlineEntity.result.accessRights}}</span>
-                          </span>
-                          </div>
-
-                        </div>
-                        <div *ngIf="showOptions.show !='source'">
-                          <div class=" linksbaskettitles   uk-padding-small  uk-animation-toggle" (click)="showOptions.basketShowLinksTo=!showOptions.basketShowLinksTo;
-                            showOptions.basketShowSources=!showOptions.basketShowLinksTo ">
-                            <div *ngIf="!inlineEntity"> <!--Enable toggle -->
-                              <span class="uk-h6 uk-margin-remove portal-color" >
-                                  LINK TO ({{(results.length)  | number}})
-                                  <span *ngIf="!showOptions.basketShowLinksTo" class="uk-icon"><svg width="20"
-                                                                                                    height="20"
-                                                                                                    viewBox="0 0 20 20"
-                                                                                                    xmlns="http://www.w3.org/2000/svg"
-                                                                                                    icon="chevron-left"
-                                                                                                    ratio="1"><polyline
-                                    fill="none" stroke="#000" stroke-width="1.03"
-                                    points="13 16 7 10 13 4"></polyline></svg></span>
-                                  <span *ngIf="showOptions.basketShowLinksTo" class="uk-icon"><svg width="20"
-                                                                                                   height="20"
-                                                                                                   viewBox="0 0 20 20"
-                                                                                                   xmlns="http://www.w3.org/2000/svg"
-                                                                                                   icon="chevron-down"
-                                                                                                   ratio="1"><polyline
-                                    fill="none" stroke="#000" stroke-width="1.03"
-                                    points="16 7 10 13 4 7"></polyline></svg></span>
-                                </span>
-                            </div>
-                            <div *ngIf="inlineEntity"> <!--Inline Entity - no toggle -->
-                              <span class="uk-h6 uk-margin-remove portal-color">
-                                  LINK TO ({{(results.length)  | number}})
-                                  </span>
-                            </div>
-
-
-                            <div class="linksBasketSubtitles">
-                              Entities to link with the sources
-                            </div>
-                          </div>
-                          <div *ngIf="showOptions.basketShowLinksTo"
+                              
+                            </li>
+                         
+                            <li> 
+                        <div  >
+                          <div
                                class="uk-height-medium  uk-overflow-auto">
                             <div  *ngIf="  (results.length)> 0 || showOptions.show=='result'"
-                                  class="uk-background-muted uk-padding-small  " style="min-height: 17px;">
+                                  class=" uk-padding-small  " style="min-height: 17px;">
                               <start-over *ngIf="  (results.length)> 0"
                                           [results]="results" [localStoragePrefix]="localStoragePrefix+'results'"
                                           message="all results (projects, communities, research results)"
@@ -245,9 +150,9 @@
                                 Basket reached the size limit. No more entities can be added.
                               </div>
                               <claim-selected-results sectionTitle="Selected Results" [results]="results"
-                                                      [localStoragePrefix]="localStoragePrefix+'results'">
+                                                      [localStoragePrefix]="localStoragePrefix+'results'" type="target">
                               </claim-selected-results>
-                              <div *ngIf="(results.length) == 0 " class="uk-alert no-selected-message uk-text-center">
+                              <div *ngIf="(results.length) == 0 " class="  uk-text-center">
                                 No entities to link with the sources. Start adding entities from the left panel.
                               </div>
 
@@ -255,31 +160,28 @@
                           </div>
                         </div>
 
-
-                      </div>
+                            </li>
+                          </ul>
+                      
                       <div *ngIf="showOptions.show=='source'"
-                           [class]="((sources.length)>0?'linksbaskettitlesPortalColor ':'uk-disabled')+ ' linksbaskettitles uk-padding-small'"
-                           (click)="openSelectionModal(); ">
-                        <!--show = linkTo; basketShowSources=false;
-                           basketShowLinksTo=true;-->
-                        <div class="uk-h6 uk-margin-remove portal-color">CONTINUE TO - LINK TO <span
-                          *ngIf="results.length > 0">({{(results.length)  | number}})</span>
+                           class=" nextStep uk-margin-small-top uk-padding-small " [class.active]="(sources.length)>0" [class.disabled]="(sources.length) == 0"
+                           (click)="stepHasChanged('target') ">
+                        <div class=" uk-margin-remove  uk-text-center">
+                          STEP 2 -  LINK SOURCES TO ENTITIES 
                           <span class="uk-icon uk-float-right uk-text-bold uk-margin-small-right">
                           <svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                                icon="chevron-right" ratio="1.5"><polyline fill="none" stroke="#000" stroke-width="1.03"
                                                                           points="7 4 13 10 7 16"></polyline></svg>
                           </span>
                         </div>
-                        <div class="linksBasketSubtitles">
-                          Entities to link with the sources
-                        </div>
+                         
                       </div>
                       <div *ngIf="showOptions.show!='source'"
-                           [class]="((results.length)>0?'linksbaskettitlesPortalColor ':'uk-disabled')+ ' linksbaskettitles uk-margin-small-top uk-padding-small'"
-                           style="height:auto !important; " (click)="showOptions.show = 'claim'; scrollUp();">
-
-                        <div class="uk-margin-remove portal-color uk-text-center">
-                          FINISH LINKING
+                           class=" nextStep uk-margin-small-top uk-padding-small " [class.active]="(results.length)>0" [class.disabled]="(results.length) == 0"
+                           style="height:auto !important; " (click)="stepHasChanged('claim')">
+                        
+                        <div class="uk-margin-remove   uk-text-center">
+                          STEP {{inlineEntity?'2':'3'}} -  FINALISE AND FINISH
                           <span class="uk-icon uk-float-right uk-text-bold uk-margin-small-right">
                           <svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                                icon="chevron-right" ratio="1.5"><polyline fill="none" stroke="#000" stroke-width="1.03"
@@ -290,6 +192,7 @@
                     </div>
                     </div>
                   </div>
+                   
                   <div id="basketStickBottom"></div>
                   <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
                 </div>
@@ -308,7 +211,8 @@
     </div>
   </div>
 </div>
-
+  </div>
+</div>
 <modal-alert (alertOutput)="closeSelectionModal($event)" >
   <div class="uk-grid uk-text-center uk-margin-expand uk-padding uk-child-width-1-3">
 

claims/linking/linkingGeneric.component.ts

@@ -1,4 +1,4 @@
-import {Component, Input, ViewChild} from '@angular/core';
+import {ChangeDetectorRef, Component, Input, ViewChild} from '@angular/core';
 import {ActivatedRoute, Router} from '@angular/router';
 import {Meta, Title} from '@angular/platform-browser';
 import {EnvProperties} from '../../utils/properties/env-properties';
@@ -11,12 +11,15 @@ import {HelperService} from "../../utils/helper/helper.service";
 import {PiwikService} from "../../utils/piwik/piwik.service";
 import {Subscriber} from "rxjs";
 import {properties} from "../../../../environments/environment";
+import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
+import {MetricsService} from "../../services/metrics.service";
 
 declare var UIkit:any;
 
 @Component({
     selector: 'linking-generic',
-    templateUrl: 'linkingGeneric.component.html'
+    templateUrl: 'linkingGeneric.component.html',
+    styleUrls:[ 'linkingGeneric.component.css']
 
 })
 export class LinkingGenericComponent {
@@ -43,19 +46,23 @@ export class LinkingGenericComponent {
   url=null;
   @ViewChild(AlertModal) alert;
   public pageContents = null;
-
+  @Input() breadcrumbs: Breadcrumb[] = [];
 
   constructor (private _router: Router,  private route: ActivatedRoute, private entitySearch:EntitiesSearchService,
                private _meta: Meta, private _title: Title,  private _piwikService:PiwikService,
-               private seoService: SEOService, private helper: HelperService ) {
+               private seoService: SEOService, private helper: HelperService, private cdr: ChangeDetectorRef ) {
   }
   subscriptions = [];
 
   ngOnInit() {
+    if(this.breadcrumbs.length === 0) {
+      this.breadcrumbs.push({name: 'home', route: '/'});
+      this.breadcrumbs.push({name: "Link", route: null});
+    }
     this.showOptions.show = 'source';
     if(this.inlineEntity){
-      this.showOptions.basketShowSources  = false;
-      this.showOptions.basketShowLinksTo = true;
+      this.showOptions.showLinkTo();
+      // this.showOptions.basketShowLinksTo = true;
       this.showOptions.show = this.showOptions.linkTo;
     }
 
@@ -141,4 +148,52 @@ export class LinkingGenericComponent {
   private updateUrl(url:string) {
     this._meta.updateTag({content:url},"property='og:url'");
   }
+
+  stepHasChanged(stepId){
+    
+    if(stepId == 'source'){
+      console.log("show source")
+      this.showOptions.showSource();
+    }else if(stepId == 'target'){
+      console.log("show target")
+      this.showOptions.show = this.showOptions.linkTo;
+      this.showOptions.showLinkTo();
+    }else if(stepId == 'claim'){
+      console.log("show target")
+      this.showOptions.show = 'claim';
+    }
+    this.cdr.detectChanges();
+    console.log('stepHasChanged', stepId, this.showOptions.show)
+  }
+
+  stepStatus(stepId){
+    if(stepId == 'source'){
+      if(this.showOptions.show == 'source'){
+        return 'active';
+      }else if(this.sources.length > 0){
+        return 'done';
+      }else{
+        return 'default';
+      }
+    }else if(stepId=='target'){
+      if(this.showOptions.show != 'source' && this.showOptions.show != 'claim'){
+        return 'active';
+      }else if(this.results.length > 0){
+        return 'done';
+      }else if(this.sources.length == 0){
+        return 'disabled';
+      }else{
+        return 'default';
+      }
+    }else if(stepId=='claim'){
+      if(this.showOptions.show == 'claim'){
+        return 'active';
+      }else if(this.results.length > 0 && (this.inlineEntity || this.sources.length > 0)){
+        return  'default';
+      }else if(!(this.results.length > 0 && (this.inlineEntity || this.sources.length > 0))){
+        return 'disabled';
+      }
+    }
+  }
+  
 }

claims/linking/linkingGeneric.module.ts

@@ -21,16 +21,18 @@ import {MetadataPreviewModule} from './selected/metadataPreview.module';
 import {ClaimEntitiesMetadataModule} from "./selected/ClaimEntitiesMetadata.module";
 import {AlertModalModule} from '../../utils/modal/alertModal.module';
 import {PiwikServiceModule} from "../../utils/piwik/piwikService.module";
+import {BreadcrumbsModule} from "../../utils/breadcrumbs/breadcrumbs.module";
+import {StepperModule} from "../../sharedComponents/stepper/stepper.module";
 
 @NgModule({
   imports: [
     SharedModule, SelectedProjectsModule, SelectedContextsModule,
     SelectedPublicationsModule,
-     StartOverModule,
+    StartOverModule,
     ClaimContextSearchFormModule, ClaimProjectsSearchFormModule, BulkClaimModule, ClaimResultSearchFormModule,
     HelperModule, Schema2jsonldModule, SEOServiceModule, MetadataPreviewModule, ClaimEntitiesMetadataModule, AlertModalModule,
     PiwikServiceModule,
-    MatSelectModule
+    MatSelectModule, BreadcrumbsModule, StepperModule
   ],
   providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled],
   declarations: [

claims/linking/selected/ClaimEntityProjectMetadata.component.ts

@@ -8,16 +8,16 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
     <div *ngIf="entity.type == 'project' && entity.project" class="uk-grid uk-margin-remove-top uk-text-small">
       <div class="uk-width-1-2">
         <div *ngIf="entity.project.funderName">
-          <span class="uk-text-muted">Funder </span>{{entity.project.funderName}}
+          <span class="uk-text-meta uk-margin-small-right">Funder: </span>{{entity.project.funderName}}
+        </div>
+        <div *ngIf="entity.project.code">
+          <span class="uk-text-meta uk-margin-small-right">GrandID: </span>{{entity.project.code}}
         </div>
       </div>
       <div class="uk-width-1-2">
-        <div *ngIf="entity.project.code">
-          <span class="uk-text-muted">GrandId </span>{{entity.project.code}}
-        </div>
         <div *ngIf=" !shortVersion && (entity.project.startDate || entity.project.endDate)">
                 <span
-                  class="uk-text-muted">Duration </span>{{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}}
+                  class="uk-text-meta uk-margin-small-right">Duration: </span>{{(entity.project.startDate) ? entity.project.startDate : 'Unknown'}}{{'-' + ((entity.project.endDate) ? entity.project.endDate : 'Unknown')}}
         </div>
       </div>
     </div>

claims/linking/selected/ClaimEntityResultMetadata.component.ts

@@ -6,23 +6,23 @@ import {ClaimEntity} from '../../claim-utils/claimHelper.class';
   template:
       `
     <div *ngIf="entity.result">
-      <div *ngIf="entity.result.authors && entity.result.authors.length >0 " class="uk-text-small">
-        <span class="uk-text-muted">Authors </span>
+      <div *ngIf="entity.result.authors && entity.result.authors.length >0 " class="uk-text-small uk-margin-small-bottom">
+        <span class="uk-text-meta uk-margin-small-right">Authors: </span>
         {{sliceArray(entity.result.authors)}}
       </div>
-      <div *ngIf="!shortVersion && entity.result.editors&& entity.result.editors.length > 0" class="uk-text-small">
-        <span class="uk-text-muted">Editors </span>
+      <div *ngIf="!shortVersion && entity.result.editors&& entity.result.editors.length > 0" class="uk-text-small uk-margin-small-bottom">
+        <span class="uk-text-meta uk-margin-small-right">Editors: </span>
         {{sliceArray(entity.result.editors)}}
       </div>
       <div *ngIf="!shortVersion" class="uk-grid uk-margin-remove uk-text-small">
-        <div class="uk-width-1-2 uk-padding-remove-left">
+        <div class="uk-width-1-2 uk-padding-remove-left ">
               <span *ngIf="entity.result.publisher!=null"><span
-                class="uk-text-muted">Publisher</span> {{entity.result.publisher}}</span>
+                class="uk-text-meta uk-margin-small-right uk-margin-small-bottom">Publisher: </span> {{entity.result.publisher}}</span>
           <span *ngIf="entity.result.journal!=null"><span
-            class="uk-text-muted">Journal</span> {{entity.result.journal}}</span>
+            class="uk-text-meta uk-margin-small-right uk-margin-small-bottom">Journal: </span> {{entity.result.journal}}</span>
         </div>
         <div class="uk-width-1-2">
-              <span *ngIf="entity.result.date"><span class="uk-text-muted">Published in </span> <span
+              <span *ngIf="entity.result.date"><span class="uk-text-meta uk-margin-small-right uk-margin-small-bottom">Published: </span> <span
                 [class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">{{entity.result.date}}</span></span>
           <div [class]="(getProjectDurationMessage(entity)?'uk-text-warning':'')">{{getProjectDurationMessage(entity)}}
           </div>

claims/linking/selected/ClaimEntityTitle.component.ts

@@ -6,14 +6,15 @@ import {StringUtils} from "../../../utils/string-utils.class";
   selector: 'claim-title',
   template:
       `
-    <span class="uk-text-bold">
-       <a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url"
-          class="uk-link">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</a>
+  <div class="uk-grid uk-flex uk-flex-middle">
+    <div class="uk-width-expand" [class.uk-h6]="!shortVersion" [class.uk-text-bold]="shortVersion"  [class.uk-text-truncate]="shortVersion"  [class.uk-margin-bottom]="!shortVersion" [class.uk-margin-small-bottom]="shortVersion">
+        <a *ngIf="entity.result && entity.result.url" target="_blank" [href]="entity.result.url"
+          class="uk-text-link">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</a>
        <span
          *ngIf="(entity.result && !entity.result.url)">{{entity.title ? sliceString(entity.title) : '[No title available]'}}</span>
        <span *ngIf="entity.type=='project' && entity.project"> 
           <a *ngIf="entity.project && entity.project.url" target="_blank" [href]="entity.project.url"
-             class="uk-link">
+             class="uk-text-link">
            <span *ngIf="!shortVersion"> 
            {{(entity.project.acronym ? '[' + entity.project.acronym + '] ' : '') + entity.title}}
          </span>
@@ -39,7 +40,8 @@ import {StringUtils} from "../../../utils/string-utils.class";
         </span>
          <span> {{entity.context.concept.label}}</span>
         </span>
-      </span>
+      </div>
+          </div>
   `
 
 
@@ -58,7 +60,7 @@ export class ClaimEntityTitleComponent {
   }
   sliceString(mystr:string): string {
      if(this.slice){
-       return StringUtils.sliceString(mystr,this.sliceSize);
+       // return StringUtils.sliceString(mystr,this.sliceSize);
      }
      return mystr;
   }

claims/linking/selected/metadataPreview.component.html

@@ -1,34 +1,4 @@
-<div class="uk-section uk-padding-remove-top uk-padding-remove-bottom ">
-  <div
-    [class]="((defaultColors)?'linkingToolbar':'communityPanelBackground')+' uk-padding-small'">
-    <div class="uk-container  uk-container-large uk-margin-small-top uk-padding-small">
-      <div class="uk-grid">
-        <div class="uk-padding-remove-left uk-margin-auto-vertical back uk-link">
-          <span
-            (click)="showOptions.showLinkTo()"
-            style="cursor:pointer">
-            <span class="uk-icon">
-            <svg width="30" height="30" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="chevron-left"
-                 ratio="1.5"><polyline fill="none" stroke="#000" stroke-width="1.03"
-                                       points="13 16 7 10 13 4"></polyline></svg></span>
-            BACK
-          </span>
-        </div>
-        <div class="uk-width-expand">
-          <h6 class="uk-text-bold">
-            LINKING CONFIRMATION
-          </h6>
-          Confirm that the links you provided are all correct
-        </div>
-        <claim-insert [results]="results" [sources]="sources" [inlineEntity]="inlineEntity"
-                      [properties]=properties [localStoragePrefix]=localStoragePrefix
-                      class=" " [errors]="errors" (insertFinished)="runValidation(false); updateLocalStorage();"
-                      [defaultColors]="defaultColors" [communityId]="communityId">
-        </claim-insert>
-      </div>
-    </div>
-  </div>
-</div>
+
 
 <div id="tm-main" class="uk-section  uk-margin-small-top tm-middle uk-padding-remove-top">
   <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
@@ -39,402 +9,353 @@
 
 
         <div class="uk-margin-top">
-          <div class="uk-grid">
-            <div class="uk-width-expand">
-              <div>
-                <div class=" uk-margin uk-h6 uk-text-primary uk-animation-toggle"
-                     (click)="showSources=!showSources;  ">
-                  SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}})
-                  <span *ngIf="!showSources" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                                  xmlns="http://www.w3.org/2000/svg" icon="chevron-left"
-                                                                  ratio="1"><polyline fill="none" stroke="#000"
-                                                                                      stroke-width="1.03"
-                                                                                      points="13 16 7 10 13 4"></polyline></svg></span>
-                  <span *ngIf="showSources" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                                 xmlns="http://www.w3.org/2000/svg" icon="chevron-down"
-                                                                 ratio="1"><polyline fill="none" stroke="#000"
-                                                                                     stroke-width="1.03"
-                                                                                     points="16 7 10 13 4 7"></polyline></svg></span>
-                </div>
-                <ul *ngIf="inlineEntity && showSources" class="uk-list uk-animation-fade">
-                  <li
-                    [class]="((inlineEntity.warningMessages.length > 0)?' warningBorder ':'')+
-                    +((inlineEntity.errorMessages.length > 0)?' dangerBorder ':'') +
-                    ' uk-alert'" >
-                    <div class="uk-grid  uk-text-small">
-                      <div class="uk-text-muted uk-width-1-2">
-                        {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}
-                      </div>
-                      <div *ngIf="inlineEntity.errorMessages.length > 0"
-                           class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
-                      </div>
-                    </div>
-                    <!--                    <div class="uk-text-muted">-->
-                    <!--                      {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}-->
-                    <!--                    </div>-->
-                    <div>
-                      <claim-title [entity]="inlineEntity"></claim-title>
-                    </div>
-                    <claim-result-metadata [entity]="inlineEntity"></claim-result-metadata>
-                    <claim-project-metadata [entity]="inlineEntity"></claim-project-metadata>
-                  </li>
-                </ul>
-                <div *ngIf="!inlineEntity && sources.length == 0 && showSources">
-
-                  <div class="uk-alert dangerBorder no-selected-message uk-text-center">
-                    <span class="uk-text-bold uk-text-danger"> SOURCES cannot be empty.</span>
-                    Start by adding your linking sources first, go to  <a (click)="showOptions.showSource() " class="uk-link">
-                    sources
-                    page</a>.
+          <div class="uk-grid ">
+            <div 
+              class=" uk-width-expand uk-padding-remove-left">
+              <div 
+                class="uk-card uk-card-default   uk-width-expand uk-padding ">
+                <div 
+                  class=" uk-grid uk-grid-divider  uk-child-width-1-2@m uk-child-width-1-1@s uk-padding-remove-left ">
+  <!--           Sources-->
+                <div class="">
+                  <div class=" uk-margin uk-animation-toggle">
+                   <span class="uk-h6  "> SOURCES ({{sources.length + (inlineEntity ? 1 : 0) | number}})
+                   </span>                     
+                    <a *ngIf="!inlineEntity" class="uk-float-right" (click)="showOptions.showSource() "> <span 
+                      uk-icon="pencil"></span>Edit 
+                      sources</a>
                   </div>
-                </div>
-                <ul *ngIf="!inlineEntity && sources.length > 0 && showSources" class="uk-list uk-animation-fade">
-                  <li *ngFor=" let entity of sources "
-                      [class]="((entity.warningMessages.length > 0)?' warningBorder ':'')+
-                    +((entity.errorMessages.length > 0)?' dangerBorder ':'') +
-                    ' uk-alert'">
-                    <!--                    <div class="uk-text-muted">-->
-                    <!--                      {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}-->
-                    <!--                    </div>-->
-                    <div class="uk-grid  uk-text-small">
-                      <div class="uk-text-muted uk-width-1-2">
-                        {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
+                  <ul *ngIf="inlineEntity" class="uk-list uk-animation-fade uk-list-divider">
+                    <li>
+                      <div class="uk-grid  uk-text-small">
+                        <div class="uk-text-muted uk-width-1-2">
+                          {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}
+                        </div>
+                        <div *ngIf="inlineEntity.errorMessages.length > 0"
+                             class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
+                        </div>
                       </div>
-                      <div *ngIf="entity.errorMessages.length > 0"
-                           class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
-                      </div>
-                    </div>
-                    <div class="uk-grid uk-margin-remove-top">
-                      <div class="uk-width-expand">
-                        <claim-title [entity]="entity"></claim-title>
-                        <claim-result-metadata [entity]="entity"></claim-result-metadata>
-                        <claim-project-metadata [entity]="entity"></claim-project-metadata>
-                        <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
-                             class="uk-grid uk-margin-remove-left uk-margin-small-top uk-text-small">
-                          <div class="uk-width-1-2 uk-padding-remove-left">
-<!--                            <span class="uk-text-muted">Type </span>-->
-<!--                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"-->
-<!--                                    class="uk-select uk-width-small matSelection"-->
-<!--                                    [disableOptionCentering]="true"-->
-<!--                                    panelClass="entitiesSelectionPanel">-->
-<!--                              <mat-option [value]="'publication'"-->
-<!--                                      (click)="onTypeChanged('publication',entity, false)">Publication-->
-<!--                              </mat-option>-->
-<!--                              <mat-option [value]="'dataset'"-->
-<!--                                      (click)="onTypeChanged('dataset',entity, false)">Research data-->
-<!--                              </mat-option>-->
-<!--                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software-->
-<!--                              </mat-option>-->
-<!--                              <mat-option [value]="'other'"-->
-<!--                                      (click)="onTypeChanged('other',entity, false)">Other research product-->
-<!--                              </mat-option>-->
-<!--                            </mat-select>-->
+                      <!--                    <div class="uk-text-muted">-->
+                      <!--                      {{(!inlineEntity.result) ? inlineEntity.type : ((inlineEntity.result && inlineEntity.result.source == 'openaire') ? inlineEntity.type : (inlineEntity.result && inlineEntity.result.source + ' result'))}}-->
+                      <!--                    </div>-->
+                        <div class="uk-grid uk-flex uk-flex-middle">
+                            <div>
+                                <span  class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
+<!--                                <span  class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>-->
+                            </div>
+                            <div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
+                                <div>
+                                    <claim-title [shortVersion]="true" [entity]="inlineEntity"></claim-title>
+                                  </div>
+                                  <claim-result-metadata [entity]="inlineEntity"></claim-result-metadata>
+                                  <claim-project-metadata [entity]="inlineEntity"></claim-project-metadata>
+                            </div>
+                        </div>
+                    </li>
+                  </ul>
 
-                            <mat-form-field class="matSelectionFormField">
-                              <mat-label>Type</mat-label>
-                              <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
-                                          class="matSelection"
+                  <div *ngIf="!inlineEntity && sources.length == 0 ">
+  
+                    <div class="uk-alert dangerBorder no-selected-message uk-text-center">
+                      <span class="uk-text-bold uk-text-danger"> SOURCES cannot be empty.</span><br>
+                      Start by adding your linking sources first, go to  <a (click)="showOptions.showSource() " class="uk-link">
+                      step 1</a>.
+                    </div>
+                  </div>
+                  <ul *ngIf="!inlineEntity && sources.length > 0 " class="uk-list uk-animation-fade uk-list-divider">
+                    <li *ngFor=" let entity of sources ">
+                      <!--                    <div class="uk-text-muted">-->
+                      <!--                      {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}-->
+                      <!--                    </div>-->
+                      <div class="uk-grid  uk-text-small">
+                        <div class="uk-text-muted uk-width-1-2">
+                          {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
+                        </div>
+                        <div *ngIf="entity.errorMessages.length > 0"
+                             class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
+                        </div>
+                      </div>
+                      <div class="uk-grid uk-margin-remove-top">
+
+                          <div>
+                              <span  class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
+                              <!--                                <span  class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>-->
+                          </div>
+                          <div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
+
+                          <claim-title [shortVersion]="true" [entity]="entity"></claim-title>
+                          <claim-result-metadata [entity]="entity"></claim-result-metadata>
+                          <claim-project-metadata [entity]="entity"></claim-project-metadata>
+                          <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
+                               class="uk-grid uk-margin-remove-left uk-margin-small-top uk-text-small">
+                            <div class="uk-width-1-2 uk-padding-remove-left">
+  <!--                            <span class="uk-text-muted">Type </span>-->
+  <!--                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"-->
+  <!--                                    class="uk-select uk-width-small matSelection"-->
+  <!--                                    [disableOptionCentering]="true"-->
+  <!--                                    panelClass="entitiesSelectionPanel">-->
+  <!--                              <mat-option [value]="'publication'"-->
+  <!--                                      (click)="onTypeChanged('publication',entity, false)">Publication-->
+  <!--                              </mat-option>-->
+  <!--                              <mat-option [value]="'dataset'"-->
+  <!--                                      (click)="onTypeChanged('dataset',entity, false)">Research data-->
+  <!--                              </mat-option>-->
+  <!--                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software-->
+  <!--                              </mat-option>-->
+  <!--                              <mat-option [value]="'other'"-->
+  <!--                                      (click)="onTypeChanged('other',entity, false)">Other research product-->
+  <!--                              </mat-option>-->
+  <!--                            </mat-select>-->
+  
+                              <mat-form-field class="matSelectionFormField">
+                                <mat-label>Type</mat-label>
+                                <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
+                                            class="matSelection"
+                                            [disableOptionCentering]="true"
+                                            panelClass="entitiesSelectionPanel">
+                                  <mat-option [value]="'publication'"
+                                              (click)="onTypeChanged('publication',entity, false)">Publication
+                                  </mat-option>
+                                  <mat-option [value]="'dataset'"
+                                              (click)="onTypeChanged('dataset',entity, false)">Research data
+                                  </mat-option>
+                                  <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
+                                  </mat-option>
+                                  <mat-option [value]="'other'"
+                                              (click)="onTypeChanged('other',entity, false)">Other research product
+                                  </mat-option>
+                                </mat-select>
+                              </mat-form-field>
+  
+                            </div>
+                            <div class="uk-width-1-2">
+                              <div class="uk-grid">
+  <!--                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
+                                <mat-form-field class="matSelectionFormField">
+                                  <mat-label>Access mode </mat-label>
+                                  <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
+                                          class="uk-padding-remove-left matSelection"
                                           [disableOptionCentering]="true"
-                                          panelClass="entitiesSelectionPanel">
+                                          panelClass="matSelectionPanel">
+                                    <mat-option *ngFor="let type of accessTypes" [value]="type"
+                                            (click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
+                                  </mat-select>
+                                </mat-form-field>
+                                <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
+                                  <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
+                                         (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']"
+                                         (dateInput)="onDateChanged($event, entity, false)" (dateChange)="onDateChanged($event, entity, false)">
+                                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                  <mat-datepicker #picker [startAt]="embargoEndDates[entity.id+'_source']" ng-model-options="{ timezone: 'utc' }"></mat-datepicker>
+                                </mat-form-field>
+                              </div>
+                              <div *ngIf="entity.result.accessRights== 'EMBARGO' && getEmbargoEndDateMessage(entity)"
+                                   [class]="(getEmbargoEndDateMessage(entity)?'uk-text-warning':'')">{{getEmbargoEndDateMessage(entity)}}
+                              </div>
+                            </div>
+                          </div>
+                        </div>
+                        <div class=" uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left">
+                          <a class=" uk-link  "
+                             (click)="remove(entity, false)">
+                             <span uk-icon="close">   </span>
+                          </a>
+                        </div>
+                      </div>
+  
+  
+                    </li>
+                  </ul>
+                </div>
+                <!--     Results-->
+                <div class=" ">
+                  <div class=" uk-margin " >
+                   <span class=" uk-h6 "> LINK TO ({{results.length | number}})</span>
+
+
+                    <a class="uk-float-right" (click)="showOptions.showLinkTo()"> <span
+                      uk-icon="pencil"></span>Edit
+                      entities</a>
+                  </div>
+                  <div *ngIf="results.length == 0">
+                    <div class="uk-alert dangerBorder no-selected-message uk-text-center">
+                      <span class="uk-text-bold uk-text-danger"> LINK TO list cannot be empty.</span><br>
+                      Start by adding sources to link to first, go to  <a (click)="showOptions.showLinkTo() " 
+                                                                            class="uk-link">
+                      step 2</a>.
+                       
+                    </div>
+                  </div>
+                  <ul *ngIf="results.length > 0 " class="uk-list uk-animation-fade uk-list-divider">
+                    <li *ngFor=" let entity of results "
+                       style="z-index: 0 !important;">
+                      <div class="uk-grid  uk-text-small">
+                        <div class="uk-text-muted uk-width-1-2">
+                          {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
+                        </div>
+                        <div *ngIf="entity.errorMessages.length > 0"
+                             class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
+                        </div>
+                      </div>
+  
+                      <div class="uk-grid uk-margin-remove-top">
+                        <div class="uk-width-expand">
+  
+                          <claim-title [shortVersion]="true" [entity]="entity"></claim-title>
+                          <claim-result-metadata [entity]="entity"></claim-result-metadata>
+                          <claim-project-metadata [entity]="entity"></claim-project-metadata>
+                          <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
+                               class="uk-grid uk-text-small uk-margin-remove-left uk-margin-small-top">
+                            <div class="uk-width-1-2 uk-padding-remove-left">
+  <!--                            <span class="uk-text-muted">Type </span>-->
+                              <mat-form-field class="matSelectionFormField">
+                                <mat-label>Type</mat-label>
+                              <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
+                                      class=" matSelection"
+                                      [disableOptionCentering]="true"
+                                      panelClass="matSelectionPanel">
                                 <mat-option [value]="'publication'"
-                                            (click)="onTypeChanged('publication',entity, false)">Publication
+                                        (click)="onTypeChanged('publication',entity, false)">Publication
                                 </mat-option>
                                 <mat-option [value]="'dataset'"
-                                            (click)="onTypeChanged('dataset',entity, false)">Research data
+                                        (click)="onTypeChanged('dataset',entity, false)">Research data
                                 </mat-option>
                                 <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
                                 </mat-option>
                                 <mat-option [value]="'other'"
-                                            (click)="onTypeChanged('other',entity, false)">Other research product
+                                        (click)="onTypeChanged('other',entity, false)">Other research product
                                 </mat-option>
                               </mat-select>
-                            </mat-form-field>
-
-                          </div>
-                          <div class="uk-width-1-2">
-                            <div class="uk-grid">
-<!--                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
-                              <mat-form-field class="matSelectionFormField">
-                                <mat-label>Access mode </mat-label>
+                              </mat-form-field>
+                            </div>
+                            <div class="uk-width-1-2">
+                              <div class="uk-grid">
+  <!--                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
+                                <mat-form-field class="matSelectionFormField">
+                                  <mat-label>Access mode </mat-label>
                                 <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
-                                        class="uk-padding-remove-left matSelection"
+                                        class=" uk-padding-remove-left matSelection"
                                         [disableOptionCentering]="true"
                                         panelClass="matSelectionPanel">
                                   <mat-option *ngFor="let type of accessTypes" [value]="type"
-                                          (click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
+                                          (click)="accessRightsTypeChanged(type,entity, true)">{{type}}</mat-option>
                                 </mat-select>
-                              </mat-form-field>
-                              <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
-                                <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
-                                       (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']"
-                                       (dateInput)="onDateChanged($event, entity, false)" (dateChange)="onDateChanged($event, entity, false)">
-                                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                                <mat-datepicker #picker [startAt]="embargoEndDates[entity.id+'_source']" ng-model-options="{ timezone: 'utc' }"></mat-datepicker>
-                              </mat-form-field>
-                            </div>
-                            <div *ngIf="entity.result.accessRights== 'EMBARGO' && getEmbargoEndDateMessage(entity)"
-                                 [class]="(getEmbargoEndDateMessage(entity)?'uk-text-warning':'')">{{getEmbargoEndDateMessage(entity)}}
+                                </mat-form-field>
+                                <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
+                                  <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
+                                         (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']"
+                                         (dateInput)="onDateChanged($event, entity, true)"
+                                         (dateChange)="onDateChanged($event, entity, true)">
+                                  <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
+                                  <mat-datepicker #picker [startAt]="embargoEndDates[entity.id+'_result']" ng-model-options="{ timezone: 'utc' }"></mat-datepicker>
+                                </mat-form-field>
+                              </div>
+                              <div *ngIf="entity.result.accessRights== 'EMBARGO' && getEmbargoEndDateMessage(entity)"
+                                   [class]="(getEmbargoEndDateMessage(entity)?'uk-text-warning':'')">{{getEmbargoEndDateMessage(entity)}}
+                              </div>
                             </div>
                           </div>
                         </div>
+                        <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left">
+                          <a class="uk-link "
+                             (click)="remove(entity, true)">
+                            <span uk-icon="close">   </span>
+                          </a>
+                        </div>
                       </div>
-                      <div class=" uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left">
-                        <a class=" uk-icon-button  "
-                           (click)="remove(entity, false)">
-               <span class="uk-icon">
-                  <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="minus"
-                       ratio="1"><rect height="1" width="18" y="9" x="1"></rect></svg>
-               </span>
-                        </a>
-                      </div>
-                    </div>
-
-
-                  </li>
-                </ul>
+  
+  
+                    </li>
+                  </ul>
+                </div>
               </div>
-              <!--     Results-->
-              <div>
-                <div class=" uk-margin uk-h6 uk-text-primary "
-                     (click)="showLinksTo=!showLinksTo;  ">
-                  LINK TO ({{results.length | number}})
+              </div>
+              <div class="uk-section uk-padding-remove-top uk-padding-remove-bottom uk-width-1-1 uk-padding-remove-left ">
 
-                  <span *ngIf="!showLinksTo" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                                  xmlns="http://www.w3.org/2000/svg"
-                                                                  icon="chevron-left" ratio="1"><polyline
-                    fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span>
-                  <span *ngIf="showLinksTo" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                                 xmlns="http://www.w3.org/2000/svg"
-                                                                 icon="chevron-down" ratio="1"><polyline
-                    fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline></svg></span>
 
+                      <claim-insert [results]="results" [sources]="sources" [inlineEntity]="inlineEntity"
+                                    [properties]=properties [localStoragePrefix]=localStoragePrefix
+                                    class=" " [errors]="errors" (insertFinished)="runValidation(false); updateLocalStorage();"
+                                    [defaultColors]="defaultColors" [communityId]="communityId">
+                      </claim-insert>
+
+              </div>
+              </div>
+           
+              <div class="uk-width-1-3" *ngIf="errors.length > 0 || warnings.length > 0">
+                <!-- Errors and Warning -->
+                <div *ngIf="errors.length > 0" class=" uk-margin uk-h6 uk-text-danger uk-animation-toggle" >
+                  ERRORS ({{errors.length | number}})
+                  
                 </div>
-                <div *ngIf="results.length == 0 && showLinksTo">
-                  <div class="uk-alert dangerBorder no-selected-message uk-text-center">
-                    <span class="uk-text-bold uk-text-danger"> LINK TO list cannot be empty.</span>
-                    Select an entity type to link to:
-                    <div class="uk-grid uk-text-center uk-margin-expand uk-padding-small uk-child-width-1-3 uk-width-large uk-margin-auto ">
-
-                      <div *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
-                           (click)="goTo('project')"
-                           style="cursor:pointer;">
-                        <button class="uk-icon-button portal-button">
-        <span class="uk-icon">
-                        <svg height="20" icon="album" ratio="1" viewBox="0 0 20 20" width="20"
-                             xmlns="http://www.w3.org/2000/svg"><rect height="1" width="10" x="5" y="2"></rect><rect
-                          height="1" width="14" x="3" y="4"></rect><rect fill="none" height="11" stroke="#000"
-                                                                         width="17" x="1.5" y="6.5"></rect></svg></span>
-                        </button>
-                        <div>Projects</div>
-                      </div>
-                      <div *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " (click)="goTo('result')"
-                           style="cursor:pointer;">
-                        <button class="uk-icon-button portal-button">
-         <span class="uk-icon">
-                           <svg height="20" icon="copy" ratio="1" viewBox="0 0 20 20" width="20"
-                                xmlns="http://www.w3.org/2000/svg"><rect fill="none" height="16" stroke="#000"
-                                                                         width="12" x="3.5" y="2.5"></rect><polyline
-                             fill="none" points="5 0.5 17.5 0.5 17.5 17" stroke="#000"></polyline></svg></span>
-                        </button>
-                        <div>Research results</div>
-                      </div>
-                      <div *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 "
-                           (click)="goTo('context')"
-                           style="cursor:pointer;">
-                        <button class="uk-icon-button portal-button">
-        <span class="uk-icon">
-                           <svg height="20" icon="users" ratio="1" viewBox="0 0 20 20" width="20"
-                                xmlns="http://www.w3.org/2000/svg"><circle cx="7.7" cy="8.6" fill="none" r="3.5"
-                                                                           stroke="#000" stroke-width="1.1"></circle><path
-                             d="M1,18.1 C1.7,14.6 4.4,12.1 7.6,12.1 C10.9,12.1 13.7,14.8 14.3,18.3" fill="none"
-                             stroke="#000" stroke-width="1.1"></path><path
-                             d="M11.4,4 C12.8,2.4 15.4,2.8 16.3,4.7 C17.2,6.6 15.7,8.9 13.6,8.9 C16.5,8.9 18.8,11.3 19.2,14.1"
-                             fill="none" stroke="#000" stroke-width="1.1"></path></svg></span>
-                        </button>
-                        <div>Communities</div>
-                      </div>
-
-                    </div>
-                  </div>
-                </div>
-                <ul *ngIf="results.length > 0  && showLinksTo" class="uk-list uk-animation-fade">
-                  <li *ngFor=" let entity of results "
-                      [class]="((entity.warningMessages.length > 0)?' warningBorder ':'')+
-                    +((entity.errorMessages.length > 0)?' dangerBorder ':'') +
-                    ' uk-alert'" style="z-index: 0 !important;">
-                    <div class="uk-grid  uk-text-small">
-                      <div class="uk-text-muted uk-width-1-2">
-                        {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
-                      </div>
-                      <div *ngIf="entity.errorMessages.length > 0"
-                           class="uk-text-danger  uk-width-1-2"> Link couldn't be saved
-                      </div>
-                    </div>
-
-                    <div class="uk-grid uk-margin-remove-top">
-                      <div class="uk-width-expand">
-
-                        <claim-title [entity]="entity"></claim-title>
-                        <claim-result-metadata [entity]="entity"></claim-result-metadata>
-                        <claim-project-metadata [entity]="entity"></claim-project-metadata>
-                        <div *ngIf="entity.result && entity.result.source && entity.result.source!='openaire' "
-                             class="uk-grid uk-text-small uk-margin-remove-left uk-margin-small-top">
-                          <div class="uk-width-1-2 uk-padding-remove-left">
-<!--                            <span class="uk-text-muted">Type </span>-->
-                            <mat-form-field class="matSelectionFormField">
-                              <mat-label>Type</mat-label>
-                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
-                                    class=" matSelection"
-                                    [disableOptionCentering]="true"
-                                    panelClass="matSelectionPanel">
-                              <mat-option [value]="'publication'"
-                                      (click)="onTypeChanged('publication',entity, false)">Publication
-                              </mat-option>
-                              <mat-option [value]="'dataset'"
-                                      (click)="onTypeChanged('dataset',entity, false)">Research data
-                              </mat-option>
-                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
-                              </mat-option>
-                              <mat-option [value]="'other'"
-                                      (click)="onTypeChanged('other',entity, false)">Other research product
-                              </mat-option>
-                            </mat-select>
-                            </mat-form-field>
-                          </div>
-                          <div class="uk-width-1-2">
-                            <div class="uk-grid">
-<!--                              <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>-->
-                              <mat-form-field class="matSelectionFormField">
-                                <mat-label>Access mode </mat-label>
-                              <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
-                                      class=" uk-padding-remove-left matSelection"
-                                      [disableOptionCentering]="true"
-                                      panelClass="matSelectionPanel">
-                                <mat-option *ngFor="let type of accessTypes" [value]="type"
-                                        (click)="accessRightsTypeChanged(type,entity, true)">{{type}}</mat-option>
-                              </mat-select>
-                              </mat-form-field>
-                              <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
-                                <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
-                                       (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']"
-                                       (dateInput)="onDateChanged($event, entity, true)"
-                                       (dateChange)="onDateChanged($event, entity, true)">
-                                <mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
-                                <mat-datepicker #picker [startAt]="embargoEndDates[entity.id+'_result']" ng-model-options="{ timezone: 'utc' }"></mat-datepicker>
-                              </mat-form-field>
-                            </div>
-                            <div *ngIf="entity.result.accessRights== 'EMBARGO' && getEmbargoEndDateMessage(entity)"
-                                 [class]="(getEmbargoEndDateMessage(entity)?'uk-text-warning':'')">{{getEmbargoEndDateMessage(entity)}}
-                            </div>
+                <div *ngIf="errors.length > 0 " class="">
+                  <div *ngFor=" let message of errors " class="uk-alert uk-alert-danger">
+                    <div *ngIf="message.type == 'claimServiceFail2Insert'">
+                      <div class="">
+  
+                        <span class=" uk-text-bold"> Fail to save {{message.failed|number}}
+                          {{message.failed > 1 ? 'links.' : 'link.'}}</span>
+                        <br>
+                        <div
+                          *ngIf="message.inserted>0">But {{message.inserted|number}} link{{message.inserted > 1 ? 's' : ''}} was
+                          successfully inserted.
+                          <div>
+                            <a routerLinkActive="router-link-active" routerLink="/myclaims">Manage your links here</a>
                           </div>
                         </div>
                       </div>
-                      <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left">
-                        <a class="uk-icon-button "
-                           (click)="remove(entity, true)">
-                   <span class="uk-icon">
-                      <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="minus"
-                           ratio="1"><rect height="1" width="18" y="9" x="1"></rect></svg>
-                   </span>
-                        </a>
-                      </div>
                     </div>
-
-
-                  </li>
-                </ul>
-              </div>
-            </div>
-            <div class="uk-width-1-3" *ngIf="errors.length > 0 || warnings.length > 0">
-              <!-- Errors and Warning -->
-              <div *ngIf="errors.length > 0" class=" uk-margin uk-h6 uk-text-primary uk-animation-toggle"
-                   (click)="showErrors=!showErrors ">
-                ERRORS ({{errors.length | number}})
-                <span *ngIf="!showErrors" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                               xmlns="http://www.w3.org/2000/svg"
-                                                               icon="chevron-left" ratio="1"><polyline
-                  fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span>
-                <span *ngIf="showErrors" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                              xmlns="http://www.w3.org/2000/svg"
-                                                              icon="chevron-down" ratio="1"><polyline
-                  fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline></svg></span>
-              </div>
-              <div *ngIf="errors.length > 0 && showErrors" class=" uk-animation-fade">
-                <div *ngFor=" let message of errors " class="uk-alert dangerBorder">
-                  <div *ngIf="message.type == 'claimServiceFail2Insert'">
-                    <div class="">
-
-                      <span class="uk-text-danger uk-text-bold"> Fail to save {{message.failed|number}}
-                        {{message.failed > 1 ? 'links.' : 'link.'}}</span>
-                      <br>
-                      <div
-                        *ngIf="message.inserted>0">But {{message.inserted|number}} link{{message.inserted > 1 ? 's' : ''}} was
-                        successfully inserted.
-                        <div>
-                          <a routerLinkActive="router-link-active" routerLink="/myclaims">Manage your links here</a>
-                        </div>
+  
+                    <div *ngIf="message.type == 'claimServiceFail'">
+  
+                      <div class="">
+                        <span class=" uk-text-bold"> An error occured while saving your links.</span>
+                        <br>
+                        None of the links saved.
                       </div>
                     </div>
                   </div>
-
-                  <div *ngIf="message.type == 'claimServiceFail'">
-
-                    <div class="">
-                      <span class="uk-text-danger uk-text-bold"> An error occured while saving your links.</span>
-                      <br>
-                      None of the links saved.
-                    </div>
-                  </div>
                 </div>
-              </div>
-              <div *ngIf="warnings.length > 0"
-                   class=" uk-margin uk-h6 uk-text-primary uk-animation-toggle"
-                   (click)="showWarnings=!showWarnings "> WARNINGS
-                ({{warnings.length
-                      | number}})
-                <span *ngIf="!showWarnings" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                                 xmlns="http://www.w3.org/2000/svg"
-                                                                 icon="chevron-left" ratio="1"><polyline
-                  fill="none" stroke="#000" stroke-width="1.03" points="13 16 7 10 13 4"></polyline></svg></span>
-                <span *ngIf="showWarnings" class="uk-icon"><svg width="20" height="20" viewBox="0 0 20 20"
-                                                                xmlns="http://www.w3.org/2000/svg"
-                                                                icon="chevron-down" ratio="1"><polyline
-                  fill="none" stroke="#000" stroke-width="1.03" points="16 7 10 13 4 7"></polyline></svg></span>
-              </div>
-
-              <div *ngIf="warnings.length > 0 && showWarnings " class=" uk-animation-fade">
-                <div *ngFor=" let message of warnings " class="uk-alert warningBorder">
-                  <div *ngIf="message.type == 'embargoEndDate'">
-                    <div class="uk-text-warning uk-text-bold">
-                      Embargo date must be later than published date in
+                <div *ngIf="warnings.length > 0"
+                     class=" uk-margin uk-h6 uk-text-warning uk-animation-toggle"> WARNINGS
+                  ({{warnings.length
+                        | number}})
+               
+                </div>
+  
+                <div *ngIf="warnings.length > 0 " class="">
+                  <div *ngFor=" let message of warnings " class="uk-alert uk-alert-warning">
+                    <div *ngIf="message.type == 'embargoEndDate'">
+                      <div class="uk-text-bold">
+                        Embargo date must be later than published date in
+                      </div>
+                      <div class="">
+                        {{message.resultTitle}}
+                      </div>
                     </div>
-                    <div class="">
-                      {{message.resultTitle}}
+                    <div *ngIf="message.type == 'projectDuration'">
+                      <div class="uk-text-bold">
+                        Published date must be in the project's date boundaries
+                        (from {{message.projectInfo.startDate}}{{(message.projectInfo.endDate) ? (' to ' + (addStringToNumber(message.projectInfo.endDate, 5))) : ''}}) in
+                      </div>
+                      <div class="">
+                        {{message.resultTitle}}
+                      </div>
+                      <div class="uk-text-muted uk-text-small">
+                        with link to
+                      </div>
+                      <div class="">
+                        {{message.projectInfo.title}}
+                      </div>
+                      <div><span class="uk-text-muted uk-text-small">
+             Project boundaries: </span>({{message.projectInfo.startDate}}{{(message.projectInfo.endDate) ? (' - ' + (message.projectInfo.endDate) + ') +5 years') : ')'}}
+                      </div>
                     </div>
+  
                   </div>
-                  <div *ngIf="message.type == 'projectDuration'">
-                    <div class="uk-text-warning uk-text-bold">
-                      Published date must be in the project's date boundaries
-                      (from {{message.projectInfo.startDate}}{{(message.projectInfo.endDate) ? (' to ' + (addStringToNumber(message.projectInfo.endDate, 5))) : ''}}) in
-                    </div>
-                    <div class="">
-                      {{message.resultTitle}}
-                    </div>
-                    <div class="uk-text-muted uk-text-small">
-                      with link to
-                    </div>
-                    <div class="">
-                      {{message.projectInfo.title}}
-                    </div>
-                    <div><span class="uk-text-muted uk-text-small">
-           Project boundaries: </span>({{message.projectInfo.startDate}}{{(message.projectInfo.endDate) ? (' - ' + (message.projectInfo.endDate) + ') +5 years') : ')'}}
-                    </div>
-                  </div>
-
                 </div>
               </div>
             </div>
-
             <modal-alert (alertOutput)="confirmClose()">
             </modal-alert>
           </div>
@@ -444,10 +365,11 @@
 
 
       </div>
+
+      
       <helper *ngIf="pageContents && pageContents['bottom'] && pageContents['bottom'].length > 0" [texts]="pageContents['bottom']"></helper>
     </div>
   </div>
-</div>
 
 
 

claims/linking/selected/metadataPreview.component.ts

@@ -12,10 +12,10 @@ import {HelperFunctions} from "../../../utils/HelperFunctions.class";
 })
 export class MetadataPreviewComponent {
 
-  showSources = true;
-  showLinksTo = true;
-  showErrors = true;
-  showWarnings = true;
+/*  showSources = true;
+  showLinksTo = true;*/
+  // showErrors = true;
+  // showWarnings = true;
   @Input() results: ClaimEntity[];
   @Input() sources: ClaimEntity[];
   @Input() title: string = "Research Results";
@@ -40,10 +40,10 @@ export class MetadataPreviewComponent {
 
   ngOnInit() {
     this.setEmbargoEndDates();
-    if (this.inlineEntity) {
+/*    if (this.inlineEntity) {
       this.showSources = true;
       this.showLinksTo = true;
-    }
+    }*/
     this.runValidation(true);
   }
   setEmbargoEndDates(){

claims/linking/selected/metadataPreview.module.ts

@@ -10,16 +10,17 @@ import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatInputModule } from '@angular/material/input';
 import { MatSelectModule } from '@angular/material/select';
 import {HelperModule} from "../../../utils/helper/helper.module";
+import {SelectedPublicationsModule} from "./selectedResults.module";
 
 @NgModule({
-  imports: [
-    SharedModule,
-    AlertModalModule,
-    ClaimEntitiesMetadataModule,
-    InsertClaimsModule,
-    MatDatepickerModule,   MatNativeDateModule, MatFormFieldModule, MatInputModule, MatSelectModule,
-    HelperModule
-  ],
+    imports: [
+        SharedModule,
+        AlertModalModule,
+        ClaimEntitiesMetadataModule,
+        InsertClaimsModule,
+        MatDatepickerModule, MatNativeDateModule, MatFormFieldModule, MatInputModule, MatSelectModule,
+        HelperModule, SelectedPublicationsModule
+    ],
   declarations: [MetadataPreviewComponent],
   exports:[MetadataPreviewComponent]
 })

claims/linking/selected/selectedResults.component.html

@@ -1,19 +1,21 @@
 <ul *ngIf="results.length > 0 "  class="uk-list uk-list-divider">
    <li *ngFor=" let entity of results "  >
-     <div class="uk-text-muted">
+     <!--<div class="uk-text-muted">
        {{(!entity.result) ? entity.type : ((entity.result && entity.result.source == 'openaire') ? entity.type : (entity.result && entity.result.source + ' result'))}}
-     </div>
-      <div class="uk-grid">
-        <div class="uk-width-expand">
-           <claim-title [entity]="entity" [slice]="true" [sliceSize]="45" [shortVersion]="true"></claim-title>
-          <claim-result-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="true"></claim-result-metadata>
-          <claim-project-metadata [entity]="entity"  [slice]="true" [sliceSize]="5"  [shortVersion]="true"></claim-project-metadata>
+     </div>-->
+      <div class="uk-grid uk-flex uk-flex-middle">
+          <div >
+              <span *ngIf="type == 'source'" class="material-icons uk-text-small uk-text-meta">insert_drive_file</span>
+              <span *ngIf="type == 'target'" class="material-icons uk-text-small uk-text-meta">assignment_turned_in</span>
+          </div>
+        <div class="uk-width-expand uk-padding-remove-left uk-margin-small-left">
+           <claim-title [entity]="entity" [slice]="true" [sliceSize]="45" [shortVersion]="shortVersion"></claim-title>
+          <claim-result-metadata [entity]="entity" [slice]="true" [sliceSize]="5" [shortVersion]="shortVersion"></claim-result-metadata>
+          <claim-project-metadata [entity]="entity"  [slice]="true" [sliceSize]="5"  [shortVersion]="shortVersion"></claim-project-metadata>
        </div>
        <div class="uk-margin-auto-vertical uk-padding-remove-left uk-margin-small-left" *ngIf="enableRemove">
-         <a class="  uk-icon-button " (click)="remove(entity)"  >
-         <span class="uk-icon" >
-            <svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" icon="minus" ratio="1"><rect height="1" width="18" y="9" x="1"></rect></svg>
-         </span>
+         <a class="  uk-link " (click)="remove(entity)"  >
+           <span uk-icon="close">   </span>
            </a>
        </div>
      </div>

claims/linking/selected/selectedResults.component.ts

@@ -11,7 +11,8 @@ export class ClaimSelectedResultsComponent {
   @Input() sectionTitle: string = "Research Results";
   @Input() localStoragePrefix: string = "";
   @Input() enableRemove:boolean = true;
-
+  @Input() type: "source" | "target";
+  @Input() shortVersion:boolean = true;
   ngOnInit() {
 
   }

connect/connectHelper.ts

@@ -6,7 +6,7 @@ export class ConnectHelper {
 
   public static  getCommunityFromDomain(domain: string): string{
     if(properties.environment == "development") {
-      // domain = "aginfra.openaire.eu"; //for testing
+      domain = "covid-19.openaire.eu"; //for testing
     }
     domain = domain.indexOf("//") != -1? domain.split("//")[1]:domain; //remove https:// prefix
     if (domain.indexOf('eosc-portal.eu') != -1) {

searchPages/searchUtils/searchFilter.component.html

@@ -12,7 +12,7 @@
       </div>
     </div>
     <div *ngIf="addShowMore && (filter.values.length) > filterValuesNum">
-      <a [class]="((isDisabled)?'uk-disabled uk-link-muted ':'uk-link') + ' uk-margin-small-top'" (click)="toggle()">
+      <a  *ngIf="filterValuesNum > 0 " [class]="((isDisabled)?'uk-disabled uk-link-muted ':'uk-link') + ' uk-margin-small-top'" (click)="toggle()">
         <span *ngIf="!isOpen">+ View all</span>
       </a>
       <div *ngIf="isOpen" class="uk-text-small uk-margin-small-bottom">
@@ -29,13 +29,13 @@
             <span *ngIf="showResultCount === true"
                   class="uk-width-1-3@m uk-width-2-5@s uk-padding-small uk-padding-remove-vertical uk-padding-remove-right">
               <span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
-              <select [(ngModel)]="sortBy"
+      <!--        <select [(ngModel)]="sortBy"
                       class=" uk-width-expand uk-select uk-hidden@m uk-form-small"
                       id="form-horizontal-select" name="select_order">
                 <option value="num">Results number</option>
                 <option value="name">Name</option>
-              </select>
-              <mat-select [(ngModel)]="sortBy"
+              </select>-->
+              <mat-select [(ngModel)]="sortBy" (ngModelChange)="sort(filter.values)"
                           class="uk-width-expand matSelection uk-visible@m"
                           id="form-horizontal-select1" name="select_order"
                           [disableOptionCentering]="true" panelClass="matSelectionPanel">
@@ -48,7 +48,7 @@
 
         <div class="uk-overflow-auto uk-height-max-small uk-padding-remove
                     uk-margin-small-left uk-margin-small-right uk-margin-small-top uk-width-1-1">
-          <ng-container *ngFor="let value of sort(filter.values)">
+          <ng-container *ngFor="let value of this.sortedValues">
             <div *ngIf="filterKeywords(value.name)" title="{{value.name}}"
                  class="uk-animation-fade filterItem searchFilterItem uk-text-small">
               <ng-container
@@ -57,7 +57,7 @@
           </ng-container>
         </div>
       </div>
-      <a [class]="(isDisabled)?'uk-disabled uk-link-muted ':'uk-link'" (click)="toggle()">
+      <a *ngIf="filterValuesNum > 0 && filterValuesNum !=0" [class]="(isDisabled)?'uk-disabled uk-link-muted ':'uk-link'" (click)="toggle()">
         <span *ngIf="isOpen">- View less</span>
       </a>
     </div>

searchPages/searchUtils/searchFilter.component.ts

@@ -32,14 +32,14 @@ export class SearchFilterComponent implements OnInit, OnChanges {
   @Output() modalChange = new EventEmitter();
   @Output() onFilterChange = new EventEmitter();
   keyword = "";
-  sortBy = "name";
+  sortBy: "name" | "num" = "name";
   queryParams = {};
   paramPosition = 0;
   @Input() actionRoute: boolean = false;
   @Input() quickFilter: { filter: Filter, selected: boolean, filterId: string, value: string };
   sub;
   public isOpen: boolean = false;
-  
+  sortedValues;
   constructor(private _router: Router, private route: ActivatedRoute) {
   }
   
@@ -50,11 +50,18 @@ export class SearchFilterComponent implements OnInit, OnChanges {
   }
   
   ngOnInit() {
+    if(this.filterValuesNum == 0){
+      this.isOpen = true;
+      this.sortBy = "num";
+    }else{
+      this.isOpen = false;
+    }
     this.sub = this.route.queryParams.subscribe(params => {
       this.queryParams = Object.assign({}, params);
       this.paramPosition = SearchFields.getParameterOrder(this.filter.filterId, this.getEntries(params));
     });
     this.filter.values = this.filter.values.filter(value => !value.name.toLowerCase().includes('unknown') && !value.name.toLowerCase().includes('not available'));
+    this.sort(this.filter.values);
     if (this.filter.filterType == "radio") {
       this.filter.radioValue = "";
       this.filter.values.forEach(value => {
@@ -238,10 +245,14 @@ export class SearchFilterComponent implements OnInit, OnChanges {
       });
       return sorted;
     }
+    event.stopPropagation(); 
+    this.sortedValues = Object.assign(sorted);
+
   }
   
   toggle() {
     this.isOpen = !this.isOpen;
+    event.stopPropagation();
   }
   
   disabled(value) {

sharedComponents/stepper/step.component.ts

@@ -0,0 +1,34 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+
+@Component({
+  selector: 'step',
+  template: `
+
+
+    <div class=" uk-width-auto uk-text-center " style="position: relative; ">
+      <div style="position: relative; z-index:10; min-width: 140px;" class="">
+        <div class="uk-margin-small-left stepper-text uk-text-uppercase uk-margin-bottom uk-text-truncate"
+             [class]="status">{{stepText}}</div>
+        <div>
+          <button class="uk-icon-button uk-border-circle" [class]="status" [class.uk-disabled]="status=='disabled'"
+                  (click)="stepChanged.emit(stepId)">
+            <span *ngIf="status != 'done'">{{stepNumber}}</span>
+            <span *ngIf="status == 'done'" uk-icon="check"></span>
+          </button>
+        </div>
+      </div>
+      <step-line *ngIf="showStepLine" [status]="status" [stepNumber]="stepNumber" class="stepper-line-container"
+                 [style.z-index]="(+stepNumber)"></step-line>
+    </div>
+  `
+
+})
+export class StepComponent {
+  @Input() status: 'active' | 'default' | 'disabled' | 'done';
+  @Input() stepId;
+  @Input() stepNumber;
+  @Input() stepText;
+  @Input() active;
+  @Output() stepChanged: EventEmitter<string> = new EventEmitter<string>();
+  @Input() showStepLine:boolean = false;
+}

sharedComponents/stepper/stepLine.component.ts

@@ -0,0 +1,17 @@
+import {Component, Input} from '@angular/core';
+
+@Component({
+  selector: 'step-line',
+  template: `
+
+
+   
+    <div class="stepper-line uk-margin-bottom uk-width-medium@m uk-width-small@s" [class]="status + ' step' +  stepNumber"></div>
+    `
+
+})
+export class StepLineComponent {
+  @Input() status: 'active' | 'default' | 'disabled' | 'done';
+  @Input() stepNumber;
+  
+}

sharedComponents/stepper/stepper.component.ts

@@ -0,0 +1,32 @@
+import {Component} from '@angular/core';
+/*
+* usage example 
+* 
+*  <stepper>
+   <step status="active" stepId="step1" stepNumber="1"
+         stepText="Step 1"
+         active="step1" [showStepLine]="false"></step>
+   <step status="disabled" stepId="step2" stepNumber="2"
+         stepText="Step 2"
+         active="step1"
+         [showStepLine]="true"></step>
+
+ </stepper>
+* */
+@Component({
+  selector: 'stepper',
+  template: `
+    <div class="stepper" >
+      <div class=" uk-flex uk-flex-center "  >
+        <div class=" uk-grid uk-grid-small uk-flex uk-flex-bottom uk-text-small uk-width-auto">
+          <ng-content></ng-content>
+        </div>
+      </div>
+    </div>
+
+  `
+
+})
+export class StepperComponent {
+   
+}

sharedComponents/stepper/stepper.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import {SharedModule} from "../../../shared/shared.module";
+import {StepperComponent} from "./stepper.component";
+import {StepComponent} from "./step.component";
+import {StepLineComponent} from "./stepLine.component";
+
+ 
+
+@NgModule({
+  imports: [
+    SharedModule,  
+
+  ],
+  declarations: [
+    StepperComponent, StepComponent, StepLineComponent
+  ], exports: [StepperComponent, StepComponent, StepLineComponent ]
+})
+export class StepperModule { }