New Search (#1029)

* Implemented a basic version of enhanced search where we can return multiple types of entities in one go. Current unoptimized version is twice as expensive as normal search, but under NFR. Currently 200ms max.

* Worked in some basic code for grouped typeahead search component. Keyboard navigation is working.

* Most of the code is in place for the typeahead. Needs css work and some accessibility work.

* Hooked up filtering into all-series. Added debouncing on search, clear input field now works. Some optimizations related to memory cleanup

* Added ability to define a custom placeholder

* Hooked in noResults template and logic

* Fixed a duplicate issue in Collection tag searching and commented out old code. OPDS still needs some updates.

* Don't trigger inputChanged when reopening/clicking on input.

* Added Reading list to OPDS search

* Added a new image component so all the images can be lazyloaded without logic duplication

* Added a maxWidth/Height on the image component

* Search css update

* cursor fixes

* card changes

- fixing border radius on cards
- adding bottom card color

* Expose intenral state of if the search component has focus

* Adjusted the accessibility to not use complex keys and just use tab instead since this is a search, not a typeahead

* Cleaned up dead code, removed angular-ng-complete library as it's no longer used.

* Fixes for mobile search

* Merged code

* Fixed a bad merge and some nav bar styling

* Cleaned up the focus code for nav bar

* Removed focusIndex and just use hover state. Fixed clicking on items

* fixing overlay overlap issue

Co-authored-by: Robbie Davis <robbie@therobbiedavis.com>

UI/Web/src/app/shared/image/image.component.html

@@ -0,0 +1,3 @@
+<img #img class="lazyload" [src]="imageService.placeholderImage" [attr.data-src]="imageUrl" 
+            (error)="imageService.updateErroredImage($event)" 
+            aria-hidden="true">

UI/Web/src/app/shared/image/image.component.scss

@@ -0,0 +1,3 @@
+img {
+    width: 100%;
+}

UI/Web/src/app/shared/image/image.component.ts

@@ -0,0 +1,66 @@
+import { Component, ElementRef, Input, OnChanges, OnInit, Renderer2, SimpleChanges, ViewChild } from '@angular/core';
+import { ImageService } from 'src/app/_services/image.service';
+
+/**
+ * This is used for images with placeholder fallback.
+ */
+@Component({
+  selector: 'app-image',
+  templateUrl: './image.component.html',
+  styleUrls: ['./image.component.scss']
+})
+export class ImageComponent implements OnChanges {
+
+  /**
+   * Source url to load image
+   */
+  @Input() imageUrl!: string;
+  /**
+   * Width of the image. If not defined, will not be applied
+   */
+  @Input() width: string = '';
+  /**
+   * Height of the image. If not defined, will not be applied
+   */
+  @Input() height: string = '';
+  /**
+   * Max Width of the image. If not defined, will not be applied
+   */
+  @Input() maxWidth: string = '';
+  /**
+   * Max Height of the image. If not defined, will not be applied
+   */
+   @Input() maxHeight: string = '';
+  /**
+   * Border Radius of the image. If not defined, will not be applied
+   */
+   @Input() borderRadius: string = '';
+
+  @ViewChild('img', {static: true}) imgElem!: ElementRef<HTMLImageElement>;
+
+  constructor(public imageService: ImageService, private renderer: Renderer2) { }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (this.width != '') {
+      this.renderer.setStyle(this.imgElem.nativeElement, 'width', this.width);
+    }
+
+    if (this.height != '') {
+      this.renderer.setStyle(this.imgElem.nativeElement, 'height', this.height);
+    }
+
+    if (this.maxWidth != '') {
+      this.renderer.setStyle(this.imgElem.nativeElement, 'max-width', this.maxWidth);
+    }
+
+    if (this.maxHeight != '') {
+      this.renderer.setStyle(this.imgElem.nativeElement, 'max-height', this.maxHeight);
+    }
+
+    if (this.borderRadius != '') {
+      this.renderer.setStyle(this.imgElem.nativeElement, 'border-radius', this.borderRadius);
+    }
+    
+  }
+
+}

UI/Web/src/app/shared/shared.module.ts

@@ -17,6 +17,7 @@ import { NgCircleProgressModule } from 'ng-circle-progress';
 import { SentenceCasePipe } from './sentence-case.pipe';
 import { PersonBadgeComponent } from './person-badge/person-badge.component';
 import { BadgeExpanderComponent } from './badge-expander/badge-expander.component';
+import { ImageComponent } from './image/image.component';
 
 @NgModule({
   declarations: [
@@ -32,7 +33,8 @@ import { BadgeExpanderComponent } from './badge-expander/badge-expander.componen
     CircularLoaderComponent,
     SentenceCasePipe,
     PersonBadgeComponent,
-    BadgeExpanderComponent
+    BadgeExpanderComponent,
+    ImageComponent
   ],
   imports: [
     CommonModule,
@@ -55,7 +57,8 @@ import { BadgeExpanderComponent } from './badge-expander/badge-expander.componen
     TagBadgeComponent,
     CircularLoaderComponent,
     PersonBadgeComponent,
-    BadgeExpanderComponent
+    BadgeExpanderComponent,
+    ImageComponent
   ],
 })
 export class SharedModule { }