feat(material-temporal-adapter): add Temporal API date adapter for Angular Material

Author: kbrilla

.gitignore

@@ -19,6 +19,7 @@ node_modules
 /packages
 /pubspec.lock
 /src/.pub
+PR_DESCRIPTION.md
 /src/.packages
 /src/packages
 /src/pubspec.lock

.ng-dev/commit-message.mts

@@ -95,6 +95,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-moment-adapter',
     'material-date-fns-adapter',
     'material-luxon-adapter',
+    'material-temporal-adapter',
     'youtube-player',
     'material-angular-io',
   ],

.vscode/mcp.json

@@ -0,0 +1,11 @@
+{
+  "servers": {
+    "io.github.ChromeDevTools/chrome-devtools-mcp": {
+      "command": "npx",
+      "args": ["-y", "chrome-devtools-mcp"],
+      "env": {},
+      "type": "stdio"
+    }
+  },
+  "inputs": []
+}

goldens/BUILD.bazel

@@ -48,3 +48,8 @@ api_golden_test_npm_package(
     golden_dir = "goldens/aria",
     npm_package = "src/aria/npm_package",
 )
+
+# Note: material-temporal-adapter API golden tests are not included because
+# api-extractor cannot resolve the global Temporal namespace (similar to how
+# material-moment-adapter, material-luxon-adapter, and material-date-fns-adapter
+# also don't have API golden tests).

packages.bzl

@@ -8,6 +8,7 @@ ANGULAR_COMPONENTS_SCOPED_PACKAGES = ["@angular/%s" % p for p in [
     "material-luxon-adapter",
     "material-moment-adapter",
     "material-date-fns-adapter",
+    "material-temporal-adapter",
 ]]
 
 PKG_GROUP_REPLACEMENTS = {

pnpm-lock.yaml

@@ -0,0 +1,51 @@
+load("//tools:defaults.bzl", "ng_package", "ng_project", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_project(
+    name = "material-temporal-adapter",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//:node_modules/@angular/core",
+        "//src:dev_mode_types",
+        "//src/material/core",
+    ],
+)
+
+ng_project(
+    name = "unit_test_sources",
+    testonly = True,
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":material-temporal-adapter",
+        "//:node_modules/@angular/core",
+        "//src/material/core",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    deps = [
+        ":unit_test_sources",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    package_name = "@angular/material-temporal-adapter",
+    srcs = ["package.json"],
+    nested_packages = ["//src/material-temporal-adapter/schematics:npm_package"],
+    tags = ["release-package"],
+    visibility = [
+        "//:__pkg__",
+        "//goldens:__pkg__",
+        "//integration:__subpackages__",
+    ],
+    deps = [":material-temporal-adapter"],
+)

src/material-temporal-adapter/BUILD.bazel

@@ -0,0 +1,124 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {NgModule, Provider} from '@angular/core';
+import {DateAdapter, MAT_DATE_FORMATS, MatDateFormats} from '@angular/material/core';
+import {
+  MAT_TEMPORAL_DATE_ADAPTER_OPTIONS,
+  MatTemporalDateAdapterOptions,
+  TemporalDateAdapter,
+} from './temporal-date-adapter';
+import {MAT_TEMPORAL_DATE_FORMATS} from './temporal-date-formats';
+
+export * from './temporal-date-adapter';
+export * from './temporal-date-formats';
+
+/**
+ * Module providing the Temporal date adapter.
+ * @deprecated Use `provideTemporalDateAdapter` instead.
+ */
+@NgModule({
+  providers: [
+    {
+      provide: DateAdapter,
+      useClass: TemporalDateAdapter,
+    },
+  ],
+})
+export class TemporalModule {}
+
+/**
+ * Module providing the Temporal date adapter with default formats.
+ *
+ * @example
+ * ```typescript
+ * import { MatTemporalModule } from '@angular/material-temporal-adapter';
+ *
+ * @NgModule({
+ *   imports: [MatTemporalModule],
+ * })
+ * export class AppModule {}
+ * ```
+ */
+@NgModule({
+  providers: [provideTemporalDateAdapter()],
+})
+export class MatTemporalModule {}
+
+/**
+ * Provider function for the Temporal date adapter.
+ *
+ * @param formats Custom date formats to use. Defaults to MAT_TEMPORAL_DATE_FORMATS.
+ * @param options Configuration options for the adapter.
+ * @returns Array of providers for the Temporal date adapter.
+ *
+ * @example
+ * ```typescript
+ * import { provideTemporalDateAdapter } from '@angular/material-temporal-adapter';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideTemporalDateAdapter(),
+ *   ],
+ * });
+ * ```
+ *
+ * @example
+ * With custom options:
+ * ```typescript
+ * import {
+ *   provideTemporalDateAdapter,
+ *   MAT_TEMPORAL_DATETIME_FORMATS
+ * } from '@angular/material-temporal-adapter';
+ *
+ * bootstrapApplication(AppComponent, {
+ *   providers: [
+ *     provideTemporalDateAdapter(MAT_TEMPORAL_DATETIME_FORMATS, {
+ *       calendar: 'islamic',
+ *       mode: 'datetime',
+ *     }),
+ *   ],
+ * });
+ * ```
+ */
+export function provideTemporalDateAdapter(
+  formats: MatDateFormats = MAT_TEMPORAL_DATE_FORMATS,
+  options?: Partial<MatTemporalDateAdapterOptions>,
+): Provider[] {
+  const providers: Provider[] = [
+    {
+      provide: DateAdapter,
+      useClass: TemporalDateAdapter,
+    },
+    {provide: MAT_DATE_FORMATS, useValue: formats},
+  ];
+
+  if (options) {
+    const zonedOptions = options.mode === 'zoned' ? options : null;
+    providers.push({
+      provide: MAT_TEMPORAL_DATE_ADAPTER_OPTIONS,
+      useValue: {
+        calendar: options.calendar ?? 'iso8601',
+        outputCalendar: options.outputCalendar,
+        mode: options.mode ?? 'date',
+        firstDayOfWeek: options.firstDayOfWeek,
+        overflow: options.overflow,
+        ...(zonedOptions
+          ? {
+              timezone: zonedOptions.timezone,
+              disambiguation: zonedOptions.disambiguation,
+              offset: zonedOptions.offset,
+              rounding: zonedOptions.rounding,
+            }
+          : {}),
+      },
+    });
+  }
+
+  return providers;
+}