Themed object-list.component.

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

@@ -1,4 +1,5 @@
-<ds-object-list [ngClass]="placeholderFontClass" [config]="config"
+<ds-themed-object-list [ngClass]="placeholderFontClass"
+                [config]="config"
                 [sortConfig]="sortConfig"
                 [objects]="objects"
                 [hasBorder]="hasBorder"
@@ -23,7 +24,7 @@
                 (prev)="goPrev()"
                 (next)="goNext()"
                 *ngIf="(currentMode$ | async) === viewModeEnum.ListElement">
-</ds-object-list>
+</ds-themed-object-list>
 
 <ds-object-grid [config]="config"
                 [sortConfig]="sortConfig"

src/app/shared/object-list/themed-object-list.component.ts

@@ -0,0 +1,209 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import { ObjectListComponent } from './object-list.component';
+import { ThemedComponent } from '../theme-support/themed.component';
+import {ViewMode} from '../../core/shared/view-mode.model';
+import {PaginationComponentOptions} from '../pagination/pagination-component-options.model';
+import {SortDirection, SortOptions} from '../../core/cache/models/sort-options.model';
+import {CollectionElementLinkType} from '../object-collection/collection-element-link.type';
+import {Context} from '../../core/shared/context.model';
+import {RemoteData} from '../../core/data/remote-data';
+import {PaginatedList} from '../../core/data/paginated-list.model';
+import {ListableObject} from '../object-collection/shared/listable-object.model';
+
+/**
+ * Themed wrapper for ObjectListComponent
+ */
+@Component({
+  selector: 'ds-themed-object-list',
+  styleUrls: [],
+  templateUrl: '../theme-support/themed.component.html',
+})
+export class ThemedObjectListComponent extends ThemedComponent<ObjectListComponent> {
+  /**
+   * The view mode of the this component
+   */
+  viewMode = ViewMode.ListElement;
+
+  /**
+   * The current pagination configuration
+   */
+  @Input() config: PaginationComponentOptions;
+
+  /**
+   * The current sort configuration
+   */
+  @Input() sortConfig: SortOptions;
+
+  /**
+   * Whether or not the list elements have a border
+   */
+  @Input() hasBorder = false;
+
+  /**
+   * The whether or not the gear is hidden
+   */
+  @Input() hideGear = false;
+
+  /**
+   * Whether or not the pager is visible when there is only a single page of results
+   */
+  @Input() hidePagerWhenSinglePage = true;
+  @Input() selectable = false;
+  @Input() selectionConfig: { repeatable: boolean, listId: string };
+
+  /**
+   * The link type of the listable elements
+   */
+  @Input() linkType: CollectionElementLinkType;
+
+  /**
+   * The context of the listable elements
+   */
+  @Input() context: Context;
+
+  /**
+   * Option for hiding the pagination detail
+   */
+  @Input() hidePaginationDetail = false;
+
+  /**
+   * Whether or not to add an import button to the object
+   */
+  @Input() importable = false;
+
+  /**
+   * Config used for the import button
+   */
+  @Input() importConfig: { importLabel: string };
+
+  /**
+   * Whether or not the pagination should be rendered as simple previous and next buttons instead of the normal pagination
+   */
+  @Input() showPaginator = true;
+
+  /**
+   * Emit when one of the listed object has changed.
+   */
+  @Output() contentChange = new EventEmitter<any>();
+
+  /**
+   * If showPaginator is set to true, emit when the previous button is clicked
+   */
+  @Output() prev = new EventEmitter<boolean>();
+
+  /**
+   * If showPaginator is set to true, emit when the next button is clicked
+   */
+  @Output() next = new EventEmitter<boolean>();
+
+  /**
+   * The current listable objects
+   */
+  private _objects: RemoteData<PaginatedList<ListableObject>>;
+
+  /**
+   * Setter for the objects
+   * @param objects The new objects
+   */
+  @Input() set objects(objects: RemoteData<PaginatedList<ListableObject>>) {
+    this._objects = objects;
+  }
+
+  /**
+   * Getter to return the current objects
+   */
+  get objects() {
+    return this._objects;
+  }
+
+  /**
+   * An event fired when the page is changed.
+   * Event's payload equals to the newly selected page.
+   */
+  @Output() change: EventEmitter<{
+    pagination: PaginationComponentOptions,
+    sort: SortOptions
+  }> = new EventEmitter<{
+    pagination: PaginationComponentOptions,
+    sort: SortOptions
+  }>();
+
+  /**
+   * 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>();
+
+  /**
+   * An event fired when on of the pagination parameters changes
+   */
+  @Output() paginationChange: EventEmitter<any> = new EventEmitter<any>();
+
+  @Output() deselectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  @Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  /**
+   * Send an import event to the parent component
+   */
+  @Output() importObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  /**
+   * 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>();
+
+  inAndOutputNames: (keyof ObjectListComponent & keyof this)[] = [
+    'config',
+    'sortConfig',
+    'hasBorder',
+    'hideGear',
+    'hidePagerWhenSinglePage',
+    'selectable',
+    'selectionConfig',
+    'linkType',
+    'context',
+    'hidePaginationDetail',
+    'importable',
+    'importConfig',
+    'showPaginator',
+    'contentChange',
+    'prev',
+    'next',
+    'objects',
+    'change',
+    'pageChange',
+    'pageSizeChange',
+    'sortDirectionChange',
+    'paginationChange',
+    'deselectObject',
+    'selectObject',
+    'importObject',
+    'sortFieldChange',
+  ];
+
+  protected getComponentName(): string {
+    return 'ObjectListComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes//${themeName}/app/shared/object-list/object-list.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./object-list.component');
+  }
+}

src/app/shared/shared.module.ts

@@ -39,6 +39,7 @@ import {
   SearchResultListElementComponent
 } from './object-list/search-result-list-element/search-result-list-element.component';
 import { ObjectListComponent } from './object-list/object-list.component';
+import { ThemedObjectListComponent } from './object-list/themed-object-list.component';
 import {
   CollectionGridElementComponent
 } from './object-grid/collection-grid-element/collection-grid-element.component';
@@ -376,6 +377,7 @@ const COMPONENTS = [
   LogOutComponent,
   NumberPickerComponent,
   ObjectListComponent,
+  ThemedObjectListComponent,
   ObjectDetailComponent,
   ObjectGridComponent,
   AbstractListableElementComponent,

src/themes/custom/app/shared/object-list/object-list.component.ts

@@ -0,0 +1,16 @@
+import { Component } from '@angular/core';
+import { ObjectListComponent as BaseComponent} from '../../../../../app/shared/object-list/object-list.component';
+
+/**
+ * A component to display the "Browse By" section of a Community or Collection page
+ * It expects the ID of the Community or Collection as input to be passed on as a scope
+ */
+@Component({
+  selector: 'ds-object-list',
+  // styleUrls: ['./object-list.component.scss'],
+  styleUrls: ['../../../../../app/shared/object-list/object-list.component.scss'],
+  // templateUrl: 'object-list.component.html'
+  templateUrl: '../../../../../app/shared/object-list/object-list.component.html'
+})
+
+export class ObjectListComponent extends BaseComponent {}

src/themes/custom/lazy-theme.module.ts

@@ -109,6 +109,7 @@ import {
 import {
   CommunityPageSubCollectionListComponent
 } from './app/community-page/sub-collection-list/community-page-sub-collection-list.component';
+import { ObjectListComponent } from './app/shared/object-list/object-list.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -159,6 +160,7 @@ const DECLARATIONS = [
   AdminSidebarComponent,
   SearchSettingsComponent
   ComcolPageBrowseByComponent,
+  ObjectListComponent,
 ];
 
 @NgModule({