feat(material-luxon-adapter): add luxon date adapter (#23167)

Adds a new package called `@angular/material-luxon-adapter` that provides a date adapter to be used together with Luxon dates.

Author: crisbeto

.github/CODEOWNERS

@@ -88,8 +88,9 @@
 /src/cdk/text-field/**                             @mmalerba
 /src/cdk/tree/**                                   @jelbourn @andrewseguin
 
-# Moment adapter package
+# Date adapters
 /src/material-moment-adapter/**                    @mmalerba
+/src/material-luxon-adapter/**                     @crisbeto
 
 # Material experimental package
 /src/material-experimental/*                       @jelbourn

.ng-dev/commit-message.ts

@@ -72,6 +72,7 @@ export const commitMessage: CommitMessageConfig = {
     'material-experimental/popover-edit',
     'material-experimental/selection',
     'material-moment-adapter',
+    'material-luxon-adapter',
     'material/autocomplete',
     'material/badge',
     'material/bottom-sheet',

angular-tsconfig.json

@@ -37,6 +37,7 @@
     "node_modules/@angular/material/**",
     "node_modules/@angular/material-experimental/**",
     "node_modules/@angular/material-moment-adapter/**",
+    "node_modules/@angular/material-luxon-adapter/**",
     "node_modules/@angular/youtube-player/**"
   ]
 }

package.json

@@ -153,6 +153,7 @@
     "@types/gulp": "4.0.8",
     "@types/inquirer": "^7.3.1",
     "@types/jasmine": "^3.6.0",
+    "@types/luxon": "^1.27.0",
     "@types/marked": "^2.0.0",
     "@types/merge2": "^0.3.30",
     "@types/minimist": "^1.2.0",
@@ -200,6 +201,7 @@
     "minimatch": "^3.0.4",
     "minimist": "^1.2.0",
     "moment": "^2.18.1",
+    "luxon": "^2.0.0",
     "node-fetch": "^2.6.0",
     "parse5": "^6.0.1",
     "postcss": "^8.2.1",

rollup-globals.bzl

@@ -34,6 +34,7 @@ ROLLUP_GLOBALS = {
     "@angular/material": "ng.material",
     "@angular/material-experimental": "ng.materialExperimental",
     "@angular/material-moment-adapter": "ng.materialMomentAdapter",
+    "@angular/material-luxon-adapter": "ng.materialLuxonAdapter",
     "@angular/youtube-player": "ng.youtubePlayer",
 
     # MDC Web
@@ -78,6 +79,7 @@ ROLLUP_GLOBALS = {
     "moment": "moment",
     "moment/locale/fr": "moment.locale.fr",
     "moment/locale/ja": "moment.locale.ja",
+    "luxon": "luxon",
     "protractor": "protractor",
     "rxjs": "rxjs",
     "rxjs/operators": "rxjs.operators",

scripts/deploy/publish-build-artifacts.sh

@@ -22,6 +22,7 @@ PACKAGES=(
   material
   material-experimental
   material-moment-adapter
+  # material-luxon-adapter TODO(crisbeto): enable this once we have a builds repo
   google-maps
   youtube-player
 )

src/components-examples/package.json

@@ -25,7 +25,8 @@
     "@angular/common": "0.0.0-NG",
     "@angular/material": "0.0.0-PLACEHOLDER",
     "@angular/material-experimental": "0.0.0-PLACEHOLDER",
-    "@angular/material-moment-adapter": "0.0.0-PLACEHOLDER"
+    "@angular/material-moment-adapter": "0.0.0-PLACEHOLDER",
+    "@angular/material-luxon-adapter": "0.0.0-PLACEHOLDER"
   },
   "dependencies": {
     "tslib": "0.0.0-TSLIB"

src/components-examples/tsconfig.json

@@ -11,7 +11,8 @@
       "@angular/cdk-experimental/*": ["../cdk-experimental/*"],
       "@angular/material/*": ["../material/*"],
       "@angular/material-experimental/*": ["../material-experimental/*"],
-      "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"]
+      "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
+      "@angular/material-luxon-adapter": ["../material-luxon-adapter/public-api.ts"]
     }
   },
   "include": ["./**/*.ts"]

src/dev-app/tsconfig.json

@@ -14,6 +14,7 @@
       "@angular/cdk-experimental/*": ["../cdk-experimental/*"],
       "@angular/cdk-experimental": ["../cdk-experimental"],
       "@angular/material-moment-adapter": ["../material-moment-adapter/public-api.ts"],
+      "@angular/material-luxon-adapter": ["../material-luxon-adapter/public-api.ts"],
       "@angular/google-maps": ["../google-maps"],
       "@angular/components-examples": ["../components-examples"],
       "@angular/components-examples/*": ["../components-examples/*"],

src/e2e-app/tsconfig.json

@@ -12,6 +12,7 @@
       "@angular/cdk-experimental/*": ["../cdk-experimental/*"],
       "@angular/cdk-experimental": ["../cdk-experimental/"],
       "@angular/material-moment-adapter": ["../material-moment-adapter/"],
+      "@angular/material-luxon-adapter": ["../material-luxon-adapter/"],
       "@angular/components-examples": ["../components-examples/"],
       "@angular/components-examples/*": ["../components-examples/*"]
     }

src/material-luxon-adapter/BUILD.bazel

@@ -0,0 +1,53 @@
+load("//tools:defaults.bzl", "ng_module", "ng_package", "ng_test_library", "ng_web_test_suite")
+
+package(default_visibility = ["//visibility:public"])
+
+ng_module(
+    name = "material-luxon-adapter",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    deps = [
+        "//src:dev_mode_types",
+        "//src/material/core",
+        "@npm//@angular/core",
+        "@npm//@types/luxon",
+        "@npm//luxon",
+    ],
+)
+
+ng_test_library(
+    name = "unit_test_sources",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":material-luxon-adapter",
+        "//src/material/core",
+        "@npm//@types/luxon",
+        "@npm//luxon",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    # We need to load Luxon statically since it is not a named AMD module and needs to
+    # be manually configured through "require.js" which is used by "karma_web_test_suite".
+    static_files = [
+        "@npm//luxon",
+    ],
+    deps = [
+        ":require-config.js",
+        ":unit_test_sources",
+    ],
+)
+
+ng_package(
+    name = "npm_package",
+    srcs = ["package.json"],
+    entry_point = ":public-api.ts",
+    tags = ["release-package"],
+    deps = [":material-luxon-adapter"],
+)

src/material-luxon-adapter/adapter/index.ts

@@ -0,0 +1,31 @@
+/**
+ * @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.io/license
+ */
+
+import {NgModule} from '@angular/core';
+import {DateAdapter, MAT_DATE_FORMATS, MAT_DATE_LOCALE} from '@angular/material/core';
+import {MAT_LUXON_DATE_ADAPTER_OPTIONS, LuxonDateAdapter} from './luxon-date-adapter';
+import {MAT_LUXON_DATE_FORMATS} from './luxon-date-formats';
+
+export * from './luxon-date-adapter';
+export * from './luxon-date-formats';
+
+@NgModule({
+  providers: [{
+    provide: DateAdapter,
+    useClass: LuxonDateAdapter,
+    deps: [MAT_DATE_LOCALE, MAT_LUXON_DATE_ADAPTER_OPTIONS]
+  }],
+})
+export class LuxonDateModule {}
+
+
+@NgModule({
+  imports: [LuxonDateModule],
+  providers: [{provide: MAT_DATE_FORMATS, useValue: MAT_LUXON_DATE_FORMATS}],
+})
+export class MatLuxonDateModule {}