Merge branch 'new-theme' into new-theme-linking

1. searchFields.ts: Added fos & sdg refine filters for research results.
2. resultLandingInfo.ts: Added string arrays "fos" and "sdg".
3. HelperFunctions.class.ts: Added method for sdg sorting (splits value, keeps only number before dot and compares numerically).
4. searchResearchResults.service.ts: [Bug fix] when parsing "dateofacceptance", stringify it only if it has a value.
5. searchFilter.component.ts: When sorting filters, sort differently SDGs.
6. resultLanding.service.ts:
	a. [Bug fix] Fix in parsing subtitle.
	b. [Bug fix] Parsing of "Related organizations" was accidentally deleted when parsing of relations changed.
	c. Parse "FOS" and "SDGs" in their specific fields, separately from subjects.
7. resultLanding.component.ts:
	a. [Bug fix] Do not make call for opencitations (deprecated).
	b. Updated method "hasPrimaryInfo()": Description is now array and added checks for organizations.
8. resultLanding.component.html: Display of "FOS" and "SDGs" separately from subjects.
9. showPublisher.component.ts: [Bug fix] Remove from html name of developer!
10. parsingFunctions.class.ts: Parse "FOS" and "SDGs" in their specific fields, separately from subjects.
11. metrics.component.ts: [Bug fix] Default value of "metricsClicked" should be false.

dashboard/sharedComponents/page-content/page-content.component.ts

