@aquera/nile-elements 0.1.18 → 0.1.19

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 +3 -0
  2. package/demo/index.html +111 -16
  3. package/dist/nile-code-editor/nile-code-editor.cjs.js +1 -1
  4. package/dist/nile-code-editor/nile-code-editor.cjs.js.map +1 -1
  5. package/dist/nile-code-editor/nile-code-editor.esm.js +1 -1
  6. package/dist/nile-tour/nile-tour.cjs.js +2 -2
  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 +33 -19
  11. package/dist/nile-tour/nile-tour.esm.js +11 -2
  12. package/dist/src/nile-code-editor/nile-code-editor.js +1 -1
  13. package/dist/src/nile-code-editor/nile-code-editor.js.map +1 -1
  14. package/dist/src/nile-tour/nile-tour.css.js +31 -17
  15. package/dist/src/nile-tour/nile-tour.css.js.map +1 -1
  16. package/dist/src/nile-tour/nile-tour.d.ts +6 -29
  17. package/dist/src/nile-tour/nile-tour.js +70 -76
  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-code-editor/nile-code-editor.ts +1 -1
  22. package/src/nile-tour/nile-tour.css.ts +31 -17
  23. package/src/nile-tour/nile-tour.ts +86 -95
  24. package/vscode-html-custom-data.json +1 -5
package/dist/src/nile-tour/nile-tour.css.js CHANGED
@@ -13,13 +13,14 @@ export const styles = css `
13
13
  }
14
14
 
15
15
  .introjs-tooltip {
16
- background-color: var(--nile-tour-background-color, #1978B8);
17
- color: var(--nile-tour-text-color, var(--nile-colors-white-base));
16
+ background-color: var(--nile-tour-background-color, #1978b8);
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, #1978B8);
22
- background: var(--White-Normal, #1978B8);
20
+ border-radius: 12px;
21
+ border: 1px solid var(--Neutral-30, #1978b8);
22
+ background: var(--White-Normal, #1978b8);
23
+ /* border: 1px solid var(--Neutral-30, #C7CED4); */
23
24
 
24
25
  /* Elevation/Lifted */
25
26
  box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
@@ -40,8 +41,12 @@ export const styles = css `
40
41
  padding-top: 18px;
41
42
  }
42
43
 
