Merge remote-tracking branch 'en/main'

Author: Zhicheng WANG

.circleci/config.yml

@@ -35,9 +35,6 @@ var_5: &yarn_install
 # https://circleci.com/blog/deep-diving-into-circleci-workspaces/
 var_6: &workspace_location ~/
 
-orbs:
-  build-tools: circleci/[email protected]
-
 commands:
   store_build_output:
     description: 'Stores build artifacts'
@@ -52,26 +49,12 @@ commands:
           root: *workspace_location
           paths:
             - dist
-  # Command for checking out the source code from GitHub. This also ensures that the source code
-  # can be merged to the master branch without conflicts.
-  checkout_and_rebase:
-    description: Checkout and verify clean merge with master
-    steps:
-      - checkout
-      - run:
-          name: Set git user.name and user.email for rebase.
-          # User is required for rebase.
-          command: |
-            git config user.name "angular-ci"
-            git config user.email "angular-ci"
-      - build-tools/merge-with-parent:
-          parent: master
 
 jobs:
   lint:
     <<: *job_defaults
     steps:
-    - checkout_and_rebase
+    - checkout
     - restore_cache:
         key: *cache_key
     - *yarn_install
@@ -85,7 +68,7 @@ jobs:
     # https://circleci.com/docs/2.0/configuration-reference/#resource_class
     resource_class: large
     steps:
-    - checkout_and_rebase
+    - checkout
     - restore_cache:
         key: *cache_key
     - *yarn_install
@@ -96,7 +79,7 @@ jobs:
   test:
     <<: *job_defaults
     steps:
-    - checkout_and_rebase
+    - checkout
     - restore_cache:
         key: *cache_key
     - *yarn_install
@@ -107,7 +90,7 @@ jobs:
     steps:
       - attach_workspace:
           at: *workspace_location
-      - checkout_and_rebase
+      - checkout
       - restore_cache:
           key: *cache_key
       - *yarn_install
@@ -118,7 +101,7 @@ jobs:
     steps:
       - attach_workspace:
           at: *workspace_location
-      - checkout_and_rebase
+      - checkout
       - restore_cache:
           key: *cache_key
       - *yarn_install

.gitignore

@@ -47,8 +47,10 @@ ui-debug.log
 .firebase/
 /typings
 
+.firebaserc
+
 #System Files
 .DS_Store
 Thumbs.db
 
-/prebuilt
+/material-cn-prebuilt

README.md

