Merge branch '18.2.x' into gedinakova/fix-clear-filter-15193-18.2

Author: gedinakova

projects/igniteui-angular/src/lib/core/styles/components/chip/_chip-theme.scss

@@ -386,7 +386,7 @@
         }
 
         @if $variant == 'indigo' {
-            %igx-icon-display {
+            igx-icon {
                 --size: #{sizable(rem(14px), rem(14px), rem(16px))}
             }
         }

projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss

@@ -174,14 +174,14 @@
     // The wrapping element here is needed
     // in order to override the !important rule of .igx-icon--inactive.
     %igx-combo__case-icon {
-        .igx-icon {
+        igx-icon {
             // Important is needed since the .igx-icon--inactive has !important
             color: color($color: 'gray', $variant: 600) !important;
         }
     }
 
     %igx-combo__case-icon--active {
-        .igx-icon {
+        igx-icon {
             color: color($color: 'primary')
         }
     }

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

@@ -99,13 +99,9 @@
             }
         }
 
-        igx-icon {
-            @if $variant == 'indigo' {
-                --component-size: 2;
-            } @else {
-                width: var(--igx-icon-size, #{rem(15px)});
-                height: var(--igx-icon-size, #{rem(15px)});
-                font-size: var(--igx-icon-size, #{rem(15px)});
+        @if $variant != 'indigo' {
+            igx-icon {
+                --size: var(--igx-icon-size, #{rem(15px)});
             }
         }
     }

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

@@ -1206,7 +1206,7 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
 
                 &:hover {
@@ -1460,12 +1460,12 @@
         } @else {
             padding-inline: pad-inline(rem(8px), rem(12px), rem(16px));
 
-            %igx-icon-display {
+            igx-icon {
                 opacity: if($theme-variant == 'light', .75, .85);
             }
 
             &:hover {
-                %igx-icon-display {
+                igx-icon {
                     opacity: 1;
                 }
             }
@@ -2037,13 +2037,10 @@
             position: relative;
             display: flex;
 
-            igx-icon {
-                @if $variant == 'indigo' {
-                    --component-size: 2;
-                } @else {
-                    width: var(--igx-icon-size, #{rem(15px)});
-                    height: var(--igx-icon-size, #{rem(15px)});
-                    font-size: var(--igx-icon-size, #{rem(15px)});
+
+            @if $variant != 'indigo' {
+                igx-icon {
+                    --size: var(--igx-icon-size, #{rem(15px)});
                 }
             }
 
@@ -2149,15 +2146,15 @@
             %grid-excel-icon {
                 color: var-get($theme, 'header-selected-text-color');
 
-                %igx-icon-display {
+                igx-icon {
                     color: var-get($theme, 'header-selected-text-color');
                 }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
 
-                    %igx-icon-display {
+                    igx-icon {
                         color: var-get($theme, 'header-selected-text-color');
                     }
                 }
@@ -2501,7 +2498,7 @@
     }
 
     %igx-group-label__icon {
-        &.igx-icon {
+        @at-root igx-icon#{&} {
             --component-size: #{if($variant == 'indigo', 2, 1)};
 
             color: var-get($theme, 'group-label-icon');
@@ -3449,10 +3446,9 @@
             }
 
             @if $variant == 'indigo' {
-                %igx-icon-display {
+                igx-icon {
                     opacity: if($theme-variant == 'light', .75, .85);
 
-
                     &:hover {
                         opacity: 1;
                         cursor: pointer;

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

@@ -16,6 +16,7 @@ import { IgxAvatarComponent } from '../../avatar/avatar.component';
 import { IColumnResizeEventArgs, IgxColumnComponent } from '../public_api';
 import { Size } from "../common/enums";
 import { setElementSize } from '../../test-utils/helper-utils.spec';
+import { IgxColumnResizerDirective } from '../resizing/resizer.directive';
 
 describe('IgxGrid - Deferred Column Resizing #grid', () => {
 
@@ -133,6 +134,27 @@ describe('IgxGrid - Deferred Column Resizing #grid', () => {
             expect(grid.columnList.get(1).width).toEqual('70px');
         }));
 
+        it('should calculate correctly resizer position and column width when grid is scaled and zoomed', fakeAsync(() => {
+            grid.nativeElement.style.transform = 'scale(1.2)';
+            grid.nativeElement.style.setProperty('zoom', '1.05');
+            fixture.detectChanges();
+            headerResArea = GridFunctions.getHeaderResizeArea(headers[1]).nativeElement;
+            UIInteractions.simulateMouseEvent('mousedown', headerResArea, 153, 0);
+            tick(200);
+            fixture.detectChanges();
+
+            const resizer = GridFunctions.getResizer(fixture);
+            const resizerDirective = resizer.componentInstance.resizer as IgxColumnResizerDirective;
+            const leftSetterSpy = spyOnProperty(resizerDirective, 'left', 'set').and.callThrough();
+            UIInteractions.simulateMouseEvent('mousemove', resizer.nativeElement, 200, 5);
+            UIInteractions.simulateMouseEvent('mouseup', resizer.nativeElement, 200, 5);
+            fixture.detectChanges();
+
+            expect(leftSetterSpy).toHaveBeenCalled();
+            expect(parseInt(leftSetterSpy.calls.mostRecent().args[0].toFixed(0))).toEqual(200);
+            expect(parseInt(grid.columnList.get(1).headerCell.nativeElement.getBoundingClientRect().width.toFixed(0))).toEqual(173);
+        }));
+
         it('should be able to resize column to the minWidth < defaultMinWidth', fakeAsync(() => {
             const column = grid.getColumnByName('ID');
             column.minWidth = 'a';

projects/igniteui-angular/src/lib/grids/resizing/resizer.component.html

@@ -4,5 +4,5 @@
     [restrictHResizeMax]="colResizingService.restrictResizeMax"
     [restrictHResizeMin]="colResizingService.restrictResizeMin"
     [restrictResizerTop]="restrictResizerTop"
-    (resizeEnd)="colResizingService.resizeColumn($event)">
+    (resizeEnd)="colResizingService.resizeColumn($event, resizer.ratio)">
 </div>

projects/igniteui-angular/src/lib/grids/resizing/resizer.directive.ts

@@ -41,8 +41,13 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     @Output() public resize = new Subject<any>();
 
     private _left: number;
+    private _ratio: number = 1;
     private _destroy = new Subject<boolean>();
 
+    public get ratio(): number {
+        return this._ratio;
+    }
+
     constructor(
         public element: ElementRef<HTMLElement>,
         @Inject(DOCUMENT) public document,
@@ -56,7 +61,7 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
                 .pipe(
                     takeUntil(this._destroy),
                     takeUntil<MouseEvent>(this.resizeEnd),
-                    map((event) => event.clientX - offset),
+                    map((event) => (event.clientX - offset) / (this._ratio)),
                 ))
         )
             .subscribe((pos) => {
@@ -113,8 +118,12 @@ export class IgxColumnResizerDirective implements OnInit, OnDestroy {
     public onMousedown(event: MouseEvent) {
         event.preventDefault();
         const parent = this.element.nativeElement.parentElement.parentElement;
-
-        this.left = this._left = event.clientX - parent.getBoundingClientRect().left;
+        const parentRectWidth = parent.getBoundingClientRect().width;
+        const parentComputedWidth = parseFloat(window.getComputedStyle(parent).width);
+        if (Math.abs(parentRectWidth - parentComputedWidth) > 1) {
+            this._ratio = parentRectWidth / parentComputedWidth;
+        }
+        this.left = this._left = (event.clientX - parent.getBoundingClientRect().left) / this._ratio;
         this.top = (event.target as HTMLElement).getBoundingClientRect().top - parent.getBoundingClientRect().top;
 
         this.resizeStart.next(event);

projects/igniteui-angular/src/lib/grids/resizing/resizing.service.ts

@@ -35,7 +35,7 @@ export class IgxColumnResizingService {
      * @hidden
      */
     public getColumnHeaderRenderedWidth() {
-        return this.column.headerCell.nativeElement.getBoundingClientRect().width;
+        return parseFloat(window.getComputedStyle(this.column.headerCell.nativeElement).width);
     }
 
     /**
@@ -101,9 +101,9 @@ export class IgxColumnResizingService {
     /**
      * Resizes the column regaridng to the column minWidth and maxWidth.
      */
-    public resizeColumn(event: MouseEvent) {
+    public resizeColumn(event: MouseEvent, ratio: number = 1) {
         this.showResizer = false;
-        const diff = event.clientX - this.startResizePos;
+        const diff = (event.clientX - this.startResizePos) / ratio;
 
         const colWidth = this.column.width;
         const isPercentageWidth = colWidth && typeof colWidth === 'string' && colWidth.indexOf('%') !== -1;