#150 Moved list,grid and object-collection to shared package

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.html

@@ -0,0 +1,12 @@
+<div class="card">
+  <a [routerLink]="['/collections/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/collections/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+
+  </div>
+</div>

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';

src/app/shared/object-grid/collection-grid-element/collection-grid-element.component.ts

@@ -0,0 +1,16 @@
+import { Component, Inject } from '@angular/core';
+
+import { Collection } from '../../../core/shared/collection.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../../+search-page/search-options.model';
+
+
+@Component({
+  selector: 'ds-collection-grid-element',
+  styleUrls: ['./collection-grid-element.component.scss'],
+  templateUrl: './collection-grid-element.component.html'
+})
+
+@renderElementsFor(Collection, ViewMode.Grid)
+export class CollectionGridElementComponent extends ObjectGridElementComponent<Collection> {}

src/app/shared/object-grid/community-grid-element/community-grid-element.component.html

@@ -0,0 +1,12 @@
+<div class="card">
+
+  <a [routerLink]="['/communities/' + object.id]"class="card-img-top">
+    <ds-comcol-page-logo [logo]="object.logo">
+    </ds-comcol-page-logo>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.name}}</h4>
+    <p *ngIf="object.shortDescription" class="card-text">{{object.shortDescription}}</p>
+    <a [routerLink]="['/communities/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>

src/app/shared/object-grid/community-grid-element/community-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';

src/app/shared/object-grid/community-grid-element/community-grid-element.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Community } from '../../../core/shared/community.model';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ViewMode } from '../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-community-grid-element',
+  styleUrls: ['./community-grid-element.component.scss'],
+  templateUrl: './community-grid-element.component.html'
+})
+
+@renderElementsFor(Community, ViewMode.Grid)
+export class CommunityGridElementComponent extends ObjectGridElementComponent<Community> {}

src/app/shared/object-grid/grid-card-styling.scss

@@ -0,0 +1,45 @@
+@import '../../../styles/custom_variables';
+
+.card-title{
+  line-height: $line-height-base;
+  height:$headings-line-height;
+  font-size:$headings-font-size;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.card-text {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  line-height: $line-height-base;
+  margin-bottom:$card-block-margin-base*2;
+}
+.card-text.item-authors {
+  height: $line-height-base;
+}
+.card-text.item-abstract {
+  height: $content-line-height;
+}
+
+.viewButton{
+  display:table;
+  margin:auto;
+  width: $card-button-width;
+}
+
+.card{
+  margin-bottom: $card-block-margin-base *3;
+  height: $card-height-percentage;
+}
+
+.card-img-top ::ng-deep  img
+{
+  height: $card-thumbnail-height;
+  width: 100%;
+  object-fit: cover;
+}
+
+.card-block{
+  margin: $card-block-margin-base;
+}
+

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.html

@@ -0,0 +1,4 @@
+<div class="thumbnail">
+  <img *ngIf="thumbnail" [src]="thumbnail.content" (error)="errorHandler($event)"/>
+  <img *ngIf="!thumbnail" [src]="holderSource | dsSafeUrl"/>
+</div>

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.scss

@@ -0,0 +1 @@
+@import '../../../../styles/variables';

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.spec.ts

@@ -0,0 +1,42 @@
+import { ComponentFixture, TestBed, async } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { DebugElement } from '@angular/core';
+
+import { GridThumbnailComponent } from './grid-thumbnail.component';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+import { SafeUrlPipe } from '../../utils/safe-url-pipe';
+
+describe('ThumbnailComponent', () => {
+  let comp: GridThumbnailComponent;
+  let fixture: ComponentFixture<GridThumbnailComponent>;
+  let de: DebugElement;
+  let el: HTMLElement;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [GridThumbnailComponent, SafeUrlPipe]
+    }).compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(GridThumbnailComponent);
+    comp = fixture.componentInstance; // BannerComponent test instance
+    de = fixture.debugElement.query(By.css('div.thumbnail'));
+    el = de.nativeElement;
+  });
+
+  it('should display image', () => {
+    comp.thumbnail = new Bitstream();
+    comp.thumbnail.content = 'test.url';
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.thumbnail.content);
+  });
+
+  it('should display placeholder', () => {
+    fixture.detectChanges();
+    const image: HTMLElement = de.query(By.css('img')).nativeElement;
+    expect(image.getAttribute('src')).toBe(comp.holderSource);
+  });
+
+});

src/app/shared/object-grid/grid-thumbnail/grid-thumbnail.component.ts

