Added searchClear emitter to Search Component (#1013)

src/app/components/search/index.html

@@ -41,6 +41,10 @@
       propertyName="searchChange">
       Fires when the search text is changed.
     </sky-demo-page-property>
+    <sky-demo-page-property
+      propertyName="searchClear">
+      Fires when the search text is cleared.
+    </sky-demo-page-property>
   </sky-demo-page-properties>
   <sky-demo-page-example>
     <sky-search-demo></sky-search-demo>

src/modules/search/search.component.spec.ts

@@ -276,6 +276,16 @@ describe('Search component', () => {
     expect(component.lastSearchTextChanged).toBe('');
   });
 
+  it('should emit the cleared event when clear button is clicked', () => {
+    spyOn(component.searchComponent.searchClear, 'emit').and.callThrough();
+    setInput('applied text');
+    triggerApplyButton();
+    triggerClearButton();
+
+    expect(element.query(By.css('.sky-input-group-clear')).nativeElement).not.toBeVisible();
+    expect(component.searchComponent.searchClear.emit).toHaveBeenCalled();
+  });
+
   it('should apply the correct focus class', () => {
     triggerFocus();
     let containerEl = element.query(By.css('.sky-search-input-container.sky-search-input-focused'));

src/modules/search/search.component.ts

@@ -73,6 +73,9 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
   @Output()
   public searchChange = new EventEmitter<string>();
 
+  @Output()
+  public searchClear = new EventEmitter<void>();
+
   @Input()
   public searchText: string;
 
@@ -165,6 +168,8 @@ export class SkySearchComponent implements OnDestroy, OnInit, OnChanges {
     this.searchChange.emit(this.searchText);
 
     this.searchApply.emit(this.searchText);
+
+    this.searchClear.emit();
   }
 
   public enterPress(event: KeyboardEvent, searchText: string) {