Skip to content

Commit 7fe3081

Browse files
committed
fix(material/datepicker): drop dependency on NgClass (#32810)
Drops the dependency on `NgClass` from the datepicker in favor of a direct `class` binding. (cherry picked from commit 0d36e86)
1 parent ef2f1cb commit 7fe3081

File tree

3 files changed

+9
-10
lines changed

3 files changed

+9
-10
lines changed

goldens/material/datepicker/index.api.md

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -229,7 +229,7 @@ export class MatCalendarCell<D = any> {
229229
// (undocumented)
230230
compareValue: number;
231231
// (undocumented)
232-
cssClasses: MatCalendarCellCssClasses;
232+
readonly cssClasses: string | string[] | Record<string, any> | undefined;
233233
// (undocumented)
234234
displayValue: string;
235235
// (undocumented)
@@ -246,9 +246,7 @@ export class MatCalendarCell<D = any> {
246246
export type MatCalendarCellClassFunction<D> = (date: D, view: 'month' | 'year' | 'multi-year') => MatCalendarCellCssClasses;
247247

248248
// @public
249-
export type MatCalendarCellCssClasses = string | string[] | Set<string> | {
250-
[key: string]: any;
251-
};
249+
export type MatCalendarCellCssClasses = string | string[] | Set<string> | Record<string, any>;
252250

253251
// @public
254252
export class MatCalendarHeader<D> {

src/material/datepicker/calendar-body.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
<button
5050
type="button"
5151
class="mat-calendar-body-cell"
52-
[ngClass]="item.cssClasses"
52+
[class]="item.cssClasses"
5353
[tabindex]="_isActiveCell(rowIndex, colIndex) ? 0 : -1"
5454
[class.mat-calendar-body-disabled]="!item.enabled"
5555
[class.mat-calendar-body-active]="_isActiveCell(rowIndex, colIndex)"

src/material/datepicker/calendar-body.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,12 @@ import {
2626
Renderer2,
2727
} from '@angular/core';
2828
import {_IdGenerator} from '@angular/cdk/a11y';
29-
import {NgClass} from '@angular/common';
3029
import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
3130
import {_StructuralStylesLoader} from '../core';
3231
import {MatDatepickerIntl} from './datepicker-intl';
3332

3433
/** Extra CSS classes that can be associated with a calendar cell. */
35-
export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
34+
export type MatCalendarCellCssClasses = string | string[] | Set<string> | Record<string, any>;
3635

3736
/** Function that can generate the extra classes that should be added to a calendar cell. */
3837
export type MatCalendarCellClassFunction<D> = (
@@ -48,16 +47,19 @@ let uniqueIdCounter = 0;
4847
*/
4948
export class MatCalendarCell<D = any> {
5049
readonly id = uniqueIdCounter++;
50+
readonly cssClasses: string | string[] | Record<string, any> | undefined;
5151

5252
constructor(
5353
public value: number,
5454
public displayValue: string,
5555
public ariaLabel: string,
5656
public enabled: boolean,
57-
public cssClasses: MatCalendarCellCssClasses = {},
57+
cssClasses?: MatCalendarCellCssClasses,
5858
public compareValue = value,
5959
public rawValue?: D,
60-
) {}
60+
) {
61+
this.cssClasses = cssClasses instanceof Set ? Array.from(cssClasses) : cssClasses;
62+
}
6163
}
6264

6365
/** Event emitted when a date inside the calendar is triggered as a result of a user action. */
@@ -95,7 +97,6 @@ const passiveEventOptions = {passive: true};
9597
exportAs: 'matCalendarBody',
9698
encapsulation: ViewEncapsulation.None,
9799
changeDetection: ChangeDetectionStrategy.OnPush,
98-
imports: [NgClass],
99100
})
100101
export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterViewChecked {
101102
private _elementRef = inject<ElementRef<HTMLElement>>(ElementRef);

0 commit comments

Comments
 (0)