From 803d8309a48b0af585a45be2d96762cdbe98f448 Mon Sep 17 00:00:00 2001 From: Kristiyan Kostadinov Date: Thu, 2 Nov 2023 17:29:59 +0100 Subject: [PATCH] refactor(material/progress-bar): switch to input transforms Reworks the progress bar to use input transforms instead of mixins. --- src/material/progress-bar/progress-bar.ts | 49 +++++++++---------- .../public_api_guard/material/progress-bar.md | 20 +++++--- 2 files changed, 36 insertions(+), 33 deletions(-) diff --git a/src/material/progress-bar/progress-bar.ts b/src/material/progress-bar/progress-bar.ts index 5e2345807194..33f6c563cc5f 100644 --- 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) {} - }, - 'primary', -); - export type ProgressBarMode = 'determinate' | 'indeterminate' | 'buffer' | 'query'; @Component({ @@ -101,22 +92,19 @@ 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, + readonly _elementRef: ElementRef, private _ngZone: NgZone, private _changeDetectorRef: ChangeDetectorRef, @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string, @@ -124,12 +112,11 @@ export class MatProgressBar @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 index 1487851aff50..9ebf1bbe1c4c 100644 --- 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,13 +25,17 @@ export const MAT_PROGRESS_BAR_LOCATION: InjectionToken; export function MAT_PROGRESS_BAR_LOCATION_FACTORY(): MatProgressBarLocation; // @public (undocumented) -export class MatProgressBar extends _MatProgressBarBase implements AfterViewInit, OnDestroy, CanColor { - constructor(elementRef: ElementRef, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, _animationMode?: string | undefined, defaults?: MatProgressBarDefaultOptions); +export class MatProgressBar implements AfterViewInit, OnDestroy { + constructor(_elementRef: ElementRef, _ngZone: NgZone, _changeDetectorRef: ChangeDetectorRef, _animationMode?: string | undefined, defaults?: MatProgressBarDefaultOptions); readonly animationEnd: EventEmitter; // (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; _getBufferBarFlexBasis(): string; _getPrimaryBarTransform(): string; _isIndeterminate(): boolean; @@ -43,11 +43,15 @@ export class MatProgressBar extends _MatProgressBarBase implements AfterViewInit 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; // (undocumented)