@@ -0,0 +1,30 @@
+import { Component, Input } from '@angular/core';
+import { Bitstream } from '../../../core/shared/bitstream.model';
+
+/**
+ * This component renders a given Bitstream as a thumbnail.
+ * One input parameter of type Bitstream is expected.
+ * If no Bitstream is provided, a holderjs image will be rendered instead.
+ */
+
+@Component({
+  selector: 'ds-grid-thumbnail',
+  styleUrls: ['./grid-thumbnail.component.scss'],
+  templateUrl: './grid-thumbnail.component.html'
+})
+export class GridThumbnailComponent {
+
+  @Input() thumbnail: Bitstream;
+
+  data: any = {};
+
+  /**
+   * The default 'holder.js' image
+   */
+  holderSource = 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9InllcyI/PjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iMjYwIiBoZWlnaHQ9IjE4MCIgdmlld0JveD0iMCAwIDI2MCAxODAiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjwhLS0KU291cmNlIFVSTDogaG9sZGVyLmpzLzEwMCV4MTgwL3RleHQ6Tm8gVGh1bWJuYWlsCkNyZWF0ZWQgd2l0aCBIb2xkZXIuanMgMi42LjAuCkxlYXJuIG1vcmUgYXQgaHR0cDovL2hvbGRlcmpzLmNvbQooYykgMjAxMi0yMDE1IEl2YW4gTWFsb3BpbnNreSAtIGh0dHA6Ly9pbXNreS5jbwotLT48ZGVmcz48c3R5bGUgdHlwZT0idGV4dC9jc3MiPjwhW0NEQVRBWyNob2xkZXJfMTVmNzJmMmFlMGIgdGV4dCB7IGZpbGw6I0FBQUFBQTtmb250LXdlaWdodDpib2xkO2ZvbnQtZmFtaWx5OkFyaWFsLCBIZWx2ZXRpY2EsIE9wZW4gU2Fucywgc2Fucy1zZXJpZiwgbW9ub3NwYWNlO2ZvbnQtc2l6ZToxM3B0IH0gXV0+PC9zdHlsZT48L2RlZnM+PGcgaWQ9ImhvbGRlcl8xNWY3MmYyYWUwYiI+PHJlY3Qgd2lkdGg9IjI2MCIgaGVpZ2h0PSIxODAiIGZpbGw9IiNFRUVFRUUiLz48Zz48dGV4dCB4PSI3Mi4yNDIxODc1IiB5PSI5NiI+Tm8gVGh1bWJuYWlsPC90ZXh0PjwvZz48L2c+PC9zdmc+';
+
+  errorHandler(event) {
+    event.currentTarget.src = this.holderSource;
+  }
+
+}

src/app/shared/object-grid/item-grid-element/item-grid-element.component.html

@@ -0,0 +1,21 @@
+<div class="card">
+
+  <a [routerLink]="['/items/' + object.id]" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="object.getThumbnail()">
+    </ds-grid-thumbnail>
+  </a>
+  <div class="card-block">
+    <h4 class="card-title">{{object.findMetadata('dc.title')}}</h4>
+
+    <p *ngIf="object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']);" class="item-authors card-text text-muted">
+        <span *ngFor="let authorMd of object.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let last=last;">{{authorMd.value}}
+            <span *ngIf="!last">; </span>
+        </span>
+      <span *ngIf="object.findMetadata('dc.date.issued')">{{object.findMetadata("dc.date.issued")}}</span>
+    </p>
+
+    <p *ngIf="object.findMetadata('dc.description.abstract')" class="item-abstract card-text">{{object.findMetadata("dc.description.abstract") | dsTruncate:[200] }}</p>
+
+    <a [routerLink]="['/items/' + object.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+</div>

src/app/shared/object-grid/item-grid-element/item-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';

src/app/shared/object-grid/item-grid-element/item-grid-element.component.spec.ts

@@ -0,0 +1,6 @@
+import { ItemGridElementComponent } from './item-grid-element.component';
+
+describe('ItemGridElementComponent',()=>{
+  let itemGridElementComponent: ItemGridElementComponent;
+
+})

src/app/shared/object-grid/item-grid-element/item-grid-element.component.ts

@@ -0,0 +1,15 @@
+import { Component, Input, Inject } from '@angular/core';
+
+import { Item } from '../../../core/shared/item.model';
+import { renderElementsFor} from '../../object-collection/shared/dso-element-decorator';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { ViewMode } from '../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-item-grid-element',
+  styleUrls: ['./item-grid-element.component.scss'],
+  templateUrl: './item-grid-element.component.html'
+})
+
+@renderElementsFor(Item, ViewMode.Grid)
+export class ItemGridElementComponent extends ObjectGridElementComponent<Item> {}

