feat(material-experimental/mdc-table): add skeleton

.github/CODEOWNERS

@@ -108,6 +108,7 @@
 /src/material-experimental/mdc-slider/**           @devversion
 /src/material-experimental/mdc-tabs/**             @crisbeto
 /src/material-experimental/mdc-sidenav/**          @crisbeto
+/src/material-experimental/mdc-table/**            @andrewseguin
 /src/material-experimental/mdc-theming/**          @mmalerba
 /src/material-experimental/mdc-typography/**       @mmalerba
 /src/material-experimental/popover-edit/**         @kseamon @andrewseguin
@@ -165,6 +166,7 @@
 /src/dev-app/mdc-snackbar/**                       @opozo
 /src/dev-app/mdc-slide-toggle/**                   @crisbeto
 /src/dev-app/mdc-slider/**                         @devversion
+/src/dev-app/mdc-table/**                          @andrewseguin
 /src/dev-app/mdc-tabs/**                           @crisbeto
 /src/dev-app/menu/**                               @crisbeto
 /src/dev-app/overlay/**                            @jelbourn @crisbeto

src/dev-app/BUILD.bazel

@@ -56,6 +56,7 @@ ng_module(
         "//src/dev-app/mdc-slide-toggle",
         "//src/dev-app/mdc-slider",
         "//src/dev-app/mdc-snackbar",
+        "//src/dev-app/mdc-table",
         "//src/dev-app/mdc-tabs",
         "//src/dev-app/menu",
         "//src/dev-app/paginator",
@@ -131,6 +132,7 @@ filegroup(
         "@npm//:node_modules/@material/base/dist/mdc.base.js",
         "@npm//:node_modules/@material/checkbox/dist/mdc.checkbox.js",
         "@npm//:node_modules/@material/chips/dist/mdc.chips.js",
+        "@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js",
         "@npm//:node_modules/@material/dialog/dist/mdc.dialog.js",
         "@npm//:node_modules/@material/dom/dist/mdc.dom.js",
         "@npm//:node_modules/@material/drawer/dist/mdc.drawer.js",

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

@@ -80,6 +80,7 @@ export class DevAppLayout {
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},
     {name: 'MDC Slider', route: '/mdc-slider'},
     {name: 'MDC Snackbar', route: '/mdc-snackbar'},
+    {name: 'MDC Table', route: '/mdc-table'},
   ];
 
   constructor(

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

@@ -74,6 +74,7 @@ export const DEV_APP_ROUTES: Routes = [
     loadChildren: 'mdc-slide-toggle/mdc-slide-toggle-demo-module#MdcSlideToggleDemoModule'
   },
   {path: 'mdc-slider', loadChildren: 'mdc-slider/mdc-slider-demo-module#MdcSliderDemoModule'},
+  {path: 'mdc-table', loadChildren: 'mdc-table/mdc-table-demo-module#MdcTableDemoModule'},
   {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'},

src/dev-app/mdc-table/BUILD.bazel

@@ -0,0 +1,22 @@
+package(default_visibility = ["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
+
+ng_module(
+    name = "mdc-table",
+    srcs = glob(["**/*.ts"]),
+    assets = [
+        "mdc-table-demo.html",
+        ":mdc_table_demo_scss",
+    ],
+    deps = [
+        "//src/material-experimental/mdc-table",
+        "@npm//@angular/router",
+    ],
+)
+
+sass_binary(
+    name = "mdc_table_demo_scss",
+    src = "mdc-table-demo.scss",
+)

src/dev-app/mdc-table/mdc-table-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 {MatTableModule} from '@angular/material-experimental/mdc-table';
+import {RouterModule} from '@angular/router';
+import {MdcTableDemo} from './mdc-table-demo';
+
+@NgModule({
+  imports: [
+    MatTableModule,
+    RouterModule.forChild([{path: '', component: MdcTableDemo}]),
+  ],
+  declarations: [MdcTableDemo],
+})
+export class MdcTableDemoModule {
+}

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

