@aquera/nile-elements 0.1.3 → 0.1.5

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.
Files changed (24) hide show
  1. package/README.md +6 -0
  2. package/demo/index.html +108 -94
  3. package/dist/nile-form-help-text/nile-form-help-text.cjs.js +1 -1
  4. package/dist/nile-form-help-text/nile-form-help-text.cjs.js.map +1 -1
  5. package/dist/nile-form-help-text/nile-form-help-text.esm.js +1 -1
  6. package/dist/nile-tour/nile-tour.cjs.js +1 -1
  7. package/dist/nile-tour/nile-tour.cjs.js.map +1 -1
  8. package/dist/nile-tour/nile-tour.css.cjs.js +1 -1
  9. package/dist/nile-tour/nile-tour.css.cjs.js.map +1 -1
  10. package/dist/nile-tour/nile-tour.css.esm.js +112 -23
  11. package/dist/nile-tour/nile-tour.esm.js +1 -1
  12. package/dist/src/nile-form-help-text/nile-form-help-text.js +1 -1
  13. package/dist/src/nile-form-help-text/nile-form-help-text.js.map +1 -1
  14. package/dist/src/nile-tour/nile-tour.css.js +110 -21
  15. package/dist/src/nile-tour/nile-tour.css.js.map +1 -1
  16. package/dist/src/nile-tour/nile-tour.d.ts +1 -1
  17. package/dist/src/nile-tour/nile-tour.js +23 -5
  18. package/dist/src/nile-tour/nile-tour.js.map +1 -1
  19. package/dist/tsconfig.tsbuildinfo +1 -1
  20. package/package.json +1 -1
  21. package/src/nile-form-help-text/nile-form-help-text.ts +1 -1
  22. package/src/nile-tour/nile-tour.css.ts +110 -21
  23. package/src/nile-tour/nile-tour.ts +25 -6
  24. package/vscode-html-custom-data.json +2 -2
