From 20f51577679afd35e4972eb37de76d322b2d680c Mon Sep 17 00:00:00 2001
From: Kristiyan Kostadinov <crisbeto@abv.bg>
Date: Thu, 31 Oct 2024 14:02:07 +0100
Subject: [PATCH] refactor(material/tabs): use ID generator

Switches to using the ID generator service to create unique IDs.

(cherry picked from commit 0a6cf2fc19e043e3acd5860642aaafe6ff1c5d8d)
---
 src/material/tabs/tab-group.ts               | 13 +++++--------
 src/material/tabs/tab-nav-bar/tab-nav-bar.ts |  9 +++------
 2 files changed, 8 insertions(+), 14 deletions(-)

diff --git a/src/material/tabs/tab-group.ts b/src/material/tabs/tab-group.ts
index 023550b73109..20492a9887a3 100644
--- a/src/material/tabs/tab-group.ts
+++ b/src/material/tabs/tab-group.ts
@@ -32,15 +32,12 @@ import {ThemePalette, MatRipple} from '@angular/material/core';
 import {merge, Subscription} from 'rxjs';
 import {MAT_TABS_CONFIG, MatTabsConfig} from './tab-config';
 import {startWith} from 'rxjs/operators';
-import {CdkMonitorFocus, FocusOrigin} from '@angular/cdk/a11y';
+import {_IdGenerator, CdkMonitorFocus, FocusOrigin} from '@angular/cdk/a11y';
 import {MatTabBody} from './tab-body';
 import {CdkPortalOutlet} from '@angular/cdk/portal';
 import {MatTabLabelWrapper} from './tab-label-wrapper';
 import {Platform} from '@angular/cdk/platform';
 
-/** Used to generate unique ID's for each tab component */
-let nextId = 0;
-
 /** @docs-private */
 export interface MatTabGroupBaseHeader {
   _alignInkBarToSelectedTab(): void;
@@ -268,7 +265,7 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
   @Output() readonly selectedTabChange: EventEmitter<MatTabChangeEvent> =
     new EventEmitter<MatTabChangeEvent>(true);
 
-  private _groupId: number;
+  private _groupId: string;
 
   /** Whether the tab group is rendered on the server. */
   protected _isServer: boolean = !inject(Platform).isBrowser;
@@ -278,7 +275,7 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
   constructor() {
     const defaultConfig = inject<MatTabsConfig>(MAT_TABS_CONFIG, {optional: true});
 
-    this._groupId = nextId++;
+    this._groupId = inject(_IdGenerator).getId('mat-tab-group-');
     this.animationDuration =
       defaultConfig && defaultConfig.animationDuration ? defaultConfig.animationDuration : '500ms';
     this.disablePagination =
@@ -492,12 +489,12 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes
 
   /** Returns a unique id for each tab label element */
   _getTabLabelId(i: number): string {
-    return `mat-tab-label-${this._groupId}-${i}`;
+    return `${this._groupId}-label-${i}`;
   }
 
   /** Returns a unique id for each tab content element */
   _getTabContentId(i: number): string {
-    return `mat-tab-content-${this._groupId}-${i}`;
+    return `${this._groupId}-content-${i}`;
   }
 
   /**
diff --git a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
index f8f456ba4a29..feb30ffb6aec 100644
--- a/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
+++ b/src/material/tabs/tab-nav-bar/tab-nav-bar.ts
@@ -36,7 +36,7 @@ import {
   ThemePalette,
   _StructuralStylesLoader,
 } from '@angular/material/core';
-import {FocusableOption, FocusMonitor} from '@angular/cdk/a11y';
+import {_IdGenerator, FocusableOption, FocusMonitor} from '@angular/cdk/a11y';
 import {Directionality} from '@angular/cdk/bidi';
 import {ViewportRuler} from '@angular/cdk/scrolling';
 import {Platform} from '@angular/cdk/platform';
@@ -49,9 +49,6 @@ import {MatPaginatedTabHeader} from '../paginated-tab-header';
 import {CdkObserveContent} from '@angular/cdk/observers';
 import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
 
-// Increasing integer for generating unique ids for tab nav components.
-let nextUniqueId = 0;
-
 /**
  * Navigation component matching the styles of the tab group header.
  * Provides anchored navigation with animated ink bar.
@@ -329,7 +326,7 @@ export class MatTabLink
   }
 
   /** Unique id for the tab. */
-  @Input() id = `mat-tab-link-${nextUniqueId++}`;
+  @Input() id: string = inject(_IdGenerator).getId('mat-tab-link-');
 
   constructor(...args: unknown[]);
 
@@ -444,7 +441,7 @@ export class MatTabLink
 })
 export class MatTabNavPanel {
   /** Unique id for the tab panel. */
-  @Input() id = `mat-tab-nav-panel-${nextUniqueId++}`;
+  @Input() id: string = inject(_IdGenerator).getId('mat-tab-nav-panel-');
 
   /** Id of the active tab in the nav bar. */
   _activeTabId?: string;