chore: add scaffolding for mdc-based tabs (#16270)

Adds all of the scaffolding for the MDC-based tabs implementation.

Relates to #16250.

Author: crisbeto

.github/CODEOWNERS

@@ -93,6 +93,7 @@
 # Note to implementer: please repossess
 /src/material-experimental/mdc-radio/**            @mmalerba
 /src/material-experimental/mdc-slide-toggle/**     @crisbeto
+/src/material-experimental/mdc-tabs/**             @crisbeto
 /src/material-experimental/popover-edit/**         @kseamon @andrewseguin
 
 # CDK experimental package
@@ -146,6 +147,7 @@
 # Note to implementer: please repossess
 /src/dev-app/mdc-radio/**                          @mmalerba
 /src/dev-app/mdc-slide-toggle/**                   @crisbeto
+/src/dev-app/mdc-tabs/**                           @crisbeto
 /src/dev-app/menu/**                               @crisbeto
 /src/dev-app/overlay/**                            @jelbourn @crisbeto
 /src/dev-app/paginator/**                          @andrewseguin
@@ -196,6 +198,7 @@
 # Note to implementer: please repossess
 /src/e2e-app/mdc-radio/**                          @mmalerba
 /src/e2e-app/mdc-slide-toggle/**                   @crisbeto
+/src/e2e-app/mdc-tabs/**                           @crisbeto
 /src/e2e-app/menu/**                               @crisbeto
 /src/e2e-app/progress-bar/**                       @jelbourn @crisbeto @josephperrott
 /src/e2e-app/progress-spinner/**                   @jelbourn @crisbeto @josephperrott

packages.bzl

@@ -85,6 +85,7 @@ MATERIAL_EXPERIMENTAL_PACKAGES = [
     "mdc-card",
     "mdc-checkbox",
     "mdc-chips",
+    "mdc-tabs",
     "mdc-helpers",
     "mdc-menu",
     "mdc-radio",

src/dev-app/BUILD.bazel

@@ -48,6 +48,7 @@ ng_module(
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-radio",
         "//src/material-experimental/mdc-slide-toggle",
+        "//src/material-experimental/mdc-tabs",
         "//src/material-examples:examples",
     ] + CDK_TARGETS + CDK_EXPERIMENTAL_TARGETS + MATERIAL_TARGETS + MATERIAL_EXPERIMENTAL_TARGETS,
 )

src/dev-app/dev-app/dev-app-layout.ts

@@ -75,6 +75,7 @@ export class DevAppLayout {
     {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
+    {name: 'MDC Tabs', route: '/mdc-tabs'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
 
   ];

src/dev-app/dev-app/routes.ts

@@ -61,6 +61,7 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'mdc-slide-toggle',
     loadChildren: 'mdc-slide-toggle/mdc-slide-toggle-demo-module#MdcSlideToggleDemoModule'
   },
+  {path: 'mdc-tabs', loadChildren: 'mdc-tabs/mdc-tabs-demo-module#MdcTabsDemoModule'},
   {path: 'menu', loadChildren: 'menu/menu-demo-module#MenuDemoModule'},
   {path: 'paginator', loadChildren: 'paginator/paginator-demo-module#PaginatorDemoModule'},
   {path: 'platform', loadChildren: 'platform/platform-demo-module#PlatformDemoModule'},

src/dev-app/mdc-tabs/mdc-tabs-demo-module.ts

@@ -0,0 +1,22 @@
+/**
+ * @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 {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
+import {RouterModule} from '@angular/router';
+import {MdcTabsDemo} from './mdc-tabs-demo';
+
+@NgModule({
+  imports: [
+    MatTabsModule,
+    RouterModule.forChild([{path: '', component: MdcTabsDemo}]),
+  ],
+  declarations: [MdcTabsDemo],
+})
+export class MdcTabsDemoModule {
+}

src/dev-app/mdc-tabs/mdc-tabs-demo.html

@@ -0,0 +1,2 @@
+<!-- TODO: copy in demo template from existing tabs demo. -->
+Not yet implemented.

src/dev-app/mdc-tabs/mdc-tabs-demo.scss

@@ -0,0 +1 @@
+// TODO: copy in demo styles from existing tabs demo.

src/dev-app/mdc-tabs/mdc-tabs-demo.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'mdc-tabs-demo',
+  templateUrl: 'mdc-tabs-demo.html',
+  styleUrls: ['mdc-tabs-demo.css'],
+})
+export class MdcTabsDemo {
+}

src/dev-app/system-config.ts

@@ -148,6 +148,8 @@ System.config({
         'dist/packages/material-experimental/mdc-radio/index.js',
     '@angular/material-experimental/mdc-slide-toggle':
         'dist/packages/material-experimental/mdc-slide-toggle/index.js',
+    '@angular/material-experimental/mdc-tabs':
+        'dist/packages/material-experimental/mdc-tabs/index.js',
     '@angular/material-experimental/mdc-helpers':
         'dist/packages/material-experimental/mdc-helpers/index.js',
     '@angular/material-experimental/popover-edit':

src/dev-app/theme.scss

@@ -7,6 +7,7 @@
 @import '../material-experimental/mdc-menu/mdc-menu';
 @import '../material-experimental/mdc-radio/mdc-radio';
 @import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
+@import '../material-experimental/mdc-tabs/mdc-tabs';
 @import '../material-experimental/popover-edit/popover-edit';
 
 // Plus imports for other components in your app.
@@ -24,6 +25,7 @@
 @include mat-menu-typography-mdc(mat-typography-config());
 @include mat-radio-typography-mdc(mat-typography-config());
 @include mat-slide-toggle-typography-mdc(mat-typography-config());
+@include mat-tabs-typography-mdc(mat-typography-config());
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
@@ -41,6 +43,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 @include mat-menu-theme-mdc($candy-app-theme);
 @include mat-radio-theme-mdc($candy-app-theme);
 @include mat-slide-toggle-theme-mdc($candy-app-theme);
+@include mat-tabs-theme-mdc($candy-app-theme);
 @include mat-edit-theme($candy-app-theme);
 @include mat-edit-typography(mat-typography-config());
 // Define an alternate dark theme.
@@ -64,5 +67,6 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
   @include mat-menu-theme-mdc($dark-theme);
   @include mat-radio-theme-mdc($dark-theme);
   @include mat-slide-toggle-theme-mdc($dark-theme);
+  @include mat-tabs-theme-mdc($dark-theme);
   @include mat-edit-theme($dark-theme);
 }

src/e2e-app/BUILD.bazel

@@ -38,6 +38,7 @@ ng_module(
         "//src/material-experimental/mdc-menu",
         "//src/material-experimental/mdc-radio",
         "//src/material-experimental/mdc-slide-toggle",
+        "//src/material-experimental/mdc-tabs",
         "//src/material/button",
         "//src/material/checkbox",
         "//src/material/core",
@@ -78,6 +79,7 @@ sass_binary(
         "//src/material-experimental/mdc-menu:mdc_menu_scss_lib",
         "//src/material-experimental/mdc-radio:mdc_radio_scss_lib",
         "//src/material-experimental/mdc-slide-toggle:mdc_slide_toggle_scss_lib",
+        "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib",
         "//src/material/core:all_themes",
     ],
 )

src/e2e-app/e2e-app/e2e-app-layout.html

@@ -30,6 +30,7 @@
   <a mat-list-item [routerLink]="['mdc-menu']">MDC Menu</a>
   <a mat-list-item [routerLink]="['mdc-radio']">MDC Radio</a>
   <a mat-list-item [routerLink]="['mdc-slide-toggle']">MDC Slide Toggle</a>
+  <a mat-list-item [routerLink]="['mdc-tabs']">MDC Tabs</a>
 </mat-nav-list>
 
 <main>

src/e2e-app/e2e-app/routes.ts

@@ -18,6 +18,7 @@ import {MdcChipsE2e} from '../mdc-chips/mdc-chips-e2e';
 import {MdcMenuE2e} from '../mdc-menu/mdc-menu-e2e';
 import {MdcRadioE2e} from '../mdc-radio/mdc-radio-e2e';
 import {MdcSlideToggleE2e} from '../mdc-slide-toggle/mdc-slide-toggle-e2e';
+import {MdcTabsE2e} from '../mdc-tabs/mdc-tabs-e2e';
 import {MenuE2E} from '../menu/menu-e2e';
 import {ProgressBarE2E} from '../progress-bar/progress-bar-e2e';
 import {ProgressSpinnerE2E} from '../progress-spinner/progress-spinner-e2e';
@@ -51,6 +52,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'mdc-menu', component: MdcMenuE2e},
   {path: 'mdc-radio', component: MdcRadioE2e},
   {path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},
+  {path: 'mdc-tabs', component: MdcTabsE2e},
   {path: 'menu', component: MenuE2E},
   {path: 'progress-bar', component: ProgressBarE2E},
   {path: 'progress-spinner', component: ProgressSpinnerE2E},

src/e2e-app/main-module.ts

@@ -26,6 +26,7 @@ import {MdcChipsE2eModule} from './mdc-chips/mdc-chips-e2e-module';
 import {MdcMenuE2eModule} from './mdc-menu/mdc-menu-e2e-module';
 import {MdcRadioE2eModule} from './mdc-radio/mdc-radio-e2e-module';
 import {MdcSlideToggleE2eModule} from './mdc-slide-toggle/mdc-slide-toggle-e2e-module';
+import {MdcTabsE2eModule} from './mdc-tabs/mdc-tabs-e2e-module';
 import {MenuE2eModule} from './menu/menu-e2e-module';
 import {ProgressBarE2eModule} from './progress-bar/progress-bar-e2e-module';
 import {ProgressSpinnerE2eModule} from './progress-spinner/progress-spinner-e2e-module';
@@ -64,6 +65,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
     MdcMenuE2eModule,
     MdcRadioE2eModule,
     MdcSlideToggleE2eModule,
+    MdcTabsE2eModule,
     MenuE2eModule,
     ProgressBarE2eModule,
     ProgressSpinnerE2eModule,

src/e2e-app/mdc-tabs/mdc-tabs-e2e-module.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 {MatTabsModule} from '@angular/material-experimental/mdc-tabs';
+import {MdcTabsE2e} from './mdc-tabs-e2e';
+
+@NgModule({
+  imports: [MatTabsModule],
+  declarations: [MdcTabsE2e],
+})
+export class MdcTabsE2eModule {
+}

src/e2e-app/mdc-tabs/mdc-tabs-e2e.html

@@ -0,0 +1 @@
+<!-- TODO: copy implementation from existing tabs e2e page. -->

src/e2e-app/mdc-tabs/mdc-tabs-e2e.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 {Component} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'mdc-tabs-e2e',
+  templateUrl: 'mdc-tabs-e2e.html',
+})
+export class MdcTabsE2e {
+  // TODO: copy implementation from existing tabs e2e page.
+}

src/e2e-app/theme.scss

@@ -7,6 +7,7 @@
 @import '../material-experimental/mdc-menu/mdc-menu';
 @import '../material-experimental/mdc-radio/mdc-radio';
 @import '../material-experimental/mdc-slide-toggle/mdc-slide-toggle';
+@import '../material-experimental/mdc-tabs/mdc-tabs';
 
 // Plus imports for other components in your app.
 
@@ -23,6 +24,7 @@
 @include mat-menu-typography-mdc(mat-typography-config());
 @include mat-radio-typography-mdc(mat-typography-config());
 @include mat-slide-toggle-typography-mdc(mat-typography-config());
+@include mat-tabs-typography-mdc(mat-typography-config());
 
 // Define the default theme (same as the example above).
 $candy-app-primary: mat-palette($mat-indigo);
@@ -40,3 +42,4 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 @include mat-menu-theme-mdc($candy-app-theme);
 @include mat-radio-theme-mdc($candy-app-theme);
 @include mat-slide-toggle-theme-mdc($candy-app-theme);
+@include mat-tabs-theme-mdc($candy-app-theme);

src/material-experimental/mdc-tabs/BUILD.bazel

@@ -0,0 +1,67 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary", "sass_library")
+load("@npm_angular_bazel//:index.bzl", "protractor_web_test_suite")
+load("//tools:defaults.bzl", "ng_e2e_test_library", "ng_module")
+
+ng_module(
+    name = "mdc-tabs",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = [":tabs_scss"] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-tabs",
+    deps = [
+        "//src/material/core",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//material-components-web",
+    ],
+)
+
+sass_library(
+    name = "mdc_tabs_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:core_scss_lib",
+    ],
+)
+
+sass_binary(
+    name = "tabs_scss",
+    src = "tabs.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+        "//src/material/core:all_themes",
+    ],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/e2e",
+    ],
+)
+
+protractor_web_test_suite(
+    name = "e2e_tests",
+    configuration = "//src/e2e-app:protractor.conf.js",
+    data = [
+        "//tools/axe-protractor",
+        "@npm//@angular/bazel",
+    ],
+    on_prepare = "//src/e2e-app:start-devserver.js",
+    server = "//src/e2e-app:devserver",
+    tags = ["e2e"],
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/e2e",
+    ],
+)

src/material-experimental/mdc-tabs/README.md

@@ -0,0 +1 @@
+This is a placeholder for the MDC-based implementation of tabs.

src/material-experimental/mdc-tabs/_mdc-tabs.scss

@@ -0,0 +1,13 @@
+@import '../mdc-helpers/mdc-helpers';
+
+@mixin mat-tabs-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    // TODO: MDC theme styles here.
+  }
+}
+
+@mixin mat-tabs-typography-mdc($config) {
+  @include mat-using-mdc-typography($config) {
+    // TODO: MDC typography styles here.
+  }
+}

src/material-experimental/mdc-tabs/index.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export * from './public-api';

src/material-experimental/mdc-tabs/module.ts

@@ -0,0 +1,18 @@
+/**
+ * @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 {CommonModule} from '@angular/common';
+import {NgModule} from '@angular/core';
+import {MatCommonModule} from '@angular/material/core';
+
+@NgModule({
+  imports: [MatCommonModule, CommonModule],
+  exports: [MatCommonModule],
+})
+export class MatTabsModule {
+}

src/material-experimental/mdc-tabs/public-api.ts

@@ -0,0 +1,9 @@
+/**
+ * @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
+ */
+
+export * from './module';

src/material-experimental/mdc-tabs/tabs.e2e.spec.ts

@@ -0,0 +1 @@
+// TODO: copy tests from existing tabs, update as necessary to fix.

src/material-experimental/mdc-tabs/tabs.scss

@@ -0,0 +1 @@
+// TODO: copy tests from existing tabs, update as necessary to fix.