Merge branch 'master' into rivanova/tooltip-show-hide-triggers

RivaIvanova · web-flow · commit 437e47ed2212 · 2025-11-13T10:06:59.000+02:00
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/combo/_combo-theme.scss
@@ -210,12 +210,24 @@
             color: var-get($theme, 'clear-button-foreground-focus');
             background: var-get($theme, 'clear-button-background-focus');
         }
+
+        &%form-group-bundle--border {
+            %igx-combo__toggle-button {
+                background: var-get($theme, 'toggle-button-background-focus--border');
+            }
+        }
     }
 
     @if $variant == 'indigo' {
         %form-group-bundle:not(%form-group-bundle--disabled):hover {
             %igx-combo__toggle-button {
                 color: var-get($theme, 'toggle-button-foreground-focus');
+                background: var-get($theme, 'toggle-button-background-focus');
+            }
+
+            %igx-combo__clear-button {
+                color: var-get($theme, 'clear-button-foreground-focus');
+                background: var-get($theme, 'clear-button-background-focus');
             }
         }
     }
@@ -224,6 +236,14 @@
         %igx-combo__toggle-button {
             color: var-get($theme, 'toggle-button-foreground-filled');
         }
+
+        @if $variant == 'material' {
+            &.igx-input-group--focused {
+                %igx-combo__toggle-button {
+                    color: var-get($theme, 'toggle-button-foreground-filled');
+                }
+            }
+        }
     }
 
     .igx-input-group--focused {
@@ -254,14 +274,6 @@
         }
     }
 
-    //.igx-input-group:not(.igx-input-group--box) {
-    //    %igx-combo__toggle-button:focus {
-    //        @if $variant == 'material' {
-    //            background: var-get($theme, 'toggle-button-background-focus--border');
-    //        }
-    //    }
-    //}
-
     .igx-input-group--disabled {
         %igx-combo__toggle-button {
             background: var-get($theme, 'toggle-button-background-disabled') !important;
@@ -274,12 +286,4 @@
             }
         }
     }
-
-    %form-group-bundle {
-        &:hover {
-            %igx-combo__clear-button {
-                color: inherit;
-            }
-        }
-    }
 }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/list/_list-theme.scss
@@ -229,7 +229,8 @@
             display: none;
         }
 
