@cli/components

Unified Custom Angular UI Component Library — Native HTML5/CSS3/Signals Components including Data Grid, Dropdowns, Date Pickers, Modal Dialogs, PDF Viewer, Schedule Roster, and more.

Installation

npm install @cli/components

Features

• ⚡ Angular 20 & Signals Support: Built for modern Angular applications.
• 📊 CliGrid Component: High-performance Data Grid with sorting, paging, filtering, grouping, row drag & drop, detail templates, aggregate columns, and export utilities.
• 🎛️ Form Controls:
  • CliDropdownComponent (Single select dropdown)
  • CliComboboxComponent (Autocomplete combobox)
  • CliMultiSelectComponent (Multi-select dropdown with chip tags)
  • CliCheckboxComponent & CliRadioGroupComponent
  • CliDatePickerComponent & CliTimePickerComponent
  • CliNumericTextBoxComponent
  • CliSwitchComponent
• 🖥️ UI Layout & Overlays:
  • CliTabComponent & CliTabItemComponent (Tab bar & tab item container)
  • CliDialogComponent (Accessible modal dialog)
• 📑 Advanced Viewers & Schedulers:
  • CliPdfViewerComponent (Native PDF rendering)
  • CliScheduleComponent (Interactive schedule roster viewer)

Peer Dependencies

Ensure your project has Angular 20+ installed:

"peerDependencies": {
  "@angular/common": "^20.0.0",
  "@angular/core": "^20.0.0",
  "@angular/forms": "^20.0.0",
  "rxjs": "^7.0.0"
}

Basic Usage

Import the components directly into your standalone components or modules:

import { Component } from '@angular/core';
import { CliGridComponent, CliDropdownComponent, CliDatePickerComponent } from '@cli/components';

@Component({
  selector: 'app-demo',
  standalone: true,
  imports: [CliGridComponent, CliDropdownComponent, CliDatePickerComponent],
  template: `
    <cli-dropdown [dataSource]="items" placeholder="Select Item"></cli-dropdown>
  `
})
export class DemoComponent {
  items = [
    { text: 'Option 1', value: 1 },
    { text: 'Option 2', value: 2 }
  ];
}

License

ISC