@bimetal/list-angular-components

The default Angular list / catalog for BIMETAL — a thin, standalone-component binding over the canonical @bimetal/list-headless controller. Behaviorally identical to the React, Vue and Svelte lists: all interaction logic lives in the controller, the component only renders the canonical .bm-list* DOM with ARIA listbox roles, registers window pointer / keydown listeners, and normalizes the events.

Features

• Multi-select — click toggles, Ctrl/Cmd-click adds, Shift-click extends the range; aria-selected per row.
• Batch reorder — keyboard (Ctrl/Cmd+Arrows) and pointer drag move the whole selection block and commit as ONE MoveItems (one undo).
• Batch delete, in-place rename, undo and theming (darkMode).

Usage

import { Component } from '@angular/core';
import { List } from '@bimetal/list-angular-components';
import { createListStore } from '@bimetal/list-data';
import '@bimetal/list-angular-components/styles';

@Component({
  standalone: true,
  imports: [List],
  template: `<bm-list [store]="store" [listId]="listId" title="Liste" [darkMode]="true"></bm-list>`,
})
export class CatalogPage {
  store = createListStore();
  listId = 'catalog';
}

Inputs

| Input | Type | Default | Notes | | ---------- | ------------------------ | ------- | ----------------------------------------------------------- | | store | ListStore | — | Immutable after mount; remount (via @if/*ngIf) to swap. | | listId | string | — | The list aggregate id this view binds to. Immutable. | | config | ListConfigInput | — | Locale + row-geometry overrides; merged with defaults. | | darkMode | boolean | false | Adds data-theme="dark". | | title | string | — | Optional toolbar heading. Omitted → no heading rendered. | | tag | string | — | Optional small toolbar tagline next to the heading. | | onError | (err: unknown) => void | — | Non-domain error channel (e.g. ConcurrencyError). |

License

Apache-2.0 — see LICENSE.