Skip to content

Commit 9cd6b3e

Browse files
crisbetocrisbeto
committed
refactor(material/button-toggle): convert to standalone
Converts `material/button-toggle` to standalone.
1 parent 2dec29f commit 9cd6b3e

File tree

6 files changed

+55
-15
lines changed

6 files changed

+55
-15
lines changed

‎src/material/button-toggle/button-toggle-module.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import {MatCommonModule, MatRippleModule} from '@angular/material/core';
1111
import {MatButtonToggle, MatButtonToggleGroup} from './button-toggle';
1212

1313
@NgModule({
14-
imports: [MatCommonModule, MatRippleModule],
14+
imports: [MatCommonModule, MatRippleModule, MatButtonToggleGroup, MatButtonToggle],
1515
exports: [MatCommonModule, MatButtonToggleGroup, MatButtonToggle],
16-
declarations: [MatButtonToggleGroup, MatButtonToggle],
1716
})
1817
export class MatButtonToggleModule {}

‎src/material/button-toggle/button-toggle.spec.ts

Lines changed: 40 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {dispatchMouseEvent} from '../../cdk/testing/private';
1+
import {dispatchMouseEvent} from '@angular/cdk/testing/private';
22
import {Component, DebugElement, QueryList, ViewChild, ViewChildren} from '@angular/core';
33
import {CommonModule} from '@angular/common';
44
import {ComponentFixture, fakeAsync, flush, TestBed, tick} from '@angular/core/testing';
@@ -14,8 +14,11 @@ import {
1414
describe('MatButtonToggle with forms', () => {
1515
beforeEach(fakeAsync(() => {
1616
TestBed.configureTestingModule({
17-
imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule, CommonModule],
18-
declarations: [
17+
imports: [
18+
MatButtonToggleModule,
19+
FormsModule,
20+
ReactiveFormsModule,
21+
CommonModule,
1922
ButtonToggleGroupWithNgModel,
2023
ButtonToggleGroupWithFormControl,
2124
ButtonToggleGroupWithIndirectDescendantToggles,
@@ -310,8 +313,8 @@ describe('MatButtonToggle with forms', () => {
310313
describe('MatButtonToggle without forms', () => {
311314
beforeEach(fakeAsync(() => {
312315
TestBed.configureTestingModule({
313-
imports: [MatButtonToggleModule],
314-
declarations: [
316+
imports: [
317+
MatButtonToggleModule,
315318
ButtonTogglesInsideButtonToggleGroup,
316319
ButtonTogglesInsideButtonToggleGroupMultiple,
317320
FalsyButtonTogglesInsideButtonToggleGroupMultiple,
@@ -969,6 +972,8 @@ describe('MatButtonToggle without forms', () => {
969972
<mat-button-toggle value="test3">Test3</mat-button-toggle>
970973
</mat-button-toggle-group>
971974
`,
975+
standalone: true,
976+
imports: [MatButtonToggleModule],
972977
})
973978
class ButtonTogglesInsideButtonToggleGroup {
974979
isGroupDisabled: boolean = false;
@@ -991,6 +996,8 @@ class ButtonTogglesInsideButtonToggleGroup {
991996
}
992997
</mat-button-toggle-group>
993998
`,
999+
standalone: true,
1000+
imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule, CommonModule],
9941001
})
9951002
class ButtonToggleGroupWithNgModel {
9961003
groupName = 'group-name';
@@ -1012,6 +1019,8 @@ class ButtonToggleGroupWithNgModel {
10121019
<mat-button-toggle value="sugar">Sugar</mat-button-toggle>
10131020
</mat-button-toggle-group>
10141021
`,
1022+
standalone: true,
1023+
imports: [MatButtonToggleModule],
10151024
})
10161025
class ButtonTogglesInsideButtonToggleGroupMultiple {
10171026
isGroupDisabled: boolean = false;
@@ -1027,6 +1036,8 @@ class ButtonTogglesInsideButtonToggleGroupMultiple {
10271036
<mat-button-toggle>Sugar</mat-button-toggle>
10281037
</mat-button-toggle-group>
10291038
`,
1039+
standalone: true,
1040+
imports: [MatButtonToggleModule],
10301041
})
10311042
class FalsyButtonTogglesInsideButtonToggleGroupMultiple {
10321043
value: ('' | number | null | undefined | boolean)[] = [0];
@@ -1037,6 +1048,8 @@ class FalsyButtonTogglesInsideButtonToggleGroupMultiple {
10371048
template: `
10381049
<mat-button-toggle>Yes</mat-button-toggle>
10391050
`,
1051+
standalone: true,
1052+
imports: [MatButtonToggleModule],
10401053
})
10411054
class StandaloneButtonToggle {}
10421055

@@ -1047,6 +1060,8 @@ class StandaloneButtonToggle {}
10471060
<mat-button-toggle value="green">Value Green</mat-button-toggle>
10481061
</mat-button-toggle-group>
10491062
`,
1063+
standalone: true,
1064+
imports: [MatButtonToggleModule],
10501065
})
10511066
class ButtonToggleGroupWithInitialValue {
10521067
lastEvent: MatButtonToggleChange;
@@ -1060,6 +1075,8 @@ class ButtonToggleGroupWithInitialValue {
10601075
<mat-button-toggle value="blue">Value Blue</mat-button-toggle>
10611076
</mat-button-toggle-group>
10621077
`,
1078+
standalone: true,
1079+
imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule, CommonModule],
10631080
})
10641081
class ButtonToggleGroupWithFormControl {
10651082
control = new FormControl('');
@@ -1076,6 +1093,8 @@ class ButtonToggleGroupWithFormControl {
10761093
}
10771094
</mat-button-toggle-group>
10781095
`,
1096+
standalone: true,
1097+
imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule, CommonModule],
10791098
})
10801099
class ButtonToggleGroupWithIndirectDescendantToggles {
10811100
control = new FormControl('');
@@ -1084,12 +1103,16 @@ class ButtonToggleGroupWithIndirectDescendantToggles {
10841103
/** Simple test component with an aria-label set. */
10851104
@Component({
10861105
template: `<mat-button-toggle aria-label="Super effective"></mat-button-toggle>`,
1106+
standalone: true,
1107+
imports: [MatButtonToggleModule],
10871108
})
10881109
class ButtonToggleWithAriaLabel {}
10891110

10901111
/** Simple test component with an aria-label set. */
10911112
@Component({
10921113
template: `<mat-button-toggle aria-labelledby="some-id"></mat-button-toggle>`,
1114+
standalone: true,
1115+
imports: [MatButtonToggleModule],
10931116
})
10941117
class ButtonToggleWithAriaLabelledby {}
10951118

@@ -1101,6 +1124,8 @@ class ButtonToggleWithAriaLabelledby {}
11011124
}
11021125
</mat-button-toggle-group>
11031126
`,
1127+
standalone: true,
1128+
imports: [MatButtonToggleModule],
11041129
})
11051130
class RepeatedButtonTogglesWithPreselectedValue {
11061131
@ViewChild(MatButtonToggleGroup) toggleGroup: MatButtonToggleGroup;
@@ -1112,11 +1137,15 @@ class RepeatedButtonTogglesWithPreselectedValue {
11121137

11131138
@Component({
11141139
template: `<mat-button-toggle tabindex="3"></mat-button-toggle>`,
1140+
standalone: true,
1141+
imports: [MatButtonToggleModule],
11151142
})
11161143
class ButtonToggleWithTabindex {}
11171144

11181145
@Component({
11191146
template: `<mat-button-toggle name="custom-name"></mat-button-toggle>`,
1147+
standalone: true,
1148+
imports: [MatButtonToggleModule],
11201149
})
11211150
class ButtonToggleWithStaticName {}
11221151

@@ -1127,6 +1156,8 @@ class ButtonToggleWithStaticName {}
11271156
<mat-button-toggle value="2" checked>Two</mat-button-toggle>
11281157
</mat-button-toggle-group>
11291158
`,
1159+
standalone: true,
1160+
imports: [MatButtonToggleModule],
11301161
})
11311162
class ButtonToggleWithStaticChecked {
11321163
@ViewChild(MatButtonToggleGroup) group: MatButtonToggleGroup;
@@ -1137,6 +1168,8 @@ class ButtonToggleWithStaticChecked {
11371168
template: `
11381169
<mat-button-toggle aria-label="Toggle me" aria-labelledby="something"></mat-button-toggle>
11391170
`,
1171+
standalone: true,
1172+
imports: [MatButtonToggleModule],
11401173
})
11411174
class ButtonToggleWithStaticAriaAttributes {}
11421175

@@ -1148,6 +1181,8 @@ class ButtonToggleWithStaticAriaAttributes {}
11481181
}
11491182
</mat-button-toggle-group>
11501183
`,
1184+
standalone: true,
1185+
imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule, CommonModule],
11511186
})
11521187
class ButtonToggleGroupWithFormControlAndDynamicButtons {
11531188
@ViewChildren(MatButtonToggle) toggles: QueryList<MatButtonToggle>;

‎src/material/button-toggle/button-toggle.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@ import {
3333
booleanAttribute,
3434
} from '@angular/core';
3535
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
36+
import {MatRipple} from '@angular/material/core';
3637

3738
/**
3839
* @deprecated No longer used.
@@ -112,6 +113,7 @@ export class MatButtonToggleChange {
112113
'[class.mat-button-toggle-group-appearance-standard]': 'appearance === "standard"',
113114
},
114115
exportAs: 'matButtonToggleGroup',
116+
standalone: true,
115117
})
116118
export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, AfterContentInit {
117119
private _multiple = false;
@@ -398,6 +400,8 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
398400
'(focus)': 'focus()',
399401
'role': 'presentation',
400402
},
403+
standalone: true,
404+
imports: [MatRipple],
401405
})
402406
export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
403407
private _checked = false;

‎src/material/button-toggle/testing/button-toggle-group.spec.ts

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

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

1817
fixture = TestBed.createComponent(ButtonToggleGroupHarnessTest);
@@ -82,6 +81,8 @@ describe('MatButtonToggleGroupHarness', () => {
8281
<mat-button-toggle value="2">Two</mat-button-toggle>
8382
</mat-button-toggle-group>
8483
`,
84+
standalone: true,
85+
imports: [MatButtonToggleModule],
8586
})
8687
class ButtonToggleGroupHarnessTest {
8788
disabled = false;

‎src/material/button-toggle/testing/button-toggle-harness.spec.ts

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

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

1817
fixture = TestBed.createComponent(ButtonToggleHarnessTest);
@@ -143,6 +142,8 @@ describe('MatButtonToggleHarness', () => {
143142
appearance="legacy">Second</mat-button-toggle>
144143
<span id="second-label">Second toggle</span>
145144
`,
145+
standalone: true,
146+
imports: [MatButtonToggleModule],
146147
})
147148
class ButtonToggleHarnessTest {
148149
disabled = true;

‎tools/public_api_guard/material/button-toggle.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,7 @@ import { ElementRef } from '@angular/core';
1212
import { EventEmitter } from '@angular/core';
1313
import { FocusMonitor } from '@angular/cdk/a11y';
1414
import * as i0 from '@angular/core';
15-
import * as i2 from '@angular/material/core';
15+
import * as i1 from '@angular/material/core';
1616
import { InjectionToken } from '@angular/core';
1717
import { OnDestroy } from '@angular/core';
1818
import { OnInit } from '@angular/core';
@@ -64,7 +64,7 @@ export class MatButtonToggle implements OnInit, AfterViewInit, OnDestroy {
6464
tabIndex: number | null;
6565
value: any;
6666
// (undocumented)
67-
static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, ["*"], false, never>;
67+
static ɵcmp: i0.ɵɵComponentDeclaration<MatButtonToggle, "mat-button-toggle", ["matButtonToggle"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, never, ["*"], true, never>;
6868
// (undocumented)
6969
static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggle, [{ optional: true; }, null, null, null, { attribute: "tabindex"; }, { optional: true; }]>;
7070
}
@@ -127,7 +127,7 @@ export class MatButtonToggleGroup implements ControlValueAccessor, OnInit, After
127127
vertical: boolean;
128128
writeValue(value: any): void;
129129
// (undocumented)
130-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, false, never>;
130+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatButtonToggleGroup, "mat-button-toggle-group", ["matButtonToggleGroup"], { "appearance": { "alias": "appearance"; "required": false; }; "name": { "alias": "name"; "required": false; }; "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["_buttonToggles"], never, true, never>;
131131
// (undocumented)
132132
static ɵfac: i0.ɵɵFactoryDeclaration<MatButtonToggleGroup, [null, { optional: true; }]>;
133133
}
@@ -139,7 +139,7 @@ export class MatButtonToggleModule {
139139
// (undocumented)
140140
static ɵinj: i0.ɵɵInjectorDeclaration<MatButtonToggleModule>;
141141
// (undocumented)
142-
static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonToggleModule, [typeof i1.MatButtonToggleGroup, typeof i1.MatButtonToggle], [typeof i2.MatCommonModule, typeof i2.MatRippleModule], [typeof i2.MatCommonModule, typeof i1.MatButtonToggleGroup, typeof i1.MatButtonToggle]>;
142+
static ɵmod: i0.ɵɵNgModuleDeclaration<MatButtonToggleModule, never, [typeof i1.MatCommonModule, typeof i1.MatRippleModule, typeof i2.MatButtonToggleGroup, typeof i2.MatButtonToggle], [typeof i1.MatCommonModule, typeof i2.MatButtonToggleGroup, typeof i2.MatButtonToggle]>;
143143
}
144144

145145
// @public @deprecated (undocumented)

0 commit comments

Comments
 (0)