A modern Angular component library built with NX monorepo architecture, featuring Material Design 3 theming, standalone components, and comprehensive UI components.

• 📋 Best Practices - Coding standards, conventions, and development guidelines
• 🏗️ Architecture - Technical architecture, design decisions, and project structure
• 🆕 New App Setup - Step-by-step guide to scaffold a new app in this workspace
• 📐 Dev Guidelines - High-level development and architecture standards
• 📦 Distribution - How to publish and consume libs/aum-core/ via git subtree
• 📱 Responsive Design - SCSS breakpoint mixins and ViewportService usage
• 🔧 Dynamic Toolbar Actions - Register/unregister toolbar buttons at runtime
• 🎛️ Custom Toolbar Templates - Add custom dropdown menus to the toolbar
• 📊 Grid Component - Full reference for <aum-grid>: config, columns, filtering, CSV export, persistent state
• 🤝 Contributing - Developer contribution guide and workflow
• 🚀 Getting Started - Quick start guide and development setup
• 📖 Component Guide - Available components and usage examples
• 🎨 Theming - Theme customization and usage
• 📁 Project Structure - Directory organization

• Node.js: v22.17.0
• npm: Latest version
• Angular CLI: v20.x
• NX CLI: v21.x (optional but recommended)

# Clone the repository
git clone <repository-url>
cd aum-core

# Install dependencies
npm install

# Start development server
npm run serve
# or using NX
nx serve demo-app

# Development server
nx serve demo-app
# or
nx run demo-app:serve:development

# Production build
nx build demo-app --configuration=production

# Development build
nx build demo-app --configuration=development

# Run tests
nx test demo-app

# Run tests with coverage
nx test demo-app --coverage

# Run linting
nx lint demo-app

• ButtonComponent - Multi-variant buttons with icon support
• MenuListComponent - Dropdown menus with nested options

• InputComponent - Text input with validation
• CheckboxComponent - Checkbox with indeterminate state
• RadioButtonComponent - Radio button groups
• DatePickerComponent - Date selection with calendar
• SelectBoxComponent - Single and multi-select dropdowns
• AutocompleteComponent - Auto-completing input field

• PageComponent - Standard page layout with breadcrumbs
• CardComponent - Content container with shadow
• BreadcrumbComponent - Navigation breadcrumbs

• AumTemplate (@aum/templates/aum-template) - Toolbar-first layout with collapsible overlay sidenav
• AumTemplate2 (@aum/templates/aum-template-2) - Sidebar-first layout with persistent sidebar on desktop/tablet and responsive mobile drawer
• AumTemplate3 (@aum/templates/aum-template-3) - Hybrid layout combining a persistent global toolbar (Template 1) with a collapsible persistent sidebar (Template 2). Sidebar collapses to icon-only on desktop and opens as an overlay on mobile. Best when you need both a persistent header and always-visible navigation.
• Template switching - Apps can allow users to switch between templates at runtime via the preferences menu. Enable with toolbarMenus.preferences.items.template.show: true in app-config.json

• AumGridComponent (<aum-grid>) - Enterprise data grid wrapping AG Grid Community. Supports client-side and infinite-scroll modes, toolbar with search/CSV export/column toggle, filter panel, row & bulk actions, pagination, tree data, and persistent column state via stateKey. See docs/GRID.md for the full reference.

• ConfirmationDialogComponent - Yes/No confirmation dialogs
• GenericDialogComponent - Customizable modal dialogs
• SnackbarService - Toast notifications
• DrawerComponent - Side panel for additional content
• SpinnerComponent - Loading indicators (page and element modes)

• LanguageTranslationService - Multi-language support with English, Japanese, and Hindi
• ErrorHandlerService - Global error handling with structured logging
• AuthService - Authentication and route protection
• AppConfigService - Centralized application configuration (nav items, toolbar menus, branding, user preference defaults)
• ViewportService - Reactive signal-based viewport detection (mobile | tablet | desktop)

