npm package: @mohityadav0903/branintelle-ui-lib
Description: Modern Angular 18 standalone component library with reusable UI components
Author: Branintelle
Latest version: 1.9.2

# Branintelle UI Library

Modern Angular 18 standalone component library migrated from Angular 7. A collection of reusable, accessible UI components with a consistent design system.

## 🚀 Features

- **Modern Angular 18**: Standalone components using latest Angular features
- **Zero Dependencies**: No NgModule required, tree-shakeable
- **TypeScript**: Full type safety with interfaces
- **Responsive**: Mobile-friendly components
- **Customizable**: Flexible styling and configuration
- **Accessible**: Built with accessibility in mind

## 📦 Components (34 Total)

### Buttons (5)
- `bi-custom-button` - Flexible button with loader and custom sizing
- `bi-approve-button` - Primary action button
- `bi-cancel-button` - Secondary action button with configurable styling
- `bi-back-button` - Navigation back button
- `bi-button-image` - Button with icon and text

### Status & Pills (3)
- `bi-status-pill` - Colored badge/pill for status display
- `bi-pill-badge` - Badge with icon and text
- `bi-pill-box` - Simple colored pill/badge

### Progress (2)
- `bi-progress-bar` - Visual progress with amount/percentage modes
- `bi-segmented-progress-bar` - Multi-segment progress with hover legend

### Navigation (3)
- `bi-vertical-stepper` - Step indicator for multi-step processes
- `bi-custom-breadcrumb` - Breadcrumb navigation
- `bi-header-tabs` - Tab navigation with status counts

### Text & Headers (2)
- `bi-title-header-subtext` - Page header with title and description
- `bi-help-text` - Help indicator component

### Search & Filters (2)
- `bi-search-bar` - Search input with clear icon
- `bi-checklist` - Filterable checkbox list

### Cards (4)
- `bi-horizontal-card` - Multi-info card with avatar and actions
- `bi-info-action-card` - Action card with icon and description  
- `bi-progress-display-card` - Card with progress bar and amounts
- `bi-profile-image-list` - Overlapping profile image list

### Dropdowns (5)
- `bi-single-select-dropdown` - Searchable single-select dropdown
- `bi-multi-select-dropdown` - Multi-select with chips
- `bi-dropdown-with-status` - Status/FY dropdown
- `bi-multiline-option-dropdown` - Advanced multiline dropdown with multiselect & image support
- `bi-expandable-menu-dropdown` - Expandable side menu dropdown

### Tooltips & Overlays (1)
- `bi-custom-tooltip` - Tooltip with formatted amounts

### Stages & Workflows (1)
- `bi-vertical-stages` - Workflow stages with status badges

### User Management (1)
- `bi-user-selection` - User picker with search

### Accordion & Expandable (1)
- `bi-accordion` - Collapsible menu with submenu

### Filters & Menus (2)
- `bi-geo-tag-filter` - Multi-tab filter (cities, status, handlers)
- `bi-table-action-menu` - Contextual action menu for tables

### Tables (1) 🔥
- `bi-scrollable-data-table` - **Full-featured data table** with 11+ column types, sorting, search, infinite scroll, row selection, sticky columns, collapse groups

### Dialogs & Modals (1)
- `bi-confirm-warning` - Confirmation dialog with loader support

## 🔧 Installation

```bash
npm install @branintelle/ui-lib
```

## 📖 Usage

### Import Components

```typescript
import { Component } from '@angular/core';
import { CustomButtonComponent, StatusPillComponent } from '@branintelle/ui-lib';

@Component({
  selector: 'app-example',
  imports: [CustomButtonComponent, StatusPillComponent],
  template: `
    <bi-custom-button
      label="Save"
      [showLoader]="isLoading"
      (clickEvent)="onSave()">
    </bi-custom-button>

    <bi-status-pill
      text="Active"
      textColor="#028E29"
      backgroundColor="#E6F7EA">
    </bi-status-pill>
  `
})
export class ExampleComponent {
  isLoading = false;
  
  onSave() {
    console.log('Saved!');
  }
}
```

### Components API

#### Custom Button
```typescript
<bi-custom-button
  label="Save"                    // Button text
  [disableFlag]="false"           // Disable button
  [showLoader]="false"            // Show loading animation
  width="auto"                    // Button width
  height="auto"                   // Button height
  fontSize="16px"                 // Font size
  [optionalData]="data"          // Data passed to click event
  (clickEvent)="onButtonClick($event)">
</bi-custom-button>
```

#### Progress Bar
```typescript
<bi-progress-bar
  [leftValue]="750000"            // Current value/progress
  [rightValue]="1000000"          // Total value
  [isPercentageMode]="false"      // Use percentage mode
  [showAmounts]="true"            // Show formatted amounts
  bottomLeftText="Spent"          // Bottom left label
  bottomRightText="Budget">       // Bottom right label
</bi-progress-bar>
```

#### Vertical Stepper
```typescript
import { Step } from '@branintelle/ui-lib';

steps: Step[] = [
  { label: 'Step 1', status: 'done' },
  { label: 'Step 2', status: 'active' },
  { label: 'Step 3', status: 'upcoming' }
];

<bi-vertical-stepper
  [steps]="steps"
  (stepClicked)="onStepClick($event)">
</bi-vertical-stepper>
```

## 🎨 Design System

### Colors
- Primary: `#544D7C`
- Success: `#028E29`
- Warning: `#F59E0B`
- Error: `#DC2626`
- Gray: `#828282`

### Typography
- Font Family: Lato
- Weights: 400 (Regular), 500 (Medium), 600 (Semi-Bold), 700 (Bold)

## 🔨 Development

```bash
# Install dependencies
npm install

# Start dev server
npm start

# Build for production
npm run build

# Run tests
npm test
```

## 📝 Migration Notes

These components were migrated from Angular 7 to Angular 18 with the following improvements:

- ✅ Converted to standalone components
- ✅ Modern control flow syntax (`@if`, `@for`, `@switch`)
- ✅ Removed GIF loaders (replaced with CSS animations)
- ✅ Added TypeScript interfaces for type safety
- ✅ Improved accessibility
- ✅ Better performance with OnPush change detection

## 📄 License

MIT

## 🤝 Contributing

Contributions welcome! Please read our contributing guidelines first.

## 📧 Support

For issues and questions: [GitHub Issues](https://github.com/yourusername/branintelle-ui-lib/issues)

---

**Built with ❤️ using Angular 18**