chore(*): Merge upstream branch

Author: rkaraivanov

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

@@ -1,18 +1,95 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, ViewChild, ViewChildren, QueryList } from '@angular/core';
 import {
     async,
     TestBed
 } from '@angular/core/testing';
 import { FormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { IgxIconModule } from '../icon/index';
+import { IgxChipsModule } from './chips.module';
+import { IgxChipComponent } from './chip.component';
 import { IgxChipsAreaComponent } from './chips-area.component';
 
+@Component({
+    template: `
+        <igx-chips-area #chipsArea>
+            <igx-chip #chipElem *ngFor="let chip of chipList"
+            [id]="chip.id" [draggable]="chip.draggable" [removable]="chip.removable" [selectable]="chip.selectable">
+                <igx-icon igxPrefix fontSet="material" [name]="'drag_indicator'"></igx-icon>
+                <span #label [class]="'igx-chip__text'">{{chip.text}}</span>
+                <igx-icon class="igx-chip__dir-icon" igxConnector fontSet="material" [name]="'forward'"></igx-icon>
+            </igx-chip>
+        </igx-chips-area>
+    `
+})
+export class TestChipComponent {
+
+    public chipList = [
+        { id: 'Country', text: 'Country', removable: false, selectable: false, draggable: true },
+        { id: 'City', text: 'City', removable: true, selectable: true, draggable: true }
+    ];
+
+    @ViewChild('chipsArea', { read: IgxChipsAreaComponent})
+    public chipsArea: IgxChipsAreaComponent;
+
+    @ViewChildren('chipElem', { read: IgxChipComponent})
+    public chips: QueryList<IgxChipComponent>;
+}
+
 describe('IgxChipsArea', () => {
+    const CHIP_ITEM_AREA = 'igx-chip__item chip-area';
+    const CHIP_CONNECTOR = 'igx-chip__connecto';
+
     beforeEach(async(() => {
         TestBed.configureTestingModule({
             declarations: [
+                TestChipComponent
             ],
-            imports: []
+            imports: [FormsModule, IgxIconModule, IgxChipsModule]
         }).compileComponents();
     }));
+
+    it('should add chips when adding data items ', () => {
+        const fix = TestBed.createComponent(TestChipComponent);
+        fix.detectChanges();
+
+        const chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
+        const chipAreaComponent = fix.componentInstance;
+        expect(chipArea[0].nativeElement.children.length).toEqual(2);
+
+        chipAreaComponent.chipList.push({ id: 'Town', text: 'Town', removable: true, selectable: true, draggable: true });
+
+        fix.detectChanges();
+
+        expect(chipArea[0].nativeElement.children.length).toEqual(3);
+    });
+
+    it('should remove chips when removing data items ', () => {
+        const fix = TestBed.createComponent(TestChipComponent);
+        fix.detectChanges();
+
+        const chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
+        const chipAreaComponent = fix.componentInstance;
+        expect(chipArea[0].nativeElement.children.length).toEqual(2);
+
+        chipAreaComponent.chipList.pop();
+        fix.detectChanges();
+
+        expect(chipArea[0].nativeElement.children.length).toEqual(1);
+    });
+
+    it('should change data in chips when data item is changed', () => {
+        const fix = TestBed.createComponent(TestChipComponent);
+        fix.detectChanges();
+
+        const chipArea = fix.debugElement.queryAll(By.directive(IgxChipsAreaComponent));
+        const chipAreaComponent = fix.componentInstance;
+
+        expect(chipArea[0].nativeElement.children[0].innerHTML).toContain('Country');
+
+        chipAreaComponent.chipList[0].text = 'New text';
+        fix.detectChanges();
+
+        expect(chipArea[0].nativeElement.children[0].innerHTML).toContain('New text');
+    });
 });

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

@@ -391,6 +391,10 @@
         box-shadow: $grid-shadow;
         outline-style: none;
         overflow: hidden;
+
+        %cbx-display {
+            min-width: rem(20px);
+        }
     }
 
     %grid-caption {

projects/igniteui-angular/src/lib/grid/column-group.spec.ts

@@ -23,6 +23,7 @@ describe('IgxGrid - multi-column headers', () => {
                 OneGroupThreeColsGridComponent,
                 BlueWhaleGridComponent,
                 ColumnGroupTestComponent,
+                ColumnGroupChildLevelTestComponent,
                 ColumnGroupFourLevelTestComponent,
                 ThreeGroupsThreeColumnsGridComponent,
                 ColumnGroupTwoGroupsTestComponent
@@ -46,7 +47,7 @@ describe('IgxGrid - multi-column headers', () => {
     });
 
     it('column hiding - parent level', () => {
-        const fixture = TestBed.createComponent(ColumnGroupTestComponent);
+        const fixture = TestBed.createComponent(ColumnGroupFourLevelTestComponent);
         fixture.detectChanges();
         const grid = fixture.componentInstance.grid;
         const addressGroup = grid.columnList.filter(c => c.header === 'Address Information')[0];
@@ -58,15 +59,15 @@ describe('IgxGrid - multi-column headers', () => {
     });
 
     it('column hiding - child level', () => {
-        const fixture = TestBed.createComponent(ColumnGroupTestComponent);
+        const fixture = TestBed.createComponent(ColumnGroupChildLevelTestComponent);
         fixture.detectChanges();
         const grid = fixture.componentInstance.grid;
-        const addressGroup = grid.columnList.filter(c => c.header === 'Address Information')[0];
+        const addressGroup = grid.columnList.filter(c => c.header === 'Address')[0];
 
         addressGroup.children.first.hidden = true;
         fixture.detectChanges();
 
-        expect(document.querySelectorAll('igx-grid-header').length).toEqual(11);
+        expect(document.querySelectorAll('igx-grid-header').length).toEqual(5);
         expect(addressGroup.children.first.hidden).toBe(true);
         expect(addressGroup.children.first.children.toArray().every(c => c.hidden === true)).toEqual(true);
     });
@@ -865,6 +866,34 @@ export class ColumnGroupFourLevelTestComponent {
     data = DATASOURCE;
 }
 
+@Component({
+    template: `
+    <igx-grid #grid [data]="data" height="600px" width="800px">
+        <igx-column field="ID"></igx-column>
+        <igx-column-group header="Address">
+            <igx-column-group header="Location">
+                <igx-column field="Country"></igx-column>
+                <igx-column field="Region"></igx-column>
+                <igx-column-group header="Location City">
+                    <igx-column field="City"></igx-column>
+                    <igx-column field="Address"></igx-column>
+                </igx-column-group>
+            </igx-column-group>
+            <igx-column-group header="Contact Information">
+                <igx-column field="Phone"></igx-column>
+                <igx-column field="Fax"></igx-column>
+            </igx-column-group>
+        </igx-column-group>
+    </igx-grid>
+    `
+})
+export class ColumnGroupChildLevelTestComponent {
+    @ViewChild(IgxGridComponent, { read: IgxGridComponent })
+    grid: IgxGridComponent;
+
+    data = DATASOURCE;
+}
+
 
 @Component({
     template: `

projects/igniteui-angular/src/lib/grid/column.component.ts

@@ -533,7 +533,19 @@ export class IgxColumnGroupComponent extends IgxColumnComponent implements After
     }
 
     get width() {
-        return `${this.children.reduce((acc, val) => acc + (!val.hidden ? parseInt(val.width, 10) : 0), 0)}`;
+        let isChildrenWidthInPercent = false;
+        const width = `${this.children.reduce((acc, val) => {
+            if (val.hidden) {
+                return acc;
+            }
+
+            if (val.width && val.width.indexOf('%') !== -1) {
+                isChildrenWidthInPercent = true;
+            }
+
+            return acc + parseInt(val.width, 10);
+        }, 0)}`;
+        return isChildrenWidthInPercent ? width + '%' : width;
     }
 
     set width(val) {}

projects/igniteui-angular/src/lib/grid/grid.pinning.spec.ts

@@ -602,19 +602,6 @@ describe('IgxGrid - Column Pinning ', () => {
         expect(grid.columns[6].pinned).toBe(true);
         expect(grid.unpinnedWidth).toBeGreaterThanOrEqual(grid.unpinnedAreaMinWidth);
     });
-
-    it('should not have grid layout row with width that extends pass the container\'s one', () => {
-        const fix = TestBed.createComponent(GridPinningComponent);
-        fix.detectChanges();
-        const grid = fix.componentInstance.instance;
-
-        grid.getColumnByName('Phone').pinned = true;
-        fix.detectChanges();
-
-        const gridChildren = Array.prototype.slice.call(grid.nativeElement.children);
-        const gridWidth = grid.nativeElement.getBoundingClientRect().width;
-        gridChildren.forEach(elem => expect(elem.getBoundingClientRect().width).toEqual(gridWidth));
-    });
 });
 @Component({
     template: `

projects/igniteui-angular/src/lib/grid/groupby-row.component.html

@@ -1,6 +1,6 @@
 <ng-container #defaultGroupRow (focus)="onFocus()" (blur)="onBlur()">
     <div (click)="toggle()" igxRipple class="igx-grid__grouping-indicator" [tabIndex]="tabindex">
-        <igx-icon *ngIf="!expanded" fontSet="material" name="expand_less"></igx-icon>
+        <igx-icon *ngIf="!expanded" fontSet="material" name="chevron_right"></igx-icon>
         <igx-icon *ngIf="expanded" fontSet="material" name="expand_more"></igx-icon>
     </div>