refactor(cdk-experimental/listbox): rename multiselectable to multi (#30804)

Author: wagnermaciel

src/cdk-experimental/listbox/listbox.ts

@@ -44,7 +44,7 @@ import {_IdGenerator} from '@angular/cdk/a11y';
     '[attr.tabindex]': 'pattern.tabindex()',
     '[attr.aria-disabled]': 'pattern.disabled()',
     '[attr.aria-orientation]': 'pattern.orientation()',
-    '[attr.aria-multiselectable]': 'pattern.multiselectable()',
+    '[attr.aria-multiselectable]': 'pattern.multi()',
     '[attr.aria-activedescendant]': 'pattern.activedescendant()',
     '(keydown)': 'pattern.onKeydown($event)',
     '(pointerdown)': 'pattern.onPointerdown($event)',
@@ -69,7 +69,7 @@ export class CdkListbox<V> {
   orientation = input<'vertical' | 'horizontal'>('vertical');
 
   /** Whether multiple items in the list can be selected at once. */
-  multiselectable = input(false, {transform: booleanAttribute});
+  multi = input(false, {transform: booleanAttribute});
 
   /** Whether focus should wrap when navigating. */
   wrap = input(true, {transform: booleanAttribute});

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.spec.ts

@@ -51,7 +51,7 @@ describe('List Selection', () => {
       items,
       navigation,
       value: signal<V[]>([]),
-      multiselectable: signal(true),
+      multi: signal(true),
       selectionMode: signal('explicit'),
       ...args,
     });
@@ -83,7 +83,7 @@ describe('List Selection', () => {
       const items = getItems([0, 1, 2, 3, 4]);
       const nav = getNavigation(items);
       const selection = getSelection(items, nav, {
-        multiselectable: signal(false),
+        multi: signal(false),
       });
 
       selection.select(); // [0]

src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts

@@ -25,7 +25,7 @@ export interface ListSelectionInputs<T extends ListSelectionItem<V>, V> {
   items: SignalLike<T[]>;
 
   /** Whether multiple items in the list can be selected at once. */
-  multiselectable: SignalLike<boolean>;
+  multi: SignalLike<boolean>;
 
   /** The current value of the list selection. */
   value: WritableSignalLike<V[]>;
@@ -54,7 +54,7 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
       return;
     }
 
-    if (!this.inputs.multiselectable()) {
+    if (!this.inputs.multi()) {
       this.deselectAll();
     }
 
@@ -86,7 +86,7 @@ export class ListSelection<T extends ListSelectionItem<V>, V> {
 
   /** Selects all items in the list. */
   selectAll() {
-    if (!this.inputs.multiselectable()) {
+    if (!this.inputs.multi()) {
       return; // Should we log a warning?
     }
 

src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts

@@ -35,7 +35,7 @@ describe('Listbox Pattern', () => {
       wrap: inputs.wrap ?? signal(true),
       disabled: inputs.disabled ?? signal(false),
       skipDisabled: inputs.skipDisabled ?? signal(true),
-      multiselectable: inputs.multiselectable ?? signal(false),
+      multi: inputs.multi ?? signal(false),
       focusMode: inputs.focusMode ?? signal('roving'),
       textDirection: inputs.textDirection ?? signal('ltr'),
       orientation: inputs.orientation ?? signal('vertical'),
@@ -155,7 +155,7 @@ describe('Listbox Pattern', () => {
       it('should select an option on navigation', () => {
         const {listbox} = getDefaultPatterns({
           value: signal(['Apple']),
-          multiselectable: signal(false),
+          multi: signal(false),
           selectionMode: signal('follow'),
         });
 
@@ -187,7 +187,7 @@ describe('Listbox Pattern', () => {
         listbox = getDefaultPatterns({
           value: signal([]),
           selectionMode: signal('explicit'),
-          multiselectable: signal(false),
+          multi: signal(false),
         }).listbox;
       });
 
@@ -216,7 +216,7 @@ describe('Listbox Pattern', () => {
         listbox = getDefaultPatterns({
           value: signal([]),
           selectionMode: signal('explicit'),
-          multiselectable: signal(true),
+          multi: signal(true),
         }).listbox;
       });
 
@@ -285,7 +285,7 @@ describe('Listbox Pattern', () => {
       beforeEach(() => {
         listbox = getDefaultPatterns({
           value: signal(['Apple']),
-          multiselectable: signal(true),
+          multi: signal(true),
           selectionMode: signal('follow'),
         }).listbox;
       });

src/cdk-experimental/ui-patterns/listbox/listbox.ts

@@ -63,7 +63,7 @@ export class ListboxPattern<V> {
   activedescendant = computed(() => this.focusManager.getActiveDescendant());
 
   /** Whether multiple items in the list can be selected at once. */
-  multiselectable: SignalLike<boolean>;
+  multi: SignalLike<boolean>;
 
   /** The number of items in the listbox. */
   setsize = computed(() => this.navigation.inputs.items().length);
@@ -112,7 +112,7 @@ export class ListboxPattern<V> {
         .on(this.typeaheadRegexp, e => this.search(e.key, {selectOne: true}));
     }
 
-    if (this.inputs.multiselectable()) {
+    if (this.inputs.multi()) {
       manager
         .on(Modifier.Shift, ' ', () => this._updateSelection({selectFromAnchor: true}))
         .on(Modifier.Shift, 'Enter', () => this._updateSelection({selectFromAnchor: true}))
@@ -123,17 +123,17 @@ export class ListboxPattern<V> {
         .on(Modifier.Ctrl, 'A', () => this._updateSelection({selectAll: true}));
     }
 
-    if (!this.followFocus() && this.inputs.multiselectable()) {
+    if (!this.followFocus() && this.inputs.multi()) {
       manager.on(' ', () => this._updateSelection({toggle: true}));
       manager.on('Enter', () => this._updateSelection({toggle: true}));
     }
 
-    if (!this.followFocus() && !this.inputs.multiselectable()) {
+    if (!this.followFocus() && !this.inputs.multi()) {
       manager.on(' ', () => this._updateSelection({toggleOne: true}));
       manager.on('Enter', () => this._updateSelection({toggleOne: true}));
     }
 
-    if (this.inputs.multiselectable() && this.followFocus()) {
+    if (this.inputs.multi() && this.followFocus()) {
       manager
         .on(Modifier.Ctrl, this.prevKey, () => this.prev())
         .on(Modifier.Ctrl, this.nextKey, () => this.next())
@@ -150,7 +150,7 @@ export class ListboxPattern<V> {
   pointerdown = computed(() => {
     const manager = new PointerEventManager();
 
-    if (this.inputs.multiselectable()) {
+    if (this.inputs.multi()) {
       manager
         .on(e => this.goto(e, {toggle: true}))
         .on(Modifier.Shift, e => this.goto(e, {selectFromActive: true}));
@@ -164,7 +164,7 @@ export class ListboxPattern<V> {
   constructor(readonly inputs: ListboxInputs<V>) {
     this.disabled = inputs.disabled;
     this.orientation = inputs.orientation;
-    this.multiselectable = inputs.multiselectable;
+    this.multi = inputs.multi;
 
     this.navigation = new ListNavigation(inputs);
     this.selection = new ListSelection({...inputs, navigation: this.navigation});

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

@@ -34,7 +34,7 @@
   cdkListbox
   [wrap]="wrap.value"
   [disabled]="disabled.value"
-  [multiselectable]="multi.value"
+  [multi]="multi.value"
   [skipDisabled]="skipDisabled.value"
   [orientation]="orientation"
   [focusMode]="focusMode"