@@ -28,9 +28,9 @@ issues with rendering or layout of the documentation pages, etc.
 The guides, examples, and docs content repo
 [angular/material2-docs-content](https://github.com/angular/material2-docs-content) contains the
 documentation content and examples. They are generated from:
-- [Angular Material and CDK Guides](https://github.com/angular/components/tree/master/guides)
-- [Material components, services, and directives](https://github.com/angular/components/tree/master/src/material)
-- [CDK components, services, and directives](https://github.com/angular/components/tree/master/src/cdk)
+- [Angular Material and CDK Guides](https://github.com/angular/components/tree/main/guides)
+- [Material components, services, and directives](https://github.com/angular/components/tree/main/src/material)
+- [CDK components, services, and directives](https://github.com/angular/components/tree/main/src/cdk)
 
 ## Development Setup
 

angular.json

@@ -2,7 +2,6 @@
   "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
   "version": 1,
   "newProjectRoot": "projects",
-  "defaultProject": "material-angular-io",
   "projects": {
     "material-angular-io": {
       "root": "",
@@ -328,10 +327,6 @@
     }
   },
   "cli": {
-    "analytics": "cf155f04-1636-4df9-9ce2-870ba25ad38d",
-    "defaultCollection": "@angular-eslint/schematics",
-    "cache": {
-      "enabled": false
-    }
+    "analytics": "cf155f04-1636-4df9-9ce2-870ba25ad38d"
   }
 }

firebase.json

@@ -1,20 +1,24 @@
 {
+  "$schema": "https://raw.githubusercontent.com/firebase/firebase-tools/master/schema/firebase-config.json",
   "hosting": {
+    "target": "mat-aio",
     "public": "dist/material-angular-io",
     "cleanUrls": true,
     "rewrites": [
       {
-        "source": "/**/!(*.@(js|ts|html|css|json|svg|png|jpg|jpeg))",
+        "source": "**/!(*.*)",
         "destination": "/index.html"
       }
     ],
     "headers": [
       {
-        "source": "/assets/versions.json",
+        "source": "**/!(*.*)",
         "headers": [
           {
-            "key": "Access-Control-Allow-Origin",
-            "value": "*"
+            "key": "Cache-Control",
+            // The `index.html` file (or when loaded as SPA), should never be cached. Older
+            // JavaScript sources and assets would be loaded that might no longer be available.
+            "value": "no-cache"
           }
         ]
       },
@@ -49,25 +53,44 @@
         "headers": [
           {
             "key": "Cache-Control",
-            "value": "public, max-age=15811200, s-maxage=31536000"
+            // Images and SVGs are not hashed but are also expected to change rarely.
+            // There are a lot of SVGs in our docs app, and we want to cache them longer.
+            "value": "public, max-age=8640000" // 100 days.
+          }
+        ]
+      },
+      {
+        "source": "/assets/versions.json",
+        "headers": [
+          {
+            "key": "Access-Control-Allow-Origin",
+            "value": "*"
+          },
+          {
+            "key": "Cache-Control",
+            // The versions file should not be cached for too long since we are
+            // deploying on a weekly basis and this file is rather small.
+            "value": "public, max-age=604800" // 7 days.
           }
         ]
       },
       {
-        "source": "/*.svg",
+        "source": "/assets/stack-blitz/**",
         "headers": [
           {
             "key": "Cache-Control",
-            "value": "public, max-age=31536000"
+            // StackBlitz assets are not hashed and should not be cached.
+            "value": "no-cache"
           }
         ]
       },
       {
-        "source": "/*.@(webmanifest|ico)",
+        "source": "/*.ico",
         "headers": [
           {
             "key": "Cache-Control",
-            "value": "public, max-age=604800, s-maxage=1209600"
+            // Icons and the favicon are expected to change rarely. We cache it, but not for too long.
+            "value": "public, max-age=2592000" // 30 days.
           }
         ]
       },
@@ -76,17 +99,13 @@
         "headers": [
           {
             "key": "Cache-Control",
-            "value": "public, max-age=31536000"
+            // JS ans CSS files are hashed and can be cached indefinitely.
+            "value": "public, max-age=31536000" // 365 days.
           }
         ]
       }
     ],
-    "ignore": [
-      "firebase.json",
-      "**/node_modules/**",
-      "tmp",
-      "deploy"
-    ]
+    "ignore": ["firebase.json", "**/node_modules/**", "tmp", "deploy"]
   },
   "emulators": {
     "hosting": {

package.json

@@ -34,39 +34,38 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "^13.1.0",
-    "@angular/cdk": "^13.1.1",
-    "@angular/cdk-experimental": "^13.1.1",
-    "@angular/common": "^13.1.0",
-    "@angular/compiler": "^13.1.0",
-    "@angular/components-examples": "../components/dist/docs-content-pkg/",
-    "@angular/core": "^13.1.0",
-    "@angular/forms": "^13.1.0",
-    "@angular/google-maps": "^13.1.1",
-    "@angular/localize": "^13.1.0",
-    "@angular/material": "^13.1.1",
-    "@angular/material-experimental": "^13.1.1",
-    "@angular/material-moment-adapter": "^13.1.1",
-    "@angular/platform-browser": "^13.1.0",
-    "@angular/platform-browser-dynamic": "^13.1.0",
-    "@angular/router": "^13.1.0",
-    "@angular/youtube-player": "^13.1.1",
+    "@angular/animations": "^14.0.0",
+    "@angular/cdk": "^14.0.0",
+    "@angular/cdk-experimental": "^14.0.0",
+    "@angular/common": "^14.0.0",
+    "@angular/compiler": "^14.0.0",
+    "@angular/components-examples": "https://github.com/angular/material2-docs-content.git#9bd54cb435a675b1880f4026a64eb9f1677e7087",
+    "@angular/core": "^14.0.0",
+    "@angular/forms": "^14.0.0",
+    "@angular/google-maps": "^14.0.0",
+    "@angular/localize": "^14.0.0",
+    "@angular/material": "^14.0.0",
+    "@angular/material-experimental": "^14.0.0",
+    "@angular/material-moment-adapter": "^14.0.0",
+    "@angular/platform-browser": "14.0.0",
+    "@angular/platform-browser-dynamic": "14.0.0",
+    "@angular/router": "14.0.0",
+    "@angular/youtube-player": "^14.0.0",
     "@stackblitz/sdk": "^1.5.2",
-    "material-components-web": "14.0.0-canary.7d8ea4624.0",
+    "material-components-web": "14.0.0-canary.9736ddce9.0",
     "moment": "^2.29.1",
     "rxjs": "^6.6.7",
     "tslib": "^2.3.0",
-    "zone.js": "~0.11.4"
+    "zone.js": "~0.11.5"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^13.1.0",
-    "@angular-eslint/builder": "^13.0.1",
-    "@angular-eslint/eslint-plugin": "^13.0.1",
-    "@angular-eslint/eslint-plugin-template": "^13.0.1",
-    "@angular-eslint/schematics": "^13.0.1",
-    "@angular-eslint/template-parser": "^13.0.1",
-    "@angular/cli": "^13.1.0",
-    "@angular/compiler-cli": "^13.1.0",
+    "@angular-devkit/build-angular": "^14.0.0",
+    "@angular-eslint/builder": "^13.1.0",
+    "@angular-eslint/eslint-plugin": "^13.1.0",
+    "@angular-eslint/eslint-plugin-template": "^13.1.0",
+    "@angular-eslint/template-parser": "^13.1.0",
+    "@angular/cli": "^14.0.0",
+    "@angular/compiler-cli": "^14.0.0",
     "@awesome-fe/prerender": "^0.0.8",
     "@awesome-fe/translate": "^1.1.3",
     "@types/imagemin": "^7.0.0",
@@ -80,7 +79,7 @@
     "eslint-plugin-import": "^2.22.1",
     "eslint-plugin-jsdoc": "^32.3.0",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "firebase-tools": "^9.21.0",
+    "firebase-tools": "^11.0.1",
     "http-server-spa": "^1.3.0",
     "imagemin": "^7.0.1",
     "imagemin-pngquant": "^9.0.2",
@@ -100,6 +99,6 @@
     "puppeteer": "~8.0.0",
     "shelljs": "^0.8.4",
     "ts-node": "^8.10.2",
-    "typescript": "~4.5.2"
+    "typescript": "~4.7.2"
   }
 }

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

@@ -19,7 +19,7 @@ import {NoopAnimationsModule} from '@angular/platform-browser/animations';
   templateUrl: './autocomplete-scene.html',
 })
 export class AutocompleteScene implements AfterViewInit {
-  myControl = new FormControl();
+  myControl = new FormControl('');
   options: string[] = ['hello', 'hello world'];
 
   @ViewChild(MatInput) input!: MatInput;

scripts/ci/deploy-cn.sh

@@ -12,13 +12,13 @@ npx nt mark './dist/**/*.html'
 commitSha=$(git rev-parse --short HEAD)
 commitMessage=$(git log --oneline -n 1)
 
-if [[ ! -d "./prebuilt" ]]; then
-  git clone [email protected]:ng-docs/prebuilt.git
+if [[ ! -d "./material-cn-prebuilt" ]]; then
+  git clone [email protected]:ng-docs/[email protected]:ng-docs/material-cn-prebuilt.git
 fi
 
-cp -r ./dist/material-angular-io/* ./prebuilt
+cp -r ./dist/material-angular-io/* ./material-cn-prebuilt
 
-cd ./prebuilt
+cd ./material-cn-prebuilt
 
 cp index.html 404.html
 

src/app/pages/component-sidenav/component-sidenav.ts

@@ -16,8 +16,7 @@ import {
 import {FormsModule} from '@angular/forms';
 import {MatIconModule} from '@angular/material/icon';
 import {MatListModule} from '@angular/material/list';
-import {MatSidenav, MatSidenavModule} from '@angular/material/sidenav';
-import {MatDrawerToggleResult} from '@angular/material/sidenav/drawer';
+import {MatSidenav, MatSidenavModule, MatDrawerToggleResult} from '@angular/material/sidenav';
 import {ActivatedRoute, Params, RouterModule, Routes} from '@angular/router';
 import {combineLatest, Observable, Subscription} from 'rxjs';
 import {map} from 'rxjs/operators';

src/app/shared/doc-viewer/doc-viewer-module.ts

@@ -26,7 +26,6 @@ import {CodeSnippet} from '../example-viewer/code-snippet';
     StackBlitzButtonModule
   ],
   declarations: [DocViewer, ExampleViewer, HeaderLink, CodeSnippet],
-  entryComponents: [ExampleViewer, HeaderLink],
-  exports: [DocViewer, ExampleViewer, HeaderLink],
+  exports: [DocViewer, ExampleViewer, HeaderLink]
 })
 export class DocViewerModule { }

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

@@ -524,6 +524,14 @@ export const DOCS: { [key: string]: DocItem[] } = {
         prefix: 'cdk-collections-',
       },
     },
+    {
+      id: 'dialog',
+      name: 'Dialog',
+      summary: 'Directives for building accessible dialogs.',
+      exampleSpecs: {
+        prefix: 'cdk-dialog-',
+      },
+    },
     {
       id: 'drag-drop',
       name: 'Drag and Drop',
@@ -544,6 +552,14 @@ export const DOCS: { [key: string]: DocItem[] } = {
         prefix: 'cdk-layout-',
       },
     },
+    {
+      id: 'menu',
+      name: 'Menu',
+      summary: 'Directives for building accessible menus.',
+      exampleSpecs: {
+        prefix: 'cdk-menu-',
+      },
+    },
     {
       id: 'observers',
       name: 'Observers',

src/app/shared/footer/footer.html

@@ -21,7 +21,7 @@
     <div class="docs-footer-copyright">
       <div>
         <span>Powered by Google LLC ©2010-2021.</span>
-        <a href="https://github.com/angular/components/blob/master/LICENSE">Code licensed under an MIT-style License.</a>
+        <a href="https://github.com/angular/components/blob/main/LICENSE">Code licensed under an MIT-style License.</a>
         <span>Documentation licensed under CC BY 4.0.</span>
       </div>
     </div>

src/app/shared/normalized-version.ts

@@ -0,0 +1,11 @@
+import {VERSION} from '@angular/material/core';
+
+/**
+ * Normalized Material version without its additional SHA information if present.
+ *
+ * Snapshot builds of Angular will include these as part of their ng-dev release
+ * stamping. We only want to show the SHA details in the footer of the page.
+ *
+ * e.g. `14.0.0-next.3+38.sha-9d233f4` should become `14.0.0-next.3`
+ */
+export const normalizedMaterialVersion = VERSION.full.match(/(\d+\.\d+\.\d+(?:[^\+]*))/)![1];