layout(header): help slide search event

libs/layouts/src/lib/header/header.component.html

@@ -49,7 +49,7 @@
         </li>
       </ul>
       <div *ngIf="help && help.length > 0 && !mobileNavActive" class="position-absolute top-1 right-205">
-        <sds-header-help [content]="help"></sds-header-help>
+        <sds-header-help [content]="help" (searchEvent)="helpSearchEvent.emit($event)"></sds-header-help>
       </div>
       <div *ngIf="!hideSecondaryLinks" class="usa-nav__secondary" [ngClass]="{'sds-nav__secondary--blank': !showHeaderLogo}">
         <ul class="usa-nav__secondary-links">

libs/layouts/src/lib/header/header.component.stories.mdx

@@ -450,9 +450,11 @@ import { BrowserModule } from '@angular/platform-browser';
             },
           },
         ],
+        search: function(term){ console.log('Searching for: ', term); }
       },
       template: `
         <sds-header
+          (helpSearchEvent)="search($event)"
           [model]="model"
           [help]="help">
         </sds-header>

libs/layouts/src/lib/header/header.component.ts

@@ -55,7 +55,12 @@ export class SdsHeaderComponent {
 
   @Input() alertsTemplate: TemplateRef<any>;
 
+  /**
+   * Help properties
+   */
   @Input() help: [];
+  @Output() helpSearchEvent = new EventEmitter<string>();
+
   /**
    * event for event based
    */

libs/layouts/src/lib/header/help.component.ts

@@ -4,6 +4,8 @@ import {
   ComponentRef,
   Inject,
   Input,
+  Output,
+  EventEmitter,
   ViewEncapsulation,
 } from '@angular/core';
 import { NavigationStart, Router } from '@angular/router';
@@ -16,6 +18,7 @@ import { filter } from 'rxjs/operators';
 
 interface Data {
   help: [];
+  search: any;
 }
 
 @Component({
@@ -40,6 +43,7 @@ interface Data {
 })
 export class SdsHeaderHelpComponent {
   @Input() content;
+  @Output() searchEvent = new EventEmitter<string>();
 
   openedDialogRef: SdsDialogRef<HelpContentComponent>;
 
@@ -56,6 +60,7 @@ export class SdsHeaderHelpComponent {
       },
       data: {
         help: this.content,
+        search: this.searchEvent
       },
     });
   }
@@ -67,6 +72,10 @@ export class SdsHeaderHelpComponent {
       class="help-slide-out bg-base-lighter minh-full padding-x-2 padding-top-2"
     >
       <h2 class="font-heading-lg text-semibold">Help</h2>
+
+      <input [(ngModel)]="searchValue" type="text" />
+      <button (click)="sendSearchEvent()">Search</button>
+
       <div *ngFor="let item of data.help">
         <h3
           class="font-heading-md text-semibold margin-top-205 margin-bottom-1"
@@ -86,6 +95,9 @@ export class SdsHeaderHelpComponent {
   encapsulation: ViewEncapsulation.None,
 })
 export class HelpContentComponent {
+
+  searchValue:string;
+
   constructor(
     private router: Router,
     public dialogRef: SdsDialogRef<HelpContentComponent>,
@@ -104,4 +116,9 @@ export class HelpContentComponent {
       ref.instance[input] = value;
     }
   }
+
+  sendSearchEvent() {
+    this.data.search.emit(this.searchValue);
+  }
+
 }