From e96954cf607ae4f1ef569b809a94c83e6ae402ee Mon Sep 17 00:00:00 2001
From: Alexandre Vryghem <alexandre@atmire.com>
Date: Thu, 1 Dec 2022 10:27:10 +0100
Subject: [PATCH] 94688: Added ThemedSearchFormComponent

---
 .../collection-item-mapper.component.html     |  4 +-
 src/app/home-page/home-page.component.html    |  2 +-
 .../item-collection-mapper.component.html     |  4 +-
 ...elation-external-source-tab.component.html |  4 +-
 .../themed-search-form.component.ts           | 50 +++++++++++++++++++
 src/app/shared/search/search.component.html   |  4 +-
 src/app/shared/shared.module.ts               |  2 +
 7 files changed, 61 insertions(+), 9 deletions(-)
 create mode 100644 src/app/shared/search-form/themed-search-form.component.ts

diff --git a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html b/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
index 042beddc84..a48c4d15bf 100644
--- a/src/app/collection-page/collection-item-mapper/collection-item-mapper.component.html
+++ b/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-search-form id="search-form"
+                <ds-themed-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-search-form>
+                </ds-themed-search-form>
               </div>
             </div>
 
diff --git a/src/app/home-page/home-page.component.html b/src/app/home-page/home-page.component.html
index 1000dbe9a4..87613b56d0 100644
--- a/src/app/home-page/home-page.component.html
+++ b/src/app/home-page/home-page.component.html
@@ -3,7 +3,7 @@
   <ng-container *ngIf="(site$ | async) as site">
     <ds-view-tracker [object]="site"></ds-view-tracker>
   </ng-container>
-  <ds-search-form [inPlaceSearch]="false" [searchPlaceholder]="'home.search-form.placeholder' | translate"></ds-search-form>
+  <ds-themed-search-form [inPlaceSearch]="false" [searchPlaceholder]="'home.search-form.placeholder' | translate"></ds-themed-search-form>
   <ds-top-level-community-list></ds-top-level-community-list>
   <ds-recent-item-list *ngIf="recentSubmissionspageSize>0"></ds-recent-item-list>
 </div>
diff --git a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
index c779c4aafa..507e35e630 100644
--- a/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
+++ b/src/app/item-page/edit-item-page/item-collection-mapper/item-collection-mapper.component.html
@@ -27,13 +27,13 @@
           <ng-template ngbNavContent>
             <div class="row mt-2">
               <div class="col-12 col-lg-6">
-                <ds-search-form id="search-form"
+                <ds-themed-search-form id="search-form"
                                 [query]="(searchOptions$ | async)?.query"
                                 [currentUrl]="'./'"
                                 [inPlaceSearch]="true"
                                 [searchPlaceholder]="'item.edit.item-mapper.search-form.placeholder' | translate"
                                 (submitSearch)="performedSearch = true">
-                </ds-search-form>
+                </ds-themed-search-form>
               </div>
             </div>
 
diff --git a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
index dac0e03444..cf8cb56577 100644
--- a/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
+++ b/src/app/shared/form/builder/ds-dynamic-form-ui/relation-lookup-modal/external-source-tab/dynamic-lookup-relation-external-source-tab.component.html
@@ -4,10 +4,10 @@
     <ds-page-size-selector></ds-page-size-selector>
   </div>
   <div class="col-8">
-    <ds-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query"
+    <ds-themed-search-form [query]="(searchConfigService.paginatedSearchOptions | async)?.query"
                     [inPlaceSearch]="true"
                     [searchPlaceholder]="'submission.sections.describe.relationship-lookup.selection-tab.search-form.placeholder' | translate">
-    </ds-search-form>
+    </ds-themed-search-form>
     <div>
       <h3>{{ 'submission.sections.describe.relationship-lookup.selection-tab.title.' + externalSource.id | translate}}</h3>
       <ng-container *ngVar="(entriesRD$ | async) as entriesRD">
