Skip to content

Commit 6f1e66f

Browse files
crisbetocrisbeto
committed
refactor(material/list): convert to standalone
Converts `material/list` to standalone.
1 parent f306cc1 commit 6f1e66f

File tree

12 files changed

+141
-56
lines changed

12 files changed

+141
-56
lines changed

‎src/material/list/action-list.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ import {MatListBase} from './list-base';
2121
encapsulation: ViewEncapsulation.None,
2222
changeDetection: ChangeDetectionStrategy.OnPush,
2323
providers: [{provide: MatListBase, useExisting: MatActionList}],
24+
standalone: true,
2425
})
2526
export class MatActionList extends MatListBase {
2627
// An navigation list is considered interactive, but does not extend the interactive list

‎src/material/list/list-item-sections.ts

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import {LIST_OPTION, ListOption} from './list-option-types';
1818
@Directive({
1919
selector: '[matListItemTitle]',
2020
host: {'class': 'mat-mdc-list-item-title mdc-list-item__primary-text'},
21+
standalone: true,
2122
})
2223
export class MatListItemTitle {
2324
constructor(public _elementRef: ElementRef<HTMLElement>) {}
@@ -32,6 +33,7 @@ export class MatListItemTitle {
3233
@Directive({
3334
selector: '[matListItemLine]',
3435
host: {'class': 'mat-mdc-list-item-line mdc-list-item__secondary-text'},
36+
standalone: true,
3537
})
3638
export class MatListItemLine {
3739
constructor(public _elementRef: ElementRef<HTMLElement>) {}
@@ -46,6 +48,7 @@ export class MatListItemLine {
4648
@Directive({
4749
selector: '[matListItemMeta]',
4850
host: {'class': 'mat-mdc-list-item-meta mdc-list-item__end'},
51+
standalone: true,
4952
})
5053
export class MatListItemMeta {}
5154

@@ -85,6 +88,7 @@ export class _MatListItemGraphicBase {
8588
@Directive({
8689
selector: '[matListItemAvatar]',
8790
host: {'class': 'mat-mdc-list-item-avatar'},
91+
standalone: true,
8892
})
8993
export class MatListItemAvatar extends _MatListItemGraphicBase {}
9094

@@ -96,5 +100,6 @@ export class MatListItemAvatar extends _MatListItemGraphicBase {}
96100
@Directive({
97101
selector: '[matListItemIcon]',
98102
host: {'class': 'mat-mdc-list-item-icon'},
103+
standalone: true,
99104
})
100105
export class MatListItemIcon extends _MatListItemGraphicBase {}

‎src/material/list/list-module.ts

Lines changed: 4 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,32 +32,30 @@ import {ObserversModule} from '@angular/cdk/observers';
3232
MatCommonModule,
3333
MatRippleModule,
3434
MatPseudoCheckboxModule,
35-
],
36-
exports: [
3735
MatList,
3836
MatActionList,
3937
MatNavList,
4038
MatSelectionList,
4139
MatListItem,
4240
MatListOption,
41+
MatListSubheaderCssMatStyler,
4342
MatListItemAvatar,
4443
MatListItemIcon,
45-
MatListSubheaderCssMatStyler,
46-
MatDividerModule,
4744
MatListItemLine,
4845
MatListItemTitle,
4946
MatListItemMeta,
5047
],
51-
declarations: [
48+
exports: [
5249
MatList,
5350
MatActionList,
5451
MatNavList,
5552
MatSelectionList,
5653
MatListItem,
5754
MatListOption,
58-
MatListSubheaderCssMatStyler,
5955
MatListItemAvatar,
6056
MatListItemIcon,
57+
MatListSubheaderCssMatStyler,
58+
MatDividerModule,
6159
MatListItemLine,
6260
MatListItemTitle,
6361
MatListItemMeta,

‎src/material/list/list-option.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,8 @@ import {MatListBase, MatListItemBase} from './list-base';
3333
import {LIST_OPTION, ListOption, MatListOptionTogglePosition} from './list-option-types';
3434
import {MatListItemLine, MatListItemTitle} from './list-item-sections';
3535
import {Platform} from '@angular/cdk/platform';
36+
import {NgTemplateOutlet} from '@angular/common';
37+
import {CdkObserveContent} from '@angular/cdk/observers';
3638

3739
/**
3840
* Injection token that can be used to reference instances of an `SelectionList`. It serves
@@ -95,6 +97,8 @@ export interface SelectionList extends MatListBase {
9597
{provide: MatListItemBase, useExisting: MatListOption},
9698
{provide: LIST_OPTION, useExisting: MatListOption},
9799
],
100+
standalone: true,
101+
imports: [NgTemplateOutlet, CdkObserveContent],
98102
})
99103
export class MatListOption extends MatListItemBase implements ListOption, OnInit, OnDestroy {
100104
@ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList<MatListItemLine>;

‎src/material/list/list.spec.ts

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,8 @@ import {MatListItem, MatListModule} from './index';
77
describe('MDC-based MatList', () => {
88
beforeEach(waitForAsync(() => {
99
TestBed.configureTestingModule({
10-
imports: [MatListModule],
11-
declarations: [
10+
imports: [
11+
MatListModule,
1212
ListWithOneAnchorItem,
1313
ListWithOneItem,
1414
ListWithTwoLineItem,
@@ -424,6 +424,8 @@ class BaseTestList {
424424
Paprika
425425
</a>
426426
</mat-list>`,
427+
standalone: true,
428+
imports: [MatListModule],
427429
})
428430
class ListWithOneAnchorItem extends BaseTestList {
429431
// This needs to be declared directly on the class; if declared on the BaseTestList superclass,
@@ -438,6 +440,8 @@ class ListWithOneAnchorItem extends BaseTestList {
438440
Paprika
439441
</a>
440442
</mat-nav-list>`,
443+
standalone: true,
444+
imports: [MatListModule],
441445
})
442446
class NavListWithOneAnchorItem extends BaseTestList {
443447
@ViewChildren(MatListItem) listItems: QueryList<MatListItem>;
@@ -455,6 +459,8 @@ class NavListWithOneAnchorItem extends BaseTestList {
455459
</a>
456460
}
457461
</mat-nav-list>`,
462+
standalone: true,
463+
imports: [MatListModule],
458464
})
459465
class NavListWithActivatedItem extends BaseTestList {
460466
@ViewChildren(MatListItem) listItems: QueryList<MatListItem>;
@@ -472,6 +478,8 @@ class NavListWithActivatedItem extends BaseTestList {
472478
Paprika
473479
</button>
474480
</mat-action-list>`,
481+
standalone: true,
482+
imports: [MatListModule],
475483
})
476484
class ActionListWithoutType extends BaseTestList {
477485
@ViewChildren(MatListItem) listItems: QueryList<MatListItem>;
@@ -486,6 +494,8 @@ class ActionListWithoutType extends BaseTestList {
486494
Paprika
487495
</button>
488496
</mat-action-list>`,
497+
standalone: true,
498+
imports: [MatListModule],
489499
})
490500
class ActionListWithType extends BaseTestList {
491501
@ViewChildren(MatListItem) listItems: QueryList<MatListItem>;
@@ -498,6 +508,8 @@ class ActionListWithType extends BaseTestList {
498508
<button mat-list-item>{{item.name}}</button>
499509
}
500510
</mat-action-list>`,
511+
standalone: true,
512+
imports: [MatListModule],
501513
})
502514
class ActionListWithDisabledList extends BaseTestList {
503515
disableList = true;
@@ -510,6 +522,8 @@ class ActionListWithDisabledList extends BaseTestList {
510522
Paprika
511523
</button>
512524
</mat-action-list>`,
525+
standalone: true,
526+
imports: [MatListModule],
513527
})
514528
class ActionListWithDisabledItem extends BaseTestList {
515529
@ViewChild(MatListItem) buttonItem: MatListItem;
@@ -523,6 +537,8 @@ class ActionListWithDisabledItem extends BaseTestList {
523537
Paprika
524538
</mat-list-item>
525539
</mat-list>`,
540+
standalone: true,
541+
imports: [MatListModule],
526542
})
527543
class ListWithOneItem extends BaseTestList {}
528544

@@ -537,6 +553,8 @@ class ListWithOneItem extends BaseTestList {}
537553
</mat-list-item>
538554
}
539555
</mat-list>`,
556+
standalone: true,
557+
imports: [MatListModule],
540558
})
541559
class ListWithTwoLineItem extends BaseTestList {}
542560

@@ -551,6 +569,8 @@ class ListWithTwoLineItem extends BaseTestList {}
551569
</mat-list-item>
552570
}
553571
</mat-list>`,
572+
standalone: true,
573+
imports: [MatListModule],
554574
})
555575
class ListWithThreeLineItem extends BaseTestList {}
556576

@@ -565,6 +585,8 @@ class ListWithThreeLineItem extends BaseTestList {}
565585
Pepper
566586
</mat-list-item>
567587
</mat-list>`,
588+
standalone: true,
589+
imports: [MatListModule],
568590
})
569591
class ListWithAvatar extends BaseTestList {}
570592

@@ -578,6 +600,8 @@ class ListWithAvatar extends BaseTestList {}
578600
</mat-list-item>
579601
}
580602
</mat-list>`,
603+
standalone: true,
604+
imports: [MatListModule],
581605
})
582606
class ListWithItemWithCssClass extends BaseTestList {}
583607

@@ -594,6 +618,8 @@ class ListWithItemWithCssClass extends BaseTestList {}
594618
</mat-list-item>
595619
}
596620
</mat-list>`,
621+
standalone: true,
622+
imports: [MatListModule],
597623
})
598624
class ListWithDynamicNumberOfLines extends BaseTestList {}
599625

@@ -604,6 +630,8 @@ class ListWithDynamicNumberOfLines extends BaseTestList {}
604630
<mat-list-item>{{item.name}}</mat-list-item>
605631
}
606632
</mat-list>`,
633+
standalone: true,
634+
imports: [MatListModule],
607635
})
608636
class ListWithMultipleItems extends BaseTestList {}
609637

@@ -614,6 +642,8 @@ class ListWithMultipleItems extends BaseTestList {}
614642
<mat-list-item>Two</mat-list-item>
615643
<mat-list-item>Three</mat-list-item>
616644
</mat-list>`,
645+
standalone: true,
646+
imports: [MatListModule],
617647
})
618648
class ListWithDisabledItems {
619649
firstItemDisabled = false;
@@ -622,5 +652,7 @@ class ListWithDisabledItems {
622652

623653
@Component({
624654
template: `<mat-list-item></mat-list-item>`,
655+
standalone: true,
656+
imports: [MatListModule],
625657
})
626658
class StandaloneListItem {}

‎src/material/list/list.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
2626
import {MatListBase, MatListItemBase} from './list-base';
2727
import {MatListItemLine, MatListItemMeta, MatListItemTitle} from './list-item-sections';
2828
import {coerceBooleanProperty} from '@angular/cdk/coercion';
29+
import {CdkObserveContent} from '@angular/cdk/observers';
2930

3031
/**
3132
* Injection token that can be used to inject instances of `MatList`. It serves as
@@ -45,6 +46,7 @@ export const MAT_LIST = new InjectionToken<MatList>('MatList');
4546
encapsulation: ViewEncapsulation.None,
4647
changeDetection: ChangeDetectionStrategy.OnPush,
4748
providers: [{provide: MatListBase, useExisting: MatList}],
49+
standalone: true,
4850
})
4951
export class MatList extends MatListBase {}
5052

@@ -63,6 +65,8 @@ export class MatList extends MatListBase {}
6365
templateUrl: 'list-item.html',
6466
encapsulation: ViewEncapsulation.None,
6567
changeDetection: ChangeDetectionStrategy.OnPush,
68+
standalone: true,
69+
imports: [CdkObserveContent],
6670
})
6771
export class MatListItem extends MatListItemBase {
6872
@ContentChildren(MatListItemLine, {descendants: true}) _lines: QueryList<MatListItemLine>;

‎src/material/list/nav-list.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ export const MAT_NAV_LIST = new InjectionToken<MatNavList>('MatNavList');
2828
encapsulation: ViewEncapsulation.None,
2929
changeDetection: ChangeDetectionStrategy.OnPush,
3030
providers: [{provide: MatListBase, useExisting: MatNavList}],
31+
standalone: true,
3132
})
3233
export class MatNavList extends MatListBase {
3334
// An navigation list is considered interactive, but does not extend the interactive list

0 commit comments

Comments
 (0)