Merge branch 'vnext' into rivanova/banner-samples

Author: kacheshmarova

samples/grids/grid/data-searching/index.html

@@ -20,7 +20,7 @@
     <div class="container vertical">
       <div style="margin-bottom: 1rem">
         <igc-input id="searchBox" name="searchBox">          
-          <igc-icon id="clearIcon" slot="prefix" name="clear" collection="material"></igc-icon>
+          <igc-icon id="searchIcon" slot="prefix" name="search" collection="material"></igc-icon>          
           <div slot="suffix">
             <igc-chip selectable="true" id="caseSensitiveChip">Case Sensitive</igc-chip>
             <igc-chip selectable="true" id="exactMatchChip">Exact Match</igc-chip>
@@ -32,7 +32,7 @@
         </igc-input>
       </div>
 
-      <igc-grid auto-generate="false" id="grid" name="grid" allow-filtering="true" display-density="compact">
+      <igc-grid auto-generate="false" id="grid" name="grid" allow-filtering="true" display-density="compact" height="100%" width="100%">
         <igc-column field="IndustrySector" data-type="string" sortable="true"></igc-column>        
         <igc-column field="IndustryGroup" data-type="string" sortable="true"></igc-column>        
         <igc-column field="SectorType" data-type="string" sortable="true"></igc-column>        

samples/grids/grid/data-searching/src/index.ts

@@ -3,44 +3,44 @@ import 'igniteui-webcomponents/themes/light/bootstrap.css';
 import "igniteui-webcomponents-grids/grids/themes/light/bootstrap.css";
 
 import { IgcGridComponent } from 'igniteui-webcomponents-grids/grids';
-import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText  } from 'igniteui-webcomponents';
+import { defineComponents, IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent, registerIconFromText } from 'igniteui-webcomponents';
 import { MarketData } from './MarketData';
 
 defineComponents(IgcInputComponent, IgcChipComponent, IgcIconComponent, IgcIconButtonComponent);
 
 export class Sample {
 
     private grid: IgcGridComponent;    
-
     private searchBox: IgcInputComponent;
-    
+    private searchIcon: IgcIconComponent;
     private clearIcon: IgcIconComponent;
     private nextIconButton: IgcIconButtonComponent;
     private prevIconButton: IgcIconButtonComponent;
-
     private caseSensitiveChip: IgcChipComponent;
     private exactMatchChip: IgcChipComponent;
-
     private data: MarketData;
-
     private _bind: () => void;
 
     constructor() {
         var grid = this.grid = document.getElementById('grid') as IgcGridComponent;        
-                
+        
         this.nextSearch = this.nextSearch.bind(this);
         this.prevSearch = this.prevSearch.bind(this);
         this.clearSearch = this.clearSearch.bind(this);        
+      
 
         const prevIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.41 7.41 14 6l-6 6 6 6 1.41-1.41L10.83 12z'></path></svg>";
         const nextIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M10 6 8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'></path></svg>";
         const clearIconText = "<svg width='24' height='24' viewBox='0 0 24 24' title='Clear'><path d='M19 6.41 17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z'></path></svg>";
-        
+        const searchIconText = "<svg width='24' height='24' viewBox='0 0 24 24'><path d='M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z' /></svg>";
+
         registerIconFromText("prev", prevIconText, "material");
         registerIconFromText("next", nextIconText, "material");
         registerIconFromText("clear", clearIconText, "material");
+        registerIconFromText("search", searchIconText, "material");
+
+        var searchIcon = this.searchIcon = document.getElementById('searchIcon') as IgcIconComponent;
 
-        var clearIcon = this.clearIcon = document.getElementById('clearIcon') as IgcIconComponent;
 
         var nextIconButton = this.nextIconButton = document.getElementById('nextIconBtn') as IgcIconButtonComponent;
         var prevIconButton = this.prevIconButton = document.getElementById('prevIconBtn') as IgcIconButtonComponent;
@@ -56,9 +56,13 @@ export class Sample {
             grid.data = this.data;            
 
             searchBox.addEventListener("keydown", (evt) => { this.onSearchKeydown(evt); });
+            this.searchBox.addEventListener("igcInput", (evt) => {
+                this.searchIcon.name = evt.detail ? 'clear' : 'search';
+                this.grid.findNext(evt.detail, this.caseSensitiveChip.selected, this.exactMatchChip.selected);
+            });
             nextIconButton.addEventListener("click", this.nextSearch);
             prevIconButton.addEventListener("click", this.prevSearch);
-            clearIcon.addEventListener("click", this.clearSearch);
+            searchIcon.addEventListener("click", this.clearSearch);
         }
         this._bind();
     }
@@ -83,7 +87,8 @@ export class Sample {
 
     public clearSearch() {
         this.searchBox.value = "";
-        this.grid.clearSearch();
+        this.grid.clearSearch();    
+        this.searchIcon.name = 'search';    
     }
 }