create methodological-approach page, changes for slider-tabs component

monitor/methodology/methodological-approach.component.ts

@@ -0,0 +1,137 @@
+import {Component, OnDestroy, OnInit} from "@angular/core";
+import {Subscription} from "rxjs";
+import {Meta, Title} from "@angular/platform-browser";
+import {ActivatedRoute, Router} from "@angular/router";
+import {Stakeholder} from "../entities/stakeholder";
+import {OpenaireEntities} from "../../utils/properties/searchFields";
+import {SEOService} from "../../sharedComponents/SEO/SEO.service";
+import {properties} from "../../../../environments/environment";
+import {Breadcrumb} from "../../utils/breadcrumbs/breadcrumbs.component";
+
+@Component({
+  selector: 'methodological-approach',
+  template: `
+    <div class="uk-container uk-container-large uk-section uk-section-small uk-padding-remove-bottom">
+      <div class="uk-padding-small uk-padding-remove-horizontal">
+        <breadcrumbs [breadcrumbs]="breadcrumbs"></breadcrumbs>
+      </div>
+    </div>
+    <div class="uk-section" uk-scrollspy="target: [uk-scrollspy-class]; cls: uk-animation-fade; delay: 250">
+      <div id="how" class="uk-container uk-container-large">
+        <h2 class="uk-h1" uk-scrollspy-class>
+          Inclusion, transparency, <br> quality, state of the art <br> technology<span class="uk-text-primary">.</span>
+        </h2>
+				<div class="uk-padding uk-padding-remove-vertical">
+					<div class="uk-margin-large-top uk-card uk-card-default uk-card-body" uk-scrollspy-class>
+						<p class="uk-margin-top">Our methodological approach is based on the following operational quality
+							criteria:</p>
+						<ul>
+							<li><span class="uk-text-bold">Openness and transparency:</span> Methodological assumptions are openly and
+								clearly presented.
+							</li>
+							<li><span class="uk-text-bold">Coverage and accuracy:</span> As detailed in <a
+									href="https://graph.openaire.eu/" target="_blank">graph.openaire.eu</a>
+								multiple data sources are ingested in the OpenAIRE research graph for coverage to the fullest extent
+								possible, in order to provide meaningful indicators.
+							</li>
+							<li><span class="uk-text-bold">Clarity and replicability:</span> We describe our construction methodology in
+								detail, so that
+								it can be verified and used by the scholarly communication community to create ongoing updates to our
+								proposed statistics and indicators.
+							</li>
+							<li><span class="uk-text-bold">Readiness and timeliness:</span> The methodology is built around
+								well-established open databases
+								and already tested knowledge extraction technologies - natural language processing (NLP)/machine-learning
+								(ML) - using operational
+								workflows in OpenAIRE to warrant timely results.
+							</li>
+							<li><span class="uk-text-bold">Trust and robustness:</span> Our methodology also strives to be reliable,
+								robust, and aligned
+								to other assessment methods so that it can be operationalized, used and reused, in conjunction with other
+								assessment methods.
+							</li>
+						</ul>
+						<div class="uk-text-small uk-text-italic uk-text-right">The text above is modified from <a
+								href="https://op.europa.eu/en/publication-detail/-/publication/56cc104f-0ebb-11ec-b771-01aa75ed71a1"
+								target="_blank">this report</a> (DOI: 10.2777/268348).
+						</div>
+					</div>
+				</div>
+      </div>
+    </div>
+		<div class="uk-background-muted uk-margin-large-top">
+			<div class="uk-section uk-section-large uk-container uk-container-large">
+				<div class="uk-grid uk-child-width-1-2@m" uk-grid>
+					<div>
+						<div style="max-width: 575px;">
+							<span class="uk-text-large text-graph">Completeness, inclusion, transparency and replicability</span>
+							<h2 class="uk-margin-small-top">How? It’s about open data and collaboration<span class="text-graph">.</span></h2>
+							<ul class="uk-list uk-list-bullet uk-margin-large-top">
+								<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
+									<span class="uk-text-large uk-margin-small-bottom">Built on the <span class="uk-text-bold">OpenAire Research Graph</span></span>
+									<span>Linked scholarly information from open initiatives around the world. Beyond publications.</span>
+								</li>
+								<li class="uk-flex uk-flex-column uk-margin-medium-bottom">
+									<span class="uk-text-large uk-margin-small-bottom">Based on <span class="uk-text-bold">Open Science principles</span></span>
+									<span>Open data sources, Open APIs, well documented metrics and indicators.</span>
+								</li>
+								<li class="uk-flex uk-flex-column">
+									<span class="uk-text-large uk-margin-small-bottom">Relevance for the <span class="uk-text-bold">Community</span></span>
+									<span>Indicators development and visualizations to meet community requirements.</span>
+								</li>
+							</ul>
+						</div>
+					</div>
+					<div class="uk-position-relative">
+						<img class="uk-visible@m uk-height-1-1 uk-position-center-right" src="assets/monitor-assets/graph.svg" alt="OpenAIRE Research Graph" loading="lazy">
+					</div>
+				</div>
+			</div>
+		</div>
+		<!-- <div class="uk-section uk-section-large uk-container uk-container-large">
+			TODO: Graph scheme
+		</div> -->
+  `
+})
+export class MethodolocigalApproachComponent implements OnInit, OnDestroy {
+  public stakeholder: Stakeholder;
+  public tab: 'entities' | 'attributes' = 'entities';
+  private subscriptions: any[] = [];
+  public openaireEntities = OpenaireEntities;
+  public breadcrumbs: Breadcrumb[] = [{name: 'home', route: '/'}, {name: 'Resources - Methodological approach', keepFormat: true}];
+  
+  constructor(private seoService: SEOService,
+              private meta: Meta,
+              private router: Router,
+              private route: ActivatedRoute,
+              private title: Title) {
+  }
+  
+  ngOnInit() {
+    this.subscriptions.push(this.route.params.subscribe(params => {
+      const description = "Monitor | Methodological approach";
+      const title = "Monitor | Methodological approach";
+      this.metaTags(title, description);
+      this.breadcrumbs[0].route = '/' + (params['stakeholder']?params['stakeholder']:'');
+      this.breadcrumbs[0].name = (params['stakeholder']?'dashboard':'home');
+    }));
+  }
+  
+  ngOnDestroy() {
+    this.subscriptions.forEach(subscription => {
+      if (subscription instanceof Subscription) {
+        subscription.unsubscribe();
+      }
+    });
+  }
+  
+  metaTags(title, description) {
+    const url = properties.domain + properties.baseLink + this.router.url;
+    this.seoService.createLinkForCanonicalURL(url, false);
+    this.meta.updateTag({content: url}, "property='og:url'");
+    this.meta.updateTag({content: description}, "name='description'");
+    this.meta.updateTag({content: description}, "property='og:description'");
+    this.meta.updateTag({content: title}, "property='og:title'");
+    this.title.setTitle(title);
+  }
+}

