Merge remote-tracking branch 'origin/angular-16' into plugins-functionality

cache-interceptor.service.ts

@@ -1,6 +1,5 @@
-import { Injectable, Inject, PLATFORM_ID } from '@angular/core';
+import {Injectable, Inject, PLATFORM_ID, TransferState} from '@angular/core';
 import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';
-import { TransferState } from '@angular/platform-browser';
 import { properties } from "../../environments/environment";
 
 @Injectable({

claims/claim-utils/claimEntitiesSelection.component.ts

@@ -1,39 +0,0 @@
-import {Component, Input, ViewChild} from '@angular/core';
-import {ShowOptions} from './claimHelper.class';
-import {MatSelect} from "@angular/material/select";
-import {OpenaireEntities} from "../../utils/properties/searchFields";
-
- 
-@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">{{openaireEntities.RESULTS}}</mat-option>
-        <mat-option  *ngIf="showOptions.linkToEntities.indexOf('project')!=-1" value="project">{{openaireEntities.PROJECTS}}</mat-option>
-        <mat-option  *ngIf="showOptions.linkToEntities.indexOf('context')!=-1" value="context">{{openaireEntities.COMMUNITIES}}</mat-option>
-        
-      </mat-select>
-  
-      
-     </span>
-    `,
-
-})
-export class ClaimEntitiesSelectionComponent{
-  @ViewChild(MatSelect) matSelect: MatSelect;
-  @Input() showOptions:ShowOptions = new ShowOptions();
-  public openaireEntities = OpenaireEntities;
-   
-  open() {
-    if (this.matSelect && !this.matSelect.focused) {
-      this.matSelect.open();
-    }
-  }
- 
-}

claims/claim-utils/claimProjectSearchForm.module.ts

@@ -1,11 +1,9 @@
-import { NgModule } from '@angular/core';
+import {NgModule} from '@angular/core';
 
-import { SharedModule } from '../../../openaireLibrary/shared/shared.module';
+import {SharedModule} from '../../shared/shared.module';
-import { CommonModule }        from '@angular/common';
+import {CommonModule} from '@angular/common';
 
 import {ClaimProjectsSearchFormComponent} from './claimProjectSearchForm.component';
-// import {LoadingModalModule} from '../../utils/modal/loadingModal.module';
-
 import {ProjectServiceModule} from '../../landingPages/project/projectService.module';
 import {ProjectsServiceModule} from '../../services/projectsService.module';
 import {EntitiesAutocompleteModule} from '../../utils/entitiesAutoComplete/entitiesAutoComplete.module';
@@ -13,29 +11,25 @@ import {HelperModule} from '../../utils/helper/helper.module';
 
 import {ClaimResultsModule} from './claimResults.module';
 
-import {PagingModule } from '../../utils/paging.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";
 import {AdvancedSearchInputModule} from "../../sharedComponents/advanced-search-input/advanced-search-input.module";
 import {InputModule} from "../../sharedComponents/input/input.module";
 import {DropdownFilterModule} from "../../utils/dropdown-filter/dropdown-filter.module";
 
- @NgModule({
+@NgModule({
    imports: [
      SharedModule, CommonModule,
      // LoadingModalModule,
      ProjectServiceModule, ProjectsServiceModule, EntitiesAutocompleteModule, HelperModule,
-     PagingModule, SearchFilterModule, ClaimResultsModule, RangeFilterModule, MatSelectModule, AdvancedSearchInputModule, InputModule, DropdownFilterModule
+     PagingModule, SearchFilterModule, ClaimResultsModule, RangeFilterModule, AdvancedSearchInputModule, InputModule, DropdownFilterModule
    ],
   providers:[
   ],
    declarations: [
      ClaimProjectsSearchFormComponent,
-     ClaimEntitiesSelectionComponent
-
    ],
-   exports: [ClaimProjectsSearchFormComponent, ClaimEntitiesSelectionComponent]
+   exports: [ClaimProjectsSearchFormComponent]
  })
 export class ClaimProjectsSearchFormModule { }

claims/linking/linkingGeneric.component.html

@@ -45,7 +45,7 @@
       </a>
     </div>
   </div>
-  <div *ngIf="!inlineEntity" uk-sticky="offset: 65; bottom: #pageBottom; media: @m" class="uk-blur-background">
+  <div *ngIf="!inlineEntity" uk-sticky="offset: 65; end: #pageBottom; media: @m" class="uk-blur-background">
     <div class="uk-section-xsmall">
       <stepper>
         <step [status]="stepStatus('source')" stepId="source" stepNumber="1"
@@ -110,7 +110,7 @@
               </div>
               <!-- Basket-->
               <div *ngIf="showOptions.show != 'claim'" class="uk-width-1-3">
-                <div id="basket" uk-sticky="offset: 220; bottom: !*; media: @m" style="z-index: 0!important;">
+                <div id="basket" uk-sticky="offset: 220; end: !*; media: @m" style="z-index: 0!important;">
                   <div class="uk-card uk-card-default linkingBasket">
                     <div class="uk-card-body uk-padding-small">
                       <div class="uk-margin-right">

connect/communityGuard/connectAdminLoginGuard.guard.ts

@@ -1,20 +1,13 @@
 import {filter, map, mergeMap, take} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
-import {
+import { ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-  ActivatedRouteSnapshot,
-  CanActivate,
-  CanActivateChild,
-  Router,
-  RouterStateSnapshot,
-  UrlTree
-} from '@angular/router';
 import {Observable, of} from 'rxjs';
 import {Session} from '../../login/utils/helper.class';
 import {LoginErrorCodes} from '../../login/utils/guardHelper.class';
 import {UserManagementService} from "../../services/user-management.service";
 
 @Injectable()
-export class ConnectAdminLoginGuard implements CanActivate, CanActivateChild {
+export class ConnectAdminLoginGuard  {
   
   constructor(private router: Router,
               private userManagementService: UserManagementService) {

connect/communityGuard/isCommunity.guard.ts

@@ -1,11 +1,5 @@
-import { Injectable } from '@angular/core';
+import {Injectable} from '@angular/core';
-import {
+import {ActivatedRouteSnapshot, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
-  Router,
-  CanActivate,
-  ActivatedRouteSnapshot,
-  RouterStateSnapshot,
-  CanLoad, Route, UrlSegment, CanActivateChild, UrlTree
-} from '@angular/router';
 import {Observable} from 'rxjs';
 
 import {ConnectHelper} from '../connectHelper';
@@ -14,7 +8,7 @@ import {CommunityService} from "../community/community.service";
 import {map} from "rxjs/operators";
 
 @Injectable()
-export class IsCommunity implements CanActivate, CanActivateChild {
+export class IsCommunity  {
 
   constructor(private router: Router,
               private communityService: CommunityService) {

dashboard/divId/divIds.module.ts

@@ -6,14 +6,6 @@ import {AlertModalModule} from '../../utils/modal/alertModal.module';
 import {DivIdsComponent} from './divIds.component';
 import {AdminToolServiceModule} from "../../services/adminToolService.module";
 import {InputModule} from "../../sharedComponents/input/input.module";
-
-
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import { MatCheckboxModule } from "@angular/material/checkbox";
-import { MatFormFieldModule } from "@angular/material/form-field";
-
-
-import {MatChipsModule} from '@angular/material/chips';
 import {AdminTabsModule} from "../sharedComponents/admin-tabs/admin-tabs.module";
 import {PageContentModule} from "../sharedComponents/page-content/page-content.module";
 import {ClassesRoutingModule} from "./classes-routing.module";
@@ -24,8 +16,8 @@ import {LoadingModule} from "../../utils/loading/loading.module";
 @NgModule({
   imports: [
     CommonModule, RouterModule, FormsModule,
-    AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule, MatAutocompleteModule, MatFormFieldModule, MatChipsModule,
+    AlertModalModule, ReactiveFormsModule, AdminToolServiceModule, InputModule,
-    MatCheckboxModule, AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule, LoadingModule
+    AdminTabsModule, PageContentModule, ClassesRoutingModule, SearchInputModule, IconsModule, LoadingModule
   ],
     declarations: [DivIdsComponent],
     exports: [DivIdsComponent]

dashboard/helpTexts/page-help-content-form.module.ts

@@ -8,21 +8,20 @@ import {PageContentFormComponent} from './page-help-content-form.component';
 import {PageHelpContentFormRoutingModule} from './page-help-content-form-routing.module';
 import {AdminToolServiceModule} from '../../services/adminToolService.module';
 import {InputModule} from '../../sharedComponents/input/input.module';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {IconsModule} from '../../utils/icons/icons.module';
 import {PageContentModule} from '../sharedComponents/page-content/page-content.module';
 import {RouterModule} from '@angular/router';
 import {LoadingModule} from '../../utils/loading/loading.module';
+import {MatSlideToggleModule} from "@angular/material/slide-toggle";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule,
     SafeHtmlPipeModule, CKEditorModule,
-    AlertModalModule, ReactiveFormsModule, PageHelpContentFormRoutingModule, AdminToolServiceModule, InputModule, MatSlideToggleModule, IconsModule, PageContentModule, LoadingModule
+    AlertModalModule, ReactiveFormsModule, PageHelpContentFormRoutingModule, AdminToolServiceModule, InputModule, IconsModule, PageContentModule, LoadingModule, MatSlideToggleModule
   ],
-    declarations: [
+  declarations: [PageContentFormComponent],
-        PageContentFormComponent
+  exports: [PageContentFormComponent]
-    ],
-    exports: [PageContentFormComponent]
 })
-export class PageHelpContentFormModule {}
+export class PageHelpContentFormModule {
+}

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

@@ -80,9 +80,6 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   }
 
   ngOnInit() {
-    if(this.isBrowser) {
-      this.stickyBugWorkaround();
-    }
     this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
       this.isMobile = isMobile;
       if(this.isBrowser) {
@@ -132,41 +129,7 @@ export class PageContentComponent implements OnInit, AfterViewInit, OnDestroy {
   
   initFooter() {
     let footer_offset = this.calcStickyFooterOffset(this.sticky_footer.nativeElement);
-    this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {bottom: true, offset: footer_offset});
+    this.sticky.footer = UIkit.sticky(this.sticky_footer.nativeElement, {end: true, offset: footer_offset});
-  }
-
-  /**
-   * Workaround for sticky not update bug when sidebar is toggled.
-   * TODO when UIKit will be updated => remove
-   *
-   * */
-  stickyBugWorkaround() {
-    let sidebarOffset = Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-width')) -
-      Number.parseInt(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-sidebar-mini-width'));
-    let transitionDelay = Number.parseFloat(getComputedStyle(document.documentElement).getPropertyValue('--dashboard-transition-delay')) * 1000;
-    this.subscriptions.push(this.layoutService.isOpen.subscribe(isOpen => {
-      if (this.sticky.header) {
-        if (isOpen) {
-          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) - sidebarOffset + 'px';
-        } else {
-          this.sticky.header.$el.style.width = Number.parseInt(this.sticky.header.$el.style.width) + sidebarOffset + 'px';
-        }
-        setTimeout(() => {
-          this.sticky.header.$emit();
-        }, transitionDelay);
-      }
-      if (this.sticky.footer) {
-        if (isOpen) {
-          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) - sidebarOffset + 'px';
-        } else {
-          this.sticky.footer.$el.style.width = Number.parseInt(this.sticky.footer.$el.style.width) + sidebarOffset + 'px';
-        }
-        setTimeout(() => {
-          this.sticky.footer.$emit();
-        }, transitionDelay);
-      }
-      this.cdr.detectChanges();
-    }));
   }
 
   /**

dashboard/sharedComponents/sidebar/layout.service.ts

@@ -79,6 +79,10 @@ export class LayoutService {
    *  Add hasMenuSearchBar: false/ nothing on data of route config, if the search bar in the menu should not appear, otherwise true.
    */
   private hasMenuSearchBarSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
+  /**
+   * Add hasStickyHeaderOnMobile: true in order to activate uk-sticky in header of mobile/tablet devices.
+   * */
+  private hasStickyHeaderOnMobileSubject: BehaviorSubject<boolean> = new BehaviorSubject<boolean>(false);
 
   private subscriptions: any[] = [];
 
@@ -177,6 +181,12 @@ export class LayoutService {
         } else {
           this.setHasMenuSearchBar(false);
         }
+        if (data['hasStickyHeaderOnMobile'] !== undefined &&
+            data['hasStickyHeaderOnMobile'] === true) {
+          this.setHasStickyHeaderOnMobile(true);
+        } else {
+          this.setHasStickyHeaderOnMobile(false);
+        }
       }
     }));
     this.setObserver();
@@ -311,4 +321,12 @@ export class LayoutService {
   setHasMenuSearchBar(value: boolean) {
     this.hasMenuSearchBarSubject.next(value);
   }
+
+  get hasStickyHeaderOnMobile(): Observable<boolean> {
+    return this.hasStickyHeaderOnMobileSubject.asObservable();
+  }
+
+  setHasStickyHeaderOnMobile(value: boolean) {
+    this.hasStickyHeaderOnMobileSubject.next(value);
+  }
 }

dashboard/sharedComponents/sidebar/sideBar.component.html

@@ -29,7 +29,7 @@
     </a>
   </div>
   <div *ngIf="items.length > 0" class="menu_section uk-margin-large-top" [class.mobile]="mobile" style="min-height: 30vh">
-    <ul #nav class="uk-list uk-nav uk-nav-parent-icon" [class.uk-list-large]="mobile"
+    <ul #nav class="uk-list uk-nav" [class.uk-list-large]="mobile"
         [class.uk-nav-default]="!mobile" [class.uk-nav-primary]="mobile" uk-nav="duration: 400">
       <ng-template ngFor [ngForOf]="items" let-item>
         <li [class.uk-active]="item.isActive" [ngClass]="item.customClass"
@@ -40,6 +40,7 @@
               <icon class="menu-icon" [customClass]="item.icon.class" [name]="item.icon.name" ratio="0.9" [svg]="item.icon.svg" [flex]="true"></icon>
             </div>
             <span [class.hide-on-close]="item.icon" class="uk-width-expand@l uk-text-truncate uk-margin-small-left">{{item.title}}</span>
+            <span *ngIf="item.items.length > 0" class="uk-nav-parent-icon hide-on-close"></span>
           </a>
           <ul *ngIf="item.items?.length > 0 && (isBrowser || item.isActive)" class="uk-nav-sub">
             <li *ngFor="let subItem of item.items" [ngClass]="subItem.customClass"

error/isDevelopmentGuard.guard.ts

@@ -4,24 +4,18 @@ import {Observable} from 'rxjs';
 
 import {properties} from "../../../environments/environment";
 
-@Injectable()
+@Injectable({
-export class isDevelopmentGuard implements CanActivate, CanLoad {
+	providedIn: 'root'
+})
+export class isDevelopmentGuard {
 	constructor(private router: Router) {
 	}
 	
-	check(): Observable<boolean> | boolean {
+	canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree{
 		if(properties.environment == 'development') {
 			return true;
 		} else {
 			this.router.navigate([properties.errorLink]);
 		}
 	}
-	
+}
-	canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree{
-		return this.check();
-	}
-
-	canLoad(route: Route, segments: UrlSegment[]): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
-		return this.check()
-	}
-}

error/isRouteEnabled.guard.ts

@@ -1,13 +1,13 @@
 import {Observable} from 'rxjs';
 import {take, tap} from 'rxjs/operators';
 import {Injectable} from '@angular/core';
-import {ActivatedRouteSnapshot, CanActivate, Data, Router, RouterStateSnapshot, UrlTree} from '@angular/router';
+import { ActivatedRouteSnapshot, Data, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
 import {ConfigurationService} from '../utils/configuration/configuration.service';
 import {ConnectHelper} from '../connect/connectHelper';
 import {properties} from "../../../environments/environment";
 
 @Injectable()
-export class IsRouteEnabled implements CanActivate {
+export class IsRouteEnabled  {
   
   constructor(private router: Router,
               private config: ConfigurationService) {

fos/fos.component.html

@@ -49,7 +49,7 @@
 		<div class="uk-margin-top uk-padding-small">
 			<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
 				<div class="uk-width-1-4@m uk-visible@m">
-					<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 200;">
+					<div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 200;">
 						<ul *ngIf="!keyword" class="uk-tab uk-tab-left">
 							<li *ngFor="let item of fos; index as i" [class.uk-active]="activeSection === item.id"
 								class="uk-margin-small-bottom uk-text-capitalize">

http-interceptor.service.ts

@@ -2,7 +2,7 @@ import {Injectable, Inject, PLATFORM_ID, Optional} from '@angular/core';
 import {HttpInterceptor, HttpRequest, HttpHandler, HttpEvent, HttpResponse, HttpHeaders} from '@angular/common/http';
 import {Observable, of} from 'rxjs';
 import {tap} from 'rxjs/operators';
-import {TransferState, makeStateKey, StateKey} from '@angular/platform-browser';
+import {TransferState, makeStateKey, StateKey} from '@angular/core';
 import {isPlatformServer} from '@angular/common';
 import {properties} from "../../environments/environment";
 import {REQUEST} from "./utils/tokens";

landingPages/dataProvider/dataProvider.component.html

@@ -17,7 +17,7 @@
         <!-- left box - actions -->
         <!-- <div id="landing-left-sidebar" *ngIf="dataProviderInfo" class="uk-visible@s uk-padding-remove-horizontal">
           <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
-              uk-sticky="bottom: true" [attr.offset]="offset">
+              uk-sticky="end: true" [attr.offset]="offset">
             <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
               <ng-container *ngIf="dataProviderInfo && hasMetrics">
                 <metrics [pageViews]="pageViews"
@@ -48,7 +48,8 @@
         <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
 
           <ng-template #graph_and_feedback_template>
-            <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!dataProviderInfo">
+            <div class="uk-padding-xsmall">
+              <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap" [class.uk-invisible]="!dataProviderInfo">
               <!-- Last Index Info-->
               <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
                 <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
@@ -63,10 +64,11 @@
                 <a (click)="showFeedback = true; scroll()" class="uk-text-xsmall">Give us feedback</a>
               </div>
             </div>
+            </div>
           </ng-template>
 
           <div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
-              uk-sticky="bottom: true;" [attr.offset]="graph_offset">
+              uk-sticky="end: true;" [attr.offset]="graph_offset">
             <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
           </div>
 
@@ -229,7 +231,7 @@
                   </div>
                 </div>
                 <div id="main-tabs-div" class="uk-sticky uk-blur-background"
-                    uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
+                    uk-sticky="end: true; media: @m" [attr.offset]="offset">
                   <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
                     <landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"
                                     [properties]="properties" [title]="dataProviderInfo.title.name"

landingPages/feedback/feedback.module.ts

@@ -3,7 +3,6 @@ import {CommonModule} from "@angular/common";
 import {FeedbackComponent} from "./feedback.component";
 import {LandingHeaderModule} from "../landing-utils/landing-header/landing-header.module";
 import {ReactiveFormsModule} from "@angular/forms";
-import {MatSelectModule} from "@angular/material/select";
 import {AlertModalModule} from "../../utils/modal/alertModal.module";
 import {EmailService} from "../../utils/email/email.service";
 import {RecaptchaModule} from "ng-recaptcha";
@@ -11,7 +10,7 @@ import {IconsModule} from "../../utils/icons/icons.module";
 import {InputModule} from "../../sharedComponents/input/input.module";
 
 @NgModule({
-  imports: [CommonModule, LandingHeaderModule, ReactiveFormsModule, MatSelectModule, AlertModalModule, RecaptchaModule, IconsModule, InputModule],
+  imports: [CommonModule, LandingHeaderModule, ReactiveFormsModule, AlertModalModule, RecaptchaModule, IconsModule, InputModule],
   declarations: [FeedbackComponent],
   providers: [EmailService],
   exports: [FeedbackComponent]

landingPages/landing-utils/availableOn.component.ts

@@ -26,9 +26,10 @@ import {RouterHelper} from "../../utils/routerHelper.class";
                 <icon [flex]="true" [name]="(isOpen?'arrow_drop_up':'arrow_drop_down')"></icon>
               </span>
             </a>
-            <div #dropElement uk-drop="mode: click; pos: bottom-left;" 
+            <div #dropElement uk-drop="mode: click; pos: bottom-left; flip: false; shift: false" class="uk-drop download-drop">
-              class="uk-drop download-drop uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small uk-height-max-large uk-overflow-auto">
+                <div class="uk-card uk-card-default uk-padding-small uk-padding-remove-horizontal uk-text-small uk-height-max-large uk-overflow-auto">
-              <ng-container *ngTemplateOutlet="availableOnList"></ng-container>
+                    <ng-container *ngTemplateOutlet="availableOnList"></ng-container>
+                </div>
             </div>
           </ng-container>
           

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

@@ -1,19 +1,9 @@
-import {
+import {Component, Inject, Input, OnDestroy, OnInit, RendererFactory2, ViewEncapsulation} from '@angular/core';
-  Component,
-  Inject,
-  Input,
-  OnDestroy,
-  OnInit,
-  RendererFactory2,
-  ViewEncapsulation
-} from '@angular/core';
 import {Citation, CitationData} from './citation.class';
-import {ResultLandingInfo} from "../../../utils/entities/resultLandingInfo";
 import {DOCUMENT} from "@angular/common";
 import {EnvProperties} from "../../../utils/properties/env-properties";
 import {properties} from "../../../../../environments/environment";
 import {PiwikService} from "../../../utils/piwik/piwik.service";
-import {ResultPreview} from "../../../utils/result-preview/result-preview";
 
 declare var Cite: any;
 // Based on https://citation.js.org/api/tutorial-getting_started.html browser release

landingPages/landing-utils/citeThis/citeThis.module.ts

@@ -3,13 +3,12 @@ import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 
 import {CiteThisComponent} from './citeThis.component';
-import { MatSelectModule } from "@angular/material/select";
 import {InputModule} from "../../../sharedComponents/input/input.module";
 
 @NgModule({
   imports: [
 
-    CommonModule, FormsModule, MatSelectModule, InputModule
+    CommonModule, FormsModule, InputModule
   ],
   declarations: [
      CiteThisComponent

landingPages/organization/organization.component.html

@@ -16,7 +16,7 @@
 				<!-- left column -->
 				<!-- <div id="landing-left-sidebar" *ngIf="organizationInfo" class="uk-visible@s uk-padding-remove-horizontal">
 					<div class="uk-flex uk-flex-column uk-flex-right uk-sticky"
-						uk-sticky="bottom: true" [attr.offset]="offset">
+						uk-sticky="end: true" [attr.offset]="offset">
 						<div class="uk-margin-large-bottom uk-align-center">
 							<div class="uk-text-meta uk-text-uppercase">Actions</div>
 							<ul class="uk-list">
@@ -47,25 +47,27 @@
 
           <!-- Graph and feedback -->
           <ng-template #graph_and_feedback_template>
-            <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
+			  <div class="uk-padding-xsmall">
-              <!-- Last Index Info-->
+				  <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!organizationInfo">
-              <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
+					  <!-- Last Index Info-->
-                <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
+					  <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
-              </a>
+						  <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
-              <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-width-1-1 uk-width-auto@l">
+					  </a>
+					  <span *ngIf="indexUpdateDate" class="uk-text-baseline uk-text-meta uk-width-1-1 uk-width-auto@l">
                 Last update of records in OpenAIRE: {{indexUpdateDate | date: 'MMM dd, yyyy'}}
               </span>
 
-              <!--Feedback-->
+					  <!--Feedback-->
-              <div *ngIf="properties.reCaptchaSiteKey" class="uk-width-1-1 uk-width-auto@l">
+					  <div *ngIf="properties.reCaptchaSiteKey" class="uk-width-1-1 uk-width-auto@l">
-                <span class="uk-text-meta uk-text-xsmall">Found an issue? </span>
+						  <span class="uk-text-meta uk-text-xsmall">Found an issue? </span>
-                <a (click)="showFeedback = true; scroll()" class="uk-text-xsmall">Give us feedback</a>
+						  <a (click)="showFeedback = true; scroll()" class="uk-text-xsmall">Give us feedback</a>
-              </div>
+					  </div>
-            </div>
+				  </div>
+			  </div>
           </ng-template>
 
           <div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
-							uk-sticky="bottom: true;" [attr.offset]="graph_offset">
+							uk-sticky="end: true;" [attr.offset]="graph_offset">
             <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
           </div>
 
@@ -171,7 +173,7 @@
 								</div>
 								<!-- Tabs section -->
 								<div id="main-tabs-div" class="uk-sticky uk-blur-background"
-										 uk-sticky="bottom: true; media: @m"  [attr.offset]="offset">
+										 uk-sticky="end: true; media: @m"  [attr.offset]="offset">
 									<div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
 	<!--                  <showTitle *ngIf="stickyHeader" [titleName]="organizationInfo.title.name" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
 										<landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"

landingPages/organization/organization.module.ts

@@ -23,7 +23,6 @@ import {HelperModule} from "../../utils/helper/helper.module";
 import {OrganizationsDeletedByInferenceModule} from "./deletedByInference/deletedByInference.module";
 import {LandingHeaderModule} from "../landing-utils/landing-header/landing-header.module";
 import {FeedbackModule} from "../feedback/feedback.module";
-import {MatSelectModule} from "@angular/material/select";
 import {TabsModule} from "../../utils/tabs/tabs.module";
 import {SearchTabModule} from "../../utils/tabs/contents/search-tab.module";
 import {LoadingModule} from '../../utils/loading/loading.module';
@@ -50,7 +49,6 @@ import {EntityActionsModule} from "../../utils/entity-actions/entity-actions.mod
     ProjectsServiceModule,
     Schema2jsonldModule, SEOServiceModule, HelperModule,
     OrganizationsDeletedByInferenceModule, LandingHeaderModule, FeedbackModule,
-    MatSelectModule,
     TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule, FullScreenModalModule, EGIDataTransferModule, EntityActionsModule
   ],
   declarations: [

landingPages/project/project.component.html

@@ -17,7 +17,7 @@
         <!-- left box - actions -->
         <!-- <div id="landing-left-sidebar" *ngIf="projectInfo" class="uk-visible@s uk-padding-remove-horizontal">
           <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
-               uk-sticky="bottom: true" [attr.offset]="offset">
+               uk-sticky="end: true" [attr.offset]="offset">
             <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
               <ng-container *ngIf="projectInfo && hasMetrics">
                 <metrics [pageViews]="pageViews"
@@ -85,7 +85,8 @@
         <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
 
           <ng-template #graph_and_feedback_template>
-            <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
+            <div class="uk-padding-xsmall">
+              <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!projectInfo">
               <!-- Last Index Info-->
               <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
                 <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
@@ -100,10 +101,11 @@
                 <a (click)="showFeedback = true; scroll()" class="uk-text-xsmall">Give us feedback</a>
               </div>
             </div>
+            </div>
           </ng-template>
 
           <div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
-              uk-sticky="bottom: true;" [attr.offset]="graph_offset">
+              uk-sticky="end: true;" [attr.offset]="graph_offset">
             <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
           </div>
 
@@ -363,7 +365,7 @@
                 </div>
   
                 <div id="main-tabs-div" class="uk-sticky uk-blur-background"
-                     uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
+                     uk-sticky="end: true; media: @m" [attr.offset]="offset">
                   <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
   <!--                  <showTitle *ngIf="stickyHeader" [titleName]="projectName" classNames="uk-margin-remove-bottom" class="uk-visible@m"></showTitle>-->
                     <landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"

landingPages/project/project.module.ts

@@ -2,7 +2,6 @@ import {NgModule} from '@angular/core';
 import {CommonModule} from '@angular/common';
 import {FormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
-import {MatSelectModule} from "@angular/material/select";
 
 import {ProjectComponent} from './project.component';
 import {ProjectServiceModule} from './projectService.module';
@@ -41,7 +40,7 @@ import {EntityActionsModule} from "../../utils/entity-actions/entity-actions.mod
     IFrameModule, ReportsServiceModule,
     SearchResearchResultsServiceModule, ProjectServiceModule,
     Schema2jsonldModule, SEOServiceModule, HelperModule,
-    LandingHeaderModule, MatSelectModule, FeedbackModule, AltMetricsModule,
+    LandingHeaderModule, FeedbackModule, AltMetricsModule,
     TabsModule, SearchTabModule, LoadingModule, IconsModule, InputModule,
     FullScreenModalModule, SafeHtmlPipeModule, EGIDataTransferModule, EntityActionsModule
   ],

landingPages/result/resultLanding.component.html

@@ -17,7 +17,7 @@
         <!-- left box/sidebar - actions -->
         <!-- <div id="landing-left-sidebar" *ngIf="resultLandingInfo" class="uk-visible@s uk-padding-remove-horizontal">
           <div class="uk-flex uk-flex-column uk-flex-between uk-flex-center uk-sticky"
-              uk-sticky="bottom: true" [attr.offset]="offset">
+              uk-sticky="end: true" [attr.offset]="offset">
             <div class="uk-align-center uk-text-center uk-margin-medium-top uk-flex uk-flex-column uk-flex-between">
               <ng-container *ngIf="resultLandingInfo && (hasAltMetrics || hasMetrics)">
                 <metrics *ngIf="hasMetrics" class="uk-margin-bottom"
@@ -81,7 +81,8 @@
         <div id="landing-center-content" class="uk-width-expand uk-padding-remove uk-background-default">
 
           <ng-template #graph_and_feedback_template>
-            <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!resultLandingInfo">
+            <div class="uk-padding-xsmall">
+              <div class="uk-container uk-container-xlarge uk-flex uk-flex-between uk-flex-wrap uk-margin-small-top uk-margin-small-bottom" [class.uk-invisible]="!resultLandingInfo">
               <!-- Last Index Info-->
               <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@l">
                 <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 15px;">
@@ -96,10 +97,11 @@
                 <a (click)="feedbackClicked()" class="uk-text-xsmall">Give us feedback</a>
               </div>
             </div>
+            </div>
           </ng-template>
 
           <div #graph_and_feedback id="graph_and_feedback" class="uk-blur-background uk-text-xsmall uk-visible@m"
-              uk-sticky="bottom: true;" [attr.offset]="graph_offset">
+              uk-sticky="end: true;" [attr.offset]="graph_offset">
             <ng-container *ngTemplateOutlet="graph_and_feedback_template"></ng-container>
           </div>
 
@@ -269,7 +271,7 @@
                 </div>
   
                 <div id="main-tabs-div" class="uk-sticky uk-blur-background"
-                    uk-sticky="bottom: true; media: @m" [attr.offset]="offset">
+                    uk-sticky="end: true; media: @m" [attr.offset]="offset">
                   <div class="uk-padding uk-padding-remove-horizontal uk-padding-remove-bottom">
                     <landing-header [ngClass]="stickyHeader ? 'uk-visible@m' : 'uk-invisible'"
                                     [properties]="properties" [title]="resultLandingInfo.title"
@@ -349,7 +351,7 @@
         <ng-container *ngIf="resultLandingInfo && hasRightSidebarInfo">
           <div id="landing-right-sidebar" *ngIf="!rightSidebarOffcanvasClicked" class="uk-width-1-3 uk-width-1-4@l uk-padding-remove uk-text-small uk-visible@m"
             [class.uk-animation-right]="viewAll">
-            <div class="uk-sticky" uk-sticky="bottom: true" [attr.offset]="offset">
+            <div class="uk-sticky" uk-sticky="end: true" [attr.offset]="offset">
               <div class="uk-overflow-auto uk-height-1-1">
                 <ng-container *ngTemplateOutlet="right_column"></ng-container>
               </div>
@@ -360,11 +362,11 @@
 
       <!-- right box/ sidebar-->
       <ng-container *ngIf="!showFeedback && resultLandingInfo && hasRightSidebarInfo">
-        <div id="landing-right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
+        <a id="landing-right-sidebar-switcher" uk-toggle href="#right-column-offcanvas"
-            class="uk-offcanvas-switcher uk-flex uk-flex-center uk-flex-middle uk-hidden@m"
+            class="uk-offcanvas-switcher uk-flex uk-link-reset uk-flex-center uk-flex-middle uk-hidden@m"
             (click)="rightSidebarOffcanvasClicked = true;">
           <icon name="more" [ratio]="1.5" customClass="uk-text-primary" [flex]="true" visuallyHidden="sidebar"></icon>
-        </div>
+        </a>
         <div id="right-column-offcanvas" class="uk-offcanvas" uk-offcanvas="flip: true; overlay: true;">
           <div class="uk-offcanvas-bar">
             <button class="uk-offcanvas-close uk-close uk-icon" type="button"

landingPages/result/resultLanding.module.ts

@@ -28,8 +28,6 @@ import {FeedbackModule} from "../feedback/feedback.module";
 import {TabsModule} from "../../utils/tabs/tabs.module";
 import {LoadingModule} from "../../utils/loading/loading.module";
 import {OrcidModule} from "../../orcid/orcid.module";
-import {MatFormFieldModule} from "@angular/material/form-field";
-import {MatSelectModule} from "@angular/material/select";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {IconsService} from "../../utils/icons/icons.service";
 import {cite, fire, graph, landmark, link, link_to, quotes, rocket, versions} from "../../utils/icons/icons";
@@ -48,7 +46,7 @@ import {EntityActionsModule} from "../../utils/entity-actions/entity-actions.mod
     AltMetricsModule, Schema2jsonldModule, SEOServiceModule,
     DeletedByInferenceModule, ShowAuthorsModule, HelperModule, ResultLandingUtilsModule, AlertModalModule,
     AnnotationModule, LandingHeaderModule, NoLoadPaging, ResultPreviewModule, FeedbackModule, TabsModule, LoadingModule,
-    OrcidModule, MatFormFieldModule, MatSelectModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule,
+    OrcidModule, IconsModule, InputModule, EGIDataTransferModule, RecaptchaModule,
     SdgFosSuggestModule, FullScreenModalModule, SafeHtmlPipeModule, EntityActionsModule
   ],
   declarations: [

login/adminLoginGuard.guard.ts

@@ -1,12 +1,5 @@
 import {Injectable} from '@angular/core';
-import {
+import { ActivatedRouteSnapshot, Data, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-  ActivatedRouteSnapshot,
-  CanActivate,
-  CanActivateChild, Data,
-  Router,
-  RouterStateSnapshot,
-  UrlTree
-} from '@angular/router';
 import {Observable} from 'rxjs';
 import {Session} from './utils/helper.class';
 import {LoginErrorCodes} from './utils/guardHelper.class';
@@ -16,7 +9,7 @@ import {map, tap} from "rxjs/operators";
 @Injectable({
   providedIn: 'root'
 })
-export class AdminLoginGuard implements CanActivate, CanActivateChild {
+export class AdminLoginGuard  {
   
   constructor(private router: Router,
               private userManagementService: UserManagementService) {

login/freeGuard.guard.ts

@@ -1,16 +1,10 @@
 import { Injectable } from '@angular/core';
-import {
+import { Router, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
-  Router,
-  CanActivate,
-  ActivatedRouteSnapshot,
-  RouterStateSnapshot,
-  UrlTree
-} from '@angular/router';
 import {Observable} from 'rxjs';
 import {LoginErrorCodes} from './utils/guardHelper.class';
 
 @Injectable()
-export class FreeGuard implements CanActivate {
+export class FreeGuard  {
 
   constructor(private router: Router) {
   }

login/loginGuard.guard.ts

@@ -1,14 +1,5 @@
 import {Injectable} from '@angular/core';
-import {
+import { ActivatedRouteSnapshot, Route, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
-  ActivatedRouteSnapshot,
-  CanActivate,
-  CanActivateChild,
-  CanLoad,
-  Route,
-  Router,
-  RouterStateSnapshot,
-  UrlTree
-} from '@angular/router';
 import {Observable} from 'rxjs';
 import {LoginErrorCodes} from './utils/guardHelper.class';
 import {map, tap} from "rxjs/operators";
@@ -17,7 +8,7 @@ import {UserManagementService} from "../services/user-management.service";
 @Injectable({
   providedIn: 'root'
 })
-export class LoginGuard implements CanActivate, CanLoad, CanActivateChild {
+export class LoginGuard  {
   
   constructor(private router: Router,
               private userManagementService: UserManagementService) {

login/userMini.component.ts

@@ -83,12 +83,13 @@ declare var UIkit;
                   {{user.fullname}}
                 </h5>
               </div>
-              <ul class="uk-nav uk-nav-primary uk-list uk-margin-top uk-nav-parent-icon" uk-nav>
+              <ul class="uk-nav uk-nav-primary uk-list uk-margin-top" uk-nav>
                 <ng-container *ngFor="let item of userMenuItems ">
                   <li *ngIf="item.needsAuthorization && isAuthorized || !item.needsAuthorization" [ngClass]="item.customClass">
-                    <a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas(account)">{{item.title}}</a>
+                    <a *ngIf="item.route" [routerLink]="item.route" (click)="closeCanvas(account)">
+                        {{item.title}}<span *ngIf="item.items.length > 0" class="uk-nav-parent-icon"></span></a>
                     <a *ngIf="!item.route && item.url" (click)="closeCanvas(account)" [href]="item.url" [class.custom-external]="item.target != '_self'"
-                       [target]="item.target">{{item.title}}</a>
+                       [target]="item.target">{{item.title}}<span *ngIf="item.items.length > 0" class="uk-nav-parent-icon"></span></a>
                   </li>
                 </ng-container>
                 <ng-container *ngIf="notificationConfiguration">

monitor/methodology/terminology.component.ts

@@ -39,9 +39,9 @@ declare var ResizeObserver;
 				</div>
 			</div>
 			<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
-				<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
+				<div id="graph_element" #graph_element class="uk-blur-background uk-padding-xsmall" uk-sticky="end: true"
 						 [attr.offset]="graph_offset">
-					<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom">
+					<div class="uk-container uk-container-large">
             <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
               <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
             </a>
@@ -50,7 +50,7 @@ declare var ResizeObserver;
 				<div class="uk-section uk-container uk-container-large" uk-scrollspy-class>
 					<div id="parentContainer" class="uk-grid uk-grid-large" uk-grid>
 						<div class="uk-width-medium uk-margin-top">
-							<div class="uk-sticky" uk-sticky="bottom: !#parentContainer; offset: 100;">
+							<div class="uk-sticky" uk-sticky="end: !#parentContainer; offset: 100;">
 								<slider-tabs type="scrollable" position="left">
 									<slider-tab tabId="entities" tabTitle="1. Entities"></slider-tab>
 									<slider-tab tabId="inherited-and-inferred-attributes" tabTitle="2. Inherited and Inferred Attributes"></slider-tab>
@@ -83,9 +83,9 @@ declare var ResizeObserver;
 				</div>
 			</div>
 			<div *ngIf="divContents" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
-				<div id="graph_element" #graph_element class="uk-blur-background" uk-sticky="bottom: true"
+				<div id="graph_element" #graph_element class="uk-blur-background uk-padding-xsmall" uk-sticky="end: true"
 					[attr.offset]="graph_offset">
-					<div class="uk-container uk-container-large uk-margin-small-top uk-margin-small-bottom uk-text-xsmall uk-text-right">
+					<div class="uk-container uk-container-large uk-text-xsmall uk-text-right">
             <a href="https://graph.openaire.eu" target="_blank" class="uk-width-1-1 uk-width-auto@m">
               <img src="assets/common-assets/openaire-badge-1.png" alt="Powered by OpenAIRE graph" style="height: 17px;">
             </a>

notifications/notifications-sidebar/notifications-sidebar.component.ts

@@ -27,12 +27,12 @@ export class NotificationConfiguration {
 @Component({
   selector: 'notification-sidebar',
   template: `
-    <div *ngIf="!mobile" id="notifications-switcher" uk-toggle="" href="#notifications" class="uk-offcanvas-switcher uk-flex uk-flex-middle uk-flex-center">
+    <a *ngIf="!mobile" id="notifications-switcher" uk-toggle href="#notifications" class="uk-link-reset uk-offcanvas-switcher uk-flex uk-flex-middle uk-flex-center">
       <icon name="mail" ratio="1.5" customClass="uk-text-background" flex="true" visuallyHidden="Notifications"></icon>
       <span [class.uk-hidden]="unreadCount === 0" class="uk-offcanvas-count uk-flex uk-flex-middle uk-flex-center">
         {{unreadCount}}
       </span>
-    </div>
+    </a>
     <ng-template #main>
       <ng-container *ngIf="!notification">
         <div class="notification-list uk-position-relative">

notifications/notify-form/notify-form.module.ts

@@ -1,13 +1,12 @@
 import {NgModule} from "@angular/core";
 import {NotifyFormComponent} from "./notify-form.component";
 import {CommonModule} from "@angular/common";
-import {MatCheckboxModule} from "@angular/material/checkbox";
 import {ReactiveFormsModule} from "@angular/forms";
 import {InputModule} from "../../sharedComponents/input/input.module";
 import {NotificationUserModule} from "../notification-user/notification-user.module";
 
 @NgModule({
-  imports: [CommonModule, MatCheckboxModule, ReactiveFormsModule, InputModule, NotificationUserModule],
+  imports: [CommonModule, ReactiveFormsModule, InputModule, NotificationUserModule],
   declarations: [NotifyFormComponent],
   exports: [NotifyFormComponent]
 })

searchPages/searchUtils/advancedSearchForm.component.html

@@ -33,10 +33,7 @@
 												 [options]="fieldIdsOptions" (valueChange)="fieldIdsChanged(i,selectedField.id)" type="select"></div>
 										<div input [(value)]="selectedField.includes" inputClass="border-bottom" [options]="getNotOperators(selectedField)" type="select"></div>
 									</div>
-								 <!-- <mat-select [(ngModel)]="selectedField.id" name="selectField_{{i}}" [disableOptionCentering]="true" class="matSelection" panelClass="matSelectionPanel"
+								</td>
-																(ngModelChange)="fieldIdsChanged(i,selectedField.id)">&lt;!&ndash;(click)="fieldIdsChanged(i)"  &ndash;&gt;
-									<mat-option *ngFor="let id of fieldIds" [value]="id">{{fieldIdsMap[id].name}} </mat-option>
-								</mat-select>--></td>
 								<td *ngIf="selectedField.type == 'keyword' || selectedField.type == 'identifier'">
 									<div class="uk-inline uk-width-expand">
 										<a *ngIf="selectedField.value.length > 0" class="uk-form-icon uk-form-icon-flip"
@@ -105,12 +102,6 @@
 								</td>
 							</tr>
 						</table>
-						<!-- <div class="uk-margin-small-top">
-							<button type="button" (click)="addField()" class="uk-button uk-button-link uk-flex uk-flex-middle">
-								<icon name="add" [flex]="true"></icon>
-								<span class="uk-margin-small-left">Add rule</span>
-							</button>
-						</div> -->
 						<div class=" uk-text-center uk-margin-small-top">
 							<div *ngIf="!validDateFrom && validDateTo" class="uk-text-danger">
 								Please check your <u>from</u> date

searchPages/searchUtils/advancedSearchForm.module.ts

@@ -10,7 +10,6 @@ import {DateFilterModule} from './dateFilter.module';
 import {SearchFormModule} from './searchForm.module';
 import {QuickSelectionsModule} from "./quick-selections.module";
 import {EntitiesSelectionModule} from "./entitiesSelection.module";
-import {MatSelectModule} from "@angular/material/select";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {SearchInputModule} from "../../sharedComponents/search-input/search-input.module";
 import {AdvancedSearchInputModule} from "../../sharedComponents/advanced-search-input/advanced-search-input.module";
@@ -22,7 +21,7 @@ import {filters} from "../../utils/icons/icons";
 @NgModule({
   imports: [
     CommonModule, FormsModule, RouterModule, EntitiesAutocompleteModule, StaticAutocompleteModule, DateFilterModule,
-    SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, MatSelectModule, IconsModule, SearchInputModule, AdvancedSearchInputModule, InputModule
+    SearchFormModule, QuickSelectionsModule, EntitiesSelectionModule, IconsModule, SearchInputModule, AdvancedSearchInputModule, InputModule
   ],
   declarations: [
     AdvancedSearchFormComponent,

searchPages/searchUtils/entitiesSelection.module.ts

@@ -3,13 +3,12 @@ import {CommonModule} from '@angular/common';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {RouterModule} from '@angular/router';
 import {EntitiesSelectionComponent} from "./entitiesSelection.component";
-import { MatSelectModule } from "@angular/material/select";
 import {InputModule} from "../../sharedComponents/input/input.module";
 
 @NgModule({
   imports: [
     CommonModule, FormsModule,
-    RouterModule, ReactiveFormsModule, MatSelectModule, InputModule
+    RouterModule, ReactiveFormsModule, InputModule
   ],
   declarations: [
     EntitiesSelectionComponent,

searchPages/searchUtils/newSearchPage.component.html

@@ -182,7 +182,7 @@
 		(stickyForm?'':'  ') :
     (+ (stickyForm?'':' uk-section') +' uk-padding-remove-bottom  uk-padding-remove-top ' +
     ((usedBy == 'deposit' || usedBy == 'orcid') ? ' uk-padding-remove-top ' : ' '))"
-       [attr.uk-sticky]="((stickyForm || (simpleView && mobile))?'{offset:100;top:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
+       [attr.uk-sticky]="((stickyForm || (simpleView && mobile))?'{offset:100;start:90;cls-active:uk-active uk-sticky-below;cls-inactive:uk-sticky '+
 		(usedBy != 'deposit' && usedBy != 'orcid' && (!customFilter || customFilter.queryFieldName != 'communityId') ?
     '  uk-position-relative ' :(' uk-section '  ))+'}':null)">
     <div class="uk-background-norepeat uk-background-bottom-center" [ngClass]="searchForm.class">

searchPages/searchUtils/quick-selections.component.ts

@@ -6,7 +6,6 @@ import {ConfigurationService} from "../../utils/configuration/configuration.serv
 import {Subscription} from "rxjs";
 import {ActivatedRoute, Router} from "@angular/router";
 import {properties} from "../../../../environments/environment";
-import {OpenaireEntities} from "../../utils/properties/searchFields";
 
 @Component({
   selector: 'quick-selections',

searchPages/searchUtils/searchFilter.module.ts

@@ -1,29 +1,25 @@
-import { NgModule}            from '@angular/core';
+import {NgModule} from '@angular/core';
-import { CommonModule }        from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { FormsModule }         from '@angular/forms';
+import {FormsModule} from '@angular/forms';
 
 import {SearchFilterComponent} from './searchFilter.component';
-import{SearchFilterModalComponent} from './searchFilterModal.component';
+import {SearchFilterModalComponent} from './searchFilterModal.component';
 import {ModalModule} from '../../utils/modal/modal.module';
-import { MatSelectModule } from "@angular/material/select";
 import {RouterModule} from "@angular/router";
 import {InputModule} from '../../sharedComponents/input/input.module';
 import {IconsModule} from "../../utils/icons/icons.module";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, ModalModule, MatSelectModule, RouterModule,
+    CommonModule, FormsModule, ModalModule, RouterModule,
     InputModule, IconsModule
   ],
   declarations: [
     SearchFilterComponent, SearchFilterModalComponent
-],
-
-  providers:[
   ],
   exports: [
     SearchFilterComponent, SearchFilterModalComponent
-
+  ]
-    ]
 })
-export class SearchFilterModule { }
+export class SearchFilterModule {
+}

searchPages/searchUtils/searchSorting.module.ts

@@ -1,16 +1,14 @@
-import { NgModule}            from '@angular/core';
+import {NgModule} from '@angular/core';
-import { CommonModule }        from '@angular/common';
+import {CommonModule} from '@angular/common';
-import { FormsModule }         from '@angular/forms';
+import {FormsModule} from '@angular/forms';
-import { RouterModule }       from '@angular/router';
+import {RouterModule} from '@angular/router';
 
-import{SearchSortingComponent} from './searchSorting.component';
+import {SearchSortingComponent} from './searchSorting.component';
-import { MatSelectModule } from "@angular/material/select";
 import {InputModule} from '../../sharedComponents/input/input.module';
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule, MatSelectModule,
+    CommonModule, FormsModule, RouterModule, InputModule
-		InputModule
   ],
   declarations: [
     SearchSortingComponent

sharedComponents/bottom.component.html

@@ -180,8 +180,8 @@
         <div class="uk-grid uk-flex-center uk-text-xsmall uk-text-emphasis" uk-grid>
           <div class=" uk-flex uk-flex-top">
             <a href="https://creativecommons.org/licenses/by/4.0/" rel="license" class="uk-link-reset">
-              <icon name="cc" [preserveColor]="true" visuallyHidden="Creative-Commons"></icon>
+              <icon name="cc" visuallyHidden="Creative-Commons"></icon>
-              <icon name="by" [preserveColor]="true" visuallyHidden="Licence" class="uk-margin-xsmall-left"></icon>
+              <icon name="by" visuallyHidden="Licence" class="uk-margin-xsmall-left"></icon>
             </a>
             <span class="uk-margin-small-left uk-width-expand">Unless otherwise indicated, all materials created by OpenAIRE are licenced under</span>
             <a class="uk-link-text uk-margin-medium-left" href="http://creativecommons.org/licenses/by/4.0/" rel="license"><u>CC ATTRIBUTION 4.0 INTERNATIONALLICENSE</u></a>
@@ -262,8 +262,8 @@
         <div class="uk-grid uk-flex-center uk-text-xsmall uk-text-emphasis" uk-grid>
           <div class=" uk-flex uk-flex-top">
             <a href="https://creativecommons.org/licenses/by/4.0/" rel="license" class="uk-link-reset">
-              <icon name="cc" [preserveColor]="true" visuallyHidden="Creative-Commons"></icon>
+              <icon name="cc" visuallyHidden="Creative-Commons"></icon>
-              <icon name="by" [preserveColor]="true" visuallyHidden="Licence" class="uk-margin-xsmall-left"></icon>
+              <icon name="by" visuallyHidden="Licence" class="uk-margin-xsmall-left"></icon>
             </a>
             <span class="uk-margin-small-left uk-width-expand">Unless otherwise indicated, all materials created by OpenAIRE are licenced under</span>
           </div>

sharedComponents/input/input.component.ts

@@ -196,11 +196,14 @@ declare var UIkit;
               </div>
           </div>
           <div *ngIf="!mobile && type === 'date' && opened" class="uk-dropdown" #calendarBox 
-               uk-dropdown="pos: bottom-left; mode: none; boundary-align: true;" [attr.boundary]="'#' + id" (click)="$event.stopPropagation()">
+               uk-dropdown="pos: bottom-left; mode: none; flip: false ; shift: false" [attr.target]="'#' + id" [attr.boundary]="'#' + id" (click)="$event.stopPropagation()">
               <mat-calendar [selected]="selectedDate" [startAt]="selectedDate" (selectedChange)="dateChanged($event)"></mat-calendar>
           </div>
+          <mobile-dropdown *ngIf="mobile && type === 'date' && opened" (onClose)="focus(false)" #mobileDropdown>
+              <mat-calendar [selected]="selectedDate" [startAt]="selectedDate" (selectedChange)="dateChanged($event)"></mat-calendar>
+          </mobile-dropdown>
           <div *ngIf="!mobile && filteredOptions && filteredOptions.length > 0 && opened" class="options uk-dropdown" #optionBox
-               uk-dropdown="pos: bottom-justify; mode: none; boundary-align: true;" [attr.boundary]="'#' + id">
+               uk-dropdown="mode: none; stretch: true; flip: false; shift: false" [attr.boundary]="'#' + id">
               <ul class="uk-nav uk-dropdown-nav">
                   <li *ngFor="let option of filteredOptions; let i=index" [class.uk-hidden]="option.hidden"
                       [class.uk-active]="(formControl.value === option.value) || selectedIndex === i">

sharedComponents/navigationBar.component.html

@@ -1,5 +1,5 @@
 <div *ngIf="showMenu && activeHeader">
-  <div id="main-menu-small" class="uk-hidden@m">
+  <div id="main-menu-small" class="uk-hidden@m" [attr.uk-sticky]="hasStickyHeaderOnMobile?'':null">
     <nav class="uk-navbar-container uk-navbar" uk-navbar="delay-hide: 400">
         <div *ngIf="!onlyTop || userMenu" class="uk-navbar-left" [class.uk-light]='activeHeader.darkBg'>
           <a class="uk-navbar-toggle" href="#tm-mobile" uk-toggle>
@@ -31,7 +31,7 @@
             <ng-container *ngTemplateOutlet="header_template; context: {mobile: true}"></ng-container>
           </div>
         </nav>
-        <ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top uk-nav-parent-icon" uk-nav>
+        <ul class="uk-nav uk-nav-primary uk-list uk-list-large uk-margin-large-top" uk-nav>
             <ng-container *ngIf="!onlyTop">
               <li *ngIf="showHomeMenuItem && currentRoute.route !== '/'">
                 <a routerLink="/" (click)="closeCanvas(canvas)">Home</a>
@@ -40,17 +40,15 @@
                 <li [class.uk-active]="isTheActiveMenu(menu)" [class.uk-parent]="menu.items.length > 0" [ngClass]="menu.customClass"
                     *ngIf="isAtleastOneEnabled(menu.entitiesRequired,showEntity) && isAtleastOneEnabled(menu.routeRequired, showPage)">
                   <!--a routerLink="{{menu.rootItem.route}}"  [queryParams]=menu.rootItem.params class="uk-offcanvas-close custom-offcanvas-close">{{menu.rootItem.title}}</a-->
-                  <a *ngIf="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired)"
+                  <a *ngIf="!menu.url" [routerLink]="menu.route && (isEnabled([menu.route], showPage) || !menu.routeRequired) && menu.items.length === 0?menu.route:null"
-                     [routerLink]="menu.items.length === 0?menu.route:null" (click)="menu.items.length === 0?closeCanvas(canvas):null"
+                     (click)="menu.items.length === 0?closeCanvas(canvas):null"
                      [queryParams]="menu.params"
-                     [fragment]="menu.fragment">{{menu.title}}</a>
+                     [fragment]="menu.fragment">{{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
-                  <a *ngIf="!menu.route && menu.url"
+                  <a *ngIf="menu.url"
-                     [href]="menu.items.length === 0?menu.url:null" (click)="menu.items.length === 0?closeCanvas(canvas):null"
+                     (click)="menu.items.length === 0?closeCanvas(canvas):null"
-                     [class.custom-external]="menu.target != '_self'" [target]="menu.target">{{menu.title}}</a>
+                     [href]="menu.items.length === 0?menu.url:null"
-                  <a *ngIf="(!menu.route && !menu.url) ||
+                     [class.custom-external]="menu.url && menu.target != '_self'" [target]="menu.url?menu.target:null">
-                  (menu.route && menu.routeRequired && !isEnabled([menu.route], showPage)
+                    {{menu.title}}<span *ngIf="menu.items.length > 0" class="uk-nav-parent-icon"></span></a>
-                  && isAtleastOneEnabled(menu.routeRequired, showPage))"
-                     (click)="menu.items.length === 0?closeCanvas(canvas):null">{{menu.title}}</a>
                   <ul *ngIf="menu.items.length > 0" class="uk-nav-sub">
                     <ng-container *ngFor="let submenu of menu.items">
                       <li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass"
@@ -270,11 +268,10 @@
                         <a *ngIf="menu.type == 'noAction'">
                           {{menu.title}}
                         </a>
-                        <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left"
+                        <div *ngIf="menu.items.length > 0" class="uk-navbar-dropdown uk-navbar-dropdown-bottom-left uk-height-max-medium uk-overflow-auto"
                              style="top: 80px; left: 0px;" id="{{menu._id}}" uk-toggle>
-                          <div class="uk-navbar-dropdown-grid uk-child-width-1-1 uk-grid uk-grid-stack" uk-grid="">
+                          <div>
-                            <div class="uk-first-column uk-height-max-medium uk-overflow-auto">
+                            <ul class="uk-nav uk-navbar-dropdown-nav">
-                              <ul class="uk-nav uk-navbar-dropdown-nav">
                                 <ng-container *ngFor="let submenu of menu.items">
                                   <li [class.uk-active]="isTheActiveMenu(submenu)" [ngClass]="submenu.customClass">
                                     <a *ngIf="submenu.type == 'internal' && submenu.route && isEnabled([submenu.route], showPage)"
@@ -291,7 +288,6 @@
                                   </li>
                                 </ng-container>
                               </ul>
-                            </div>
                           </div>
                         </div>
                       </li>

sharedComponents/navigationBar.component.ts

@@ -63,6 +63,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
   @Input() showLogo: boolean = true;
   @Input() notificationConfiguration: NotificationConfiguration;
   replaceHeader: boolean = false;
+  hasStickyHeaderOnMobile: boolean = false;
   public activeHeader: Header;
   keyword: string = '';
   public isAuthorized: boolean = false;
@@ -86,6 +87,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
     value: "Open Access"
   };
   @ViewChild('search_input') search_input: SearchInputComponent;
+  @ViewChild('canvas') canvas: ElementRef;
   public routerHelper: RouterHelper = new RouterHelper();
 
   constructor(private router: Router,
@@ -100,6 +102,9 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
       this.searchMode = false;
       this.keyword = "";
     }));
+    this.subs.push(this.layoutService.hasStickyHeaderOnMobile.subscribe(hasStickyHeaderOnMobile => {
+      this.hasStickyHeaderOnMobile = hasStickyHeaderOnMobile;
+    }))
     this.initialize();
   }
 
@@ -115,7 +120,7 @@ export class NavigationBarComponent implements OnInit, OnDestroy, OnChanges {
     }
   }
   
-  closeCanvas(element) {
+  closeCanvas(element = this.canvas.nativeElement) {
     UIkit.offcanvas(element).hide();
   }
 

sharedComponents/pick-icon/pick-icon.component.html

@@ -0,0 +1 @@
+<p>pick-icon works!</p>

sharedComponents/pick-icon/pick-icon.component.ts

@@ -0,0 +1,21 @@
+import {Component, OnDestroy, OnInit} from '@angular/core';
+import {Icon} from "../../utils/icons/icons";
+import {IconsService} from "../../utils/icons/icons.service";
+
+@Component({
+  selector: 'pick-icon',
+  templateUrl: './pick-icon.component.html'
+})
+export class PickIconComponent implements OnInit, OnDestroy{
+  customIcons: Icon[] = [];
+
+  constructor(private iconService: IconsService) {
+  }
+
+  ngOnInit() {
+    this.customIcons = this.iconService.getAll();
+  }
+
+  ngOnDestroy() {
+  }
+}

sharedComponents/pick-icon/pick-icon.module.ts

@@ -0,0 +1,18 @@
+import { NgModule } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { PickIconComponent } from './pick-icon.component';
+
+
+
+@NgModule({
+  declarations: [
+    PickIconComponent
+  ],
+  exports: [
+    PickIconComponent
+  ],
+  imports: [
+    CommonModule
+  ]
+})
+export class PickIconModule { }

sharedComponents/search-input/search-input.component.ts

@@ -90,6 +90,7 @@ export class SearchInputComponent implements OnInit, AfterViewInit {
   ngAfterViewInit() {
     if(typeof document !== 'undefined') {
       this.ratio = Number.parseFloat(getComputedStyle(this.searchInput.nativeElement).getPropertyValue('--search-input-icon-ratio'));
+      this.cdr.detectChanges()
     }
   }
   

sharedComponents/search-input/search-input.module.ts

@@ -1,13 +1,12 @@
 import {NgModule} from '@angular/core';
 import {SharedModule} from '../../../openaireLibrary/shared/shared.module';
 import {SearchInputComponent} from './search-input.component';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
 import {IconsModule} from '../../utils/icons/icons.module';
 import {InputModule} from "../input/input.module";
 import {ClickModule} from "../../utils/click/click.module";
 
 @NgModule({
-  imports: [SharedModule, MatAutocompleteModule, IconsModule, InputModule, ClickModule],
+  imports: [SharedModule, IconsModule, InputModule, ClickModule],
   declarations: [SearchInputComponent],
   exports: [SearchInputComponent]
 })

sharedComponents/slider-utils/slider-column.component.ts

@@ -0,0 +1,78 @@
+import {AfterContentInit, Component, ContentChildren, Input, OnDestroy, QueryList} from '@angular/core';
+import {SliderItemComponent} from "./slider-item.component";
+import {SliderNavItemComponent} from "./slider-nav-item.component";
+import {SliderContainerComponent} from "./slider-container.component";
+import {LayoutService} from "../../dashboard/sharedComponents/sidebar/layout.service";
+import {Subscriber} from "rxjs";
+
+@Component({
+  selector: 'slider-column',
+  template: `
+      <div class="uk-position-relative">
+          <ng-content></ng-content>
+      </div>
+  `
+})
+export class SliderColumnComponent implements AfterContentInit, OnDestroy {
+  @Input()
+  type: 'slider' | 'nav' = null;
+  @Input()
+  animation = 'uk-animation-fade';
+  @ContentChildren(SliderItemComponent) items: QueryList<SliderItemComponent>;
+  @ContentChildren(SliderNavItemComponent) navItems: QueryList<SliderNavItemComponent>;
+  public isMobile: boolean;
+  private subscriptions: any[] = [];
+
+  constructor(private layoutService: LayoutService) {
+  }
+
+  ngOnDestroy() {
+    this.subscriptions.forEach(value => {
+      if (value instanceof Subscriber) {
+        value.unsubscribe();
+      }
+    });
+  }
+
+  ngAfterContentInit() {
+    this.slides.forEach(slide => {
+      slide.init(this.animation);
+    });
+    this.navItems.forEach(slide => {
+      slide.init(this.animation);
+    });
+    this.subscriptions.push(this.layoutService.isMobile.subscribe(isMobile => {
+      this.isMobile = isMobile;
+    }));
+  }
+
+  change(time: number) {
+    if (this.type === 'slider') {
+      let slides = this.slides;
+      for (let i = 0; i < slides.length; i++) {
+        slides[i].setActive(slides[i].start <= time && (!slides[i + 1] || slides[i + 1].start > time));
+      }
+    }
+    if (this.type === 'nav') {
+      let slides = this.navItems;
+      for (let i = 0; i < slides.length; i++) {
+        if (this.isMobile) {
+          slides.get(i).setActive(slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time));
+        }
+        slides.get(i).active = slides.get(i).start <= time && (!slides.get(i + 1) || slides.get(i + 1).start > time);
+      }
+    }
+  }
+
+  setContainer(container: SliderContainerComponent) {
+    if (this.type === 'nav') {
+      this.navItems.forEach(item => {
+        item.container = container;
+      });
+    }
+  }
+
+  get slides(): SliderItemComponent[] {
+    return this.items.filter(item => item.type === 'slide');
+  }
+}

sharedComponents/slider-utils/slider-container.component.ts

@@ -0,0 +1,128 @@
+import {
+  AfterContentInit,
+  ChangeDetectorRef,
+  Component,
+  ContentChildren,
+  ElementRef,
+  Input, OnDestroy,
+  OnInit,
+  QueryList
+} from "@angular/core";
+import {SliderColumnComponent} from "./slider-column.component";
+
+export class Stage {
+  value: number;
+  max:  number;
+}
+
+@Component({
+  selector: 'slider-container',
+  template: `
+      <div class="uk-grid uk-grid-large uk-flex uk-flex-middle uk-child-width-1-1" [ngClass]="'uk-child-width-1-' + sliders?.length + '@s'" uk-grid>
+          <ng-content></ng-content>
+      </div>
+      <div *ngIf="navigation === 'progress' &&  stages.length > 0" class="uk-flex uk-flex-center uk-margin-large-top">
+          <div  class="uk-width-1-3@m uk-width-1-2@s uk-child-width-1-1 uk-grid uk-grid-small uk-flex-middle" [ngClass]="'uk-child-width-1-' + stages.length" uk-grid>
+              <div *ngFor="let stage  of stages; let i=index">
+                  <progress (click)="start(i)"  class="uk-progress" [value]="stage.value" [max]="stage.max"></progress>
+              </div>
+          </div>
+      </div>
+  `
+})
+export class SliderContainerComponent implements OnInit, OnDestroy, AfterContentInit {
+  private static INTERVAL = 10;
+  private static ANIMATION_DURATION = 600; // UIKit progress animation duration
+
+  @ContentChildren(SliderColumnComponent) sliders: QueryList<SliderColumnComponent>;
+  @Input()
+  navigation: 'progress' | null = null;
+  @Input()
+  total: number = 0;
+  @Input()
+  period: number = 3000; // in ms (>= 1000ms)
+  @Input()
+  infinite: boolean = false;
+  @Input()
+  parent: HTMLDivElement;
+  stages: Stage[] = [];
+  time: number = 0;
+  interval: any;
+  observer: IntersectionObserver;
+  initialized: boolean = false;
+  stopped: boolean = true;
+
+  constructor(private cdr: ChangeDetectorRef, private element: ElementRef) {
+  }
+
+  ngOnInit() {
+    this.period = this.period - SliderContainerComponent.ANIMATION_DURATION;
+  }
+
+  ngOnDestroy() {
+    if(this.observer) {
+      this.observer.disconnect();
+    }
+  }
+
+  ngAfterContentInit() {
+    this.setObserver();
+    this.sliders.forEach(slider => {
+      slider.setContainer(this);
+      slider.navItems.forEach(item => {
+        if(this.parent) {
+          item.background = getComputedStyle(this.parent).backgroundColor;
+        }
+      });
+    });
+  }
+
+  setObserver() {
+    let options = {
+      root: null,
+      rootMargin: '0px',
+      threshold: 0.1
+    };
+    this.observer = new IntersectionObserver(entries => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting && !this.initialized) {
+          this.stopped = false;
+          this.start(0);
+          this.initialized = true;
+        } else {
+          this.initialized = false;
+          this.stopped = true;
+        }
+      });
+    }, options);
+    this.observer.observe(this.element.nativeElement);
+  }
+
+  start(time: number) {
+    this.stages = [];
+    for(let i = 0; i < this.total; i++) {
+      this.stages.push({value: (time > i?this.period:(time - i)), max: this.period});
+    }
+    if(this.interval) {
+      clearInterval(this.interval);
+    }
+    this.cdr.detectChanges();
+    this.interval = setInterval(() => {
+      let current = Math.floor(time);
+      this.stages[current].value += SliderContainerComponent.INTERVAL;
+      this.time = current + this.stages[current].value/this.stages[current].max;
+      this.sliders.forEach(slider => {
+        slider.change(this.time);
+      });
+      if(this.stages[current].value >= this.stages[current].max) {
+        clearInterval(this.interval);
+        let next = (current + 1 > this.total - 1)?0:current + 1;
+        if(!this.stopped && (this.infinite || next > current)) {
+          setTimeout(() => {
+            this.start(next);
+          }, SliderContainerComponent.ANIMATION_DURATION);
+        }
+      }
+    }, SliderContainerComponent.INTERVAL);
+  }
+}

