New themable components

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

@@ -25,11 +25,12 @@
         </div>
       </div>
       <section class="comcol-page-browse-section">
+
         <!-- Browse-By Links -->
         <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-themed-community-page-sub-community-list [community]="communityPayload"></ds-themed-community-page-sub-community-list>
         <ds-community-page-sub-collection-list [community]="communityPayload"></ds-community-page-sub-collection-list>
       </section>
       <footer  *ngIf="communityPayload.copyrightText"  class="border-top my-5 pt-4">

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

@@ -13,10 +13,18 @@ import { StatisticsModule } from '../statistics/statistics.module';
 import { CommunityFormModule } from './community-form/community-form.module';
 import { ThemedCommunityPageComponent } from './themed-community-page.component';
 import { ComcolModule } from '../shared/comcol/comcol.module';
+import {
+  ThemedCommunityPageSubCommunityListComponent
+} from './sub-community-list/themed-community-page-sub-community-list.component';
+import {
+  ThemedCollectionPageSubCollectionListComponent
+} from './sub-collection-list/themed-community-page-sub-collection-list.component';
 
 const DECLARATIONS = [CommunityPageComponent,
   ThemedCommunityPageComponent,
+  ThemedCommunityPageSubCommunityListComponent,
   CommunityPageSubCollectionListComponent,
+  ThemedCollectionPageSubCollectionListComponent,
   CommunityPageSubCommunityListComponent,
   CreateCommunityPageComponent,
   DeleteCommunityPageComponent];

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

