📘 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:

{
  "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 |