diff --git a/src/app/shared/search-form/themed-search-form.component.ts b/src/app/shared/search-form/themed-search-form.component.ts
new file mode 100644
index 0000000000..a8a511bd35
--- /dev/null
+++ b/src/app/shared/search-form/themed-search-form.component.ts
@@ -0,0 +1,50 @@
+import { Component, Input, Output, EventEmitter } from '@angular/core';
+import { ThemedComponent } from '../theme-support/themed.component';
+import { SearchFormComponent } from './search-form.component';
+
+/**
+ * Themed wrapper for {@link SearchFormComponent}
+ */
+@Component({
+  selector: 'ds-themed-search-form',
+  styleUrls: [],
+  templateUrl: '../../shared/theme-support/themed.component.html',
+})
+export class ThemedSearchFormComponent extends ThemedComponent<SearchFormComponent> {
+
+  @Input() query: string;
+
+  @Input() inPlaceSearch;
+
+  @Input() scope = '';
+
+  @Input() currentUrl: string;
+
+  @Input() large = false;
+
+  @Input() brandColor = 'primary';
+
+  @Input() searchPlaceholder: string;
+
+  @Input() showScopeSelector = false;
+
+  @Output() submitSearch = new EventEmitter<any>();
+
+  protected inAndOutputNames: (keyof SearchFormComponent & keyof this)[] = [
+    'query', 'inPlaceSearch', 'scope', 'currentUrl', 'large', 'brandColor', 'searchPlaceholder', 'showScopeSelector',
+    'submitSearch',
+  ];
+
+  protected getComponentName(): string {
+    return 'SearchFormComponent';
+  }
+
+  protected importThemedComponent(themeName: string): Promise<any> {
+    return import(`../../../themes/${themeName}/app/shared/search-form/search-form.component`);
+  }
+
+  protected importUnthemedComponent(): Promise<any> {
+    return import('./search-form.component');
+  }
+
+}
diff --git a/src/app/shared/search/search.component.html b/src/app/shared/search/search.component.html
index cdad62dcbd..4a601a6c4c 100644
--- a/src/app/shared/search/search.component.html
+++ b/src/app/shared/search/search.component.html
@@ -79,14 +79,14 @@
 </ng-template>
 
 <ng-template #searchForm>
-    <ds-search-form *ngIf="searchEnabled" id="search-form"
+    <ds-themed-search-form *ngIf="searchEnabled" id="search-form"
                     [query]="(searchOptions$ | async)?.query"
                     [scope]="(searchOptions$ | async)?.scope"
                     [currentUrl]="searchLink"
                     [showScopeSelector]="showScopeSelector"
                     [inPlaceSearch]="inPlaceSearch"
                     [searchPlaceholder]="searchFormPlaceholder | translate">
-    </ds-search-form>
+    </ds-themed-search-form>
     <div class="row mb-3 mb-md-1">
         <div class="labels col-sm-9">
             <ds-search-labels *ngIf="searchEnabled" [inPlaceSearch]="inPlaceSearch"></ds-search-labels>
diff --git a/src/app/shared/shared.module.ts b/src/app/shared/shared.module.ts
index 45e9764151..a259d15912 100644
--- a/src/app/shared/shared.module.ts
+++ b/src/app/shared/shared.module.ts
@@ -60,6 +60,7 @@ import { LoadingComponent } from './loading/loading.component';
 import { PaginationComponent } from './pagination/pagination.component';
 import { ThumbnailComponent } from '../thumbnail/thumbnail.component';
 import { SearchFormComponent } from './search-form/search-form.component';
+import { ThemedSearchFormComponent } from './search-form/themed-search-form.component';
 import {
   SearchResultGridElementComponent
 } from './object-grid/search-result-grid-element/search-result-grid-element.component';
@@ -396,6 +397,7 @@ const COMPONENTS = [
   PaginationComponent,
   RSSComponent,
   SearchFormComponent,
+  ThemedSearchFormComponent,
   PageWithSidebarComponent,
   SidebarDropdownComponent,
   SidebarFilterComponent,