catalog-ui/src/app/ng2/pages/composition/graph/canvas-search/canvas-search.component.html

   1 <div class="canvas-search-component" [ngClass]="{'results-shown': autoCompleteResults.length}"
   2      [class.canvas-search-visible]="autoCompleteValues && autoCompleteValues.length" [attr.data-tests-id]="testId">
   3     <div class="canvas-search-bar-container" [attr.data-tests-id]="testId"
   4          [class.active]="searchQuery && searchQuery.length">
   5         <sdc-search-bar class="canvas-search-bar"
   6               [placeHolder]="placeholder"
   7               (onSearchClicked)="onSearchClicked($event)"
   8               [size]="'medium'"
   9               [value]="searchQuery"
  10               (valueChange)="onSearchQueryChanged($event)">
  11         </sdc-search-bar>
  12         <svg-icon class="canvas-clear-search"
  13               [name]="'close'"
  14               [clickable]="true"
  15               [mode]="'secondary'"
  16               [size]="'small'"
  17               (click)="onClearSearch()">
  18         </svg-icon>
  19     </div>
  20     <dropdown-results *ngIf="autoCompleteResults && autoCompleteResults.length" [options]="autoCompleteResults"
  21                       (onItemSelected)="onItemSelected($event)"></dropdown-results>
  22 </div>
  23