Skip to content

Commit c690c4b

Browse files
crisbetocrisbeto
committed
refactor(checkbox): remove deprecated APIs for version 10
Removes the APIs that were marked as deprecated for v10 in the checkbox module. BREAKING CHANGES: * `MAT_CHECKBOX_CLICK_ACTION` has been removed. Specify the `clickAction` through `MAT_CHECKBOX_DEFAULT_OPTIONS` instead. * The `clickAction` parameter in the `MatCheckbox` constructor has been removed.
1 parent 5f12539 commit c690c4b

File tree

10 files changed

+23
-128
lines changed

10 files changed

+23
-128
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
@@ -10,7 +10,6 @@ import {
1010
import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms';
1111
import {By} from '@angular/platform-browser';
1212
import {
13-
MAT_CHECKBOX_CLICK_ACTION,
1413
MatCheckbox,
1514
MatCheckboxChange,
1615
MatCheckboxModule
@@ -469,39 +468,6 @@ describe('MDC-based MatCheckbox', () => {
469468
}));
470469
});
471470

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

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

Lines changed: 5 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -25,11 +25,7 @@ import {
2525
ViewEncapsulation
2626
} from '@angular/core';
2727
import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms';
28-
import {
29-
MAT_CHECKBOX_CLICK_ACTION,
30-
MAT_CHECKBOX_DEFAULT_OPTIONS,
31-
MatCheckboxClickAction, MatCheckboxDefaultOptions
32-
} from '@angular/material/checkbox';
28+
import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxDefaultOptions} from '@angular/material/checkbox';
3329
import {ThemePalette, RippleAnimationConfig} from '@angular/material/core';
3430
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
3531
import {MDCCheckboxAdapter, MDCCheckboxFoundation} from '@material/checkbox';
@@ -233,12 +229,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
233229
constructor(
234230
private _changeDetectorRef: ChangeDetectorRef,
235231
@Attribute('tabindex') tabIndex: string,
236-
/**
237-
* @deprecated `_clickAction` parameter to be removed, use
238-
* `MAT_CHECKBOX_DEFAULT_OPTIONS`
239-
* @breaking-change 10.0.0
240-
*/
241-
@Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) private _clickAction: MatCheckboxClickAction,
242232
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
243233
@Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
244234
private _options?: MatCheckboxDefaultOptions) {
@@ -252,10 +242,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
252242
if (this._options.color) {
253243
this.color = this._options.color;
254244
}
255-
256-
// @breaking-change 10.0.0: Remove this after the `_clickAction` parameter is removed as an
257-
// injection parameter.
258-
this._clickAction = this._clickAction || this._options.clickAction;
259245
}
260246

261247
ngAfterViewInit() {
@@ -334,13 +320,15 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess
334320
* state like other browsers do.
335321
*/
336322
_onClick() {
337-
if (this._clickAction === 'noop') {
323+
const clickAction = this._options?.clickAction;
324+
325+
if (clickAction === 'noop') {
338326
this._nativeCheckbox.nativeElement.checked = this.checked;
339327
this._nativeCheckbox.nativeElement.indeterminate = this.indeterminate;
340328
return;
341329
}
342330

343-
if (this.indeterminate && this._clickAction !== 'check') {
331+
if (this.indeterminate && clickAction !== 'check') {
344332
this.indeterminate = false;
345333
// tslint:disable:max-line-length
346334
// We use `Promise.resolve().then` to ensure the same timing as the original `MatCheckbox`:

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

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,9 @@ export * from './checkbox';
1212
export * from './module';
1313

1414
export {
15-
MAT_CHECKBOX_CLICK_ACTION,
1615
MAT_CHECKBOX_REQUIRED_VALIDATOR,
1716
MatCheckboxClickAction,
1817
MatCheckboxRequiredValidator,
1918
_MatCheckboxRequiredValidatorModule,
20-
/**
21-
* @deprecated
22-
* @breaking-change 9.0.0
23-
*/
2419
TransitionCheckState,
2520
} from '@angular/material/checkbox';

‎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

@@ -539,39 +538,6 @@ describe('MatCheckbox', () => {
539538
}));
540539
});
541540

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

‎src/material/checkbox/checkbox.ts‎

Lines changed: 6 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -44,12 +44,7 @@ import {
4444
mixinTabIndex,
4545
} from '@angular/material/core';
4646
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
47-
import {
48-
MAT_CHECKBOX_CLICK_ACTION,
49-
MAT_CHECKBOX_DEFAULT_OPTIONS,
50-
MatCheckboxClickAction,
51-
MatCheckboxDefaultOptions
52-
} from './checkbox-config';
47+
import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxDefaultOptions} from './checkbox-config';
5348

5449

5550
// Increasing integer for generating unique ids for checkbox components.
@@ -199,13 +194,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
199194
private _focusMonitor: FocusMonitor,
200195
private _ngZone: NgZone,
201196
@Attribute('tabindex') tabIndex: string,
202-
/**
203-
* @deprecated `_clickAction` parameter to be removed, use
204-
* `MAT_CHECKBOX_DEFAULT_OPTIONS`
205-
* @breaking-change 10.0.0
206-
*/
207-
@Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION)
208-
private _clickAction: MatCheckboxClickAction,
209197
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
210198
@Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS)
211199
private _options?: MatCheckboxDefaultOptions) {
@@ -231,9 +219,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
231219
});
232220
}
233221
});
234-
235-
// TODO: Remove this after the `_clickAction` parameter is removed as an injection parameter.
236-
this._clickAction = this._clickAction || this._options.clickAction;
237222
}
238223

