Merge branch 'master' into chore()-update-roadmap-4-nov-25

Author: kdinev

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;
-            }
-        }
-    }
 }

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))};
         }
 

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,

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');
         }

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();
 

projects/igniteui-angular/src/lib/core/styles/components/tooltip/_tooltip-theme.scss

@@ -23,7 +23,7 @@
         gap: rem(8px);
         min-height: rem(24px);
         min-width: rem(24px);
-        max-width: 200px;
+        max-width: rem(200px);
         width: fit-content;
 
         igx-icon {
@@ -34,6 +34,10 @@
             display: flex;
             cursor: default;
         }
+
+        &:not([data-default]) {
+            max-width: initial;
+        }
     }
 
     %arrow--top {

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/directives/tooltip/tooltip.component.html

@@ -1 +1 @@
-<span igxTooltip>{{content}}</span>
+<span data-default igxTooltip>{{content}}</span>

projects/igniteui-angular/src/lib/directives/tooltip/tooltip.directive.spec.ts

@@ -2,7 +2,7 @@ import { DebugElement } from '@angular/core';
 import { fakeAsync, TestBed, tick, flush, waitForAsync, ComponentFixture } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent, IgxTooltipWithCloseButtonComponent } from '../../test-utils/tooltip-components.spec';
+import { IgxTooltipSingleTargetComponent, IgxTooltipMultipleTargetsComponent, IgxTooltipPlainStringComponent, IgxTooltipWithToggleActionComponent, IgxTooltipMultipleTooltipsComponent, IgxTooltipWithCloseButtonComponent, IgxTooltipWithNestedContentComponent } from '../../test-utils/tooltip-components.spec';
 import { UIInteractions } from '../../test-utils/ui-interactions.spec';
 import { HorizontalAlignment, VerticalAlignment, AutoPositionStrategy } from '../../services/public_api';
 import { IgxTooltipDirective } from './tooltip.directive';
@@ -28,7 +28,8 @@ describe('IgxTooltip', () => {
                 IgxTooltipMultipleTargetsComponent,
                 IgxTooltipPlainStringComponent,
                 IgxTooltipWithToggleActionComponent,
-                IgxTooltipWithCloseButtonComponent
+                IgxTooltipWithCloseButtonComponent,
+                IgxTooltipWithNestedContentComponent
             ]
         }).compileComponents();
         UIInteractions.clearOverlay();
@@ -500,6 +501,36 @@ describe('IgxTooltip', () => {
 
             verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, false);
         }));
+
+        it('Should respect default max-width constraint for plain string tooltip', fakeAsync(() => {
+            hoverElement(button);
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+
+            const maxWidth = getComputedStyle(tooltipNativeElement).maxWidth;
+            expect(maxWidth).toBe('200px');
+        }));
+    });
+
+    describe('Custom content tooltip', () => {
+        beforeEach(waitForAsync(() => {
+            fix = TestBed.createComponent(IgxTooltipWithNestedContentComponent);
+            fix.detectChanges();
+            button = fix.debugElement.query(By.directive(IgxTooltipTargetDirective));
+            tooltipTarget = fix.componentInstance.tooltipTarget;
+            tooltipNativeElement = fix.debugElement.query(By.directive(IgxTooltipDirective)).nativeElement;
+        }));
+
+        it('Should not have max-width constraint for custom content tooltip', fakeAsync(() => {
+            hoverElement(button);
+            flush();
+
+            verifyTooltipVisibility(tooltipNativeElement, tooltipTarget, true);
+
+            const maxWidth = getComputedStyle(tooltipNativeElement).maxWidth;
+            expect(maxWidth).toBe('none');
+        }));
     });
 
     describe('Multiple targets with single tooltip', () => {

projects/igniteui-angular/src/lib/grids/columns/column.component.ts

@@ -1066,6 +1066,7 @@ export class IgxColumnComponent implements AfterContentInit, OnDestroy, ColumnTy
         return (this.grid as any)._columns.indexOf(this);
     }
 
+    /* mustCoerceToInt */
     /**
      * Gets the pinning position of the column.
      * ```typescript