diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts index 09631cf0e146..fe54d7aa2a91 100644 --- a/src/material/tabs/tab-group.ts +++ b/src/material/tabs/tab-group.ts @@ -52,6 +52,9 @@ export interface MatTabGroupBaseHeader { /** Possible positions for the tab header. */ export type MatTabHeaderPosition = 'above' | 'below'; +/** Boolean constant that determines whether the tab group supports the `backgroundColor` input */ +const ENABLE_BACKGROUND_INPUT = true; + /** * Material design tab-group component. Supports basic tab pairs (label + content) and includes * animated ink-bar, keyboard navigation, and screen reader. @@ -201,13 +204,21 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes @Input({transform: booleanAttribute}) preserveContent: boolean = false; - /** Background color of the tab group. */ + /** + * Background color of the tab group. + * @deprecated The background color should be customized through Sass theming APIs. + * @breaking-change 20.0.0 Remove this input + */ @Input() get backgroundColor(): ThemePalette { return this._backgroundColor; } set backgroundColor(value: ThemePalette) { + if (!ENABLE_BACKGROUND_INPUT) { + throw new Error(`mat-tab-group background color must be set through the Sass theming API`); + } + const classList: DOMTokenList = this._elementRef.nativeElement.classList; classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`); diff --git a/tools/public_api_guard/material/tabs.md b/tools/public_api_guard/material/tabs.md index 4fa4fac19e3e..ff73c311f111 100644 --- a/tools/public_api_guard/material/tabs.md +++ b/tools/public_api_guard/material/tabs.md @@ -257,6 +257,7 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes set animationDuration(value: string | number); // (undocumented) _animationMode?: string | undefined; + // @deprecated get backgroundColor(): ThemePalette; set backgroundColor(value: ThemePalette); color: ThemePalette;