Merge branch '20.1.x' into sivanova/combo-theming-20.1.x

Author: SisIvanova

projects/igniteui-angular/src/lib/calendar/calendar.component.html

@@ -192,23 +192,25 @@ <h2 id="igx-aria-calendar-title-month" class="igx-calendar__header-date">
     (focus)="this.onWrapperFocus($event)"
     (blur)="this.onWrapperBlur($event)"
     >
-    <caption id="calendar-desc" tabindex="-1" class="igx-calendar__aria-off-screen">
-        @if (selection === 'multi') {
-            {{ monthsViewNumber && monthsViewNumber > 1 ?
-            resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :
-            resourceStrings.igx_calendar_singular_multi_selection}}
-        }
-        @if (selection === 'range') {
-            {{ monthsViewNumber && monthsViewNumber > 1 ?
-            resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :
-            resourceStrings.igx_calendar_singular_range_selection}}
-        }
-        @if (selection === 'single') {
-            {{ monthsViewNumber && monthsViewNumber > 1 ?
-            resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :
-            resourceStrings.igx_calendar_singular_single_selection}}
+    <div id="calendar-desc" tabindex="-1" class="igx-calendar__aria-off-screen">
+        @switch (selection) {
+            @case ('multi') {
+                {{ monthsViewNumber && monthsViewNumber > 1 ?
+                resourceStrings.igx_calendar_multi_selection.replace('{0}', monthsViewNumber.toString()) :
+                resourceStrings.igx_calendar_singular_multi_selection}}
+            }
+            @case ('range') {
+                {{ monthsViewNumber && monthsViewNumber > 1 ?
+                resourceStrings.igx_calendar_range_selection.replace('{0}', monthsViewNumber.toString()) :
+                resourceStrings.igx_calendar_singular_range_selection}}
+            }
+            @default {
+                {{ monthsViewNumber && monthsViewNumber > 1 ?
+                resourceStrings.igx_calendar_single_selection.replace('{0}', monthsViewNumber.toString()) :
+                resourceStrings.igx_calendar_singular_single_selection}}
+            }
         }
-    </caption>
+    </div>
     <section
         class="igx-calendar__pickers"
         [class.igx-calendar__pickers--days]="isDefaultView"

projects/igniteui-angular/src/lib/calendar/calendar.component.ts

@@ -439,7 +439,9 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
     @HostListener('mousedown', ['$event'])
     protected onMouseDown(event: MouseEvent) {
         event.stopPropagation();
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
 
     private _showActiveDay: boolean;
@@ -841,7 +843,9 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
 
 		if (this.platform.isActivationKey(event)) {
             this.viewDate = date;
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
 		}
 	}
 
@@ -850,6 +854,10 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
 	 * @internal
 	 */
     public onYearsViewClick(event: MouseEvent) {
+        if (!this.platform.isBrowser) {
+            return;
+        }
+
         const path = event.composed ? event.composedPath() : [event.target];
         const years = this.dacadeView.viewItems.toArray();
         const validTarget = years.some(year => path.includes(year.nativeElement));
@@ -997,7 +1005,9 @@ export class IgxCalendarComponent extends IgxCalendarBaseDirective implements Af
             this.activeViewIdx = activeViewIdx;
             this.viewDate = date;
 
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
 		}
 	}
 

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

@@ -1,17 +1,23 @@
-import { Injectable, ElementRef, NgZone } from "@angular/core";
+import { Injectable, ElementRef, NgZone, inject } from "@angular/core";
 import { EventManager } from "@angular/platform-browser";
