refactor(material/datepicker): convert to standalone

Converts `material/datepicker` to standalone.

Author: crisbeto

src/material/datepicker/calendar-body.spec.ts

@@ -2,12 +2,16 @@ import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {Component} from '@angular/core';
 import {MatCalendarBody, MatCalendarCell, MatCalendarUserEvent} from './calendar-body';
 import {By} from '@angular/platform-browser';
-import {dispatchMouseEvent, dispatchFakeEvent, dispatchTouchEvent} from '../../cdk/testing/private';
+import {
+  dispatchMouseEvent,
+  dispatchFakeEvent,
+  dispatchTouchEvent,
+} from '@angular/cdk/testing/private';
 
 describe('MatCalendarBody', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      declarations: [MatCalendarBody, StandardCalendarBody, RangeCalendarBody],
+      imports: [MatCalendarBody, StandardCalendarBody, RangeCalendarBody],
     });
 
     TestBed.compileComponents();
@@ -693,6 +697,8 @@ describe('MatCalendarBody', () => {
           [activeCell]="10"
           (selectedValueChange)="onSelect($event)">
     </table>`,
+  standalone: true,
+  imports: [MatCalendarBody],
 })
 class StandardCalendarBody {
   label = 'Jan 2017';
@@ -724,6 +730,8 @@ class StandardCalendarBody {
           (dragEnded)="dragEnded($event)"
           >
     </table>`,
+  standalone: true,
+  imports: [MatCalendarBody],
 })
 class RangeCalendarBody {
   rows = createCalendarCells(4);

src/material/datepicker/calendar-body.ts

@@ -23,6 +23,7 @@ import {
   inject,
 } from '@angular/core';
 import {take} from 'rxjs/operators';
+import {NgClass} from '@angular/common';
 
 /** Extra CSS classes that can be associated with a calendar cell. */
 export type MatCalendarCellCssClasses = string | string[] | Set<string> | {[key: string]: any};
@@ -86,6 +87,8 @@ const passiveEventOptions = normalizePassiveListenerOptions({passive: true});
   exportAs: 'matCalendarBody',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [NgClass],
 })
 export class MatCalendarBody<D = any> implements OnChanges, OnDestroy, AfterViewChecked {
   private _platform = inject(Platform);

src/material/datepicker/calendar-header.spec.ts

@@ -12,8 +12,9 @@ import {yearsPerPage} from './multi-year-view';
 describe('MatCalendarHeader', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
-      imports: [MatNativeDateModule, MatDatepickerModule],
-      declarations: [
+      imports: [
+        MatNativeDateModule,
+        MatDatepickerModule,
         // Test components.
         StandardCalendar,
         CalendarWithMinMaxDate,
@@ -383,6 +384,8 @@ describe('MatCalendarHeader', () => {
         (yearSelected)="selectedYear=$event"
         (monthSelected)="selectedMonth=$event">
     </mat-calendar>`,
+  standalone: true,
+  imports: [MatNativeDateModule, MatDatepickerModule],
 })
 class StandardCalendar {
   selected: Date;
@@ -399,6 +402,8 @@ class StandardCalendar {
       [maxDate]="maxDate">
     </mat-calendar>
   `,
+  standalone: true,
+  imports: [MatNativeDateModule, MatDatepickerModule],
 })
 class CalendarWithMinMaxDate {
   startAt = new Date(2018, JAN, 1);

src/material/datepicker/calendar.spec.ts

@@ -5,7 +5,7 @@ import {
   dispatchKeyboardEvent,
   dispatchMouseEvent,
   MockNgZone,
-} from '../../cdk/testing/private';
+} from '@angular/cdk/testing/private';
 import {Component, NgZone} from '@angular/core';
 import {
   fakeAsync,
@@ -28,18 +28,18 @@ describe('MatCalendar', () => {
   beforeEach(waitForAsync(() => {
     TestBed.configureTestingModule({
       imports: [MatNativeDateModule, MatDatepickerModule],
+      providers: [
+        MatDatepickerIntl,
+        {provide: NgZone, useFactory: () => (zone = new MockNgZone())},
+        {provide: Directionality, useFactory: () => ({value: 'ltr'})},
+      ],
       declarations: [
         // Test components.
         StandardCalendar,
         CalendarWithMinMax,
         CalendarWithDateFilter,
         CalendarWithSelectableMinDate,
       ],
-      providers: [
-        MatDatepickerIntl,
-        {provide: NgZone, useFactory: () => (zone = new MockNgZone())},
-        {provide: Directionality, useFactory: () => ({value: 'ltr'})},
-      ],
     });
 
     TestBed.compileComponents();

src/material/datepicker/calendar.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {ComponentPortal, ComponentType, Portal} from '@angular/cdk/portal';
+import {CdkPortalOutlet, ComponentPortal, ComponentType, Portal} from '@angular/cdk/portal';
 import {
   AfterContentInit,
   AfterViewChecked,
@@ -40,6 +40,8 @@ import {
 } from './multi-year-view';
 import {MatYearView} from './year-view';
 import {MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER, DateRange} from './date-selection-model';
+import {MatIconButton, MatButton} from '@angular/material/button';
+import {CdkMonitorFocus} from '@angular/cdk/a11y';
 
 let calendarHeaderId = 1;
 
@@ -56,6 +58,8 @@ export type MatCalendarView = 'month' | 'year' | 'multi-year';
   exportAs: 'matCalendarHeader',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [MatButton, MatIconButton],
 })
 export class MatCalendarHeader<D> {
   constructor(
@@ -234,6 +238,8 @@ export class MatCalendarHeader<D> {
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   providers: [MAT_SINGLE_DATE_SELECTION_MODEL_PROVIDER],
+  standalone: true,
+  imports: [CdkPortalOutlet, CdkMonitorFocus, MatMonthView, MatYearView, MatMultiYearView],
 })
 export class MatCalendar<D> implements AfterContentInit, AfterViewChecked, OnDestroy, OnChanges {
   /** An input indicating the type of the header component, if set. */

src/material/datepicker/date-range-input-parts.ts

@@ -70,7 +70,7 @@ export const MAT_DATE_RANGE_INPUT_PARENT = new InjectionToken<MatDateRangeInputP
 /**
  * Base class for the individual inputs that can be projected inside a `mat-date-range-input`.
  */
-@Directive()
+@Directive({standalone: true})
 abstract class MatDateRangeInputPartBase<D>
   extends MatDatepickerInputBase<DateRange<D>>
   implements OnInit, DoCheck
@@ -248,6 +248,7 @@ abstract class MatDateRangeInputPartBase<D>
   // These need to be specified explicitly, because some tooling doesn't
   // seem to pick them up from the base class. See #20932.
   outputs: ['dateChange', 'dateInput'],
+  standalone: true,
 })
 export class MatStartDate<D> extends MatDateRangeInputPartBase<D> {
   /** Validator that checks that the start date isn't after the end date. */
@@ -360,6 +361,7 @@ export class MatStartDate<D> extends MatDateRangeInputPartBase<D> {
   // These need to be specified explicitly, because some tooling doesn't
   // seem to pick them up from the base class. See #20932.
   outputs: ['dateChange', 'dateInput'],
+  standalone: true,
 })
 export class MatEndDate<D> extends MatDateRangeInputPartBase<D> {
   /** Validator that checks that the end date isn't before the start date. */

src/material/datepicker/date-range-input.spec.ts

@@ -17,7 +17,7 @@ import {ErrorStateMatcher, MatNativeDateModule} from '@angular/material/core';
 import {MatDatepickerModule} from './datepicker-module';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatInputModule} from '@angular/material/input';
-import {dispatchFakeEvent, dispatchKeyboardEvent} from '../../cdk/testing/private';
+import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
 import {FocusMonitor} from '@angular/cdk/a11y';
 import {BACKSPACE, LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
 import {MatDateRangeInput} from './date-range-input';

src/material/datepicker/date-range-input.ts

@@ -27,7 +27,7 @@ import {MatFormFieldControl, MAT_FORM_FIELD} from '@angular/material/form-field'
 import {ThemePalette, DateAdapter} from '@angular/material/core';
 import {NgControl, ControlContainer, Validators} from '@angular/forms';
 import {Subject, merge, Subscription} from 'rxjs';
-import {FocusOrigin} from '@angular/cdk/a11y';
+import {FocusOrigin, CdkMonitorFocus} from '@angular/cdk/a11y';
 import {
   MatStartDate,
   MatEndDate,
@@ -65,6 +65,8 @@ let nextUniqueId = 0;
     {provide: MatFormFieldControl, useExisting: MatDateRangeInput},
     {provide: MAT_DATE_RANGE_INPUT_PARENT, useExisting: MatDateRangeInput},
   ],
+  standalone: true,
+  imports: [CdkMonitorFocus],
 })
 export class MatDateRangeInput<D>
   implements

src/material/datepicker/date-range-picker.ts

@@ -37,6 +37,7 @@ export interface MatDateRangePickerInput<D> extends MatDatepickerControl<D> {
     MAT_CALENDAR_RANGE_STRATEGY_PROVIDER,
     {provide: MatDatepickerBase, useExisting: MatDateRangePicker},
   ],
+  standalone: true,
 })
 export class MatDateRangePicker<D> extends MatDatepickerBase<
   MatDateRangePickerInput<D>,

src/material/datepicker/datepicker-actions.spec.ts

@@ -12,6 +12,7 @@ import {MatDatepicker} from './datepicker';
 describe('MatDatepickerActions', () => {
   function createComponent<T>(component: Type<T>): ComponentFixture<T> {
     TestBed.configureTestingModule({
+      declarations: [component],
       imports: [
         CommonModule,
         FormsModule,
@@ -22,7 +23,6 @@ describe('MatDatepickerActions', () => {
         ReactiveFormsModule,
         MatNativeDateModule,
       ],
-      declarations: [component],
     });
 
     return TestBed.createComponent(component);