Refactored item list badges

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-issue/journal-issue-search-result-grid-element.component.html

@@ -19,7 +19,7 @@
             </div>
         </span>
     <div class="card-body">
-      <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+      <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
       </ds-truncatable-part>

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal-volume/journal-volume-search-result-grid-element.component.html

@@ -19,7 +19,7 @@
                 </div>
             </span>
     <div class="card-body">
-      <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+      <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="dso.firstMetadataValue('dc.title')"></h4>
       </ds-truncatable-part>

src/app/entity-groups/journal-entities/item-grid-elements/search-result-grid-elements/journal/journal-search-result-grid-element.component.html

@@ -19,7 +19,7 @@
             </div>
         </span>
     <div class="card-body">
-      <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+      <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
       </ds-truncatable-part>

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-issue/journal-issue-search-result-list-element.component.html

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
             [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal-volume/journal-volume-search-result-list-element.component.html

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
             [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"

src/app/entity-groups/journal-entities/item-list-elements/search-result-list-elements/journal/journal-search-result-list-element.component.html

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
             [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/org-unit/org-unit-search-result-grid-element.component.html

@@ -19,7 +19,7 @@
             </div>
         </span>
     <div class="card-body">
-      <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+      <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="firstMetadataValue('organization.legalName')"></h4>
       </ds-truncatable-part>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/person/person-search-result-grid-element.component.html

@@ -19,7 +19,7 @@
             </div>
         </span>
     <div class="card-body">
-      <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+      <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title"
             [innerHTML]="firstMetadataValue('person.familyName') + ', ' + firstMetadataValue('person.givenName')"></h4>

src/app/entity-groups/research-entities/item-grid-elements/search-result-grid-elements/project/project-search-result-grid-element.component.html

@@ -19,7 +19,7 @@
       </div>
     </span>
     <div class="card-body">
-      <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+      <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
       </ds-truncatable-part>

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/org-unit/org-unit-search-result-list-element.component.html

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
        [routerLink]="[itemPageRoute]" class="lead"

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/person/person-search-result-list-element.component.html

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 <ds-truncatable [id]="dso.id">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
        [routerLink]="[itemPageRoute]" class="lead"

src/app/entity-groups/research-entities/item-list-elements/search-result-list-elements/project/project-search-result-list-element.component.html

@@ -1,5 +1,5 @@
 <ds-truncatable [id]="dso.id">
-    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"
        [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"
        [innerHTML]="dsoTitle"></a>

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

@@ -95,16 +95,6 @@ export class ListableObjectComponentLoaderComponent implements OnInit, OnChanges
    */
   @Output() contentChange = new EventEmitter<ListableObject>();
 
-  /**
-   * Whether or not the "Private" badge should be displayed for this listable object
-   */
-  privateBadge = false;
-
-  /**
-   * Whether or not the "Withdrawn" badge should be displayed for this listable object
-   */
-  withdrawnBadge = false;
-
   /**
    * Array to track all subscriptions and unsubscribe them onDestroy
    * @type {Array}
@@ -160,8 +150,6 @@ export class ListableObjectComponentLoaderComponent implements OnInit, OnChanges
 
   private instantiateComponent(object) {
 
-    this.initBadges();
-
     const component = this.getComponent(object.getRenderTypes(), this.viewMode, this.context);
 
     const componentFactory = this.componentFactoryResolver.resolveComponentFactory(component);
@@ -191,19 +179,6 @@ export class ListableObjectComponentLoaderComponent implements OnInit, OnChanges
     }
   }
 
-  /**
-   * Initialize which badges should be visible in the listable component
-   */
-  initBadges() {
-    let objectAsAny = this.object as any;
-    if (hasValue(objectAsAny.indexableObject)) {
-      objectAsAny = objectAsAny.indexableObject;
-    }
-    const objectExistsAndValidViewMode = hasValue(objectAsAny) && this.viewMode !== ViewMode.StandalonePage;
-    this.privateBadge = objectExistsAndValidViewMode && hasValue(objectAsAny.isDiscoverable) && !objectAsAny.isDiscoverable;
-    this.withdrawnBadge = objectExistsAndValidViewMode && hasValue(objectAsAny.isWithdrawn) && objectAsAny.isWithdrawn;
-  }
-
   /**
    * Fetch the component depending on the item's entity type, view mode and context
    * @returns {GenericConstructor<Component>}

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

@@ -8,7 +8,7 @@
     </ds-thumbnail>
   </span>
   <div class="card-body">
-    <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+    <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
     <h4 class="card-title">{{dso.name}}</h4>
     <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
     <div *ngIf="linkType != linkTypes.None" class="text-center">

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

@@ -8,7 +8,7 @@
     </ds-thumbnail>
   </span>
     <div class="card-body">
-        <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+        <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
         <h4 class="card-title">{{dso.name}}</h4>
         <p *ngIf="dso.shortDescription" class="card-text">{{dso.shortDescription}}</p>
         <div *ngIf="linkType != linkTypes.None" class="text-center">

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

@@ -17,7 +17,7 @@
           </div>
       </span>
       <div class="card-body">
-          <ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+          <ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
           <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
               <h4 class="card-title" [innerHTML]="firstMetadataValue('dc.title')"></h4>
           </ds-truncatable-part>

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

@@ -0,0 +1,6 @@
+<div>
+    <ds-themed-status-badge [object]="object"></ds-themed-status-badge>
+</div>
+<div>
+    <ds-themed-type-badge [object]="object"></ds-themed-type-badge>
+</div>

src/app/shared/object-list/badges/badges.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BadgesComponent } from './badges.component';
+
+describe('BadgesComponent', () => {
+  let component: BadgesComponent;
+  let fixture: ComponentFixture<BadgesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ BadgesComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(BadgesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,11 @@
+import { Component, Input } from '@angular/core';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+
+@Component({
+  selector: 'ds-badges',
+  templateUrl: './badges.component.html',
+  styleUrls: ['./badges.component.scss']
+})
+export class BadgesComponent {
+  @Input() object: DSpaceObject;
+}

src/app/shared/object-list/badges/status-badge/status-badge.component.html

@@ -0,0 +1,6 @@
+<span *ngIf="privateBadge" class="private-badge">
+    <span class="badge badge-danger">{{ "item.badge.private" | translate }}</span>
+</span>
+<span *ngIf="withdrawnBadge" class="withdrawn-badge">
+    <span class="badge badge-warning">{{ "item.badge.withdrawn" | translate }}</span>
+</span>

src/app/shared/object-list/badges/status-badge/status-badge.component.spec.ts

@@ -0,0 +1,78 @@
+import { Item } from '../../../../core/shared/item.model';
+import { of as observableOf } from 'rxjs';
+import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
+import { TranslateModule } from '@ngx-translate/core';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
+import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
+import { By } from '@angular/platform-browser';
+import { StatusBadgeComponent } from './status-badge.component';
+
+let comp: StatusBadgeComponent;
+let fixture: ComponentFixture<StatusBadgeComponent>;
+
+const type = 'authorOfPublication';
+
+const mockItemWithEntityType = Object.assign(new Item(), {
+  bundles: observableOf({}),
+  metadata: {
+    'dspace.entity.type': [
+      {
+        language: 'en_US',
+        value: type
+      }
+    ]
+  }
+});
+
+const mockItemWithoutEntityType = Object.assign(new Item(), {
+  bundles: observableOf({}),
+  metadata: {
+    'dc.title': [
+      {
+        language: 'en_US',
+        value: 'This is just another title'
+      }
+    ]
+  }
+});
+
+describe('ItemTypeBadgeComponent', () => {
+  beforeEach(waitForAsync(() => {
+    TestBed.configureTestingModule({
+      imports: [TranslateModule.forRoot()],
+      declarations: [StatusBadgeComponent, TruncatePipe],
+      schemas: [NO_ERRORS_SCHEMA]
+    }).overrideComponent(StatusBadgeComponent, {
+      set: { changeDetection: ChangeDetectionStrategy.Default }
+    }).compileComponents();
+  }));
+
+  beforeEach(waitForAsync(() => {
+    fixture = TestBed.createComponent(StatusBadgeComponent);
+    comp = fixture.componentInstance;
+  }));
+
+  describe('When the item has an entity type', () => {
+    beforeEach(() => {
+      comp.object = mockItemWithEntityType;
+      fixture.detectChanges();
+    });
+
+    it('should show the entity type badge', () => {
+      const badge = fixture.debugElement.query(By.css('span.badge'));
+      expect(badge.nativeElement.textContent).toContain(type.toLowerCase());
+    });
+  });
+
+  describe('When the item has no entity type', () => {
+    beforeEach(() => {
+      comp.object = mockItemWithoutEntityType;
+      fixture.detectChanges();
+    });
+
+    it('should show an item badge', () => {
+      const badge = fixture.debugElement.query(By.css('span.badge'));
+      expect(badge.nativeElement.textContent).toContain('item');
+    });
+  });
+});

src/app/shared/object-list/badges/status-badge/status-badge.component.ts

@@ -0,0 +1,41 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
+import { hasValue } from '../../../empty.util';
+
+@Component({
+  selector: 'ds-status-badge',
+  templateUrl: './status-badge.component.html'
+})
+/**
+ * Component rendering the status of an item as a badge
+ */
+export class StatusBadgeComponent implements OnInit {
+
+  /**
+   * The component used to retrieve the status from
+   */
+  @Input() object: DSpaceObject;
+
+  /**
+   * Whether or not the "Private" badge should be displayed for this listable object
+   */
+  privateBadge = false;
+
+  /**
+   * Whether or not the "Withdrawn" badge should be displayed for this listable object
+   */
+  withdrawnBadge = false;
+
+  /**
+   * Initialize which badges should be visible
+   */
+  ngOnInit(): void {
+    let objectAsAny = this.object as any;
+    if (hasValue(objectAsAny.indexableObject)) {
+      objectAsAny = objectAsAny.indexableObject;
+    }
+    const objectExists = hasValue(objectAsAny);
+    this.privateBadge = objectExists && hasValue(objectAsAny.isDiscoverable) && !objectAsAny.isDiscoverable;
+    this.withdrawnBadge = objectExists && hasValue(objectAsAny.isWithdrawn) && objectAsAny.isWithdrawn;
+  }
+}

src/app/shared/object-list/badges/status-badge/themed-status-badge.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../../theme-support/themed.component';
+import { StatusBadgeComponent } from './status-badge.component';
+import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
+import { TypeBadgeComponent } from '../type-badge/type-badge.component';
+
+/**
+ * Themed wrapper for StatusBadgeComponent
+ */
+@Component({
+  selector: 'ds-themed-status-badge',
+  styleUrls: [],
+  templateUrl: '../../../../shared/theme-support/themed.component.html',
+})
+export class ThemedStatusBadgeComponent extends ThemedComponent<StatusBadgeComponent> {
+  @Input() object: DSpaceObject;
+
+  protected inAndOutputNames: (keyof StatusBadgeComponent & keyof this)[] = ['object'];
+
+  protected getComponentName(): string {
+    return 'StatusBadgeComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../../themes/${themeName}/app/shared/object-list/badges/status-badge/status-badge.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./status-badge.component`);
+  }
+}

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

@@ -0,0 +1,32 @@
+import { Component, Input } from '@angular/core';
+import { BadgesComponent } from './badges.component';
+import { ThemedComponent } from '../../theme-support/themed.component';
+import { Observable } from 'rxjs/internal/Observable';
+import { SearchFiltersComponent } from '../../search/search-filters/search-filters.component';
+import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+
+/**
+ * Themed wrapper for BadgesComponent
+ */
+@Component({
+  selector: 'ds-themed-badges',
+  styleUrls: [],
+  templateUrl: '../../../shared/theme-support/themed.component.html',
+})
+export class ThemedBadgesComponent extends ThemedComponent<BadgesComponent> {
+  @Input() object: DSpaceObject;
+
+  protected inAndOutputNames: (keyof BadgesComponent & keyof this)[] = ['object'];
+
+  protected getComponentName(): string {
+    return 'BadgesComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/shared/object-list/badges/badges.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./badges.component`);
+  }
+}

src/app/shared/object-list/badges/type-badge/themed-type-badge.component.ts

@@ -0,0 +1,31 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../../theme-support/themed.component';
+import { TypeBadgeComponent } from './type-badge.component';
+import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
+import { BadgesComponent } from '../badges.component';
+
+/**
+ * Themed wrapper for TypeBadgeComponent
+ */
+@Component({
+  selector: 'ds-themed-type-badge',
+  styleUrls: [],
+  templateUrl: '../../../../shared/theme-support/themed.component.html',
+})
+export class ThemedTypeBadgeComponent extends ThemedComponent<TypeBadgeComponent> {
+  @Input() object: DSpaceObject;
+
+  protected inAndOutputNames: (keyof TypeBadgeComponent & keyof this)[] = ['object'];
+
+  protected getComponentName(): string {
+    return 'TypeBadgeComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../../themes/${themeName}/app/shared/object-list/badges/type-badge/type-badge.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./type-badge.component`);
+  }
+}

src/app/shared/object-list/badges/type-badge/type-badge.component.html

@@ -1,3 +1,3 @@
-<div *ngIf="typeMessage">
+<span *ngIf="typeMessage">
   <span class="badge badge-info">{{ typeMessage | translate }}</span>
-</div>
+</span>

src/app/shared/object-list/badges/type-badge/type-badge.component.spec.ts

@@ -1,8 +1,8 @@
-import { Item } from '../../../core/shared/item.model';
+import { Item } from '../../../../core/shared/item.model';
 import { of as observableOf } from 'rxjs';
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 import { TranslateModule } from '@ngx-translate/core';
-import { TruncatePipe } from '../../utils/truncate.pipe';
+import { TruncatePipe } from '../../../utils/truncate.pipe';
 import { ChangeDetectionStrategy, NO_ERRORS_SCHEMA } from '@angular/core';
 import { By } from '@angular/platform-browser';
 import { TypeBadgeComponent } from './type-badge.component';

src/app/shared/object-list/badges/type-badge/type-badge.component.ts

@@ -1,7 +1,7 @@
 import { Component, Input } from '@angular/core';
-import { DSpaceObject } from '../../../core/shared/dspace-object.model';
+import { DSpaceObject } from '../../../../core/shared/dspace-object.model';
-import { hasValue, isEmpty } from '../../empty.util';
+import { hasValue, isEmpty } from '../../../empty.util';
-import { getResourceTypeValueFor } from '../../../core/cache/object-cache.reducer';
+import { getResourceTypeValueFor } from '../../../../core/cache/object-cache.reducer';
 
 @Component({
   selector: 'ds-type-badge',

src/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component.html

@@ -2,7 +2,7 @@
   <ng-container *ngIf="status">
     <ds-mydspace-item-status [status]="status"></ds-mydspace-item-status>
   </ng-container>
-  <ds-type-badge [object]="item"></ds-type-badge>
+  <ds-themed-badges [object]="item"></ds-themed-badges>
   <ds-truncatable [id]="item.id">
     <h3 [innerHTML]="item.firstMetadataValue('dc.title') || ('mydspace.results.no-title' | translate)" [ngClass]="{'lead': true,'text-muted': !item.firstMetadataValue('dc.title')}"></h3>
     <div>

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

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer" [routerLink]="['/collections/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
 <span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
 <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>

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

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"  [routerLink]="['/communities/' + dso.id]" class="lead" [innerHTML]="dsoTitle"></a>
 <span *ngIf="linkType == linkTypes.None" class="lead" [innerHTML]="dsoTitle"></span>
 <div *ngIf="dso.shortDescription" class="text-muted abstract-text" [innerHTML]="firstMetadataValue('dc.description.abstract')"></div>

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

@@ -1,4 +1,4 @@
-<ds-type-badge *ngIf="showLabel" [object]="dso"></ds-type-badge>
+<ds-themed-badges *ngIf="showLabel" [object]="dso"></ds-themed-badges>
 
 <ds-truncatable [id]="dso.id" *ngIf="object !== undefined && object !== null">
     <a *ngIf="linkType != linkTypes.None" [target]="(linkType == linkTypes.ExternalLink) ? '_blank' : '_self'" rel="noopener noreferrer"

src/app/shared/shared.module.ts

@@ -111,7 +111,7 @@ import { CollectionSelectComponent } from './object-select/collection-select/col
 import { FilterInputSuggestionsComponent } from './input-suggestions/filter-suggestions/filter-input-suggestions.component';
 import { DsoInputSuggestionsComponent } from './input-suggestions/dso-input-suggestions/dso-input-suggestions.component';
 import { ItemGridElementComponent } from './object-grid/item-grid-element/item-types/item/item-grid-element.component';
-import { TypeBadgeComponent } from './object-list/type-badge/type-badge.component';
+import { TypeBadgeComponent } from './object-list/badges/type-badge/type-badge.component';
 import { MetadataRepresentationLoaderComponent } from './metadata-representation/metadata-representation-loader.component';
 import { MetadataRepresentationDirective } from './metadata-representation/metadata-representation.directive';
 import { ListableObjectComponentLoaderComponent } from './object-collection/shared/listable-object/listable-object-component-loader.component';
@@ -174,6 +174,11 @@ 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';
+import { StatusBadgeComponent } from './object-list/badges/status-badge/status-badge.component';
+import { BadgesComponent } from './object-list/badges/badges.component';
+import { ThemedBadgesComponent } from './object-list/badges/themed-badges.component';
+import { ThemedStatusBadgeComponent } from './object-list/badges/status-badge/themed-status-badge.component';
+import { ThemedTypeBadgeComponent } from './object-list/badges/type-badge/themed-type-badge.component';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -296,6 +301,11 @@ const COMPONENTS = [
   AbstractTrackableComponent,
   ComcolMetadataComponent,
   TypeBadgeComponent,
+  ThemedTypeBadgeComponent,
+  StatusBadgeComponent,
+  ThemedStatusBadgeComponent,
+  BadgesComponent,
+  ThemedBadgesComponent,
   BrowseByComponent,
   AbstractTrackableComponent,
 
@@ -453,6 +463,7 @@ const DIRECTIVES = [
     ...SHARED_ITEM_PAGE_COMPONENTS,
     ItemVersionsSummaryModalComponent,
     ItemVersionsDeleteModalComponent,
+    BadgesComponent,
   ],
   providers: [
     ...PROVIDERS

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

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

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { StatusBadgeComponent as BaseComponent } from 'src/app/shared/object-list/badges/status-badge/status-badge.component';
+
+@Component({
+  selector: 'ds-status-badge',
+  // styleUrls: ['./status-badge.component.scss'],
+  // templateUrl: './status-badge.component.html',
+  templateUrl: '../../../../../../../app/shared/object-list/badges/status-badge/status-badge.component.html',
+})
+export class StatusBadgeComponent extends BaseComponent {
+}

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

@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+import { TypeBadgeComponent as BaseComponent } from 'src/app/shared/object-list/badges/type-badge/type-badge.component';
+
+@Component({
+  selector: 'ds-type-badge',
+  // styleUrls: ['./type-badge.component.scss'],
+  // templateUrl: './type-badge.component.html',
+  templateUrl: '../../../../../../../app/shared/object-list/badges/type-badge/type-badge.component.html',
+})
+export class TypeBadgeComponent extends BaseComponent {
+}

src/themes/custom/theme.module.ts

@@ -87,6 +87,9 @@ 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';
+import { BadgesComponent } from './app/shared/object-list/badges/badges.component';
+import { StatusBadgeComponent } from './app/shared/object-list/badges/status-badge/status-badge.component';
+import { TypeBadgeComponent } from './app/shared/object-list/badges/type-badge/type-badge.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -132,7 +135,10 @@ const DECLARATIONS = [
   FeedbackComponent,
   SearchFiltersComponent,
   SearchSidebarComponent,
-  ListableObjectComponentLoaderComponent
+  ListableObjectComponentLoaderComponent,
+  BadgesComponent,
+  StatusBadgeComponent,
+  TypeBadgeComponent,
 ];
 
 @NgModule({