@ruc-lib/tour-guide 2.0.0 → 2.1.8
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -15,7 +15,7 @@ npm install @uxpractice/ruc-lib
|
|
|
15
15
|
|
|
16
16
|
If you only need the Tour Guide component
|
|
17
17
|
```bash
|
|
18
|
-
npm install @
|
|
18
|
+
npm install @ruc-lib/tour-guide
|
|
19
19
|
```
|
|
20
20
|
|
|
21
21
|
## Usage
|
|
@@ -23,7 +23,12 @@ npm install @uxpractice/tour-guide
|
|
|
23
23
|
In your Angular module file (e.g., `app.module.ts`), import the `RuclibTourGuideModule`:
|
|
24
24
|
|
|
25
25
|
```typescript
|
|
26
|
-
|
|
26
|
+
// For Complete Library
|
|
27
|
+
import { RuclibTourGuideModule } from '@uxpractice/ruc-lib/tour-guide';
|
|
28
|
+
|
|
29
|
+
// For Individual Package
|
|
30
|
+
import { RuclibTourGuideModule } from '@ruc-lib/tour-guide';
|
|
31
|
+
|
|
27
32
|
import { AppComponent } from './app.component';
|
|
28
33
|
import { NgModule } from '@angular/core';
|
|
29
34
|
import { BrowserModule } from '@angular/platform-browser';
|
|
@@ -41,15 +46,15 @@ export class AppModule {}
|
|
|
41
46
|
```
|
|
42
47
|
|
|
43
48
|
### 2. Use the Component
|
|
44
|
-
In your component's template, use the `<uxp-
|
|
49
|
+
In your component's template, use the `<uxp-ruclib-tour-guide>` selector and pass the configuration object to the `rucInputData` input and the data array to the `dataSource` input.
|
|
45
50
|
|
|
46
51
|
```html
|
|
47
|
-
<uxp-
|
|
52
|
+
<uxp-ruclib-tour-guide
|
|
48
53
|
[rucInputData]="tourGuideConfig"
|
|
49
54
|
[customTheme]="customTheme"
|
|
50
55
|
(rucEvent)="passEvent($event)"
|
|
51
56
|
[dataSource]="tourGuideData">
|
|
52
|
-
</uxp-
|
|
57
|
+
</uxp-ruclib-tour-guide>
|
|
53
58
|
```
|
|
54
59
|
|
|
55
60
|
## API Reference
|
|
@@ -58,9 +63,9 @@ In your component's template, use the `<uxp-ruc-tour-guide>` selector and pass t
|
|
|
58
63
|
|
|
59
64
|
| Input | Type | Description |
|
|
60
65
|
|----------------|--------------------|---------------------------------------------------|
|
|
61
|
-
| `rucInputData` | `
|
|
66
|
+
| `rucInputData` | `TourGuideConfig` | The main configuration object for the tour guide. |
|
|
62
67
|
| `customTheme` | `string` | An optional CSS class for custom theming. |
|
|
63
|
-
| `dataSource` | `
|
|
68
|
+
| `dataSource` | `TourGuideData` | Data for the tour guide. |
|
|
64
69
|
|
|
65
70
|
### Component Outputs
|
|
66
71
|
|
|
@@ -68,7 +73,7 @@ In your component's template, use the `<uxp-ruc-tour-guide>` selector and pass t
|
|
|
68
73
|
|-----------|-----------|---------------------------------------------------|
|
|
69
74
|
| `rucEvent`| `any` | Emits events related to tour guide actions (e.g., 'skip', 'next', 'finish'). |
|
|
70
75
|
|
|
71
|
-
### `
|
|
76
|
+
### `TourGuideConfig`
|
|
72
77
|
This is the main configuration object for the Tour Guide component.
|
|
73
78
|
|
|
74
79
|
| Property | Type | Description |
|
|
@@ -90,7 +95,7 @@ This is the main configuration object for the Tour Guide component.
|
|
|
90
95
|
| `highlightBorderWidth` | `string` | Width of the highlight border around the guided element. |
|
|
91
96
|
| `defaultPopupWidth` | `string` | Default width of the tour guide popup. |
|
|
92
97
|
|
|
93
|
-
### `
|
|
98
|
+
### `TourGuideData`
|
|
94
99
|
This array of objects defines the content for each step of the tour guide.
|
|
95
100
|
|
|
96
101
|
| Property | Type | Description |
|
|
@@ -108,7 +113,12 @@ Here's an example of how to configure the Tour Guide component in your component
|
|
|
108
113
|
|
|
109
114
|
```typescript
|
|
110
115
|
import { Component } from '@angular/core';
|
|
111
|
-
|
|
116
|
+
|
|
117
|
+
// For Complete Library
|
|
118
|
+
import { TourGuideConfig, TourGuideData } from '@uxpractice/ruc-lib/tour-guide';
|
|
119
|
+
|
|
120
|
+
// For Individual package
|
|
121
|
+
import { TourGuideConfig, TourGuideData } from '@ruc-lib/tour-guide';
|
|
112
122
|
|
|
113
123
|
@Component({
|
|
114
124
|
selector: 'app-root',
|
|
@@ -1,2 +1,2 @@
|
|
|
1
1
|
export {};
|
|
2
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
2
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidG91ci1ndWlkZS5tb2RlbC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9saWIvbW9kZWwvdG91ci1ndWlkZS5tb2RlbC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiIiwic291cmNlc0NvbnRlbnQiOlsiZXhwb3J0IGludGVyZmFjZSBUb3VyR3VpZGVDb25maWcge1xyXG4gIC8qKlxyXG4gICAgKiBEZWZpbmVzIHRoZSB0eXBlIG9mIHRvdXIgZ3VpZGUuXHJcbiAgICAqIC0gJ3NpbXBsZSc6IERpc3BsYXlzIGEgc2luZ2xlIHBvcHVwIHdpdGggbmF2aWdhdGlvbiBidXR0b25zLlxyXG4gICAgKiAtICdhZHZhbmNlJzogSGlnaGxpZ2h0cyBzcGVjaWZpYyBlbGVtZW50cyBvbiB0aGUgcGFnZSBhbmQgZ3VpZGVzIHRoZSB1c2VyIHRocm91Z2ggdGhlbS5cclxuICAgICovXHJcbiAgdHlwZTogJ3NpbXBsZScgfCAnYWR2YW5jZSc7XHJcblxyXG4gIC8qKlxyXG4gICAqICBXaGV0aGVyIHRvIGRpc3BsYXkgYSBza2lwIGJ1dHRvbiBpbiB0aGUgdG91ciBndWlkZS5cclxuICAgKi9cclxuICBzaG93U2tpcEJ1dHRvbj86IGJvb2xlYW47XHJcblxyXG4gIC8qKlxyXG4gICAqIEZvbnQgc2l6ZSBmb3IgdGhlIGJ1dHRvbnMgaW4gdGhlIHRvdXIgZ3VpZGUuXHJcbiAgICovXHJcbiAgYnV0dG9uc0ZvbnRTaXplPzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBGb250IHNpemUgZm9yIHRoZSB0aXRsZSBvZiB0aGUgdG91ciBndWlkZS5cclxuICAgKi9cclxuICB0aXRsZUZvbnRTaXplPzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBGb250IHNpemUgZm9yIHRoZSBjb250ZW50IG9mIHRoZSB0b3VyIGd1aWRlLlxyXG4gICAqL1xyXG4gIGNvbnRlbnRGb250U2l6ZT86IHN0cmluZztcclxuXHJcbiAgLyoqXHJcbiAgICogQWxpZ25tZW50IG9mIHRoZSBidXR0b25zIHdpdGhpbiB0aGUgdG91ciBndWlkZSBtb2RhbC5cclxuICAgKi9cclxuICBidXR0b25zQWxpZ25tZW50PzogJ3N0YXJ0JyB8ICdjZW50ZXInIHwgJ2VuZCcgfCAnc3BhY2UtYmV0d2VlbicgfCAnc3BhY2UtYXJvdW5kJyB8ICdzcGFjZS1ldmVubHknO1xyXG5cclxuICAvKipcclxuICAgKiBBbGlnbm1lbnQgb2YgdGhlIHN0ZXAgY291bnQgd2l0aGluIHRoZSB0b3VyIGd1aWRlIG1vZGFsLlxyXG4gICAqL1xyXG4gIHN0ZXBDb3VudEFsaWdubWVudD86ICdzdGFydCcgfCAnY2VudGVyJyB8ICdlbmQnO1xyXG5cclxuICAvKipcclxuICAgKiBUZXh0IGZvciB0aGUgc3RhcnQgb2YgdGhlIHN0ZXAgY291bnQgKGUuZy4sIFwiU3RlcFwiKS5cclxuICAgKi9cclxuICBzdGVwQ291bnRTdGFydFRleHQ/OiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICAqIFRleHQgZm9yIHRoZSBtaWRkbGUgb2YgdGhlIHN0ZXAgY291bnQgKGUuZy4sIFwib2ZcIikuXHJcbiAgICovXHJcbiAgc3RlcENvdW50TWlkZGxlVGV4dD86IHN0cmluZztcclxuXHJcbiAgLyoqXHJcbiAgICogVGV4dCBmb3IgdGhlIHNraXAgYnV0dG9uLlxyXG4gICAqL1xyXG4gIHNraXBCdXR0b25UZXh0Pzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBUZXh0IGZvciB0aGUgcHJldmlvdXMgYnV0dG9uLlxyXG4gICAqL1xyXG4gIHByZXZCdXR0b25UZXh0Pzogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAgKiBUZXh0IGZvciB0aGUgbmV4dCBidXR0b24uXHJcbiAgICovXHJcbiAgbmV4dEJ1dHRvblRleHQ/OiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICAqIFRleHQgZm9yIHRoZSBmaW5pc2ggYnV0dG9uLlxyXG4gICAqL1xyXG4gIGZpbmlzaEJ1dHRvblRleHQ/OiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICAqIEJvcmRlciBjb2xvciBmb3IgdGhlIGhpZ2hsaWdodGVkIGVsZW1lbnQgaW4gJ2FkdmFuY2UnIG1vZGUuXHJcbiAgICovXHJcbiAgaGlnaGxpZ2h0Qm9yZGVyQ29sb3I/OiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICAqIEJvcmRlciByYWRpdXMgZm9yIHRoZSBoaWdobGlnaHRlZCBlbGVtZW50IGluICdhZHZhbmNlJyBtb2RlLlxyXG4gICAqL1xyXG4gIGhpZ2hsaWdodEJvcmRlclJhZGl1cz86IHN0cmluZztcclxuXHJcbiAgLyoqXHJcbiAgICogV2lkdGggb2YgdGhlIGJvcmRlciBmb3IgdGhlIGhpZ2hsaWdodGVkIGVsZW1lbnQgaW4gJ2FkdmFuY2UnIG1vZGUuXHJcbiAgICovXHJcbiAgaGlnaGxpZ2h0Qm9yZGVyV2lkdGg/OiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICAqIERlZmF1bHQgd2lkdGggZm9yIHRoZSB0b3VyIGd1aWRlIHBvcHVwLlxyXG4gICAqL1xyXG4gIGRlZmF1bHRQb3B1cFdpZHRoPzogc3RyaW5nO1xyXG59XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIFRvdXJHdWlkZURhdGEge1xyXG4gIC8qKlxyXG4gICAqIHRpdGxlIGZvciBmZWF0dXJlIHNsaWRlXHJcbiAgICovXHJcbiAgdGl0bGU/OiBzdHJpbmc7XHJcblxyXG4gIC8qKlxyXG4gICogZGVzY3JpcHRpb24gb2Ygc2VsZWN0ZWQgZmVhdHVyZSBpbiBzbGlkZVxyXG4gICovXHJcbiAgY29udGVudDogc3RyaW5nO1xyXG5cclxuICAvKipcclxuICAqIFRoZSBlbGVtZW50IHRvIHdoaWNoIHRoZSB0b3VyIGd1aWRlIHdpbGwgcG9pbnQuXHJcbiAgKiBPbmx5IHJlcXVpcmVkIGZvciAnYWR2YW5jZScgdHlwZSB0b3VyIGd1aWRlXHJcbiAgKi9cclxuICBzZWxlY3Rvcj86IHN0cmluZztcclxuXHJcbiAgLyoqXHJcbiAgICogUG9zaXRpb24gb2YgdGhlIHRvdXIgZ3VpZGUgcG9wdXAgcmVsYXRpdmUgdG8gdGhlIGhpZ2hsaWdodGVkIGVsZW1lbnQuXHJcbiAgICovXHJcbiAgcG9zaXRpb24/OiAndG9wJyB8ICdib3R0b20nIHwgJ2xlZnQnIHwgJ3JpZ2h0JyB8ICdhdXRvJztcclxuXHJcbiAgLyoqXHJcbiAgICogRGVmaW5lcyB0aGUgc2hhcGUgb2YgdGhlIG1vZGFsIGFyb3VuZCB0aGUgc2VsZWN0ZWQgZWxlbWVudC5cclxuICAgKiAtICdyb3VuZGVkJzogQSByZWN0YW5nbGUgd2l0aCByb3VuZGVkIGNvcm5lciBtb2RhbC5cclxuICAgKiAtICdyZWN0YW5nbGUnOiBBIHJlY3Rhbmd1bGFyIG1vZGFsLlxyXG4gICAqIC0gJ2NpcmNsZSc6IEEgY2lyY3VsYXIgbW9kYWwuXHJcbiAgICovXHJcbiAgc2hhcGU/OiAnJyB8ICdyb3VuZGVkJyB8ICdyZWN0YW5nbGUnIHwgJ2NpcmNsZSc7XHJcblxyXG4gIC8qKlxyXG4gICAqIERlZmluZXMgdGhlIHdpZHRoIG9mIG1vZGFsIGZvciBjdXJyZW50IHNsaWRlLlxyXG4gICAqL1xyXG4gIHdpZHRoPzogc3RyaW5nO1xyXG59XHJcbiJdfQ==
|
|
@@ -1,26 +1,102 @@
|
|
|
1
1
|
export interface TourGuideConfig {
|
|
2
|
+
/**
|
|
3
|
+
* Defines the type of tour guide.
|
|
4
|
+
* - 'simple': Displays a single popup with navigation buttons.
|
|
5
|
+
* - 'advance': Highlights specific elements on the page and guides the user through them.
|
|
6
|
+
*/
|
|
2
7
|
type: 'simple' | 'advance';
|
|
8
|
+
/**
|
|
9
|
+
* Whether to display a skip button in the tour guide.
|
|
10
|
+
*/
|
|
3
11
|
showSkipButton?: boolean;
|
|
12
|
+
/**
|
|
13
|
+
* Font size for the buttons in the tour guide.
|
|
14
|
+
*/
|
|
4
15
|
buttonsFontSize?: string;
|
|
16
|
+
/**
|
|
17
|
+
* Font size for the title of the tour guide.
|
|
18
|
+
*/
|
|
5
19
|
titleFontSize?: string;
|
|
20
|
+
/**
|
|
21
|
+
* Font size for the content of the tour guide.
|
|
22
|
+
*/
|
|
6
23
|
contentFontSize?: string;
|
|
24
|
+
/**
|
|
25
|
+
* Alignment of the buttons within the tour guide modal.
|
|
26
|
+
*/
|
|
7
27
|
buttonsAlignment?: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly';
|
|
28
|
+
/**
|
|
29
|
+
* Alignment of the step count within the tour guide modal.
|
|
30
|
+
*/
|
|
8
31
|
stepCountAlignment?: 'start' | 'center' | 'end';
|
|
32
|
+
/**
|
|
33
|
+
* Text for the start of the step count (e.g., "Step").
|
|
34
|
+
*/
|
|
9
35
|
stepCountStartText?: string;
|
|
36
|
+
/**
|
|
37
|
+
* Text for the middle of the step count (e.g., "of").
|
|
38
|
+
*/
|
|
10
39
|
stepCountMiddleText?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Text for the skip button.
|
|
42
|
+
*/
|
|
11
43
|
skipButtonText?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Text for the previous button.
|
|
46
|
+
*/
|
|
12
47
|
prevButtonText?: string;
|
|
48
|
+
/**
|
|
49
|
+
* Text for the next button.
|
|
50
|
+
*/
|
|
13
51
|
nextButtonText?: string;
|
|
52
|
+
/**
|
|
53
|
+
* Text for the finish button.
|
|
54
|
+
*/
|
|
14
55
|
finishButtonText?: string;
|
|
56
|
+
/**
|
|
57
|
+
* Border color for the highlighted element in 'advance' mode.
|
|
58
|
+
*/
|
|
15
59
|
highlightBorderColor?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Border radius for the highlighted element in 'advance' mode.
|
|
62
|
+
*/
|
|
63
|
+
highlightBorderRadius?: string;
|
|
64
|
+
/**
|
|
65
|
+
* Width of the border for the highlighted element in 'advance' mode.
|
|
66
|
+
*/
|
|
16
67
|
highlightBorderWidth?: string;
|
|
68
|
+
/**
|
|
69
|
+
* Default width for the tour guide popup.
|
|
70
|
+
*/
|
|
17
71
|
defaultPopupWidth?: string;
|
|
18
72
|
}
|
|
19
73
|
export interface TourGuideData {
|
|
74
|
+
/**
|
|
75
|
+
* title for feature slide
|
|
76
|
+
*/
|
|
20
77
|
title?: string;
|
|
78
|
+
/**
|
|
79
|
+
* description of selected feature in slide
|
|
80
|
+
*/
|
|
21
81
|
content: string;
|
|
82
|
+
/**
|
|
83
|
+
* The element to which the tour guide will point.
|
|
84
|
+
* Only required for 'advance' type tour guide
|
|
85
|
+
*/
|
|
22
86
|
selector?: string;
|
|
87
|
+
/**
|
|
88
|
+
* Position of the tour guide popup relative to the highlighted element.
|
|
89
|
+
*/
|
|
23
90
|
position?: 'top' | 'bottom' | 'left' | 'right' | 'auto';
|
|
91
|
+
/**
|
|
92
|
+
* Defines the shape of the modal around the selected element.
|
|
93
|
+
* - 'rounded': A rectangle with rounded corner modal.
|
|
94
|
+
* - 'rectangle': A rectangular modal.
|
|
95
|
+
* - 'circle': A circular modal.
|
|
96
|
+
*/
|
|
24
97
|
shape?: '' | 'rounded' | 'rectangle' | 'circle';
|
|
98
|
+
/**
|
|
99
|
+
* Defines the width of modal for current slide.
|
|
100
|
+
*/
|
|
25
101
|
width?: string;
|
|
26
102
|
}
|
package/package.json
CHANGED
|
@@ -1,12 +1,13 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ruc-lib/tour-guide",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "2.1.8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@angular/
|
|
7
|
-
"@angular/
|
|
8
|
-
"@angular/
|
|
9
|
-
"
|
|
6
|
+
"@angular/core": ">=15.0.0 <18.0.0",
|
|
7
|
+
"@angular/common": ">=15.0.0 <18.0.0",
|
|
8
|
+
"@angular/material": "^15.2.0",
|
|
9
|
+
"rxjs": ">=6.5.0 <8.0.0",
|
|
10
|
+
"zone.js": ">=0.11.4 <0.14.0"
|
|
10
11
|
},
|
|
11
12
|
"dependencies": {
|
|
12
13
|
"tslib": "^2.3.0"
|