fix(multiple): allow ids to be inputs (angular#32320)

Co-authored-by: Andrew Seguin <[email protected]>

Author: andrewseguin

src/aria/accordion/accordion.ts

@@ -71,7 +71,7 @@ export class AccordionPanel {
   private readonly _deferredContentAware = inject(DeferredContentAware);
 
   /** A global unique identifier for the panel. */
-  private readonly _id = inject(_IdGenerator).getId('accordion-trigger-', true);
+  readonly id = input(inject(_IdGenerator).getId('ng-accordion-panel-', true));
 
   /** A local unique identifier for the panel, used to match with its trigger's `panelId`. */
   readonly panelId = input.required<string>();
@@ -85,7 +85,7 @@ export class AccordionPanel {
 
   /** The UI pattern instance for this panel. */
   readonly _pattern: AccordionPanelPattern = new AccordionPanelPattern({
-    id: () => this._id,
+    id: this.id,
     panelId: this.panelId,
     accordionTrigger: () => this.accordionTrigger(),
   });
@@ -153,7 +153,7 @@ export class AccordionTrigger {
   private readonly _accordionGroup = inject(AccordionGroup);
 
   /** A unique identifier for the widget. */
-  readonly id = input<string>(inject(_IdGenerator).getId('ng-accordion-trigger-', true));
+  readonly id = input(inject(_IdGenerator).getId('ng-accordion-trigger-', true));
 
   /** The host native element. */
   readonly element = computed(() => this._elementRef.nativeElement);

src/aria/grid/grid.ts

@@ -376,7 +376,7 @@ export class GridCellWidget {
   readonly element = computed(() => this._elementRef.nativeElement);
 
   /** A unique identifier for the widget. */
-  readonly id = input<string>(inject(_IdGenerator).getId('ng-grid-cell-', true));
+  readonly id = input(inject(_IdGenerator).getId('ng-grid-cell-widget-', true));
 
   /** The type of widget, which determines how it is activated. */
   readonly widgetType = input<'simple' | 'complex' | 'editable'>('simple');

src/aria/listbox/listbox.ts

@@ -65,11 +65,7 @@ import {ComboboxPopup} from '../combobox';
 })
 export class Listbox<V> {
   /** A unique identifier for the listbox. */
-  private readonly _generatedId = inject(_IdGenerator).getId('ng-listbox-', true);
-
-  // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.
-  /** A unique identifier for the listbox. */
-  protected id = computed(() => this._generatedId);
+  readonly id = input(inject(_IdGenerator).getId('ng-listbox-', true));
 
   /** A reference to the parent combobox popup, if one exists. */
   private readonly _popup = inject<ComboboxPopup<V>>(ComboboxPopup, {
@@ -246,11 +242,7 @@ export class Option<V> {
   private readonly _listbox = inject(Listbox);
 
   /** A unique identifier for the option. */
-  private readonly _generatedId = inject(_IdGenerator).getId('ng-option-', true);
-
-  // TODO(wagnermaciel): https://github.com/angular/components/pull/30495#discussion_r1972601144.
-  /** A unique identifier for the option. */
-  protected id = computed(() => this._generatedId);
+  readonly id = input(inject(_IdGenerator).getId('ng-option-', true));
 
   // TODO(wagnermaciel): See if we want to change how we handle this since textContent is not
   // reactive. See https://github.com/angular/components/pull/30495#discussion_r1961260216.

src/aria/menu/menu.ts

@@ -187,7 +187,7 @@ export class Menu<V> {
   readonly textDirection = inject(Directionality).valueSignal;
 
   /** The unique ID of the menu. */
-  readonly id = input<string>(inject(_IdGenerator).getId('ng-menu-', true));
+  readonly id = input(inject(_IdGenerator).getId('ng-menu-', true));
 
   /** Whether the menu should wrap its items. */
   readonly wrap = input(true, {transform: booleanAttribute});
@@ -423,7 +423,7 @@ export class MenuItem<V> {
   readonly element: HTMLElement = this._elementRef.nativeElement;
 
   /** The unique ID of the menu item. */
-  readonly id = input<string>(inject(_IdGenerator).getId('ng-menu-item-', true));
+  readonly id = input(inject(_IdGenerator).getId('ng-menu-item-', true));
 
   /** The value of the menu item. */
   readonly value = input.required<V>();

src/aria/tabs/tabs.ts

@@ -298,7 +298,7 @@ export class Tab implements HasElement, OnInit, OnDestroy {
   private readonly _tabList = inject(TabList);
 
   /** A unique identifier for the widget. */
-  readonly id = input<string>(inject(_IdGenerator).getId('ng-tab-', true));
+  readonly id = input(inject(_IdGenerator).getId('ng-tab-', true));
 
   /** The host native element. */
   readonly element = computed(() => this._elementRef.nativeElement);
@@ -388,7 +388,7 @@ export class TabPanel implements OnInit, OnDestroy {
   private readonly _Tabs = inject(Tabs);
 
   /** A global unique identifier for the tab. */
-  private readonly _id = inject(_IdGenerator).getId('ng-tabpanel-', true);
+  readonly id = input(inject(_IdGenerator).getId('ng-tabpanel-', true));
 
   /** The Tab UIPattern associated with the tabpanel */
   readonly tab = computed(() =>
@@ -404,8 +404,6 @@ export class TabPanel implements OnInit, OnDestroy {
   /** The TabPanel UIPattern. */
   readonly _pattern: TabPanelPattern = new TabPanelPattern({
     ...this,
-    id: () => this._id,
-    tab: this.tab,
   });
 
   constructor() {

src/aria/toolbar/toolbar.ts

@@ -198,10 +198,7 @@ export class ToolbarWidget<V> implements OnInit, OnDestroy {
   private readonly _toolbar = inject(Toolbar);
 
   /** A unique identifier for the widget. */
-  private readonly _generatedId = inject(_IdGenerator).getId('ng-toolbar-widget-', true);
-
-  /** A unique identifier for the widget. */
-  readonly id = input<string>(this._generatedId);
+  readonly id = input(inject(_IdGenerator).getId('ng-toolbar-widget-', true));
 
   /** The parent Toolbar UIPattern. */
   readonly toolbar = computed(() => this._toolbar._pattern);

src/aria/tree/tree.ts

@@ -111,7 +111,7 @@ export class Tree<V> {
   private readonly _unorderedItems = signal(new Set<TreeItem<V>>());
 
   /** A unique identifier for the tree. */
-  readonly id = input<string>(inject(_IdGenerator).getId('ng-tree-', true));
+  readonly id = input(inject(_IdGenerator).getId('ng-tree-', true));
 
   /** The host native element. */
   readonly element = computed(() => this._elementRef.nativeElement);
@@ -278,7 +278,7 @@ export class TreeItem<V> extends DeferredContentAware implements OnInit, OnDestr
   private readonly _group = signal<TreeItemGroup<V> | undefined>(undefined);
 
   /** A unique identifier for the tree item. */
-  readonly id = input<string>(inject(_IdGenerator).getId('ng-tree-item-', true));
+  readonly id = input(inject(_IdGenerator).getId('ng-tree-item-', true));
 
   /** The host native element. */
   readonly element = computed(() => this._elementRef.nativeElement);