From c2ab6d7a198f17b5f7f63565e4347ae24965068f Mon Sep 17 00:00:00 2001 From: Vanessa Schmitt Date: Tue, 30 Apr 2019 15:32:56 -0700 Subject: [PATCH] chore: add skeleton files for MDC-based implementation of chips --- .github/CODEOWNERS | 4 ++ e2e/components/mdc-chips-e2e.spec.ts | 1 + src/dev-app/BUILD.bazel | 2 + src/dev-app/dev-app/dev-app-layout.ts | 1 + src/dev-app/dev-app/routes.ts | 1 + .../mdc-chips/mdc-chips-demo-module.ts | 22 +++++++++++ src/dev-app/mdc-chips/mdc-chips-demo.html | 2 + src/dev-app/mdc-chips/mdc-chips-demo.scss | 1 + src/dev-app/mdc-chips/mdc-chips-demo.ts | 18 +++++++++ src/dev-app/system-config.ts | 2 + src/dev-app/theme.scss | 4 ++ src/e2e-app/BUILD.bazel | 2 + src/e2e-app/e2e-app/e2e-app-layout.html | 1 + src/e2e-app/e2e-app/routes.ts | 2 + src/e2e-app/main-module.ts | 2 + src/e2e-app/mdc-chips/mdc-chips-e2e-module.ts | 18 +++++++++ src/e2e-app/mdc-chips/mdc-chips-e2e.html | 1 + src/e2e-app/mdc-chips/mdc-chips-e2e.ts | 18 +++++++++ src/e2e-app/theme.scss | 3 ++ .../mdc-chips/BUILD.bazel | 39 +++++++++++++++++++ src/material-experimental/mdc-chips/README.md | 1 + .../mdc-chips/_mdc-chips.scss | 13 +++++++ .../mdc-chips/chip-cell.ts | 19 +++++++++ .../mdc-chips/chip-grid.html | 1 + .../mdc-chips/chip-grid.ts | 24 ++++++++++++ .../mdc-chips/chips.scss | 1 + .../mdc-chips/chips.spec.ts | 1 + src/material-experimental/mdc-chips/index.ts | 9 +++++ src/material-experimental/mdc-chips/module.ts | 21 ++++++++++ .../mdc-chips/public-api.ts | 11 ++++++ .../mdc-chips/tsconfig-build.json | 15 +++++++ .../kitchen-sink-mdc/kitchen-sink-mdc.html | 5 +++ .../kitchen-sink-mdc/kitchen-sink-mdc.ts | 2 + src/universal-app/theme.scss | 3 ++ test/karma-system-config.js | 2 + 35 files changed, 272 insertions(+) create mode 100644 e2e/components/mdc-chips-e2e.spec.ts create mode 100644 src/dev-app/mdc-chips/mdc-chips-demo-module.ts create mode 100644 src/dev-app/mdc-chips/mdc-chips-demo.html create mode 100644 src/dev-app/mdc-chips/mdc-chips-demo.scss create mode 100644 src/dev-app/mdc-chips/mdc-chips-demo.ts create mode 100644 src/e2e-app/mdc-chips/mdc-chips-e2e-module.ts create mode 100644 src/e2e-app/mdc-chips/mdc-chips-e2e.html create mode 100644 src/e2e-app/mdc-chips/mdc-chips-e2e.ts create mode 100644 src/material-experimental/mdc-chips/BUILD.bazel create mode 100644 src/material-experimental/mdc-chips/README.md create mode 100644 src/material-experimental/mdc-chips/_mdc-chips.scss create mode 100644 src/material-experimental/mdc-chips/chip-cell.ts create mode 100644 src/material-experimental/mdc-chips/chip-grid.html create mode 100644 src/material-experimental/mdc-chips/chip-grid.ts create mode 100644 src/material-experimental/mdc-chips/chips.scss create mode 100644 src/material-experimental/mdc-chips/chips.spec.ts create mode 100644 src/material-experimental/mdc-chips/index.ts create mode 100644 src/material-experimental/mdc-chips/module.ts create mode 100644 src/material-experimental/mdc-chips/public-api.ts create mode 100644 src/material-experimental/mdc-chips/tsconfig-build.json diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 09b91af8a403..2a16fd8b12b8 100644 --- 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 new file mode 100644 index 000000000000..5a013f4f5e68 --- /dev/null +++ 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 index a2e1dfb4c5db..a6207fdc29d1 100644 --- 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 index b93b327745e7..0955469b2711 100644 --- 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 index ee84fda9cecf..d3438c20a31f 100644 --- 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 new file mode 100644 index 000000000000..ca5497af6481 --- /dev/null +++ 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 new file mode 100644 index 000000000000..38dbb08da705 --- /dev/null +++ b/src/dev-app/mdc-chips/mdc-chips-demo.html @@ -0,0 +1,2 @@ + +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 new file mode 100644 index 000000000000..0b1af89fb3c5 --- /dev/null +++ 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 new file mode 100644 index 000000000000..3f912d7b5307 --- /dev/null +++ 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 index 2173dd8609d9..c8c9243d2967 100644 --- 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 index 1b8abc0511e7..16474a761269 100644 --- 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 index 62ef59575468..702a98aff20c 100644 --- 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 index 20aca3692133..c2716b6dc415 100644 --- a/src/e2e-app/e2e-app/e2e-app-layout.html +++ b/src/e2e-app/e2e-app/e2e-app-layout.html @@ -25,6 +25,7 @@ MDC Button MDC Card MDC Checkbox + MDC Chips MDC Menu MDC Radio MDC Slide Toggle diff --git a/src/e2e-app/e2e-app/routes.ts b/src/e2e-app/e2e-app/routes.ts index a33c1d85c9f9..a6d14b935578 100644 --- 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 index 8183bbd1874c..6e10b7b4a300 100644 --- 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 new file mode 100644 index 000000000000..23af65a104a6 --- /dev/null +++ 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 new file mode 100644 index 000000000000..c0a217f7be2c --- /dev/null +++ b/src/e2e-app/mdc-chips/mdc-chips-e2e.html @@ -0,0 +1 @@ + diff --git a/src/e2e-app/mdc-chips/mdc-chips-e2e.ts b/src/e2e-app/mdc-chips/mdc-chips-e2e.ts new file mode 100644 index 000000000000..83396adf18ab --- /dev/null +++ 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 index dd7dd3438286..9ce08a53bd8a 100644 --- 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 new file mode 100644 index 000000000000..e7f64a09ad98 --- /dev/null +++ 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 new file mode 100644 index 000000000000..a8cadd2ae98e --- /dev/null +++ b/src/material-experimental/mdc-chips/README.md @@ -0,0 +1 @@ +This is a placeholder for the MDC-based implementation of chips. \ No newline at end of file diff --git a/src/material-experimental/mdc-chips/_mdc-chips.scss b/src/material-experimental/mdc-chips/_mdc-chips.scss new file mode 100644 index 000000000000..3a9e81463eb2 --- /dev/null +++ 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 new file mode 100644 index 000000000000..4745d0726503 --- /dev/null +++ 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 new file mode 100644 index 000000000000..9c75ddb6f477 --- /dev/null +++ b/src/material-experimental/mdc-chips/chip-grid.html @@ -0,0 +1 @@ + diff --git a/src/material-experimental/mdc-chips/chip-grid.ts b/src/material-experimental/mdc-chips/chip-grid.ts new file mode 100644 index 000000000000..1ca5fae2adbf --- /dev/null +++ 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 new file mode 100644 index 000000000000..f61450904c9a --- /dev/null +++ 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 new file mode 100644 index 000000000000..5a013f4f5e68 --- /dev/null +++ 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 new file mode 100644 index 000000000000..676ca90f1ffa --- /dev/null +++ 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'; diff --git a/src/material-experimental/mdc-chips/module.ts b/src/material-experimental/mdc-chips/module.ts new file mode 100644 index 000000000000..d556ee664fe1 --- /dev/null +++ b/src/material-experimental/mdc-chips/module.ts @@ -0,0 +1,21 @@ +/** + * @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'; +import {MatChipCell} from './chip-cell'; +import {MatChipGrid} from './chip-grid'; + +@NgModule({ + imports: [MatCommonModule, CommonModule], + exports: [MatChipCell, MatChipGrid, MatCommonModule], + declarations: [MatChipCell, MatChipGrid], +}) +export class MatChipsModule { +} diff --git a/src/material-experimental/mdc-chips/public-api.ts b/src/material-experimental/mdc-chips/public-api.ts new file mode 100644 index 000000000000..52144a2ff370 --- /dev/null +++ b/src/material-experimental/mdc-chips/public-api.ts @@ -0,0 +1,11 @@ +/** + * @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 './chip-cell'; +export * from './chip-grid'; +export * from './module'; diff --git a/src/material-experimental/mdc-chips/tsconfig-build.json b/src/material-experimental/mdc-chips/tsconfig-build.json new file mode 100644 index 000000000000..396966e652c9 --- /dev/null +++ b/src/material-experimental/mdc-chips/tsconfig-build.json @@ -0,0 +1,15 @@ +{ + "extends": "../tsconfig-build", + "files": [ + "public-api.ts", + "../typings.d.ts" + ], + "angularCompilerOptions": { + "annotateForClosureCompiler": true, + "strictMetadataEmit": true, + "flatModuleOutFile": "index.js", + "flatModuleId": "@angular/material-experimental/mdc-chips", + "skipTemplateCodegen": true, + "fullTemplateTypeCheck": true + } +} diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html index 738d63d81cab..5e23fbe81fae 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.html @@ -16,6 +16,11 @@

MDC checkbox

with a label +

MDC chips

+ + +Not yet implemented. +

MDC menu

diff --git a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts index 9222d8cac6dd..64a1317cd8d9 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts @@ -2,6 +2,7 @@ import {Component, NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCardModule} from '@angular/material-experimental/mdc-card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; +import {MatChipsModule} from '@angular/material-experimental/mdc-chips'; import {MatMenuModule} from '@angular/material-experimental/mdc-menu'; import {MatRadioModule} from '@angular/material-experimental/mdc-radio'; import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle'; @@ -18,6 +19,7 @@ export class KitchenSinkMdc { MatButtonModule, MatCardModule, MatCheckboxModule, + MatChipsModule, MatMenuModule, MatRadioModule, MatSlideToggleModule, diff --git a/src/universal-app/theme.scss b/src/universal-app/theme.scss index dd7dd3438286..9ce08a53bd8a 100644 --- a/src/universal-app/theme.scss +++ b/src/universal-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/test/karma-system-config.js b/test/karma-system-config.js index d502ca005076..81d6e83e2288 100644 --- a/test/karma-system-config.js +++ b/test/karma-system-config.js @@ -136,6 +136,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-helpers': 'dist/packages/material-experimental/mdc-helpers/index.js', '@angular/material-experimental/mdc-menu':