/** * @license * Copyright Google LLC All Rights Reserved. * * Use of this source code is governed by an MIT-style license that can be * found in the LICENSE file at https://angular.dev/license */ import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectionStrategy, Component, ContentChildren, ElementRef, Input, OnDestroy, QueryList, ViewChild, ViewEncapsulation, booleanAttribute, } from '@angular/core'; import {MatTabLabelWrapper} from './tab-label-wrapper'; import {MatInkBar} from './ink-bar'; import {MatPaginatedTabHeader} from './paginated-tab-header'; import {CdkObserveContent} from '@angular/cdk/observers'; import {MatRipple} from '@angular/material/core'; /** * The header of the tab group which displays a list of all the tabs in the tab group. Includes * an ink bar that follows the currently selected tab. When the tabs list's width exceeds the * width of the header container, then arrows will be displayed to allow the user to scroll * left and right across the header. * @docs-private */ @Component({ selector: 'mat-tab-header', templateUrl: 'tab-header.html', styleUrl: 'tab-header.css', encapsulation: ViewEncapsulation.None, // tslint:disable-next-line:validate-decorators changeDetection: ChangeDetectionStrategy.Default, host: { 'class': 'mat-mdc-tab-header', '[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls', '[class.mat-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'", }, imports: [MatRipple, CdkObserveContent], }) export class MatTabHeader extends MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy { @ContentChildren(MatTabLabelWrapper, {descendants: false}) _items: QueryList; @ViewChild('tabListContainer', {static: true}) _tabListContainer: ElementRef; @ViewChild('tabList', {static: true}) _tabList: ElementRef; @ViewChild('tabListInner', {static: true}) _tabListInner: ElementRef; @ViewChild('nextPaginator') _nextPaginator: ElementRef; @ViewChild('previousPaginator') _previousPaginator: ElementRef; _inkBar: MatInkBar; /** Aria label of the header. */ @Input('aria-label') ariaLabel: string; /** Sets the `aria-labelledby` of the header. */ @Input('aria-labelledby') ariaLabelledby: string; /** Whether the ripple effect is disabled or not. */ @Input({transform: booleanAttribute}) disableRipple: boolean = false; override ngAfterContentInit() { this._inkBar = new MatInkBar(this._items); super.ngAfterContentInit(); } protected _itemSelected(event: KeyboardEvent) { event.preventDefault(); } }