Merge branch 'master' into bkulov/radio-group

Author: bkulov

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

projects/igniteui-angular/src/lib/services/overlay/overlay.spec.ts

@@ -645,23 +645,21 @@ describe('igxOverlay', () => {
             }
         }));
 
-        it('The shown component is in the center of igx-overlay (visible window) - default.', () => {
+        it('The shown component is in the center of igx-overlay (visible window) - default.', fakeAsync(() => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
             fixture.detectChanges();
             fixture.componentInstance.overlay.show(SimpleDynamicComponent);
-            fixture.whenStable().then(() => {
-                fixture.detectChanges();
-                const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0];
-                const overlayWrapper = overlayDiv.children[0] as HTMLElement;
-                const componentEl = overlayWrapper.children[0].children[0];
-                const wrapperRect = overlayWrapper.getBoundingClientRect();
-                const componentRect = componentEl.getBoundingClientRect();
-                expect(wrapperRect.width / 2).toEqual(componentRect.left);
-                expect(wrapperRect.height / 2).toEqual(componentRect.top);
-                expect(componentRect.left).toEqual(componentRect.right - componentRect.width);
-                expect(componentRect.top).toEqual(componentRect.bottom - componentRect.height);
-            });
-        });
+            tick();
+            const overlayDiv = document.getElementsByClassName(CLASS_OVERLAY_MAIN)[0];
+            const overlayWrapper = overlayDiv.children[0] as HTMLElement;
+            const componentEl = overlayWrapper.children[0].children[0];
+            const wrapperRect = overlayWrapper.getBoundingClientRect();
+            const componentRect = componentEl.getBoundingClientRect();
+            expect(wrapperRect.width / 2 - componentRect.width / 2).toEqual(componentRect.left);
+            expect(wrapperRect.height / 2 - componentRect.height / 2).toEqual(componentRect.top);
+            expect(componentRect.left).toEqual(componentRect.right - componentRect.width);
+            expect(componentRect.top).toEqual(componentRect.bottom - componentRect.height);
+        }));
 
         it('When adding a new instance of a component with the same options, it is rendered exactly on top of the previous one.', () => {
             const fixture = TestBed.createComponent(EmptyPageComponent);
@@ -697,8 +695,10 @@ describe('igxOverlay', () => {
                 const componentEl = overlayWrapper.children[0].children[0];
                 const wrapperRect = overlayWrapper.getBoundingClientRect();
                 const componentRect = componentEl.getBoundingClientRect();
-                expect(wrapperRect.width / 2).toEqual(componentRect.left);
-                expect(wrapperRect.height / 2).toEqual(componentRect.top);
+                expect(componentRect.left).toBeLessThan(0);
+                expect(wrapperRect.width / 2).toEqual(componentRect.left + componentRect.width / 2);
+                expect(componentRect.top).toBeLessThan(0);
+                expect(wrapperRect.height / 2).toEqual(componentRect.top + componentRect.height / 2);
                 hasScrollbar = document.body.scrollHeight > document.body.clientHeight;
                 expect(hasScrollbar).toBeTruthy();
             });
@@ -1746,6 +1746,26 @@ describe('igxOverlay', () => {
         xit('Css should not leak: From shown components to igx-overlay.', () => {
             // TO DO
         });
+
+        it('Components with 100% width/height should use their initial container\'s properties when placed inside of the overlay element',
+            fakeAsync(() => {
+                const fixture = TestBed.createComponent(WidthTestOverlayComponent);
+                fixture.detectChanges();
+                expect(fixture.componentInstance.customComponent).toBeDefined();
+                expect(fixture.componentInstance.customComponent.nativeElement.style.width).toEqual('100%');
+                expect(fixture.componentInstance.customComponent.nativeElement.getBoundingClientRect().width).toEqual(420);
+                expect(fixture.componentInstance.customComponent.nativeElement.style.height).toEqual('100%');
+                expect(fixture.componentInstance.customComponent.nativeElement.getBoundingClientRect().height).toEqual(280);
+                fixture.componentInstance.buttonElement.nativeElement.click();
+                tick();
+                const overlayContent = document.getElementsByClassName(CLASS_OVERLAY_CONTENT)[0] as HTMLElement;
+                const overlayChild = overlayContent.lastElementChild as HTMLElement;
+                expect(overlayChild).toBeDefined();
+                expect(overlayChild.style.width).toEqual('100%');
+                expect(overlayChild.getBoundingClientRect().width).toEqual(420);
+                expect(overlayChild.style.height).toEqual('100%');
+                expect(overlayChild.getBoundingClientRect().height).toEqual(280);
+            }));
     });
 });
 
@@ -1867,13 +1887,49 @@ export class TopLeftOffsetComponent {
     }
 }
 
+@Component({
+    template: `<div style="width: 420px; height: 280px;">
+    <button class='300_button' igxToggle #button (click)=\'click($event)\'>Show Overlay</button>
+        <div #myCustomComponent class="customList" style="width: 100%; height: 100%;">
+            Some Content
+        </div>
+    <div>`,
+    styles: [`button {
+        position: absolute;
+        top: 300px;
+        left: 300px;
+        width: 100px;
+        height: 60px;
+        border: 0px;
+    }`]
+})
+export class WidthTestOverlayComponent {
+
+    constructor(@Inject(IgxOverlayService) public overlay: IgxOverlayService) { }
+
+    @ViewChild('button') buttonElement: ElementRef;
+    @ViewChild('myCustomComponent') customComponent: ElementRef;
+    click(event) {
+        const overlaySettings: OverlaySettings = {
+            positionStrategy: new ConnectedPositioningStrategy(),
+            scrollStrategy: new NoOpScrollStrategy(),
+            closeOnOutsideClick: true,
+            modal: false
+        };
+
+        overlaySettings.positionStrategy.settings.target = this.buttonElement.nativeElement;
+        this.overlay.show(this.customComponent, overlaySettings);
+    }
+}
+
 const DYNAMIC_COMPONENTS = [
     EmptyPageComponent,
     SimpleRefComponent,
     SimpleDynamicComponent,
     SimpleBigSizeComponent,
     DownRightButtonComponent,
-    TopLeftOffsetComponent
+    TopLeftOffsetComponent,
+    WidthTestOverlayComponent
 ];
 
 const DIRECTIVE_COMPONENTS = [

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -87,6 +87,8 @@ export class IgxOverlayService {
         }
 
         this._overlays.find(c => c.id === id).initialSize = size as DOMRect;
+        contentElement.style.width = size.width + 'px';
+        contentElement.style.height = size.height + 'px';
         overlaySettings.positionStrategy.position(contentElement, size, document, true);
         const animationBuilder = this.builder.build(overlaySettings.positionStrategy.settings.openAnimation);
         const animationPlayer = animationBuilder.create(element);