package/dist/src/nile-tour/nile-tour.css.js CHANGED
@@ -13,34 +13,99 @@ export const styles = css `
13
13
  }
14
14
 
15
15
  .introjs-tooltip {
16
- background-color: var(--nile-tour-background-color, #000);
16
+ background-color: var(--nile-tour-background-color, #fff);
17
17
  color: var(--nile-tour-text-color, #fff);
18
18
  width: 300px;
19
19
  max-width: 300px;
20
+ border-radius: 4px;
21
+ border: 1px solid var(--Neutral-30, #c7ced4);
22
+ background: var(--White-Normal, #fff);
23
+
24
+ /* Elevation/Lifted */
25
+ box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
20
26
  }
21
27
 
22
- .introjs-arrow.bottom {
23
- border-top-color: var(--nile-tour-background-color, #000);
28
+ .introjs-tooltip-title {
29
+ color: #000;
30
+ font-size: 16px;
31
+ font-style: normal;
32
+ font-weight: 500;
33
+ line-height: 16px;
34
+ letter-spacing: 0.2px;
35
+ }
36
+
37
+ .introjs-tooltip-header {
38
+ padding-left: 18px;
39
+ padding-right: 18px;
40
+ padding-top: 18px;
41
+ }
42
+
43
+ .introjs-tooltiptext {
44
+ color: #7f7f7f;
45
+ font-size: 14px;
46
+ font-style: normal;
47
+ font-weight: 400;
48
+ line-height: 20px;
49
+ letter-spacing: 0.2px;
50
+ padding: 15px 18px;
51
+ }
52
+
53
+ .introjs-arrow {
54
+ width: 15px;
55
+ height: 20px;
56
+ background-image: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="15" height="20" viewBox="0 0 15 20" fill="none"%3E%3Cpath d="M1.43333 11.2C0.633333 10.6 0.633333 9.4 1.43333 8.8L12.1 0.800001C13.0889 0.0583585 14.5 0.763931 14.5 2L14.5 18C14.5 19.2361 13.0889 19.9416 12.1 19.2L1.43333 11.2Z" fill="white" stroke="%23C7CED4"/%3E%3C/svg%3E');
57
+ background-repeat: no-repeat;
58
+ background-size: contain;
59
+ background-position: center;
60
+ position: absolute;
61
+ border: none;
62
+ content: none;
24
63
  }
25
64
 
26
65
  .introjs-arrow.top {
27
- border-bottom-color: var(--nile-tour-background-color, #000);
66
+ top: -14.5px;
67
+ transform: rotate(90deg);
68
+ clip-path: inset(0px 3px 0px 0px);
69
+ }
70
+
71
+ .introjs-arrow.bottom {
72
+ bottom: -14.5px;
73
+ transform: rotate(270deg);
74
+ clip-path: inset(0px 3px 0px 0px);
28
75
  }
29
76
 
30
77
  .introjs-arrow.left {
31
- border-right-color: var(--nile-tour-background-color, #000);
78
+ left: -11.5px;
79
+ transform: rotate(0);
80
+ clip-path: inset(0px 3px 0px 0px);
32
81
  }
33
82
 
34
83
  .introjs-arrow.right {
35
- border-left-color: var(--nile-tour-background-color, #000);
84
+ right: -12px;
85
+ transform: rotate(180deg);
86
+ clip-path: inset(0px 3px 0px 0px);
36
87
  }
37
88
 
38
89
  .introjs-arrow.left-bottom {
39
- border-right-color: var(--nile-tour-background-color, #000) !important;
90
+ transform: rotate(0);
91
+ clip-path: inset(0px 1px 0px 0px);
92
+ left: -13.5px;
93
+ border-right-color: var(--nile-tour-background-color, #fff) !important;
40
94
  }
41
95
 
42
96
  .introjs-arrow.right-bottom {
43
- border-left-color: var(--nile-tour-background-color, #000) !important;
97
+ right: -12px;
98
+ transform: rotate(180deg);
99
+ clip-path: inset(0px 3px 0px 0px);
100
+ border-left-color: var(--nile-tour-background-color, #fff) !important;
101
+ }
102
+
103
+ .introjs-arrow.top-middle {
104
+ top: -14px;
105
+ left: 50%;
106
+ margin-left: -5px;
107
+ transform: rotate(90deg);
108
+ clip-path: inset(0px 3px 0px 0px);
44
109
  }
45
110
 
46
111
  .introjs-button {
@@ -51,26 +116,46 @@ export const styles = css `
51
116
  padding: 0;
52
117
  cursor: pointer;
53
118
  text-shadow: none;
54
- background: transparent;
119
+ background: var(--Primary-Normal, #005ea6);
55
120
  border-color: transparent;
121
+ display: flex;
122
+ padding: 12px;
123
+ align-items: center;
124
+ gap: 12px;
125
+ border-radius: 4px;
56
126
  }
57
127
 
