refactor(material/progress-bar): switch to input transforms

Reworks the progress bar to use input transforms instead of mixins.
angular · Nov 6, 2023 · b27ec4b · b27ec4b
1 parent 1e9e4a9
commit b27ec4b
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 33 deletions.
diff --git a/src/material/progress-bar/progress-bar.ts b/src/material/progress-bar/progress-bar.ts
@@ -22,11 +22,11 @@ import {
   ChangeDetectorRef,
   InjectionToken,
   inject,
+  numberAttribute,
 } from '@angular/core';
 import {DOCUMENT} from '@angular/common';
-import {CanColor, mixinColor, ThemePalette} from '@angular/material/core';
+import {ThemePalette} from '@angular/material/core';
 import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
-import {coerceNumberProperty, NumberInput} from '@angular/cdk/coercion';
 
 /** Last animation end data. */
 export interface ProgressAnimationEnd {
@@ -77,15 +77,6 @@ export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation {
   };
 }
 
-// Boilerplate for applying mixins to MatProgressBar.
-/** @docs-private */
-const _MatProgressBarBase = mixinColor(
-  class {
-    constructor(public _elementRef: ElementRef<HTMLElement>) {}
-  },
-  'primary',
-);
-
 export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query';
 
 @Component({
@@ -101,35 +92,31 @@ export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'quer
     '[attr.aria-valuenow]': '_isIndeterminate() ? null : value',
     '[attr.mode]': 'mode',
     'class': 'mat-mdc-progress-bar mdc-linear-progress',
+    '[class]': '"mat-" + color',
     '[class._mat-animation-noopable]': '_isNoopAnimation',
     '[class.mdc-linear-progress--animation-ready]': '!_isNoopAnimation',
     '[class.mdc-linear-progress--indeterminate]': '_isIndeterminate()',
   },
-  inputs: ['color'],
   templateUrl: 'progress-bar.html',
   styleUrls: ['progress-bar.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
 })
-export class MatProgressBar
-  extends _MatProgressBarBase
-  implements AfterViewInit, OnDestroy, CanColor
-{
+export class MatProgressBar implements AfterViewInit, OnDestroy {
   constructor(
-    elementRef: ElementRef<HTMLElement>,
+    readonly _elementRef: ElementRef<HTMLElement>,
     private _ngZone: NgZone,
     private _changeDetectorRef: ChangeDetectorRef,
     @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,
     @Optional()
     @Inject(MAT_PROGRESS_BAR_DEFAULT_OPTIONS)
     defaults?: MatProgressBarDefaultOptions,
   ) {
-    super(elementRef);
     this._isNoopAnimation = _animationMode === 'NoopAnimations';
 
     if (defaults) {
       if (defaults.color) {
-        this.color = this.defaultColor = defaults.color;
+        this.color = this._defaultColor = defaults.color;
       }
 
       this.mode = defaults.mode || this.mode;
@@ -139,24 +126,36 @@ export class MatProgressBar
   /** Flag that indicates whether NoopAnimations mode is set to true. */
   _isNoopAnimation = false;
 
-  /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
+  // TODO: should be typed as `ThemePalette` but internal apps pass in arbitrary strings.
+  /** Theme palette color of the progress bar. */
   @Input()
+  get color() {
+    return this._color || this._defaultColor;
+  }
+  set color(value: string | null | undefined) {
+    this._color = value;
+  }
+  private _color: string | null | undefined;
+  private _defaultColor: ThemePalette = 'primary';
+
+  /** Value of the progress bar. Defaults to zero. Mirrored to aria-valuenow. */
+  @Input({transform: numberAttribute})
   get value(): number {
     return this._value;
   }
-  set value(v: NumberInput) {
-    this._value = clamp(coerceNumberProperty(v));
+  set value(v: number) {
+    this._value = clamp(v || 0);
     this._changeDetectorRef.markForCheck();
   }
   private _value = 0;
 
   /** Buffer value of the progress bar. Defaults to zero. */
-  @Input()
+  @Input({transform: numberAttribute})
   get bufferValue(): number {
     return this._bufferValue || 0;
   }
-  set bufferValue(v: NumberInput) {
-    this._bufferValue = clamp(coerceNumberProperty(v));
+  set bufferValue(v: number) {
+    this._bufferValue = clamp(v || 0);
     this._changeDetectorRef.markForCheck();
   }
   private _bufferValue = 0;

diff --git a/tools/public_api_guard/material/progress-bar.md b/tools/public_api_guard/material/progress-bar.md
@@ -4,18 +4,14 @@
 
 ```ts
 
-import { _AbstractConstructor } from '@angular/material/core';
 import { AfterViewInit } from '@angular/core';
-import { CanColor } from '@angular/material/core';
 import { ChangeDetectorRef } from '@angular/core';
-import { _Constructor } from '@angular/material/core';
 import { ElementRef } from '@angular/core';
 import { EventEmitter } from '@angular/core';
 import * as i0 from '@angular/core';
 import * as i2 from '@angular/material/core';
 import { InjectionToken } from '@angular/core';
 import { NgZone } from '@angular/core';
-import { NumberInput } from '@angular/cdk/coercion';
 import { OnDestroy } from '@angular/core';
 import { ThemePalette } from '@angular/material/core';
 
@@ -29,25 +25,33 @@ export const MAT_PROGRESS_BAR_LOCATION: InjectionToken<MatProgressBarLocation>;
 export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation;
 
 // @public (undocumented)
-export class MatProgressBar extends _MatProgressBarBase implements AfterViewInit, OnDestroy, CanColor {
-    constructor(elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, _animationMode?: string | undefined, defaults?: MatProgressBarDefaultOptions);
+export class MatProgressBar implements AfterViewInit, OnDestroy {
+    constructor(_elementRef: ElementRef<HTMLElement>, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, _animationMode?: string | undefined, defaults?: MatProgressBarDefaultOptions);
     readonly animationEnd: EventEmitter<ProgressAnimationEnd>;
     // (undocumented)
     _animationMode?: string | undefined;
     get bufferValue(): number;
-    set bufferValue(v: NumberInput);
+    set bufferValue(v: number);
+    get color(): string | null | undefined;
+    set color(value: string | null | undefined);
+    // (undocumented)
+    readonly _elementRef: ElementRef<HTMLElement>;
     _getBufferBarFlexBasis(): string;
     _getPrimaryBarTransform(): string;
     _isIndeterminate(): boolean;
     _isNoopAnimation: boolean;
     get mode(): ProgressBarMode;
     set mode(value: ProgressBarMode);
     // (undocumented)
+    static ngAcceptInputType_bufferValue: unknown;
+    // (undocumented)
+    static ngAcceptInputType_value: unknown;
+    // (undocumented)
     ngAfterViewInit(): void;
     // (undocumented)
     ngOnDestroy(): void;
     get value(): number;
-    set value(v: NumberInput);
+    set value(v: number);
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatProgressBar, "mat-progress-bar", ["matProgressBar"], { "color": { "alias": "color"; "required": false; }; "value": { "alias": "value"; "required": false; }; "bufferValue": { "alias": "bufferValue"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; }, { "animationEnd": "animationEnd"; }, never, never, false, never>;
     // (undocumented)