@@ -0,0 +1,28 @@
+<table mat-table [dataSource]="dataSource">
+  <!-- Position Column -->
+  <ng-container matColumnDef="position">
+    <th mat-header-cell *matHeaderCellDef> No. </th>
+    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+  </ng-container>
+
+  <!-- Name Column -->
+  <ng-container matColumnDef="name">
+    <th mat-header-cell *matHeaderCellDef> Name </th>
+    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+  </ng-container>
+
+  <!-- Weight Column -->
+  <ng-container matColumnDef="weight">
+    <th mat-header-cell *matHeaderCellDef> Weight </th>
+    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+  </ng-container>
+
+  <!-- Symbol Column -->
+  <ng-container matColumnDef="symbol">
+    <th mat-header-cell *matHeaderCellDef> Symbol </th>
+    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>

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

@@ -0,0 +1,39 @@
+/**
+ * @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';
+
+export interface PeriodicElement {
+  name: string;
+  position: number;
+  weight: number;
+  symbol: string;
+}
+
+const ELEMENT_DATA: PeriodicElement[] = [
+  {position: 1, name: 'Hydrogen', weight: 1.0079, symbol: 'H'},
+  {position: 2, name: 'Helium', weight: 4.0026, symbol: 'He'},
+  {position: 3, name: 'Lithium', weight: 6.941, symbol: 'Li'},
+  {position: 4, name: 'Beryllium', weight: 9.0122, symbol: 'Be'},
+  {position: 5, name: 'Boron', weight: 10.811, symbol: 'B'},
+  {position: 6, name: 'Carbon', weight: 12.0107, symbol: 'C'},
+  {position: 7, name: 'Nitrogen', weight: 14.0067, symbol: 'N'},
+  {position: 8, name: 'Oxygen', weight: 15.9994, symbol: 'O'},
+  {position: 9, name: 'Fluorine', weight: 18.9984, symbol: 'F'},
+  {position: 10, name: 'Neon', weight: 20.1797, symbol: 'Ne'},
+];
+
+@Component({
+  selector: 'mdc-table-demo',
+  templateUrl: 'mdc-table-demo.html',
+  styleUrls: ['mdc-table-demo.css'],
+})
+export class MdcTableDemo {
+  displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
+  dataSource = ELEMENT_DATA;
+}

src/material-experimental/config.bzl

@@ -19,6 +19,7 @@ entryPoints = [
     "mdc-slide-toggle/testing",
     "mdc-slider",
     "mdc-tabs",
+    "mdc-table",
     "popover-edit",
 ]
 

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

@@ -0,0 +1,89 @@
+package(default_visibility = ["//visibility:public"])
+
+load("//src/e2e-app:test_suite.bzl", "e2e_test_suite")
+load(
+    "//tools:defaults.bzl",
+    "ng_e2e_test_library",
+    "ng_module",
+    "ng_test_library",
+    "ng_web_test_suite",
+    "sass_binary",
+    "sass_library",
+)
+
+ng_module(
+    name = "mdc-table",
+    srcs = glob(
+        ["**/*.ts"],
+        exclude = ["**/*.spec.ts"],
+    ),
+    assets = [":table_scss"] + glob(["**/*.html"]),
+    module_name = "@angular/material-experimental/mdc-table",
+    deps = [
+        "//src/cdk/table",
+        "//src/material/core",
+        "@npm//@angular/common",
+        "@npm//@angular/core",
+        "@npm//material-components-web",
+    ],
+)
+
+sass_library(
+    name = "mdc_table_scss_lib",
+    srcs = glob(["**/_*.scss"]),
+)
+
+sass_binary(
+    name = "table_scss",
+    src = "table.scss",
+    include_paths = [
+        "external/npm/node_modules",
+    ],
+)
+
+###########
+# Testing
+###########
+
+ng_test_library(
+    name = "table_tests_lib",
+    srcs = glob(
+        ["**/*.spec.ts"],
+        exclude = ["**/*.e2e.spec.ts"],
+    ),
+    deps = [
+        ":mdc-table",
+        "//src/cdk/bidi",
+        "//src/cdk/keycodes",
+        "//src/cdk/platform",
+        "//src/cdk/table",
+        "//src/cdk/testing/private",
+        "@npm//@angular/forms",
+        "@npm//@angular/platform-browser",
+    ],
+)
+
+ng_web_test_suite(
+    name = "unit_tests",
+    static_files = ["@npm//:node_modules/@material/data-table/dist/mdc.dataTable.js"],
+    deps = [
+        ":table_tests_lib",
+        "//src/material-experimental:mdc_require_config.js",
+    ],
+)
+
+ng_e2e_test_library(
+    name = "e2e_test_sources",
+    srcs = glob(["**/*.e2e.spec.ts"]),
+    deps = [
+        "//src/cdk/testing/private/e2e",
+    ],
+)
+
+e2e_test_suite(
+    name = "e2e_tests",
+    deps = [
+        ":e2e_test_sources",
+        "//src/cdk/testing/private/e2e",
+    ],
+)

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

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

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

