diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index f2e7d11aa0b0..5378feda41cb 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -5,7 +5,7 @@ /src/material/bottom-sheet/** @jelbourn @crisbeto /src/material/button-toggle/** @andrewseguin /src/material/button/** @andrewseguin -/src/material/card/** @andrewseguin +/src/material/legacy-card/** @andrewseguin /src/material/checkbox/** @andrewseguin @devversion /src/material/chips/** @andrewseguin /src/material/datepicker/** @mmalerba @crisbeto @zarend @@ -107,7 +107,7 @@ /src/material-experimental/column-resize/** @andrewseguin /src/material-experimental/mdc-autocomplete/** @crisbeto /src/material-experimental/mdc-button/** @andrewseguin -/src/material-experimental/mdc-card/** @mmalerba +/src/material/card/** @mmalerba /src/material-experimental/mdc-checkbox/** @mmalerba /src/material-experimental/mdc-chips/** @mmalerba /src/material-experimental/mdc-core/** @crisbeto @@ -316,7 +316,7 @@ /tools/public_api_guard/material/bottom-sheet** @andrewseguin @crisbeto /tools/public_api_guard/material/button-toggle** @andrewseguin /tools/public_api_guard/material/button** @andrewseguin -/tools/public_api_guard/material/card** @andrewseguin +/tools/public_api_guard/material/legacy-card** @andrewseguin /tools/public_api_guard/material/checkbox** @andrewseguin @devversion /tools/public_api_guard/material/chips** @andrewseguin /tools/public_api_guard/material/chips/testing** @andrewseguin diff --git a/.ng-dev/commit-message.mts b/.ng-dev/commit-message.mts index 9ed3beb87dda..4692d760128d 100644 --- a/.ng-dev/commit-message.mts +++ b/.ng-dev/commit-message.mts @@ -42,7 +42,7 @@ export const commitMessage: CommitMessageConfig = { 'material-experimental/column-resize', 'material-experimental/mdc-autocomplete', 'material-experimental/mdc-button', - 'material-experimental/mdc-card', + 'material/card', 'material-experimental/mdc-checkbox', 'material-experimental/mdc-chips', 'material-experimental/mdc-core', @@ -73,7 +73,7 @@ export const commitMessage: CommitMessageConfig = { 'material/bottom-sheet', 'material/button', 'material/button-toggle', - 'material/card', + 'material/legacy-card', 'material/checkbox', 'material/chips', 'material/core', diff --git a/src/components-examples/material-experimental/mdc-card/BUILD.bazel b/src/components-examples/material-experimental/mdc-card/BUILD.bazel index 5cc7fbcfedb7..f276e136724a 100644 --- a/src/components-examples/material-experimental/mdc-card/BUILD.bazel +++ b/src/components-examples/material-experimental/mdc-card/BUILD.bazel @@ -11,7 +11,7 @@ ng_module( ]), deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", + "//src/material/card", ], ) diff --git a/src/components-examples/material-experimental/mdc-card/index.ts b/src/components-examples/material-experimental/mdc-card/index.ts index 60fac1bc22b2..2cd66d4a4185 100644 --- a/src/components-examples/material-experimental/mdc-card/index.ts +++ b/src/components-examples/material-experimental/mdc-card/index.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MdcCardFancyExample} from './mdc-card-fancy/mdc-card-fancy-example'; export {MdcCardFancyExample}; diff --git a/src/components-examples/material/card/BUILD.bazel b/src/components-examples/material/card/BUILD.bazel index 1925520019ca..28af6994f6a9 100644 --- a/src/components-examples/material/card/BUILD.bazel +++ b/src/components-examples/material/card/BUILD.bazel @@ -17,9 +17,9 @@ ng_module( "//src/cdk/testing/testbed", "//src/material/button", "//src/material/button/testing", - "//src/material/card", - "//src/material/card/testing", "//src/material/divider", + "//src/material/legacy-card", + "//src/material/legacy-card/testing", "//src/material/progress-bar", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", @@ -44,8 +44,8 @@ ng_test_library( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material/button/testing", - "//src/material/card", - "//src/material/card/testing", + "//src/material/legacy-card", + "//src/material/legacy-card/testing", "@npm//@angular/platform-browser-dynamic", ], ) diff --git a/src/components-examples/material/card/card-harness/card-harness-example.spec.ts b/src/components-examples/material/card/card-harness/card-harness-example.spec.ts index 8c589e07fa99..a86229645593 100644 --- a/src/components-examples/material/card/card-harness/card-harness-example.spec.ts +++ b/src/components-examples/material/card/card-harness/card-harness-example.spec.ts @@ -1,9 +1,9 @@ import {ComponentFixture, TestBed} from '@angular/core/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {MatButtonHarness} from '@angular/material/button/testing'; -import {MatCardHarness} from '@angular/material/card/testing'; +import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing'; import {HarnessLoader, parallel} from '@angular/cdk/testing'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {CardHarnessExample} from './card-harness-example'; describe('CardHarnessExample', () => { @@ -12,7 +12,7 @@ describe('CardHarnessExample', () => { beforeEach(async () => { await TestBed.configureTestingModule({ - imports: [MatCardModule], + imports: [MatLegacyCardModule], declarations: [CardHarnessExample], }).compileComponents(); fixture = TestBed.createComponent(CardHarnessExample); @@ -21,13 +21,13 @@ describe('CardHarnessExample', () => { }); it('should find card with text', async () => { - const cards = await loader.getAllHarnesses(MatCardHarness.with({text: /spitz breed/})); + const cards = await loader.getAllHarnesses(MatLegacyCardHarness.with({text: /spitz breed/})); expect(cards.length).toBe(1); expect(await cards[0].getTitleText()).toBe('Shiba Inu'); }); it('should get subtitle text', async () => { - const cards = await loader.getAllHarnesses(MatCardHarness); + const cards = await loader.getAllHarnesses(MatLegacyCardHarness); expect(await parallel(() => cards.map(card => card.getSubtitleText()))).toEqual([ '', 'Dog Breed', @@ -35,7 +35,7 @@ describe('CardHarnessExample', () => { }); it('should act as a harness loader for user content', async () => { - const card = await loader.getHarness(MatCardHarness.with({title: 'Shiba Inu'})); + const card = await loader.getHarness(MatLegacyCardHarness.with({title: 'Shiba Inu'})); const footerSubcomponents = (await card.getAllHarnesses(MatButtonHarness)) ?? []; expect(footerSubcomponents.length).toBe(2); }); diff --git a/src/components-examples/material/card/index.ts b/src/components-examples/material/card/index.ts index 30bf8884fd8b..17b1e8e8f404 100644 --- a/src/components-examples/material/card/index.ts +++ b/src/components-examples/material/card/index.ts @@ -1,6 +1,6 @@ import {NgModule} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatDividerModule} from '@angular/material/divider'; import {MatProgressBarModule} from '@angular/material/progress-bar'; import {CardFancyExample} from './card-fancy/card-fancy-example'; @@ -32,7 +32,7 @@ const EXAMPLES = [ ]; @NgModule({ - imports: [MatButtonModule, MatCardModule, MatDividerModule, MatProgressBarModule], + imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatProgressBarModule], declarations: EXAMPLES, exports: EXAMPLES, }) diff --git a/src/components-examples/material/checkbox/BUILD.bazel b/src/components-examples/material/checkbox/BUILD.bazel index 90654ce87ee9..c147eec1441d 100644 --- a/src/components-examples/material/checkbox/BUILD.bazel +++ b/src/components-examples/material/checkbox/BUILD.bazel @@ -15,9 +15,9 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/card", "//src/material/checkbox", "//src/material/checkbox/testing", + "//src/material/legacy-card", "//src/material/radio", "@npm//@angular/forms", "@npm//@angular/platform-browser", diff --git a/src/components-examples/material/checkbox/index.ts b/src/components-examples/material/checkbox/index.ts index a58046784231..eb2333d57c0f 100644 --- a/src/components-examples/material/checkbox/index.ts +++ b/src/components-examples/material/checkbox/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatRadioModule} from '@angular/material/radio'; import {CheckboxConfigurableExample} from './checkbox-configurable/checkbox-configurable-example'; @@ -26,7 +26,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatRadioModule, FormsModule, diff --git a/src/components-examples/material/datepicker/BUILD.bazel b/src/components-examples/material/datepicker/BUILD.bazel index e6b0ec539f9a..77aa1b7b3b33 100644 --- a/src/components-examples/material/datepicker/BUILD.bazel +++ b/src/components-examples/material/datepicker/BUILD.bazel @@ -17,12 +17,12 @@ ng_module( "//src/cdk/testing/testbed", "//src/material-moment-adapter", "//src/material/button", - "//src/material/card", "//src/material/core", "//src/material/datepicker", "//src/material/datepicker/testing", "//src/material/icon", "//src/material/input", + "//src/material/legacy-card", "@npm//@angular/forms", "@npm//@angular/platform-browser", "@npm//@angular/platform-browser-dynamic", diff --git a/src/components-examples/material/datepicker/index.ts b/src/components-examples/material/datepicker/index.ts index 0732e6e50f64..d262ad676e72 100644 --- a/src/components-examples/material/datepicker/index.ts +++ b/src/components-examples/material/datepicker/index.ts @@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatNativeDateModule, MAT_DATE_LOCALE} from '@angular/material/core'; import {MatDatepickerModule} from '@angular/material/datepicker'; import {MatIconModule} from '@angular/material/icon'; @@ -96,7 +96,7 @@ const EXAMPLES = [ imports: [ CommonModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatDatepickerModule, MatInputModule, MatIconModule, diff --git a/src/components-examples/material/progress-bar/BUILD.bazel b/src/components-examples/material/progress-bar/BUILD.bazel index be34e4cbb586..b3fa3320c21b 100644 --- a/src/components-examples/material/progress-bar/BUILD.bazel +++ b/src/components-examples/material/progress-bar/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/card", + "//src/material/legacy-card", "//src/material/progress-bar", "//src/material/progress-bar/testing", "//src/material/radio", diff --git a/src/components-examples/material/progress-bar/index.ts b/src/components-examples/material/progress-bar/index.ts index 20b3b85feb10..58b8486d05f2 100644 --- a/src/components-examples/material/progress-bar/index.ts +++ b/src/components-examples/material/progress-bar/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatProgressBarModule} from '@angular/material/progress-bar'; import {MatRadioModule} from '@angular/material/radio'; import {MatSliderModule} from '@angular/material/slider'; @@ -33,7 +33,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatCardModule, + MatLegacyCardModule, MatProgressBarModule, MatRadioModule, MatSliderModule, diff --git a/src/components-examples/material/progress-spinner/BUILD.bazel b/src/components-examples/material/progress-spinner/BUILD.bazel index 9a419122be24..467dbebbc44f 100644 --- a/src/components-examples/material/progress-spinner/BUILD.bazel +++ b/src/components-examples/material/progress-spinner/BUILD.bazel @@ -15,7 +15,7 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/card", + "//src/material/legacy-card", "//src/material/progress-spinner", "//src/material/progress-spinner/testing", "//src/material/radio", diff --git a/src/components-examples/material/progress-spinner/index.ts b/src/components-examples/material/progress-spinner/index.ts index 33f890396cf6..2ea85f342a65 100644 --- a/src/components-examples/material/progress-spinner/index.ts +++ b/src/components-examples/material/progress-spinner/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatProgressSpinnerModule} from '@angular/material/progress-spinner'; import {MatRadioModule} from '@angular/material/radio'; import {MatSliderModule} from '@angular/material/slider'; @@ -24,7 +24,7 @@ const EXAMPLES = [ @NgModule({ imports: [ CommonModule, - MatCardModule, + MatLegacyCardModule, MatProgressSpinnerModule, MatRadioModule, MatSliderModule, diff --git a/src/components-examples/material/slide-toggle/BUILD.bazel b/src/components-examples/material/slide-toggle/BUILD.bazel index f38c4d02929c..98b8d7920128 100644 --- a/src/components-examples/material/slide-toggle/BUILD.bazel +++ b/src/components-examples/material/slide-toggle/BUILD.bazel @@ -16,8 +16,8 @@ ng_module( "//src/cdk/testing", "//src/cdk/testing/testbed", "//src/material/button", - "//src/material/card", "//src/material/checkbox", + "//src/material/legacy-card", "//src/material/radio", "//src/material/slide-toggle", "//src/material/slide-toggle/testing", diff --git a/src/components-examples/material/slide-toggle/index.ts b/src/components-examples/material/slide-toggle/index.ts index c7fba6da533c..1b172442fb9c 100644 --- a/src/components-examples/material/slide-toggle/index.ts +++ b/src/components-examples/material/slide-toggle/index.ts @@ -1,7 +1,7 @@ import {NgModule} from '@angular/core'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatRadioModule} from '@angular/material/radio'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; @@ -28,7 +28,7 @@ const EXAMPLES = [ imports: [ FormsModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatRadioModule, MatSlideToggleModule, diff --git a/src/components-examples/material/slider/BUILD.bazel b/src/components-examples/material/slider/BUILD.bazel index 8b2c483176ee..e60d463f1b2c 100644 --- a/src/components-examples/material/slider/BUILD.bazel +++ b/src/components-examples/material/slider/BUILD.bazel @@ -15,9 +15,9 @@ ng_module( deps = [ "//src/cdk/testing", "//src/cdk/testing/testbed", - "//src/material/card", "//src/material/checkbox", "//src/material/input", + "//src/material/legacy-card", "//src/material/slider", "//src/material/slider/testing", "@npm//@angular/forms", diff --git a/src/components-examples/material/slider/index.ts b/src/components-examples/material/slider/index.ts index 19d0e8446aeb..ca682596bc05 100644 --- a/src/components-examples/material/slider/index.ts +++ b/src/components-examples/material/slider/index.ts @@ -1,7 +1,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; import {FormsModule} from '@angular/forms'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatInputModule} from '@angular/material/input'; import {MatSliderModule} from '@angular/material/slider'; @@ -28,7 +28,7 @@ const EXAMPLES = [ imports: [ CommonModule, FormsModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatInputModule, MatSliderModule, diff --git a/src/dev-app/autocomplete/BUILD.bazel b/src/dev-app/autocomplete/BUILD.bazel index 078e5bf15d53..dc63a97892b6 100644 --- a/src/dev-app/autocomplete/BUILD.bazel +++ b/src/dev-app/autocomplete/BUILD.bazel @@ -12,9 +12,9 @@ ng_module( deps = [ "//src/material/autocomplete", "//src/material/button", - "//src/material/card", "//src/material/form-field", "//src/material/input", + "//src/material/legacy-card", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/autocomplete/autocomplete-demo.ts b/src/dev-app/autocomplete/autocomplete-demo.ts index 37687b9b187c..f368db966181 100644 --- a/src/dev-app/autocomplete/autocomplete-demo.ts +++ b/src/dev-app/autocomplete/autocomplete-demo.ts @@ -11,7 +11,7 @@ import {CommonModule} from '@angular/common'; import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {Observable} from 'rxjs'; @@ -37,7 +37,7 @@ export interface StateGroup { FormsModule, MatAutocompleteModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatFormFieldModule, MatInputModule, ReactiveFormsModule, diff --git a/src/dev-app/baseline/BUILD.bazel b/src/dev-app/baseline/BUILD.bazel index 8750842f2c3a..6aec0abd1d99 100644 --- a/src/dev-app/baseline/BUILD.bazel +++ b/src/dev-app/baseline/BUILD.bazel @@ -10,10 +10,10 @@ ng_module( ":baseline_demo_scss", ], deps = [ - "//src/material/card", "//src/material/checkbox", "//src/material/form-field", "//src/material/input", + "//src/material/legacy-card", "//src/material/radio", "//src/material/select", "//src/material/toolbar", diff --git a/src/dev-app/baseline/baseline-demo.ts b/src/dev-app/baseline/baseline-demo.ts index 8babbcf5f97a..cb3d37e2cbe0 100644 --- a/src/dev-app/baseline/baseline-demo.ts +++ b/src/dev-app/baseline/baseline-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; @@ -23,7 +23,7 @@ import {MatToolbarModule} from '@angular/material/toolbar'; standalone: true, imports: [ CommonModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatFormFieldModule, MatInputModule, diff --git a/src/dev-app/bottom-sheet/BUILD.bazel b/src/dev-app/bottom-sheet/BUILD.bazel index bf106b2b5882..b0ec35ec8998 100644 --- a/src/dev-app/bottom-sheet/BUILD.bazel +++ b/src/dev-app/bottom-sheet/BUILD.bazel @@ -12,11 +12,11 @@ ng_module( deps = [ "//src/material/bottom-sheet", "//src/material/button", - "//src/material/card", "//src/material/checkbox", "//src/material/form-field", "//src/material/icon", "//src/material/input", + "//src/material/legacy-card", "//src/material/list", "//src/material/select", "@npm//@angular/forms", diff --git a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts index b811cfa4b897..cf2760084c5d 100644 --- a/src/dev-app/bottom-sheet/bottom-sheet-demo.ts +++ b/src/dev-app/bottom-sheet/bottom-sheet-demo.ts @@ -16,7 +16,7 @@ import { MatBottomSheetRef, } from '@angular/material/bottom-sheet'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatIconModule} from '@angular/material/icon'; @@ -36,7 +36,7 @@ const defaultConfig = new MatBottomSheetConfig(); FormsModule, MatBottomSheetModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatFormFieldModule, MatIconModule, diff --git a/src/dev-app/card/BUILD.bazel b/src/dev-app/card/BUILD.bazel index f99f6a0732cc..034eac29a0af 100644 --- a/src/dev-app/card/BUILD.bazel +++ b/src/dev-app/card/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/material/button", - "//src/material/card", "//src/material/divider", + "//src/material/legacy-card", "//src/material/progress-bar", ], ) diff --git a/src/dev-app/card/card-demo.ts b/src/dev-app/card/card-demo.ts index c4da3ebb2c48..0656a255e29b 100644 --- a/src/dev-app/card/card-demo.ts +++ b/src/dev-app/card/card-demo.ts @@ -8,7 +8,7 @@ import {Component} from '@angular/core'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatDividerModule} from '@angular/material/divider'; import {MatProgressBarModule} from '@angular/material/progress-bar'; @@ -17,7 +17,7 @@ import {MatProgressBarModule} from '@angular/material/progress-bar'; templateUrl: 'card-demo.html', styleUrls: ['card-demo.css'], standalone: true, - imports: [MatButtonModule, MatCardModule, MatDividerModule, MatProgressBarModule], + imports: [MatButtonModule, MatLegacyCardModule, MatDividerModule, MatProgressBarModule], }) export class CardDemo { longText = diff --git a/src/dev-app/chips/BUILD.bazel b/src/dev-app/chips/BUILD.bazel index 8c7670d7a030..6f636c8ed5f3 100644 --- a/src/dev-app/chips/BUILD.bazel +++ b/src/dev-app/chips/BUILD.bazel @@ -11,11 +11,11 @@ ng_module( ], deps = [ "//src/material/button", - "//src/material/card", "//src/material/checkbox", "//src/material/chips", "//src/material/form-field", "//src/material/icon", + "//src/material/legacy-card", "//src/material/toolbar", ], ) diff --git a/src/dev-app/chips/chips-demo.ts b/src/dev-app/chips/chips-demo.ts index 8848c38892fa..6d523d62fbf2 100644 --- a/src/dev-app/chips/chips-demo.ts +++ b/src/dev-app/chips/chips-demo.ts @@ -11,7 +11,7 @@ import {COMMA, ENTER} from '@angular/cdk/keycodes'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips'; import {ThemePalette} from '@angular/material/core'; @@ -37,7 +37,7 @@ export interface DemoColor { CommonModule, FormsModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatChipsModule, MatFormFieldModule, diff --git a/src/dev-app/dialog/BUILD.bazel b/src/dev-app/dialog/BUILD.bazel index 90c7b1b817d8..3b8c21232c97 100644 --- a/src/dev-app/dialog/BUILD.bazel +++ b/src/dev-app/dialog/BUILD.bazel @@ -12,11 +12,11 @@ ng_module( deps = [ "//src/cdk/drag-drop", "//src/material/button", - "//src/material/card", "//src/material/checkbox", "//src/material/dialog", "//src/material/form-field", "//src/material/input", + "//src/material/legacy-card", "//src/material/select", ], ) diff --git a/src/dev-app/dialog/dialog-demo.ts b/src/dev-app/dialog/dialog-demo.ts index 36c3d402cd98..8f2cc9963bf4 100644 --- a/src/dev-app/dialog/dialog-demo.ts +++ b/src/dev-app/dialog/dialog-demo.ts @@ -11,7 +11,7 @@ import {DOCUMENT} from '@angular/common'; import {DragDropModule} from '@angular/cdk/drag-drop'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import { MAT_DIALOG_DATA, @@ -34,7 +34,7 @@ const defaultDialogConfig = new MatDialogConfig(); imports: [ FormsModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatDialogModule, MatFormFieldModule, diff --git a/src/dev-app/focus-trap/BUILD.bazel b/src/dev-app/focus-trap/BUILD.bazel index 9abf6b8a02e2..e207e44a8581 100644 --- a/src/dev-app/focus-trap/BUILD.bazel +++ b/src/dev-app/focus-trap/BUILD.bazel @@ -15,8 +15,8 @@ ng_module( "//src/cdk/a11y", "//src/cdk/platform", "//src/material/button", - "//src/material/card", "//src/material/dialog", + "//src/material/legacy-card", "//src/material/toolbar", ], ) diff --git a/src/dev-app/focus-trap/focus-trap-demo.ts b/src/dev-app/focus-trap/focus-trap-demo.ts index 995f3ed9656d..23e0fef3ed22 100644 --- a/src/dev-app/focus-trap/focus-trap-demo.ts +++ b/src/dev-app/focus-trap/focus-trap-demo.ts @@ -20,7 +20,7 @@ import {MatDialog, MatDialogModule} from '@angular/material/dialog'; import {_supportsShadowDom} from '@angular/cdk/platform'; import {CommonModule} from '@angular/common'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatToolbarModule} from '@angular/material/toolbar'; @Component({ @@ -41,7 +41,7 @@ export class FocusTrapShadowDomDemo {} A11yModule, CommonModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatDialogModule, MatToolbarModule, FocusTrapShadowDomDemo, diff --git a/src/dev-app/grid-list/BUILD.bazel b/src/dev-app/grid-list/BUILD.bazel index cc9359b5250d..d49530c89615 100644 --- a/src/dev-app/grid-list/BUILD.bazel +++ b/src/dev-app/grid-list/BUILD.bazel @@ -11,9 +11,9 @@ ng_module( ], deps = [ "//src/material/button", - "//src/material/card", "//src/material/grid-list", "//src/material/icon", + "//src/material/legacy-card", ], ) diff --git a/src/dev-app/grid-list/grid-list-demo.ts b/src/dev-app/grid-list/grid-list-demo.ts index 2935b4022eb7..91f80bc056b7 100644 --- a/src/dev-app/grid-list/grid-list-demo.ts +++ b/src/dev-app/grid-list/grid-list-demo.ts @@ -10,7 +10,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatGridListModule} from '@angular/material/grid-list'; import {MatIconModule} from '@angular/material/icon'; @@ -23,7 +23,7 @@ import {MatIconModule} from '@angular/material/icon'; CommonModule, FormsModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatGridListModule, MatIconModule, ], diff --git a/src/dev-app/input/BUILD.bazel b/src/dev-app/input/BUILD.bazel index c544e821f763..9c4a76f71acc 100644 --- a/src/dev-app/input/BUILD.bazel +++ b/src/dev-app/input/BUILD.bazel @@ -12,11 +12,11 @@ ng_module( deps = [ "//src/material/button", "//src/material/button-toggle", - "//src/material/card", "//src/material/checkbox", "//src/material/form-field", "//src/material/icon", "//src/material/input", + "//src/material/legacy-card", "//src/material/select", "//src/material/tabs", "//src/material/toolbar", diff --git a/src/dev-app/input/input-demo.ts b/src/dev-app/input/input-demo.ts index 2e08c1bcb8f1..46b290d5b2e1 100644 --- a/src/dev-app/input/input-demo.ts +++ b/src/dev-app/input/input-demo.ts @@ -11,7 +11,7 @@ import {CommonModule} from '@angular/common'; import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {ErrorStateMatcher} from '@angular/material/core'; import {FloatLabelType, MatFormFieldModule} from '@angular/material/form-field'; @@ -36,7 +36,7 @@ const EMAIL_REGEX = /^[a-zA-Z0-9.!#$%&’*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA FormsModule, MatButtonModule, MatButtonToggleModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatFormFieldModule, MatIconModule, diff --git a/src/dev-app/mdc-autocomplete/BUILD.bazel b/src/dev-app/mdc-autocomplete/BUILD.bazel index 53c8b175eb1b..ee7070f7ddab 100644 --- a/src/dev-app/mdc-autocomplete/BUILD.bazel +++ b/src/dev-app/mdc-autocomplete/BUILD.bazel @@ -12,9 +12,9 @@ ng_module( deps = [ "//src/material-experimental/mdc-autocomplete", "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-form-field", "//src/material-experimental/mdc-input", + "//src/material/card", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts b/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts index 4adecd5ce1ea..5bdd1e99282b 100644 --- a/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts +++ b/src/dev-app/mdc-autocomplete/mdc-autocomplete-demo.ts @@ -11,7 +11,7 @@ import {FormControl, NgModel, FormsModule, ReactiveFormsModule} from '@angular/f import {CommonModule} from '@angular/common'; import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; import {MatInputModule} from '@angular/material-experimental/mdc-input'; import {Observable} from 'rxjs'; diff --git a/src/dev-app/mdc-card/BUILD.bazel b/src/dev-app/mdc-card/BUILD.bazel index 1ea323d6c0e1..7c19e85d9f96 100644 --- a/src/dev-app/mdc-card/BUILD.bazel +++ b/src/dev-app/mdc-card/BUILD.bazel @@ -11,8 +11,8 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-checkbox", + "//src/material/card", ], ) diff --git a/src/dev-app/mdc-card/mdc-card-demo.ts b/src/dev-app/mdc-card/mdc-card-demo.ts index 2ba66a9c54b6..1bb27748247f 100644 --- a/src/dev-app/mdc-card/mdc-card-demo.ts +++ b/src/dev-app/mdc-card/mdc-card-demo.ts @@ -7,7 +7,7 @@ */ import {Component, ViewEncapsulation} from '@angular/core'; -import {MatCardAppearance, MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardAppearance, MatCardModule} from '@angular/material/card'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; diff --git a/src/dev-app/mdc-chips/BUILD.bazel b/src/dev-app/mdc-chips/BUILD.bazel index 29e7e5fd2244..b624e6e256f4 100644 --- a/src/dev-app/mdc-chips/BUILD.bazel +++ b/src/dev-app/mdc-chips/BUILD.bazel @@ -11,11 +11,11 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-chips", "//src/material-experimental/mdc-core", "//src/material-experimental/mdc-form-field", + "//src/material/card", "//src/material/icon", "//src/material/toolbar", ], diff --git a/src/dev-app/mdc-chips/mdc-chips-demo.ts b/src/dev-app/mdc-chips/mdc-chips-demo.ts index 22c8b442324d..fefbfddd71d4 100644 --- a/src/dev-app/mdc-chips/mdc-chips-demo.ts +++ b/src/dev-app/mdc-chips/mdc-chips-demo.ts @@ -17,7 +17,7 @@ import { } from '@angular/material-experimental/mdc-chips'; import {FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; import {MatToolbarModule} from '@angular/material/toolbar'; diff --git a/src/dev-app/mdc-dialog/BUILD.bazel b/src/dev-app/mdc-dialog/BUILD.bazel index 0e29c7b648a6..83554ebc4032 100644 --- a/src/dev-app/mdc-dialog/BUILD.bazel +++ b/src/dev-app/mdc-dialog/BUILD.bazel @@ -12,12 +12,12 @@ ng_module( deps = [ "//src/cdk/drag-drop", "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-dialog", "//src/material-experimental/mdc-form-field", "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-select", + "//src/material/card", ], ) diff --git a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts index e42c55a6e4ec..c34ef2853306 100644 --- a/src/dev-app/mdc-dialog/mdc-dialog-demo.ts +++ b/src/dev-app/mdc-dialog/mdc-dialog-demo.ts @@ -17,7 +17,7 @@ import { } from '@angular/material-experimental/mdc-dialog'; import {FormsModule} from '@angular/forms'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; import {MatInputModule} from '@angular/material-experimental/mdc-input'; diff --git a/src/dev-app/mdc-input/BUILD.bazel b/src/dev-app/mdc-input/BUILD.bazel index 0b3f8ac65cbe..2717869079a2 100644 --- a/src/dev-app/mdc-input/BUILD.bazel +++ b/src/dev-app/mdc-input/BUILD.bazel @@ -13,12 +13,12 @@ ng_module( "//src/components-examples/material-experimental/mdc-form-field", "//src/material-experimental/mdc-autocomplete", "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-form-field", "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-tabs", "//src/material/button-toggle", + "//src/material/card", "//src/material/icon", "//src/material/toolbar", "@npm//@angular/forms", diff --git a/src/dev-app/mdc-input/mdc-input-demo.ts b/src/dev-app/mdc-input/mdc-input-demo.ts index cb5b3bc74cf2..f043eff1d466 100644 --- a/src/dev-app/mdc-input/mdc-input-demo.ts +++ b/src/dev-app/mdc-input/mdc-input-demo.ts @@ -20,7 +20,7 @@ import {MatInputModule} from '@angular/material-experimental/mdc-input'; import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatIconModule} from '@angular/material/icon'; import {MatTabsModule} from '@angular/material-experimental/mdc-tabs'; diff --git a/src/dev-app/mdc-paginator/BUILD.bazel b/src/dev-app/mdc-paginator/BUILD.bazel index 47e353a033dd..b332aa16edf0 100644 --- a/src/dev-app/mdc-paginator/BUILD.bazel +++ b/src/dev-app/mdc-paginator/BUILD.bazel @@ -10,11 +10,11 @@ ng_module( ":mdc_paginator_demo_scss", ], deps = [ - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-form-field", "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-paginator", "//src/material-experimental/mdc-slide-toggle", + "//src/material/card", "@npm//@angular/forms", ], ) diff --git a/src/dev-app/mdc-paginator/mdc-paginator-demo.ts b/src/dev-app/mdc-paginator/mdc-paginator-demo.ts index b02f06495ca3..435fda8a5326 100644 --- a/src/dev-app/mdc-paginator/mdc-paginator-demo.ts +++ b/src/dev-app/mdc-paginator/mdc-paginator-demo.ts @@ -10,7 +10,7 @@ import {Component} from '@angular/core'; import {CommonModule} from '@angular/common'; import {MatPaginatorModule, PageEvent} from '@angular/material-experimental/mdc-paginator'; import {FormsModule} from '@angular/forms'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; import {MatInputModule} from '@angular/material-experimental/mdc-input'; import {MatSlideToggleModule} from '@angular/material-experimental/mdc-slide-toggle'; diff --git a/src/dev-app/mdc-select/BUILD.bazel b/src/dev-app/mdc-select/BUILD.bazel index 3ff132ee7de0..5fa4c56eba44 100644 --- a/src/dev-app/mdc-select/BUILD.bazel +++ b/src/dev-app/mdc-select/BUILD.bazel @@ -11,10 +11,10 @@ ng_module( ], deps = [ "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-form-field", "//src/material-experimental/mdc-input", "//src/material-experimental/mdc-select", + "//src/material/card", "//src/material/icon", "@npm//@angular/forms", ], diff --git a/src/dev-app/mdc-select/mdc-select-demo.ts b/src/dev-app/mdc-select/mdc-select-demo.ts index 5ce4d741f6da..16c1c3ab175e 100644 --- a/src/dev-app/mdc-select/mdc-select-demo.ts +++ b/src/dev-app/mdc-select/mdc-select-demo.ts @@ -12,7 +12,7 @@ import {ErrorStateMatcher, ThemePalette} from '@angular/material-experimental/md import {MatSelectChange, MatSelectModule} from '@angular/material-experimental/mdc-select'; import {FloatLabelType, MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; import {CommonModule} from '@angular/common'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MatIconModule} from '@angular/material/icon'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; import {MatInputModule} from '@angular/material-experimental/mdc-input'; diff --git a/src/dev-app/paginator/BUILD.bazel b/src/dev-app/paginator/BUILD.bazel index 65f79d26ed90..5733d975a4fd 100644 --- a/src/dev-app/paginator/BUILD.bazel +++ b/src/dev-app/paginator/BUILD.bazel @@ -10,9 +10,9 @@ ng_module( ":paginator_demo_scss", ], deps = [ - "//src/material/card", "//src/material/form-field", "//src/material/input", + "//src/material/legacy-card", "//src/material/paginator", "//src/material/slide-toggle", "@npm//@angular/forms", diff --git a/src/dev-app/paginator/paginator-demo.ts b/src/dev-app/paginator/paginator-demo.ts index 667e69a92415..6c0b947a5004 100644 --- a/src/dev-app/paginator/paginator-demo.ts +++ b/src/dev-app/paginator/paginator-demo.ts @@ -10,7 +10,7 @@ import {Component} from '@angular/core'; import {MatPaginatorModule, PageEvent} from '@angular/material/paginator'; import {CommonModule} from '@angular/common'; import {FormsModule} from '@angular/forms'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatFormFieldModule} from '@angular/material/form-field'; import {MatInputModule} from '@angular/material/input'; import {MatSlideToggleModule} from '@angular/material/slide-toggle'; @@ -23,7 +23,7 @@ import {MatSlideToggleModule} from '@angular/material/slide-toggle'; imports: [ CommonModule, FormsModule, - MatCardModule, + MatLegacyCardModule, MatFormFieldModule, MatInputModule, MatPaginatorModule, diff --git a/src/dev-app/select/BUILD.bazel b/src/dev-app/select/BUILD.bazel index e4349fc2c072..1901ad14535b 100644 --- a/src/dev-app/select/BUILD.bazel +++ b/src/dev-app/select/BUILD.bazel @@ -11,11 +11,11 @@ ng_module( ], deps = [ "//src/material/button", - "//src/material/card", "//src/material/dialog", "//src/material/form-field", "//src/material/icon", "//src/material/input", + "//src/material/legacy-card", "//src/material/select", "@npm//@angular/forms", ], diff --git a/src/dev-app/select/select-demo.ts b/src/dev-app/select/select-demo.ts index 4f8fdec63456..4dce702e2169 100644 --- a/src/dev-app/select/select-demo.ts +++ b/src/dev-app/select/select-demo.ts @@ -10,7 +10,7 @@ import {Component, TemplateRef} from '@angular/core'; import {CommonModule} from '@angular/common'; import {FormControl, FormsModule, ReactiveFormsModule, Validators} from '@angular/forms'; import {MatButtonModule} from '@angular/material/button'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {ErrorStateMatcher, ThemePalette} from '@angular/material/core'; import {MatDialog, MatDialogModule} from '@angular/material/dialog'; import {FloatLabelType, MatFormFieldModule} from '@angular/material/form-field'; @@ -37,7 +37,7 @@ export class MyErrorStateMatcher implements ErrorStateMatcher { CommonModule, FormsModule, MatButtonModule, - MatCardModule, + MatLegacyCardModule, MatDialogModule, MatFormFieldModule, MatIconModule, diff --git a/src/e2e-app/BUILD.bazel b/src/e2e-app/BUILD.bazel index 9d788d738756..da0a16a77c98 100644 --- a/src/e2e-app/BUILD.bazel +++ b/src/e2e-app/BUILD.bazel @@ -43,7 +43,6 @@ ng_module( "//src/components-examples/material-experimental/mdc-card", "//src/components-examples/private", "//src/material-experimental/mdc-button", - "//src/material-experimental/mdc-card", "//src/material-experimental/mdc-checkbox", "//src/material-experimental/mdc-chips", "//src/material-experimental/mdc-dialog", @@ -57,6 +56,7 @@ ng_module( "//src/material-experimental/mdc-table", "//src/material-experimental/mdc-tabs", "//src/material/button", + "//src/material/card", "//src/material/checkbox", "//src/material/core", "//src/material/dialog", diff --git a/src/material-experimental/_index.scss b/src/material-experimental/_index.scss index a1b133e08b60..7553d674a00c 100644 --- a/src/material-experimental/_index.scss +++ b/src/material-experimental/_index.scss @@ -29,8 +29,6 @@ mdc-fab-density, mdc-fab-theme; @forward './mdc-button/icon-button-theme' as mdc-icon-button-* show mdc-icon-button-color, mdc-icon-button-typography, mdc-icon-button-density, mdc-icon-button-theme; -@forward './mdc-card/card-theme' as mdc-card-* show mdc-card-color, mdc-card-typography, - mdc-card-density, mdc-card-theme; @forward './mdc-checkbox/checkbox-theme' as mdc-checkbox-* show mdc-checkbox-color, mdc-checkbox-typography, mdc-checkbox-density, mdc-checkbox-theme; @forward './mdc-chips/chips-theme' as mdc-chips-* show mdc-chips-color, mdc-chips-typography, diff --git a/src/material-experimental/config.bzl b/src/material-experimental/config.bzl index 2bcfe3d246c8..ae16ffeffd1c 100644 --- a/src/material-experimental/config.bzl +++ b/src/material-experimental/config.bzl @@ -4,8 +4,6 @@ entryPoints = [ "mdc-autocomplete/testing", "mdc-button", "mdc-button/testing", - "mdc-card", - "mdc-card/testing", "mdc-checkbox", "mdc-checkbox/testing", "mdc-chips", diff --git a/src/material-experimental/mdc-card/README.md b/src/material-experimental/mdc-card/README.md deleted file mode 100644 index 9caced98c67b..000000000000 --- a/src/material-experimental/mdc-card/README.md +++ /dev/null @@ -1,80 +0,0 @@ -This is a prototype of an alternate version of `MatCard` built on top of -[MDC Web](https://github.com/material-components/material-components-web). This component is -experimental and should not be used in production. - -## How to use -Assuming your application is already up and running using Angular Material, you can add this -component by following these steps: - -1. Install `@angular/material-experimental` and MDC Web: - - ```bash - npm i material-components-web @angular/material-experimental - ``` - -2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is - needed for the Sass compiler to be able to find the MDC Web Sass files. - - ```json - ... - "styles": [ - "src/styles.scss" - ], - "stylePreprocessorOptions": { - "includePaths": [ - "node_modules/" - ] - }, - ... - ``` - -3. Import the experimental `MatCardModule` and add it to the module that declares your component: - - ```ts - import {MatCardModule} from '@angular/material-experimental/mdc-card'; - - @NgModule({ - declarations: [MyComponent], - imports: [MatCardModule], - }) - export class MyModule {} - ``` - -4. Use the card in your component's template: - - ```html - - My Card Title - - Card content! - - - - - - - ``` - -5. Add the theme and typography mixins to your Sass: - - ```scss - @use '@angular/material' as mat; - @use '@angular/material-experimental' as mat-experimental; - - $candy-app-primary: mat.define-palette(mat.$indigo-palette); - $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); - $candy-app-theme: mat.define-light-theme(( - color: ( - primary: $candy-app-primary, - accent: $candy-app-accent, - ) - )); - - - @include mat-experimental.mdc-card-theme($candy-app-theme); - ``` - -## API differences - -The API of the card matches the one from `@angular/material/card`. Simply replace imports to -`@angular/material/card` with imports to `@angular/material-experimental/mdc-card`. diff --git a/src/material-experimental/mdc-card/_card-theme.import.scss b/src/material-experimental/mdc-card/_card-theme.import.scss deleted file mode 100644 index f9431af5f9e7..000000000000 --- a/src/material-experimental/mdc-card/_card-theme.import.scss +++ /dev/null @@ -1,3 +0,0 @@ -@forward 'card-theme' hide color, density, theme, typography; -@forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, -$mat-mdc-card-mdc-card-outline-color; diff --git a/src/material-experimental/mdc-card/_card-theme.scss b/src/material-experimental/mdc-card/_card-theme.scss deleted file mode 100644 index 5e27cd848d86..000000000000 --- a/src/material-experimental/mdc-card/_card-theme.scss +++ /dev/null @@ -1,72 +0,0 @@ -@use '@angular/material' as mat; -@use '@material/card' as mdc-card; -@use '@material/typography' as mdc-typography; -@use '@material/theme/theme-color' as mdc-theme-color; -@use 'sass:color'; -@use 'sass:map'; - -@mixin color($config-or-theme) { - $config: mat.get-color-config($config-or-theme); - $foreground: map.get($config, foreground); - $is-dark-theme: map.get($config, is-dark); - - $orig-mdc-card-action-icon-color: mdc-card.$action-icon-color; - $orig-mdc-card-outline-color: mdc-card.$outline-color; - - @include mat.private-using-mdc-theme($config) { - mdc-card.$action-icon-color: rgba(mdc-theme-color.prop-value(on-surface), - mdc-theme-color.text-emphasis(medium)); - mdc-card.$outline-color: color.mix(mdc-theme-color.prop-value(on-surface), - mdc-theme-color.prop-value(surface), 12%); - - @include mdc-card.without-ripple($query: mat.$private-mdc-theme-styles-query); - - // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their - // color to secondary text here. - .mat-mdc-card-subtitle { - color: mat.get-color-from-palette($foreground, secondary-text); - } - } - - mdc-card.$action-icon-color: $orig-mdc-card-action-icon-color; - mdc-card.$outline-color: $orig-mdc-card-outline-color; -} - -@mixin typography($config-or-theme) { - $config: mat.private-typography-to-2018-config( - mat.get-typography-config($config-or-theme)); - @include mat.private-using-mdc-typography($config) { - @include mdc-card.without-ripple($query: mat.$private-mdc-typography-styles-query); - - // Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly - // set their typographic styles here. - .mat-mdc-card-title { - @include mdc-typography.typography(headline6); - } - - .mat-mdc-card-subtitle { - @include mdc-typography.typography(subtitle2); - } - } -} - -@mixin density($config-or-theme) {} - -@mixin theme($theme-or-color-config) { - $theme: mat.private-legacy-get-theme($theme-or-color-config); - @include mat.private-check-duplicate-theme-styles($theme, 'mat-mdc-card') { - $color: mat.get-color-config($theme); - $density: mat.get-density-config($theme); - $typography: mat.get-typography-config($theme); - - @if $color != null { - @include color($color); - } - @if $density != null { - @include density($density); - } - @if $typography != null { - @include typography($typography); - } - } -} diff --git a/src/material-experimental/mdc-card/card-title-group.html b/src/material-experimental/mdc-card/card-title-group.html deleted file mode 100644 index 67c0eba6f6e9..000000000000 --- a/src/material-experimental/mdc-card/card-title-group.html +++ /dev/null @@ -1,12 +0,0 @@ -
- -
- - diff --git a/src/material-experimental/mdc-card/card.html b/src/material-experimental/mdc-card/card.html deleted file mode 100644 index 6dbc74306383..000000000000 --- a/src/material-experimental/mdc-card/card.html +++ /dev/null @@ -1 +0,0 @@ - diff --git a/src/material-experimental/mdc-card/card.scss b/src/material-experimental/mdc-card/card.scss deleted file mode 100644 index 81df68dfaaa7..000000000000 --- a/src/material-experimental/mdc-card/card.scss +++ /dev/null @@ -1,157 +0,0 @@ -@use 'sass:math'; -@use '@angular/material' as mat; -@use '@material/card' as mdc-card; - -// TODO(jelbourn): move header and title-group styles to their own files. - -// Size of the `mat-card-header` region custom to Angular Material. -$mat-card-header-size: 40px !default; - -// Default padding for text content within a card. -$mat-card-default-padding: 16px !default; - -@include mat.private-disable-mdc-fallback-declarations { - // Include all MDC card styles except for color and typography. - @include mdc-card.without-ripple($query: mat.$private-mdc-base-styles-query); -} - -// Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards. -// Maintained here for backwards compatibility with the previous generation MatCard. -.mat-mdc-card-title, -.mat-mdc-card-subtitle { - // Custom elements default to `display: inline`. Reset to 'block'. - display: block; - - // Titles and subtitles can be set on native header elements which come with - // their own margin. Clear it since the spacing is done using `padding`. - margin: 0; - - .mat-mdc-card-avatar ~ .mat-mdc-card-header-text & { - // Apply default padding for a text content region. Omit any bottom padding because we assume - // this region will be followed by another region that includes top padding. - padding: $mat-card-default-padding $mat-card-default-padding 0; - } -} - -// Header section at the top of a card. MDC does not have a pre-made header section for cards. -// Maintained here for backwards compatibility with the previous generation MatCard. -.mat-mdc-card-header { - // The primary purpose of the card header is to lay out the title, subtitle, and image in the - // correct order. The image will come first, followed by a single div that will contain (via - // content projection) both the title and the subtitle. - display: flex; - - // Apply default padding for the header region. Omit any bottom padding because we assume - // this region will be followed by another region that includes top padding. - padding: $mat-card-default-padding $mat-card-default-padding 0; - - // When a subtitle is inside of a header, we want to move it up slightly to reduce the space with - // the title, and add a margin bottom to create space underneath the header. - .mat-mdc-card-subtitle { - margin-top: -(math.div($mat-card-default-padding, 2)); - margin-bottom: $mat-card-default-padding; - } -} - -// Primary card content. MDC does not have a pre-made section for primary content. -// Adds the default 16px padding to the content. Maintained here for backwards compatibility -// with the previous generation MatCard. -.mat-mdc-card-content { - // Custom elements default to `display: inline`. Reset to 'block'. - display: block; - - // Apply default horizontal padding for a content region. - padding: 0 $mat-card-default-padding; - - // Only add vertical padding to the main content area if it's not preceeded/followed by another - // element within the card. - &:first-child { - padding-top: $mat-card-default-padding; - } - - &:last-child { - padding-bottom: $mat-card-default-padding; - } -} - -// Title group within a card. MDC does not have a pre-made section for anything title-related. -// Maintained here for backwards compatibility with the previous generation MatCard. -.mat-mdc-card-title-group { - // This element exists primary to lay out its children (title, subtitle, media). The title - // and subtitle go first (projected into a single div), followed by the media. - display: flex; - justify-content: space-between; - - // Apply default padding for the title-group region. Omit any bottom padding because we assume - // this region will be followed by another region that includes top padding. - padding: $mat-card-default-padding $mat-card-default-padding 0; -} - -// Avatar image for a card. MDC does not specifically have a card avatar or a "common" avatar. -// They *do* have a list avatar, but it uses a different size than we do here, which we preserve -// to reduce breaking changes. Ultimately, the avatar styles just consist of a size and a -// border-radius. -.mat-mdc-card-avatar { - height: $mat-card-header-size; - width: $mat-card-header-size; - border-radius: 50%; - flex-shrink: 0; - - // Makes `` tags behave like `background-size: cover`. Not supported - // in IE, but we're using it as a progressive enhancement. - object-fit: cover; -} - -// Specifically sized small image, specific to Angular Material. -.mat-mdc-card-sm-image { - width: 80px; - height: 80px; -} - -// Specifically sized medium image, specific to Angular Material. -.mat-mdc-card-md-image { - width: 112px; - height: 112px; -} - -// Specifically sized large image, specific to Angular Material. -.mat-mdc-card-lg-image { - width: 152px; - height: 152px; -} - -// Specifically sized extra-large image, specific to Angular Material. -.mat-mdc-card-xl-image { - width: 240px; - height: 240px; -} - -// When both a title and a subtitle are used, eliminate the top padding of whichever comes second -// because the first already covers the padding. -// -// Additionally, reset the padding for title and subtitle when used within `mat-card-header` or -// `mat-card-title-group` since the padding is captured by parent container already. -.mat-mdc-card-subtitle ~ .mat-mdc-card-title, -.mat-mdc-card-title ~ .mat-mdc-card-subtitle, - -// The `.mat-mdc-card-header-text` here is redundant since the header text -// wrapper is always there in the header, but we need the extra specificity. -.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title, -.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle, -.mat-mdc-card-title-group .mat-mdc-card-title, -.mat-mdc-card-title-group .mat-mdc-card-subtitle { - padding-top: 0; -} - -// Remove the bottom margin from the last child of the card content. We intended to remove -// margin from elements that have it built-in, such as `

