From 53295ccc670488af07be952bb267de523b16c847 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 11 Mar 2021 10:51:58 -0800 Subject: [PATCH 1/2] feat(material-experimental/mdc-slider): add support for rtl/ltr toggle --- src/material-experimental/mdc-slider/slider.ts | 13 +++++++++++-- 1 file changed, 11 insertions(+), 2 deletions(-) diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts index 1b9b45c4fd44..d508c059b969 100644 --- a/src/material-experimental/mdc-slider/slider.ts +++ b/src/material-experimental/mdc-slider/slider.ts @@ -6,6 +6,7 @@ * found in the LICENSE file at https://angular.io/license */ +import {Directionality} from '@angular/cdk/bidi'; import { BooleanInput, coerceBooleanProperty, @@ -29,6 +30,7 @@ import { NgZone, OnDestroy, OnInit, + Optional, Output, QueryList, ViewChild, @@ -586,10 +588,12 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnD readonly _cdr: ChangeDetectorRef, readonly _elementRef: ElementRef, private readonly _platform: Platform, + @Optional() private _dir: Directionality, @Inject(DOCUMENT) document: any) { super(_elementRef); this._document = document; this._window = this._document.defaultView || window; + this._dir.change.subscribe(() => this._reinitialize()); } ngAfterViewInit() { @@ -622,6 +626,12 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnD if (this._platform.isBrowser) { this._foundation.destroy(); } + this._dir.change.unsubscribe(); + } + + /** Returns true if the language direction for this slider element is right to left. */ + _isRTL() { + return this._dir && this._dir.value === 'rtl'; } /** @@ -777,8 +787,7 @@ class SliderAdapter implements MDCSliderAdapter { return this._delegate._elementRef.nativeElement.getBoundingClientRect(); } isRTL = (): boolean => { - // TODO(wagnermaciel): Actually implementing this. - return false; + return this._delegate._isRTL(); } setThumbStyleProperty = (propertyName: string, value: string, thumbPosition: Thumb): void => { this._delegate._getThumbElement(thumbPosition).style.setProperty(propertyName, value); From e29cf6e2cc2bb54a2427aa8445b4495dc9d3a3e7 Mon Sep 17 00:00:00 2001 From: wagnermaciel Date: Thu, 11 Mar 2021 11:47:34 -0800 Subject: [PATCH 2/2] fixup! feat(material-experimental/mdc-slider): add support for rtl/ltr toggle --- src/material-experimental/mdc-slider/slider.ts | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/material-experimental/mdc-slider/slider.ts b/src/material-experimental/mdc-slider/slider.ts index d508c059b969..0568077ee4d5 100644 --- a/src/material-experimental/mdc-slider/slider.ts +++ b/src/material-experimental/mdc-slider/slider.ts @@ -48,6 +48,7 @@ import { } from '@angular/material/core'; import {SpecificEventListener, EventType} from '@material/base'; import {MDCSliderAdapter, MDCSliderFoundation, Thumb, TickMark} from '@material/slider'; +import {Subscription} from 'rxjs'; /** Represents a drag event emitted by the MatSlider component. */ export interface MatSliderDragEvent { @@ -584,6 +585,9 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnD /** The display value of the end thumb. */ _endValueIndicatorText: string; + /** Subscription to changes to the directionality (LTR / RTL) context for the application. */ + private _dirChangeSubscription: Subscription; + constructor( readonly _cdr: ChangeDetectorRef, readonly _elementRef: ElementRef, @@ -593,7 +597,7 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnD super(_elementRef); this._document = document; this._window = this._document.defaultView || window; - this._dir.change.subscribe(() => this._reinitialize()); + this._dirChangeSubscription = this._dir.change.subscribe(() => this._reinitialize()); } ngAfterViewInit() { @@ -626,7 +630,7 @@ export class MatSlider extends _MatSliderMixinBase implements AfterViewInit, OnD if (this._platform.isBrowser) { this._foundation.destroy(); } - this._dir.change.unsubscribe(); + this._dirChangeSubscription.unsubscribe(); } /** Returns true if the language direction for this slider element is right to left. */