@@ -1,24 +1,74 @@
-import {ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit} from "@angular/core";
+import {Component, ElementRef, EventEmitter, HostListener, OnDestroy, OnInit, Output, ViewChild} from "@angular/core";
+import {Subscription} from "rxjs";
+
+declare var UIkit;
 
 @Component({
   selector: '[page-content]',
   template: `
     <div id="page_content">
-    <div #header id="page_content_header" uk-sticky="show-on-up: true; animation: uk-animation-slide-top; media: @m" [attr.offset]="offset">
-      <div class="uk-container uk-container-large">
+      <div id="header">
+        <div id="page_content_header" uk-sticky="media: @m" [attr.offset]="offset">
+          <div #header class="uk-container uk-container-large uk-padding-remove-vertical">
             <ng-content select="[header]"></ng-content>
           </div>
         </div>
+      </div>
       <div id="page_content_inner" class="uk-section uk-container uk-container-large">
         <ng-content select="[inner]"></ng-content>
       </div>
     </div>
-  `
+  `,
 })
-export class PageContentComponent implements OnInit{
-  public offset: string;
+export class PageContentComponent implements OnInit, OnDestroy {
+  public offset: number;
+  public sticky: boolean = false;
+  @Output()
+  public stickyEmitter: EventEmitter<boolean> = new EventEmitter<boolean>();
+  @ViewChild("header") public header: ElementRef;
+  private current;
+  private subscriptions: any[] = [];
+  
+  constructor() {
+  }
   
   ngOnInit() {
-    this.offset = getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height');
+    if (typeof window !== "undefined") {
+      this.current = window.pageYOffset;
+      this.initSticky();
+    }
+  }
+  
+  initSticky() {
+    this.clear();
+    this.subscriptions.push(UIkit.util.on(document, 'active', '#sticky-menu', (): void => {
+      this.offset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--structure-header-height'));
+  
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#sticky-menu', (): void => {
+      this.offset = 0;
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'active', '#page_content_header', (): void => {
+      this.sticky = true;
+      this.stickyEmitter.emit(this.sticky);
+    }));
+    this.subscriptions.push(UIkit.util.on(document, 'inactive', '#page_content_header', (): void => {
+      this.sticky = false;
+      this.stickyEmitter.emit(this.sticky);
+    }));
+  }
+  
+  clear() {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      } else if (subscription instanceof Function) {
+        subscription();
+      }
+    });
+  }
+  
+  ngOnDestroy() {
+    this.clear();
   }
 }

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -25,10 +25,10 @@
         <ul class="uk-list">
           <li [class.uk-active]="isTheActiveUrl(specialMenuItem.route)">
             <a [routerLink]="specialMenuItem.route" [queryParams]="specialMenuItem.params"
-               [queryParamsHandling]="queryParamsHandling" class="uk-text-center">
+               [queryParamsHandling]="queryParamsHandling" class="uk-flex uk-flex-center uk-flex-middle uk-flex-wrap">
               <span [class.uk-display-block]="!open" [innerHTML]="satinizeHTML(specialMenuItem.icon)"></span>
-              <span [ngClass]="specialMenuItem.customClass"
-                    [class.uk-margin-small-left]="open"
+              <span [ngClass]="specialMenuItem.customClass" class="uk-text-center"
+                    [class.uk-margin-small-left]="open" [class.uk-margin-small-top]="!open"
                     [class.uk-text-small]="!open">{{specialMenuItem.title}}</span>
             </a>
           </li>

deposit/searchResultsInDeposit.component.html

@@ -18,10 +18,9 @@
 </div>
 <ul class="uk-margin-top uk-list uk-margin search-results ">
   <li *ngFor="let result of results" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-padding uk-card-hover">
 		<result-preview [properties]="properties" [showOrganizations]="true"
-                      [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
+										[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
+										[isCard]="true">
 		</result-preview>
-    </div>
   </li>
 </ul>

landingPages/landing-utils/metrics/metrics.component.ts

@@ -201,7 +201,7 @@ export class MetricsComponent {
   private sub: Subscription;
   private timeouts: any[] = [];
 
-  public metricsClicked: boolean = true;
+  public metricsClicked: boolean = false;
 
   public status: number;
   public state: number = -1;

landingPages/landing-utils/parsingFunctions.class.ts

@@ -559,10 +559,12 @@ export class ParsingFunctions {
   }
   
   // publication & dataset landing : for subjects and otherSubjects and classifiedSubjects
-  parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>] {
+  parseAllSubjects(_subjects: any): [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] {
     let subjects: string[];
     let otherSubjects: Map<string, string[]>;
     let classifiedSubjects: Map<string, string[]>;
+    let fos: string[];
+    let sdg: string[];
 
     let subject;
     let length = Array.isArray(_subjects) ? _subjects.length : 1;
@@ -571,6 +573,17 @@ export class ParsingFunctions {
       subject = Array.isArray(_subjects) ? _subjects[i] : _subjects;
       if (subject.classid != "") {
         if (subject.inferred && subject.inferred == true) {
+          if(subject.classid === "SDG") {
+            if (sdg == undefined) {
+              sdg = new Array<string>();
+            }
+            sdg.push(subject.content+"");
+          } else if(subject.classid === "FOS") {
+            if (fos == undefined) {
+              fos = new Array<string>();
+            }
+            fos.push(subject.content+"");
+          } else {
             if (classifiedSubjects == undefined) {
               classifiedSubjects = new Map<string, string[]>();
             }
@@ -579,7 +592,8 @@ export class ParsingFunctions {
               classifiedSubjects.set(subject.classname, new Array<string>());
             }
 
-          classifiedSubjects.get(subject.classname).push(subject.content);
+            classifiedSubjects.get(subject.classname).push(subject.content+"");
+          }
         } else {
           if (subject.classid == "keyword") {
             let content: string = subject.content+"";
@@ -636,7 +650,7 @@ export class ParsingFunctions {
         }
       }
     }
-    return [subjects, otherSubjects, classifiedSubjects];
+    return [subjects, otherSubjects, classifiedSubjects, fos, sdg];
   }
   
   parseContexts(_contexts: any): {

landingPages/landing-utils/showIdentifiers.component.ts

@@ -16,14 +16,16 @@ import {properties} from "../../../../environments/environment";
 @Component({
   selector: 'showIdentifiers',
   template: `
-    <div class="uk-text-muted">Persistent Identifiers</div>
+    <!-- <div class="uk-text-muted">Persistent Identifiers</div> -->
     <div class="uk-height-max-medium uk-overflow-auto uk-margin-small-top">
       <ng-container *ngFor="let key of keys let i=index">
-        <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1">
-          <p class="custom-break uk-margin-remove">
+        <!-- <div [class.multi-line-ellipsis]="large.get(key) && !showAll" [class.lines-2]="keys.length === 1" [class.line-1]="keys.length > 1"> -->
+				<div *ngIf="!showAll" class="uk-flex-inline uk-flex-wrap uk-margin-medium-right">
+          <p class="uk-margin-remove">
 						<span #content [id]="key">
-            <span class="uk-text-bold uk-text-uppercase">{{key}}: </span>
+							<span class="uk-text-muted uk-text-uppercase">{{key}}: </span>
 							<ng-container *ngFor="let item of identifiers.get(key) let j=index">
+								<!-- TODO: custom external link icons -->
 								<a *ngIf="key=='doi'" [href]="properties.doiURL + item" target="_blank" class="uk-display-inline">
 									{{item}} <span class="custom-external custom-icon"></span>
 								</a>

landingPages/landing-utils/showPublisher.component.ts

@@ -54,7 +54,7 @@ import {EnvProperties} from "../../utils/properties/env-properties";
           <span>, </span>
         </ng-container>
         <span *ngIf="journal['lissn']" class="uk-display-inline-block">
-          <span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>(kostis)
+          <span class="uk-display-inline-block">lissn: {{journal['lissn']}}</span>
           <span>, </span>
         </span>
         <span *ngIf="journal && (journal['issn'] ||journal['lissn'] || journal['eissn'] )">

landingPages/organization/deletedByInference/deletedByInference.component.ts

@@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
     </no-load-paging>
     <ul class="uk-list uk-list-divider  uk-margin">
       <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
-        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)"></result-preview>
+        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [isCard]="false"></result-preview>
       </li>
     </ul>
     <no-load-paging *ngIf="results.length > pageSize" [type]="type"

landingPages/result/deletedByInference/deletedByInference.component.ts

@@ -24,7 +24,7 @@ import {properties} from "../../../../../environments/environment";
     </no-load-paging>
     <ul class="uk-list uk-list-divider  uk-margin">
       <li *ngFor="let result of results.slice((page-1)*pageSize, page*pageSize)">
-        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false"></result-preview>
+        <result-preview [modal]="modal" [properties]="properties" [hasLink]="false" [result]="getResultPreview(result)" [showOrcid]="false" [isCard]="false"></result-preview>
       </li>
     </ul>
     <no-load-paging *ngIf="results.length > pageSize" [type]="type"

landingPages/result/resultLanding.component.html

@@ -182,6 +182,26 @@
                       <showIdentifiers [identifiers]="resultLandingInfo.identifiers" [showViewAll]="true"></showIdentifiers>
                     </div>
                     <!-- Subjects -->
+                    <div *ngIf="resultLandingInfo.fos" class="uk-margin-medium-bottom">
+                      <div class="uk-text-muted">
+                        Fields of Science and Technology classification
+                      </div>
+                      <div class="uk-margin-small-top">
+                        <div *ngIf="resultLandingInfo.fos && resultLandingInfo.fos.length > 0">
+                          {{resultLandingInfo.fos.join(', ')}}
+                        </div>
+                      </div>
+                    </div>
+                    <div *ngIf="resultLandingInfo.sdg" class="uk-margin-medium-bottom">
+                      <div class="uk-text-muted">
+                        Sustainable Development Goals
+                      </div>
+                      <div class="uk-margin-small-top">
+                        <div *ngIf="resultLandingInfo.sdg && resultLandingInfo.sdg.length > 0">
+                          {{resultLandingInfo.sdg.join(', ')}}
+                        </div>
+                      </div>
+                    </div>
                     <div *ngIf="resultLandingInfo.subjects || resultLandingInfo.otherSubjects ||
                         resultLandingInfo.classifiedSubjects" class="uk-margin-medium-bottom">
                       <showSubjects [subjects]="resultLandingInfo.subjects"
@@ -369,7 +389,8 @@
                   <ul class="uk-list uk-list-divider uk-margin">
                     <li *ngFor="let item of researchResults.slice((relatedPage-1)*pageSize, relatedPage*pageSize)">
                       <result-preview [modal]="relationModal" [properties]="properties"
-                                      [result]="getResultPreview(item)"></result-preview>
+                                      [result]="getResultPreview(item)"
+																			[isCard]="false"></result-preview>
                     </li>
                   </ul>
                   <no-load-paging *ngIf="researchResults.length > pageSize"

landingPages/result/resultLanding.component.ts

@@ -380,7 +380,7 @@ export class ResultLandingComponent {
         this.seoService.createLinkForCanonicalURL(this.canonicalUrl);
         this.updateUrl(this.canonicalUrl);
         if ((this.type == "publication") && (this.properties.environment == "beta" || this.properties.environment == "development") && (typeof document !== 'undefined')) {
-          this.getOpenCitations();
+          // this.getOpenCitations();
         }
         this.addNoIndexFilter();
         if (this.resultLandingInfo.title) {
@@ -453,7 +453,10 @@ export class ResultLandingComponent {
   }
 
   public get hasPrimaryInfo(): boolean {
-    return !!this.resultLandingInfo && (!!this.resultLandingInfo.description || !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects);
+        return !!this.resultLandingInfo && (
+      (!!this.resultLandingInfo.description && this.resultLandingInfo.description.length > 0)
+      || !!this.resultLandingInfo.identifiers || !!this.resultLandingInfo.subjects
+      || (!!this.resultLandingInfo.organizations && this.resultLandingInfo.organizations.length > 0));
   }
 
   public get hasSecondaryInfo(): boolean {

landingPages/result/resultLanding.service.ts

@@ -8,6 +8,7 @@ import {map} from "rxjs/operators";
 import {HostedByCollectedFrom, Organization} from "../../utils/result-preview/result-preview";
 import {Dates, Identifier, StringUtils} from "../../utils/string-utils.class";
 import {properties} from "../../../../environments/environment";
+import {HelperFunctions} from "../../utils/HelperFunctions.class";
 
 @Injectable()
 export class ResultLandingService {
@@ -151,18 +152,21 @@ export class ResultLandingService {
             if(!this.resultLandingInfo.title || data[1][i].classid == "main title") {
               this.resultLandingInfo.title = String(data[1][i].content);
             }
-            if(data[1][i].classid == "main title") {
-              break;
+            if(!this.resultLandingInfo.subtitle && data[1][i].classid === 'subtitle') {
+              this.resultLandingInfo.subtitle = String(data[1][i].content);
+            }
+            // if(data[1][i].classid == "main title") {
+            //   break;
+            // }
           }
         }
+        if(this.resultLandingInfo.title === this.resultLandingInfo.subtitle) {
+          this.resultLandingInfo.subtitle = "";
         }
         if(!this.resultLandingInfo.title) {
           this.resultLandingInfo.title = "";
         }
         // this.resultLandingInfo.title = (data[1][0] && data[1][0].content) ? String(data[1][0].content) : "";
-        if(data[1][1].classid === 'subtitle') {
-          this.resultLandingInfo.subtitle = (data[1][1] && data[1][1].content) ? String(data[1][1].content) : "";
-        }
       } else {
         this.resultLandingInfo.title = (data[1] && data[1].content) ? String(data[1].content) : "";
       }
@@ -191,6 +195,8 @@ export class ResultLandingService {
             }
 
             this.resultLandingInfo.relatedResults = this.parsingFunctions.parseResults(this.resultLandingInfo.relatedResults, relation, provenanceAction);
+          } else if(relation['to'].class && relation['to'].class.toLowerCase() == "hasauthorinstitution") {
+            this.resultLandingInfo.organizations = this.parseRelatedOrganizations(this.resultLandingInfo.organizations, relation);
           }
         }
       }
@@ -325,10 +331,20 @@ export class ResultLandingService {
 
     // res['result']['metadata']['oaf:entity']['oaf:result']['subject']
     if(data[7] != null) {
-      let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>] = this.parsingFunctions.parseAllSubjects(data[7]);
+      let subjectResults: [string[], Map<string, string[]>, Map<string, string[]>, string[], string[]] = this.parsingFunctions.parseAllSubjects(data[7]);
       this.resultLandingInfo.subjects = subjectResults[0];
       this.resultLandingInfo.otherSubjects = subjectResults[1];
       this.resultLandingInfo.classifiedSubjects = subjectResults[2];
+      this.resultLandingInfo.fos = subjectResults[3];
+      if(this.resultLandingInfo.fos) {
+        this.resultLandingInfo.fos.sort((a, b) => a.localeCompare(b))
+      }
+      this.resultLandingInfo.sdg = subjectResults[4];
+      if(this.resultLandingInfo.sdg) {
+        this.resultLandingInfo.sdg.sort((a, b) => {
+          return HelperFunctions.sortSDGs(a, b);
+        })
+      }
 
       this.resultLandingInfo.showEgiNotebookButton = this.parsingFunctions.notebookInSubjects;
     }

orcid/my-orcid-links/searchMyOrcidResults.component.html

@@ -13,7 +13,8 @@
         <div class="uk-grid uk-grid-divider">
         <div class="uk-width-expand@m uk-width-1-1 uk-first-column">
           <result-preview [properties]="properties" [showOrcid]="false" [showOrganizations]="true"
-                          [showSubjects]="true" [result]="result" [promoteWebsiteURL]="true">
+                          [showSubjects]="true" [result]="result" [promoteWebsiteURL]="true"
+													[isCard]="false">
           </result-preview>
         </div>
 

orcid/orcid-work.component.ts

@@ -41,10 +41,10 @@ declare var UIkit: any;
            [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ ((showLoading || !isLoggedIn) ? 'uk-disabled ' : '') + (!isLoggedIn ? 'half-opacity' : '')">
           <icon *ngIf="!showLoading" name="add" ratio="1"></icon>
           <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
-          <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to 
-            <span class="orcid-color space uk-flex uk-flex-middle">
-              <span>ORCID</span>
-              <img  class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"  style="width:16px; height:16px" loading="lazy">{{" "}}
+          <span class="uk-margin-small-left uk-flex uk-flex-middle">Add to&#160;
+            <span class="orcid-color uk-flex uk-flex-middle">
+              <span>ORCID&#160;</span>
+              <img  class="" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="orcid"  style="width:16px; height:16px" loading="lazy">{{" "}}
             </span>
           </span>
         </a>
@@ -60,9 +60,9 @@ declare var UIkit: any;
             [class]="'uk-flex uk-flex-middle uk-flex-right uk-margin-right '+ (showLoading ? 'uk-disabled' : '')">
           <icon *ngIf="!showLoading" name="remove" ratio="0.8"></icon>
           <span *ngIf="showLoading" class="uk-icon icon-button"><loading [top_margin]="false"></loading></span>
-          <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from 
+          <span class="uk-margin-small-left uk-flex uk-flex-middle">Delete from&#160;
             <span class="orcid-color space uk-flex uk-flex-middle">
-              <span>ORCID</span>
+              <span>ORCID&#160;</span>
               <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">{{" "}}
             </span>
           </span>
@@ -84,7 +84,7 @@ declare var UIkit: any;
           </span>
           <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
             [top_margin]="false"></loading></span>
-          <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to 
+          <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Add to&#160;
             <span class="orcid-color">
               ORCID
             </span>
@@ -105,7 +105,7 @@ declare var UIkit: any;
         </span>
         <span *ngIf="showLoading" class="uk-icon icon-button loading-action-button"><loading
           [top_margin]="false"></loading></span>
-        <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from
+        <span [class]="showLoading ? 'uk-margin-small-left' : 'space'">Delete from&#160;
             <span class="orcid-color">
               ORCID
             </span>
@@ -142,9 +142,9 @@ declare var UIkit: any;
 
     <ng-container *ngIf="pageType == 'my_search'">
       <span class="uk-margin-bottom uk-flex uk-flex-middle uk-flex-center">
-        <span>ORCID</span>
+        <span>ORCID&#160;</span>
         <img class="space" src="assets/common-assets/common/ORCIDiD_icon16x16.png" alt="" loading="lazy">
-        <span class="space">ACTIONS</span>
+        <span class="space">&#160;ACTIONS</span>
       </span>
       
       <span [attr.uk-tooltip]="(!putCodes || putCodes.length == 0) 

orcid/recommend-orcid-links/searchResultsForOrcid.component.html

@@ -9,10 +9,9 @@
 </div>
 <ul class="uk-margin-top uk-list uk-margin search-results ">
   <li *ngFor="let result of results" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-padding uk-card-hover">
 		<result-preview [properties]="properties" [showOrganizations]="true"
-                      [showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true">
+										[showSubjects]="true" [result]="getResultPreview(result)" [promoteWebsiteURL]="true"
+										[isCard]="true">
 		</result-preview>
-    </div>
   </li>
 </ul>

searchPages/searchUtils/modal-result/modal-result.component.ts

@@ -21,7 +21,8 @@ import {EnvProperties} from "../../../utils/properties/env-properties";
           <result-preview [modal]="modal" [properties]="properties"
                           [result]="getResultPreview(result)"
                           [showSubjects]="showSubjects"
-                          [showOrganizations]="showOrganizations"></result-preview>
+                          [showOrganizations]="showOrganizations"
+													[isCard]="false"></result-preview>
         </li>
       </ul>
       <no-load-paging *ngIf="totalResults > pageSize" [type]="type"

searchPages/searchUtils/newSearchPage.component.html

@@ -4,7 +4,7 @@
     refineFields.indexOf(customFilter.queryFieldName) ==
     -1) ||customFilter.isHiddenFilter)">
         <span class="uk-width-auto">
-          <span class="filter-tag uk-flex uk-flex-middle">
+          <span class="uk-label uk-flex uk-flex-middle">
               <span class="uk-margin-small-right uk-width-expand">{{customFilter.valueName}}</span>
           </span>
         </span>
@@ -15,9 +15,9 @@
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + type.name" (click)="removeResultType(type.id)"
                [class.uk-disabled]="disabled">
-              <span class="filter-tag uk-flex uk-flex-middle">
+              <span class="uk-label uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{type.name}}</span>
-                  <icon name="close" flex="true" ratio="0.7"></icon>
+                  <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
               </span>
             </a>
           </span>
@@ -30,9 +30,9 @@
           <span class="uk-width-auto">
             <a [attr.uk-tooltip]="'Remove ' + filter.selectedFromAndToValues" (click)="removeRangeFilter(filter)"
                [class.uk-disabled]="disabled">
-              <span class="filter-tag uk-flex uk-flex-middle">
+              <span class="uk-label uk-flex uk-flex-middle">
                   <span class="uk-margin-small-right uk-width-expand">{{filter.selectedFromAndToValues}}</span>
-                  <icon name="close" flex="true" ratio="0.7"></icon>
+                  <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
               </span>
             </a>
           </span>
@@ -46,9 +46,9 @@
                     class="uk-width-auto">
                 <a [attr.uk-tooltip]="'Remove ' + value.name" (click)="removeFilter(value, filter)"
                    [class.uk-disabled]="disabled">
-                  <span class="filter-tag uk-flex uk-flex-middle">
+                  <span class="uk-label uk-flex uk-flex-middle">
                       <span class="uk-margin-small-right uk-width-expand">{{value.name}}</span>
-                      <icon name="close" flex="true" ratio="0.7"></icon>
+                      <icon class="uk-text-muted" name="close" flex="true" ratio="0.7"></icon>
                   </span>
                 </a>
               </span>
@@ -153,6 +153,10 @@
 <schema2jsonld *ngIf="url" [URL]="url" type="search" [name]=pageTitleWithFilters
                [searchAction]=false [description]="metaDescription"></schema2jsonld>
 <div id="tm-main" class="uk-margin-medium-top" [class.uk-margin-top]="stickyForm">
+  <ng-template #loading>
+    <loading></loading>
+  </ng-template>
+  <ng-template [ngIf]="searchUtils.refineStatus != errorCodes.LOADING || existingFiltersWithValues !== 0" [ngIfElse]="loading">
     <div uk-grid>
     <div class="tm-main uk-width-1-1@s uk-width-1-1@m  uk-width-1-1@l uk-row-first ">
       <div class="uk-container uk-container-large">
@@ -231,8 +235,9 @@
                     [href]="openaireLink+this.routerHelper.createQueryParamsString(this.parameterNames, this.parameterValues)"
                     target="_blank"> OpenAIRE - Explore</a>.
               </div>
+							<div class="uk-flex uk-flex-between uk-flex-middle uk-flex-wrap uk-margin-medium-top uk-margin-bottom">
 								<!-- Total results, number of pages -->
-              <h6 class="uk-margin-bottom">
+								<h6 class="uk-margin-remove">
 									<ng-container *ngIf="results && searchUtils.totalResults > 0">
 										<span>{{searchUtils.totalResults|number}}</span>
 										<span class="uk-text-muted uk-text-capitalize"> {{type}}, page </span>
@@ -246,8 +251,8 @@
 										<span class="uk-text-muted"> of {{(totalPages(oldTotalResults)|number)}}</span>
 									</ng-container>
 								</h6>
-              <!-- TODO Download results position-->
-              <div *ngIf="showDownload" class="uk-width-auto@m uk-margin-small-bottom">
+								<!-- Download results -->
+								<div *ngIf="showDownload" class="uk-margin-small-bottom uk-margin-small-top">
 									<search-download
 											*ngIf="( entityType !='community' && entityType != 'stakeholder') && usedBy == 'search'"
 											[isDisabled]="disabled"
@@ -255,6 +260,7 @@
 											[piwikSiteId]="piwikSiteId">
 									</search-download>
 								</div>
+							</div>
               <!-- No Dashboard Filters -->
               <div
                   *ngIf="selectedRangeFilters+selectedFilters + selectedTypesNum  > 0 || (customFilter && (customFilter.selected == true || customFilter.isHiddenFilter))">
@@ -357,5 +363,6 @@
       </div>
     </div>
   </div>
+  </ng-template>
 </div>
 <modal-alert #removeCustomFilter (alertOutput)="closeCustomFilterModal()"></modal-alert>

searchPages/searchUtils/searchFilter.component.ts

@@ -10,7 +10,7 @@ import {
 import {Filter, Value} from './searchHelperClasses.class';
 import {ActivatedRoute, Router} from "@angular/router";
 import {SearchFields} from "../../utils/properties/searchFields";
-
+import {HelperFunctions} from "../../utils/HelperFunctions.class";
 @Component({
   selector: 'search-filter',
   templateUrl: 'searchFilter.component.html'
@@ -230,21 +230,24 @@ export class SearchFilterComponent implements OnInit, OnChanges {
   sort(values: Value[]) {
     let sorted: Value[] = values.slice();
     if (this.sortBy == "name") {
-      
       sorted.sort((n1, n2) => {
+        if (this.filter.filterId === "sdg") {
+          return HelperFunctions.sortSDGs(n1.name.toLowerCase(), n2.name.toLowerCase());
+        } else {
           if (n1.name.toLowerCase() > n2.name.toLowerCase()) {
             return 1;
           }
-        
           if (n1.name < n2.name) {
             return -1;
           }
-        
           return 0;
+        }
       });
+      return sorted;
     }
     event.stopPropagation(); 
     this.sortedValues = Object.assign(sorted);
+
   }
   
   toggle() {

searchPages/searchUtils/searchResult.component.html

@@ -1,10 +1,9 @@
 <ul class="uk-list uk-list-xlarge uk-margin" [ngClass]="custom_class">
   <errorMessages [status]="[status]" [type]="'results'"></errorMessages>
   <li *ngFor="let result of previewResults" class="uk-animation-fade">
-    <div class="uk-card uk-card-default uk-card-body uk-card-hover">
 		<result-preview [properties]="properties" [showOrganizations]="showOrganizations"
-                      [showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps">
+										[showSubjects]="showSubjects" [result]="result" [showEnermaps]="showEnermaps"
+										[isCard]="true">
 		</result-preview>
-    </div>
   </li>
 </ul>

services/searchResearchResults.service.ts

@@ -341,7 +341,7 @@ export class SearchResearchResultsService {
         });
       }
       
-      var date: string = (resData.dateofacceptance) + ""; // transform to string in case it is an integer
+      var date: string = (resData.dateofacceptance ? resData.dateofacceptance : '') + ''; // transform to string in case it is an integer
       result.year = (date && (date).indexOf('-') !== -1) ? date.split('-')[0] : date;
 
       let abstracts = this.parsingFunctions.parseDescription(resData.description);

sharedComponents/navigationBar.component.html

@@ -92,18 +92,18 @@
       </div>
     </div>
   </div>
-  <div class="uk-visible@m">
-    <div class="uk-navbar-transparent" [ngClass]="portal + '-menu'"
-         uk-sticky="show-on-up: true" media="@m" cls-active="uk-active uk-navbar-sticky"
-         cls-inactive="uk-navbar-transparent"
+  <div id="main-menu" class="uk-visible@m">
+    <div id="sticky-menu" class="uk-navbar-container" [ngClass]="portal + '-menu'"
+         uk-sticky="show-on-up: true; top: #main-menu" media="@m" cls-active="uk-active uk-navbar-sticky"
          [attr.animation]="(header.stickyAnimation?'uk-animation-slide-top':null)">
       <div
           *ngIf="(properties.environment =='beta' || properties.environment =='development') && showLogo  && header.badge">
         <img class="uk-position-top-left"
              [src]="'assets/common-assets/'+(properties.environment =='beta'?'beta_flag.svg':'prototype_flag.svg')"
-             alt="BETA" style="height: 100px; width: 100px; z-index: 1000">
+             alt="BETA" style="height: 65px; width: 65px; z-index: 1000">
       </div>
-      <nav class="uk-navbar uk-flex uk-navbar-container uk-padding-large uk-padding-remove-vertical" uk-navbar>
+      <div class="uk-container uk-container-expand">
+        <nav class="uk-navbar" uk-navbar>
           <ng-container *ngIf="!onlyTop">
             <div class="uk-navbar-left">
               <ng-container *ngIf="showLogo && isHeaderLeft">
@@ -235,6 +235,7 @@
           </ng-container>
         </nav>
       </div>
+    </div>
     <!-- New navbar for featured menu items - test only -->
     <ng-container *ngIf="featuredMenuItems?.length > 0 && properties.environment == 'development'">
       <div class="featuredNavBar">
@@ -264,11 +265,10 @@
 </div>
 <ng-template #header_template let-mobile="mobile">
   <a *ngIf="!header.url" [routerLink]="header.route" [class.uk-padding-remove]="!isHeaderLeft"
-     class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
+     class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class.uk-margin-medium-left]="!mobile">
     <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
          [src]="!mobile?header.logoUrl:header.logoSmallUrl"
-         [alt]="header.title"
-         class="uk-width-1-1">
+         [alt]="header.title">
     <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
       <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
         <p class="uk-margin-remove">{{header.title}}</p>
@@ -276,11 +276,10 @@
     </ng-container>
   </a>
   <a *ngIf="header.url" [href]="header.url" [class.uk-padding-remove]="!isHeaderLeft"
-     class="uk-logo uk-navbar-item uk-text-center uk-text-bold">
+     class="uk-logo uk-navbar-item uk-text-center uk-text-bold" [class..uk-margin-medium-left]="!mobile">
     <img *ngIf="(mobile && header.logoSmallUrl) || (!mobile && header.logoUrl)"
          [src]="!mobile?header.logoUrl:header.logoSmallUrl"
-         [alt]="header.title"
-         class="uk-width-1-1">
+         [alt]="header.title">
     <ng-container *ngIf="(mobile && !header.logoSmallUrl) || (!mobile && !header.logoUrl)">
       <div class="multi-line-ellipsis lines-2" [style.max-width]="(!mobile)?'25vw':null" [title]="header.title">
         <p class="uk-margin-remove">{{header.title}}</p>

sharedComponents/quick-contact/quick-contact.component.css

@@ -4,7 +4,7 @@
 	right: 5vw;
 }
 
-.uk-card > .uk-background-secondary:first-child {
+.uk-card > .uk-background-primary:first-child {
 	border-radius: 4px 4px 0 0;
 }
 

sharedComponents/quick-contact/quick-contact.component.html

@@ -5,7 +5,7 @@
 		<span class="uk-margin-small-left">Contact</span>
 	</a>
 	<div #drop id="quick-contact" class="uk-card uk-card-default uk-drop uk-overflow-auto" uk-drop="mode: click; pos: top-right; animation: uk-animation-fade">
-		<div class="uk-background-secondary uk-padding-small uk-text-center">
+		<div class="uk-background-primary uk-padding-small uk-text-center">
 			<div class="uk-text-small">
 				Send a message
 			</div>

utils/HelperFunctions.class.ts

@@ -70,4 +70,23 @@ export class HelperFunctions {
   public static getValues(value: any): any[] {
     return Object.keys(value).map(key => value[key]);
   }
+
+  public static sortSDGs(sgd1: string, sdg2: string): number {
+    let splitA: string[] = sgd1.split(".");
+    let numA: number;
+    if(splitA && splitA.length > 0) {
+      numA = +splitA[0];
+    }
+    let splitB: string[] = sdg2.split(".");
+    let numB: number;
+    if(splitB && splitB.length > 0) {
+      numB = +splitB[0];
+    }
+
+    if(numA && numB) {
+      return numA - numB;
+    } else {
+      return sgd1.localeCompare(sdg2);
+    }
+  }
 }

utils/entities/resultLandingInfo.ts

@@ -49,6 +49,8 @@ export class ResultLandingInfo {
   subjects: string[];
   otherSubjects: Map<string, string[]>;
   classifiedSubjects: Map<string, string[]>;          //<class of subject, subjects>
+  fos: string[];
+  sdg: string[];
   showEgiNotebookButton: boolean = false;
   
   // // percentage is for trust

utils/properties/searchFields.ts

@@ -14,7 +14,7 @@ export class SearchFields {
     "resultbestaccessright", "relfunder",
     "relfundinglevel0_id", "relfundinglevel1_id", "relfundinglevel2_id",
     "relproject",
-    "instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country"];
+    "instancetypename", "resultlanguagename", "community", "resulthostingdatasource", "country", "sdg", "fos"];
 
   public RESULT_ADVANCED_FIELDS: string[] = ["q", "resulttitle", "resultauthor", "authorid", "resultdescription", "resultsubject", "resultpublisher",
     "resultbestaccessright", "community", "collectedfromdatasourceid", "resulthostingdatasourceid", "resultdateofacceptance",
@@ -231,6 +231,22 @@ export class SearchFields {
       operator: "cu",
       equalityOperator: " exact ",
       filterType: "checkbox"
+    },
+    ["sdg"]: {
+      name: "Sustainable Development Goals (SDG)",
+      type: "refine",
+      param: "sdg",
+      operator: "sg",
+      equalityOperator: " exact ",
+      filterType: "checkbox"
+    },
+    ["fos"]: {
+      name: "Fields of Science and Technology classification (FOS)",
+      type: "refine",
+      param: "fos",
+      operator: "fs",
+      equalityOperator: " exact ",
+      filterType: "checkbox"
     }
   };
   

utils/rangeFilter/rangeFilter.component.html

@@ -25,7 +25,8 @@
                    [placeholder]="'e.g. ' + yearMax "/>
             <button type="submit" (click)="yearChanged()"
                     [ngStyle]="{'cursor': (rangeForm.valid && (yearFrom.dirty || yearTo.dirty)) ? 'pointer' : 'default'}"
-                    class="uk-icon uk-icon-button uk-margin-small-left uk-text-right uk-button-default"
+                    class="uk-icon uk-icon-button uk-button-default uk-margin-small-left"
+                    [class.uk-disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)"
 										[disabled]="isDisabled || rangeForm.invalid || (!yearFrom.dirty && !yearTo.dirty)">
               <svg  width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
                     icon="chevron-right" ratio="1">
@@ -55,20 +56,20 @@
 
 <!--              Natalia's suggestion-->
               <div class="uk-margin-small uk-margin-top uk-text-left">
-                <ul class="uk-subnav uk-subnav-divider recentyears">
+                <ul class="uk-text-small uk-grid uk-grid-small uk-grid-divider" uk-grid>
 <!--                  + (isDisabled ? ' uk-disabled uk-text-muted' : '')"-->
                   <li>
                     <a *ngIf="actionRoute" [routerLink]="getRoute()"
                          [queryParams]="getParams(0,(stringToNum(filter.selectedToValue) ==
                   currentYear
                   &&stringToNum(filter.selectedFromValue)  == currentYear))"
-                    [class]="'portal-link uk-text-center '
+                    [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue)  == currentYear) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(0)"
                   >This year</a>
                     <a *ngIf="!actionRoute"
-                       [class]="'portal-link uk-text-center '
+                       [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedFromValue) == currentYear && stringToNum(filter.selectedToValue)  == currentYear) ? ' uk-text-bold' : '')
                                 "
                        (click)="yearChanged(0)"
