@aquera/nile-elements 0.0.128 → 0.0.129

package/dist/src/nile-tour/nile-tour.js

@@ -1,23 +1,14 @@
-/**
- * Copyright Aquera Inc 2023
- *
- * This source code is licensed under the BSD-3-Clause license found in the
- * LICENSE file in the root directory of this source tree.
- */
 import { __decorate } from "tslib";
-import { html, property } from 'lit-element';
+import { LitElement, html, property } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-tour.css';
-import NileElement from '../internal/nile-element';
 import introJs from 'intro.js';
-// import 'intro.js/introjs.css';
 /**
  * Nile tour component.
  *
  * @tag nile-tour
- *
  */
-let NileTour = class NileTour extends NileElement {
+let NileTour = class NileTour extends LitElement {
     static get styles() {
         return [styles];
     }
@@ -26,43 +17,86 @@ let NileTour = class NileTour extends NileElement {
     }
     constructor() {
         super();
-        // Define the type of tourInstance using ReturnType<typeof introJs>
         this.tourInstance = null;
         /**
          * The steps for the tour.
          */
         this.steps = [];
+        /**
+         * JSON string for steps.
+         */
+        this.stepsJson = '';
+        /**
+         * Whether to show the backdrop overlay.
+         */
+        this.showBackdrop = false;
+        /**
+         * Whether to disable interaction during the tour.
+         */
+        this.disableInteraction = false;
+    }
+    updated(changedProperties) {
+        if (changedProperties.has('stepsJson')) {
+            this.parseStepsJson();
+        }
+        super.updated(changedProperties);
+    }
+    /**
+     * Parses the JSON string and updates the steps array.
+     */
+    parseStepsJson() {
+        if (this.stepsJson) {
+            try {
+                const parsedSteps = JSON.parse(this.stepsJson);
+                if (Array.isArray(parsedSteps)) {
+                    this.steps = parsedSteps;
+                }
+                else {
+                    console.error('Invalid JSON: Expected an array');
+                }
+            }
+            catch (error) {
+                console.error('Failed to parse stepsJson:', error);
+            }
+        }
     }
     /**
      * Initializes and starts the Intro.js tour.
      */
     startTour() {
-        const introSteps = this.steps.map((step) => ({
-            element: document.querySelector(step.element),
+        console.log('start of tour');
+        const introSteps = this.steps
+            .map((step) => ({
+            element: document.querySelector(`[data-tour="${step.element}"]`),
             intro: step.content,
             title: step.title,
             position: step.position,
             beforeChange: step.beforeChange,
             afterChange: step.afterChange,
-        })).filter((step) => step.element !== null); // Filter out steps with null elements
+        }))
+            .filter((step) => step.element !== null);
         this.tourInstance = introJs().setOptions({
             steps: introSteps,
             nextLabel: "<button class='introjs-button introjs-next-button'>Next</button>",
             prevLabel: "<button class='introjs-button introjs-prev-button'>Prev</button>",
+            overlayOpacity: 0,
+            disableInteraction: this.disableInteraction,
             showButtons: true,
-            showStepNumbers: true,
+            showStepNumbers: false,
+            exitOnOverlayClick: false,
         });
-        // Handle beforeChange
         this.tourInstance.onbeforechange(async (targetElement) => {
             const currentStepIndex = this.tourInstance?._currentStep ?? 0;
             const currentStep = this.steps[currentStepIndex];
             if (currentStep?.beforeChange) {
                 const result = await currentStep.beforeChange();
-                return result === true; // Proceed only if `true` is returned
+                if (!result) {
+                    this.shakeTooltip();
+                    return false;
+                }
             }
-            return true; // Proceed if no beforeChange function is provided
+            return true;
         });
-        // Handle afterChange
         this.tourInstance.onafterchange((targetElement) => {
             const currentStepIndex = this.tourInstance?._currentStep ?? 0;
             const currentStep = this.steps[currentStepIndex];
@@ -70,24 +104,56 @@ let NileTour = class NileTour extends NileElement {
                 currentStep.afterChange();
             }
         });
+        // Update step counter on change
+        this.tourInstance.onchange((targetElement) => {
+            const currentStep = this.tourInstance?._currentStep ?? 0;
+            const totalSteps = this.steps.length;
+            const tooltip = document.querySelector('.introjs-tooltip');
+            if (tooltip) {
+                const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
+                if (navBar) {
+                    let stepCounter = navBar.querySelector('.introjs-step-counter');
+                    if (!stepCounter) {
+                        stepCounter = document.createElement('div');
+                        stepCounter.className = 'introjs-step-counter';
+                        navBar.insertBefore(stepCounter, navBar.firstChild);
+                    }
+                    stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
+                }
+            }
+        });
         this.tourInstance.start();
     }
-    /**
-     * Render method
-     * @slot This is a slot test
-     */
+    shakeTooltip() {
+        const tooltip = document.querySelector('.introjs-tooltip');
+        if (tooltip) {
+            tooltip.classList.add('introjs-shake');
+            setTimeout(() => {
+                tooltip.classList.remove('introjs-shake');
+            }, 1500);
+        }
+    }
     render() {
         return html `
-         <style>
-            ${styles.cssText}
-         </style>
-         <slot></slot>
-      `;
+      <style>
+        ${styles.cssText}
+      </style>
+      <slot></slot>
+    `;
     }
 };
 __decorate([
     property({ type: Array })
 ], NileTour.prototype, "steps", void 0);
+__decorate([
+    property({ type: String })
+], NileTour.prototype, "stepsJson", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileTour.prototype, "showBackdrop", void 0);
+__decorate([
+    property({ type: Boolean })
+], NileTour.prototype, "disableInteraction", void 0);
 NileTour = __decorate([
     customElement('nile-tour')
 ], NileTour);

package/dist/src/nile-tour/nile-tour.js.map

@@ -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, property } from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-tour.css';\nimport NileElement from '../internal/nile-element';\nimport introJs from 'intro.js';\n// import 'intro.js/introjs.css';\n\n/**\n * Nile tour component.\n *\n * @tag nile-tour\n *\n */\n@customElement('nile-tour')\nexport class NileTour extends NileElement {\n   // Define the type of tourInstance using ReturnType<typeof introJs>\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   public static get styles(): CSSResultArray {\n      return [styles];\n   }\n\n   createRenderRoot() {\n      return this;\n   }\n\n   constructor() {\n      super();\n   }\n\n   /**\n    * Initializes and starts the Intro.js tour.\n    */\n   public startTour(): void {\n      const introSteps = this.steps.map((step) => ({\n         element: document.querySelector(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      })).filter((step) => step.element !== null); // Filter out steps with null elements\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         showButtons: true,\n         showStepNumbers: true,\n      });\n\n      // Handle beforeChange\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            return result === true; // Proceed only if `true` is returned\n         }\n\n         return true; // Proceed if no beforeChange function is provided\n      });\n\n      // Handle afterChange\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      this.tourInstance.start();\n   }\n\n   /**\n    * Render method\n    * @slot This is a slot test\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"]}
+{"version":3,"file":"nile-tour.js","sourceRoot":"","sources":["../../../src/nile-tour/nile-tour.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, html, CSSResultArray, TemplateResult, property } from 'lit-element';\nimport { customElement } 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"]}