Skip to content

Commit b081cd6

Browse files
crisbetocrisbeto
committed
refactor(material/tabs): convert to standalone
Converts `material/tabs` to standalone.
1 parent a03ddfe commit b081cd6

16 files changed

+145
-70
lines changed

‎src/material/tabs/module.ts

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,16 @@
66
* found in the LICENSE file at https://angular.io/license
77
*/
88

9-
import {CommonModule} from '@angular/common';
109
import {NgModule} from '@angular/core';
11-
import {MatCommonModule, MatRippleModule} from '@angular/material/core';
12-
import {PortalModule} from '@angular/cdk/portal';
13-
import {ObserversModule} from '@angular/cdk/observers';
14-
import {A11yModule} from '@angular/cdk/a11y';
15-
import {MatTabBody, MatTabBodyPortal} from './tab-body';
10+
import {MatCommonModule} from '@angular/material/core';
1611
import {MatTabContent} from './tab-content';
1712
import {MatTabLabel} from './tab-label';
18-
import {MatTabLabelWrapper} from './tab-label-wrapper';
1913
import {MatTab} from './tab';
20-
import {MatTabHeader} from './tab-header';
2114
import {MatTabGroup} from './tab-group';
2215
import {MatTabNav, MatTabNavPanel, MatTabLink} from './tab-nav-bar/tab-nav-bar';
2316

