@ruc-lib/tour-guide 2.0.0

package/README.md

@@ -0,0 +1,192 @@
+# ruclib-tour-guide
+
+A component for creating a tour guide that provides information and guidance about a specific feature or functionality to the user.
+
+# Installation guide
+
+To use the Tour Guide 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 Tour Guide component
+```bash
+npm install @uxpractice/tour-guide
+```
+
+## Usage
+### 1. Import the Module
+In your Angular module file (e.g., `app.module.ts`), import the `RuclibTourGuideModule`:
+
+```typescript
+import { RuclibTourGuideModule } from '@uxpractice/tour-guide';
+import { AppComponent } from './app.component';
+import { NgModule } from '@angular/core';
+import { BrowserModule } from '@angular/platform-browser';
+
+@NgModule({
+  declarations: [AppComponent],
+  imports: [
+    BrowserModule,
+    RuclibTourGuideModule
+  ],
+  providers: [],
+  bootstrap: [AppComponent]
+})
+export class AppModule {}
+```
+
+### 2. Use the Component
+In your component's template, use the `<uxp-ruc-tour-guide>` selector and pass the configuration object to the `rucInputData` input.
+
+```html
+<uxp-ruc-tour-guide 
+    [rucInputData]="tourGuideConfig"
+    [customTheme]="customTheme" 
+    (rucEvent)="passEvent($event)" 
+    [dataSource]="tourGuideData">
+</uxp-ruc-tour-guide>
+```
+
+## API Reference
+
+### Component Inputs
+
+| Input          | Type               | Description                                       |
+|----------------|--------------------|---------------------------------------------------|
+| `rucInputData` | `tourGuideConfig`  | The main configuration object for the tour guide. |
+| `customTheme`  | `string`           | An optional CSS class for custom theming.         |
+| `dataSource`   | `tourGuideData`    | An optional CSS class for custom theming.         |
+
+### Component Outputs
+
+| Output    | Type      | Description                                       |
+|-----------|-----------|---------------------------------------------------|
+| `rucEvent`| `any`     | Emits events related to tour guide actions (e.g., 'skip', 'next', 'finish'). |
+
+### `tourGuideConfig`
+This is the main configuration object for the Tour Guide component.
+
+| Property                 | Type                                                                | Description                                                           |
+|--------------------------|---------------------------------------------------------------------|-----------------------------------------------------------------------|
+| `type`                   | `'simple' \| 'advance'`                                             | Type of tour guide (e.g., 'simple', 'advance').                       |
+| `showSkipButton`         | `boolean`                                                           | To toggle the visibility of the skip button.                          |
+| `buttonsFontSize`        | `string`                                                            | Configure the font size of buttons.                                   |
+| `titleFontSize`          | `string`                                                            | Configure the font size of the title.                                 |
+| `contentFontSize`        | `string`                                                            | Configure the font size of the main content.                          |
+| `buttonsAlignment`       | `'start' \| 'center' \| 'end' \| 'space-between' \| 'space-around'` | Change the alignment of buttons.                                      |
+| `stepCountAlignment`     | `'start' | 'center' | 'end'`                                        | Change the alignment of step count.                                   |
+| `stepCountStartText`     | `string`                                                            | Text to display at the start of the step count (e.g., 'Step').        |
+| `stepCountMiddleText`    | `string`                                                            | Text to display in the middle of the step count (e.g., 'of').         |
+| `skipButtonText`         | `string`                                                            | Text for the skip button.                                             |
+| `prevButtonText`         | `string`                                                            | Text for the previous button.                                         |
+| `nextButtonText`         | `string`                                                            | Text for the next button.                                             |
+| `finishButtonText`       | `string`                                                            | Text for the finish button.                                           |
+| `highlightBorderColor`   | `string`                                                            | Color of the highlight border around the guided element.              |
+| `highlightBorderWidth`   | `string`                                                            | Width of the highlight border around the guided element.              |
+| `defaultPopupWidth`      | `string`                                                            | Default width of the tour guide popup.                                |
+
+### `tourGuideData`
+This array of objects defines the content for each step of the tour guide.
+
+| Property   | Type                                                        | Description                                                           |
+|------------|-------------------------------------------------------------|-----------------------------------------------------------------------|
+| `title`    | `string`                                                    | Title of the tour guide step.                                         |
+| `content`  | `string`                                                    | Main content/description for the tour guide step.                     |
+| `selector` | `string` (Only for `'advance'` type)                        | CSS selector for the element to highlight in 'advance' mode.          |
+| `position` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'auto'`          | Position of the popup relative to the highlighted element.            |
+| `shape`    | `'' \| 'rounded' \| 'rectangle' \| 'circle'`                | Shape of the description popup.                                       |
+| `width`    | `string`                                                    | Custom width for the popup of the current step.                       |
+
+## Example Configuration
+
+Here's an example of how to configure the Tour Guide component in your component's TypeScript file.
+
+```typescript
+import { Component } from '@angular/core';
+import { TourGuideConfig, TourGuideData } from '@uxpractice/tour-guide';
+
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+})
+export class AppComponent {
+    tourGuideConfig: TourGuideConfig = {
+    type: 'advance',
+    showSkipButton: true,
+    buttonsFontSize: '14px',
+    titleFontSize: '18px',
+    contentFontSize: '14px',
+    buttonsAlignment: 'end',
+    stepCountAlignment: 'center',
+    stepCountStartText: 'Step',
+    stepCountMiddleText: 'of',
+    skipButtonText: 'Skip Tour',
+    prevButtonText: 'Previous',
+    nextButtonText: 'Next',
+    finishButtonText: 'Finish',
+    highlightBorderColor: '#007bff',
+    highlightBorderWidth: '3px',
+    defaultPopupWidth: '300px'
+  };
+
+  tourGuideData: TourGuideData[] = [
+    {
+      title: 'Welcome to Our App!',
+      content: 'This tour will guide you through the main features.',
+      selector: '', // No specific selector for the first step
+      position: 'auto',
+      shape: 'rounded',
+      width: '350px'
+    },
+    {
+      title: 'Navigation Bar',
+      content: 'This is where you can navigate to different sections of the application.',
+      selector: '#navbar', // Replace with your actual selector
+      position: 'bottom',
+      shape: 'rectangle',
+      width: '300px'
+    },
+    {
+      title: 'User Profile',
+      content: 'Click here to view and manage your profile settings.',
+      selector: '#user-profile-icon', // Replace with your actual selector
+      position: 'left',
+      shape: 'circle',
+      width: '280px'
+    },
+    {
+      title: 'Main Content Area',
+      content: 'All your important data and features are displayed here.',
+      selector: '#main-content', // Replace with your actual selector
+      position: 'top',
+      shape: 'rounded',
+      width: '400px'
+    },
+    {
+      title: 'Notifications',
+      content: 'Stay updated with the latest notifications.',
+      selector: '#notifications-bell', // Replace with your actual selector
+      position: 'right',
+      shape: 'rectangle',
+      width: '250px'
+    }
+  ];
+
+  passEvent(event: any) {
+    console.log('Tour Guide Event:', event);
+  }
+}
+```
+
+## Contribution
+
+Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.
+
+## Acknowledgements
+
+Thank you for choosing the Tour Guide component. If you have any feedback or suggestions, please let us know!

package/esm2020/index.mjs

@@ -0,0 +1,4 @@
+export * from './lib/ruclib-tour-guide.module';
+export * from './lib/ruclib-tour-guide/ruclib-tour-guide.component';
+export * from './lib/model/tour-guide.model';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiaW5kZXguanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi9zcmMvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsY0FBYyxnQ0FBZ0MsQ0FBQztBQUMvQyxjQUFjLHFEQUFxRCxDQUFDO0FBQ3BFLGNBQWMsOEJBQThCLENBQUMiLCJzb3VyY2VzQ29udGVudCI6WyJleHBvcnQgKiBmcm9tICcuL2xpYi9ydWNsaWItdG91ci1ndWlkZS5tb2R1bGUnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9ydWNsaWItdG91ci1ndWlkZS9ydWNsaWItdG91ci1ndWlkZS5jb21wb25lbnQnO1xyXG5leHBvcnQgKiBmcm9tICcuL2xpYi9tb2RlbC90b3VyLWd1aWRlLm1vZGVsJzsiXX0=

package/esm2020/lib/model/default-config.model.mjs

@@ -0,0 +1,26 @@
+export const defaultTourGuideConfig = {
+    type: "advance",
+    showSkipButton: true,
+    buttonsFontSize: "14px",
+    titleFontSize: '16px',
+    contentFontSize: '14px',
+    buttonsAlignment: 'end',
+    stepCountAlignment: 'start',
+    stepCountStartText: 'Step',
+    stepCountMiddleText: 'of',
+    skipButtonText: 'Skip',
+    prevButtonText: 'Back',
+    nextButtonText: 'Next',
+    finishButtonText: 'Finish',
+    highlightBorderColor: '#007bff',
+    highlightBorderWidth: '2px',
+    defaultPopupWidth: '250px',
+};
+export const DEFAULT_VALUES = {
+    arrowRight: 'ArrowRight',
+    arrowLeft: 'ArrowLeft',
+    escape: 'Escape',
+    popup: { width: 300, height: 150, top: 0, left: 0, padding: 10, safeMargin: 64 },
+    startTourButtonLabel: 'Start Tour Guide'
+};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZGVmYXVsdC1jb25maWcubW9kZWwuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9zcmMvbGliL21vZGVsL2RlZmF1bHQtY29uZmlnLm1vZGVsLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUVBLE1BQU0sQ0FBQyxNQUFNLHNCQUFzQixHQUFvQjtJQUNuRCxJQUFJLEVBQUUsU0FBUztJQUNmLGNBQWMsRUFBRSxJQUFJO0lBQ3BCLGVBQWUsRUFBRSxNQUFNO0lBQ3ZCLGFBQWEsRUFBRSxNQUFNO0lBQ3JCLGVBQWUsRUFBRSxNQUFNO0lBQ3ZCLGdCQUFnQixFQUFFLEtBQUs7SUFDdkIsa0JBQWtCLEVBQUUsT0FBTztJQUMzQixrQkFBa0IsRUFBRSxNQUFNO0lBQzFCLG1CQUFtQixFQUFFLElBQUk7SUFDekIsY0FBYyxFQUFFLE1BQU07SUFDdEIsY0FBYyxFQUFFLE1BQU07SUFDdEIsY0FBYyxFQUFFLE1BQU07SUFDdEIsZ0JBQWdCLEVBQUUsUUFBUTtJQUMxQixvQkFBb0IsRUFBRSxTQUFTO0lBQy9CLG9CQUFvQixFQUFFLEtBQUs7SUFDM0IsaUJBQWlCLEVBQUUsT0FBTztDQUM3QixDQUFBO0FBRUQsTUFBTSxDQUFDLE1BQU0sY0FBYyxHQUFHO0lBQzFCLFVBQVUsRUFBRSxZQUFZO0lBQ3hCLFNBQVMsRUFBRSxXQUFXO0lBQ3RCLE1BQU0sRUFBRSxRQUFRO0lBQ2hCLEtBQUssRUFBRSxFQUFDLEtBQUssRUFBRSxHQUFHLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxHQUFHLEVBQUUsQ0FBQyxFQUFFLElBQUksRUFBRSxDQUFDLEVBQUUsT0FBTyxFQUFFLEVBQUUsRUFBRSxVQUFVLEVBQUUsRUFBRSxFQUFDO0lBQzlFLG9CQUFvQixFQUFFLGtCQUFrQjtDQUN6QyxDQUFBIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgVG91ckd1aWRlQ29uZmlnIH0gZnJvbSBcIi4vdG91ci1ndWlkZS5tb2RlbFwiO1xyXG5cclxuZXhwb3J0IGNvbnN0IGRlZmF1bHRUb3VyR3VpZGVDb25maWc6IFRvdXJHdWlkZUNvbmZpZyA9IHtcclxuICAgIHR5cGU6IFwiYWR2YW5jZVwiLFxyXG4gICAgc2hvd1NraXBCdXR0b246IHRydWUsXHJcbiAgICBidXR0b25zRm9udFNpemU6IFwiMTRweFwiLFxyXG4gICAgdGl0bGVGb250U2l6ZTogJzE2cHgnLFxyXG4gICAgY29udGVudEZvbnRTaXplOiAnMTRweCcsXHJcbiAgICBidXR0b25zQWxpZ25tZW50OiAnZW5kJyxcclxuICAgIHN0ZXBDb3VudEFsaWdubWVudDogJ3N0YXJ0JyxcclxuICAgIHN0ZXBDb3VudFN0YXJ0VGV4dDogJ1N0ZXAnLFxyXG4gICAgc3RlcENvdW50TWlkZGxlVGV4dDogJ29mJyxcclxuICAgIHNraXBCdXR0b25UZXh0OiAnU2tpcCcsXHJcbiAgICBwcmV2QnV0dG9uVGV4dDogJ0JhY2snLFxyXG4gICAgbmV4dEJ1dHRvblRleHQ6ICdOZXh0JyxcclxuICAgIGZpbmlzaEJ1dHRvblRleHQ6ICdGaW5pc2gnLFxyXG4gICAgaGlnaGxpZ2h0Qm9yZGVyQ29sb3I6ICcjMDA3YmZmJyxcclxuICAgIGhpZ2hsaWdodEJvcmRlcldpZHRoOiAnMnB4JyxcclxuICAgIGRlZmF1bHRQb3B1cFdpZHRoOiAnMjUwcHgnLFxyXG59XHJcblxyXG5leHBvcnQgY29uc3QgREVGQVVMVF9WQUxVRVMgPSB7XHJcbiAgICBhcnJvd1JpZ2h0OiAnQXJyb3dSaWdodCcsXHJcbiAgICBhcnJvd0xlZnQ6ICdBcnJvd0xlZnQnLFxyXG4gICAgZXNjYXBlOiAnRXNjYXBlJyxcclxuICAgIHBvcHVwOiB7d2lkdGg6IDMwMCwgaGVpZ2h0OiAxNTAsIHRvcDogMCwgbGVmdDogMCwgcGFkZGluZzogMTAsIHNhZmVNYXJnaW46IDY0fSxcclxuICAgIHN0YXJ0VG91ckJ1dHRvbkxhYmVsOiAnU3RhcnQgVG91ciBHdWlkZSdcclxuICB9Il19

package/esm2020/lib/model/tour-guide.model.mjs

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG91ci1ndWlkZS5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvbW9kZWwvdG91ci1ndWlkZS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBUb3VyR3VpZGVDb25maWcge1xyXG4gIHR5cGU6ICdzaW1wbGUnIHwgJ2FkdmFuY2UnO1xyXG4gIHNob3dTa2lwQnV0dG9uPzogYm9vbGVhbjtcclxuICBidXR0b25zRm9udFNpemU/OiBzdHJpbmc7XHJcbiAgdGl0bGVGb250U2l6ZT86IHN0cmluZztcclxuICBjb250ZW50Rm9udFNpemU/OiBzdHJpbmc7XHJcbiAgYnV0dG9uc0FsaWdubWVudD86ICdzdGFydCcgfCAnY2VudGVyJyB8ICdlbmQnIHwgJ3NwYWNlLWJldHdlZW4nIHwgJ3NwYWNlLWFyb3VuZCcgfCAnc3BhY2UtZXZlbmx5JztcclxuICBzdGVwQ291bnRBbGlnbm1lbnQ/OiAnc3RhcnQnIHwgJ2NlbnRlcicgfCAnZW5kJztcclxuICBzdGVwQ291bnRTdGFydFRleHQ/OiBzdHJpbmc7XHJcbiAgc3RlcENvdW50TWlkZGxlVGV4dD86IHN0cmluZztcclxuICBza2lwQnV0dG9uVGV4dD86IHN0cmluZztcclxuICBwcmV2QnV0dG9uVGV4dD86IHN0cmluZztcclxuICBuZXh0QnV0dG9uVGV4dD86IHN0cmluZztcclxuICBmaW5pc2hCdXR0b25UZXh0Pzogc3RyaW5nO1xyXG4gIGhpZ2hsaWdodEJvcmRlckNvbG9yPzogc3RyaW5nO1xyXG4gIGhpZ2hsaWdodEJvcmRlcldpZHRoPzogc3RyaW5nO1xyXG4gIGRlZmF1bHRQb3B1cFdpZHRoPzogc3RyaW5nO1xyXG59XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFRvdXJHdWlkZURhdGEge1xyXG4gIHRpdGxlPzogc3RyaW5nO1xyXG4gIGNvbnRlbnQ6IHN0cmluZztcclxuICBzZWxlY3Rvcj86IHN0cmluZzsgLy8gT25seSBmb3IgJ2FkdmFuY2UnIHR5cGVcclxuICBwb3NpdGlvbj86ICd0b3AnIHwgJ2JvdHRvbScgfCAnbGVmdCcgfCAncmlnaHQnIHwgJ2F1dG8nO1xyXG4gIHNoYXBlPzogJycgfCAncm91bmRlZCcgfCAncmVjdGFuZ2xlJyB8ICdjaXJjbGUnO1xyXG4gIHdpZHRoPzogc3RyaW5nO1xyXG59XHJcbiJdfQ==