44
+ .introjs-progress {
45
+ display: none;
46
+ }
47
+
43
48
  .introjs-tooltiptext {
44
- color: var(--nile-colors-white-base);
49
+ color: #c7ced4;
45
50
  font-size: 14px;
46
51
  font-style: normal;
47
52
  font-weight: 400;
@@ -116,7 +121,7 @@ export const styles = css `
116
121
  padding: 0;
117
122
  cursor: pointer;
118
123
  text-shadow: none;
119
- background: var(--Primary-Normal, #1978B8);
124
+ background: var(--Primary-Normal, #1978b8);
120
125
  border-color: transparent;
121
126
  display: flex;
122
127
  padding: 12px;
@@ -134,7 +139,7 @@ export const styles = css `
134
139
  padding: 0;
135
140
  cursor: pointer;
136
141
  text-shadow: none;
137
- background: var(--Primary-Normal, #1978B8);
142
+ background: var(--Primary-Normal, #1978b8);
138
143
  border-color: transparent;
139
144
  display: flex;
140
145
  padding: 12px;
@@ -151,7 +156,7 @@ export const styles = css `
151
156
  cursor: pointer;
152
157
  text-shadow: none;
153
158
  box-shadow: none;
154
- background: var(--Primary-Normal, #1978B8);
159
+ background: var(--Primary-Normal, #1978b8);
155
160
  border-color: transparent;
156
161
  display: flex;
157
162
  padding: 12px;
@@ -183,13 +188,8 @@ export const styles = css `
183
188
  }
184
189
 
185
190
  .introjs-helperLayer {
186
- display: none;
187
- pointer-events: none;
188
- }
189
-
190
- .introjs-overlay {
191
- display: none;
192
- pointer-events: none;
191
+ box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px,
192
+ rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
193
193
  }
194
194
 
195
195
  .introjs-step-counter {
@@ -198,7 +198,7 @@ export const styles = css `
198
198
  padding: 0 10px;
199
199
  display: flex;
200
200
  align-items: center;
201
- color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));
201
+ color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.5));
202
202
  font-style: normal;
203
203
  font-weight: 500;
204
204
  line-height: 14px;
@@ -226,6 +226,20 @@ export const styles = css `
226
226
  .introjs-shake {
227
227
  animation: shake 0.5s ease infinite;
228
228
  }
229
+
230
+ .introjs-close-btn {
231
+ position: absolute;
232
+ top: 15px;
233
+ right: 10px;
234
+ background: none;
235
+ border: none;
236
+ font-size: 16px;
237
+ cursor: pointer;
238
+ }
239
+
240
+ a[disabled='true'] {
241
+ display: none;
242
+ }
229
243
  `;
230
244
  export default [styles];
231
245
  //# sourceMappingURL=nile-tour.css.js.map
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0NxB,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, #1978B8);\n color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n width: 300px;\n max-width: 300px;\n border-radius: 4px;\n border: 1px solid var(--Neutral-30, #1978B8);\n background: var(--White-Normal, #1978B8);\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: var(--nile-colors-white-base);\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: var(--nile-colors-white-base);\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 width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z\" fill=\"%231978B8\"/%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, var(--nile-colors-white-base)) !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, var(--nile-colors-white-base)) !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, var(--nile-colors-white-base));\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #1978B8);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n border-radius: 4px;\n font-weight: 500;\n }\n\n .introjs-button:hover {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #1978B8);\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, var(--nile-colors-white-base));\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n box-shadow: none;\n background: var(--Primary-Normal, #1978B8);\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-Inverted-Secondary, rgba(255, 255, 255, 0.50));\n font-style: normal;\n font-weight: 500;\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"]}
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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwOxB,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, #1978b8);\n color: var(--nile-tour-text-color, #fff);\n width: 300px;\n max-width: 300px;\n border-radius: 12px;\n border: 1px solid var(--Neutral-30, #1978b8);\n background: var(--White-Normal, #1978b8);\n /* border: 1px solid var(--Neutral-30, #C7CED4); */\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: var(--nile-colors-white-base);\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-progress {\n display: none;\n }\n\n .introjs-tooltiptext {\n color: #c7ced4;\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 width=\"15\" height=\"20\" viewBox=\"0 0 15 20\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\"%3E%3Cpath d=\"M1.13333 11.6C0.0666661 10.8 0.0666662 9.2 1.13333 8.4L11.8 0.400001C13.1185 -0.588854 15 0.351909 15 2L15 18C15 19.6481 13.1185 20.5889 11.8 19.6L1.13333 11.6Z\" fill=\"%231978B8\"/%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, var(--nile-colors-white-base)) !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, var(--nile-colors-white-base)) !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, var(--nile-colors-white-base));\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #1978b8);\n border-color: transparent;\n display: flex;\n padding: 12px;\n align-items: center;\n gap: 12px;\n border-radius: 4px;\n font-weight: 500;\n }\n\n .introjs-button:hover {\n background: none;\n border: none;\n color: var(--nile-tour-text-color, var(--nile-colors-white-base));\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n background: var(--Primary-Normal, #1978b8);\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, var(--nile-colors-white-base));\n font-size: 14px;\n padding: 0;\n cursor: pointer;\n text-shadow: none;\n box-shadow: none;\n background: var(--Primary-Normal, #1978b8);\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 box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px,\n rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;\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-Inverted-Secondary, rgba(255, 255, 255, 0.5));\n font-style: normal;\n font-weight: 500;\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 .introjs-close-btn {\n position: absolute;\n top: 15px;\n right: 10px;\n background: none;\n border: none;\n font-size: 16px;\n cursor: pointer;\n }\n\n a[disabled='true'] {\n display: none;\n }\n`;\n\nexport default [styles];\n"]}
package/dist/src/nile-tour/nile-tour.d.ts CHANGED
@@ -5,25 +5,9 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { LitElement, CSSResultArray, TemplateResult } from 'lit';
8
- /**
9
- * Nile tour component.
10
- *
11
- * @tag nile-tour
12
- */
8
+ import introJs from 'intro.js';
13
9
  export declare class NileTour extends LitElement {
14
- private tourInstance;
15
- /**
16
- * The steps for the tour.
17
- */
18
- steps: Array<{
19
- stepNo: number;
20
- element: string;
21
- title: string;
22
- content: string;
23
- position: any;
24
- beforeChange?: () => Promise<boolean> | boolean;
25
- afterChange?: () => Promise<void> | void;
26
- }>;
10
+ tourInstance: ReturnType<typeof introJs> | null;
27
11
  /**
28
12
  * JSON string for steps.
29
13
  */
@@ -39,19 +23,12 @@ export declare class NileTour extends LitElement {
39
23
  static get styles(): CSSResultArray;
40
24
  createRenderRoot(): this;
41
25
  constructor();
42
- updated(changedProperties: Map<string | number | symbol, unknown>): void;
43
- /**
44
- * Parses the JSON string and updates the steps array.
45
- */
46
- private parseStepsJson;
47
- /**
48
- * Initializes and starts the Intro.js tour.
49
- */
50
- startTour(): void;
51
- private shakeTooltip;
26
+ private parseSteps;
27
+ private getElementWhenNeeded;
28
+ nextStep(): void;
29
+ startTour(): Promise<void>;
52
30
  render(): TemplateResult;
53
31
  }
54
- export default NileTour;
55
32
  declare global {
56
33
  interface HTMLElementTagNameMap {
57
34
  'nile-tour': NileTour;
package/dist/src/nile-tour/nile-tour.js CHANGED
@@ -5,15 +5,10 @@
5
5
  * LICENSE file in the root directory of this source tree.
6
6
  */
7
7
  import { __decorate } from "tslib";
8
- import { LitElement, html, } from 'lit';
8
+ import { LitElement, html } from 'lit';
9
9
  import { customElement, property } from 'lit/decorators.js';
10
- import { styles } from './nile-tour.css';
11
10
  import introJs from 'intro.js';
12
- /**
13
- * Nile tour component.
14
- *
15
- * @tag nile-tour
16
- */
11
+ import { styles } from './nile-tour.css';
17
12
  let NileTour = class NileTour extends LitElement {
18
13
  static get styles() {
19
14
  return [styles];
@@ -24,10 +19,6 @@ let NileTour = class NileTour extends LitElement {
24
19
  constructor() {
25
20
  super();
26
21
  this.tourInstance = null;
27
- /**
28
- * The steps for the tour.
29
- */
30
- this.steps = [];
31
22
  /**
32
23
  * JSON string for steps.
33
24
  */
@@ -41,79 +32,78 @@ let NileTour = class NileTour extends LitElement {
41
32
  */
42
33
  this.disableInteraction = false;
43
34
  }
44
- updated(changedProperties) {
45
- if (changedProperties.has('stepsJson')) {
46
- this.parseStepsJson();
47
- }
48
- super.updated(changedProperties);
49
- }
50
- /**
51
- * Parses the JSON string and updates the steps array.
52
- */
53
- parseStepsJson() {
54
- if (this.stepsJson) {
55
- try {
56
- const parsedSteps = JSON.parse(this.stepsJson);
57
- if (Array.isArray(parsedSteps)) {
58
- this.steps = parsedSteps;
59
- }
60
- else {
61
- console.error('Invalid JSON: Expected an array');
62
- }
63
- }
64
- catch (error) {
65
- console.error('Failed to parse stepsJson:', error);
66
- }
35
+ parseSteps() {
36
+ if (Array.isArray(this.stepsJson)) {
37
+ return this.stepsJson;
67
38
  }
39
+ console.error('Invalid stepsJson format');
40
+ return [];
68
41
  }
69
- /**
70
- * Initializes and starts the Intro.js tour.
71
- */
72
- startTour() {
73
- console.log('start of tour');
74
- const introSteps = this.steps
75
- .map((step) => ({
76
- element: document.querySelector(`[data-tour="${step.element}"]`),
42
+ async getElementWhenNeeded(step) {
43
+ return {
44
+ element: () => document.querySelector(`[data-tour="${step.element}"]`),
77
45
  intro: step.content,
78
46
  title: step.title,
79
47
  position: step.position,
80
48
  beforeChange: step.beforeChange,
81
49
  afterChange: step.afterChange,
82
- }));
83
- // .filter((step) => step.element !== null);
50
+ disableNext: step.disableNext || false,
51
+ disablePrev: step.disablePrev || false
52
+ };
53
+ }
54
+ nextStep() {
55
+ this.tourInstance?.nextStep();
56
+ }
57
+ async startTour() {
58
+ const steps = await Promise.all(this.parseSteps().map(step => this.getElementWhenNeeded(step)));
59
+ if (steps.length === 0) {
60
+ console.error('No valid steps found for the tour.');
61
+ return;
62
+ }
84
63
  this.tourInstance = introJs().setOptions({
85
- steps: introSteps,
86
- nextLabel: "Next",
87
- prevLabel: "Prev",
88
- overlayOpacity: 0,
64
+ steps: steps,
89
65
  disableInteraction: this.disableInteraction,
90
- showButtons: true,
91
- showStepNumbers: false,
66
+ nextLabel: 'Next',
67
+ prevLabel: 'Prev',
68
+ overlayOpacity: this.showBackdrop ? 0.5 : 0,
92
69
  exitOnOverlayClick: false,
70
+ showProgress: false,
71
+ showButtons: true
93
72
  });
94
73
  this.tourInstance.onbeforechange(async (targetElement) => {
95
74
  const currentStepIndex = this.tourInstance?._currentStep ?? 0;
96
- const currentStep = this.steps[currentStepIndex];
97
- if (currentStep?.beforeChange) {
98
- const result = await currentStep.beforeChange();
99
- if (!result) {
100
- this.shakeTooltip();
101
- return false;
75
+ const step = steps[currentStepIndex];
76
+ if (step && typeof step.element === 'function') {
77
+ const el = step.element();
78
+ if (el) {
79
+ if (this.tourInstance && this.tourInstance._introItems) {
80
+ this.tourInstance._introItems[currentStepIndex].element = el;
81
+ }
102
82
  }
103
83
  }
84
+ if (step.beforeChange) {
85
+ return await step.beforeChange();
86
+ }
104
87
  return true;
105
88
  });
106
89
  this.tourInstance.onafterchange((targetElement) => {
107
90
  const currentStepIndex = this.tourInstance?._currentStep ?? 0;
108
- const currentStep = this.steps[currentStepIndex];
109
- if (currentStep?.afterChange) {
110
- currentStep.afterChange();
91
+ const step = steps[currentStepIndex];
92
+ if (step?.afterChange) {
93
+ step.afterChange();
94
+ }
95
+ const nextBtn = document.querySelector('.introjs-nextbutton');
96
+ const prevBtn = document.querySelector('.introjs-prevbutton');
97
+ if (nextBtn) {
98
+ nextBtn.setAttribute('disabled', step.disableNext ? 'true' : 'false');
99
+ }
100
+ if (prevBtn) {
101
+ prevBtn.setAttribute('disabled', step.disablePrev ? 'true' : 'false');
111
102
  }
112
103
  });
113
- // Update step counter on change
114
- this.tourInstance.onchange((targetElement) => {
104
+ this.tourInstance.onchange(() => {
115
105
  const currentStep = this.tourInstance?._currentStep ?? 0;
116
- const totalSteps = this.steps.length;
106
+ const totalSteps = steps.length;
117
107
  const tooltip = document.querySelector('.introjs-tooltip');
118
108
  if (tooltip) {
119
109
  const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -130,7 +120,7 @@ let NileTour = class NileTour extends LitElement {
130
120
  });
131
121
  this.tourInstance.start().then(() => {
132
122
  const currentStep = this.tourInstance?._currentStep ?? 0;
133
- const totalSteps = this.steps.length;
123
+ const totalSteps = steps.length;
134
124
  const tooltip = document.querySelector('.introjs-tooltip');
135
125
  if (tooltip) {
136
126
  const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -143,32 +133,37 @@ let NileTour = class NileTour extends LitElement {
143
133
  }
144
134
  stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
145
135
  }
136
+ const closeButton = document.createElement('button');
137
+ closeButton.className = 'introjs-close-btn';
138
+ closeButton.innerHTML = `
139
+ <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
140
+ <path d="M5.33228 5.99996L0 11.3322L0.667759 12L6.00004 6.66772L11.3323 12L12.0001 11.3322L6.66779 5.99996L12 0.667759L11.3322 0L6.00004 5.3322L0.667842 5.96046e-08L8.40425e-05 0.667759L5.33228 5.99996Z" fill="white" fill-opacity="0.5"/>
141
+ </svg>`;
142
+ closeButton.onclick = () => this.tourInstance?.exit(true);
143
+ tooltip.appendChild(closeButton);
146
144
  }
147
145
  }).catch(err => {
148
146
  console.error('Error starting the tour:', err);
149
147
  });
150
148
  }
151
- shakeTooltip() {
152
- const tooltip = document.querySelector('.introjs-tooltip');
153
- if (tooltip) {
154
- tooltip.classList.add('introjs-shake');
155
- setTimeout(() => {
156
- tooltip.classList.remove('introjs-shake');
157
- }, 1500);
158
- }
159
- }
160
149
  render() {
161
150
  return html `
162
151
  <style>
163
152
  ${styles.cssText}
153
+ .introjs-close-btn {
154
+ position: absolute;
155
+ top: 5px;
156
+ right: 10px;
157
+ background: none;
158
+ border: none;
159
+ cursor: pointer;
160
+ padding: 0;
161
+ }
164
162
  </style>
165
163
  <slot></slot>
166
164
  `;
167
165
  }
168
166
  };
169
- __decorate([
170
- property({ type: Array })
171
- ], NileTour.prototype, "steps", void 0);
172
167
  __decorate([
173
168
  property({ type: String })
174
169
  ], NileTour.prototype, "stepsJson", void 0);
@@ -182,5 +177,4 @@ NileTour = __decorate([
182
177
  customElement('nile-tour')
183
178
  ], NileTour);
184
179
  export { NileTour };
185
- export default NileTour;
186
180
  //# sourceMappingURL=nile-tour.js.map
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: 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"]}
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, css, CSSResultArray, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport introJs from 'intro.js';\nimport { styles } from './nile-tour.css';\n\n@customElement('nile-tour')\nexport class NileTour extends LitElement {\n tourInstance: ReturnType<typeof introJs> | null = null;\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 private parseSteps(): any[] {\n if (Array.isArray(this.stepsJson)) {\n return this.stepsJson;\n }\n \n console.error('Invalid stepsJson format');\n return [];\n }\n\n private async getElementWhenNeeded(step: any): Promise<any> {\n return {\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 disableNext: step.disableNext || false,\n disablePrev: step.disablePrev || false\n };\n }\n\n public nextStep() {\n this.tourInstance?.nextStep();\n }\n \n public async startTour(): Promise<void> {\n const steps = await Promise.all(this.parseSteps().map(step => this.getElementWhenNeeded(step)));\n\n if (steps.length === 0) {\n console.error('No valid steps found for the tour.');\n return;\n }\n\n this.tourInstance = introJs().setOptions({\n steps: steps as any,\n disableInteraction: this.disableInteraction,\n nextLabel: 'Next',\n prevLabel: 'Prev',\n overlayOpacity: this.showBackdrop ? 0.5 : 0,\n exitOnOverlayClick: false,\n showProgress: false,\n showButtons: true\n });\n\n this.tourInstance.onbeforechange(async (targetElement) => {\n const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n const step = steps[currentStepIndex];\n if (step && typeof step.element === 'function') {\n const el = step.element();\n if (el) {\n if (this.tourInstance && this.tourInstance._introItems) {\n this.tourInstance._introItems[currentStepIndex].element = el;\n }\n }\n }\n if (step.beforeChange) {\n return await step.beforeChange();\n }\n return true;\n });\n\n this.tourInstance.onafterchange((targetElement) => {\n const currentStepIndex = this.tourInstance?._currentStep ?? 0;\n const step = steps[currentStepIndex];\n if (step?.afterChange) {\n step.afterChange();\n }\n\n \n const nextBtn = document.querySelector('.introjs-nextbutton');\n const prevBtn = document.querySelector('.introjs-prevbutton');\n\n if (nextBtn) {\n nextBtn.setAttribute('disabled', step.disableNext ? 'true' : 'false');\n }\n if (prevBtn) {\n prevBtn.setAttribute('disabled', step.disablePrev ? 'true' : 'false');\n }\n });\n\n this.tourInstance.onchange(() => {\n const currentStep = this.tourInstance?._currentStep ?? 0;\n const totalSteps = 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().then(() => {\n const currentStep = this.tourInstance?._currentStep ?? 0;\n const totalSteps = 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 const closeButton = document.createElement('button');\n closeButton.className = 'introjs-close-btn';\n closeButton.innerHTML = `\n <svg width=\"12\" height=\"12\" viewBox=\"0 0 12 12\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5.33228 5.99996L0 11.3322L0.667759 12L6.00004 6.66772L11.3323 12L12.0001 11.3322L6.66779 5.99996L12 0.667759L11.3322 0L6.00004 5.3322L0.667842 5.96046e-08L8.40425e-05 0.667759L5.33228 5.99996Z\" fill=\"white\" fill-opacity=\"0.5\"/>\n </svg>`;\n closeButton.onclick = () => this.tourInstance?.exit(true);\n tooltip.appendChild(closeButton);\n }\n }).catch(err => {\n console.error('Error starting the tour:', err);\n });\n }\n\n public render(): TemplateResult {\n return html`\n <style>\n ${styles.cssText}\n .introjs-close-btn {\n position: absolute;\n top: 5px;\n right: 10px;\n background: none;\n border: none;\n cursor: pointer;\n padding: 0;\n }\n </style>\n <slot></slot>\n `;\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'nile-tour': NileTour;\n }\n}\n"]}