diff options
Diffstat (limited to 'catalog-ui/src/app/ng2/pages/composition/graph/canvas-search')
4 files changed, 120 insertions, 0 deletions
diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.html b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.html new file mode 100644 index 0000000000..a8645dc5f0 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.html @@ -0,0 +1,23 @@ +<div class="canvas-search-component" [ngClass]="{'results-shown': autoCompleteResults.length}" + [class.canvas-search-visible]="autoCompleteValues && autoCompleteValues.length" [attr.data-tests-id]="testId"> + <div class="canvas-search-bar-container" [attr.data-tests-id]="testId" + [class.active]="searchQuery && searchQuery.length"> + <sdc-search-bar class="canvas-search-bar" + [placeHolder]="placeholder" + (onSearchClicked)="onSearchClicked($event)" + [size]="'medium'" + [value]="searchQuery" + (valueChange)="onSearchQueryChanged($event)"> + </sdc-search-bar> + <svg-icon class="canvas-clear-search" + [name]="'close'" + [clickable]="true" + [mode]="'secondary'" + [size]="'small'" + (click)="onClearSearch()"> + </svg-icon> + </div> + <dropdown-results *ngIf="autoCompleteResults && autoCompleteResults.length" [options]="autoCompleteResults" + (onItemSelected)="onItemSelected($event)"></dropdown-results> +</div> + diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less new file mode 100644 index 0000000000..247f2a3913 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.less @@ -0,0 +1,42 @@ +.canvas-search-component { + + .canvas-search-bar-container { + display:flex; + border-radius: 4px; + align-items: center; + box-shadow: 0px 2px 3.88px 0.12px rgba(0, 0, 0, 0.29); + + /deep/.sdc-search-bar .search-bar-container .search-button { + border: solid 1px #d2d2d2; + } + + /deep/.sdc-input__input { + width: 250px; + transition: all 0.4s; + } + + .canvas-clear-search { + position: absolute; + right: 45px; + } + } + + &:not(:hover):not(.canvas-search-visible):not(.active) { + border-radius: 0; + box-shadow: none; + + /deep/.sdc-input__input:not(:focus) { + border: none; + padding: 0px; + width: 0px; + } + .canvas-clear-search { + display: none; + } + } +} + +@keyframes spin { + 0% { transform: rotate(0deg); } + 100% { transform: rotate(360deg); } +}
\ No newline at end of file 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); + } + +} diff --git a/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.module.ts b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.module.ts new file mode 100644 index 0000000000..6df06067a6 --- /dev/null +++ b/catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.module.ts @@ -0,0 +1,30 @@ +import {SdcUiComponentsModule} from "onap-ui-angular"; +import { NgModule } from "@angular/core"; +import {CanvasSearchComponent} from "./canvas-search.component"; +import {CommonModule} from "@angular/common"; +import {BrowserAnimationsModule} from "@angular/platform-browser/animations"; +import {HttpClientModule} from "@angular/common/http"; +import {BrowserModule} from "@angular/platform-browser"; +import {AutocompletePipe} from "onap-ui-angular/dist/autocomplete/autocomplete.pipe"; + +@NgModule({ + declarations: [ + CanvasSearchComponent + ], + imports: [ + CommonModule, + BrowserModule, + HttpClientModule, + BrowserAnimationsModule, + SdcUiComponentsModule, + ], + exports: [ + CanvasSearchComponent + ], + entryComponents: [ + CanvasSearchComponent + ], + providers: [AutocompletePipe] +}) +export class CanvasSearchModule { +} |