@@ -22,6 +22,11 @@ import { switchMap } from 'rxjs/operators';
 export class CommunityPageSubCollectionListComponent implements OnInit {
   @Input() community: Community;
 
+  /**
+   * Optional page size (defaults to 5)
+   */
+  @Input() pageSize: number;
+
   /**
    * The pagination configuration
    */
@@ -50,7 +55,7 @@ export class CommunityPageSubCollectionListComponent implements OnInit {
   ngOnInit(): void {
     this.config = new PaginationComponentOptions();
     this.config.id = this.pageId;
-    this.config.pageSize = 5;
+    this.pageSize ? this.config.pageSize = this.pageSize : this.config.pageSize = 5;
     this.config.currentPage = 1;
     this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
     this.initPage();

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

@@ -0,0 +1,28 @@
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CommunityPageSubCollectionListComponent } from './community-page-sub-collection-list.component';
+import { Component, Input } from '@angular/core';
+import { Community } from '../../core/shared/community.model';
+
+@Component({
+  selector: 'ds-themed-community-page-sub-collection-list',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedCollectionPageSubCollectionListComponent extends ThemedComponent<CommunityPageSubCollectionListComponent> {
+  protected getComponentName(): string {
+    return 'CommunityPageSubCollectionListComponent';
+  }
+
+  @Input() community: Community;
+  @Input() pageSize: number;
+  protected inAndOutputNames: (keyof CommunityPageSubCollectionListComponent & keyof this)[] = ['community', 'pageSize'];
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/community-page/sub-community-list/community-page-sub-collection-list.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-page-sub-collection-list.component`);
+  }
+
+}

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

@@ -14,7 +14,7 @@ import { switchMap } from 'rxjs/operators';
 import { PaginationService } from '../../core/pagination/pagination.service';
 
 @Component({
-  selector: 'ds-community-page-sub-community-list',
+  selector: ' ',
   styleUrls: ['./community-page-sub-community-list.component.scss'],
   templateUrl: './community-page-sub-community-list.component.html',
   animations: [fadeIn]
@@ -25,6 +25,11 @@ import { PaginationService } from '../../core/pagination/pagination.service';
 export class CommunityPageSubCommunityListComponent implements OnInit {
   @Input() community: Community;
 
+  /**
+   * Optional page size (defaults to 5)
+   */
+  @Input() pageSize: number;
+
   /**
    * The pagination configuration
    */
@@ -53,7 +58,7 @@ export class CommunityPageSubCommunityListComponent implements OnInit {
   ngOnInit(): void {
     this.config = new PaginationComponentOptions();
     this.config.id = this.pageId;
-    this.config.pageSize = 5;
+    this.pageSize ? this.config.pageSize = this.pageSize : this.config.pageSize = 5;
     this.config.currentPage = 1;
     this.sortConfig = new SortOptions('dc.title', SortDirection.ASC);
     this.initPage();

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

@@ -0,0 +1,28 @@
+import { ThemedComponent } from '../../shared/theme-support/themed.component';
+import { CommunityPageSubCommunityListComponent } from './community-page-sub-community-list.component';
+import { Component, Input } from '@angular/core';
+import { Community } from '../../core/shared/community.model';
+
+@Component({
+  selector: 'ds-themed-community-page-sub-community-list',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedCommunityPageSubCommunityListComponent extends ThemedComponent<CommunityPageSubCommunityListComponent> {
+  protected getComponentName(): string {
+    return 'CommunityPageSubCommunityListComponent';
+  }
+
+  @Input() community: Community;
+  @Input() pageSize: number;
+  protected inAndOutputNames: (keyof CommunityPageSubCommunityListComponent & keyof this)[] = ['community', 'pageSize'];
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/community-page/sub-community-list/community-page-sub-community-list.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import(`./community-page-sub-community-list.component`);
+  }
+
+}

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CommunityPageSubCollectionListComponent as BaseComponent }
+  from '../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component';
+
+@Component({
+  selector: 'ds-community-page-sub-collection-list',
+  // styleUrls: ['./community-page-sub-collection-list.component.scss'],
+  styleUrls: ['../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component.scss'],
+  // templateUrl: './community-page-sub-collection-list.component.html',
+  templateUrl: '../../../../../app/community-page/sub-collection-list/community-page-sub-collection-list.component.html'
+})
+export class CommunityPageSubCollectionListComponent extends BaseComponent {}

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

@@ -0,0 +1,12 @@
+import { Component } from '@angular/core';
+import { CommunityPageSubCommunityListComponent as BaseComponent }
+  from '../../../../../app/community-page/sub-community-list/community-page-sub-community-list.component';
+
+@Component({
+  selector: 'ds-community-page-sub-community-list',
+  // styleUrls: ['./community-page-sub-community-list.component.scss'],
+  styleUrls: ['../../../../../app/community-page/sub-community-list/community-page-sub-community-list.component.scss'],
+  // templateUrl: './community-page-sub-community-list.component.html',
+  templateUrl: '../../../../../app/community-page/sub-community-list/community-page-sub-community-list.component.html'
+})
+export class CommunityPageSubCommunityListComponent extends BaseComponent {}

src/themes/custom/eager-theme.module.ts

@@ -40,7 +40,7 @@ const DECLARATIONS = [
   HeaderComponent,
   HeaderNavbarWrapperComponent,
   NavbarComponent,
-  FooterComponent,
+  FooterComponent
 ];
 
 @NgModule({

src/themes/custom/lazy-theme.module.ts

@@ -99,6 +99,12 @@ import {
 import { LoadingComponent } from './app/shared/loading/loading.component';
 import { SearchResultsComponent } from './app/shared/search/search-results/search-results.component';
 import { AdminSidebarComponent } from './app/admin/admin-sidebar/admin-sidebar.component';
+import {
+  CommunityPageSubCommunityListComponent
+} from './app/community-page/sub-community-list/community-page-sub-community-list.component';
+import {
+  CommunityPageSubCollectionListComponent
+} from './app/community-page/sub-collection-list/community-page-sub-collection-list.component';
 
 const DECLARATIONS = [
   FileSectionComponent,
@@ -118,6 +124,8 @@ const DECLARATIONS = [
   ItemStatisticsPageComponent,
   SiteStatisticsPageComponent,
   CommunityPageComponent,
+  CommunityPageSubCommunityListComponent,
+  CommunityPageSubCollectionListComponent,
   CollectionPageComponent,
   ItemPageComponent,
   FullItemPageComponent,
@@ -196,6 +204,9 @@ const DECLARATIONS = [
     ComcolModule,
   ],
   declarations: DECLARATIONS,
+  exports: [
+    CommunityPageSubCollectionListComponent
+  ]
 })
 
   /**