npm package: @naniteninja/guarantee-ionic
Description: A reusable Angular component library for building guided tutorials, walkthroughs, and UI overlays with interactive button groups and contextual instructions.
Latest version: 0.0.1

# 📘 Guarantee Tutorial Library

A reusable Angular component library for building guided tutorials, walkthroughs, and UI overlays with interactive button groups and contextual instructions.

---

## 🚀 Installation

Make sure you have Angular 17+ in your project. Then install the library and required dependencies:

    npm install guarantee-tutorial

You will also need to install the following peer dependencies if not already present:

    npm install @angular/material-moment-adapter moment ngx-bootstrap @ngx-translate/core @ngx-translate/http-loader leader-line angular-walkthrough


## 📦 Required Imports & Configuration
Add required scripts in angular.json. In your app’s angular.json, ensure you include the leader-line script:

    "scripts": ["node_modules/leader-line/leader-line.min.js"]

Add translation support

    import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
    import { TranslateHttpLoader } from '@ngx-translate/http-loader';
    import { HttpClient } from '@angular/common/http';

    export function HttpLoaderFactory(http: HttpClient) {
    return new TranslateHttpLoader(http, './assets/i18n/', '.json');
    }

    export const appConfig: ApplicationConfig = {
    providers: [
        importProvidersFrom(
        HttpClientModule,
        TranslateModule.forRoot({
            loader: {
            provide: TranslateLoader,
            useFactory: HttpLoaderFactory,
            deps: [HttpClient]
            }
        })
        ),
        provideRouter(routes),
        provideHttpClient()
    ]
    };


## 🧩 Guarantee Tutorial Properties
import component to standalone component

```
// app.component.ts
import { GuaranteeTutorialComponent } from 'guarantee-tutorial';

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [
    RouterOutlet,
    GuaranteeTutorialComponent,
    HttpClientModule
  ],
  templateUrl: './app.component.html',
  styleUrl: './app.component.scss'
})
```
in html template include the component
```
// app.component.html
<lib-guarantee-tutorial 
    [buttonGroup]="[]"
    [tutorialWalkthrough]="{}">
</lib-guarantee-tutorial>
```

## 🔘 Button Group Configuration


#### Properties of Button Group:

| Name      | Type        | Description                  |
|-----------|-------------|------------------------------|
| `id`      | `string`    | Unique ID for button group   |
| `layout`  | `string`    | 'vert' or 'arc' layout       |
| `buttons` | `buttons[]` | List of button objects       |


#### Properties of a Button:

| Name                 | Type      | Description                                                                |
|----------------------|-----------|----------------------------------------------------------------------------|
| `id`                 | `string`  | Unique button ID                                                           |
| `icon`               | `string`  | (Optional) Icon image path                                                 |
| `maticon`            | `string`  | (Optional) Material icon name                                              |
| `label`              | `string`  | Label text or i18n key `app.button.label`                                  |
| `hideTitle`          | `boolean` | Hide label (default: false)                                                |
| `size`               | `string`  | Size options: 'xs', 'sm', 'md', 'lg', 'xl', 'xxl'                          |
| `action`             | `string`  | Button click function name                                                 |
| `visible`            | `boolean` | Show/hide button                                                           |
| `main`               | `boolean` | Set as main button in 'arc' layout                                         |
| `progress`           | `boolean` | Show progress bar                                                          |
| `progressPercentage` | `number`  | Required when progress is enabled                                          |
| `offset.x`           | `number`  | Horizontal offset                                                          |
| `offset.y`           | `number`  | Vertical offset                                                            |

⚠️ App restart required if new icons/images are added.

---

### 🌐 i18n Button Labeling

1. Files located at:

```
src/assets/i18n
```

2. Add labels under `app.button` key:

```json
{
  "app": {
    "button": {
      "next": "Next",
      "back": "Back"
    }
  }
}
```

3. Falls back to default label if i18n not found.

---

### 🧭 Walkthrough Configuration
 The walkthrough configuration are structured as following:

    [Screen Name] : steps[]

#### Step Object:

| Name               | Type      | Description                              |
|--------------------|-----------|------------------------------------------|
| `id`               | `string`  | Step ID                                  |
| `prevStepId`       | `string`  | Previous step ID                         |
| `nextStepId`       | `string`  | Next step ID                             |
| `focusElementId`   | `string`  | HTML target selector                     |
| `focusBackdrop`    | `boolean` | Enable dark focus overlay                |
| `contentAlign`     | `string`  | 'left', 'right', 'center'                |
| `contentVertAlign` | `string`  | 'top', 'bottom', 'center'                |
| `showArrow`        | `boolean` | Show arrow indicator                     |
| `descr`            | `descr[]` | Description objects                      |

#### Description Object:

| Name    | Type     | Description                  |
|---------|----------|------------------------------|
| `text`  | `string` | Walkthrough description text |
| `style` | `Object` | Inline CSS using ngStyle     |

---