src/app/shared/object-grid/object-grid-element/object-grid-element.component.scss

@@ -0,0 +1,6 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';
+:host {
+  display: block;
+  margin-bottom: $spacer;
+}

src/app/shared/object-grid/object-grid-element/object-grid-element.component.ts

@@ -0,0 +1,14 @@
+import { Component, Inject } from '@angular/core';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-object-grid-element',
+  styleUrls: ['./object-grid-element.component.scss'],
+  templateUrl: './object-grid-element.component.html'
+})
+export class ObjectGridElementComponent <T extends ListableObject> {
+  object: T;
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    this.object = gridable as T;
+  }
+}

src/app/shared/object-grid/object-grid.component.html

@@ -0,0 +1,21 @@
+<ds-pagination
+  [paginationOptions]="config"
+  [pageInfoState]="pageInfo"
+  [collectionSize]="(pageInfo | async)?.totalElements"
+  [sortOptions]="sortConfig"
+  [hideGear]="hideGear"
+  [hidePagerWhenSinglePage]="hidePagerWhenSinglePage"
+  (pageChange)="onPageChange($event)"
+  (pageSizeChange)="onPageSizeChange($event)"
+  (sortDirectionChange)="onSortDirectionChange($event)"
+  (sortFieldChange)="onSortDirectionChange($event)"
+  (paginationChange)="onPaginationChange($event)">
+    <div class="row" *ngIf="objects.hasSucceeded | async" @fadeIn>
+        <div class="col-lg-4 col-sm-4 col-xs-12 "
+          *ngFor="let object of (objects.payload | async) | paginate: { itemsPerPage: (pageInfo | async)?.elementsPerPage, currentPage: (pageInfo | async)?.currentPage, totalItems: (pageInfo | async)?.totalElements }">
+          <ds-wrapper-grid-element [object]="object"></ds-wrapper-grid-element>
+      </div>
+    </div>
+  <ds-error *ngIf="objects.hasFailed | async" message="{{'error.objects' | translate}}"></ds-error>
+  <ds-loading *ngIf="objects.isLoading | async" message="{{'loading.objects' | translate}}"></ds-loading>
+</ds-pagination>

src/app/shared/object-grid/object-grid.component.scss

@@ -0,0 +1 @@
+@import '../../../styles/variables';

src/app/shared/object-grid/object-grid.component.ts

@@ -0,0 +1,104 @@
+import {
+  Component, EventEmitter,
+  Input,
+  ViewEncapsulation,
+  ChangeDetectionStrategy,
+  OnInit,
+  Output, SimpleChanges, OnChanges, ChangeDetectorRef, DoCheck
+} from '@angular/core';
+import { Observable } from 'rxjs/Observable';
+
+import { RemoteData } from '../../core/data/remote-data';
+import { PageInfo } from '../../core/shared/page-info.model';
+
+import { PaginationComponentOptions } from '../pagination/pagination-component-options.model';
+
+import { SortOptions, SortDirection } from '../../core/cache/models/sort-options.model';
+import { fadeIn } from '../animations/fade';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+@Component({
+  changeDetection: ChangeDetectionStrategy.Default,
+  encapsulation: ViewEncapsulation.Emulated,
+  selector: 'ds-object-grid',
+  styleUrls: [ './object-grid.component.scss' ],
+  templateUrl: './object-grid.component.html',
+  animations: [fadeIn]
+})
+
+export class ObjectGridComponent implements OnChanges, OnInit  {
+
+  @Input() objects: RemoteData<ListableObject[]>;
+  @Input() config: PaginationComponentOptions;
+  @Input() sortConfig: SortOptions;
+  @Input() hideGear = false;
+  @Input() hidePagerWhenSinglePage = true;
+  pageInfo: Observable<PageInfo>;
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() pageChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the page wsize is changed.
+   * Event's payload equals to the newly selected page size.
+   */
+  @Output() pageSizeChange: EventEmitter<number> = new EventEmitter<number>();
+
+  /**
+   * An event fired when the sort direction is changed.
+   * Event's payload equals to the newly selected sort direction.
+   */
+  @Output() sortDirectionChange: EventEmitter<SortDirection> = new EventEmitter<SortDirection>();
+
+  @Output() paginationChange: EventEmitter<SortDirection> = new EventEmitter<any>();
+
+  /**
+   * An event fired when the sort field is changed.
+   * Event's payload equals to the newly selected sort field.
+   */
+  @Output() sortFieldChange: EventEmitter<string> = new EventEmitter<string>();
+  data: any = {};
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes.objects && !changes.objects.isFirstChange()) {
+      this.pageInfo = this.objects.pageInfo;
+    }
+  }
+
+  ngOnInit(): void {
+    this.pageInfo = this.objects.pageInfo;
+  }
+
+  /**
+   * @param route
+   *    Route is a singleton service provided by Angular.
+   * @param router
+   *    Router is a singleton service provided by Angular.
+   */
+  constructor(private cdRef: ChangeDetectorRef) {
+  }
+
+  onPageChange(event) {
+    this.pageChange.emit(event);
+  }
+
+  onPageSizeChange(event) {
+    this.pageSizeChange.emit(event);
+  }
+
+  onSortDirectionChange(event) {
+    this.sortDirectionChange.emit(event);
+  }
+
+  onSortFieldChange(event) {
+    this.sortFieldChange.emit(event);
+  }
+
+  onPaginationChange(event) {
+    this.paginationChange.emit(event);
+  }
+
+}

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.html

