Skip to content

Commit 70ead0c

Browse files
crisbetocrisbeto
authored
refactor(checkbox): remove deprecated APIs for v11 (#20535)
Removes the checkbox APIs that were marked for removal in v11. BREAKING CHANGES: * `MAT_CHECKBOX_CLICK_ACTION` has been removed. Configure `clickAction` through `MAT_CHECKBOX_DEFAULT_OPTIONS` instead. * `_clickAction` parameter of the `MatCheckbox` constructor has been removed.
1 parent 85e8f34 commit 70ead0c

File tree

10 files changed

+26
-120
lines changed

10 files changed

+26
-120
lines changed

‎src/dev-app/checkbox/checkbox-demo.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Component, Directive} from '@angular/core';
10-
import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
10+
import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
1111
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
1212
import {ThemePalette} from '@angular/material/core';
1313

@@ -20,14 +20,14 @@ export interface Task {
2020

2121
@Directive({
2222
selector: '[clickActionNoop]',
23-
providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}],
23+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}],
2424
})
2525
export class ClickActionNoop {
2626
}
2727

2828
@Directive({
2929
selector: '[clickActionCheck]',
30-
providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}],
30+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}],
3131
})
3232
export class ClickActionCheck {
3333
}

‎src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
*/
88

99
import {Component, Directive} from '@angular/core';
10-
import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox';
10+
import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox';
1111
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
1212
import {ThemePalette} from '@angular/material/core';
1313

@@ -20,14 +20,14 @@ export interface Task {
2020

2121
@Directive({
2222
selector: '[clickActionNoop]',
23-
providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}],
23+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}],
2424
})
2525
export class ClickActionNoop {
2626
}
2727

2828
@Directive({
2929
selector: '[clickActionCheck]',
30-
providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}],
30+
providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}],
3131
})
3232
export class ClickActionCheck {
3333
}

