import { FocusKeyManager, _IdGenerator, CdkMonitorFocus, FocusMonitor } from '@angular/cdk/a11y'; import { Directionality, BidiModule } from '@angular/cdk/bidi'; import { hasModifierKey, SPACE, ENTER } from '@angular/cdk/keycodes'; import { SharedResizeObserver } from '@angular/cdk/observers/private'; import { Platform } from '@angular/cdk/platform'; import { ViewportRuler, CdkScrollable } from '@angular/cdk/scrolling'; import * as i0 from '@angular/core'; import { InjectionToken, inject, TemplateRef, Directive, ViewContainerRef, booleanAttribute, Component, ChangeDetectionStrategy, ViewEncapsulation, Input, ContentChild, ViewChild, ElementRef, ChangeDetectorRef, NgZone, Injector, Renderer2, EventEmitter, afterNextRender, numberAttribute, Output, ContentChildren, QueryList, ViewChildren, signal, forwardRef, computed, HostAttributeToken, NgModule } from '@angular/core'; import { Subject, of, merge, EMPTY, Observable, timer, Subscription, BehaviorSubject } from 'rxjs'; import { debounceTime, takeUntil, startWith, switchMap, skip, filter } from 'rxjs/operators'; import { _animationsDisabled } from './_animation-chunk.mjs'; import { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal'; import { _CdkPrivateStyleLoader } from '@angular/cdk/private'; import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs'; import { CdkObserveContent } from '@angular/cdk/observers'; import { MatRipple, MAT_RIPPLE_GLOBAL_OPTIONS } from './_ripple-chunk.mjs'; import '@angular/cdk/layout'; import '@angular/cdk/coercion'; const MAT_TAB_CONTENT = new InjectionToken('MatTabContent'); class MatTabContent { template = inject(TemplateRef); constructor() {} static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabContent, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: MatTabContent, isStandalone: true, selector: "[matTabContent]", providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }], ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabContent, decorators: [{ type: Directive, args: [{ selector: '[matTabContent]', providers: [{ provide: MAT_TAB_CONTENT, useExisting: MatTabContent }] }] }], ctorParameters: () => [] }); const MAT_TAB_LABEL = new InjectionToken('MatTabLabel'); const MAT_TAB = new InjectionToken('MAT_TAB'); class MatTabLabel extends CdkPortal { _closestTab = inject(MAT_TAB, { optional: true }); static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabLabel, deps: null, target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: MatTabLabel, isStandalone: true, selector: "[mat-tab-label], [matTabLabel]", providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }], usesInheritance: true, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabLabel, decorators: [{ type: Directive, args: [{ selector: '[mat-tab-label], [matTabLabel]', providers: [{ provide: MAT_TAB_LABEL, useExisting: MatTabLabel }] }] }] }); const MAT_TAB_GROUP = new InjectionToken('MAT_TAB_GROUP'); class MatTab { _viewContainerRef = inject(ViewContainerRef); _closestTabGroup = inject(MAT_TAB_GROUP, { optional: true }); disabled = false; get templateLabel() { return this._templateLabel; } set templateLabel(value) { this._setTemplateLabelInput(value); } _templateLabel; _explicitContent = undefined; _implicitContent; textLabel = ''; ariaLabel; ariaLabelledby; labelClass; bodyClass; id = null; _contentPortal = null; get content() { return this._contentPortal; } _stateChanges = new Subject(); position = null; origin = null; isActive = false; constructor() { inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader); } ngOnChanges(changes) { if (changes.hasOwnProperty('textLabel') || changes.hasOwnProperty('disabled')) { this._stateChanges.next(); } } ngOnDestroy() { this._stateChanges.complete(); } ngOnInit() { this._contentPortal = new TemplatePortal(this._explicitContent || this._implicitContent, this._viewContainerRef); } _setTemplateLabelInput(value) { if (value && value._closestTab === this) { this._templateLabel = value; } } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTab, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.3", type: MatTab, isStandalone: true, selector: "mat-tab", inputs: { disabled: ["disabled", "disabled", booleanAttribute], textLabel: ["label", "textLabel"], ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], labelClass: "labelClass", bodyClass: "bodyClass", id: "id" }, host: { attributes: { "hidden": "" }, properties: { "attr.id": "null" } }, providers: [{ provide: MAT_TAB, useExisting: MatTab }], queries: [{ propertyName: "templateLabel", first: true, predicate: MatTabLabel, descendants: true }, { propertyName: "_explicitContent", first: true, predicate: MatTabContent, descendants: true, read: TemplateRef, static: true }], viewQueries: [{ propertyName: "_implicitContent", first: true, predicate: TemplateRef, descendants: true, static: true }], exportAs: ["matTab"], usesOnChanges: true, ngImport: i0, template: "\n\n", changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTab, decorators: [{ type: Component, args: [{ selector: 'mat-tab', changeDetection: ChangeDetectionStrategy.Default, encapsulation: ViewEncapsulation.None, exportAs: 'matTab', providers: [{ provide: MAT_TAB, useExisting: MatTab }], host: { 'hidden': '', '[attr.id]': 'null' }, template: "\n\n" }] }], ctorParameters: () => [], propDecorators: { disabled: [{ type: Input, args: [{ transform: booleanAttribute }] }], templateLabel: [{ type: ContentChild, args: [MatTabLabel] }], _explicitContent: [{ type: ContentChild, args: [MatTabContent, { read: TemplateRef, static: true }] }], _implicitContent: [{ type: ViewChild, args: [TemplateRef, { static: true }] }], textLabel: [{ type: Input, args: ['label'] }], ariaLabel: [{ type: Input, args: ['aria-label'] }], ariaLabelledby: [{ type: Input, args: ['aria-labelledby'] }], labelClass: [{ type: Input }], bodyClass: [{ type: Input }], id: [{ type: Input }] } }); const ACTIVE_CLASS = 'mdc-tab-indicator--active'; const NO_TRANSITION_CLASS = 'mdc-tab-indicator--no-transition'; class MatInkBar { _items; _currentItem; constructor(_items) { this._items = _items; } hide() { this._items.forEach(item => item.deactivateInkBar()); this._currentItem = undefined; } alignToElement(element) { const correspondingItem = this._items.find(item => item.elementRef.nativeElement === element); const currentItem = this._currentItem; if (correspondingItem === currentItem) { return; } currentItem?.deactivateInkBar(); if (correspondingItem) { const domRect = currentItem?.elementRef.nativeElement.getBoundingClientRect?.(); correspondingItem.activateInkBar(domRect); this._currentItem = correspondingItem; } } } class InkBarItem { _elementRef = inject(ElementRef); _inkBarElement = null; _inkBarContentElement = null; _fitToContent = false; get fitInkBarToContent() { return this._fitToContent; } set fitInkBarToContent(newValue) { if (this._fitToContent !== newValue) { this._fitToContent = newValue; if (this._inkBarElement) { this._appendInkBarElement(); } } } activateInkBar(previousIndicatorClientRect) { const element = this._elementRef.nativeElement; if (!previousIndicatorClientRect || !element.getBoundingClientRect || !this._inkBarContentElement) { element.classList.add(ACTIVE_CLASS); return; } const currentClientRect = element.getBoundingClientRect(); const widthDelta = previousIndicatorClientRect.width / currentClientRect.width; const xPosition = previousIndicatorClientRect.left - currentClientRect.left; element.classList.add(NO_TRANSITION_CLASS); this._inkBarContentElement.style.setProperty('transform', `translateX(${xPosition}px) scaleX(${widthDelta})`); element.getBoundingClientRect(); element.classList.remove(NO_TRANSITION_CLASS); element.classList.add(ACTIVE_CLASS); this._inkBarContentElement.style.setProperty('transform', ''); } deactivateInkBar() { this._elementRef.nativeElement.classList.remove(ACTIVE_CLASS); } ngOnInit() { this._createInkBarElement(); } ngOnDestroy() { this._inkBarElement?.remove(); this._inkBarElement = this._inkBarContentElement = null; } _createInkBarElement() { const documentNode = this._elementRef.nativeElement.ownerDocument || document; const inkBarElement = this._inkBarElement = documentNode.createElement('span'); const inkBarContentElement = this._inkBarContentElement = documentNode.createElement('span'); inkBarElement.className = 'mdc-tab-indicator'; inkBarContentElement.className = 'mdc-tab-indicator__content mdc-tab-indicator__content--underline'; inkBarElement.appendChild(this._inkBarContentElement); this._appendInkBarElement(); } _appendInkBarElement() { if (!this._inkBarElement && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Ink bar element has not been created and cannot be appended'); } const parentElement = this._fitToContent ? this._elementRef.nativeElement.querySelector('.mdc-tab__content') : this._elementRef.nativeElement; if (!parentElement && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw Error('Missing element to host the ink bar'); } parentElement.appendChild(this._inkBarElement); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InkBarItem, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: InkBarItem, isStandalone: true, inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute] }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: InkBarItem, decorators: [{ type: Directive }], propDecorators: { fitInkBarToContent: [{ type: Input, args: [{ transform: booleanAttribute }] }] } }); const _MAT_INK_BAR_POSITIONER = new InjectionToken('MatInkBarPositioner', { providedIn: 'root', factory: () => { const method = element => ({ left: element ? (element.offsetLeft || 0) + 'px' : '0', width: element ? (element.offsetWidth || 0) + 'px' : '0' }); return method; } }); class MatTabLabelWrapper extends InkBarItem { elementRef = inject(ElementRef); disabled = false; focus() { this.elementRef.nativeElement.focus(); } getOffsetLeft() { return this.elementRef.nativeElement.offsetLeft; } getOffsetWidth() { return this.elementRef.nativeElement.offsetWidth; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabLabelWrapper, deps: null, target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: MatTabLabelWrapper, isStandalone: true, selector: "[matTabLabelWrapper]", inputs: { disabled: ["disabled", "disabled", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-disabled": "disabled", "attr.aria-disabled": "!!disabled" } }, usesInheritance: true, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabLabelWrapper, decorators: [{ type: Directive, args: [{ selector: '[matTabLabelWrapper]', host: { '[class.mat-mdc-tab-disabled]': 'disabled', '[attr.aria-disabled]': '!!disabled' } }] }], propDecorators: { disabled: [{ type: Input, args: [{ transform: booleanAttribute }] }] } }); const passiveEventListenerOptions = { passive: true }; const HEADER_SCROLL_DELAY = 650; const HEADER_SCROLL_INTERVAL = 100; class MatPaginatedTabHeader { _elementRef = inject(ElementRef); _changeDetectorRef = inject(ChangeDetectorRef); _viewportRuler = inject(ViewportRuler); _dir = inject(Directionality, { optional: true }); _ngZone = inject(NgZone); _platform = inject(Platform); _sharedResizeObserver = inject(SharedResizeObserver); _injector = inject(Injector); _renderer = inject(Renderer2); _animationsDisabled = _animationsDisabled(); _eventCleanups; _scrollDistance = 0; _selectedIndexChanged = false; _destroyed = new Subject(); _showPaginationControls = false; _disableScrollAfter = true; _disableScrollBefore = true; _tabLabelCount; _scrollDistanceChanged = false; _keyManager; _currentTextContent; _stopScrolling = new Subject(); disablePagination = false; get selectedIndex() { return this._selectedIndex; } set selectedIndex(v) { const value = isNaN(v) ? 0 : v; if (this._selectedIndex != value) { this._selectedIndexChanged = true; this._selectedIndex = value; if (this._keyManager) { this._keyManager.updateActiveItem(value); } } } _selectedIndex = 0; selectFocusedIndex = new EventEmitter(); indexFocused = new EventEmitter(); constructor() { this._eventCleanups = this._ngZone.runOutsideAngular(() => [this._renderer.listen(this._elementRef.nativeElement, 'mouseleave', () => this._stopInterval())]); } ngAfterViewInit() { this._eventCleanups.push(this._renderer.listen(this._previousPaginator.nativeElement, 'touchstart', () => this._handlePaginatorPress('before'), passiveEventListenerOptions), this._renderer.listen(this._nextPaginator.nativeElement, 'touchstart', () => this._handlePaginatorPress('after'), passiveEventListenerOptions)); } ngAfterContentInit() { const dirChange = this._dir ? this._dir.change : of('ltr'); const resize = this._sharedResizeObserver.observe(this._elementRef.nativeElement).pipe(debounceTime(32), takeUntil(this._destroyed)); const viewportResize = this._viewportRuler.change(150).pipe(takeUntil(this._destroyed)); const realign = () => { this.updatePagination(); this._alignInkBarToSelectedTab(); }; this._keyManager = new FocusKeyManager(this._items).withHorizontalOrientation(this._getLayoutDirection()).withHomeAndEnd().withWrap().skipPredicate(() => false); this._keyManager.updateActiveItem(Math.max(this._selectedIndex, 0)); afterNextRender(realign, { injector: this._injector }); merge(dirChange, viewportResize, resize, this._items.changes, this._itemsResized()).pipe(takeUntil(this._destroyed)).subscribe(() => { this._ngZone.run(() => { Promise.resolve().then(() => { this._scrollDistance = Math.max(0, Math.min(this._getMaxScrollDistance(), this._scrollDistance)); realign(); }); }); this._keyManager?.withHorizontalOrientation(this._getLayoutDirection()); }); this._keyManager.change.subscribe(newFocusIndex => { this.indexFocused.emit(newFocusIndex); this._setTabFocus(newFocusIndex); }); } _itemsResized() { if (typeof ResizeObserver !== 'function') { return EMPTY; } return this._items.changes.pipe(startWith(this._items), switchMap(tabItems => new Observable(observer => this._ngZone.runOutsideAngular(() => { const resizeObserver = new ResizeObserver(entries => observer.next(entries)); tabItems.forEach(item => resizeObserver.observe(item.elementRef.nativeElement)); return () => { resizeObserver.disconnect(); }; }))), skip(1), filter(entries => entries.some(e => e.contentRect.width > 0 && e.contentRect.height > 0))); } ngAfterContentChecked() { if (this._tabLabelCount != this._items.length) { this.updatePagination(); this._tabLabelCount = this._items.length; this._changeDetectorRef.markForCheck(); } if (this._selectedIndexChanged) { this._scrollToLabel(this._selectedIndex); this._checkScrollingControls(); this._alignInkBarToSelectedTab(); this._selectedIndexChanged = false; this._changeDetectorRef.markForCheck(); } if (this._scrollDistanceChanged) { this._updateTabScrollPosition(); this._scrollDistanceChanged = false; this._changeDetectorRef.markForCheck(); } } ngOnDestroy() { this._eventCleanups.forEach(cleanup => cleanup()); this._keyManager?.destroy(); this._destroyed.next(); this._destroyed.complete(); this._stopScrolling.complete(); } _handleKeydown(event) { if (hasModifierKey(event)) { return; } switch (event.keyCode) { case ENTER: case SPACE: if (this.focusIndex !== this.selectedIndex) { const item = this._items.get(this.focusIndex); if (item && !item.disabled) { this.selectFocusedIndex.emit(this.focusIndex); this._itemSelected(event); } } break; default: this._keyManager?.onKeydown(event); } } _onContentChanges() { const textContent = this._elementRef.nativeElement.textContent; if (textContent !== this._currentTextContent) { this._currentTextContent = textContent || ''; this._ngZone.run(() => { this.updatePagination(); this._alignInkBarToSelectedTab(); this._changeDetectorRef.markForCheck(); }); } } updatePagination() { this._checkPaginationEnabled(); this._checkScrollingControls(); this._updateTabScrollPosition(); } get focusIndex() { return this._keyManager ? this._keyManager.activeItemIndex : 0; } set focusIndex(value) { if (!this._isValidIndex(value) || this.focusIndex === value || !this._keyManager) { return; } this._keyManager.setActiveItem(value); } _isValidIndex(index) { return this._items ? !!this._items.toArray()[index] : true; } _setTabFocus(tabIndex) { if (this._showPaginationControls) { this._scrollToLabel(tabIndex); } if (this._items && this._items.length) { this._items.toArray()[tabIndex].focus(); const containerEl = this._tabListContainer.nativeElement; const dir = this._getLayoutDirection(); if (dir == 'ltr') { containerEl.scrollLeft = 0; } else { containerEl.scrollLeft = containerEl.scrollWidth - containerEl.offsetWidth; } } } _getLayoutDirection() { return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr'; } _updateTabScrollPosition() { if (this.disablePagination) { return; } const scrollDistance = this.scrollDistance; const translateX = this._getLayoutDirection() === 'ltr' ? -scrollDistance : scrollDistance; this._tabList.nativeElement.style.transform = `translateX(${Math.round(translateX)}px)`; if (this._platform.TRIDENT || this._platform.EDGE) { this._tabListContainer.nativeElement.scrollLeft = 0; } } get scrollDistance() { return this._scrollDistance; } set scrollDistance(value) { this._scrollTo(value); } _scrollHeader(direction) { const viewLength = this._tabListContainer.nativeElement.offsetWidth; const scrollAmount = (direction == 'before' ? -1 : 1) * viewLength / 3; return this._scrollTo(this._scrollDistance + scrollAmount); } _handlePaginatorClick(direction) { this._stopInterval(); this._scrollHeader(direction); } _scrollToLabel(labelIndex) { if (this.disablePagination) { return; } const selectedLabel = this._items ? this._items.toArray()[labelIndex] : null; if (!selectedLabel) { return; } const viewLength = this._tabListContainer.nativeElement.offsetWidth; const { offsetLeft, offsetWidth } = selectedLabel.elementRef.nativeElement; let labelBeforePos, labelAfterPos; if (this._getLayoutDirection() == 'ltr') { labelBeforePos = offsetLeft; labelAfterPos = labelBeforePos + offsetWidth; } else { labelAfterPos = this._tabListInner.nativeElement.offsetWidth - offsetLeft; labelBeforePos = labelAfterPos - offsetWidth; } const beforeVisiblePos = this.scrollDistance; const afterVisiblePos = this.scrollDistance + viewLength; if (labelBeforePos < beforeVisiblePos) { this.scrollDistance -= beforeVisiblePos - labelBeforePos; } else if (labelAfterPos > afterVisiblePos) { this.scrollDistance += Math.min(labelAfterPos - afterVisiblePos, labelBeforePos - beforeVisiblePos); } } _checkPaginationEnabled() { if (this.disablePagination) { this._showPaginationControls = false; } else { const scrollWidth = this._tabListInner.nativeElement.scrollWidth; const containerWidth = this._elementRef.nativeElement.offsetWidth; const isEnabled = scrollWidth - containerWidth >= 5; if (!isEnabled) { this.scrollDistance = 0; } if (isEnabled !== this._showPaginationControls) { this._showPaginationControls = isEnabled; this._changeDetectorRef.markForCheck(); } } } _checkScrollingControls() { if (this.disablePagination) { this._disableScrollAfter = this._disableScrollBefore = true; } else { this._disableScrollBefore = this.scrollDistance == 0; this._disableScrollAfter = this.scrollDistance == this._getMaxScrollDistance(); this._changeDetectorRef.markForCheck(); } } _getMaxScrollDistance() { const lengthOfTabList = this._tabListInner.nativeElement.scrollWidth; const viewLength = this._tabListContainer.nativeElement.offsetWidth; return lengthOfTabList - viewLength || 0; } _alignInkBarToSelectedTab() { const selectedItem = this._items && this._items.length ? this._items.toArray()[this.selectedIndex] : null; const selectedLabelWrapper = selectedItem ? selectedItem.elementRef.nativeElement : null; if (selectedLabelWrapper) { this._inkBar.alignToElement(selectedLabelWrapper); } else { this._inkBar.hide(); } } _stopInterval() { this._stopScrolling.next(); } _handlePaginatorPress(direction, mouseEvent) { if (mouseEvent && mouseEvent.button != null && mouseEvent.button !== 0) { return; } this._stopInterval(); timer(HEADER_SCROLL_DELAY, HEADER_SCROLL_INTERVAL).pipe(takeUntil(merge(this._stopScrolling, this._destroyed))).subscribe(() => { const { maxScrollDistance, distance } = this._scrollHeader(direction); if (distance === 0 || distance >= maxScrollDistance) { this._stopInterval(); } }); } _scrollTo(position) { if (this.disablePagination) { return { maxScrollDistance: 0, distance: 0 }; } const maxScrollDistance = this._getMaxScrollDistance(); this._scrollDistance = Math.max(0, Math.min(maxScrollDistance, position)); this._scrollDistanceChanged = true; this._checkScrollingControls(); return { maxScrollDistance, distance: this._scrollDistance }; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatPaginatedTabHeader, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "21.0.3", type: MatPaginatedTabHeader, isStandalone: true, inputs: { disablePagination: ["disablePagination", "disablePagination", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute] }, outputs: { selectFocusedIndex: "selectFocusedIndex", indexFocused: "indexFocused" }, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatPaginatedTabHeader, decorators: [{ type: Directive }], ctorParameters: () => [], propDecorators: { disablePagination: [{ type: Input, args: [{ transform: booleanAttribute }] }], selectedIndex: [{ type: Input, args: [{ transform: numberAttribute }] }], selectFocusedIndex: [{ type: Output }], indexFocused: [{ type: Output }] } }); class MatTabHeader extends MatPaginatedTabHeader { _items; _tabListContainer; _tabList; _tabListInner; _nextPaginator; _previousPaginator; _inkBar; ariaLabel; ariaLabelledby; disableRipple = false; ngAfterContentInit() { this._inkBar = new MatInkBar(this._items); super.ngAfterContentInit(); } _itemSelected(event) { event.preventDefault(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabHeader, deps: null, target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.3", type: MatTabHeader, isStandalone: true, selector: "mat-tab-header", inputs: { ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, host: { properties: { "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'" }, classAttribute: "mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: MatTabLabelWrapper }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], usesInheritance: true, ngImport: i0, template: "\n
\n
\n
\n\n\n \n
\n \n
\n \n\n\n
\n
\n
\n", styles: [".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-divider-height, 1px);border-bottom-color:var(--mat-tab-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-divider-height, 1px);border-top-color:var(--mat-tab-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-labels,.mat-mdc-tab-labels.cdk-drop-list{min-height:var(--mat-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabHeader, decorators: [{ type: Component, args: [{ selector: 'mat-tab-header', encapsulation: ViewEncapsulation.None, 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], template: "\n
\n
\n
\n\n\n \n
\n \n
\n \n\n\n
\n
\n
\n", styles: [".mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-label-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-divider-height, 1px);border-bottom-color:var(--mat-tab-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container{border-bottom:none;border-top-style:solid;border-top-width:var(--mat-tab-divider-height, 1px);border-top-color:var(--mat-tab-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-labels{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-header .mat-mdc-tab-labels{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-labels,.mat-mdc-tab-labels.cdk-drop-list{min-height:var(--mat-tab-container-height, 48px)}.mat-mdc-tab::before{margin:5px}@media(forced-colors: active){.mat-mdc-tab[aria-disabled=true]{color:GrayText}}\n"] }] }], propDecorators: { _items: [{ type: ContentChildren, args: [MatTabLabelWrapper, { descendants: false }] }], _tabListContainer: [{ type: ViewChild, args: ['tabListContainer', { static: true }] }], _tabList: [{ type: ViewChild, args: ['tabList', { static: true }] }], _tabListInner: [{ type: ViewChild, args: ['tabListInner', { static: true }] }], _nextPaginator: [{ type: ViewChild, args: ['nextPaginator'] }], _previousPaginator: [{ type: ViewChild, args: ['previousPaginator'] }], ariaLabel: [{ type: Input, args: ['aria-label'] }], ariaLabelledby: [{ type: Input, args: ['aria-labelledby'] }], disableRipple: [{ type: Input, args: [{ transform: booleanAttribute }] }] } }); const MAT_TABS_CONFIG = new InjectionToken('MAT_TABS_CONFIG'); class MatTabBodyPortal extends CdkPortalOutlet { _host = inject(MatTabBody); _ngZone = inject(NgZone); _centeringSub = Subscription.EMPTY; _leavingSub = Subscription.EMPTY; constructor() { super(); } ngOnInit() { super.ngOnInit(); this._centeringSub = this._host._beforeCentering.pipe(startWith(this._host._isCenterPosition())).subscribe(isCentering => { if (this._host._content && isCentering && !this.hasAttached()) { this._ngZone.run(() => { Promise.resolve().then(); this.attach(this._host._content); }); } }); this._leavingSub = this._host._afterLeavingCenter.subscribe(() => { if (!this._host.preserveContent) { this._ngZone.run(() => this.detach()); } }); } ngOnDestroy() { super.ngOnDestroy(); this._centeringSub.unsubscribe(); this._leavingSub.unsubscribe(); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabBodyPortal, deps: [], target: i0.ɵɵFactoryTarget.Directive }); static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.0.3", type: MatTabBodyPortal, isStandalone: true, selector: "[matTabBodyHost]", usesInheritance: true, ngImport: i0 }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabBodyPortal, decorators: [{ type: Directive, args: [{ selector: '[matTabBodyHost]' }] }], ctorParameters: () => [] }); class MatTabBody { _elementRef = inject(ElementRef); _dir = inject(Directionality, { optional: true }); _ngZone = inject(NgZone); _injector = inject(Injector); _renderer = inject(Renderer2); _diAnimationsDisabled = _animationsDisabled(); _eventCleanups; _initialized = false; _fallbackTimer; _positionIndex; _dirChangeSubscription = Subscription.EMPTY; _position; _previousPosition; _onCentering = new EventEmitter(); _beforeCentering = new EventEmitter(); _afterLeavingCenter = new EventEmitter(); _onCentered = new EventEmitter(true); _portalHost; _contentElement; _content; animationDuration = '500ms'; preserveContent = false; set position(position) { this._positionIndex = position; this._computePositionAnimationState(); } constructor() { if (this._dir) { const changeDetectorRef = inject(ChangeDetectorRef); this._dirChangeSubscription = this._dir.change.subscribe(dir => { this._computePositionAnimationState(dir); changeDetectorRef.markForCheck(); }); } } ngOnInit() { this._bindTransitionEvents(); if (this._position === 'center') { this._setActiveClass(true); afterNextRender(() => this._onCentering.emit(this._elementRef.nativeElement.clientHeight), { injector: this._injector }); } this._initialized = true; } ngOnDestroy() { clearTimeout(this._fallbackTimer); this._eventCleanups?.forEach(cleanup => cleanup()); this._dirChangeSubscription.unsubscribe(); } _bindTransitionEvents() { this._ngZone.runOutsideAngular(() => { const element = this._elementRef.nativeElement; const transitionDone = event => { if (event.target === this._contentElement?.nativeElement) { this._elementRef.nativeElement.classList.remove('mat-tab-body-animating'); if (event.type === 'transitionend') { this._transitionDone(); } } }; this._eventCleanups = [this._renderer.listen(element, 'transitionstart', event => { if (event.target === this._contentElement?.nativeElement) { this._elementRef.nativeElement.classList.add('mat-tab-body-animating'); this._transitionStarted(); } }), this._renderer.listen(element, 'transitionend', transitionDone), this._renderer.listen(element, 'transitioncancel', transitionDone)]; }); } _transitionStarted() { clearTimeout(this._fallbackTimer); const isCentering = this._position === 'center'; this._beforeCentering.emit(isCentering); if (isCentering) { this._onCentering.emit(this._elementRef.nativeElement.clientHeight); } } _transitionDone() { if (this._position === 'center') { this._onCentered.emit(); } else if (this._previousPosition === 'center') { this._afterLeavingCenter.emit(); } } _setActiveClass(isActive) { this._elementRef.nativeElement.classList.toggle('mat-mdc-tab-body-active', isActive); } _getLayoutDirection() { return this._dir && this._dir.value === 'rtl' ? 'rtl' : 'ltr'; } _isCenterPosition() { return this._positionIndex === 0; } _computePositionAnimationState(dir = this._getLayoutDirection()) { this._previousPosition = this._position; if (this._positionIndex < 0) { this._position = dir == 'ltr' ? 'left' : 'right'; } else if (this._positionIndex > 0) { this._position = dir == 'ltr' ? 'right' : 'left'; } else { this._position = 'center'; } if (this._animationsDisabled()) { this._simulateTransitionEvents(); } else if (this._initialized && (this._position === 'center' || this._previousPosition === 'center')) { clearTimeout(this._fallbackTimer); this._fallbackTimer = this._ngZone.runOutsideAngular(() => setTimeout(() => this._simulateTransitionEvents(), 100)); } } _simulateTransitionEvents() { this._transitionStarted(); afterNextRender(() => this._transitionDone(), { injector: this._injector }); } _animationsDisabled() { return this._diAnimationsDisabled || this.animationDuration === '0ms' || this.animationDuration === '0s'; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabBody, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MatTabBody, isStandalone: true, selector: "mat-tab-body", inputs: { _content: ["content", "_content"], animationDuration: "animationDuration", preserveContent: "preserveContent", position: "position" }, outputs: { _onCentering: "_onCentering", _beforeCentering: "_beforeCentering", _onCentered: "_onCentered" }, host: { properties: { "attr.inert": "_position === \"center\" ? null : \"\"" }, classAttribute: "mat-mdc-tab-body" }, viewQueries: [{ propertyName: "_portalHost", first: true, predicate: MatTabBodyPortal, descendants: true }, { propertyName: "_contentElement", first: true, predicate: ["content"], descendants: true }], ngImport: i0, template: "\n \n\n", styles: [".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto;transform:none;visibility:hidden}.mat-tab-body-animating>.mat-mdc-tab-body-content,.mat-mdc-tab-body-active>.mat-mdc-tab-body-content{visibility:visible}.mat-tab-body-animating>.mat-mdc-tab-body-content{min-height:1px}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-tab-body-content-can-animate{transition:transform var(--mat-tab-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable .mat-tab-body-content-can-animate{transition:none}.mat-tab-body-content-left{transform:translate3d(-100%, 0, 0)}.mat-tab-body-content-right{transform:translate3d(100%, 0, 0)}\n"], dependencies: [{ kind: "directive", type: MatTabBodyPortal, selector: "[matTabBodyHost]" }, { kind: "directive", type: CdkScrollable, selector: "[cdk-scrollable], [cdkScrollable]" }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabBody, decorators: [{ type: Component, args: [{ selector: 'mat-tab-body', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, host: { 'class': 'mat-mdc-tab-body', '[attr.inert]': '_position === "center" ? null : ""' }, imports: [MatTabBodyPortal, CdkScrollable], template: "\n \n\n", styles: [".mat-mdc-tab-body{top:0;left:0;right:0;bottom:0;position:absolute;display:block;overflow:hidden;outline:0;flex-basis:100%}.mat-mdc-tab-body.mat-mdc-tab-body-active{position:relative;overflow-x:hidden;overflow-y:auto;z-index:1;flex-grow:1}.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active{overflow-y:hidden}.mat-mdc-tab-body-content{height:100%;overflow:auto;transform:none;visibility:hidden}.mat-tab-body-animating>.mat-mdc-tab-body-content,.mat-mdc-tab-body-active>.mat-mdc-tab-body-content{visibility:visible}.mat-tab-body-animating>.mat-mdc-tab-body-content{min-height:1px}.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content{overflow:hidden}.mat-tab-body-content-can-animate{transition:transform var(--mat-tab-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable .mat-tab-body-content-can-animate{transition:none}.mat-tab-body-content-left{transform:translate3d(-100%, 0, 0)}.mat-tab-body-content-right{transform:translate3d(100%, 0, 0)}\n"] }] }], ctorParameters: () => [], propDecorators: { _onCentering: [{ type: Output }], _beforeCentering: [{ type: Output }], _onCentered: [{ type: Output }], _portalHost: [{ type: ViewChild, args: [MatTabBodyPortal] }], _contentElement: [{ type: ViewChild, args: ['content'] }], _content: [{ type: Input, args: ['content'] }], animationDuration: [{ type: Input }], preserveContent: [{ type: Input }], position: [{ type: Input }] } }); class MatTabGroup { _elementRef = inject(ElementRef); _changeDetectorRef = inject(ChangeDetectorRef); _ngZone = inject(NgZone); _tabsSubscription = Subscription.EMPTY; _tabLabelSubscription = Subscription.EMPTY; _tabBodySubscription = Subscription.EMPTY; _diAnimationsDisabled = _animationsDisabled(); _allTabs; _tabBodies; _tabBodyWrapper; _tabHeader; _tabs = new QueryList(); _indexToSelect = 0; _lastFocusedTabIndex = null; _tabBodyWrapperHeight = 0; color; get fitInkBarToContent() { return this._fitInkBarToContent; } set fitInkBarToContent(value) { this._fitInkBarToContent = value; this._changeDetectorRef.markForCheck(); } _fitInkBarToContent = false; stretchTabs = true; alignTabs = null; dynamicHeight = false; get selectedIndex() { return this._selectedIndex; } set selectedIndex(value) { this._indexToSelect = isNaN(value) ? null : value; } _selectedIndex = null; headerPosition = 'above'; get animationDuration() { return this._animationDuration; } set animationDuration(value) { const stringValue = value + ''; this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue; } _animationDuration; get contentTabIndex() { return this._contentTabIndex; } set contentTabIndex(value) { this._contentTabIndex = isNaN(value) ? null : value; } _contentTabIndex = null; disablePagination = false; disableRipple = false; preserveContent = false; get backgroundColor() { return this._backgroundColor; } set backgroundColor(value) { const classList = this._elementRef.nativeElement.classList; classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`); if (value) { classList.add('mat-tabs-with-background', `mat-background-${value}`); } this._backgroundColor = value; } _backgroundColor; ariaLabel; ariaLabelledby; selectedIndexChange = new EventEmitter(); focusChange = new EventEmitter(); animationDone = new EventEmitter(); selectedTabChange = new EventEmitter(true); _groupId; _isServer = !inject(Platform).isBrowser; constructor() { const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true }); this._groupId = inject(_IdGenerator).getId('mat-tab-group-'); this.animationDuration = defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : '500ms'; this.disablePagination = defaultConfig && defaultConfig.disablePagination != null ? defaultConfig.disablePagination : false; this.dynamicHeight = defaultConfig && defaultConfig.dynamicHeight != null ? defaultConfig.dynamicHeight : false; if (defaultConfig?.contentTabIndex != null) { this.contentTabIndex = defaultConfig.contentTabIndex; } this.preserveContent = !!defaultConfig?.preserveContent; this.fitInkBarToContent = defaultConfig && defaultConfig.fitInkBarToContent != null ? defaultConfig.fitInkBarToContent : false; this.stretchTabs = defaultConfig && defaultConfig.stretchTabs != null ? defaultConfig.stretchTabs : true; this.alignTabs = defaultConfig && defaultConfig.alignTabs != null ? defaultConfig.alignTabs : null; } ngAfterContentChecked() { const indexToSelect = this._indexToSelect = this._clampTabIndex(this._indexToSelect); if (this._selectedIndex != indexToSelect) { const isFirstRun = this._selectedIndex == null; if (!isFirstRun) { this.selectedTabChange.emit(this._createChangeEvent(indexToSelect)); const wrapper = this._tabBodyWrapper.nativeElement; wrapper.style.minHeight = wrapper.clientHeight + 'px'; } Promise.resolve().then(() => { this._tabs.forEach((tab, index) => tab.isActive = index === indexToSelect); if (!isFirstRun) { this.selectedIndexChange.emit(indexToSelect); this._tabBodyWrapper.nativeElement.style.minHeight = ''; } }); } this._tabs.forEach((tab, index) => { tab.position = index - indexToSelect; if (this._selectedIndex != null && tab.position == 0 && !tab.origin) { tab.origin = indexToSelect - this._selectedIndex; } }); if (this._selectedIndex !== indexToSelect) { this._selectedIndex = indexToSelect; this._lastFocusedTabIndex = null; this._changeDetectorRef.markForCheck(); } } ngAfterContentInit() { this._subscribeToAllTabChanges(); this._subscribeToTabLabels(); this._tabsSubscription = this._tabs.changes.subscribe(() => { const indexToSelect = this._clampTabIndex(this._indexToSelect); if (indexToSelect === this._selectedIndex) { const tabs = this._tabs.toArray(); let selectedTab; for (let i = 0; i < tabs.length; i++) { if (tabs[i].isActive) { this._indexToSelect = this._selectedIndex = i; this._lastFocusedTabIndex = null; selectedTab = tabs[i]; break; } } if (!selectedTab && tabs[indexToSelect]) { Promise.resolve().then(() => { tabs[indexToSelect].isActive = true; this.selectedTabChange.emit(this._createChangeEvent(indexToSelect)); }); } } this._changeDetectorRef.markForCheck(); }); } ngAfterViewInit() { this._tabBodySubscription = this._tabBodies.changes.subscribe(() => this._bodyCentered(true)); } _subscribeToAllTabChanges() { this._allTabs.changes.pipe(startWith(this._allTabs)).subscribe(tabs => { this._tabs.reset(tabs.filter(tab => { return tab._closestTabGroup === this || !tab._closestTabGroup; })); this._tabs.notifyOnChanges(); }); } ngOnDestroy() { this._tabs.destroy(); this._tabsSubscription.unsubscribe(); this._tabLabelSubscription.unsubscribe(); this._tabBodySubscription.unsubscribe(); } realignInkBar() { if (this._tabHeader) { this._tabHeader._alignInkBarToSelectedTab(); } } updatePagination() { if (this._tabHeader) { this._tabHeader.updatePagination(); } } focusTab(index) { const header = this._tabHeader; if (header) { header.focusIndex = index; } } _focusChanged(index) { this._lastFocusedTabIndex = index; this.focusChange.emit(this._createChangeEvent(index)); } _createChangeEvent(index) { const event = new MatTabChangeEvent(); event.index = index; if (this._tabs && this._tabs.length) { event.tab = this._tabs.toArray()[index]; } return event; } _subscribeToTabLabels() { if (this._tabLabelSubscription) { this._tabLabelSubscription.unsubscribe(); } this._tabLabelSubscription = merge(...this._tabs.map(tab => tab._stateChanges)).subscribe(() => this._changeDetectorRef.markForCheck()); } _clampTabIndex(index) { return Math.min(this._tabs.length - 1, Math.max(index || 0, 0)); } _getTabLabelId(tab, index) { return tab.id || `${this._groupId}-label-${index}`; } _getTabContentId(index) { return `${this._groupId}-content-${index}`; } _setTabBodyWrapperHeight(tabHeight) { if (!this.dynamicHeight || !this._tabBodyWrapperHeight) { this._tabBodyWrapperHeight = tabHeight; return; } const wrapper = this._tabBodyWrapper.nativeElement; wrapper.style.height = this._tabBodyWrapperHeight + 'px'; if (this._tabBodyWrapper.nativeElement.offsetHeight) { wrapper.style.height = tabHeight + 'px'; } } _removeTabBodyWrapperHeight() { const wrapper = this._tabBodyWrapper.nativeElement; this._tabBodyWrapperHeight = wrapper.clientHeight; wrapper.style.height = ''; this._ngZone.run(() => this.animationDone.emit()); } _handleClick(tab, tabHeader, index) { tabHeader.focusIndex = index; if (!tab.disabled) { this.selectedIndex = index; } } _getTabIndex(index) { const targetIndex = this._lastFocusedTabIndex ?? this.selectedIndex; return index === targetIndex ? 0 : -1; } _tabFocusChanged(focusOrigin, index) { if (focusOrigin && focusOrigin !== 'mouse' && focusOrigin !== 'touch') { this._tabHeader.focusIndex = index; } } _bodyCentered(isCenter) { if (isCenter) { this._tabBodies?.forEach((body, i) => body._setActiveClass(i === this._selectedIndex)); } } _animationsDisabled() { return this._diAnimationsDisabled || this.animationDuration === '0' || this.animationDuration === '0ms'; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabGroup, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.3", type: MatTabGroup, isStandalone: true, selector: "mat-tab-group", inputs: { color: "color", fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], alignTabs: ["mat-align-tabs", "alignTabs"], dynamicHeight: ["dynamicHeight", "dynamicHeight", booleanAttribute], selectedIndex: ["selectedIndex", "selectedIndex", numberAttribute], headerPosition: "headerPosition", animationDuration: "animationDuration", contentTabIndex: ["contentTabIndex", "contentTabIndex", numberAttribute], disablePagination: ["disablePagination", "disablePagination", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], preserveContent: ["preserveContent", "preserveContent", booleanAttribute], backgroundColor: "backgroundColor", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledby: ["aria-labelledby", "ariaLabelledby"] }, outputs: { selectedIndexChange: "selectedIndexChange", focusChange: "focusChange", animationDone: "animationDone", selectedTabChange: "selectedTabChange" }, host: { properties: { "class": "\"mat-\" + (color || \"primary\")", "class.mat-mdc-tab-group-dynamic-height": "dynamicHeight", "class.mat-mdc-tab-group-inverted-header": "headerPosition === \"below\"", "class.mat-mdc-tab-group-stretch-tabs": "stretchTabs", "attr.mat-align-tabs": "alignTabs", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-group" }, providers: [{ provide: MAT_TAB_GROUP, useExisting: MatTabGroup }], queries: [{ propertyName: "_allTabs", predicate: MatTab, descendants: true }], viewQueries: [{ propertyName: "_tabBodyWrapper", first: true, predicate: ["tabBodyWrapper"], descendants: true }, { propertyName: "_tabHeader", first: true, predicate: ["tabHeader"], descendants: true }, { propertyName: "_tabBodies", predicate: MatTabBody, descendants: true }], exportAs: ["matTabGroup"], ngImport: i0, template: "\n\n @for (tab of _tabs; track tab) {\n
\n \n\n \n
\n\n \n \n \n @if (tab.templateLabel) {\n \n } @else {{{tab.textLabel}}}\n \n \n \n }\n
\n\n\n@if (_isServer) {\n \n}\n\n\n @for (tab of _tabs; track tab;) {\n \n }\n\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab.mdc-tab{flex-grow:0}.mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.mat-mdc-tab .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab{flex-grow:1}.mat-mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-background-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-focus-indicator::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header{flex-direction:column-reverse}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mat-mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable{transition:none !important;animation:none !important}\n"], dependencies: [{ kind: "component", type: MatTabHeader, selector: "mat-tab-header", inputs: ["aria-label", "aria-labelledby", "disableRipple"] }, { kind: "directive", type: MatTabLabelWrapper, selector: "[matTabLabelWrapper]", inputs: ["disabled"] }, { kind: "directive", type: CdkMonitorFocus, selector: "[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]", outputs: ["cdkFocusChange"], exportAs: ["cdkMonitorFocus"] }, { kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkPortalOutlet, selector: "[cdkPortalOutlet]", inputs: ["cdkPortalOutlet"], outputs: ["attached"], exportAs: ["cdkPortalOutlet"] }, { kind: "component", type: MatTabBody, selector: "mat-tab-body", inputs: ["content", "animationDuration", "preserveContent", "position"], outputs: ["_onCentering", "_beforeCentering", "_onCentered"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabGroup, decorators: [{ type: Component, args: [{ selector: 'mat-tab-group', exportAs: 'matTabGroup', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, providers: [{ provide: MAT_TAB_GROUP, useExisting: MatTabGroup }], host: { 'class': 'mat-mdc-tab-group', '[class]': '"mat-" + (color || "primary")', '[class.mat-mdc-tab-group-dynamic-height]': 'dynamicHeight', '[class.mat-mdc-tab-group-inverted-header]': 'headerPosition === "below"', '[class.mat-mdc-tab-group-stretch-tabs]': 'stretchTabs', '[attr.mat-align-tabs]': 'alignTabs', '[style.--mat-tab-animation-duration]': 'animationDuration' }, imports: [MatTabHeader, MatTabLabelWrapper, CdkMonitorFocus, MatRipple, CdkPortalOutlet, MatTabBody], template: "\n\n @for (tab of _tabs; track tab) {\n
\n \n\n \n
\n\n \n \n \n @if (tab.templateLabel) {\n \n } @else {{{tab.textLabel}}}\n \n \n \n }\n
\n\n\n@if (_isServer) {\n \n}\n\n\n @for (tab of _tabs; track tab;) {\n \n }\n\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab.mdc-tab{flex-grow:0}.mat-mdc-tab .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab:focus .mdc-tab__text-label{color:var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.mat-mdc-tab .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs>.mat-mdc-tab-header .mat-mdc-tab{flex-grow:1}.mat-mdc-tab-group{display:flex;flex-direction:column;max-width:100%}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-background-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background.mat-primary>.mat-mdc-tab-header .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-header .mat-mdc-tab:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-focus-indicator::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mdc-tab__ripple::before,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-group.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header{flex-direction:column-reverse}.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline{align-self:flex-start}.mat-mdc-tab-body-wrapper{position:relative;overflow:hidden;display:flex;transition:height 500ms cubic-bezier(0.35, 0, 0.25, 1)}.mat-mdc-tab-body-wrapper._mat-animation-noopable{transition:none !important;animation:none !important}\n"] }] }], ctorParameters: () => [], propDecorators: { _allTabs: [{ type: ContentChildren, args: [MatTab, { descendants: true }] }], _tabBodies: [{ type: ViewChildren, args: [MatTabBody] }], _tabBodyWrapper: [{ type: ViewChild, args: ['tabBodyWrapper'] }], _tabHeader: [{ type: ViewChild, args: ['tabHeader'] }], color: [{ type: Input }], fitInkBarToContent: [{ type: Input, args: [{ transform: booleanAttribute }] }], stretchTabs: [{ type: Input, args: [{ alias: 'mat-stretch-tabs', transform: booleanAttribute }] }], alignTabs: [{ type: Input, args: [{ alias: 'mat-align-tabs' }] }], dynamicHeight: [{ type: Input, args: [{ transform: booleanAttribute }] }], selectedIndex: [{ type: Input, args: [{ transform: numberAttribute }] }], headerPosition: [{ type: Input }], animationDuration: [{ type: Input }], contentTabIndex: [{ type: Input, args: [{ transform: numberAttribute }] }], disablePagination: [{ type: Input, args: [{ transform: booleanAttribute }] }], disableRipple: [{ type: Input, args: [{ transform: booleanAttribute }] }], preserveContent: [{ type: Input, args: [{ transform: booleanAttribute }] }], backgroundColor: [{ type: Input }], ariaLabel: [{ type: Input, args: ['aria-label'] }], ariaLabelledby: [{ type: Input, args: ['aria-labelledby'] }], selectedIndexChange: [{ type: Output }], focusChange: [{ type: Output }], animationDone: [{ type: Output }], selectedTabChange: [{ type: Output }] } }); class MatTabChangeEvent { index; tab; } class MatTabNav extends MatPaginatedTabHeader { _focusedItem = signal(null, ...(ngDevMode ? [{ debugName: "_focusedItem" }] : [])); get fitInkBarToContent() { return this._fitInkBarToContent.value; } set fitInkBarToContent(value) { this._fitInkBarToContent.next(value); this._changeDetectorRef.markForCheck(); } _fitInkBarToContent = new BehaviorSubject(false); stretchTabs = true; get animationDuration() { return this._animationDuration; } set animationDuration(value) { const stringValue = value + ''; this._animationDuration = /^\d+$/.test(stringValue) ? value + 'ms' : stringValue; } _animationDuration; _items; get backgroundColor() { return this._backgroundColor; } set backgroundColor(value) { const classList = this._elementRef.nativeElement.classList; classList.remove('mat-tabs-with-background', `mat-background-${this.backgroundColor}`); if (value) { classList.add('mat-tabs-with-background', `mat-background-${value}`); } this._backgroundColor = value; } _backgroundColor; get disableRipple() { return this._disableRipple(); } set disableRipple(value) { this._disableRipple.set(value); } _disableRipple = signal(false, ...(ngDevMode ? [{ debugName: "_disableRipple" }] : [])); color = 'primary'; tabPanel; _tabListContainer; _tabList; _tabListInner; _nextPaginator; _previousPaginator; _inkBar; constructor() { const defaultConfig = inject(MAT_TABS_CONFIG, { optional: true }); super(); this.disablePagination = defaultConfig && defaultConfig.disablePagination != null ? defaultConfig.disablePagination : false; this.fitInkBarToContent = defaultConfig && defaultConfig.fitInkBarToContent != null ? defaultConfig.fitInkBarToContent : false; this.stretchTabs = defaultConfig && defaultConfig.stretchTabs != null ? defaultConfig.stretchTabs : true; } _itemSelected() {} ngAfterContentInit() { this._inkBar = new MatInkBar(this._items); this._items.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => this.updateActiveLink()); super.ngAfterContentInit(); this._keyManager.change.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => this._focusedItem.set(this._keyManager?.activeItem || null)); } ngAfterViewInit() { if (!this.tabPanel && (typeof ngDevMode === 'undefined' || ngDevMode)) { throw new Error('A mat-tab-nav-panel must be specified via [tabPanel].'); } super.ngAfterViewInit(); } updateActiveLink() { if (!this._items) { return; } const items = this._items.toArray(); for (let i = 0; i < items.length; i++) { if (items[i].active) { this.selectedIndex = i; if (this.tabPanel) { this.tabPanel._activeTabId = items[i].id; } this._focusedItem.set(items[i]); this._changeDetectorRef.markForCheck(); return; } } this.selectedIndex = -1; } _getRole() { return this.tabPanel ? 'tablist' : this._elementRef.nativeElement.getAttribute('role'); } _hasFocus(link) { return this._keyManager?.activeItem === link; } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabNav, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.3", type: MatTabNav, isStandalone: true, selector: "[mat-tab-nav-bar]", inputs: { fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute], stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute], animationDuration: "animationDuration", backgroundColor: "backgroundColor", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], color: "color", tabPanel: "tabPanel" }, host: { properties: { "attr.role": "_getRole()", "class.mat-mdc-tab-header-pagination-controls-enabled": "_showPaginationControls", "class.mat-mdc-tab-header-rtl": "_getLayoutDirection() == 'rtl'", "class.mat-mdc-tab-nav-bar-stretch-tabs": "stretchTabs", "class.mat-primary": "color !== \"warn\" && color !== \"accent\"", "class.mat-accent": "color === \"accent\"", "class.mat-warn": "color === \"warn\"", "class._mat-animation-noopable": "_animationsDisabled", "style.--mat-tab-animation-duration": "animationDuration" }, classAttribute: "mat-mdc-tab-nav-bar mat-mdc-tab-header" }, queries: [{ propertyName: "_items", predicate: i0.forwardRef(() => MatTabLink), descendants: true }], viewQueries: [{ propertyName: "_tabListContainer", first: true, predicate: ["tabListContainer"], descendants: true, static: true }, { propertyName: "_tabList", first: true, predicate: ["tabList"], descendants: true, static: true }, { propertyName: "_tabListInner", first: true, predicate: ["tabListInner"], descendants: true, static: true }, { propertyName: "_nextPaginator", first: true, predicate: ["nextPaginator"], descendants: true }, { propertyName: "_previousPaginator", first: true, predicate: ["previousPaginator"], descendants: true }], exportAs: ["matTabNavBar", "matTabNav"], usesInheritance: true, ngImport: i0, template: "\n
\n
\n
\n\n\n\n
\n
\n
\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-links,.mat-mdc-tab-links.cdk-drop-list{min-height:var(--mat-tab-container-height, 48px)}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-divider-height, 1px);border-bottom-color:var(--mat-tab-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-foreground-color)}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }, { kind: "directive", type: CdkObserveContent, selector: "[cdkObserveContent]", inputs: ["cdkObserveContentDisabled", "debounce"], outputs: ["cdkObserveContent"], exportAs: ["cdkObserveContent"] }], changeDetection: i0.ChangeDetectionStrategy.Default, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabNav, decorators: [{ type: Component, args: [{ selector: '[mat-tab-nav-bar]', exportAs: 'matTabNavBar, matTabNav', host: { '[attr.role]': '_getRole()', 'class': 'mat-mdc-tab-nav-bar mat-mdc-tab-header', '[class.mat-mdc-tab-header-pagination-controls-enabled]': '_showPaginationControls', '[class.mat-mdc-tab-header-rtl]': "_getLayoutDirection() == 'rtl'", '[class.mat-mdc-tab-nav-bar-stretch-tabs]': 'stretchTabs', '[class.mat-primary]': 'color !== "warn" && color !== "accent"', '[class.mat-accent]': 'color === "accent"', '[class.mat-warn]': 'color === "warn"', '[class._mat-animation-noopable]': '_animationsDisabled', '[style.--mat-tab-animation-duration]': 'animationDuration' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.Default, imports: [MatRipple, CdkObserveContent], template: "\n
\n
\n
\n\n\n\n
\n
\n
\n", styles: [".mdc-tab{min-width:90px;padding:0 24px;display:flex;flex:1 0 auto;justify-content:center;box-sizing:border-box;border:none;outline:none;text-align:center;white-space:nowrap;cursor:pointer;z-index:1;touch-action:manipulation}.mdc-tab__content{display:flex;align-items:center;justify-content:center;height:inherit;pointer-events:none}.mdc-tab__text-label{transition:150ms color linear;display:inline-block;line-height:1;z-index:2}.mdc-tab--active .mdc-tab__text-label{transition-delay:100ms}._mat-animation-noopable .mdc-tab__text-label{transition:none}.mdc-tab-indicator{display:flex;position:absolute;top:0;left:0;justify-content:center;width:100%;height:100%;pointer-events:none;z-index:1}.mdc-tab-indicator__content{transition:var(--mat-tab-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);transform-origin:left;opacity:0}.mdc-tab-indicator__content--underline{align-self:flex-end;box-sizing:border-box;width:100%;border-top-style:solid}.mdc-tab-indicator--active .mdc-tab-indicator__content{opacity:1}._mat-animation-noopable .mdc-tab-indicator__content,.mdc-tab-indicator--no-transition .mdc-tab-indicator__content{transition:none}.mat-mdc-tab-ripple.mat-mdc-tab-ripple{position:absolute;top:0;left:0;bottom:0;right:0;pointer-events:none}.mat-mdc-tab-header{display:flex;overflow:hidden;position:relative;flex-shrink:0}.mdc-tab-indicator .mdc-tab-indicator__content{transition-duration:var(--mat-tab-animation-duration, 250ms)}.mat-mdc-tab-header-pagination{-webkit-user-select:none;user-select:none;position:relative;display:none;justify-content:center;align-items:center;min-width:32px;cursor:pointer;z-index:2;-webkit-tap-highlight-color:rgba(0,0,0,0);touch-action:none;box-sizing:content-box;outline:0}.mat-mdc-tab-header-pagination::-moz-focus-inner{border:0}.mat-mdc-tab-header-pagination .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination{display:flex}.mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after{padding-left:4px}.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(-135deg)}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,.mat-mdc-tab-header-pagination-after{padding-right:4px}.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron{transform:rotate(45deg)}.mat-mdc-tab-header-pagination-chevron{border-style:solid;border-width:2px 2px 0 0;height:8px;width:8px;border-color:var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header-pagination-disabled{box-shadow:none;cursor:default;pointer-events:none}.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron{opacity:.4}.mat-mdc-tab-list{flex-grow:1;position:relative;transition:transform 500ms cubic-bezier(0.35, 0, 0.25, 1)}._mat-animation-noopable .mat-mdc-tab-list{transition:none}.mat-mdc-tab-links{display:flex;flex:1 0 auto}[mat-align-tabs=center]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:center}[mat-align-tabs=end]>.mat-mdc-tab-link-container .mat-mdc-tab-links{justify-content:flex-end}.cdk-drop-list .mat-mdc-tab-links,.mat-mdc-tab-links.cdk-drop-list{min-height:var(--mat-tab-container-height, 48px)}.mat-mdc-tab-link-container{display:flex;flex-grow:1;overflow:hidden;z-index:1;border-bottom-style:solid;border-bottom-width:var(--mat-tab-divider-height, 1px);border-bottom-color:var(--mat-tab-divider-color, var(--mat-sys-surface-variant))}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination{background-color:var(--mat-tab-background-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary>.mat-mdc-tab-link-container .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab__text-label{color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background:not(.mat-primary)>.mat-mdc-tab-link-container .mat-mdc-tab-link:not(.mdc-tab--active) .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-focus-indicator::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-focus-indicator::before{border-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mdc-tab__ripple::before,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-ripple-element,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mdc-tab__ripple::before{background-color:var(--mat-tab-foreground-color)}.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,.mat-mdc-tab-nav-bar.mat-tabs-with-background>.mat-mdc-tab-header-pagination .mat-mdc-tab-header-pagination-chevron{color:var(--mat-tab-foreground-color)}\n"] }] }], ctorParameters: () => [], propDecorators: { fitInkBarToContent: [{ type: Input, args: [{ transform: booleanAttribute }] }], stretchTabs: [{ type: Input, args: [{ alias: 'mat-stretch-tabs', transform: booleanAttribute }] }], animationDuration: [{ type: Input }], _items: [{ type: ContentChildren, args: [forwardRef(() => MatTabLink), { descendants: true }] }], backgroundColor: [{ type: Input }], disableRipple: [{ type: Input, args: [{ transform: booleanAttribute }] }], color: [{ type: Input }], tabPanel: [{ type: Input }], _tabListContainer: [{ type: ViewChild, args: ['tabListContainer', { static: true }] }], _tabList: [{ type: ViewChild, args: ['tabList', { static: true }] }], _tabListInner: [{ type: ViewChild, args: ['tabListInner', { static: true }] }], _nextPaginator: [{ type: ViewChild, args: ['nextPaginator'] }], _previousPaginator: [{ type: ViewChild, args: ['previousPaginator'] }] } }); class MatTabLink extends InkBarItem { _tabNavBar = inject(MatTabNav); elementRef = inject(ElementRef); _focusMonitor = inject(FocusMonitor); _destroyed = new Subject(); _isActive = false; _tabIndex = computed(() => this._tabNavBar._focusedItem() === this ? this.tabIndex : -1, ...(ngDevMode ? [{ debugName: "_tabIndex" }] : [])); get active() { return this._isActive; } set active(value) { if (value !== this._isActive) { this._isActive = value; this._tabNavBar.updateActiveLink(); } } disabled = false; get disableRipple() { return this._disableRipple(); } set disableRipple(value) { this._disableRipple.set(value); } _disableRipple = signal(false, ...(ngDevMode ? [{ debugName: "_disableRipple" }] : [])); tabIndex = 0; rippleConfig; get rippleDisabled() { return this.disabled || this.disableRipple || this._tabNavBar.disableRipple || !!this.rippleConfig.disabled; } id = inject(_IdGenerator).getId('mat-tab-link-'); constructor() { super(); inject(_CdkPrivateStyleLoader).load(_StructuralStylesLoader); const globalRippleOptions = inject(MAT_RIPPLE_GLOBAL_OPTIONS, { optional: true }); const tabIndex = inject(new HostAttributeToken('tabindex'), { optional: true }); this.rippleConfig = globalRippleOptions || {}; this.tabIndex = tabIndex == null ? 0 : parseInt(tabIndex) || 0; if (_animationsDisabled()) { this.rippleConfig.animation = { enterDuration: 0, exitDuration: 0 }; } this._tabNavBar._fitInkBarToContent.pipe(takeUntil(this._destroyed)).subscribe(fitInkBarToContent => { this.fitInkBarToContent = fitInkBarToContent; }); } focus() { this.elementRef.nativeElement.focus(); } ngAfterViewInit() { this._focusMonitor.monitor(this.elementRef); } ngOnDestroy() { this._destroyed.next(); this._destroyed.complete(); super.ngOnDestroy(); this._focusMonitor.stopMonitoring(this.elementRef); } _handleFocus() { this._tabNavBar.focusIndex = this._tabNavBar._items.toArray().indexOf(this); } _handleKeydown(event) { if (event.keyCode === SPACE || event.keyCode === ENTER) { if (this.disabled) { event.preventDefault(); } else if (this._tabNavBar.tabPanel) { if (event.keyCode === SPACE) { event.preventDefault(); } this.elementRef.nativeElement.click(); } } } _getAriaControls() { return this._tabNavBar.tabPanel ? this._tabNavBar.tabPanel?.id : this.elementRef.nativeElement.getAttribute('aria-controls'); } _getAriaSelected() { if (this._tabNavBar.tabPanel) { return this.active ? 'true' : 'false'; } else { return this.elementRef.nativeElement.getAttribute('aria-selected'); } } _getAriaCurrent() { return this.active && !this._tabNavBar.tabPanel ? 'page' : null; } _getRole() { return this._tabNavBar.tabPanel ? 'tab' : this.elementRef.nativeElement.getAttribute('role'); } static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabLink, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "21.0.3", type: MatTabLink, isStandalone: true, selector: "[mat-tab-link], [matTabLink]", inputs: { active: ["active", "active", booleanAttribute], disabled: ["disabled", "disabled", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", value => value == null ? 0 : numberAttribute(value)], id: "id" }, host: { listeners: { "focus": "_handleFocus()", "keydown": "_handleKeydown($event)" }, properties: { "attr.aria-controls": "_getAriaControls()", "attr.aria-current": "_getAriaCurrent()", "attr.aria-disabled": "disabled", "attr.aria-selected": "_getAriaSelected()", "attr.id": "id", "attr.tabIndex": "_tabIndex()", "attr.role": "_getRole()", "class.mat-mdc-tab-disabled": "disabled", "class.mdc-tab--active": "active" }, classAttribute: "mdc-tab mat-mdc-tab-link mat-focus-indicator" }, exportAs: ["matTabLink"], usesInheritance: true, ngImport: i0, template: "\n\n\n\n\n \n \n \n\n\n", styles: [".mat-mdc-tab-link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab-link.mdc-tab{flex-grow:0}.mat-mdc-tab-link .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.mat-mdc-tab-link .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab-link .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab-link:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab-link .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link{flex-grow:1}.mat-mdc-tab-link::before{margin:5px}@media(max-width: 599px){.mat-mdc-tab-link{min-width:72px}}\n"], dependencies: [{ kind: "directive", type: MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabLink, decorators: [{ type: Component, args: [{ selector: '[mat-tab-link], [matTabLink]', exportAs: 'matTabLink', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { 'class': 'mdc-tab mat-mdc-tab-link mat-focus-indicator', '[attr.aria-controls]': '_getAriaControls()', '[attr.aria-current]': '_getAriaCurrent()', '[attr.aria-disabled]': 'disabled', '[attr.aria-selected]': '_getAriaSelected()', '[attr.id]': 'id', '[attr.tabIndex]': '_tabIndex()', '[attr.role]': '_getRole()', '[class.mat-mdc-tab-disabled]': 'disabled', '[class.mdc-tab--active]': 'active', '(focus)': '_handleFocus()', '(keydown)': '_handleKeydown($event)' }, imports: [MatRipple], template: "\n\n\n\n\n \n \n \n\n\n", styles: [".mat-mdc-tab-link{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-decoration:none;background:none;height:var(--mat-tab-container-height, 48px);font-family:var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));font-size:var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));letter-spacing:var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));line-height:var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));font-weight:var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight))}.mat-mdc-tab-link.mdc-tab{flex-grow:0}.mat-mdc-tab-link .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-indicator-color, var(--mat-sys-primary));border-top-width:var(--mat-tab-active-indicator-height, 2px);border-radius:var(--mat-tab-active-indicator-shape, 0)}.mat-mdc-tab-link:hover .mdc-tab__text-label{color:var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link:focus .mdc-tab__text-label{color:var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label{color:var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element{background-color:var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label{color:var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label{color:var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline{border-color:var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary))}.mat-mdc-tab-link.mat-mdc-tab-disabled{opacity:.4;pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content{pointer-events:none}.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element{background-color:var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant))}.mat-mdc-tab-link .mdc-tab__ripple::before{content:\"\";display:block;position:absolute;top:0;left:0;right:0;bottom:0;opacity:0;pointer-events:none;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-link .mdc-tab__text-label{color:var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));display:inline-flex;align-items:center}.mat-mdc-tab-link .mdc-tab__content{position:relative;pointer-events:auto}.mat-mdc-tab-link:hover .mdc-tab__ripple::before{opacity:.04}.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before,.mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before{opacity:.12}.mat-mdc-tab-link .mat-ripple-element{opacity:.12;background-color:var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface))}.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link{flex-grow:1}.mat-mdc-tab-link::before{margin:5px}@media(max-width: 599px){.mat-mdc-tab-link{min-width:72px}}\n"] }] }], ctorParameters: () => [], propDecorators: { active: [{ type: Input, args: [{ transform: booleanAttribute }] }], disabled: [{ type: Input, args: [{ transform: booleanAttribute }] }], disableRipple: [{ type: Input, args: [{ transform: booleanAttribute }] }], tabIndex: [{ type: Input, args: [{ transform: value => value == null ? 0 : numberAttribute(value) }] }], id: [{ type: Input }] } }); class MatTabNavPanel { id = inject(_IdGenerator).getId('mat-tab-nav-panel-'); _activeTabId; static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabNavPanel, deps: [], target: i0.ɵɵFactoryTarget.Component }); static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.3", type: MatTabNavPanel, isStandalone: true, selector: "mat-tab-nav-panel", inputs: { id: "id" }, host: { attributes: { "role": "tabpanel" }, properties: { "attr.aria-labelledby": "_activeTabId", "attr.id": "id" }, classAttribute: "mat-mdc-tab-nav-panel" }, exportAs: ["matTabNavPanel"], ngImport: i0, template: '', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabNavPanel, decorators: [{ type: Component, args: [{ selector: 'mat-tab-nav-panel', exportAs: 'matTabNavPanel', template: '', host: { '[attr.aria-labelledby]': '_activeTabId', '[attr.id]': 'id', 'class': 'mat-mdc-tab-nav-panel', 'role': 'tabpanel' }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush }] }], propDecorators: { id: [{ type: Input }] } }); class MatTabsModule { static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.0.3", ngImport: i0, type: MatTabsModule, imports: [MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink], exports: [BidiModule, MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink] }); static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabsModule, imports: [BidiModule] }); } i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.3", ngImport: i0, type: MatTabsModule, decorators: [{ type: NgModule, args: [{ imports: [MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink], exports: [BidiModule, MatTabContent, MatTabLabel, MatTab, MatTabGroup, MatTabNav, MatTabNavPanel, MatTabLink] }] }] }); export { MAT_TAB, MAT_TABS_CONFIG, MAT_TAB_CONTENT, MAT_TAB_GROUP, MAT_TAB_LABEL, MatInkBar, MatPaginatedTabHeader, MatTab, MatTabBody, MatTabBodyPortal, MatTabChangeEvent, MatTabContent, MatTabGroup, MatTabHeader, MatTabLabel, MatTabLabelWrapper, MatTabLink, MatTabNav, MatTabNavPanel, MatTabsModule, _MAT_INK_BAR_POSITIONER }; //# sourceMappingURL=tabs.mjs.map