Merge branch 'master' into randriova/localization-fr-fix-master

ChronosSF · web-flow · commit ba9ea7e140a8 · 2023-01-25T12:47:00.000+02:00
diff --git a/projects/igniteui-angular/src/lib/grids/cell.component.ts b/projects/igniteui-angular/src/lib/grids/cell.component.ts
@@ -1069,7 +1069,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT
             this.selectionService.keyboardStateOnFocus(node, this.grid.rangeSelected, this.nativeElement);
         }
         if (this.grid.isCellSelectable && shouldEmitSelection) {
-            this.grid.selected.emit({ cell: this.getCellType(), event });
+            this.zone.run(() => this.grid.selected.emit({ cell: this.getCellType(), event }));
         }
     }
 
diff --git a/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts b/projects/igniteui-angular/src/lib/grids/grid-base.directive.ts
@@ -7520,7 +7520,11 @@ export abstract class IgxGridBaseDirective extends DisplayDensityBase implements
         directive.scrollTo(goal);
     }
 
-    private getColumnWidthSum(): number {
+
+    /**
+     * @hidden
+     */
+    protected getColumnWidthSum(): number {
         let colSum = 0;
         const cols = this.hasColumnLayouts ?
             this.visibleColumns.filter(x => x.columnLayout) : this.visibleColumns.filter(x => !x.columnGroup);
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.spec.ts
@@ -2376,8 +2376,13 @@ describe('IgxGrid Component Tests #grid', () => {
             tab.items.toArray()[1].selected = true;
             await wait(100);
             fix.detectChanges();
+            await wait(100);
+            fix.detectChanges();
 
-            grid.navigateTo(grid.data.length - 1, grid.columnList.length - 1);
+            grid.navigateTo(0,  grid.columnList.length - 1);
+            await wait(100);
+            fix.detectChanges();
+            grid.navigateTo(grid.data.length - 1);
             await wait(100);
             fix.detectChanges();
 
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.html
@@ -21,9 +21,9 @@
 <div igxGridBody (keydown.control.c)="copyHandler($event)" (copy)="copyHandler($event)" class="igx-grid__tbody" role="rowgroup">
     <ng-container *ngTemplateOutlet="rowDimensions.length ? defaultRowDimensionsTemplate : emptyRowDimensionsTemplate; context: this"></ng-container>
     <div class="igx-grid__tbody-content" tabindex="0" [attr.role]="dataView.length ? null : 'row'" (keydown)="navigation.handleNavigation($event)" (focus)="navigation.focusTbody($event)"
-        (dragStop)="selectionService.dragMode = $event" (scroll)='preventContainerScroll($event)'
+        (dragStop)="selectionService.dragMode = $event" (scroll)="preventContainerScroll($event)"
         (dragScroll)="dragScroll($event)" [igxGridDragSelect]="selectionService.dragMode"
-        [style.height.px]='totalHeight' [style.width.px]='calcWidth || null' #tbody [attr.aria-activedescendant]="activeDescendant">
+        [style.height.px]="totalHeight" [style.width.px]="pivotContentCalcWidth || null" #tbody [attr.aria-activedescendant]="activeDescendant">
         <span *ngIf="hasMovableColumns && columnInDrag && pinnedColumns.length <= 0"
             [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true" id="left"
             class="igx-grid__scroll-on-drag-left"></span>
@@ -38,15 +38,15 @@
         | pivotGridAutoTransform:pivotConfiguration:pipeTrigger
         | pivotGridColumnSort:sortingExpressions:sortStrategy:pipeTrigger
         | pivotGridRowExpansion:pivotConfiguration:expansionStates:defaultExpandState:pipeTrigger"
-            let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
-            [igxForContainerSize]='calcHeight'
+            let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
+            [igxForContainerSize]="calcHeight"
             [igxForItemSize]="hasColumnLayouts ? rowHeight * multiRowLayoutRowSize + 1 : renderedRowHeight"
-            [igxGridForOfVariableSizes]='false'
+            [igxGridForOfVariableSizes]="false"
             #verticalScrollContainer>
             <ng-template
-                [igxTemplateOutlet]='recordTemplate'
-                [igxTemplateOutletContext]='getContext(rowData, rowIndex)'
-                (cachedViewLoaded)='cachedViewLoaded($event)'>
+                [igxTemplateOutlet]="recordTemplate"
+                [igxTemplateOutletContext]="getContext(rowData, rowIndex)"
+                (cachedViewLoaded)="cachedViewLoaded($event)">
             </ng-template>
         </ng-template>
         <ng-template #record_template let-rowIndex="index" let-rowData>
@@ -60,33 +60,33 @@
         <igc-trial-watermark></igc-trial-watermark>
     </div>
     <div igxToggle #loadingOverlay>
-        <igx-circular-bar [indeterminate]="true" *ngIf='shouldOverlayLoading'>
+        <igx-circular-bar [indeterminate]="true" *ngIf="shouldOverlayLoading">
         </igx-circular-bar>
     </div>
     <span *ngIf="hasMovableColumns && columnInDrag" [igxColumnMovingDrop]="headerContainer" [attr.droppable]="true"
         id="right" class="igx-grid__scroll-on-drag-right"></span>
-    <div [hidden]='!hasVerticalScroll()' class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
-        <div class="igx-grid__tbody-scrollbar-start" [style.height.px]=' isRowPinningToTop ? pinnedRowHeight : 0'></div>
-        <div class="igx-grid__tbody-scrollbar-main" [style.height.px]='calcHeight'>
-            <ng-template igxGridFor [igxGridForOf]='[]' #verticalScrollHolder></ng-template>
+    <div [hidden]="!hasVerticalScroll()" class="igx-grid__tbody-scrollbar" [style.width.px]="scrollSize" (pointerdown)="$event.preventDefault()">
+        <div class="igx-grid__tbody-scrollbar-start" [style.height.px]=" isRowPinningToTop ? pinnedRowHeight : 0"></div>
+        <div class="igx-grid__tbody-scrollbar-main" [style.height.px]="calcHeight">
+            <ng-template igxGridFor [igxGridForOf]="[]" #verticalScrollHolder></ng-template>
         </div>
-        <div class="igx-grid__tbody-scrollbar-end" [style.height.px]='!isRowPinningToTop ? pinnedRowHeight : 0'></div>
+        <div class="igx-grid__tbody-scrollbar-end" [style.height.px]="!isRowPinningToTop ? pinnedRowHeight : 0"></div>
     </div>
 
     <div class="igx-grid__addrow-snackbar">
-        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]='snackbarDisplayTime'>{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
+        <igx-snackbar #addRowSnackbar [outlet]="igxBodyOverlayOutlet" [actionText]="resourceStrings.igx_grid_snackbar_addrow_actiontext" [displayTime]="snackbarDisplayTime">{{resourceStrings.igx_grid_snackbar_addrow_label}}</igx-snackbar>
     </div>
 
     <div #igxBodyOverlayOutlet="overlay-outlet" igxOverlayOutlet></div>
 </div>
 
 <div class="igx-grid__scroll" [style.height.px]="scrollSize" #scr [hidden]="isHorizontalScrollHidden" (pointerdown)="$event.preventDefault()">
-    <div class="igx-grid__scroll-start" [style.width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth' [style.min-width.px]='isPinningToStart ? pinnedWidth : headerFeaturesWidth'></div>
-    <div class="igx-grid__scroll-main" [style.width.px]='unpinnedWidth'>
-        <ng-template igxGridFor [igxGridForOf]='EMPTY_DATA' #scrollContainer>
+    <div class="igx-grid__scroll-start" [style.width.px]="pivotPinnedWidth" [style.min-width.px]="pivotPinnedWidth"></div>
+    <div class="igx-grid__scroll-main" [style.width.px]="pivotUnpinnedWidth">
+        <ng-template igxGridFor [igxGridForOf]="EMPTY_DATA" #scrollContainer>
         </ng-template>
     </div>
-    <div class="igx-grid__scroll-end" [style.float]='"right"' [style.width.px]='pinnedWidth' [style.min-width.px]='pinnedWidth' [hidden]="pinnedWidth === 0 || isPinningToStart"></div>
+    <div class="igx-grid__scroll-end" [style.float]="'right'" [style.width.px]="pivotPinnedWidth" [style.min-width.px]="pivotPinnedWidth" [hidden]="pivotPinnedWidth === 0 || isPinningToStart"></div>
 </div>
 
 <div class="igx-grid__tfoot" role="rowgroup" #tfoot>
@@ -122,36 +122,36 @@
     <div class="igx-grid__tr--header">
         <igx-icon [attr.draggable]="false"
                   (click)="toggleColumn(column)">
-                  {{getColumnGroupExpandState(column) ? 'chevron_right' : 'expand_more'}}</igx-icon>
+                  {{getColumnGroupExpandState(column) ? "chevron_right" : "expand_more"}}</igx-icon>
         {{column.header}}
     </div>
 </ng-template>
 
 <ng-template #defaultRowDimensionsTemplate>
-    <div tabindex="0" [style.height.px]='totalHeight' *ngFor='let dim of rowDimensions; let dimIndex = index;' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension' (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+    <div tabindex="0" [style.height.px]="totalHeight" *ngFor="let dim of rowDimensions; let dimIndex = index;" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
         <ng-template igxGridFor let-rowData [igxGridForOf]="dataView
         | pivotGridCellMerging:pivotConfiguration:dim:pipeTrigger"
-                     let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]='verticalScroll'
-                     [igxForContainerSize]='calcHeight'
+                     let-rowIndex="index" [igxForScrollOrientation]="'vertical'" [igxForScrollContainer]="verticalScroll"
+                     [igxForContainerSize]="calcHeight"
                      [igxForItemSize]="renderedRowHeight"
-                     [igxForSizePropName]='"height"'
+                     [igxForSizePropName]="'height'"
                      #verticalRowDimScrollContainer>
-            <igx-pivot-row-dimension-content role='row' class="igx-grid-thead" [grid]="this"
-                                             [dimension]='rowData.dimensions[dimIndex]'
-                                             [rootDimension]='dim'
+            <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
+                                             [dimension]="rowData.dimensions[dimIndex]"
+                                             [rootDimension]="dim"
                                              [style.height.px]="renderedRowHeight * (rowData.rowSpan || 1)"
-                                             [rowIndex]='rowIndex' [rowData]='rowData'
+                                             [rowIndex]="rowIndex" [rowData]="rowData"
                                              [density]="displayDensity" [width]="rowDimensionWidthToPixels(dim)">
             </igx-pivot-row-dimension-content>
         </ng-template>
     </div>
 </ng-template>
 <ng-template #emptyRowDimensionsTemplate>
-    <div tabindex="0" *ngIf='columnDimensions.length > 0 || values.length > 0' #rowDimensionContainer role="rowgroup" class='igx-grid__tbody-pivot-dimension' (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
-        <igx-pivot-row-dimension-content role='row' class="igx-grid-thead" [grid]="this"
-            [dimension]='emptyRowDimension'
-            [rootDimension]='emptyRowDimension'
-            [rowIndex]='0' [rowData]='dataView[0]'
+    <div tabindex="0" *ngIf="columnDimensions.length > 0 || values.length > 0" #rowDimensionContainer role="rowgroup" class="igx-grid__tbody-pivot-dimension" (focus)="navigation.focusTbody($event)" (keydown)="navigation.handleNavigation($event)">
+        <igx-pivot-row-dimension-content role="row" class="igx-grid-thead" [grid]="this"
+            [dimension]="emptyRowDimension"
+            [rootDimension]="emptyRowDimension"
+            [rowIndex]="0" [rowData]="dataView[0]"
             [density]="displayDensity" [width]="rowDimensionWidthToPixels(emptyRowDimension)">
         </igx-pivot-row-dimension-content>
     </div>
@@ -163,9 +163,9 @@
     </span>
 </ng-template>
 
-<div [hidden]='true'>
-    <igx-grid-excel-style-filtering [maxHeight]='excelStyleFilterMaxHeight' [minHeight]='excelStyleFilterMinHeight'>
-        <div igxExcelStyleColumnOperations [hidden]='true'></div>
+<div [hidden]="true">
+    <igx-grid-excel-style-filtering [maxHeight]="excelStyleFilterMaxHeight" [minHeight]="excelStyleFilterMinHeight">
+        <div igxExcelStyleColumnOperations [hidden]="true"></div>
         <igx-excel-style-filter-operations>
             <igx-excel-style-search></igx-excel-style-search>
         </igx-excel-style-filter-operations>
diff --git a/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts b/projects/igniteui-angular/src/lib/grids/pivot-grid/pivot-grid.component.ts
@@ -1135,7 +1135,11 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
     /**
      * @hidden @internal
      */
-    public rowDimensionWidthToPixels(dim: IPivotDimension): number {
+    public rowDimensionWidthToPixels(dim: IPivotDimension, ignoreBeforeInit: boolean = false): number {
+        if (!ignoreBeforeInit && this.shouldGenerate) {
+            return 0;
+        }
+
         if (!dim.width) {
             return MINIMUM_COLUMN_WIDTH;
         }
@@ -1154,6 +1158,21 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         return (width * 100 / this.calcWidth);
     }
 
+    public get pivotContentCalcWidth() {
+        const totalDimWidth = this.rowDimensions.length > 0 ?
+            this.rowDimensions.map((dim) => this.rowDimensionWidthToPixels(dim)).reduce((prev, cur) => prev + cur) :
+            0;
+        return this.calcWidth - totalDimWidth;
+    }
+
+    public get pivotPinnedWidth() {
+        return !this.shouldGenerate ? (this.isPinningToStart ? this.pinnedWidth : this.headerFeaturesWidth) : 0;
+    }
+
+    public get pivotUnpinnedWidth() {
+        return !this.shouldGenerate ? this.unpinnedWidth : 0;
+    }
+
     public get rowDimensions() {
         return this.pivotConfiguration.rows?.filter(x => x.enabled) || [];
     }
@@ -1178,6 +1197,12 @@ export class IgxPivotGridComponent extends IgxGridBaseDirective implements OnIni
         this.reflow();
     }
 
+    protected override getColumnWidthSum(): number {
+        let colSum = super.getColumnWidthSum();
+        colSum += this.rowDimensions.map(dim => this.rowDimensionWidthToPixels(dim, true)).reduce((prev, cur) => prev + cur, 0);
+        return colSum;
+    }
+
     /**
      * @hidden @internal
      */
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.html
@@ -20,7 +20,7 @@
     <ng-container ngProjectAs="igx-suffix">
         <ng-content select="igx-suffix"></ng-content>
     </ng-container>
-    <igx-suffix *ngIf="comboInput.value.length" aria-label="Clear Selection" class="igx-combo__clear-button"
+    <igx-suffix *ngIf="selection.length" aria-label="Clear Selection" class="igx-combo__clear-button"
         (click)="handleClear($event)">
         <ng-container *ngIf="clearIconTemplate">
             <ng-container *ngTemplateOutlet="clearIconTemplate"></ng-container>
diff --git a/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts b/projects/igniteui-angular/src/lib/simple-combo/simple-combo.component.spec.ts
@@ -1286,7 +1286,7 @@ describe('IgxSimpleCombo', () => {
             fixture.detectChanges();
             combo = fixture.componentInstance.combo;
 
-            const toggleIcon = fixture.debugElement.query(By.directive(IgxIconComponent));
+            const toggleIcon = fixture.debugElement.query(By.css(`.${CSS_CLASS_TOGGLEBUTTON}`));
             expect(toggleIcon).toBeDefined();
 
             expect(toggleIcon.nativeElement.textContent).toBe('search');
@@ -1311,12 +1311,19 @@ describe('IgxSimpleCombo', () => {
 
             expect(combo.selection.length).toEqual(1);
 
+            let clearButton = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+            expect(clearButton).not.toBeNull();
+
             input.triggerEventHandler('focus', {});
             fixture.detectChanges();
 
             UIInteractions.simulateTyping('L', input, 9, 10);
             fixture.detectChanges();
             expect(combo.selection.length).toEqual(0);
+
+            //should hide the clear button immediately when clearing the selection by typing
+            clearButton = fixture.debugElement.query(By.css(`.${CSS_CLASS_CLEARBUTTON}`));
+            expect(clearButton).toBeNull();
         });
     });
 

Original file line number	Diff line number	Diff line change
`@@ -1069,7 +1069,7 @@ export class IgxGridCellComponent implements OnInit, OnChanges, OnDestroy, CellT`
`1069`	`1069`	`this.selectionService.keyboardStateOnFocus(node, this.grid.rangeSelected, this.nativeElement);`
`1070`	`1070`	`}`
`1071`	`1071`	`if (this.grid.isCellSelectable && shouldEmitSelection) {`
`1072`		`- this.grid.selected.emit({ cell: this.getCellType(), event });`
	`1072`	`+ this.zone.run(() => this.grid.selected.emit({ cell: this.getCellType(), event }));`
`1073`	`1073`	`}`
`1074`	`1074`	`}`
`1075`	`1075`