UNPKG

@angular/material

Version:

Angular Material

github.com/angular/components

angular/components

1 lines • 169 kB
1
{"version":3,"file":"tabs.mjs","sources":["../../../../../../src/material/tabs/tabs-animations.ts","../../../../../../src/material/tabs/tab-body.ts","../../../../../../src/material/tabs/tab-body.html","../../../../../../src/material/tabs/tab-content.ts","../../../../../../src/material/tabs/tab-label.ts","../../../../../../src/material/tabs/ink-bar.ts","../../../../../../src/material/tabs/tab-label-wrapper.ts","../../../../../../src/material/tabs/tab.ts","../../../../../../src/material/tabs/tab.html","../../../../../../src/material/tabs/paginated-tab-header.ts","../../../../../../src/material/tabs/tab-header.ts","../../../../../../src/material/tabs/tab-header.html","../../../../../../src/material/tabs/tab-config.ts","../../../../../../src/material/tabs/tab-group.ts","../../../../../../src/material/tabs/tab-group.html","../../../../../../src/material/tabs/tab-nav-bar/tab-nav-bar.ts","../../../../../../src/material/tabs/tab-nav-bar/tab-nav-bar.html","../../../../../../src/material/tabs/tab-nav-bar/tab-link.html","../../../../../../src/material/tabs/module.ts","../../../../../../src/material/tabs/public-api.ts","../../../../../../src/material/tabs/index.ts","../../../../../../src/material/tabs/tabs_public_index.ts"],"sourcesContent":["/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\nimport {\n animate,\n state,\n style,\n transition,\n trigger,\n AnimationTriggerMetadata,\n} from '@angular/animations';\n\n/**\n * Animations used by the Material tabs.\n * @docs-private\n */\nexport const matTabsAnimations: {\n readonly translateTab: AnimationTriggerMetadata;\n} = {\n /** Animation translates a tab along the X axis. */\n translateTab: trigger('translateTab', [\n // Transitions to `none` instead of 0, because some browsers might blur the content.\n state('center, void, left-origin-center, right-origin-center', style({transform: 'none'})),\n\n // If the tab is either on the left or right, we additionally add a `min-height` of 1px\n // in order to ensure that the element has a height before its state changes. This is\n // necessary because Chrome does seem to skip the transition in RTL mode if the element does\n // not have a static height and is not rendered. See related issue: #9465\n state(\n 'left',\n style({\n transform: 'translate3d(-100%, 0, 0)',\n minHeight: '1px',\n\n // Normally this is redundant since we detach the content from the DOM, but if the user\n // opted into keeping the content in the DOM, we have to hide it so it isn't focusable.\n visibility: 'hidden',\n }),\n ),\n state(\n 'right',\n style({\n transform: 'translate3d(100%, 0, 0)',\n minHeight: '1px',\n visibility: 'hidden',\n }),\n ),\n\n transition(\n '* => left, * => right, left => center, right => center',\n animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),\n ),\n transition('void => left-origin-center', [\n style({transform: 'translate3d(-100%, 0, 0)', visibility: 'hidden'}),\n animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),\n ]),\n transition('void => right-origin-center', [\n style({transform: 'translate3d(100%, 0, 0)', visibility: 'hidden'}),\n animate('{{animationDuration}} cubic-bezier(0.35, 0, 0.25, 1)'),\n ]),\n ]),\n};\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n ChangeDetectionStrategy,\n ChangeDetectorRef,\n Component,\n ComponentFactoryResolver,\n Directive,\n ElementRef,\n EventEmitter,\n forwardRef,\n Inject,\n Input,\n OnDestroy,\n OnInit,\n Optional,\n Output,\n ViewChild,\n ViewContainerRef,\n ViewEncapsulation,\n} from '@angular/core';\nimport {CdkPortalOutlet, TemplatePortal} from '@angular/cdk/portal';\nimport {Direction, Directionality} from '@angular/cdk/bidi';\nimport {DOCUMENT} from '@angular/common';\nimport {Subject, Subscription} from 'rxjs';\nimport {distinctUntilChanged, startWith} from 'rxjs/operators';\nimport {AnimationEvent} from '@angular/animations';\nimport {matTabsAnimations} from './tabs-animations';\n\n/**\n * The portal host directive for the contents of the tab.\n * @docs-private\n */\n@Directive({\n selector: '[matTabBodyHost]',\n})\nexport class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {\n /** Subscription to events for when the tab body begins centering. */\n private _centeringSub = Subscription.EMPTY;\n /** Subscription to events for when the tab body finishes leaving from center position. */\n private _leavingSub = Subscription.EMPTY;\n\n constructor(\n componentFactoryResolver: ComponentFactoryResolver,\n viewContainerRef: ViewContainerRef,\n @Inject(forwardRef(() => MatTabBody)) private _host: MatTabBody,\n @Inject(DOCUMENT) _document: any,\n ) {\n super(componentFactoryResolver, viewContainerRef, _document);\n }\n\n /** Set initial visibility or set up subscription for changing visibility. */\n override ngOnInit(): void {\n super.ngOnInit();\n\n this._centeringSub = this._host._beforeCentering\n .pipe(startWith(this._host._isCenterPosition(this._host._position)))\n .subscribe((isCentering: boolean) => {\n if (isCentering && !this.hasAttached()) {\n this.attach(this._host._content);\n }\n });\n\n this._leavingSub = this._host._afterLeavingCenter.subscribe(() => {\n if (!this._host.preserveContent) {\n this.detach();\n }\n });\n }\n\n /** Clean up centering subscription. */\n override ngOnDestroy(): void {\n super.ngOnDestroy();\n this._centeringSub.unsubscribe();\n this._leavingSub.unsubscribe();\n }\n}\n\n/**\n * These position states are used internally as animation states for the tab body. Setting the\n * position state to left, right, or center will transition the tab body from its current\n * position to its respective state. If there is not current position (void, in the case of a new\n * tab body), then there will be no transition animation to its state.\n *\n * In the case of a new tab body that should immediately be centered with an animating transition,\n * then left-origin-center or right-origin-center can be used, which will use left or right as its\n * pseudo-prior state.\n */\nexport type MatTabBodyPositionState =\n | 'left'\n | 'center'\n | 'right'\n | 'left-origin-center'\n | 'right-origin-center';\n\n/**\n * Base class with all of the `MatTabBody` functionality.\n * @docs-private\n */\n@Directive()\nexport abstract class _MatTabBodyBase implements OnInit, OnDestroy {\n /** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */\n private _positionIndex: number;\n\n /** Subscription to the directionality change observable. */\n private _dirChangeSubscription = Subscription.EMPTY;\n\n /** Tab body position state. Used by the animation trigger for the current state. */\n _position: MatTabBodyPositionState;\n\n /** Emits when an animation on the tab is complete. */\n readonly _translateTabComplete = new Subject<AnimationEvent>();\n\n /** Event emitted when the tab begins to animate towards the center as the active tab. */\n @Output() readonly _onCentering: EventEmitter<number> = new EventEmitter<number>();\n\n /** Event emitted before the centering of the tab begins. */\n @Output() readonly _beforeCentering: EventEmitter<boolean> = new EventEmitter<boolean>();\n\n /** Event emitted before the centering of the tab begins. */\n @Output() readonly _afterLeavingCenter: EventEmitter<void> = new EventEmitter<void>();\n\n /** Event emitted when the tab completes its animation towards the center. */\n @Output() readonly _onCentered: EventEmitter<void> = new EventEmitter<void>(true);\n\n /** The portal host inside of this container into which the tab body content will be loaded. */\n abstract _portalHost: CdkPortalOutlet;\n\n /** The tab body content to display. */\n @Input('content') _content: TemplatePortal;\n\n /** Position that will be used when the tab is immediately becoming visible after creation. */\n @Input() origin: number | null;\n\n // Note that the default value will always be overwritten by `MatTabBody`, but we need one\n // anyway to prevent the animations module from throwing an error if the body is used on its own.\n /** Duration for the tab's animation. */\n @Input() animationDuration: string = '500ms';\n\n /** Whether the tab's content should be kept in the DOM while it's off-screen. */\n @Input() preserveContent: boolean = false;\n\n /** The shifted index position of the tab body, where zero represents the active center tab. */\n @Input()\n set position(position: number) {\n this._positionIndex = position;\n this._computePositionAnimationState();\n }\n\n constructor(\n private _elementRef: ElementRef<HTMLElement>,\n @Optional() private _dir: Directionality,\n changeDetectorRef: ChangeDetectorRef,\n ) {\n if (_dir) {\n this._dirChangeSubscription = _dir.change.subscribe((dir: Direction) => {\n this._computePositionAnimationState(dir);\n changeDetectorRef.markForCheck();\n });\n }\n\n // Ensure that we get unique animation events, because the `.done` callback can get\n // invoked twice in some browsers. See https://github.com/angular/angular/issues/24084.\n this._translateTabComplete\n .pipe(\n distinctUntilChanged((x, y) => {\n return x.fromState === y.fromState && x.toState === y.toState;\n }),\n )\n .subscribe(event => {\n // If the transition to the center is complete, emit an event.\n if (this._isCenterPosition(event.toState) && this._isCenterPosition(this._position)) {\n this._onCentered.emit();\n }\n\n if (this._isCenterPosition(event.fromState) && !this._isCenterPosition(this._position)) {\n this._afterLeavingCenter.emit();\n }\n });\n }\n\n /**\n * After initialized, check if the content is centered and has an origin. If so, set the\n * special position states that transition the tab from the left or right before centering.\n */\n ngOnInit() {\n if (this._position == 'center' && this.origin != null) {\n this._position = this._computePositionFromOrigin(this.origin);\n }\n }\n\n ngOnDestroy() {\n this._dirChangeSubscription.unsubscribe();\n this._translateTabComplete.complete();\n }\n\n _onTranslateTabStarted(event: AnimationEvent): void {\n const isCentering = this._isCenterPosition(event.toState);\n this._beforeCentering.emit(isCentering);\n if (isCentering) {\n this._onCentering.emit(this._elementRef.nativeElement.clientHeight);\n }\n }\n\n /** The text direction of the containing app. */\n _getLayoutDirection(): Direction {\n return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';\n }\n\n /** Whether the provided position state is considered center, regardless of origin. */\n _isCenterPosition(position: MatTabBodyPositionState | string): boolean {\n return (\n position == 'center' || position == 'left-origin-center' || position == 'right-origin-center'\n );\n }\n\n /** Computes the position state that will be used for the tab-body animation trigger. */\n private _computePositionAnimationState(dir: Direction = this._getLayoutDirection()) {\n if (this._positionIndex < 0) {\n this._position = dir == 'ltr' ? 'left' : 'right';\n } else if (this._positionIndex > 0) {\n this._position = dir == 'ltr' ? 'right' : 'left';\n } else {\n this._position = 'center';\n }\n }\n\n /**\n * Computes the position state based on the specified origin position. This is used if the\n * tab is becoming visible immediately after creation.\n */\n private _computePositionFromOrigin(origin: number): MatTabBodyPositionState {\n const dir = this._getLayoutDirection();\n\n if ((dir == 'ltr' && origin <= 0) || (dir == 'rtl' && origin > 0)) {\n return 'left-origin-center';\n }\n\n return 'right-origin-center';\n }\n}\n\n/**\n * Wrapper for the contents of a tab.\n * @docs-private\n */\n@Component({\n selector: 'mat-tab-body',\n templateUrl: 'tab-body.html',\n styleUrls: ['tab-body.css'],\n encapsulation: ViewEncapsulation.None,\n // tslint:disable-next-line:validate-decorators\n changeDetection: ChangeDetectionStrategy.Default,\n animations: [matTabsAnimations.translateTab],\n host: {\n 'class': 'mat-mdc-tab-body',\n },\n})\nexport class MatTabBody extends _MatTabBodyBase {\n @ViewChild(CdkPortalOutlet) _portalHost: CdkPortalOutlet;\n\n constructor(\n elementRef: ElementRef<HTMLElement>,\n @Optional() dir: Directionality,\n changeDetectorRef: ChangeDetectorRef,\n ) {\n super(elementRef, dir, changeDetectorRef);\n }\n}\n\n/**\n * The origin state is an internally used state that is set on a new tab body indicating if it\n * began to the left or right of the prior selected index. For example, if the selected index was\n * set to 1, and a new tab is created and selected at index 2, then the tab body would have an\n * origin of right because its index was greater than the prior selected index.\n */\nexport type MatTabBodyOriginState = 'left' | 'right';\n","<div class=\"mat-mdc-tab-body-content\" #content\n [@translateTab]=\"{\n value: _position,\n params: {animationDuration: animationDuration}\n }\"\n (@translateTab.start)=\"_onTranslateTabStarted($event)\"\n (@translateTab.done)=\"_translateTabComplete.next($event)\"\n cdkScrollable>\n <ng-template matTabBodyHost></ng-template>\n</div>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, InjectionToken, TemplateRef} from '@angular/core';\n\n/**\n * Injection token that can be used to reference instances of `MatTabContent`. It serves as\n * alternative token to the actual `MatTabContent` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nexport const MAT_TAB_CONTENT = new InjectionToken<MatTabContent>('MatTabContent');\n\n/** Decorates the `ng-template` tags and reads out the template from it. */\n@Directive({\n selector: '[matTabContent]',\n providers: [{provide: MAT_TAB_CONTENT, useExisting: MatTabContent}],\n})\nexport class MatTabContent {\n constructor(/** Content for the tab. */ public template: TemplateRef<any>) {}\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n Directive,\n Inject,\n InjectionToken,\n Optional,\n TemplateRef,\n ViewContainerRef,\n} from '@angular/core';\nimport {CdkPortal} from '@angular/cdk/portal';\n\n/**\n * Injection token that can be used to reference instances of `MatTabLabel`. It serves as\n * alternative token to the actual `MatTabLabel` class which could cause unnecessary\n * retention of the class and its directive metadata.\n */\nexport const MAT_TAB_LABEL = new InjectionToken<MatTabLabel>('MatTabLabel');\n\n/**\n * Used to provide a tab label to a tab without causing a circular dependency.\n * @docs-private\n */\nexport const MAT_TAB = new InjectionToken<any>('MAT_TAB');\n\n/** Used to flag tab labels for use with the portal directive */\n@Directive({\n selector: '[mat-tab-label], [matTabLabel]',\n providers: [{provide: MAT_TAB_LABEL, useExisting: MatTabLabel}],\n})\nexport class MatTabLabel extends CdkPortal {\n constructor(\n templateRef: TemplateRef<any>,\n viewContainerRef: ViewContainerRef,\n @Inject(MAT_TAB) @Optional() public _closestTab: any,\n ) {\n super(templateRef, viewContainerRef);\n }\n}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {BooleanInput, coerceBooleanProperty} from '@angular/cdk/coercion';\nimport {ElementRef, InjectionToken, OnDestroy, OnInit, QueryList} from '@angular/core';\n\n/**\n * Item inside a tab header relative to which the ink bar can be aligned.\n * @docs-private\n */\nexport interface MatInkBarItem extends OnInit, OnDestroy {\n elementRef: ElementRef<HTMLElement>;\n activateInkBar(previousIndicatorClientRect?: ClientRect): void;\n deactivateInkBar(): void;\n fitInkBarToContent: boolean;\n}\n\n/** Class that is applied when a tab indicator is active. */\nconst ACTIVE_CLASS = 'mdc-tab-indicator--active';\n\n/** Class that is applied when the tab indicator should not transition. */\nconst NO_TRANSITION_CLASS = 'mdc-tab-indicator--no-transition';\n\n/**\n * Abstraction around the MDC tab indicator that acts as the tab header's ink bar.\n * @docs-private\n */\nexport class MatInkBar {\n /** Item to which the ink bar is aligned currently. */\n private _currentItem: MatInkBarItem | undefined;\n\n constructor(private _items: QueryList<MatInkBarItem>) {}\n\n /** Hides the ink bar. */\n hide() {\n this._items.forEach(item => item.deactivateInkBar());\n }\n\n /** Aligns the ink bar to a DOM node. */\n alignToElement(element: HTMLElement) {\n const correspondingItem = this._items.find(item => item.elementRef.nativeElement === element);\n const currentItem = this._currentItem;\n\n currentItem?.deactivateInkBar();\n\n if (correspondingItem) {\n const clientRect = currentItem?.elementRef.nativeElement.getBoundingClientRect?.();\n\n // The ink bar won't animate unless we give it the `ClientRect` of the previous item.\n correspondingItem.activateInkBar(clientRect);\n this._currentItem = correspondingItem;\n }\n }\n}\n\n/**\n * Mixin that can be used to apply the `MatInkBarItem` behavior to a class.\n * Base on MDC's `MDCSlidingTabIndicatorFoundation`:\n * https://github.com/material-components/material-components-web/blob/c0a11ef0d000a098fd0c372be8f12d6a99302855/packages/mdc-tab-indicator/sliding-foundation.ts\n * @docs-private\n */\nexport function mixinInkBarItem<\n T extends new (...args: any[]) => {elementRef: ElementRef<HTMLElement>},\n>(base: T): T & (new (...args: any[]) => MatInkBarItem) {\n return class extends base {\n constructor(...args: any[]) {\n super(...args);\n }\n\n private _inkBarElement: HTMLElement | null;\n private _inkBarContentElement: HTMLElement | null;\n private _fitToContent = false;\n\n /** Whether the ink bar should fit to the entire tab or just its content. */\n get fitInkBarToContent(): boolean {\n return this._fitToContent;\n }\n set fitInkBarToContent(v: BooleanInput) {\n const newValue = coerceBooleanProperty(v);\n\n if (this._fitToContent !== newValue) {\n this._fitToContent = newValue;\n\n if (this._inkBarElement) {\n this._appendInkBarElement();\n }\n }\n }\n\n /** Aligns the ink bar to the current item. */\n activateInkBar(previousIndicatorClientRect?: ClientRect) {\n const element = this.elementRef.nativeElement;\n\n // Early exit if no indicator is present to handle cases where an indicator\n // may be activated without a prior indicator state\n if (\n !previousIndicatorClientRect ||\n !element.getBoundingClientRect ||\n !this._inkBarContentElement\n ) {\n element.classList.add(ACTIVE_CLASS);\n return;\n }\n\n // This animation uses the FLIP approach. You can read more about it at the link below:\n // https://aerotwist.com/blog/flip-your-animations/\n\n // Calculate the dimensions based on the dimensions of the previous indicator\n const currentClientRect = element.getBoundingClientRect();\n const widthDelta = previousIndicatorClientRect.width / currentClientRect.width;\n const xPosition = previousIndicatorClientRect.left - currentClientRect.left;\n element.classList.add(NO_TRANSITION_CLASS);\n this._inkBarContentElement.style.setProperty(\n 'transform',\n `translateX(${xPosition}px) scaleX(${widthDelta})`,\n );\n\n // Force repaint before updating classes and transform to ensure the transform properly takes effect\n element.getBoundingClientRect();\n\n element.classList.remove(NO_TRANSITION_CLASS);\n element.classList.add(ACTIVE_CLASS);\n this._inkBarContentElement.style.setProperty('transform', '');\n }\n\n /** Removes the ink bar from the current item. */\n deactivateInkBar() {\n this.elementRef.nativeElement.classList.remove(ACTIVE_CLASS);\n }\n\n /** Initializes the foundation. */\n ngOnInit() {\n this._createInkBarElement();\n }\n\n /** Destroys the foundation. */\n ngOnDestroy() {\n this._inkBarElement?.remove();\n this._inkBarElement = this._inkBarContentElement = null!;\n }\n\n /** Creates and appends the ink bar element. */\n private _createInkBarElement() {\n const documentNode = this.elementRef.nativeElement.ownerDocument || document;\n this._inkBarElement = documentNode.createElement('span');\n this._inkBarContentElement = documentNode.createElement('span');\n\n this._inkBarElement.className = 'mdc-tab-indicator';\n this._inkBarContentElement.className =\n 'mdc-tab-indicator__content mdc-tab-indicator__content--underline';\n\n this._inkBarElement.appendChild(this._inkBarContentElement);\n this._appendInkBarElement();\n }\n\n /**\n * Appends the ink bar to the tab host element or content, depending on whether\n * the ink bar should fit to content.\n */\n private _appendInkBarElement() {\n if (!this._inkBarElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Ink bar element has not been created and cannot be appended');\n }\n\n const parentElement = this._fitToContent\n ? this.elementRef.nativeElement.querySelector('.mdc-tab__content')\n : this.elementRef.nativeElement;\n\n if (!parentElement && (typeof ngDevMode === 'undefined' || ngDevMode)) {\n throw Error('Missing element to host the ink bar');\n }\n\n parentElement!.appendChild(this._inkBarElement!);\n }\n };\n}\n\n/**\n * Interface for a a MatInkBar positioner method, defining the positioning and width of the ink\n * bar in a set of tabs.\n */\nexport interface _MatInkBarPositioner {\n (element: HTMLElement): {left: string; width: string};\n}\n\n/**\n * The default positioner function for the MatInkBar.\n * @docs-private\n */\nexport function _MAT_INK_BAR_POSITIONER_FACTORY(): _MatInkBarPositioner {\n const method = (element: HTMLElement) => ({\n left: element ? (element.offsetLeft || 0) + 'px' : '0',\n width: element ? (element.offsetWidth || 0) + 'px' : '0',\n });\n\n return method;\n}\n\n/** Injection token for the MatInkBar's Positioner. */\nexport const _MAT_INK_BAR_POSITIONER = new InjectionToken<_MatInkBarPositioner>(\n 'MatInkBarPositioner',\n {\n providedIn: 'root',\n factory: _MAT_INK_BAR_POSITIONER_FACTORY,\n },\n);\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {Directive, ElementRef} from '@angular/core';\nimport {MatInkBarItem, mixinInkBarItem} from './ink-bar';\nimport {CanDisable, mixinDisabled} from '@angular/material/core';\n\n// Boilerplate for applying mixins to MatTabLabelWrapper.\n/** @docs-private */\nconst _MatTabLabelWrapperMixinBase = mixinDisabled(class {});\n\n/**\n * Used in the `mat-tab-group` view to display tab labels.\n * @docs-private\n */\n@Directive()\nexport class _MatTabLabelWrapperBase extends _MatTabLabelWrapperMixinBase implements CanDisable {\n constructor(public elementRef: ElementRef) {\n super();\n }\n\n /** Sets focus on the wrapper element */\n focus(): void {\n this.elementRef.nativeElement.focus();\n }\n\n getOffsetLeft(): number {\n return this.elementRef.nativeElement.offsetLeft;\n }\n\n getOffsetWidth(): number {\n return this.elementRef.nativeElement.offsetWidth;\n }\n}\n\nconst _MatTabLabelWrapperBaseWithInkBarItem = mixinInkBarItem(_MatTabLabelWrapperBase);\n\n/**\n * Used in the `mat-tab-group` view to display tab labels.\n * @docs-private\n */\n@Directive({\n selector: '[matTabLabelWrapper]',\n inputs: ['disabled', 'fitInkBarToContent'],\n host: {\n '[class.mat-mdc-tab-disabled]': 'disabled',\n '[attr.aria-disabled]': '!!disabled',\n },\n})\nexport class MatTabLabelWrapper\n extends _MatTabLabelWrapperBaseWithInkBarItem\n implements MatInkBarItem {}\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n ChangeDetectionStrategy,\n Component,\n ContentChild,\n Directive,\n Inject,\n InjectionToken,\n Input,\n OnChanges,\n OnDestroy,\n OnInit,\n Optional,\n SimpleChanges,\n TemplateRef,\n ViewChild,\n ViewContainerRef,\n ViewEncapsulation,\n} from '@angular/core';\nimport {MatTabContent} from './tab-content';\nimport {MAT_TAB, MatTabLabel} from './tab-label';\nimport {CanDisable, mixinDisabled} from '@angular/material/core';\nimport {TemplatePortal} from '@angular/cdk/portal';\nimport {Subject} from 'rxjs';\n\n// Boilerplate for applying mixins to MatTab.\n/** @docs-private */\nconst _MatTabMixinBase = mixinDisabled(class {});\n\n/**\n * Used to provide a tab group to a tab without causing a circular dependency.\n * @docs-private\n */\nexport const MAT_TAB_GROUP = new InjectionToken<any>('MAT_TAB_GROUP');\n\n/** @docs-private */\n@Directive()\nexport class _MatTabBase\n extends _MatTabMixinBase\n implements CanDisable, OnInit, OnChanges, OnDestroy\n{\n /** Content for the tab label given by `<ng-template mat-tab-label>`. */\n protected _templateLabel: MatTabLabel;\n\n /**\n * Template provided in the tab content that will be used if present, used to enable lazy-loading\n */\n _explicitContent: TemplateRef<any>;\n\n /** Template inside the MatTab view that contains an `<ng-content>`. */\n @ViewChild(TemplateRef, {static: true}) _implicitContent: TemplateRef<any>;\n\n /** Plain text label for the tab, used when there is no template label. */\n @Input('label') textLabel: string = '';\n\n /** Aria label for the tab. */\n @Input('aria-label') ariaLabel: string;\n\n /**\n * Reference to the element that the tab is labelled by.\n * Will be cleared if `aria-label` is set at the same time.\n */\n @Input('aria-labelledby') ariaLabelledby: string;\n\n /**\n * Classes to be passed to the tab label inside the mat-tab-header container.\n * Supports string and string array values, same as `ngClass`.\n */\n @Input() labelClass: string | string[];\n\n /**\n * Classes to be passed to the tab mat-tab-body container.\n * Supports string and string array values, same as `ngClass`.\n */\n @Input() bodyClass: string | string[];\n\n /** Portal that will be the hosted content of the tab */\n private _contentPortal: TemplatePortal | null = null;\n\n /** @docs-private */\n get content(): TemplatePortal | null {\n return this._contentPortal;\n }\n\n /** Emits whenever the internal state of the tab changes. */\n readonly _stateChanges = new Subject<void>();\n\n /**\n * The relatively indexed position where 0 represents the center, negative is left, and positive\n * represents the right.\n */\n position: number | null = null;\n\n /**\n * The initial relatively index origin of the tab if it was created and selected after there\n * was already a selected tab. Provides context of what position the tab should originate from.\n */\n origin: number | null = null;\n\n /**\n * Whether the tab is currently active.\n */\n isActive = false;\n\n constructor(\n private _viewContainerRef: ViewContainerRef,\n @Inject(MAT_TAB_GROUP) @Optional() public _closestTabGroup: any,\n ) {\n super();\n }\n\n ngOnChanges(changes: SimpleChanges): void {\n if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) {\n this._stateChanges.next();\n }\n }\n\n ngOnDestroy(): void {\n this._stateChanges.complete();\n }\n\n ngOnInit(): void {\n this._contentPortal = new TemplatePortal(\n this._explicitContent || this._implicitContent,\n this._viewContainerRef,\n );\n }\n\n /**\n * This has been extracted to a util because of TS 4 and VE.\n * View Engine doesn't support property rename inheritance.\n * TS 4.0 doesn't allow properties to override accessors or vice-versa.\n * @docs-private\n */\n protected _setTemplateLabelInput(value: MatTabLabel | undefined) {\n // Only update the label if the query managed to find one. This works around an issue where a\n // user may have manually set `templateLabel` during creation mode, which would then get\n // clobbered by `undefined` when the query resolves. Also note that we check that the closest\n // tab matches the current one so that we don't pick up labels from nested tabs.\n if (value && value._closestTab === this) {\n this._templateLabel = value;\n }\n }\n}\n\n@Component({\n selector: 'mat-tab',\n\n // Note that usually we'd go through a bit more trouble and set up another class so that\n // the inlined template of `MatTab` isn't duplicated, however the template is small enough\n // that creating the extra class will generate more code than just duplicating the template.\n templateUrl: 'tab.html',\n inputs: ['disabled'],\n // tslint:disable-next-line:validate-decorators\n changeDetection: ChangeDetectionStrategy.Default,\n encapsulation: ViewEncapsulation.None,\n exportAs: 'matTab',\n providers: [{provide: MAT_TAB, useExisting: MatTab}],\n})\nexport class MatTab extends _MatTabBase {\n /**\n * Template provided in the tab content that will be used if present, used to enable lazy-loading\n */\n @ContentChild(MatTabContent, {read: TemplateRef, static: true})\n override _explicitContent: TemplateRef<any>;\n\n /** Content for the tab label given by `<ng-template mat-tab-label>`. */\n @ContentChild(MatTabLabel)\n get templateLabel(): MatTabLabel {\n return this._templateLabel;\n }\n set templateLabel(value: MatTabLabel) {\n this._setTemplateLabelInput(value);\n }\n}\n","<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n","/**\n * @license\n * Copyright Google LLC All Rights Reserved.\n *\n * Use of this source code is governed by an MIT-style license that can be\n * found in the LICENSE file at https://angular.io/license\n */\n\nimport {\n ChangeDetectorRef,\n ElementRef,\n NgZone,\n Optional,\n QueryList,\n EventEmitter,\n AfterContentChecked,\n AfterContentInit,\n AfterViewInit,\n OnDestroy,\n Directive,\n Inject,\n Input,\n} from '@angular/core';\nimport {Direction, Directionality} from '@angular/cdk/bidi';\nimport {\n BooleanInput,\n coerceBooleanProperty,\n coerceNumberProperty,\n NumberInput,\n} from '@angular/cdk/coercion';\nimport {ViewportRuler} from '@angular/cdk/scrolling';\nimport {FocusKeyManager, FocusableOption} from '@angular/cdk/a11y';\nimport {ENTER, SPACE, hasModifierKey} from '@angular/cdk/keycodes';\nimport {\n merge,\n of as observableOf,\n Subject,\n EMPTY,\n Observer,\n Observable,\n timer,\n fromEvent,\n} from 'rxjs';\nimport {take, switchMap, startWith, skip, takeUntil, filter} from 'rxjs/operators';\nimport {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';\nimport {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';\n\n/** Config used to bind passive event listeners */\nconst passiveEventListenerOptions = normalizePassiveListenerOptions({\n passive: true,\n}) as EventListenerOptions;\n\n/**\n * The directions that scrolling can go in when the header's tabs exceed the header width. 'After'\n * will scroll the header towards the end of the tabs list and 'before' will scroll towards the\n * beginning of the list.\n */\nexport type ScrollDirection = 'after' | 'before';\n\n/**\n * The distance in pixels that will be overshot when scrolling a tab label into view. This helps\n * provide a small affordance to the label next to it.\n */\nconst EXAGGERATED_OVERSCROLL = 60;\n\n/**\n * Amount of milliseconds to wait before starting to scroll the header automatically.\n * Set a little conservatively in order to handle fake events dispatched on touch devices.\n */\nconst HEADER_SCROLL_DELAY = 650;\n\n/**\n * Interval in milliseconds at which to scroll the header\n * while the user is holding their pointer.\n */\nconst HEADER_SCROLL_INTERVAL = 100;\n\n/** Item inside a paginated tab header. */\nexport type MatPaginatedTabHeaderItem = FocusableOption & {elementRef: ElementRef};\n\n/**\n * Base class for a tab header that supported pagination.\n * @docs-private\n */\n@Directive()\nexport abstract class MatPaginatedTabHeader\n implements AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy\n{\n abstract _items: QueryList<MatPaginatedTabHeaderItem>;\n abstract _inkBar: {hide: () => void; alignToElement: (element: HTMLElement) => void};\n abstract _tabListContainer: ElementRef<HTMLElement>;\n abstract _tabList: ElementRef<HTMLElement>;\n abstract _tabListInner: ElementRef<HTMLElement>;\n abstract _nextPaginator: ElementRef<HTMLElement>;\n abstract _previousPaginator: ElementRef<HTMLElement>;\n\n /** The distance in pixels that the tab labels should be translated to the left. */\n private _scrollDistance = 0;\n\n /** Whether the header should scroll to the selected index after the view has been checked. */\n private _selectedIndexChanged = false;\n\n /** Emits when the component is destroyed. */\n protected readonly _destroyed = new Subject<void>();\n\n /** Whether the controls for pagination should be displayed */\n _showPaginationControls = false;\n\n /** Whether the tab list can be scrolled more towards the end of the tab label list. */\n _disableScrollAfter = true;\n\n /** Whether the tab list can be scrolled more towards the beginning of the tab label list. */\n _disableScrollBefore = true;\n\n /**\n * The number of tab labels that are displayed on the header. When this changes, the header\n * should re-evaluate the scroll position.\n */\n private _tabLabelCount: number;\n\n /** Whether the scroll distance has changed and should be applied after the view is checked. */\n private _scrollDistanceChanged: boolean;\n\n /** Used to manage focus between the tabs. */\n private _keyManager: FocusKeyManager<MatPaginatedTabHeaderItem>;\n\n /** Cached text content of the header. */\n private _currentTextContent: string;\n\n /** Stream that will stop the automated scrolling. */\n private _stopScrolling = new Subject<void>();\n\n /**\n * Whether pagination should be disabled. This can be used to avoid unnecessary\n * layout recalculations if it's known that pagination won't be required.\n */\n @Input()\n get disablePagination(): boolean {\n return this._disablePagination;\n }\n set disablePagination(value: BooleanInput) {\n this._disablePagination = coerceBooleanProperty(value);\n }\n private _disablePagination: boolean = false;\n\n /** The index of the active tab. */\n get selectedIndex(): number {\n return this._selectedIndex;\n }\n set selectedIndex(value: NumberInput) {\n value = coerceNumberProperty(value);\n\n if (this._selectedIndex != value) {\n this._selectedIndexChanged = true;\n this._selectedIndex = value;\n\n if (this._keyManager) {\n this._keyManager.updateActiveItem(value);\n }\n }\n }\n private _selectedIndex: number = 0;\n\n /** Event emitted when the option is selected. */\n readonly selectFocusedIndex: EventEmitter<number> = new EventEmitter<number>();\n\n /** Event emitted when a label is focused. */\n readonly indexFocused: EventEmitter<number> = new EventEmitter<number>();\n\n constructor(\n protected _elementRef: ElementRef<HTMLElement>,\n protected _changeDetectorRef: ChangeDetectorRef,\n private _viewportRuler: ViewportRuler,\n @Optional() private _dir: Directionality,\n private _ngZone: NgZone,\n private _platform: Platform,\n @Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string,\n ) {\n // Bind the `mouseleave` event on the outside since it doesn't change anything in the view.\n _ngZone.runOutsideAngular(() => {\n fromEvent(_elementRef.nativeElement, 'mouseleave')\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => {\n this._stopInterval();\n });\n });\n }\n\n /** Called when the user has selected an item via the keyboard. */\n protected abstract _itemSelected(event: KeyboardEvent): void;\n\n ngAfterViewInit() {\n // We need to handle these events manually, because we want to bind passive event listeners.\n fromEvent(this._previousPaginator.nativeElement, 'touchstart', passiveEventListenerOptions)\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => {\n this._handlePaginatorPress('before');\n });\n\n fromEvent(this._nextPaginator.nativeElement, 'touchstart', passiveEventListenerOptions)\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => {\n this._handlePaginatorPress('after');\n });\n }\n\n ngAfterContentInit() {\n const dirChange = this._dir ? this._dir.change : observableOf('ltr');\n const resize = this._viewportRuler.change(150);\n const realign = () => {\n this.updatePagination();\n this._alignInkBarToSelectedTab();\n };\n\n this._keyManager = new FocusKeyManager<MatPaginatedTabHeaderItem>(this._items)\n .withHorizontalOrientation(this._getLayoutDirection())\n .withHomeAndEnd()\n .withWrap();\n\n this._keyManager.updateActiveItem(this._selectedIndex);\n\n // Defer the first call in order to allow for slower browsers to lay out the elements.\n // This helps in cases where the user lands directly on a page with paginated tabs.\n // Note that we use `onStable` instead of `requestAnimationFrame`, because the latter\n // can hold up tests that are in a background tab.\n this._ngZone.onStable.pipe(take(1)).subscribe(realign);\n\n // On dir change or window resize, realign the ink bar and update the orientation of\n // the key manager if the direction has changed.\n merge(dirChange, resize, this._items.changes, this._itemsResized())\n .pipe(takeUntil(this._destroyed))\n .subscribe(() => {\n // We need to defer this to give the browser some time to recalculate\n // the element dimensions. The call has to be wrapped in `NgZone.run`,\n // because the viewport change handler runs outside of Angular.\n this._ngZone.run(() => {\n Promise.resolve().then(() => {\n // Clamp the scroll distance, because it can change with the number of tabs.\n this._scrollDistance = Math.max(\n 0,\n Math.min(this._getMaxScrollDistance(), this._scrollDistance),\n );\n realign();\n });\n });\n this._keyManager.withHorizontalOrientation(this._getLayoutDirection());\n });\n\n // If there is a change in the focus key manager we need to emit the `indexFocused`\n // event in order to provide a public event that notifies about focus changes. Also we realign\n // the tabs container by scrolling the new focused tab into the visible section.\n this._keyManager.change.subscribe(newFocusIndex => {\n this.indexFocused.emit(newFocusIndex);\n this._setTabFocus(newFocusIndex);\n });\n }\n\n /** Sends any changes that could affect the layout of the items. */\n private _itemsResized(): Observable<ResizeObserverEntry[]> {\n if (typeof ResizeObserver !== 'function') {\n return EMPTY;\n }\n\n return this._items.changes.pipe(\n startWith(this._items),\n switchMap(\n (tabItems: QueryList<MatPaginatedTabHeaderItem>) =>\n new Observable((observer: Observer<ResizeObserverEntry[]>) =>\n this._ngZone.runOutsideAngular(() => {\n const resizeObserver = new ResizeObserver(entries => observer.next(entries));\n tabItems.forEach(item => resizeObserver.observe(item.elementRef.nativeElement));\n return () => {\n resizeObserver.disconnect();\n };\n }),\n ),\n ),\n // Skip the first emit since the resize observer emits when an item\n // is observed for new items when the tab is already inserted\n skip(1),\n // Skip emissions where all the elements are invisible since we don't want\n // the header to try and re-render with invalid measurements. See #25574.\n filter(entries => entries.some(e => e.contentRect.width > 0 && e.contentRect.height > 0)),\n );\n }\n\n ngAfterContentChecked(): void {\n // If the number of tab labels have changed, check if scrolling should be enabled\n if (this._tabLabelCount != this._items.length) {\n this.updatePagination();\n this._tabLabelCount = this._items.length;\n this._changeDetectorRef.markForCheck();\n }\n\n // If the selected index has changed, scroll to the label and check if the scrolling controls\n // should be disabled.\n if (this._selectedIndexChanged) {\n this._scrollToLabel(this._selectedIndex);\n this._checkScrollingControls();\n this._alignInkBarToSelectedTab();\n this._selectedIndexChanged = false;\n this._changeDetectorRef.markForCheck();\n }\n\n // If the scroll distance has been changed (tab selected, focused, scroll controls activated),\n // then translate the header to reflect this.\n if (this._scrollDistanceChanged) {\n this._updateTabScrollPosition();\n this._scrollDistanceChanged = false;\n this._changeDetectorRef.markForCheck();\n }\n }\n\n ngOnDestroy() {\n this._keyManager?.destroy();\n this._destroyed.next();\n this._destroyed.complete();\n this._stopScrolling.complete();\n }\n\n /** Handles keyboard events on the header. */\n _handleKeydown(event: KeyboardEvent) {\n // We don't handle any key bindings with a modifier key.\n if (hasModifierKey(event)) {\n return;\n }\n\n switch (event.keyCode) {\n case ENTER:\n case SPACE:\n if (this.focusIndex !== this.selectedIndex) {\n this.selectFocusedIndex.emit(this.focusIndex);\n this._itemSelected(event);\n }\n break;\n default:\n this._keyManager.onKeydown(event);\n }\n }\n\n /**\n * Callback for when the MutationObserver detects that the content has changed.\n */\n _onContentChanges() {\n const textContent = this._elementRef.nativeElement.textContent;\n\n // We need to diff the text content of the header, because the MutationObserver callback\n // will fire even if the text content didn't change which is inefficient and is prone\n // to infinite loops if a poorly constructed expression is passed in (see #14249).\n if (textContent !== this._currentTextContent) {\n this._currentTextContent = textContent || '';\n\n // The content observer runs outside the `NgZone` by default, which\n // means that we need to bring the callback back in ourselves.\n this._ngZone.run(() => {\n this.updatePagination();\n this._alignInkBarToSelectedTab();\n this._changeDetectorRef.markForCheck();\n });\n }\n }\n\n /**\n * Updates the view whether pagination should be enabled or not.\n *\n * WARNING: Calling this method can be very costly in terms of performance. It should be called\n * as infrequently as possible from outside of the Tabs component as it causes a reflow of the\n * page.\n */\n updatePagination() {\n this._checkPaginationEnabled();\n this._checkScrollingControls();\n this._updateTabScrollPosition();\n }\n\n /** Tracks which element has focus; used for keyboard navigation */\n get focusIndex(): number {\n return this._keyManager ? this._keyManager.activeItemIndex! : 0;\n }\n\n /** When the focus index is set, we must manually send focus to the correct label */\n set focusIndex(value: number) {\n if (!this._isValidIndex(value) || this.focusIndex === value || !this._keyManager) {\n return;\n }\n\n this._keyManager.setActiveItem(value);\n }\n\n /**\n * Determines if an index is valid. If the tabs are not ready yet, we assume that the user is\n * providing a valid index and return true.\n */\n _isValidIndex(index: number): boolean {\n if (!this._items) {\n return true;\n }\n\n const tab = this._items ? this._items.toArray()[index] : null;\n return !!tab && !tab.disabled;\n }\n\n /**\n * Sets focus on the HTML element for the label wrapper and scrolls it into the view if\n * scrolling is enabled.\n */\n _setTabFocus(tabIndex: number) {\n if (this._showPaginationControls) {\n this._scrollToLabel(tabIndex);\n }\n\n if (this._items && this._items.length) {\n this._items.toArray()[tabIndex].focus();\n\n // Do not let the browser manage scrolling to focus the element, this will be handled\n // by using translation. In LTR, the scroll left should be 0. In RTL, the scroll width\n // should be the full width minus the offset width.\n const containerEl = this._tabListContainer.nativeElement;\n const dir = this._getLayoutDirection();\n\n if (dir == 'ltr') {\n containerEl.scrollLeft = 0;\n } else {\n containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth;\n }\n }\n }\n\n /** The layout direction of the containing app. */\n _getLayoutDirection(): Direction {\n return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr';\n }\n\n /** Performs the CSS transformation on the tab list that will cause the list to scroll. */\n _updateTabScrollPosition() {\n if (this.disablePagination) {\n return;\n }\n\n const scrollDistance = this.scrollDistance;\n const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance;\n\n // Don't use `translate3d` here because we don't want to create a new layer. A new layer\n // seems to cause flickering and overflow in Internet Explorer. For example, the ink bar\n // and ripples will exceed the boundaries of the visible tab bar.\n // See: https://github.com/angular/components/issues/10276\n // We round the `transform` here, because transforms with sub-pixel precision cause some\n // browsers to blur the content of the element.\n this._tabList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`;\n\n // Setting the `transform` on IE will change the scroll offset of the parent, causing the\n // position to be thrown off in some cases. We have to reset it ourselves to ensure that\n // it doesn't get thrown off. Note that we scope it only to IE and Edge, because messing\n // with the scroll position throws off Chrome 71+ in RTL mode (see #14689).\n if (this._platform.TRIDENT || this._platform.EDGE) {\n this._tabListContainer.nativeElement.scrollLeft = 0;\n }\n }\n\n /** Sets the distance in pixels that the tab header should be transformed in the X-axis. */\n get scrollDistance(): number {\n return this._scrollDistance;\n }\n set scrollDistance(value: number) {\n this._scrollTo(value);\n }\n\n /**\n * Moves the tab list in the 'before' or 'after' direction (towards the beginning of the list or\n * the end of the list, respectively). The distance to scroll is computed to be a third of the\n * length of the tab list view window.\n *\n * This is an expensive call that forces a layout reflow to compute box and scroll metrics and\n * should be called sparingly.\n */\n _scrollHeader(direction: ScrollDirection) {\n const viewLength = this._tabListContainer.nativeElement.offsetWidth;\n\n // Move the scroll distance one-third the length of the tab list's viewport.\n const scrollAmount = ((direction == 'before' ? -1 : 1) * viewLength) / 3;\n\n return this._scrollTo(this._scrollDistance + scrollAmount);\n }\n\n /** Handles click events on the pagination arrows. */\n _handlePaginatorClick(direction: ScrollDirection) {\n this._stopInterval();\n this._scrollHeader(direction);\n }\n\n /**\n * Moves the tab list such that the desired tab label (marked by index) is moved into view.\n *\n * This is an expensive call that forces a layout reflow to compute box and scroll metrics and\n * should be called sparingly.\n */\n _scrollToLabel(labelIndex: number) {\n if (this.disablePagination) {\n return;\n }\n\n const selectedLabel = this._items ? this._items.toArray()[labelIndex] : null;\n\n if (!selectedLabel) {\n return;\n }\n\n // The view length is the visible width of the tab labels.\n const viewLength = this._tabListContainer.nativeElement.offsetWidth;\n const {