Multi-selection toolbar

<multi-selection-toolbar> is the bar that slides up from the bottom of the screen once the user has selected more than one document — add them all to a collection, export them, or (when the app's assistant feature allows it) attach them to an AI overview. It reads the current selection from SelectionStore and needs nothing wired to know when to appear.

Minimal example

import { Component, inject } from "@angular/core";
import { MultiSelectionToolbarComponent } from "@sinequa/atomic-angular";
import { SelectionStore } from "@sinequa/atomic-angular";
import type { Article } from "@sinequa/atomic";

@Component({
  selector: "sample-component",
  imports: [MultiSelectionToolbarComponent],
  template: `<multi-selection-toolbar variant="dark" />`,
})
export class SampleComponent {
  private readonly selection = inject(SelectionStore);

  // Whatever UI lets the user tick rows calls this — a checkbox column, a
  // ctrl/shift-click handler — the toolbar itself has no selection UI of its own.
  protected toggle(article: Article) {
    this.selection.addArticleToMultiSelection(article);
  }
}

The toolbar is invisible (opacity-0, translated off-screen) and inert whenever SelectionStore.multiSelectCount() is zero — there is no hidden/shown input to manage yourself. inert is what keeps its buttons out of the tab order while it cannot be seen.

Keyboard and screen readers

The bar is a role="toolbar" named by the multiSelectionToolbar.label key. Because it is inert while empty, the lib cannot announce anything from inside it: a separate role="status" region renders the selection count ("3 items selected") and nothing when the selection is empty.

Reaching the bar is the application's job, since the lib cannot know how a page lays out its zones. Use the hint input to tell screen reader users how, on the first selection only:

<multi-selection-toolbar [hint]="'searchZones.selectionHint' | transloco" (cleared)="focusResults()" />

Escape inside the bar clears the selection. The bar then becomes inert and drops the focus, so the cleared output is where the page puts it back (for example on the results).

How it works

"Add to collection" reuses the same AddToCollection callable a single-document flow would call, passed the whole multiSelection array at once — the dialog already accepts one article or an array. If every selected document ends up removed from the target collection (the dialog resolves "dialog-no"), the toolbar clears the selection on the assumption the user is done with it.

Options

Pitfalls

What's next