Made ListableObjectComponentLoaderComponent themeable

src/app/admin/admin-search-page/admin-search-results/admin-search-result-list-element/item-search-result/item-admin-search-result-list-element.component.html

@@ -1,7 +1,7 @@
-<ds-listable-object-component-loader [object]="object"
+<ds-themed-listable-object-component-loader [object]="object"
                                      [viewMode]="viewModes.ListElement"
                                      [index]="index"
                                      [linkType]="linkType"
                                      [listID]="listID"
-                                     [hideBadges]="true"></ds-listable-object-component-loader>
+                                     [hideBadges]="true"></ds-themed-listable-object-component-loader>
 <ds-item-admin-search-result-actions-element [item]="dso" [small]="false"></ds-item-admin-search-result-actions-element>

src/app/admin/admin-workflow-page/admin-workflow-search-results/admin-workflow-search-result-list-element/workflow-item/workflow-item-search-result-admin-workflow-list-element.component.html

@@ -1,10 +1,10 @@
 <div class="workflow-badge">
     <span class="badge badge-info">{{ "admin.workflow.item.workflow" | translate }}</span>
 </div>
-<ds-listable-object-component-loader *ngIf="item$ | async"
+<ds-themed-listable-object-component-loader *ngIf="item$ | async"
                                      [object]="item$ | async"
                                      [viewMode]="viewModes.ListElement"
                                      [index]="index"
                                      [linkType]="linkType"
-                                     [listID]="listID"></ds-listable-object-component-loader>
+                                     [listID]="listID"></ds-themed-listable-object-component-loader>
 <ds-workflow-item-admin-workflow-actions-element [wfi]="dso" [small]="false"></ds-workflow-item-admin-workflow-actions-element>

src/app/item-page/edit-item-page/item-delete/item-delete.component.html

@@ -31,11 +31,11 @@
                                      class="d-flex flex-row">
                                     <ng-container *ngVar="(getRelatedItem(relationship) | async) as relatedItem">
 
-                                        <ds-listable-object-component-loader
+                                        <ds-themed-listable-object-component-loader
                                                 *ngIf="relatedItem"
                                                 [object]="relatedItem"
                                                 [viewMode]="viewMode">
-                                        </ds-listable-object-component-loader>
+                                        </ds-themed-listable-object-component-loader>
                                         <div class="ml-auto">
                                             <div class="btn-group">
                                                 <button class="btn btn-outline-info btn-sm"
@@ -55,11 +55,11 @@
                                                     </button>
                                                 </div>
                                                 <div class="modal-body">
-                                                    <ds-listable-object-component-loader
+                                                    <ds-themed-listable-object-component-loader
                                                             *ngIf="relatedItem"
                                                             [object]="relatedItem"
                                                             [viewMode]="viewMode">
-                                                    </ds-listable-object-component-loader>
+                                                    </ds-themed-listable-object-component-loader>
                                                     <div *ngFor="let metadata of (getVirtualMetadata(relationship) | async)">
                                                         <div>
                                                             <div class="font-weight-bold">

src/app/item-page/edit-item-page/item-relationships/edit-relationship/edit-relationship.component.html

@@ -1,11 +1,11 @@
 <div class="row" *ngIf="relatedItem$ | async">
   <div class="col-10 relationship">
-    <ds-listable-object-component-loader
+    <ds-themed-listable-object-component-loader
       [object]="relatedItem$ | async"
       [viewMode]="viewMode"
       [value]="nameVariant"
     >
-    </ds-listable-object-component-loader>
+    </ds-themed-listable-object-component-loader>
   </div>
   <div class="col-2">
     <div class="btn-group relationship-action-buttons">

src/app/item-page/edit-item-page/virtual-metadata/virtual-metadata.component.html

@@ -15,8 +15,8 @@
                     </label>
                 </div>
                 <div class="flex-column">
-                    <ds-listable-object-component-loader [object]="item">
+                    <ds-themed-listable-object-component-loader [object]="item">
-                    </ds-listable-object-component-loader>
+                    </ds-themed-listable-object-component-loader>
                     <div *ngFor="let metadata of virtualMetadata.get(item.uuid)">
                         <div class="font-weight-bold">
                             {{metadata.metadataField}}