@@ -77,13 +78,13 @@
                   <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
                          [queryParams]="getParams(4,(stringToNum(filter.selectedToValue) == currentYear
                   &&stringToNum(filter.selectedFromValue)  == currentYear-4))"
-                    [class]="'portal-link uk-text-center '
+                    [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-4) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(4)"
                   >Last 5 years</a>
                     <a *ngIf="!actionRoute"
-                       [class]="'portal-link uk-text-center '
+                       [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-4) ? ' uk-text-bold' : '')
                                 "
                        (click)="yearChanged(4)"
@@ -91,13 +92,13 @@
                   </li>
                   <li><a *ngIf="actionRoute" [routerLink]="getRoute()"
                          [queryParams]="getParams(9,(stringToNum(filter.selectedToValue) == currentYear &&stringToNum(filter.selectedFromValue)  == currentYear-9))"
-                    [class]="'portal-link uk-text-center '
+                    [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-9) ? ' uk-text-bold' : '')
                                 "
                     (click)="yearChanged(9)"
                   >Last 10 years</a>
                     <a *ngIf="!actionRoute"
-                       [class]="'portal-link uk-text-center '
+                       [class]="'uk-text-center '
                                 + ((stringToNum(filter.selectedToValue) == currentYear && stringToNum(filter.selectedFromValue)  == currentYear-9) ? ' uk-text-bold' : '')
                                 "
                        (click)="yearChanged(9)"