@@ -0,0 +1,2 @@
+<a [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
+<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result-grid-element.component.ts

@@ -0,0 +1,17 @@
+import { Component } from '@angular/core';
+
+import { renderElementsFor} from '../../../object-collection/shared/dso-element-decorator';
+
+import { CollectionSearchResult } from './collection-search-result.model';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Collection } from '../../../../core/shared/collection.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-collection-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'collection-search-result-grid-element.component.scss'],
+  templateUrl: 'collection-search-result-grid-element.component.html'
+})
+
+@renderElementsFor(CollectionSearchResult, ViewMode.Grid)
+export class CollectionSearchResultGridElementComponent extends SearchResultGridElementComponent<CollectionSearchResult, Collection> {}

src/app/shared/object-grid/search-result-grid-element/collection-search-result/collection-search-result.model.ts

@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../../+search-page/search-result.model';
+import { Collection } from '../../../../core/shared/collection.model';
+
+export class CollectionSearchResult extends SearchResult<Collection> {
+}

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.html

@@ -0,0 +1,2 @@
+<a [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="getFirstValue('dc.title')"></a>
+<div *ngIf="dso.shortDescription" class="text-muted" [innerHTML]="getFirstValue('dc.description.abstract')"></div>

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result-grid-element.component.ts

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+
+import { CommunitySearchResult } from './community-search-result.model';
+import { Community } from '../../../../core/shared/community.model';
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { ViewMode } from '../../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-community-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'community-search-result-grid-element.component.scss'],
+  templateUrl: 'community-search-result-grid-element.component.html'
+})
+
+@renderElementsFor(CommunitySearchResult, ViewMode.Grid)
+export class CommunitySearchResultGridElementComponent extends SearchResultGridElementComponent<CommunitySearchResult, Community> {
+
+}

src/app/shared/object-grid/search-result-grid-element/community-search-result/community-search-result.model.ts

@@ -0,0 +1,5 @@
+import { SearchResult } from '../../../../+search-page/search-result.model';
+import { Community } from '../../../../core/shared/community.model';
+
+export class CommunitySearchResult extends SearchResult<Community> {
+}

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.html

@@ -0,0 +1,32 @@
+<div class="card">
+  <a [routerLink]="['/items/' + dso.id]" class="card-img-top">
+    <ds-grid-thumbnail [thumbnail]="dso.getThumbnail()">
+    </ds-grid-thumbnail>
+  </a>
+  <div class="card-block">
+    <p class="card-title" [innerHTML]="dso.findMetadata('dc.title')"></p>
+
+    <p *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*'])"
+       class="item-authors card-text text-muted">
+        <span
+          *ngFor="let authorMd of dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']); let first=first;">
+          <span *ngIf="first" [innerHTML]="authorMd.value">
+          <span
+            *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">, ...</span>
+          </span>
+        </span>
+      <span *ngIf="dso.findMetadata('dc.date.issued')"
+            class="item-list-date">
+      <span *ngIf="dso.filterMetadata(['dc.contributor.author', 'dc.creator', 'dc.contributor.*']).length>1">,</span>
+      {{dso.findMetadata("dc.date.issued")}}</span>
+
+
+    </p>
+    <p class="item-abstract card-text" [innerHTML]="getFirstValue('dc.description.abstract') | dsTruncate:[200]">
+    </p>
+
+    <a [routerLink]="['/items/' + dso.id]" class="lead btn btn-primary viewButton">View</a>
+  </div>
+
+</div>
+

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../../styles/variables';
+@import '../../grid-card-styling';

