diff --git a/src/dev-app/checkbox/checkbox-demo.ts b/src/dev-app/checkbox/checkbox-demo.ts index cad3c9ef7a68..ed3db27cdfc4 100644 --- a/src/dev-app/checkbox/checkbox-demo.ts +++ b/src/dev-app/checkbox/checkbox-demo.ts @@ -7,7 +7,7 @@ */ import {Component, Directive} from '@angular/core'; -import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox'; +import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; import {ThemePalette} from '@angular/material/core'; @@ -20,14 +20,14 @@ export interface Task { @Directive({ selector: '[clickActionNoop]', - providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}], + providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}], }) export class ClickActionNoop { } @Directive({ selector: '[clickActionCheck]', - providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}], + providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}], }) export class ClickActionCheck { } diff --git a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts b/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts index 0c38a17fa9e9..deb30935a820 100644 --- a/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts +++ b/src/dev-app/mdc-checkbox/mdc-checkbox-demo.ts @@ -7,7 +7,7 @@ */ import {Component, Directive} from '@angular/core'; -import {MAT_CHECKBOX_CLICK_ACTION} from '@angular/material/checkbox'; +import {MAT_CHECKBOX_DEFAULT_OPTIONS} from '@angular/material/checkbox'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; import {ThemePalette} from '@angular/material/core'; @@ -20,14 +20,14 @@ export interface Task { @Directive({ selector: '[clickActionNoop]', - providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'noop'}], + providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}}], }) export class ClickActionNoop { } @Directive({ selector: '[clickActionCheck]', - providers: [{provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}], + providers: [{provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'check'}}], }) export class ClickActionCheck { } diff --git a/src/material-experimental/mdc-checkbox/checkbox.spec.ts b/src/material-experimental/mdc-checkbox/checkbox.spec.ts index b09aab3855e5..f340704e81a6 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.spec.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.spec.ts @@ -10,7 +10,6 @@ import { import {FormControl, FormsModule, NgModel, ReactiveFormsModule} from '@angular/forms'; import {By} from '@angular/platform-browser'; import { - MAT_CHECKBOX_CLICK_ACTION, MatCheckbox, MatCheckboxChange, MatCheckboxModule @@ -469,39 +468,6 @@ describe('MDC-based MatCheckbox', () => { })); }); - describe(`when MAT_CHECKBOX_CLICK_ACTION is set`, () => { - beforeEach(() => { - TestBed.resetTestingModule(); - TestBed.configureTestingModule({ - imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], - declarations: [SingleCheckbox], - providers: [ - {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}, - {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}} - ] - }); - - fixture = createComponent(SingleCheckbox); - fixture.detectChanges(); - - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - testComponent = fixture.debugElement.componentInstance; - - inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement; - }); - - it('should override the value set in the default options', fakeAsync(() => { - testComponent.isIndeterminate = true; - inputElement.click(); - fixture.detectChanges(); - flush(); - - expect(inputElement.checked).toBe(true); - expect(inputElement.indeterminate).toBe(true); - })); - }); - describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => { beforeEach(() => { TestBed.resetTestingModule(); diff --git a/src/material-experimental/mdc-checkbox/checkbox.ts b/src/material-experimental/mdc-checkbox/checkbox.ts index 3da321b73051..4616ec2f69a2 100644 --- a/src/material-experimental/mdc-checkbox/checkbox.ts +++ b/src/material-experimental/mdc-checkbox/checkbox.ts @@ -25,11 +25,7 @@ import { ViewEncapsulation } from '@angular/core'; import {ControlValueAccessor, NG_VALUE_ACCESSOR} from '@angular/forms'; -import { - MAT_CHECKBOX_CLICK_ACTION, - MAT_CHECKBOX_DEFAULT_OPTIONS, - MatCheckboxClickAction, MatCheckboxDefaultOptions -} from '@angular/material/checkbox'; +import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxDefaultOptions} from '@angular/material/checkbox'; import {ThemePalette, RippleAnimationConfig} from '@angular/material/core'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; import {MDCCheckboxAdapter, MDCCheckboxFoundation} from '@material/checkbox'; @@ -233,12 +229,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess constructor( private _changeDetectorRef: ChangeDetectorRef, @Attribute('tabindex') tabIndex: string, - /** - * @deprecated `_clickAction` parameter to be removed, use - * `MAT_CHECKBOX_DEFAULT_OPTIONS` - * @breaking-change 10.0.0 - */ - @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) private _clickAction: MatCheckboxClickAction, @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string, @Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) private _options?: MatCheckboxDefaultOptions) { @@ -252,10 +242,6 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess if (this._options.color) { this.color = this._options.color; } - - // @breaking-change 10.0.0: Remove this after the `_clickAction` parameter is removed as an - // injection parameter. - this._clickAction = this._clickAction || this._options.clickAction; } ngAfterViewInit() { @@ -334,13 +320,15 @@ export class MatCheckbox implements AfterViewInit, OnDestroy, ControlValueAccess * state like other browsers do. */ _onClick() { - if (this._clickAction === 'noop') { + const clickAction = this._options?.clickAction; + + if (clickAction === 'noop') { this._nativeCheckbox.nativeElement.checked = this.checked; this._nativeCheckbox.nativeElement.indeterminate = this.indeterminate; return; } - if (this.indeterminate && this._clickAction !== 'check') { + if (this.indeterminate && clickAction !== 'check') { this.indeterminate = false; // tslint:disable:max-line-length // We use `Promise.resolve().then` to ensure the same timing as the original `MatCheckbox`: diff --git a/src/material-experimental/mdc-checkbox/public-api.ts b/src/material-experimental/mdc-checkbox/public-api.ts index 553c363fe871..e9660ba0b498 100644 --- a/src/material-experimental/mdc-checkbox/public-api.ts +++ b/src/material-experimental/mdc-checkbox/public-api.ts @@ -12,14 +12,9 @@ export * from './checkbox'; export * from './module'; export { - MAT_CHECKBOX_CLICK_ACTION, MAT_CHECKBOX_REQUIRED_VALIDATOR, MatCheckboxClickAction, MatCheckboxRequiredValidator, _MatCheckboxRequiredValidatorModule, - /** - * @deprecated - * @breaking-change 9.0.0 - */ TransitionCheckState, } from '@angular/material/checkbox'; diff --git a/src/material/checkbox/checkbox-config.ts b/src/material/checkbox/checkbox-config.ts index 5cc52de2e19d..9af244fb0209 100644 --- a/src/material/checkbox/checkbox-config.ts +++ b/src/material/checkbox/checkbox-config.ts @@ -37,11 +37,3 @@ export function MAT_CHECKBOX_DEFAULT_OPTIONS_FACTORY(): MatCheckboxDefaultOption * undefined: Same as `check-indeterminate`. */ export type MatCheckboxClickAction = 'noop' | 'check' | 'check-indeterminate' | undefined; - -/** - * Injection token that can be used to specify the checkbox click behavior. - * @deprecated Injection token will be removed, use `MAT_CHECKBOX_DEFAULT_OPTIONS` instead. - * @breaking-change 10.0.0 - */ -export const MAT_CHECKBOX_CLICK_ACTION = - new InjectionToken('mat-checkbox-click-action'); diff --git a/src/material/checkbox/checkbox.spec.ts b/src/material/checkbox/checkbox.spec.ts index 8e97409eb690..eaf7df39cac0 100644 --- a/src/material/checkbox/checkbox.spec.ts +++ b/src/material/checkbox/checkbox.spec.ts @@ -15,7 +15,6 @@ import { MatCheckboxChange, MatCheckboxModule } from './index'; -import {MAT_CHECKBOX_CLICK_ACTION} from './checkbox-config'; import {MutationObserverFactory} from '@angular/cdk/observers'; import {ThemePalette} from '@angular/material/core'; @@ -539,39 +538,6 @@ describe('MatCheckbox', () => { })); }); - describe(`when MAT_CHECKBOX_CLICK_ACTION is set`, () => { - beforeEach(() => { - TestBed.resetTestingModule(); - TestBed.configureTestingModule({ - imports: [MatCheckboxModule, FormsModule, ReactiveFormsModule], - declarations: [SingleCheckbox], - providers: [ - {provide: MAT_CHECKBOX_CLICK_ACTION, useValue: 'check'}, - {provide: MAT_CHECKBOX_DEFAULT_OPTIONS, useValue: {clickAction: 'noop'}} - ] - }); - - fixture = createComponent(SingleCheckbox); - fixture.detectChanges(); - - checkboxDebugElement = fixture.debugElement.query(By.directive(MatCheckbox))!; - checkboxNativeElement = checkboxDebugElement.nativeElement; - testComponent = fixture.debugElement.componentInstance; - - inputElement = checkboxNativeElement.querySelector('input') as HTMLInputElement; - }); - - it('should override the value set in the default options', fakeAsync(() => { - testComponent.isIndeterminate = true; - inputElement.click(); - fixture.detectChanges(); - flush(); - - expect(inputElement.checked).toBe(true); - expect(inputElement.indeterminate).toBe(true); - })); - }); - describe(`when MAT_CHECKBOX_CLICK_ACTION is 'check'`, () => { beforeEach(() => { TestBed.resetTestingModule(); diff --git a/src/material/checkbox/checkbox.ts b/src/material/checkbox/checkbox.ts index 5209d6d13850..ade4cbd1a53c 100644 --- a/src/material/checkbox/checkbox.ts +++ b/src/material/checkbox/checkbox.ts @@ -44,12 +44,7 @@ import { mixinTabIndex, } from '@angular/material/core'; import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations'; -import { - MAT_CHECKBOX_CLICK_ACTION, - MAT_CHECKBOX_DEFAULT_OPTIONS, - MatCheckboxClickAction, - MatCheckboxDefaultOptions -} from './checkbox-config'; +import {MAT_CHECKBOX_DEFAULT_OPTIONS, MatCheckboxDefaultOptions} from './checkbox-config'; // Increasing integer for generating unique ids for checkbox components. @@ -199,13 +194,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc private _focusMonitor: FocusMonitor, private _ngZone: NgZone, @Attribute('tabindex') tabIndex: string, - /** - * @deprecated `_clickAction` parameter to be removed, use - * `MAT_CHECKBOX_DEFAULT_OPTIONS` - * @breaking-change 10.0.0 - */ - @Optional() @Inject(MAT_CHECKBOX_CLICK_ACTION) - private _clickAction: MatCheckboxClickAction, @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string, @Optional() @Inject(MAT_CHECKBOX_DEFAULT_OPTIONS) private _options?: MatCheckboxDefaultOptions) { @@ -231,9 +219,6 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc }); } }); - - // TODO: Remove this after the `_clickAction` parameter is removed as an injection parameter. - this._clickAction = this._clickAction || this._options.clickAction; } ngAfterViewInit() { @@ -395,6 +380,8 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc * @param event */ _onInputClick(event: Event) { + const clickAction = this._options?.clickAction; + // We have to stop propagation for click events on the visual hidden input element. // By default, when a user clicks on a label element, a generated click event will be // 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 event.stopPropagation(); // If resetIndeterminate is false, and the current state is indeterminate, do nothing on click - if (!this.disabled && this._clickAction !== 'noop') { + if (!this.disabled && clickAction !== 'noop') { // When user manually click on the checkbox, `indeterminate` is set to false. - if (this.indeterminate && this._clickAction !== 'check') { + if (this.indeterminate && clickAction !== 'check') { Promise.resolve().then(() => { this._indeterminate = false; @@ -423,7 +410,7 @@ export class MatCheckbox extends _MatCheckboxMixinBase implements ControlValueAc // It is important to only emit it, if the native input triggered one, because // we don't want to trigger a change event, when the `checked` variable changes for example. this._emitChangeEvent(); - } else if (!this.disabled && this._clickAction === 'noop') { + } else if (!this.disabled && clickAction === 'noop') { // Reset native input when clicked with noop. The native checkbox becomes checked after // click, reset it to be align with `checked` value of `mat-checkbox`. this._inputElement.nativeElement.checked = this.checked; diff --git a/src/material/schematics/ng-update/data/constructor-checks.ts b/src/material/schematics/ng-update/data/constructor-checks.ts index 82151625c573..933cfcb3e8e4 100644 --- a/src/material/schematics/ng-update/data/constructor-checks.ts +++ b/src/material/schematics/ng-update/data/constructor-checks.ts @@ -22,6 +22,10 @@ export const constructorChecks: VersionChanges = { { pr: 'https://github.com/angular/components/pull/19379', changes: ['MatSlider'] + }, + { + pr: 'https://github.com/angular/components/pull/19381', + changes: ['MatCheckbox'] } ], [TargetVersion.V9]: [ diff --git a/tools/public_api_guard/material/checkbox.d.ts b/tools/public_api_guard/material/checkbox.d.ts index f283a451a9a2..3a06fe12a75b 100644 --- a/tools/public_api_guard/material/checkbox.d.ts +++ b/tools/public_api_guard/material/checkbox.d.ts @@ -3,8 +3,6 @@ export declare class _MatCheckboxRequiredValidatorModule { static ɵmod: i0.ɵɵNgModuleDefWithMeta<_MatCheckboxRequiredValidatorModule, [typeof i1.MatCheckboxRequiredValidator], never, [typeof i1.MatCheckboxRequiredValidator]>; } -export declare const MAT_CHECKBOX_CLICK_ACTION: InjectionToken; - export declare const MAT_CHECKBOX_CONTROL_VALUE_ACCESSOR: any; export declare const MAT_CHECKBOX_DEFAULT_OPTIONS: InjectionToken; @@ -35,8 +33,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro set required(value: boolean); ripple: MatRipple; value: string; - constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string, - _clickAction: MatCheckboxClickAction, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined); + constructor(elementRef: ElementRef, _changeDetectorRef: ChangeDetectorRef, _focusMonitor: FocusMonitor, _ngZone: NgZone, tabIndex: string, _animationMode?: string | undefined, _options?: MatCheckboxDefaultOptions | undefined); _getAriaChecked(): 'true' | 'false' | 'mixed'; _isRippleDisabled(): any; _onInputClick(event: Event): void; @@ -56,7 +53,7 @@ export declare class MatCheckbox extends _MatCheckboxMixinBase implements Contro static ngAcceptInputType_indeterminate: BooleanInput; static ngAcceptInputType_required: BooleanInput; static ɵcmp: i0.ɵɵComponentDefWithMeta; - static ɵfac: i0.ɵɵFactoryDef; + static ɵfac: i0.ɵɵFactoryDef; } export declare class MatCheckboxChange {