src/app/item-page/simple/item-page.component.html

@@ -4,7 +4,7 @@
       <ds-item-alerts [item]="item"></ds-item-alerts>
       <ds-item-versions-notice [item]="item"></ds-item-versions-notice>
       <ds-view-tracker [object]="item"></ds-view-tracker>
-      <ds-listable-object-component-loader [object]="item" [viewMode]="viewMode"></ds-listable-object-component-loader>
+      <ds-themed-listable-object-component-loader [object]="item" [viewMode]="viewMode"></ds-themed-listable-object-component-loader>
       <ds-item-versions class="mt-2" [item]="item" [displayActions]="false"></ds-item-versions>
     </div>
   </div>

src/app/item-page/simple/related-items/related-items.component.html

@@ -1,9 +1,9 @@
 <ds-metadata-field-wrapper [label]="label">
   <ng-container *ngFor="let objectPage of objects; let i = index">
     <ng-container *ngVar="(objectPage | async) as itemsRD">
-      <ds-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page"
+      <ds-themed-listable-object-component-loader *ngFor="let item of itemsRD?.payload?.page"
                                            [object]="item" [viewMode]="viewMode">
-      </ds-listable-object-component-loader>
+      </ds-themed-listable-object-component-loader>
       <ds-loading *ngIf="(i + 1) === objects.length && (itemsRD || i > 0) && !(itemsRD?.hasSucceeded && itemsRD?.payload && itemsRD?.payload?.page?.length > 0)" message="{{'loading.default' | translate}}"></ds-loading>
       <div class="d-inline-block w-100 mt-2" *ngIf="(i + 1) === objects.length && itemsRD?.payload?.page?.length > 0">
         <div *ngIf="itemsRD?.payload?.totalPages > objects.length" class="float-left" id="view-more">

src/app/item-page/simple/related-items/related-items.component.spec.ts

@@ -62,7 +62,7 @@ describe('RelatedItemsComponent', () => {
   }));
 
   it(`should load ${mockItems.length} item-type-switcher components`, () => {
-    const fields = fixture.debugElement.queryAll(By.css('ds-listable-object-component-loader'));
+    const fields = fixture.debugElement.queryAll(By.css('ds-themed-listable-object-component-loader'));
     expect(fields.length).toBe(mockItems.length);
   });
 

src/app/shared/browse-by/browse-by.component.html

@@ -25,7 +25,7 @@
       </div>
       <ul class="list-unstyled">
         <li *ngFor="let object of objects?.payload?.page" class="mt-4 mb-4">
-          <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode"></ds-listable-object-component-loader>
+          <ds-themed-listable-object-component-loader [object]="object" [viewMode]="viewMode"></ds-themed-listable-object-component-loader>
         </li>
       </ul>
       <div>

src/app/shared/dso-selector/dso-selector/dso-selector.component.html

@@ -25,8 +25,8 @@
               title="{{ getName(listEntry) }}"
               dsHoverClass="ds-hover"
               (click)="onSelect.emit(listEntry.indexableObject)" #listEntryElement>
-        <ds-listable-object-component-loader [object]="listEntry" [viewMode]="viewMode"
+        <ds-themed-listable-object-component-loader [object]="listEntry" [viewMode]="viewMode"
-                                             [linkType]=linkTypes.None [context]="getContext(listEntry.indexableObject.id)"></ds-listable-object-component-loader>
+                                             [linkType]=linkTypes.None [context]="getContext(listEntry.indexableObject.id)"></ds-themed-listable-object-component-loader>
       </button>
     </ng-container>
     <button *ngIf="loading"

src/app/shared/form/builder/ds-dynamic-form-ui/existing-relation-list-element/existing-relation-list-element.component.html

@@ -4,7 +4,7 @@
             <ds-loading [showMessage]="false"></ds-loading>
         </ng-container>
         <ng-container *ngIf="(relatedItem$ | async)">
