refactor(multiple): make patterns instance private

Makes the instance of the UI pattern private in the Aria components. Note that we can't actually mark them as `private`, because they're referenced between components.

Author: crisbeto

src/aria/accordion/accordion.ts

@@ -44,9 +44,9 @@ import {
   host: {
     'class': 'ng-accordion-panel',
     'role': 'region',
-    '[attr.id]': 'pattern.id()',
-    '[attr.aria-labelledby]': 'pattern.accordionTrigger()?.id()',
-    '[attr.inert]': 'pattern.hidden() ? true : null',
+    '[attr.id]': '_pattern.id()',
+    '[attr.aria-labelledby]': '_pattern.accordionTrigger()?.id()',
+    '[attr.inert]': '_pattern.hidden() ? true : null',
   },
 })
 export class AccordionPanel {
@@ -64,7 +64,7 @@ export class AccordionPanel {
     signal(undefined);
 
   /** The UI pattern instance for this panel. */
-  readonly pattern: AccordionPanelPattern = new AccordionPanelPattern({
+  readonly _pattern: AccordionPanelPattern = new AccordionPanelPattern({
     id: () => this._id,
     value: this.value,
     accordionTrigger: () => this.accordionTrigger(),
@@ -73,7 +73,7 @@ export class AccordionPanel {
   constructor() {
     // Connect the panel's hidden state to the DeferredContentAware's visibility.
     afterRenderEffect(() => {
-      this._deferredContentAware.contentVisible.set(!this.pattern.hidden());
+      this._deferredContentAware.contentVisible.set(!this._pattern.hidden());
     });
   }
 }
@@ -87,17 +87,17 @@ export class AccordionPanel {
   exportAs: 'ngAccordionTrigger',
   host: {
     'class': 'ng-accordion-trigger',
-    '[attr.data-active]': 'pattern.active()',
+    '[attr.data-active]': '_pattern.active()',
     'role': 'button',
-    '[id]': 'pattern.id()',
-    '[attr.aria-expanded]': 'pattern.expanded()',
-    '[attr.aria-controls]': 'pattern.controls()',
-    '[attr.aria-disabled]': 'pattern.disabled()',
+    '[id]': '_pattern.id()',
+    '[attr.aria-expanded]': '_pattern.expanded()',
+    '[attr.aria-controls]': '_pattern.controls()',
+    '[attr.aria-disabled]': '_pattern.disabled()',
     '[attr.disabled]': 'hardDisabled() ? true : null',
-    '[attr.tabindex]': 'pattern.tabindex()',
-    '(keydown)': 'pattern.onKeydown($event)',
-    '(pointerdown)': 'pattern.onPointerdown($event)',
-    '(focusin)': 'pattern.onFocus($event)',
+    '[attr.tabindex]': '_pattern.tabindex()',
+    '(keydown)': '_pattern.onKeydown($event)',
+    '(pointerdown)': '_pattern.onPointerdown($event)',
+    '(focusin)': '_pattern.onFocus($event)',
   },
 })
 export class AccordionTrigger {
@@ -121,18 +121,18 @@ export class AccordionTrigger {
    *
    * TODO(ok7sai): Consider move this to UI patterns.
    */
-  readonly hardDisabled = computed(() => this.pattern.disabled() && this.pattern.tabindex() < 0);
+  readonly hardDisabled = computed(() => this._pattern.disabled() && this._pattern.tabindex() < 0);
 
   /** The accordion panel pattern controlled by this trigger. This is set by AccordionGroup. */
   readonly accordionPanel: WritableSignal<AccordionPanelPattern | undefined> = signal(undefined);
 
   /** The UI pattern instance for this trigger. */
-  readonly pattern: AccordionTriggerPattern = new AccordionTriggerPattern({
+  readonly _pattern: AccordionTriggerPattern = new AccordionTriggerPattern({
     id: () => this._id,
     value: this.value,
     disabled: this.disabled,
     element: () => this._elementRef.nativeElement,
-    accordionGroup: computed(() => this._accordionGroup.pattern),
+    accordionGroup: computed(() => this._accordionGroup._pattern),
     accordionPanel: this.accordionPanel,
   });
 }
@@ -177,12 +177,12 @@ export class AccordionGroup {
   wrap = input(false, {transform: booleanAttribute});
 
   /** The UI pattern instance for this accordion group. */
-  readonly pattern: AccordionGroupPattern = new AccordionGroupPattern({
+  readonly _pattern: AccordionGroupPattern = new AccordionGroupPattern({
     ...this,
     // TODO(ok7sai): Consider making `activeItem` an internal state in the pattern and call
     // `setDefaultState` in the CDK.
     activeItem: signal(undefined),
-    items: computed(() => this._triggers().map(trigger => trigger.pattern)),
+    items: computed(() => this._triggers().map(trigger => trigger._pattern)),
     expandedIds: this.value,
     // TODO(ok7sai): Investigate whether an accordion should support horizontal mode.
     orientation: () => 'vertical',
@@ -197,9 +197,9 @@ export class AccordionGroup {
 
       for (const trigger of triggers) {
         const panel = panels.find(p => p.value() === trigger.value());
-        trigger.accordionPanel.set(panel?.pattern);
+        trigger.accordionPanel.set(panel?._pattern);
         if (panel) {
-          panel.accordionTrigger.set(trigger.pattern);
+          panel.accordionTrigger.set(trigger._pattern);
         }
       }
     });

src/aria/combobox/combobox.ts

@@ -37,12 +37,12 @@ import {toSignal} from '@angular/core/rxjs-interop';
     },
   ],
   host: {
-    '[attr.data-expanded]': 'pattern.expanded()',
-    '(input)': 'pattern.onInput($event)',
-    '(keydown)': 'pattern.onKeydown($event)',
-    '(pointerup)': 'pattern.onPointerup($event)',
-    '(focusin)': 'pattern.onFocusIn()',
-    '(focusout)': 'pattern.onFocusOut($event)',
+    '[attr.data-expanded]': '_pattern.expanded()',
+    '(input)': '_pattern.onInput($event)',
+    '(keydown)': '_pattern.onKeydown($event)',
+    '(pointerup)': '_pattern.onPointerup($event)',
+    '(focusin)': '_pattern.onFocusIn()',
+    '(focusout)': '_pattern.onFocusOut($event)',
   },
 })
 export class Combobox<V> {
@@ -82,7 +82,7 @@ export class Combobox<V> {
   readonly firstMatch = input<V | undefined>(undefined);
 
   /** The combobox ui pattern. */
-  readonly pattern = new ComboboxPattern<any, V>({
+  readonly _pattern = new ComboboxPattern<any, V>({
     ...this,
     textDirection: this.textDirection,
     disabled: this.disabled,
@@ -95,13 +95,13 @@ export class Combobox<V> {
 
   constructor() {
     afterRenderEffect(() => {
-      if (!this._deferredContentAware?.contentVisible() && this.pattern.isFocused()) {
+      if (!this._deferredContentAware?.contentVisible() && this._pattern.isFocused()) {
         this._deferredContentAware?.contentVisible.set(true);
       }
     });
 
     afterRenderEffect(() => {
-      if (!this._hasBeenFocused() && this.pattern.isFocused()) {
+      if (!this._hasBeenFocused() && this._pattern.isFocused()) {
         this._hasBeenFocused.set(true);
       }
     });
@@ -114,12 +114,12 @@ export class Combobox<V> {
   host: {
     'role': 'combobox',
     '[value]': 'value()',
-    '[attr.aria-expanded]': 'combobox.pattern.expanded()',
-    '[attr.aria-activedescendant]': 'combobox.pattern.activedescendant()',
-    '[attr.aria-controls]': 'combobox.pattern.popupId()',
-    '[attr.aria-haspopup]': 'combobox.pattern.hasPopup()',
-    '[attr.aria-autocomplete]': 'combobox.pattern.autocomplete()',
-    '[attr.readonly]': 'combobox.pattern.readonly()',
+    '[attr.aria-expanded]': 'combobox._pattern.expanded()',
+    '[attr.aria-activedescendant]': 'combobox._pattern.activedescendant()',
+    '[attr.aria-controls]': 'combobox._pattern.popupId()',
+    '[attr.aria-haspopup]': 'combobox._pattern.hasPopup()',
+    '[attr.aria-autocomplete]': 'combobox._pattern.autocomplete()',
+    '[attr.readonly]': 'combobox._pattern.readonly()',
   },
 })
 export class ComboboxInput {
@@ -133,16 +133,16 @@ export class ComboboxInput {
   value = model<string>('');
 
   constructor() {
-    (this.combobox.pattern.inputs.inputEl as WritableSignal<HTMLInputElement>).set(
+    (this.combobox._pattern.inputs.inputEl as WritableSignal<HTMLInputElement>).set(
       this._elementRef.nativeElement,
     );
-    this.combobox.pattern.inputs.inputValue = this.value;
+    this.combobox._pattern.inputs.inputValue = this.value;
 
     /** Focuses & selects the first item in the combobox if the user changes the input value. */
     afterRenderEffect(() => {
       this.value();
       this.combobox.popup()?.controls()?.items();
-      untracked(() => this.combobox.pattern.onFilter());
+      untracked(() => this.combobox._pattern.onFilter());
     });
   }
 }

src/aria/grid/grid.ts

@@ -29,15 +29,15 @@ import {GridPattern, GridRowPattern, GridCellPattern, GridCellWidgetPattern} fro
   host: {
     'class': 'grid',
     'role': 'grid',
-    '[tabindex]': 'pattern.tabIndex()',
-    '[attr.aria-disabled]': 'pattern.disabled()',
-    '[attr.aria-activedescendant]': 'pattern.activeDescendant()',
-    '(keydown)': 'pattern.onKeydown($event)',
-    '(pointerdown)': 'pattern.onPointerdown($event)',
-    '(pointermove)': 'pattern.onPointermove($event)',
-    '(pointerup)': 'pattern.onPointerup($event)',
-    '(focusin)': 'pattern.onFocusIn()',
-    '(focusout)': 'pattern.onFocusOut($event)',
+    '[tabindex]': '_pattern.tabIndex()',
+    '[attr.aria-disabled]': '_pattern.disabled()',
+    '[attr.aria-activedescendant]': '_pattern.activeDescendant()',
+    '(keydown)': '_pattern.onKeydown($event)',
+    '(pointerdown)': '_pattern.onPointerdown($event)',
+    '(pointermove)': '_pattern.onPointermove($event)',
+    '(pointerup)': '_pattern.onPointerup($event)',
+    '(focusin)': '_pattern.onFocusIn()',
+    '(focusout)': '_pattern.onFocusOut($event)',
   },
 })
 export class Grid {
@@ -49,7 +49,7 @@ export class Grid {
 
   /** The UI patterns for the rows in the grid. */
   private readonly _rowPatterns: Signal<GridRowPattern[]> = computed(() =>
-    this._rows().map(r => r.pattern),
+    this._rows().map(r => r._pattern),
   );
 
   /** The host native element. */
@@ -74,15 +74,15 @@ export class Grid {
   readonly colWrap = input<'continuous' | 'loop' | 'nowrap'>('loop');
 
   /** The UI pattern for the grid. */
-  readonly pattern = new GridPattern({
+  readonly _pattern = new GridPattern({
     ...this,
     rows: this._rowPatterns,
     getCell: e => this._getCell(e),
   });
 
   constructor() {
-    afterRenderEffect(() => this.pattern.resetStateEffect());
-    afterRenderEffect(() => this.pattern.focusEffect());
+    afterRenderEffect(() => this._pattern.resetStateEffect());
+    afterRenderEffect(() => this._pattern.focusEffect());
   }
 
   /** Gets the cell pattern for a given element. */
@@ -123,14 +123,14 @@ export class GridRow {
 
   /** The UI patterns for the cells in this row. */
   private readonly _cellPatterns: Signal<GridCellPattern[]> = computed(() =>
-    this._cells().map(c => c.pattern),
+    this._cells().map(c => c._pattern),
   );
 
   /** The parent grid. */
   private readonly _grid = inject(Grid);
 
   /** The parent grid UI pattern. */
-  readonly grid = computed(() => this._grid.pattern);
+  readonly grid = computed(() => this._grid._pattern);
 
   /** The host native element. */
   readonly element = computed(() => this._elementRef.nativeElement);
@@ -142,7 +142,7 @@ export class GridRow {
   readonly rowIndex = input<number>();
 
   /** The UI pattern for the grid row. */
-  readonly pattern = new GridRowPattern({
+  readonly _pattern = new GridRowPattern({
     ...this,
     cells: this._cellPatterns,
   });
@@ -155,17 +155,17 @@ export class GridRow {
   host: {
     'class': 'grid-cell',
     '[attr.role]': 'role()',
-    '[attr.id]': 'pattern.id()',
-    '[attr.rowspan]': 'pattern.rowSpan()',
-    '[attr.colspan]': 'pattern.colSpan()',
-    '[attr.data-active]': 'pattern.active()',
-    '[attr.aria-disabled]': 'pattern.disabled()',
-    '[attr.aria-rowspan]': 'pattern.rowSpan()',
-    '[attr.aria-colspan]': 'pattern.colSpan()',
-    '[attr.aria-rowindex]': 'pattern.ariaRowIndex()',
-    '[attr.aria-colindex]': 'pattern.ariaColIndex()',
-    '[attr.aria-selected]': 'pattern.ariaSelected()',
-    '[tabindex]': 'pattern.tabIndex()',
+    '[attr.id]': '_pattern.id()',
+    '[attr.rowspan]': '_pattern.rowSpan()',
+    '[attr.colspan]': '_pattern.colSpan()',
+    '[attr.data-active]': '_pattern.active()',
+    '[attr.aria-disabled]': '_pattern.disabled()',
+    '[attr.aria-rowspan]': '_pattern.rowSpan()',
+    '[attr.aria-colspan]': '_pattern.colSpan()',
+    '[attr.aria-rowindex]': '_pattern.ariaRowIndex()',
+    '[attr.aria-colindex]': '_pattern.ariaColIndex()',
+    '[attr.aria-selected]': '_pattern.ariaSelected()',
+    '[tabindex]': '_pattern.tabIndex()',
   },
 })
 export class GridCell {
@@ -177,7 +177,7 @@ export class GridCell {
 
   /** The UI pattern for the widget in this cell. */
   private readonly _widgetPattern: Signal<GridCellWidgetPattern | undefined> = computed(
-    () => this._widgets()?.pattern,
+    () => this._widgets()?._pattern,
   );
 
   /** The parent row. */
@@ -214,11 +214,11 @@ export class GridCell {
   readonly selectable = input<boolean>(true);
 
   /** The UI pattern for the grid cell. */
-  readonly pattern = new GridCellPattern({
+  readonly _pattern = new GridCellPattern({
     ...this,
     id: () => this._id,
     grid: this._row.grid,
-    row: () => this._row.pattern,
+    row: () => this._row._pattern,
     widget: this._widgetPattern,
   });
 }
@@ -229,8 +229,8 @@ export class GridCell {
   exportAs: 'ngGridCellWidget',
   host: {
     'class': 'grid-cell-widget',
-    '[attr.data-active]': 'pattern.active()',
-    '[tabindex]': 'pattern.tabIndex()',
+    '[attr.data-active]': '_pattern.active()',
+    '[tabindex]': '_pattern.tabIndex()',
   },
 })
 export class GridCellWidget {
@@ -247,9 +247,9 @@ export class GridCellWidget {
   readonly activate = model<boolean>(false);
 
   /** The UI pattern for the grid cell widget. */
-  readonly pattern = new GridCellWidgetPattern({
+  readonly _pattern = new GridCellWidgetPattern({
     ...this,
-    cell: () => this._cell.pattern,
+    cell: () => this._cell._pattern,
   });
 
   /** Focuses the widget. */