utils/result-preview/result-preview.component.html

@@ -1,4 +1,5 @@
-<div *ngIf="result">
+<div *ngIf="result" [ngClass]="{'uk-card uk-card-default uk-card-hover': isCard}">
+	<div [ngClass]="{'uk-card-body': isCard}">
   <!-- Before title -->
   <div class="uk-grid uk-flex uk-flex-middle">
     <div   *ngIf="properties.enermapsURL && showEnermaps && result.enermapsId"  class=" uk-inline uk-width-auto  uk-text-center uk-visible-toggle">
@@ -119,49 +120,55 @@
     <div class="uk-margin-small-bottom">
       <span
           *ngIf="result.accessMode && result.accessMode.toLowerCase() !== 'not available'"
-          class="uk-label custom-label uk-text-truncate " [ngClass]="'label-' + accessClass(result.accessMode)"
+          class="uk-label uk-text-truncate " [ngClass]="'uk-label-' + accessClass(result.accessMode)"
           title="Access Mode">
         {{result.accessMode}}
       </span>{{' '}}
-      <span *ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
-            class="uk-label custom-label label-open uk-text-truncate"
+      <span 
+					*ngIf="result.openAccessMandatePublications && (!result.openAccessMandateDatasets)"
+					class="uk-label uk-label-success uk-text-truncate"
 					title="Open Access mandate for Publications">
 				Open Access mandate for Publications
 			</span>{{' '}}
       <span
           *ngIf="result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets && (result.openAccessMandatePublications == undefined || !result.openAccessMandatePublications)"
