From d0e34936e6abfb9e532a38d01aeff50d78df6ac1 Mon Sep 17 00:00:00 2001 From: Wagner Maciel Date: Fri, 4 Apr 2025 12:43:17 -0400 Subject: [PATCH] refactor(cdk-experimental/listbox): rename multiselectable to multi --- src/cdk-experimental/listbox/listbox.ts | 4 ++-- .../list-selection/list-selection.spec.ts | 4 ++-- .../behaviors/list-selection/list-selection.ts | 6 +++--- .../ui-patterns/listbox/listbox.spec.ts | 10 +++++----- .../ui-patterns/listbox/listbox.ts | 14 +++++++------- .../listbox/cdk-listbox/cdk-listbox-example.html | 2 +- 6 files changed, 20 insertions(+), 20 deletions(-) diff --git a/src/cdk-experimental/listbox/listbox.ts b/src/cdk-experimental/listbox/listbox.ts index 93e04eb19534..1ecb801377c8 100644 --- a/src/cdk-experimental/listbox/listbox.ts +++ b/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 { 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}); diff --git a/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.spec.ts b/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.spec.ts index 79c850a5a8af..2a97c628e7c0 100644 --- a/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.spec.ts +++ b/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.spec.ts @@ -51,7 +51,7 @@ describe('List Selection', () => { items, navigation, value: signal([]), - 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] diff --git a/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts b/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts index 754a70e92e60..f926fe6fc988 100644 --- a/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts +++ b/src/cdk-experimental/ui-patterns/behaviors/list-selection/list-selection.ts @@ -25,7 +25,7 @@ export interface ListSelectionInputs, V> { items: SignalLike; /** Whether multiple items in the list can be selected at once. */ - multiselectable: SignalLike; + multi: SignalLike; /** The current value of the list selection. */ value: WritableSignalLike; @@ -54,7 +54,7 @@ export class ListSelection, V> { return; } - if (!this.inputs.multiselectable()) { + if (!this.inputs.multi()) { this.deselectAll(); } @@ -86,7 +86,7 @@ export class ListSelection, V> { /** Selects all items in the list. */ selectAll() { - if (!this.inputs.multiselectable()) { + if (!this.inputs.multi()) { return; // Should we log a warning? } diff --git a/src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts b/src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts index 0e2efeb90b63..e36169990b0f 100644 --- a/src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts +++ b/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; }); diff --git a/src/cdk-experimental/ui-patterns/listbox/listbox.ts b/src/cdk-experimental/ui-patterns/listbox/listbox.ts index 1914ff91d48d..199d3f4dbf66 100644 --- a/src/cdk-experimental/ui-patterns/listbox/listbox.ts +++ b/src/cdk-experimental/ui-patterns/listbox/listbox.ts @@ -63,7 +63,7 @@ export class ListboxPattern { activedescendant = computed(() => this.focusManager.getActiveDescendant()); /** Whether multiple items in the list can be selected at once. */ - multiselectable: SignalLike; + multi: SignalLike; /** The number of items in the listbox. */ setsize = computed(() => this.navigation.inputs.items().length); @@ -112,7 +112,7 @@ export class ListboxPattern { .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 { .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 { 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 { constructor(readonly inputs: ListboxInputs) { 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}); diff --git a/src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.html b/src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.html index a62ec10b26b4..7bfd5e965cf3 100644 --- a/src/components-examples/cdk-experimental/listbox/cdk-listbox/cdk-listbox-example.html +++ b/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"