Merge branch '8.1.x' into nrobakova/fix-issue-5763-81

Author: zdrawku

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

@@ -78,6 +78,12 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
     @Input()
     public id = `igx-buttongroup-${NEXT_ID++}`;
 
+    /**
+     * @hidden
+     */
+    @HostBinding('style.zIndex')
+    public zIndex = 0;
+
     /**
      * Allows you to set a style using the `itemContentCssClass` input.
      * The value should be the CSS class name that will be applied to the button group.
@@ -251,7 +257,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
 
     constructor(private _cdr: ChangeDetectorRef, private _renderer: Renderer2,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
-            super(_displayDensityOptions);
+        super(_displayDensityOptions);
     }
 
     /**
@@ -360,7 +366,7 @@ export class IgxButtonGroupComponent extends DisplayDensityBase implements After
      * @hidden
      */
     public ngAfterContentInit() {
-        this.templateButtons.forEach( (button) => {
+        this.templateButtons.forEach((button) => {
             if (!button.initialDensity) {
                 button.displayDensity = this.displayDensity;
             }

projects/igniteui-angular/src/lib/buttonGroup/buttongroup-content.component.html

@@ -1,11 +1,20 @@
 <div class="igx-button-group" role="group" [class.igx-button-group--vertical]="isVertical">
-    <span *ngFor="let button of values; let i = 'index'" type="button" igxButton="flat" [displayDensity]="displayDensity" [selected]="button.selected"
-        [attr.data-togglable]="button.togglable" [disabled]="disabled || button.disabled" [igxButtonColor]="button.color"
-        [igxButtonBackground]="button.bgcolor" [igxLabel]="button.label" [igxRipple]="button.ripple">
+    <button *ngFor="let button of values; let i = 'index'"
+        type="button"
+        igxButton="flat"
+        [displayDensity]="displayDensity"
+        [selected]="button.selected"
+        [attr.data-togglable]="button.togglable"
+        [disabled]="disabled || button.disabled"
+        [igxButtonColor]="button.color"
+        [igxButtonBackground]="button.bgcolor"
+        [igxLabel]="button.label"
+        [igxRipple]="button.ripple"
+    >
         <div class="igx-button-group__item-content {{ itemContentCssClass }}">
             <igx-icon *ngIf="button.icon" fontSet="material">{{button.icon}}</igx-icon>
             <span *ngIf="button.label">{{button.label}}</span>
         </div>
-    </span>
+    </button>
     <ng-content></ng-content>
 </div>

projects/igniteui-angular/src/lib/buttonGroup/buttongroup.component.spec.ts

@@ -232,6 +232,25 @@ describe('IgxButtonGroup', () => {
         expect(groupChildren[1].element.nativeElement.classList.contains('igx-button--cosy')).toBe(true, 'Missing density class!');
     });
 
+    it('Button Group - should support tab navigation', () => {
+        const fixture = TestBed.createComponent(InitButtonGroupWithValuesComponent);
+        fixture.detectChanges();
+
+        const buttongroup = fixture.componentInstance.buttonGroup;
+        const groupChildren = buttongroup.buttons;
+
+        for (let i = 0; i < groupChildren.length; i++) {
+            const button = groupChildren[i];
+            expect(button.nativeElement.tagName).toBe('BUTTON');
+
+            if (i < groupChildren.length - 1) {
+                expect(button.nativeElement.disabled).toBe(false);
+            } else {
+                expect(button.nativeElement.disabled).toBe(true);
+            }
+        }
+    });
+
 });
 
 @Component({ template: `<igx-buttongroup [values]="buttons"></igx-buttongroup>` })

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

@@ -867,6 +867,7 @@
 
         &%igx-grid__tr--ghost {
             background: --var($theme, 'row-ghost-background');
+            z-index: 1;
         }
     }
 

projects/igniteui-angular/src/lib/core/utils.ts

@@ -226,6 +226,17 @@ export function isFirefox(): boolean {
     return firefoxBrowser;
 }
 
+/**
+ * @hidden
+ * TODO: make injectable, check isPlatformBrowser()
+ */
+export class PlatformUtil {
+    static isIOS(): boolean {
+        const iosBrowser = typeof window !== 'undefined' && /iPad|iPhone|iPod/.test(navigator.userAgent) && !('MSStream' in window);
+        return iosBrowser;
+    }
+}
+
 /**
  * @hidden
  */

projects/igniteui-angular/src/lib/directives/button/button.directive.ts

@@ -48,6 +48,11 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     private _backgroundColor: string;
 
+    /**
+     *@hidden
+     */
+    private _disabled: boolean;
+
     constructor(public element: ElementRef, private _renderer: Renderer2,
         @Optional() @Inject(DisplayDensityToken) protected _displayDensityOptions: IDisplayDensityOptions) {
         super(_displayDensityOptions);
@@ -141,6 +146,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
      */
     @Input() set disabled(val) {
         val = !!val;
+        this._disabled = val;
         if (val) {
             this._renderer.addClass(this.nativeElement, `${this._cssClassPrefix}--disabled`);
         } else {
@@ -182,6 +188,14 @@ export class IgxButtonDirective extends DisplayDensityBase {
         return this._type === 'fab' && this.displayDensity === DisplayDensity.compact;
     }
 
+    /**
+     * @hidden
+     */
+    @HostBinding('attr.disabled')
+    public get disabledAttribute() {
+        return this._disabled ? this._disabled : null;
+    }
+
     /**
      * Gets or sets whether the button is selected.
      * Mainly used in the IgxButtonGroup component and it will have no effect if set separately.
@@ -195,7 +209,7 @@ export class IgxButtonDirective extends DisplayDensityBase {
     /**
      *@hidden
      */
-    @HostListener('click',  ['$event'])
+    @HostListener('click', ['$event'])
     public onClick(ev) {
         this.buttonClick.emit(ev);
     }

projects/igniteui-angular/src/lib/grids/cell.component.ts

@@ -18,7 +18,9 @@ import { IgxSelectionAPIService } from '../core/selection';
 import { IgxTextHighlightDirective } from '../directives/text-highlight/text-highlight.directive';
 import { GridBaseAPIService } from './api.service';
 import { IgxColumnComponent } from './column.component';
-import { getNodeSizeViaRange, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS, NAVIGATION_KEYS, isIE, isLeftClick } from '../core/utils';
+import {
+    getNodeSizeViaRange, ROW_COLLAPSE_KEYS, ROW_EXPAND_KEYS, SUPPORTED_KEYS, NAVIGATION_KEYS, isIE, isLeftClick, PlatformUtil
+} from '../core/utils';
 import { State } from '../services/index';
 import { IgxGridBaseComponent, IGridEditEventArgs, IGridDataBindable } from './grid-base.component';
 import { IgxGridSelectionService, ISelectionNode, IgxGridCRUDService } from '../core/grid-selection';
@@ -555,9 +557,11 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy {
                 this.nativeElement.addEventListener('compositionend', this.compositionEndHandler);
             }
         });
-        this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, {
-            cssProps: { } /* don't disable user-select, etc */
-        } as HammerOptions);
+        if (PlatformUtil.isIOS()) {
+            this.touchManager.addEventListener(this.nativeElement, 'doubletap', this.onDoubleClick, {
+                cssProps: { } /* don't disable user-select, etc */
+            } as HammerOptions);
+        }
     }
 
     /**

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

@@ -9,6 +9,7 @@ import { configureTestSuite } from '../../test-utils/configure-suite';
 import { IgxStringFilteringOperand } from '../../data-operations/filtering-condition';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
 import { HammerGesturesManager } from '../../core/touch';
+import { PlatformUtil } from '../../core/utils';
 
 const DEBOUNCETIME = 30;
 
@@ -186,8 +187,16 @@ describe('IgxGrid - Cell component', () => {
         expect(firstCell).toBe(fix.componentInstance.clickedCell);
     });
 
-    it('Should handle doubletap, trigger onDoubleClick event', () => {
+    it('Should not attach doubletap handler for non-iOS', () => {
         const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener');
+        spyOn(PlatformUtil, 'isIOS').and.returnValue(false);
+        const fix = TestBed.createComponent(DefaultGridComponent);
+        fix.detectChanges();
+    });
+
+    it('Should handle doubletap on iOS, trigger onDoubleClick event', () => {
+        const addListenerSpy = spyOn(HammerGesturesManager.prototype, 'addEventListener');
+        spyOn(PlatformUtil, 'isIOS').and.returnValue(true);
         const fix = TestBed.createComponent(DefaultGridComponent);
         fix.detectChanges();