Merge branch '18.1.x' into ganastasov/fix-14262-18.1.x

Author: kacheshmarova

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

@@ -3093,8 +3093,11 @@
                 max-height: 100%;
             }
         }
-    }
 
+        %igx-grid__tr-pivot--row-area {
+            padding-bottom: rem(4px);
+        }
+    }
 
     %grid-thead--pivot {
         display: flex;

projects/igniteui-angular/src/lib/core/styles/components/navdrawer/_navdrawer-theme.scss

@@ -202,7 +202,7 @@
     }
 
     %navdrawer-display-mini-pinned {
-        flex-basis: var(--igx-mini-nav-drawer-size, #{$item-mini-size});
+        flex-basis: calc(var(--igx-mini-nav-drawer-size, #{$item-mini-size}) + rem(1px));
     }
 
     %aside {
@@ -213,11 +213,11 @@
         background: var-get($theme, 'background');
         top: 0;
         bottom: 0;
-        min-width: var(--igx-nav-drawer-size);
+        width: var(--igx-nav-drawer-size);
         inset-inline-start: 0;
         z-index: 999;
         transition: width, padding, transform;
-        transition-timing-function: $in-out-quad, $in-out-quad;
+        transition-timing-function: $in-out-quad;
         box-shadow: var-get($theme, 'shadow');
         padding: $aside-padding;
 
@@ -279,11 +279,13 @@
     }
 
     %aside--mini {
-        transition-duration: .2s, .2s;
-        min-width: var(--igx-nav-drawer-size--mini);
+        transition-duration: .3s;
+        width: var(--igx-nav-drawer-size--mini);
+        min-width: fit-content;
 
         %item {
             justify-content: center;
+            min-width: fit-content;
 
             @if $variant == 'bootstrap' {
                 width: rem(56px);
@@ -303,15 +305,15 @@
     }
 
     %aside--normal {
-        transition-duration: .3s, .3s;
+        transition-duration: .3s;
         width: var(--igx-nav-drawer-size);
     }
 
     %overlay {
         opacity: 1;
         background: color(null, 'gray', 500, .54);
         transition: opacity, visibility;
-        transition-duration: .25s, .25s;
+        transition-duration: .3s, .3s;
         transition-timing-function: ease-in, step-start;
         transition-delay: 0s, 0s;
         position: absolute;

projects/igniteui-angular/src/lib/core/styles/components/query-builder/_query-builder-theme.scss

@@ -247,20 +247,10 @@
     %filter-tree__expression-actions {
         display: inline-flex;
         margin: 0 rem(8px);
+        gap: rem(8px);
 
-        igx-icon {
-            cursor: pointer;
-            color: color(null, 'gray', 500);
-            outline-style: none;
-
-            &:hover,
-            &:focus {
-                color: color(null, 'gray', 800);
-            }
-        }
-
-        igx-icon + igx-icon {
-            margin-inline-start: rem(8px);
+        %igx-icon-button-display {
+            --size: #{sizable(rem(20px), rem(24px), rem(32px))};
         }
     }
 

projects/igniteui-angular/src/lib/grids/grid-base.directive.ts

@@ -3620,7 +3620,7 @@ export abstract class IgxGridBaseDirective implements GridType,
             this.zone.run(() => {
                 // do not trigger reflow if element is detached.
                 if (this.nativeElement.isConnected) {
-                    if (this._gridSize !== this.gridSize) {
+                    if (this.shouldResize) {
                         // resizing occurs due to the change of --ig-size css var
                         this._gridSize = this.gridSize;
                         this.updateDefaultRowHeight();
@@ -5312,6 +5312,10 @@ export abstract class IgxGridBaseDirective implements GridType,
         return this.width && this.width.indexOf('%') !== -1;
     }
 
+    protected get shouldResize(): boolean {
+        return this._gridSize !== this.gridSize;
+    }
+
     /**
      * @hidden @internal
      */

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

@@ -24,6 +24,7 @@ import { IgxHierGridExternalAdvancedFilteringComponent } from '../../test-utils/
 import { IgxHierarchicalGridComponent } from '../hierarchical-grid/public_api';
 import { IFilteringEventArgs } from '../public_api';
 import { SampleTestData } from '../../test-utils/sample-test-data.spec';
+import { By } from '@angular/platform-browser';
 
 const ADVANCED_FILTERING_OPERATOR_LINE_AND_CSS_CLASS = 'igx-filter-tree__line--and';
 const ADVANCED_FILTERING_OPERATOR_LINE_OR_CSS_CLASS = 'igx-filter-tree__line--or';
@@ -2999,6 +3000,40 @@ describe('IgxGrid - Advanced Filtering #grid - ', () => {
                 verifyContextMenuVisibility(fix, false);
             }));
 
+            it('Should navigate with Tab/Shift+Tab through chips" "edit", "cancel" and "adding" buttons, fields of a condition in edit mode.', fakeAsync(() => {
+                // Apply advanced filter through API.
+                const tree = new FilteringExpressionsTree(FilteringLogic.Or);
+                tree.filteringOperands.push({
+                    fieldName: 'ProductName', searchVal: 'angular', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                    ignoreCase: true
+                });
+                tree.filteringOperands.push({
+                    fieldName: 'ProductName', searchVal: 'script', condition: IgxStringFilteringOperand.instance().condition('contains'),
+                    ignoreCase: true
+                });
+                grid.advancedFilteringExpressionsTree = tree;
+                fix.detectChanges();
+    
+                // Open Advanced Filtering dialog.
+                grid.openAdvancedFilteringDialog();
+                fix.detectChanges();
+
+                // Press 'Enter' on the second chip and verify it is selected.
+                UIInteractions.triggerKeyDownEvtUponElem('Enter', GridFunctions.getAdvancedFilteringTreeExpressionChip(fix, [0]));
+                tick(200);
+                fix.detectChanges();
+
+                let chipActions = fix.debugElement.query(By.css('.igx-filter-tree'));
+                GridFunctions.verifyTabbableElements(chipActions);
+
+                // Press 'Enter' on the edit button.
+                UIInteractions.triggerKeyDownEvtUponElem('Enter', GridFunctions.getAdvancedFilteringTreeExpressionEditIcon(fix, [0]));
+                fix.detectChanges();
+
+                chipActions = fix.debugElement.query(By.css('.igx-filter-tree'));
+                GridFunctions.verifyInEditTabbableElements(chipActions);
+            }));
+
         });
 
     });

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

@@ -2175,6 +2175,28 @@ describe('IgxGrid - GroupBy #grid', () => {
         expect(fix.componentInstance.onGroupByRowClick).toHaveBeenCalledWith(fix.componentInstance.groupByRowClick, contextUnselect);
     }));
 
+    it('should update chips state when columns are added/removed', fakeAsync(() => {
+        const fix = TestBed.createComponent(GroupByDataMoreColumnsComponent);
+        const cols = fix.componentInstance.columns;
+        fix.componentInstance.columns = [];
+        fix.componentInstance.instance.groupingExpressions = [
+            {
+                dir: SortingDirection.Asc,
+                fieldName: 'A',
+                ignoreCase: false,
+                strategy: DefaultSortingStrategy.instance()
+            }
+        ];
+        fix.detectChanges();
+        const chips = fix.componentInstance.instance.groupArea.chips;
+        let chipContent = chips.first.nativeElement.querySelector('.igx-chip__content').textContent.trim();
+        expect(chipContent).toBe('A');
+        fix.componentInstance.columns = cols;
+        fix.detectChanges();
+        chipContent = chips.first.nativeElement.querySelector('.igx-chip__content').textContent.trim();
+        expect(chipContent).toBe('AA');
+    }));
+
     // GroupBy Row Formatting
     it('should properly apply formatters, both custom and default ones for the default row value template', fakeAsync(() => {
         const fix = TestBed.createComponent(GroupableGridComponent);
@@ -4103,7 +4125,7 @@ export class CustomTemplateGridComponent extends DataParent {
             [width]='width'
             [height]='height'
             [data]="testData">
-                <igx-column *ngFor="let c of columns" [groupable]="true" [field]="c.field" [header]="c.field" [width]="c.width + 'px'">
+                <igx-column *ngFor="let c of columns" [groupable]="true" [field]="c.field" [header]="c.header || c.field" [width]="c.width + 'px'">
                 </igx-column>
         </igx-grid>
     `,
@@ -4119,7 +4141,7 @@ export class GroupByDataMoreColumnsComponent extends DataParent {
     public testData = [];
 
     public columns = [
-        { field: 'A', width: 100 },
+        { field: 'A', header: 'AA', width: 100 },
         { field: 'B', width: 100 },
         { field: 'C', width: 100 },
         { field: 'D', width: 100 },

projects/igniteui-angular/src/lib/grids/grouping/group-by-area.component.html

@@ -2,15 +2,15 @@
     <ng-container *ngFor="let expression of chipExpressions; let last = last;">
         <igx-chip
             [id]="expression.fieldName"
-            [title]="(expression.fieldName | igxGroupByMeta:grid).title"
+            [title]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title"
             [removable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
             [draggable]="(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
             [disabled]="!(expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).groupable"
             (keyDown)="handleKeyDown($event.owner.id, $event.originalEvent)"
             (remove)="clearGrouping($event.owner.id)"
             (chipClick)="handleClick(expression.fieldName)"
         >
-            <span>{{ (expression.fieldName | igxGroupByMeta:grid).title }}</span>
+            <span>{{ (expression.fieldName | igxGroupByMeta:grid:grid.groupablePipeTrigger).title }}</span>
             <igx-icon
                 family="default"
                 [name]="expression.dir === 1 ? 'sort_asc' : 'sort_desc'"

projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html

@@ -49,7 +49,7 @@
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
-            <igx-pivot-row [style.height.px]="renderedRowHeight" [gridID]="id" [index]="rowIndex" [data]="rowData"
+            <igx-pivot-row [gridID]="id" [index]="rowIndex" [data]="rowData"
                 [ngClass]="rowClasses | igxGridRowClasses:row:row.inEditMode:row.selected:row.dirty:row.deleted:row.dragging:rowIndex:hasColumnLayouts:false:rowData:pipeTrigger"
                 [ngStyle]="rowStyles | igxGridRowStyles:rowData:rowIndex:pipeTrigger" #row>
             </igx-pivot-row>

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

@@ -25,11 +25,13 @@ import {
     createComponent,
     EnvironmentInjector,
     CUSTOM_ELEMENTS_SCHEMA,
-    booleanAttribute
+    booleanAttribute,
+    OnChanges,
+    SimpleChanges
 } from '@angular/core';
 import { DOCUMENT, NgTemplateOutlet, NgIf, NgClass, NgStyle, NgFor } from '@angular/common';
 
-import { first} from 'rxjs/operators';
+import { first, take, takeUntil} from 'rxjs/operators';
 import { IgxGridBaseDirective } from '../grid-base.directive';
 import { IgxFilteringService } from '../filtering/grid-filtering.service';
 import { IgxGridSelectionService } from '../selection/selection.service';
@@ -67,7 +69,7 @@ import { IgxGridExcelStyleFilteringComponent, IgxExcelStyleColumnOperationsTempl
 import { IgxPivotGridNavigationService } from './pivot-grid-navigation.service';
 import { IgxPivotColumnResizingService } from '../resizing/pivot-grid/pivot-resizing.service';
 import { IgxFlatTransactionFactory, IgxOverlayService, State, Transaction, TransactionService } from '../../services/public_api';
-import { cloneArray, PlatformUtil } from '../../core/utils';
+import { cloneArray, PlatformUtil, resizeObservable } from '../../core/utils';
 import { IgxPivotFilteringService } from './pivot-filtering.service';
 import { DataUtil } from '../../data-operations/data-util';
 import { IFilteringExpressionsTree } from '../../data-operations/filtering-expressions-tree';
@@ -197,7 +199,7 @@ const MINIMUM_COLUMN_WIDTH_SUPER_COMPACT = 104;
     schemas: [CUSTOM_ELEMENTS_SCHEMA]
 })
 export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnInit, AfterContentInit,
-    GridType, AfterViewInit {
+    GridType, AfterViewInit, OnChanges {
 
     /**
      * Emitted when the dimension collection is changed via the grid chip area.
@@ -695,6 +697,7 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     };
     private _sortableColumns = true;
     private _visibleRowDimensions: IPivotDimension[] = [];
+    private _shouldUpdateSizes = false;
 
     /**
     * Gets/Sets the default expand state for all rows.
@@ -1086,6 +1089,16 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         });
     }
 
+    /**
+     * @hidden @internal
+     */
+    public ngOnChanges(changes: SimpleChanges) {
+        if (changes.superCompactMode && !changes.superCompactMode.isFirstChange()) {
+            this._shouldUpdateSizes = true;
+            resizeObservable(this.verticalScrollContainer.displayContainer).pipe(take(1), takeUntil(this.destroy$)).subscribe(() => this.resizeNotify.next());
+        }
+    }
+
     /**
      * Notifies for dimension change.
      */
@@ -1119,6 +1132,18 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return rows.concat((config.columns || [])).concat(config.filters || []).filter(x => x !== null && x !== undefined);
     }
 
+    protected override get shouldResize(): boolean {
+        if (!this.dataRowList.first?.cells || this.dataRowList.first.cells.length === 0) {
+            return false;
+        }
+        const isSizePropChanged = super.shouldResize;
+        if (isSizePropChanged || this._shouldUpdateSizes) {
+            this._shouldUpdateSizes = false;
+            return true;
+        }
+        return false;
+    }
+
     /** @hidden @internal */
     public createFilterESF(dropdown: any, column: ColumnType, options: OverlaySettings, shouldReatach: boolean) {
         options.outlet = this.outlet;

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

@@ -759,6 +759,42 @@ describe('IgxPivotGrid #pivotGrid', () => {
             expect(pivotGrid.columns.length).toBe(3);
         });
 
+        it('should calculate row headers according to grid size', async() => {
+            const pivotGrid = fixture.componentInstance.pivotGrid;
+            const rowHeightSmall = 32;
+            const rowHeightMedium = 40;
+            const rowHeightLarge = 50;
+
+            pivotGrid.superCompactMode = false;
+            setElementSize(pivotGrid.nativeElement, Size.Large);
+
+            await wait(100);
+            fixture.detectChanges();
+
+            expect(pivotGrid.gridSize).toBe(Size.Large);
+            const dimensionContents = fixture.debugElement.queryAll(By.css('.igx-grid__tbody-pivot-dimension'));
+            let rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
+            let rowHeader = rowHeaders[0].queryAll(By.directive(IgxPivotRowDimensionHeaderComponent));
+            expect(rowHeader[0].nativeElement.offsetHeight).toBe(rowHeightLarge);
+
+            setElementSize(pivotGrid.nativeElement, Size.Small);
+            await wait(100);
+            fixture.detectChanges();
+
+            expect(pivotGrid.gridSize).toBe(Size.Small);
+            rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
+            rowHeader = rowHeaders[0].queryAll(By.directive(IgxPivotRowDimensionHeaderComponent));
+            expect(rowHeader[0].nativeElement.offsetHeight).toBe(rowHeightSmall);
+
+            setElementSize(pivotGrid.nativeElement, Size.Medium);
+            await wait(100);
+            fixture.detectChanges();
+
+            expect(pivotGrid.gridSize).toBe(Size.Medium);
+            rowHeaders = dimensionContents[0].queryAll(By.directive(IgxPivotRowDimensionHeaderGroupComponent));
+            rowHeader = rowHeaders[0].queryAll(By.directive(IgxPivotRowDimensionHeaderComponent));
+            expect(rowHeader[0].nativeElement.offsetHeight).toBe(rowHeightMedium);
+        });
 
         describe('IgxPivotGrid Features #pivotGrid', () => {
             it('should show excel style filtering via dimension chip.', async () => {