# Angular Demo for @Crystal-Code-Labs/ccl-ui-components

This is an Angular v20+ workspace demonstrating the @Crystal-Code-Labs/ccl-ui-components library with standalone components, routing, and theming capabilities.

## 🚀 Getting Started

### Prerequisites
- Node.js v18+
- npm v9+

### Installation
```bash
cd examples/angular-demo
npm install
```

### Development Server
```bash
npm start
```
Navigate to `http://localhost:4200/` to view the demo.

### Build
```bash
npm run build
```
The build artifacts will be stored in the `dist/` directory.

## 📁 Project Structure

```
src/
├── app/
│   ├── badge-demo/          # Badge component demo
│   ├── button-demo/         # Button component demo
│   ├── components/          # Legacy placeholder components
│   ├── datatable-demo/      # DataTable component demo
│   ├── datefield-demo/      # DateField component demo
│   ├── formfield-demo/      # FormField wrapper demo
│   ├── input-demo/          # Input component demo
│   ├── loading-demo/        # Loading component demo
│   ├── modal-demo/          # Modal component demo
│   ├── pagination-demo/     # Pagination component demo
│   ├── searchbar-demo/      # SearchBar component demo
│   ├── select-demo/         # Select component demo
│   ├── textarea-demo/       # Textarea component demo
│   ├── toast-demo/          # Toast component demo
│   ├── app.component.ts     # Main app component with sidebar navigation
│   ├── app.routes.ts        # Route configuration
│   └── theme.service.ts     # Theme switching service
├── assets/
│   └── ccl/                 # Theme CSS files
│       ├── brandA.css       # Brand A theme
│       ├── consumer.css     # Consumer theme
│       ├── naked.css        # Naked theme (default)
│       ├── style.css        # Base styles
│       └── tokens.css       # Design tokens
├── main.ts                  # Application bootstrap
├── index.html              # Main HTML file
└── styles.css              # Global styles
```

## 🧩 Features

### **Standalone Components**
- All components are standalone (no NgModules required)
- Modern Angular v20+ architecture
- Tree-shakable component imports

### **Routing**
- Angular Router with standalone components
- Navigation between different component demos
- Active route highlighting

### **Component Demos**
- **Badge** (`/badge`) - Badge component variations
- **Button** (`/button`) - Button component variations
- **DataTable** (`/datatable`) - Data table with sorting and pagination
- **DateField** (`/datefield`) - Date input components
- **Form Field** (`/formfield`) - Form field wrappers
- **Input** (`/input`) - Text input components
- **Loading** (`/loading`) - Loading indicators
- **Modal** (`/modal`) - Modal component examples
- **Pagination** (`/pagination`) - Pagination patterns
- **SearchBar** (`/searchbar`) - Search functionality
- **Select** (`/select`) - Dropdown select components
- **Textarea** (`/textarea`) - Multi-line text input
- **Toast** (`/toast`) - Toast notifications

### **Theming System**
- **Naked Theme** - Clean, minimal design (default)
- **Brand A Theme** - Corporate branding theme
- **Consumer Theme** - Consumer-focused design
- Dynamic theme switching via `ThemeService`
- CSS custom properties and design tokens
- Runtime theme loading and application

### **Responsive Design**
- Mobile-first approach
- Responsive sidebar navigation
- Grid-based layout system

## 🎯 Usage

### **Navigation**
The app includes a sidebar navigation with links to all component demos:
- Fixed sidebar with component categories
- Click on any navigation link to view the corresponding component demo
- Active route is highlighted in the navigation
- Responsive design collapses to horizontal navigation on mobile
- Clean, organized layout with component grouping

### **Component Integration**
To integrate @Crystal-Code-Labs/ccl-ui-components:

1. **Install the package**:
   ```bash
   npm install @Crystal-Code-Labs/ccl-ui-components
   ```

2. **Import components**:
   ```typescript
   import { ButtonComponent, ModalComponent } from '@Crystal-Code-Labs/ccl-ui-components';
   ```

3. **Use in templates**:
   ```html
   <ccl-button variant="primary" (clicked)="onClick()">
     Click Me
   </ccl-button>
   ```

### **Theme Switching**
The demo includes a `ThemeService` for dynamic theme switching:

```typescript
import { ThemeService } from './theme.service';

// Switch to different themes
this.themeService.setTheme('naked');    // Default clean theme
this.themeService.setTheme('brandA');   // Corporate theme
this.themeService.setTheme('consumer'); // Consumer theme
```

The service automatically:
- Loads theme CSS files from `/assets/ccl/`
- Applies design tokens and custom properties
- Handles runtime theme switching without page reload

## 🔧 Development

### **Adding New Component Demos**
1. Create a new component demo folder in `src/app/[component-name]-demo/`
2. Add the route to `src/app/app.routes.ts`
3. Add navigation link to `src/app/app.component.ts`
4. Import the component from `@Crystal-Code-Labs/ccl-ui-components`

### **Styling**
- Global styles in `src/styles.css`
- Component-specific styles in component files
- CSS Grid and Flexbox for layout

### **Build Configuration**
- Production build with optimization
- Development build with source maps
- Asset copying and processing

## 📱 Browser Support

- Chrome (latest)
- Firefox (latest)
- Safari (latest)
- Edge (latest)

## 🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

## 📄 License

This project is part of the @Crystal-Code-Labs/ccl-ui-components library.

---

**Need help?** Check out the [Component Documentation](../../docs/) or [open an issue](https://github.com/your-org/ccl-ui-components/issues).