npm package: @ruc-lib/breadcrumbs
Description: This library provides a flexible and customizable Breadcrumbs component for your Angular applications. Users can integrate the Breadcrumb component using Angular services or selectors with ease. Below are the features, usage instructions, and integration 
Latest version: 4.0.0

# ruclib-breadcrumbs

This library provides a flexible and customizable Breadcrumbs component for your Angular applications. Users can integrate the Breadcrumb component using Angular services or selectors with ease. Below are the features, usage instructions, and integration details

## Installation Guide

To use the Breadcrumb component, you can install the entire RUC library or just this specific component.

### Install the Entire Library
```bash
npm install @uxpractice/ruc-lib
```

### Install Individual Component

If you only need the Breadcrumbs component:

**For Angular 15:**
```bash
npm install @ruc-lib/breadcrumbs@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
```

**For Angular 16:**
```bash
npm install @ruc-lib/breadcrumbs@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
```

**For Angular 17:**
```bash
npm install @ruc-lib/breadcrumbs@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
```

**For Angular 18:**
```bash
npm install @ruc-lib/breadcrumbs@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
```

**For Angular 19:**
```bash
npm install @ruc-lib/breadcrumbs@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
```

**For Angular 20:**
```bash
npm install @ruc-lib/breadcrumbs@4.0.0
```

> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.

### 📦 Version Compatibility

| Angular Version | Compatible Version | Installation Command                                                                   |
|-----------------|--------------------|----------------------------------------------------------------------------------------|
| 15.x.x          | 3.2.0              | `npm install @ruc-lib/breadcrumbs@^3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0` |
| 16.x.x          | 3.2.0              | `npm install @ruc-lib/breadcrumbs@^3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0` |
| 17.x.x          | 4.0.0              | `npm install @ruc-lib/breadcrumbs@^4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0` |
| 18.x.x          | 4.0.0              | `npm install @ruc-lib/breadcrumbs@^4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0` |
| 19.x.x          | 4.0.0              | `npm install @ruc-lib/breadcrumbs@^4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0` |
| 20.x.x          | 4.0.0              | `npm install @ruc-lib/breadcrumbs@^4.0.0`                                                |



## Usage

### 1. Import the Component
In your Angular component file (e.g., `app.component.ts`), import the `RuclibBreadcrumbsComponent`:

```typescript
import { Component } from '@angular/core';

// For Complete Library
import { RuclibBreadcrumbsComponent } from '@uxpractice/ruc-lib/breadcrumbs';

// For Individual Package
import { RuclibBreadcrumbsComponent } from '@ruc-lib/breadcrumbs';

@Component({
  selector: 'app-root',
  imports: [RuclibBreadcrumbsComponent],
  templateUrl: './app.component.html',
})
export class AppComponent {
  // Component code here
}
```

### 2. Use the Component
In your component's template, use the `<uxp-ruclib-breadcrumbs>` selector and pass the configuration object to the `rucInputData` input.

```html
<uxp-ruclib-breadcrumbs (rucEvent)="passEvent($event)" [customTheme]="customTheme" [rucInputData]="inputObjectDataBreadcrumbs"></uxp-ruclib-breadcrumbs>
```

## API Reference

### Component Inputs

| Input          | Type               | Description                                  |
|----------------|--------------------|----------------------------------------------|
| `rucInputData` | `BreadcrumbsConfig` | The main configuration object for the component. |
| `customTheme`  | `string`           | An optional CSS class for custom theming.    |

### `BreadcrumbsConfig`
This is the main configuration object for the Breadcrumb Component.

| Property                    | Type                                             | Description                                                                                             |
|-----------------------------|--------------------------------------------------|---------------------------------------------------------------------------------------------------------|
| `breadcrumbs`                | `Breadcrumb[]`                               |  List of breadcrumbs to display                                      |

### `Breadcrumb`
This object defines the configuration for each breadcrumb within the breadcrumb component.

| Property  | Type                               | Description                                                              |
|-----------|------------------------------------|--------------------------------------------------------------------------|
| `label`   | `string`                           | The label for the breadcrumb to be displayed        |
| `url`   | `string`                           | URL to redirect on click of breadcrumb |
| `icon`   | `number`                           | Icon to be displayed along with the breadcrumb.                                               |
| `id`    | `string`               | Unique identifier |
| `tooltip` | `string`  | Tooltip for additional info              |
| `fontSize` | `string`  | Custom font size for the label             |
| `disabled` | `string`  | Disable clicking              |
| `visible` | `string`  | Control visibility             |

## Example Configuration

Here's an example of how to configure the Breadcrumb in your component's TypeScript file.

```typescript
import { Component } from '@angular/core';

// For Complete Library
import { BreadcrumbsConfig } from '@uxpractice/ruc-lib/breadcrumbs';

// For Individual Package
import { BreadcrumbsConfig } from '@ruc-lib/breadcrumbs';


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})

export class AppComponent {
  breadcrumbConfig: BreadcrumbsConfig = {
    breadcrumbs: [
  { label: 'Home', url: '/', icon: 'home', id: 'home', tooltip: 'Go to Home', visible: true },
  { label: 'Products', url: '/', icon: 'category', id: 'products', tooltip: 'View Products', fontSize: '14px', visible: true },
  { label: 'Electronics', url: '/', icon: 'devices', id: 'electronics', tooltip: 'Electronics Category', fontSize: '14px', visible: true },
  { label: 'Mobiles', url: '/', icon: 'smartphone', id: 'mobiles', tooltip: 'View Mobiles', visible: true },
  { label: 'Samsung Galaxy', url: '/', icon: 'phone_android', id: 'samsung', tooltip: 'Samsung Galaxy Phones', visible: true }
],
  separator: '/'
  };
}
```

> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**

When implementing **custom themes**, such as:

```scss
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
}

// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
  @include mat.typography-level($theme-custom-typography-name, body-1);
}
```

# Contribution
Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

# Acknowledgements
Thank you for choosing the Breadcrumbs Component Library. If you have any feedback or suggestions, please let us know!