IgniteUI · kdinev · Oct 14, 2019 · Sep 12, 2019 · Sep 25, 2019 · Sep 25, 2019
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,7 +1,13 @@
-# Ignite UI for Angular Change Log
+# Ignite UI for Angular Change Log
 
 All notable changes for each version of this project will be documented in this file.
 
+## 8.2.3
+- `IgxTextHighlightDirective` - The default highlight directive styles have been moved to a Sass theme - `igx-highlight-theme`; You can modify the resting and active background and text color styles of the directive by passing the respective properties to the Sass theme. You can still pass your own CSS classes to the highlight directive via the cssClass and activeCssClass inputs.
+
+- `IgxChip`
+    - **Breaking Change** The `originalEvent` property for the events `onMoveStart`, `onMoveEnd`, `onClick` and `onSelection` now provides the events, passed from the `igxDrag` directive. The passed original events are in other words the previous events that triggered the `igxChip` ones. They also have original events until a browser event is reached.
+
 ## 8.2.0
 ### New theme
 Ignite UI for angular now have a new theme that mimics Microsoft "Fluent" design system.  
@@ -75,6 +81,7 @@ For more information about the theming please read our [documentation](https://w
     - `isCellSelected` method has been deprecated. Now you can use `selected` property.
     - `rowSelectable` property has been deprecated. Now you can use `rowSelection` property to enable row selection and also you can show and hide the row selectors by setting `hideRowSelectors` property to true or false (which is the default value).
     - Removed deprecated event `OnFocusChange`
+    - `IgxGridBaseComponent` exposes a new property, `dataView` that returns the currently transformed paged/filtered/sorted/grouped data, displayed in the grid
     - **Breaking Change** `igxExcelStyleSortingTemplate` directive is renamed to `igxExcelStyleSorting`.
     - **Breaking Change** `igxExcelStyleMovingTemplate` directive is renamed to `igxExcelStyleMoving`.
     - **Breaking Change** `igxExcelStyleHidingTemplate` directive is renamed to `igxExcelStyleHiding`.

diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.html b/projects/igniteui-angular/src/lib/chips/chip.component.html
@@ -7,7 +7,7 @@
     (dragStart)="onChipDragStart($event)"
     (dragEnd)="onChipDragEnd()"
     (transitioned)="onChipMoveEnd($event)"
-    (click)="onChipDragClicked($event)"
+    (dragClick)="onChipDragClicked($event)"
     igxDrop
     (enter)="onChipDragEnterHandler($event)"
     (dropped)="onChipDrop($event)">

diff --git a/projects/igniteui-angular/src/lib/chips/chip.component.ts b/projects/igniteui-angular/src/lib/chips/chip.component.ts
@@ -24,7 +24,7 @@ import { IBaseEventArgs } from '../core/utils';
 
 
 export interface IBaseChipEventArgs extends IBaseEventArgs {
-    originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
+    originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
     owner: IgxChipComponent;
 }
 
@@ -557,7 +557,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     // Start chip igxDrag behavior
     public onChipDragStart(event: IDragStartEventArgs) {
         this.onMoveStart.emit({
-            originalEvent: event.originalEvent,
+            originalEvent: event,
             owner: this
         });
         event.cancel = !this.draggable || this.disabled;
@@ -578,7 +578,7 @@ export class IgxChipComponent extends DisplayDensityBase {
     public onChipMoveEnd(event: IDragBaseEventArgs) {
         // moveEnd is triggered after return animation has finished. This happen when we drag and release the chip.
         this.onMoveEnd.emit({
-            originalEvent: event.originalEvent,
+            originalEvent: event,
             owner: this
         });
 
@@ -592,14 +592,14 @@ export class IgxChipComponent extends DisplayDensityBase {
      */
     public onChipDragClicked(event: IDragBaseEventArgs) {
         const clickEventArgs: IChipClickEventArgs = {
-            originalEvent: event.originalEvent,
+            originalEvent: event,
             owner: this,
             cancel: false
         };
         this.onClick.emit(clickEventArgs);
 
         if (!clickEventArgs.cancel && this.selectable && !this.disabled) {
-            this.changeSelection(!this.selected, event.originalEvent);
+            this.changeSelection(!this.selected, event);
         }
     }
     // End chip igxDrag behavior

diff --git a/projects/igniteui-angular/src/lib/chips/chip.spec.ts b/projects/igniteui-angular/src/lib/chips/chip.spec.ts
@@ -415,9 +415,19 @@ describe('IgxChip', () => {
         fix.detectChanges();
         expect(secondChipComp.onSelection.emit).toHaveBeenCalled();
         expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalled();
+        expect(secondChipComp.onSelection.emit).not.toHaveBeenCalledWith({
+            originalEvent: null,
+            owner: secondChipComp,
+            cancel: false,
+            selected: true
+        });
 
         await wait(400);
         expect(secondChipComp.onSelectionDone.emit).toHaveBeenCalled();
+        expect(secondChipComp.onSelectionDone.emit).not.toHaveBeenCalledWith({
+            originalEvent: null,
+            owner: secondChipComp
+        });
     }));
 
     it('should not fire onSelection event when selectable is false', () => {

diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.component.ts b/projects/igniteui-angular/src/lib/chips/chips-area.component.ts
@@ -21,12 +21,12 @@ import {
     IChipEnterDragAreaEventArgs,
     IBaseChipEventArgs
 } from './chip.component';
-import { IDropBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
+import { IDropBaseEventArgs, IDragBaseEventArgs } from '../directives/drag-drop/drag-drop.directive';
 import { takeUntil } from 'rxjs/operators';
 import { Subject } from 'rxjs';
 
 export interface IBaseChipsAreaEventArgs {
-    originalEvent: PointerEvent | MouseEvent | TouchEvent | KeyboardEvent | IDropBaseEventArgs;
+    originalEvent: IDragBaseEventArgs | IDropBaseEventArgs | KeyboardEvent | MouseEvent | TouchEvent;
     owner: IgxChipsAreaComponent;
 }
 
@@ -152,7 +152,6 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
 
     private modifiedChipsArray: IgxChipComponent[];
     private _differ: IterableDiffer<IgxChipComponent> | null = null;
-    private selectedChips: IgxChipComponent[] = [];
     protected destroy$ = new Subject<boolean>();
 
     constructor(public cdr: ChangeDetectorRef, public element: ElementRef,
@@ -166,11 +165,11 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
     public ngAfterViewInit() {
         // If we have initially selected chips through their inputs, we need to get them, because we cannot listen to their events yet.
         if (this.chipsList.length) {
-            this.selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);
-            if (this.selectedChips.length) {
+            const selectedChips = this.chipsList.filter((item: IgxChipComponent) => item.selected);
+            if (selectedChips.length) {
                 this.onSelection.emit({
                     originalEvent: null,
-                    newSelection: this.selectedChips,
+                    newSelection: selectedChips,
                     owner: this
                 });
             }
@@ -324,16 +323,17 @@ export class IgxChipsAreaComponent implements DoCheck, AfterViewInit, OnDestroy
      * @hidden
      */
     protected onChipSelectionChange(event: IChipSelectEventArgs) {
-        if (event.selected) {
-            this.selectedChips.push(event.owner);
-        } else if (!event.selected) {
-            this.selectedChips = this.selectedChips.filter((chip) => {
+        let selectedChips = this.chipsList.filter((chip) => chip.selected);
+        if (event.selected && !selectedChips.includes(event.owner)) {
+            selectedChips.push(event.owner);
+        } else if (!event.selected && selectedChips.includes(event.owner)) {
+            selectedChips = selectedChips.filter((chip) => {
                 return chip.id !== event.owner.id;
             });
         }
         this.onSelection.emit({
             originalEvent: event.originalEvent,
-            newSelection: this.selectedChips,
+            newSelection: selectedChips,
             owner: this
         });
     }

diff --git a/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts b/projects/igniteui-angular/src/lib/chips/chips-area.spec.ts
@@ -386,7 +386,8 @@ describe('IgxChipsArea', () => {
         const firstChipComp = fix.componentInstance.chips.toArray()[1];
         spyOn(firstChipComp.onClick, 'emit');
 
-        firstChipComp.chipArea.nativeElement.click();
+        firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerdown', { pointerId: 1}));
+        firstChipComp.chipArea.nativeElement.dispatchEvent(new PointerEvent('pointerup'));
 
         fix.detectChanges();
         expect(firstChipComp.onClick.emit).toHaveBeenCalled();
@@ -857,26 +858,22 @@ describe('IgxChipsArea', () => {
 
         const chipAreaComp = fix.componentInstance.chipsArea;
         const secondChipComp = fix.componentInstance.chips.toArray()[1];
+        const pointerDownEvt = new PointerEvent('pointerdown', { pointerId: 1 });
+        const pointerUpEvt = new PointerEvent('pointerup', { pointerId: 1 });
 
         spyOn(chipAreaComp.onSelection, 'emit');
         fix.detectChanges();
 
-        secondChipComp.chipArea.nativeElement.click();
+        secondChipComp.chipArea.nativeElement.dispatchEvent(pointerDownEvt);
         fix.detectChanges();
-
-        expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
-            originalEvent: null,
-            owner: chipAreaComp,
-            newSelection: [secondChipComp]
-        });
-
-        secondChipComp.chipArea.nativeElement.click();
+        secondChipComp.chipArea.nativeElement.dispatchEvent(pointerUpEvt);
         fix.detectChanges();
 
-        expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
+        expect(chipAreaComp.onSelection.emit).toHaveBeenCalled();
+        expect(chipAreaComp.onSelection.emit).not.toHaveBeenCalledWith({
             originalEvent: null,
             owner: chipAreaComp,
-            newSelection: []
+            newSelection: [secondChipComp]
         });
     });
 
@@ -889,8 +886,6 @@ describe('IgxChipsArea', () => {
         fix.detectChanges();
 
         const secondChipComp = fix.componentInstance.chips.toArray();
-
-        expect(chipAreaComp['selectedChips']).toEqual([secondChipComp[0], secondChipComp[1]]);
         expect(chipAreaComp.onSelection.emit).toHaveBeenCalledWith({
             originalEvent: null,
             owner: chipAreaComp,

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.html b/projects/igniteui-angular/src/lib/combo/combo.component.html
@@ -24,7 +24,7 @@
     <ng-container ngProjectAs="igx-hint, [igxHint]">
             <ng-content select="igx-hint, [igxHint]"></ng-content>
         </ng-container>
-    <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [placeholder]="placeholder"
+    <input igxInput #comboInput name="comboInput" type="text" [value]="value" readonly [attr.placeholder]="placeholder"
         [disabled]="disabled" (blur)="onBlur()" />
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
@@ -47,7 +47,7 @@
     <igx-input-group *ngIf="displaySearchInput" [displayDensity]="displayDensity" class="igx-combo__search">
         <input class="igx-combo-input" igxInput #searchInput name="searchInput" autocomplete="off" type="text"
             [(ngModel)]="searchValue" (ngModelChange)="handleInputChange($event)" (keyup)="handleKeyUp($event)"
-            (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [placeholder]="searchPlaceholder"
+            (keydown)="handleKeyDown($event)" (focus)="dropdown.onBlur($event)" [attr.placeholder]="searchPlaceholder"
             aria-autocomplete="both" [attr.aria-owns]="dropdown.id" [attr.aria-labelledby]="ariaLabelledBy" />
     </igx-input-group>
     <ng-container *ngTemplateOutlet="headerTemplate">

diff --git a/projects/igniteui-angular/src/lib/combo/combo.component.ts b/projects/igniteui-angular/src/lib/combo/combo.component.ts
@@ -670,7 +670,7 @@ export class IgxComboComponent extends DisplayDensityBase implements IgxComboBas
      * ```
      */
     @Input()
-    public placeholder = '';
+    public placeholder;
 
     /**
      * @hidden @internal

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-component.scss
@@ -23,8 +23,7 @@
             @extend %igx-chip__item--hover !optional;
         }
 
-        &:focus,
-        &:focus-within {
+        &:focus {
             @extend %igx-chip__item--focus !optional;
         }
     }

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss
@@ -402,9 +402,20 @@
             display: none;
         }
 
-        &:focus-within {
+        // FIX IE11 and Edge focus styles.
+        // [focus-within] is not supported by IE & Edge.
+        &:focus {
             outline-style: none;
-            color: igx-color(map-get($theme, 'palette'), error);
+
+            igx-icon {
+                color: igx-color(map-get($theme, 'palette'), error);
+            }
+        }
+
+        igx-icon {
+            &:focus{
+                outline-style: none;
+            }
         }
 
         [dir='rtl'] & {

diff --git a/...cts/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss b/...cts/igniteui-angular/src/lib/core/styles/components/grid-toolbar/_grid-toolbar-theme.scss
@@ -168,38 +168,11 @@
         height: map-get($grid-toolbar-height, 'comfortable');
 
         %igx-button--flat {
-            background: --var($theme, 'button-background');
-            color: --var($theme, 'button-text-color');
             margin-left: rem(8);
-
-            &:hover {
-                background: --var($theme, 'button-hover-background');
-                color: --var($theme, 'button-hover-text-color');
-            }
-
-            &:focus,
-            &:active {
-                background: --var($theme, 'button-focus-background');
-                color: --var($theme, 'button-focus-text-color');
-            }
         }
 
         %igx-button--icon {
-            background: --var($theme, 'button-background');
-            color: --var($theme, 'button-text-color');
             margin-left: rem(8);
-            border-radius: 0;
-
-            &:hover {
-                background: --var($theme, 'button-hover-background');
-                color: --var($theme, 'button-hover-text-color');
-            }
-
-            &:focus,
-            &:active {
-                background: --var($theme, 'button-focus-background');
-                color: --var($theme, 'button-focus-text-color');
-            }
         }
 
         %igx-grid-toolbar__button-space {

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss
@@ -1189,6 +1189,7 @@
         %grid-cell-text {
             font-style: italic;
             color: --var($theme, 'cell-edited-value-color');
+            padding: 0 1px;
         }
     }
 

diff --git a/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss b/projects/igniteui-angular/src/lib/core/styles/components/highlight/highlight-component.scss
@@ -0,0 +1,20 @@
+////
+/// @group components
+/// @author <a href="https://github.com/simeonoff" target="_blank">Simeon Simeonoff</a>
+/// @requires {mixin} bem-block
+/// @requires {mixin} bem-elem
+/// @requires {mixin} bem-mod
+////
+@include b(igx-highlight) {
+    // Register the component in the component registry
+    $this: bem--selector-to-string(&);
+    @include register-component(str-slice($this, 2, -1));
+
+    @extend %igx-highlight !optional;
+
+    @include m(active) {
+        @extend %igx-highlight !optional;
+        @extend %igx-highlight--active !optional;
+    }
+}
+
-Original file line number
+Diff line change
@@ Expand Up @@
          * ```
          */
         @Input()
-        public placeholder = '';
+        public placeholder;
         /**
          * @hidden @internal
@@ Expand Down @@