58
128
  .introjs-button:hover {
59
- outline: 0;
60
- text-decoration: none;
129
+ background: none;
130
+ border: none;
131
+ color: var(--nile-tour-text-color, #fff);
132
+ font-size: 14px;
133
+ padding: 0;
134
+ cursor: pointer;
135
+ text-shadow: none;
136
+ background: var(--Primary-Normal, #005ea6);
61
137
  border-color: transparent;
62
- background: transparent;
63
- color: white;
138
+ display: flex;
139
+ padding: 12px;
140
+ align-items: center;
141
+ gap: 12px;
64
142
  }
65
143
 
66
144
  .introjs-button:focus {
67
- outline: 0;
68
- text-decoration: none;
69
- border-color: transparent;
70
- background: transparent;
71
- color: white;
145
+ background: none;
72
146
  border: none;
147
+ color: var(--nile-tour-text-color, #fff);
148
+ font-size: 14px;
149
+ padding: 0;
150
+ cursor: pointer;
151
+ text-shadow: none;
73
152
  box-shadow: none;
153
+ background: var(--Primary-Normal, #005ea6);
154
+ border-color: transparent;
155
+ display: flex;
156
+ padding: 12px;
157
+ align-items: center;
158
+ gap: 12px;
74
159
  }
75
160
 
76
161
  .introjs-tooltipbuttons {
@@ -107,12 +192,16 @@ export const styles = css `
107
192
  }
108
193
 
109
194
  .introjs-step-counter {
110
- margin-right: auto; /* Push buttons to the opposite side */
195
+ margin-right: auto;
111
196
  font-size: 14px;
112
- color: #ffffff;
113
197
  padding: 0 10px;
114
198
  display: flex;
115
199
  align-items: center;
200
+ color: var(--Color-Text-Info, #1978B8);
201
+ font-style: normal;
202
+ font-weight: 400;
203
+ line-height: 14px;
204
+ letter-spacing: 0.2px;
116
205
  }
117
206
 
118
207
  @keyframes shake {
@@ -134,7 +223,7 @@ export const styles = css `
134
223
  }
135
224
 
136
225
  .introjs-shake {
137
- animation: shake 0.5s ease infinite; /* Repeats continuously */
226
+ animation: shake 0.5s ease infinite;
138
227
  }
139
228
  `;
140
229
  export default [styles];
package/dist/src/nile-tour/nile-tour.css.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgIxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Tour CSS\n */\nexport const styles = css`\n :host {\n }\n\n .introjs-tooltip {\n background-color: var(--nile-tour-background-color, #000);\n color: var(--nile-tour-text-color, #fff);\n width: 300px;\n max-width: 300px;\n }\n\n .introjs-arrow.bottom {\n border-top-color: var(--nile-tour-background-color, #000);\n }\n\n .introjs-arrow.top {\n border-bottom-color: var(--nile-tour-background-color, #000);\n }\n\n .introjs-arrow.left {\n border-right-color: var(--nile-tour-background-color, #000);\n }\n\n .introjs-arrow.right {\n border-left-color: var(--nile-tour-background-color, #000);\n }\n\n .introjs-arrow.left-bottom {\n border-right-color: var(--nile-tour-background-color, #000) !important;\n }\n\n .introjs-arrow.right-bottom {\n border-left-color: var(--nile-tour-background-color, #000) !important;\n }\n\n .introjs-button {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, #fff);\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: transparent;\n border-color: transparent;\n }\n\n .introjs-button:hover {\n outline: 0;\n text-decoration: none;\n border-color: transparent;\n background: transparent;\n color: white;\n }\n\n .introjs-button:focus {\n outline: 0;\n text-decoration: none;\n border-color: transparent;\n background: transparent;\n color: white;\n border: none;\n box-shadow: none;\n }\n\n .introjs-tooltipbuttons {\n border-top: none;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n }\n\n .introjs-helperNumberLayer {\n display: none;\n }\n\n .introjs-bullets {\n display: none;\n }\n\n .introjs-skipbutton {\n display: none;\n }\n\n .introjs-prev-button {\n color: #c7ced4;\n }\n\n .introjs-helperLayer {\n display: none;\n pointer-events: none;\n }\n\n .introjs-overlay {\n display: none;\n pointer-events: none;\n }\n\n .introjs-step-counter {\n margin-right: auto; /* Push buttons to the opposite side */\n font-size: 14px;\n color: #ffffff;\n padding: 0 10px;\n display: flex;\n align-items: center;\n }\n\n @keyframes shake {\n 0% {\n transform: translateX(0);\n }\n 25% {\n transform: translateX(-5px);\n }\n 50% {\n transform: translateX(5px);\n }\n 75% {\n transform: translateX(-5px);\n }\n 100% {\n transform: translateX(0);\n }\n }\n\n .introjs-shake {\n animation: shake 0.5s ease infinite; /* Repeats continuously */\n }\n`;\n\nexport default [styles];\n"]}
1
+ {"version":3,"file":"nile-tour.css.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyNxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Tour CSS\n */\nexport const styles = css`\n :host {\n }\n\n .introjs-tooltip {\n background-color: var(--nile-tour-background-color, #fff);\n color: var(--nile-tour-text-color, #fff);\n width: 300px;\n max-width: 300px;\n border-radius: 4px;\n border: 1px solid var(--Neutral-30, #c7ced4);\n background: var(--White-Normal, #fff);\n\n /* Elevation/Lifted */\n box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);\n }\n\n .introjs-tooltip-title {\n color: #000;\n font-size: 16px;\n font-style: normal;\n font-weight: 500;\n line-height: 16px;\n letter-spacing: 0.2px;\n }\n\n .introjs-tooltip-header {\n padding-left: 18px;\n padding-right: 18px;\n padding-top: 18px;\n }\n\n .introjs-tooltiptext {\n color: #7f7f7f;\n font-size: 14px;\n font-style: normal;\n font-weight: 400;\n line-height: 20px;\n letter-spacing: 0.2px;\n padding: 15px 18px;\n }\n\n .introjs-arrow {\n width: 15px;\n height: 20px;\n background-image: url('data:image/svg+xml,%3Csvg xmlns=\"http://www.w3.org/2000/svg\" width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\"%3E%3Cpath d=\"M1.43333 11.2C0.633333 10.6 0.633333 9.4 1.43333 8.8L12.1 0.800001C13.0889 0.0583585 14.5 0.763931 14.5 2L14.5 18C14.5 19.2361 13.0889 19.9416 12.1 19.2L1.43333 11.2Z\" fill=\"white\" stroke=\"%23C7CED4\"/%3E%3C/svg%3E');\n background-repeat: no-repeat;\n background-size: contain;\n background-position: center;\n position: absolute;\n border: none;\n content: none;\n }\n\n .introjs-arrow.top {\n top: -14.5px;\n transform: rotate(90deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.bottom {\n bottom: -14.5px;\n transform: rotate(270deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.left {\n left: -11.5px;\n transform: rotate(0);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.right {\n right: -12px;\n transform: rotate(180deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-arrow.left-bottom {\n transform: rotate(0);\n clip-path: inset(0px 1px 0px 0px);\n left: -13.5px;\n border-right-color: var(--nile-tour-background-color, #fff) !important;\n }\n\n .introjs-arrow.right-bottom {\n right: -12px;\n transform: rotate(180deg);\n clip-path: inset(0px 3px 0px 0px);\n border-left-color: var(--nile-tour-background-color, #fff) !important;\n }\n\n .introjs-arrow.top-middle {\n top: -14px;\n left: 50%;\n margin-left: -5px;\n transform: rotate(90deg);\n clip-path: inset(0px 3px 0px 0px);\n }\n\n .introjs-button {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, #fff);\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #005ea6);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n border-radius: 4px;\n }\n\n .introjs-button:hover {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, #fff);\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #005ea6);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n }\n\n .introjs-button:focus {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, #fff);\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n box-shadow: none;\n background: var(--Primary-Normal, #005ea6);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n }\n\n .introjs-tooltipbuttons {\n border-top: none;\n display: flex;\n justify-content: flex-end;\n gap: 10px;\n }\n\n .introjs-helperNumberLayer {\n display: none;\n }\n\n .introjs-bullets {\n display: none;\n }\n\n .introjs-skipbutton {\n display: none;\n }\n\n .introjs-prev-button {\n color: #c7ced4;\n }\n\n .introjs-helperLayer {\n display: none;\n pointer-events: none;\n }\n\n .introjs-overlay {\n display: none;\n pointer-events: none;\n }\n\n .introjs-step-counter {\n margin-right: auto;\n font-size: 14px;\n padding: 0 10px;\n display: flex;\n align-items: center;\n color: var(--Color-Text-Info, #1978B8);\n font-style: normal;\n font-weight: 400;\n line-height: 14px;\n letter-spacing: 0.2px;\n }\n\n @keyframes shake {\n 0% {\n transform: translateX(0);\n }\n 25% {\n transform: translateX(-5px);\n }\n 50% {\n transform: translateX(5px);\n }\n 75% {\n transform: translateX(-5px);\n }\n 100% {\n transform: translateX(0);\n }\n }\n\n .introjs-shake {\n animation: shake 0.5s ease infinite;\n }\n`;\n\nexport default [styles];\n"]}
package/dist/src/nile-tour/nile-tour.d.ts CHANGED
@@ -20,7 +20,7 @@ export declare class NileTour extends LitElement {
20
20
  element: string;
21
21
  title: string;
22
22
  content: string;
23
- position: "top" | "left" | "right" | "bottom";
23
+ position: any;
24
24
  beforeChange?: () => Promise<boolean> | boolean;
25
25
  afterChange?: () => Promise<void> | void;
26
26
  }>;
package/dist/src/nile-tour/nile-tour.js CHANGED
@@ -79,12 +79,12 @@ let NileTour = class NileTour extends LitElement {
79
79
  position: step.position,
80
80
  beforeChange: step.beforeChange,
81
81
  afterChange: step.afterChange,
82
- }))
83
- .filter((step) => step.element !== null);
82
+ }));
83
+ // .filter((step) => step.element !== null);
84
84
  this.tourInstance = introJs().setOptions({
85
85
  steps: introSteps,
86
- nextLabel: "<button class='introjs-button introjs-next-button'>Next</button>",
87
- prevLabel: "<button class='introjs-button introjs-prev-button'>Prev</button>",
86
+ nextLabel: "Next",
87
+ prevLabel: "Prev",
88
88
  overlayOpacity: 0,
89
89
  disableInteraction: this.disableInteraction,
90
90
  showButtons: true,
@@ -128,7 +128,25 @@ let NileTour = class NileTour extends LitElement {
128
128
  }
129
129
  }
130
130
  });
