[SDC] rebase 1710

Change-Id: I07fced02f40a57700d9d35ed3ba498bca351fb13
Signed-off-by: Michael Lando <ml636r@att.com>

6 files changed, 164 insertions, 0 deletions

diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html
new file mode 100644
index 0000000000..36629594b0
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.html
@@ -0,0 +1,5 @@
+<div class="search-bar-container {{class}}">
+    <input class="search-bar-input" type="text" [placeholder]="placeholder" [(ngModel)]="searchQuery" (ngModelChange)="searchQueryChange($event)"/>
+    <span class="clear-search-x" *ngIf="searchQuery" (click)="clearSearchQuery()">x</span>
+    <button class="search-bar-button" (click)="searchButtonClick()"></button>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less
new file mode 100644
index 0000000000..cfeb8d3b01
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.less
@@ -0,0 +1,58 @@
+.search-bar-container {
+    display:flex;
+    border-radius: 4px;
+    box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29);
+
+    .search-bar-input {
+        border: 1px solid #cdcdcd;
+        border-radius: 4px;
+        border-right:none;
+        border-top-right-radius: 0;
+        border-bottom-right-radius: 0;
+        outline:none;
+        padding:2px 50px 2px 10px;
+        color:  #5a5a5a;
+        font-size: 1em;
+        font-style: italic;
+    }
+
+    .clear-search-x {
+        position:absolute;
+        right:40px;
+        top:5px;
+        padding: 0 5px;
+        
+        &:hover {
+            border-radius:2px;
+            background-color: #ebebeb;
+            cursor:pointer;
+        }
+    }
+
+    .search-bar-button {
+        //background: url('../../../../assets/styles/svg/source/search-magnify.svg') no-repeat 50%;
+        background: url('../../../../assets/styles/images/sprites/sprite-global.png') no-repeat -206px -1275px;
+        background-color:  rgba(234, 234, 234, 0.88);
+        width: 30px;
+        height: 30px;
+        padding: 0;
+        cursor:pointer;
+        border:solid 1px #cdcdcd;
+        border-top-right-radius: 4px;
+        border-bottom-right-radius: 4px;
+
+        &:hover {
+            background-position:-126px -1275px;
+        }
+
+        &:active {
+            background-color:  rgba(31, 171, 223, 0.88);
+            background-position:-45px -1275px;
+            border-left:none;
+        }
+        &:focus {
+            outline:none;
+        }
+
+    }
+}
diff --git a/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts
new file mode 100644
index 0000000000..2835d20ba4
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/search-bar/search-bar.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+
+@Component({
+    selector: 'search-bar',
+    templateUrl: './search-bar.component.html',
+    styleUrls: ['./search-bar.component.less'],
+    encapsulation: ViewEncapsulation.None
+})
+export class SearchBarComponent {
+
+    @Input() placeholder: string;
+    @Input() class: string;
+    @Input() searchQuery: string;
+    @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
+
+    searchButtonClick = (): void => {
+        this.searchButtonClicked.emit(this.searchQuery);
+    }
+
+    searchQueryChange = ($event): void => {
+        this.searchChanged.emit($event);
+    }
+
+    private clearSearchQuery = (): void => {
+        this.searchQuery = "";
+        this.searchButtonClick();
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html
new file mode 100644
index 0000000000..c9769ba5ae
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.html
@@ -0,0 +1,6 @@
+<div class="search-with-autocomplete-container {{searchBarClass}}" [class.autocomplete-visible]="autoCompleteValues && autoCompleteValues.length" [class.active]="searchQuery && searchQuery.length">
+    <search-bar [placeholder]="searchPlaceholder" [searchQuery]="searchQuery" (searchButtonClicked)="updateSearch($event)" (searchChanged)="searchChange($event)"></search-bar>
+    <div class="autocomplete-results">
+        <div *ngFor="let item of autoCompleteValues" class="autocomplete-result-item" (click)="updateSearch(item)">{{item}}</div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less
new file mode 100644
index 0000000000..92b054cd85
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.less
@@ -0,0 +1,35 @@
+
+.search-with-autocomplete-container{  
+    &.autocomplete-visible {
+
+        .search-bar-input {
+            border-bottom-left-radius: 0;
+        }
+        .search-bar-button {
+            border-bottom-right-radius: 0;
+        }
+        .autocomplete-results {
+            border: solid 1px #d2d2d2;
+            border-top:none;
+            border-bottom-left-radius: 4px;
+            border-bottom-right-radius: 4px;
+            background-color: #fff;
+            padding: 10px 20px;
+            width:100%;
+            position:absolute;
+            max-height: 200px;
+            overflow-y: scroll;
+        }
+
+        .autocomplete-result-item {
+            color:#5a5a5a;
+            padding: 5px 0;
+            cursor:pointer;
+
+            &:hover {
+                color: #999;
+            }
+        }
+    }
+}
+
diff --git a/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts
new file mode 100644
index 0000000000..ced056d1fc
--- /dev/null
+++ b/catalog-ui/src/app/ng2/shared/search-with-autocomplete/search-with-autocomplete.component.ts
@@ -0,0 +1,30 @@
+import { Component, Input, Output, EventEmitter, ViewEncapsulation } from '@angular/core';
+import { SearchBarComponent } from '../search-bar/search-bar.component';
+
+@Component({
+    selector: 'search-with-autocomplete',
+    templateUrl: './search-with-autocomplete.component.html',
+    styleUrls: ['./search-with-autocomplete.component.less'],
+    encapsulation: ViewEncapsulation.None
+})
+export class SearchWithAutoCompleteComponent {
+
+    @Input() searchPlaceholder: string;
+    @Input() searchBarClass: string;
+    @Input() searchQuery: string;
+    @Input() autoCompleteValues: Array<string>;
+    @Output() searchChanged: EventEmitter<any> = new EventEmitter<any>();
+    @Output() searchButtonClicked: EventEmitter<string> = new EventEmitter<string>();
+
+    searchChange = (searchTerm: string) => {
+        this.searchQuery = searchTerm;
+        this.searchChanged.emit(searchTerm);
+    }
+
+    updateSearch = (searchTerm: string) => {
+        this.searchQuery = searchTerm;
+        this.searchButtonClicked.emit(searchTerm);
+        this.autoCompleteValues = [];
+    }
+}
+