Variety of fixes for the docs site

package.json

@@ -32,24 +32,24 @@
     "npm": "Please use yarn instead of NPM to install dependencies"
   },
   "dependencies": {
-    "@angular/animations": "^19.0.0-next.10",
-    "@angular/cdk": "^19.0.0-next.9",
-    "@angular/cdk-experimental": "^19.0.0-next.9",
-    "@angular/common": "^19.0.0-next.10",
-    "@angular/compiler": "^19.0.0-next.10",
-    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#3e3187172e1edc005a6669fa214e7b4bdc6a230b",
-    "@angular/core": "^19.0.0-next.10",
-    "@angular/forms": "^19.0.0-next.10",
-    "@angular/google-maps": "^19.0.0-next.9",
-    "@angular/localize": "^19.0.0-next.10",
-    "@angular/material": "^19.0.0-next.9",
-    "@angular/material-experimental": "^19.0.0-next.9",
-    "@angular/material-moment-adapter": "^19.0.0-next.9",
-    "@angular/platform-browser": "^19.0.0-next.10",
-    "@angular/platform-browser-dynamic": "^19.0.0-next.10",
-    "@angular/router": "^19.0.0-next.10",
-    "@angular/ssr": "^19.0.0-next.10",
-    "@angular/youtube-player": "^19.0.0-next.9",
+    "@angular/animations": "^19.0.0-rc.0",
+    "@angular/cdk": "^19.0.0-rc.0",
+    "@angular/cdk-experimental": "^19.0.0-rc.0",
+    "@angular/common": "^19.0.0-rc.0",
+    "@angular/compiler": "^19.0.0-rc.0",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#63dd3f7fdbbf85440aa18742c24646b9f9676750",
+    "@angular/core": "^19.0.0-rc.0",
+    "@angular/forms": "^19.0.0-rc.0",
+    "@angular/google-maps": "^19.0.0-rc.0",
+    "@angular/localize": "^19.0.0-rc.0",
+    "@angular/material": "^19.0.0-rc.0",
+    "@angular/material-experimental": "^19.0.0-rc.0",
+    "@angular/material-moment-adapter": "^19.0.0-rc.0",
+    "@angular/platform-browser": "^19.0.0-rc.0",
+    "@angular/platform-browser-dynamic": "^19.0.0-rc.0",
+    "@angular/router": "^19.0.0-rc.0",
+    "@angular/ssr": "^19.0.0-rc.0",
+    "@angular/youtube-player": "^19.0.0-rc.0",
     "@stackblitz/sdk": "^1.5.2",
     "moment": "^2.29.1",
     "path-normalize": "^6.0.7",
@@ -58,15 +58,15 @@
     "zone.js": "~0.14.10"
   },
   "devDependencies": {
-    "@angular-devkit/architect": "^0.1900.0-next.11",
-    "@angular-devkit/architect-cli": "^0.1900.0-next.11",
-    "@angular-devkit/build-angular": "^19.0.0-next.11",
+    "@angular-devkit/architect": "^0.1900.0-rc.0",
+    "@angular-devkit/architect-cli": "^0.1900.0-rc.0",
+    "@angular-devkit/build-angular": "^19.0.0-rc.0",
     "@angular-eslint/builder": "^14.0.0",
     "@angular-eslint/eslint-plugin": "^14.0.0",
     "@angular-eslint/eslint-plugin-template": "^14.0.0",
     "@angular-eslint/template-parser": "^14.0.0",
-    "@angular/cli": "^19.0.0-next.11",
-    "@angular/compiler-cli": "^19.0.0-next.10",
+    "@angular/cli": "^19.0.0-rc.0",
+    "@angular/compiler-cli": "^19.0.0-rc.0",
     "@bazel/bazelisk": "^1.12.1",
     "@stylistic/eslint-plugin": "^2.6.2",
     "@types/imagemin": "^7.0.0",

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}},

scenes/src/app/scene-viewer/scene-viewer.ts

