fix(calendar): address SSR issues

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