fix(material/schematics): switch away from legacy components (#25839)

Fixes that the various `ng generate` schematics were based on top of the legacy components.

(cherry picked from commit ee2439c)

src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -1,11 +1,11 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { ReactiveFormsModule } from '@angular/forms';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyButtonModule } from '@angular/material/legacy-button';
-import { MatLegacyCardModule } from '@angular/material/legacy-card';
-import { MatLegacyInputModule } from '@angular/material/legacy-input';
-import { MatLegacyRadioModule } from '@angular/material/legacy-radio';
-import { MatLegacySelectModule } from '@angular/material/legacy-select';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
+import { MatInputModule } from '@angular/material/input';
+import { MatRadioModule } from '@angular/material/radio';
+import { MatSelectModule } from '@angular/material/select';
 
 import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
 
@@ -19,11 +19,11 @@ describe('<%= classify(name) %>Component', () => {
       imports: [
         NoopAnimationsModule,
         ReactiveFormsModule,
-        MatLegacyButtonModule,
-        MatLegacyCardModule,
-        MatLegacyInputModule,
-        MatLegacyRadioModule,
-        MatLegacySelectModule,
+        MatButtonModule,
+        MatCardModule,
+        MatInputModule,
+        MatRadioModule,
+        MatSelectModule,
       ]
     }).compileComponents();
   }));

src/material/schematics/ng-generate/address-form/index.spec.ts

@@ -35,10 +35,10 @@ describe('Material address-form schematic', () => {
     const tree = await runner.runSchematicAsync('address-form', baseOptions, app).toPromise();
     const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
 
-    expect(moduleContent).toContain('MatLegacyInputModule');
-    expect(moduleContent).toContain('MatLegacyButtonModule');
-    expect(moduleContent).toContain('MatLegacySelectModule');
-    expect(moduleContent).toContain('MatLegacyRadioModule');
+    expect(moduleContent).toContain('MatInputModule');
+    expect(moduleContent).toContain('MatButtonModule');
+    expect(moduleContent).toContain('MatSelectModule');
+    expect(moduleContent).toContain('MatRadioModule');
     expect(moduleContent).toContain('ReactiveFormsModule');
   });
 

src/material/schematics/ng-generate/address-form/index.ts

@@ -39,36 +39,11 @@ export default function (options: Schema): Rule {
 function addFormModulesToModule(options: Schema) {
   return async (host: Tree) => {
     const modulePath = (await findModuleFromOptions(host, options))!;
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyInputModule',
-      '@angular/material/legacy-input',
-    );
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyButtonModule',
-      '@angular/material/legacy-button',
-    );
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacySelectModule',
-      '@angular/material/legacy-select',
-    );
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyRadioModule',
-      '@angular/material/legacy-radio',
-    );
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyCardModule',
-      '@angular/material/legacy-card',
-    );
+    addModuleImportToModule(host, modulePath, 'MatInputModule', '@angular/material/input');
+    addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button');
+    addModuleImportToModule(host, modulePath, 'MatSelectModule', '@angular/material/select');
+    addModuleImportToModule(host, modulePath, 'MatRadioModule', '@angular/material/radio');
+    addModuleImportToModule(host, modulePath, 'MatCardModule', '@angular/material/card');
     addModuleImportToModule(host, modulePath, 'ReactiveFormsModule', '@angular/forms');
   };
 }

src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -1,11 +1,11 @@
 import { LayoutModule } from '@angular/cdk/layout';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyButtonModule } from '@angular/material/legacy-button';
-import { MatCardModule } from '@angular/material/legacy-card';
+import { MatButtonModule } from '@angular/material/button';
+import { MatCardModule } from '@angular/material/card';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyMenuModule } from '@angular/material/legacy-menu';
+import { MatMenuModule } from '@angular/material/menu';
 
 import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
 
@@ -19,11 +19,11 @@ describe('<%= classify(name) %>Component', () => {
       imports: [
         NoopAnimationsModule,
         LayoutModule,
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatCardModule,
         MatGridListModule,
         MatIconModule,
-        MatLegacyMenuModule,
+        MatMenuModule,
       ]
     }).compileComponents();
   }));

src/material/schematics/ng-generate/dashboard/index.spec.ts

