Enforced strict tab/tabpanel matching by value. Capitalized

list/panel/content.

Author: ok7sai

src/cdk-experimental/tabs/public-api.ts

@@ -6,4 +6,4 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-export {CdkTabs, CdkTablist, CdkTab, CdkTabpanel, CdkTabcontent} from './tabs';
+export {CdkTabs, CdkTabList, CdkTab, CdkTabPanel, CdkTabContent} from './tabs';

src/cdk-experimental/tabs/tabs.ts

@@ -21,28 +21,28 @@ import {
 import {Directionality} from '@angular/cdk/bidi';
 import {DeferredContent, DeferredContentAware} from '@angular/cdk-experimental/deferred-content';
 import {TabPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tab';
-import {TablistPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tablist';
-import {TabpanelPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tabpanel';
+import {TabListPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tablist';
+import {TabPanelPattern} from '@angular/cdk-experimental/ui-patterns/tabs/tabpanel';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {_IdGenerator} from '@angular/cdk/a11y';
 
 /**
  * A Tabs container.
  *
  * Represents a set of layered sections of content. The CdkTabs is a container meant to be used with
- * CdkTablist, CdkTab, and CdkTabpanel as follows:
+ * CdkTabList, CdkTab, and CdkTabPanel as follows:
  *
  * ```html
  * <div cdkTabs>
- *   <ul cdkTablist>
+ *   <ul cdkTabList>
  *     <li cdkTab>Tab 1</li>
  *     <li cdkTab>Tab 2</li>
  *     <li cdkTab>Tab 3</li>
  *   </ul>
  *
- *   <div cdkTabpanel>Tab content 1</div>
- *   <div cdkTabpanel>Tab content 2</div>
- *   <div cdkTabpanel>Tab content 3</div>
+ *   <div cdkTabPanel>Tab content 1</div>
+ *   <div cdkTabPanel>Tab content 2</div>
+ *   <div cdkTabPanel>Tab content 3</div>
  * </div>
  * ```
  */
@@ -57,24 +57,24 @@ export class CdkTabs {
   /** The CdkTabs nested inside of the container. */
   private readonly _cdkTabs = contentChildren(CdkTab, {descendants: true});
 
-  /** The CdkTabpanels nested inside of the container. */
-  private readonly _cdkTabpanels = contentChildren(CdkTabpanel, {descendants: true});
+  /** The CdkTabPanels nested inside of the container. */
+  private readonly _cdkTabPanels = contentChildren(CdkTabPanel, {descendants: true});
 
   /** The Tab UIPattern of the child Tabs. */
   tabs = computed(() => this._cdkTabs().map(tab => tab.pattern));
 
-  /** The Tabpanel UIPattern of the child Tabpanels. */
-  tabpanels = computed(() => this._cdkTabpanels().map(tabpanel => tabpanel.pattern));
+  /** The TabPanel UIPattern of the child TabPanels. */
+  tabpanels = computed(() => this._cdkTabPanels().map(tabpanel => tabpanel.pattern));
 }
 
 /**
- * A Tablist container.
+ * A TabList container.
  *
  * Controls a list of CdkTab(s).
  */
 @Directive({
-  selector: '[cdkTablist]',
-  exportAs: 'cdkTablist',
+  selector: '[cdkTabList]',
+  exportAs: 'cdkTabList',
   host: {
     'role': 'tablist',
     'class': 'cdk-tablist',
@@ -86,11 +86,11 @@ export class CdkTabs {
     '(pointerdown)': 'pattern.onPointerdown($event)',
   },
 })
-export class CdkTablist {
+export class CdkTabList {
   /** The directionality (LTR / RTL) context for the application (or a subtree of it). */
   private readonly _directionality = inject(Directionality);
 
-  /** The CdkTabs nested inside of the CdkTablist. */
+  /** The CdkTabs nested inside of the CdkTabList. */
   private readonly _cdkTabs = contentChildren(CdkTab);
 
   /** A signal wrapper for directionality. */
@@ -122,16 +122,16 @@ export class CdkTablist {
   /** The current index that has been navigated to. */
   activeIndex = model<number>(0);
 
-  /** The Tablist UIPattern. */
-  pattern: TablistPattern = new TablistPattern({
+  /** The TabList UIPattern. */
+  pattern: TabListPattern = new TabListPattern({
     ...this,
     items: this.tabs,
     textDirection: this.textDirection,
     value: signal<string[]>([]),
   });
 }
 
-/** A selectable tab in a tablist. */
+/** A selectable tab in a TabList. */
 @Directive({
   selector: '[cdkTab]',
   exportAs: 'cdkTab',
@@ -152,46 +152,48 @@ export class CdkTab {
   /** The parent CdkTabs. */
   private readonly _cdkTabs = inject(CdkTabs);
 
-  /** The parent CdkTablist. */
-  private readonly _cdkTablist = inject(CdkTablist);
+  /** The parent CdkTabList. */
+  private readonly _cdkTabList = inject(CdkTabList);
 
-  /** A unique identifier for the tab. */
+  /** A global unique identifier for the tab. */
   private readonly _id = inject(_IdGenerator).getId('cdk-tab-');
 
-  /** The position of the tab in the list. */
-  protected index = computed(() => this._cdkTabs.tabs().findIndex(tab => tab.id() === this._id));
+  /** The parent TabList UIPattern. */
+  protected tablist = computed(() => this._cdkTabList.pattern);
 
-  /** The parent Tablist UIPattern. */
-  protected tablist = computed(() => this._cdkTablist.pattern);
-
-  /** The Tabpanel UIPattern associated with the tab */
-  protected tabpanel = computed(() => this._cdkTabs.tabpanels()[this.index()]);
+  /** The TabPanel UIPattern associated with the tab */
+  protected tabpanel = computed(() =>
+    this._cdkTabs.tabpanels().find(tabpanel => tabpanel.value() === this.value()),
+  );
 
   /** Whether a tab is disabled. */
   disabled = input(false, {transform: booleanAttribute});
 
+  /** A local unique identifier for the tab. */
+  value = input.required<string>();
+
   /** The Tab UIPattern. */
   pattern: TabPattern = new TabPattern({
     ...this,
     id: () => this._id,
-    value: () => this._id,
     element: () => this._elementRef.nativeElement,
     tablist: this.tablist,
     tabpanel: this.tabpanel,
+    value: this.value,
   });
 }
 
 /**
- * A Tabpanel container for the resources of layered content associated with a tab.
+ * A TabPanel container for the resources of layered content associated with a tab.
  *
  * If a tabpanel is hidden due to its corresponding tab is not activated, the `inert` attribute
  * will be applied to the tabpanel element to remove it from the accessibility tree and stop
  * all the keyboard and pointer interactions. Note that this does not visually hide the tabpenl
  * and a proper styling is required.
  */
 @Directive({
-  selector: '[cdkTabpanel]',
-  exportAs: 'cdkTabpanel',
+  selector: '[cdkTabPanel]',
+  exportAs: 'cdkTabPanel',
   host: {
     'role': 'tabpanel',
     'tabindex': '0',
@@ -206,26 +208,24 @@ export class CdkTab {
     },
   ],
 })
-export class CdkTabpanel {
+export class CdkTabPanel {
   /** The DeferredContentAware host directive. */
   private readonly _deferredContentAware = inject(DeferredContentAware);
 
   /** The parent CdkTabs. */
   private readonly _cdkTabs = inject(CdkTabs);
 
-  /** A unique identifier for the tab. */
+  /** A global unique identifier for the tab. */
   private readonly _id = inject(_IdGenerator).getId('cdk-tabpanel-');
 
-  /** The position of the tabpanel in the tabs. */
-  protected index = computed(() =>
-    this._cdkTabs.tabpanels().findIndex(tabpanel => tabpanel.id() === this._id),
-  );
-
   /** The Tab UIPattern associated with the tabpanel */
-  protected tab = computed(() => this._cdkTabs.tabs()[this.index()]);
+  protected tab = computed(() => this._cdkTabs.tabs().find(tab => tab.value() === this.value()));
+
+  /** A local unique identifier for the tabpanel. */
+  value = input.required<string>();
 
-  /** The Tabpanel UIPattern. */
-  pattern: TabpanelPattern = new TabpanelPattern({
+  /** The TabPanel UIPattern. */
+  pattern: TabPanelPattern = new TabPanelPattern({
     ...this,
     id: () => this._id,
     tab: this.tab,
@@ -237,11 +237,11 @@ export class CdkTabpanel {
 }
 
 /**
- * A Tabcontent container for the lazy-loaded content.
+ * A TabContent container for the lazy-loaded content.
  */
 @Directive({
-  selector: 'ng-template[cdkTabcontent]',
-  exportAs: 'cdTabcontent',
+  selector: 'ng-template[cdkTabContent]',
+  exportAs: 'cdTabContent',
   hostDirectives: [DeferredContent],
 })
-export class CdkTabcontent {}
+export class CdkTabContent {}

src/cdk-experimental/ui-patterns/tabs/tab.ts

@@ -11,37 +11,37 @@ import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {ListSelectionItem} from '../behaviors/list-selection/list-selection';
 import {ListNavigationItem} from '../behaviors/list-navigation/list-navigation';
 import {ListFocusItem} from '../behaviors/list-focus/list-focus';
-import {TabpanelPattern} from './tabpanel';
-import {TablistPattern} from './tablist';
+import {TabPanelPattern} from './tabpanel';
+import {TabListPattern} from './tablist';
 
 /** The required inputs to tabs. */
 export interface TabInputs extends ListNavigationItem, ListSelectionItem<string>, ListFocusItem {
-  tablist: SignalLike<TablistPattern>;
-  tabpanel: SignalLike<TabpanelPattern>;
+  tablist: SignalLike<TabListPattern>;
+  tabpanel: SignalLike<TabPanelPattern | undefined>;
 }
 
 /** A tab in a tablist. */
 export class TabPattern {
-  /** A unique identifier for the tab. */
+  /** A global unique identifier for the tab. */
   id: SignalLike<string>;
 
-  /** The value of the tab. */
-  value = () => this.id();
+  /** A local unique identifier for the tab. */
+  value: SignalLike<string>;
 
   /** Whether the tab is selected. */
   selected = computed(() => this.tablist().selection.inputs.value().includes(this.value()));
 
   /** A Tabpanel Id controlled by the tab. */
-  controls = computed(() => this.tabpanel().id());
+  controls = computed(() => this.tabpanel()?.id());
 
   /** Whether the tab is disabled. */
   disabled: SignalLike<boolean>;
 
   /** A reference to the parent tablist. */
-  tablist: SignalLike<TablistPattern>;
+  tablist: SignalLike<TabListPattern>;
 
   /** A reference to the corresponding tabpanel. */
-  tabpanel: SignalLike<TabpanelPattern>;
+  tabpanel: SignalLike<TabPanelPattern | undefined>;
 
   /** The tabindex of the tab. */
   tabindex = computed(() => this.tablist().focusManager.getItemTabindex(this));
@@ -51,6 +51,7 @@ export class TabPattern {
 
   constructor(inputs: TabInputs) {
     this.id = inputs.id;
+    this.value = inputs.value;
     this.tablist = inputs.tablist;
     this.tabpanel = inputs.tabpanel;
     this.element = inputs.element;

src/cdk-experimental/ui-patterns/tabs/tablist.ts

@@ -31,7 +31,7 @@ export type TablistInputs = ListNavigationInputs<TabPattern> &
   };
 
 /** Controls the state of a tablist. */
-export class TablistPattern {
+export class TabListPattern {
   /** Controls navigation for the tablist. */
   navigation: ListNavigation<TabPattern>;
 

src/cdk-experimental/ui-patterns/tabs/tabpanel.ts

@@ -11,24 +11,29 @@ import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {TabPattern} from './tab';
 
 /** The required inputs for the tabpanel. */
-export interface TabpanelInputs {
+export interface TabPanelInputs {
   id: SignalLike<string>;
-  tab: SignalLike<TabPattern>;
+  tab: SignalLike<TabPattern | undefined>;
+  value: SignalLike<string>;
 }
 
 /** A tabpanel associated with a tab. */
-export class TabpanelPattern {
-  /** A unique identifier for the tabpanel. */
+export class TabPanelPattern {
+  /** A global unique identifier for the tabpanel. */
   id: SignalLike<string>;
 
+  /** A local unique identifier for the tabpanel. */
+  value: SignalLike<string>;
+
   /** A reference to the corresponding tab. */
-  tab: SignalLike<TabPattern>;
+  tab: SignalLike<TabPattern | undefined>;
 
   /** Whether the tabpanel is hidden. */
-  hidden = computed(() => !this.tab().selected());
+  hidden = computed(() => !this.tab()?.selected());
 
-  constructor(inputs: TabpanelInputs) {
+  constructor(inputs: TabPanelInputs) {
     this.id = inputs.id;
+    this.value = inputs.value;
     this.tab = inputs.tab;
   }
 }

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.html

@@ -31,7 +31,7 @@
 <!-- #docregion tabs -->
 <div cdkTabs class="example-tabs">
   <ul
-    cdkTablist
+    cdkTabList
     class="example-tablist"
     [wrap]="wrap.value"
     [disabled]="disabled.value"
@@ -40,19 +40,19 @@
     [focusMode]="focusMode"
     [selectionMode]="selectionMode"
   >
-    <li cdkTab class="example-tab">tab 1</li>
-    <li cdkTab class="example-tab">tab 2</li>
-    <li cdkTab class="example-tab">tab 3</li>
+    <li cdkTab value="tab-1" class="example-tab">tab 1</li>
+    <li cdkTab value="tab-2" class="example-tab">tab 2</li>
+    <li cdkTab value="tab-3" class="example-tab">tab 3</li>
   </ul>
 
-  <div cdkTabpanel class="example-tabpanel">
-    <ng-template cdkTabcontent>Tabpanel 1</ng-template>
+  <div cdkTabPanel value="tab-1" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 1</ng-template>
   </div>
-  <div cdkTabpanel class="example-tabpanel">
-    <ng-template cdkTabcontent>Tabpanel 2</ng-template>
+  <div cdkTabPanel value="tab-2" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 2</ng-template>
   </div>
-  <div cdkTabpanel class="example-tabpanel">
-    <ng-template cdkTabcontent>Tabpanel 3</ng-template>
+  <div cdkTabPanel value="tab-3" class="example-tabpanel">
+    <ng-template cdkTabContent>Tabpanel 3</ng-template>
   </div>
 </div>
 <!-- #enddocregion tabs -->

src/components-examples/cdk-experimental/tabs/cdk-tabs/cdk-tabs-example.ts

@@ -2,10 +2,10 @@ import {Component} from '@angular/core';
 import {MatCheckboxModule} from '@angular/material/checkbox';
 import {
   CdkTabs,
-  CdkTablist,
+  CdkTabList,
   CdkTab,
-  CdkTabpanel,
-  CdkTabcontent,
+  CdkTabPanel,
+  CdkTabContent,
 } from '@angular/cdk-experimental/tabs';
 import {MatFormFieldModule} from '@angular/material/form-field';
 import {MatSelectModule} from '@angular/material/select';
@@ -19,10 +19,10 @@ import {FormControl, ReactiveFormsModule} from '@angular/forms';
   styleUrl: 'cdk-tabs-example.css',
   imports: [
     CdkTabs,
-    CdkTablist,
+    CdkTabList,
     CdkTab,
-    CdkTabpanel,
-    CdkTabcontent,
+    CdkTabPanel,
+    CdkTabContent,
     MatCheckboxModule,
     MatFormFieldModule,
     MatSelectModule,