2417
@NgModule({
2518
imports: [
26-
CommonModule,
27-
MatCommonModule,
28-
PortalModule,
29-
MatRippleModule,
30-
ObserversModule,
31-
A11yModule,
32-
],
33-
exports: [
3419
MatCommonModule,
3520
MatTabContent,
3621
MatTabLabel,
@@ -40,20 +25,15 @@ import {MatTabNav, MatTabNavPanel, MatTabLink} from './tab-nav-bar/tab-nav-bar';
4025
MatTabNavPanel,
4126
MatTabLink,
4227
],
43-
declarations: [
28+
exports: [
29+
MatCommonModule,
4430
MatTabContent,
4531
MatTabLabel,
4632
MatTab,
4733
MatTabGroup,
4834
MatTabNav,
4935
MatTabNavPanel,
5036
MatTabLink,
51-
52-
// Private directives, should not be exported.
53-
MatTabBody,
54-
MatTabBodyPortal,
55-
MatTabLabelWrapper,
56-
MatTabHeader,
5737
],
5838
})
5939
export class MatTabsModule {}

‎src/material/tabs/tab-body.spec.ts

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,15 @@ describe('MDC-based MatTabBody', () => {
1717
beforeEach(waitForAsync(() => {
1818
dir = 'ltr';
1919
TestBed.configureTestingModule({
20-
imports: [CommonModule, PortalModule, MatRippleModule, NoopAnimationsModule],
21-
declarations: [MatTabBody, MatTabBodyPortal, SimpleTabBodyApp],
20+
imports: [
21+
CommonModule,
22+
PortalModule,
23+
MatRippleModule,
24+
NoopAnimationsModule,
25+
MatTabBody,
26+
MatTabBodyPortal,
27+
SimpleTabBodyApp,
28+
],
2229
providers: [{provide: Directionality, useFactory: () => ({value: dir, change: dirChange})}],
2330
});
2431

@@ -182,8 +189,8 @@ describe('MDC-based MatTabBody', () => {
182189
MatRippleModule,
183190
NoopAnimationsModule,
184191
ScrollingModule,
192+
SimpleTabBodyApp,
185193
],
186-
declarations: [MatTabBody, MatTabBodyPortal, SimpleTabBodyApp],
187194
})
188195
.compileComponents();
189196

@@ -201,6 +208,8 @@ describe('MDC-based MatTabBody', () => {
201208
<ng-template>Tab Body Content</ng-template>
202209
<mat-tab-body [content]="content" [position]="position" [origin]="origin"></mat-tab-body>
203210
`,
211+
standalone: true,
212+
imports: [CommonModule, PortalModule, MatRippleModule, MatTabBody],
204213
})
205214
class SimpleTabBodyApp implements AfterContentInit {
206215
content: TemplatePortal;

‎src/material/tabs/tab-body.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,13 +32,15 @@ import {Subject, Subscription} from 'rxjs';
3232
import {distinctUntilChanged, startWith} from 'rxjs/operators';
3333
import {AnimationEvent} from '@angular/animations';
3434
import {matTabsAnimations} from './tabs-animations';
35+
import {CdkScrollable} from '@angular/cdk/scrolling';
3536

3637
/**
3738
* The portal host directive for the contents of the tab.
3839
* @docs-private
3940
*/
4041
@Directive({
4142
selector: '[matTabBodyHost]',
43+
standalone: true,
4244
})
4345
export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
4446
/** Subscription to events for when the tab body begins centering. */
@@ -114,6 +116,8 @@ export type MatTabBodyPositionState =
114116
host: {
115117
'class': 'mat-mdc-tab-body',
116118
},
119+
standalone: true,
120+
imports: [MatTabBodyPortal, CdkScrollable],
117121
})
118122
export class MatTabBody implements OnInit, OnDestroy {
119123
/** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */

‎src/material/tabs/tab-content.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export const MAT_TAB_CONTENT = new InjectionToken<MatTabContent>('MatTabContent'
1919
@Directive({
2020
selector: '[matTabContent]',
2121
providers: [{provide: MAT_TAB_CONTENT, useExisting: MatTabContent}],
22+
standalone: true,
2223
})
2324
export class MatTabContent {
2425
constructor(/** Content for the tab. */ public template: TemplateRef<any>) {}

‎src/material/tabs/tab-group.spec.ts

Lines changed: 45 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {LEFT_ARROW, RIGHT_ARROW} from '@angular/cdk/keycodes';
2-
import {dispatchFakeEvent, dispatchKeyboardEvent} from '../../cdk/testing/private';
2+
import {dispatchFakeEvent, dispatchKeyboardEvent} from '@angular/cdk/testing/private';
33
import {Component, DebugElement, OnInit, QueryList, ViewChild, ViewChildren} from '@angular/core';
44
import {
55
ComponentFixture,
@@ -25,8 +25,10 @@ import {
2525
describe('MDC-based MatTabGroup', () => {
2626
beforeEach(fakeAsync(() => {
2727
TestBed.configureTestingModule({
28-
imports: [MatTabsModule, CommonModule, NoopAnimationsModule],
29-
declarations: [
28+
imports: [
29+
MatTabsModule,
30+
CommonModule,
31+
NoopAnimationsModule,
3032
SimpleTabsTestApp,
3133
SimpleDynamicTabsTestApp,
3234
BindedTabsTestApp,
@@ -996,8 +998,12 @@ describe('MDC-based MatTabGroup', () => {
996998
describe('nested MatTabGroup with enabled animations', () => {
997999
beforeEach(fakeAsync(() => {
9981000
TestBed.configureTestingModule({
999-
imports: [MatTabsModule, BrowserAnimationsModule],
1000-
declarations: [NestedTabs, TabsWithCustomAnimationDuration],
1001+
imports: [
1002+
MatTabsModule,
1003+
BrowserAnimationsModule,
1004+
NestedTabs,
1005+
TabsWithCustomAnimationDuration,
1006+
],
10011007
});
10021008

10031009
TestBed.compileComponents();
@@ -1034,8 +1040,7 @@ describe('MatTabGroup with ink bar fit to content', () => {
10341040

10351041
beforeEach(fakeAsync(() => {
10361042
TestBed.configureTestingModule({
1037-
imports: [MatTabsModule, BrowserAnimationsModule],
1038-
declarations: [TabGroupWithInkBarFitToContent],
1043+
imports: [MatTabsModule, BrowserAnimationsModule, TabGroupWithInkBarFitToContent],
10391044
});
10401045

10411046
TestBed.compileComponents();
@@ -1077,8 +1082,7 @@ describe('MatTabNavBar with a default config', () => {
10771082

10781083
beforeEach(fakeAsync(() => {
10791084
TestBed.configureTestingModule({
1080-
imports: [MatTabsModule, BrowserAnimationsModule],
1081-
declarations: [SimpleTabsTestApp],
1085+
imports: [MatTabsModule, BrowserAnimationsModule, SimpleTabsTestApp],
10821086
providers: [
10831087
{
10841088
provide: MAT_TABS_CONFIG,
@@ -1132,6 +1136,8 @@ describe('MatTabNavBar with a default config', () => {
11321136
</mat-tab>
11331137
</mat-tab-group>
11341138
`,
1139+
standalone: true,
1140+
imports: [MatTabsModule, CommonModule],
11351141
})
11361142
class SimpleTabsTestApp {
11371143
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
@@ -1166,6 +1172,8 @@ class SimpleTabsTestApp {
11661172
}
11671173
</mat-tab-group>
11681174
`,
1175+
standalone: true,
1176+
imports: [MatTabsModule, CommonModule],
11691177
})
11701178
class SimpleDynamicTabsTestApp {
11711179
tabs = [
@@ -1193,6 +1201,8 @@ class SimpleDynamicTabsTestApp {
11931201
}
11941202
</mat-tab-group>
11951203
`,
1204+
standalone: true,
1205+
imports: [MatTabsModule, CommonModule],
11961206
})
11971207
class BindedTabsTestApp {
11981208
tabs = [
@@ -1227,6 +1237,8 @@ class BindedTabsTestApp {
12271237
</mat-tab>
12281238
</mat-tab-group>
12291239
`,
1240+
standalone: true,
1241+
imports: [MatTabsModule, CommonModule],
12301242
})
12311243
class DisabledTabsTestApp {
12321244
@ViewChildren(MatTab) tabs: QueryList<MatTab>;
@@ -1244,6 +1256,8 @@ class DisabledTabsTestApp {
12441256
}
12451257
</mat-tab-group>
12461258
`,
1259+
standalone: true,
1260+
imports: [MatTabsModule, CommonModule],
12471261
})
12481262
class AsyncTabsTestApp implements OnInit {
12491263
private _tabs = [
@@ -1270,6 +1284,8 @@ class AsyncTabsTestApp implements OnInit {
12701284
<mat-tab label="Legumes"> <p #legumes>Peanuts</p> </mat-tab>
12711285
</mat-tab-group>
12721286
`,
1287+
standalone: true,
1288+
imports: [MatTabsModule, CommonModule],
12731289
})
12741290
class TabGroupWithSimpleApi {
12751291
preserveContent = false;
@@ -1291,6 +1307,8 @@ class TabGroupWithSimpleApi {
12911307
</mat-tab>
12921308
</mat-tab-group>
12931309
`,
1310+
standalone: true,
1311+
imports: [MatTabsModule, CommonModule],
12941312
})
12951313
class NestedTabs {
12961314
@ViewChildren(MatTabGroup) groups: QueryList<MatTabGroup>;
@@ -1309,6 +1327,8 @@ class NestedTabs {
13091327
</mat-tab>
13101328
</mat-tab-group>
13111329
`,
1330+
standalone: true,
1331+
imports: [MatTabsModule, CommonModule],
13121332
})
13131333
class TemplateTabs {}
13141334

@@ -1318,6 +1338,8 @@ class TemplateTabs {}
13181338
<mat-tab [aria-label]="ariaLabel" [aria-labelledby]="ariaLabelledby"></mat-tab>
13191339
</mat-tab-group>
13201340
`,
1341+
standalone: true,
1342+
imports: [MatTabsModule, CommonModule],
13211343
})
13221344
class TabGroupWithAriaInputs {
13231345
ariaLabel: string;
@@ -1335,6 +1357,8 @@ class TabGroupWithAriaInputs {
13351357
<div>pizza is active</div>
13361358
}
13371359
`,
1360+
standalone: true,
1361+
imports: [MatTabsModule, CommonModule],
13381362
})
13391363
class TabGroupWithIsActiveBinding {}
13401364

@@ -1345,6 +1369,8 @@ class TabGroupWithIsActiveBinding {}
13451369
<mat-tab label="Two">Tab two content</mat-tab>
13461370
</mat-tab-group>
13471371
`,
1372+
standalone: true,
1373+
imports: [MatTabsModule],
13481374
})
13491375
class TabsWithCustomAnimationDuration {}
13501376

@@ -1357,6 +1383,8 @@ class TabsWithCustomAnimationDuration {}
13571383
}
13581384
</mat-tab-group>
13591385
`,
1386+
standalone: true,
1387+
imports: [MatTabsModule, CommonModule],
13601388
})
13611389
class TabGroupWithIndirectDescendantTabs {
13621390
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
@@ -1369,6 +1397,8 @@ class TabGroupWithIndirectDescendantTabs {
13691397
<mat-tab label="Two">Tab two content</mat-tab>
13701398
</mat-tab-group>
13711399
`,
1400+
standalone: true,
1401+
imports: [MatTabsModule],
13721402
})
13731403
class TabGroupWithInkBarFitToContent {
13741404
fitInkBarToContent = true;
@@ -1390,6 +1420,8 @@ class TabGroupWithInkBarFitToContent {
13901420
</ng-container>
13911421
</mat-tab-group>
13921422
`,
1423+
standalone: true,
1424+
imports: [MatTabsModule, CommonModule],
13931425
})
13941426
class TabGroupWithSpaceAbove {
13951427
@ViewChild(MatTabGroup) tabGroup: MatTabGroup;
@@ -1412,6 +1444,8 @@ class TabGroupWithSpaceAbove {
14121444
<mat-tab label="Parent 3">Parent 3</mat-tab>
14131445
</mat-tab-group>
14141446
`,
1447+
standalone: true,
1448+
imports: [MatTabsModule, CommonModule],
14151449
})
14161450
class NestedTabGroupWithLabel {}
14171451

@@ -1427,6 +1461,8 @@ class NestedTabGroupWithLabel {}
14271461
</mat-tab>
14281462
</mat-tab-group>
14291463
`,
1464+
standalone: true,
1465+
imports: [MatTabsModule, CommonModule],
14301466
})
14311467
class TabsWithClassesTestApp {
14321468
labelClassList?: string | string[];

‎src/material/tabs/tab-group.ts

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -29,11 +29,15 @@ import {
2929
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
3030
import {MAT_TAB_GROUP, MatTab} from './tab';
3131
import {MatTabHeader} from './tab-header';
32-
import {ThemePalette} from '@angular/material/core';
32+
import {ThemePalette, MatRipple} from '@angular/material/core';
3333
import {merge, Subscription} from 'rxjs';
3434
import {MAT_TABS_CONFIG, MatTabsConfig} from './tab-config';
3535
import {startWith} from 'rxjs/operators';
36-
import {FocusOrigin} from '@angular/cdk/a11y';
36+
import {CdkMonitorFocus, FocusOrigin} from '@angular/cdk/a11y';
37+
import {MatTabBody} from './tab-body';
38+
import {CdkPortalOutlet} from '@angular/cdk/portal';
39+
import {NgClass} from '@angular/common';
40+
import {MatTabLabelWrapper} from './tab-label-wrapper';
3741

3842
/** Used to generate unique ID's for each tab component */
3943
let nextId = 0;
@@ -76,6 +80,16 @@ export type MatTabHeaderPosition = 'above' | 'below';
7680
'[class.mat-mdc-tab-group-stretch-tabs]': 'stretchTabs',
7781
'[style.--mat-tab-animation-duration]': 'animationDuration',
7882
},
83+
standalone: true,
84+
imports: [
85+
MatTabHeader,
86+
MatTabLabelWrapper,
87+
CdkMonitorFocus,
88+
NgClass,
89+
MatRipple,
90+
CdkPortalOutlet,
91+
MatTabBody,
92+
],
7993
})
8094
export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDestroy {
8195
/**

0 commit comments

Comments
 (0)