Merge branch '19.2.x' into mkirkova/fix-16262-19.2.x

Author: kacheshmarova

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

@@ -3,14 +3,13 @@ import {
     Directive,
     ElementRef,
     EventEmitter,
-    HostBinding,
     HostListener,
     Inject,
     Input,
     OnDestroy,
     OnInit,
     Optional,
-    Output
+    Output,
 } from '@angular/core';
 import { AbsoluteScrollStrategy } from '../../services/overlay/scroll/absolute-scroll-strategy';
 import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from '../../core/utils';
@@ -34,7 +33,13 @@ export interface ToggleViewCancelableEventArgs extends ToggleViewEventArgs, Canc
 @Directive({
     exportAs: 'toggle',
     selector: '[igxToggle]',
-    standalone: true
+    standalone: true,
+    host: {
+        '[class.igx-toggle--hidden]': 'hiddenClass',
+        '[attr.aria-hidden]': 'hiddenClass',
+        '[class.igx-toggle--hidden-webkit]': 'hiddenWebkitClass',
+        '[class.igx-toggle]': 'defaultClass'
+    }
 })
 export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
@@ -159,13 +164,13 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
      * @hidden
      */
-    @HostBinding('class.igx-toggle--hidden')
-    @HostBinding('attr.aria-hidden')
     public get hiddenClass() {
         return this.collapsed;
     }
 
-    @HostBinding('class.igx-toggle--hidden-webkit')
+    /**
+     * @hidden
+     */
     public get hiddenWebkitClass() {
         const isSafari = this.platform?.isSafari;
         const browserVersion = this.platform?.browserVersion;
@@ -176,7 +181,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
      * @hidden
      */
-    @HostBinding('class.igx-toggle')
     public get defaultClass() {
         return !this.collapsed;
     }
@@ -224,6 +228,16 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
         }
 
         this._collapsed = false;
