Skip to content

Commit af42dd6

Browse files
crisbetocrisbeto
committed
refactor(material/card): convert to standalone
Converts `material/card` to standalone.
1 parent 9cd6b3e commit af42dd6

File tree

5 files changed

+38
-23
lines changed

5 files changed

+38
-23
lines changed

‎src/material/card/card.spec.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -6,8 +6,7 @@ import {MatCard, MAT_CARD_CONFIG} from './card';
66
describe('MDC-based MatCard', () => {
77
function createComponent<T>(component: Type<T>, providers: Provider[] = []): ComponentFixture<T> {
88
TestBed.configureTestingModule({
9-
imports: [MatCardModule],
10-
declarations: [component],
9+
imports: [MatCardModule, component],
1110
providers,
1211
}).compileComponents();
1312

@@ -49,6 +48,8 @@ describe('MDC-based MatCard', () => {
4948

5049
@Component({
5150
template: '<mat-card></mat-card>',
51+
standalone: true,
52+
imports: [MatCard],
5253
})
5354
class BasicCard {
5455
@ViewChild(MatCard) card: MatCard;

‎src/material/card/card.ts

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -46,6 +46,7 @@ export const MAT_CARD_CONFIG = new InjectionToken<MatCardConfig>('MAT_CARD_CONFI
4646
exportAs: 'matCard',
4747
encapsulation: ViewEncapsulation.None,
4848
changeDetection: ChangeDetectionStrategy.OnPush,
49+
standalone: true,
4950
})
5051
export class MatCard {
5152
@Input() appearance: MatCardAppearance;
@@ -67,6 +68,7 @@ export class MatCard {
6768
@Directive({
6869
selector: `mat-card-title, [mat-card-title], [matCardTitle]`,
6970
host: {'class': 'mat-mdc-card-title'},
71+
standalone: true,
7072
})
7173
export class MatCardTitle {}
7274

@@ -81,6 +83,7 @@ export class MatCardTitle {}
8183
encapsulation: ViewEncapsulation.None,
8284
changeDetection: ChangeDetectionStrategy.OnPush,
8385
host: {'class': 'mat-mdc-card-title-group'},
86+
standalone: true,
8487
})
8588
export class MatCardTitleGroup {}
8689

@@ -94,6 +97,7 @@ export class MatCardTitleGroup {}
9497
@Directive({
9598
selector: 'mat-card-content',
9699
host: {'class': 'mat-mdc-card-content'},
100+
standalone: true,
97101
})
98102
export class MatCardContent {}
99103

@@ -107,6 +111,7 @@ export class MatCardContent {}
107111
@Directive({
108112
selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`,
109113
host: {'class': 'mat-mdc-card-subtitle'},
114+
standalone: true,
110115
})
111116
export class MatCardSubtitle {}
112117

@@ -124,6 +129,7 @@ export class MatCardSubtitle {}
124129
'class': 'mat-mdc-card-actions mdc-card__actions',
125130
'[class.mat-mdc-card-actions-align-end]': 'align === "end"',
126131
},
132+
standalone: true,
127133
})
128134
export class MatCardActions {
129135
// TODO(jelbourn): deprecate `align` in favor of `actionPosition` or `actionAlignment`
@@ -155,6 +161,7 @@ export class MatCardActions {
155161
encapsulation: ViewEncapsulation.None,
156162
changeDetection: ChangeDetectionStrategy.OnPush,
157163
host: {'class': 'mat-mdc-card-header'},
164+
standalone: true,
158165
})
159166
export class MatCardHeader {}
160167

@@ -168,6 +175,7 @@ export class MatCardHeader {}
168175
@Directive({
169176
selector: 'mat-card-footer',
170177
host: {'class': 'mat-mdc-card-footer'},
178+
standalone: true,
171179
})
172180
export class MatCardFooter {}
173181

@@ -187,6 +195,7 @@ export class MatCardFooter {}
187195
@Directive({
188196
selector: '[mat-card-image], [matCardImage]',
189197
host: {'class': 'mat-mdc-card-image mdc-card__media'},
198+
standalone: true,
190199
})
191200
export class MatCardImage {
192201
// TODO(jelbourn): support `.mdc-card__media--square` and `.mdc-card__media--16-9`.
@@ -196,27 +205,31 @@ export class MatCardImage {
196205
@Directive({
197206
selector: '[mat-card-sm-image], [matCardImageSmall]',
198207
host: {'class': 'mat-mdc-card-sm-image mdc-card__media'},
208+
standalone: true,
199209
})
200210
export class MatCardSmImage {}
201211

202212
/** Same as `MatCardImage`, but medium. */
203213
@Directive({
204214
selector: '[mat-card-md-image], [matCardImageMedium]',
205215
host: {'class': 'mat-mdc-card-md-image mdc-card__media'},
216+
standalone: true,
206217
})
207218
export class MatCardMdImage {}
208219

209220
/** Same as `MatCardImage`, but large. */
210221
@Directive({
211222
selector: '[mat-card-lg-image], [matCardImageLarge]',
212223
host: {'class': 'mat-mdc-card-lg-image mdc-card__media'},
224+
standalone: true,
213225
})
214226
export class MatCardLgImage {}
215227

216228
/** Same as `MatCardImage`, but extra-large. */
217229
@Directive({
218230
selector: '[mat-card-xl-image], [matCardImageXLarge]',
219231
host: {'class': 'mat-mdc-card-xl-image mdc-card__media'},
232+
standalone: true,
220233
})
221234
export class MatCardXlImage {}
222235

@@ -232,5 +245,6 @@ export class MatCardXlImage {}
232245
@Directive({
233246
selector: '[mat-card-avatar], [matCardAvatar]',
234247
host: {'class': 'mat-mdc-card-avatar'},
248+
standalone: true,
235249
})
236250
export class MatCardAvatar {}

‎src/material/card/module.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -44,8 +44,7 @@ const CARD_DIRECTIVES = [
4444
];
4545

4646
@NgModule({
47-
imports: [MatCommonModule, CommonModule],
47+
imports: [MatCommonModule, CommonModule, ...CARD_DIRECTIVES],
4848
exports: [CARD_DIRECTIVES, MatCommonModule],
49-
declarations: CARD_DIRECTIVES,
5049
})
5150
export class MatCardModule {}

‎src/material/card/testing/card-harness.spec.ts

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ describe('MatCardHarness', () => {
1111

1212
beforeEach(async () => {
1313
await TestBed.configureTestingModule({
14-
imports: [MatCardModule],
15-
declarations: [CardHarnessTest],
14+
imports: [MatCardModule, CardHarnessTest],
1615
}).compileComponents();
1716

1817
fixture = TestBed.createComponent(CardHarnessTest);
@@ -124,6 +123,8 @@ describe('MatCardHarness', () => {
124123
</mat-card-footer>
125124
</mat-card>
126125
`,
126+
standalone: true,
127+
imports: [MatCardModule],
127128
})
128129
class CardHarnessTest {}
129130

‎tools/public_api_guard/material/card.md

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -5,8 +5,8 @@
55
```ts
66

77
import * as i0 from '@angular/core';
8-
import * as i2 from '@angular/material/core';
9-
import * as i3 from '@angular/common';
8+
import * as i1 from '@angular/material/core';
9+
import * as i2 from '@angular/common';
1010
import { InjectionToken } from '@angular/core';
1111

1212
// @public
@@ -18,7 +18,7 @@ export class MatCard {
1818
// (undocumented)
1919
appearance: MatCardAppearance;
2020
// (undocumented)
21-
static ɵcmp: i0.ɵɵComponentDeclaration<MatCard, "mat-card", ["matCard"], { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["*"], false, never>;
21+
static ɵcmp: i0.ɵɵComponentDeclaration<MatCard, "mat-card", ["matCard"], { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["*"], true, never>;
2222
// (undocumented)
2323
static ɵfac: i0.ɵɵFactoryDeclaration<MatCard, [{ optional: true; }]>;
2424
}
@@ -27,7 +27,7 @@ export class MatCard {
2727
export class MatCardActions {
2828
align: 'start' | 'end';
2929
// (undocumented)
30-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardActions, "mat-card-actions", ["matCardActions"], { "align": { "alias": "align"; "required": false; }; }, {}, never, never, false, never>;
30+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardActions, "mat-card-actions", ["matCardActions"], { "align": { "alias": "align"; "required": false; }; }, {}, never, never, true, never>;
3131
// (undocumented)
3232
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardActions, never>;
3333
}
@@ -38,7 +38,7 @@ export type MatCardAppearance = 'outlined' | 'raised';
3838
// @public
3939
export class MatCardAvatar {
4040
// (undocumented)
41-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardAvatar, "[mat-card-avatar], [matCardAvatar]", never, {}, {}, never, never, false, never>;
41+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardAvatar, "[mat-card-avatar], [matCardAvatar]", never, {}, {}, never, never, true, never>;
4242
// (undocumented)
4343
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardAvatar, never>;
4444
}
@@ -51,47 +51,47 @@ export interface MatCardConfig {
5151
// @public
5252
export class MatCardContent {
5353
// (undocumented)
54-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardContent, "mat-card-content", never, {}, {}, never, never, false, never>;
54+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardContent, "mat-card-content", never, {}, {}, never, never, true, never>;
5555
// (undocumented)
5656
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardContent, never>;
5757
}
5858

5959
// @public
6060
export class MatCardFooter {
6161
// (undocumented)
62-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardFooter, "mat-card-footer", never, {}, {}, never, never, false, never>;
62+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardFooter, "mat-card-footer", never, {}, {}, never, never, true, never>;
6363
// (undocumented)
6464
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardFooter, never>;
6565
}
6666

6767
// @public
6868
export class MatCardHeader {
6969
// (undocumented)
70-
static ɵcmp: i0.ɵɵComponentDeclaration<MatCardHeader, "mat-card-header", never, {}, {}, never, ["[mat-card-avatar], [matCardAvatar]", "mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]", "*"], false, never>;
70+
static ɵcmp: i0.ɵɵComponentDeclaration<MatCardHeader, "mat-card-header", never, {}, {}, never, ["[mat-card-avatar], [matCardAvatar]", "mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]", "*"], true, never>;
7171
// (undocumented)
7272
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardHeader, never>;
7373
}
7474

7575
// @public
7676
export class MatCardImage {
7777
// (undocumented)
78-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardImage, "[mat-card-image], [matCardImage]", never, {}, {}, never, never, false, never>;
78+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardImage, "[mat-card-image], [matCardImage]", never, {}, {}, never, never, true, never>;
7979
// (undocumented)
8080
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardImage, never>;
8181
}
8282

8383
// @public
8484
export class MatCardLgImage {
8585
// (undocumented)
86-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardLgImage, "[mat-card-lg-image], [matCardImageLarge]", never, {}, {}, never, never, false, never>;
86+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardLgImage, "[mat-card-lg-image], [matCardImageLarge]", never, {}, {}, never, never, true, never>;
8787
// (undocumented)
8888
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardLgImage, never>;
8989
}
9090

9191
// @public
9292
export class MatCardMdImage {
9393
// (undocumented)
94-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardMdImage, "[mat-card-md-image], [matCardImageMedium]", never, {}, {}, never, never, false, never>;
94+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardMdImage, "[mat-card-md-image], [matCardImageMedium]", never, {}, {}, never, never, true, never>;
9595
// (undocumented)
9696
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardMdImage, never>;
9797
}
@@ -103,45 +103,45 @@ export class MatCardModule {
103103
// (undocumented)
104104
static ɵinj: i0.ɵɵInjectorDeclaration<MatCardModule>;
105105
// (undocumented)
106-
static ɵmod: i0.ɵɵNgModuleDeclaration<MatCardModule, [typeof i1.MatCard, typeof i1.MatCardActions, typeof i1.MatCardAvatar, typeof i1.MatCardContent, typeof i1.MatCardFooter, typeof i1.MatCardHeader, typeof i1.MatCardImage, typeof i1.MatCardLgImage, typeof i1.MatCardMdImage, typeof i1.MatCardSmImage, typeof i1.MatCardSubtitle, typeof i1.MatCardTitle, typeof i1.MatCardTitleGroup, typeof i1.MatCardXlImage], [typeof i2.MatCommonModule, typeof i3.CommonModule], [typeof i1.MatCard, typeof i1.MatCardActions, typeof i1.MatCardAvatar, typeof i1.MatCardContent, typeof i1.MatCardFooter, typeof i1.MatCardHeader, typeof i1.MatCardImage, typeof i1.MatCardLgImage, typeof i1.MatCardMdImage, typeof i1.MatCardSmImage, typeof i1.MatCardSubtitle, typeof i1.MatCardTitle, typeof i1.MatCardTitleGroup, typeof i1.MatCardXlImage, typeof i2.MatCommonModule]>;
106+
static ɵmod: i0.ɵɵNgModuleDeclaration<MatCardModule, never, [typeof i1.MatCommonModule, typeof i2.CommonModule, typeof i3.MatCard, typeof i3.MatCardActions, typeof i3.MatCardAvatar, typeof i3.MatCardContent, typeof i3.MatCardFooter, typeof i3.MatCardHeader, typeof i3.MatCardImage, typeof i3.MatCardLgImage, typeof i3.MatCardMdImage, typeof i3.MatCardSmImage, typeof i3.MatCardSubtitle, typeof i3.MatCardTitle, typeof i3.MatCardTitleGroup, typeof i3.MatCardXlImage], [typeof i3.MatCard, typeof i3.MatCardActions, typeof i3.MatCardAvatar, typeof i3.MatCardContent, typeof i3.MatCardFooter, typeof i3.MatCardHeader, typeof i3.MatCardImage, typeof i3.MatCardLgImage, typeof i3.MatCardMdImage, typeof i3.MatCardSmImage, typeof i3.MatCardSubtitle, typeof i3.MatCardTitle, typeof i3.MatCardTitleGroup, typeof i3.MatCardXlImage, typeof i1.MatCommonModule]>;
107107
}
108108

109109
// @public
110110
export class MatCardSmImage {
111111
// (undocumented)
112-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSmImage, "[mat-card-sm-image], [matCardImageSmall]", never, {}, {}, never, never, false, never>;
112+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSmImage, "[mat-card-sm-image], [matCardImageSmall]", never, {}, {}, never, never, true, never>;
113113
// (undocumented)
114114
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardSmImage, never>;
115115
}
116116

117117
// @public
118118
export class MatCardSubtitle {
119119
// (undocumented)
120-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSubtitle, "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]", never, {}, {}, never, never, false, never>;
120+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardSubtitle, "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]", never, {}, {}, never, never, true, never>;
121121
// (undocumented)
122122
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardSubtitle, never>;
123123
}
124124

125125
// @public
126126
export class MatCardTitle {
127127
// (undocumented)
128-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardTitle, "mat-card-title, [mat-card-title], [matCardTitle]", never, {}, {}, never, never, false, never>;
128+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardTitle, "mat-card-title, [mat-card-title], [matCardTitle]", never, {}, {}, never, never, true, never>;
129129
// (undocumented)
130130
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardTitle, never>;
131131
}
132132

133133
// @public
134134
export class MatCardTitleGroup {
135135
// (undocumented)
136-
static ɵcmp: i0.ɵɵComponentDeclaration<MatCardTitleGroup, "mat-card-title-group", never, {}, {}, never, ["mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]", "[mat-card-image], [matCardImage],\n [mat-card-sm-image], [matCardImageSmall],\n [mat-card-md-image], [matCardImageMedium],\n [mat-card-lg-image], [matCardImageLarge],\n [mat-card-xl-image], [matCardImageXLarge]", "*"], false, never>;
136+
static ɵcmp: i0.ɵɵComponentDeclaration<MatCardTitleGroup, "mat-card-title-group", never, {}, {}, never, ["mat-card-title, mat-card-subtitle,\n [mat-card-title], [mat-card-subtitle],\n [matCardTitle], [matCardSubtitle]", "[mat-card-image], [matCardImage],\n [mat-card-sm-image], [matCardImageSmall],\n [mat-card-md-image], [matCardImageMedium],\n [mat-card-lg-image], [matCardImageLarge],\n [mat-card-xl-image], [matCardImageXLarge]", "*"], true, never>;
137137
// (undocumented)
138138
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardTitleGroup, never>;
139139
}
140140

141141
// @public
142142
export class MatCardXlImage {
143143
// (undocumented)
144-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardXlImage, "[mat-card-xl-image], [matCardImageXLarge]", never, {}, {}, never, never, false, never>;
144+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCardXlImage, "[mat-card-xl-image], [matCardImageXLarge]", never, {}, {}, never, never, true, never>;
145145
// (undocumented)
146146
static ɵfac: i0.ɵɵFactoryDeclaration<MatCardXlImage, never>;
147147
}

0 commit comments

Comments
 (0)