Merge branch 'w2p-94688_added-themeable-search-form-component' into atmire-contributions-alex-7.5

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>
 

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>

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>
 

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">

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');
+  }
+
+}

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>

src/app/shared/shared.module.ts

@@ -51,6 +51,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';
@@ -309,6 +310,7 @@ const COMPONENTS = [
   PaginationComponent,
   RSSComponent,
   SearchFormComponent,
+  ThemedSearchFormComponent,
   PageWithSidebarComponent,
   SidebarDropdownComponent,
   ThumbnailComponent,

src/themes/custom/app/shared/search-form/search-form.component.ts

@@ -0,0 +1,14 @@
+import { Component } from '@angular/core';
+import {
+  SearchFormComponent as BaseComponent,
+} from '../../../../../app/shared/search-form/search-form.component';
+
+@Component({
+  selector: 'ds-search-form',
+  // styleUrls: ['./search-form.component.scss'],
+  styleUrls: ['../../../../../app/shared/search-form/search-form.component.scss'],
+  // templateUrl: './search-form.component.html',
+  templateUrl: '../../../../../app/shared/search-form/search-form.component.html',
+})
+export class SearchFormComponent extends BaseComponent {
+}

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

@@ -50,6 +50,7 @@ import { BrowseBySwitcherComponent } from './app/browse-by/browse-by-switcher/br
 import { CommunityListPageComponent } from './app/community-list-page/community-list-page.component';
 import { SearchPageComponent } from './app/search-page/search-page.component';
 import { ConfigurationSearchPageComponent } from './app/search-page/configuration-search-page.component';
+import { SearchFormComponent } from './app/shared/search-form/search-form.component';
 import { EndUserAgreementComponent } from './app/info/end-user-agreement/end-user-agreement.component';
 import { PageNotFoundComponent } from './app/pagenotfound/pagenotfound.component';
 import { ObjectNotFoundComponent } from './app/lookup-by-id/objectnotfound/objectnotfound.component';
@@ -133,6 +134,7 @@ const DECLARATIONS = [
   CommunityListPageComponent,
   SearchPageComponent,
   ConfigurationSearchPageComponent,
+  SearchFormComponent,
   EndUserAgreementComponent,
   PageNotFoundComponent,
   ObjectNotFoundComponent,