Project import generated by Copybara.

PiperOrigin-RevId: 352859006

Author: Angular Material Team

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

@@ -6,38 +6,26 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {
-  ChangeDetectionStrategy,
-  Component,
-  ViewEncapsulation,
-  ElementRef,
-  NgZone,
-  Optional,
-  Inject,
-  Input,
-  Output,
-  EventEmitter,
-  AfterViewInit,
-  OnDestroy,
-} from '@angular/core';
+import {Directionality} from '@angular/cdk/bidi';
+import {AfterViewInit, ChangeDetectionStrategy, Component, ElementRef, EventEmitter, Inject, Input, NgZone, OnDestroy, Optional, Output, ViewEncapsulation,} from '@angular/core';
 import {CanColor, CanColorCtor, mixinColor} from '@angular/material-experimental/mdc-core';
-import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
 import {ProgressAnimationEnd} from '@angular/material/progress-bar';
-import {MDCLinearProgressAdapter, MDCLinearProgressFoundation} from '@material/linear-progress';
-import {Subscription, fromEvent, Observable} from 'rxjs';
+import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
+import {MDCLinearProgressAdapter, MDCLinearProgressFoundation, WithMDCResizeObserver} from '@material/linear-progress';
+import {fromEvent, Observable, Subscription} from 'rxjs';
 import {filter} from 'rxjs/operators';
-import {Directionality} from '@angular/cdk/bidi';
+
 
 // Boilerplate for applying mixins to MatProgressBar.
 /** @docs-private */
 class MatProgressBarBase {
-  constructor(public _elementRef: ElementRef) { }
+  constructor(public _elementRef: ElementRef) {}
 }
 
-const _MatProgressBarMixinBase: CanColorCtor & typeof MatProgressBarBase =
+const _MatProgressBarMixinBase: CanColorCtor&typeof MatProgressBarBase =
     mixinColor(MatProgressBarBase, 'primary');
 
