Catalog alignment

Issue-ID: SDC-2724
Signed-off-by: ys9693 <ys9693@att.com>
Change-Id: I52b4aacb58cbd432ca0e1ff7ff1f7dd52099c6fe

1 files changed, 25 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.ts
new file mode 100644
index 0000000000..c1a45a9a4b
--- /dev/null
+++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.ts
@@ -0,0 +1,25 @@
+import {Component, EventEmitter, Input, Output} from '@angular/core';
+import {AutoCompleteComponent} from "onap-ui-angular/dist/autocomplete/autocomplete.component";
+
+@Component({
+    selector: 'canvas-search',
+    templateUrl: './canvas-search.component.html',
+    styleUrls: ['./canvas-search.component.less']
+})
+export class CanvasSearchComponent extends AutoCompleteComponent {
+
+    @Output() public searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
+    @Output() public onSelectedItem: EventEmitter<string> = new EventEmitter<string>();
+
+    public onSearchClicked = (searchText:string)=> {
+        this.searchButtonClicked.emit(searchText);
+    }
+
+    public onItemSelected = (selectedItem) => {
+        this.searchQuery = selectedItem.value;
+        this.autoCompleteResults = [];
+        this.searchButtonClicked.emit(this.searchQuery);
+        this.onSelectedItem.emit(selectedItem);
+    }
+
+}