@aquera/nile-elements 0.0.128 → 0.0.129

package/package.json

@@ -3,7 +3,7 @@
   "description": "Webcomponent nile-elements following open-wc recommendations",
   "license": "MIT",
   "author": "nile-elements",
-  "version": "0.0.128",
+  "version": "0.0.129",
   "main": "dist/src/index.js",
   "type": "module",
   "module": "dist/src/index.js",

package/src/nile-tour/nile-tour.css.ts

@@ -17,8 +17,8 @@ export const styles = css`
   .introjs-tooltip {
     background-color: var(--nile-tour-background-color, #000);
     color: var(--nile-tour-text-color, #fff);
-	width: 300px;
-	max-width: 300px;
+    width: 300px;
+    max-width: 300px;
   }
 
   .introjs-arrow.bottom {
@@ -42,11 +42,9 @@ export const styles = css`
   }
 
   .introjs-arrow.right-bottom {
-    border-right-color: var(--nile-tour-background-color, #000) !important;
+    border-left-color: var(--nile-tour-background-color, #000) !important;
   }
 
-
-
   .introjs-button {
     background: none;
     border: none;
@@ -84,23 +82,61 @@ export const styles = css`
     gap: 10px;
   }
 
-  .introjs-helperNumberLayer{
-	display: none;
+  .introjs-helperNumberLayer {
+    display: none;
   }
 
-  .introjs-bullets{
-	display: none;
-
+  .introjs-bullets {
+    display: none;
   }
 
   .introjs-skipbutton {
-	display: none;
+    display: none;
+  }
+
+  .introjs-prev-button {
+    color: #c7ced4;
+  }
 
+  .introjs-helperLayer {
+    display: none;
+    pointer-events: none;
   }
 
+  .introjs-overlay {
+    display: none;
+    pointer-events: none;
+  }
 
-  .introjs-prev-button {
-	color: #C7CED4;
+  .introjs-step-counter {
+    margin-right: auto; /* Push buttons to the opposite side */
+    font-size: 14px;
+    color: #ffffff;
+    padding: 0 10px;
+    display: flex;
+    align-items: center;
+  }
+
+  @keyframes shake {
+    0% {
+      transform: translateX(0);
+    }
+    25% {
+      transform: translateX(-5px);
+    }
+    50% {
+      transform: translateX(5px);
+    }
+    75% {
+      transform: translateX(-5px);
+    }
+    100% {
+      transform: translateX(0);
+    }
+  }
+
+  .introjs-shake {
+    animation: shake 0.5s ease infinite; /* Repeats continuously */
   }
 `;
 

package/src/nile-tour/nile-tour.ts

@@ -1,119 +1,182 @@
-/**
- * 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 { LitElement, html, CSSResultArray, TemplateResult, 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
- *
  */
 @customElement('nile-tour')
-export class NileTour extends NileElement {
-   // Define the type of tourInstance using ReturnType<typeof introJs>
-   private tourInstance: ReturnType<typeof introJs> | null = null;
-
-   /**
-    * The steps for the tour.
-    */
-   @property({ type: Array })
-   steps: Array<{
-      stepNo: number;
-      element: string;
-      title: string;
-      content: string;
-      position: "top" | "left" | "right" | "bottom";
-      beforeChange?: () => Promise<boolean> | boolean;
-      afterChange?: () => Promise<void> | void;
-   }> = [];
-
-   public static get styles(): CSSResultArray {
-      return [styles];
-   }
-
-   createRenderRoot() {
-      return this;
-   }
-
-   constructor() {
-      super();
-   }
-
-   /**
-    * Initializes and starts the Intro.js tour.
-    */
-   public startTour(): void {
-      const introSteps = this.steps.map((step) => ({
-         element: document.querySelector(step.element) as HTMLElement | null,
-         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
-
-      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>",
-         showButtons: true,
-         showStepNumbers: true,
-      });
-
-      // 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
-         }
-
-         return true; // Proceed if no beforeChange function is provided
-      });
-
-      // Handle afterChange
-      this.tourInstance.onafterchange((targetElement) => {
-         const currentStepIndex = this.tourInstance?._currentStep ?? 0;
-         const currentStep = this.steps[currentStepIndex];
-
-         if (currentStep?.afterChange) {
-            currentStep.afterChange();
-         }
-      });
-
-      this.tourInstance.start();
-   }
-
-   /**
-    * Render method
-    * @slot This is a slot test
-    */
-   public render(): TemplateResult {
-      return html`
-         <style>
-            ${styles.cssText}
-         </style>
-         <slot></slot>
-      `;
-   }
+export class NileTour extends LitElement {
+  private tourInstance: ReturnType<typeof introJs> | null = null;
+
+  /**
+   * The steps for the tour.
+   */
+  @property({ type: Array })
+  steps: Array<{
+    stepNo: number;
+    element: string;
+    title: string;
+    content: string;
+    position: "top" | "left" | "right" | "bottom";
+    beforeChange?: () => Promise<boolean> | boolean;
+    afterChange?: () => Promise<void> | void;
+  }> = [];
+
+  /**
+   * JSON string for steps.
+   */
+  @property({ type: String })
+  stepsJson: string = '';
+
+  /**
+   * Whether to show the backdrop overlay.
+   */
+  @property({ type: Boolean })
+  showBackdrop: boolean = false;
+
+  /**
+   * Whether to disable interaction during the tour.
+   */
+  @property({ type: Boolean })
+  disableInteraction: boolean = false;
+
+  public static get styles(): CSSResultArray {
+    return [styles];
+  }
+
+  createRenderRoot() {
+    return this;
+  }
+
+  constructor() {
+    super();
+  }
+
+  updated(changedProperties: Map<string | number | symbol, unknown>): void {
+    if (changedProperties.has('stepsJson')) {
+      this.parseStepsJson();
+    }
+    super.updated(changedProperties);
+  }
+
+  /**
+   * Parses the JSON string and updates the steps array.
+   */
+  private parseStepsJson(): void {
+    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.
+   */
+  public startTour(): void {
+    console.log('start of tour');
+    const introSteps = this.steps
+      .map((step) => ({
+        element: document.querySelector(`[data-tour="${step.element}"]`) as HTMLElement | null,
+        intro: step.content,
+        title: step.title,
+        position: step.position,
+        beforeChange: step.beforeChange,
+        afterChange: step.afterChange,
+      }))
+      .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: false,
+      exitOnOverlayClick: false,
+    });
+
+    this.tourInstance.onbeforechange(async (targetElement) => {
+      const currentStepIndex = this.tourInstance?._currentStep ?? 0;
+      const currentStep = this.steps[currentStepIndex];
+
+      if (currentStep?.beforeChange) {
+        const result = await currentStep.beforeChange();
+        if (!result) {
+          this.shakeTooltip();
+          return false;
+        }
+      }
+      return true;
+    });
+
+    this.tourInstance.onafterchange((targetElement) => {
+      const currentStepIndex = this.tourInstance?._currentStep ?? 0;
+      const currentStep = this.steps[currentStepIndex];
+
+      if (currentStep?.afterChange) {
+        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') as HTMLElement;
+          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();
+  }
+
+  private shakeTooltip(): void {
+    const tooltip = document.querySelector('.introjs-tooltip');
+    if (tooltip) {
+      tooltip.classList.add('introjs-shake');
+      setTimeout(() => {
+        tooltip.classList.remove('introjs-shake');
+      }, 1500);
+    }
+  }
+
+  public render(): TemplateResult {
+    return html`
+      <style>
+        ${styles.cssText}
+      </style>
+      <slot></slot>
+    `;
+  }
 }
 
 export default NileTour;
 
 declare global {
-   interface HTMLElementTagNameMap {
-      'nile-tour': NileTour;
-   }
+  interface HTMLElementTagNameMap {
+    'nile-tour': NileTour;
+  }
 }

package/vscode-html-custom-data.json

@@ -3728,11 +3728,25 @@
     },
     {
       "name": "nile-tour",
-      "description": "Nile tour component.\n\nAttributes:\n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\nProperties:\n\n  * `tourInstance` - \n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\n  * `BUBBLES` {`boolean`} - \n\n  * `COMPOSED` {`boolean`} - \n\n  * `CANCELABLE` {`boolean`} - ",
+      "description": "Nile tour component.\n\nAttributes:\n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\n  * `stepsJson` {`string`} - JSON string for steps.\n\n  * `showBackdrop` {`boolean`} - Whether to show the backdrop overlay.\n\n  * `disableInteraction` {`boolean`} - Whether to disable interaction during the tour.\n\nProperties:\n\n  * `tourInstance` - \n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\n  * `stepsJson` {`string`} - JSON string for steps.\n\n  * `showBackdrop` {`boolean`} - Whether to show the backdrop overlay.\n\n  * `disableInteraction` {`boolean`} - Whether to disable interaction during the tour.",
       "attributes": [
         {
           "name": "steps",
           "description": "`steps` {`{ stepNo: number; element: string; title: string; content: string; position: \"top\" | \"bottom\" | \"right\" | \"left\"; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<...>) | undefined; }[]`} - The steps for the tour.\n\nProperty: steps\n\nDefault: "
+        },
+        {
+          "name": "stepsJson",
+          "description": "`stepsJson` {`string`} - JSON string for steps.\n\nProperty: stepsJson\n\nDefault: "
+        },
+        {
+          "name": "showBackdrop",
+          "description": "`showBackdrop` {`boolean`} - Whether to show the backdrop overlay.\n\nProperty: showBackdrop\n\nDefault: false",
+          "valueSet": "v"
+        },
+        {
+          "name": "disableInteraction",
+          "description": "`disableInteraction` {`boolean`} - Whether to disable interaction during the tour.\n\nProperty: disableInteraction\n\nDefault: false",
+          "valueSet": "v"
         }
       ]
     },