-        > * {
+        > *,
+        [class^='igx'] {
             --component-size: #{if($variant == 'indigo', 2, var(--list-size))};
         }
 
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/navbar/_navbar-theme.scss
@@ -38,6 +38,11 @@
             igx-input-group {
                 --ig-size: 1;
             }
+
+            .igx-icon-button,
+            igc-icon-button {
+                --ig-size: 2;
+            }
         }
 
         @if $variant == 'bootstrap' {
@@ -114,30 +119,27 @@
 
         igx-icon,
         igc-icon {
-            --component-size: 3;
+            --component-size: #{if($variant == 'indigo', 2, 3)};
 
             cursor: pointer;
             user-select: none;
             transition: color .15s $out-quad;
+
+            @if $variant == 'indigo' {
+                width: auto;
+                height: auto;
+                padding: rem(6px);
+            }
         }
 
-        >igx-icon,
-        >igc-icon {
+        > igx-icon,
+        > igc-icon {
             color: var-get($theme, 'idle-icon-color');
 
             &:hover {
                 color: var-get($theme, 'hover-icon-color');
             }
         }
-
-        @if $variant == 'indigo' {
-            igx-icon,
-            igc-icon {
-                --component-size: 2;
-
-                margin-inline: rem(6px);
-            }
-        }
     }
 
     igx-navbar-action,
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/select/_select-theme.scss
@@ -55,7 +55,7 @@
 
     .igx-input-group.igx-input-group--disabled.igx-input-group--filled,
     .igx-input-group.igx-input-group--disabled {
-        %igx-select__toggle-button {
+        %form-group-bundle %igx-select__toggle-button {
             background: var-get($theme, 'toggle-button-background-disabled');
             color: var-get($theme, 'toggle-button-foreground-disabled');
         }
diff --git a/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss b/projects/igniteui-angular/src/lib/core/styles/components/time-picker/_time-picker-theme.scss
@@ -23,21 +23,6 @@
         'indigo': rem(16px),
     ), $variant);
 
-    .igx-input-group {
-        display: flex;
-        flex-direction: column;
-
-        @if $variant == 'indigo' or $variant == 'bootstrap' {
-            [igxLabel] {
-                margin-block-end: rem(4px);
-            }
-        } @else if $variant == 'fluent' {
-            [igxLabel] {
-                margin-block-end: rem(5px);
-            }
-        }
-    }
-
     %time-picker-display {
         @include sizable();
 
diff --git a/projects/igniteui-angular/src/lib/directives/toggle/toggle.directive.ts b/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) {
diff --git a/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts b/projects/igniteui-angular/src/lib/grids/grid/grid.component.ts
@@ -415,7 +415,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,
             this.validation.updateAll(this._data);
         }
 
-        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {
+        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {
             this.setupColumns();
         }
 
diff --git a/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts b/projects/igniteui-angular/src/lib/grids/hierarchical-grid/hierarchical-grid.component.ts
@@ -868,7 +868,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti
         if (!this._init) {
             this.validation.updateAll(this._data);
         }
-        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {
+        if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {
             this.setupColumns();
             this.reflow();
         }
diff --git a/projects/igniteui-angular/src/lib/grids/toolbar/grid-toolbar.base.ts b/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,
diff --git a/projects/igniteui-angular/src/lib/services/overlay/overlay.ts b/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!!!

Original file line number	Diff line number	Diff line change
`@@ -210,12 +210,24 @@`
`210`	`210`	`color: var-get($theme, 'clear-button-foreground-focus');`
`211`	`211`	`background: var-get($theme, 'clear-button-background-focus');`
`212`	`212`	`}`
	`213`	`+`
	`214`	`+ &%form-group-bundle--border {`
	`215`	`+ %igx-combo__toggle-button {`
	`216`	`+ background: var-get($theme, 'toggle-button-background-focus--border');`
	`217`	`+ }`
	`218`	`+ }`
`213`	`219`	`}`
`214`	`220`
`215`	`221`	`@if $variant == 'indigo' {`
`216`	`222`	`%form-group-bundle:not(%form-group-bundle--disabled):hover {`
`217`	`223`	`%igx-combo__toggle-button {`
`218`	`224`	`color: var-get($theme, 'toggle-button-foreground-focus');`
	`225`	`+ background: var-get($theme, 'toggle-button-background-focus');`
	`226`	`+ }`
	`227`	`+`
	`228`	`+ %igx-combo__clear-button {`
	`229`	`+ color: var-get($theme, 'clear-button-foreground-focus');`
	`230`	`+ background: var-get($theme, 'clear-button-background-focus');`
`219`	`231`	`}`
`220`	`232`	`}`
`221`	`233`	`}`
`@@ -224,6 +236,14 @@`
`224`	`236`	`%igx-combo__toggle-button {`
`225`	`237`	`color: var-get($theme, 'toggle-button-foreground-filled');`
`226`	`238`	`}`
	`239`	`+`
	`240`	`+ @if $variant == 'material' {`
	`241`	`+ &.igx-input-group--focused {`
	`242`	`+ %igx-combo__toggle-button {`
	`243`	`+ color: var-get($theme, 'toggle-button-foreground-filled');`
	`244`	`+ }`
	`245`	`+ }`
	`246`	`+ }`
`227`	`247`	`}`
`228`	`248`
`229`	`249`	`.igx-input-group--focused {`
`@@ -254,14 +274,6 @@`
`254`	`274`	`}`
`255`	`275`	`}`
`256`	`276`
`257`		`- //.igx-input-group:not(.igx-input-group--box) {`
`258`		`- // %igx-combo__toggle-button:focus {`
`259`		`- // @if $variant == 'material' {`
`260`		`- // background: var-get($theme, 'toggle-button-background-focus--border');`
`261`		`- // }`
`262`		`- // }`
`263`		`- //}`
`264`		`-`
`265`	`277`	`.igx-input-group--disabled {`
`266`	`278`	`%igx-combo__toggle-button {`
`267`	`279`	`background: var-get($theme, 'toggle-button-background-disabled') !important;`
`@@ -274,12 +286,4 @@`
`274`	`286`	`}`
`275`	`287`	`}`
`276`	`288`	`}`
`277`		`-`
`278`		`- %form-group-bundle {`
`279`		`- &:hover {`
`280`		`- %igx-combo__clear-button {`
`281`		`- color: inherit;`
`282`		`- }`
`283`		`- }`
`284`		`- }`
`285`	`289`	`}`
Original file line number	Diff line number	Diff line change
`@@ -229,7 +229,8 @@`
`229`	`229`	`display: none;`
`230`	`230`	`}`
`231`	`231`
`232`		`- > * {`
	`232`	`+ > *,`
	`233`	`+ [class^='igx'] {`
`233`	`234`	`--component-size: #{if($variant == 'indigo', 2, var(--list-size))};`
`234`	`235`	`}`
`235`	`236`
Original file line number	Diff line number	Diff line change
`@@ -55,7 +55,7 @@`
`55`	`55`
`56`	`56`	`.igx-input-group.igx-input-group--disabled.igx-input-group--filled,`
`57`	`57`	`.igx-input-group.igx-input-group--disabled {`
`58`		`- %igx-select__toggle-button {`
	`58`	`+ %form-group-bundle %igx-select__toggle-button {`
`59`	`59`	`background: var-get($theme, 'toggle-button-background-disabled');`
`60`	`60`	`color: var-get($theme, 'toggle-button-foreground-disabled');`
`61`	`61`	`}`
Original file line number	Diff line number	Diff line change
`@@ -415,7 +415,7 @@ export class IgxGridComponent extends IgxGridBaseDirective implements GridType,`
`415`	`415`	`this.validation.updateAll(this._data);`
`416`	`416`	`}`
`417`	`417`
`418`		`- if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {`
	`418`	`+ if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {`
`419`	`419`	`this.setupColumns();`
`420`	`420`	`}`
`421`	`421`
Original file line number	Diff line number	Diff line change
`@@ -868,7 +868,7 @@ export class IgxHierarchicalGridComponent extends IgxHierarchicalGridBaseDirecti`
`868`	`868`	`if (!this._init) {`
`869`	`869`	`this.validation.updateAll(this._data);`
`870`	`870`	`}`
`871`		`- if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data)) {`
	`871`	`+ if (this.autoGenerate && this._data.length > 0 && this.shouldRecreateColumns(oldData, this._data) && this.gridAPI.grid) {`
`872`	`872`	`this.setupColumns();`
`873`	`873`	`this.reflow();`
`874`	`874`	`}`