fix(material/timepicker): make it easier to style timepicker panel (#32711)

Adds a `panelClass` input to the timepicker so it's easier to style it.

Author: crisbeto

goldens/material/timepicker/index.api.md

@@ -58,6 +58,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
     readonly options: InputSignal<readonly MatTimepickerOption<D>[] | null>;
     // (undocumented)
     protected _options: Signal<readonly MatOption<any>[]>;
+    readonly panelClass: InputSignal<string | string[] | undefined>;
     readonly panelId: string;
     // (undocumented)
     protected _panelTemplate: Signal<TemplateRef<unknown>>;
@@ -67,7 +68,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
     // (undocumented)
     protected _timeOptions: readonly MatTimepickerOption<D>[];
     // (undocumented)
-    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimepicker<any>, "mat-timepicker", ["matTimepicker"], { "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<MatTimepicker<any>, "mat-timepicker", ["matTimepicker"], { "interval": { "alias": "interval"; "required": false; "isSignal": true; }; "options": { "alias": "options"; "required": false; "isSignal": true; }; "disableRipple": { "alias": "disableRipple"; "required": false; "isSignal": true; }; "ariaLabel": { "alias": "aria-label"; "required": false; "isSignal": true; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; "isSignal": true; }; "panelClass": { "alias": "panelClass"; "required": false; "isSignal": true; }; }, { "selected": "selected"; "opened": "opened"; "closed": "closed"; }, never, never, true, never>;
     // (undocumented)
     static ɵfac: i0.ɵɵFactoryDeclaration<MatTimepicker<any>, never>;
 }

src/material/timepicker/timepicker.spec.ts

@@ -904,6 +904,17 @@ describe('MatTimepicker', () => {
       fixture.detectChanges();
       expect(input.hasAttribute('aria-activedescendant')).toBe(false);
     });
+
+    it('should be able to set classes on the panel', () => {
+      const fixture = TestBed.createComponent(StandaloneTimepicker);
+      fixture.componentInstance.panelClass.set(['foo', 'bar']);
+      fixture.detectChanges();
+      getInput(fixture).click();
+      fixture.detectChanges();
+      const classList = fixture.nativeElement.querySelector('.cdk-overlay-pane').classList;
+      expect(classList).toContain('foo');
+      expect(classList).toContain('bar');
+    });
   });
 
   describe('forms integration', () => {
@@ -1415,7 +1426,8 @@ describe('MatTimepicker', () => {
       [interval]="interval()"
       [options]="customOptions()"
       [aria-label]="ariaLabel()"
-      [aria-labelledby]="ariaLabelledby()"/>
+      [aria-labelledby]="ariaLabelledby()"
+      [panelClass]="panelClass()"/>
     <mat-timepicker-toggle
       [for]="picker"
       [aria-label]="toggleAriaLabel()"
@@ -1439,6 +1451,7 @@ class StandaloneTimepicker {
   readonly toggleTabIndex = signal<number>(0);
   readonly customOptions = signal<MatTimepickerOption<Date>[] | null>(null);
   readonly openOnClick = signal(true);
+  readonly panelClass = signal<string[]>([]);
   readonly openedSpy = jasmine.createSpy('opened');
   readonly closedSpy = jasmine.createSpy('closed');
   readonly selectedSpy = jasmine.createSpy('selected');

src/material/timepicker/timepicker.ts

@@ -212,6 +212,9 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
   /** Whether the timepicker is currently disabled. */
   readonly disabled: Signal<boolean> = computed(() => !!this._input()?.disabled());
 
+  /** Classes to be passed to the timepicker panel. */
+  readonly panelClass = input<string | string[]>();
+
   constructor() {
     if (typeof ngDevMode === 'undefined' || ngDevMode) {
       validateAdapter(this._dateAdapter, this._dateFormats);
@@ -383,6 +386,7 @@ export class MatTimepicker<D> implements OnDestroy, MatOptionParentComponent {
       direction: this._dir || 'ltr',
       hasBackdrop: false,
       disableAnimations: this._animationsDisabled,
+      panelClass: this.panelClass(),
     });
 
     this._overlayRef.detachments().subscribe(() => this.close());