Merge branch 'master' of https://github.com/IgniteUI/igniteui-angular into copilot/support-multiple-entry-points

Author: kdinev

projects/igniteui-angular/core/src/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!!!

projects/igniteui-angular/directives/src/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 'igniteui-angular/core';
 import { CancelableBrowserEventArgs, IBaseEventArgs, PlatformUtil } from 'igniteui-angular/core';
@@ -38,7 +37,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 {
     /**
@@ -163,13 +168,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;
@@ -180,7 +185,6 @@ export class IgxToggleDirective implements IToggleView, OnInit, OnDestroy {
     /**
      * @hidden
      */
-    @HostBinding('class.igx-toggle')
     public get defaultClass() {
         return !this.collapsed;
     }
@@ -228,6 +232,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/grids/src/grids/toolbar/grid-toolbar.base.ts

@@ -6,7 +6,7 @@ import { ColumnDisplayOrder } from '../common/enums';
 import { IColumnToggledEventArgs } from '../common/events';
 import { IgxColumnActionsComponent } from '../column-actions/column-actions.component';
 import { IgxToolbarToken } from './token';
-import { AbsoluteScrollStrategy, ConnectedPositioningStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core';
+import { AbsoluteScrollStrategy, AutoPositionStrategy, HorizontalAlignment, OverlaySettings, VerticalAlignment } from 'igniteui-angular/core';
 import { IgxToggleDirective, ToggleViewCancelableEventArgs, ToggleViewEventArgs } from 'igniteui-angular/directives';
 
 /* blazorInclude */
@@ -86,7 +86,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,