From 2cc64b9e4eee58a494c4492baed0771d9d3ce04d Mon Sep 17 00:00:00 2001
From: "konstantina.galouni"
 <konstantina.galouni@d315682c-612b-4755-9ff5-7f18f6832af3>
Date: Thu, 12 Mar 2020 10:48:04 +0000
Subject: [PATCH] [Trunk | Library]: searchSorting.module -
 searchSorting.component.ts & searchResultsPerPage.component.ts &
 searchFilter.module.ts - searchFilter.component.html &
 browseStatistic.component.html - browseEntities.module.ts &
 citeThis.module.ts - citeThis.component.ts & metadataPreview.module.ts -
 metadataPreview.component.html & linkingGeneric.module.ts -
 linkingGeneric.component.html & displayClaims.module.ts -
 displayClaims.component.html & claimResultSearchForm.module.ts -
 claimResultSearchForm.component.html: 	Use material select (<select> to
 <mat-select>)

git-svn-id: https://svn.driver.research-infrastructures.eu/driver/dnet40/modules/uoa-services-library/trunk/ng-openaire-library/src/app@58235 d315682c-612b-4755-9ff5-7f18f6832af3
---
 .../claimResultSearchForm.component.html      | 14 ++--
 .../claimResultSearchForm.module.ts           |  3 +-
 .../displayClaims.component.html              | 10 +--
 .../displayClaims/displayClaims.module.ts     |  3 +-
 claims/linking/linkingGeneric.component.html  | 20 +++---
 claims/linking/linkingGeneric.module.ts       |  4 +-
 .../selected/metadataPreview.component.html   | 72 ++++++++++---------
 .../citeThis/citeThis.component.ts            | 10 +--
 .../landing-utils/citeThis/citeThis.module.ts |  3 +-
 .../searchUtils/browseEntities.module.ts      |  4 +-
 .../browseStatistic.component.html            | 11 +--
 .../searchUtils/searchFilter.component.html   | 13 ++--
 .../searchUtils/searchFilter.module.ts        |  3 +-
 .../searchResultsPerPage.component.ts         | 16 +++--
 .../searchResultsPerPage.module.ts            |  5 +-
 .../searchUtils/searchSorting.component.ts    | 30 ++++----
 .../searchUtils/searchSorting.module.ts       |  3 +-
 17 files changed, 130 insertions(+), 94 deletions(-)

diff --git a/claims/claim-utils/claimResultSearchForm.component.html b/claims/claim-utils/claimResultSearchForm.component.html
index c8f7f7ab..9c4c36ac 100644
--- a/claims/claim-utils/claimResultSearchForm.component.html
+++ b/claims/claim-utils/claimResultSearchForm.component.html
@@ -226,12 +226,14 @@
 
           <div class="dropdown">
 