@@ -0,0 +1,7 @@
+@mixin mat-table-theme-mdc($theme) {
+  // TODO: Include theme styles for MDC Table
+}
+
+@mixin mat-table-typography-mdc($config) {
+  // TODO: Include typography styles for MDC Table
+}

src/material-experimental/mdc-table/cell.ts

@@ -0,0 +1,115 @@
+/**
+ * @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 {BooleanInput} from '@angular/cdk/coercion';
+import {Directive, ElementRef, Input} from '@angular/core';
+import {
+  CdkCell,
+  CdkCellDef,
+  CdkColumnDef, CdkFooterCell, CdkFooterCellDef,
+  CdkHeaderCell,
+  CdkHeaderCellDef,
+} from '@angular/cdk/table';
+
+/**
+ * Cell definition for the mat-table.
+ * Captures the template of a column's data row cell as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[matCellDef]',
+  providers: [{provide: CdkCellDef, useExisting: MatCellDef}]
+})
+export class MatCellDef extends CdkCellDef {}
+
+/**
+ * Header cell definition for the mat-table.
+ * Captures the template of a column's header cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[matHeaderCellDef]',
+  providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}]
+})
+export class MatHeaderCellDef extends CdkHeaderCellDef {}
+
+/**
+ * Footer cell definition for the mat-table.
+ * Captures the template of a column's footer cell and as well as cell-specific properties.
+ */
+@Directive({
+  selector: '[matFooterCellDef]',
+  providers: [{provide: CdkFooterCellDef, useExisting: MatFooterCellDef}]
+})
+export class MatFooterCellDef extends CdkFooterCellDef {}
+
+/**
+ * Column definition for the mat-table.
+ * Defines a set of cells available for a table column.
+ */
+@Directive({
+  selector: '[matColumnDef]',
+  inputs: ['sticky'],
+  providers: [
+    {provide: CdkColumnDef, useExisting: MatColumnDef},
+    {provide: 'MAT_SORT_HEADER_COLUMN_DEF', useExisting: MatColumnDef}
+  ],
+})
+export class MatColumnDef extends CdkColumnDef {
+  /** Unique name for this column. */
+  @Input('matColumnDef') name: string;
+
+  static ngAcceptInputType_sticky: BooleanInput;
+  static ngAcceptInputType_stickyEnd: BooleanInput;
+}
+
+/** Header cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'th[mat-header-cell]',
+  host: {
+    'class': 'mat-mdc-header-cell',
+    'role': 'columnheader',
+  },
+})
+export class MatHeaderCell extends CdkHeaderCell {
+  constructor(columnDef: CdkColumnDef,
+              elementRef: ElementRef<HTMLElement>) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
+  }
+}
+
+/** Footer cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'td[mat-footer-cell]',
+  host: {
+    'class': 'mat-mdc-footer-cell',
+    'role': 'gridcell',
+  },
+})
+export class MatFooterCell extends CdkFooterCell {
+  constructor(columnDef: CdkColumnDef,
+              elementRef: ElementRef) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
+  }
+}
+
+/** Cell template container that adds the right classes and role. */
+@Directive({
+  selector: 'td[mat-cell]',
+  host: {
+    'class': 'mat-mdc-cell',
+    'role': 'gridcell',
+  },
+})
+export class MatCell extends CdkCell {
+  constructor(columnDef: CdkColumnDef,
+              elementRef: ElementRef<HTMLElement>) {
+    super(columnDef, elementRef);
+    elementRef.nativeElement.classList.add(`mat-column-${columnDef.cssClassFriendlyName}`);
+  }
+}

src/material-experimental/mdc-table/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';