src/app/shared/object-grid/search-result-grid-element/item-search-result/item-search-result-grid-element.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+
+import { renderElementsFor } from '../../../object-collection/shared/dso-element-decorator';
+import { SearchResultGridElementComponent } from '../search-result-grid-element.component';
+import { Item } from '../../../../core/shared/item.model';
+import { ItemSearchResult } from '../../../object-collection/shared/item-search-result.model';
+import { ViewMode } from '../../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-item-search-result-grid-element',
+  styleUrls: ['../search-result-grid-element.component.scss', 'item-search-result-grid-element.component.scss'],
+  templateUrl: 'item-search-result-grid-element.component.html'
+})
+
+@renderElementsFor(ItemSearchResult, ViewMode.Grid)
+export class ItemSearchResultGridElementComponent extends SearchResultGridElementComponent<ItemSearchResult, Item> {}

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.scss

@@ -0,0 +1,8 @@
+ @import '../../../../styles/variables';
+ @import '../grid-card-styling';
+:host {
+    /deep/ em {
+        font-weight: bold;
+        font-style: normal;
+    }
+}

src/app/shared/object-grid/search-result-grid-element/search-result-grid-element.component.ts

@@ -0,0 +1,57 @@
+import { Component, Inject } from '@angular/core';
+
+import { SearchResult } from '../../../+search-page/search-result.model';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { Metadatum } from '../../../core/shared/metadatum.model';
+import { isEmpty, hasNoValue } from '../../empty.util';
+import { ObjectGridElementComponent } from '../object-grid-element/object-grid-element.component';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+
+@Component({
+  selector: 'ds-search-result-grid-element',
+  template: ``
+})
+
+export class SearchResultGridElementComponent<T extends SearchResult<K>, K extends DSpaceObject> extends ObjectGridElementComponent<T> {
+  dso: K;
+
+  public constructor(@Inject('objectElementProvider') public gridable: ListableObject) {
+    super(gridable);
+    this.dso = this.object.dspaceObject;
+  }
+
+  getValues(keys: string[]): string[] {
+    const results: string[] = new Array<string>();
+    this.object.hitHighlights.forEach(
+      (md: Metadatum) => {
+        if (keys.indexOf(md.key) > -1) {
+          results.push(md.value);
+        }
+      }
+    );
+    if (isEmpty(results)) {
+      this.dso.filterMetadata(keys).forEach(
+        (md: Metadatum) => {
+          results.push(md.value);
+        }
+      );
+    }
+    return results;
+  }
+
+  getFirstValue(key: string): string {
+    let result: string;
+    this.object.hitHighlights.some(
+      (md: Metadatum) => {
+        if (key === md.key) {
+          result =  md.value;
+          return true;
+        }
+      }
+    );
+    if (hasNoValue(result)) {
+      result = this.dso.findMetadata(key);
+    }
+    return result;
+  }
+}

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.html

@@ -0,0 +1 @@
+<ng-container *ngComponentOutlet="getGridElement(); injector: objectInjector;"></ng-container>

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.scss

@@ -0,0 +1,2 @@
+@import '../../../../styles/variables';
+@import '../grid-card-styling';

src/app/shared/object-grid/wrapper-grid-element/wrapper-grid-element.component.ts

@@ -0,0 +1,28 @@
+import { Component, Input, Injector, ReflectiveInjector, OnInit } from '@angular/core';
+import { GenericConstructor } from '../../../core/shared/generic-constructor';
+import { rendersDSOType } from '../../object-collection/shared/dso-element-decorator';
+import { ListableObject } from '../../object-collection/shared/listable-object.model';
+import { ViewMode } from '../../../+search-page/search-options.model';
+
+@Component({
+  selector: 'ds-wrapper-grid-element',
+  styleUrls: ['./wrapper-grid-element.component.scss'],
+  templateUrl: './wrapper-grid-element.component.html'
+})
+export class WrapperGridElementComponent implements OnInit {
+  @Input() object: ListableObject;
+  objectInjector: Injector;
+
+  constructor(private injector: Injector) {}
+
+  ngOnInit(): void {
+    this.objectInjector = ReflectiveInjector.resolveAndCreate(
+      [{provide: 'objectElementProvider', useFactory: () => (this.object) }], this.injector);
+
+  }
+
+  getGridElement(): string {
+    const f: GenericConstructor<ListableObject> = this.object.constructor as GenericConstructor<ListableObject>;
+    return rendersDSOType(f, ViewMode.Grid);
+  }
+}