`. We do this to avoid having too much -// space between card content regions, as the space is already captured in the content region -// element. -.mat-mdc-card-content > :last-child:not(.mat-mdc-card-footer) { - margin-bottom: 0; -} - -// Support for actions aligned to the end of the card. -.mat-mdc-card-actions-align-end { - justify-content: flex-end; -} diff --git a/src/material-experimental/mdc-card/card.ts b/src/material-experimental/mdc-card/card.ts deleted file mode 100644 index 424ea141d3f1..000000000000 --- a/src/material-experimental/mdc-card/card.ts +++ /dev/null @@ -1,235 +0,0 @@ -/** - * @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, - Directive, - Inject, - InjectionToken, - Input, - Optional, - ViewEncapsulation, -} from '@angular/core'; - -export type MatCardAppearance = 'outlined' | 'raised'; - -/** Object that can be used to configure the default options for the card module. */ -export interface MatCardConfig { - /** Default appearance for cards. */ - appearance?: MatCardAppearance; -} - -/** Injection token that can be used to provide the default options the card module. */ -export const MAT_CARD_CONFIG = new InjectionToken('MAT_CARD_CONFIG'); - -/** - * Material Design card component. Cards contain content and actions about a single subject. - * See https://material.io/design/components/cards.html - * - * MatCard provides no behaviors, instead serving as a purely visual treatment. - */ -@Component({ - selector: 'mat-card', - templateUrl: 'card.html', - styleUrls: ['card.css'], - host: { - 'class': 'mat-mdc-card mdc-card', - '[class.mdc-card--outlined]': 'appearance == "outlined"', - }, - exportAs: 'matCard', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, -}) -export class MatCard { - @Input() appearance: MatCardAppearance; - - constructor(@Inject(MAT_CARD_CONFIG) @Optional() config?: MatCardConfig) { - this.appearance = config?.appearance || 'raised'; - } -} - -// TODO(jelbourn): add `MatActionCard`, which is a card that acts like a button (and has a ripple). -// Supported in MDC with `.mdc-card__primary-action`. Will require additional a11y docs for users. - -/** - * Title of a card, intended for use within ``. This component is an optional - * convenience for one variety of card title; any custom title element may be used in its place. - * - * MatCardTitle provides no behaviors, instead serving as a purely visual treatment. - */ -@Directive({ - selector: `mat-card-title, [mat-card-title], [matCardTitle]`, - host: {'class': 'mat-mdc-card-title'}, -}) -export class MatCardTitle {} - -/** - * Container intended to be used within the `` component. Can contain exactly one - * ``, one `` and one content image of any size - * (e.g. ``). - */ -@Component({ - selector: 'mat-card-title-group', - templateUrl: 'card-title-group.html', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: {'class': 'mat-mdc-card-title-group'}, -}) -export class MatCardTitleGroup {} - -/** - * Content of a card, intended for use within ``. This component is an optional - * convenience for use with other convenience elements, such as ``; any custom - * content block element may be used in its place. - * - * MatCardContent provides no behaviors, instead serving as a purely visual treatment. - */ -@Directive({ - selector: 'mat-card-content', - host: {'class': 'mat-mdc-card-content'}, -}) -export class MatCardContent {} - -/** - * Sub-title of a card, intended for use within `` beneath a ``. This - * component is an optional convenience for use with other convenience elements, such as - * ``. - * - * MatCardSubtitle provides no behaviors, instead serving as a purely visual treatment. - */ -@Directive({ - selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`, - host: {'class': 'mat-mdc-card-subtitle'}, -}) -export class MatCardSubtitle {} - -/** - * Bottom area of a card that contains action buttons, intended for use within ``. - * This component is an optional convenience for use with other convenience elements, such as - * ``; any custom action block element may be used in its place. - * - * MatCardActions provides no behaviors, instead serving as a purely visual treatment. - */ -@Directive({ - selector: 'mat-card-actions', - exportAs: 'matCardActions', - host: { - 'class': 'mat-mdc-card-actions mdc-card__actions', - '[class.mat-mdc-card-actions-align-end]': 'align === "end"', - }, -}) -export class MatCardActions { - // TODO(jelbourn): deprecate `align` in favor of `actionPositon` or `actionAlignment` - // as to not conflict with the native `align` attribute. - - /** Position of the actions inside the card. */ - @Input() align: 'start' | 'end' = 'start'; - - // TODO(jelbourn): support `.mdc-card__actions--full-bleed`. - - // TODO(jelbourn): support `.mdc-card__action-buttons` and `.mdc-card__action-icons`. - - // TODO(jelbourn): figure out how to use `.mdc-card__action`, `.mdc-card__action--button`, and - // `mdc-card__action--icon`. They're used primarily for positioning, which we might be able to - // do implicitly. -} - -/** - * Header region of a card, intended for use within ``. This header captures - * a card title, subtitle, and avatar. This component is an optional convenience for use with - * other convenience elements, such as ``; any custom header block element may be - * used in its place. - * - * MatCardHeader provides no behaviors, instead serving as a purely visual treatment. - */ -@Component({ - selector: 'mat-card-header', - templateUrl: 'card-header.html', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: {'class': 'mat-mdc-card-header'}, -}) -export class MatCardHeader {} - -/** - * Footer area a card, intended for use within ``. - * This component is an optional convenience for use with other convenience elements, such as - * ``; any custom footer block element may be used in its place. - * - * MatCardFooter provides no behaviors, instead serving as a purely visual treatment. - */ -@Directive({ - selector: 'mat-card-footer', - host: {'class': 'mat-mdc-card-footer'}, -}) -export class MatCardFooter {} - -// TODO(jelbourn): deprecate the "image" selectors to replace with "media". - -// TODO(jelbourn): support `.mdc-card__media-content`. - -/** - * Primary image content for a card, intended for use within ``. Can be applied to - * any media element, such as `` or ``. - * - * This component is an optional convenience for use with other convenience elements, such as - * ``; any custom media element may be used in its place. - * - * MatCardImage provides no behaviors, instead serving as a purely visual treatment. - */ -@Directive({ - selector: '[mat-card-image], [matCardImage]', - host: {'class': 'mat-mdc-card-image mdc-card__media'}, -}) -export class MatCardImage { - // TODO(jelbourn): support `.mdc-card__media--square` and `.mdc-card__media--16-9`. -} - -/** Same as `MatCardImage`, but small. */ -@Directive({ - selector: '[mat-card-sm-image], [matCardImageSmall]', - host: {'class': 'mat-mdc-card-sm-image mdc-card__media'}, -}) -export class MatCardSmImage {} - -/** Same as `MatCardImage`, but medium. */ -@Directive({ - selector: '[mat-card-md-image], [matCardImageMedium]', - host: {'class': 'mat-mdc-card-md-image mdc-card__media'}, -}) -export class MatCardMdImage {} - -/** Same as `MatCardImage`, but large. */ -@Directive({ - selector: '[mat-card-lg-image], [matCardImageLarge]', - host: {'class': 'mat-mdc-card-lg-image mdc-card__media'}, -}) -export class MatCardLgImage {} - -/** Same as `MatCardImage`, but extra-large. */ -@Directive({ - selector: '[mat-card-xl-image], [matCardImageXLarge]', - host: {'class': 'mat-mdc-card-xl-image mdc-card__media'}, -}) -export class MatCardXlImage {} - -/** - * Avatar image content for a card, intended for use within ``. Can be applied to - * any media element, such as `` or ``. - * - * This component is an optional convenience for use with other convenience elements, such as - * ``; any custom media element may be used in its place. - * - * MatCardAvatar provides no behaviors, instead serving as a purely visual treatment. - */ -@Directive({ - selector: '[mat-card-avatar], [matCardAvatar]', - host: {'class': 'mat-mdc-card-avatar'}, -}) -export class MatCardAvatar {} diff --git a/src/material-experimental/mdc-card/testing/card-harness.spec.ts b/src/material-experimental/mdc-card/testing/card-harness.spec.ts deleted file mode 100644 index 24c480012fc5..000000000000 --- a/src/material-experimental/mdc-card/testing/card-harness.spec.ts +++ /dev/null @@ -1,12 +0,0 @@ -import {MatCardModule} from '@angular/material-experimental/mdc-card'; -import {runHarnessTests} from '@angular/material/card/testing/shared.spec'; -import {MatCardHarness, MatCardSection} from './card-harness'; - -describe('MDC-based MatCardHarness', () => { - runHarnessTests(MatCardModule, MatCardHarness as any, { - header: MatCardSection.HEADER, - content: MatCardSection.CONTENT, - actions: MatCardSection.ACTIONS, - footer: MatCardSection.FOOTER, - }); -}); diff --git a/src/material-experimental/mdc-core/color/_all-color.import.scss b/src/material-experimental/mdc-core/color/_all-color.import.scss index 5547280efea6..3d26f37ee1dd 100644 --- a/src/material-experimental/mdc-core/color/_all-color.import.scss +++ b/src/material-experimental/mdc-core/color/_all-color.import.scss @@ -7,9 +7,6 @@ mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; $mat-mdc-button-mat-button-state-target; @forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; @forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; -@forward '../../mdc-card/card-theme' hide color, density, theme, typography; -@forward '../../mdc-card/card-theme' as mat-mdc-card-* hide -$mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color; @forward '../../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme, typography; @forward '../../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, diff --git a/src/material-experimental/mdc-core/density/_all-density.import.scss b/src/material-experimental/mdc-core/density/_all-density.import.scss index 57ac388e0bb6..d8a211639531 100644 --- a/src/material-experimental/mdc-core/density/_all-density.import.scss +++ b/src/material-experimental/mdc-core/density/_all-density.import.scss @@ -7,9 +7,6 @@ mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; $mat-mdc-button-mat-button-state-target; @forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; @forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; -@forward '../../mdc-card/card-theme' hide color, density, theme, typography; -@forward '../../mdc-card/card-theme' as mat-mdc-card-* hide -$mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color; @forward '../../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme, typography; @forward '../../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, diff --git a/src/material-experimental/mdc-core/theming/BUILD.bazel b/src/material-experimental/mdc-core/theming/BUILD.bazel index 62e9e7d95820..635c56edefe1 100644 --- a/src/material-experimental/mdc-core/theming/BUILD.bazel +++ b/src/material-experimental/mdc-core/theming/BUILD.bazel @@ -22,7 +22,6 @@ sass_library( "//src/material:sass_lib", "//src/material-experimental/mdc-autocomplete:mdc_autocomplete_scss_lib", "//src/material-experimental/mdc-button:mdc_button_scss_lib", - "//src/material-experimental/mdc-card:mdc_card_scss_lib", "//src/material-experimental/mdc-checkbox:mdc_checkbox_scss_lib", "//src/material-experimental/mdc-chips:mdc_chips_scss_lib", "//src/material-experimental/mdc-core:mdc_core_scss_lib", @@ -42,6 +41,7 @@ sass_library( "//src/material-experimental/mdc-table:mdc_table_scss_lib", "//src/material-experimental/mdc-tabs:mdc_tabs_scss_lib", "//src/material-experimental/mdc-tooltip:mdc_tooltip_scss_lib", + "//src/material/card:card_scss_lib", ], ) diff --git a/src/material-experimental/mdc-core/theming/_all-theme.import.scss b/src/material-experimental/mdc-core/theming/_all-theme.import.scss index a545be576a69..b8b560336119 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.import.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.import.scss @@ -7,9 +7,6 @@ mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; $mat-mdc-button-mat-button-state-target; @forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; @forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; -@forward '../../mdc-card/card-theme' hide color, density, theme, typography; -@forward '../../mdc-card/card-theme' as mat-mdc-card-* hide -$mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color; @forward '../../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme, typography; @forward '../../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, @@ -91,7 +88,6 @@ $mat-mdc-mdc-text-field-outlined-idle-border, $mat-mdc-mdc-text-field-placeholde @import '../core-theme'; @import '../../mdc-autocomplete/autocomplete-theme'; @import '../../mdc-button/button-theme'; -@import '../../mdc-card/card-theme'; @import '../../mdc-checkbox/checkbox-theme'; @import '../../mdc-chips/chips-theme'; @import '../../mdc-dialog/dialog-theme'; diff --git a/src/material-experimental/mdc-core/theming/_all-theme.scss b/src/material-experimental/mdc-core/theming/_all-theme.scss index 1173a8b5e9b7..f67d81f20f4b 100644 --- a/src/material-experimental/mdc-core/theming/_all-theme.scss +++ b/src/material-experimental/mdc-core/theming/_all-theme.scss @@ -5,7 +5,6 @@ @use '../../mdc-button/button-theme'; @use '../../mdc-button/fab-theme'; @use '../../mdc-button/icon-button-theme'; -@use '../../mdc-card/card-theme'; @use '../../mdc-checkbox/checkbox-theme'; @use '../../mdc-chips/chips-theme'; @use '../../mdc-dialog/dialog-theme'; @@ -34,7 +33,7 @@ @include dialog-theme.theme($theme-or-color-config); @include fab-theme.theme($theme-or-color-config); @include icon-button-theme.theme($theme-or-color-config); - @include card-theme.theme($theme-or-color-config); + @include mat.card-theme($theme-or-color-config); @include checkbox-theme.theme($theme-or-color-config); @include chips-theme.theme($theme-or-color-config); @include list-theme.theme($theme-or-color-config); diff --git a/src/material-experimental/mdc-core/typography/_all-typography.import.scss b/src/material-experimental/mdc-core/typography/_all-typography.import.scss index 2bc19d3375a9..0d8b7856572f 100644 --- a/src/material-experimental/mdc-core/typography/_all-typography.import.scss +++ b/src/material-experimental/mdc-core/typography/_all-typography.import.scss @@ -7,9 +7,6 @@ mat-mdc-color, mat-mdc-density, mat-mdc-theme, mat-mdc-typography; $mat-mdc-button-mat-button-state-target; @forward '../../mdc-button/fab-theme' as mat-mdc-fab-*; @forward '../../mdc-button/icon-button-theme' as mat-mdc-icon-button-*; -@forward '../../mdc-card/card-theme' hide color, density, theme, typography; -@forward '../../mdc-card/card-theme' as mat-mdc-card-* hide -$mat-mdc-card-mdc-card-action-icon-color, $mat-mdc-card-mdc-card-outline-color; @forward '../../mdc-checkbox/checkbox-theme' hide color, density, private-checkbox-styles-with-color, theme, typography; @forward '../../mdc-checkbox/checkbox-theme' as mat-mdc-* hide $mat-mdc-mdc-checkbox-border-color, diff --git a/src/material/_index.scss b/src/material/_index.scss index 85a6fae0bed7..6507ef7d1acf 100644 --- a/src/material/_index.scss +++ b/src/material/_index.scss @@ -70,6 +70,8 @@ @forward './button-toggle/button-toggle-theme' as button-toggle-* show button-toggle-theme, button-toggle-color, button-toggle-typography; @forward './card/card-theme' as card-* show card-theme, card-color, card-typography; +@forward './legacy-card/card-theme' as legacy-card-* show legacy-card-theme, legacy-card-color, + legacy-card-typography; @forward './checkbox/checkbox-theme' as checkbox-* show checkbox-theme, checkbox-color, checkbox-typography; @forward './chips/chips-theme' as chips-* show chips-theme, chips-color, chips-typography; diff --git a/src/material/_theming.scss b/src/material/_theming.scss index dff455128b0f..9cd3a31765a0 100644 --- a/src/material/_theming.scss +++ b/src/material/_theming.scss @@ -12,7 +12,7 @@ @forward './bottom-sheet/bottom-sheet-legacy-index'; @forward './button-toggle/button-toggle-legacy-index'; @forward './button/button-legacy-index'; -@forward './card/card-legacy-index'; +@forward './legacy-card/card-legacy-index'; @forward './checkbox/checkbox-legacy-index'; @forward './chips/chips-legacy-index'; @forward './datepicker/datepicker-legacy-index'; diff --git a/src/material/card/BUILD.bazel b/src/material/card/BUILD.bazel index 026e47f4b939..48654848283c 100644 --- a/src/material/card/BUILD.bazel +++ b/src/material/card/BUILD.bazel @@ -4,6 +4,8 @@ load( "markdown_to_html", "ng_e2e_test_library", "ng_module", + "ng_test_library", + "ng_web_test_suite", "sass_binary", "sass_library", ) @@ -16,24 +18,26 @@ ng_module( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), - assets = [":card.css"] + glob(["**/*.html"]), + assets = [":card_scss"] + glob(["**/*.html"]), deps = [ "//src/material/core", - "@npm//@angular/core", ], ) sass_library( name = "card_scss_lib", srcs = glob(["**/_*.scss"]), - deps = ["//src/material/core:core_scss_lib"], + deps = [ + "//:mdc_sass_lib", + "//src/material/core:core_scss_lib", + ], ) sass_binary( name = "card_scss", src = "card.scss", deps = [ - "//src/cdk:sass_lib", + "//:mdc_sass_lib", "//src/material/core:core_scss_lib", ], ) @@ -54,6 +58,22 @@ e2e_test_suite( ], ) +ng_test_library( + name = "unit_test_sources", + srcs = glob( + ["**/*.spec.ts"], + exclude = ["**/*.e2e.spec.ts"], + ), + deps = [ + ":card", + ], +) + +ng_web_test_suite( + name = "unit_tests", + deps = [":unit_test_sources"], +) + markdown_to_html( name = "overview", srcs = [":card.md"], diff --git a/src/material/card/README.md b/src/material/card/README.md index 9f9f53d16361..49f27ffbde9c 100644 --- a/src/material/card/README.md +++ b/src/material/card/README.md @@ -1 +1,80 @@ -Please see the official documentation at https://material.angular.io/components/component/card \ No newline at end of file +This is a prototype of an alternate version of `MatCard` built on top of +[MDC Web](https://github.com/material-components/material-components-web). This component is +experimental and should not be used in production. + +## How to use +Assuming your application is already up and running using Angular Material, you can add this +component by following these steps: + +1. Install `@angular/material-experimental` and MDC Web: + + ```bash + npm i material-components-web @angular/material-experimental + ``` + +2. In your `angular.json`, make sure `node_modules/` is listed as a Sass include path. This is + needed for the Sass compiler to be able to find the MDC Web Sass files. + + ```json + ... + "styles": [ + "src/styles.scss" + ], + "stylePreprocessorOptions": { + "includePaths": [ + "node_modules/" + ] + }, + ... + ``` + +3. Import the experimental `MatCardModule` and add it to the module that declares your component: + + ```ts + import {MatCardModule} from '@angular/material/card'; + + @NgModule({ + declarations: [MyComponent], + imports: [MatCardModule], + }) + export class MyModule {} + ``` + +4. Use the card in your component's template: + + ```html + + My Card Title + + Card content! + + + + + + + ``` + +5. Add the theme and typography mixins to your Sass: + + ```scss + @use '@angular/material' as mat; + @use '@angular/material-experimental' as mat-experimental; + + $candy-app-primary: mat.define-palette(mat.$indigo-palette); + $candy-app-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400); + $candy-app-theme: mat.define-light-theme(( + color: ( + primary: $candy-app-primary, + accent: $candy-app-accent, + ) + )); + + + @include mat-experimental.mdc-card-theme($candy-app-theme); + ``` + +## API differences + +The API of the card matches the one from `@angular/material/legacy-card`. Simply replace imports to +`@angular/material/legacy-card` with imports to `@angular/material/card`. diff --git a/src/material/card/_card-legacy-index.scss b/src/material/card/_card-legacy-index.scss deleted file mode 100644 index 77a45aa32e96..000000000000 --- a/src/material/card/_card-legacy-index.scss +++ /dev/null @@ -1,2 +0,0 @@ -@forward 'card-theme' hide color, theme, typography; -@forward 'card-theme' as mat-card-* hide mat-card-density; diff --git a/src/material/card/_card-theme.import.scss b/src/material/card/_card-theme.import.scss index 71ff57e208a6..f9431af5f9e7 100644 --- a/src/material/card/_card-theme.import.scss +++ b/src/material/card/_card-theme.import.scss @@ -1,10 +1,3 @@ -@forward '../core/theming/theming.import'; -@forward '../core/style/private.import'; -@forward '../core/typography/typography-utils.import'; -@forward 'card-theme' hide color, theme, typography; -@forward 'card-theme' as mat-card-* hide mat-card-density; - -@import '../core/theming/palette'; -@import '../core/theming/theming'; -@import '../core/style/private'; -@import '../core/typography/typography-utils'; +@forward 'card-theme' hide color, density, theme, typography; +@forward 'card-theme' as mat-mdc-card-* hide $mat-mdc-card-mdc-card-action-icon-color, +$mat-mdc-card-mdc-card-outline-color; diff --git a/src/material/card/_card-theme.scss b/src/material/card/_card-theme.scss index 3b2ccc2deab0..9e2d2086cb97 100644 --- a/src/material/card/_card-theme.scss +++ b/src/material/card/_card-theme.scss @@ -1,56 +1,58 @@ -@use 'sass:map'; @use '../core/theming/theming'; -@use '../core/style/private'; +@use '../core/mdc-helpers/mdc-helpers'; @use '../core/typography/typography'; -@use '../core/typography/typography-utils'; - +@use '@material/card' as mdc-card; +@use '@material/typography' as mdc-typography; +@use '@material/theme/theme-color' as mdc-theme-color; +@use 'sass:color'; +@use 'sass:map'; @mixin color($config-or-theme) { $config: theming.get-color-config($config-or-theme); - $background: map.get($config, background); $foreground: map.get($config, foreground); + $is-dark-theme: map.get($config, is-dark); - .mat-card { - @include private.private-theme-overridable-elevation(1, $config); - background: theming.get-color-from-palette($background, card); - color: theming.get-color-from-palette($foreground, text); + $orig-mdc-card-action-icon-color: mdc-card.$action-icon-color; + $orig-mdc-card-outline-color: mdc-card.$outline-color; - // Needs extra specificity to be able to override the elevation selectors. - &.mat-card-flat { - @include private.private-theme-overridable-elevation(0, $config); + @include mdc-helpers.using-mdc-theme($config) { + mdc-card.$action-icon-color: rgba(mdc-theme-color.prop-value(on-surface), + mdc-theme-color.text-emphasis(medium)); + mdc-card.$outline-color: color.mix(mdc-theme-color.prop-value(on-surface), + mdc-theme-color.prop-value(surface), 12%); + + @include mdc-card.without-ripple($query: mdc-helpers.$mdc-theme-styles-query); + + // Card subtitles are an Angular Material construct (not MDC), so we explicitly set their + // color to secondary text here. + .mat-mdc-card-subtitle { + color: theming.get-color-from-palette($foreground, secondary-text); } } - .mat-card-subtitle { - color: theming.get-color-from-palette($foreground, secondary-text); - } + mdc-card.$action-icon-color: $orig-mdc-card-action-icon-color; + mdc-card.$outline-color: $orig-mdc-card-outline-color; } @mixin typography($config-or-theme) { - $config: typography.private-typography-to-2014-config( + $config: typography.private-typography-to-2018-config( theming.get-typography-config($config-or-theme)); - .mat-card { - font-family: typography-utils.font-family($config); - } + @include mdc-helpers.using-mdc-typography($config) { + @include mdc-card.without-ripple($query: mdc-helpers.$mdc-typography-styles-query); - .mat-card-title { - font: { - size: typography-utils.font-size($config, headline); - weight: typography-utils.font-weight($config, title); + // Card subtitles and titles are an Angular Material construct (not MDC), so we explicitly + // set their typographic styles here. + .mat-mdc-card-title { + @include mdc-typography.typography(headline6); } - } - .mat-card-header .mat-card-title { - font-size: typography-utils.font-size($config, title); - } - - .mat-card-subtitle, - .mat-card-content { - font-size: typography-utils.font-size($config, body-1); + .mat-mdc-card-subtitle { + @include mdc-typography.typography(subtitle2); + } } } -@mixin _density($config-or-theme) {} +@mixin density($config-or-theme) {} @mixin theme($theme-or-color-config) { $theme: theming.private-legacy-get-theme($theme-or-color-config); @@ -63,7 +65,7 @@ @include color($color); } @if $density != null { - @include _density($density); + @include density($density); } @if $typography != null { @include typography($typography); diff --git a/src/material/card/card-header.html b/src/material/card/card-header.html index 3b26908b153e..b476f9327c98 100644 --- a/src/material/card/card-header.html +++ b/src/material/card/card-header.html @@ -1,5 +1,5 @@ -

+
- + diff --git a/src/material/card/card.e2e.spec.ts b/src/material/card/card.e2e.spec.ts index 03b25d1288ae..9fda93d60f25 100644 --- a/src/material/card/card.e2e.spec.ts +++ b/src/material/card/card.e2e.spec.ts @@ -1,7 +1,7 @@ import {browser, by, element} from 'protractor'; describe('mat-card', () => { - beforeEach(async () => await browser.get('/cards')); + beforeEach(async () => await browser.get('/mdc-card')); it('should show a card', async () => { expect(await element(by.tagName('mat-card')).isPresent()).toBe(true); diff --git a/src/material/card/card.html b/src/material/card/card.html index 3a56f6c2fe37..6dbc74306383 100644 --- a/src/material/card/card.html +++ b/src/material/card/card.html @@ -1,2 +1 @@ - diff --git a/src/material/card/card.scss b/src/material/card/card.scss index b8185ac94f38..cd889b942433 100644 --- a/src/material/card/card.scss +++ b/src/material/card/card.scss @@ -1,124 +1,99 @@ @use 'sass:math'; -@use '@angular/cdk'; +@use '../core/mdc-helpers/mdc-helpers'; +@use '@material/card' as mdc-card; -@use '../core/style/variables'; -@use '../core/style/elevation'; -@use '../core/style/private'; +// TODO(jelbourn): move header and title-group styles to their own files. +// Size of the `mat-card-header` region custom to Angular Material. +$mat-card-header-size: 40px !default; -$padding: 16px !default; -$border-radius: 4px !default; -$header-size: 40px !default; +// Default padding for text content within a card. +$mat-card-default-padding: 16px !default; -.mat-card { - @include elevation.elevation-transition; - @include private.private-animation-noop(); - display: block; - position: relative; - padding: $padding; - border-radius: $border-radius; - - > .mat-divider-horizontal { - position: absolute; - left: 0; - width: 100%; - - [dir='rtl'] & { - left: auto; - right: 0; - } - - &.mat-divider-inset { - position: static; - margin: 0; - - [dir='rtl'] & { - // Needs to be reset explicitly since the divider set `margin-right` in particular in RTL. - margin-right: 0; - } - } - } - - @include cdk.high-contrast(active, off) { - outline: solid 1px; - } +@include mdc-helpers.disable-mdc-fallback-declarations { + // Include all MDC card styles except for color and typography. + @include mdc-card.without-ripple($query: mdc-helpers.$mdc-base-styles-query); } -// base styles for each card section preset (mat-card-content, etc) -%mat-card-section-base { +// Title text and subtitles text within a card. MDC doesn't have pre-made title sections for cards. +// Maintained here for backwards compatibility with the previous generation MatCard. +.mat-mdc-card-title, +.mat-mdc-card-subtitle { + // Custom elements default to `display: inline`. Reset to 'block'. display: block; - margin-bottom: 16px; -} - -.mat-card-title { - display: block; - margin-bottom: 8px; -} -.mat-card-subtitle, .mat-card-content { - @extend %mat-card-section-base; -} + // Titles and subtitles can be set on native header elements which come with + // their own margin. Clear it since the spacing is done using `padding`. + margin: 0; -.mat-card-actions { - @extend %mat-card-section-base; - margin-left: math.div(-$padding, 2); - margin-right: math.div(-$padding, 2); - padding: 8px 0; + .mat-mdc-card-avatar ~ .mat-mdc-card-header-text & { + // Apply default padding for a text content region. Omit any bottom padding because we assume + // this region will be followed by another region that includes top padding. + padding: $mat-card-default-padding $mat-card-default-padding 0; + } } -.mat-card-actions-align-end { +// Header section at the top of a card. MDC does not have a pre-made header section for cards. +// Maintained here for backwards compatibility with the previous generation MatCard. +.mat-mdc-card-header { + // The primary purpose of the card header is to lay out the title, subtitle, and image in the + // correct order. The image will come first, followed by a single div that will contain (via + // content projection) both the title and the subtitle. display: flex; - justify-content: flex-end; -} -.mat-card-image { - width: calc(100% + #{$padding * 2}); - margin: 0 (-$padding) 16px (-$padding); + // Apply default padding for the header region. Omit any bottom padding because we assume + // this region will be followed by another region that includes top padding. + padding: $mat-card-default-padding $mat-card-default-padding 0; - // The following properties are to handle `mat-card-image` on a `picture` element. - display: block; - overflow: hidden; - - img { - width: 100%; + // When a subtitle is inside of a header, we want to move it up slightly to reduce the space with + // the title, and add a margin bottom to create space underneath the header. + .mat-mdc-card-subtitle { + margin-top: -(math.div($mat-card-default-padding, 2)); + margin-bottom: $mat-card-default-padding; } } -.mat-card-footer { - // The negative margins pulls out the element, countering the padding - // to get the footer to be flush against the side of the card. - $margin: -$padding; - +// Primary card content. MDC does not have a pre-made section for primary content. +// Adds the default 16px padding to the content. Maintained here for backwards compatibility +// with the previous generation MatCard. +.mat-mdc-card-content { + // Custom elements default to `display: inline`. Reset to 'block'. display: block; - margin: 0 $margin $margin $margin; -} -.mat-card-actions { - .mat-button, - .mat-raised-button, - .mat-stroked-button { - margin: 0 8px; - } -} + // Apply default horizontal padding for a content region. + padding: 0 $mat-card-default-padding; -// HEADER STYLES - -.mat-card-header { - display: flex; - flex-direction: row; + // Only add vertical padding to the main content area if it's not preceeded/followed by another + // element within the card. + &:first-child { + padding-top: $mat-card-default-padding; + } - .mat-card-title { - margin-bottom: 12px; + &:last-child { + padding-bottom: $mat-card-default-padding; } } -.mat-card-header-text { - margin: 0 $padding; +// Title group within a card. MDC does not have a pre-made section for anything title-related. +// Maintained here for backwards compatibility with the previous generation MatCard. +.mat-mdc-card-title-group { + // This element exists primary to lay out its children (title, subtitle, media). The title + // and subtitle go first (projected into a single div), followed by the media. + display: flex; + justify-content: space-between; + + // Apply default padding for the title-group region. Omit any bottom padding because we assume + // this region will be followed by another region that includes top padding. + padding: $mat-card-default-padding $mat-card-default-padding 0; } -.mat-card-avatar { - height: $header-size; - width: $header-size; +// Avatar image for a card. MDC does not specifically have a card avatar or a "common" avatar. +// They *do* have a list avatar, but it uses a different size than we do here, which we preserve +// to reduce breaking changes. Ultimately, the avatar styles just consist of a size and a +// border-radius. +.mat-mdc-card-avatar { + height: $mat-card-header-size; + width: $mat-card-header-size; border-radius: 50%; flex-shrink: 0; @@ -127,135 +102,56 @@ $header-size: 40px !default; object-fit: cover; } -// TITLE-GROUP STYLES - -.mat-card-title-group { - display: flex; - justify-content: space-between; -} - -.mat-card-sm-image { +// Specifically sized small image, specific to Angular Material. +.mat-mdc-card-sm-image { width: 80px; height: 80px; } -.mat-card-md-image { +// Specifically sized medium image, specific to Angular Material. +.mat-mdc-card-md-image { width: 112px; height: 112px; } -.mat-card-lg-image { +// Specifically sized large image, specific to Angular Material. +.mat-mdc-card-lg-image { width: 152px; height: 152px; } -// This should normally also extend the `%mat-card-title-img`, but in order to avoid breaking -// changes, we need to keep the horizontal margin reversion for now. -// See: https://github.com/angular/components/issues/12203 -.mat-card-xl-image { +// Specifically sized extra-large image, specific to Angular Material. +.mat-mdc-card-xl-image { width: 240px; height: 240px; - margin: -8px; - - // Special treatment inside title group in order to fix the media areas inside of a title-group. - // This can be removed once #12203 has been addressed. - .mat-card-title-group > & { - // As per Material Design specifications, the images exceed the *top* content-box and take - // up some space. The margin below is necessary because otherwise space of the actual card - // content will be overlapped. - margin: -8px 0 8px; - } } -// MEDIA QUERIES - -@media (variables.$xsmall) { - .mat-card-title-group { - margin: 0; - } - - .mat-card-xl-image { - margin-left: 0; - margin-right: 0; - } -} - -// FIRST/LAST CHILD ADJUSTMENTS - -// top els in mat-card-content and mat-card can't have their default margin-tops (e.g.

tags) -// or they'll incorrectly add to card's top padding -.mat-card > :first-child, .mat-card-content > :first-child { - margin-top: 0; -} - -// last els in mat-card-content and mat-card can't have their default margin-bottoms (e.g.

tags) -// or they'll incorrectly add to card's bottom padding -.mat-card > :last-child:not(.mat-card-footer), -.mat-card-content > :last-child:not(.mat-card-footer) { +// When both a title and a subtitle are used, eliminate the top padding of whichever comes second +// because the first already covers the padding. +// +// Additionally, reset the padding for title and subtitle when used within `mat-card-header` or +// `mat-card-title-group` since the padding is captured by parent container already. +.mat-mdc-card-subtitle ~ .mat-mdc-card-title, +.mat-mdc-card-title ~ .mat-mdc-card-subtitle, + +// The `.mat-mdc-card-header-text` here is redundant since the header text +// wrapper is always there in the header, but we need the extra specificity. +.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-title, +.mat-mdc-card-header .mat-mdc-card-header-text .mat-mdc-card-subtitle, +.mat-mdc-card-title-group .mat-mdc-card-title, +.mat-mdc-card-title-group .mat-mdc-card-subtitle { + padding-top: 0; +} + +// Remove the bottom margin from the last child of the card content. We intended to remove +// margin from elements that have it built-in, such as `

`. We do this to avoid having too much +// space between card content regions, as the space is already captured in the content region +// element. +.mat-mdc-card-content > :last-child:not(.mat-mdc-card-footer) { margin-bottom: 0; } -// if main image is on top, need to place it flush against top -// (by stripping card's default padding) -.mat-card-image:first-child { - margin-top: -$padding; - border-top-left-radius: inherit; - border-top-right-radius: inherit; -} - -// actions panel on bottom should be 8px from bottom of card -// so must strip 16px from default card padding -.mat-card > .mat-card-actions:last-child { - margin-bottom: -8px; - padding-bottom: 0; -} - -// actions panel should always be 8px from sides, -// so the first button in the actions panel can't add its own margins -.mat-card-actions { - &:not(.mat-card-actions-align-end) { - .mat-button, - .mat-raised-button, - .mat-stroked-button { - &:first-child { - margin-left: 0; - margin-right: 0; - } - } - } -} - -.mat-card-actions-align-end { - .mat-button, - .mat-raised-button, - .mat-stroked-button { - &:last-child { - margin-left: 0; - margin-right: 0; - } - } -} - -// should be 12px space between titles and subtitles generally -// default margin-bottom is 16px, so need to move lower title up 4px -.mat-card-title:not(:first-child), .mat-card-subtitle:not(:first-child) { - margin-top: -4px; -} - -// should be 8px space between titles and subtitles in header -// default margin-bottom is 16px, so need to move subtitle in header up 4px -.mat-card-header .mat-card-subtitle:not(:first-child) { - margin-top: -8px; -} - -// xl image should always have 16px on top. -// when it's the first el, it'll need to remove 8px from default card padding -.mat-card > .mat-card-xl-image:first-child { - margin-top: -8px; -} - -// xl image should always have 16px on bottom -// when it's the last el, it'll need to remove 8px from default card padding -.mat-card > .mat-card-xl-image:last-child { - margin-bottom: -8px; +// Support for actions aligned to the end of the card. +.mat-mdc-card-actions-align-end { + justify-content: flex-end; } diff --git a/src/material-experimental/mdc-card/card.spec.ts b/src/material/card/card.spec.ts similarity index 100% rename from src/material-experimental/mdc-card/card.spec.ts rename to src/material/card/card.spec.ts diff --git a/src/material/card/card.ts b/src/material/card/card.ts index dd045ca7e1c9..424ea141d3f1 100644 --- a/src/material/card/card.ts +++ b/src/material/card/card.ts @@ -7,189 +7,229 @@ */ import { - Component, - ViewEncapsulation, ChangeDetectionStrategy, + Component, Directive, + Inject, + InjectionToken, Input, Optional, - Inject, + ViewEncapsulation, } from '@angular/core'; -import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; + +export type MatCardAppearance = 'outlined' | 'raised'; + +/** Object that can be used to configure the default options for the card module. */ +export interface MatCardConfig { + /** Default appearance for cards. */ + appearance?: MatCardAppearance; +} + +/** Injection token that can be used to provide the default options the card module. */ +export const MAT_CARD_CONFIG = new InjectionToken('MAT_CARD_CONFIG'); /** - * Content of a card, needed as it's used as a selector in the API. - * @docs-private + * Material Design card component. Cards contain content and actions about a single subject. + * See https://material.io/design/components/cards.html + * + * MatCard provides no behaviors, instead serving as a purely visual treatment. */ -@Directive({ - selector: 'mat-card-content, [mat-card-content], [matCardContent]', - host: {'class': 'mat-card-content'}, +@Component({ + selector: 'mat-card', + templateUrl: 'card.html', + styleUrls: ['card.css'], + host: { + 'class': 'mat-mdc-card mdc-card', + '[class.mdc-card--outlined]': 'appearance == "outlined"', + }, + exportAs: 'matCard', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, }) -export class MatCardContent {} +export class MatCard { + @Input() appearance: MatCardAppearance; + + constructor(@Inject(MAT_CARD_CONFIG) @Optional() config?: MatCardConfig) { + this.appearance = config?.appearance || 'raised'; + } +} + +// TODO(jelbourn): add `MatActionCard`, which is a card that acts like a button (and has a ripple). +// Supported in MDC with `.mdc-card__primary-action`. Will require additional a11y docs for users. /** - * Title of a card, needed as it's used as a selector in the API. - * @docs-private + * Title of a card, intended for use within ``. This component is an optional + * convenience for one variety of card title; any custom title element may be used in its place. + * + * MatCardTitle provides no behaviors, instead serving as a purely visual treatment. */ @Directive({ selector: `mat-card-title, [mat-card-title], [matCardTitle]`, - host: { - 'class': 'mat-card-title', - }, + host: {'class': 'mat-mdc-card-title'}, }) export class MatCardTitle {} /** - * Sub-title of a card, needed as it's used as a selector in the API. - * @docs-private + * Container intended to be used within the `` component. Can contain exactly one + * ``, one `` and one content image of any size + * (e.g. ``). + */ +@Component({ + selector: 'mat-card-title-group', + templateUrl: 'card-title-group.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: {'class': 'mat-mdc-card-title-group'}, +}) +export class MatCardTitleGroup {} + +/** + * Content of a card, intended for use within ``. This component is an optional + * convenience for use with other convenience elements, such as ``; any custom + * content block element may be used in its place. + * + * MatCardContent provides no behaviors, instead serving as a purely visual treatment. + */ +@Directive({ + selector: 'mat-card-content', + host: {'class': 'mat-mdc-card-content'}, +}) +export class MatCardContent {} + +/** + * Sub-title of a card, intended for use within `` beneath a ``. This + * component is an optional convenience for use with other convenience elements, such as + * ``. + * + * MatCardSubtitle provides no behaviors, instead serving as a purely visual treatment. */ @Directive({ selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`, - host: { - 'class': 'mat-card-subtitle', - }, + host: {'class': 'mat-mdc-card-subtitle'}, }) export class MatCardSubtitle {} /** - * Action section of a card, needed as it's used as a selector in the API. - * @docs-private + * Bottom area of a card that contains action buttons, intended for use within ``. + * This component is an optional convenience for use with other convenience elements, such as + * ``; any custom action block element may be used in its place. + * + * MatCardActions provides no behaviors, instead serving as a purely visual treatment. */ @Directive({ selector: 'mat-card-actions', exportAs: 'matCardActions', host: { - 'class': 'mat-card-actions', - '[class.mat-card-actions-align-end]': 'align === "end"', + 'class': 'mat-mdc-card-actions mdc-card__actions', + '[class.mat-mdc-card-actions-align-end]': 'align === "end"', }, }) export class MatCardActions { + // TODO(jelbourn): deprecate `align` in favor of `actionPositon` or `actionAlignment` + // as to not conflict with the native `align` attribute. + /** Position of the actions inside the card. */ @Input() align: 'start' | 'end' = 'start'; + + // TODO(jelbourn): support `.mdc-card__actions--full-bleed`. + + // TODO(jelbourn): support `.mdc-card__action-buttons` and `.mdc-card__action-icons`. + + // TODO(jelbourn): figure out how to use `.mdc-card__action`, `.mdc-card__action--button`, and + // `mdc-card__action--icon`. They're used primarily for positioning, which we might be able to + // do implicitly. } /** - * Footer of a card, needed as it's used as a selector in the API. - * @docs-private + * Header region of a card, intended for use within ``. This header captures + * a card title, subtitle, and avatar. This component is an optional convenience for use with + * other convenience elements, such as ``; any custom header block element may be + * used in its place. + * + * MatCardHeader provides no behaviors, instead serving as a purely visual treatment. + */ +@Component({ + selector: 'mat-card-header', + templateUrl: 'card-header.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: {'class': 'mat-mdc-card-header'}, +}) +export class MatCardHeader {} + +/** + * Footer area a card, intended for use within ``. + * This component is an optional convenience for use with other convenience elements, such as + * ``; any custom footer block element may be used in its place. + * + * MatCardFooter provides no behaviors, instead serving as a purely visual treatment. */ @Directive({ selector: 'mat-card-footer', - host: {'class': 'mat-card-footer'}, + host: {'class': 'mat-mdc-card-footer'}, }) export class MatCardFooter {} +// TODO(jelbourn): deprecate the "image" selectors to replace with "media". + +// TODO(jelbourn): support `.mdc-card__media-content`. + /** - * Image used in a card, needed to add the mat- CSS styling. - * @docs-private + * Primary image content for a card, intended for use within ``. Can be applied to + * any media element, such as `` or ``. + * + * This component is an optional convenience for use with other convenience elements, such as + * ``; any custom media element may be used in its place. + * + * MatCardImage provides no behaviors, instead serving as a purely visual treatment. */ @Directive({ selector: '[mat-card-image], [matCardImage]', - host: {'class': 'mat-card-image'}, + host: {'class': 'mat-mdc-card-image mdc-card__media'}, }) -export class MatCardImage {} +export class MatCardImage { + // TODO(jelbourn): support `.mdc-card__media--square` and `.mdc-card__media--16-9`. +} -/** - * Image used in a card, needed to add the mat- CSS styling. - * @docs-private - */ +/** Same as `MatCardImage`, but small. */ @Directive({ selector: '[mat-card-sm-image], [matCardImageSmall]', - host: {'class': 'mat-card-sm-image'}, + host: {'class': 'mat-mdc-card-sm-image mdc-card__media'}, }) export class MatCardSmImage {} -/** - * Image used in a card, needed to add the mat- CSS styling. - * @docs-private - */ +/** Same as `MatCardImage`, but medium. */ @Directive({ selector: '[mat-card-md-image], [matCardImageMedium]', - host: {'class': 'mat-card-md-image'}, + host: {'class': 'mat-mdc-card-md-image mdc-card__media'}, }) export class MatCardMdImage {} -/** - * Image used in a card, needed to add the mat- CSS styling. - * @docs-private - */ +/** Same as `MatCardImage`, but large. */ @Directive({ selector: '[mat-card-lg-image], [matCardImageLarge]', - host: {'class': 'mat-card-lg-image'}, + host: {'class': 'mat-mdc-card-lg-image mdc-card__media'}, }) export class MatCardLgImage {} -/** - * Large image used in a card, needed to add the mat- CSS styling. - * @docs-private - */ +/** Same as `MatCardImage`, but extra-large. */ @Directive({ selector: '[mat-card-xl-image], [matCardImageXLarge]', - host: {'class': 'mat-card-xl-image'}, + host: {'class': 'mat-mdc-card-xl-image mdc-card__media'}, }) export class MatCardXlImage {} /** - * Avatar image used in a card, needed to add the mat- CSS styling. - * @docs-private + * Avatar image content for a card, intended for use within ``. Can be applied to + * any media element, such as `` or ``. + * + * This component is an optional convenience for use with other convenience elements, such as + * ``; any custom media element may be used in its place. + * + * MatCardAvatar provides no behaviors, instead serving as a purely visual treatment. */ @Directive({ selector: '[mat-card-avatar], [matCardAvatar]', - host: {'class': 'mat-card-avatar'}, + host: {'class': 'mat-mdc-card-avatar'}, }) export class MatCardAvatar {} - -/** - * A basic content container component that adds the styles of a Material design card. - * - * While this component can be used alone, it also provides a number - * of preset styles for common card sections, including: - * - mat-card-title - * - mat-card-subtitle - * - mat-card-content - * - mat-card-actions - * - mat-card-footer - */ -@Component({ - selector: 'mat-card', - exportAs: 'matCard', - templateUrl: 'card.html', - styleUrls: ['card.css'], - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: { - 'class': 'mat-card mat-focus-indicator', - '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', - }, -}) -export class MatCard { - // @breaking-change 9.0.0 `_animationMode` parameter to be made required. - constructor(@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {} -} - -/** - * Component intended to be used within the `` component. It adds styles for a - * preset header section (i.e. a title, subtitle, and avatar layout). - * @docs-private - */ -@Component({ - selector: 'mat-card-header', - templateUrl: 'card-header.html', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: {'class': 'mat-card-header'}, -}) -export class MatCardHeader {} - -/** - * Component intended to be used within the `` component. It adds styles for a preset - * layout that groups an image with a title section. - * @docs-private - */ -@Component({ - selector: 'mat-card-title-group', - templateUrl: 'card-title-group.html', - encapsulation: ViewEncapsulation.None, - changeDetection: ChangeDetectionStrategy.OnPush, - host: {'class': 'mat-card-title-group'}, -}) -export class MatCardTitleGroup {} diff --git a/src/material-experimental/mdc-card/migration.md b/src/material/card/migration.md similarity index 100% rename from src/material-experimental/mdc-card/migration.md rename to src/material/card/migration.md diff --git a/src/material-experimental/mdc-card/module.ts b/src/material/card/module.ts similarity index 93% rename from src/material-experimental/mdc-card/module.ts rename to src/material/card/module.ts index 955684114ec3..d968275de0eb 100644 --- a/src/material-experimental/mdc-card/module.ts +++ b/src/material/card/module.ts @@ -8,7 +8,7 @@ import {CommonModule} from '@angular/common'; import {NgModule} from '@angular/core'; -import {MatCommonModule} from '@angular/material-experimental/mdc-core'; +import {MatCommonModule} from '@angular/material/core'; import { MatCard, MatCardActions, diff --git a/src/material/card/public-api.ts b/src/material/card/public-api.ts index 55da606b9f5d..78483f2234d3 100644 --- a/src/material/card/public-api.ts +++ b/src/material/card/public-api.ts @@ -7,4 +7,4 @@ */ export * from './card'; -export * from './card-module'; +export * from './module'; diff --git a/src/material/card/testing/BUILD.bazel b/src/material/card/testing/BUILD.bazel index 6d82248c7f83..f4a8faf94ade 100644 --- a/src/material/card/testing/BUILD.bazel +++ b/src/material/card/testing/BUILD.bazel @@ -19,31 +19,18 @@ filegroup( srcs = glob(["**/*.ts"]), ) -ng_test_library( - name = "harness_tests_lib", - srcs = ["shared.spec.ts"], - deps = [ - ":testing", - "//src/cdk/testing", - "//src/cdk/testing/testbed", - "//src/material/card", - "@npm//@angular/platform-browser", - ], -) - ng_test_library( name = "unit_tests_lib", srcs = glob( ["**/*.spec.ts"], exclude = [ "**/*.e2e.spec.ts", - "shared.spec.ts", ], ), deps = [ - ":harness_tests_lib", ":testing", "//src/material/card", + "//src/material/legacy-card/testing:harness_tests_lib", ], ) diff --git a/src/material/card/testing/card-harness.e2e.spec.ts b/src/material/card/testing/card-harness.e2e.spec.ts index 3a03de9d0dcb..f5493b92372f 100644 --- a/src/material/card/testing/card-harness.e2e.spec.ts +++ b/src/material/card/testing/card-harness.e2e.spec.ts @@ -6,7 +6,7 @@ import {browser} from 'protractor'; describe('card harness', () => { let loader: HarnessLoader; - beforeEach(async () => await browser.get('/cards')); + beforeEach(async () => await browser.get('/mdc-card')); beforeEach(() => { loader = ProtractorHarnessEnvironment.loader(); diff --git a/src/material/card/testing/card-harness.spec.ts b/src/material/card/testing/card-harness.spec.ts index 6a41b84293c7..b85bec150ef2 100644 --- a/src/material/card/testing/card-harness.spec.ts +++ b/src/material/card/testing/card-harness.spec.ts @@ -1,9 +1,9 @@ import {MatCardModule} from '@angular/material/card'; -import {runHarnessTests} from '@angular/material/card/testing/shared.spec'; +import {runHarnessTests} from '@angular/material/legacy-card/testing/shared.spec'; import {MatCardHarness, MatCardSection} from './card-harness'; -describe('Non-MDC-based MatCardHarness', () => { - runHarnessTests(MatCardModule, MatCardHarness, { +describe('MDC-based MatCardHarness', () => { + runHarnessTests(MatCardModule, MatCardHarness as any, { header: MatCardSection.HEADER, content: MatCardSection.CONTENT, actions: MatCardSection.ACTIONS, diff --git a/src/material/card/testing/card-harness.ts b/src/material/card/testing/card-harness.ts index 2e1d7a24d65c..a79c87098582 100644 --- a/src/material/card/testing/card-harness.ts +++ b/src/material/card/testing/card-harness.ts @@ -6,30 +6,36 @@ * found in the LICENSE file at https://angular.io/license */ -import {HarnessPredicate, ContentContainerComponentHarness} from '@angular/cdk/testing'; +import { + ComponentHarnessConstructor, + ContentContainerComponentHarness, + HarnessPredicate, +} from '@angular/cdk/testing'; import {CardHarnessFilters} from './card-harness-filters'; /** Selectors for different sections of the mat-card that can container user content. */ export const enum MatCardSection { - HEADER = '.mat-card-header', - CONTENT = '.mat-card-content', - ACTIONS = '.mat-card-actions', - FOOTER = '.mat-card-footer', + HEADER = '.mat-mdc-card-header', + CONTENT = '.mat-mdc-card-content', + ACTIONS = '.mat-mdc-card-actions', + FOOTER = '.mat-mdc-card-footer', } -/** Harness for interacting with a standard mat-card in tests. */ +/** Harness for interacting with an MDC-based mat-card in tests. */ export class MatCardHarness extends ContentContainerComponentHarness { /** The selector for the host element of a `MatCard` instance. */ - static hostSelector = '.mat-card'; + static hostSelector = '.mat-mdc-card'; /** - * Gets a `HarnessPredicate` that can be used to search for a `MatCardHarness` that meets - * certain criteria. + * Gets a `HarnessPredicate` that can be used to search for a card with specific attributes. * @param options Options for filtering which card instances are considered a match. * @return a `HarnessPredicate` configured with the given options. */ - static with(options: CardHarnessFilters = {}): HarnessPredicate { - return new HarnessPredicate(MatCardHarness, options) + static with( + this: ComponentHarnessConstructor, + options: CardHarnessFilters = {}, + ): HarnessPredicate { + return new HarnessPredicate(this, options) .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text), ) @@ -41,8 +47,8 @@ export class MatCardHarness extends ContentContainerComponentHarness { diff --git a/src/material/config.bzl b/src/material/config.bzl index a2178996330e..7d8266c81d63 100644 --- a/src/material/config.bzl +++ b/src/material/config.bzl @@ -11,6 +11,8 @@ entryPoints = [ "button-toggle/testing", "card", "card/testing", + "legacy-card", + "legacy-card/testing", "checkbox", "checkbox/testing", "chips", diff --git a/src/material/core/density/private/_all-density.scss b/src/material/core/density/private/_all-density.scss index 37c347269ae1..0da495cf4774 100644 --- a/src/material/core/density/private/_all-density.scss +++ b/src/material/core/density/private/_all-density.scss @@ -6,6 +6,7 @@ @use '../../../paginator/paginator-theme'; @use '../../../form-field/form-field-theme'; @use '../../../button-toggle/button-toggle-theme'; +@use '../../../card/card-theme'; // Includes all of the density styles. @mixin all-component-densities($config-or-theme) { @@ -31,6 +32,7 @@ @include paginator-theme.density($config); @include form-field-theme.density($config); @include button-toggle-theme.density($config); + @include card-theme.density($config); } diff --git a/src/material/core/theming/tests/test-css-variables-theme.scss b/src/material/core/theming/tests/test-css-variables-theme.scss index 461b8368b3d6..3351c4822dde 100644 --- a/src/material/core/theming/tests/test-css-variables-theme.scss +++ b/src/material/core/theming/tests/test-css-variables-theme.scss @@ -9,7 +9,6 @@ @use '../../../bottom-sheet/bottom-sheet-theme'; @use '../../../button/button-theme'; @use '../../../button-toggle/button-toggle-theme'; -@use '../../../card/card-theme'; @use '../../../checkbox/checkbox-theme'; @use '../../../chips/chips-theme'; @use '../../../table/table-theme'; @@ -73,7 +72,6 @@ @include bottom-sheet-theme.theme($css-var-theme); @include button-theme.theme($css-var-theme); @include button-toggle-theme.theme($css-var-theme); - @include card-theme.theme($css-var-theme); @include checkbox-theme.theme($css-var-theme); @include chips-theme.theme($css-var-theme); @include table-theme.theme($css-var-theme); diff --git a/src/material-experimental/mdc-card/BUILD.bazel b/src/material/legacy-card/BUILD.bazel similarity index 55% rename from src/material-experimental/mdc-card/BUILD.bazel rename to src/material/legacy-card/BUILD.bazel index 172ee45dfb42..33efc2aabedf 100644 --- a/src/material-experimental/mdc-card/BUILD.bazel +++ b/src/material/legacy-card/BUILD.bazel @@ -1,10 +1,9 @@ load("//src/e2e-app:test_suite.bzl", "e2e_test_suite") load( "//tools:defaults.bzl", + "markdown_to_html", "ng_e2e_test_library", "ng_module", - "ng_test_library", - "ng_web_test_suite", "sass_binary", "sass_library", ) @@ -12,33 +11,29 @@ load( package(default_visibility = ["//visibility:public"]) ng_module( - name = "mdc-card", + name = "legacy-card", srcs = glob( ["**/*.ts"], exclude = ["**/*.spec.ts"], ), - assets = [":card_scss"] + glob(["**/*.html"]), + assets = [":card.css"] + glob(["**/*.html"]), deps = [ - "//src/material-experimental/mdc-core", + "//src/material/core", + "@npm//@angular/core", ], ) sass_library( - name = "mdc_card_scss_lib", + name = "legacy_card_scss_lib", srcs = glob(["**/_*.scss"]), - deps = [ - "//:mdc_sass_lib", - "//src/material:sass_lib", - "//src/material/core:core_scss_lib", - ], + deps = ["//src/material/core:core_scss_lib"], ) sass_binary( name = "card_scss", src = "card.scss", deps = [ - "//:mdc_sass_lib", - "//src/material:sass_lib", + "//src/cdk:sass_lib", "//src/material/core:core_scss_lib", ], ) @@ -59,18 +54,12 @@ e2e_test_suite( ], ) -ng_test_library( - name = "unit_test_sources", - srcs = glob( - ["**/*.spec.ts"], - exclude = ["**/*.e2e.spec.ts"], - ), - deps = [ - ":mdc-card", - ], +markdown_to_html( + name = "overview", + srcs = [":card.md"], ) -ng_web_test_suite( - name = "unit_tests", - deps = [":unit_test_sources"], +filegroup( + name = "source-files", + srcs = glob(["**/*.ts"]), ) diff --git a/src/material/legacy-card/README.md b/src/material/legacy-card/README.md new file mode 100644 index 000000000000..9f9f53d16361 --- /dev/null +++ b/src/material/legacy-card/README.md @@ -0,0 +1 @@ +Please see the official documentation at https://material.angular.io/components/component/card \ No newline at end of file diff --git a/src/material/legacy-card/_card-legacy-index.scss b/src/material/legacy-card/_card-legacy-index.scss new file mode 100644 index 000000000000..7aba7b2370f3 --- /dev/null +++ b/src/material/legacy-card/_card-legacy-index.scss @@ -0,0 +1,2 @@ +@forward 'card-theme' hide color, theme, typography; +@forward 'card-theme' as mat-legacy-card-* hide mat-legacy-card-density; diff --git a/src/material/legacy-card/_card-theme.import.scss b/src/material/legacy-card/_card-theme.import.scss new file mode 100644 index 000000000000..4063f6d79e20 --- /dev/null +++ b/src/material/legacy-card/_card-theme.import.scss @@ -0,0 +1,10 @@ +@forward '../core/theming/theming.import'; +@forward '../core/style/private.import'; +@forward '../core/typography/typography-utils.import'; +@forward 'card-theme' hide color, theme, typography; +@forward 'card-theme' as mat-legacy-card-* hide mat-legacy-card-density; + +@import '../core/theming/palette'; +@import '../core/theming/theming'; +@import '../core/style/private'; +@import '../core/typography/typography-utils'; diff --git a/src/material/legacy-card/_card-theme.scss b/src/material/legacy-card/_card-theme.scss new file mode 100644 index 000000000000..b9eaaf68942b --- /dev/null +++ b/src/material/legacy-card/_card-theme.scss @@ -0,0 +1,72 @@ +@use 'sass:map'; +@use '../core/theming/theming'; +@use '../core/style/private'; +@use '../core/typography/typography'; +@use '../core/typography/typography-utils'; + + +@mixin color($config-or-theme) { + $config: theming.get-color-config($config-or-theme); + $background: map.get($config, background); + $foreground: map.get($config, foreground); + + .mat-card { + @include private.private-theme-overridable-elevation(1, $config); + background: theming.get-color-from-palette($background, card); + color: theming.get-color-from-palette($foreground, text); + + // Needs extra specificity to be able to override the elevation selectors. + &.mat-card-flat { + @include private.private-theme-overridable-elevation(0, $config); + } + } + + .mat-card-subtitle { + color: theming.get-color-from-palette($foreground, secondary-text); + } +} + +@mixin typography($config-or-theme) { + $config: typography.private-typography-to-2014-config( + theming.get-typography-config($config-or-theme)); + .mat-card { + font-family: typography-utils.font-family($config); + } + + .mat-card-title { + font: { + size: typography-utils.font-size($config, headline); + weight: typography-utils.font-weight($config, title); + } + } + + .mat-card-header .mat-card-title { + font-size: typography-utils.font-size($config, title); + } + + .mat-card-subtitle, + .mat-card-content { + font-size: typography-utils.font-size($config, body-1); + } +} + +@mixin _density($config-or-theme) {} + +@mixin theme($theme-or-color-config) { + $theme: theming.private-legacy-get-theme($theme-or-color-config); + @include theming.private-check-duplicate-theme-styles($theme, 'mat-legacy-card') { + $color: theming.get-color-config($theme); + $density: theming.get-density-config($theme); + $typography: theming.get-typography-config($theme); + + @if $color != null { + @include color($color); + } + @if $density != null { + @include _density($density); + } + @if $typography != null { + @include typography($typography); + } + } +} diff --git a/src/material-experimental/mdc-card/card-header.html b/src/material/legacy-card/card-header.html similarity index 87% rename from src/material-experimental/mdc-card/card-header.html rename to src/material/legacy-card/card-header.html index b476f9327c98..3b26908b153e 100644 --- a/src/material-experimental/mdc-card/card-header.html +++ b/src/material/legacy-card/card-header.html @@ -1,5 +1,5 @@ -

+
+
+ + diff --git a/src/material-experimental/mdc-card/card.e2e.spec.ts b/src/material/legacy-card/card.e2e.spec.ts similarity index 77% rename from src/material-experimental/mdc-card/card.e2e.spec.ts rename to src/material/legacy-card/card.e2e.spec.ts index 9fda93d60f25..03b25d1288ae 100644 --- a/src/material-experimental/mdc-card/card.e2e.spec.ts +++ b/src/material/legacy-card/card.e2e.spec.ts @@ -1,7 +1,7 @@ import {browser, by, element} from 'protractor'; describe('mat-card', () => { - beforeEach(async () => await browser.get('/mdc-card')); + beforeEach(async () => await browser.get('/cards')); it('should show a card', async () => { expect(await element(by.tagName('mat-card')).isPresent()).toBe(true); diff --git a/src/material/legacy-card/card.html b/src/material/legacy-card/card.html new file mode 100644 index 000000000000..3a56f6c2fe37 --- /dev/null +++ b/src/material/legacy-card/card.html @@ -0,0 +1,2 @@ + + diff --git a/src/material/legacy-card/card.md b/src/material/legacy-card/card.md new file mode 100644 index 000000000000..2b6458ca7f95 --- /dev/null +++ b/src/material/legacy-card/card.md @@ -0,0 +1,79 @@ +`` is a content container for text, photos, and actions in the context of a single subject. + + + + +### Basic card sections +The most basic card needs only an `` element with some content. However, Angular Material +provides a number of preset sections that you can use inside of an ``: + + +| Element | Description | +| ---------------------- | ------------------------------------------------------ | +| `` | Card title | +| `` | Card subtitle | +| `` | Primary card content. Intended for blocks of text | +| `` | Card image. Stretches the image to the container width | +| `` | Container for buttons at the bottom of the card | +| `` | Section anchored to the bottom of the card | + +These elements primary serve as pre-styled content containers without any additional APIs. +However, the `align` property on `` can be used to position the actions at the +`'start'` or `'end'` of the container. + + +### Card headers +In addition to the aforementioned sections, `` gives the ability to add a rich +header to a card. This header can contain: + +| Element | Description | +| ----------------------- | -------------------------------------------- | +| `` | A title within the header | +| `` | A subtitle within the header | +| `` | An image used as an avatar within the header | + + +### Title groups +`` can be used to combine a title, subtitle, and image into a single section. +This element can contain: +* `` +* `` +* One of: + * `` + * `` + * `` + +### Accessibility + +Cards serve a wide variety of scenarios and may contain many different types of content. +Due to this flexible nature, the appropriate accessibility treatment depends on how you use +``. + +#### Group, region, and landmarks + +There are several ARIA roles that communicate that a portion of the UI represents some semantically +meaningful whole. Depending on what the content of the card means to your application, you can apply +one of [`role="group"`][role-group], [`role="region"`][role-region], or +[one of the landmark roles][aria-landmarks] to the `` element. + +You do not need to apply a role when using a card as a purely decorative container that does not +convey a meaningful grouping of related content for a single subject. In these cases, the content +of the card should follow standard practices for document content. + +#### Focus + +Depending on how cards are used, it may be appropriate to apply a `tabindex` to the `` +element. + +* If cards are a primary mechanism through which user interacts with the application, `tabindex="0"` + may be appropriate. +* If attention can be sent to the card, but it's not part of the document flow, `tabindex="-1"` may + be appropriate. +* If the card acts as a purely decorative container, it does not need to be tabbable. In this case, + the card content should follow normal best practices for tab order. + +Always test your application to verify the behavior that works best for your users. + +[role-group]: https://www.w3.org/TR/wai-aria/#group +[role-region]: https://www.w3.org/TR/wai-aria/#region +[aria-landmarks]: https://www.w3.org/TR/wai-aria/#landmark diff --git a/src/material/legacy-card/card.scss b/src/material/legacy-card/card.scss new file mode 100644 index 000000000000..b8185ac94f38 --- /dev/null +++ b/src/material/legacy-card/card.scss @@ -0,0 +1,261 @@ +@use 'sass:math'; +@use '@angular/cdk'; + +@use '../core/style/variables'; +@use '../core/style/elevation'; +@use '../core/style/private'; + + +$padding: 16px !default; +$border-radius: 4px !default; +$header-size: 40px !default; + +.mat-card { + @include elevation.elevation-transition; + @include private.private-animation-noop(); + display: block; + position: relative; + padding: $padding; + border-radius: $border-radius; + + > .mat-divider-horizontal { + position: absolute; + left: 0; + width: 100%; + + [dir='rtl'] & { + left: auto; + right: 0; + } + + &.mat-divider-inset { + position: static; + margin: 0; + + [dir='rtl'] & { + // Needs to be reset explicitly since the divider set `margin-right` in particular in RTL. + margin-right: 0; + } + } + } + + @include cdk.high-contrast(active, off) { + outline: solid 1px; + } +} + +// base styles for each card section preset (mat-card-content, etc) +%mat-card-section-base { + display: block; + margin-bottom: 16px; +} + +.mat-card-title { + display: block; + margin-bottom: 8px; +} + +.mat-card-subtitle, .mat-card-content { + @extend %mat-card-section-base; +} + +.mat-card-actions { + @extend %mat-card-section-base; + margin-left: math.div(-$padding, 2); + margin-right: math.div(-$padding, 2); + padding: 8px 0; +} + +.mat-card-actions-align-end { + display: flex; + justify-content: flex-end; +} + +.mat-card-image { + width: calc(100% + #{$padding * 2}); + margin: 0 (-$padding) 16px (-$padding); + + // The following properties are to handle `mat-card-image` on a `picture` element. + display: block; + overflow: hidden; + + img { + width: 100%; + } +} + +.mat-card-footer { + // The negative margins pulls out the element, countering the padding + // to get the footer to be flush against the side of the card. + $margin: -$padding; + + display: block; + margin: 0 $margin $margin $margin; +} + +.mat-card-actions { + .mat-button, + .mat-raised-button, + .mat-stroked-button { + margin: 0 8px; + } +} + +// HEADER STYLES + +.mat-card-header { + display: flex; + flex-direction: row; + + .mat-card-title { + margin-bottom: 12px; + } +} + +.mat-card-header-text { + margin: 0 $padding; +} + +.mat-card-avatar { + height: $header-size; + width: $header-size; + border-radius: 50%; + flex-shrink: 0; + + // Makes `` tags behave like `background-size: cover`. Not supported + // in IE, but we're using it as a progressive enhancement. + object-fit: cover; +} + +// TITLE-GROUP STYLES + +.mat-card-title-group { + display: flex; + justify-content: space-between; +} + +.mat-card-sm-image { + width: 80px; + height: 80px; +} + +.mat-card-md-image { + width: 112px; + height: 112px; +} + +.mat-card-lg-image { + width: 152px; + height: 152px; +} + +// This should normally also extend the `%mat-card-title-img`, but in order to avoid breaking +// changes, we need to keep the horizontal margin reversion for now. +// See: https://github.com/angular/components/issues/12203 +.mat-card-xl-image { + width: 240px; + height: 240px; + margin: -8px; + + // Special treatment inside title group in order to fix the media areas inside of a title-group. + // This can be removed once #12203 has been addressed. + .mat-card-title-group > & { + // As per Material Design specifications, the images exceed the *top* content-box and take + // up some space. The margin below is necessary because otherwise space of the actual card + // content will be overlapped. + margin: -8px 0 8px; + } +} + +// MEDIA QUERIES + +@media (variables.$xsmall) { + .mat-card-title-group { + margin: 0; + } + + .mat-card-xl-image { + margin-left: 0; + margin-right: 0; + } +} + +// FIRST/LAST CHILD ADJUSTMENTS + +// top els in mat-card-content and mat-card can't have their default margin-tops (e.g.

tags) +// or they'll incorrectly add to card's top padding +.mat-card > :first-child, .mat-card-content > :first-child { + margin-top: 0; +} + +// last els in mat-card-content and mat-card can't have their default margin-bottoms (e.g.

tags) +// or they'll incorrectly add to card's bottom padding +.mat-card > :last-child:not(.mat-card-footer), +.mat-card-content > :last-child:not(.mat-card-footer) { + margin-bottom: 0; +} + +// if main image is on top, need to place it flush against top +// (by stripping card's default padding) +.mat-card-image:first-child { + margin-top: -$padding; + border-top-left-radius: inherit; + border-top-right-radius: inherit; +} + +// actions panel on bottom should be 8px from bottom of card +// so must strip 16px from default card padding +.mat-card > .mat-card-actions:last-child { + margin-bottom: -8px; + padding-bottom: 0; +} + +// actions panel should always be 8px from sides, +// so the first button in the actions panel can't add its own margins +.mat-card-actions { + &:not(.mat-card-actions-align-end) { + .mat-button, + .mat-raised-button, + .mat-stroked-button { + &:first-child { + margin-left: 0; + margin-right: 0; + } + } + } +} + +.mat-card-actions-align-end { + .mat-button, + .mat-raised-button, + .mat-stroked-button { + &:last-child { + margin-left: 0; + margin-right: 0; + } + } +} + +// should be 12px space between titles and subtitles generally +// default margin-bottom is 16px, so need to move lower title up 4px +.mat-card-title:not(:first-child), .mat-card-subtitle:not(:first-child) { + margin-top: -4px; +} + +// should be 8px space between titles and subtitles in header +// default margin-bottom is 16px, so need to move subtitle in header up 4px +.mat-card-header .mat-card-subtitle:not(:first-child) { + margin-top: -8px; +} + +// xl image should always have 16px on top. +// when it's the first el, it'll need to remove 8px from default card padding +.mat-card > .mat-card-xl-image:first-child { + margin-top: -8px; +} + +// xl image should always have 16px on bottom +// when it's the last el, it'll need to remove 8px from default card padding +.mat-card > .mat-card-xl-image:last-child { + margin-bottom: -8px; +} diff --git a/src/material/legacy-card/card.ts b/src/material/legacy-card/card.ts new file mode 100644 index 000000000000..8994b1f42b0e --- /dev/null +++ b/src/material/legacy-card/card.ts @@ -0,0 +1,195 @@ +/** + * @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, + ViewEncapsulation, + ChangeDetectionStrategy, + Directive, + Input, + Optional, + Inject, +} from '@angular/core'; +import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; + +/** + * Content of a card, needed as it's used as a selector in the API. + * @docs-private + */ +@Directive({ + selector: 'mat-card-content, [mat-card-content], [matCardContent]', + host: {'class': 'mat-card-content'}, +}) +export class MatLegacyCardContent {} + +/** + * Title of a card, needed as it's used as a selector in the API. + * @docs-private + */ +@Directive({ + selector: `mat-card-title, [mat-card-title], [matCardTitle]`, + host: { + 'class': 'mat-card-title', + }, +}) +export class MatLegacyCardTitle {} + +/** + * Sub-title of a card, needed as it's used as a selector in the API. + * @docs-private + */ +@Directive({ + selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`, + host: { + 'class': 'mat-card-subtitle', + }, +}) +export class MatLegacyCardSubtitle {} + +/** + * Action section of a card, needed as it's used as a selector in the API. + * @docs-private + */ +@Directive({ + selector: 'mat-card-actions', + exportAs: 'matCardActions', + host: { + 'class': 'mat-card-actions', + '[class.mat-card-actions-align-end]': 'align === "end"', + }, +}) +export class MatLegacyCardActions { + /** Position of the actions inside the card. */ + @Input() align: 'start' | 'end' = 'start'; +} + +/** + * Footer of a card, needed as it's used as a selector in the API. + * @docs-private + */ +@Directive({ + selector: 'mat-card-footer', + host: {'class': 'mat-card-footer'}, +}) +export class MatLegacyCardFooter {} + +/** + * Image used in a card, needed to add the mat- CSS styling. + * @docs-private + */ +@Directive({ + selector: '[mat-card-image], [matCardImage]', + host: {'class': 'mat-card-image'}, +}) +export class MatLegacyCardImage {} + +/** + * Image used in a card, needed to add the mat- CSS styling. + * @docs-private + */ +@Directive({ + selector: '[mat-card-sm-image], [matCardImageSmall]', + host: {'class': 'mat-card-sm-image'}, +}) +export class MatLegacyCardSmImage {} + +/** + * Image used in a card, needed to add the mat- CSS styling. + * @docs-private + */ +@Directive({ + selector: '[mat-card-md-image], [matCardImageMedium]', + host: {'class': 'mat-card-md-image'}, +}) +export class MatLegacyCardMdImage {} + +/** + * Image used in a card, needed to add the mat- CSS styling. + * @docs-private + */ +@Directive({ + selector: '[mat-card-lg-image], [matCardImageLarge]', + host: {'class': 'mat-card-lg-image'}, +}) +export class MatLegacyCardLgImage {} + +/** + * Large image used in a card, needed to add the mat- CSS styling. + * @docs-private + */ +@Directive({ + selector: '[mat-card-xl-image], [matCardImageXLarge]', + host: {'class': 'mat-card-xl-image'}, +}) +export class MatLegacyCardXlImage {} + +/** + * Avatar image used in a card, needed to add the mat- CSS styling. + * @docs-private + */ +@Directive({ + selector: '[mat-card-avatar], [matCardAvatar]', + host: {'class': 'mat-card-avatar'}, +}) +export class MatLegacyCardAvatar {} + +/** + * A basic content container component that adds the styles of a Material design card. + * + * While this component can be used alone, it also provides a number + * of preset styles for common card sections, including: + * - mat-card-title + * - mat-card-subtitle + * - mat-card-content + * - mat-card-actions + * - mat-card-footer + */ +@Component({ + selector: 'mat-card', + exportAs: 'matCard', + templateUrl: 'card.html', + styleUrls: ['card.css'], + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: { + 'class': 'mat-card mat-focus-indicator', + '[class._mat-animation-noopable]': '_animationMode === "NoopAnimations"', + }, +}) +export class MatLegacyCard { + // @breaking-change 9.0.0 `_animationMode` parameter to be made required. + constructor(@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {} +} + +/** + * Component intended to be used within the `` component. It adds styles for a + * preset header section (i.e. a title, subtitle, and avatar layout). + * @docs-private + */ +@Component({ + selector: 'mat-card-header', + templateUrl: 'card-header.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: {'class': 'mat-card-header'}, +}) +export class MatLegacyCardHeader {} + +/** + * Component intended to be used within the `` component. It adds styles for a preset + * layout that groups an image with a title section. + * @docs-private + */ +@Component({ + selector: 'mat-card-title-group', + templateUrl: 'card-title-group.html', + encapsulation: ViewEncapsulation.None, + changeDetection: ChangeDetectionStrategy.OnPush, + host: {'class': 'mat-card-title-group'}, +}) +export class MatLegacyCardTitleGroup {} diff --git a/src/material-experimental/mdc-card/index.ts b/src/material/legacy-card/index.ts similarity index 100% rename from src/material-experimental/mdc-card/index.ts rename to src/material/legacy-card/index.ts diff --git a/src/material-experimental/mdc-card/public-api.ts b/src/material/legacy-card/public-api.ts similarity index 87% rename from src/material-experimental/mdc-card/public-api.ts rename to src/material/legacy-card/public-api.ts index 78483f2234d3..55da606b9f5d 100644 --- a/src/material-experimental/mdc-card/public-api.ts +++ b/src/material/legacy-card/public-api.ts @@ -7,4 +7,4 @@ */ export * from './card'; -export * from './module'; +export * from './card-module'; diff --git a/src/material-experimental/mdc-card/testing/BUILD.bazel b/src/material/legacy-card/testing/BUILD.bazel similarity index 72% rename from src/material-experimental/mdc-card/testing/BUILD.bazel rename to src/material/legacy-card/testing/BUILD.bazel index 18279bc069f9..a9fe0d9224b9 100644 --- a/src/material-experimental/mdc-card/testing/BUILD.bazel +++ b/src/material/legacy-card/testing/BUILD.bazel @@ -19,18 +19,31 @@ filegroup( srcs = glob(["**/*.ts"]), ) +ng_test_library( + name = "harness_tests_lib", + srcs = ["shared.spec.ts"], + deps = [ + ":testing", + "//src/cdk/testing", + "//src/cdk/testing/testbed", + "//src/material/legacy-card", + "@npm//@angular/platform-browser", + ], +) + ng_test_library( name = "unit_tests_lib", srcs = glob( ["**/*.spec.ts"], exclude = [ "**/*.e2e.spec.ts", + "shared.spec.ts", ], ), deps = [ + ":harness_tests_lib", ":testing", - "//src/material-experimental/mdc-card", - "//src/material/card/testing:harness_tests_lib", + "//src/material/legacy-card", ], ) @@ -46,7 +59,7 @@ ng_e2e_test_library( "//src/cdk/testing", "//src/cdk/testing/private/e2e", "//src/cdk/testing/protractor", - "//src/material-experimental/mdc-card/testing", + "//src/material/legacy-card/testing", ], ) diff --git a/src/material-experimental/mdc-card/testing/card-harness-filters.ts b/src/material/legacy-card/testing/card-harness-filters.ts similarity index 89% rename from src/material-experimental/mdc-card/testing/card-harness-filters.ts rename to src/material/legacy-card/testing/card-harness-filters.ts index 30a9cfb5471e..bf3ef830e0f0 100644 --- a/src/material-experimental/mdc-card/testing/card-harness-filters.ts +++ b/src/material/legacy-card/testing/card-harness-filters.ts @@ -9,7 +9,7 @@ import {BaseHarnessFilters} from '@angular/cdk/testing'; /** A set of criteria that can be used to filter a list of `MatCardHarness` instances. */ -export interface CardHarnessFilters extends BaseHarnessFilters { +export interface LegacyCardHarnessFilters extends BaseHarnessFilters { /** Only find instances whose text matches the given value. */ text?: string | RegExp; /** Only find instances whose title matches the given value. */ diff --git a/src/material-experimental/mdc-card/testing/card-harness.e2e.spec.ts b/src/material/legacy-card/testing/card-harness.e2e.spec.ts similarity index 73% rename from src/material-experimental/mdc-card/testing/card-harness.e2e.spec.ts rename to src/material/legacy-card/testing/card-harness.e2e.spec.ts index e2e9e4411f8a..36d7adf16d70 100644 --- a/src/material-experimental/mdc-card/testing/card-harness.e2e.spec.ts +++ b/src/material/legacy-card/testing/card-harness.e2e.spec.ts @@ -1,19 +1,19 @@ import {HarnessLoader} from '@angular/cdk/testing'; import {ProtractorHarnessEnvironment} from '@angular/cdk/testing/protractor'; -import {MatCardHarness} from '@angular/material-experimental/mdc-card/testing/card-harness'; +import {MatLegacyCardHarness} from '@angular/material/legacy-card/testing/card-harness'; import {browser} from 'protractor'; describe('card harness', () => { let loader: HarnessLoader; - beforeEach(async () => await browser.get('/mdc-card')); + beforeEach(async () => await browser.get('/cards')); beforeEach(() => { loader = ProtractorHarnessEnvironment.loader(); }); it('should get card text', async () => { - const card = await loader.getHarness(MatCardHarness); + const card = await loader.getHarness(MatLegacyCardHarness); expect(await card.getText()).toBe( 'Shiba InuDog Breed The Shiba Inu is the smallest of ' + 'the six original and distinct spitz breeds of dog from ' + @@ -24,12 +24,12 @@ describe('card harness', () => { }); it('should get title text', async () => { - const card = await loader.getHarness(MatCardHarness); + const card = await loader.getHarness(MatLegacyCardHarness); expect(await card.getTitleText()).toBe('Shiba Inu'); }); it('should get subtitle text', async () => { - const card = await loader.getHarness(MatCardHarness); + const card = await loader.getHarness(MatLegacyCardHarness); expect(await card.getSubtitleText()).toBe('Dog Breed'); }); }); diff --git a/src/material/legacy-card/testing/card-harness.spec.ts b/src/material/legacy-card/testing/card-harness.spec.ts new file mode 100644 index 000000000000..5a0a81fffb64 --- /dev/null +++ b/src/material/legacy-card/testing/card-harness.spec.ts @@ -0,0 +1,12 @@ +import {MatLegacyCardModule} from '@angular/material/legacy-card'; +import {runHarnessTests} from '@angular/material/legacy-card/testing/shared.spec'; +import {MatLegacyCardHarness, MatLegacyCardSection} from './card-harness'; + +describe('Non-MDC-based MatCardHarness', () => { + runHarnessTests(MatLegacyCardModule, MatLegacyCardHarness, { + header: MatLegacyCardSection.HEADER, + content: MatLegacyCardSection.CONTENT, + actions: MatLegacyCardSection.ACTIONS, + footer: MatLegacyCardSection.FOOTER, + }); +}); diff --git a/src/material-experimental/mdc-card/testing/card-harness.ts b/src/material/legacy-card/testing/card-harness.ts similarity index 60% rename from src/material-experimental/mdc-card/testing/card-harness.ts rename to src/material/legacy-card/testing/card-harness.ts index a79c87098582..402b4ff142e0 100644 --- a/src/material-experimental/mdc-card/testing/card-harness.ts +++ b/src/material/legacy-card/testing/card-harness.ts @@ -6,36 +6,30 @@ * found in the LICENSE file at https://angular.io/license */ -import { - ComponentHarnessConstructor, - ContentContainerComponentHarness, - HarnessPredicate, -} from '@angular/cdk/testing'; -import {CardHarnessFilters} from './card-harness-filters'; +import {HarnessPredicate, ContentContainerComponentHarness} from '@angular/cdk/testing'; +import {LegacyCardHarnessFilters} from './card-harness-filters'; /** Selectors for different sections of the mat-card that can container user content. */ -export const enum MatCardSection { - HEADER = '.mat-mdc-card-header', - CONTENT = '.mat-mdc-card-content', - ACTIONS = '.mat-mdc-card-actions', - FOOTER = '.mat-mdc-card-footer', +export const enum MatLegacyCardSection { + HEADER = '.mat-card-header', + CONTENT = '.mat-card-content', + ACTIONS = '.mat-card-actions', + FOOTER = '.mat-card-footer', } -/** Harness for interacting with an MDC-based mat-card in tests. */ -export class MatCardHarness extends ContentContainerComponentHarness { +/** Harness for interacting with a standard mat-card in tests. */ +export class MatLegacyCardHarness extends ContentContainerComponentHarness { /** The selector for the host element of a `MatCard` instance. */ - static hostSelector = '.mat-mdc-card'; + static hostSelector = '.mat-card'; /** - * Gets a `HarnessPredicate` that can be used to search for a card with specific attributes. + * Gets a `HarnessPredicate` that can be used to search for a `MatCardHarness` that meets + * certain criteria. * @param options Options for filtering which card instances are considered a match. * @return a `HarnessPredicate` configured with the given options. */ - static with( - this: ComponentHarnessConstructor, - options: CardHarnessFilters = {}, - ): HarnessPredicate { - return new HarnessPredicate(this, options) + static with(options: LegacyCardHarnessFilters = {}): HarnessPredicate { + return new HarnessPredicate(MatLegacyCardHarness, options) .addOption('text', options.text, (harness, text) => HarnessPredicate.stringMatches(harness.getText(), text), ) @@ -47,8 +41,8 @@ export class MatCardHarness extends ContentContainerComponentHarness { diff --git a/src/material-experimental/mdc-card/testing/index.ts b/src/material/legacy-card/testing/index.ts similarity index 100% rename from src/material-experimental/mdc-card/testing/index.ts rename to src/material/legacy-card/testing/index.ts diff --git a/src/material-experimental/mdc-card/testing/public-api.ts b/src/material/legacy-card/testing/public-api.ts similarity index 100% rename from src/material-experimental/mdc-card/testing/public-api.ts rename to src/material/legacy-card/testing/public-api.ts diff --git a/src/material/card/testing/shared.spec.ts b/src/material/legacy-card/testing/shared.spec.ts similarity index 90% rename from src/material/card/testing/shared.spec.ts rename to src/material/legacy-card/testing/shared.spec.ts index 1c1c5edb1d75..ccd874e05949 100644 --- a/src/material/card/testing/shared.spec.ts +++ b/src/material/legacy-card/testing/shared.spec.ts @@ -2,13 +2,16 @@ import {ComponentHarness, HarnessLoader, parallel} from '@angular/cdk/testing'; import {TestbedHarnessEnvironment} from '@angular/cdk/testing/testbed'; import {Component} from '@angular/core'; import {ComponentFixture, TestBed} from '@angular/core/testing'; -import {MatCardModule} from '@angular/material/card'; -import {MatCardHarness, MatCardSection} from '@angular/material/card/testing/card-harness'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; +import { + MatLegacyCardHarness, + MatLegacyCardSection, +} from '@angular/material/legacy-card/testing/card-harness'; /** Shared tests to run on both the original and MDC-based cards. */ export function runHarnessTests( - cardModule: typeof MatCardModule, - cardHarness: typeof MatCardHarness, + cardModule: typeof MatLegacyCardModule, + cardHarness: typeof MatLegacyCardHarness, contentSelectors: {header: string; content: string; actions: string; footer: string}, ) { let fixture: ComponentFixture; @@ -70,28 +73,32 @@ export function runHarnessTests( it('should get a harness loader for the card header', async () => { const card = await loader.getHarness(cardHarness.with({title: 'Shiba Inu'})); - const headerLoader = await card.getChildLoader(contentSelectors.header as MatCardSection); + const headerLoader = await card.getChildLoader(contentSelectors.header as MatLegacyCardSection); const headerSubcomponents = (await headerLoader?.getAllHarnesses(DummyHarness)) ?? []; expect(headerSubcomponents.length).toBe(2); }); it('should get a harness loader for the card content', async () => { const card = await loader.getHarness(cardHarness.with({title: 'Shiba Inu'})); - const contentLoader = await card.getChildLoader(contentSelectors.content as MatCardSection); + const contentLoader = await card.getChildLoader( + contentSelectors.content as MatLegacyCardSection, + ); const contentSubcomponents = (await contentLoader?.getAllHarnesses(DummyHarness)) ?? []; expect(contentSubcomponents.length).toBe(1); }); it('should get a harness loader for the card actions', async () => { const card = await loader.getHarness(cardHarness.with({title: 'Shiba Inu'})); - const actionLoader = await card.getChildLoader(contentSelectors.actions as MatCardSection); + const actionLoader = await card.getChildLoader( + contentSelectors.actions as MatLegacyCardSection, + ); const actionSubcomponents = (await actionLoader?.getAllHarnesses(DummyHarness)) ?? []; expect(actionSubcomponents.length).toBe(2); }); it('should get a harness loader for the card footer', async () => { const card = await loader.getHarness(cardHarness.with({title: 'Shiba Inu'})); - const footerLoader = await card.getChildLoader(contentSelectors.footer as MatCardSection); + const footerLoader = await card.getChildLoader(contentSelectors.footer as MatLegacyCardSection); const footerSubcomponents = (await footerLoader?.getAllHarnesses(DummyHarness)) ?? []; expect(footerSubcomponents.length).toBe(1); }); diff --git a/src/material/legacy-core/theming/_all-theme.scss b/src/material/legacy-core/theming/_all-theme.scss index 194438dddfcb..2065fd580f56 100644 --- a/src/material/legacy-core/theming/_all-theme.scss +++ b/src/material/legacy-core/theming/_all-theme.scss @@ -1,14 +1,11 @@ @use '../../core/theming/theming'; - -// Add legacy theme imports here, e.g.: -// @use '../..//-theme'; +@use '../../legacy-card/card-theme'; // Create a theme. @mixin all-legacy-component-themes($theme-or-color-config) { $dedupe-key: 'angular-material-legacy-theme'; @include theming.private-check-duplicate-theme-styles($theme-or-color-config, $dedupe-key) { - // Add legacy theme includes here, e.g.: - // @include -theme.theme($theme-or-color-config); + @include card-theme.theme($theme-or-color-config); } } diff --git a/src/material/legacy-core/typography/_all-typography.scss b/src/material/legacy-core/typography/_all-typography.scss index eac868f91aa7..bca8ffc7d94b 100644 --- a/src/material/legacy-core/typography/_all-typography.scss +++ b/src/material/legacy-core/typography/_all-typography.scss @@ -1,8 +1,6 @@ @use '../../core/typography/typography'; @use '../../core/theming/theming'; - -// Add legacy theme imports here, e.g.: -// @use '../..//-theme'; +@use '../../legacy-card/card-theme'; // Includes all of the typographic styles. @mixin all-legacy-component-typographies($config-or-theme: null) { @@ -20,8 +18,7 @@ // mixin that is transitively loaded by the `all-theme` file, imports `all-typography` which // would then load `all-theme` again. This ultimately results a circular dependency. - // Add legacy typography includes here, e.g.: - // @include -theme.typography($config); + @include card-theme.typography($config); } // @deprecated Use `all-legacy-component-typographies`. diff --git a/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 6a43509844c9..9abb3ee186a9 100644 --- a/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -2,7 +2,7 @@ import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { ReactiveFormsModule } from '@angular/forms'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; +import { MatCardModule } from '@angular/material/legacy-card'; import { MatInputModule } from '@angular/material/input'; import { MatRadioModule } from '@angular/material/radio'; import { MatSelectModule } from '@angular/material/select'; diff --git a/src/material/schematics/ng-generate/address-form/index.ts b/src/material/schematics/ng-generate/address-form/index.ts index 83700133efe5..9f6f627f6e42 100644 --- a/src/material/schematics/ng-generate/address-form/index.ts +++ b/src/material/schematics/ng-generate/address-form/index.ts @@ -43,7 +43,7 @@ function addFormModulesToModule(options: Schema) { 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, 'MatCardModule', '@angular/material/legacy-card'); addModuleImportToModule(host, modulePath, 'ReactiveFormsModule', '@angular/forms'); }; } diff --git a/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template b/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template index 85f093fcefe4..9f37e3ba5855 100644 --- a/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template +++ b/src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.spec.ts.template @@ -2,7 +2,7 @@ import { LayoutModule } from '@angular/cdk/layout'; import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { waitForAsync, ComponentFixture, TestBed } from '@angular/core/testing'; import { MatButtonModule } from '@angular/material/button'; -import { MatCardModule } from '@angular/material/card'; +import { MatCardModule } from '@angular/material/legacy-card'; import { MatGridListModule } from '@angular/material/grid-list'; import { MatIconModule } from '@angular/material/icon'; import { MatMenuModule } from '@angular/material/menu'; diff --git a/src/material/schematics/ng-generate/dashboard/index.spec.ts b/src/material/schematics/ng-generate/dashboard/index.spec.ts index 3a5f99a968b0..819527745b4d 100644 --- a/src/material/schematics/ng-generate/dashboard/index.spec.ts +++ b/src/material/schematics/ng-generate/dashboard/index.spec.ts @@ -44,7 +44,9 @@ describe('material-dashboard-schematic', () => { expect(moduleContent).toContain( `import { MatGridListModule } from '@angular/material/grid-list';`, ); - expect(moduleContent).toContain(`import { MatCardModule } from '@angular/material/card';`); + expect(moduleContent).toContain( + `import { MatCardModule } from '@angular/material/legacy-card';`, + ); expect(moduleContent).toContain(`import { MatMenuModule } from '@angular/material/menu';`); expect(moduleContent).toContain(`import { MatIconModule } from '@angular/material/icon';`); expect(moduleContent).toContain(`import { MatButtonModule } from '@angular/material/button';`); diff --git a/src/material/schematics/ng-generate/dashboard/index.ts b/src/material/schematics/ng-generate/dashboard/index.ts index 578fcee684e4..45d19a3b770d 100644 --- a/src/material/schematics/ng-generate/dashboard/index.ts +++ b/src/material/schematics/ng-generate/dashboard/index.ts @@ -40,7 +40,7 @@ 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, 'MatCardModule', '@angular/material/card'); + addModuleImportToModule(host, modulePath, 'MatCardModule', '@angular/material/legacy-card'); addModuleImportToModule(host, modulePath, 'MatMenuModule', '@angular/material/menu'); addModuleImportToModule(host, modulePath, 'MatIconModule', '@angular/material/icon'); addModuleImportToModule(host, modulePath, 'MatButtonModule', '@angular/material/button'); diff --git a/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts b/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts index 0327896e41ad..bfd6f6eec8a5 100644 --- a/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts +++ b/src/material/schematics/ng-update/migrations/package-imports-v8/secondary-entry-points-migration.ts @@ -116,7 +116,7 @@ export class SecondaryEntryPointsMigration extends Migration { // Transforms the import declaration into multiple import declarations that import // the given symbols from the individual secondary entry-points. For example: - // import {MatCardModule, MatCardTitle} from '@angular/material/card'; + // import {MatCardModule, MatCardTitle} from '@angular/material/legacy-card'; // import {MatRadioModule} from '@angular/material/radio'; const newImportStatements = Array.from(importMap.entries()) .sort() 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 0b4b248ec134..a2ce2d092306 100644 --- a/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts +++ b/src/universal-app/kitchen-sink-mdc/kitchen-sink-mdc.ts @@ -1,7 +1,7 @@ import {Component, NgModule, ErrorHandler} from '@angular/core'; import {MatAutocompleteModule} from '@angular/material-experimental/mdc-autocomplete'; import {MatButtonModule} from '@angular/material-experimental/mdc-button'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; import {MatCheckboxModule} from '@angular/material-experimental/mdc-checkbox'; import {MatFormFieldModule} from '@angular/material-experimental/mdc-form-field'; import {MatInputModule} from '@angular/material-experimental/mdc-input'; diff --git a/src/universal-app/kitchen-sink/kitchen-sink.ts b/src/universal-app/kitchen-sink/kitchen-sink.ts index 72b7f3cb65a9..81afe6996d73 100644 --- a/src/universal-app/kitchen-sink/kitchen-sink.ts +++ b/src/universal-app/kitchen-sink/kitchen-sink.ts @@ -7,7 +7,7 @@ import {MatNativeDateModule, MatRippleModule} from '@angular/material/core'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatButtonModule} from '@angular/material/button'; import {MatButtonToggleModule} from '@angular/material/button-toggle'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; import {MatCheckboxModule} from '@angular/material/checkbox'; import {MatChipsModule} from '@angular/material/chips'; import {MatTableModule} from '@angular/material/table'; @@ -103,7 +103,7 @@ export class KitchenSink { MatBottomSheetModule, MatButtonModule, MatButtonToggleModule, - MatCardModule, + MatLegacyCardModule, MatCheckboxModule, MatChipsModule, MatDatepickerModule, diff --git a/test/benchmarks/material/card/BUILD.bazel b/test/benchmarks/material/card/BUILD.bazel index 12b9b17ca06d..883235e4908c 100644 --- a/test/benchmarks/material/card/BUILD.bazel +++ b/test/benchmarks/material/card/BUILD.bazel @@ -14,7 +14,7 @@ component_benchmark( ng_deps = [ "@npm//@angular/core", "@npm//@angular/platform-browser", - "//src/material/card", + "//src/material/legacy-card", ], ng_srcs = [":app.module.ts"], prefix = "", diff --git a/test/benchmarks/material/card/app.module.ts b/test/benchmarks/material/card/app.module.ts index e5414314678d..6fdc7727df06 100644 --- a/test/benchmarks/material/card/app.module.ts +++ b/test/benchmarks/material/card/app.module.ts @@ -8,7 +8,7 @@ import {Component, NgModule, ViewEncapsulation} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; -import {MatCardModule} from '@angular/material/card'; +import {MatLegacyCardModule} from '@angular/material/legacy-card'; /** component: mat-card */ @@ -36,7 +36,7 @@ export class CardBenchmarkApp { @NgModule({ declarations: [CardBenchmarkApp], - imports: [BrowserModule, MatCardModule], + imports: [BrowserModule, MatLegacyCardModule], bootstrap: [CardBenchmarkApp], }) export class AppModule {} diff --git a/test/benchmarks/mdc/card/BUILD.bazel b/test/benchmarks/mdc/card/BUILD.bazel index e1845c84d04a..7dbd5c3096c2 100644 --- a/test/benchmarks/mdc/card/BUILD.bazel +++ b/test/benchmarks/mdc/card/BUILD.bazel @@ -14,7 +14,7 @@ component_benchmark( ng_deps = [ "@npm//@angular/core", "@npm//@angular/platform-browser", - "//src/material-experimental/mdc-card", + "//src/material/card", ], ng_srcs = [":app.module.ts"], prefix = "", diff --git a/test/benchmarks/mdc/card/app.module.ts b/test/benchmarks/mdc/card/app.module.ts index 1a500e456ad1..64a7570992f8 100644 --- a/test/benchmarks/mdc/card/app.module.ts +++ b/test/benchmarks/mdc/card/app.module.ts @@ -8,7 +8,7 @@ import {Component, NgModule, ViewEncapsulation} from '@angular/core'; import {BrowserModule} from '@angular/platform-browser'; -import {MatCardModule} from '@angular/material-experimental/mdc-card'; +import {MatCardModule} from '@angular/material/card'; /** component: mdc-card */ diff --git a/tools/public_api_guard/material/card-testing.md b/tools/public_api_guard/material/card-testing.md index 5114c318a73f..babc3816028f 100644 --- a/tools/public_api_guard/material/card-testing.md +++ b/tools/public_api_guard/material/card-testing.md @@ -5,6 +5,7 @@ ```ts import { BaseHarnessFilters } from '@angular/cdk/testing'; +import { ComponentHarnessConstructor } from '@angular/cdk/testing'; import { ContentContainerComponentHarness } from '@angular/cdk/testing'; import { HarnessPredicate } from '@angular/cdk/testing'; @@ -21,19 +22,19 @@ export class MatCardHarness extends ContentContainerComponentHarness; getTitleText(): Promise; static hostSelector: string; - static with(options?: CardHarnessFilters): HarnessPredicate; + static with(this: ComponentHarnessConstructor, options?: CardHarnessFilters): HarnessPredicate; } // @public export const enum MatCardSection { // (undocumented) - ACTIONS = ".mat-card-actions", + ACTIONS = ".mat-mdc-card-actions", // (undocumented) - CONTENT = ".mat-card-content", + CONTENT = ".mat-mdc-card-content", // (undocumented) - FOOTER = ".mat-card-footer", + FOOTER = ".mat-mdc-card-footer", // (undocumented) - HEADER = ".mat-card-header" + HEADER = ".mat-mdc-card-header" } // (No @packageDocumentation comment for this package) diff --git a/tools/public_api_guard/material/card.md b/tools/public_api_guard/material/card.md index e5e474222f74..9ce23fb20208 100644 --- a/tools/public_api_guard/material/card.md +++ b/tools/public_api_guard/material/card.md @@ -6,14 +6,19 @@ import * as i0 from '@angular/core'; import * as i2 from '@angular/material/core'; +import * as i3 from '@angular/common'; +import { InjectionToken } from '@angular/core'; + +// @public +export const MAT_CARD_CONFIG: InjectionToken; // @public export class MatCard { - constructor(_animationMode?: string | undefined); + constructor(config?: MatCardConfig); // (undocumented) - _animationMode?: string | undefined; + appearance: MatCardAppearance; // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -27,6 +32,9 @@ export class MatCardActions { static ɵfac: i0.ɵɵFactoryDeclaration; } +// @public (undocumented) +export type MatCardAppearance = 'outlined' | 'raised'; + // @public export class MatCardAvatar { // (undocumented) @@ -35,10 +43,15 @@ export class MatCardAvatar { static ɵfac: i0.ɵɵFactoryDeclaration; } +// @public +export interface MatCardConfig { + appearance?: MatCardAppearance; +} + // @public export class MatCardContent { // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration; + static ɵdir: i0.ɵɵDirectiveDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } @@ -90,7 +103,7 @@ export class MatCardModule { // (undocumented) static ɵinj: i0.ɵɵInjectorDeclaration; // (undocumented) - static ɵmod: i0.ɵɵNgModuleDeclaration; + static ɵmod: i0.ɵɵNgModuleDeclaration; } // @public @@ -120,7 +133,7 @@ export class MatCardTitle { // @public export class MatCardTitleGroup { // (undocumented) - static ɵcmp: i0.ɵɵComponentDeclaration; + static ɵcmp: i0.ɵɵComponentDeclaration; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration; } diff --git a/tools/public_api_guard/material/legacy-card-testing.md b/tools/public_api_guard/material/legacy-card-testing.md new file mode 100644 index 000000000000..a25e790ef2cc --- /dev/null +++ b/tools/public_api_guard/material/legacy-card-testing.md @@ -0,0 +1,41 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import { BaseHarnessFilters } from '@angular/cdk/testing'; +import { ContentContainerComponentHarness } from '@angular/cdk/testing'; +import { HarnessPredicate } from '@angular/cdk/testing'; + +// @public +export interface LegacyCardHarnessFilters extends BaseHarnessFilters { + subtitle?: string | RegExp; + text?: string | RegExp; + title?: string | RegExp; +} + +// @public +export class MatLegacyCardHarness extends ContentContainerComponentHarness { + getSubtitleText(): Promise; + getText(): Promise; + getTitleText(): Promise; + static hostSelector: string; + static with(options?: LegacyCardHarnessFilters): HarnessPredicate; +} + +// @public +export const enum MatLegacyCardSection { + // (undocumented) + ACTIONS = ".mat-card-actions", + // (undocumented) + CONTENT = ".mat-card-content", + // (undocumented) + FOOTER = ".mat-card-footer", + // (undocumented) + HEADER = ".mat-card-header" +} + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/public_api_guard/material/legacy-card.md b/tools/public_api_guard/material/legacy-card.md new file mode 100644 index 000000000000..d806becee535 --- /dev/null +++ b/tools/public_api_guard/material/legacy-card.md @@ -0,0 +1,138 @@ +## API Report File for "components-srcs" + +> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/). + +```ts + +import * as i0 from '@angular/core'; +import * as i2 from '@angular/material/core'; + +// @public +export class MatLegacyCard { + constructor(_animationMode?: string | undefined); + // (undocumented) + _animationMode?: string | undefined; + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardActions { + align: 'start' | 'end'; + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardAvatar { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardContent { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardFooter { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardHeader { + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardImage { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardLgImage { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardMdImage { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public (undocumented) +export class MatLegacyCardModule { + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; + // (undocumented) + static ɵinj: i0.ɵɵInjectorDeclaration; + // (undocumented) + static ɵmod: i0.ɵɵNgModuleDeclaration; +} + +// @public +export class MatLegacyCardSmImage { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardSubtitle { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardTitle { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardTitleGroup { + // (undocumented) + static ɵcmp: i0.ɵɵComponentDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// @public +export class MatLegacyCardXlImage { + // (undocumented) + static ɵdir: i0.ɵɵDirectiveDeclaration; + // (undocumented) + static ɵfac: i0.ɵɵFactoryDeclaration; +} + +// (No @packageDocumentation comment for this package) + +``` diff --git a/tools/stylelint/theme-mixin-api.ts b/tools/stylelint/theme-mixin-api.ts index 87cd53876a39..273513b21f9f 100644 --- a/tools/stylelint/theme-mixin-api.ts +++ b/tools/stylelint/theme-mixin-api.ts @@ -215,6 +215,8 @@ function getComponentNameFromPath(filePath: string): string | null { if (filePath.includes('material-experimental') && filePath.includes('mdc-')) { prefix = 'mat-mdc-'; + } else if (filePath.includes('material/legacy-')) { + prefix = 'mat-legacy-'; } else if (filePath.includes('material')) { prefix = 'mat-'; }