Merge branch '19.2.x' into rivanova/fix-15848-19.2.x

Author: RivaIvanova

projects/igniteui-angular/src/lib/carousel/carousel-base.ts

@@ -52,8 +52,14 @@ export abstract class IgxCarouselComponentBase implements OnDestroy {
     }
 
     public ngOnDestroy(): void {
-        this.enterAnimationPlayer?.destroy();
-        this.leaveAnimationPlayer?.destroy();
+        if (this.enterAnimationPlayer) {
+            this.enterAnimationPlayer.destroy();
+            this.enterAnimationPlayer = null;
+        }
+        if (this.leaveAnimationPlayer) {
+            this.leaveAnimationPlayer.destroy();
+            this.leaveAnimationPlayer = null;
+        }
     }
 
     /** @hidden */

projects/igniteui-angular/src/lib/carousel/carousel.component.spec.ts

@@ -745,6 +745,17 @@ describe('Carousel', () => {
             expect(carousel.get(1).nativeElement.classList.contains(HelperTestFunctions.ACTIVE_SLIDE_CLASS)).toBeTruthy();
             expect(carousel.get(0).nativeElement.classList.contains(HelperTestFunctions.PREVIOUS_SLIDE_CLASS)).toBeFalsy();
         });
+
+        it('should not throw an error when playing an animation and destroying the component - #15976', () => {
+            expect(() => {
+                carousel.next();
+                carousel.ngOnDestroy();
+                fixture.detectChanges();
+            }).not.toThrow();
+
+            expect(carousel['enterAnimationPlayer']).toBe(null);
+            expect(carousel['leaveAnimationPlayer']).toBe(null);
+        });
     });
 
     describe('Dynamic Slides: ', () => {

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

@@ -737,8 +737,7 @@
         igx-time-picker {
             position: relative;
             height: calc(100% - #{$editing-outline-width * 2});
-            width: calc(100% - #{$editing-outline-width * 2}) !important;
-            inset-inline-start: $editing-outline-width;
+            width: 100% !important;
             overflow: hidden;
         }
 
@@ -1514,6 +1513,9 @@
     }
 
     %igx-grid__td--bool {
+        display: flex;
+        flex-grow: 1;
+
         igx-icon {
             --component-size: #{if($variant == 'indigo', 2, 1)};
         }
@@ -1783,7 +1785,6 @@
         padding-inline-end: rem(4px) !important;
 
         > igx-icon {
-            margin-inline-start: auto;
             color: color($color: 'error');
             width: var(--igx-icon-size, rem(18px));
             height: var(--igx-icon-size, rem(18px));
@@ -1889,11 +1890,10 @@
     %igx-grid__td--editing {
         background: var-get($theme, 'cell-editing-background') !important;
         box-shadow: inset 0 0 0 $editing-outline-width var-get($theme, 'edit-mode-color');
-        padding: 0 !important;
+        padding-inline: rem(4px);
 
         &.igx-grid__td--invalid {
             box-shadow: inset 0 0 0 rem(2px) color($color: 'error') !important;
-            padding-inline-end: rem(4px) !important;
         }
 
         &%grid-cell-number {
@@ -2084,7 +2084,7 @@
 
         .sort-icon {
             color: var-get($theme, 'header-selected-text-color');
-	        
+
             ::after {
                 background: var-get($theme, 'header-selected-background');
             }
@@ -2112,15 +2112,15 @@
         &%igx-grid-th--sorted {
             .sort-icon {
                 color: var-get($theme, 'header-selected-text-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
 
                 &:focus,
                 &:hover {
                     color: var-get($theme, 'header-selected-text-color');
-	                
+
 	                > igx-icon {
 		                color: inherit;
 	                }
@@ -2177,14 +2177,14 @@
         .sort-icon {
             opacity: 1;
             color: var-get($theme, 'sorted-header-icon-color');
-	        
+
 	        > igx-icon {
 		        color: inherit;
 	        }
 
             &:hover {
                 color: var-get($theme, 'sortable-header-icon-hover-color');
-	            
+
 	            > igx-icon {
 		            color: inherit;
 	            }
@@ -2220,6 +2220,7 @@
     %grid-cell-number {
         text-align: $grid-cell-align-num;
         justify-content: flex-end;
+        flex-grow: 1;
 
         %grid-cell-header-icons {
             justify-content: flex-start;

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

@@ -3780,7 +3780,7 @@ export abstract class IgxGridBaseDirective implements GridType,
 
         // notifier for column autosize requests
         this._autoSizeColumnsNotify.pipe(
-            throttleTime(0, animationFrameScheduler, { leading: false, trailing: true }),
+            throttleTime(0, this.platform.isBrowser ? animationFrameScheduler : undefined, { leading: false, trailing: true }),
             destructor
         )
             .subscribe(() => {
@@ -6136,7 +6136,7 @@ export abstract class IgxGridBaseDirective implements GridType,
      * @hidden @internal
      */
     public trackColumnChanges(_index, col) {
-        return col.field + col._calcWidth;
+        return col.field + col._calcWidth.toString();
     }
 
     /**

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

@@ -8,6 +8,7 @@
         <div
             igxTextHighlight class="igx-grid__td-text"
             [cssClass]="highlightClass"
+            [class.igx-grid__td--number]="column.dataType === 'number' || column.dataType === 'percent' || column.dataType === 'currency'"
             [activeCssClass]="activeHighlightClass"
             [groupName]="gridID"
             [value]="formatter ? (value | columnFormatter:formatter:rowData)
@@ -32,11 +33,13 @@
     }
 
     @if (column.dataType === 'boolean' && !this.formatter) {
+    <div [class.igx-grid__td--bool]="column.dataType === 'boolean'">
         <igx-icon
             family="default"
             [name]="value ? 'confirm' : 'close'"
             [ngClass]="{ 'igx-icon--success': value, 'igx-icon--error': !value }">
         </igx-icon>
+    </div>
     }
     @if (column.dataType === 'image') {
         <img [src]="value" [alt]="value | igxCellImageAlt" />

projects/igniteui-angular/src/lib/grids/grid/grid-validation.service.ts

@@ -36,6 +36,7 @@ export class IgxGridValidationService {
                 owner: this.grid
             };
             this.grid.formGroupCreated.emit(args);
+            formGroup.patchValue(data);
             this.add(rowId, formGroup);
         } else {
             // reset to pristine.

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

@@ -1685,6 +1685,33 @@ describe('Basic IgxHierarchicalGrid #hGrid', () => {
 
         });
 
+        it('should allow changing row islands runtime in nested child grid.', () => {
+            const row = hierarchicalGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(row.expander);
+            fixture.detectChanges();
+
+            let childGrid = hierarchicalGrid.gridAPI.getChildGrids()[0];
+            const childRow = childGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(childRow.expander);
+            fixture.detectChanges();
+
+            let hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
+            expect(hGrids.length).toBe(3);
+            expect(childGrid.gridAPI.getChildGrids().length).toBe(1);
+
+            fixture.componentInstance.toggleRINested = true;
+            fixture.detectChanges();
+
+            const nestedChildGrid = childGrid.gridAPI.getChildGrids()[0];
+            const nestedChildRow = nestedChildGrid.gridAPI.get_row_by_index(0) as IgxHierarchicalRowComponent;
+            UIInteractions.simulateClickAndSelectEvent(nestedChildRow.expander);
+            fixture.detectChanges();
+
+            hGrids = fixture.debugElement.queryAll(By.css('igx-hierarchical-grid'));
+            expect(hGrids.length).toBe(4);
+            expect(nestedChildGrid.gridAPI.getChildGrids().length).toBe(1);
+        });
+
         it(`Should apply template to both parent and child grids`, () => {
             const customFixture = TestBed.createComponent(IgxHierarchicalGridCustomRowEditOverlayComponent);
             customFixture.detectChanges();
@@ -2146,6 +2173,10 @@ export class IgxHierarchicalGridSizingComponent {
             <igx-row-island key="childData" [autoGenerate]="true">
                 @if (toggleChildRI) {
                     <igx-row-island key="childData" [autoGenerate]="true">
+                    @if (toggleRINested) {
+                        <igx-row-island [key]="'childData'" [autoGenerate]="true">
+                        </igx-row-island>
+                    }
                     </igx-row-island>
                 }
             </igx-row-island>
@@ -2156,6 +2187,7 @@ export class IgxHierarchicalGridSizingComponent {
 export class IgxHierarchicalGridToggleRIComponent  extends IgxHierarchicalGridTestBaseComponent {
 public toggleRI = true;
 public toggleChildRI = true;
+public toggleRINested = false;
 }
 
 @Component({

projects/igniteui-angular/src/lib/grids/hierarchical-grid/row-island.component.ts

@@ -422,7 +422,7 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
             .subscribe(() => {
                 this.updateChildren();
                 // update existing grids since their child ri have been changed.
-                this.getGridsForIsland(this.key).forEach(grid => {
+                this.rowIslandAPI.getChildGrids(false).forEach(grid => {
                     (grid as any).onRowIslandChange(this.children);
                 });
             });

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

@@ -47,6 +47,7 @@ import { IgxIconComponent } from "../../icon/icon.component";
 import { IgxInputGroupComponent } from "../../input-group/input-group.component";
 import { fadeIn, fadeOut } from 'igniteui-angular/animations';
 import { Size } from '../common/enums';
+import { GridColumnDataType } from '../../data-operations/data-util';
 
 interface IDataSelectorPanel {
     name: string;
@@ -541,8 +542,13 @@ export class IgxPivotDataSelectorComponent {
      * @internal
      */
     public onAggregationChange(event: ISelectionEventArgs) {
+
         if (!this.isSelected(event.newSelection.value)) {
             this.value.aggregate = event.newSelection.value;
+            const isSingleValue = this.grid.values.length === 1;
+
+            PivotUtil.updateColumnTypeByAggregator(this.grid.columns, this.value, isSingleValue);
+
             this.grid.pipeTrigger++;
             this.grid.cdr.markForCheck();
         }