Skip to content

Commit 824e035

Browse files
crisbetocrisbeto
committed
refactor(material/checkbox): convert to standalone
Converts `material/checkbox` to standalone.
1 parent af42dd6 commit 824e035

File tree

6 files changed

+73
-30
lines changed

6 files changed

+73
-30
lines changed

‎src/material/checkbox/checkbox-required-validator.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ export const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
1515
multi: true,
1616
};
1717

18+
// TODO(crisbeto): this should be deprecated and moved into `MatCheckbox`.
19+
1820
/**
1921
* Validator for Material checkbox's required attribute in template-driven checkbox.
2022
* Current CheckboxRequiredValidator only work with `input type=checkbox` and does not
@@ -24,5 +26,6 @@ export const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
2426
selector: `mat-checkbox[required][formControlName],
2527
mat-checkbox[required][formControl], mat-checkbox[required][ngModel]`,
2628
providers: [MAT_CHECKBOX_REQUIRED_VALIDATOR],
29+
standalone: true,
2730
})
2831
export class MatCheckboxRequiredValidator extends CheckboxRequiredValidator {}

‎src/material/checkbox/checkbox.spec.ts

Lines changed: 56 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {dispatchFakeEvent} from '../../cdk/testing/private';
1+
import {dispatchFakeEvent} from '@angular/cdk/testing/private';
22
import {ChangeDetectionStrategy, Component, DebugElement, Type} from '@angular/core';
33
import {ComponentFixture, fakeAsync, flush, flushMicrotasks, TestBed} from '@angular/core/testing';
44
import {ThemePalette} from '@angular/material/core';
@@ -10,15 +10,15 @@ import {
1010
MatCheckbox,
1111
MatCheckboxChange,
1212
MatCheckboxModule,
13+
MatCheckboxRequiredValidator,
1314
} from './index';
1415

1516
describe('MDC-based MatCheckbox', () => {
1617
let fixture: ComponentFixture<any>;
1718

18-
function createComponent<T>(componentType: Type<T>, extraDeclarations: Type<any>[] = []) {
19+
function createComponent<T>(componentType: Type<T>) {
1920
TestBed.configureTestingModule({
20-
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
21-
declarations: [componentType, ...extraDeclarations],
21+
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule, componentType],
2222
}).compileComponents();
2323

2424
return TestBed.createComponent<T>(componentType);
@@ -526,8 +526,7 @@ describe('MDC-based MatCheckbox', () => {
526526
beforeEach(() => {
527527
TestBed.resetTestingModule();
528528
TestBed.configureTestingModule({
529-
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
530-
declarations: [SingleCheckbox],
529+
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule, SingleCheckbox],
531530
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}],
532531
});
533532

@@ -558,8 +557,7 @@ describe('MDC-based MatCheckbox', () => {
558557
beforeEach(() => {
559558
TestBed.resetTestingModule();
560559
TestBed.configureTestingModule({
561-
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
562-
declarations: [SingleCheckbox],
560+
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule, SingleCheckbox],
563561
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}],
564562
});
565563

@@ -1022,8 +1020,7 @@ describe('MatCheckboxDefaultOptions', () => {
10221020
describe('when MAT_CHECKBOX_DEFAULT_OPTIONS overridden', () => {
10231021
function configure(defaults: MatCheckboxDefaultOptions) {
10241022
TestBed.configureTestingModule({
1025-
imports: [MatCheckboxModule, FormsModule],
1026-
declarations: [SingleCheckbox, SingleCheckbox],
1023+
imports: [MatCheckboxModule, FormsModule, SingleCheckbox, SingleCheckbox],
10271024
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: defaults}],
10281025
});
10291026

@@ -1078,6 +1075,8 @@ describe('MatCheckboxDefaultOptions', () => {
10781075
Simple checkbox
10791076
</mat-checkbox>
10801077
</div>`,
1078+
standalone: true,
1079+
imports: [MatCheckbox],
10811080
})
10821081
class SingleCheckbox {
10831082
labelPos: 'before' | 'after' = 'after';
@@ -1100,6 +1099,8 @@ class SingleCheckbox {
11001099
@Component({
11011100
template: `<mat-checkbox [required]="isRequired" [(ngModel)]="isGood"
11021101
[disabled]="isDisabled">Be good</mat-checkbox>`,
1102+
standalone: true,
1103+
imports: [MatCheckbox, MatCheckboxRequiredValidator, FormsModule],
11031104
})
11041105
class CheckboxWithNgModel {
11051106
isGood: boolean = false;
@@ -1110,6 +1111,8 @@ class CheckboxWithNgModel {
11101111
@Component({
11111112
template: `<mat-checkbox [required]="isRequired" [(ngModel)]="isGood">Be good</mat-checkbox>`,
11121113
changeDetection: ChangeDetectionStrategy.OnPush,
1114+
standalone: true,
1115+
imports: [MatCheckbox, FormsModule],
11131116
})
11141117
class CheckboxWithNgModelAndOnPush extends CheckboxWithNgModel {}
11151118

@@ -1119,6 +1122,8 @@ class CheckboxWithNgModelAndOnPush extends CheckboxWithNgModel {}
11191122
<mat-checkbox>Option 1</mat-checkbox>
11201123
<mat-checkbox>Option 2</mat-checkbox>
11211124
`,
1125+
standalone: true,
1126+
imports: [MatCheckbox],
11221127
})
11231128
class MultipleCheckboxes {}
11241129

@@ -1129,53 +1134,87 @@ class MultipleCheckboxes {}
11291134
[tabIndex]="customTabIndex"
11301135
[disabled]="isDisabled">
11311136
</mat-checkbox>`,
1137+
standalone: true,
1138+
imports: [MatCheckbox],
11321139
})
11331140
class CheckboxWithTabIndex {
11341141
customTabIndex: number = 7;
11351142
isDisabled: boolean = false;
11361143
}
11371144

11381145
/** Simple test component with an aria-label set. */
1139-
@Component({template: `<mat-checkbox aria-label="Super effective"></mat-checkbox>`})
1146+
@Component({
1147+
template: `<mat-checkbox aria-label="Super effective"></mat-checkbox>`,
1148+
standalone: true,
1149+
imports: [MatCheckbox],
1150+
})
11401151
class CheckboxWithAriaLabel {}
11411152

