UNPKG

@angular/material

Version:
2,441 lines 134 kB
import * as i0 from '@angular/core';
import { InjectionToken, inject, TemplateRef, Directive, ViewContainerRef, booleanAttribute, Input, ViewChild, ContentChild, ViewEncapsulation, ChangeDetectionStrategy, Component, ElementRef, ChangeDetectorRef, NgZone, Injector, Renderer2, EventEmitter, afterNextRender, numberAttribute, Output, ContentChildren, QueryList, ViewChildren, computed, signal, HostAttributeToken, forwardRef, NgModule } from '@angular/core';
import { CdkPortal, TemplatePortal, CdkPortalOutlet } from '@angular/cdk/portal';
import { Subject, of, merge, EMPTY, Observable, timer, Subscription, BehaviorSubject } from 'rxjs';
import { _CdkPrivateStyleLoader } from '@angular/cdk/private';
import { _StructuralStylesLoader } from './_structural-styles-chunk.mjs';
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 { debounceTime, takeUntil, startWith, switchMap, skip, filter } from 'rxjs/operators';
import { _animationsDisabled } from './_animation-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);
  static ɵfac = i0.ɵɵngDeclareFactory({
    minVersion: "12.0.0",
    version: "22.1.5",
    ngImport: i0,
    type: MatTabContent,
    deps: [],
    target: i0.ɵɵFactoryTarget.Directive
  });
  static ɵdir = i0.ɵɵngDeclareDirective({
    minVersion: "14.0.0",
    version: "22.1.5",
    type: MatTabContent,
    isStandalone: true,
    selector: "[matTabContent]",
    providers: [{
      provide: MAT_TAB_CONTENT,
      useExisting: MatTabContent
    }],
    ngImport: i0
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTabContent,
  decorators: [{
    type: Directive,
    args: [{
      selector: '[matTabContent]',
      providers: [{
        provide: MAT_TAB_CONTENT,
        useExisting: MatTabContent
      }]
    }]
  }]
});

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: "22.1.5",
    ngImport: i0,
    type: MatTabLabel,
    deps: null,
    target: i0.ɵɵFactoryTarget.Directive
  });
  static ɵdir = i0.ɵɵngDeclareDirective({
    minVersion: "14.0.0",
    version: "22.1.5",
    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: "22.1.5",
  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: "22.1.5",
    ngImport: i0,
    type: MatTab,
    deps: [],
    target: i0.ɵɵFactoryTarget.Component
  });
  static ɵcmp = i0.ɵɵngDeclareComponent({
    minVersion: "16.1.0",
    version: "22.1.5",
    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: "<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n    TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n    tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n",
    changeDetection: i0.ChangeDetectionStrategy.Eager,
    encapsulation: i0.ViewEncapsulation.None
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTab,
  decorators: [{
    type: Component,
    args: [{
      selector: 'mat-tab',
      changeDetection: ChangeDetectionStrategy.Eager,
      encapsulation: ViewEncapsulation.None,
      exportAs: 'matTab',
      providers: [{
        provide: MAT_TAB,
        useExisting: MatTab
      }],
      host: {
        'hidden': '',
        '[attr.id]': 'null'
      },
      template: "<!-- Create a template for the content of the <mat-tab> so that we can grab a reference to this\n    TemplateRef and use it in a Portal to render the tab content in the appropriate place in the\n    tab-group. -->\n<ng-template><ng-content></ng-content></ng-template>\n"
    }]
  }],
  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: "22.1.5",
    ngImport: i0,
    type: InkBarItem,
    deps: [],
    target: i0.ɵɵFactoryTarget.Directive
  });
  static ɵdir = i0.ɵɵngDeclareDirective({
    minVersion: "16.1.0",
    version: "22.1.5",
    type: InkBarItem,
    isStandalone: true,
    inputs: {
      fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute]
    },
    ngImport: i0
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  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: "22.1.5",
    ngImport: i0,
    type: MatTabLabelWrapper,
    deps: null,
    target: i0.ɵɵFactoryTarget.Directive
  });
  static ɵdir = i0.ɵɵngDeclareDirective({
    minVersion: "16.1.0",
    version: "22.1.5",
    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: "22.1.5",
  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;
function normalizeDuration(value) {
  const stringValue = value + '';
  if (/^[0-9]+(?:\.[0-9]+)?$/.test(stringValue)) {
    return `${value}ms`;
  } else if (/^[0-9]+(?:\.[0-9]+)?(?:ms|s)$/.test(stringValue)) {
    return stringValue;
  } else {
    return '';
  }
}
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: "22.1.5",
    ngImport: i0,
    type: MatPaginatedTabHeader,
    deps: [],
    target: i0.ɵɵFactoryTarget.Directive
  });
  static ɵdir = i0.ɵɵngDeclareDirective({
    minVersion: "16.1.0",
    version: "22.1.5",
    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: "22.1.5",
  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: "22.1.5",
    ngImport: i0,
    type: MatTabHeader,
    deps: null,
    target: i0.ɵɵFactoryTarget.Component
  });
  static ɵcmp = i0.ɵɵngDeclareComponent({
    minVersion: "16.1.0",
    version: "22.1.5",
    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 Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n     #previousPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n     (click)=\"_handlePaginatorClick('before')\"\n     (mousedown)=\"_handlePaginatorPress('before', $event)\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div\n  class=\"mat-mdc-tab-label-container\"\n  #tabListContainer\n  (keydown)=\"_handleKeydown($event)\"\n  [class._mat-animation-noopable]=\"_animationsDisabled\">\n  <div\n    #tabList\n    class=\"mat-mdc-tab-list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    (cdkObserveContent)=\"_onContentChanges()\">\n    <div class=\"mat-mdc-tab-labels\" #tabListInner>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n     #nextPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n     (mousedown)=\"_handlePaginatorPress('after', $event)\"\n     (click)=\"_handlePaginatorClick('after')\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n",
    styles: [".mat-mdc-tab-header {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.mdc-tab-indicator .mdc-tab-indicator__content {\n  transition-duration: var(--mat-tab-header-animation-duration, 250ms);\n}\n\n.mat-mdc-tab-header-pagination {\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  min-width: 32px;\n  cursor: pointer;\n  z-index: 2;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: none;\n  box-sizing: content-box;\n  outline: 0;\n}\n.mat-mdc-tab-header-pagination::-moz-focus-inner {\n  border: 0;\n}\n.mat-mdc-tab-header-pagination .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination {\n  display: flex;\n}\n\n.mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after {\n  padding-left: 4px;\n}\n.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(-135deg);\n}\n\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-pagination-after {\n  padding-right: 4px;\n}\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(45deg);\n}\n\n.mat-mdc-tab-header-pagination-chevron {\n  border-style: solid;\n  border-width: 2px 2px 0 0;\n  height: 8px;\n  width: 8px;\n  border-color: var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface));\n}\n\n.mat-mdc-tab-header-pagination-disabled {\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n  opacity: 0.4;\n}\n\n.mat-mdc-tab-list {\n  flex-grow: 1;\n  position: relative;\n  transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n._mat-animation-noopable .mat-mdc-tab-list {\n  transition: none;\n}\n\n.mat-mdc-tab-label-container {\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n  z-index: 1;\n  border-bottom-style: solid;\n  border-bottom-width: var(--mat-tab-divider-height, 1px);\n  border-bottom-color: var(--mat-tab-divider-color, var(--mat-sys-surface-variant));\n}\n.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container {\n  border-bottom: none;\n  border-top-style: solid;\n  border-top-width: var(--mat-tab-divider-height, 1px);\n  border-top-color: var(--mat-tab-divider-color, var(--mat-sys-surface-variant));\n}\n\n.mat-mdc-tab-labels {\n  display: flex;\n  flex: 1 0 auto;\n}\n[mat-align-tabs=center] > .mat-mdc-tab-header .mat-mdc-tab-labels {\n  justify-content: center;\n}\n[mat-align-tabs=end] > .mat-mdc-tab-header .mat-mdc-tab-labels {\n  justify-content: flex-end;\n}\n.cdk-drop-list .mat-mdc-tab-labels, .mat-mdc-tab-labels.cdk-drop-list {\n  min-height: var(--mat-tab-container-height, 48px);\n}\n\n.mat-mdc-tab::before {\n  margin: 5px;\n}\n@media (forced-colors: active) {\n  .mat-mdc-tab[aria-disabled=true] {\n    color: GrayText;\n  }\n}\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.Eager,
    encapsulation: i0.ViewEncapsulation.None
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTabHeader,
  decorators: [{
    type: Component,
    args: [{
      selector: 'mat-tab-header',
      encapsulation: ViewEncapsulation.None,
      changeDetection: ChangeDetectionStrategy.Eager,
      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 Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n     #previousPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n     (click)=\"_handlePaginatorClick('before')\"\n     (mousedown)=\"_handlePaginatorPress('before', $event)\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div\n  class=\"mat-mdc-tab-label-container\"\n  #tabListContainer\n  (keydown)=\"_handleKeydown($event)\"\n  [class._mat-animation-noopable]=\"_animationsDisabled\">\n  <div\n    #tabList\n    class=\"mat-mdc-tab-list\"\n    role=\"tablist\"\n    [attr.aria-label]=\"ariaLabel || null\"\n    [attr.aria-labelledby]=\"ariaLabelledby || null\"\n    (cdkObserveContent)=\"_onContentChanges()\">\n    <div class=\"mat-mdc-tab-labels\" #tabListInner>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n     #nextPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n     (mousedown)=\"_handlePaginatorPress('after', $event)\"\n     (click)=\"_handlePaginatorClick('after')\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n",
      styles: [".mat-mdc-tab-header {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.mdc-tab-indicator .mdc-tab-indicator__content {\n  transition-duration: var(--mat-tab-header-animation-duration, 250ms);\n}\n\n.mat-mdc-tab-header-pagination {\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  min-width: 32px;\n  cursor: pointer;\n  z-index: 2;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: none;\n  box-sizing: content-box;\n  outline: 0;\n}\n.mat-mdc-tab-header-pagination::-moz-focus-inner {\n  border: 0;\n}\n.mat-mdc-tab-header-pagination .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination {\n  display: flex;\n}\n\n.mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after {\n  padding-left: 4px;\n}\n.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(-135deg);\n}\n\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-pagination-after {\n  padding-right: 4px;\n}\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(45deg);\n}\n\n.mat-mdc-tab-header-pagination-chevron {\n  border-style: solid;\n  border-width: 2px 2px 0 0;\n  height: 8px;\n  width: 8px;\n  border-color: var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface));\n}\n\n.mat-mdc-tab-header-pagination-disabled {\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n  opacity: 0.4;\n}\n\n.mat-mdc-tab-list {\n  flex-grow: 1;\n  position: relative;\n  transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n._mat-animation-noopable .mat-mdc-tab-list {\n  transition: none;\n}\n\n.mat-mdc-tab-label-container {\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n  z-index: 1;\n  border-bottom-style: solid;\n  border-bottom-width: var(--mat-tab-divider-height, 1px);\n  border-bottom-color: var(--mat-tab-divider-color, var(--mat-sys-surface-variant));\n}\n.mat-mdc-tab-group-inverted-header .mat-mdc-tab-label-container {\n  border-bottom: none;\n  border-top-style: solid;\n  border-top-width: var(--mat-tab-divider-height, 1px);\n  border-top-color: var(--mat-tab-divider-color, var(--mat-sys-surface-variant));\n}\n\n.mat-mdc-tab-labels {\n  display: flex;\n  flex: 1 0 auto;\n}\n[mat-align-tabs=center] > .mat-mdc-tab-header .mat-mdc-tab-labels {\n  justify-content: center;\n}\n[mat-align-tabs=end] > .mat-mdc-tab-header .mat-mdc-tab-labels {\n  justify-content: flex-end;\n}\n.cdk-drop-list .mat-mdc-tab-labels, .mat-mdc-tab-labels.cdk-drop-list {\n  min-height: var(--mat-tab-container-height, 48px);\n}\n\n.mat-mdc-tab::before {\n  margin: 5px;\n}\n@media (forced-colors: active) {\n  .mat-mdc-tab[aria-disabled=true] {\n    color: GrayText;\n  }\n}\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;
  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: "22.1.5",
    ngImport: i0,
    type: MatTabBodyPortal,
    deps: null,
    target: i0.ɵɵFactoryTarget.Directive
  });
  static ɵdir = i0.ɵɵngDeclareDirective({
    minVersion: "14.0.0",
    version: "22.1.5",
    type: MatTabBodyPortal,
    isStandalone: true,
    selector: "[matTabBodyHost]",
    usesInheritance: true,
    ngImport: i0
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTabBodyPortal,
  decorators: [{
    type: Directive,
    args: [{
      selector: '[matTabBodyHost]'
    }]
  }]
});
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: "22.1.5",
    ngImport: i0,
    type: MatTabBody,
    deps: [],
    target: i0.ɵɵFactoryTarget.Component
  });
  static ɵcmp = i0.ɵɵngDeclareComponent({
    minVersion: "14.0.0",
    version: "22.1.5",
    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: "<div\n   class=\"mat-mdc-tab-body-content\"\n   #content\n   cdkScrollable\n   [class.mat-tab-body-content-left]=\"_position === 'left'\"\n   [class.mat-tab-body-content-right]=\"_position === 'right'\"\n   [class.mat-tab-body-content-can-animate]=\"_position === 'center' || _previousPosition === 'center'\">\n  <ng-template matTabBodyHost></ng-template>\n</div>\n",
    styles: [".mat-mdc-tab-body {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n  display: block;\n  overflow: hidden;\n  outline: 0;\n  flex-basis: 100%;\n}\n.mat-mdc-tab-body.mat-mdc-tab-body-active {\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  flex-grow: 1;\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active {\n  overflow-y: hidden;\n}\n\n.mat-mdc-tab-body-content {\n  height: 100%;\n  overflow: auto;\n  transform: none;\n  visibility: hidden;\n}\n.mat-tab-body-animating > .mat-mdc-tab-body-content, .mat-mdc-tab-body-active > .mat-mdc-tab-body-content {\n  visibility: visible;\n}\n.mat-tab-body-animating > .mat-mdc-tab-body-content {\n  min-height: 1px;\n}\n.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content {\n  overflow: hidden;\n}\n\n.mat-tab-body-content-can-animate {\n  transition: transform var(--mat-tab-body-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n.mat-mdc-tab-body-wrapper._mat-animation-noopable .mat-tab-body-content-can-animate {\n  transition: none;\n}\n\n.mat-tab-body-content-left {\n  transform: translate3d(-100%, 0, 0);\n}\n\n.mat-tab-body-content-right {\n  transform: translate3d(100%, 0, 0);\n}\n"],
    dependencies: [{
      kind: "directive",
      type: MatTabBodyPortal,
      selector: "[matTabBodyHost]"
    }, {
      kind: "directive",
      type: CdkScrollable,
      selector: "[cdk-scrollable], [cdkScrollable]"
    }],
    changeDetection: i0.ChangeDetectionStrategy.Eager,
    encapsulation: i0.ViewEncapsulation.None
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTabBody,
  decorators: [{
    type: Component,
    args: [{
      selector: 'mat-tab-body',
      encapsulation: ViewEncapsulation.None,
      changeDetection: ChangeDetectionStrategy.Eager,
      host: {
        'class': 'mat-mdc-tab-body',
        '[attr.inert]': '_position === "center" ? null : ""'
      },
      imports: [MatTabBodyPortal, CdkScrollable],
      template: "<div\n   class=\"mat-mdc-tab-body-content\"\n   #content\n   cdkScrollable\n   [class.mat-tab-body-content-left]=\"_position === 'left'\"\n   [class.mat-tab-body-content-right]=\"_position === 'right'\"\n   [class.mat-tab-body-content-can-animate]=\"_position === 'center' || _previousPosition === 'center'\">\n  <ng-template matTabBodyHost></ng-template>\n</div>\n",
      styles: [".mat-mdc-tab-body {\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  position: absolute;\n  display: block;\n  overflow: hidden;\n  outline: 0;\n  flex-basis: 100%;\n}\n.mat-mdc-tab-body.mat-mdc-tab-body-active {\n  position: relative;\n  overflow-x: hidden;\n  overflow-y: auto;\n  z-index: 1;\n  flex-grow: 1;\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body.mat-mdc-tab-body-active {\n  overflow-y: hidden;\n}\n\n.mat-mdc-tab-body-content {\n  height: 100%;\n  overflow: auto;\n  transform: none;\n  visibility: hidden;\n}\n.mat-tab-body-animating > .mat-mdc-tab-body-content, .mat-mdc-tab-body-active > .mat-mdc-tab-body-content {\n  visibility: visible;\n}\n.mat-tab-body-animating > .mat-mdc-tab-body-content {\n  min-height: 1px;\n}\n.mat-mdc-tab-group-dynamic-height .mat-mdc-tab-body-content {\n  overflow: hidden;\n}\n\n.mat-tab-body-content-can-animate {\n  transition: transform var(--mat-tab-body-animation-duration) 1ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n.mat-mdc-tab-body-wrapper._mat-animation-noopable .mat-tab-body-content-can-animate {\n  transition: none;\n}\n\n.mat-tab-body-content-left {\n  transform: translate3d(-100%, 0, 0);\n}\n\n.mat-tab-body-content-right {\n  transform: translate3d(100%, 0, 0);\n}\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();
  _bodyAnimationDuration;
  _headerAnimationDuration;
  _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) {
    this._animationDuration = value;
    if (value && typeof value === 'object') {
      this._bodyAnimationDuration = normalizeDuration(value.body);
      this._headerAnimationDuration = normalizeDuration(value.header);
    } else {
      this._headerAnimationDuration = this._bodyAnimationDuration = normalizeDuration(value);
    }
  }
  _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));
    }
  }
  _bodyAnimationsDisabled() {
    return this._diAnimationsDisabled || this._bodyAnimationDuration === '0' || this._bodyAnimationDuration === '0ms';
  }
  static ɵfac = i0.ɵɵngDeclareFactory({
    minVersion: "12.0.0",
    version: "22.1.5",
    ngImport: i0,
    type: MatTabGroup,
    deps: [],
    target: i0.ɵɵFactoryTarget.Component
  });
  static ɵcmp = i0.ɵɵngDeclareComponent({
    minVersion: "17.0.0",
    version: "22.1.5",
    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-body-animation-duration": "_bodyAnimationDuration",
        "style.--mat-tab-header-animation-duration": "_headerAnimationDuration"
      },
      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: "<mat-tab-header #tabHeader\n                [selectedIndex]=\"selectedIndex || 0\"\n                [disableRipple]=\"disableRipple\"\n                [disablePagination]=\"disablePagination\"\n                [aria-label]=\"ariaLabel\"\n                [aria-labelledby]=\"ariaLabelledby\"\n                (indexFocused)=\"_focusChanged($event)\"\n                (selectFocusedIndex)=\"selectedIndex = $event\">\n\n  @for (tab of _tabs; track tab) {\n    <div class=\"mdc-tab mat-mdc-tab mat-focus-indicator\"\n        #tabNode\n        role=\"tab\"\n        matTabLabelWrapper\n        cdkMonitorElementFocus\n        [id]=\"_getTabLabelId(tab, $index)\"\n        [attr.tabIndex]=\"_getTabIndex($index)\"\n        [attr.aria-posinset]=\"$index + 1\"\n        [attr.aria-setsize]=\"_tabs.length\"\n        [attr.aria-controls]=\"_getTabContentId($index)\"\n        [attr.aria-selected]=\"selectedIndex === $index\"\n        [attr.aria-label]=\"tab.ariaLabel || null\"\n        [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n        [class.mdc-tab--active]=\"selectedIndex === $index\"\n        [class]=\"tab.labelClass\"\n        [disabled]=\"tab.disabled\"\n        [fitInkBarToContent]=\"fitInkBarToContent\"\n        (click)=\"_handleClick(tab, tabHeader, $index)\"\n        (cdkFocusChange)=\"_tabFocusChanged($event, $index)\">\n      <span class=\"mdc-tab__ripple\"></span>\n\n      <!-- Needs to be a separate element, because we can't put\n          `overflow: hidden` on tab due to the ink bar. -->\n      <div\n        class=\"mat-mdc-tab-ripple\"\n        mat-ripple\n        [matRippleTrigger]=\"tabNode\"\n        [matRippleDisabled]=\"tab.disabled || disableRipple\"></div>\n\n      <span class=\"mdc-tab__content\">\n        <span class=\"mdc-tab__text-label\">\n          <!--\n            If there is a label template, use it, otherwise fall back to the text label.\n            Note that we don't have indentation around the text label, because it adds\n            whitespace around the text which breaks some internal tests.\n          -->\n          @if (tab.templateLabel) {\n            <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n          } @else {{{tab.textLabel}}}\n        </span>\n      </span>\n    </div>\n  }\n</mat-tab-header>\n\n<!--\n  We need to project the content somewhere to avoid hydration errors. Some observations:\n  1. This is only necessary on the server.\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\n  3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n  <ng-content/>\n}\n\n<div\n  class=\"mat-mdc-tab-body-wrapper\"\n  [class._mat-animation-noopable]=\"_bodyAnimationsDisabled()\"\n  #tabBodyWrapper>\n  @for (tab of _tabs; track tab;) {\n    <mat-tab-body role=\"tabpanel\"\n                 [id]=\"_getTabContentId($index)\"\n                 [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null\"\n                 [attr.aria-labelledby]=\"_getTabLabelId(tab, $index)\"\n                 [attr.aria-hidden]=\"selectedIndex !== $index\"\n                 [class]=\"tab.bodyClass\"\n                 [content]=\"tab.content!\"\n                 [position]=\"tab.position!\"\n                 [animationDuration]=\"_bodyAnimationDuration\"\n                 [preserveContent]=\"preserveContent\"\n                 (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n                 (_onCentering)=\"_setTabBodyWrapperHeight($event)\"\n                 (_beforeCentering)=\"_bodyCentered($event)\"/>\n  }\n</div>\n",
    styles: [".mdc-tab {\n  min-width: 90px;\n  padding: 0 24px;\n  display: flex;\n  flex: 1 0 auto;\n  justify-content: center;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  z-index: 1;\n  touch-action: manipulation;\n}\n\n.mdc-tab__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: inherit;\n  pointer-events: none;\n}\n\n.mdc-tab__text-label {\n  transition: 150ms color linear;\n  display: inline-block;\n  line-height: 1;\n  z-index: 2;\n}\n\n.mdc-tab--active .mdc-tab__text-label {\n  transition-delay: 100ms;\n}\n\n._mat-animation-noopable .mdc-tab__text-label {\n  transition: none;\n}\n\n.mdc-tab-indicator {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.mdc-tab-indicator__content {\n  transition: var(--mat-tab-header-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: left;\n  opacity: 0;\n}\n\n.mdc-tab-indicator__content--underline {\n  align-self: flex-end;\n  box-sizing: border-box;\n  width: 100%;\n  border-top-style: solid;\n}\n\n.mdc-tab-indicator--active .mdc-tab-indicator__content {\n  opacity: 1;\n}\n\n._mat-animation-noopable .mdc-tab-indicator__content, .mdc-tab-indicator--no-transition .mdc-tab-indicator__content {\n  transition: none;\n}\n\n.mat-mdc-tab-ripple.mat-mdc-tab-ripple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.mat-mdc-tab {\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-decoration: none;\n  background: none;\n  height: var(--mat-tab-container-height, 48px);\n  font-family: var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));\n  font-size: var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));\n  letter-spacing: var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));\n  line-height: var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));\n  font-weight: var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight));\n}\n.mat-mdc-tab.mdc-tab {\n  flex-grow: 0;\n}\n.mat-mdc-tab .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-indicator-color, var(--mat-sys-primary));\n  border-top-width: var(--mat-tab-active-indicator-height, 2px);\n  border-radius: var(--mat-tab-active-indicator-shape, 0);\n}\n.mat-mdc-tab:hover .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab:focus .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {\n  color: var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,\n.mat-mdc-tab.mdc-tab--active .mat-ripple-element {\n  background-color: var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label {\n  color: var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label {\n  color: var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab.mat-mdc-tab-disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content {\n  pointer-events: none;\n}\n.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,\n.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element {\n  background-color: var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-tab .mdc-tab__ripple::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 0;\n  pointer-events: none;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));\n  display: inline-flex;\n  align-items: center;\n}\n.mat-mdc-tab .mdc-tab__content {\n  position: relative;\n  pointer-events: auto;\n}\n.mat-mdc-tab:hover .mdc-tab__ripple::before {\n  opacity: 0.04;\n}\n.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before, .mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before {\n  opacity: 0.12;\n}\n.mat-mdc-tab .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header .mat-mdc-tab {\n  flex-grow: 1;\n}\n\n.mat-mdc-tab-group {\n  display: flex;\n  flex-direction: column;\n  max-width: 100%;\n}\n.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 {\n  background-color: var(--mat-tab-background-color);\n}\n.mat-mdc-tab-group.mat-tabs-with-background.mat-primary > .mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label {\n  color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-group.mat-tabs-with-background.mat-primary > .mat-mdc-tab-header .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\n.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 {\n  border-color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-group.mat-tabs-with-background > .mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,\n.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,\n.mat-mdc-tab-group.mat-tabs-with-background > .mat-mdc-tab-header-pagination .mat-focus-indicator::before {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  background-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header {\n  flex-direction: column-reverse;\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline {\n  align-self: flex-start;\n}\n\n.mat-mdc-tab-body-wrapper {\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  transition: height 500ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n.mat-mdc-tab-body-wrapper._mat-animation-noopable {\n  transition: none !important;\n  animation: none !important;\n}\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.Eager,
    encapsulation: i0.ViewEncapsulation.None
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTabGroup,
  decorators: [{
    type: Component,
    args: [{
      selector: 'mat-tab-group',
      exportAs: 'matTabGroup',
      encapsulation: ViewEncapsulation.None,
      changeDetection: ChangeDetectionStrategy.Eager,
      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-body-animation-duration]': '_bodyAnimationDuration',
        '[style.--mat-tab-header-animation-duration]': '_headerAnimationDuration'
      },
      imports: [MatTabHeader, MatTabLabelWrapper, CdkMonitorFocus, MatRipple, CdkPortalOutlet, MatTabBody],
      template: "<mat-tab-header #tabHeader\n                [selectedIndex]=\"selectedIndex || 0\"\n                [disableRipple]=\"disableRipple\"\n                [disablePagination]=\"disablePagination\"\n                [aria-label]=\"ariaLabel\"\n                [aria-labelledby]=\"ariaLabelledby\"\n                (indexFocused)=\"_focusChanged($event)\"\n                (selectFocusedIndex)=\"selectedIndex = $event\">\n\n  @for (tab of _tabs; track tab) {\n    <div class=\"mdc-tab mat-mdc-tab mat-focus-indicator\"\n        #tabNode\n        role=\"tab\"\n        matTabLabelWrapper\n        cdkMonitorElementFocus\n        [id]=\"_getTabLabelId(tab, $index)\"\n        [attr.tabIndex]=\"_getTabIndex($index)\"\n        [attr.aria-posinset]=\"$index + 1\"\n        [attr.aria-setsize]=\"_tabs.length\"\n        [attr.aria-controls]=\"_getTabContentId($index)\"\n        [attr.aria-selected]=\"selectedIndex === $index\"\n        [attr.aria-label]=\"tab.ariaLabel || null\"\n        [attr.aria-labelledby]=\"(!tab.ariaLabel && tab.ariaLabelledby) ? tab.ariaLabelledby : null\"\n        [class.mdc-tab--active]=\"selectedIndex === $index\"\n        [class]=\"tab.labelClass\"\n        [disabled]=\"tab.disabled\"\n        [fitInkBarToContent]=\"fitInkBarToContent\"\n        (click)=\"_handleClick(tab, tabHeader, $index)\"\n        (cdkFocusChange)=\"_tabFocusChanged($event, $index)\">\n      <span class=\"mdc-tab__ripple\"></span>\n\n      <!-- Needs to be a separate element, because we can't put\n          `overflow: hidden` on tab due to the ink bar. -->\n      <div\n        class=\"mat-mdc-tab-ripple\"\n        mat-ripple\n        [matRippleTrigger]=\"tabNode\"\n        [matRippleDisabled]=\"tab.disabled || disableRipple\"></div>\n\n      <span class=\"mdc-tab__content\">\n        <span class=\"mdc-tab__text-label\">\n          <!--\n            If there is a label template, use it, otherwise fall back to the text label.\n            Note that we don't have indentation around the text label, because it adds\n            whitespace around the text which breaks some internal tests.\n          -->\n          @if (tab.templateLabel) {\n            <ng-template [cdkPortalOutlet]=\"tab.templateLabel\"></ng-template>\n          } @else {{{tab.textLabel}}}\n        </span>\n      </span>\n    </div>\n  }\n</mat-tab-header>\n\n<!--\n  We need to project the content somewhere to avoid hydration errors. Some observations:\n  1. This is only necessary on the server.\n  2. We get a hydration error if there aren't any nodes after the `ng-content`.\n  3. We get a hydration error if `ng-content` is wrapped in another element.\n-->\n@if (_isServer) {\n  <ng-content/>\n}\n\n<div\n  class=\"mat-mdc-tab-body-wrapper\"\n  [class._mat-animation-noopable]=\"_bodyAnimationsDisabled()\"\n  #tabBodyWrapper>\n  @for (tab of _tabs; track tab;) {\n    <mat-tab-body role=\"tabpanel\"\n                 [id]=\"_getTabContentId($index)\"\n                 [attr.tabindex]=\"(contentTabIndex != null && selectedIndex === $index) ? contentTabIndex : null\"\n                 [attr.aria-labelledby]=\"_getTabLabelId(tab, $index)\"\n                 [attr.aria-hidden]=\"selectedIndex !== $index\"\n                 [class]=\"tab.bodyClass\"\n                 [content]=\"tab.content!\"\n                 [position]=\"tab.position!\"\n                 [animationDuration]=\"_bodyAnimationDuration\"\n                 [preserveContent]=\"preserveContent\"\n                 (_onCentered)=\"_removeTabBodyWrapperHeight()\"\n                 (_onCentering)=\"_setTabBodyWrapperHeight($event)\"\n                 (_beforeCentering)=\"_bodyCentered($event)\"/>\n  }\n</div>\n",
      styles: [".mdc-tab {\n  min-width: 90px;\n  padding: 0 24px;\n  display: flex;\n  flex: 1 0 auto;\n  justify-content: center;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  z-index: 1;\n  touch-action: manipulation;\n}\n\n.mdc-tab__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: inherit;\n  pointer-events: none;\n}\n\n.mdc-tab__text-label {\n  transition: 150ms color linear;\n  display: inline-block;\n  line-height: 1;\n  z-index: 2;\n}\n\n.mdc-tab--active .mdc-tab__text-label {\n  transition-delay: 100ms;\n}\n\n._mat-animation-noopable .mdc-tab__text-label {\n  transition: none;\n}\n\n.mdc-tab-indicator {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.mdc-tab-indicator__content {\n  transition: var(--mat-tab-header-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: left;\n  opacity: 0;\n}\n\n.mdc-tab-indicator__content--underline {\n  align-self: flex-end;\n  box-sizing: border-box;\n  width: 100%;\n  border-top-style: solid;\n}\n\n.mdc-tab-indicator--active .mdc-tab-indicator__content {\n  opacity: 1;\n}\n\n._mat-animation-noopable .mdc-tab-indicator__content, .mdc-tab-indicator--no-transition .mdc-tab-indicator__content {\n  transition: none;\n}\n\n.mat-mdc-tab-ripple.mat-mdc-tab-ripple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.mat-mdc-tab {\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-decoration: none;\n  background: none;\n  height: var(--mat-tab-container-height, 48px);\n  font-family: var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));\n  font-size: var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));\n  letter-spacing: var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));\n  line-height: var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));\n  font-weight: var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight));\n}\n.mat-mdc-tab.mdc-tab {\n  flex-grow: 0;\n}\n.mat-mdc-tab .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-indicator-color, var(--mat-sys-primary));\n  border-top-width: var(--mat-tab-active-indicator-height, 2px);\n  border-radius: var(--mat-tab-active-indicator-shape, 0);\n}\n.mat-mdc-tab:hover .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab:focus .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active .mdc-tab__text-label {\n  color: var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active .mdc-tab__ripple::before,\n.mat-mdc-tab.mdc-tab--active .mat-ripple-element {\n  background-color: var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active:hover .mdc-tab__text-label {\n  color: var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active:hover .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab.mdc-tab--active:focus .mdc-tab__text-label {\n  color: var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab.mdc-tab--active:focus .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab.mat-mdc-tab-disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__content {\n  pointer-events: none;\n}\n.mat-mdc-tab.mat-mdc-tab-disabled .mdc-tab__ripple::before,\n.mat-mdc-tab.mat-mdc-tab-disabled .mat-ripple-element {\n  background-color: var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-tab .mdc-tab__ripple::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 0;\n  pointer-events: none;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));\n  display: inline-flex;\n  align-items: center;\n}\n.mat-mdc-tab .mdc-tab__content {\n  position: relative;\n  pointer-events: auto;\n}\n.mat-mdc-tab:hover .mdc-tab__ripple::before {\n  opacity: 0.04;\n}\n.mat-mdc-tab.cdk-program-focused .mdc-tab__ripple::before, .mat-mdc-tab.cdk-keyboard-focused .mdc-tab__ripple::before {\n  opacity: 0.12;\n}\n.mat-mdc-tab .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-stretch-tabs > .mat-mdc-tab-header .mat-mdc-tab {\n  flex-grow: 1;\n}\n\n.mat-mdc-tab-group {\n  display: flex;\n  flex-direction: column;\n  max-width: 100%;\n}\n.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 {\n  background-color: var(--mat-tab-background-color);\n}\n.mat-mdc-tab-group.mat-tabs-with-background.mat-primary > .mat-mdc-tab-header .mat-mdc-tab .mdc-tab__text-label {\n  color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-group.mat-tabs-with-background.mat-primary > .mat-mdc-tab-header .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\n.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 {\n  border-color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-group.mat-tabs-with-background > .mat-mdc-tab-header .mat-mdc-tab-header-pagination-chevron,\n.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,\n.mat-mdc-tab-group.mat-tabs-with-background > .mat-mdc-tab-header-pagination .mat-focus-indicator::before {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  background-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header {\n  flex-direction: column-reverse;\n}\n.mat-mdc-tab-group.mat-mdc-tab-group-inverted-header .mdc-tab-indicator__content--underline {\n  align-self: flex-start;\n}\n\n.mat-mdc-tab-body-wrapper {\n  position: relative;\n  overflow: hidden;\n  display: flex;\n  transition: height 500ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n.mat-mdc-tab-body-wrapper._mat-animation-noopable {\n  transition: none !important;\n  animation: none !important;\n}\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;
  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: "22.1.5",
    ngImport: i0,
    type: MatTabNav,
    deps: [],
    target: i0.ɵɵFactoryTarget.Component
  });
  static ɵcmp = i0.ɵɵngDeclareComponent({
    minVersion: "16.1.0",
    version: "22.1.5",
    type: MatTabNav,
    isStandalone: true,
    selector: "[mat-tab-nav-bar]",
    inputs: {
      fitInkBarToContent: ["fitInkBarToContent", "fitInkBarToContent", booleanAttribute],
      stretchTabs: ["mat-stretch-tabs", "stretchTabs", booleanAttribute],
      animationDuration: ["animationDuration", "animationDuration", normalizeDuration],
      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-header-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 Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n     #previousPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n     (click)=\"_handlePaginatorClick('before')\"\n     (mousedown)=\"_handlePaginatorPress('before', $event)\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n  <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n    <div class=\"mat-mdc-tab-links\" #tabListInner>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n     #nextPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n     (mousedown)=\"_handlePaginatorPress('after', $event)\"\n     (click)=\"_handlePaginatorClick('after')\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n",
    styles: [".mdc-tab {\n  min-width: 90px;\n  padding: 0 24px;\n  display: flex;\n  flex: 1 0 auto;\n  justify-content: center;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  z-index: 1;\n  touch-action: manipulation;\n}\n\n.mdc-tab__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: inherit;\n  pointer-events: none;\n}\n\n.mdc-tab__text-label {\n  transition: 150ms color linear;\n  display: inline-block;\n  line-height: 1;\n  z-index: 2;\n}\n\n.mdc-tab--active .mdc-tab__text-label {\n  transition-delay: 100ms;\n}\n\n._mat-animation-noopable .mdc-tab__text-label {\n  transition: none;\n}\n\n.mdc-tab-indicator {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.mdc-tab-indicator__content {\n  transition: var(--mat-tab-header-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: left;\n  opacity: 0;\n}\n\n.mdc-tab-indicator__content--underline {\n  align-self: flex-end;\n  box-sizing: border-box;\n  width: 100%;\n  border-top-style: solid;\n}\n\n.mdc-tab-indicator--active .mdc-tab-indicator__content {\n  opacity: 1;\n}\n\n._mat-animation-noopable .mdc-tab-indicator__content, .mdc-tab-indicator--no-transition .mdc-tab-indicator__content {\n  transition: none;\n}\n\n.mat-mdc-tab-ripple.mat-mdc-tab-ripple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.mat-mdc-tab-header {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.mdc-tab-indicator .mdc-tab-indicator__content {\n  transition-duration: var(--mat-tab-header-animation-duration, 250ms);\n}\n\n.mat-mdc-tab-header-pagination {\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  min-width: 32px;\n  cursor: pointer;\n  z-index: 2;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: none;\n  box-sizing: content-box;\n  outline: 0;\n}\n.mat-mdc-tab-header-pagination::-moz-focus-inner {\n  border: 0;\n}\n.mat-mdc-tab-header-pagination .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination {\n  display: flex;\n}\n\n.mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after {\n  padding-left: 4px;\n}\n.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(-135deg);\n}\n\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-pagination-after {\n  padding-right: 4px;\n}\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(45deg);\n}\n\n.mat-mdc-tab-header-pagination-chevron {\n  border-style: solid;\n  border-width: 2px 2px 0 0;\n  height: 8px;\n  width: 8px;\n  border-color: var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface));\n}\n\n.mat-mdc-tab-header-pagination-disabled {\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n  opacity: 0.4;\n}\n\n.mat-mdc-tab-list {\n  flex-grow: 1;\n  position: relative;\n  transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n._mat-animation-noopable .mat-mdc-tab-list {\n  transition: none;\n}\n\n.mat-mdc-tab-links {\n  display: flex;\n  flex: 1 0 auto;\n}\n[mat-align-tabs=center] > .mat-mdc-tab-link-container .mat-mdc-tab-links {\n  justify-content: center;\n}\n[mat-align-tabs=end] > .mat-mdc-tab-link-container .mat-mdc-tab-links {\n  justify-content: flex-end;\n}\n.cdk-drop-list .mat-mdc-tab-links, .mat-mdc-tab-links.cdk-drop-list {\n  min-height: var(--mat-tab-container-height, 48px);\n}\n\n.mat-mdc-tab-link-container {\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n  z-index: 1;\n  border-bottom-style: solid;\n  border-bottom-width: var(--mat-tab-divider-height, 1px);\n  border-bottom-color: var(--mat-tab-divider-color, var(--mat-sys-surface-variant));\n}\n\n.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 {\n  background-color: var(--mat-tab-background-color);\n}\n.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary > .mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label {\n  color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary > .mat-mdc-tab-link-container .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\n.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 {\n  border-color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-nav-bar.mat-tabs-with-background > .mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,\n.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,\n.mat-mdc-tab-nav-bar.mat-tabs-with-background > .mat-mdc-tab-header-pagination .mat-focus-indicator::before {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  background-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\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.Eager,
    encapsulation: i0.ViewEncapsulation.None
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  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-header-animation-duration]': 'animationDuration'
      },
      encapsulation: ViewEncapsulation.None,
      changeDetection: ChangeDetectionStrategy.Eager,
      imports: [MatRipple, CdkObserveContent],
      template: "<!--\n Note that this intentionally uses a `div` instead of a `button`, because it's not part of\n the regular tabs flow and is only here to support mouse users. It should also not be focusable.\n-->\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-before\"\n     #previousPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollBefore || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollBefore\"\n     (click)=\"_handlePaginatorClick('before')\"\n     (mousedown)=\"_handlePaginatorPress('before', $event)\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n\n<div class=\"mat-mdc-tab-link-container\" #tabListContainer (keydown)=\"_handleKeydown($event)\">\n  <div class=\"mat-mdc-tab-list\" #tabList (cdkObserveContent)=\"_onContentChanges()\">\n    <div class=\"mat-mdc-tab-links\" #tabListInner>\n      <ng-content></ng-content>\n    </div>\n  </div>\n</div>\n\n<div class=\"mat-mdc-tab-header-pagination mat-mdc-tab-header-pagination-after\"\n     #nextPaginator\n     mat-ripple\n     [matRippleDisabled]=\"_disableScrollAfter || disableRipple\"\n     [class.mat-mdc-tab-header-pagination-disabled]=\"_disableScrollAfter\"\n     (mousedown)=\"_handlePaginatorPress('after', $event)\"\n     (click)=\"_handlePaginatorClick('after')\"\n     (touchend)=\"_stopInterval()\">\n  <div class=\"mat-mdc-tab-header-pagination-chevron\"></div>\n</div>\n",
      styles: [".mdc-tab {\n  min-width: 90px;\n  padding: 0 24px;\n  display: flex;\n  flex: 1 0 auto;\n  justify-content: center;\n  box-sizing: border-box;\n  border: none;\n  outline: none;\n  text-align: center;\n  white-space: nowrap;\n  cursor: pointer;\n  z-index: 1;\n  touch-action: manipulation;\n}\n\n.mdc-tab__content {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: inherit;\n  pointer-events: none;\n}\n\n.mdc-tab__text-label {\n  transition: 150ms color linear;\n  display: inline-block;\n  line-height: 1;\n  z-index: 2;\n}\n\n.mdc-tab--active .mdc-tab__text-label {\n  transition-delay: 100ms;\n}\n\n._mat-animation-noopable .mdc-tab__text-label {\n  transition: none;\n}\n\n.mdc-tab-indicator {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  justify-content: center;\n  width: 100%;\n  height: 100%;\n  pointer-events: none;\n  z-index: 1;\n}\n\n.mdc-tab-indicator__content {\n  transition: var(--mat-tab-header-animation-duration, 250ms) transform cubic-bezier(0.4, 0, 0.2, 1);\n  transform-origin: left;\n  opacity: 0;\n}\n\n.mdc-tab-indicator__content--underline {\n  align-self: flex-end;\n  box-sizing: border-box;\n  width: 100%;\n  border-top-style: solid;\n}\n\n.mdc-tab-indicator--active .mdc-tab-indicator__content {\n  opacity: 1;\n}\n\n._mat-animation-noopable .mdc-tab-indicator__content, .mdc-tab-indicator--no-transition .mdc-tab-indicator__content {\n  transition: none;\n}\n\n.mat-mdc-tab-ripple.mat-mdc-tab-ripple {\n  position: absolute;\n  top: 0;\n  left: 0;\n  bottom: 0;\n  right: 0;\n  pointer-events: none;\n}\n\n.mat-mdc-tab-header {\n  display: flex;\n  overflow: hidden;\n  position: relative;\n  flex-shrink: 0;\n}\n\n.mdc-tab-indicator .mdc-tab-indicator__content {\n  transition-duration: var(--mat-tab-header-animation-duration, 250ms);\n}\n\n.mat-mdc-tab-header-pagination {\n  -webkit-user-select: none;\n  user-select: none;\n  position: relative;\n  display: none;\n  justify-content: center;\n  align-items: center;\n  min-width: 32px;\n  cursor: pointer;\n  z-index: 2;\n  -webkit-tap-highlight-color: transparent;\n  touch-action: none;\n  box-sizing: content-box;\n  outline: 0;\n}\n.mat-mdc-tab-header-pagination::-moz-focus-inner {\n  border: 0;\n}\n.mat-mdc-tab-header-pagination .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-header-pagination-controls-enabled .mat-mdc-tab-header-pagination {\n  display: flex;\n}\n\n.mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after {\n  padding-left: 4px;\n}\n.mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(-135deg);\n}\n\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before,\n.mat-mdc-tab-header-pagination-after {\n  padding-right: 4px;\n}\n.mat-mdc-tab-header-rtl .mat-mdc-tab-header-pagination-before .mat-mdc-tab-header-pagination-chevron,\n.mat-mdc-tab-header-pagination-after .mat-mdc-tab-header-pagination-chevron {\n  transform: rotate(45deg);\n}\n\n.mat-mdc-tab-header-pagination-chevron {\n  border-style: solid;\n  border-width: 2px 2px 0 0;\n  height: 8px;\n  width: 8px;\n  border-color: var(--mat-tab-pagination-icon-color, var(--mat-sys-on-surface));\n}\n\n.mat-mdc-tab-header-pagination-disabled {\n  box-shadow: none;\n  cursor: default;\n  pointer-events: none;\n}\n.mat-mdc-tab-header-pagination-disabled .mat-mdc-tab-header-pagination-chevron {\n  opacity: 0.4;\n}\n\n.mat-mdc-tab-list {\n  flex-grow: 1;\n  position: relative;\n  transition: transform 500ms cubic-bezier(0.35, 0, 0.25, 1);\n}\n._mat-animation-noopable .mat-mdc-tab-list {\n  transition: none;\n}\n\n.mat-mdc-tab-links {\n  display: flex;\n  flex: 1 0 auto;\n}\n[mat-align-tabs=center] > .mat-mdc-tab-link-container .mat-mdc-tab-links {\n  justify-content: center;\n}\n[mat-align-tabs=end] > .mat-mdc-tab-link-container .mat-mdc-tab-links {\n  justify-content: flex-end;\n}\n.cdk-drop-list .mat-mdc-tab-links, .mat-mdc-tab-links.cdk-drop-list {\n  min-height: var(--mat-tab-container-height, 48px);\n}\n\n.mat-mdc-tab-link-container {\n  display: flex;\n  flex-grow: 1;\n  overflow: hidden;\n  z-index: 1;\n  border-bottom-style: solid;\n  border-bottom-width: var(--mat-tab-divider-height, 1px);\n  border-bottom-color: var(--mat-tab-divider-color, var(--mat-sys-surface-variant));\n}\n\n.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 {\n  background-color: var(--mat-tab-background-color);\n}\n.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary > .mat-mdc-tab-link-container .mat-mdc-tab-link .mdc-tab__text-label {\n  color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-nav-bar.mat-tabs-with-background.mat-primary > .mat-mdc-tab-link-container .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\n.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 {\n  border-color: var(--mat-tab-foreground-color);\n}\n.mat-mdc-tab-nav-bar.mat-tabs-with-background > .mat-mdc-tab-link-container .mat-mdc-tab-header-pagination-chevron,\n.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,\n.mat-mdc-tab-nav-bar.mat-tabs-with-background > .mat-mdc-tab-header-pagination .mat-focus-indicator::before {\n  border-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  background-color: var(--mat-tab-foreground-color);\n}\n.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 {\n  color: var(--mat-tab-foreground-color);\n}\n"]
    }]
  }],
  ctorParameters: () => [],
  propDecorators: {
    fitInkBarToContent: [{
      type: Input,
      args: [{
        transform: booleanAttribute
      }]
    }],
    stretchTabs: [{
      type: Input,
      args: [{
        alias: 'mat-stretch-tabs',
        transform: booleanAttribute
      }]
    }],
    animationDuration: [{
      type: Input,
      args: [{
        transform: normalizeDuration
      }]
    }],
    _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: "22.1.5",
    ngImport: i0,
    type: MatTabLink,
    deps: [],
    target: i0.ɵɵFactoryTarget.Component
  });
  static ɵcmp = i0.ɵɵngDeclareComponent({
    minVersion: "16.1.0",
    version: "22.1.5",
    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: "<span class=\"mdc-tab__ripple\"></span>\n\n<div\n  class=\"mat-mdc-tab-ripple\"\n  mat-ripple\n  [matRippleTrigger]=\"elementRef.nativeElement\"\n  [matRippleDisabled]=\"rippleDisabled\"></div>\n\n<span class=\"mdc-tab__content\">\n  <span class=\"mdc-tab__text-label\">\n    <ng-content></ng-content>\n  </span>\n</span>\n\n",
    styles: [".mat-mdc-tab-link {\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-decoration: none;\n  background: none;\n  height: var(--mat-tab-container-height, 48px);\n  font-family: var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));\n  font-size: var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));\n  letter-spacing: var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));\n  line-height: var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));\n  font-weight: var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight));\n}\n.mat-mdc-tab-link.mdc-tab {\n  flex-grow: 0;\n}\n.mat-mdc-tab-link .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-indicator-color, var(--mat-sys-primary));\n  border-top-width: var(--mat-tab-active-indicator-height, 2px);\n  border-radius: var(--mat-tab-active-indicator-shape, 0);\n}\n.mat-mdc-tab-link:hover .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link:focus .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label {\n  color: var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,\n.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element {\n  background-color: var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label {\n  color: var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label {\n  color: var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab-link.mat-mdc-tab-disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content {\n  pointer-events: none;\n}\n.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,\n.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element {\n  background-color: var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-tab-link .mdc-tab__ripple::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 0;\n  pointer-events: none;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));\n  display: inline-flex;\n  align-items: center;\n}\n.mat-mdc-tab-link .mdc-tab__content {\n  position: relative;\n  pointer-events: auto;\n}\n.mat-mdc-tab-link:hover .mdc-tab__ripple::before {\n  opacity: 0.04;\n}\n.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before, .mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before {\n  opacity: 0.12;\n}\n.mat-mdc-tab-link .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link {\n  flex-grow: 1;\n}\n.mat-mdc-tab-link::before {\n  margin: 5px;\n}\n\n@media (max-width: 599px) {\n  .mat-mdc-tab-link {\n    min-width: 72px;\n  }\n}\n"],
    dependencies: [{
      kind: "directive",
      type: MatRipple,
      selector: "[mat-ripple], [matRipple]",
      inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"],
      exportAs: ["matRipple"]
    }],
    encapsulation: i0.ViewEncapsulation.None
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTabLink,
  decorators: [{
    type: Component,
    args: [{
      selector: '[mat-tab-link], [matTabLink]',
      exportAs: 'matTabLink',
      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: "<span class=\"mdc-tab__ripple\"></span>\n\n<div\n  class=\"mat-mdc-tab-ripple\"\n  mat-ripple\n  [matRippleTrigger]=\"elementRef.nativeElement\"\n  [matRippleDisabled]=\"rippleDisabled\"></div>\n\n<span class=\"mdc-tab__content\">\n  <span class=\"mdc-tab__text-label\">\n    <ng-content></ng-content>\n  </span>\n</span>\n\n",
      styles: [".mat-mdc-tab-link {\n  -webkit-tap-highlight-color: transparent;\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n  text-decoration: none;\n  background: none;\n  height: var(--mat-tab-container-height, 48px);\n  font-family: var(--mat-tab-label-text-font, var(--mat-sys-title-small-font));\n  font-size: var(--mat-tab-label-text-size, var(--mat-sys-title-small-size));\n  letter-spacing: var(--mat-tab-label-text-tracking, var(--mat-sys-title-small-tracking));\n  line-height: var(--mat-tab-label-text-line-height, var(--mat-sys-title-small-line-height));\n  font-weight: var(--mat-tab-label-text-weight, var(--mat-sys-title-small-weight));\n}\n.mat-mdc-tab-link.mdc-tab {\n  flex-grow: 0;\n}\n.mat-mdc-tab-link .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-indicator-color, var(--mat-sys-primary));\n  border-top-width: var(--mat-tab-active-indicator-height, 2px);\n  border-radius: var(--mat-tab-active-indicator-shape, 0);\n}\n.mat-mdc-tab-link:hover .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link:focus .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active .mdc-tab__text-label {\n  color: var(--mat-tab-active-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active .mdc-tab__ripple::before,\n.mat-mdc-tab-link.mdc-tab--active .mat-ripple-element {\n  background-color: var(--mat-tab-active-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab__text-label {\n  color: var(--mat-tab-active-hover-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active:hover .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-hover-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab__text-label {\n  color: var(--mat-tab-active-focus-label-text-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link.mdc-tab--active:focus .mdc-tab-indicator__content--underline {\n  border-color: var(--mat-tab-active-focus-indicator-color, var(--mat-sys-primary));\n}\n.mat-mdc-tab-link.mat-mdc-tab-disabled {\n  opacity: 0.4;\n  pointer-events: none;\n}\n.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__content {\n  pointer-events: none;\n}\n.mat-mdc-tab-link.mat-mdc-tab-disabled .mdc-tab__ripple::before,\n.mat-mdc-tab-link.mat-mdc-tab-disabled .mat-ripple-element {\n  background-color: var(--mat-tab-disabled-ripple-color, var(--mat-sys-on-surface-variant));\n}\n.mat-mdc-tab-link .mdc-tab__ripple::before {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  opacity: 0;\n  pointer-events: none;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-link .mdc-tab__text-label {\n  color: var(--mat-tab-inactive-label-text-color, var(--mat-sys-on-surface));\n  display: inline-flex;\n  align-items: center;\n}\n.mat-mdc-tab-link .mdc-tab__content {\n  position: relative;\n  pointer-events: auto;\n}\n.mat-mdc-tab-link:hover .mdc-tab__ripple::before {\n  opacity: 0.04;\n}\n.mat-mdc-tab-link.cdk-program-focused .mdc-tab__ripple::before, .mat-mdc-tab-link.cdk-keyboard-focused .mdc-tab__ripple::before {\n  opacity: 0.12;\n}\n.mat-mdc-tab-link .mat-ripple-element {\n  opacity: 0.12;\n  background-color: var(--mat-tab-inactive-ripple-color, var(--mat-sys-on-surface));\n}\n.mat-mdc-tab-header.mat-mdc-tab-nav-bar-stretch-tabs .mat-mdc-tab-link {\n  flex-grow: 1;\n}\n.mat-mdc-tab-link::before {\n  margin: 5px;\n}\n\n@media (max-width: 599px) {\n  .mat-mdc-tab-link {\n    min-width: 72px;\n  }\n}\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: "22.1.5",
    ngImport: i0,
    type: MatTabNavPanel,
    deps: [],
    target: i0.ɵɵFactoryTarget.Component
  });
  static ɵcmp = i0.ɵɵngDeclareComponent({
    minVersion: "14.0.0",
    version: "22.1.5",
    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: '<ng-content></ng-content>',
    isInline: true,
    encapsulation: i0.ViewEncapsulation.None
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  ngImport: i0,
  type: MatTabNavPanel,
  decorators: [{
    type: Component,
    args: [{
      selector: 'mat-tab-nav-panel',
      exportAs: 'matTabNavPanel',
      template: '<ng-content></ng-content>',
      host: {
        '[attr.aria-labelledby]': '_activeTabId',
        '[attr.id]': 'id',
        'class': 'mat-mdc-tab-nav-panel',
        'role': 'tabpanel'
      },
      encapsulation: ViewEncapsulation.None
    }]
  }],
  propDecorators: {
    id: [{
      type: Input
    }]
  }
});

class MatTabsModule {
  static ɵfac = i0.ɵɵngDeclareFactory({
    minVersion: "12.0.0",
    version: "22.1.5",
    ngImport: i0,
    type: MatTabsModule,
    deps: [],
    target: i0.ɵɵFactoryTarget.NgModule
  });
  static ɵmod = i0.ɵɵngDeclareNgModule({
    minVersion: "14.0.0",
    version: "22.1.5",
    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: "22.1.5",
    ngImport: i0,
    type: MatTabsModule,
    imports: [BidiModule]
  });
}
i0.ɵɵngDeclareClassMetadata({
  minVersion: "12.0.0",
  version: "22.1.5",
  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