diff --git a/goldens/material/tabs/index.api.md b/goldens/material/tabs/index.api.md index 19ff1d0b4786..fc0fe2787563 100644 --- a/goldens/material/tabs/index.api.md +++ b/goldens/material/tabs/index.api.md @@ -446,9 +446,7 @@ export class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy, // @public export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit, AfterViewInit { constructor(); - // (undocumented) - get animationDuration(): string; - set animationDuration(value: string | number); + animationDuration: string; get backgroundColor(): ThemePalette; set backgroundColor(value: ThemePalette); color: ThemePalette; @@ -472,6 +470,8 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit // (undocumented) _nextPaginator: ElementRef; // (undocumented) + static ngAcceptInputType_animationDuration: string | number; + // (undocumented) static ngAcceptInputType_disableRipple: unknown; // (undocumented) static ngAcceptInputType_fitInkBarToContent: unknown; diff --git a/src/material/tabs/paginated-tab-header.ts b/src/material/tabs/paginated-tab-header.ts index 4614d59fbe78..6e6d3bf69c28 100644 --- a/src/material/tabs/paginated-tab-header.ts +++ b/src/material/tabs/paginated-tab-header.ts @@ -63,6 +63,19 @@ const HEADER_SCROLL_INTERVAL = 100; /** Item inside a paginated tab header. */ export type MatPaginatedTabHeaderItem = FocusableOption & {elementRef: ElementRef}; +/** Normalizes an animation duration value. */ +export function normalizeDuration(value: string | number): string { + const stringValue = value + ''; + + if (/^[0-9]+(?:\.[0-9]+)?$/.test(stringValue)) { + return `${value}ms`; + } else if (/^[0-9]+(?:\.[0-9]+)?(?:ms|s)$/.test(stringValue)) { + return stringValue; + } else { + return ''; + } +} + /** * Base class for a tab header that supported pagination. * @docs-private diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts index e86509146ad4..e5cc623effc7 100644 --- a/src/material/tabs/tab-group.ts +++ b/src/material/tabs/tab-group.ts @@ -39,6 +39,7 @@ import {MatTabBody} from './tab-body'; import {CdkPortalOutlet} from '@angular/cdk/portal'; import {MatTabLabelWrapper} from './tab-label-wrapper'; import {Platform} from '@angular/cdk/platform'; +import {normalizeDuration} from './paginated-tab-header'; /** @docs-private */ export interface MatTabGroupBaseHeader { @@ -606,9 +607,3 @@ export class MatTabChangeEvent { /** Reference to the currently-selected tab. */ tab!: MatTab; } - -/** Normalizes an animation duration value. */ -function normalizeDuration(value: string | number): string { - const stringValue = value + ''; - return /^\d+$/.test(stringValue) ? value + 'ms' : stringValue; -} diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts index 33ead35c9f85..44e2c0b90e9e 100644 --- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts +++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts @@ -41,7 +41,11 @@ import {BehaviorSubject, Subject} from 'rxjs'; import {startWith, takeUntil} from 'rxjs/operators'; import {ENTER, SPACE} from '@angular/cdk/keycodes'; import {MAT_TABS_CONFIG, MatTabsConfig} from '../tab-config'; -import {MatPaginatedTabHeader, MatPaginatedTabHeaderItem} from '../paginated-tab-header'; +import { + MatPaginatedTabHeader, + MatPaginatedTabHeaderItem, + normalizeDuration, +} from '../paginated-tab-header'; import {CdkObserveContent} from '@angular/cdk/observers'; import {_CdkPrivateStyleLoader} from '@angular/cdk/private'; @@ -89,17 +93,8 @@ export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit @Input({alias: 'mat-stretch-tabs', transform: booleanAttribute}) stretchTabs: boolean = true; - @Input() - get animationDuration(): string { - return this._animationDuration; - } - - set animationDuration(value: string | number) { - const stringValue = value + ''; - this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue; - } - - private _animationDuration!: string; + /** Duration for the header animation. Will be normalized to milliseconds if no units are set. */ + @Input({transform: normalizeDuration}) animationDuration: string = ''; /** Query list of all tab links of the tab navigation. */ @ContentChildren(forwardRef(() => MatTabLink), {descendants: true})