@@ -36,24 +36,18 @@ describe('material-dashboard-schematic', () => {
     const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
 
     expect(moduleContent).toContain('MatGridListModule');
-    expect(moduleContent).toContain('MatLegacyCardModule');
-    expect(moduleContent).toContain('MatLegacyMenuModule');
+    expect(moduleContent).toContain('MatCardModule');
+    expect(moduleContent).toContain('MatMenuModule');
     expect(moduleContent).toContain('MatIconModule');
-    expect(moduleContent).toContain('MatLegacyButtonModule');
+    expect(moduleContent).toContain('MatButtonModule');
 
     expect(moduleContent).toContain(
       `import { MatGridListModule } from '@angular/material/grid-list';`,
     );
-    expect(moduleContent).toContain(
-      `import { MatLegacyCardModule } from '@angular/material/legacy-card';`,
-    );
-    expect(moduleContent).toContain(
-      `import { MatLegacyMenuModule } from '@angular/material/legacy-menu';`,
-    );
+    expect(moduleContent).toContain(`import { MatCardModule } from '@angular/material/card';`);
+    expect(moduleContent).toContain(`import { MatMenuModule } from '@angular/material/menu';`);
     expect(moduleContent).toContain(`import { MatIconModule } from '@angular/material/icon';`);
-    expect(moduleContent).toContain(
-      `import { MatLegacyButtonModule } from '@angular/material/legacy-button';`,
-    );
+    expect(moduleContent).toContain(`import { MatButtonModule } from '@angular/material/button';`);
   });
 
   it('should throw if no name has been specified', async () => {

src/material/schematics/ng-generate/dashboard/index.ts

@@ -40,25 +40,10 @@ function addNavModulesToModule(options: Schema) {
   return async (host: Tree) => {
     const modulePath = (await findModuleFromOptions(host, options))!;
     addModuleImportToModule(host, modulePath, 'MatGridListModule', '@angular/material/grid-list');
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyCardModule',
-      '@angular/material/legacy-card',
-    );
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyMenuModule',
-      '@angular/material/legacy-menu',
-    );
+    addModuleImportToModule(host, modulePath, 'MatCardModule', '@angular/material/card');
+    addModuleImportToModule(host, modulePath, 'MatMenuModule', '@angular/material/menu');
     addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material/icon');
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyButtonModule',
-      '@angular/material/legacy-button',
-    );
+    addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button');
     addModuleImportToModule(host, modulePath, 'LayoutModule', '@angular/cdk/layout');
   };
 }

src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -1,9 +1,9 @@
 import { LayoutModule } from '@angular/cdk/layout';
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule } from '@angular/material/legacy-list';
+import { MatListModule } from '@angular/material/list';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatToolbarModule } from '@angular/material/toolbar';
 
@@ -19,9 +19,9 @@ describe('<%= classify(name) %>Component', () => {
       imports: [
         NoopAnimationsModule,
         LayoutModule,
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconModule,
-        MatLegacyListModule,
+        MatListModule,
         MatSidenavModule,
         MatToolbarModule,
       ]

src/material/schematics/ng-generate/navigation/index.spec.ts

@@ -20,18 +20,14 @@ describe('material-navigation-schematic', () => {
     const moduleContent = getFileContent(tree, '/projects/material/src/app/app.module.ts');
     expect(moduleContent).toMatch(/LayoutModule,\s+/);
     expect(moduleContent).toMatch(/MatToolbarModule,\s+/);
-    expect(moduleContent).toMatch(/MatLegacyButtonModule,\s+/);
+    expect(moduleContent).toMatch(/MatButtonModule,\s+/);
     expect(moduleContent).toMatch(/MatSidenavModule,\s+/);
     expect(moduleContent).toMatch(/MatIconModule,\s+/);
-    expect(moduleContent).toMatch(/MatLegacyListModule\s+],/);
+    expect(moduleContent).toMatch(/MatListModule\s+],/);
     expect(moduleContent).toContain(`import { LayoutModule } from '@angular/cdk/layout';`);
-    expect(moduleContent).toContain(
-      `import { MatLegacyButtonModule } from '@angular/material/legacy-button';`,
-    );
+    expect(moduleContent).toContain(`import { MatButtonModule } from '@angular/material/button';`);
     expect(moduleContent).toContain(`import { MatIconModule } from '@angular/material/icon';`);
-    expect(moduleContent).toContain(
-      `import { MatLegacyListModule } from '@angular/material/legacy-list';`,
-    );
+    expect(moduleContent).toContain(`import { MatListModule } from '@angular/material/list';`);
     expect(moduleContent).toContain(
       `import { MatToolbarModule } from '@angular/material/toolbar';`,
     );

src/material/schematics/ng-generate/navigation/index.ts

@@ -41,19 +41,9 @@ function addNavModulesToModule(options: Schema) {
     const modulePath = (await findModuleFromOptions(host, options))!;
     addModuleImportToModule(host, modulePath, 'LayoutModule', '@angular/cdk/layout');
     addModuleImportToModule(host, modulePath, 'MatToolbarModule', '@angular/material/toolbar');
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyButtonModule',
-      '@angular/material/legacy-button',
-    );
+    addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button');
     addModuleImportToModule(host, modulePath, 'MatSidenavModule', '@angular/material/sidenav');
     addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material/icon');
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyListModule',
-      '@angular/material/legacy-list',
-    );
+    addModuleImportToModule(host, modulePath, 'MatListModule', '@angular/material/list');
   };
 }

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__-datasource.ts.template