sharedComponents/slider-utils/slider-item.component.ts

@@ -0,0 +1,29 @@
+import {Component, ElementRef, Input} from "@angular/core";
+
+@Component({
+  selector: 'slider-item',
+  template: `
+    <ng-content></ng-content>
+  `
+})
+export class SliderItemComponent {
+  @Input()
+  type: 'slide' | 'static' = 'slide';
+  @Input()
+  start: number;
+
+  constructor(private element: ElementRef) {
+  }
+
+  init(animation: string) {
+    this.element.nativeElement.classList.add(animation);
+  }
+
+  setActive(active: boolean) {
+    if(active) {
+      this.element.nativeElement.classList.remove('uk-hidden');
+    } else {
+      this.element.nativeElement.classList.add('uk-hidden');
+    }
+  }
+}

sharedComponents/slider-utils/slider-nav-item.component.ts

@@ -0,0 +1,51 @@
+import {AfterViewInit, Component, ElementRef, Input, ViewChild} from "@angular/core";
+import {ActivatedRoute} from "@angular/router";
+import {SliderContainerComponent} from "./slider-container.component";
+import {SliderItemComponent} from "./slider-item.component";
+
+export interface Link {
+  routerLink?: {
+    commands: string[] | string,
+    queryParams?: Object,
+    fragment?: string,
+    relativeTo?: ActivatedRoute
+  }
+  href?: string
+  external?: boolean
+}
+
+@Component({
+  selector: 'slider-nav-item',
+  template: `
+    <div *ngIf="container" (click)="container.start(start)" class="uk-flex uk-flex-middle" [class.uk-active]="active">
+        <div class="uk-width-expand">
+            <ng-content></ng-content>
+        </div>
+        <div *ngIf="link" class="action">
+            <a *ngIf="link?.routerLink" #linkElement class="uk-text-decoration-none" [routerLink]="link.routerLink.commands" [queryParams]="link.routerLink.queryParams"
+               [fragment]="link.routerLink.fragment"  [relativeTo]="link.routerLink.relativeTo" [target]="link.external?'_blank':'_self'">
+                <icon name="chevron_right" ratio="1.5" [flex]="true"></icon>
+            </a>
+            <a *ngIf="link?.href" #linkElement [href]="link.href" class="uk-text-decoration-none" [target]="link.external?'_blank':'_self'">
+                <icon name="chevron_right" ratio="1.5"  [flex]="true"></icon>
+            </a>
+        </div>
+    </div>
+  `
+})
+export class SliderNavItemComponent extends SliderItemComponent implements AfterViewInit {
+  @Input()
+  link: Link = null;
+  @Input()
+  start: number;
+  active: boolean = false;
+  container: SliderContainerComponent;
+  background: string;
+  @ViewChild('linkElement') linkElement: ElementRef;
+
+  ngAfterViewInit() {
+    if(this.linkElement) {
+      this.linkElement.nativeElement.style.background = this.background;
+    }
+  }
+}