131
- this.tourInstance.start();
131
+ this.tourInstance.start().then(() => {
132
+ const currentStep = this.tourInstance?._currentStep ?? 0;
133
+ const totalSteps = this.steps.length;
134
+ const tooltip = document.querySelector('.introjs-tooltip');
135
+ if (tooltip) {
136
+ const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
137
+ if (navBar) {
138
+ let stepCounter = navBar.querySelector('.introjs-step-counter');
139
+ if (!stepCounter) {
140
+ stepCounter = document.createElement('div');
141
+ stepCounter.className = 'introjs-step-counter';
142
+ navBar.insertBefore(stepCounter, navBar.firstChild);
143
+ }
144
+ stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
145
+ }
146
+ }
147
+ }).catch(err => {
148
+ console.error('Error starting the tour:', err);
149
+ });
132
150
  }
133
151
  shakeTooltip() {
134
152
  const tooltip = document.querySelector('.introjs-tooltip');
package/dist/src/nile-tour/nile-tour.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult, } from 'lit';\nimport { customElement,property } from 'lit/decorators.js';\nimport { styles } from './nile-tour.css';\nimport introJs from 'intro.js';\n\n/**\n * Nile tour component.\n *\n * @tag nile-tour\n */\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n private tourInstance: ReturnType<typeof introJs> | null = null;\n\n /**\n * The steps for the tour.\n */\n @property({ type: Array })\n steps: Array<{\n stepNo: number;\n element: string;\n title: string;\n content: string;\n position: \"top\" | \"left\" | \"right\" | \"bottom\";\n beforeChange?: () => Promise<boolean> | boolean;\n afterChange?: () => Promise<void> | void;\n }> = [];\n\n /**\n * JSON string for steps.\n */\n @property({ type: String })\n stepsJson: string = '';\n\n /**\n * Whether to show the backdrop overlay.\n */\n @property({ type: Boolean })\n showBackdrop: boolean = false;\n\n /**\n * Whether to disable interaction during the tour.\n */\n @property({ type: Boolean })\n disableInteraction: boolean = false;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n createRenderRoot() {\n return this;\n }\n\n constructor() {\n super();\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>): void {\n if (changedProperties.has('stepsJson')) {\n this.parseStepsJson();\n }\n super.updated(changedProperties);\n }\n\n /**\n * Parses the JSON string and updates the steps array.\n */\n private parseStepsJson(): void {\n if (this.stepsJson) {\n try {\n const parsedSteps = JSON.parse(this.stepsJson);\n if (Array.isArray(parsedSteps)) {\n this.steps = parsedSteps;\n } else {\n console.error('Invalid JSON: Expected an array');\n }\n } catch (error) {\n console.error('Failed to parse stepsJson:', error);\n }\n }\n }\n\n /**\n * Initializes and starts the Intro.js tour.\n */\n public startTour(): void {\n console.log('start of tour');\n const introSteps = this.steps\n .map((step) => ({\n element: document.querySelector(`[data-tour=\"${step.element}\"]`) as HTMLElement | null,\n intro: step.content,\n title: step.title,\n position: step.position,\n beforeChange: step.beforeChange,\n afterChange: step.afterChange,\n }))\n .filter((step) => step.element !== null);\n\n this.tourInstance = introJs().setOptions({\n steps: introSteps,\n nextLabel: \"<button class='introjs-button introjs-next-button'>Next</button>\",\n prevLabel: \"<button class='introjs-button introjs-prev-button'>Prev</button>\",\n overlayOpacity: 0,\n disableInteraction: this.disableInteraction,\n showButtons: true,\n showStepNumbers: false,\n exitOnOverlayClick: false,\n });\n\n this.tourInstance.onbeforechange(async (targetElement) => {\n const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n const currentStep = this.steps[currentStepIndex];\n\n if (currentStep?.beforeChange) {\n const result = await currentStep.beforeChange();\n if (!result) {\n this.shakeTooltip();\n return false;\n }\n }\n return true;\n });\n\n this.tourInstance.onafterchange((targetElement) => {\n const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n const currentStep = this.steps[currentStepIndex];\n\n if (currentStep?.afterChange) {\n currentStep.afterChange();\n }\n });\n\n // Update step counter on change\n this.tourInstance.onchange((targetElement) => {\n const currentStep = this.tourInstance?._currentStep ?? 0;\n const totalSteps = this.steps.length;\n const tooltip = document.querySelector('.introjs-tooltip');\n if (tooltip) {\n const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n if (navBar) {\n let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n if (!stepCounter) {\n stepCounter = document.createElement('div');\n stepCounter.className = 'introjs-step-counter';\n navBar.insertBefore(stepCounter, navBar.firstChild);\n }\n stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n }\n }\n });\n\n this.tourInstance.start();\n }\n\n private shakeTooltip(): void {\n const tooltip = document.querySelector('.introjs-tooltip');\n if (tooltip) {\n tooltip.classList.add('introjs-shake');\n setTimeout(() => {\n tooltip.classList.remove('introjs-shake');\n }, 1500);\n }\n }\n\n public render(): TemplateResult {\n return html`\n <style>\n ${styles.cssText}\n </style>\n <slot></slot>\n `;\n }\n}\n\nexport default NileTour;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tour': NileTour;\n }\n}\n"]}
1
+ {"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { LitElement, html, CSSResultArray, TemplateResult, } from 'lit';\nimport { customElement,property } from 'lit/decorators.js';\nimport { styles } from './nile-tour.css';\nimport introJs from 'intro.js';\n\n/**\n * Nile tour component.\n *\n * @tag nile-tour\n */\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n private tourInstance: ReturnType<typeof introJs> | null = null;\n\n /**\n * The steps for the tour.\n */\n @property({ type: Array })\n steps: Array<{\n stepNo: number;\n element: string;\n title: string;\n content: string;\n position: any;\n beforeChange?: () => Promise<boolean> | boolean;\n afterChange?: () => Promise<void> | void;\n }> = [];\n\n /**\n * JSON string for steps.\n */\n @property({ type: String })\n stepsJson: string = '';\n\n /**\n * Whether to show the backdrop overlay.\n */\n @property({ type: Boolean })\n showBackdrop: boolean = false;\n\n /**\n * Whether to disable interaction during the tour.\n */\n @property({ type: Boolean })\n disableInteraction: boolean = false;\n\n public static get styles(): CSSResultArray {\n return [styles];\n }\n\n createRenderRoot() {\n return this;\n }\n\n constructor() {\n super();\n }\n\n updated(changedProperties: Map<string | number | symbol, unknown>): void {\n if (changedProperties.has('stepsJson')) {\n this.parseStepsJson();\n }\n super.updated(changedProperties);\n }\n\n /**\n * Parses the JSON string and updates the steps array.\n */\n private parseStepsJson(): void {\n if (this.stepsJson) {\n try {\n const parsedSteps = JSON.parse(this.stepsJson);\n if (Array.isArray(parsedSteps)) {\n this.steps = parsedSteps;\n } else {\n console.error('Invalid JSON: Expected an array');\n }\n } catch (error) {\n console.error('Failed to parse stepsJson:', error);\n }\n }\n }\n\n /**\n * Initializes and starts the Intro.js tour.\n */\n public startTour(): void {\n console.log('start of tour');\n const introSteps = this.steps\n .map((step) => ({\n element: document.querySelector(`[data-tour=\"${step.element}\"]`) as HTMLElement | null,\n intro: step.content,\n title: step.title,\n position: step.position,\n beforeChange: step.beforeChange,\n afterChange: step.afterChange,\n }));\n // .filter((step) => step.element !== null);\n\n this.tourInstance = introJs().setOptions({\n steps: introSteps,\n nextLabel: \"Next\",\n prevLabel: \"Prev\",\n overlayOpacity: 0,\n disableInteraction: this.disableInteraction,\n showButtons: true,\n showStepNumbers: false,\n exitOnOverlayClick: false,\n });\n\n this.tourInstance.onbeforechange(async (targetElement) => {\n const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n const currentStep = this.steps[currentStepIndex];\n\n if (currentStep?.beforeChange) {\n const result = await currentStep.beforeChange();\n if (!result) {\n this.shakeTooltip();\n return false;\n }\n }\n return true;\n });\n\n this.tourInstance.onafterchange((targetElement) => {\n const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n const currentStep = this.steps[currentStepIndex];\n\n if (currentStep?.afterChange) {\n currentStep.afterChange();\n }\n });\n\n // Update step counter on change\n this.tourInstance.onchange((targetElement) => {\n const currentStep = this.tourInstance?._currentStep ?? 0;\n const totalSteps = this.steps.length;\n const tooltip = document.querySelector('.introjs-tooltip');\n if (tooltip) {\n const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n if (navBar) {\n let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n if (!stepCounter) {\n stepCounter = document.createElement('div');\n stepCounter.className = 'introjs-step-counter';\n navBar.insertBefore(stepCounter, navBar.firstChild);\n }\n stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n }\n }\n });\n\n\n\n this.tourInstance.start().then(() => {\n const currentStep = this.tourInstance?._currentStep ?? 0;\n const totalSteps = this.steps.length;\n const tooltip = document.querySelector('.introjs-tooltip');\n if (tooltip) {\n const navBar = tooltip.querySelector('.introjs-tooltipbuttons');\n if (navBar) {\n let stepCounter = navBar.querySelector('.introjs-step-counter') as HTMLElement;\n if (!stepCounter) {\n stepCounter = document.createElement('div');\n stepCounter.className = 'introjs-step-counter';\n navBar.insertBefore(stepCounter, navBar.firstChild);\n }\n stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;\n }\n } }).catch(err => {\n console.error('Error starting the tour:', err);\n });\n }\n\n private shakeTooltip(): void {\n const tooltip = document.querySelector('.introjs-tooltip');\n if (tooltip) {\n tooltip.classList.add('introjs-shake');\n setTimeout(() => {\n tooltip.classList.remove('introjs-shake');\n }, 1500);\n }\n }\n\n public render(): TemplateResult {\n return html`\n <style>\n ${styles.cssText}\n </style>\n <slot></slot>\n `;\n }\n}\n\nexport default NileTour;\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tour': NileTour;\n }\n}\n"]}