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

# ruclib-tab

This library provides a flexible and customizable tab component for your Angular applications. Users can integrate the tab component using Angular services or selectors with ease. Below are the features, usage instructions, and integration details:

# Installation Guide

Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements.

### Install the Entire Library
```bash
npm install @uxpractice/ruc-lib
```

### Install Individual Component

If you only need the Tab component:

**For Angular 15:**
```bash
npm install @ruc-lib/tab@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
```

**For Angular 16:**
```bash
npm install @ruc-lib/tab@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
```

**For Angular 17:**
```bash
npm install @ruc-lib/tab@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
```

**For Angular 18:**
```bash
npm install @ruc-lib/tab@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
```

**For Angular 19:**
```bash
npm install @ruc-lib/tab@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
```

**For Angular 20:**
```bash
npm install @ruc-lib/tab@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
 
Please ensure you install the correct version of `@ruc-lib/tab` based on your Angular version.
 
| Angular Version    | Compatible `@ruc-lib/tab` Version     |
|--------------------|---------------------------------------|
| 15.x.x             | `npm install @ruc-lib/tab@^3.2.0`     |
| 16.x.x             | `npm install @ruc-lib/tab@^3.2.0`     |
| 17.x.x             | `npm install @ruc-lib/tab@^4.0.0`     |
| 18.x.x             | `npm install @ruc-lib/tab@^4.0.0`     |
| 19.x.x             | `npm install @ruc-lib/tab@^4.0.0`     |
| 20.x.x             | `npm install @ruc-lib/tab@^4.0.0`     |


## Usage

### 1. Import the Component
In your Angular component file (e.g., `app.component.ts`), import the `RuclibTabComponent`:

```typescript
import { Component } from '@angular/core';

// For Complete Library
import { RuclibTabComponent } from '@uxpractice/ruc-lib/tab';

// For Individual Package
import { RuclibTabComponent } from '@ruc-lib/tab';

@Component({
  selector: 'app-root',
  imports: [RuclibTabComponent],
  templateUrl: './app.component.html',
})
export class AppComponent {
  // Component code here
}
```

### 2. Use the Component

In your component's template, use the `<uxp-ruclib-tab>` selector and pass the configuration object to the `rucInputData` input.

```html
<uxp-ruclib-tab [rucInputData]="rucinputObjectDataTab" [dataSource]="dataSourceTab" [customTheme]="customTheme" (rucEvent)="passEvent($event)"></uxp-ruclib-tab>
```

## API Reference

### Component Inputs

| Input          | Type               | Description                                  |
|----------------|--------------------|----------------------------------------------|
| `rucInputData` | `tabDefaultConfig` | The main configuration object for the component. |
| `customTheme`  | `string`           | An optional CSS class for custom theming.    |

### `tabDefaultConfig`

This is the main configuration object for the tab.

| Property                    | Type                                             | Description                                                                                             |
|-----------------------------|--------------------------------------------------|---------------------------------------------------------------------------------------------------------|
| `tabId`                       | `number`                                         | An optional unique identifier for the tab                                                        |
| `tabName`                       | `string`                                         | The mandatory text label that appears on the tab                                                     |
| `tabContent`               | `string`                     | The mandatory content to be displayed when this tab is active.
This can be plain text or HTML.          |
| `isDisabled`                 | `boolean`                                        |  Determines if the tab is disabled.
When true, the tab cannot be selected and appears visually disabled.                                                       |
| `isActive`                  | `boolean` | Indicates whether the tab is currently active.
Only one tab should be active at a time.                                     |
| `iconName` | `string`         |The name of the icon to display in the tab header.
Should be a valid icon name from the icon library being used (e.g., Material Icons).                                                 |
| `closeIcon`        | `boolean`                            | The name of the close icon to display in the tab header.This is typically shown for closable tabs. If not provided, a default close icon will be used. labels.                                                                  |

### tabDefaultDataSource

This object defines the configuration for dataSource for tab.

| Property  | Type                               | Description                                                              |
|-----------|------------------------------------|--------------------------------------------------------------------------|
| `animationDuration`   | `number`                           | The duration of the animation when switching between tabs, in milliseconds.This controls the speed of the tab transition effect.        |
| `alignTabs`   | `string`                           |Specifies the alignment of the tab headers within the tab container.Common values include 'start', 'center', 'end', or 'stretch'. |
| `headerPosition`   | `string`                           | Determines the position of the tab headers relative to the tab content.Possible values: 'above', 'below', 'left', 'right'.                                               |
| `backgroundColor`    | `string`                | The background color of the tab component. Can be any valid CSS color value (hex, rgb, rgba, named colors, etc.). |
| `color` | `string` | The text color of the tab headers. Can be any valid CSS color value.              |
| `isActivetabIndex` | `number` |  The index of the tab that should be active by default (zero-based).If not specified, the first tab (index 0) will be active by default.              |

# Input and Output

# Inputs:

    • dataSource -> Data to be passed to the tab.
    [i.e- tabId, tabName, tabContent, isDisabled, isActive, iconName, closeIcon].

    • rucInputData -> Input Data to be passed to the tab.
    [i.e- animationDuration, alignTabs, headerPosition, isActivetabIndex].

    • customTheme: Custom styling/theme for the tab.

# Outputs:

• rucEvent -> Event emitted from the tab.

## Example Configuration

```
export const mockDataForDataSourceTab = [
{ tabId: 1,
tabName: 'tabName1',
tabContent: 'tabContent1',
isDisabled: false,
isActive: true,
iconName: 'book',
closeIcon: false,
},
{
tabId: 2,
tabName: 'tabName2',
tabContent: 'tabContent2',
isDisabled: false,
isActive: false,
iconName: 'cloud',
closeIcon: false,
},
];
```

```
export const mockDataForRucinputObjectDataTab = {
animationDuration: 2000,
alignTabs: 'start',
headerPosition: 'top',
isActivetabIndex: 2,
};
```

> ⚠️ **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 Tab Component Library. If you have any feedback or suggestions, please let us know!