-          class="uk-label custom-label label-open uk-text-truncate " title="Open Access mandate for Research Data">
+          class="uk-label uk-label-success uk-text-truncate " title="Open Access mandate for Research Data">
 				Open Access mandate for Research Data
 			</span>{{' '}}
       <span
           *ngIf="result.openAccessMandatePublications != undefined && result.openAccessMandatePublications && result.openAccessMandateDatasets != undefined && result.openAccessMandateDatasets"
-          class="uk-label custom-label label-open uk-text-truncate"
+          class="uk-label uk-label-success uk-text-truncate"
           title="Open Access mandate for Publications and Research Data">
 				Open Access mandate for Publications and Research Data
 			</span>{{' '}}
       <span *ngIf="result.languages && result.languages.length > 0">
-    <span *ngFor="let language of result.languages"
-          class="uk-label custom-label label-language " title="Language">
+				<span
+						*ngFor="let language of result.languages"
+						class="uk-label" title="Language">
 					{{language}}
 				</span>{{' '}}
 			</span>
       <span *ngIf="result.programmingLanguages && result.programmingLanguages.length > 0">
-    <span *ngFor="let programmingLanguage of result.programmingLanguages"
-          class="uk-label custom-label label-language" title="Programming Language">
+				<span 
+						*ngFor="let programmingLanguage of result.programmingLanguages"
+						class="uk-label" title="Programming Language">
 					{{programmingLanguage}}
 				</span>{{" "}}
 			</span>