@@ -1,5 +1,5 @@
 import { DataSource } from '@angular/cdk/collections';
-import { MatPaginator } from '@angular/material/legacy-paginator';
+import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
 import { map } from 'rxjs/operators';
 import { Observable, of as observableOf, merge } from 'rxjs';

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -1,8 +1,8 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
-import { MatPaginatorModule } from '@angular/material/legacy-paginator';
+import { MatPaginatorModule } from '@angular/material/paginator';
 import { MatSortModule } from '@angular/material/sort';
-import { MatTableModule } from '@angular/material/legacy-table';
+import { MatTableModule } from '@angular/material/table';
 
 import { <%= classify(name) %>Component } from './<%= dasherize(name) %>.component';
 

src/material/schematics/ng-generate/table/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

@@ -1,7 +1,7 @@
 import { AfterViewInit, Component, ViewChild<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
-import { MatPaginator } from '@angular/material/legacy-paginator';
+import { MatPaginator } from '@angular/material/paginator';
 import { MatSort } from '@angular/material/sort';
-import { MatTable } from '@angular/material/legacy-table';
+import { MatTable } from '@angular/material/table';
 import { <%= classify(name) %>DataSource, <%= classify(name) %>Item } from './<%= dasherize(name) %>-datasource';
 
 @Component({

src/material/schematics/ng-generate/table/index.spec.ts

@@ -55,12 +55,10 @@ describe('material-table-schematic', () => {
     expect(moduleContent).toContain('MatPaginatorModule');
     expect(moduleContent).toContain('MatSortModule');
 
-    expect(moduleContent).toContain(
-      `import { MatTableModule } from '@angular/material/legacy-table';`,
-    );
+    expect(moduleContent).toContain(`import { MatTableModule } from '@angular/material/table';`);
     expect(moduleContent).toContain(`import { MatSortModule } from '@angular/material/sort';`);
     expect(moduleContent).toContain(
-      `import { MatPaginatorModule } from '@angular/material/legacy-paginator';`,
+      `import { MatPaginatorModule } from '@angular/material/paginator';`,
     );
   });
 

src/material/schematics/ng-generate/table/index.ts

@@ -39,13 +39,8 @@ export default function (options: Schema): Rule {
 function addTableModulesToModule(options: Schema) {
   return async (host: Tree) => {
     const modulePath = (await findModuleFromOptions(host, options))!;
-    addModuleImportToModule(host, modulePath, 'MatTableModule', '@angular/material/legacy-table');
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatPaginatorModule',
-      '@angular/material/legacy-paginator',
-    );
+    addModuleImportToModule(host, modulePath, 'MatTableModule', '@angular/material/table');
+    addModuleImportToModule(host, modulePath, 'MatPaginatorModule', '@angular/material/paginator');
     addModuleImportToModule(host, modulePath, 'MatSortModule', '@angular/material/sort');
   };
 }

src/material/schematics/ng-generate/tree/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template

@@ -1,5 +1,5 @@
 import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing';
-import { MatLegacyButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatTreeModule } from '@angular/material/tree';
 
@@ -13,7 +13,7 @@ describe('<%= classify(name) %>Component', () => {
     TestBed.configureTestingModule({
       declarations: [ <%= classify(name) %>Component ],
       imports: [
-        MatLegacyButtonModule,
+        MatButtonModule,
         MatIconModule,
         MatTreeModule,
       ]

src/material/schematics/ng-generate/tree/index.spec.ts

@@ -37,7 +37,7 @@ describe('Material tree schematic', () => {
 
     expect(moduleContent).toContain('MatTreeModule');
     expect(moduleContent).toContain('MatIconModule');
-    expect(moduleContent).toContain('MatLegacyButtonModule');
+    expect(moduleContent).toContain('MatButtonModule');
   });
 
   it('should throw if no name has been specified', async () => {

src/material/schematics/ng-generate/tree/index.ts

@@ -41,11 +41,6 @@ function addTreeModulesToModule(options: Schema) {
     const modulePath = (await findModuleFromOptions(host, options))!;
     addModuleImportToModule(host, modulePath, 'MatTreeModule', '@angular/material/tree');
     addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material/icon');
-    addModuleImportToModule(
-      host,
-      modulePath,
-      'MatLegacyButtonModule',
-      '@angular/material/legacy-button',
-    );
+    addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button');
   };
 }