fix: set up scene for timepicker

Sets up a scene for the timepicker that can be used for generating previews.

Author: crisbeto

material.angular.io/scenes/src/app/app-routes.ts

@@ -33,6 +33,7 @@ import {SortScene} from './scenes/sort/sort-scene';
 import {StepperScene} from './scenes/stepper/stepper-scene';
 import {TableScene} from './scenes/table/table-scene';
 import {TabsScene} from './scenes/tabs/tabs-scene';
+import {TimepickerScene} from './scenes/timepicker/timepicker-scene';
 import {ToolbarScene} from './scenes/toolbar/toolbar-scene';
 import {TooltipScene} from './scenes/tooltip/tooltip-scene';
 import {TreeScene} from './scenes/tree/tree-scene';
@@ -87,6 +88,7 @@ export const routes: SceneViewerRoute[] = [
   {path: 'stepper', component: SceneViewer, data: {scene: StepperScene}},
   {path: 'table', component: SceneViewer, data: {scene: TableScene}},
   {path: 'tabs', component: SceneViewer, data: {scene: TabsScene}},
+  {path: 'timepicker', component: SceneViewer, data: {scene: TimepickerScene}},
   {path: 'toolbar', component: SceneViewer, data: {scene: ToolbarScene}},
   {path: 'tooltip', component: SceneViewer, data: {scene: TooltipScene}},
   {path: 'tree', component: SceneViewer, data: {scene: TreeScene}},

material.angular.io/scenes/src/app/scenes/timepicker/timepicker-scene.html

@@ -0,0 +1,6 @@
+<mat-form-field>
+  <mat-label>Pick a time</mat-label>
+  <input matInput [matTimepicker]="picker" [value]="value">
+  <mat-timepicker #picker/>
+  <mat-timepicker-toggle [for]="picker" matSuffix/>
+</mat-form-field>

material.angular.io/scenes/src/app/scenes/timepicker/timepicker-scene.scss

@@ -0,0 +1,3 @@
+mat-form-field {
+  transform: translateY(-55px);
+}

material.angular.io/scenes/src/app/scenes/timepicker/timepicker-scene.ts

@@ -0,0 +1,22 @@
+import {AfterViewInit, Component, viewChild, ViewEncapsulation} from '@angular/core';
+import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatInputModule} from '@angular/material/input';
+import {MatTimepickerModule, MatTimepicker} from '@angular/material/timepicker';
+
+
+@Component({
+  encapsulation: ViewEncapsulation.None,
+  selector: 'app-timepicker-scene',
+  templateUrl: './timepicker-scene.html',
+  styleUrls: ['./timepicker-scene.scss'],
+  standalone: true,
+  imports: [MatTimepickerModule, MatFormFieldModule, MatInputModule]
+})
+export class TimepickerScene implements AfterViewInit {
+  value = new Date(2024, 0, 0, 0, 30, 0);
+  readonly timepicker = viewChild.required(MatTimepicker);
+
+  ngAfterViewInit() {
+    this.timepicker().open();
+  }
+}