239224
ngAfterViewInit() {
@@ -395,6 +380,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
395380
* @param event
396381
*/
397382
_onInputClick(event: Event) {
383+
const clickAction = this._options?.clickAction;
384+
398385
// We have to stop propagation for click events on the visual hidden input element.
399386
// By default, when a user clicks on a label element, a generated click event will be
400387
// dispatched on the associated input element. Since we are using a label element as our
@@ -405,9 +392,9 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
405392
event.stopPropagation();
406393

407394
// If resetIndeterminate is false, and the current state is indeterminate, do nothing on click
408-
if (!this.disabled && this._clickAction !== 'noop') {
395+
if (!this.disabled && clickAction !== 'noop') {
409396
// When user manually click on the checkbox, `indeterminate` is set to false.
410-
if (this.indeterminate && this._clickAction !== 'check') {
397+
if (this.indeterminate && clickAction !== 'check') {
411398

412399
Promise.resolve().then(() => {
413400
this._indeterminate = false;
@@ -423,7 +410,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc
423410
// It is important to only emit it, if the native input triggered one, because
424411
// we don't want to trigger a change event, when the `checked` variable changes for example.
425412
this._emitChangeEvent();
426-
} else if (!this.disabled && this._clickAction === 'noop') {
413+
} else if (!this.disabled && clickAction === 'noop') {
427414
// Reset native input when clicked with noop. The native checkbox becomes checked after
428415
// click, reset it to be align with `checked` value of `mat-checkbox`.
429416
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
@@ -22,6 +22,10 @@ export const constructorChecks: VersionChanges<ConstructorChecksUpgradeData> = {
2222
{
2323
pr: 'https://github.com/angular/components/pull/19379',
2424
changes: ['MatSlider']
25+
},
26+
{
27+
pr: 'https://github.com/angular/components/pull/19381',
28+
changes: ['MatCheckbox']
2529
}
2630
],
2731
[TargetVersion.V9]: [

‎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>;
@@ -35,8 +33,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
3533
set required(value: boolean);
3634
ripple: MatRipple;
3735
value: string;
38-
constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string,
39-
_clickAction: MatCheckboxClickAction, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
36+
constructor(elementRef: ElementRef<HTMLElement>, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined);
4037
_getAriaChecked(): 'true' | 'false' | 'mixed';
4138
_isRippleDisabled(): any;
4239
_onInputClick(event: Event): void;
@@ -56,7 +53,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro
5653
static ngAcceptInputType_indeterminate: BooleanInput;
5754
static ngAcceptInputType_required: BooleanInput;
5855
static ɵcmp: i0.ɵɵComponentDefWithMeta<MatCheckbox, "mat-checkbox", ["matCheckbox"], { "disableRipple": "disableRipple"; "color": "color"; "tabIndex": "tabIndex"; "ariaLabel": "aria-label"; "ariaLabelledby": "aria-labelledby"; "id": "id"; "required": "required"; "labelPosition": "labelPosition"; "name": "name"; "value": "value"; "checked": "checked"; "disabled": "disabled"; "indeterminate": "indeterminate"; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*"]>;
59-
static ɵfac: i0.ɵɵFactoryDef<MatCheckbox, [null, null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }, { optional: true; }]>;
56+
static ɵfac: i0.ɵɵFactoryDef<MatCheckbox, [null, null, null, null, { attribute: "tabindex"; }, { optional: true; }, { optional: true; }]>;
6057
}
6158

6259
export declare class MatCheckboxChange {

0 commit comments

Comments
 (0)