11421153
/** Simple test component with an aria-label set. */
1143-
@Component({template: `<mat-checkbox aria-labelledby="some-id"></mat-checkbox>`})
1154+
@Component({
1155+
template: `<mat-checkbox aria-labelledby="some-id"></mat-checkbox>`,
1156+
standalone: true,
1157+
imports: [MatCheckbox],
1158+
})
11441159
class CheckboxWithAriaLabelledby {}
11451160

11461161
/** Simple test component with an aria-describedby set. */
11471162
@Component({
11481163
template: `<mat-checkbox aria-describedby="some-id"></mat-checkbox>`,
1164+
standalone: true,
1165+
imports: [MatCheckbox],
11491166
})
11501167
class CheckboxWithAriaDescribedby {}
11511168

11521169
/** Simple test component with name attribute */
1153-
@Component({template: `<mat-checkbox name="test-name"></mat-checkbox>`})
1170+
@Component({
1171+
template: `<mat-checkbox name="test-name"></mat-checkbox>`,
1172+
standalone: true,
1173+
imports: [MatCheckbox],
1174+
})
11541175
class CheckboxWithNameAttribute {}
11551176

11561177
/** Simple test component with change event */
1157-
@Component({template: `<mat-checkbox (change)="lastEvent = $event"></mat-checkbox>`})
1178+
@Component({
1179+
template: `<mat-checkbox (change)="lastEvent = $event"></mat-checkbox>`,
1180+
standalone: true,
1181+
imports: [MatCheckbox],
1182+
})
11581183
class CheckboxWithChangeEvent {
11591184
lastEvent: MatCheckboxChange;
11601185
}
11611186

