fix(calendar): fix material and indigo theme styles to match webC (#16543)

Co-authored-by: desig9stein <mspopovv@gmail.com>

Author: simeonoff

angular.json

@@ -311,8 +311,8 @@
                 {
                   "type": "bundle",
                   "name": "styles",
-                  "maximumWarning": "500kb",
-                  "maximumError": "550kb"
+                  "maximumWarning": "600kb",
+                  "maximumError": "600kb"
                 },
                 {
                   "type": "anyComponentStyle",

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

@@ -1,11 +1,42 @@
-import { Component, Output, EventEmitter, Input, HostListener, ViewChildren, QueryList, HostBinding, booleanAttribute, ElementRef, ChangeDetectorRef, ChangeDetectionStrategy, inject } from '@angular/core';
+import {
+    Component,
+    Output,
+    EventEmitter,
+    Input,
+    HostListener,
+    ViewChildren,
+    QueryList,
+    HostBinding,
+    booleanAttribute,
+    ElementRef,
+    ChangeDetectorRef,
+    ChangeDetectionStrategy,
+    inject,
+    DestroyRef,
+    AfterContentChecked
+} from '@angular/core';
 import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { TitleCasePipe } from '@angular/common';
 import { CalendarSelection, ScrollDirection } from '../../calendar/calendar';
 import { IgxDayItemComponent } from './day-item.component';
-import { CalendarDay, DateRangeType, areSameMonth, generateMonth, getClosestActiveDate, getNextActiveDate, getPreviousActiveDate, intoChunks, isDateInRanges } from 'igniteui-angular/core';
+import {
+    CalendarDay,
+    DateRangeType,
+    areSameMonth,
+    generateMonth,
+    getClosestActiveDate,
+    getNextActiveDate,
+    getPreviousActiveDate,
+    intoChunks,
+    isDateInRanges,
+    getComponentTheme,
+    IgxTheme,
+    THEME_TOKEN,
+    ThemeToken
+} from 'igniteui-angular/core';
 import { IgxCalendarBaseDirective } from '../calendar-base';
 import { IViewChangingEventArgs } from './days-view.interface';
+import { KeyboardNavigationService } from '../calendar.services';
 
 let NEXT_ID = 0;
 
@@ -16,16 +47,17 @@ let NEXT_ID = 0;
             provide: NG_VALUE_ACCESSOR,
             useExisting: IgxDaysViewComponent
         },
+        KeyboardNavigationService
     ],
     selector: 'igx-days-view',
     templateUrl: 'days-view.component.html',
     changeDetection: ChangeDetectionStrategy.OnPush,
     imports: [IgxDayItemComponent, TitleCasePipe]
 })
-export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
+export class IgxDaysViewComponent extends IgxCalendarBaseDirective implements AfterContentChecked {
     protected el = inject(ElementRef);
     public override cdr = inject(ChangeDetectorRef);
-
+    private themeToken: ThemeToken = inject(THEME_TOKEN);
     #standalone = true;
 
     /**
@@ -175,6 +207,66 @@ export class IgxDaysViewComponent extends IgxCalendarBaseDirective {
     private _hideTrailingDays: boolean;
     private _showActiveDay: boolean;
 
+    private _destroyRef = inject(DestroyRef);
+    private _theme: IgxTheme;
+
+    @HostBinding('class.igx-days-view')
+    public defaultClass = true;
+
+    // Theme-specific classes
+    @HostBinding('class.igx-days-view--material')
+    protected get isMaterial(): boolean {
+        return this._theme === 'material';
+    }
+
+    @HostBinding('class.igx-days-view--fluent')
+    protected get isFluent(): boolean {
+        return this._theme === 'fluent';
+    }
+
+    @HostBinding('class.igx-days-view--bootstrap')
+    protected get isBootstrap(): boolean {
+        return this._theme === 'bootstrap';
+    }
+
+    @HostBinding('class.igx-days-view--indigo')
+    protected get isIndigo(): boolean {
+        return this._theme === 'indigo';
+    }
+
+    /**
+     * @hidden
+     */
+    constructor() {
+        super();
+        this._theme = this.themeToken.theme;
+
+        const themeChange = this.themeToken.onChange((theme) => {
+            if (this._theme !== theme) {
+                this._theme = theme;
+                this.cdr.detectChanges();
+            }
+        });
+
+        this._destroyRef.onDestroy(() => themeChange.unsubscribe());
+    }
+
+    private setComponentTheme() {
+        // allow DOM theme override (same pattern as input-group)
+        if (!this.themeToken.preferToken) {
+            const theme = getComponentTheme(this.el.nativeElement);
+
+            if (theme && theme !== this._theme) {
+                this._theme = theme;
+                this.cdr.markForCheck();
+            }
+        }
+    }
+
+    public ngAfterContentChecked() {
+        this.setComponentTheme();
+    }
+
     /**
      * @hidden
      */