‎src/material-experimental/mdc-checkbox/checkbox.spec.ts

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {ThemePalette} from '@angular/material/core';
1111
import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
1212
import {By} from '@angular/platform-browser';
1313
import {
14-
MAT_CHECKBOX_CLICK_ACTION,
1514
MatCheckbox,
1615
MatCheckboxChange,
1716
MatCheckboxModule
@@ -477,39 +476,6 @@ describe('MDC-based MatCheckbox', () => {
477476

478477
});
479478

480-
describe(`when MAT_CHECKBOX_CLICK_ACTION is set`, () => {
481-
beforeEach(() => {
482-
TestBed.resetTestingModule();
483-
TestBed.configureTestingModule({
484-
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
485-
declarations: [SingleCheckbox],
486-
providers: [
487-
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'},
488-
{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}
489-
]
490-
});
491-
492-
fixture = createComponent(SingleCheckbox);
493-
fixture.detectChanges();
494-
495-
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
496-
checkboxNativeElement = checkboxDebugElement.nativeElement;
497-
testComponent = fixture.debugElement.componentInstance;
498-
499-
inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement;
500-
});
501-
502-
it('should override the value set in the default options', fakeAsync(() => {
503-
testComponent.isIndeterminate = true;
504-
inputElement.click();
505-
fixture.detectChanges();
506-
flush();
507-
508-
expect(inputElement.checked).toBe(true);
509-
expect(inputElement.indeterminate).toBe(true);
510-
}));
511-
});
512-
513479
describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => {
514480
beforeEach(() => {
515481
TestBed.resetTestingModule();

‎src/material-experimental/mdc-checkbox/checkbox.ts

Lines changed: 9 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -26,9 +26,8 @@ import {
2626
} from '@angular/core';
2727
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
2828
import {
29-
MAT_CHECKBOX_CLICK_ACTION,
3029
MAT_CHECKBOX_DEFAULT_OPTIONS,
31-
MatCheckboxClickAction, MatCheckboxDefaultOptions
30+
MatCheckboxDefaultOptions
3231
} from '@angular/material/checkbox';
3332
import {
3433
ThemePalette,
@@ -247,12 +246,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
247246
private _changeDetectorRef: ChangeDetectorRef,
248247
elementRef: ElementRef<HTMLElement>,
249248
@Attribute('tabindex') tabIndex: string,
250-
/**
251-
* @deprecated `_clickAction` parameter to be removed, use
252-
* `MAT_CHECKBOX_DEFAULT_OPTIONS`
253-
* @breaking-change 10.0.0
254-
*/
255-
@Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) private _clickAction: MatCheckboxClickAction,
256249
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
257250
@Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
258251
private _options?: MatCheckboxDefaultOptions) {
@@ -267,10 +260,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
267260
if (this._options.color) {
268261
this.color = this.defaultColor = this._options.color;
269262
}
270-
271-
// @breaking-change 10.0.0: Remove this after the `_clickAction` parameter is removed as an
272-
// injection parameter.
273-
this._clickAction = this._clickAction || this._options.clickAction;
274263
}
275264

276265
ngAfterViewInit() {
@@ -349,21 +338,24 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements AfterViewInit,
349338
* state like other browsers do.
350339
*/
351340
_onClick() {
352-
if (this._clickAction === 'noop') {
353-
this._nativeCheckbox.nativeElement.checked = this.checked;
354-
this._nativeCheckbox.nativeElement.indeterminate = this.indeterminate;
341+
const clickAction = this._options?.clickAction;
342+
const checkbox = this._nativeCheckbox.nativeElement;
343+
344+
if (clickAction === 'noop') {
345+
checkbox.checked = this.checked;
346+
checkbox.indeterminate = this.indeterminate;
355347
return;
356348
}
357349

358-
if (this.indeterminate && this._clickAction !== 'check') {
350+
if (this.indeterminate && clickAction !== 'check') {
359351
this.indeterminate = false;
360352
// tslint:disable:max-line-length
361353
// We use `Promise.resolve().then` to ensure the same timing as the original `MatCheckbox`:
362354
// https://github.com/angular/components/blob/309d5644aa610ee083c56a823ce7c422988730e8/src/lib/checkbox/checkbox.ts#L381
363355
// tslint:enable:max-line-length
364356
Promise.resolve().then(() => this.indeterminateChange.next(this.indeterminate));
365357
} else {
366-
this._nativeCheckbox.nativeElement.indeterminate = this.indeterminate;
358+
checkbox.indeterminate = this.indeterminate;
367359
}
368360

369361
this.checked = !this.checked;

‎src/material-experimental/mdc-checkbox/public-api.ts

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,6 @@ export * from './checkbox';
1212
export * from './module';
1313

1414
export {
15-
MAT_CHECKBOX_CLICK_ACTION,
1615
MAT_CHECKBOX_REQUIRED_VALIDATOR,
1716
MatCheckboxClickAction,
1817
MatCheckboxRequiredValidator,

‎src/material/checkbox/checkbox-config.ts

Lines changed: 0 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,11 +37,3 @@ export function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOption
3737
* undefined: Same as `check-indeterminate`.
3838
*/
3939
export type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined;
40-
41-
/**
42-
* Injection token that can be used to specify the checkbox click behavior.
43-
* @deprecated Injection token will be removed, use `MAT_CHECKBOX_DEFAULT_OPTIONS` instead.
44-
* @breaking-change 10.0.0
45-
*/
46-
export const MAT_CHECKBOX_CLICK_ACTION =
47-
new InjectionToken<MatCheckboxClickAction>('mat-checkbox-click-action');

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

Lines changed: 0 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,6 @@ import {
1515
MatCheckboxChange,
1616
MatCheckboxModule
1717
} from './index';
18-
import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config';
1918
import {MutationObserverFactory} from '@angular/cdk/observers';
2019
import {ThemePalette} from '@angular/material/core';
2120

@@ -545,39 +544,6 @@ describe('MatCheckbox', () => {
545544
}));
546545
});
547546

548-
describe(`when MAT_CHECKBOX_CLICK_ACTION is set`, () => {
549-
beforeEach(() => {
550-
TestBed.resetTestingModule();
551-
TestBed.configureTestingModule({
552-
imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule],
553-
declarations: [SingleCheckbox],
554-
providers: [
555-
{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'},
556-
{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}
557-
]
558-
});
559-
560-
fixture = createComponent(SingleCheckbox);
561-
fixture.detectChanges();
562-
563-
checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!;
564-
checkboxNativeElement = checkboxDebugElement.nativeElement;
565-
testComponent = fixture.debugElement.componentInstance;
566-
567-
inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement;
568-
});
569-
570-
it('should override the value set in the default options', fakeAsync(() => {
571-
testComponent.isIndeterminate = true;
572-
inputElement.click();
573-
fixture.detectChanges();
574-
flush();
575-
576-
expect(inputElement.checked).toBe(true);
577-
expect(inputElement.indeterminate).toBe(true);
578-
}));
579-
});
580-
581547
describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => {
582548
beforeEach(() => {
583549
TestBed.resetTestingModule();

‎src/material/checkbox/checkbox.ts

Lines changed: 5 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -45,9 +45,7 @@ import {
4545
} from '@angular/material/core';
4646
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
4747
import {
48-
MAT_CHECKBOX_CLICK_ACTION,
4948
MAT_CHECKBOX_DEFAULT_OPTIONS,
50-
MatCheckboxClickAction,
5149
MatCheckboxDefaultOptions
5250
} from './checkbox-config';
5351

@@ -202,13 +200,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
202200
private _focusMonitor: FocusMonitor,
203201
private _ngZone: NgZone,
204202
@Attribute('tabindex') tabIndex: string,
205-
/**
206-
* @deprecated `_clickAction` parameter to be removed, use
207-
* `MAT_CHECKBOX_DEFAULT_OPTIONS`
208-
* @breaking-change 10.0.0
209-
*/
210-
@Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION)
211-
private _clickAction: MatCheckboxClickAction,
212203
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
213204
@Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
214205
private _options?: MatCheckboxDefaultOptions) {
@@ -220,9 +211,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
220211
}
221212

222213
this.tabIndex = parseInt(tabIndex) || 0;
223-
224-
// TODO: Remove this after the `_clickAction` parameter is removed as an injection parameter.
225-
this._clickAction = this._clickAction || this._options.clickAction;
226214
}
227215

228216
ngAfterViewInit() {
@@ -398,6 +386,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
398386
* @param event
399387
*/
400388
_onInputClick(event: Event) {
389+
const clickAction = this._options?.clickAction;
390+
401391
// We have to stop propagation for click events on the visual hidden input element.
402392
// By default, when a user clicks on a label element, a generated click event will be
403393
// dispatched on the associated input element. Since we are using a label element as our
@@ -408,9 +398,9 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
408398
event.stopPropagation();
409399

410400
// If resetIndeterminate is false, and the current state is indeterminate, do nothing on click
411-
if (!this.disabled && this._clickAction !== 'noop') {
401+
if (!this.disabled && clickAction !== 'noop') {
412402
// When user manually click on the checkbox, `indeterminate` is set to false.
413-
if (this.indeterminate && this._clickAction !== 'check') {
403+
if (this.indeterminate && clickAction !== 'check') {
414404

415405
Promise.resolve().then(() => {
416406
this._indeterminate = false;
@@ -426,7 +416,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
426416
// It is important to only emit it, if the native input triggered one, because
427417
// we don't want to trigger a change event, when the `checked` variable changes for example.
428418
this._emitChangeEvent();
429-
} else if (!this.disabled && this._clickAction === 'noop') {
419+
} else if (!this.disabled && clickAction === 'noop') {
430420
// Reset native input when clicked with noop. The native checkbox becomes checked after
431421
// click, reset it to be align with `checked` value of `mat-checkbox`.
432422
this._inputElement.nativeElement.checked = this.checked;

‎src/material/schematics/ng-update/data/constructor-checks.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@ export const constructorChecks: VersionChanges<ConstructorChecksUpgradeData> = {
2626
{
2727
pr: 'https://github.com/angular/components/pull/20545',
2828
changes: ['MatBottomSheet', 'MatBottomSheetRef']
29+
},
30+
{
31+
pr: 'https://github.com/angular/components/issues/20535',
32+
changes: ['MatCheckbox']
2933
}
3034
],
3135
[TargetVersion.V10]: [

‎tools/public_api_guard/material/checkbox.d.ts

Lines changed: 2 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,6 @@ export declare class _MatCheckboxRequiredValidatorModule {
33
static ɵmod: i0.ɵɵNgModuleDefWithMeta<_MatCheckboxRequiredValidatorModule, [typeof i1.MatCheckboxRequiredValidator], never, [typeof i1.MatCheckboxRequiredValidator]>;
44
}
55

6-
export declare const MAT_CHECKBOX_CLICK_ACTION: InjectionToken<MatCheckboxClickAction>;
7-
86
export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any;
97

108
export declare const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken<MatCheckboxDefaultOptions>;
@@ -36,8 +34,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
3634
set required(value: boolean);
3735
ripple: MatRipple;
3836
value: string;
39-
constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string,
40-
_clickAction: MatCheckboxClickAction, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
37+
constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
4138
_getAriaChecked(): 'true' | 'false' | 'mixed';
4239
_isRippleDisabled(): any;
4340
_onInputClick(event: Event): void;
@@ -58,7 +55,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
5855
static ngAcceptInputType_required: BooleanInput;
5956
static ngAcceptInputType_tabIndex: NumberInput;
6057
static ɵcmp: i0.ɵɵComponentDefWithMeta<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "ariaDescribedby": "aria-describedby"; "id": "id"; "required": "required"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"]>;
61-
static ɵfac: i0.ɵɵFactoryDef<MatCheckbox, [null, null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
58+
static ɵfac: i0.ɵɵFactoryDef<MatCheckbox, [null, null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
6259
}
6360

6461
export declare class MatCheckboxChange {

0 commit comments

Comments
 (0)