84367: Make ComcolPageBrowseByComponent themeable

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-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-themed-comcol-page-browse-by [id]="communityPayload.id" [contentType]="communityPayload.type">
-        </ds-comcol-page-browse-by>
+        </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/shared/comcol-page-browse-by/themed-comcol-page-browse-by.component.ts

@@ -0,0 +1,33 @@
+import { Component, Input } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { ComcolPageBrowseByComponent } from './comcol-page-browse-by.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/shared.module.ts

@@ -233,6 +233,7 @@ import { OnClickMenuItemComponent } from './menu/menu-item/onclick-menu-item.com
 import { TextMenuItemComponent } from './menu/menu-item/text-menu-item.component';
 import { ThemedConfigurationSearchPageComponent } from '../search-page/themed-configuration-search-page.component';
 import { SearchNavbarComponent } from '../search-navbar/search-navbar.component';
+import { ThemedComcolPageBrowseByComponent } from './comcol-page-browse-by/themed-comcol-page-browse-by.component';
 
 /**
  * Declaration needed to make sure all decorator functions are called in time
@@ -303,6 +304,7 @@ const COMPONENTS = [
   EditComColPageComponent,
   DeleteComColPageComponent,
   ComcolPageBrowseByComponent,
+  ThemedComcolPageBrowseByComponent,
   ComcolRoleComponent,
   DsDynamicFormComponent,
   DsDynamicFormControlContainerComponent,