added new component tree, splitte, typeahead

Author: angular-bootstrap

README.md

@@ -1,4 +1,4 @@
-# ngbootstrap
+# @angular-bootstrap/ngbootstrap
 
 Angular UI library providing datagrid, drag‑and‑drop, pagination, and stepper components with Bootstrap‑friendly styling.
 
@@ -8,12 +8,15 @@ Angular UI library providing datagrid, drag‑and‑drop, pagination, and steppe
 - 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 – virtualized, debounced search with single/multi select, exact-match selection, and scroll hooks.
 - Angular + Bootstrap first – built for modern Angular (v17–20) and works with plain Bootstrap CSS; Material/Tailwind can be layered via custom styles.
 
 ## Installation
 
 ```bash
-npm install ngbootstrap
+npm install @angular-bootstrap/ngbootstrap
 ```
 
 Make sure your app:
@@ -33,7 +36,7 @@ All components are standalone, so you import them directly into your feature com
 
 ```ts
 import { Component } from '@angular/core';
-import { Datagrid } from 'ngbootstrap/datagrid';
+import { Datagrid } from '@angular-bootstrap/ngbootstrap/datagrid';
 
 interface User {
   id: number;
@@ -93,7 +96,7 @@ npm install jspdf jspdf-autotable xlsx
 
 ```ts
 import { Component } from '@angular/core';
