Merge branch 'master' into fluent-theme

Author: kdinev

projects/igniteui-angular/src/lib/directives/drag-drop/drag-drop.directive.ts

@@ -942,8 +942,8 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
 
         const totalMovedX = pageX - this._startX;
         const totalMovedY = pageY - this._startY;
-        this._dragGhostHostX = this.dragGhostHost ? this.getdragGhostHostOffsetLeft(this.dragGhostHost) : 0;
-        this._dragGhostHostY = this.dragGhostHost ? this.getdragGhostHostOffsetTop(this.dragGhostHost) : 0;
+        this._dragGhostHostX = this.dragGhostHost ? this.getDragGhostHostOffsetLeft(this.dragGhostHost) : 0;
+        this._dragGhostHostY = this.dragGhostHost ? this.getDragGhostHostOffsetTop(this.dragGhostHost) : 0;
 
         this.dragGhost.style.transitionDuration = '0.0s';
         this.dragGhost.style.position = 'absolute';
@@ -1220,21 +1220,21 @@ export class IgxDragDirective implements AfterContentInit, OnDestroy {
         return window.scrollX ? window.scrollX : (window.pageXOffset ? window.pageXOffset : 0);
     }
 
-    protected getdragGhostHostOffsetLeft(dragGhostHost: any) {
-        if (dragGhostHost.computedStyleMap().get('position').value === 'static' &&
-                dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
+    protected getDragGhostHostOffsetLeft(dragGhostHost: any) {
+        const ghostPosition = document.defaultView.getComputedStyle(dragGhostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
             return 0;
-        } else if (dragGhostHost.computedStyleMap().get('position').value === 'static' && dragGhostHost.offsetParent) {
+        } else if (ghostPosition === 'static' && dragGhostHost.offsetParent) {
             return dragGhostHost.offsetParent.getBoundingClientRect().left;
         }
         return dragGhostHost.getBoundingClientRect().left;
     }
 
-    protected getdragGhostHostOffsetTop(dragGhostHost: any) {
-        if (dragGhostHost.computedStyleMap().get('position').value === 'static' &&
-                dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
+    protected getDragGhostHostOffsetTop(dragGhostHost: any) {
+        const ghostPosition = document.defaultView.getComputedStyle(dragGhostHost).getPropertyValue('position');
+        if (ghostPosition === 'static' && dragGhostHost.offsetParent && dragGhostHost.offsetParent === document.body) {
             return 0;
-        } else if (dragGhostHost.computedStyleMap().get('position').value === 'static' && dragGhostHost.offsetParent) {
+        } else if (ghostPosition === 'static' && dragGhostHost.offsetParent) {
             return dragGhostHost.offsetParent.getBoundingClientRect().top;
         }
         return dragGhostHost.getBoundingClientRect().top;

projects/igniteui-angular/src/lib/grids/grid-toolbar.component.ts

@@ -21,6 +21,7 @@ import {
     AbsoluteScrollStrategy
 } from '../services/index';
 import { GridBaseAPIService } from './api.service';
+import { IgxButtonDirective } from '../directives/button/button.directive';
 import { IgxGridBaseComponent, IGridDataBindable } from './grid-base.component';
 import { IgxDropDownComponent } from '../drop-down/drop-down.component';
 import { IgxColumnHidingComponent } from './column-hiding.component';
@@ -104,8 +105,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const hidingButton = this.grid.toolbar.columnHidingButton;
      * ```
      */
-    @ViewChild('columnHidingButton', { static: false })
-    public columnHidingButton;
+    @ViewChild('columnHidingButton', { read: IgxButtonDirective, static: false })
+    public columnHidingButton: IgxButtonDirective;
 
     /**
      * Provides a reference to the `IgxDropDownComponent` of the Export button.
@@ -122,8 +123,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const exportBtn = this.grid.toolbar.exportButton;
      * ```
      */
-    @ViewChild('btnExport', { static: false })
-    public exportButton;
+    @ViewChild('btnExport', { read: IgxButtonDirective, static: false })
+    public exportButton: IgxButtonDirective;
 
     /**
      * Provides a reference to the `IgxDropDownComponent` of the Column Pinning UI.
@@ -149,8 +150,8 @@ export class IgxGridToolbarComponent extends DisplayDensityBase {
      * const pinningButton = this.grid.toolbar.columnPinningButton;
      * ```
      */
-    @ViewChild('columnPinningButton', { static: false })
-    public columnPinningButton;
+    @ViewChild('columnPinningButton', { read: IgxButtonDirective, static: false })
+    public columnPinningButton: IgxButtonDirective;
 
     /**
      * Returns a reference to the `IgxGridComponent` component, hosting the `IgxGridToolbarComponent`.

projects/igniteui-angular/src/lib/grids/grid/grid-toolbar.spec.ts

@@ -4,6 +4,7 @@ import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { first } from 'rxjs/operators';
 import { IgxCsvExporterOptions, IgxCsvExporterService, IgxExcelExporterOptions, IgxExcelExporterService } from '../../services/index';
+import { IgxButtonDirective } from '../../directives/button/button.directive';
 import { IgxGridComponent } from './grid.component';
 import { IgxGridModule } from './index';
 import { DisplayDensity } from '../../core/displayDensity';
@@ -582,6 +583,28 @@ describe('IgxGrid - Grid Toolbar Custom Content', () => {
         expect(customContainer).not.toBe(null);
     });
 
+    it('should expose the toolbar buttons with their correct type', () => {
+        fixture = TestBed.createComponent(GridToolbarTestPage1Component);
+        fixture.detectChanges();
+        grid = fixture.componentInstance.grid1;
+
+        grid.showToolbar = true;
+        grid.columnHiding = true;
+        grid.columnPinning = true;
+        grid.exportExcel = true;
+        grid.exportCsv = true;
+        fixture.detectChanges();
+
+        let aButton = grid.toolbar.columnHidingButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'column hiding button has wrong type');
+
+        aButton = grid.toolbar.columnPinningButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'column pinning button has wrong type');
+
+        aButton = grid.toolbar.exportButton;
+        expect(aButton instanceof IgxButtonDirective).toBe(true, 'export button has wrong type');
+    });
+
 });
 
 function getToolbar(fixture) {