11621187
/** Test component with reactive forms */
1163-
@Component({template: `<mat-checkbox [formControl]="formControl"></mat-checkbox>`})
1188+
@Component({
1189+
template: `<mat-checkbox [formControl]="formControl"></mat-checkbox>`,
1190+
standalone: true,
1191+
imports: [MatCheckbox, ReactiveFormsModule],
1192+
})
11641193
class CheckboxWithFormControl {
11651194
formControl = new FormControl(false);
11661195
}
11671196

11681197
/** Test component without label */
1169-
@Component({template: `<mat-checkbox>{{ label }}</mat-checkbox>`})
1198+
@Component({
1199+
template: `<mat-checkbox>{{ label }}</mat-checkbox>`,
1200+
standalone: true,
1201+
imports: [MatCheckbox],
1202+
})
11701203
class CheckboxWithoutLabel {
11711204
label: string;
11721205
}
11731206

11741207
/** Test component with the native tabindex attribute. */
1175-
@Component({template: `<mat-checkbox tabindex="5"></mat-checkbox>`})
1208+
@Component({
1209+
template: `<mat-checkbox tabindex="5"></mat-checkbox>`,
1210+
standalone: true,
1211+
imports: [MatCheckbox],
1212+
})
11761213
class CheckboxWithTabindexAttr {}
11771214

11781215
@Component({
11791216
template: `<mat-checkbox aria-label="Checkbox" aria-labelledby="something"></mat-checkbox>`,
1217+
standalone: true,
1218+
imports: [MatCheckbox],
11801219
})
11811220
class CheckboxWithStaticAriaAttributes {}