+import { PlatformUtil } from "../core/utils";
 
 @Injectable()
 export class KeyboardNavigationService {
     private keyHandlers = new Map<string, (event: KeyboardEvent) => void>();
     private eventUnsubscribeFn: Function | null = null;
+    private platform = inject(PlatformUtil);
 
     constructor(
         private eventManager: EventManager,
         private ngZone: NgZone,
     ) {}
 
     public attachKeyboardHandlers(elementRef: ElementRef, context: any) {
+        if (!this.platform.isBrowser) {
+            return this;
+        }
+
         this.detachKeyboardHandlers(); // Clean up any existing listeners
 
         this.ngZone.runOutsideAngular(() => {

projects/igniteui-angular/src/lib/calendar/days-view/days-view.component.ts

@@ -349,7 +349,7 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
             });
         }
 
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
 

projects/igniteui-angular/src/lib/calendar/month-picker/month-picker.component.ts

@@ -152,7 +152,9 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
 
 		if (this.platform.isActivationKey(event)) {
             this.viewDate = date;
-            this.wrapper.nativeElement.focus();
+            if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+                this.wrapper.nativeElement.focus();
+            }
 		}
 	}
 
@@ -188,9 +190,13 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
     public override activeViewDecade() {
         super.activeViewDecade();
 
-        requestAnimationFrame(() => {
-            this.dacadeView.el.nativeElement.focus();
-        });
+        if (this.platform.isBrowser) {
+            requestAnimationFrame(() => {
+                if (this.dacadeView?.el?.nativeElement) {
+                    this.dacadeView.el.nativeElement.focus();
+                }
+            });
+        }
     }
 
     /**
@@ -221,7 +227,9 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
         );
 
         this.activeView = IgxCalendarView.Year;
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
 
     /**
@@ -279,7 +287,9 @@ export class IgxMonthPickerComponent extends IgxCalendarBaseDirective implements
     @HostListener('mousedown', ['$event'])
     protected onMouseDown(event: MouseEvent) {
         event.stopPropagation();
-        this.wrapper.nativeElement.focus();
+        if (this.platform.isBrowser && this.wrapper?.nativeElement) {
+            this.wrapper.nativeElement.focus();
+        }
     }
 
     private _showActiveDay: boolean;

projects/igniteui-angular/src/lib/calendar/months-view/months-view.component.ts

@@ -5,6 +5,7 @@ import {
     ElementRef,
     booleanAttribute,
     Inject,
+    inject,
 } from "@angular/core";
 import { IgxCalendarMonthDirective } from "../calendar.directives";
 import { TitleCasePipe } from "@angular/common";
@@ -16,6 +17,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { CalendarDay } from "../common/model";
 import type { DayInterval } from "../common/model";
 import { calendarRange } from "../common/helpers";
+import { PlatformUtil } from "../../core/utils";
 
 let NEXT_ID = 0;
 
@@ -37,6 +39,7 @@ let NEXT_ID = 0;
 })
 export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #standalone = true;
+    private platform = inject(PlatformUtil);
 
     /**
      * Sets/gets the `id` of the months view.
@@ -139,7 +142,7 @@ export class IgxMonthsViewComponent extends IgxCalendarViewDirective implements
      * @hidden
      */
     protected onMouseDown() {
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
     }

projects/igniteui-angular/src/lib/calendar/years-view/years-view.component.ts

