fix(material-experimental/mdc-progress-bar): don't rely on JS to chan…

…ge directionality (#22705)

On the first iteration of the MDC progress bar we had to use JS to change the direction in RTL, but a few months ago in #21650 we switched to a different API that no longer depends on it. The problem with the changes in #21650 is that they set the `dir` on the progress bar in order to flip its direction for the `query` mode.

These changes simplify the setup by relying only on CSS to determine the direction.

Fixes #22609.

src/material-experimental/mdc-progress-bar/progress-bar.scss

@@ -7,6 +7,11 @@
   // Explicitly set to `block` since the browser defaults custom elements to `inline`.
   display: block;
 
+  // Inverts the progress bar horizontally in `query` mode.
+  &[mode='query'] {
+    transform: scaleX(-1);
+  }
+
   &._mat-animation-noopable {
     .mdc-linear-progress__buffer-dots,
     .mdc-linear-progress__primary-bar,

src/material-experimental/mdc-progress-bar/progress-bar.ts

@@ -69,12 +69,15 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
 
   constructor(public _elementRef: ElementRef<HTMLElement>,
               private _ngZone: NgZone,
-              @Optional() private _dir?: Directionality,
+              @Optional() dir?: Directionality,
               @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
     super(_elementRef);
     this._isNoopAnimation = _animationMode === 'NoopAnimations';
-    if (_dir) {
-      this._dirChangeSubscription = _dir.change.subscribe(() => this._syncFoundation());
+    if (dir) {
+      this._dirChangeSubscription = dir.change.subscribe(() => {
+        this._syncFoundation();
+        this._foundation?.restartAnimation();
+      });
     }
   }
 
@@ -218,17 +221,7 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
     const foundation = this._foundation;
 
     if (foundation) {
-      const direction = this._dir ? this._dir.value : 'ltr';
       const mode = this.mode;
-
-      const reverse = direction === 'rtl' ? mode !== 'query' : mode === 'query';
-      const progressDirection = reverse ? 'rtl' : 'ltr';
-      const currentDirection = this._elementRef.nativeElement.getAttribute('dir');
-      if (currentDirection !== progressDirection) {
-        this._elementRef.nativeElement.setAttribute('dir', progressDirection);
-        foundation.restartAnimation();
-      }
-
       foundation.setDeterminate(mode !== 'indeterminate' && mode !== 'query');
 
       // Divide by 100 because MDC deals with values between 0 and 1.