-            <ds-listable-object-component-loader [showLabel]="false" [viewMode]="viewType" [object]="(relatedItem$ | async)"></ds-listable-object-component-loader>
+            <ds-themed-listable-object-component-loader [showLabel]="false" [viewMode]="viewType" [object]="(relatedItem$ | async)"></ds-themed-listable-object-component-loader>
         </ng-container>
     </span>
     <button type="button" class="btn btn-secondary"

src/app/shared/input-suggestions/dso-input-suggestions/dso-input-suggestions.component.html

@@ -14,7 +14,7 @@
         <div class="dropdown-list">
             <div *ngFor="let suggestionOption of suggestions">
                 <button class="d-block dropdown-item"  (click)="onClickSuggestion(suggestionOption)" #suggestion>
-                    <ds-listable-object-component-loader [object]="suggestionOption" [viewMode]="viewMode" [linkType]="linkTypes.None"></ds-listable-object-component-loader>
+                    <ds-themed-listable-object-component-loader [object]="suggestionOption" [viewMode]="viewMode" [linkType]="linkTypes.None"></ds-themed-listable-object-component-loader>
                 </button>
             </div>
         </div>

src/app/shared/object-collection/shared/listable-object/themed-listable-object-component-loader.component.ts

@@ -0,0 +1,43 @@
+import { Component, ElementRef, EventEmitter, Input, Output, ViewChild } from '@angular/core';
+import { ListableObjectComponentLoaderComponent } from './listable-object-component-loader.component';
+import { ThemedComponent } from '../../../theme-support/themed.component';
+import { ListableObject } from '../listable-object.model';
+import { ViewMode } from '../../../../core/shared/view-mode.model';
+import { Context } from '../../../../core/shared/context.model';
+import { CollectionElementLinkType } from '../../collection-element-link.type';
+
+/**
+ * Themed wrapper for SearchComponent
+ */
+@Component({
+  selector: 'ds-themed-listable-object-component-loader',
+  styleUrls: [],
+  templateUrl: '../theme-support/themed.component.html',
+})
+export class ThemedListableObjectComponentLoaderComponent extends ThemedComponent<ListableObjectComponentLoaderComponent> {
+  protected inAndOutputNames: (keyof ListableObjectComponentLoaderComponent & keyof this)[] = [
+    'object', 'index', 'viewMode', 'context', 'linkType', 'listID', 'linkType', 'showLabel', 'value', 'hideBadges', 'contentChange'];
+
+  @Input() object: ListableObject;
+  @Input() index: number;
+  @Input() viewMode: ViewMode;
+  @Input() context: Context;
+  @Input() linkType: CollectionElementLinkType;
+  @Input() listID: string;
+  @Input() showLabel = true;
+  @Input() value: string;
+  @Input() hideBadges = false;
+  @Output() contentChange = new EventEmitter<ListableObject>();
+
+  protected getComponentName(): string {
+    return 'ListableObjectComponentLoaderComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./listable-object-component-loader.component');
+  }
+}

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

@@ -14,7 +14,7 @@
     <div class="row mt-2" *ngIf="objects?.hasSucceeded" @fadeIn>
       <div class="col"
            *ngFor="let object of objects?.payload?.page">
-        <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode" [context]="context"></ds-listable-object-component-loader>
+        <ds-themed-listable-object-component-loader [object]="object" [viewMode]="viewMode" [context]="context"></ds-themed-listable-object-component-loader>
       </div>
     </div>
   <ds-error *ngIf="objects.hasFailed" message="{{'error.objects' | translate}}"></ds-error>

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

@@ -14,7 +14,7 @@
     <div class="card-columns row" *ngIf="objects?.hasSucceeded">
       <div class="card-column col col-sm-6 col-lg-4" *ngFor="let column of (columns$ | async)" @fadeIn>
         <div class="card-element" *ngFor="let object of column">
-          <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode" [context]="context" [linkType]="linkType"></ds-listable-object-component-loader>
+          <ds-themed-listable-object-component-loader [object]="object" [viewMode]="viewMode" [context]="context" [linkType]="linkType"></ds-themed-listable-object-component-loader>
         </div>
       </div>
     </div>