@@ -4,6 +4,7 @@ import {
     HostBinding,
     ElementRef,
     Inject,
+    inject,
 } from "@angular/core";
 import { IgxCalendarYearDirective } from "../calendar.directives";
 import {
@@ -14,6 +15,7 @@ import { ControlValueAccessor, NG_VALUE_ACCESSOR } from "@angular/forms";
 import { CalendarDay } from "../common/model";
 import type { DayInterval } from "../common/model";
 import { calendarRange } from "../common/helpers";
+import { PlatformUtil } from "../../core/utils";
 
 @Component({
     providers: [
@@ -33,6 +35,7 @@ import { calendarRange } from "../common/helpers";
 })
 export class IgxYearsViewComponent extends IgxCalendarViewDirective implements ControlValueAccessor {
     #standalone = true;
+    private platform = inject(PlatformUtil);
 
     /**
      * The default css class applied to the component.
@@ -158,7 +161,7 @@ export class IgxYearsViewComponent extends IgxCalendarViewDirective implements C
      * @hidden
      */
     protected onMouseDown() {
-        if (this.tabIndex !== -1) {
+        if (this.tabIndex !== -1 && this.platform.isBrowser && this.el?.nativeElement) {
             this.el.nativeElement.focus();
         }
     }

projects/igniteui-angular/src/lib/directives/button/button-base.ts

@@ -8,7 +8,7 @@ import {
     Output,
     booleanAttribute,
     inject,
-    afterRenderEffect,
+    AfterViewInit,
 } from '@angular/core';
 import { PlatformUtil } from '../../core/utils';
 
@@ -20,8 +20,9 @@ export const IgxBaseButtonType = {
 
 
 @Directive()
-export abstract class IgxButtonBaseDirective {
+export abstract class IgxButtonBaseDirective implements AfterViewInit{
     private _platformUtil = inject(PlatformUtil);
+    private _viewInit = false;
 
     /**
      * Emitted when the button is clicked.
@@ -101,15 +102,16 @@ export abstract class IgxButtonBaseDirective {
         // In SSR there is no paint, so there’s no visual rendering or transitions to suppress.
         // Fix style flickering https://github.com/IgniteUI/igniteui-angular/issues/14759
         if (this._platformUtil.isBrowser) {
-            afterRenderEffect({
-                write: () => {
-                    this.element.nativeElement.style.setProperty('--_init-transition', '0s');
-                },
-                read: () => {
-                    requestAnimationFrame(() => {
-                        this.element.nativeElement.style.removeProperty('--_init-transition');
-                    });
-                }
+            this.element.nativeElement.style.setProperty('--_init-transition', '0s');
+        }
+    }
+
+    public ngAfterViewInit(): void {
+        if (this._platformUtil.isBrowser && !this._viewInit) {
+            this._viewInit = true;
+
+            requestAnimationFrame(() => {
+                this.element.nativeElement.style.removeProperty('--_init-transition');
             });
         }
     }

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

@@ -4106,7 +4106,10 @@ export abstract class IgxGridBaseDirective implements GridType,
             return this._activeRowIndexes;
         } else {
             const activeRow = this.navigation.activeNode?.row;
-            const selectedCellIndexes = (this.selectionService.selection?.keys() as any)?.toArray();
+
+            const selectedCellIndexes = this.selectionService.selection
+                ? Array.from(this.selectionService.selection.keys())
+                : [];
             this._activeRowIndexes = [activeRow, ...selectedCellIndexes];
             return this._activeRowIndexes;
         }

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

@@ -6580,27 +6580,24 @@ describe('IgxGrid - Filtering actions - Excel style filtering #grid', () => {
 
             // Scroll the search list to the bottom.
             let scrollbar = GridFunctions.getExcelStyleSearchComponentScrollbar(fix);
+            expect(scrollbar.scrollTop).toBe(0);
+            let listItems = GridFunctions.getExcelStyleSearchComponentListItems(fix);
+            expect(listItems[0].innerText).toBe('Select All');
+
             scrollbar.scrollTop = 3000;
             await wait();
             fix.detectChanges();
+            expect(listItems[0].innerText).not.toBe('Select All');
+            expect(scrollbar.scrollTop).toBeGreaterThan(300);
 
             // Select another column
             GridFunctions.clickExcelFilterIcon(fix, 'Downloads');
             await wait();
             fix.detectChanges();
 
             // Update scrollbar
-            const searchComponent = GridFunctions.getExcelStyleSearchComponent(fix);
             scrollbar = GridFunctions.getExcelStyleSearchComponentScrollbar(fix);
-            await wait();
-            fix.detectChanges();
-
-            // Get the display container and its parent and verify that the display container is at start
-            const displayContainer = searchComponent.querySelector('igx-display-container');
-            const displayContainerRect = displayContainer.getBoundingClientRect();
-            const parentContainerRect = displayContainer.parentElement.getBoundingClientRect();
-
-            expect(displayContainerRect.top - parentContainerRect.top <= 1).toBe(true, 'search scrollbar did not reset');
+            expect(scrollbar.scrollTop).toBe(0, 'search scrollbar did not reset');
         });
     });