Automatically migrate to new themeable component convention

cypress/e2e/login-modal.cy.ts

@@ -3,31 +3,31 @@ import { testA11y } from 'cypress/support/utils';
 const page = {
   openLoginMenu() {
     // Click the "Log In" dropdown menu in header
-    cy.get('ds-themed-header [data-test="login-menu"]').click();
+    cy.get('ds-header [data-test="login-menu"]').click();
   },
   openUserMenu() {
     // Once logged in, click the User menu in header
-    cy.get('ds-themed-header [data-test="user-menu"]').click();
+    cy.get('ds-header [data-test="user-menu"]').click();
   },
   submitLoginAndPasswordByPressingButton(email, password) {
     // Enter email
-    cy.get('ds-themed-header [data-test="email"]').type(email);
+    cy.get('ds-header [data-test="email"]').type(email);
     // Enter password
-    cy.get('ds-themed-header [data-test="password"]').type(password);
+    cy.get('ds-header [data-test="password"]').type(password);
     // Click login button
-    cy.get('ds-themed-header [data-test="login-button"]').click();
+    cy.get('ds-header [data-test="login-button"]').click();
   },
   submitLoginAndPasswordByPressingEnter(email, password) {
     // In opened Login modal, fill out email & password, then click Enter
-    cy.get('ds-themed-header [data-test="email"]').type(email);
+    cy.get('ds-header [data-test="email"]').type(email);
-    cy.get('ds-themed-header [data-test="password"]').type(password);
+    cy.get('ds-header [data-test="password"]').type(password);
-    cy.get('ds-themed-header [data-test="password"]').type('{enter}');
+    cy.get('ds-header [data-test="password"]').type('{enter}');
   },
   submitLogoutByPressingButton() {
     // This is the POST command that will actually log us out
     cy.intercept('POST', '/server/api/authn/logout').as('logout');
     // Click logout button
-    cy.get('ds-themed-header [data-test="logout-button"]').click();
+    cy.get('ds-header [data-test="logout-button"]').click();
     // Wait until above POST command responds before continuing
     // (This ensures next action waits until logout completes)
     cy.wait('@logout');
@@ -102,10 +102,10 @@ describe('Login Modal', () => {
     page.openLoginMenu();
 
     // Registration link should be visible
-    cy.get('ds-themed-header [data-test="register"]').should('be.visible');
+    cy.get('ds-header [data-test="register"]').should('be.visible');
 
     // Click registration link & you should go to registration page
-    cy.get('ds-themed-header [data-test="register"]').click();
+    cy.get('ds-header [data-test="register"]').click();
     cy.location('pathname').should('eq', '/register');
     cy.get('ds-register-email').should('exist');
 
@@ -119,10 +119,10 @@ describe('Login Modal', () => {
     page.openLoginMenu();
 
     // Forgot password link should be visible
-    cy.get('ds-themed-header [data-test="forgot"]').should('be.visible');
+    cy.get('ds-header [data-test="forgot"]').should('be.visible');
 
     // Click link & you should go to Forgot Password page
-    cy.get('ds-themed-header [data-test="forgot"]').click();
+    cy.get('ds-header [data-test="forgot"]').click();
     cy.location('pathname').should('eq', '/forgot');
     cy.get('ds-forgot-email').should('exist');
 

cypress/e2e/search-navbar.cy.ts

@@ -1,15 +1,15 @@
 const page = {
   fillOutQueryInNavBar(query) {
     // Click the magnifying glass
-    cy.get('ds-themed-header [data-test="header-search-icon"]').click();
+    cy.get('ds-header [data-test="header-search-icon"]').click();
     // Fill out a query in input that appears
-    cy.get('ds-themed-header [data-test="header-search-box"]').type(query);
+    cy.get('ds-header [data-test="header-search-box"]').type(query);
   },
   submitQueryByPressingEnter() {
-    cy.get('ds-themed-header [data-test="header-search-box"]').type('{enter}');
+    cy.get('ds-header [data-test="header-search-box"]').type('{enter}');
   },
   submitQueryByPressingIcon() {
-    cy.get('ds-themed-header [data-test="header-search-icon"]').click();
+    cy.get('ds-header [data-test="header-search-icon"]').click();
   },
 };
 

lint/src/rules/ts/themed-component-usages.ts

@@ -22,7 +22,6 @@ import {
   DISALLOWED_THEME_SELECTORS,
   fixSelectors,
   getThemeableComponentByBaseClass,
-  inThemedComponentFile,
   isAllowedUnthemedUsage,
 } from '../../util/theme-support';
 import {

src/app/access-control/bulk-access/browse/bulk-access-browse.component.html

@@ -23,10 +23,10 @@
             <a ngbNavLink>{{'admin.access-control.bulk-access-browse.search.header' | translate}}</a>
             <ng-template ngbNavContent>
               <div class="mx-n3">
-                <ds-themed-search [configuration]="'administrativeBulkAccess'"
+                <ds-search [configuration]="'administrativeBulkAccess'"
                                   [selectable]="true"
                                   [selectionConfig]="{ repeatable: true, listId: listId }"
-                                  [showThumbnails]="false"></ds-themed-search>
+                                  [showThumbnails]="false"></ds-search>
               </div>
             </ng-template>
           </li>

src/app/access-control/epeople-registry/epeople-registry.component.html

@@ -41,7 +41,7 @@
         </div>
       </form>
 
-      <ds-themed-loading *ngIf="searching$ | async"></ds-themed-loading>
+      <ds-loading *ngIf="searching$ | async"></ds-loading>
       <ds-pagination
         *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (searching$ | async) !== true"
         [paginationOptions]="config"

src/app/access-control/epeople-registry/eperson-form/eperson-form.component.html

@@ -42,12 +42,12 @@
         </button>
       </ds-form>
 
-      <ds-themed-loading [showMessage]="false" *ngIf="!formGroup"></ds-themed-loading>
+      <ds-loading [showMessage]="false" *ngIf="!formGroup"></ds-loading>
 
       <div *ngIf="epersonService.getActiveEPerson() | async">
         <h2>{{messagePrefix + '.groupsEPersonIsMemberOf' | translate}}</h2>
 
-        <ds-themed-loading [showMessage]="false" *ngIf="groups$ | async | dsHasNoValue"></ds-themed-loading>
+        <ds-loading [showMessage]="false" *ngIf="groups$ | async | dsHasNoValue"></ds-loading>
 
         <ds-pagination
           *ngIf="(groups$ | async)?.payload?.totalElements > 0"

src/app/access-control/group-registry/groups-registry.component.html

@@ -33,7 +33,7 @@
         </div>
       </form>
 
-      <ds-themed-loading *ngIf="loading$ | async"></ds-themed-loading>
+      <ds-loading *ngIf="loading$ | async"></ds-loading>
       <ds-pagination
         *ngIf="(pageInfoState$ | async)?.totalElements > 0 && (loading$ | async) !== true"
         [paginationOptions]="config"

src/app/admin/admin-notify-dashboard/admin-notify-logs/admin-notify-logs-result/admin-notify-logs-result.component.html

@@ -15,11 +15,11 @@
 
 
 <div>
-  <ds-themed-search
+  <ds-search
     [configuration]="selectedSearchConfig$ | async"
     [showViewModes]="false"
     [searchEnabled]="false"
     [context]="context"
-  ></ds-themed-search>
+  ></ds-search>
 </div>
 

src/app/admin/admin-search-page/admin-search-page.component.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 
 import { Context } from '../../core/shared/context.model';
-import { ConfigurationSearchPageComponent } from '../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
   selector: 'ds-admin-search-page',
   templateUrl: './admin-search-page.component.html',
   styleUrls: ['./admin-search-page.component.scss'],
   standalone: true,
-  imports: [ConfigurationSearchPageComponent],
+  imports: [ThemedConfigurationSearchPageComponent],
 })
 
 /**

src/app/admin/admin-sidebar/admin-sidebar.component.ts

@@ -41,7 +41,7 @@ import { ThemeService } from '../../shared/theme-support/theme.service';
  * Component representing the admin sidebar
  */
 @Component({
-  selector: 'ds-admin-sidebar',
+  selector: 'ds-base-admin-sidebar',
   templateUrl: './admin-sidebar.component.html',
   styleUrls: ['./admin-sidebar.component.scss'],
   animations: [slideSidebar],

src/app/admin/admin-sidebar/themed-admin-sidebar.component.ts

@@ -11,10 +11,11 @@ import { AdminSidebarComponent } from './admin-sidebar.component';
  * Themed wrapper for AdminSidebarComponent
  */
 @Component({
-  selector: 'ds-themed-admin-sidebar',
+  selector: 'ds-admin-sidebar',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [AdminSidebarComponent],
 })
 export class ThemedAdminSidebarComponent extends ThemedComponent<AdminSidebarComponent> {
 

src/app/admin/admin-workflow-page/admin-workflow-page.component.ts

@@ -1,14 +1,14 @@
 import { Component } from '@angular/core';
 
 import { Context } from '../../core/shared/context.model';
-import { ConfigurationSearchPageComponent } from '../../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../../search-page/themed-configuration-search-page.component';
 
 @Component({
   selector: 'ds-admin-workflow-page',
   templateUrl: './admin-workflow-page.component.html',
   styleUrls: ['./admin-workflow-page.component.scss'],
   standalone: true,
-  imports: [ConfigurationSearchPageComponent],
+  imports: [ThemedConfigurationSearchPageComponent],
 })
 
 /**

src/app/app.component.html

@@ -1,3 +1,3 @@
-<ds-themed-root
+<ds-root
   [shouldShowFullscreenLoader]="(isAuthBlocking$ | async) || (isThemeLoading$ | async)"
-  [shouldShowRouteLoader]="isRouteLoading$ | async"></ds-themed-root>
+  [shouldShowRouteLoader]="isRouteLoading$ | async"></ds-root>

src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.html

@@ -2,7 +2,7 @@
   <div class="container" *ngVar="(bitstreamFormatsRD$ | async) as formatsRD">
     <div class="row" *ngIf="bitstreamRD?.hasSucceeded && formatsRD?.hasSucceeded">
       <div class="col-md-2">
-        <ds-themed-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-themed-thumbnail>
+        <ds-thumbnail [thumbnail]="bitstreamRD?.payload"></ds-thumbnail>
       </div>
       <div class="col-md-10">
         <div class="container">
@@ -27,7 +27,7 @@
       </div>
     </div>
     <ds-error *ngIf="bitstreamRD?.hasFailed" message="{{'error.bitstream' | translate}}"></ds-error>
-    <ds-themed-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
+    <ds-loading *ngIf="!bitstreamRD || !formatsRD || bitstreamRD?.isLoading || formatsRD?.isLoading"
-                message="{{'loading.bitstream' | translate}}"></ds-themed-loading>
+                message="{{'loading.bitstream' | translate}}"></ds-loading>
   </div>
 </ng-container>

src/app/bitstream-page/edit-bitstream-page/edit-bitstream-page.component.ts

@@ -80,7 +80,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
 import { ThemedThumbnailComponent } from '../../thumbnail/themed-thumbnail.component';
 
 @Component({
-  selector: 'ds-edit-bitstream-page',
+  selector: 'ds-base-edit-bitstream-page',
   styleUrls: ['./edit-bitstream-page.component.scss'],
   templateUrl: './edit-bitstream-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/bitstream-page/edit-bitstream-page/themed-edit-bitstream-page.component.ts

@@ -4,10 +4,11 @@ import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { EditBitstreamPageComponent } from './edit-bitstream-page.component';
 
 @Component({
-  selector: 'ds-themed-edit-bitstream-page',
+  selector: 'ds-edit-bitstream-page',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [EditBitstreamPageComponent],
 })
 export class ThemedEditBitstreamPageComponent extends ThemedComponent<EditBitstreamPageComponent> {
   protected getComponentName(): string {

src/app/breadcrumbs/breadcrumbs.component.ts

@@ -18,7 +18,7 @@ import { BreadcrumbsService } from './breadcrumbs.service';
  * Component representing the breadcrumbs of a page
  */
 @Component({
-  selector: 'ds-breadcrumbs',
+  selector: 'ds-base-breadcrumbs',
   templateUrl: './breadcrumbs.component.html',
   styleUrls: ['./breadcrumbs.component.scss'],
   standalone: true,

src/app/breadcrumbs/themed-breadcrumbs.component.ts

@@ -7,10 +7,11 @@ import { BreadcrumbsComponent } from './breadcrumbs.component';
  * Themed wrapper for BreadcrumbsComponent
  */
 @Component({
-  selector: 'ds-themed-breadcrumbs',
+  selector: 'ds-breadcrumbs',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [BreadcrumbsComponent],
 })
 export class ThemedBreadcrumbsComponent extends ThemedComponent<BreadcrumbsComponent> {
   protected getComponentName(): string {

src/app/browse-by/browse-by-date/browse-by-date.component.ts

@@ -35,7 +35,6 @@ import { DSpaceObjectDataService } from '../../core/data/dspace-object-data.serv
 import { RemoteData } from '../../core/data/remote-data';
 import { PaginationService } from '../../core/pagination/pagination.service';
 import { Item } from '../../core/shared/item.model';
-import { BrowseByComponent } from '../../shared/browse-by/browse-by.component';
 import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
 import { ComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/comcol-page-content.component';
 import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
@@ -72,7 +71,6 @@ import {
     ComcolPageContentComponent,
     DsoEditMenuComponent,
     ThemedComcolPageBrowseByComponent,
-    BrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,

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

@@ -1,6 +1,6 @@
 <section class="comcol-page-browse-section">
   <div class="browse-by-metadata w-100">
-    <ds-themed-browse-by *ngIf="(loading$ | async) !== true" class="col-xs-12 w-100"
+    <ds-browse-by *ngIf="(loading$ | async) !== true" class="col-xs-12 w-100"
                          title="{{'browse.title' | translate:{
                            field: 'browse.metadata.' + browseId | translate,
                            startsWith: (startsWith)? ('browse.startsWith' | translate: { startsWith: '&quot;' + startsWith + '&quot;' }) : '',
@@ -14,8 +14,8 @@
                          [startsWithOptions]="startsWithOptions"
                          (prev)="goPrev()"
                          (next)="goNext()">
-    </ds-themed-browse-by>
+    </ds-browse-by>
-    <ds-themed-loading *ngIf="loading$ | async"
+    <ds-loading *ngIf="loading$ | async"
-                       message="{{'loading.browse-by-page' | translate}}"></ds-themed-loading>
+                       message="{{'loading.browse-by-page' | translate}}"></ds-loading>
   </div>
 </section>

src/app/browse-by/browse-by-metadata/browse-by-metadata.component.ts

@@ -45,7 +45,6 @@ import { BrowseEntry } from '../../core/shared/browse-entry.model';
 import { Context } from '../../core/shared/context.model';
 import { Item } from '../../core/shared/item.model';
 import { getFirstSucceededRemoteData } from '../../core/shared/operators';
-import { BrowseByComponent } from '../../shared/browse-by/browse-by.component';
 import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
 import { ComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/comcol-page-content.component';
 import { ThemedComcolPageHandleComponent } from '../../shared/comcol/comcol-page-handle/themed-comcol-page-handle.component';
@@ -78,7 +77,6 @@ export const BBM_PAGINATION_ID = 'bbm';
     ComcolPageContentComponent,
     DsoEditMenuComponent,
     ThemedComcolPageBrowseByComponent,
-    BrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,

src/app/browse-by/browse-by-taxonomy/browse-by-taxonomy.component.ts

@@ -27,7 +27,6 @@ import { Context } from '../../core/shared/context.model';
 import { HierarchicalBrowseDefinition } from '../../core/shared/hierarchical-browse-definition.model';
 import { VocabularyEntryDetail } from '../../core/submission/vocabularies/models/vocabulary-entry-detail.model';
 import { VocabularyOptions } from '../../core/submission/vocabularies/models/vocabulary-options.model';
-import { BrowseByComponent } from '../../shared/browse-by/browse-by.component';
 import { ThemedBrowseByComponent } from '../../shared/browse-by/themed-browse-by.component';
 import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
 import { ComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/comcol-page-content.component';
@@ -55,7 +54,6 @@ import { BrowseByDataType } from '../browse-by-switcher/browse-by-data-type';
     ComcolPageContentComponent,
     DsoEditMenuComponent,
     ThemedComcolPageBrowseByComponent,
-    BrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,

src/app/browse-by/browse-by-title/browse-by-title.component.ts

@@ -15,7 +15,6 @@ import {
   SortDirection,
   SortOptions,
 } from '../../core/cache/models/sort-options.model';
-import { BrowseByComponent } from '../../shared/browse-by/browse-by.component';
 import { ThemedBrowseByComponent } from '../../shared/browse-by/themed-browse-by.component';
 import { ThemedComcolPageBrowseByComponent } from '../../shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component';
 import { ComcolPageContentComponent } from '../../shared/comcol/comcol-page-content/comcol-page-content.component';
@@ -47,7 +46,6 @@ import {
     ComcolPageContentComponent,
     DsoEditMenuComponent,
     ThemedComcolPageBrowseByComponent,
-    BrowseByComponent,
     TranslateModule,
     ThemedLoadingComponent,
     ThemedBrowseByComponent,

src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html

@@ -28,14 +28,14 @@
           <ng-template ngbNavContent>
             <div class="row mt-2">
               <div class="col-12 col-lg-6">
-                <ds-themed-search-form id="search-form"
+                <ds-search-form id="search-form"
                                 [query]="(searchOptions$ | async)?.query"
                                 [scope]="(searchOptions$ | async)?.scope"
                                 [currentUrl]="'./'"
                                 [inPlaceSearch]="true"
                                 [searchPlaceholder]="'collection.edit.item-mapper.search-form.placeholder' | translate"
                                 (submitSearch)="performedSearch = true">
-                </ds-themed-search-form>
+                </ds-search-form>
               </div>
             </div>
 

src/app/collection-page/collection-page.component.html

@@ -17,10 +17,10 @@
             </ds-comcol-page-logo>
 
             <!-- Handle -->
-            <ds-themed-comcol-page-handle
+            <ds-comcol-page-handle
                 [content]="collection.handle"
                 [title]="'collection.page.handle'">
-            </ds-themed-comcol-page-handle>
+            </ds-comcol-page-handle>
             <!-- Introductory text -->
             <ds-comcol-page-content
                 [content]="collection.introductoryText"
@@ -37,10 +37,10 @@
         </div>
         <section class="comcol-page-browse-section">
           <!-- Browse-By Links -->
-          <ds-themed-comcol-page-browse-by
+          <ds-comcol-page-browse-by
               [id]="collection.id"
               [contentType]="collection.type">
-          </ds-themed-comcol-page-browse-by>
+          </ds-comcol-page-browse-by>
 
           <router-outlet></router-outlet>
         </section>
@@ -55,7 +55,7 @@
     </div>
     <ds-error *ngIf="collectionRD?.hasFailed"
               message="{{'error.collection' | translate}}"></ds-error>
-    <ds-themed-loading *ngIf="collectionRD?.isLoading"
+    <ds-loading *ngIf="collectionRD?.isLoading"
-                       message="{{'loading.collection' | translate}}"></ds-themed-loading>
+                       message="{{'loading.collection' | translate}}"></ds-loading>
   </div>
 </div>

src/app/collection-page/collection-page.component.ts

@@ -54,7 +54,7 @@ import { ViewTrackerComponent } from '../statistics/angulartics/dspace/view-trac
 import { getCollectionPageRoute } from './collection-page-routing-paths';
 
 @Component({
-  selector: 'ds-collection-page',
+  selector: 'ds-base-collection-page',
   styleUrls: ['./collection-page.component.scss'],
   templateUrl: './collection-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/collection-page/edit-collection-page/collection-source/collection-source.component.html

@@ -25,7 +25,7 @@
         <label class="form-check-label"
                for="externalSourceCheck">{{ 'collection.edit.tabs.source.external' | translate }}</label>
     </div>
-    <ds-themed-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-themed-loading>
+    <ds-loading *ngIf="!contentSource" [message]="'loading.content-source' | translate"></ds-loading>
     <h3 *ngIf="contentSource && (contentSource?.harvestType !== harvestTypeNone)">{{ 'collection.edit.tabs.source.form.head' | translate }}</h3>
 </div>
 <div class="row">

src/app/collection-page/edit-item-template-page/edit-item-template-page.component.html

@@ -3,10 +3,10 @@
     <div class="col-12" *ngVar="(itemRD$ | async) as itemRD">
       <ng-container *ngIf="itemRD?.hasSucceeded">
         <h1 class="border-bottom">{{ 'collection.edit.template.head' | translate:{ collection: dsoNameService.getName(collection) } }}</h1>
-        <ds-themed-dso-edit-metadata [updateDataService]="itemTemplateService" [dso]="itemRD?.payload"></ds-themed-dso-edit-metadata>
+        <ds-dso-edit-metadata [updateDataService]="itemTemplateService" [dso]="itemRD?.payload"></ds-dso-edit-metadata>
         <button [routerLink]="getCollectionEditUrl(collection)" class="btn btn-outline-secondary">{{ 'collection.edit.template.cancel' | translate }}</button>
       </ng-container>
-      <ds-themed-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-themed-loading>
+      <ds-loading *ngIf="itemRD?.isLoading" [message]="'collection.edit.template.loading' | translate"></ds-loading>
       <ds-alert *ngIf="itemRD?.hasFailed" [type]="AlertTypeEnum.Error" [content]="'collection.edit.template.error' | translate"></ds-alert>
     </div>
   </div>

src/app/collection-page/edit-item-template-page/edit-item-template-page.component.ts

@@ -24,7 +24,6 @@ import { RemoteData } from '../../core/data/remote-data';
 import { Collection } from '../../core/shared/collection.model';
 import { Item } from '../../core/shared/item.model';
 import { getFirstSucceededRemoteDataPayload } from '../../core/shared/operators';
-import { DsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/dso-edit-metadata.component';
 import { ThemedDsoEditMetadataComponent } from '../../dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component';
 import { AlertComponent } from '../../shared/alert/alert.component';
 import { AlertType } from '../../shared/alert/alert-type';
@@ -33,11 +32,10 @@ import { VarDirective } from '../../shared/utils/var.directive';
 import { getCollectionEditRoute } from '../collection-page-routing-paths';
 
 @Component({
-  selector: 'ds-edit-item-template-page',
+  selector: 'ds-base-edit-item-template-page',
   templateUrl: './edit-item-template-page.component.html',
   imports: [
     ThemedDsoEditMetadataComponent,
-    DsoEditMetadataComponent,
     RouterLink,
     AsyncPipe,
     VarDirective,

src/app/collection-page/edit-item-template-page/themed-edit-item-template-page.component.ts

@@ -4,10 +4,11 @@ import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { EditItemTemplatePageComponent } from './edit-item-template-page.component';
 
 @Component({
-  selector: 'ds-themed-edit-item-template-page',
+  selector: 'ds-edit-item-template-page',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [EditItemTemplatePageComponent],
 })
 /**
  * Component for editing the item template of a collection

src/app/collection-page/themed-collection-page.component.ts

@@ -7,10 +7,11 @@ import { CollectionPageComponent } from './collection-page.component';
  * Themed wrapper for CollectionPageComponent
  */
 @Component({
-  selector: 'ds-themed-collection-page',
+  selector: 'ds-collection-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [CollectionPageComponent],
 })
 export class ThemedCollectionPageComponent extends ThemedComponent<CollectionPageComponent> {
   protected getComponentName(): string {

src/app/community-list-page/community-list-page.component.html

@@ -1,4 +1,4 @@
 <div class="container">
   <h1>{{ 'communityList.title' | translate }}</h1>
-  <ds-themed-community-list></ds-themed-community-list>
+  <ds-community-list></ds-community-list>
 </div>

src/app/community-list-page/community-list-page.component.ts

@@ -8,7 +8,7 @@ import { ThemedCommunityListComponent } from './community-list/themed-community-
  * navigated to with community-list.page.routing.module
  */
 @Component({
-  selector: 'ds-community-list-page',
+  selector: 'ds-base-community-list-page',
   templateUrl: './community-list-page.component.html',
   standalone: true,
   imports: [ThemedCommunityListComponent, TranslateModule],

src/app/community-list-page/community-list/community-list.component.html

@@ -1,4 +1,4 @@
-<ds-themed-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-themed-loading>
+<ds-loading *ngIf="(dataSource.loading$ | async) && !loadingNode" class="ds-themed-loading"></ds-loading>
 <cdk-tree [dataSource]="dataSource" [treeControl]="treeControl" [trackBy]="trackBy">
   <!-- This is the tree node template for show more node -->
   <cdk-tree-node *cdkTreeNodeDef="let node; when: isShowMore" cdkTreeNodePadding
@@ -12,7 +12,7 @@
            class="btn btn-outline-primary btn-sm" role="button">
            <i class="fas fa-angle-down"></i> {{ 'communityList.showMore' | translate }}
         </button>
-        <ds-themed-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-themed-loading>
+        <ds-loading *ngIf="node===loadingNode && dataSource.loading$ | async" class="ds-themed-loading"></ds-loading>
       </div>
     </div>
     <div class="text-muted" cdkTreeNodePadding>
@@ -61,7 +61,7 @@
       <span aria-hidden="true" class="btn btn-default invisible">
         <span class="fa fa-chevron-right"></span>
       </span>
-      <ds-themed-loading class="ds-themed-loading"></ds-themed-loading>
+      <ds-loading class="ds-themed-loading"></ds-loading>
     </div>
   </cdk-tree-node>
   <!-- This is the tree node template for leaf nodes (collections and (sub)coms without children) -->

src/app/community-list-page/community-list/community-list.component.ts

@@ -38,7 +38,7 @@ import { FlatNode } from '../flat-node.model';
  * Which nodes were expanded is kept in the store, so this persists across pages.
  */
 @Component({
-  selector: 'ds-community-list',
+  selector: 'ds-base-community-list',
   templateUrl: './community-list.component.html',
   styleUrls: ['./community-list.component.scss'],
   standalone: true,

src/app/community-list-page/community-list/themed-community-list.component.ts

@@ -5,10 +5,11 @@ import { CommunityListComponent } from './community-list.component';
 
 
 @Component({
-  selector: 'ds-themed-community-list',
+  selector: 'ds-community-list',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [CommunityListComponent],
 })
 export class ThemedCommunityListComponent extends ThemedComponent<CommunityListComponent> {
   protected getComponentName(): string {

src/app/community-list-page/themed-community-list-page.component.ts

@@ -7,10 +7,11 @@ import { CommunityListPageComponent } from './community-list-page.component';
  * Themed wrapper for CommunityListPageComponent
  */
 @Component({
-  selector: 'ds-themed-community-list-page',
+  selector: 'ds-community-list-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [CommunityListPageComponent],
 })
 export class ThemedCommunityListPageComponent extends ThemedComponent<CommunityListPageComponent> {
   protected getComponentName(): string {

src/app/community-page/community-page.component.html

@@ -10,8 +10,8 @@
           <ds-comcol-page-logo *ngIf="logoRD$" [logo]="(logoRD$ | async)?.payload" [alternateText]="'community.logo' | translate">
           </ds-comcol-page-logo>
           <!-- Handle -->
-          <ds-themed-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
+          <ds-comcol-page-handle [content]="communityPayload.handle" [title]="'community.page.handle'">
-          </ds-themed-comcol-page-handle>
+          </ds-comcol-page-handle>
           <!-- Introductory text -->
           <ds-comcol-page-content [content]="communityPayload.introductoryText" [hasInnerHtml]="true">
           </ds-comcol-page-content>
@@ -25,8 +25,8 @@
       <section class="comcol-page-browse-section">
 
         <!-- Browse-By Links -->
-        <ds-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
+        <ds-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
-        </ds-themed-comcol-page-browse-by>
+        </ds-comcol-page-browse-by>
 
         <router-outlet></router-outlet>
       </section>
@@ -39,5 +39,5 @@
   </div>
 
   <ds-error *ngIf="communityRD?.hasFailed" message="{{'error.community' | translate}}"></ds-error>
-  <ds-themed-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-themed-loading>
+  <ds-loading *ngIf="communityRD?.isLoading" message="{{'loading.community' | translate}}"></ds-loading>
 </div>

src/app/community-page/community-page.component.ts

@@ -47,7 +47,7 @@ import { ThemedCollectionPageSubCollectionListComponent } from './sections/sub-c
 import { ThemedCommunityPageSubCommunityListComponent } from './sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component';
 
 @Component({
-  selector: 'ds-community-page',
+  selector: 'ds-base-community-page',
   styleUrls: ['./community-page.component.scss'],
   templateUrl: './community-page.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,

src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.html

@@ -9,5 +9,5 @@
     </ds-viewable-collection>
   </div>
   <ds-error *ngIf="subCollectionsRD?.hasFailed" message="{{'error.sub-collections' | translate}}"></ds-error>
-  <ds-themed-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-themed-loading>
+  <ds-loading *ngIf="subCollectionsRD?.isLoading" message="{{'loading.sub-collections' | translate}}"></ds-loading>
 </ng-container>

src/app/community-page/sections/sub-com-col-section/sub-collection-list/community-page-sub-collection-list.component.ts

@@ -36,7 +36,7 @@ import { PaginationComponentOptions } from '../../../../shared/pagination/pagina
 import { VarDirective } from '../../../../shared/utils/var.directive';
 
 @Component({
-  selector: 'ds-community-page-sub-collection-list',
+  selector: 'ds-base-community-page-sub-collection-list',
   styleUrls: ['./community-page-sub-collection-list.component.scss'],
   templateUrl: './community-page-sub-collection-list.component.html',
   animations: [fadeIn],

src/app/community-page/sections/sub-com-col-section/sub-collection-list/themed-community-page-sub-collection-list.component.ts

@@ -8,10 +8,11 @@ import { ThemedComponent } from '../../../../shared/theme-support/themed.compone
 import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component';
 
 @Component({
-  selector: 'ds-themed-community-page-sub-collection-list',
+  selector: 'ds-community-page-sub-collection-list',
   styleUrls: [],
   templateUrl: '../../../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [CommunityPageSubCollectionListComponent],
 })
 export class ThemedCollectionPageSubCollectionListComponent extends ThemedComponent<CommunityPageSubCollectionListComponent> {
   @Input() community: Community;

src/app/community-page/sections/sub-com-col-section/sub-com-col-section.component.html

@@ -1,8 +1,8 @@
 <ng-container *ngIf="(community$ | async) as community">
-  <ds-themed-community-page-sub-community-list
+  <ds-community-page-sub-community-list
       [community]="community">
-  </ds-themed-community-page-sub-community-list>
+  </ds-community-page-sub-community-list>
-  <ds-themed-community-page-sub-collection-list
+  <ds-community-page-sub-collection-list
       [community]="community">
-  </ds-themed-community-page-sub-collection-list>
+  </ds-community-page-sub-collection-list>
 </ng-container>

src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.html

@@ -9,5 +9,5 @@
     </ds-viewable-collection>
   </div>
   <ds-error *ngIf="subCommunitiesRD?.hasFailed" message="{{'error.sub-communities' | translate}}"></ds-error>
-  <ds-themed-loading *ngIf="subCommunitiesRD?.isLoading" message="{{'loading.sub-communities' | translate}}"></ds-themed-loading>
+  <ds-loading *ngIf="subCommunitiesRD?.isLoading" message="{{'loading.sub-communities' | translate}}"></ds-loading>
 </ng-container>

src/app/community-page/sections/sub-com-col-section/sub-community-list/community-page-sub-community-list.component.ts

@@ -35,7 +35,7 @@ import { PaginationComponentOptions } from '../../../../shared/pagination/pagina
 import { VarDirective } from '../../../../shared/utils/var.directive';
 
 @Component({
-  selector: 'ds-community-page-sub-community-list',
+  selector: 'ds-base-community-page-sub-community-list',
   styleUrls: ['./community-page-sub-community-list.component.scss'],
   templateUrl: './community-page-sub-community-list.component.html',
   animations: [fadeIn],

src/app/community-page/sections/sub-com-col-section/sub-community-list/themed-community-page-sub-community-list.component.ts

@@ -8,10 +8,11 @@ import { ThemedComponent } from '../../../../shared/theme-support/themed.compone
 import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component';
 
 @Component({
-  selector: 'ds-themed-community-page-sub-community-list',
+  selector: 'ds-community-page-sub-community-list',
   styleUrls: [],
   templateUrl: '../../../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [CommunityPageSubCommunityListComponent],
 })
 export class ThemedCommunityPageSubCommunityListComponent extends ThemedComponent<CommunityPageSubCommunityListComponent> {
 

src/app/community-page/themed-community-page.component.ts

@@ -7,10 +7,11 @@ import { CommunityPageComponent } from './community-page.component';
  * Themed wrapper for CommunityPageComponent
  */
 @Component({
-  selector: 'ds-themed-community-page',
+  selector: 'ds-community-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [CommunityPageComponent],
 })
 export class ThemedCommunityPageComponent extends ThemedComponent<CommunityPageComponent> {
   protected getComponentName(): string {

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.html

@@ -55,7 +55,7 @@
     </div>
     <div class="d-flex" *ngIf="mdRepresentation">
       <a class="mr-2" target="_blank" [routerLink]="mdRepresentationItemRoute$ | async">{{ mdRepresentationName$ | async }}</a>
-      <ds-themed-type-badge [object]="mdRepresentation"></ds-themed-type-badge>
+      <ds-type-badge [object]="mdRepresentation"></ds-type-badge>
     </div>
   </div>
   <div class="ds-flex-cell ds-lang-cell" role="cell">

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata-value/dso-edit-metadata-value.component.spec.ts

@@ -221,7 +221,7 @@ describe('DsoEditMetadataValueComponent', () => {
 
   it('should not show a badge', () => {
     expect(
-      fixture.debugElement.query(By.css('ds-themed-type-badge')),
+      fixture.debugElement.query(By.css('ds-type-badge')),
     ).toBeNull();
   });
 
@@ -289,7 +289,7 @@ describe('DsoEditMetadataValueComponent', () => {
 
     it('should show a badge', () => {
       expect(
-        fixture.debugElement.query(By.css('ds-themed-type-badge')),
+        fixture.debugElement.query(By.css('ds-type-badge')),
       ).toBeTruthy();
     });
 

src/app/dso-shared/dso-edit-metadata/dso-edit-metadata.component.ts

@@ -53,7 +53,7 @@ import {
   hasValue,
   isNotEmpty,
 } from '../../shared/empty.util';
-import { LoadingComponent } from '../../shared/loading/loading.component';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { NotificationsService } from '../../shared/notifications/notifications.service';
 import { DsoEditMetadataFieldValuesComponent } from './dso-edit-metadata-field-values/dso-edit-metadata-field-values.component';
 import { DsoEditMetadataForm } from './dso-edit-metadata-form';
@@ -63,11 +63,11 @@ import { DsoEditMetadataValueHeadersComponent } from './dso-edit-metadata-value-
 import { MetadataFieldSelectorComponent } from './metadata-field-selector/metadata-field-selector.component';
 
 @Component({
-  selector: 'ds-dso-edit-metadata',
+  selector: 'ds-base-dso-edit-metadata',
   styleUrls: ['./dso-edit-metadata.component.scss'],
   templateUrl: './dso-edit-metadata.component.html',
   standalone: true,
-  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, LoadingComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, DsoEditMetadataHeadersComponent, MetadataFieldSelectorComponent, DsoEditMetadataValueHeadersComponent, DsoEditMetadataValueComponent, NgFor, DsoEditMetadataFieldValuesComponent, AlertComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
 })
 /**
  * Component showing a table of all metadata on a DSpaceObject and options to modify them

src/app/dso-shared/dso-edit-metadata/themed-dso-edit-metadata.component.ts

@@ -9,10 +9,11 @@ import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { DsoEditMetadataComponent } from './dso-edit-metadata.component';
 
 @Component({
-  selector: 'ds-themed-dso-edit-metadata',
+  selector: 'ds-dso-edit-metadata',
   styleUrls: [],
   templateUrl: './../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [DsoEditMetadataComponent],
 })
 export class ThemedDsoEditMetadataComponent extends ThemedComponent<DsoEditMetadataComponent> {
 

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

@@ -8,18 +8,18 @@
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-themed-thumbnail>
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType === linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-themed-thumbnail>
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
-      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+      <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="dsoTitle"></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

@@ -8,18 +8,18 @@
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-themed-thumbnail>
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType === linkTypes.None" class="card-img-top full-width">
                 <div>
-                    <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                    <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                    </ds-themed-thumbnail>
+                    </ds-thumbnail>
                 </div>
             </span>
     <div class="card-body">
-      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+      <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="dsoTitle"></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

@@ -8,18 +8,18 @@
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-themed-thumbnail>
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType === linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-themed-thumbnail>
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
-      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+      <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="dsoTitle"></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

@@ -12,7 +12,7 @@
     </span>
   </div>
   <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
-    <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+    <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
     <ds-truncatable [id]="dso.id">
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"

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

@@ -13,7 +13,7 @@ import { listableObjectComponent } from '../../../../../shared/object-collection
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TruncatableComponent } from '../../../../../shared/truncatable/truncatable.component';
 import { TruncatablePartComponent } from '../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
-import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbnail.component';
 
 @listableObjectComponent('JournalIssueSearchResult', ViewMode.ListElement)
 @Component({
@@ -21,7 +21,7 @@ import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component
   styleUrls: ['./journal-issue-search-result-list-element.component.scss'],
   templateUrl: './journal-issue-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe],
 })
 /**
  * The component for displaying a list element for an item search result of the type Journal Issue

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

@@ -12,7 +12,7 @@
     </span>
   </div>
   <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
-    <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+    <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
     <ds-truncatable [id]="dso.id">
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"

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

@@ -13,7 +13,7 @@ import { listableObjectComponent } from '../../../../../shared/object-collection
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TruncatableComponent } from '../../../../../shared/truncatable/truncatable.component';
 import { TruncatablePartComponent } from '../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
-import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbnail.component';
 
 @listableObjectComponent('JournalVolumeSearchResult', ViewMode.ListElement)
 @Component({
@@ -21,7 +21,7 @@ import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component
   styleUrls: ['./journal-volume-search-result-list-element.component.scss'],
   templateUrl: './journal-volume-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe],
 })
 /**
  * The component for displaying a list element for an item search result of the type Journal Volume

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

@@ -11,7 +11,7 @@
     </span>
   </div>
   <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
-    <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+    <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
     <ds-truncatable [id]="dso.id">
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'" [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [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.ts

@@ -13,7 +13,7 @@ import { listableObjectComponent } from '../../../../../shared/object-collection
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TruncatableComponent } from '../../../../../shared/truncatable/truncatable.component';
 import { TruncatablePartComponent } from '../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
-import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbnail.component';
 
 @listableObjectComponent('JournalSearchResult', ViewMode.ListElement)
 @Component({
@@ -21,7 +21,7 @@ import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component
   styleUrls: ['./journal-search-result-list-element.component.scss'],
   templateUrl: './journal-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe],
 })
 /**
  * The component for displaying a list element for an item search result of the type Journal

src/app/entity-groups/journal-entities/item-pages/journal-issue/journal-issue.component.html

@@ -1,13 +1,13 @@
-<ds-themed-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-themed-results-back-button>
+<ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-themed-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="mr-auto">
-  </ds-themed-item-page-title-field>
+  </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
+      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal-volume/journal-volume.component.html

@@ -1,13 +1,13 @@
-<ds-themed-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-themed-results-back-button>
+<ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-themed-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="mr-auto">
-  </ds-themed-item-page-title-field>
+  </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
+      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['publicationvolume.volumeNumber']"

src/app/entity-groups/journal-entities/item-pages/journal/journal.component.html

@@ -1,13 +1,13 @@
-<ds-themed-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-themed-results-back-button>
+<ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-themed-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="mr-auto">
-  </ds-themed-item-page-title-field>
+  </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"></ds-themed-thumbnail>
+      <ds-thumbnail [thumbnail]="object?.thumbnail | async"></ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field class="item-page-fields" [item]="object"
       [fields]="['creativeworkseries.issn']"

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

@@ -8,18 +8,18 @@
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-themed-thumbnail>
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType === linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-themed-thumbnail>
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
-      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+      <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="dsoTitle"></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

@@ -8,18 +8,18 @@
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-themed-thumbnail>
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType === linkTypes.None" class="card-img-top full-width">
             <div>
-                <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+                <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-                </ds-themed-thumbnail>
+                </ds-thumbnail>
             </div>
         </span>
     <div class="card-body">
-      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+      <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="dsoTitle"></h4>
       </ds-truncatable-part>

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

@@ -8,18 +8,18 @@
        [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null" [routerLink]="[itemPageRoute]"
        class="card-img-top full-width" [attr.title]="'search.results.view-result' | translate">
       <div>
-        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-themed-thumbnail>
+        </ds-thumbnail>
       </div>
     </a>
     <span *ngIf="linkType === linkTypes.None" class="card-img-top full-width">
       <div>
-        <ds-themed-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
+        <ds-thumbnail [thumbnail]="dso?.thumbnail | async" [limitWidth]="false">
-        </ds-themed-thumbnail>
+        </ds-thumbnail>
       </div>
     </span>
     <div class="card-body">
-      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+      <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
       <ds-truncatable-part [id]="dso.id" [minLines]="3" type="h4">
         <h4 class="card-title" [innerHTML]="dsoTitle"></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

@@ -18,7 +18,7 @@
         </span>
     </div>
     <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
-        <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+        <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
         <ds-truncatable [id]="dso.id">
             <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
                [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"

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

@@ -13,7 +13,7 @@ import { listableObjectComponent } from '../../../../../shared/object-collection
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TruncatableComponent } from '../../../../../shared/truncatable/truncatable.component';
 import { TruncatablePartComponent } from '../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
-import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbnail.component';
 
 @listableObjectComponent('OrgUnitSearchResult', ViewMode.ListElement)
 @Component({
@@ -21,7 +21,7 @@ import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component
   styleUrls: ['./org-unit-search-result-list-element.component.scss'],
   templateUrl: './org-unit-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, AsyncPipe, TranslateModule],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, AsyncPipe, TranslateModule],
 })
 /**
  * The component for displaying a list element for an item search result of the type Organisation Unit

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

@@ -18,7 +18,7 @@
     </span>
   </div>
   <div [ngClass]="showThumbnails ? 'col-9 col-md-10' : 'col-12'">
-    <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+    <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
     <ds-truncatable [id]="dso.id">
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"

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

@@ -23,7 +23,7 @@ import { ItemSearchResultListElementComponent } from '../../../../../shared/obje
 import { TruncatableComponent } from '../../../../../shared/truncatable/truncatable.component';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
 import { TruncatablePartComponent } from '../../../../../shared/truncatable/truncatable-part/truncatable-part.component';
-import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbnail.component';
 
 @listableObjectComponent('PersonSearchResult', ViewMode.ListElement)
 @Component({
@@ -31,7 +31,7 @@ import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component
   styleUrls: ['./person-search-result-list-element.component.scss'],
   templateUrl: './person-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe, TranslateModule],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, ThemedBadgesComponent, TruncatableComponent, TruncatablePartComponent, NgFor, AsyncPipe, TranslateModule],
 })
 /**
  * The component for displaying a list element for an item search result of the type Person

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

@@ -19,7 +19,7 @@
   </div>
   <div [ngClass]="showThumbnails ? 'col-9' : 'col-md-12'">
     <ds-truncatable [id]="dso.id">
-      <ds-themed-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-themed-badges>
+      <ds-badges *ngIf="showLabel" [object]="dso" [context]="context"></ds-badges>
       <a *ngIf="linkType !== linkTypes.None" [target]="(linkType === linkTypes.ExternalLink) ? '_blank' : '_self'"
          [attr.rel]="(linkType === linkTypes.ExternalLink) ? 'noopener noreferrer' : null"
          [routerLink]="[itemPageRoute]" class="lead item-list-title dont-break-out"

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

@@ -11,7 +11,7 @@ import { ThemedBadgesComponent } from '../../../../../shared/object-collection/s
 import { listableObjectComponent } from '../../../../../shared/object-collection/shared/listable-object/listable-object.decorator';
 import { ItemSearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/item-search-result/item-types/item/item-search-result-list-element.component';
 import { TruncatableComponent } from '../../../../../shared/truncatable/truncatable.component';
-import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbnail.component';
 
 @listableObjectComponent('ProjectSearchResult', ViewMode.ListElement)
 @Component({
@@ -19,7 +19,7 @@ import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component
   styleUrls: ['./project-search-result-list-element.component.scss'],
   templateUrl: './project-search-result-list-element.component.html',
   standalone: true,
-  imports: [NgIf, RouterLink, ThumbnailComponent, NgClass, TruncatableComponent, ThemedBadgesComponent, AsyncPipe],
+  imports: [NgIf, RouterLink, ThemedThumbnailComponent, NgClass, TruncatableComponent, ThemedBadgesComponent, AsyncPipe],
 })
 /**
  * The component for displaying a list element for an item search result of the type Project

src/app/entity-groups/research-entities/item-pages/org-unit/org-unit.component.html

@@ -1,18 +1,18 @@
-<ds-themed-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-themed-results-back-button>
+<ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-themed-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="mr-auto">
-  </ds-themed-item-page-title-field>
+  </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"
+      <ds-thumbnail [thumbnail]="object?.thumbnail | async"
                     [defaultImage]="'assets/images/orgunit-placeholder.svg'"
                     [alt]="'thumbnail.orgunit.alt'"
                     [placeholder]="'thumbnail.orgunit.placeholder'"
       >
-      </ds-themed-thumbnail>
+      </ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['organization.foundingDate']"

src/app/entity-groups/research-entities/item-pages/person/person.component.html

@@ -1,17 +1,17 @@
-<ds-themed-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-themed-results-back-button>
+<ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-themed-item-page-title-field class="mr-auto" [item]="object">
+  <ds-item-page-title-field class="mr-auto" [item]="object">
-  </ds-themed-item-page-title-field>
+  </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-themed-thumbnail [thumbnail]="object?.thumbnail | async"
+      <ds-thumbnail [thumbnail]="object?.thumbnail | async"
                     [defaultImage]="'assets/images/person-placeholder.svg'"
                     [alt]="'thumbnail.person.alt'"
                     [placeholder]="'thumbnail.person.placeholder'">
-      </ds-themed-thumbnail>
+      </ds-thumbnail>
     </ds-metadata-field-wrapper>
     <ds-generic-item-page-field [item]="object"
       [fields]="['person.email']"

src/app/entity-groups/research-entities/item-pages/project/project.component.html

@@ -1,29 +1,29 @@
-<ds-themed-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-themed-results-back-button>
+<ds-results-back-button *ngIf="showBackButton$ | async" [back]="back"></ds-results-back-button>
 <div class="d-flex flex-row">
-  <ds-themed-item-page-title-field [item]="object" class="mr-auto">
+  <ds-item-page-title-field [item]="object" class="mr-auto">
-  </ds-themed-item-page-title-field>
+  </ds-item-page-title-field>
   <ds-dso-edit-menu></ds-dso-edit-menu>
 </div>
 <div class="row">
   <div class="col-xs-12 col-md-4">
     <ds-metadata-field-wrapper [hideIfNoTextContent]="false">
-      <ds-themed-thumbnail
+      <ds-thumbnail
         [thumbnail]="object?.thumbnail | async"
         [defaultImage]="'assets/images/project-placeholder.svg'"
         [alt]="'thumbnail.project.alt'"
         [placeholder]="'thumbnail.project.placeholder'">
-      </ds-themed-thumbnail>
+      </ds-thumbnail>
     </ds-metadata-field-wrapper>
     <!--<ds-generic-item-page-field [item]="object"-->
       <!--[fields]="['project.identifier.status']"-->
       <!--[label]="'project.page.status'">-->
     <!--</ds-generic-item-page-field>-->
-    <ds-themed-metadata-representation-list
+    <ds-metadata-representation-list
       [parentItem]="object"
       [itemType]="'OrgUnit'"
       [metadataFields]="['project.contributor.other']"
       [label]="'project.page.contributor' | translate">
-    </ds-themed-metadata-representation-list>
+    </ds-metadata-representation-list>
     <ds-generic-item-page-field [item]="object"
       [fields]="['project.identifier.funder']"
       [label]="'project.page.funder'">

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

@@ -29,7 +29,7 @@ import { listableObjectComponent } from '../../../../../shared/object-collection
 import { SearchResultListElementComponent } from '../../../../../shared/object-list/search-result-list-element/search-result-list-element.component';
 import { SelectableListService } from '../../../../../shared/object-list/selectable-list/selectable-list.service';
 import { TruncatableService } from '../../../../../shared/truncatable/truncatable.service';
-import { ThumbnailComponent } from '../../../../../thumbnail/thumbnail.component';
+import { ThemedThumbnailComponent } from '../../../../../thumbnail/themed-thumbnail.component';
 import { NameVariantModalComponent } from '../../name-variant-modal/name-variant-modal.component';
 import { PersonInputSuggestionsComponent } from './person-suggestions/person-input-suggestions.component';
 
@@ -39,7 +39,7 @@ import { PersonInputSuggestionsComponent } from './person-suggestions/person-inp
   styleUrls: ['./person-search-result-list-submission-element.component.scss'],
   templateUrl: './person-search-result-list-submission-element.component.html',
   standalone: true,
-  imports: [NgIf, ThumbnailComponent, NgClass, PersonInputSuggestionsComponent, FormsModule, NgFor, AsyncPipe],
+  imports: [NgIf, ThemedThumbnailComponent, NgClass, PersonInputSuggestionsComponent, FormsModule, NgFor, AsyncPipe],
 })
 
 /**

src/app/footer/footer.component.ts

@@ -19,7 +19,7 @@ import { KlaroService } from '../shared/cookies/klaro.service';
 import { hasValue } from '../shared/empty.util';
 
 @Component({
-  selector: 'ds-footer',
+  selector: 'ds-base-footer',
   styleUrls: ['footer.component.scss'],
   templateUrl: 'footer.component.html',
   standalone: true,

src/app/footer/themed-footer.component.ts

@@ -7,10 +7,11 @@ import { FooterComponent } from './footer.component';
  * Themed wrapper for FooterComponent
  */
 @Component({
-  selector: 'ds-themed-footer',
+  selector: 'ds-footer',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [FooterComponent],
 })
 export class ThemedFooterComponent extends ThemedComponent<FooterComponent> {
   protected getComponentName(): string {

src/app/forbidden/forbidden.component.ts

@@ -12,7 +12,7 @@ import { ServerResponseService } from '../core/services/server-response.service'
  * This component representing the `Forbidden` DSpace page.
  */
 @Component({
-  selector: 'ds-forbidden',
+  selector: 'ds-base-forbidden',
   templateUrl: './forbidden.component.html',
   styleUrls: ['./forbidden.component.scss'],
   standalone: true,

src/app/forbidden/themed-forbidden.component.ts

@@ -7,10 +7,11 @@ import { ForbiddenComponent } from './forbidden.component';
  * Themed wrapper for ForbiddenComponent
  */
 @Component({
-  selector: 'ds-themed-forbidden',
+  selector: 'ds-forbidden',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [ForbiddenComponent],
 })
 export class ThemedForbiddenComponent extends ThemedComponent<ForbiddenComponent> {
   protected getComponentName(): string {

src/app/forgot-password/forgot-password-email/forgot-email.component.html

@@ -1,3 +1,3 @@
-<ds-themed-register-email-form
+<ds-register-email-form
     [MESSAGE_PREFIX]="'forgot-email.form'" [typeRequest]="typeRequest">
-</ds-themed-register-email-form>
+</ds-register-email-form>

src/app/forgot-password/forgot-password-email/forgot-email.component.ts

@@ -1,17 +1,14 @@
 import { Component } from '@angular/core';
 import { ThemedRegisterEmailFormComponent } from 'src/app/register-email-form/themed-registry-email-form.component';
 
-import {
+import { TYPE_REQUEST_FORGOT } from '../../register-email-form/register-email-form.component';
-  RegisterEmailFormComponent,
-  TYPE_REQUEST_FORGOT,
-} from '../../register-email-form/register-email-form.component';
 
 @Component({
-  selector: 'ds-forgot-email',
+  selector: 'ds-base-forgot-email',
   styleUrls: ['./forgot-email.component.scss'],
   templateUrl: './forgot-email.component.html',
   imports: [
-    RegisterEmailFormComponent, ThemedRegisterEmailFormComponent,
+    ThemedRegisterEmailFormComponent,
   ],
   standalone: true,
 })

src/app/forgot-password/forgot-password-email/themed-forgot-email.component.ts

@@ -7,10 +7,11 @@ import { ForgotEmailComponent } from './forgot-email.component';
  * Themed wrapper for ForgotEmailComponent
  */
 @Component({
-  selector: 'ds-themed-forgot-email',
+  selector: 'ds-forgot-email',
   styleUrls: [],
   templateUrl: './../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [ForgotEmailComponent],
 })
 export class ThemedForgotEmailComponent extends ThemedComponent<ForgotEmailComponent> {
   protected getComponentName(): string {

src/app/forgot-password/forgot-password-form/forgot-password-form.component.ts

@@ -30,7 +30,7 @@ import { NotificationsService } from '../../shared/notifications/notifications.s
 import { BrowserOnlyPipe } from '../../shared/utils/browser-only.pipe';
 
 @Component({
-  selector: 'ds-forgot-password-form',
+  selector: 'ds-base-forgot-password-form',
   styleUrls: ['./forgot-password-form.component.scss'],
   templateUrl: './forgot-password-form.component.html',
   imports: [

src/app/forgot-password/forgot-password-form/themed-forgot-password-form.component.ts

@@ -7,10 +7,11 @@ import { ForgotPasswordFormComponent } from './forgot-password-form.component';
  * Themed wrapper for ForgotPasswordFormComponent
  */
 @Component({
-  selector: 'ds-themed-forgot-password-form',
+  selector: 'ds-forgot-password-form',
   styleUrls: [],
   templateUrl: './../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [ForgotPasswordFormComponent],
 })
 export class ThemedForgotPasswordFormComponent extends ThemedComponent<ForgotPasswordFormComponent> {
   protected getComponentName(): string {

src/app/header-nav-wrapper/header-navbar-wrapper.component.html

@@ -1,4 +1,4 @@
 <div [ngClass]="{'open': (isNavBarCollapsed$ | async) !== true}" id="header-navbar-wrapper">
-    <ds-themed-header></ds-themed-header>
+    <ds-header></ds-header>
-    <ds-themed-navbar></ds-themed-navbar>
+    <ds-navbar></ds-navbar>
 </div>

src/app/header-nav-wrapper/header-navbar-wrapper.component.ts

@@ -21,7 +21,7 @@ import { MenuID } from '../shared/menu/menu-id.model';
  * This component represents a wrapper for the horizontal navbar and the header
  */
 @Component({
-  selector: 'ds-header-navbar-wrapper',
+  selector: 'ds-base-header-navbar-wrapper',
   styleUrls: ['header-navbar-wrapper.component.scss'],
   templateUrl: 'header-navbar-wrapper.component.html',
   standalone: true,

src/app/header-nav-wrapper/themed-header-navbar-wrapper.component.ts

@@ -7,10 +7,11 @@ import { HeaderNavbarWrapperComponent } from './header-navbar-wrapper.component'
  * Themed wrapper for {@link HeaderNavbarWrapperComponent}
  */
 @Component({
-  selector: 'ds-themed-header-navbar-wrapper',
+  selector: 'ds-header-navbar-wrapper',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [HeaderNavbarWrapperComponent],
 })
 export class ThemedHeaderNavbarWrapperComponent extends ThemedComponent<HeaderNavbarWrapperComponent> {
   protected getComponentName(): string {

src/app/header/header.component.html

@@ -6,10 +6,10 @@
       </a>
 
       <nav role="navigation" [attr.aria-label]="'nav.user.description' | translate" class="navbar navbar-light navbar-expand-md flex-shrink-0 px-0">
-        <ds-themed-search-navbar></ds-themed-search-navbar>
+        <ds-search-navbar></ds-search-navbar>
-        <ds-themed-lang-switch></ds-themed-lang-switch>
+        <ds-lang-switch></ds-lang-switch>
         <ds-context-help-toggle></ds-context-help-toggle>
-        <ds-themed-auth-nav-menu></ds-themed-auth-nav-menu>
+        <ds-auth-nav-menu></ds-auth-nav-menu>
         <ds-impersonate-navbar></ds-impersonate-navbar>
         <div *ngIf="isMobile$ | async" class="pl-2">
           <button class="navbar-toggler px-0" type="button" (click)="toggleNavbar()"

src/app/header/header.component.ts

@@ -18,7 +18,6 @@ import {
   WidthCategory,
 } from '../shared/host-window.service';
 import { ImpersonateNavbarComponent } from '../shared/impersonate-navbar/impersonate-navbar.component';
-import { LangSwitchComponent } from '../shared/lang-switch/lang-switch.component';
 import { ThemedLangSwitchComponent } from '../shared/lang-switch/themed-lang-switch.component';
 import { MenuService } from '../shared/menu/menu.service';
 import { MenuID } from '../shared/menu/menu-id.model';
@@ -28,11 +27,11 @@ import { ContextHelpToggleComponent } from './context-help-toggle/context-help-t
  * Represents the header with the logo and simple navigation
  */
 @Component({
-  selector: 'ds-header',
+  selector: 'ds-base-header',
   styleUrls: ['header.component.scss'],
   templateUrl: 'header.component.html',
   standalone: true,
-  imports: [RouterLink, ThemedLangSwitchComponent, NgbDropdownModule, ThemedSearchNavbarComponent, LangSwitchComponent, ContextHelpToggleComponent, ThemedAuthNavMenuComponent, ImpersonateNavbarComponent, TranslateModule, AsyncPipe, NgIf],
+  imports: [RouterLink, ThemedLangSwitchComponent, NgbDropdownModule, ThemedSearchNavbarComponent, ContextHelpToggleComponent, ThemedAuthNavMenuComponent, ImpersonateNavbarComponent, TranslateModule, AsyncPipe, NgIf],
 })
 export class HeaderComponent implements OnInit {
   /**

src/app/header/themed-header.component.ts

@@ -7,10 +7,11 @@ import { HeaderComponent } from './header.component';
  * Themed wrapper for HeaderComponent
  */
 @Component({
-  selector: 'ds-themed-header',
+  selector: 'ds-header',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [HeaderComponent],
 })
 export class ThemedHeaderComponent extends ThemedComponent<HeaderComponent> {
   protected getComponentName(): string {

src/app/home-page/home-news/home-news.component.ts

@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
 
 @Component({
-  selector: 'ds-home-news',
+  selector: 'ds-base-home-news',
   styleUrls: ['./home-news.component.scss'],
   templateUrl: './home-news.component.html',
   standalone: true,

src/app/home-page/home-news/themed-home-news.component.ts

@@ -4,10 +4,11 @@ import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { HomeNewsComponent } from './home-news.component';
 
 @Component({
-  selector: 'ds-themed-home-news',
+  selector: 'ds-home-news',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [HomeNewsComponent],
 })
 
 /**

src/app/home-page/home-page.component.html

@@ -1,4 +1,4 @@
-<ds-themed-home-news></ds-themed-home-news>
+<ds-home-news></ds-home-news>
 <div [ngClass]="appConfig.homePage.showDiscoverFilters ? 'container-fluid' : 'container'">
   <div class="row m-5">
     <div class="col-sm-3" *ngIf="appConfig.homePage.showDiscoverFilters">
@@ -9,9 +9,9 @@
       <ng-container *ngIf="(site$ | async) as site">
         <ds-view-tracker [object]="site"></ds-view-tracker>
       </ng-container>
-      <ds-themed-search-form [inPlaceSearch]="false"
+      <ds-search-form [inPlaceSearch]="false"
-        [searchPlaceholder]="'home.search-form.placeholder' | translate"></ds-themed-search-form>
+        [searchPlaceholder]="'home.search-form.placeholder' | translate"></ds-search-form>
-      <ds-themed-top-level-community-list></ds-themed-top-level-community-list>
+      <ds-top-level-community-list></ds-top-level-community-list>
       <ds-recent-item-list *ngIf="recentSubmissionspageSize>0"></ds-recent-item-list>
     </div>
     </div>

src/app/home-page/home-page.component.ts

@@ -35,7 +35,7 @@ import {
 import { ServerResponseService } from '../core/services/server-response.service';
 import { Site } from '../core/shared/site.model';
 import { SuggestionsPopupComponent } from '../notifications/suggestions-popup/suggestions-popup.component';
-import { ConfigurationSearchPageComponent } from '../search-page/configuration-search-page.component';
+import { ThemedConfigurationSearchPageComponent } from '../search-page/themed-configuration-search-page.component';
 import { isNotEmpty } from '../shared/empty.util';
 import { ThemedSearchFormComponent } from '../shared/search-form/themed-search-form.component';
 import { ViewTrackerComponent } from '../statistics/angulartics/dspace/view-tracker.component';
@@ -44,11 +44,11 @@ import { RecentItemListComponent } from './recent-item-list/recent-item-list.com
 import { ThemedTopLevelCommunityListComponent } from './top-level-community-list/themed-top-level-community-list.component';
 
 @Component({
-  selector: 'ds-home-page',
+  selector: 'ds-base-home-page',
   styleUrls: ['./home-page.component.scss'],
   templateUrl: './home-page.component.html',
   standalone: true,
-  imports: [ThemedHomeNewsComponent, NgIf, ViewTrackerComponent, ThemedSearchFormComponent, ThemedTopLevelCommunityListComponent, RecentItemListComponent, AsyncPipe, TranslateModule, NgClass, ConfigurationSearchPageComponent, SuggestionsPopupComponent],
+  imports: [ThemedHomeNewsComponent, NgIf, ViewTrackerComponent, ThemedSearchFormComponent, ThemedTopLevelCommunityListComponent, RecentItemListComponent, AsyncPipe, TranslateModule, NgClass, ThemedConfigurationSearchPageComponent, SuggestionsPopupComponent],
 })
 export class HomePageComponent implements OnInit, OnDestroy {
 

src/app/home-page/recent-item-list/recent-item-list.component.ts

@@ -39,7 +39,7 @@ import {
   fadeInOut,
 } from '../../shared/animations/fade';
 import { ErrorComponent } from '../../shared/error/error.component';
-import { LoadingComponent } from '../../shared/loading/loading.component';
+import { ThemedLoadingComponent } from '../../shared/loading/themed-loading.component';
 import { ListableObjectComponentLoaderComponent } from '../../shared/object-collection/shared/listable-object/listable-object-component-loader.component';
 import { PaginationComponentOptions } from '../../shared/pagination/pagination-component-options.model';
 import { PaginatedSearchOptions } from '../../shared/search/models/paginated-search-options.model';
@@ -60,7 +60,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
     fadeInOut,
   ],
   standalone: true,
-  imports: [VarDirective, NgIf, NgClass, NgFor, ListableObjectComponentLoaderComponent, ErrorComponent, LoadingComponent, AsyncPipe, TranslateModule],
+  imports: [VarDirective, NgIf, NgClass, NgFor, ListableObjectComponentLoaderComponent, ErrorComponent, ThemedLoadingComponent, AsyncPipe, TranslateModule],
 })
 export class RecentItemListComponent implements OnInit {
   itemRD$: Observable<RemoteData<PaginatedList<Item>>>;

src/app/home-page/themed-home-page.component.ts

@@ -4,10 +4,11 @@ import { ThemedComponent } from '../shared/theme-support/themed.component';
 import { HomePageComponent } from './home-page.component';
 
 @Component({
-  selector: 'ds-themed-home-page',
+  selector: 'ds-home-page',
   styleUrls: [],
   templateUrl: '../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [HomePageComponent],
 })
 export class ThemedHomePageComponent extends ThemedComponent<HomePageComponent> {
 

src/app/home-page/top-level-community-list/themed-top-level-community-list.component.ts

@@ -4,10 +4,11 @@ import { ThemedComponent } from '../../shared/theme-support/themed.component';
 import { TopLevelCommunityListComponent } from './top-level-community-list.component';
 
 @Component({
-  selector: 'ds-themed-top-level-community-list',
+  selector: 'ds-top-level-community-list',
   styleUrls: [],
   templateUrl: '../../shared/theme-support/themed.component.html',
   standalone: true,
+  imports: [TopLevelCommunityListComponent],
 })
 export class ThemedTopLevelCommunityListComponent extends ThemedComponent<TopLevelCommunityListComponent> {
   protected inAndOutputNames: (keyof TopLevelCommunityListComponent & keyof this)[];

src/app/home-page/top-level-community-list/top-level-community-list.component.html

@@ -12,4 +12,4 @@
   </ds-viewable-collection>
 </div>
 <ds-error *ngIf="communitiesRD?.hasFailed " message="{{'error.top-level-communites' | translate}}"></ds-error>
-<ds-themed-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-themed-loading></ng-container>
+<ds-loading *ngIf="communitiesRD?.isLoading " message="{{'loading.top-level-communities' | translate}}"></ds-loading></ng-container>

src/app/home-page/top-level-community-list/top-level-community-list.component.ts

@@ -42,7 +42,7 @@ import { VarDirective } from '../../shared/utils/var.directive';
  * this component renders the Top-Level Community list
  */
 @Component({
-  selector: 'ds-top-level-community-list',
+  selector: 'ds-base-top-level-community-list',
   styleUrls: ['./top-level-community-list.component.scss'],
   templateUrl: './top-level-community-list.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,