refactor(material-experimental/mdc-progress-bar): update mdc-progress-bar to be compatible with API changes in MDC (#21599)

* refactor(material-experimental/mdc-progress-bar): update
mdc-progress-bar to be compatible with API changes in MDC

PiperOrigin-RevId: 351815658

* fixup! refactor(material-experimental/mdc-progress-bar): update mdc-progress-bar to be compatible with API changes in MDC

Co-authored-by: Angular Material Team <[email protected]>

Author: mmalerba

package.json

@@ -63,7 +63,7 @@
     "@types/youtube": "^0.0.40",
     "@webcomponents/custom-elements": "^1.1.0",
     "core-js-bundle": "^3.8.2",
-    "material-components-web": "10.0.0-canary.968735356.0",
+    "material-components-web": "10.0.0-canary.b2faa116a.0",
     "rxjs": "^6.5.3",
     "rxjs-tslint-rules": "^4.33.1",
     "systemjs": "0.19.43",

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

@@ -199,7 +199,14 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
       const direction = this._dir ? this._dir.value : 'ltr';
       const mode = this.mode;
 
-      foundation.setReverse(direction === 'rtl' ? mode !== 'query' : mode === 'query');
+      const reverse = direction === 'rtl' ? mode !== 'query' : mode === 'query';
+      const progressDirection = reverse ? 'rtl' : 'ltr';
+      const currentDirection = this._rootElement.getAttribute('dir');
+      if (currentDirection !== progressDirection) {
+        this._rootElement.setAttribute('dir', progressDirection);
+        foundation.restartAnimation();
+      }
+
       foundation.setDeterminate(mode !== 'indeterminate' && mode !== 'query');
 
       // Divide by 100 because MDC deals with values between 0 and 1.