-      <span *ngIf="result.sc39" class="uk-label custom-label label-sc39" title="Special Clause 39">
+			<span 
+					*ngIf="result.sc39" class="uk-label" title="Special Clause 39">
 				Special Clause 39
 			</span>{{' '}}
-      <span *ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
-            class="uk-label custom-label  label-compatibility" title="Compatibility">
+			<span 
+					*ngIf="result.compatibility && result.compatibility != '' && result.compatibility != 'not available'"
+					class="uk-label" title="Compatibility">
 				{{result.compatibility}}
 			</span>{{' '}}
-      <span *ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility ==
-      'not available'"
-            class="uk-label custom-label  label-danger" title="OpenAIRE Compatibility">Not yet registered</span>
-      {{' '}}
+			<span 
+					*ngIf="result.compatibility != undefined && result.compatibility != '' && result.compatibility == 'not available'"
+					class="uk-label uk-label-danger" title="OpenAIRE Compatibility">
+				Not yet registered
+			</span>{{' '}}
     </div>
     <!-- Authors -->
     <div *ngIf="result.authors" class="uk-flex uk-margin-small-bottom">
@@ -281,13 +288,15 @@
     </span>
     </div>
   </div>
+    </div>
   </div>
 	</div>
   <!--&& loggedIn -->
   <div *ngIf="(result.pop_inf && result.DOI) ||
                 ((properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community') &&
                   ((showOrcid && result.identifiers && result.identifiers.size > 0) || result.orcidCreationDates?.length > 0))"
-       class="result-preview-bottom">
+				class="result-preview-bottom"
+				[ngClass]="{'uk-card-footer': isCard}">
     <!-- Impact Factors-->
     <span class="uk-flex uk-flex-top">
     <ng-container *ngIf="result.pop_inf && result.DOI">
@@ -362,6 +371,7 @@
       </div>
     </ng-container>
       <!-- && loggedIn    -->
+			<!-- TODO: change colors/opacity and disabled attr for ORCID buttons -->
     <span *ngIf="(properties.adminToolsPortalType == 'explore' || properties.adminToolsPortalType == 'community')
                  && showOrcid && result.identifiers && result.identifiers.size > 0"
           class="uk-width-1-3 uk-width-expand@s">

utils/result-preview/result-preview.component.ts

@@ -19,6 +19,7 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
   @Input() modal: AlertModal = null;
   @Input() promoteWebsiteURL: boolean = false;
   @Input() hasLink: boolean = true;
+	@Input() isCard: boolean = false;
   public routerHelper: RouterHelper = new RouterHelper();
   public urlParam: string;
   public url: string;
@@ -142,11 +143,11 @@ export class ResultPreviewComponent implements OnInit, OnChanges {
   
   public accessClass(accessMode: string): string {
     if(accessMode.toLowerCase().indexOf('open') !== -1) {
-      return 'open';
+      return 'success';
     } else if(accessMode.toLowerCase() === 'not available') {
-      return 'unknown';
+      return 'disabled'; // unknown
     } else {
-      return 'closed';
+      return 'disabled'; // closed
     }
   }
   

utils/smooth-scroll.ts

@@ -1,4 +1,4 @@
-import {NavigationEnd, Router} from '@angular/router';
+import {ActivationStart, NavigationEnd, Router} from '@angular/router';
 import {Injectable} from '@angular/core';
 import {Subscription} from 'rxjs';
 
@@ -8,17 +8,20 @@ import {Subscription} from 'rxjs';
 export class SmoothScroll {
   private interval;
   private readonly sub;
-  private lastRoute;
+  private lastComponent;
+  private currentComponent: any;
   
   constructor(private router: Router) {
     if (typeof window !== "undefined") {
       this.sub = router.events.subscribe(event => {
-        if (event instanceof NavigationEnd) {
+        if (event instanceof ActivationStart) {
+          this.currentComponent = event.snapshot.component;
+        } else if (event instanceof NavigationEnd) {
           if (this.interval) {
             clearInterval(this.interval);
           }
           const fragment = router.parseUrl(router.url).fragment;
-          if (this.lastRoute !== this.getUrl(event.url)) {
+          if (this.lastComponent !== this.currentComponent) {
             window.scrollTo({top: 0});
           }
           if (fragment) {
@@ -49,16 +52,12 @@ export class SmoothScroll {
           } else {
             window.scrollTo({top: 0, behavior: 'smooth'});
           }
-          this.lastRoute = this.getUrl(event.url);
+          this.lastComponent = this.currentComponent;
         }
       });
     }
   }
   
-  private getUrl(url: string) {
-    return url.split('?')[0].split('#')[0];
-  }
-  
   public clearSubscriptions() {
     if (this.sub && this.sub instanceof Subscription) {
       this.sub.unsubscribe();

utils/tabs/tab.component.ts

@@ -7,9 +7,10 @@
 import { Component, Input } from '@angular/core';
 
 export interface TabIcon {
-	svg: string;
-	ratio: number;
-	fill: string;
+  name?: string;
+	svg?: string;
+	ratio?: number;
+  active: string;
 }
 
 @Component({

utils/tabs/tabs.component.ts

@@ -2,16 +2,17 @@
  * The main component that renders single TabComponent
  * instances.
  */
-import {Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
+import {AfterContentInit, Component, ContentChildren, EventEmitter, Input, Output, QueryList,} from '@angular/core';
 import {TabComponent} from './tab.component';
 
 @Component({
   selector: 'my-tabs',
   template: `
     <ul class="uk-tab" [ngClass]="customClass" uk-tab="connect: .tabs-content">
-      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="i === 0" (click)="selectTab(tab)">
+      <li *ngFor="let tab of tabs.toArray(); let i=index" [ngClass]="tab.customClass" [class.uk-active]="selected === tab.tabId" (click)="selectTab(tab)">
         <a class="uk-width-1-1 uk-height-1-1 uk-flex uk-flex-center" [ngClass]="tab.tabIcon ? 'uk-flex-column' : ''">
-					<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon" [fill]="tab.tabIcon" class="uk-margin-small-bottom"></icon>
+					<icon *ngIf="tab.tabIcon" [svg]="tab.tabIcon.svg" [ratio]="tab.tabIcon.ratio?tab.tabIcon.ratio:1" class="uk-margin-small-bottom"
+                [ngClass]="(selected === tab.tabId)?tab.tabIcon.active:null"></icon>
           <div>{{tab.title}}</div>
           <div *ngIf="tab.num" class="number">{{tab.num | number}}</div>
         </a>
@@ -22,14 +23,21 @@ import {TabComponent} from './tab.component';
     </div>
   `
 })
-export class TabsComponent {
+export class TabsComponent implements AfterContentInit {
   @Input()
   public customClass: string;
   @ContentChildren(TabComponent) tabs: QueryList<TabComponent>;
   @Output() public selectedActiveTab: EventEmitter<any> = new EventEmitter();
+  public selected: string;
+  
+  ngAfterContentInit() {
+    if(this.tabs.length > 0) {
+      this.selected = this.tabs.get(0).tabId;
+    }
+  }
   
   selectTab(tab: TabComponent){
-    // activate the tab the user has clicked on.
+    this.selected = tab.tabId;
     this.selectedActiveTab.emit(tab.tabId);
   }
 }