import { ButtonComponent } from '@aum/ui/buttons';
import { CardComponent } from '@aum/ui/layout';

@Component({
  selector: 'app-example',
  standalone: true,
  imports: [ButtonComponent, CardComponent],
  template: `
    <aum-card>
      <div card-body>
        <h2>Welcome to AUM UI</h2>
        <aum-button type="filled" value="Get Started" (buttonClick)="handleClick()"> </aum-button>
      </div>
    </aum-card>
  `,
})
export class ExampleComponent {
  handleClick() {
    console.log('Button clicked!');
  }
}

npx nx g @angular/material:theme-color --project=aum-core

Default Theme Colors:

• Primary: #6E57E0 (Purple)
• Secondary: #ffffff (White)
• Error: #DF0101 (Red)

Theme Builder: Material Theme Builder

.my-component {
  color: var(--mat-sys-on-surface);
  background-color: var(--mat-sys-surface);
  border: 1px solid var(--mat-sys-outline-variant);
}

aum-core/
├── apps/demo-app/              # Main demo application (lightweight)
├── libs/
│   ├── aum-core/               # Core AUM framework libraries (prefix: aum)
│   │   ├── ui/                 # Reusable UI components
│   │   ├── common/             # Shared assets (SVGs, i18n) and common components (login, page-not-found)
│   │   ├── theme/              # Styles, themes, and fonts
│   │   ├── utils/              # Services, interfaces, models
│   │   └── templates/          # Template components
│   └── modules/demo/           # Demo modules (prefix: demo)
│       ├── dashboard/          # Dashboard feature module
│       └── playground/         # Component playground & demos
└── docs/                       # Documentation files

AUM Core includes comprehensive internationalization support with multiple languages.

• English (en) - Default language
• 日本語 (ja) - Japanese
• हिन्दी (hi) - Hindi

AUM uses a namespaced two-file approach to keep library translations separate from app translations with zero collision risk:

// app.config.ts — wire up the multi-loader from @aum/utils/services
import { MultiTranslateHttpLoader } from '@aum/utils/services';

export function HttpLoaderFactory(http: HttpClient) {
  return new MultiTranslateHttpLoader(http, [
    { prefix: './assets/i18n/aum.', suffix: '.json' }, // core: AUM.* keys
    { prefix: './assets/i18n/', suffix: '.json' },      // app: flat keys
  ]);
}

// Core component keys use AUM.* namespace
<button [tooltip]="'AUM.MENU' | translate"></button>

// App-level keys use flat keys
<h1>{{ 'WELCOME_MESSAGE' | translate }}</h1>

import { LanguageTranslationService } from '@aum/utils/services';

export class MyComponent {
  private languageService = inject(LanguageTranslationService);

  switchLanguage(lang: 'en' | 'ja' | 'hi') {
    this.languageService.setLanguage(lang);
  }
}

Core library (libs/aum-core/common/src/assets/i18n/):

• aum.en.json — English core keys (under AUM namespace)
• aum.ja.json — Japanese core keys
• aum.hi.json — Hindi core keys

App-level (apps/{app}/src/assets/i18n/):

• en.json — App-specific English keys
• ja.json — App-specific Japanese keys
• hi.json — App-specific Hindi keys

• Angular 21 - Modern framework with standalone components
• NX 22 - Monorepo tooling and build system
• Material Design 3 - Consistent theming system
• TypeScript 5.8 - Type safety and modern JavaScript features
• RxJS 7.8 - Reactive programming
• Jest 29 - Testing framework
• ngx-translate - Internationalization library

• NX Angular Monorepo Tutorial
• Angular Documentation
• Angular Material Components
• Material Design System

• Material Theme Builder
• Google Fonts & Icons
• Material Design Guidelines

1. Read the Best Practices Guide
2. Understand the Architecture
3. Follow the development workflow
4. Test your changes in both light and dark modes
5. Submit a pull request with clear description

MIT License - see LICENSE file for details.

Quick Start: npm install && nx serve demo-app

For detailed information, see our documentation above.