@@ -1,6 +1,5 @@
 import {
   Component,
-  ComponentFactoryResolver,
   HostBinding,
   Input,
   OnInit,
@@ -46,17 +45,15 @@ export class SceneViewer implements OnInit {
 
   readonly scene = viewChild.required('scene', { read: ViewContainerRef });
 
-  constructor(private readonly componentFactoryResolver: ComponentFactoryResolver,
-              private route: ActivatedRoute,
+  constructor(private route: ActivatedRoute,
               private sanitizer: DomSanitizer) {
     this.hueRotation = this.route.snapshot.data['hueRotate'];
     this.component = this.route.snapshot.data['scene'];
     this.scale = this.route.snapshot.data['scale'];
   }
 
   ngOnInit() {
-    const componentFactory = this.componentFactoryResolver.resolveComponentFactory(this.component);
-    this.scene().createComponent(componentFactory);
+    this.scene().createComponent(this.component);
     const container = document.querySelector('#scene-content-container') as HTMLElement;
     container.style.transform = `scale(${this.scale})`;
     container.style.transformOrigin = 'center';

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>

scenes/src/app/scenes/timepicker/timepicker-scene.scss

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

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();
+  }
+}

scenes/src/styles.scss

@@ -12,3 +12,8 @@ html {
     density: 0,
   ));
 }
+
+body {
+  // The margin can throw off positioning since the overlay container is within the body.
+  margin: 0;
+}

src/app/pages/component-viewer/component-styling.html

