Andhera Angular

A comprehensive Angular 20 UI component library featuring reusable components, directives, services, animations, and utilities for building modern admin dashboards and applications.

Features

• 🎨 Components - Chips (with variants, sizes, icons, removable)
• 🎬 Animations - Fade, Slide, Zoom, Expand/Collapse, Shake
• 📋 Directives - Scroll Reset, Custom Scrollbar (Perfect Scrollbar)
• 🔧 Services - Config, Confirmation Dialog, Loading, Media Watcher, Platform Detection, Splash Screen, Utils
• ✅ Validators - Form validators (mustMatch, etc.)
• 🧪 Mock API - Built-in mock API interceptor for development

Installation

npm install andhera-angular

Peer Dependencies

This library requires the following peer dependencies:

npm install @angular/animations @angular/cdk @angular/common @angular/core @angular/forms @angular/material @angular/router rxjs

Usage

Import the provider in your app config

import { ApplicationConfig } from '@angular/core';
import { provideBee } from 'andhera-angular';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBee({
      // Your Bee configuration
      layout: 'classy',
      scheme: 'light',
      screens: { sm: '600px', md: '960px', lg: '1280px', xl: '1440px' },
      theme: 'theme-default',
      themes: [{ id: 'theme-default', name: 'Default' }],
    }),
  ],
};

Using Chips Component

import { Component } from '@angular/core';
import { BeeChipsComponent } from 'andhera-angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [BeeChipsComponent],
  template: `
    <!-- Single chip -->
    <bee-chips 
      label="Angular" 
      variant="primary" 
      size="md"
      [removable]="true"
      (removed)="onRemoved()"
      (clicked)="onClicked($event)">
    </bee-chips>

    <!-- Chip with icon -->
    <bee-chips 
      label="Settings" 
      icon="pi pi-cog"
      iconPosition="left"
      variant="secondary">
    </bee-chips>

    <!-- Different variants -->
    <bee-chips label="Success" variant="success"></bee-chips>
    <bee-chips label="Warning" variant="warning"></bee-chips>
    <bee-chips label="Error" variant="error"></bee-chips>
    <bee-chips label="Outline" variant="outline"></bee-chips>

    <!-- Different sizes -->
    <bee-chips label="XS" size="xs"></bee-chips>
    <bee-chips label="SM" size="sm"></bee-chips>
    <bee-chips label="MD" size="md"></bee-chips>
    <bee-chips label="LG" size="lg"></bee-chips>
    <bee-chips label="XL" size="xl"></bee-chips>
  `,
})
export class ExampleComponent {
  onRemoved() {
    console.log('Chip removed');
  }

  onClicked(event: MouseEvent) {
    console.log('Chip clicked', event);
  }
}

Using Services

import { Component, inject } from '@angular/core';
import { BeeConfirmationService } from 'andhera-angular';

@Component({
  selector: 'app-example',
  template: `<button (click)="confirm()">Delete</button>`,
})
export class ExampleComponent {
  private confirmationService = inject(BeeConfirmationService);

  confirm() {
    const dialogRef = this.confirmationService.open({
      title: 'Confirm Delete',
      message: 'Are you sure you want to delete this item?',
      actions: {
        confirm: { label: 'Delete', color: 'warn' },
        cancel: { label: 'Cancel' },
      },
    });

    dialogRef.afterClosed().subscribe((result) => {
      if (result === 'confirmed') {
        // Handle deletion
      }
    });
  }
}

Using Animations

import { Component } from '@angular/core';
import { beeAnimations } from 'andhera-angular';

@Component({
  selector: 'app-example',
  animations: beeAnimations,
  template: `
    <div [@fadeIn]>Fading in content</div>
    <div [@slideInLeft]>Sliding in from left</div>
  `,
})
export class ExampleComponent {}

Using Directives

import { Component } from '@angular/core';
import { BeeScrollbarDirective } from 'andhera-angular';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [BeeScrollbarDirective],
  template: `
    <div [beeScrollbar]="true" style="height: 300px; overflow: hidden;">
      <!-- Scrollable content -->
    </div>
  `,
})
export class ExampleComponent {}

Available Exports

Components

| Component | Selector | Description | |-----------|----------|-------------| | BeeChipsComponent | bee-chips | Chips with variants, sizes, icons |

Services

| Service | Description | |---------|-------------| | BeeConfigService | App configuration management | | BeeConfirmationService | Confirmation dialogs | | BeeLoadingService | Loading state management | | BeeMediaWatcherService | Responsive breakpoint observer | | BeePlatformService | Platform/OS detection | | BeeSplashScreenService | Splash screen control | | BeeUtilsService | Utility functions |

Directives

| Directive | Selector | Description | |-----------|----------|-------------| | BeeScrollbarDirective | [beeScrollbar] | Custom scrollbar | | BeeScrollResetDirective | [beeScrollReset] | Reset scroll on navigation |

Configuration

The library can be configured via the provideBee() function:

provideBee({
  layout: 'classy',           // Layout type
  scheme: 'light',            // 'light' | 'dark' | 'auto'
  screens: {                  // Breakpoints
    sm: '600px',
    md: '960px',
    lg: '1280px',
    xl: '1440px',
  },
  theme: 'theme-default',     // Active theme
  themes: [                   // Available themes
    { id: 'theme-default', name: 'Default' },
  ],
})

Development

npm install
npm run build:lib

Publishing

npm run build:lib
cd dist/bee-library
npm publish --access public

Version

Current version: 0.1.0

Compatible with Angular 20.x

License

MIT © Andhera Team

See LICENSE for details.

Contributing

Contributions are welcome! Please read our contributing guidelines before submitting a PR.

Support

For issues and feature requests, please use the GitHub issue tracker.