‎src/material/checkbox/checkbox.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,8 @@ const defaults = MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY();
9191
exportAs: 'matCheckbox',
9292
encapsulation: ViewEncapsulation.None,
9393
changeDetection: ChangeDetectionStrategy.OnPush,
94+
standalone: true,
95+
imports: [MatRipple],
9496
})
9597
export class MatCheckbox implements AfterViewInit, ControlValueAccessor, FocusableOption {
9698
/** Focuses the checkbox. */

‎src/material/checkbox/module.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,13 @@ import {MatCheckboxRequiredValidator} from './checkbox-required-validator';
1313

1414
/** This module is used by both original and MDC-based checkbox implementations. */
1515
@NgModule({
16+
imports: [MatCheckboxRequiredValidator],
1617
exports: [MatCheckboxRequiredValidator],
17-
declarations: [MatCheckboxRequiredValidator],
1818
})
1919
export class _MatCheckboxRequiredValidatorModule {}
2020

2121
@NgModule({
22-
imports: [MatCommonModule, MatRippleModule, _MatCheckboxRequiredValidatorModule],
22+
imports: [MatCommonModule, MatRippleModule, _MatCheckboxRequiredValidatorModule, MatCheckbox],
2323
exports: [MatCheckbox, MatCommonModule, _MatCheckboxRequiredValidatorModule],
24-
declarations: [MatCheckbox],
2524
})
2625
export class MatCheckboxModule {}

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

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,8 +12,7 @@ describe('MatCheckboxHarness', () => {
1212

1313
beforeEach(async () => {
1414
await TestBed.configureTestingModule({
15-
imports: [MatCheckboxModule, ReactiveFormsModule],
16-
declarations: [CheckboxHarnessTest],
15+
imports: [MatCheckboxModule, ReactiveFormsModule, CheckboxHarnessTest],
1716
}).compileComponents();
1817

1918
fixture = TestBed.createComponent(CheckboxHarnessTest);
@@ -68,9 +67,8 @@ describe('MatCheckboxHarness', () => {
6867
});
6968

7069
it('should get indeterminate state', async () => {
71-
const [checkedCheckbox, indeterminateCheckbox] = await loader.getAllHarnesses(
72-
MatCheckboxHarness,
73-
);
70+
const [checkedCheckbox, indeterminateCheckbox] =
71+
await loader.getAllHarnesses(MatCheckboxHarness);
7472
expect(await checkedCheckbox.isIndeterminate()).toBe(false);
7573
expect(await indeterminateCheckbox.isIndeterminate()).toBe(true);
7674
});
@@ -186,6 +184,8 @@ describe('MatCheckboxHarness', () => {
186184
</mat-checkbox>
187185
<span id="second-label">Second checkbox</span>
188186
`,
187+
standalone: true,
188+
imports: [MatCheckboxModule, ReactiveFormsModule],
189189
})
190190
class CheckboxHarnessTest {
191191
ctrl = new FormControl(true);

‎tools/public_api_guard/material/checkbox.md

Lines changed: 5 additions & 5 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 { FocusableOption } from '@angular/cdk/a11y';
1414
import * as i0 from '@angular/core';
15-
import * as i3 from '@angular/material/core';
15+
import * as i2 from '@angular/material/core';
1616
import { InjectionToken } from '@angular/core';
1717
import { MatRipple } from '@angular/material/core';
1818
import { NgZone } from '@angular/core';
@@ -112,7 +112,7 @@ export class MatCheckbox implements AfterViewInit, ControlValueAccessor, Focusab
112112
// (undocumented)
113113
writeValue(value: any): void;
114114
// (undocumented)
115-
static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], false, never>;
115+
static ɵcmp: i0.ɵɵComponentDeclaration<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "id": { "alias": "id"; "required": false; }; "required": { "alias": "required"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "color": { "alias": "color"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"], true, never>;
116116
// (undocumented)
117117
static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckbox, [null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
118118
}
@@ -139,13 +139,13 @@ export class MatCheckboxModule {
139139
// (undocumented)
140140
static ɵinj: i0.ɵɵInjectorDeclaration<MatCheckboxModule>;
141141
// (undocumented)
142-
static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, [typeof i2.MatCheckbox], [typeof i3.MatCommonModule, typeof i3.MatRippleModule, typeof _MatCheckboxRequiredValidatorModule], [typeof i2.MatCheckbox, typeof i3.MatCommonModule, typeof _MatCheckboxRequiredValidatorModule]>;
142+
static ɵmod: i0.ɵɵNgModuleDeclaration<MatCheckboxModule, never, [typeof i2.MatCommonModule, typeof i2.MatRippleModule, typeof _MatCheckboxRequiredValidatorModule, typeof i3.MatCheckbox], [typeof i3.MatCheckbox, typeof i2.MatCommonModule, typeof _MatCheckboxRequiredValidatorModule]>;
143143
}
144144

145145
// @public
146146
export class MatCheckboxRequiredValidator extends CheckboxRequiredValidator {
147147
// (undocumented)
148-
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCheckboxRequiredValidator, "mat-checkbox[required][formControlName], mat-checkbox[required][formControl], mat-checkbox[required][ngModel]", never, {}, {}, never, never, false, never>;
148+
static ɵdir: i0.ɵɵDirectiveDeclaration<MatCheckboxRequiredValidator, "mat-checkbox[required][formControlName], mat-checkbox[required][formControl], mat-checkbox[required][ngModel]", never, {}, {}, never, never, true, never>;
149149
// (undocumented)
150150
static ɵfac: i0.ɵɵFactoryDeclaration<MatCheckboxRequiredValidator, never>;
151151
}
@@ -157,7 +157,7 @@ export class _MatCheckboxRequiredValidatorModule {
157157
// (undocumented)
158158
static ɵinj: i0.ɵɵInjectorDeclaration<_MatCheckboxRequiredValidatorModule>;
159159
// (undocumented)
160-
static ɵmod: i0.ɵɵNgModuleDeclaration<_MatCheckboxRequiredValidatorModule, [typeof i1.MatCheckboxRequiredValidator], never, [typeof i1.MatCheckboxRequiredValidator]>;
160+
static ɵmod: i0.ɵɵNgModuleDeclaration<_MatCheckboxRequiredValidatorModule, never, [typeof i1.MatCheckboxRequiredValidator], [typeof i1.MatCheckboxRequiredValidator]>;
161161
}
162162

163163
// @public

0 commit comments

Comments
 (0)