From 111c8bff4a36dca3c50c458ce0649cda8f7be9dd Mon Sep 17 00:00:00 2001
From: Carlos Valle <carlos.m.valle@gmail.com>
Date: Thu, 16 Feb 2023 10:15:37 -0500
Subject: [PATCH] layout(header): help slide search event

---
 .../src/lib/header/header.component.html        |  2 +-
 .../src/lib/header/header.component.stories.mdx |  2 ++
 libs/layouts/src/lib/header/header.component.ts |  5 +++++
 libs/layouts/src/lib/header/help.component.ts   | 17 +++++++++++++++++
 4 files changed, 25 insertions(+), 1 deletion(-)

diff --git a/libs/layouts/src/lib/header/header.component.html b/libs/layouts/src/lib/header/header.component.html
index 80cf5e5..03ded48 100644
--- a/libs/layouts/src/lib/header/header.component.html
+++ b/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">
diff --git a/libs/layouts/src/lib/header/header.component.stories.mdx b/libs/layouts/src/lib/header/header.component.stories.mdx
index d57bb14..aa3cae7 100644
--- a/libs/layouts/src/lib/header/header.component.stories.mdx
+++ b/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>
diff --git a/libs/layouts/src/lib/header/header.component.ts b/libs/layouts/src/lib/header/header.component.ts
index 9491adb..67ff237 100644
--- a/libs/layouts/src/lib/header/header.component.ts
+++ b/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
    */
diff --git a/libs/layouts/src/lib/header/help.component.ts b/libs/layouts/src/lib/header/help.component.ts
index 95b9b65..264dd33 100644
--- a/libs/layouts/src/lib/header/help.component.ts
+++ b/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);
+  }
+
 }