Merge branch 'master' into tzhelev/gridSearch-exactMatch

Author: tachojelev

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

@@ -297,18 +297,15 @@ export class IgxChipComponent implements AfterViewInit {
      * }
      * ```
      */
+    @Input()
     public get selected() {
         return this._selected;
     }
 
     /**
      * Sets the `IgxChipComponent` to be selected.
-     * ```typescript
-     * @ViewChild('myChip')
-     * public chip: IgxChipComponent;
-     * ngAfterViewInit(){
-     *     this.chip.selected = true;
-     * }
+     * ```html
+     * <igx-chip #myChip [id]="'igx-chip-1'" [selectable]="true" [selected]="true">
      * ```
      */
     public set selected(newValue: boolean) {

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

@@ -37,6 +37,24 @@ class TestChipComponent {
     public chips: QueryList<IgxChipComponent>;
 }
 
+@Component({
+    template: `
+        <igx-chips-area #chipsArea>
+            <igx-chip #chipElem [id]="1" [draggable]="true" [removable]="true" [selectable]="true" [selected]="true">
+                <span #label [class]="'igx-chip__text'">first chip</span>
+            </igx-chip>
+            <igx-chip #chipElem [id]="2" [draggable]="false" [removable]="false" [selectable]="false" [selected]="true">
+                <span #label [class]="'igx-chip__text'">second chip</span>
+            </igx-chip>
+            <igx-chip #chipElem [id]="3" [draggable]="true" [removable]="true" [selectable]="true" [selected]="false">
+                <span #label [class]="'igx-chip__text'">third chip</span>
+            </igx-chip>
+        </igx-chips-area>
+    `
+})
+class TestChipSelectComponent extends TestChipComponent {
+}
+
 @Component({
     template:
     `
@@ -108,7 +126,8 @@ describe('IgxChipsArea', () => {
         TestBed.configureTestingModule({
             declarations: [
                 TestChipComponent,
-                TestChipReorderComponent
+                TestChipReorderComponent,
+                TestChipSelectComponent
             ],
             imports: [FormsModule, IgxIconModule, IgxChipsModule]
         }).compileComponents();
@@ -555,6 +574,19 @@ describe('IgxChipsArea', () => {
         });
     });
 
+    it('should be able to select chip using input property', () => {
+        const fix = TestBed.createComponent(TestChipSelectComponent);
+        fix.detectChanges();
+
+        const firstChipComp = fix.componentInstance.chips.toArray()[0];
+        const secondChipComp = fix.componentInstance.chips.toArray()[1];
+        const thirdChipComp = fix.componentInstance.chips.toArray()[2];
+
+        expect(firstChipComp.selected).toBe(true);
+        expect(secondChipComp.selected).toBe(true);
+        expect(thirdChipComp.selected).toBe(false);
+    });
+
     it('should be able to select chip using api when selectable is set to false', () => {
         const fix = TestBed.createComponent(TestChipComponent);
         fix.detectChanges();

projects/igniteui-angular/src/lib/combo/combo.component.spec.ts

@@ -1481,6 +1481,27 @@ describe('igxCombo', () => {
             expectedOutput += ', ' + combo.data[9];
             expect(inputElement.value).toEqual(expectedOutput);
         }));
+
+        it('Should properly handle selection manipulation through onSelectionChange emit', fakeAsync(() => {
+            const fixture = TestBed.createComponent(IgxComboSampleComponent);
+            fixture.detectChanges();
+            const combo = fixture.componentInstance.combo;
+            // override selection
+            fixture.componentInstance.onSelectionChange = (event) => {
+                event.newSelection = [];
+            };
+            combo.toggle();
+            tick();
+            // No items are initially selected
+            expect(combo.selectedItems()).toEqual([]);
+            // Select the first 5 items
+            combo.selectItems(fixture.componentInstance.initData.splice(0, 5));
+            tick();
+            fixture.detectChanges();
+            tick();
+            // onSelectionChange fires and overrides the selection to be [];
+            expect(combo.selectedItems()).toEqual([]);
+        }));
     });
 
     describe('Rendering tests: ', () => {
@@ -3057,7 +3078,8 @@ class IgxComboScrollTestComponent {
 @Component({
     template: `
 <igx-combo #combo [placeholder]="'Location'" [data]='items'
-[filterable]='true' [valueKey]="'field'" [groupKey]="'region'" [width]="'400px'" [allowCustomValues]="true">
+[filterable]='true' [valueKey]="'field'" [groupKey]="'region'" [width]="'400px'"
+(onSelectionChange)="onSelectionChange($event)" [allowCustomValues]="true">
 <ng-template #itemTemplate let-display let-key="valueKey">
 <div class="state-card--simple">
 <span class="small-red-circle"></span>

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

@@ -1065,8 +1065,8 @@ export class IgxComboComponent implements AfterViewInit, ControlValueAccessor, O
             const args: IComboSelectionChangeEventArgs = { oldSelection, newSelection };
             this.onSelectionChange.emit(args);
             newSelectionAsSet = new Set();
-            for (let i = 0; i < newSelection.length; i++) {
-                newSelectionAsSet.add(newSelection[i]);
+            for (let i = 0; i < args.newSelection.length; i++) {
+                newSelectionAsSet.add(args.newSelection[i]);
             }
             this.selectionAPI.set_selection(this.id, newSelectionAsSet);
             this.value = this.dataType !== DataTypes.PRIMITIVE ?

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-component.scss

@@ -240,6 +240,10 @@
         @extend %igx-grid__group-expand-btn !optional;
     }
 
+    @include e(filtering-outlet) {
+        @extend %igx-grid__filtering-outlet !optional;
+    }
+
     @for $i from 1 through 10 {
         @include e(row-indentation, $m: level-#{$i}) {
             @extend %igx-grid__row-indentation--level-#{$i} !optional;

projects/igniteui-angular/src/lib/core/styles/components/grid/_grid-theme.scss

@@ -1295,4 +1295,8 @@
             padding-left: #{$i*map-get($grid-grouping-indicator-padding, 'compact')};
         }
     }
+
+    %igx-grid__filtering-outlet {
+        z-index: 99999;
+    }
 }

projects/igniteui-angular/src/lib/directives/dragdrop/dragdrop.directive.spec.ts

@@ -1,9 +1,8 @@
 import { Component, DebugElement } from '@angular/core';
-import { async, discardPeriodicTasks, fakeAsync, TestBed, tick } from '@angular/core/testing';
+import { async, TestBed } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
-import { IgxAvatarComponent, IgxAvatarModule } from '../../avatar/avatar.component';
-import { IgxDragDropModule, RestrictDrag } from './dragdrop.directive';
+import { IgxDragDropModule } from './dragdrop.directive';
 
 describe('IgxDrag', () => {
 
@@ -13,7 +12,6 @@ describe('IgxDrag', () => {
             ],
             imports: [
                 FormsModule,
-                IgxAvatarModule,
                 IgxDragDropModule
             ]
         })

projects/igniteui-angular/src/lib/directives/text-selection/text-selection.directive.ts

@@ -8,26 +8,104 @@ export class IgxTextSelectionDirective {
 
     private selectionState = true;
 
+    /**
+     * Returns whether the input element is selectable through the directive.
+     *
+     * ```typescript
+     * // get
+     * @ViewChild('firstName',
+     *  {read: IgxTextSelectionDirective})
+     * public firstName: IgxTextSelectionDirective;
+     *
+     * public getFirstNameSelectionStatus() {
+     *  return this.firstName.selected;
+     * }
+     * ```
+     */
     @Input('igxTextSelection')
     get selected(): boolean {
         return this.selectionState;
     }
 
+    /**
+     *  Determines whether the input element could be selected through the directive.
+     *
+     *```html
+     * <!--set-->
+     * <input
+     *   type="text"
+     *   id="firstName"
+     *   [igxTextSelection]="true">
+     * </input>
+     *
+     * <input
+     *   type="text"
+     *   id="lastName"
+     *   igxTextSelection
+     *   [selected]="true">
+     * </input>
+     * ```
+     */
     set selected(val: boolean) {
         this.selectionState = val;
     }
 
+    /**
+     * Returns the nativeElement of the element where the directive was applied.
+     *
+     * ```html
+     * <input
+     *   type="text"
+    *    id="firstName"
+     *   igxTextSelection>
+     * </input>
+     * ```
+     *
+     * ```typescript
+     * @ViewChild('firstName',
+     *  {read: IgxTextSelectionDirective})
+     * public inputElement: IgxTextSelectionDirective;
+     *
+     * public getNativeElement() {
+     *  return this.inputElement.nativeElement;
+     * }
+     * ```
+     */
     get nativeElement() {
         return this.element.nativeElement;
     }
 
+    /**
+     * @hidden
+     */
     @HostListener('focus')
     onFocus() {
         this.trigger();
     }
 
     constructor(private element: ElementRef) { }
 
+    /**
+     * Triggers the selection of the element if it is marked as selectable.
+     *
+     * ```html
+     * <input
+     *   type="text"
+     *   id="firstName"
+     *   igxTextSelection>
+     * </input>
+     * ```
+     *
+     * ```typescript
+     * @ViewChild('firstName',
+     *  {read: IgxTextSelectionDirective})
+     * public inputElement: IgxTextSelectionDirective;
+     *
+     * public triggerElementSelection() {
+     *  this.inputElement.trigger();
+     * }
+     * ```
+     */
     trigger() {
         if (this.selected && this.nativeElement.value.length) {
             requestAnimationFrame(() => this.nativeElement.setSelectionRange(0, this.nativeElement.value.length));

projects/igniteui-angular/src/lib/grid/api.service.ts

@@ -93,6 +93,8 @@ export class IgxGridAPIService {
                 this.editCellState.delete(gridId);
             }
         }
+
+        this.get(gridId).refreshSearch();
     }