Merge pull request #5950 from IgniteUI/8.2.x

Merging 8.2.x into master

Author: kdinev

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`.

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)">

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

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', () => {

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
         });
     }

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,

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">

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

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;
         }
     }

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'] & {