Merge branch 'master' into ibarakov/fix-7379-10.1.x

Author: DiyanDimitrov

CHANGELOG.md

@@ -72,14 +72,16 @@ The following example shows how you can use the Indigo theme:
     - `activeViewChanged` event emitted after the active view (DEFAULT, YEAR, DECADE) is changed after user interaction.
     - `viewDate` day value is always 1.
     - `activeView` setter is now available as an input property.
+- `IgxCombo`
+    - Added `showSearchCaseIcon` to display a case sensitive search icon in the search input. Icon click allows the user to easily toggle the search case sensitivity.
 
 ## 10.0.0
 
 ### General
 - `igxGrid`
     - **Behavioral Change** - Group rows now display the group column's header name instead of field when one is available.
 - `igx-select`, `igx-combo`, `igx-drop-down`
-    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default.
+    - **Behavioral Change** - The select, combo, and dropdown items now have display block and text-overflow ellipsis enabled by default. This requires styling to be handled on the application-level if there is something more than a simple text in the item.
 - `IgxTransaction` - The `onStateUpdate` now emits with information of its origin. The emitted value is of type `StateUpdateEvent`, which has two properties:
     - `origin` - it can vary within the values of the `TransactionEventOrigin` interface;
     - `actions` - contains information about the transactions, that caused the emission of the event.

projects/igniteui-angular/src/lib/combo/README.md

@@ -127,6 +127,12 @@ By default filtering in the combo is enabled. However you can disable it using t
 <igx-combo [filterable]="false"></igx-combo>
 ```
 
+You can enable search case sensitivity by setting the `showSearchCaseIcon` property to true
+
+```html
+<igx-combo [showSearchCaseIcon]="true"></igx-combo>
+```
+
 <div class="divider--half"></div>
 
 <div class="divider--half"></div>
@@ -296,6 +302,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 |  `data`                  | combo data source                                 | any                         |
 |  `allowCustomValue`      | enables/disables combo custom value                | boolean                     |
 |  `filterable`            | enables/disables combo drop down filtering - enabled by default                  | boolean                     |
+|  `showSearchCaseIcon`          | defines whether the search case-sensitive icon should be displayed - disabled by default| boolean                     |
 |  `valueKey`              | combo value data source property                  | string                      |
 |  `displayKey`            | combo display data source property                | string                      |
 |  `groupKey`              | combo item group                                  | string                      |
@@ -326,7 +333,7 @@ Setting `[displayDensity]` affects the control's items' and inputs' css properti
 | Name                | Description                                                             | Cancelable   | Parameters                              |
 |------------------   |-------------------------------------------------------------------------|------------- |-----------------------------------------|
 | `onSelectionChange` | Emitted when item selection is changing, before the selection completes | true         | [`IComboSelectionChangeEventArgs`](https://www.infragistics.com/products/ignite-ui-angular/docs/typescript/latest/interfaces/icomboselectionchangeeventargs.html) |
-| `onSearchInput`     | Emitted when an the search input's input event is triggered             | false        | { searchValue: `string` }               |
+| `onSearchInput`     | Emitted when an the search input's input event is triggered             | true        | { searchValue: `string` }               |
 | `onAddition`        | Emitted when an item is being added to the data collection              | false        | { oldCollection: `any[]`, addedItem: `<any>`, newCollection: `any[]` }|
 | `onDataPreLoad`     | Emitted when new chunk of data is loaded from the virtualization        | false        | { event: `Event` }                        |
 | `onOpening`   | Emitted before the dropdown is opened                                   | false        | { event: `Event` }                        |

projects/igniteui-angular/src/lib/combo/combo.component.html

@@ -9,7 +9,7 @@
         <ng-content select="igx-hint, [igxHint]"></ng-content>
     </ng-container>
     <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [attr.placeholder]="placeholder"
-        [disabled]="disabled" (blur)="onBlur()" (focus)="onFocus()"/>
+        [disabled]="disabled" (blur)="onBlur()" (focus)="onFocus()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
@@ -39,15 +39,19 @@
             [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
             (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
             aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
+        <igx-suffix *ngIf="showSearchCaseIcon">
+            <igx-icon fontSet="case-sensitive" name="case-sensitive" [isActive]="filteringOptions.caseSensitive"
+                (click)="filteringOptions.caseSensitive=!filteringOptions.caseSensitive">
+            </igx-icon>
+        </igx-suffix>
     </igx-input-group>
     <ng-container *ngTemplateOutlet="headerTemplate">
     </ng-container>
     <div #dropdownItemContainer class="igx-combo__content" [style.overflow]="'hidden'"
         [style.maxHeight.px]="itemsMaxHeight" [igxDropDownItemNavigation]="dropdown" (focus)="dropdown.onFocus()"
         [tabindex]="dropdown.collapsed ? -1 : 0" role="listbox" [attr.id]="dropdown.id">
-        <igx-combo-item role="option" [itemHeight]='itemHeight'
-            *igxFor="let item of data
-            | comboFiltering:searchValue:displayKey:filterable
+        <igx-combo-item role="option" [itemHeight]='itemHeight' *igxFor="let item of data
+            | comboFiltering:searchValue:displayKey:filterable:filteringOptions
             | comboGrouping:groupKey:valueKey;
             index as rowIndex; containerSize: itemsMaxHeight; scrollOrientation: 'vertical'; itemSize: itemHeight"
             [value]="item" [isHeader]="item.isHeader" [index]="rowIndex">