src/app/shared/object-list/metadata-representation-list-element/item/item-metadata-list-element.component.html

@@ -1 +1 @@
-<ds-listable-object-component-loader [object]="metadataRepresentation" [viewMode]="viewMode"></ds-listable-object-component-loader>
+<ds-themed-listable-object-component-loader [object]="metadataRepresentation" [viewMode]="viewMode"></ds-themed-listable-object-component-loader>

src/app/shared/object-list/metadata-representation-list-element/item/item-metadata-list-element.component.spec.ts

@@ -28,7 +28,7 @@ describe('ItemMetadataListElementComponent', () => {
   }));
 
   it('should call a listable-object-component-loader component and pass the item-metadata-representation', () => {
-    const objectLoader = fixture.debugElement.query(By.css('ds-listable-object-component-loader')).nativeElement;
+    const objectLoader = fixture.debugElement.query(By.css('ds-themed-listable-object-component-loader')).nativeElement;
     expect(objectLoader.object).toBe(mockItemMetadataRepresentation);
   });
 

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

@@ -21,10 +21,10 @@
           <ds-importable-list-item-control *ngIf="importable" [object]="object"
                                            [importConfig]="importConfig"
                                            (importObject)="importObject.emit($event)"></ds-importable-list-item-control>
-          <ds-listable-object-component-loader [object]="object" [viewMode]="viewMode" [index]="i" [context]="context" [linkType]="linkType"
+          <ds-themed-listable-object-component-loader [object]="object" [viewMode]="viewMode" [index]="i" [context]="context" [linkType]="linkType"
                                                [listID]="selectionConfig?.listId"
                                                (contentChange)="contentChange.emit()"
-          ></ds-listable-object-component-loader>
+          ></ds-themed-listable-object-component-loader>
         </li>
     </ul>
 </ds-pagination>

src/app/shared/shared.module.ts

@@ -173,6 +173,7 @@ import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-p
 import { DsSelectComponent } from './ds-select/ds-select.component';
 import { LogInOidcComponent } from './log-in/methods/oidc/log-in-oidc.component';
 import { ThemedItemListPreviewComponent } from './object-list/my-dspace-result-list-element/item-list-preview/themed-item-list-preview.component';
+import { ThemedListableObjectComponentLoaderComponent } from './object-collection/shared/listable-object/themed-listable-object-component-loader.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -286,6 +287,7 @@ const COMPONENTS = [
   CommunitySearchResultGridElementComponent,
   PageSizeSelectorComponent,
   ListableObjectComponentLoaderComponent,
+  ThemedListableObjectComponentLoaderComponent,
   CollectionListElementComponent,
   CommunityListElementComponent,
   CollectionGridElementComponent,

src/themes/custom/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.ts

@@ -0,0 +1,13 @@
+import { Component } from '@angular/core';
+import { ListableObjectComponentLoaderComponent as BaseComponent } from 'src/app/shared/object-collection/shared/listable-object/listable-object-component-loader.component';
+
+@Component({
+  selector: 'ds-listable-object-component-loader',
+  // styleUrls: ['./listable-object-component-loader.component.scss'],
+  styleUrls: ['../../../../../../../app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.scss'],
+  // templateUrl: './listable-object-component-loader.component.html'
+  templateUrl: '../../../../../../../app/shared/object-collection/shared/listable-object/listable-object-component-loader.component.html'
+})
+
+export class ListableObjectComponentLoaderComponent extends BaseComponent {
+}

src/themes/custom/theme.module.ts

@@ -86,6 +86,7 @@ import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
 import { SearchFiltersComponent } from './app/shared/search/search-filters/search-filters.component';
 import { SearchSidebarComponent } from './app/shared/search/search-sidebar/search-sidebar.component';
+import { ListableObjectComponentLoaderComponent } from './app/shared/object-collection/shared/listable-object/listable-object-component-loader.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -131,6 +132,7 @@ const DECLARATIONS = [
   FeedbackComponent,
   SearchFiltersComponent,
   SearchSidebarComponent,
+  ListableObjectComponentLoaderComponent
 ];
 
 @NgModule({