-import { NgbPaginationComponent } from 'ngbootstrap/pagination';
+import { NgbPaginationComponent } from '@angular-bootstrap/ngbootstrap/pagination';
 
 @Component({
   standalone: true,
@@ -124,8 +127,36 @@ export class PagerComponent {
 
 ```ts
 import { Component } from '@angular/core';
-import { NgbStepperComponent } from 'ngbootstrap/stepper';
-import { NgbStepperStep } from 'ngbootstrap/stepper';
+import { NgbStepperComponent } from '@angular-bootstrap/ngbootstrap/stepper';
+import { NgbStepperStep } from '@angular-bootstrap/ngbootstrap/stepper';
+
+### Splitter
+
+```ts
+import { Component } from '@angular/core';
+import { NgbSplitterComponent, NgbSplitterPaneComponent } from '@angular-bootstrap/ngbootstrap/splitter';
+
+@Component({
+  standalone: true,
+  selector: 'app-splitter',
+  imports: [NgbSplitterComponent, NgbSplitterPaneComponent],
+  template: `
+    <ngb-splitter orientation="horizontal">
+      <ngb-splitter-pane size="30%" min="200px" [collapsible]="true" (collapsedChange)="onCollapse($event)">
+        <div class="p-3">Navigation</div>
+      </ngb-splitter-pane>
+      <ngb-splitter-pane>
+        <div class="p-3">Main content</div>
+      </ngb-splitter-pane>
+    </ngb-splitter>
+  `,
+})
+export class SplitterExampleComponent {
+  onCollapse(collapsed: boolean) {
+    // persist pane state if needed
+  }
+}
+```
 
 @Component({
   standalone: true,
@@ -178,7 +209,47 @@ Stepper highlights:
 
 ```ts
 import { Component } from '@angular/core';
-import { DndListDirective, DndItemDirective } from 'ngbootstrap/drag-drop';
+import { DndListDirective, DndItemDirective } from '@angular-bootstrap/ngbootstrap/drag-drop';
+
+### Tree
+
+```ts
+import { Component } from '@angular/core';
+import { NgbTreeComponent, NgbTreeNode } from '@angular-bootstrap/ngbootstrap/tree';
+
+@Component({
+  standalone: true,
+  selector: 'app-tree',
+  imports: [NgbTreeComponent],
+  template: `
+    <ngb-tree
+      [nodes]="nodes"
+      [showCheckbox]="true"
+      type="json"
+      (expand)="onExpand($event)"
+      (collapse)="onCollapse($event)"
+      (selectionChange)="onSelection($event)"
+    ></ngb-tree>
+  `,
+})
+export class TreeExampleComponent {
+  nodes: NgbTreeNode[] = [
+    {
+      id: 'parent',
+      label: 'Parent',
+      expanded: true,
+      children: [
+        { id: 'child-1', label: 'Child 1' },
+        { id: 'child-2', label: 'Child 2' },
+      ],
+    },
+  ];
+
+  onExpand(node: NgbTreeNode) {}
+  onCollapse(node: NgbTreeNode) {}
+  onSelection(selected: NgbTreeNode[]) {}
+}
+```
 
 @Component({
   standalone: true,

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "ngbootstrap",
+  "name": "@angular-bootstrap/ngbootstrap",
   "version": "0.0.1",
   "description": "Angular UI library providing datagrid, drag-and-drop, pagination, and stepper components with Bootstrap-friendly styling.",
   "author": {

src/index.ts

@@ -3,3 +3,6 @@ export * from './datagrid';
 export * from './drag-drop';
 export * from './pagination';
 export * from './stepper';
+export * from './splitter';
+export * from './typeahead';
+export * from './tree';

src/splitter/index.ts

@@ -0,0 +1 @@
+export * from './public-api';

src/splitter/package.json

@@ -0,0 +1,8 @@
+{
+  "name": "ngbootstrap/splitter",
+  "ngPackage": {
+    "lib": {
+      "entryFile": "index.ts"
+    }
+  }
+}

src/splitter/public-api.ts

@@ -0,0 +1,2 @@
+export * from './src/splitter/splitter.component';
+export * from './src/splitter/splitter.types';

src/splitter/src/splitter/splitter-pane.component.ts

@@ -0,0 +1,26 @@
+import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from '@angular/core';
+
+@Component({
+  selector: 'ngb-splitter-pane',
+  standalone: true,
+  template: `<ng-template #paneTpl><ng-content></ng-content></ng-template>`,
+})
+export class NgbSplitterPaneComponent {
+  @ViewChild('paneTpl', { static: true }) templateRef!: TemplateRef<any>;
+
+  @Input() size?: string;
+  @Input() min?: string;
+  @Input() max?: string;
+  @Input() collapsible = false;
+  @Input() collapsed = false;
+
+  @Output() collapsedChange = new EventEmitter<boolean>();
+
+  toggleCollapsed(next?: boolean) {
+    const value = next ?? !this.collapsed;
+    if (value !== this.collapsed) {
+      this.collapsed = value;
+      this.collapsedChange.emit(this.collapsed);
+    }
+  }
+}

src/splitter/src/splitter/splitter.component.spec.ts

@@ -0,0 +1,61 @@
+import { Component, ViewChild } from '@angular/core';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+import { By } from '@angular/platform-browser';
+import { NgbSplitterComponent } from './splitter.component';
+import { NgbSplitterPaneComponent } from './splitter-pane.component';
+
+@Component({
+  standalone: true,
+  imports: [NgbSplitterComponent, NgbSplitterPaneComponent],
+  template: `
+    <ngb-splitter [orientation]="orientation">
+      <ngb-splitter-pane size="200px" min="120px" [collapsible]="true" (collapsedChange)="collapsedEvents.push($event)">
+        <div>Pane A</div>
+      </ngb-splitter-pane>
+      <ngb-splitter-pane size="200px">
+        <div>Pane B</div>
+      </ngb-splitter-pane>
+    </ngb-splitter>
+  `,
+})
+class HostComponent {
+  @ViewChild(NgbSplitterComponent) splitter!: NgbSplitterComponent;
+  orientation: 'horizontal' | 'vertical' = 'horizontal';
+  collapsedEvents: boolean[] = [];
+}
+
+describe('NgbSplitterComponent', () => {
+  let fixture: ComponentFixture<HostComponent>;
+  let host: HostComponent;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [HostComponent],
+    }).compileComponents();
+
+    fixture = TestBed.createComponent(HostComponent);
+    host = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should render panes and handles', () => {
+    const handles = fixture.debugElement.queryAll(By.css('button[role="separator"]'));
+    expect(host.splitter).toBeTruthy();
+    expect(handles.length).toBe(1);
+  });
+
+  it('should toggle collapsible pane via handle', () => {
+    const handle = fixture.debugElement.query(By.css('button[role="separator"]')).nativeElement as HTMLButtonElement;
+    handle.dispatchEvent(new Event('dblclick'));
+    fixture.detectChanges();
+    expect(host.collapsedEvents[0]).toBe(true);
+  });
+
+  it('should apply orientation classes', () => {
+    const container = fixture.debugElement.query(By.css('ngb-splitter > div')).nativeElement as HTMLElement;
+    expect(container.classList.contains('flex-row')).toBe(true);
+    host.orientation = 'vertical';
+    fixture.detectChanges();
+    expect(container.classList.contains('flex-column')).toBe(true);
+  });
+});