docs(aria/toolbar): expose selected values model (angular#32356)

* docs(aria/toolbar): expose selected values model

* fixup! docs(aria/toolbar): expose selected values model

* fixup! docs(aria/toolbar): expose selected values model

(cherry picked from commit 84f9e0b)

Author: wagnermaciel

src/aria/private/toolbar/toolbar.spec.ts

@@ -75,6 +75,7 @@ function getToolbarPattern(
     element,
     items,
     activeItem,
+    values: signal([]),
     wrap: signal(inputs.wrap ?? true),
     disabled: signal(inputs.disabled ?? false),
     softDisabled: signal(inputs.softDisabled ?? true),

src/aria/private/toolbar/toolbar.ts

@@ -6,7 +6,7 @@
  * found in the LICENSE file at https://angular.dev/license
  */
 
-import {computed, signal} from '@angular/core';
+import {computed} from '@angular/core';
 import {SignalLike} from '../behaviors/signal-like/signal-like';
 import {KeyboardEventManager} from '../behaviors/event-manager';
 import {List, ListInputs} from '../behaviors/list/list';
@@ -15,7 +15,7 @@ import {ToolbarWidgetPattern} from './toolbar-widget';
 /** Represents the required inputs for a toolbar. */
 export type ToolbarInputs<V> = Omit<
   ListInputs<ToolbarWidgetPattern<V>, V>,
-  'multi' | 'typeaheadDelay' | 'values' | 'selectionMode' | 'focusMode'
+  'multi' | 'typeaheadDelay' | 'selectionMode' | 'focusMode'
 > & {
   /** A function that returns the toolbar item associated with a given element. */
   getItem: (e: Element) => ToolbarWidgetPattern<V> | undefined;
@@ -160,7 +160,6 @@ export class ToolbarPattern<V> {
       multi: () => true,
       focusMode: () => 'roving',
       selectionMode: () => 'explicit',
-      values: signal([] as V[]),
       typeaheadDelay: () => 0, // Toolbar widgets do not support typeahead.
     });
   }

src/aria/toolbar/toolbar.ts

@@ -18,6 +18,7 @@ import {
   OnInit,
   OnDestroy,
   contentChildren,
+  model,
 } from '@angular/core';
 import {
   ToolbarPattern,
@@ -108,6 +109,9 @@ export class Toolbar<V> {
   /** Whether focus should wrap when navigating. */
   readonly wrap = input(true, {transform: booleanAttribute});
 
+  /** The values of the selected widgets within the toolbar. */
+  readonly values = model<V[]>([]);
+
   /** The toolbar UIPattern. */
   readonly _pattern: ToolbarPattern<V> = new ToolbarPattern<V>({
     ...this,
@@ -116,6 +120,7 @@ export class Toolbar<V> {
     textDirection: this.textDirection,
     element: () => this._elementRef.nativeElement,
     getItem: e => this._getItem(e),
+    values: this.values,
   });
 
   /** Whether the toolbar has received focus yet. */