From 924d080c005ad143a57425b0afbe447b40a16034 Mon Sep 17 00:00:00 2001 From: crisbeto Date: Sat, 16 May 2020 16:18:42 +0200 Subject: [PATCH] refactor(slider): change deprecated APIs for version 10 Changes the APIs that were marked as deprecated for v10 in the slider. BREAKING CHANGES: * The `_ngZone` and `_document` parameters in the `MatSlider` constructor are now required. --- .../ng-update/data/constructor-checks.ts | 4 ++ src/material/slider/slider.ts | 65 ++++++------------- tools/public_api_guard/material/slider.d.ts | 7 +- 3 files changed, 28 insertions(+), 48 deletions(-) diff --git a/src/material/schematics/ng-update/data/constructor-checks.ts b/src/material/schematics/ng-update/data/constructor-checks.ts index 3fb9b726166a..82151625c573 100644 --- a/src/material/schematics/ng-update/data/constructor-checks.ts +++ b/src/material/schematics/ng-update/data/constructor-checks.ts @@ -18,6 +18,10 @@ export const constructorChecks: VersionChanges = { { pr: 'https://github.com/angular/components/pull/19307', changes: ['MatSlideToggle'] + }, + { + pr: 'https://github.com/angular/components/pull/19379', + changes: ['MatSlider'] } ], [TargetVersion.V9]: [ diff --git a/src/material/slider/slider.ts b/src/material/slider/slider.ts index f28623327530..cd53b369c6a3 100644 --- a/src/material/slider/slider.ts +++ b/src/material/slider/slider.ts @@ -490,26 +490,21 @@ export class MatSlider extends _MatSliderMixinBase private _lastPointerEvent: MouseEvent | TouchEvent | null; /** Used to subscribe to global move and end events */ - protected _document?: Document; + protected _document: Document; constructor(elementRef: ElementRef, private _focusMonitor: FocusMonitor, private _changeDetectorRef: ChangeDetectorRef, @Optional() private _dir: Directionality, @Attribute('tabindex') tabIndex: string, - // @breaking-change 8.0.0 `_animationMode` parameter to be made required. - @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string, - // @breaking-change 9.0.0 `_ngZone` parameter to be made required. - private _ngZone?: NgZone, - /** @breaking-change 11.0.0 make document required */ - @Optional() @Inject(DOCUMENT) document?: any) { + private _ngZone: NgZone, + @Inject(DOCUMENT) _document: any, + @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) { super(elementRef); - - this._document = document; - + this._document = _document; this.tabIndex = parseInt(tabIndex) || 0; - this._runOutsizeZone(() => { + _ngZone.runOutsideAngular(() => { const element = elementRef.nativeElement; element.addEventListener('mousedown', this._pointerDown, activeEventOptions); element.addEventListener('touchstart', this._pointerDown, activeEventOptions); @@ -629,7 +624,7 @@ export class MatSlider extends _MatSliderMixinBase return; } - this._runInsideZone(() => { + this._ngZone.run(() => { const oldValue = this.value; const pointerPosition = getPointerPositionOnPage(event); this._isSliding = true; @@ -700,7 +695,7 @@ export class MatSlider extends _MatSliderMixinBase /** Use defaultView of injected document if available or fallback to global window reference */ private _getWindow(): Window { - return this._document?.defaultView || window; + return this._document.defaultView || window; } /** @@ -712,17 +707,14 @@ export class MatSlider extends _MatSliderMixinBase // Note that we bind the events to the `document`, because it allows us to capture // drag cancel events where the user's pointer is outside the browser window. const document = this._document; - - if (typeof document !== 'undefined' && document) { - const isTouch = isTouchEvent(triggerEvent); - const moveEventName = isTouch ? 'touchmove' : 'mousemove'; - const endEventName = isTouch ? 'touchend' : 'mouseup'; - document.addEventListener(moveEventName, this._pointerMove, activeEventOptions); - document.addEventListener(endEventName, this._pointerUp, activeEventOptions); - - if (isTouch) { - document.addEventListener('touchcancel', this._pointerUp, activeEventOptions); - } + const isTouch = isTouchEvent(triggerEvent); + const moveEventName = isTouch ? 'touchmove' : 'mousemove'; + const endEventName = isTouch ? 'touchend' : 'mouseup'; + document.addEventListener(moveEventName, this._pointerMove, activeEventOptions); + document.addEventListener(endEventName, this._pointerUp, activeEventOptions); + + if (isTouch) { + document.addEventListener('touchcancel', this._pointerUp, activeEventOptions); } const window = this._getWindow(); @@ -735,14 +727,11 @@ export class MatSlider extends _MatSliderMixinBase /** Removes any global event listeners that we may have added. */ private _removeGlobalEvents() { const document = this._document; - - if (typeof document !== 'undefined' && document) { - document.removeEventListener('mousemove', this._pointerMove, activeEventOptions); - document.removeEventListener('mouseup', this._pointerUp, activeEventOptions); - document.removeEventListener('touchmove', this._pointerMove, activeEventOptions); - document.removeEventListener('touchend', this._pointerUp, activeEventOptions); - document.removeEventListener('touchcancel', this._pointerUp, activeEventOptions); - } + document.removeEventListener('mousemove', this._pointerMove, activeEventOptions); + document.removeEventListener('mouseup', this._pointerUp, activeEventOptions); + document.removeEventListener('touchmove', this._pointerMove, activeEventOptions); + document.removeEventListener('touchend', this._pointerUp, activeEventOptions); + document.removeEventListener('touchcancel', this._pointerUp, activeEventOptions); const window = this._getWindow(); @@ -869,18 +858,6 @@ export class MatSlider extends _MatSliderMixinBase this._elementRef.nativeElement.blur(); } - /** Runs a callback inside of the NgZone, if possible. */ - private _runInsideZone(fn: () => any) { - // @breaking-change 9.0.0 Remove this function once `_ngZone` is a required parameter. - this._ngZone ? this._ngZone.run(fn) : fn(); - } - - /** Runs a callback outside of the NgZone, if possible. */ - private _runOutsizeZone(fn: () => any) { - // @breaking-change 9.0.0 Remove this function once `_ngZone` is a required parameter. - this._ngZone ? this._ngZone.runOutsideAngular(fn) : fn(); - } - /** * Sets the model value. Implemented as part of ControlValueAccessor. * @param value diff --git a/tools/public_api_guard/material/slider.d.ts b/tools/public_api_guard/material/slider.d.ts index 3041687b078d..00997977aced 100644 --- a/tools/public_api_guard/material/slider.d.ts +++ b/tools/public_api_guard/material/slider.d.ts @@ -2,7 +2,7 @@ export declare const MAT_SLIDER_VALUE_ACCESSOR: any; export declare class MatSlider extends _MatSliderMixinBase implements ControlValueAccessor, OnDestroy, CanDisable, CanColor, OnInit, HasTabIndex { _animationMode?: string | undefined; - protected _document?: Document; + protected _document: Document; get _invertAxis(): boolean; _isActive: boolean; get _isMinValue(): boolean; @@ -46,8 +46,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal readonly valueChange: EventEmitter; get vertical(): boolean; set vertical(value: boolean); - constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, tabIndex: string, _animationMode?: string | undefined, _ngZone?: NgZone | undefined, - document?: any); + constructor(elementRef: ElementRef, _focusMonitor: FocusMonitor, _changeDetectorRef: ChangeDetectorRef, _dir: Directionality, tabIndex: string, _ngZone: NgZone, _document: any, _animationMode?: string | undefined); _onBlur(): void; _onFocus(): void; _onKeydown(event: KeyboardEvent): void; @@ -72,7 +71,7 @@ export declare class MatSlider extends _MatSliderMixinBase implements ControlVal static ngAcceptInputType_value: NumberInput; static ngAcceptInputType_vertical: BooleanInput; static ɵcmp: i0.ɵɵComponentDefWithMeta; - static ɵfac: i0.ɵɵFactoryDef; + static ɵfac: i0.ɵɵFactoryDef; } export declare class MatSliderChange {