sharedComponents/slider-utils/slider-utils.module.ts

@@ -2,10 +2,15 @@ import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {SliderArrowComponent} from "./slider-arrow.component";
 import {IconsModule} from "../../utils/icons/icons.module";
+import {SliderNavItemComponent} from "./slider-nav-item.component";
+import {SliderItemComponent} from "./slider-item.component";
+import {RouterLink} from "@angular/router";
+import {SliderColumnComponent} from "./slider-column.component";
+import {SliderContainerComponent} from "./slider-container.component";
 
 @NgModule({
-  imports: [CommonModule, IconsModule],
+  imports: [CommonModule, IconsModule, RouterLink],
-  declarations: [SliderArrowComponent],
+  declarations: [SliderContainerComponent, SliderArrowComponent, SliderNavItemComponent, SliderItemComponent, SliderColumnComponent],
-  exports: [SliderArrowComponent]
+  exports: [SliderContainerComponent, SliderArrowComponent, SliderNavItemComponent, SliderItemComponent, SliderColumnComponent],
 })
-export class SliderUtilsModule {}
+export class SliderUtilsModule {}

utils/authors/showAuthors.component.ts

@@ -26,7 +26,7 @@ import {properties} from "../../../../environments/environment";
                 {{author.fullName + ";"}}
               </span>
           </a>