@@ -10,23 +10,23 @@
 } @else {
   <h2 class="cdk-visually-hidden" tabindex="-1">How to style {{item.id}}</h2>
   Styles from the <code>{{item.packageName}}/{{item.id}}</code> package can be customized using
-  @if (data.length === 1) {
-    the <code>{{data[0].overridesMixin}}</code> mixin.
+  @if (data.themes.length === 1) {
+    the <code>{{data.themes[0].overridesMixin}}</code> mixin.
   } @else {
-    the @for (current of data; track current.name) {{{$last ? ' and ' : ($first ? '' : ', ')}}<code>{{current.overridesMixin}}</code>} mixins.
+    the @for (current of data.themes; track current.name) {{{$last ? ' and ' : ($first ? '' : ', ')}}<code>{{current.overridesMixin}}</code>} mixins.
   }
-  {{data.length === 1 ? 'This mixin accepts' : 'These mixins accept'}} a set of tokens that control how the components will look, either for the entire app or under a specific selector. {{example ? 'For example:' : ''}}
+  {{data.themes.length === 1 ? 'This mixin accepts' : 'These mixins accept'}} a set of tokens that control how the components will look, either for the entire app or under a specific selector. {{example ? 'For example:' : ''}}
 
   @if (example) {
     <div class="docs-markdown">
-      <pre>{{example}}</pre>
+      <pre [innerHTML]="example"></pre>
     </div>
   }
 
   You can find the full list of supported mixins and tokens below.
 
   <div class="docs-markdown">
-    @for (current of data; track current.name) {
+    @for (current of data.themes; track current.name) {
       <h3>Tokens supported by <code>{{current.overridesMixin}}</code></h3>
       <token-table [tokens]="current.tokens"/>
     }

src/app/pages/component-viewer/component-styling.ts

@@ -1,4 +1,5 @@
 import {Component, inject, Injectable} from '@angular/core';
+import {DomSanitizer} from '@angular/platform-browser';
 import {HttpClient} from '@angular/common/http';
 import {AsyncPipe} from '@angular/common';
 import {Observable} from 'rxjs';
@@ -8,25 +9,28 @@ import {DocItem} from '../../shared/documentation-items/documentation-items';
 import {Token, TokenTable} from './token-table';
 
 interface StyleOverridesData {
-  name: string;
-  overridesMixin: string;
-  tokens: Token[];
+  example: string | null;
+  themes: {
+    name: string;
+    overridesMixin: string;
+    tokens: Token[];
+  }[];
 }
 
 @Injectable({providedIn: 'root'})
 class TokenService {
-  private _cache: Record<string, Observable<StyleOverridesData[]>> = {};
+  private _cache: Record<string, Observable<StyleOverridesData>> = {};
 
   constructor(private _http: HttpClient) {}
 
-  getTokenData(item: DocItem): Observable<StyleOverridesData[]> {
+  getTokenData(item: DocItem): Observable<StyleOverridesData> {
     const url = `/docs-content/tokens/${item.packageName}/${item.id}/${item.id}.json`;
 
     if (this._cache[url]) {
       return this._cache[url];
     }
 
-    const stream = this._http.get<StyleOverridesData[]>(url).pipe(shareReplay(1));
+    const stream = this._http.get<StyleOverridesData>(url).pipe(shareReplay(1));
     this._cache[url] = stream;
     return stream;
   }
@@ -41,39 +45,13 @@ class TokenService {
 export class ComponentStyling {
   private componentViewer = inject(ComponentViewer);
   private tokenService = inject(TokenService);
+  private domSanitizer = inject(DomSanitizer);
   protected docItem = this.componentViewer.componentDocItem;
   protected dataStream =
     this.docItem.pipe(switchMap(item => this.tokenService.getTokenData(item)));
   protected hasDataStream = this.dataStream.pipe(
-    map(data => data.length > 0 && data.some(d => d.tokens.length > 0)));
+    map(data => data.themes.length > 0 && data.themes.some(d => d.tokens.length > 0)));
 
-  protected exampleStream = this.dataStream.pipe(map(data => {
-    const mixin = data.find(d => d.tokens.length > 0);
-
-    if (!mixin) {
-      return null;
-    }
-
-    // Pick out a couple of color tokens to show as examples.
-    const firstToken = mixin.tokens.find(token => token.type === 'color');
-    const secondToken = mixin.tokens.find(token => token.type === 'color' && token !== firstToken);
-
-    if (!firstToken) {
-      return null;
-    }
-
-    const lines = [
-      `@use '@angular/material' as mat;`,
-      ``,
-      `// Customize the entire app. Change :root to your selector if you want to scope the styles.`,
-      `:root {`,
-      `  @include mat.${mixin.overridesMixin}((`,
-      `    ${firstToken.overridesName}: orange,`,
-      ...(secondToken ? [`    ${secondToken.overridesName}: red,`] : []),
-      `  ));`,
-      `}`,
-    ];
-
-    return lines.join('\n');
-  }));
+  protected exampleStream = this.dataStream.pipe(map(data => data.example ?
+    this.domSanitizer.bypassSecurityTrustHtml(data.example) : null));
 }

src/app/shared/cookie-popup/cookie-popup.scss

@@ -4,7 +4,7 @@
 $_inner-spacing: 16px;
 
 .popup {
-  box-shadow: var(--mat-app-elevation-shadow-level-2);
+  box-shadow: var(--mat-sys-level2);
   color: var(--mat-sys-on-surface);
   background: var(--mat-sys-surface);
   position: fixed;

src/app/shared/documentation-items/documentation-items.ts

@@ -357,6 +357,15 @@ const DOCS: { [key: string]: DocItem[] } = {
       },
       additionalApiDocs: [{name: 'Testing', path: 'material-tabs-testing.html'}],
     },
+    {
+      id: 'timepicker',
+      name: 'Timepicker',
+      summary: 'Allows the user to select a time of the day.',
+      exampleSpecs: {
+        prefix: 'time',
+      },
+      additionalApiDocs: [{name: 'Testing', path: 'material-timepicker-testing.html'}],
+    },
     {
       id: 'toolbar',
       name: 'Toolbar',

src/app/shared/navbar/navbar.scss

@@ -1,9 +1,9 @@
 :host {
   color: var(--mat-sys-primary);
+  background: var(--mat-sys-primary-container);
 }
 
 .docs-navbar-header {
-  background: var(--mat-sys-primary-container);
   display: flex;
   flex-wrap: wrap;
   align-items: center;