npm package: @ruc-lib/skeleton
Description: A customizable Angular Skeleton is a placeholder to display instead of the actual content.
Latest version: 4.0.0

# UXP Skeleton

A customizable Angular Skeleton is a placeholder to display instead of the actual content.

## Installation Guide

To use the UXP ruc-lib Skeleton Library, 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 Skeleton component:

**For Angular 15:**
```bash
npm install @ruc-lib/skeleton@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
```

**For Angular 16:**
```bash
npm install @ruc-lib/skeleton@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
```

**For Angular 17:**
```bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
```

**For Angular 18:**
```bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
```

**For Angular 19:**
```bash
npm install @ruc-lib/skeleton@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
```

**For Angular 20:**
```bash
npm install @ruc-lib/skeleton@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/skeleton` based on your Angular version.
 
| Angular Version    | Compatible `@ruc-lib/skeleton` Version     |
|--------------------|--------------------------------------------|
| 15.x.x             | `npm install @ruc-lib/skeleton@^3.2.0`     |
| 16.x.x             | `npm install @ruc-lib/skeleton@^3.2.0`     |
| 17.x.x             | `npm install @ruc-lib/skeleton@^4.0.0`     |
| 18.x.x             | `npm install @ruc-lib/skeleton@^4.0.0`     |
| 19.x.x             | `npm install @ruc-lib/skeleton@^4.0.0`     |
| 20.x.x             | `npm install @ruc-lib/skeleton@^4.0.0`     |


## Usage

### 1. Import the Component
In your Angular component file (e.g., `app.component.ts`), import the `RuclibSkeletonComponent`:

```typescript
import { Component } from '@angular/core';

// For Complete Library
import { RuclibSkeletonComponent } from '@uxpractice/ruc-lib/skeleton';

// For Individual Package
import { RuclibSkeletonComponent } from '@ruc-lib/skeleton';

@Component({
  selector: 'app-root',
  imports: [RuclibSkeletonComponent],
  templateUrl: './app.component.html',
})
export class AppComponent {
  // Component code here
}
```

### 2. Use the Component
In your component's template, use the `<uxp-ruclib-skeleton` selector and pass the configuration object to the `rucInputData` input.

```html
<uxp-ruclib-skeleton [rucInputData]="skeletonData"></uxp-ruclib-skeleton>
```

## API Reference

### Component Inputs

| Input          | Type               | Description                                  |
|----------------|--------------------|----------------------------------------------|
| `rucInputData` | `skeletonData`     | The main configuration object for the component. |
| `customTheme`  | `string`           | An optional CSS class for custom theming.    |


### `skeletonData`
This is the main configuration object for the progress bar.

| Property                | Type                                                                                                                                                     | Description                                                       |
|-------------------------|----------------------------------------------------------------------------------------------------------------------------------------------------------|-------------------------------------------------------------------|
| `shape`                 | `'rectangle' \| 'rounded-rectangle' \| 'square' \| 'circle' \| 'triangle' \| 'arrow-left' \| 'arrow-right' \| 'arrow-up' \| 'arrow-down' \| 'loader'`    | The Shape of the Skeleton .                                       |
| `width`                 | `string`                                                                                                                                                 | To set the width of skeleton not applicable to loader.            |
| `height`                | `string`                                                                                                                                                 | To set the height of skeleton not applicable to loader.           |
| `borderRadius`          | `string`                                                                                                                                                 | To set the borderRadius of skeleton not applicable to loader bar. |
| `class`                 | `string`                                                                                                                                                 | To set a custom class of skeleton not applicable to loader .      |
| `tooltip`               | `boolean`                                                                                                                                                | If `true`, displays the tooltip labels.                           |
| `tooltipText`           | `string`                                                                                                                                                 | To set a tooltip text of skeleton not applicable to loader.       |
| `tooltipPosition`       | `'above' \| 'below' \| 'left' \| 'right'`                                                                                                                | To set a tooltip position of skeleton not applicable to loader.   |
| `isLoader`              | `boolean`                                                                                                                                                | true , fasle when loader shape is selected labels.                |
| `loaderPosition`        | `'page' \| 'section' \| 'inline' \| 'newline'`                                                                                                           | Loader Position labels.                                           |
| `loaderCustomText`      | `string`                                                                                                                                                 | loader custom text.                                               |
| `loaderSpinnerLogoUrl`  | `string`                                                                                                                                                 | loader image if user want.                                        |


## Example Configuration

Here's an example of how to configure the Skeleton in your component's TypeScript file.

```typescript
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  skeletonData = {
    shape: 'circle',
        width: "50px",
        height: "50px",
        borderRadius: '',
        class: '', 
        tooltip: false,
        tooltipText : '',
        tooltipPosition: '',
        isLoader: false
  };
}
```

## Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

## Acknowledgements

Thank you for choosing the Skeleton library. If you have any feedback or suggestions, please let us know!