-          <div *ngIf="!isMobile" class="default-dropdown uk-margin-remove-top uk-dropdown orcid-dropdown" uk-dropdown="mode:click; offset: 4" style="min-width: 465px !important;">
+          <div *ngIf="!isMobile" class="default-dropdown uk-margin-remove-top uk-dropdown orcid-dropdown" uk-dropdown="mode:click; offset: 4; container: true" style="min-width: 465px !important;">
               <ng-container *ngTemplateOutlet="dropdown"></ng-container>
           </div>
           <mobile-dropdown *ngIf="isMobile" [toggle]="toggle">

utils/can-exit.guard.ts

@@ -1,6 +1,6 @@
 import {Observable} from 'rxjs';
 import {Injectable} from '@angular/core';
-import {CanDeactivate} from '@angular/router';
+
 
 export interface IDeactivateComponent {
     canExit: () => Observable<boolean> | Promise<boolean> | boolean;
@@ -9,7 +9,7 @@ export interface IDeactivateComponent {
 @Injectable({
     providedIn: 'root'
 })
-export class CanExitGuard implements CanDeactivate<IDeactivateComponent> {
+export class CanExitGuard  {
 
     constructor() {
     }

utils/entities/entities.module.ts

@@ -1,23 +0,0 @@
-import { NgModule }            from '@angular/core';
-import { CommonModule }        from '@angular/common';
-import { FormsModule }         from '@angular/forms';
-
-
-//Entities
-import {OrganizationInfo} from './organizationInfo';
-import {ProjectInfo} from './projectInfo';
-import {Publication} from './publication';
-import {ResultLandingInfo} from './resultLandingInfo';
-import {SearchResult} from './searchResult';
-import {DataProviderInfo} from './dataProviderInfo';
-import {Metrics} from './metrics';
-
-@NgModule({
-  imports: [ CommonModule, FormsModule ],
-  declarations: [
-
-  ],
-  exports: [
-   ]
-})
-export class EntitiesModule { }

utils/entitiesAutoComplete/entitiesAutoComplete.component.ts

@@ -31,7 +31,7 @@ import {AutoCompleteValue} from "../../searchPages/searchUtils/searchHelperClass
           <!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
           <span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
           <div *ngIf="focus && showInput" class="options uk-dropdown uk-open"   #optionBox
-               uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id">
+               uk-dropdown="pos: bottom-left; mode: none; stretch: true; offset: 15; flip: false; shift: false" [attr.target]="'#' + id" [attr.boundary]="'#' + id">
                 <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
                       <li>
                           <span *ngIf="!_search.ready && warningMessage.length ==0" class="uk-padding-small"> Loading..... </span>

utils/gif-slider/gif-slider.component.ts

@@ -1,47 +0,0 @@
-import {Component, Input} from '@angular/core';
-
-@Component({
-  selector: 'gif-slider',
-  template: `
-    <div tabindex="-1" [attr.uk-slider]="'velocity: ' + velocity + 
-                                        ';autoplay: '+ autoplay + 
-                                        ';autoplay-interval: ' + autoplayInterval + 
-                                        ';pause-on-hover: ' + pauseOnHover + 
-                                        ';center: ' + center">
-     <div class="uk-slider-container">
-      <ul class="uk-slider-items uk-child-width-1-1">
-        <li *ngFor="let gif of gifs">
-          <div class="uk-flex uk-padding uk-child-width-1-2@m uk-child-width-1-1@s" uk-grid>
-            <div>
-              <img [attr.src]="gif.gif" class="uk-box-shadow-large uk-border-rounded" loading="lazy">
-            </div>
-            <div [ngClass]="(gifRight)?'uk-flex-first':''" class="uk-margin-top">
-              <div>
-                <div class="uk-text-bold uk-h4">{{gif.header}}</div>
-                <div class="uk-margin-medium"> {{gif.text}}</div>
-                <div *ngIf="link" class="uk-inline">
-                  <a class="uk-button portal-button uk-text-uppercase" [routerLink]="route" routerLinkActive="router-link-active">{{linkTitle}}</a>
-                </div>
-              </div>
-            </div>
-          </div>
-        </li>
-      </ul>
-      <ul class="uk-slider-nav uk-dotnav uk-flex-center uk-margin"></ul>
-     </div>
-    </div>`
-})
-
-export class GifSliderComponent {
-  @Input() gifs: {"gif": string, "header": string, "text"}[] = [];
-  @Input() link = false;
-  @Input() route = null;
-  @Input() linkTitle = null;
-  @Input() gifRight = false;
-  @Input() velocity = 0;
-  @Input() autoplay = true;
-  @Input() autoplayInterval = 4000;
-  @Input() pauseOnHover = false;
-  @Input() center = true;
-
-}

utils/gif-slider/gif-slider.module.ts

@@ -1,19 +0,0 @@
-import { NgModule}      from '@angular/core';
-import { CommonModule } from '@angular/common';
-import { RouterModule } from '@angular/router';
-import {GifSliderComponent} from "./gif-slider.component";
-
-@NgModule({
-  imports: [
-    CommonModule, RouterModule
-  ],
-  declarations: [
-    GifSliderComponent
-  ],
-  providers:[
-  ],
-  exports: [
-    GifSliderComponent
-  ]
-})
-export class GifSliderModule { }

utils/icons/icons-preview/icons-preview.component.ts

@@ -1,4 +1,6 @@
-import {Component} from "@angular/core";
+import {Component, OnInit} from "@angular/core";
+import {Icon} from "../icons";
+import {IconsService} from "../icons.service";
 
 @Component({
   selector: 'icons-preview',
@@ -6,85 +8,9 @@ import {Component} from "@angular/core";
     <div class="uk-section uk-container uk-container-large" style="font-size: 14px;">
       <h4 class="uk-text-bold">Icons</h4>
       <div class="uk-grid uk-grid-small uk-child-width-1-6" uk-grid>
-        <div class="uk-text-center">
+        <div *ngFor="let icon of icons" class="uk-text-center">
-          <icon name="book"></icon>
+          <icon [name]="icon.name"></icon>
-          <div class="uk-text-bold uk-margin-small-top">book</div>
+          <div class="uk-text-bold uk-margin-small-top">{{icon.name}}</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="database"></icon>
-          <div class="uk-text-bold uk-margin-small-top">database</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="cog"></icon>
-          <div class="uk-text-bold uk-margin-small-top">cog</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="earth"></icon>
-          <div class="uk-text-bold uk-margin-small-top">earth</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="incognito"></icon>
-          <div class="uk-text-bold uk-margin-small-top">incognito</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="restricted"></icon>
-          <div class="uk-text-bold uk-margin-small-top">restricted</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="graph"></icon>
-          <div class="uk-text-bold uk-margin-small-top">graph</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="orcid_add"></icon>
-          <div class="uk-text-bold uk-margin-small-top">orcid_add</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="orcid_bin"></icon>
-          <div class="uk-text-bold uk-margin-small-top">orcid_bin</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="link"></icon>
-          <div class="uk-text-bold uk-margin-small-top">link</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="quotes"></icon>
-          <div class="uk-text-bold uk-margin-small-top">quotes</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="mining"></icon>
-          <div class="uk-text-bold uk-margin-small-top">mining</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="by"></icon>
-          <div class="uk-text-bold uk-margin-small-top">by</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="cc"></icon>
-          <div class="uk-text-bold uk-margin-small-top">cc</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="twitter"></icon>
-          <div class="uk-text-bold uk-margin-small-top">twitter</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="facebook"></icon>
-          <div class="uk-text-bold uk-margin-small-top">facebook</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="linkedin"></icon>
-          <div class="uk-text-bold uk-margin-small-top">linkedin</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="slideshare"></icon>
-          <div class="uk-text-bold uk-margin-small-top">slideshare</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="youtube"></icon>
-          <div class="uk-text-bold uk-margin-small-top">youtube</div>
-        </div>
-        <div class="uk-text-center">
-          <icon name="newsletter"></icon>
-          <div class="uk-text-bold uk-margin-small-top">newsletter</div>
         </div>
       </div>
       <div class="uk-margin-medium-top">
@@ -124,6 +50,13 @@ import {Component} from "@angular/core";
     </div>
   `
 })
-export class IconsPreviewComponent {
+export class IconsPreviewComponent implements OnInit{
+  icons: Icon[] = [];
 
+  constructor(private iconsService: IconsService) {
+  }
+
+  ngOnInit() {
+    this.icons = this.iconsService.getAll();
+  }
 }

utils/icons/icons-preview/icons-preview.module.ts

@@ -4,31 +4,17 @@ import {RouterModule} from "@angular/router";
 import {IconsPreviewComponent} from "./icons-preview.component";
 import {IconsService} from "../icons.service";
 import {IconsModule} from "../icons.module";
-import {
+import {isDevelopmentGuard} from "../../../error/isDevelopmentGuard.guard";
-  book,
-  cog,
-  database,
-  earth,
-  filters,
-  graph,
-  incognito, link, mining,
-  orcid_add,
-  orcid_bin,
-  quotes,
-  restricted,
-  by,
-  cc, twitter, facebook, linkedin, slideshare, youtube, newsletter
-} from "../icons";
 
 @NgModule({
   imports: [CommonModule, RouterModule.forChild([
-    {path: '', component: IconsPreviewComponent}
+    {path: '', component: IconsPreviewComponent, canActivate: [isDevelopmentGuard]}
   ]), IconsModule],
   declarations: [IconsPreviewComponent],
   exports: [IconsPreviewComponent]
 })
 export class IconsPreviewModule {
   constructor(private iconsService: IconsService) {
-    this.iconsService.registerIcons([book, database, cog, earth, incognito, restricted, graph, filters, orcid_add, orcid_bin, link, quotes, mining, by, cc, twitter, facebook, linkedin, slideshare, youtube, newsletter])
+    this.iconsService.registerIcons(this.iconsService.getAll());
   }
 }

utils/icons/icons.component.ts

@@ -9,6 +9,7 @@ import {
   ViewChild
 } from "@angular/core";
 import {IconsService} from "./icons.service";
+import {Icon} from "./icons";
 
 export interface StopRule {
   class: string,
@@ -46,22 +47,27 @@ export interface StopRule {
 @Component({
   selector: 'icon',
   template: `
-    <span #icon *ngIf="svg" class="uk-icon" [class.uk-preserve]="gradient || preserveColor" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="svg | safeHtml"></span>
+    <span #svgIcon *ngIf="icon.data" class="uk-icon" [class.uk-preserve]="gradient || icon.preserveColor" [class.uk-flex]="flex" [ngClass]="customClass" [ngStyle]="style" [innerHTML]="icon.data | safeHtml"></span>
-    <span *ngIf="!svg && iconName" [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
+    <span *ngIf="!icon.data && icon.name" [class.uk-flex]="flex" [ngClass]="customClass" [class.uk-display-inline-block]="!flex">
-      <span class="material-icons" [ngClass]="type" [ngStyle]="style">{{iconName}}</span>
+      <span class="material-icons" [ngClass]="type?type:icon.type" [ngStyle]="style">{{icon.name}}</span>
     </span>
     <span *ngIf="visuallyHidden" class="visually-hidden">{{visuallyHidden}}</span>
   `
 })
 export class IconsComponent implements AfterViewInit, OnChanges {
   private static DEFAULT_ICON_SIZE  = 20;
-  public iconName: string;
+  @Input()
-  public style;
+  public icon: Icon;
+  public style: any;
   /**
    * Custom icon as SVG
    */
   @Input()
-  public svg;
+  public set svg(svg: string) {
+    if(svg) {
+      this.icon = {name: '', data: svg};
+    }
+  };
   @Input()
   public defaultSize = false;
   /**
@@ -99,12 +105,17 @@ export class IconsComponent implements AfterViewInit, OnChanges {
   @Input()
   public type: "outlined" | "round" | "sharp" | "two-tone" | null = null;
   /**
-   * Name of icon in registry (Required)
+   * Name of icon in registry(1) or Material Icons(2)
    * */
   @Input()
   set name(iconName: string) {
-    this.iconName = iconName;
+    if(iconName) {
-    this.svg = this.iconsService.getIcon(iconName);
+      this.icon = {name: iconName, data: null};
+      let icon = this.iconsService.getIcon(iconName);
+      if (icon) {
+        this.icon = icon;
+      }
+    }
   }
   /**
    * Set visually hidden name for accessibility
@@ -123,10 +134,8 @@ export class IconsComponent implements AfterViewInit, OnChanges {
   public degrees: number = 0;
   @Input()
   public stopRules: StopRule[]= [{class: 'start', offset: 0}, {class: 'end', offset: 100}];
-  @ViewChild("icon")
+  @ViewChild("svgIcon")
-  public icon: ElementRef;
+  public svgIcon: ElementRef;
-  @Input()
-  public preserveColor: boolean = false;
   
   constructor(private iconsService: IconsService,
               private cdr: ChangeDetectorRef) {}
@@ -140,9 +149,9 @@ export class IconsComponent implements AfterViewInit, OnChanges {
   }
   
   initIcon() {
-    if(this.svg && this.icon) {
+    if(this.icon.data && this.svgIcon) {
       this.cdr.detectChanges();
-      let svg: Element = this.icon.nativeElement.getElementsByTagName('svg').item(0);
+      let svg: Element = this.svgIcon.nativeElement.getElementsByTagName('svg').item(0);
       if(!this.defaultSize && svg) {
         svg.setAttribute("width", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());
         svg.setAttribute("height", (this.ratio * IconsComponent.DEFAULT_ICON_SIZE).toString());

utils/icons/icons.service.ts

@@ -1,4 +1,5 @@
 import {Injectable} from "@angular/core";
+import * as all from "./icons";
 import {Icon} from "./icons";
 
 @Injectable({
@@ -6,13 +7,24 @@ import {Icon} from "./icons";
 })
 export class IconsService {
   
-  private registry = new Map<string, string>();
+  private registry = new Map<string, Icon>();
-  
+
+  constructor() {
+  }
+
   public registerIcons(icons: any[]): void {
-    icons.forEach((icon: Icon) => this.registry.set(icon.name, icon.data));
+    icons.forEach((icon: Icon) => this.registry.set(icon.name, icon));
   }
   
-  public getIcon(iconName: string): string | undefined {
+  public getIcon(iconName: string): Icon | undefined {
     return this.registry.get(iconName);
   }
+
+  public getAll(): Icon[] {
+    let icons: Icon[] = [];
+    for (let key in all) {
+      icons.push(all[key]);
+    }
+    return icons;
+  }
 }

utils/icons/icons.ts

@@ -1,6 +1,8 @@
 export interface Icon {
   name: string,
-  data: string
+  type?: "outlined" | "round" | "sharp" | "two-tone" | null
+  data: string,
+  preserveColor?: boolean,
 }
 
 export const book: Icon = {
@@ -23,142 +25,139 @@ export const earth: Icon = {
   data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 30 30"><path id="earth" d="M15,0A15,15,0,1,0,30,15,15,15,0,0,0,15,0Zm0,28.125a13.086,13.086,0,0,1-5.192-1.068l6.831-7.685a.935.935,0,0,0,.237-.622V15.938A.938.938,0,0,0,15.938,15c-3.31,0-6.8-3.442-6.837-3.475a.937.937,0,0,0-.663-.275H4.688a.938.938,0,0,0-.937.937v5.625a.936.936,0,0,0,.518.838L7.5,20.267v5.5A13.132,13.132,0,0,1,3.14,9.375H6.563A.935.935,0,0,0,7.226,9.1l3.75-3.75a.937.937,0,0,0,.275-.663V2.42a13.164,13.164,0,0,1,9.5.779c-.122.1-.24.21-.353.323a5.626,5.626,0,0,0,3.974,9.6c.093,0,.186,0,.278-.007A22.007,22.007,0,0,1,24.4,24.027a.878.878,0,0,0-.024.153A13.084,13.084,0,0,1,15,28.125Z"/></svg>'
 }
 
-export const incognito = {
+export const incognito: Icon = {
   name: 'incognito',
   data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24.51 19.525"><g id="Group_13376" data-name="Group 13376" transform="translate(-428.81 -3863.018)"><path id="Path_104500" data-name="Path 104500" d="M44.68,105.185H43.024a23.507,23.507,0,0,0-9.194-.158V106a3.909,3.909,0,0,1,1.264,1.668c.455,1.119.2,3.05,4.148,3.289s4-4.041,4.034-4.438.577-.372.577-.372.541-.021.579.372.09,4.673,4.034,4.438,3.693-2.17,4.146-3.289A3.9,3.9,0,0,1,53.879,106v-.969A23.686,23.686,0,0,0,44.68,105.185Z" transform="translate(397.218 3771.582)" fill="#2c2c2c"/><path id="Path_104501" data-name="Path 104501" d="M41.867,35.784H40.326s-1.95-6.217-2.207-6.735a2.8,2.8,0,0,0-2.591-2.061c-1.92-.266-2.138,1.225-3.544,1.268-1.406-.049-1.617-1.546-3.542-1.268a2.817,2.817,0,0,0-2.592,2.061c-.246.518-2.205,6.735-2.205,6.735H22.1a2.31,2.31,0,0,0-2.371,2.245H44.24A2.311,2.311,0,0,0,41.867,35.784Z" transform="translate(409.08 3836.064)" fill="#2c2c2c"/></g></svg>'
 }
 
-export const restricted = {
+export const restricted: Icon = {
   name: 'restricted',
   data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"><g id="noun-remove-file-3557544" transform="translate(-176.397 -106.4)"><path id="Path_104600" data-name="Path 104600" d="M181.881,274.166A5.485,5.485,0,1,0,178,272.559,5.484,5.484,0,0,0,181.881,274.166Zm-3.548-5.484a3.531,3.531,0,0,1,.452-1.729l4.839,4.839a3.548,3.548,0,0,1-5.29-3.11Zm7.1,0a3.527,3.527,0,0,1-.452,1.729l-4.839-4.839a3.548,3.548,0,0,1,5.29,3.11Z" transform="translate(0 -147.766)"/><path id="Path_104601" data-name="Path 104601" d="M245.859,106.4a2.258,2.258,0,0,0-2.258,2.258v4.516h1.936v-4.516a.323.323,0,0,1,.323-.323h8.064v3.871h3.871v11.935a.323.323,0,0,1-.323.323h-5.484V126.4h5.484a2.259,2.259,0,0,0,2.258-2.258v-13.3l-4.439-4.439Z" transform="translate(-63.333)"/></g></svg>'
 }
 
-export const graph = {
+export const graph: Icon = {
   name: 'graph',
   data: '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 21.744"><g transform="translate(0)"><g transform="translate(0 0)"><path d="M18.772,15.578a2.718,2.718,0,0,0-.427-.368,3.629,3.629,0,0,0-3.291-.5,3.445,3.445,0,0,0-.962.5c-.07.051-.139.1-.2.161a2.335,2.335,0,0,0-.23.207.3.3,0,0,0-.047.051c-.011.013-.027.028-.036.042a1.611,1.611,0,0,0-.163.19L7.039,12.133a8.04,8.04,0,0,1,8.352-5.007h0a3.681,3.681,0,0,0,.93.133h.046a3.633,3.633,0,0,0,2.008-.605,3.57,3.57,0,0,0,.926-.9A3.63,3.63,0,1,0,13.368,1.57a3.491,3.491,0,0,0-.38.71,3.589,3.589,0,0,0-.26,1.35c0,.065,0,.125,0,.19a4.146,4.146,0,0,0,.051.459,3.721,3.721,0,0,0,.125.486L6.369,8.542a3.546,3.546,0,0,0-.649-.59,3.629,3.629,0,0,0-4.2,0,3.675,3.675,0,0,0-.894.9,3.483,3.483,0,0,0-.38.71,3.35,3.35,0,0,0-.137.41,3.563,3.563,0,0,0-.123.949v.19a3.57,3.57,0,0,0,.038.38.635.635,0,0,0,.013.08,3.641,3.641,0,0,0,.634,1.469h0a3.7,3.7,0,0,0,.934.894,3.606,3.606,0,0,0,2.008.607,3.732,3.732,0,0,0,.55-.038l-.044.036a8.037,8.037,0,0,1,8.6,4.556v-.021a3.606,3.606,0,0,0,2.836,2.61,3.472,3.472,0,0,0,1.26,0,3.629,3.629,0,0,0,2.879-2.58.228.228,0,0,0,0-.038,3.606,3.606,0,0,0-.6-3.111,2.769,2.769,0,0,0-.344-.393M14.129,3.515a2.19,2.19,0,0,1,.254-.928,2.323,2.323,0,0,1,.885-.907A2.24,2.24,0,0,1,16.359,1.4a2.206,2.206,0,0,1,1.1.285,2.234,2.234,0,0,1,.886.909,2.179,2.179,0,0,1,.252,1.038,2.213,2.213,0,0,1-.306,1.116,2.181,2.181,0,0,1-.949.888,2.255,2.255,0,0,1-.983.23h-.04a2.158,2.158,0,0,1-.949-.228,2.278,2.278,0,0,1-.569-.406,1.912,1.912,0,0,1-.156-.171,2.314,2.314,0,0,1-.224-.313.078.078,0,0,1-.015-.027,2.226,2.226,0,0,1-.287-1.091.76.76,0,0,1,0-.114M2.638,12.921a2.24,2.24,0,0,1-.731-.569,2.327,2.327,0,0,1-.22-.307,2.24,2.24,0,0,1-.3-1.118,1.122,1.122,0,0,1,0-.114,2.183,2.183,0,0,1,.258-.941,2.316,2.316,0,0,1,.885-.909,2.278,2.278,0,0,1,1.09-.283,2.232,2.232,0,0,1,1.5.59,2.19,2.19,0,0,1,.437.55.313.313,0,0,1,.038.059,2.1,2.1,0,0,1,.207.562,2.149,2.149,0,0,1,.053.484,2.056,2.056,0,0,1-.057.488,2.105,2.105,0,0,1-.226.6.277.277,0,0,1-.017.028,2.183,2.183,0,0,1-.435.535,2.158,2.158,0,0,1-.514.349,2.265,2.265,0,0,1-.985.23,2.23,2.23,0,0,1-.983-.23m15.8,5.44a2.219,2.219,0,0,1-.642,1.346,2.169,2.169,0,0,1-.22.19,2.261,2.261,0,0,1-.746.38,2.175,2.175,0,0,1-1.26-.019,2.12,2.12,0,0,1-.917-.549A2.185,2.185,0,0,1,14,18.1h0a.9.9,0,0,1,.015-.2c.015-.066,0-.076.015-.116a1.575,1.575,0,0,1,.055-.241,1.993,1.993,0,0,1,.2-.48c.011-.025.027-.049.04-.074a2.291,2.291,0,0,1,.321-.4h0c.034-.034.066-.063.1-.093a1.627,1.627,0,0,1,.142-.114,1.693,1.693,0,0,1,.2-.139,2.253,2.253,0,0,1,2.245,0,2.446,2.446,0,0,1,.45.345,2.371,2.371,0,0,1,.323.412,2.266,2.266,0,0,1,.319,1.388" transform="translate(0.01 0)"/><path d="M78.35,12.262a.338.338,0,0,0,.319.222h.8v.845a.2.2,0,0,0,.013.085.325.325,0,0,0,.173.216.268.268,0,0,0,.156.046.294.294,0,0,0,.1-.019.34.34,0,0,0,.245-.328v-.845h.9a.345.345,0,0,0,.347-.344.355.355,0,0,0-.156-.287.349.349,0,0,0-.19-.057h-.9v-.848a.325.325,0,0,0-.082-.216.305.305,0,0,0-.044-.042l-.038-.023-.068-.036a.237.237,0,0,0-.112-.023.3.3,0,0,0-.156.038.19.19,0,0,0-.055.036.323.323,0,0,0-.129.268V11.8h-.8a.363.363,0,0,0-.19.057.38.38,0,0,0-.123.167.247.247,0,0,0-.027.12.3.3,0,0,0,.011.084.315.315,0,0,0,.015.038" transform="translate(-63.459 -8.595)"/></g></g></svg>'
 }
 
-export const filters = {
+export const filters: Icon = {
   name: 'filters',
   data: '<svg id="Group_13364" data-name="Group 13364" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="20" height="20" viewBox="0 0 24.648 21.128"><defs><linearGradient id="linear-gradient" x2="1" y2="0.961" gradientUnits="objectBoundingBox"><stop offset="0" /><stop offset="1" /></linearGradient><linearGradient id="linear-gradient-2" x1="-0.029" y1="0.037" x2="1" y2="0.928" xlink:href="#linear-gradient"/></defs><g id="Group_13361" data-name="Group 13361" transform="translate(0 10.564)"><line id="Line_420" data-name="Line 420" x2="24.648" transform="translate(0 5.774)" fill="none" stroke="#707070" stroke-width="1"/><g id="Ellipse_515" data-name="Ellipse 515" transform="translate(2.078)" stroke="#fafafa" stroke-width="0.6"><ellipse cx="5.282" cy="5.282" rx="5.282" ry="5.282" stroke="none"/><ellipse cx="5.282" cy="5.282" rx="4.982" ry="4.982" fill="none"/></g></g><g id="Group_13362" data-name="Group 13362"><line id="Line_418" data-name="Line 418" x2="24.648" transform="translate(0 5.388)" fill="none" stroke="#707070" stroke-width="1"/><g id="Path_104494" data-name="Path 104494" transform="translate(11.444)"><path d="M 5.281623840332031 10.26361751556396 C 2.534753799438477 10.26361751556396 0.3000038266181946 8.028787612915039 0.3000038266181946 5.281807899475098 C 0.3000038266181946 2.534827947616577 2.534753799438477 0.2999978959560394 5.281623840332031 0.2999978959560394 C 8.028493881225586 0.2999978959560394 10.26324367523193 2.534827947616577 10.26324367523193 5.281807899475098 C 10.26324367523193 8.028787612915039 8.028493881225586 10.26361751556396 5.281623840332031 10.26361751556396 Z" stroke="none"/><path d="M 5.281623840332031 0.5999975204467773 C 2.700173854827881 0.5999975204467773 0.6000041961669922 2.700247764587402 0.6000041961669922 5.281807899475098 C 0.6000041961669922 7.863368034362793 2.700173854827881 9.963618278503418 5.281623840332031 9.963618278503418 C 7.863073825836182 9.963618278503418 9.96324348449707 7.863368034362793 9.96324348449707 5.281807899475098 C 9.96324348449707 2.700247764587402 7.863073825836182 0.5999975204467773 5.281623840332031 0.5999975204467773 M 5.281623840332031 -1.9073486328125e-06 C 8.198583602905273 -1.9073486328125e-06 10.5632438659668 2.364748001098633 10.5632438659668 5.281807899475098 C 10.5632438659668 8.198867797851562 8.198583602905273 10.56361770629883 5.281623840332031 10.56361770629883 C 2.364664077758789 10.56361770629883 3.814697265625e-06 8.198867797851562 3.814697265625e-06 5.281807899475098 C 3.814697265625e-06 2.364748001098633 2.364664077758789 -1.9073486328125e-06 5.281623840332031 -1.9073486328125e-06 Z" stroke="none" fill="#fafafa"/></g></g></svg>'
 }
 
-export const orcid_add = {
+export const orcid_add: Icon = {
   name: 'orcid_add',
   data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42.13 40.77"><defs><style>.cls-2{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><circle cx="18.09" cy="18.09" r="18.09"/><rect class="cls-2" x="9.86" y="11.03" width="2.49" height="15.27"/><ellipse class="cls-2" cx="11.07" cy="8.16" rx="1.63" ry="1.6"/><path class="cls-2" d="M23.07,11.17A6.57,6.57,0,0,0,21.81,11H15.28V13.2h0V24.09h0v2.15h6.34a7.75,7.75,0,0,0,1.45-.14,7.61,7.61,0,0,0,0-14.93ZM25,23l-.26.19a4.3,4.3,0,0,1-.45.29,4.41,4.41,0,0,1-1.64.62H17.63V13.2h4.42a5.63,5.63,0,0,1,2.62.81,4.12,4.12,0,0,1,.47.38A5.74,5.74,0,0,1,25,23Z"/><path d="M41.33,34.62H37.57V30.86a.79.79,0,0,0-.79-.79h0a.79.79,0,0,0-.8.78h0v3.76H32.22a.79.79,0,0,0-.79.79h0a.79.79,0,0,0,.79.79H36V40a.8.8,0,1,0,1.59,0h0V36.21h3.76a.79.79,0,0,0,.8-.78h0A.8.8,0,0,0,41.33,34.62Z"/></g></g></svg>'
 }
 
-export const orcid_bin = {
+export const orcid_bin: Icon = {
   name: 'orcid_bin',
   data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41.58 41.07"><defs><style>.cls-3{fill:#fff;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="Layer_1-2" data-name="Layer 1"><g id="Layer_2-2" data-name="Layer 2"><g id="Layer_1-2-2" data-name="Layer 1-2"><path d="M40.55,31.91v7.56A1.58,1.58,0,0,1,39,41.07H34.3a1.59,1.59,0,0,1-1.57-1.6V31.91H32a.25.25,0,0,1-.27-.23v0h0a.28.28,0,0,1,.27-.23h2.32v-1a.25.25,0,0,1,.22-.28h4.22a.3.3,0,0,1,.28.28v1h2.32c.15,0,.22.13.22.28h0c0,.14-.08.18-.22.19Zm-7.23,0v7.56a1,1,0,0,0,1,1H39a1,1,0,0,0,1-1V31.91Zm5.12-.5v-.74H34.82v.74Z"/><path d="M34.74,33.79a.29.29,0,0,1,.28-.28.29.29,0,0,1,.27.28v4.85a.29.29,0,0,1-.27.28.29.29,0,0,1-.28-.28Z"/><path d="M38,33.79a.29.29,0,0,1,.28-.28.29.29,0,0,1,.27.28v4.85a.29.29,0,0,1-.27.28.29.29,0,0,1-.28-.28Z"/><path d="M36.34,33.79a.3.3,0,0,1,.28-.28.28.28,0,0,1,.27.28v4.85a.28.28,0,0,1-.27.28.3.3,0,0,1-.28-.28Z"/><circle cx="18.09" cy="18.09" r="18.09"/><rect class="cls-3" x="9.86" y="11.03" width="2.49" height="15.27"/><ellipse class="cls-3" cx="11.07" cy="8.16" rx="1.63" ry="1.6"/><path class="cls-3" d="M23.07,11.17A6.7,6.7,0,0,0,21.81,11H15.28v2.2h0V24.09h0v2.15h6.34a7.83,7.83,0,0,0,1.45-.14,7.61,7.61,0,0,0,0-14.93ZM25,23l-.26.19a3.46,3.46,0,0,1-.45.29,4.42,4.42,0,0,1-1.64.62h-5V13.2h4.42a5.63,5.63,0,0,1,2.62.81,3.4,3.4,0,0,1,.47.38,5.75,5.75,0,0,1,.38,8.11A6.14,6.14,0,0,1,25,23Z"/></g></g></g></g></svg>'
 }
 
-export const link = {
+export const link: Icon = {
   name: 'link',
   data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="link"><path fill="none" stroke="#000" stroke-width="1.1" d="M10.625,12.375 L7.525,15.475 C6.825,16.175 5.925,16.175 5.225,15.475 L4.525,14.775 C3.825,14.074 3.825,13.175 4.525,12.475 L7.625,9.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M9.325,7.375 L12.425,4.275 C13.125,3.575 14.025,3.575 14.724,4.275 L15.425,4.975 C16.125,5.675 16.125,6.575 15.425,7.275 L12.325,10.375"></path><path fill="none" stroke="#000" stroke-width="1.1" d="M7.925,11.875 L11.925,7.975"></path></svg>'
 }
 
-export const quotes = {
+export const quotes: Icon = {
   name: 'quotes',
   data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="quote-right"><path d="M17.27,7.79 C17.27,9.45 16.97,10.43 15.99,12.02 C14.98,13.64 13,15.23 11.56,15.97 L11.1,15.08 C12.34,14.2 13.14,13.51 14.02,11.82 C14.27,11.34 14.41,10.92 14.49,10.54 C14.3,10.58 14.09,10.6 13.88,10.6 C12.06,10.6 10.59,9.12 10.59,7.3 C10.59,5.48 12.06,4 13.88,4 C15.39,4 16.67,5.02 17.05,6.42 C17.19,6.82 17.27,7.27 17.27,7.79 L17.27,7.79 Z"></path><path d="M8.68,7.79 C8.68,9.45 8.38,10.43 7.4,12.02 C6.39,13.64 4.41,15.23 2.97,15.97 L2.51,15.08 C3.75,14.2 4.55,13.51 5.43,11.82 C5.68,11.34 5.82,10.92 5.9,10.54 C5.71,10.58 5.5,10.6 5.29,10.6 C3.47,10.6 2,9.12 2,7.3 C2,5.48 3.47,4 5.29,4 C6.8,4 8.08,5.02 8.46,6.42 C8.6,6.82 8.68,7.27 8.68,7.79 L8.68,7.79 Z"></path></svg>'
 }
 
-export const mining = {
+export const mining: Icon = {
   name: 'mining',
   data: '<svg width="20" height="20" viewBox="0 0 600 500" xmlns="http://www.w3.org/2000/svg"><g><path d="m449.68 334.84-90.93-52.5c-5.4258-3.1133-12.074-3.1133-17.5 0l-90.93 52.5c-5.4258 3.1328-8.75 8.9062-8.75 15.156v105c0 6.2461 3.3242 12.039 8.75 15.156l90.93 52.5c2.7109 1.5547 5.7227 2.3438 8.75 2.3438s6.0391-0.78906 8.75-2.3438l90.93-52.5c5.4258-3.1328 8.75-8.9062 8.75-15.156v-105c0-6.2461-3.3242-12.023-8.75-15.156zm-99.68 120.16c-28.945 0-52.5-23.555-52.5-52.5s23.555-52.5 52.5-52.5 52.5 23.555 52.5 52.5-23.555 52.5-52.5 52.5z"/><path d="m545.93 35h-391.86c-27.055 0-49.07 22.016-49.07 49.07v20.93h490v-20.93c0-27.055-22.016-49.07-49.07-49.07z"/><path d="m105 370.93c0 27.055 22.016 49.07 49.07 49.07h70v-70c0-12.477 6.7031-24.078 17.5-30.309l90.93-52.5c5.3359-3.0625 11.375-4.6914 17.5-4.6914s12.164 1.6289 17.465 4.6719l90.965 52.516c10.797 6.2305 17.5 17.852 17.5 30.309v70h70c27.055 0.003906 49.07-22.012 49.07-49.066v-230.93h-490zm57.629-138.3 52.5-52.5c6.8438-6.8438 17.902-6.8438 24.746 0l42.84 42.84 75.793-45.484c6.8945-4.1289 15.715-3.0469 21.387 2.625l58.922 58.922 75.266-60.219c7.543-6.0391 18.551-4.8125 24.586 2.7305 6.0391 7.543 4.8125 18.566-2.7305 24.605l-87.5 70c-3.2188 2.5898-7.0859 3.8516-10.938 3.8516-4.4961 0-8.9961-1.7344-12.391-5.1289l-60.34-60.34-75.793 45.484c-6.8789 4.1289-15.68 3.0625-21.387-2.625l-40.09-40.145-40.129 40.129c-6.8438 6.8438-17.902 6.8438-24.746 0-6.8398-6.8438-6.8398-17.906 0.003906-24.746z"/></g></svg>'
 }
 
-export const by = {
+export const by: Icon = {
   name: 'by',
-  data: '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="5.5 -3.5 64 64"><g><circle fill="#FFFFFF" cx="37.637" cy="28.806" r="28.276"/><g><path d="M37.443-3.5c8.988,0,16.57,3.085,22.742,9.257C66.393,11.967,69.5,19.548,69.5,28.5c0,8.991-3.049,16.476-9.145,22.456 C53.879,57.319,46.242,60.5,37.443,60.5c-8.649,0-16.153-3.144-22.514-9.43C8.644,44.784,5.5,37.262,5.5,28.5 c0-8.761,3.144-16.342,9.429-22.742C21.101-0.415,28.604-3.5,37.443-3.5z M37.557,2.272c-7.276,0-13.428,2.553-18.457,7.657 c-5.22,5.334-7.829,11.525-7.829,18.572c0,7.086,2.59,13.22,7.77,18.398c5.181,5.182,11.352,7.771,18.514,7.771 c7.123,0,13.334-2.607,18.629-7.828c5.029-4.838,7.543-10.952,7.543-18.343c0-7.276-2.553-13.465-7.656-18.571 C50.967,4.824,44.795,2.272,37.557,2.272z M46.129,20.557v13.085h-3.656v15.542h-9.944V33.643h-3.656V20.557 c0-0.572,0.2-1.057,0.599-1.457c0.401-0.399,0.887-0.6,1.457-0.6h13.144c0.533,0,1.01,0.2,1.428,0.6 C45.918,19.5,46.129,19.986,46.129,20.557z M33.042,12.329c0-3.008,1.485-4.514,4.458-4.514s4.457,1.504,4.457,4.514 c0,2.971-1.486,4.457-4.457,4.457S33.042,15.3,33.042,12.329z"/></g></g></svg>'
+  data: '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="5.5 -3.5 64 64"><g><circle fill="#FFFFFF" cx="37.637" cy="28.806" r="28.276"/><g><path d="M37.443-3.5c8.988,0,16.57,3.085,22.742,9.257C66.393,11.967,69.5,19.548,69.5,28.5c0,8.991-3.049,16.476-9.145,22.456 C53.879,57.319,46.242,60.5,37.443,60.5c-8.649,0-16.153-3.144-22.514-9.43C8.644,44.784,5.5,37.262,5.5,28.5 c0-8.761,3.144-16.342,9.429-22.742C21.101-0.415,28.604-3.5,37.443-3.5z M37.557,2.272c-7.276,0-13.428,2.553-18.457,7.657 c-5.22,5.334-7.829,11.525-7.829,18.572c0,7.086,2.59,13.22,7.77,18.398c5.181,5.182,11.352,7.771,18.514,7.771 c7.123,0,13.334-2.607,18.629-7.828c5.029-4.838,7.543-10.952,7.543-18.343c0-7.276-2.553-13.465-7.656-18.571 C50.967,4.824,44.795,2.272,37.557,2.272z M46.129,20.557v13.085h-3.656v15.542h-9.944V33.643h-3.656V20.557 c0-0.572,0.2-1.057,0.599-1.457c0.401-0.399,0.887-0.6,1.457-0.6h13.144c0.533,0,1.01,0.2,1.428,0.6 C45.918,19.5,46.129,19.986,46.129,20.557z M33.042,12.329c0-3.008,1.485-4.514,4.458-4.514s4.457,1.504,4.457,4.514 c0,2.971-1.486,4.457-4.457,4.457S33.042,15.3,33.042,12.329z"/></g></g></svg>',
+  preserveColor: true
 }
 
-export const cc = {
+export const cc: Icon = {
   name: 'cc',
-  data: '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="5.5 -3.5 64 64"><g><circle fill="#FFFFFF" cx="37.785" cy="28.501" r="28.836"/><path d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314 c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143 c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429 c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2 c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657 c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913 c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971 c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344 c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z M37.156,23.187 l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657 c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2 c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629 c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686 C32.604,18.558,35.441,20.101,37.156,23.187z M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2 c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113 c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686 c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313 c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z"/></g></svg>'
+  data: '<svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px" height="24px" viewBox="5.5 -3.5 64 64"><g><circle fill="#FFFFFF" cx="37.785" cy="28.501" r="28.836"/><path d="M37.441-3.5c8.951,0,16.572,3.125,22.857,9.372c3.008,3.009,5.295,6.448,6.857,10.314 c1.561,3.867,2.344,7.971,2.344,12.314c0,4.381-0.773,8.486-2.314,12.313c-1.543,3.828-3.82,7.21-6.828,10.143 c-3.123,3.085-6.666,5.448-10.629,7.086c-3.961,1.638-8.057,2.457-12.285,2.457s-8.276-0.808-12.143-2.429 c-3.866-1.618-7.333-3.961-10.4-7.027c-3.067-3.066-5.4-6.524-7-10.372S5.5,32.767,5.5,28.5c0-4.229,0.809-8.295,2.428-12.2 c1.619-3.905,3.972-7.4,7.057-10.486C21.08-0.394,28.565-3.5,37.441-3.5z M37.557,2.272c-7.314,0-13.467,2.553-18.458,7.657 c-2.515,2.553-4.448,5.419-5.8,8.6c-1.354,3.181-2.029,6.505-2.029,9.972c0,3.429,0.675,6.734,2.029,9.913 c1.353,3.183,3.285,6.021,5.8,8.516c2.514,2.496,5.351,4.399,8.515,5.715c3.161,1.314,6.476,1.971,9.943,1.971 c3.428,0,6.75-0.665,9.973-1.999c3.219-1.335,6.121-3.257,8.713-5.771c4.99-4.876,7.484-10.99,7.484-18.344 c0-3.543-0.648-6.895-1.943-10.057c-1.293-3.162-3.18-5.98-5.654-8.458C50.984,4.844,44.795,2.272,37.557,2.272z M37.156,23.187 l-4.287,2.229c-0.458-0.951-1.019-1.619-1.685-2c-0.667-0.38-1.286-0.571-1.858-0.571c-2.856,0-4.286,1.885-4.286,5.657 c0,1.714,0.362,3.084,1.085,4.113c0.724,1.029,1.791,1.544,3.201,1.544c1.867,0,3.181-0.915,3.944-2.743l3.942,2 c-0.838,1.563-2,2.791-3.486,3.686c-1.484,0.896-3.123,1.343-4.914,1.343c-2.857,0-5.163-0.875-6.915-2.629 c-1.752-1.752-2.628-4.19-2.628-7.313c0-3.048,0.886-5.466,2.657-7.257c1.771-1.79,4.009-2.686,6.715-2.686 C32.604,18.558,35.441,20.101,37.156,23.187z M55.613,23.187l-4.229,2.229c-0.457-0.951-1.02-1.619-1.686-2 c-0.668-0.38-1.307-0.571-1.914-0.571c-2.857,0-4.287,1.885-4.287,5.657c0,1.714,0.363,3.084,1.086,4.113 c0.723,1.029,1.789,1.544,3.201,1.544c1.865,0,3.18-0.915,3.941-2.743l4,2c-0.875,1.563-2.057,2.791-3.541,3.686 c-1.486,0.896-3.105,1.343-4.857,1.343c-2.896,0-5.209-0.875-6.941-2.629c-1.736-1.752-2.602-4.19-2.602-7.313 c0-3.048,0.885-5.466,2.658-7.257c1.77-1.79,4.008-2.686,6.713-2.686C51.117,18.558,53.938,20.101,55.613,23.187z"/></g></svg>',
+  preserveColor: true
 }
 
-export const twitter = {
+export const twitter: Icon = {
   name: 'twitter',
   data: '<svg width="20" height="20" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M19,4.74 C18.339,5.029 17.626,5.229 16.881,5.32 C17.644,4.86 18.227,4.139 18.503,3.28 C17.79,3.7 17.001,4.009 16.159,4.17 C15.485,3.45 14.526,3 13.464,3 C11.423,3 9.771,4.66 9.771,6.7 C9.771,6.99 9.804,7.269 9.868,7.539 C6.795,7.38 4.076,5.919 2.254,3.679 C1.936,4.219 1.754,4.86 1.754,5.539 C1.754,6.82 2.405,7.95 3.397,8.61 C2.79,8.589 2.22,8.429 1.723,8.149 L1.723,8.189 C1.723,9.978 2.997,11.478 4.686,11.82 C4.376,11.899 4.049,11.939 3.713,11.939 C3.475,11.939 3.245,11.919 3.018,11.88 C3.49,13.349 4.852,14.419 6.469,14.449 C5.205,15.429 3.612,16.019 1.882,16.019 C1.583,16.019 1.29,16.009 1,15.969 C2.635,17.019 4.576,17.629 6.662,17.629 C13.454,17.629 17.17,12 17.17,7.129 C17.17,6.969 17.166,6.809 17.157,6.649 C17.879,6.129 18.504,5.478 19,4.74"></path></svg>'
 }
 
-export const facebook = {
+export const facebook: Icon = {
   name: 'facebook',
   data: '<svg width="20" height="20" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M11,10h2.6l0.4-3H11V5.3c0-0.9,0.2-1.5,1.5-1.5H14V1.1c-0.3,0-1-0.1-2.1-0.1C9.6,1,8,2.4,8,5v2H5.5v3H8v8h3V10z"></path></svg>'
 }
 
-export const linkedin = {
+export const linkedin: Icon = {
   name: 'linkedin',
   data: '<svg width="20" height="20" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M5.77,17.89 L5.77,7.17 L2.21,7.17 L2.21,17.89 L5.77,17.89 L5.77,17.89 Z M3.99,5.71 C5.23,5.71 6.01,4.89 6.01,3.86 C5.99,2.8 5.24,2 4.02,2 C2.8,2 2,2.8 2,3.85 C2,4.88 2.77,5.7 3.97,5.7 L3.99,5.7 L3.99,5.71 L3.99,5.71 Z"></path><path d="M7.75,17.89 L11.31,17.89 L11.31,11.9 C11.31,11.58 11.33,11.26 11.43,11.03 C11.69,10.39 12.27,9.73 13.26,9.73 C14.55,9.73 15.06,10.71 15.06,12.15 L15.06,17.89 L18.62,17.89 L18.62,11.74 C18.62,8.45 16.86,6.92 14.52,6.92 C12.6,6.92 11.75,7.99 11.28,8.73 L11.3,8.73 L11.3,7.17 L7.75,7.17 C7.79,8.17 7.75,17.89 7.75,17.89 L7.75,17.89 L7.75,17.89 Z"></path></svg>'
 }
 
-export const slideshare = {
+export const slideshare: Icon = {
   name: 'slideshare',
   data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><line fill="#fff" stroke="#fff" stroke-width="1.1" x1="13.4" y1="14" x2="6.3" y2="10.7"></line><line fill="#fff" stroke="#fff" stroke-width="1.1" x1="13.5" y1="5.5" x2="6.5" y2="8.8"></line><circle fill="#fff" stroke="#fff" stroke-width="1.1" cx="15.5" cy="4.6" r="2.3"></circle><circle fill="#fff" stroke="#fff" stroke-width="1.1" cx="15.5" cy="14.8" r="2.3"></circle><circle fill="#fff" stroke="#fff" stroke-width="1.1" cx="4.5" cy="9.8" r="2.3"></circle></svg>'
 }
 
-export const youtube = {
+export const youtube: Icon = {
   name: 'youtube',
   data: '<svg width="20" height="20" fill="#fff" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M15,4.1c1,0.1,2.3,0,3,0.8c0.8,0.8,0.9,2.1,0.9,3.1C19,9.2,19,10.9,19,12c-0.1,1.1,0,2.4-0.5,3.4c-0.5,1.1-1.4,1.5-2.5,1.6 c-1.2,0.1-8.6,0.1-11,0c-1.1-0.1-2.4-0.1-3.2-1c-0.7-0.8-0.7-2-0.8-3C1,11.8,1,10.1,1,8.9c0-1.1,0-2.4,0.5-3.4C2,4.5,3,4.3,4.1,4.2 C5.3,4.1,12.6,4,15,4.1z M8,7.5v6l5.5-3L8,7.5z"></path></svg>'
 }
 
-export const newsletter = {
+export const newsletter: Icon = {
   name: 'newsletter',
   data: '<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="3.12" cy="16.8" r="1.85"></circle><path fill="none" stroke="#000" stroke-width="3" d="M1.5,8.2 C1.78,8.18 2.06,8.16 2.35,8.16 C7.57,8.16 11.81,12.37 11.81,17.57 C11.81,17.89 11.79,18.19 11.76,18.5"></path><path fill="none" stroke="#000" stroke-width="3" d="M1.5,2.52 C1.78,2.51 2.06,2.5 2.35,2.5 C10.72,2.5 17.5,9.24 17.5,17.57 C17.5,17.89 17.49,18.19 17.47,18.5"></path></svg>'
 }
 
-export const login = {
+export const login: Icon = {
   name: 'login',
   data: '<svg width="20px" height="20px" viewBox="0 0 700 700" xmlns="http://www.w3.org/2000/svg"><g><path d="m151.67 536.67c0-109.47 88.863-198.34 198.33-198.34s198.33 88.867 198.33 198.34c0 6.4375 5.2266 11.664 11.668 11.664s11.668-5.2266 11.668-11.664c0-122.34-99.332-221.67-221.67-221.67s-221.67 99.328-221.67 221.67c0 6.4375 5.2266 11.664 11.668 11.664s11.668-5.2266 11.668-11.664z" fill-rule="evenodd"/><path d="m349.8 11.668c-77.164 0-139.8 62.637-139.8 139.8s62.637 139.8 139.8 139.8c77.164 0 139.8-62.637 139.8-139.8s-62.637-139.8-139.8-139.8zm0 23.332c64.285 0 116.47 52.184 116.47 116.47 0 64.281-52.184 116.47-116.47 116.47-64.281 0-116.47-52.188-116.47-116.47 0-64.285 52.188-116.47 116.47-116.47z" fill-rule="evenodd"/></g></svg>'
 }
 
-export const cite = {
+export const cite: Icon = {
 	name: 'cite',
 	data: '<svg xmlns="http://www.w3.org/2000/svg" width="12" height="9.6" viewBox="0 0 12 9.6"> <path id="Icon_metro-quote" data-name="Icon metro-quote" d="M8.355,14.44v4.8h4.8v-4.8h-2.4a2.351,2.351,0,0,1,2.4-2.4V9.64S8.355,9.64,8.355,14.44Zm12-2.4V9.64s-4.8,0-4.8,4.8v4.8h4.8v-4.8h-2.4A2.351,2.351,0,0,1,20.355,12.04Z" transform="translate(-8.355 -9.64)" fill="#211f7e"/> </svg>'
 }
 
-export const link_to = {
+export const link_to: Icon = {
 	name: 'link_to',
 	data: '<svg width="13" height="13.369" viewBox="0 0 13 13.369" xmlns="http://www.w3.org/2000/svg"> <path id="Path_104455" data-name="Path 104455" d="M31.828,5.475,29.7,8.018a3.32,3.32,0,0,1-1.48,1,3.582,3.582,0,0,1-.5.128,3.318,3.318,0,0,1-2.993-1,.7.7,0,0,1,1.026-.958,1.919,1.919,0,0,0,2.409.323,1.865,1.865,0,0,0,.434-.369l2.156-2.572a1.949,1.949,0,0,0-.165-2.7l-.04-.036a1.917,1.917,0,0,0-2.7.239L26.825,3.3A.7.7,0,1,1,25.751,2.4l1.024-1.225A3.312,3.312,0,0,1,31.4.725a3.272,3.272,0,0,1,1.2,2.238A3.443,3.443,0,0,1,31.828,5.475Z" transform="translate(-19.621 0.015)" fill="#211f7e"/> <path id="Path_104456" data-name="Path 104456" d="M7.98,22.786a.691.691,0,0,1-.522.247.673.673,0,0,1-.532-.225,1.785,1.785,0,0,0-.2-.2,1.905,1.905,0,0,0-2.236-.159,1.869,1.869,0,0,0-.44.359l-2.19,2.61-.04.05a1.917,1.917,0,0,0,.323,2.692,1.955,1.955,0,0,0,2.688-.319l.915-1.1a.693.693,0,0,1,.476-.249.7.7,0,0,1,.6,1.148L5.91,28.735A3.427,3.427,0,0,1,3.884,29.9a2.708,2.708,0,0,1-.309.038,3.256,3.256,0,0,1-2.409-.779,3.312,3.312,0,0,1-.381-4.633l2.16-2.588A3.124,3.124,0,0,1,3.3,21.58a3.32,3.32,0,0,1,4.682.291A.7.7,0,0,1,7.98,22.786Z" transform="translate(-0.015 -16.582)"/></svg>'
 }
 
-export const versions = {
+export const versions: Icon = {
 	name: 'versions',
 	data: '<svg xmlns="http://www.w3.org/2000/svg" width="17" height="12.143" viewBox="0 0 17 12.143"> <path id="Icon_metro-versions" data-name="Icon metro-versions" d="M4.5,17.426H6.927V16.212H5.713V11.355H6.927V10.141H4.5v7.286Zm7.286-9.714V19.855H21.5V7.712H11.784Zm7.286,9.714H14.213V10.141H19.07ZM8.142,18.641H10.57V17.426H9.356V10.141H10.57V8.926H8.142Z" transform="translate(-4.499 -7.712)" fill="#211f7e"/> </svg>'
 }
 
-export const rocket = {
+export const rocket: Icon = {
 	name: 'rocket',
 	data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M156.6 384.9L125.7 354c-8.5-8.5-11.5-20.8-7.7-32.2c3-8.9 7-20.5 11.8-33.8L24 288c-8.6 0-16.6-4.6-20.9-12.1s-4.2-16.7 .2-24.1l52.5-88.5c13-21.9 36.5-35.3 61.9-35.3l82.3 0c2.4-4 4.8-7.7 7.2-11.3C289.1-4.1 411.1-8.1 483.9 5.3c11.6 2.1 20.6 11.2 22.8 22.8c13.4 72.9 9.3 194.8-111.4 276.7c-3.5 2.4-7.3 4.8-11.3 7.2v82.3c0 25.4-13.4 49-35.3 61.9l-88.5 52.5c-7.4 4.4-16.6 4.5-24.1 .2s-12.1-12.2-12.1-20.9V380.8c-14.1 4.9-26.4 8.9-35.7 11.9c-11.2 3.6-23.4 .5-31.8-7.8zM384 168c22.1 0 40-17.9 40-40s-17.9-40-40-40s-40 17.9-40 40s17.9 40 40 40z"/></svg>'
 }
 
-export const fire = {
+export const fire: Icon = {
 	name: 'fire',
 	data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M159.3 5.4c7.8-7.3 19.9-7.2 27.7 .1c27.6 25.9 53.5 53.8 77.7 84c11-14.4 23.5-30.1 37-42.9c7.9-7.4 20.1-7.4 28 .1c34.6 33 63.9 76.6 84.5 118c20.3 40.8 33.8 82.5 33.8 111.9C448 404.2 348.2 512 224 512C98.4 512 0 404.1 0 276.5c0-38.4 17.8-85.3 45.4-131.7C73.3 97.7 112.7 48.6 159.3 5.4zM225.7 416c25.3 0 47.7-7 68.8-21c42.1-29.4 53.4-88.2 28.1-134.4c-2.8-5.6-5.6-11.2-9.8-16.8l-50.6 58.8s-81.4-103.6-87.1-110.6C133.1 243.8 112 273.2 112 306.8C112 375.4 162.6 416 225.7 416z"/></svg>'
 }
 
-export const landmark = {
+export const landmark: Icon = {
 	name: 'landmark',
 	data: '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--! Font Awesome Pro 6.2.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --><path d="M240.1 4.2c9.8-5.6 21.9-5.6 31.8 0l171.8 98.1L448 104l0 .9 47.9 27.4c12.6 7.2 18.8 22 15.1 36s-16.4 23.8-30.9 23.8H32c-14.5 0-27.2-9.8-30.9-23.8s2.5-28.8 15.1-36L64 104.9V104l4.4-1.6L240.1 4.2zM64 224h64V416h40V224h64V416h48V224h64V416h40V224h64V420.3c.6 .3 1.2 .7 1.8 1.1l48 32c11.7 7.8 17 22.4 12.9 35.9S494.1 512 480 512H32c-14.1 0-26.5-9.2-30.6-22.7s1.1-28.1 12.9-35.9l48-32c.6-.4 1.2-.7 1.8-1.1V224z"/></svg>'
 }
 
-export const open_access = {
+export const open_access: Icon = {
 	name: 'open_access',
 	data: '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="1000" viewBox="0 0 640 1000"> <metadata><rdf:RDF><cc:Work rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage"/> <dc:creator>art designer at PLoS, modified by Wikipedia users Nina, Beao, JakobVoss, and AnonMoos</dc:creator> <dc:description>Open Access logo, converted into svg, designed by PLoS. This version with transparent background.</dc:description> <dc:source>http://commons.wikimedia.org/wiki/File:Open_Access_logo_PLoS_white.svg</dc:source> <dc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/"/> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/"/> <cc:attributionName>art designer at PLoS, modified by Wikipedia users Nina, Beao, JakobVoss, and AnonMoos</cc:attributionName> <cc:attributionURL>http://www.plos.org/</cc:attributionURL> </cc:Work></rdf:RDF></metadata> <g stroke="#f68212" stroke-width="104.764" fill="none"> <path d="M111.387,308.135V272.408A209.21,209.214 0 0,1 529.807,272.408V530.834"/> <circle cx="320.004" cy="680.729" r="256.083"/> </g> <circle fill="#f68212" cx="321.01" cy="681.659" r="86.4287"/> </svg>'
 }
 
-export const closed_access = {
+export const closed_access: Icon = {
 	name: 'closed_access',
-	data: '<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="640" height="1000" viewBox="0 0 640 1000"> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <cc:Work xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:creator>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</dc:creator> <dc:description>Closed Access logo, derived from PLoS Open Access logo. This version with transparent background.</dc:description> <dc:source>http://commons.wikimedia.org/wiki/File:Closed_Access_logo_transparent.svg</dc:source> <dc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:attributionName>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</cc:attributionName> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-528.67833,-378.69073)"> <path d="m 587.6826,651.09852 -2.7e-4,258.42721 104.764,0 0,-258.42721 c 0,-86.48025 70.36161,-156.8333 156.82974,-156.8333 86.46813,0 156.82523,70.35304 156.82523,156.8333 l 0,258.42721 104.7642,-2.5e-4 0,-258.42696 c 0,-144.2401 -117.35336,-261.59346 -261.58943,-261.59346 -144.23204,0 -261.59374,117.35336 -261.59374,261.59346" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 936.11577,1060.3489 c 0,47.7233 -38.69235,86.4157 -86.42773,86.4157 -47.73135,0 -86.42776,-38.6924 -86.42776,-86.4157 0,-47.7515 38.69641,-86.44787 86.42776,-86.44787 47.73538,0 86.42773,38.69637 86.42773,86.44787" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 644.97395,1059.416 c 0,-112.32498 91.38747,-203.70437 203.7084,-203.70437 112.3169,0 203.69225,91.3794 203.69225,203.70437 0,112.3128 -91.37537,203.7084 -203.69224,203.7084 -112.32093,0 -203.7084,-91.3956 -203.7084,-203.7084 m -104.76018,0 c 0,170.0686 138.39184,308.4604 308.46858,308.4604 170.08084,0 308.46054,-138.3918 308.46054,-308.4604 0,-170.09295 -138.3797,-308.46857 -308.46056,-308.46857 -170.07674,0 -308.46858,138.37563 -308.46858,308.46857" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> </g> </svg>'
+	data: '<svg xmlns="http://www.w3.org/2000/svg" width="640" height="1000" viewBox="0 0 640 1000"> <metadata> <rdf:RDF xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"> <cc:Work xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" rdf:about=""> <dc:format>image/svg+xml</dc:format> <dc:type rdf:resource="http://purl.org/dc/dcmitype/StillImage" /> <dc:creator>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</dc:creator> <dc:description>Closed Access logo, derived from PLoS Open Access logo. This version with transparent background.</dc:description> <dc:source>http://commons.wikimedia.org/wiki/File:Closed_Access_logo_transparent.svg</dc:source> <dc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:license rdf:resource="http://creativecommons.org/licenses/by-sa/3.0/" /> <cc:attributionName>Jakob Voss, based on art designer at PLoS, modified by Wikipedia users Nina and Beao</cc:attributionName> </cc:Work> </rdf:RDF> </metadata> <g transform="translate(-528.67833,-378.69073)"> <path d="m 587.6826,651.09852 -2.7e-4,258.42721 104.764,0 0,-258.42721 c 0,-86.48025 70.36161,-156.8333 156.82974,-156.8333 86.46813,0 156.82523,70.35304 156.82523,156.8333 l 0,258.42721 104.7642,-2.5e-4 0,-258.42696 c 0,-144.2401 -117.35336,-261.59346 -261.58943,-261.59346 -144.23204,0 -261.59374,117.35336 -261.59374,261.59346" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 936.11577,1060.3489 c 0,47.7233 -38.69235,86.4157 -86.42773,86.4157 -47.73135,0 -86.42776,-38.6924 -86.42776,-86.4157 0,-47.7515 38.69641,-86.44787 86.42776,-86.44787 47.73538,0 86.42773,38.69637 86.42773,86.44787" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> <path d="m 644.97395,1059.416 c 0,-112.32498 91.38747,-203.70437 203.7084,-203.70437 112.3169,0 203.69225,91.3794 203.69225,203.70437 0,112.3128 -91.37537,203.7084 -203.69224,203.7084 -112.32093,0 -203.7084,-91.3956 -203.7084,-203.7084 m -104.76018,0 c 0,170.0686 138.39184,308.4604 308.46858,308.4604 170.08084,0 308.46054,-138.3918 308.46054,-308.4604 0,-170.09295 -138.3797,-308.46857 -308.46056,-308.46857 -170.07674,0 -308.46858,138.37563 -308.46858,308.46857" style="fill:#848484;fill-opacity:1;fill-rule:nonzero;stroke:none" /> </g> </svg>'
 }
-/** Add new icon under this line to be sure that it will be added on preview */
 
-export const unknown_access = {
+export const unknown_access: Icon = {
   name: 'unknown_access',
-  data: '<svg xmlns="http://www.w3.org/2000/svg" width="373.336" height="490.004" viewBox="0 0 373.336 490.004">\n' +
+  data: '<svg xmlns="http://www.w3.org/2000/svg" width="373.336" height="490.004" viewBox="0 0 373.336 490.004"><g id="noun-lock-question-mark-250128" transform="translate(-163.328 -34.992)"><path id="Path_119172" data-name="Path 119172" d="M490,198.33H466.668V151.662a116.67,116.67,0,0,0-233.34,0V198.33H210A46.8,46.8,0,0,0,163.328,245v233.33A46.8,46.8,0,0,0,210,525H490a46.8,46.8,0,0,0,46.668-46.668V245A46.8,46.8,0,0,0,490,198.33ZM365.55,469.78H334.441V438.671H365.55ZM397.441,350l-14,14c-10.891,11.668-17.891,20.223-17.891,43.555H334.441v-7.777a61.712,61.712,0,0,1,17.891-43.555l19.445-19.445A30.98,30.98,0,1,0,318.891,315H287.782a62.223,62.223,0,0,1,124.446,0,49.983,49.983,0,0,1-14.785,35Zm24.887-151.67H277.668V151.662c0-39.668,32.668-72.332,72.332-72.332S422.332,112,422.332,151.662Z"/></g></svg>'
-    '  <g id="noun-lock-question-mark-250128" transform="translate(-163.328 -34.992)">\n' +
+}
-    '    <path id="Path_119172" data-name="Path 119172" d="M490,198.33H466.668V151.662a116.67,116.67,0,0,0-233.34,0V198.33H210A46.8,46.8,0,0,0,163.328,245v233.33A46.8,46.8,0,0,0,210,525H490a46.8,46.8,0,0,0,46.668-46.668V245A46.8,46.8,0,0,0,490,198.33ZM365.55,469.78H334.441V438.671H365.55ZM397.441,350l-14,14c-10.891,11.668-17.891,20.223-17.891,43.555H334.441v-7.777a61.712,61.712,0,0,1,17.891-43.555l19.445-19.445A30.98,30.98,0,1,0,318.891,315H287.782a62.223,62.223,0,0,1,124.446,0,49.983,49.983,0,0,1-14.785,35Zm24.887-151.67H277.668V151.662c0-39.668,32.668-72.332,72.332-72.332S422.332,112,422.332,151.662Z"/>\n' +
-    '  </g>\n' +
-    '</svg>'
-}

utils/piwik/previousRouteRecorder.guard.ts

@@ -1,13 +1,13 @@
 
 import { Injectable } from '@angular/core';
-import { CanDeactivate, Router} from '@angular/router';
+import { Router } from '@angular/router';
 import {Observable}       from 'rxjs';
 import {properties} from "../../../../environments/environment";
 
 @Injectable({
   providedIn: 'root'
 }) // do not forget to register this class as a provider
-export class PreviousRouteRecorder implements CanDeactivate<any> {
+export class PreviousRouteRecorder  {
   constructor(private router: Router) {
   }
   canDeactivate(component: any): Observable<boolean> | boolean {

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

@@ -7,10 +7,10 @@
           <img class="uk-width-medium" [src]="properties.enermapsURL +'/images/datasets/' + result.enermapsId + '.png'"
                alt="Enermaps tool preview" loading="lazy">
           <div
-              class="uk-overlay uk-margin-medium-left uk-overlay-default uk-position-bottom uk-hidden-hover uk-padding-small">
+                  class="uk-overlay uk-margin-medium-left uk-overlay-default uk-position-bottom uk-hidden-hover uk-padding-small">
             <p>Visit <a
-                class="custom-external uk-margin-right uk-margin-small-top"
+                    class="custom-external uk-margin-right uk-margin-small-top"
-                [href]="properties.enermapsURL + '/?shared_id=' + result.enermapsId" target="_blank">
+                    [href]="properties.enermapsURL + '/?shared_id=' + result.enermapsId" target="_blank">
               Enermaps tool
             </a></p>
           </div>
@@ -23,7 +23,7 @@
               <div class="multi-line-ellipsis lines-3 uk-width-expand">
                 <h2 class="uk-margin-remove uk-text-break uk-inline-block uk-h6">
                   <a *ngIf="!externalUrl && result.id" (click)="onClick()" [queryParams]="addEoscPrevInParams(createParam())"
-                    [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
+                     [routerLink]="url" class="uk-link uk-text-decoration-none uk-width-expand">
                     <div *ngIf="(result.title) || result.acronym">
                       <span *ngIf="result.acronym">
                         {{result.acronym}}
@@ -37,8 +37,8 @@
                     </div>
                   </a>
                   <a *ngIf="externalUrl && result.id" (click)="onClick()"
-                    target="_blank" [href]="externalUrl+result.id"
+                     target="_blank" [href]="externalUrl+result.id"
-                    class="custom-external uk-link uk-text-decoration-none uk-width-expand">
+                     class="custom-external uk-link uk-text-decoration-none uk-width-expand">
                     <span *ngIf="(result.title) || result.acronym">
                       <span *ngIf="result.acronym">
                         {{result.acronym}}
@@ -96,7 +96,7 @@
             <div *ngIf="result.funderShortname || result.code" class="uk-margin-xsmall-bottom">
 						<span *ngIf="result.funderShortname">
 							<span class="uk-text-meta">Funder: </span>
-              {{result.funderShortname}}
+                          {{result.funderShortname}}
 						</span>
               <span *ngIf="result.code" [class.uk-margin-left]="result.funderShortname">
 							<span class="uk-text-meta">{{openaireEntities.PROJECT}} Code: </span>
@@ -112,8 +112,8 @@
             <div *ngIf="result.budget || result.contribution" class="uk-margin-xsmall-bottom">
 						<span *ngIf="result.budget">
 							<span class="uk-text-meta">Overall Budget: </span>
-              {{result.budget | number}}
+                          {{result.budget | number}}
-              <span *ngIf="result.currency">{{result.currency}}</span>
+                          <span *ngIf="result.currency">{{result.currency}}</span>
 						</span>
               <span *ngIf="result.contribution" [class.uk-margin-left]="result.budget">
 							<span class="uk-text-meta">Funder Contribution: </span>
@@ -172,11 +172,11 @@
         </div>
       </div>
       <div *ngIf="(result.hostedBy_collectedFrom || hasActions || result.measure?.bip.length || result.measure?.counts.length) && !isDeletedByInferenceModal"
-          class="uk-text-small uk-margin-top" [class.uk-border-bottom]="!isMobile">
+           class="uk-text-small uk-margin-top" [class.uk-border-bottom]="!isMobile">
         <div uk-grid class="uk-grid uk-grid-small uk-text-xsmall uk-flex-middle uk-margin-xsmall-bottom"
-          [class.uk-flex-between]="(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
+             [class.uk-flex-between]="(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
-          [class.uk-flex-right]="!(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
+             [class.uk-flex-right]="!(result.measure?.bip.length || result.measure?.counts.length) && (result.hostedBy_collectedFrom?.length || hasActions)"
-          [class.uk-grid-divider]="!isMobile">
+             [class.uk-grid-divider]="!isMobile">
           <div *ngIf="result.hostedBy_collectedFrom?.length" class="uk-width-auto uk-visible@m">
             <availableOn [availableOn]="result.hostedBy_collectedFrom"></availableOn>
           </div>
@@ -193,7 +193,7 @@
                             [putCodes]="result.orcidPutCodes" [givenPutCode]="true" [identifiers]="result.identifiers">
                 </orcid-work>
               </span>
-                  <span *ngIf="orcid" class="uk-width-expand uk-text-right">
+              <span *ngIf="orcid" class="uk-width-expand uk-text-right">
                   <span *ngIf="result.orcidCreationDates?.length > 0" class="uk-display-inline-block">
                     <span class="uk-text-meta">
                       Added in ORCID:
@@ -209,7 +209,7 @@
             </entity-actions>
           </div>
           <div *ngIf="result.measure?.bip.length || result.measure?.counts.length"
-            class="uk-text-xsmall uk-width-auto metrics uk-flex uk-flex-middle uk-flex-right uk-text-meta">
+               class="uk-text-xsmall uk-width-auto metrics uk-flex uk-flex-middle uk-flex-right uk-text-meta">
             <ng-container *ngIf="result.measure?.bip.length">
               <a class="uk-flex uk-flex-middle uk-link-reset">
                 <icon customClass="bip-icon-hover" [flex]="true" [ratio]="0.7"
@@ -217,21 +217,22 @@
                 <span *ngIf="isNumber(result.measure.bip[0].value)" class="uk-margin-xsmall-left">{{formatNumber(result.measure.bip[0].value)}}</span>
                 <span *ngIf="!isNumber(result.measure.bip[0].value)" class="uk-margin-xsmall-left">{{result.measure.bip[0].value}}</span>
               </a>
-              <div uk-drop="pos: top-right" class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
+              <div uk-drop="pos: top-right" class="uk-drop">
-                <table>
+                <div class="uk-card uk-card-default uk-border uk-box-no-shadow uk-padding-small">
-                  <tr *ngFor="let metric of result.measure.bip">
+                  <table>
-                    <td class="bip-icon">
+                    <tr *ngFor="let metric of result.measure.bip">
-                      <icon [flex]="true" [ratio]="0.7" [name]="metric.icon"></icon>
+                      <td class="bip-icon">
-                    </td>
+                        <icon [flex]="true" [ratio]="0.7" [name]="metric.icon"></icon>
-                    <td class="uk-text-capitalize">{{metric.name}}</td>
+                      </td>
-                    <td *ngIf="isNumber(metric.value)" class="uk-text-bolder">{{metric.value | number}}</td>
+                      <td *ngIf="isNumber(metric.value)" class="uk-text-bolder">{{metric.value | number}}</td>
-                    <td *ngIf="!isNumber(metric.value)" class="uk-text-bolder">{{metric.value}}</td>
+                      <td *ngIf="!isNumber(metric.value)" class="uk-text-bolder">{{metric.value}}</td>
-                  </tr>
+                    </tr>
-                </table>
+                  </table>
-                <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
+                  <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
-                  <img class="uk-margin-xsmall-right" width="15" src="assets/common-assets/bip-minimal.svg"
+                    <img class="uk-margin-xsmall-right" width="15" src="assets/common-assets/bip-minimal.svg"
-                    loading="lazy" alt="BIP!">
+                         loading="lazy" alt="BIP!">
-                  <span class="uk-text-uppercase">Powered by <span class="uk-text-bolder">BIP!</span></span>
+                    <span class="uk-text-uppercase">Powered by <span class="uk-text-bolder">BIP!</span></span>
+                  </div>
                 </div>
               </div>
             </ng-container>
@@ -254,7 +255,7 @@
                 <div class="uk-margin-top uk-flex uk-flex-middle uk-flex-center">
                   <span class="uk-text-uppercase">Powered by </span>
                   <img class="uk-margin-xsmall-left" width="15" src="assets/common-assets/logo-small-usage-counts.png"
-                    loading="lazy" alt="Usage counts">
+                       loading="lazy" alt="Usage counts">
                 </div>
               </div>
             </ng-container>

utils/staticAutoComplete/staticAutoComplete.component.ts

@@ -25,7 +25,7 @@ import{EnvProperties} from '../../utils/properties/env-properties';
             <!--span [style.display]="showLoading ? 'inline' : 'none'" class="uk-alert uk-alert-primary" data-uk-alert=""> <i class="uk-icon-spinner"></i> Loading... </span>
             <span *ngIf="warningMessage.length > 0" class="uk-alert uk-alert-warning" data-uk-alert=""> {{warningMessage}} <a href="" class="uk-alert-close uk-close"></a></span-->
             <div  *ngIf="focus && showInput"   class="options uk-dropdown uk-open"   #optionBox
-                  uk-dropdown="pos: bottom-justify; mode: none; offset: 15; boundary-align: true;" [attr.boundary]="'#' + id" >
+                  uk-dropdown="pos: bottom-left; mode: none; stretch: true; offset: 15; flip: false; shift: false" [attr.target]="'#' + id" [attr.boundary]="'#' + id">
                   <ul class="uk-nav uk-nav-autocomplete uk-autocomplete-results" >
                       <li>
                       <span [style.display]="showLoading ? 'inline' : 'none'" class="uk-padding-small uk-text-center"> <i class="uk-icon-spinner"></i> Loading... </span>

utils/theme/theme.component.html

@@ -44,7 +44,6 @@
     </nav>
     <div class="uk-section uk-section-default">
       <div class="uk-container">
-
         <div uk-grid="" class="uk-grid">
           <div class="uk-width-2-3@m uk-first-column">
 
@@ -226,18 +225,16 @@
 
           </div>
           <div class="uk-width-expand@m">
-
             <div class="uk-margin-medium-bottom">
               <form class="uk-search uk-search-default uk-width-1-1">
                 <span uk-search-icon="" class="uk-icon uk-search-icon"><svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" data-svg="search-icon"><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-search-input" type="search" placeholder="Search...">
               </form>
             </div>
-
+            <ul class="uk-nav-default uk-margin-medium uk-nav" uk-nav="">
-            <ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium uk-nav" uk-nav="">
               <li class="uk-active"><a href="#">Active</a></li>
               <li class="uk-parent">
-                <a href="#">Parent</a>
+                <a href="#">Parent<span class="uk-nav-parent-icon"></span></a>
                 <ul class="uk-nav-sub" aria-hidden="true" hidden="">
                   <li><a href="#">Sub item</a></li>
                   <li><a href="#">Sub item</a>
@@ -249,7 +246,7 @@
                 </ul>
               </li>
               <li class="uk-parent">
-                <a href="#">Parent</a>
+                <a href="#">Parent without icon</a>
                 <ul class="uk-nav-sub" aria-hidden="true" hidden="">
                   <li><a href="#">Sub item</a></li>
                   <li><a href="#">Sub item</a></li>
@@ -297,7 +294,7 @@
         <div class="uk-grid-divider uk-grid" uk-grid="">
           <div class="uk-width-3-5@m uk-first-column">
 
-            <div class="uk-child-width-expand@s uk-grid" uk-grid="">
+            <div id="inputs" class="uk-child-width-expand@s uk-grid" uk-grid="">
               <form class="uk-grid uk-child-width-1-1" uk-grid>
 
                 <div class="uk-width-1-2">
@@ -470,6 +467,41 @@
           </div>
         </div>
 
+
+
+        <div id="sliders" #sliders class="uk-section uk-section-default">
+          <slider-container [total]="3" [navigation]="'progress'" [parent]="sliders">
+            <slider-column type="slider">
+              <slider-item type="slide" [start]="0">
+                <img src="assets/common-assets/logo-services/connect/main.svg" alt="ipad" loading="lazy">
+              </slider-item>
+              <slider-item type="slide" [start]="1">
+                <img src="assets/common-assets/logo-services/explore/main.svg" alt="ipad" loading="lazy">
+              </slider-item>
+              <slider-item type="slide" [start]="2">
+                <img src="assets/common-assets/logo-services/monitor/main.svg" alt="ipad" loading="lazy">
+              </slider-item>
+            </slider-column>
+            <slider-column type="nav">
+              <slider-nav-item [start]="0" [link]="{href: 'http://mpagasas.di.uoa.gr:4200'}">
+                <h3 class="uk-h6">
+                  OpenAIRE Connect
+                </h3>
+              </slider-nav-item>
+              <slider-nav-item [start]="1">
+                <h3 class="uk-h6">
+                  OpenAIRE Explore
+                </h3>
+              </slider-nav-item>
+              <slider-nav-item [start]="2">
+                <h3 class="uk-h6">
+                  OpenAIRE Monitor
+                </h3>
+              </slider-nav-item>
+            </slider-column>
+          </slider-container>
+        </div>
+
         <hr class="uk-margin-medium">
 
         <div class="uk-child-width-1-2@s uk-child-width-expand@m uk-grid" uk-grid="">

utils/theme/theme.component.ts

@@ -3,6 +3,7 @@ import {ValidatorFn, Validators} from "@angular/forms";
 import {StringUtils} from "../string-utils.class";
 import {ActivatedRoute} from "@angular/router";
 import {Subscriber} from "rxjs";
+import {OpenaireEntities} from "../properties/searchFields";
 
 
 @Component({
@@ -36,4 +37,6 @@ export class ThemeComponent implements OnInit, OnDestroy {
       }
     });
   }
+
+  protected readonly OpenaireEntities = OpenaireEntities;
 }

utils/theme/theme.module.ts

@@ -5,11 +5,12 @@ import {ThemeRoutingModule} from "./theme-routing.module";
 import {ThemeComponent} from "./theme.component";
 import {IconsModule} from "../icons/icons.module";
 import {InputModule} from "../../sharedComponents/input/input.module";
+import {SliderUtilsModule} from "../../sharedComponents/slider-utils/slider-utils.module";
 
 @NgModule({
   imports: [
     CommonModule, RouterModule,
-    ThemeRoutingModule, IconsModule, InputModule
+    ThemeRoutingModule, IconsModule, InputModule, SliderUtilsModule
   ],
   declarations: [
     ThemeComponent