-            <select [(ngModel)]="selectAuthorId" name="select_author"
-                    (ngModelChange)="getOrcidResultsById(selectAuthorId)" class="uk-select">
-              <option [value]="0">Choose another one:</option>
-              <option *ngFor=" let item of authors let i = index"
-                      [value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </option>
-            </select>
+            <mat-select [(ngModel)]="selectAuthorId" name="select_author"
+                    (ngModelChange)="getOrcidResultsById(selectAuthorId)" class="uk-select matSelection"
+                    [disableOptionCentering]="true"
+                    panelClass="matSelectionPanel">
+              <mat-option [value]="0">Choose another one:</mat-option>
+              <mat-option *ngFor=" let item of authors let i = index"
+                      [value]="authors[i].id">{{authors[i].authorGivenName}} {{authors[i].authorFamilyName}} : {{authors[i].id}} </mat-option>
+            </mat-select>
           </div>
 
         </div>
diff --git a/claims/claim-utils/claimResultSearchForm.module.ts b/claims/claim-utils/claimResultSearchForm.module.ts
index e579acc0..352d70aa 100644
--- a/claims/claim-utils/claimResultSearchForm.module.ts
+++ b/claims/claim-utils/claimResultSearchForm.module.ts
@@ -2,6 +2,7 @@ import { NgModule } from '@angular/core';
 
 import { SharedModule } from '../../shared/shared.module';
 import { CommonModule }        from '@angular/common';
+import { MatSelectModule } from "@angular/material";
 import {ClaimResultSearchFormComponent} from './claimResultSearchForm.component';
 import {ClaimResultsModule} from './claimResults.module';
 
@@ -17,7 +18,7 @@ import {SearchFilterModule} from '../../searchPages/searchUtils/searchFilter.mod
 
  @NgModule({
   imports: [SharedModule, CommonModule, SearchResearchResultsServiceModule, PagingModule, SearchCrossrefServiceModule,
-    SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule],
+    SearchDataciteServiceModule, HelperModule, SearchFilterModule, ClaimResultsModule, MatSelectModule],
   providers:[
      SearchOrcidService
   ],
diff --git a/claims/claim-utils/displayClaims/displayClaims.component.html b/claims/claim-utils/displayClaims/displayClaims.component.html
index 3d94c6f6..a0cc16e4 100644
--- a/claims/claim-utils/displayClaims/displayClaims.component.html
+++ b/claims/claim-utils/displayClaims/displayClaims.component.html
@@ -73,10 +73,12 @@
          data-uk-grid-margin="">
       <div class="uk-width-1-2 uk-margin-top uk-margin-bottom">
         <span> Results per page
-          <select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select" [(ngModel)]="size" name="select_size"
-                  (ngModelChange)="changeSize()" [disabled]="pageLoading">
-            <option *ngFor="let size of sizes" [value]="size">{{size}}</option>
-          </select>
+          <mat-select *ngIf="resultsNum>10" class="uk-width-1-5 uk-select matSelection" [(ngModel)]="size" name="select_size"
+                  (ngModelChange)="changeSize()" [disabled]="pageLoading"
+                  [disableOptionCentering]="true"
+                  panelClass="matSelectionPanel">
+            <mat-option *ngFor="let size of sizes" [value]="size">{{size}}</mat-option>
+          </mat-select>
         </span>
       </div>
       <div class="uk-grid">
diff --git a/claims/claim-utils/displayClaims/displayClaims.module.ts b/claims/claim-utils/displayClaims/displayClaims.module.ts
index 2f8850b5..ce4b738e 100644
--- a/claims/claim-utils/displayClaims/displayClaims.module.ts
+++ b/claims/claim-utils/displayClaims/displayClaims.module.ts
@@ -2,6 +2,7 @@ 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";
 import {ClaimServiceModule} from '../service/claimsService.module';
 import {DisplayClaimsComponent} from './displayClaims.component';
 import {LoadingModalModule} from '../../../utils/modal/loadingModal.module';
@@ -18,7 +19,7 @@ import {PiwikServiceModule} from "../../../utils/piwik/piwikService.module";
   imports: [
     CommonModule, FormsModule, RouterModule, ClaimServiceModule, LoadingModalModule, AlertModalModule,
     ClaimEntityFormatterModule, PagingModule, HelperModule, Schema2jsonldModule, SEOServiceModule, PiwikServiceModule,
-    IndexInfoServiceModule
+    IndexInfoServiceModule, MatSelectModule
 
   ],
   declarations: [
diff --git a/claims/linking/linkingGeneric.component.html b/claims/linking/linkingGeneric.component.html
index cde9de23..3512ca0b 100644
--- a/claims/linking/linkingGeneric.component.html
+++ b/claims/linking/linkingGeneric.component.html
@@ -27,15 +27,17 @@
                       <div class="uk-h5">
                            <span *ngIf="showOptions.show!='source' && showOptions.show != 'claim'">
                              <span>LINK TO </span>
-                             <select [(ngModel)]="showOptions.show" class="uk-select uk-width-auto  uk-text-bold "
-                                     *ngIf="showOptions.linkToEntities.length > 1">
-                               <option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
-                                       value="project">PROJECTS</option>
-                               <option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
-                                 RESULTS</option>
-                               <option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
-                               </option>
-                             </select>
+                             <mat-select [(ngModel)]="showOptions.show" class="uk-select uk-width-auto  uk-text-bold matSelection"
+                                     *ngIf="showOptions.linkToEntities.length > 1"
+                                     [disableOptionCentering]="true"
+                                     panelClass="matSelectionPanel">
+                               <mat-option *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
+                                       value="project">PROJECTS</mat-option>
+                               <mat-option *ngIf="showOptions.linkToEntities.indexOf('result')!=-1 " value="result">RESEARCH
+                                 RESULTS</mat-option>
+                               <mat-option *ngIf="showOptions.linkToEntities.indexOf('context')!=-1 " value="context">COMMUNITIES
+                               </mat-option>
+                             </mat-select>
                              <span class=" uk-width-auto  uk-text-bold "
                                    *ngIf="showOptions.linkToEntities.length ==1">
                                <span *ngIf="showOptions.linkToEntities.indexOf('project')!=-1 "
diff --git a/claims/linking/linkingGeneric.module.ts b/claims/linking/linkingGeneric.module.ts
index 1e588150..37be3839 100644
--- a/claims/linking/linkingGeneric.module.ts
+++ b/claims/linking/linkingGeneric.module.ts
@@ -1,4 +1,5 @@
 import { NgModule } from '@angular/core';
+import { MatSelectModule } from "@angular/material";
 
 import { SharedModule } from '../../shared/shared.module';
 import {SelectedProjectsModule} from './selected/selectedProjects.module';
@@ -29,7 +30,8 @@ import {PiwikServiceModule} from "../../utils/piwik/piwikService.module";
      StartOverModule,
     ClaimContextSearchFormModule, ClaimProjectsSearchFormModule, BulkClaimModule, ClaimResultSearchFormModule,
     HelperModule, Schema2jsonldModule, SEOServiceModule, MetadataPreviewModule, ClaimEntitiesMetadataModule, AlertModalModule,
-    PiwikServiceModule
+    PiwikServiceModule,
+    MatSelectModule
   ],
   providers:[LoginGuard, PreviousRouteRecorder, IsRouteEnabled],
   declarations: [
diff --git a/claims/linking/selected/metadataPreview.component.html b/claims/linking/selected/metadataPreview.component.html
index 74b1ce4d..aa03a890 100644
--- a/claims/linking/selected/metadataPreview.component.html
+++ b/claims/linking/selected/metadataPreview.component.html
@@ -113,29 +113,33 @@
                              class="uk-grid uk-margin-remove-top uk-text-small">
                           <div class="uk-width-1-2">
                             <span class="uk-text-muted">Type </span>
-                            <select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
-                                    class="uk-select uk-width-small">
-                              <option [value]="'publication'"
+                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
+                                    class="uk-select uk-width-small matSelection"
+                                    [disableOptionCentering]="true"
+                                    panelClass="entitiesSelectionPanel">
+                              <mat-option [value]="'publication'"
                                       (click)="onTypeChanged('publication',entity, false)">Publication
-                              </option>
-                              <option [value]="'dataset'"
+                              </mat-option>
+                              <mat-option [value]="'dataset'"
                                       (click)="onTypeChanged('dataset',entity, false)">Research data
-                              </option>
-                              <option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
-                              </option>
-                              <option [value]="'other'"
+                              </mat-option>
+                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
+                              </mat-option>
+                              <mat-option [value]="'other'"
                                       (click)="onTypeChanged('other',entity, false)">Other research product
-                              </option>
-                            </select>
+                              </mat-option>
+                            </mat-select>
                           </div>
                           <div class="uk-width-1-2 uk-padding-remove-left ">
                             <div class="uk-grid">
                               <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
-                              <select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
-                                      class="uk-select uk-width-small uk-padding-remove-left uk-margin-left">
-                                <option *ngFor="let type of accessTypes" [value]="type"
-                                        (click)="accessRightsTypeChanged(type,entity, false)">{{type}}</option>
-                              </select>
+                              <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
+                                      class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
+                                      [disableOptionCentering]="true"
+                                      panelClass="matSelectionPanel">
+                                <mat-option *ngFor="let type of accessTypes" [value]="type"
+                                        (click)="accessRightsTypeChanged(type,entity, false)">{{type}}</mat-option>
+                              </mat-select>
                               <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
                                 <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
                                        (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_source']"
@@ -253,29 +257,33 @@
                              class="uk-grid uk-text-small uk-margin-remove-top">
                           <div class="uk-width-1-2">
                             <span class="uk-text-muted">Type </span>
-                            <select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
-                                    class="uk-select uk-width-small">
-                              <option [value]="'publication'"
+                            <mat-select [(ngModel)]="entity.type" name="{{'select_type_'+entity.id}}"
+                                    class="uk-select uk-width-small matSelection"
+                                    [disableOptionCentering]="true"
+                                    panelClass="matSelectionPanel">
+                              <mat-option [value]="'publication'"
                                       (click)="onTypeChanged('publication',entity, false)">Publication
-                              </option>
-                              <option [value]="'dataset'"
+                              </mat-option>
+                              <mat-option [value]="'dataset'"
                                       (click)="onTypeChanged('dataset',entity, false)">Research data
-                              </option>
-                              <option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
-                              </option>
-                              <option [value]="'other'"
+                              </mat-option>
+                              <mat-option [value]="'software'" (click)="onTypeChanged('software',entity, false)">Software
+                              </mat-option>
+                              <mat-option [value]="'other'"
                                       (click)="onTypeChanged('other',entity, false)">Other research product
-                              </option>
-                            </select>
+                              </mat-option>
+                            </mat-select>
                           </div>
                           <div class="uk-width-1-2 uk-padding-remove-left ">
                             <div class="uk-grid">
                               <span class="uk-text-muted uk-margin-small-top uk-padding-remove-left">Access mode</span>
-                              <select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
-                                      class="uk-select uk-width-small uk-padding-remove-left uk-margin-left">
-                                <option *ngFor="let type of accessTypes" [value]="type"
-                                        (click)="accessRightsTypeChanged(type,entity, true)">{{type}}</option>
-                              </select>
+                              <mat-select [(ngModel)]="entity.result.accessRights" name="{{'select_rights_'+entity.id}}"
+                                      class="uk-select uk-width-small uk-padding-remove-left uk-margin-left matSelection"
+                                      [disableOptionCentering]="true"
+                                      panelClass="matSelectionPanel">
+                                <mat-option *ngFor="let type of accessTypes" [value]="type"
+                                        (click)="accessRightsTypeChanged(type,entity, true)">{{type}}</mat-option>
+                              </mat-select>
                               <mat-form-field *ngIf="entity.result.accessRights== 'EMBARGO'">
                                 <input matInput [matDatepicker]="picker" placeholder="Choose embargo end date"
                                        (click)="picker.open()" [ngModel]="embargoEndDates[entity.id+'_result']"
diff --git a/landingPages/landing-utils/citeThis/citeThis.component.ts b/landingPages/landing-utils/citeThis/citeThis.component.ts
index 25124a15..64c24786 100644
--- a/landingPages/landing-utils/citeThis/citeThis.component.ts
+++ b/landingPages/landing-utils/citeThis/citeThis.component.ts
@@ -13,10 +13,12 @@ declare var Sys:any;
     <dl class="uk-description-list-line">
       <!--dt class="title">Cite this {{type}}</dt-->
       <dd class="line"  >
-        <select class="select" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()">
-          <option   value="0">select a citation style</option>
-          <option *ngFor=" let  style of this.citation.templates let i = index" [value]="style">{{style}}</option>
-        </select>
+        <mat-select class="select matSelection" id="citations" name="citeselect" [(ngModel)]="selectedStyle" (ngModelChange)="styleChanged()"
+                    [disableOptionCentering]="true"
+                    panelClass="matSelectionPanel">
+          <mat-option   value="0">select a citation style</mat-option>
+          <mat-option *ngFor=" let  style of this.citation.templates let i = index" [value]="style">{{style}}</mat-option>
+        </mat-select>
         <div *ngIf="selectedStyle!='0'" id="citation" class="box-content uk-padding-small uk-overflow-auto" [innerHTML]=citationText></div>
       </dd>
     </dl>
diff --git a/landingPages/landing-utils/citeThis/citeThis.module.ts b/landingPages/landing-utils/citeThis/citeThis.module.ts
index 4a14a36a..3ea2ffed 100644
--- a/landingPages/landing-utils/citeThis/citeThis.module.ts
+++ b/landingPages/landing-utils/citeThis/citeThis.module.ts
@@ -3,11 +3,12 @@ import { CommonModule }        from '@angular/common';
 import { FormsModule }         from '@angular/forms';
 
  import {CiteThisComponent} from './citeThis.component';
+import {MatSelectModule} from "@angular/material";
 
 @NgModule({
   imports: [
 
-    CommonModule, FormsModule
+    CommonModule, FormsModule, MatSelectModule
    ],
   declarations: [
      CiteThisComponent
diff --git a/searchPages/searchUtils/browseEntities.module.ts b/searchPages/searchUtils/browseEntities.module.ts
index 2d8d3cda..2f8313d1 100644
--- a/searchPages/searchUtils/browseEntities.module.ts
+++ b/searchPages/searchUtils/browseEntities.module.ts
@@ -2,6 +2,7 @@ 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";
 
 import {RefineFieldResultsServiceModule} from '../../services/refineFieldResultsService.module';
 
@@ -13,7 +14,8 @@ import {ErrorMessagesModule} from '../../utils/errorMessages.module';
 @NgModule({
   imports: [
     CommonModule, FormsModule, ErrorMessagesModule,
-    RefineFieldResultsServiceModule, RouterModule
+    RefineFieldResultsServiceModule, RouterModule,
+    MatSelectModule
   ],
   declarations: [
       BrowseEntitiesComponent,
diff --git a/searchPages/searchUtils/browseStatistic.component.html b/searchPages/searchUtils/browseStatistic.component.html
index 25497fe0..e6b756ed 100644
--- a/searchPages/searchUtils/browseStatistic.component.html
+++ b/searchPages/searchUtils/browseStatistic.component.html
@@ -46,10 +46,13 @@
           <h4 class="tm-article-subtitle">{{filter.title}}</h4>
           <div class="uk-grid uk-margin-left uk-margin-right">
             <input   class="uk-input   uk-margin-small-bottom uk-width-1-2  " name="filter-keyword"  placeholder="Search for {{filter.title}}" type="text" [(ngModel)]="keyword">
-            <select   [(ngModel)]="sortBy"      class="uk-select  uk-margin-small-bottom uk-width-1-2 uk-padding-remove"  name="select_order"   >
-              <option  value="num"  >Sort by results number</option>
-              <option  value="name"  >Sort by name</option>
-            </select>
+            <mat-select   [(ngModel)]="sortBy"      class="uk-select  uk-margin-small-bottom uk-width-1-2 uk-padding-remove matSelection"
+                          name="select_order"
+                          [disableOptionCentering]="true"
+                          panelClass="matSelectionPanel">
+              <mat-option  value="num"  >Sort by results number</mat-option>
+              <mat-option  value="name"  >Sort by name</mat-option>
+            </mat-select>
           </div>
 
           <ul *ngIf="filter.values.length > 0" class="uk-list uk-list-line   browseFilters">
diff --git a/searchPages/searchUtils/searchFilter.component.html b/searchPages/searchUtils/searchFilter.component.html
index 3f3f32f0..6ebeb9b0 100644
--- a/searchPages/searchUtils/searchFilter.component.html
+++ b/searchPages/searchUtils/searchFilter.component.html
@@ -67,12 +67,13 @@
 
               <span *ngIf = "showResultCount === true" class="uk-width-5-6@m uk-width-1-1@s uk-align-right uk-margin-small-bottom">
                 <span class="uk-width-1-4 uk-text-muted"> Sort by:</span>
-                <select [(ngModel)]="sortBy"
-                        class="uk-select uk-width-3-4@m uk-width-auto"
-                        id="form-horizontal-select" name="select_order">
-                  <option  value="num">Results number</option>
-                  <option  value="name">Name</option>
-                </select>
+                <mat-select [(ngModel)]="sortBy"
+                        class="uk-select uk-width-3-4@m uk-width-auto matSelection"
+                        id="form-horizontal-select" name="select_order"
+                        [disableOptionCentering]="true" panelClass="matSelectionPanel">
+                  <mat-option  value="num">Results number</mat-option>
+                  <mat-option  value="name">Name</mat-option>
+                </mat-select>
               </span>
             </div>
 
diff --git a/searchPages/searchUtils/searchFilter.module.ts b/searchPages/searchUtils/searchFilter.module.ts
index 3cc6792b..cb1dbcd5 100644
--- a/searchPages/searchUtils/searchFilter.module.ts
+++ b/searchPages/searchUtils/searchFilter.module.ts
@@ -5,10 +5,11 @@ import { FormsModule }         from '@angular/forms';
 import {SearchFilterComponent} from './searchFilter.component';
 import{SearchFilterModalComponent} from './searchFilterModal.component';
 import {ModalModule} from '../../utils/modal/modal.module';
+import {MatSelectModule} from "@angular/material";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, ModalModule
+    CommonModule, FormsModule, ModalModule, MatSelectModule
   ],
   declarations: [
     SearchFilterComponent, SearchFilterModalComponent
diff --git a/searchPages/searchUtils/searchResultsPerPage.component.ts b/searchPages/searchUtils/searchResultsPerPage.component.ts
index a93b87ad..d717be38 100644
--- a/searchPages/searchUtils/searchResultsPerPage.component.ts
+++ b/searchPages/searchUtils/searchResultsPerPage.component.ts
@@ -4,13 +4,15 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
     selector: 'search-results-per-page',
     template: `        
     <span> Results per page:</span>
-    <select class="uk-select uk-width-auto uk-text-bold" id="form-horizontal-select" name="select_results_per_page"
-            [(ngModel)]="size" (ngModelChange)="sizeChanged()">
-      <option [ngValue]="5" > 5</option>
-      <option [ngValue]="10">10</option>
-      <option [ngValue]="20">20</option>
-      <option [ngValue]="50">50</option>
-    </select>
+    <mat-select class="uk-select uk-width-auto uk-text-bold matSelection" id="form-horizontal-select" name="select_results_per_page"
+                [(ngModel)]="size" (ngModelChange)="sizeChanged()"
+                [disableOptionCentering]="true"
+                panelClass="matSelectionPanel">
+      <mat-option [value]="5" > 5</mat-option>
+      <mat-option [value]="10">10</mat-option>
+      <mat-option [value]="20">20</mat-option>
+      <mat-option [value]="50">50</mat-option>
+    </mat-select>
     `
 })
 
diff --git a/searchPages/searchUtils/searchResultsPerPage.module.ts b/searchPages/searchUtils/searchResultsPerPage.module.ts
index 48294e75..eabf2971 100644
--- a/searchPages/searchUtils/searchResultsPerPage.module.ts
+++ b/searchPages/searchUtils/searchResultsPerPage.module.ts
@@ -3,11 +3,12 @@ import { CommonModule }        from '@angular/common';
 import { FormsModule }         from '@angular/forms';
 import { RouterModule }       from '@angular/router';
 
-import{SearchResultsPerPageComponent} from './searchResultsPerPage.component';
+import {SearchResultsPerPageComponent} from './searchResultsPerPage.component';
+import {MatSelectModule} from "@angular/material";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule
+    CommonModule, FormsModule, RouterModule, MatSelectModule
   ],
   declarations: [
     SearchResultsPerPageComponent
diff --git a/searchPages/searchUtils/searchSorting.component.ts b/searchPages/searchUtils/searchSorting.component.ts
index 74efb6a5..266db3e0 100644
--- a/searchPages/searchUtils/searchSorting.component.ts
+++ b/searchPages/searchUtils/searchSorting.component.ts
@@ -4,22 +4,26 @@ import {Component, Input, Output, EventEmitter} from '@angular/core';
     selector: 'search-sorting',
     template: `        
       <span class="uk-width-1-4"> Sort by:</span>
-      <select *ngIf="(entityType != 'community' && entityType != 'funder' )" 
-              class="uk-select uk-width-auto uk-text-bold" 
+      <mat-select *ngIf="(entityType != 'community' && entityType != 'funder' )" 
+              class="uk-select uk-width-auto uk-text-bold matSelection" 
               id="form-horizontal-select" name="select_results_per_page"
+              [disableOptionCentering]="true"
+              panelClass="matSelectionPanel"
               [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">
-              <option value="">Relevance</option>
-              <option value="resultdateofacceptance,descending">Date (most recent)</option>
-              <option value="resultdateofacceptance,ascending">Date (least recent)</option>
-      </select>
-      <select *ngIf="(entityType == 'community' || entityType == 'funder')" 
-              class="uk-select uk-width-auto uk-text-bold" 
+              <mat-option value="">Relevance</mat-option>
+              <mat-option value="resultdateofacceptance,descending">Date (most recent)</mat-option>
+              <mat-option value="resultdateofacceptance,ascending">Date (least recent)</mat-option>
+      </mat-select>
+      <mat-select *ngIf="(entityType == 'community' || entityType == 'funder')" 
+              class="uk-select uk-width-auto uk-text-bold matSelection" 
               id="form-horizontal-select" name="select_results_per_page"
-              [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()">
-              <option value="">Title</option>
-              <option value="creationdate,descending">Creation Date (most recent)</option>
-              <option value="creationdate,ascending">Creation Date (least recent)</option>
-      </select>
+              [(ngModel)]="sortBy" (ngModelChange)="sortByChanged()"
+              [disableOptionCentering]="true"
+              panelClass="matSelectionPanel">
+              <mat-option value="">Title</mat-option>
+              <mat-option value="creationdate,descending">Creation Date (most recent)</mat-option>
+              <mat-option value="creationdate,ascending">Creation Date (least recent)</mat-option>
+      </mat-select>
     `
 })
 
diff --git a/searchPages/searchUtils/searchSorting.module.ts b/searchPages/searchUtils/searchSorting.module.ts
index f29aeaca..2294115a 100644
--- a/searchPages/searchUtils/searchSorting.module.ts
+++ b/searchPages/searchUtils/searchSorting.module.ts
@@ -4,10 +4,11 @@ import { FormsModule }         from '@angular/forms';
 import { RouterModule }       from '@angular/router';
 
 import{SearchSortingComponent} from './searchSorting.component';
+import {MatSelectModule} from "@angular/material";
 
 @NgModule({
   imports: [
-    CommonModule, FormsModule, RouterModule
+    CommonModule, FormsModule, RouterModule, MatSelectModule
   ],
   declarations: [
     SearchSortingComponent