Merge pull request #1512 from atmire/w2p-84367_Various-small-changes

Various small changes to improve customizability

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

@@ -63,13 +63,14 @@ export class AdminSidebarComponent extends MenuComponent implements OnInit {
 
   inFocus$: BehaviorSubject<boolean>;
 
-  constructor(protected menuService: MenuService,
+  constructor(
+    protected menuService: MenuService,
     protected injector: Injector,
-    private variableService: CSSVariableService,
-    private authService: AuthService,
-    private modalService: NgbModal,
+    protected variableService: CSSVariableService,
+    protected authService: AuthService,
+    protected modalService: NgbModal,
     public authorizationService: AuthorizationDataService,
-    private scriptDataService: ScriptDataService,
+    protected scriptDataService: ScriptDataService,
     public route: ActivatedRoute
   ) {
     super(menuService, injector, authorizationService, route);

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

@@ -0,0 +1,25 @@
+import { Component } from '@angular/core';
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { AdminSidebarComponent } from './admin-sidebar.component';
+
+/**
+ * Themed wrapper for AdminSidebarComponent
+ */
+@Component({
+  selector: 'ds-themed-admin-sidebar',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedAdminSidebarComponent extends ThemedComponent<AdminSidebarComponent> {
+  protected getComponentName(): string {
+    return 'AdminSidebarComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/admin/admin-sidebar/admin-sidebar.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./admin-sidebar.component');
+  }
+}

src/app/app.module.ts

@@ -56,6 +56,7 @@ import { ThemedHeaderNavbarWrapperComponent } from './header-nav-wrapper/themed-
 import { IdleModalComponent } from './shared/idle-modal/idle-modal.component';
 import { ThemedPageInternalServerErrorComponent } from './page-internal-server-error/themed-page-internal-server-error.component';
 import { PageInternalServerErrorComponent } from './page-internal-server-error/page-internal-server-error.component';
+import { ThemedAdminSidebarComponent } from './admin/admin-sidebar/themed-admin-sidebar.component';
 
 import { APP_CONFIG, AppConfig } from '../config/app-config.interface';
 
@@ -171,6 +172,7 @@ const DECLARATIONS = [
   HeaderNavbarWrapperComponent,
   ThemedHeaderNavbarWrapperComponent,
   AdminSidebarComponent,
+  ThemedAdminSidebarComponent,
   AdminSidebarSectionComponent,
   ExpandableAdminSidebarSectionComponent,
   FooterComponent,

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

@@ -18,7 +18,7 @@
         </ds-comcol-page-content>
       </header>
       <!-- Browse-By Links -->
-      <ds-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-comcol-page-browse-by>
+      <ds-themed-comcol-page-browse-by [id]="parentContext.id" [contentType]="parentContext.type"></ds-themed-comcol-page-browse-by>
       </ng-container></ng-container>
 
     <section class="comcol-page-browse-section">

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

@@ -40,10 +40,10 @@
               </div>
               <section class="comcol-page-browse-section">
               <!-- Browse-By Links -->
-              <ds-comcol-page-browse-by
+              <ds-themed-comcol-page-browse-by
                       [id]="collection.id"
                       [contentType]="collection.type">
-              </ds-comcol-page-browse-by>
+              </ds-themed-comcol-page-browse-by>
 
             <ng-container *ngVar="(itemRD$ | async) as itemRD">
                 <div class="mt-4" *ngIf="itemRD?.hasSucceeded" @fadeIn>

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

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

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

@@ -5,12 +5,14 @@ import { CommunityListPageComponent } from './community-list-page.component';
 import { CommunityListPageRoutingModule } from './community-list-page.routing.module';
 import { CommunityListComponent } from './community-list/community-list.component';
 import { ThemedCommunityListPageComponent } from './themed-community-list-page.component';
+import { ThemedCommunityListComponent } from './community-list/themed-community-list.component';
 
 
 const DECLARATIONS = [
   CommunityListPageComponent,
   CommunityListComponent,
-  ThemedCommunityListPageComponent
+  ThemedCommunityListPageComponent,
+  ThemedCommunityListComponent
 ];
 /**
  * The page which houses a title and the community list, as described in community-list.component

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

@@ -0,0 +1,23 @@
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CommunityListComponent } from './community-list.component';
+import { Component } from '@angular/core';
+
+
+@Component({
+  selector: 'ds-themed-community-list',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})export class ThemedCommunityListComponent extends ThemedComponent<CommunityListComponent> {
+  protected getComponentName(): string {
+    return 'CommunityListComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/community-list-page/community-list/community-list.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-list.component`);
+  }
+
+}

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

@@ -26,8 +26,8 @@
       </div>
       <section class="comcol-page-browse-section">
         <!-- Browse-By Links -->
-        <ds-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
-        </ds-comcol-page-browse-by>
+        <ds-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
+        </ds-themed-comcol-page-browse-by>
 
         <ds-community-page-sub-community-list [community]="communityPayload"></ds-community-page-sub-community-list>
         <ds-community-page-sub-collection-list [community]="communityPayload"></ds-community-page-sub-collection-list>

src/app/my-dspace-page/my-dspace-page.component.html

@@ -2,9 +2,9 @@
   <ds-my-dspace-new-submission *dsShowOnlyForRole="[roleTypeEnum.Submitter]"></ds-my-dspace-new-submission>
 </div>
 
-<ds-search *ngIf="configuration && context"
+<ds-themed-search *ngIf="configuration && context"
            [configuration]="configuration"
            [configurationList]="(configurationList$ | async)"
            [context]="context"
            [viewModeList]="viewModeList"
-></ds-search>
+></ds-themed-search>

src/app/navbar/navbar.component.html

@@ -6,7 +6,7 @@
             <div id="collapsingNav">
                 <ul class="navbar-nav mr-auto shadow-none">
                     <ng-container *ngFor="let section of (sections | async)">
-                        <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id).injector;"></ng-container>
+                        <ng-container *ngComponentOutlet="(sectionMap$ | async).get(section.id)?.component; injector: (sectionMap$ | async).get(section.id)?.injector;"></ng-container>
                     </ng-container>
                 </ul>
             </div>

src/app/root/root.component.html

@@ -1,5 +1,5 @@
 <div class="outer-wrapper" *ngIf="!shouldShowFullscreenLoader; else fullScreenLoader">
-  <ds-admin-sidebar></ds-admin-sidebar>
+  <ds-themed-admin-sidebar></ds-themed-admin-sidebar>
   <div class="inner-wrapper"  [@slideSidebarPadding]="{
      value: (!(sidebarVisible | async) ? 'hidden' : (slideSidebarOver | async) ? 'shown' : 'expanded'),
      params: {collapsedSidebarWidth: (collapsedSidebarWidth | async), totalSidebarWidth: (totalSidebarWidth | async)}

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

@@ -27,7 +27,6 @@ import { Router } from '@angular/router';
 })
 
 export class ConfigurationSearchPageComponent extends SearchComponent {
-
   constructor(protected service: SearchService,
               protected sidebarService: SidebarService,
               protected windowService: HostWindowService,
@@ -36,5 +35,4 @@ export class ConfigurationSearchPageComponent extends SearchComponent {
               protected router: Router) {
     super(service, sidebarService, windowService, searchConfigService, routeService, router);
   }
-
 }

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

@@ -1,2 +1,2 @@
-<ds-search></ds-search>
+<ds-themed-search></ds-themed-search>
 <ds-search-tracker></ds-search-tracker>

src/app/shared/comcol/comcol-page-browse-by/themed-comcol-page-browse-by.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { ComcolPageBrowseByComponent } from './comcol-page-browse-by.component';
+import { ThemedComponent } from '../../theme-support/themed.component';
+
+/**
+ * Themed wrapper for ComcolPageBrowseByComponent
+ */
+@Component({
+  selector: 'ds-themed-comcol-page-browse-by',
+  styleUrls: [],
+  templateUrl: '../../theme-support/themed.component.html',
+})
+export class ThemedComcolPageBrowseByComponent extends ThemedComponent<ComcolPageBrowseByComponent> {
+  /**
+   * The ID of the Community or Collection
+   */
+  @Input() id: string;
+  @Input() contentType: string;
+
+  inAndOutputNames: (keyof ComcolPageBrowseByComponent & keyof this)[] = ['id', 'contentType'];
+
+  protected getComponentName(): string {
+    return 'ComcolPageBrowseByComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../themes/${themeName}/app/shared/comcol-page-browse-by/comcol-page-browse-by.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./comcol-page-browse-by.component');
+  }
+}

src/app/shared/comcol/comcol.module.ts

@@ -9,6 +9,7 @@ import { CreateComColPageComponent } from './comcol-forms/create-comcol-page/cre
 import { EditComColPageComponent } from './comcol-forms/edit-comcol-page/edit-comcol-page.component';
 import { DeleteComColPageComponent } from './comcol-forms/delete-comcol-page/delete-comcol-page.component';
 import { ComcolPageBrowseByComponent } from './comcol-page-browse-by/comcol-page-browse-by.component';
+import { ThemedComcolPageBrowseByComponent } from './comcol-page-browse-by/themed-comcol-page-browse-by.component';
 import { ComcolRoleComponent } from './comcol-forms/edit-comcol-page/comcol-role/comcol-role.component';
 import { SharedModule } from '../shared.module';
 import { FormModule } from '../form/form.module';
@@ -23,6 +24,7 @@ const COMPONENTS = [
   EditComColPageComponent,
   DeleteComColPageComponent,
   ComcolPageBrowseByComponent,
+  ThemedComcolPageBrowseByComponent,
   ComcolRoleComponent,
 ];
 

src/app/shared/dso-selector/dso-selector/authorized-collection-selector/authorized-collection-selector.component.ts

@@ -16,6 +16,7 @@ import { NotificationsService } from '../../../notifications/notifications.servi
 import { TranslateService } from '@ngx-translate/core';
 import { Collection } from '../../../../core/shared/collection.model';
 import { FindListOptions } from '../../../../core/data/request.models';
+import { DSONameService } from '../../../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-authorized-collection-selector',
@@ -31,11 +32,14 @@ export class AuthorizedCollectionSelectorComponent extends DSOSelectorComponent
    */
   @Input() entityType: string;
 
-  constructor(protected searchService: SearchService,
+  constructor(
+    protected searchService: SearchService,
     protected collectionDataService: CollectionDataService,
     protected notifcationsService: NotificationsService,
-              protected translate: TranslateService) {
-    super(searchService, notifcationsService, translate);
+    protected translate: TranslateService,
+    protected dsoNameService: DSONameService,
+  ) {
+    super(searchService, notifcationsService, translate, dsoNameService);
   }
 
   /**

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

@@ -22,7 +22,7 @@
       <button *ngFor="let listEntry of (listEntries$ | async)"
               class="list-group-item list-group-item-action border-0 list-entry"
               [ngClass]="{'bg-primary': listEntry.indexableObject.id === currentDSOId}"
-              title="{{ listEntry.indexableObject.name }}"
+              title="{{ getName(listEntry) }}"
               dsHoverClass="ds-hover"
               (click)="onSelect.emit(listEntry.indexableObject)" #listEntryElement>
         <ds-listable-object-component-loader [object]="listEntry" [viewMode]="viewMode"

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

@@ -34,6 +34,7 @@ import { SearchResult } from '../../search/models/search-result.model';
 import { RemoteData } from '../../../core/data/remote-data';
 import { NotificationsService } from '../../notifications/notifications.service';
 import { TranslateService } from '@ngx-translate/core';
+import { DSONameService } from '../../../core/breadcrumbs/dso-name.service';
 
 @Component({
   selector: 'ds-dso-selector',
@@ -126,9 +127,12 @@ export class DSOSelectorComponent implements OnInit, OnDestroy {
    */
   public subs: Subscription[] = [];
 
-  constructor(protected searchService: SearchService,
+  constructor(
+    protected searchService: SearchService,
     protected notifcationsService: NotificationsService,
-              protected translate: TranslateService) {
+    protected translate: TranslateService,
+    protected dsoNameService: DSONameService,
+  ) {
   }
 
   /**
@@ -257,4 +261,8 @@ export class DSOSelectorComponent implements OnInit, OnDestroy {
   ngOnDestroy(): void {
     this.subs.filter((sub) => hasValue(sub)).forEach((sub) => sub.unsubscribe());
   }
+
+  getName(searchResult: SearchResult<DSpaceObject>): string {
+    return this.dsoNameService.getName(searchResult.indexableObject);
+  }
 }

src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/search-tab/dynamic-lookup-relation-search-tab.component.html

@@ -1,4 +1,4 @@
-<ds-search *ngIf="this.relationship.searchConfiguration && context"
+<ds-themed-search *ngIf="this.relationship.searchConfiguration && context"
            [configuration]="this.relationship.searchConfiguration"
            [context]="context"
            [fixedFilterQuery]="this.relationship.filter"
@@ -60,4 +60,4 @@
     </div>
   </div>
 
-</ds-search>
+</ds-themed-search>

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

@@ -1,6 +1,10 @@
 :host ::ng-deep {
   --ds-wrapper-grid-spacing: calc(var(--bs-spacer) / 2);
 
+  div.card {
+    margin-top: var(--ds-wrapper-grid-spacing);
+    margin-bottom: var(--ds-wrapper-grid-spacing);
+
     div.thumbnail > .thumbnail-content {
       height: var(--ds-card-thumbnail-height);
       width: 100%;
@@ -10,9 +14,6 @@
       object-fit: cover;
       object-position: 50% 15%;
     }
-  div.card {
-    margin-top: var(--ds-wrapper-grid-spacing);
-    margin-bottom: var(--ds-wrapper-grid-spacing);
   }
 }
 
@@ -26,4 +27,3 @@
     padding-right: var(--ds-wrapper-grid-spacing);
   }
 }
-

src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-approved-search-result/claimed-approved-search-result-list-element.component.html

@@ -1,10 +1,10 @@
 <ng-container *ngVar="(workflowitemRD$ | async)?.payload as workflowitem">
   <div class="alert alert-success w-100" role="alert">
     <h4 class="alert-heading">Approved</h4>
-    <ds-item-list-preview *ngIf="workflowitem"
+    <ds-themed-item-list-preview *ngIf="workflowitem"
                           [item]="(workflowitem?.item | async)?.payload"
                           [object]="object"
                           [status]="status"
-                          [showSubmitter]="showSubmitter"></ds-item-list-preview>
+                          [showSubmitter]="showSubmitter"></ds-themed-item-list-preview>
   </div>
 </ng-container>

src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-declined-search-result/claimed-declined-search-result-list-element.component.html

@@ -1,10 +1,10 @@
 <ng-container *ngVar="(workflowitemRD$ | async)?.payload as workflowitem">
   <div class="alert alert-secondary w-100" role="alert">
     <h4 class="alert-heading">Declined</h4>
-    <ds-item-list-preview *ngIf="workflowitem"
+    <ds-themed-item-list-preview *ngIf="workflowitem"
                           [item]="(workflowitem?.item | async)?.payload"
                           [object]="object"
                           [status]="status"
-                          [showSubmitter]="showSubmitter"></ds-item-list-preview>
+                          [showSubmitter]="showSubmitter"></ds-themed-item-list-preview>
   </div>
 </ng-container>

src/app/shared/object-list/my-dspace-result-list-element/claimed-search-result/claimed-search-result-list-element.component.html

@@ -1,9 +1,9 @@
 <ng-container *ngVar="(workflowitemRD$ | async)?.payload as workflowitem">
-  <ds-item-list-preview *ngIf="workflowitem"
+  <ds-themed-item-list-preview *ngIf="workflowitem"
                         [item]="(workflowitem?.item | async)?.payload"
                         [object]="object"
                         [showSubmitter]="showSubmitter"
-                        [status]="status"></ds-item-list-preview>
+                        [status]="status"></ds-themed-item-list-preview>
   <ds-claimed-task-actions *ngIf="workflowitem" [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-claimed-task-actions>
 </ng-container>
 

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

@@ -0,0 +1,38 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../../../theme-support/themed.component';
+import { ItemListPreviewComponent } from './item-list-preview.component';
+import { Item } from '../../../../core/shared/item.model';
+import { MyDspaceItemStatusType } from '../../../object-collection/shared/mydspace-item-status/my-dspace-item-status-type';
+import { SearchResult } from '../../../search/models/search-result.model';
+
+/**
+ * Themed wrapper for ItemListPreviewComponent
+ */
+@Component({
+  selector: 'ds-themed-item-list-preview',
+  styleUrls: [],
+  templateUrl: '../../../theme-support/themed.component.html',
+})
+export class ThemedItemListPreviewComponent extends ThemedComponent<ItemListPreviewComponent> {
+  protected inAndOutputNames: (keyof ItemListPreviewComponent & keyof this)[] = ['item', 'object', 'status', 'showSubmitter'];
+
+  @Input() item: Item;
+
+  @Input() object: SearchResult<any>;
+
+  @Input() status: MyDspaceItemStatusType;
+
+  @Input() showSubmitter = false;
+
+  protected getComponentName(): string {
+    return 'ItemListPreviewComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../../../themes/${themeName}/app/shared/object-list/my-dspace-result-list-element/item-list-preview/item-list-preview.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./item-list-preview.component');
+  }
+}

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

@@ -1,5 +1,5 @@
-<ds-item-list-preview [item]="dso"
+<ds-themed-item-list-preview [item]="dso"
                       [object]="object"
-                      [status]="status"></ds-item-list-preview>
+                      [status]="status"></ds-themed-item-list-preview>
 
 <ds-item-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-item-actions>

src/app/shared/object-list/my-dspace-result-list-element/pool-search-result/pool-search-result-list-element.component.html

@@ -1,8 +1,8 @@
 <ng-container *ngVar="(workflowitemRD$ | async)?.payload as workflowitem">
-  <ds-item-list-preview *ngIf="workflowitem"
+  <ds-themed-item-list-preview *ngIf="workflowitem"
                         [item]="(workflowitem?.item | async)?.payload"
                         [object]="object"
                         [showSubmitter]="showSubmitter"
-                        [status]="status"></ds-item-list-preview>
+                        [status]="status"></ds-themed-item-list-preview>
   <ds-pool-task-actions id="actions" *ngIf="workflowitem" [object]="dso" (processCompleted)="this.reloadedObject.emit($event.reloadedObject)"></ds-pool-task-actions>
 </ng-container>

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

@@ -1,8 +1,8 @@
 <ng-container *ngIf="item$ | async">
-  <ds-item-list-preview
+  <ds-themed-item-list-preview
     [item]="item$ | async"
     [object]="object"
-    [status]="status"></ds-item-list-preview>
+    [status]="status"></ds-themed-item-list-preview>
 
   <ds-workflowitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workflowitem-actions>
 </ng-container>

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

@@ -1,8 +1,8 @@
 <ng-container *ngIf="item$ | async">
-  <ds-item-list-preview
+  <ds-themed-item-list-preview
     [item]="item$ | async"
     [object]="object"
-    [status]="status"></ds-item-list-preview>
+    [status]="status"></ds-themed-item-list-preview>
 
   <ds-workspaceitem-actions [object]="dso" (processCompleted)="reloadedObject.emit($event.reloadedObject)"></ds-workspaceitem-actions>
 </ng-container>

src/app/shared/search-form/search-form.component.spec.ts

@@ -47,11 +47,23 @@ describe('SearchFormComponent', () => {
     el = de.nativeElement;
   });
 
-  it('should not display scopes when empty', () => {
+  it('should not display scopes when showScopeSelector is false', fakeAsync(() => {
+    comp.showScopeSelector = false;
+
     fixture.detectChanges();
-    const select = de.query(By.css('select'));
-    expect(select).toBeNull();
-  });
+    tick();
+
+    expect(de.query(By.css('.scope-button'))).toBeFalsy();
+  }));
+
+  it('should display scopes when showScopeSelector is true', fakeAsync(() => {
+    comp.showScopeSelector = true;
+
+    fixture.detectChanges();
+    tick();
+
+    expect(de.query(By.css('.scope-button'))).toBeTruthy();
+  }));
 
   it('should display set query value in input field', fakeAsync(() => {
     const testString = 'This is a test query';

src/app/shared/search/search.component.html

@@ -78,7 +78,7 @@
                     [query]="(searchOptions$ | async)?.query"
                     [scope]="(searchOptions$ | async)?.scope"
                     [currentUrl]="searchLink"
-                    [showScopeSelector]="true"
+                    [showScopeSelector]="showScopeSelector"
                     [inPlaceSearch]="inPlaceSearch"
                     [searchPlaceholder]="searchFormPlaceholder | translate">
     </ds-search-form>

src/app/shared/search/search.component.ts

@@ -134,6 +134,11 @@ export class SearchComponent implements OnInit {
    */
   @Input() viewModeList: ViewMode[];
 
+  /**
+   * Defines whether or not to show the scope selector
+   */
+  @Input() showScopeSelector = false;
+
   /**
    * The current configuration used during the search
    */

src/app/shared/search/search.module.ts

@@ -28,9 +28,11 @@ import { MissingTranslationHelper } from '../translate/missing-translation.helpe
 import { SharedModule } from '../shared.module';
 import { SearchResultsComponent } from './search-results/search-results.component';
 import { SearchComponent } from './search.component';
+import { ThemedSearchComponent } from './themed-search.component';
 
 const COMPONENTS = [
   SearchComponent,
+  ThemedSearchComponent,
   SearchResultsComponent,
   SearchSidebarComponent,
   SearchSettingsComponent,

src/app/shared/search/themed-search.component.ts

@@ -0,0 +1,75 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { SearchComponent } from './search.component';
+import { SearchConfigurationOption } from './search-switch-configuration/search-configuration-option.model';
+import { Context } from '../../core/shared/context.model';
+import { CollectionElementLinkType } from '../object-collection/collection-element-link.type';
+import { SelectionConfig } from './search-results/search-results.component';
+import { ViewMode } from '../../core/shared/view-mode.model';
+import { SearchObjects } from './models/search-objects.model';
+import { DSpaceObject } from '../../core/shared/dspace-object.model';
+import { ListableObject } from '../object-collection/shared/listable-object.model';
+
+/**
+ * Themed wrapper for SearchComponent
+ */
+@Component({
+  selector: 'ds-themed-search',
+  styleUrls: [],
+  templateUrl: '../theme-support/themed.component.html',
+})
+export class ThemedSearchComponent extends ThemedComponent<SearchComponent> {
+  protected inAndOutputNames: (keyof SearchComponent & keyof this)[] = ['configurationList', 'context', 'configuration', 'fixedFilterQuery', 'useCachedVersionIfAvailable', 'inPlaceSearch', 'linkType', 'paginationId', 'searchEnabled', 'sideBarWidth', 'searchFormPlaceholder', 'selectable', 'selectionConfig', 'showSidebar', 'showViewModes', 'useUniquePageId', 'viewModeList', 'resultFound', 'deselectObject', 'selectObject'];
+
+  @Input() configurationList: SearchConfigurationOption[] = [];
+
+  @Input() context: Context = Context.Search;
+
+  @Input() configuration = 'default';
+
+  @Input() fixedFilterQuery: string;
+
+  @Input() useCachedVersionIfAvailable = true;
+
+  @Input() inPlaceSearch = true;
+
+  @Input() linkType: CollectionElementLinkType;
+
+  @Input() paginationId = 'spc';
+
+  @Input() searchEnabled = true;
+
+  @Input() sideBarWidth = 3;
+
+  @Input() searchFormPlaceholder = 'search.search-form.placeholder';
+
+  @Input() selectable = false;
+
+  @Input() selectionConfig: SelectionConfig;
+
+  @Input() showSidebar = true;
+
+  @Input() showViewModes = true;
+
+  @Input() useUniquePageId: false;
+
+  @Input() viewModeList: ViewMode[];
+
+  @Output() resultFound: EventEmitter<SearchObjects<DSpaceObject>> = new EventEmitter<SearchObjects<DSpaceObject>>();
+
+  @Output() deselectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  @Output() selectObject: EventEmitter<ListableObject> = new EventEmitter<ListableObject>();
+
+  protected getComponentName(): string {
+    return 'SearchComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/search/search.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./search.component');
+  }
+}

src/app/shared/shared.module.ts

@@ -7,13 +7,8 @@ import { DragDropModule } from '@angular/cdk/drag-drop';
 
 import { NouisliderModule } from 'ng2-nouislider';
 import {
-  NgbDatepickerModule,
-  NgbDropdownModule,
-  NgbNavModule,
-  NgbPaginationModule,
-  NgbTimepickerModule,
-  NgbTooltipModule,
-  NgbTypeaheadModule
+  NgbDatepickerModule, NgbDropdownModule, NgbNavModule, NgbPaginationModule, NgbTimepickerModule, NgbTooltipModule,
+  NgbTypeaheadModule,
 } from '@ng-bootstrap/ng-bootstrap';
 import { MissingTranslationHandler, TranslateModule } from '@ngx-translate/core';
 import { NgxPaginationModule } from 'ngx-pagination';
@@ -177,6 +172,7 @@ import { ScopeSelectorModalComponent } from './search-form/scope-selector-modal/
 import { BitstreamRequestACopyPageComponent } from './bitstream-request-a-copy-page/bitstream-request-a-copy-page.component';
 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';
 
 const MODULES = [
   // Do NOT include UniversalModule, HttpModule, or JsonpModule here
@@ -252,6 +248,7 @@ const COMPONENTS = [
   UploaderComponent,
   FileDropzoneNoUploaderComponent,
   ItemListPreviewComponent,
+  ThemedItemListPreviewComponent,
   MyDSpaceItemStatusComponent,
   ItemSubmitterComponent,
   ItemDetailPreviewComponent,

src/app/shared/theme-support/themed.component.ts

@@ -46,6 +46,9 @@ export abstract class ThemedComponent<T> implements OnInit, OnDestroy, OnChanges
     // if an input or output has changed
     if (this.inAndOutputNames.some((name: any) => hasValue(changes[name]))) {
       this.connectInputsAndOutputs();
+      if (this.compRef?.instance && 'ngOnChanges' in this.compRef?.instance) {
+        (this.compRef.instance as any).ngOnChanges(changes);
+      }
     }
   }
 

src/app/thumbnail/thumbnail.component.ts

@@ -12,6 +12,7 @@ import { RemoteData } from '../core/data/remote-data';
   selector: 'ds-thumbnail',
   styleUrls: ['./thumbnail.component.scss'],
   templateUrl: './thumbnail.component.html',
+  preserveWhitespaces: false,
 })
 export class ThumbnailComponent implements OnChanges {
   /**

src/styles/_truncatable-part.component.scss

@@ -19,7 +19,7 @@
       min-width: 75px;
       max-width: 150px;
       height: $height;
-      background: linear-gradient(to right, rgba(255, 255, 255, 0), $bg 70%);
+      background: linear-gradient(to right, rgba(255, 255, 255, 0), rgba($bg, 1) 70%);
       pointer-events: none;
     }
   }
@@ -61,6 +61,15 @@ $h4-factor: strip-unit($h4-font-size);
   .ds-hover .clamp-primary-#{$i} {
     @include clamp-with-titles($i, darken($primary, 10%));
   }
+
+  .clamp-light-#{$i} {
+    @include clamp-with-titles($i, $light);
+  }
+
+  :focus .clamp-light-#{$i},
+  .ds-hover .clamp-light-#{$i} {
+    @include clamp-with-titles($i, darken($light, 10%));
+  }
 }
 
 .clamp-none {

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

@@ -0,0 +1,18 @@
+import { Component } from '@angular/core';
+import { CommunityListComponent as BaseComponent } from '../../../../../app/community-list-page/community-list/community-list.component';
+
+/**
+ * A tree-structured list of nodes representing the communities, their subCommunities and collections.
+ * Initially only the page-restricted top communities are shown.
+ * Each node can be expanded to show its children and all children are also page-limited.
+ * More pages of a page-limited result can be shown by pressing a show more node/link.
+ * Which nodes were expanded is kept in the store, so this persists across pages.
+ */
+@Component({
+  selector: 'ds-community-list',
+  // styleUrls: ['./community-list.component.scss'],
+  // templateUrl: './community-list.component.html'
+  templateUrl: '../../../../../app/community-list-page/community-list/community-list.component.html'
+})
+export class CommunityListComponent extends BaseComponent {}
+

src/themes/custom/app/search-page/search-page.component.ts

@@ -1,11 +1,19 @@
 import { Component } from '@angular/core';
 import { SearchPageComponent as BaseComponent } from '../../../../app/search-page/search-page.component';
+import { SEARCH_CONFIG_SERVICE } from '../../../../app/my-dspace-page/my-dspace-page.component';
+import { SearchConfigurationService } from '../../../../app/core/shared/search/search-configuration.service';
 
 @Component({
   selector: 'ds-search-page',
   // styleUrls: ['./search-page.component.scss'],
   // templateUrl: './search-page.component.html'
-  templateUrl: '../../../../app/search-page/search-page.component.html'
+  templateUrl: '../../../../app/search-page/search-page.component.html',
+  providers: [
+    {
+      provide: SEARCH_CONFIG_SERVICE,
+      useClass: SearchConfigurationService
+    }
+  ]
 })
 
 /**

src/themes/custom/theme.module.ts

@@ -84,6 +84,7 @@ import { SearchModule } from '../../app/shared/search/search.module';
 import { ResourcePoliciesModule } from '../../app/shared/resource-policies/resource-policies.module';
 import { ComcolModule } from '../../app/shared/comcol/comcol.module';
 import { FeedbackComponent } from './app/info/feedback/feedback.component';
+import { CommunityListComponent } from './app/community-list-page/community-list/community-list.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -126,7 +127,8 @@ const DECLARATIONS = [
   NavbarComponent,
   HeaderNavbarWrapperComponent,
   BreadcrumbsComponent,
-  FeedbackComponent
+  FeedbackComponent,
+  CommunityListComponent
 ];
 
 @NgModule({