monitor/methodology/methodology.module.ts

@@ -2,11 +2,11 @@ import {NgModule} from "@angular/core";
 import {CommonModule} from "@angular/common";
 import {TerminologyComponent} from "./terminology.component";
 import {SeeHowItWorksComponent} from "./see-how-it-works.component";
+import {MethodolocigalApproachComponent} from "./methodological-approach.component";
 import {RouterModule} from "@angular/router";
 import {PreviousRouteRecorder} from "../../utils/piwik/previousRouteRecorder.guard";
 import {PageContentModule} from "../../dashboard/sharedComponents/page-content/page-content.module";
 import {HowModule} from "../how/how.module";
-import {TabsModule} from "../../utils/tabs/tabs.module";
 import {IconsModule} from "../../utils/icons/icons.module";
 import {IconsService} from "../../utils/icons/icons.service";
 import {graph} from "../../utils/icons/icons";
@@ -15,7 +15,7 @@ import {SliderTabsModule} from "../../sharedComponents/tabs/slider-tabs.module";
 import {HelperModule} from "../../utils/helper/helper.module";
 
 @NgModule({
-  declarations: [TerminologyComponent, SeeHowItWorksComponent],
+  declarations: [TerminologyComponent, SeeHowItWorksComponent, MethodolocigalApproachComponent],
   imports: [CommonModule, RouterModule.forChild([
     {
       path: '',
@@ -32,8 +32,13 @@ import {HelperModule} from "../../utils/helper/helper.module";
       component: SeeHowItWorksComponent,
       canDeactivate: [PreviousRouteRecorder]
     },
-  ]), PageContentModule, HowModule, SliderTabsModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
+		{
-  exports: [TerminologyComponent, SeeHowItWorksComponent]
+      path: 'methodological-approach',
+      component: MethodolocigalApproachComponent,
+			canDeactivate: [PreviousRouteRecorder]
+    }
+  ]), PageContentModule, HowModule, IconsModule, BreadcrumbsModule, SliderTabsModule, HelperModule],
+  exports: [TerminologyComponent, SeeHowItWorksComponent, MethodolocigalApproachComponent]
 })
 export class MethodologyModule {
   constructor(private iconsService: IconsService) {

sharedComponents/tabs/slider-tabs.component.ts

@@ -19,16 +19,22 @@ declare var UIkit;
   selector: 'slider-tabs',
   template: `
     <div #tabsElement class="uk-position-relative" [class.uk-slider]="position === 'horizontal'"
-         [ngClass]="background">
+         [ngClass]="customClass">
       <div [class.uk-slider-container-tabs]="position === 'horizontal'">
         <ul class="uk-tab" [class.uk-flex-nowrap]="position === 'horizontal'"
             [class.uk-slider-items]="position === 'horizontal'"
             [class.uk-tab-left]="position === 'left'" [class.uk-tab-right]="position === 'right'"
-            [attr.uk-tab]="type === 'static'?('connect: .' + connect):null">
+            [attr.uk-tab]="type === 'static'?('connect: .' + connect):null"
+						[ngClass]="'uk-flex-' + flexPosition">
           <ng-container *ngIf="type === 'scrollable'">
             <li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize" [class.uk-active]="tab.active">
               <a routerLink="./" [fragment]="tab.id">{{tab.title}}</a>
             </li>
+          </ng-container>
+					<ng-container *ngIf="type === 'static'">
+            <li *ngFor="let tab of tabs.toArray()" class="uk-text-capitalize">
+              <a>{{tab.title}}</a>
+            </li>
           </ng-container>
         </ul>
       </div>
@@ -62,11 +68,16 @@ export class SliderTabsComponent implements AfterViewInit, OnDestroy {
    * */
   @Input()
   public position: 'horizontal' | 'left' | 'right' = 'horizontal';
+	/**
+	 * Tabs flex position: Left is the default.
+	 * */
+	@Input()
+	public flexPosition: 'center' | 'left' | 'right' = 'left';
   /**
-   * Tabs background
+   * Tabs custom class
    * */
   @Input()
-  public background: string;
+  public customClass: string;
   @ContentChildren(SliderTabComponent) tabs: QueryList<SliderTabComponent>;
   @ViewChild('tabsElement') tabsElement: ElementRef;
   /**