Merge branch 'master' into ddavidkov/treegrid

Author: gedinakova

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

@@ -178,7 +178,7 @@ The chips can be focused using the `Tab` key or by clicking on them. Chips can b
 | `onMoveEnd` | `IBaseChipEventArgs` | Fired when the chip moving(dragging) ends. |
 | `onRemove ` | `IBaseChipEventArgs` | Fired when the chip remove button is clicked. |
 | `onClick ` | `IChipClickEventArgs` | Fired when the chip is clicked instead of dragged. |
-| `onSelection` | `IChipSelectEventArgs` | Fired when the chip is being selected. |
+| `onSelection` | `IChipSelectEventArgs` | Fired when the chip is being selected/deselected. |
 | `onKeyDown ` | `IChipKeyDownEventArgs` | Fired when the chip keyboard navigation is being used. |
 | `onDragEnter ` | `IChipEnterDragAreaEventArgs` | Fired when another chip has entered the current chip area. |
 
@@ -188,15 +188,15 @@ The chips can be focused using the `Tab` key or by clicking on them. Chips can b
 | Name   |      Type      |  Description |
 |:----------|:-------------:|:------|
 | `width` | `number` | Sets the width of the chips area. |
-| `height ` | `number` | Sets the height of the chip area. |
+| `height ` | `number` | Sets the height of the chips area. |
 
 ### Outputs
 | Name | Argument Type | Description |
 |:--:|:---|:---|
-| `onReorder ` | `IChipsAreaReorderEventArgs` | Fired when the chip moving(dragging) starts. |
-| `onSelection ` | `IChipsAreaSelectEventArgs` | Fired when the chip moving(dragging) ends. |
-| `onMoveStart  ` | `IBaseChipsAreaEventArgs` | Fired when the chip remove button is clicked. |
-| `onMoveEnd ` | `IBaseChipsAreaEventArgs` | Fired when the chip is clicked instead of dragged. |
+| `onReorder ` | `IChipsAreaReorderEventArgs` | Fired when the chips order should be changed(from dragging). Requires custom logic for actual reorder. |
+| `onSelection ` | `IChipsAreaSelectEventArgs` | Fired for all initially selected chips and when chip is being selected/deselected. |
+| `onMoveStart  ` | `IBaseChipsAreaEventArgs` | Fired when any chip moving(dragging) starts. |
+| `onMoveEnd ` | `IBaseChipsAreaEventArgs` | Fired when any chip moving(dragging) ends. |
 
 ### Properties
 | Name   | Return Type | Description |

projects/igniteui-angular/src/lib/chips/chip.component.ts

@@ -241,7 +241,7 @@ export class IgxChipComponent implements AfterViewInit {
     public onClick = new EventEmitter<IChipClickEventArgs>();
 
     /**
-     * Emits event when the `IgxChipComponent` is selected.
+     * Emits event when the `IgxChipComponent` is selected/deselected.
      * Returns the selected chip reference, whether the event should be canceled, what is the next selection state and
      * when the event is triggered by interaction `originalEvent` is provided, otherwise `originalEvent` is `null`.
      * ```typescript

projects/igniteui-angular/src/lib/chips/chips-area.component.ts

@@ -9,7 +9,8 @@
     IterableDiffers,
     Output,
     QueryList,
-    DoCheck
+    DoCheck,
+    AfterViewInit
 } from '@angular/core';
 import {
     IgxChipComponent,
@@ -40,7 +41,7 @@ export interface IChipsAreaSelectEventArgs extends IBaseChipsAreaEventArgs {
     selector: 'igx-chips-area',
     templateUrl: 'chips-area.component.html',
 })
-export class IgxChipsAreaComponent implements DoCheck {
+export class IgxChipsAreaComponent implements DoCheck, AfterViewInit {
 
     /**
      * @hidden
@@ -69,7 +70,7 @@ export class IgxChipsAreaComponent implements DoCheck {
     public height: number;
 
     /**
-     * Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` are reordered.
+     * Emits an event when `IgxChipComponent`s in the `IgxChipsAreaComponent` should be reordered.
      * Returns an array of `IgxChipComponent`s.
      * ```html
      * <igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onReorder)="changedOrder($event)"></igx-chips-area>
@@ -84,7 +85,8 @@ export class IgxChipsAreaComponent implements DoCheck {
     public onReorder = new EventEmitter<IChipsAreaReorderEventArgs>();
 
     /**
-     * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected.
+     * Emits an event when an `IgxChipComponent` in the `IgxChipsAreaComponent` is selected/deselected.
+     * Fired after the chips area is initialized if there are initially selected chips as well.
      * Returns an array of selected `IgxChipComponent`s and the `IgxChipAreaComponent`.
      * ```html
      * <igx-chips-area #chipsArea [width]="'300'" [height]="'10'" (onSelection)="selection($event)"></igx-chips-area>
@@ -145,6 +147,23 @@ export class IgxChipsAreaComponent implements DoCheck {
         this._differ = this._iterableDiffers.find([]).create(null);
     }
 
+    /**
+     * @hidden
+     */
+    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) {
+                this.onSelection.emit({
+                    originalEvent: null,
+                    newSelection: this.selectedChips,
+                    owner: this
+                });
+            }
+        }
+    }
+
     /**
      * @hidden
      */

projects/igniteui-angular/src/lib/chips/chips-area.spec.ts

@@ -832,4 +832,22 @@ describe('IgxChipsArea', () => {
             expect(chipComponents.length).toEqual(3);
         });
     });
+
+    it('should emit onSelection for the chipArea event when there are initially selected chips through their inputs', () => {
+        const fix = TestBed.createComponent(TestChipSelectComponent);
+
+        const chipAreaComp = fix.componentInstance.chipsArea;
+        spyOn(chipAreaComp.onSelection, 'emit');
+
+        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,
+            newSelection: [secondChipComp[0], secondChipComp[1]]
+        });
+    });
 });