-export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
+export type ProgressBarMode = 'determinate'|'indeterminate'|'buffer'|'query';
 
 @Component({
   selector: 'mat-progress-bar',
@@ -46,7 +34,8 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
     'role': 'progressbar',
     'aria-valuemin': '0',
     'aria-valuemax': '100',
-    '[attr.aria-valuenow]': '(mode === "indeterminate" || mode === "query") ? null : value',
+    '[attr.aria-valuenow]':
+        '(mode === "indeterminate" || mode === "query") ? null : value',
     '[attr.mode]': 'mode',
     'class': 'mat-mdc-progress-bar',
     '[class._mat-animation-noopable]': '_isNoopAnimation',
@@ -57,58 +46,71 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressBar extends _MatProgressBarMixinBase implements AfterViewInit, OnDestroy,
-  CanColor {
-
-  constructor(public _elementRef: ElementRef<HTMLElement>,
-              private _ngZone: NgZone,
-              @Optional() private _dir?: Directionality,
-              @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {
+export class MatProgressBar extends _MatProgressBarMixinBase implements
+    AfterViewInit, OnDestroy, CanColor {
+  constructor(
+      public _elementRef: ElementRef<HTMLElement>, private _ngZone: NgZone,
+      @Optional() private _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());
+      this._dirChangeSubscription =
+          _dir.change.subscribe(() => this._syncFoundation());
     }
   }
 
   /** Implements all of the logic of the MDC progress bar. */
-  private _foundation: MDCLinearProgressFoundation | undefined;
+  private _foundation: MDCLinearProgressFoundation|undefined;
 
   /** Adapter used by MDC to interact with the DOM. */
   private _adapter: MDCLinearProgressAdapter = {
     addClass: (className: string) => this._rootElement.classList.add(className),
     forceLayout: () => this._rootElement.offsetWidth,
     removeAttribute: (name: string) => this._rootElement.removeAttribute(name),
-    setAttribute: (name: string, value: string) => this._rootElement.setAttribute(name, value),
-    hasClass: (className: string) => this._rootElement.classList.contains(className),
-    removeClass: (className: string) => this._rootElement.classList.remove(className),
-    setPrimaryBarStyle: (styleProperty: string, value: string) => {
-      (this._primaryBar.style as any)[styleProperty] = value;
-    },
-    setBufferBarStyle: (styleProperty: string, value: string) => {
-      (this._bufferBar.style as any)[styleProperty] = value;
-    },
-    setStyle: (styleProperty: string, value: string) => {
-      (this._rootElement.style as any)[styleProperty] = value;
-    },
+    setAttribute: (name: string, value: string) =>
+        this._rootElement.setAttribute(name, value),
+    hasClass: (className: string) =>
+        this._rootElement.classList.contains(className),
+    removeClass: (className: string) =>
+        this._rootElement.classList.remove(className),
+    setPrimaryBarStyle:
+        (styleProperty: string, value: string) => {
+          (this._primaryBar.style as any)[styleProperty] = value;
+        },
+    setBufferBarStyle:
+        (styleProperty: string, value: string) => {
+          (this._bufferBar.style as any)[styleProperty] = value;
+        },
+    setStyle:
+        (styleProperty: string, value: string) => {
+          (this._rootElement.style as any)[styleProperty] = value;
+        },
     getWidth: () => this._rootElement.offsetWidth,
-    attachResizeObserver: (callback) => {
-      if ((typeof window !== 'undefined') && window.ResizeObserver) {
-        const ro = new ResizeObserver(callback);
-        ro.observe(this._rootElement);
-        return ro;
-      }
-
-      return null;
-    }
+    attachResizeObserver:
+        (callback) => {
+          if ((typeof window !== 'undefined') &&
+              (window as unknown as WithMDCResizeObserver).ResizeObserver) {
+            const RO =
+                (window as unknown as WithMDCResizeObserver).ResizeObserver;
+            const ro = new RO(callback);
+            ro.observe(this._rootElement);
+            return ro;
+          }
+
+          return null;
+        }
   };
 
   /** Flag that indicates whether NoopAnimations mode is set to true. */
   _isNoopAnimation = false;
 
   /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
   @Input()
-  get value(): number { return this._value; }
+  get value(): number {
+    return this._value;
+  }
   set value(v: number) {
     this._value = clamp(v || 0);
     this._syncFoundation();
@@ -117,7 +119,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
 
   /** Buffer value of the progress bar. Defaults to zero. */
   @Input()
-  get bufferValue(): number { return this._bufferValue || 0; }
+  get bufferValue(): number {
+    return this._bufferValue || 0;
+  }
   set bufferValue(v: number) {
     this._bufferValue = clamp(v || 0);
     this._syncFoundation();
@@ -129,9 +133,9 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
   private _bufferBar: HTMLElement;
 
   /**
-   * Event emitted when animation of the primary progress bar completes. This event will not
-   * be emitted when animations are disabled, nor will it be emitted for modes with continuous
-   * animations (indeterminate and query).
+   * Event emitted when animation of the primary progress bar completes. This
+   * event will not be emitted when animations are disabled, nor will it be
+   * emitted for modes with continuous animations (indeterminate and query).
    */
   @Output() animationEnd = new EventEmitter<ProgressAnimationEnd>();
 
@@ -144,12 +148,13 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
   /**
    * Mode of the progress bar.
    *
-   * Input must be one of these values: determinate, indeterminate, buffer, query, defaults to
-   * 'determinate'.
-   * Mirrored to mode attribute.
+   * Input must be one of these values: determinate, indeterminate, buffer,
+   * query, defaults to 'determinate'. Mirrored to mode attribute.
    */
   @Input()
-  get mode(): ProgressBarMode { return this._mode; }
+  get mode(): ProgressBarMode {
+    return this._mode;
+  }
   set mode(value: ProgressBarMode) {
     // Note that we don't technically need a getter and a setter here,
     // but we use it to match the behavior of the existing mat-progress-bar.
@@ -161,25 +166,32 @@ export class MatProgressBar extends _MatProgressBarMixinBase implements AfterVie
   ngAfterViewInit() {
     const element = this._elementRef.nativeElement;
 
-    this._rootElement = element.querySelector('.mdc-linear-progress') as HTMLElement;
-    this._primaryBar = element.querySelector('.mdc-linear-progress__primary-bar') as HTMLElement;
-    this._bufferBar = element.querySelector('.mdc-linear-progress__buffer-bar') as HTMLElement;
+    this._rootElement =
+        element.querySelector('.mdc-linear-progress') as HTMLElement;
+    this._primaryBar = element.querySelector(
+                           '.mdc-linear-progress__primary-bar') as HTMLElement;
+    this._bufferBar = element.querySelector(
+                          '.mdc-linear-progress__buffer-bar') as HTMLElement;
 
     this._foundation = new MDCLinearProgressFoundation(this._adapter);
     this._foundation.init();
     this._syncFoundation();
 
-    // Run outside angular so change detection didn't get triggered on every transition end
-    // instead only on the animation that we care about (primary value bar's transitionend)
+    // Run outside angular so change detection didn't get triggered on every
+    // transition end instead only on the animation that we care about (primary
+    // value bar's transitionend)
     this._ngZone.runOutsideAngular((() => {
       this._animationEndSubscription =
-          (fromEvent(this._primaryBar, 'transitionend') as Observable<TransitionEvent>)
-            .pipe(filter(((e: TransitionEvent) => e.target === this._primaryBar)))
-            .subscribe(() => {
-              if (this.mode === 'determinate' || this.mode === 'buffer') {
-                this._ngZone.run(() => this.animationEnd.next({value: this.value}));
-              }
-            });
+          (fromEvent(this._primaryBar, 'transitionend') as
+           Observable<TransitionEvent>)
+              .pipe(filter(
+                  ((e: TransitionEvent) => e.target === this._primaryBar)))
+              .subscribe(() => {
+                if (this.mode === 'determinate' || this.mode === 'buffer') {
+                  this._ngZone.run(
+                      () => this.animationEnd.next({value: this.value}));
+                }
+              });
     }));
   }