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

npm install @branintelle/ui-lib

📖 Usage

Import Components

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

<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

<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

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

# 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

Built with ❤️ using Angular 18