@angular-bootstrap/ngbootstrap 0.0.12 → 1.0.0

package/README.md

@@ -1,93 +1,80 @@
 # @angular-bootstrap/ngbootstrap
 
-Angular UI library providing Datagrid, Drag‑and‑drop, Pagination, Stepper, Splitter, Tree, Typeahead, and Chips components with Bootstrap‑friendly styling.
+Standalone Angular UI components with Bootstrap-friendly styling.
 
-## Features
+## What Is Included
 
-- Datagrid – sortable, filterable, paginated, Sticky Header/Footer, Sticky Rows, Grid Styling, editable table with export (PDF/Excel) support and accessible templates.
-- Drag & drop – lightweight list and item directives with keyboard‑friendly a11y helpers.
-- Pagination – standalone Bootstrap‑styled pagination component.
-- Stepper – horizontal/vertical stepper with custom labels, error states, theming hooks, and keyboard support.
-- Splitter – resizable horizontal/vertical panes with collapsing, keyboard resizing, and ARIA semantics.
-- Tree – keyboard-accessible tree with optional checkboxes, JSON-style expanders, and expand/collapse helpers.
-- Typeahead – Bootstrap dropdown overlay with debouncing, virtualization, single/multi select, chips/tags mode, custom templates, and Reactive Forms support.
-- Chips – small reusable chips/tags component used by Typeahead (can also be used standalone).
-- Angular + Bootstrap first – built for modern Angular (v21) and works with plain Bootstrap CSS; Material/Tailwind can be layered via custom styles.
+- DataGrid
+- Pagination
+- Typeahead
+- Tree
+- Splitter
+- Stepper
+- Chips
+- Drag and drop
 
-## Installation
+## Requirements
 
-```bash
-npm install @angular-bootstrap/ngbootstrap
-```
-
-Make sure your app:
+- Angular `>=21.0.0 <23.0.0`
+- RxJS `^7.8.0`
+- Bootstrap CSS in the consuming app
+- Bootstrap Icons when icon-based examples are used
 
-- Uses Angular 21 (peer deps: `>=21 <22`).
-- Includes Bootstrap CSS + Bootstrap Icons (for example in `angular.json` or global styles):
+## Install
 
-```css
-@import 'bootstrap/dist/css/bootstrap.min.css';
-@import 'bootstrap-icons/font/bootstrap-icons.css';
+```bash
+npm install @angular-bootstrap/ngbootstrap bootstrap bootstrap-icons
 ```
 
-## Usage overview
-
-All components are standalone, so you import them directly into your feature components.
+Optional integrations are installed only when you use those features:
 
-Key datagrid capabilities:
-
-- Sorting (`enableSorting`, `sortChange`).
-- Column/global filtering (`enableFiltering`, `enableGlobalFilter`, `filtersChange`).
-- Pagination (`enablePagination`, `pageSize`, `pageChange`).
-- Inline add/edit/delete (`enableAdd`, `enableEdit`, `enableDelete`, `rowAdd`, `rowSave`, `rowDelete`).
-- Stable row identity via `trackBy` (defaults to index).
-- Pluggable editing logic via `editService` (implement `NgbDatagridEditService`).
-- Export to PDF/Excel via `exportOptions`.
-
-Export requires optional peer dependencies. Install only if you use export:
-
-```sh
-npm install jspdf jspdf-autotable xlsx
+```bash
+npm install chart.js jspdf jspdf-autotable xlsx
 ```
 
-Stepper highlights:
-
-- Horizontal/vertical variants via `orientation`.
-- Custom labels with the `ngbStepLabel` directive.
-- Label and content positioning (`labelPosition`, `contentPosition`).
-- Error states and messages (`errorMessage` on steps).
-- Controlled navigation (`allowRevisit`, `next()`, `prev()`, `reset()` and events).
-- Theming hooks via `theme` and CSS classes (`bootstrap`, `material`, `tailwind`).
-
-Refer to the source under `src/drag-drop` and `src/datagrid`/`src/stepper` for full API details until a dedicated docs site is added.
+## Use
+
+Import standalone components directly in your Angular component.
+
+```ts
+import { Component } from '@angular/core';
+import { NgbDatagridComponent, type ColumnDef } from '@angular-bootstrap/ngbootstrap';
+
+@Component({
+  selector: 'app-users-grid',
+  standalone: true,
+  imports: [NgbDatagridComponent],
+  template: `
+    <ngb-datagrid
+      [data]="users"
+      [columns]="columns"
+      [enableSorting]="true"
+      filterable="row"
+      [enablePagination]="true"
+      [pageSize]="10"
+    />
+  `,
+})
+export class UsersGridComponent {
+  users = [
+    { id: 1, name: 'Ava Patel', role: 'Admin' },
+    { id: 2, name: 'Noah Chen', role: 'Editor' },
+  ];
+
+  columns: ColumnDef[] = [
+    { field: 'id', header: 'ID', type: 'number', width: 90, sortable: true },
+    { field: 'name', header: 'Name', type: 'text', sortable: true, filterable: true },
+    { field: 'role', header: 'Role', type: 'text', filterable: true },
+  ];
+}
+```
 
 ## Development
 
-Local setup:
-
 ```bash
-npm install
-npm run lint
-npm test
-npm run build
+pnpm install
+pnpm test
+pnpm build
 ```
 
-- Build artefacts go to `dist/`.
-- Tests are powered by Jest + `jest-preset-angular`.
-
-## Releasing
-
-Releases are automated via GitHub Actions:
-
-- Non‑`main` branches:
-  - `.github/workflows/ci.yml` runs install, tests, build only.
-- `main` branch:
-  - `.github/workflows/release.yml` runs install, tests, build and publishes to npm using `NPM_TOKEN` from repository secrets.
-
-Recommended release flow:
-
-- On your local machine:
-  - Decide the new version (e.g. `1.1.0`).
-  - Run `npm version minor` or `npm version patch` to bump `package.json` and create the tag.
-  - Push the commit and tag: `git push origin main --tags`.
-- GitHub Actions will build and publish that tagged version to npm.
+Build output is written to `dist/`.