angular · jelbourn · May 10, 2019 · Apr 30, 2019
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -87,6 +87,7 @@
 /src/material-experimental/mdc-button/**           @andrewseguin
 /src/material-experimental/mdc-card/**             @mmalerba
 /src/material-experimental/mdc-checkbox/**         @mmalerba
+/src/material-experimental/mdc-chips/**            @mmalerba
 /src/material-experimental/mdc-helpers/**          @mmalerba
 /src/material-experimental/mdc-menu/**             @crisbeto
 # Note to implementer: please repossess
@@ -139,6 +140,7 @@
 # Note to implementer: please repossess
 /src/dev-app/mdc-card/**                           @mmalerba
 /src/dev-app/mdc-checkbox/**                       @mmalerba
+/src/dev-app/mdc-chips/**                          @mmalerba
 /src/dev-app/mdc-menu/**                           @crisbeto
 # Note to implementer: please repossess
 /src/dev-app/mdc-radio/**                          @mmalerba
@@ -185,6 +187,7 @@
 # Note to implementer: please repossess
 /e2e/components/mdc-card-e2e.spec.ts               @mmalerba
 /e2e/components/mdc-checkbox-e2e.spec.ts           @mmalerba
+/e2e/components/mdc-chips-e2e.spec.ts              @mmalerba
 /e2e/components/mdc-menu-e2e.spec.ts               @crisbeto
 # Note to implementer: please repossess
 /e2e/components/mdc-radio-e2e.spec.ts              @mmalerba
@@ -218,6 +221,7 @@
 # Note to implementer: please repossess
 /src/e2e-app/mdc-card/**                           @mmalerba
 /src/e2e-app/mdc-checkbox/**                       @mmalerba
+/src/e2e-app/mdc-chips/**                          @mmalerba
 /src/e2e-app/mdc-menu/**                           @crisbeto
 # Note to implementer: please repossess
 /src/e2e-app/mdc-radio/**                          @mmalerba

diff --git a/e2e/components/mdc-chips-e2e.spec.ts b/e2e/components/mdc-chips-e2e.spec.ts
@@ -0,0 +1 @@
+// TODO: copy tests from existing mat-chip-list, update as necessary to fix.
diff --git a/src/dev-app/BUILD.bazel b/src/dev-app/BUILD.bazel
@@ -28,6 +28,7 @@ ng_module(
     "//src/material-experimental/mdc-button",
     "//src/material-experimental/mdc-card",
     "//src/material-experimental/mdc-checkbox",
+    "//src/material-experimental/mdc-chips",
     "//src/material-experimental/mdc-menu",
     "//src/material-experimental/mdc-radio",
     "//src/material-experimental/mdc-slide-toggle",
@@ -47,6 +48,7 @@ sass_binary(
     "//src/material-experimental/mdc-button:button_scss_lib",
     "//src/material-experimental/mdc-card:card_scss_lib",
     "//src/material-experimental/mdc-checkbox:checkbox_scss_lib",
+    "//src/material-experimental/mdc-chips:chips_scss_lib",
     "//src/material-experimental/mdc-menu:menu_scss_lib",
     "//src/material-experimental/mdc-radio:radio_scss_lib",
     "//src/material-experimental/mdc-slide-toggle:slide_toggle_scss_lib",

diff --git a/src/dev-app/dev-app/dev-app-layout.ts b/src/dev-app/dev-app/dev-app-layout.ts
@@ -72,6 +72,7 @@ export class DevAppLayout {
     {name: 'MDC Button', route: '/mdc-button'},
     {name: 'MDC Card', route: '/mdc-card'},
     {name: 'MDC Checkbox', route: '/mdc-checkbox'},
+    {name: 'MDC Chips', route: '/mdc-chips'},
     {name: 'MDC Menu', route: '/mdc-menu'},
     {name: 'MDC Radio', route: '/mdc-radio'},
     {name: 'MDC Slide Toggle', route: '/mdc-slide-toggle'},

diff --git a/src/dev-app/dev-app/routes.ts b/src/dev-app/dev-app/routes.ts
@@ -54,6 +54,7 @@ export const DEV_APP_ROUTES: Routes = [
     path: 'mdc-checkbox',
     loadChildren: 'mdc-checkbox/mdc-checkbox-demo-module#MdcCheckboxDemoModule'
   },
+  {path: 'mdc-chips', loadChildren: 'mdc-chips/mdc-chips-demo-module#MdcChipsDemoModule'},
   {path: 'mdc-menu', loadChildren: 'mdc-menu/mdc-menu-demo-module#MdcMenuDemoModule'},
   {path: 'mdc-radio', loadChildren: 'mdc-radio/mdc-radio-demo-module#MdcRadioDemoModule'},
   {

diff --git a/src/dev-app/mdc-chips/mdc-chips-demo-module.ts b/src/dev-app/mdc-chips/mdc-chips-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 {MatChipsModule} from '@angular/material-experimental/mdc-chips';
+import {RouterModule} from '@angular/router';
+import {MdcChipsDemo} from './mdc-chips-demo';
+
+@NgModule({
+  imports: [
+    MatChipsModule,
+    RouterModule.forChild([{path: '', component: MdcChipsDemo}]),
+  ],
+  declarations: [MdcChipsDemo],
+})
+export class MdcChipsDemoModule {
+}
diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.html b/src/dev-app/mdc-chips/mdc-chips-demo.html
@@ -0,0 +1,2 @@
+<!-- TODO: copy in demo template from existing mat-chip demo. -->
+Not yet implemented.
diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.scss b/src/dev-app/mdc-chips/mdc-chips-demo.scss
@@ -0,0 +1 @@
+// TODO: copy in demo styles from existing mat-chips demo.
diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.ts b/src/dev-app/mdc-chips/mdc-chips-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-chips-demo',
+  templateUrl: 'mdc-chips-demo.html',
+  styleUrls: ['mdc-chips-demo.css'],
+})
+export class MdcChipsDemo {
+}
diff --git a/src/dev-app/system-config.ts b/src/dev-app/system-config.ts
@@ -140,6 +140,8 @@ System.config({
         'dist/packages/material-experimental/mdc-card/index.js',
     '@angular/material-experimental/mdc-checkbox':
         'dist/packages/material-experimental/mdc-checkbox/index.js',
+    '@angular/material-experimental/mdc-chips':
+        'dist/packages/material-experimental/mdc-chips/index.js',
     '@angular/material-experimental/mdc-menu':
         'dist/packages/material-experimental/mdc-menu/index.js',
     '@angular/material-experimental/mdc-radio':

diff --git a/src/dev-app/theme.scss b/src/dev-app/theme.scss
@@ -2,6 +2,7 @@
 @import '../material-experimental/mdc-button/mdc-button';
 @import '../material-experimental/mdc-card/mdc-card';
 @import '../material-experimental/mdc-checkbox/mdc-checkbox';
+@import '../material-experimental/mdc-chips/mdc-chips';
 @import '../material-experimental/mdc-helpers/mdc-helpers';
 @import '../material-experimental/mdc-menu/mdc-menu';
 @import '../material-experimental/mdc-radio/mdc-radio';
@@ -19,6 +20,7 @@
 @include mat-fab-typography-mdc(mat-typography-config());
 @include mat-card-typography-mdc(mat-typography-config());
 @include mat-checkbox-typography-mdc(mat-typography-config());
+@include mat-chips-typography-mdc(mat-typography-config());
 @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());
@@ -35,6 +37,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 @include mat-fab-theme-mdc($candy-app-theme);
 @include mat-card-theme-mdc($candy-app-theme);
 @include mat-checkbox-theme-mdc($candy-app-theme);
+@include mat-chips-theme-mdc($candy-app-theme);
 @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);
@@ -57,6 +60,7 @@ $dark-theme: mat-dark-theme($dark-primary, $dark-accent, $dark-warn);
   @include mat-fab-theme-mdc($dark-theme);
   @include mat-card-theme-mdc($dark-theme);
   @include mat-checkbox-theme-mdc($dark-theme);
+  @include mat-chips-theme-mdc($dark-theme);
   @include mat-menu-theme-mdc($dark-theme);
   @include mat-radio-theme-mdc($dark-theme);
   @include mat-slide-toggle-theme-mdc($dark-theme);

diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel
@@ -42,6 +42,7 @@ ng_module(
     "//src/material-experimental/mdc-button",
     "//src/material-experimental/mdc-card",
     "//src/material-experimental/mdc-checkbox",
+    "//src/material-experimental/mdc-chips",
     "//src/material-experimental/mdc-menu",
     "//src/material-experimental/mdc-radio",
     "//src/material-experimental/mdc-slide-toggle",
@@ -60,6 +61,7 @@ sass_binary(
     "//src/material-experimental/mdc-button:button_scss_lib",
     "//src/material-experimental/mdc-card:card_scss_lib",
     "//src/material-experimental/mdc-checkbox:checkbox_scss_lib",
+    "//src/material-experimental/mdc-chips:chips_scss_lib",
     "//src/material-experimental/mdc-menu:menu_scss_lib",
     "//src/material-experimental/mdc-radio:radio_scss_lib",
     "//src/material-experimental/mdc-slide-toggle:slide_toggle_scss_lib",

diff --git a/src/e2e-app/e2e-app/e2e-app-layout.html b/src/e2e-app/e2e-app/e2e-app-layout.html
@@ -25,6 +25,7 @@
   <a mat-list-item [routerLink]="['mdc-button']">MDC Button</a>
   <a mat-list-item [routerLink]="['mdc-card']">MDC Card</a>
   <a mat-list-item [routerLink]="['mdc-checkbox']">MDC Checkbox</a>
+  <a mat-list-item [routerLink]="['mdc-chips']">MDC Chips</a>
   <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>

diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts
@@ -13,6 +13,7 @@ import {ListE2e} from '../list/list-e2e';
 import {MdcButtonE2e} from '../mdc-button/mdc-button-e2e';
 import {MdcCardE2e} from '../mdc-card/mdc-card-e2e';
 import {MdcCheckboxE2e} from '../mdc-checkbox/mdc-checkbox-e2e';
+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';
@@ -43,6 +44,7 @@ export const E2E_APP_ROUTES: Routes = [
   {path: 'mdc-button', component: MdcButtonE2e},
   {path: 'mdc-card', component: MdcCardE2e},
   {path: 'mdc-checkbox', component: MdcCheckboxE2e},
+  {path: 'mdc-chips', component: MdcChipsE2e},
   {path: 'mdc-menu', component: MdcMenuE2e},
   {path: 'mdc-radio', component: MdcRadioE2e},
   {path: 'mdc-slide-toggle', component: MdcSlideToggleE2e},

diff --git a/src/e2e-app/main-module.ts b/src/e2e-app/main-module.ts
@@ -21,6 +21,7 @@ import {ListE2eModule} from './list/list-e2e-module';
 import {MdcButtonE2eModule} from './mdc-button/mdc-button-e2e-module';
 import {MdcCardE2eModule} from './mdc-card/mdc-card-e2e-module';
 import {MdcCheckboxE2eModule} from './mdc-checkbox/mdc-checkbox-e2e-module';
+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';
@@ -57,6 +58,7 @@ import {VirtualScrollE2eModule} from './virtual-scroll/virtual-scroll-e2e-module
     MdcButtonE2eModule,
     MdcCardE2eModule,
     MdcCheckboxE2eModule,
+    MdcChipsE2eModule,
     MdcMenuE2eModule,
     MdcRadioE2eModule,
     MdcSlideToggleE2eModule,

diff --git a/src/e2e-app/mdc-chips/mdc-chips-e2e-module.ts b/src/e2e-app/mdc-chips/mdc-chips-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 {MatChipsModule} from '@angular/material-experimental/mdc-chips';
+import {MdcChipsE2e} from './mdc-chips-e2e';
+
+@NgModule({
+  imports: [MatChipsModule],
+  declarations: [MdcChipsE2e],
+})
+export class MdcChipsE2eModule {
+}
diff --git a/src/e2e-app/mdc-chips/mdc-chips-e2e.html b/src/e2e-app/mdc-chips/mdc-chips-e2e.html
@@ -0,0 +1 @@
+<!-- TODO: copy implementation from existing mat-chip-list e2e page. -->
diff --git a/src/e2e-app/mdc-chips/mdc-chips-e2e.ts b/src/e2e-app/mdc-chips/mdc-chips-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-chips-e2e',
+  templateUrl: 'mdc-chips-e2e.html',
+})
+export class MdcChipsE2e {
+  // TODO: copy implementation from existing mat-chip-list e2e page.
+}
diff --git a/src/e2e-app/theme.scss b/src/e2e-app/theme.scss
@@ -2,6 +2,7 @@
 @import '../material-experimental/mdc-button/mdc-button';
 @import '../material-experimental/mdc-card/mdc-card';
 @import '../material-experimental/mdc-checkbox/mdc-checkbox';
+@import '../material-experimental/mdc-chips/mdc-chips';
 @import '../material-experimental/mdc-helpers/mdc-helpers';
 @import '../material-experimental/mdc-menu/mdc-menu';
 @import '../material-experimental/mdc-radio/mdc-radio';
@@ -18,6 +19,7 @@
 @include mat-fab-typography-mdc(mat-typography-config());
 @include mat-card-typography-mdc(mat-typography-config());
 @include mat-checkbox-typography-mdc(mat-typography-config());
+@include mat-chips-typography-mdc(mat-typography-config());
 @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());
@@ -34,6 +36,7 @@ $candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent);
 @include mat-fab-theme-mdc($candy-app-theme);
 @include mat-card-theme-mdc($candy-app-theme);
 @include mat-checkbox-theme-mdc($candy-app-theme);
+@include mat-chips-theme-mdc($candy-app-theme);
 @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);
diff --git a/src/material-experimental/mdc-chips/BUILD.bazel b/src/material-experimental/mdc-chips/BUILD.bazel
@@ -0,0 +1,39 @@
+package(default_visibility=["//visibility:public"])
+
+load("@io_bazel_rules_sass//:defs.bzl", "sass_library", "sass_binary")
+load("//tools:defaults.bzl", "ng_module")
+load("//:packages.bzl", "CDK_TARGETS", "MATERIAL_TARGETS")
+
+ng_module(
+  name = "mdc-chips",
+  srcs = glob(["**/*.ts"], exclude=["**/*.spec.ts"]),
+  module_name = "@angular/material-experimental/mdc-chips",
+  assets = [":chips_scss"] + glob(["**/*.html"]),
+  deps = [
+    "@npm//@angular/common",
+    "@npm//@angular/core",
+    "@npm//material-components-web",
+  ] + CDK_TARGETS + MATERIAL_TARGETS,
+)
+
+sass_library(
+  name = "chips_scss_lib",
+  srcs = glob(["**/_*.scss"]),
+  deps = [
+    "//src/material/core:core_scss_lib",
+    "//src/material-experimental/mdc-helpers:mdc_helpers_scss_lib",
+    "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+  ],
+)
+
+sass_binary(
+  name = "chips_scss",
+  src = "chips.scss",
+  include_paths = [
+    "external/npm/node_modules",
+  ],
+  deps = [
+    "//src/material/core:all_themes",
+    "//src/material-experimental/mdc-helpers:mdc_scss_deps_lib",
+  ]
+)
diff --git a/src/material-experimental/mdc-chips/README.md b/src/material-experimental/mdc-chips/README.md
@@ -0,0 +1 @@
+This is a placeholder for the MDC-based implementation of chips.
diff --git a/src/material-experimental/mdc-chips/_mdc-chips.scss b/src/material-experimental/mdc-chips/_mdc-chips.scss
@@ -0,0 +1,13 @@
+@import '../mdc-helpers/mdc-helpers';
+
+@mixin mat-chips-theme-mdc($theme) {
+  @include mat-using-mdc-theme($theme) {
+    // TODO: MDC theme styles here.
+  }
+}
+
+@mixin mat-chips-typography-mdc($config) {
+  @include mat-using-mdc-typography($config) {
+    // TODO: MDC typography styles here.
+  }
+}
diff --git a/src/material-experimental/mdc-chips/chip-cell.ts b/src/material-experimental/mdc-chips/chip-cell.ts
@@ -0,0 +1,19 @@
+/**
+ * @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 {Directive} from '@angular/core';
+
+@Directive({
+  selector: 'mat-chip-cell',
+  host: {
+    'class': 'mat-mdc-chip-cell',
+  },
+})
+export class MatChipCell {
+  // TODO: set up MDC foundation class.
+}
diff --git a/src/material-experimental/mdc-chips/chip-grid.html b/src/material-experimental/mdc-chips/chip-grid.html
@@ -0,0 +1 @@
+<!-- TODO: MDC template here. -->
diff --git a/src/material-experimental/mdc-chips/chip-grid.ts b/src/material-experimental/mdc-chips/chip-grid.ts
@@ -0,0 +1,24 @@
+/**
+ * @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 {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/core';
+
+@Component({
+  moduleId: module.id,
+  selector: 'mat-chip-grid',
+  templateUrl: 'chip-grid.html',
+  styleUrls: ['chips.css'],
+  host: {
+    'class': 'mat-mdc-chip-grid',
+  },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class MatChipGrid {
+  // TODO: set up MDC foundation class.
+}
diff --git a/src/material-experimental/mdc-chips/chips.scss b/src/material-experimental/mdc-chips/chips.scss
@@ -0,0 +1 @@
+// TODO: MDC core styles here.
diff --git a/src/material-experimental/mdc-chips/chips.spec.ts b/src/material-experimental/mdc-chips/chips.spec.ts
@@ -0,0 +1 @@
+// TODO: copy tests from existing mat-chip-list, update as necessary to fix.
diff --git a/src/material-experimental/mdc-chips/index.ts b/src/material-experimental/mdc-chips/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';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// TODO: copy tests from existing mat-chip-list, update as necessary to fix.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		<!-- TODO: copy in demo template from existing mat-chip demo. -->
		Not yet implemented.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		// TODO: copy in demo styles from existing mat-chips demo.
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		<!-- TODO: copy implementation from existing mat-chip-list e2e page. -->
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		This is a placeholder for the MDC-based implementation of chips.