+
+        // TODO: this is a workaround for the issue introduced by Angular's with Ivy renderer.
+        // When calling detectChanges(), Angular marks the element for check, but does not update the classes
+        // immediately, which causes the overlay to calculate incorrect dimensions of target element.
+        // Overlay show should be called in the next tick to ensure the classes are updated and target element is measured correctly.
+        // Note: across the codebase, each host binding should be checked and similar fix applied if needed!!!
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden', 'igx-toggle');
+        this.elementRef.nativeElement.className = this.elementRef.nativeElement.className.replace('igx-toggle--hidden-webkit', 'igx-toggle');
+        this.elementRef.nativeElement.removeAttribute('aria-hidden');
+
         this.cdr.detectChanges();
 
         if (!info) {

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

@@ -139,10 +139,10 @@ export class IgxRowIslandComponent extends IgxHierarchicalGridBaseDirective
     @ContentChildren(IgxColumnComponent, { read: IgxColumnComponent, descendants: false })
     public childColumns = new QueryList<IgxColumnComponent>();
 
-    @ContentChild(IgxGridToolbarDirective, { read: TemplateRef })
+    @ContentChild(IgxGridToolbarDirective, { read: TemplateRef, descendants: false })
     protected toolbarDirectiveTemplate: TemplateRef<IgxGridToolbarTemplateContext>;
 
-    @ContentChild(IgxPaginatorDirective, { read: TemplateRef })
+    @ContentChild(IgxPaginatorDirective, { read: TemplateRef, descendants: false })
     protected paginatorDirectiveTemplate: TemplateRef<any>;
 
     /* csSuppress */

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

@@ -807,6 +807,22 @@ describe('IgxPivotGrid #pivotGrid', () => {
             expect(pivotGrid.nativeElement.clientWidth - expectedSize).toBeLessThan(50, "should take sum of columns as width.");
         });
 
+        it('should render cell values for dimension columns containing dots - issue #16445', () => {
+            let data = fixture.componentInstance.data;
+            data = data.map(item => {
+                return {
+                    ...item,
+                    Country: `${item['Country']}.Test`
+                };
+            });
+
+            fixture.componentInstance.data = [...data];
+            fixture.detectChanges();
+
+            const cell = fixture.componentInstance.pivotGrid.gridAPI.get_cell_by_index(0, 'Bulgaria.Test-UnitsSold');
+            expect(cell.value).not.toBeUndefined();
+        });
+
         describe('IgxPivotGrid Features #pivotGrid', () => {
             it('should show excel style filtering via dimension chip.', async () => {
                 const pivotGrid = fixture.componentInstance.pivotGrid;

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

@@ -14,7 +14,7 @@
         [rowData]="data" [columnData]='getColumnData(col)'
         [style.min-width]="col.resolvedWidth" [style.max-width]="col.resolvedWidth"
         [style.flex-basis]="col.resolvedWidth" [width]="col.getCellWidth()" [visibleColumnIndex]="col.visibleIndex"
-        [value]="pivotAggregationData[col.field] | dataMapper:col.field:grid.pipeTrigger:pivotAggregationData[col.field]:col.hasNestedPath"
+        [value]="pivotAggregationData[col.field]"
         [cellTemplate]="col.bodyTemplate" [lastSearchInfo]="grid.lastSearchInfo"
         [cellSelectionMode]="grid.cellSelection" [displayPinnedChip]="shouldDisplayPinnedChip(col.visibleIndex)"
         (pointerdown)="grid.navigation.focusOutRowHeader($event)">

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

@@ -13,7 +13,7 @@ import { IgxGridSelectionService } from '../selection/selection.service';
 import { IPivotGridColumn, IPivotGridRecord } from './pivot-grid.interface';
 import { PivotUtil } from './pivot-util';
 import { IgxPivotGridCellStyleClassesPipe } from './pivot-grid.pipes';
-import { IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe } from '../common/pipes';
+import { IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridTransactionStatePipe } from '../common/pipes';
 import { IgxCheckboxComponent } from '../../checkbox/checkbox.component';
 import { NgClass, NgStyle } from '@angular/common';
 import { IgxGridCellComponent } from '../cell.component';
@@ -24,7 +24,7 @@ import { IgxGridForOfDirective } from '../../directives/for-of/for_of.directive'
     selector: 'igx-pivot-row',
     templateUrl: './pivot-row.component.html',
     providers: [{ provide: IgxRowDirective, useExisting: forwardRef(() => IgxPivotRowComponent) }],
-    imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridDataMapperPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe]
+    imports: [IgxGridForOfDirective, IgxGridCellComponent, NgClass, NgStyle, IgxCheckboxComponent, IgxGridNotGroupedPipe, IgxGridCellStylesPipe, IgxGridTransactionStatePipe, IgxPivotGridCellStyleClassesPipe]
 })
 export class IgxPivotRowComponent extends IgxRowDirective {
     /**

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

@@ -9,7 +9,7 @@ import { IgxColumnActionsComponent } from '../column-actions/column-actions.comp
 import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from '../../directives/toggle/toggle.directive';
 import { HorizontalAlignment, OverlaySettings, VerticalAlignment } from '../../services/overlay/utilities';
 import { IgxToolbarToken } from './token';
-import { ConnectedPositioningStrategy } from '../../services/overlay/position/connected-positioning-strategy';
+import { AutoPositionStrategy } from '../../services/overlay/position/auto-position-strategy';
 
 /* blazorInclude */
 /* blazorElement */
@@ -88,7 +88,7 @@ export abstract class BaseToolbarDirective implements OnDestroy {
     private $sub: Subscription;
 
     private _overlaySettings: OverlaySettings = {
-        positionStrategy: new ConnectedPositioningStrategy({
+        positionStrategy: new AutoPositionStrategy({
             horizontalDirection: HorizontalAlignment.Left,
             horizontalStartPoint: HorizontalAlignment.Right,
             verticalDirection: VerticalAlignment.Bottom,

projects/igniteui-angular/src/lib/services/overlay/overlay.ts

@@ -431,12 +431,18 @@ export class IgxOverlayService implements OnDestroy {
             }
         }
         this.updateSize(info);
+        const openAnimation = info.settings.positionStrategy.settings.openAnimation;
+        const closeAnimation = info.settings.positionStrategy.settings.closeAnimation;
         info.settings.positionStrategy.position(
             info.elementRef.nativeElement.parentElement,
             { width: info.initialSize.width, height: info.initialSize.height },
             this._document,
             true,
             info.settings.target);
+        if (openAnimation !== info.settings.positionStrategy.settings.openAnimation ||
+            closeAnimation !== info.settings.positionStrategy.settings.closeAnimation){
+                this.buildAnimationPlayers(info);
+            }
         this.addModalClasses(info);
         if (info.settings.positionStrategy.settings.openAnimation) {
             // TODO: should we build players again. This was already done in attach!!!