@aquera/nile-elements 0.1.3 → 0.1.4

package/package.json

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

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

@@ -15,34 +15,99 @@ export const styles = css`
   }
 
   .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #000);
+    background-color: var(--nile-tour-background-color, #fff);
     color: var(--nile-tour-text-color, #fff);
     width: 300px;
     max-width: 300px;
+    border-radius: 4px;
+    border: 1px solid var(--Neutral-30, #c7ced4);
+    background: var(--White-Normal, #fff);
+
+    /* Elevation/Lifted */
+    box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
   }
 
-  .introjs-arrow.bottom {
-    border-top-color: var(--nile-tour-background-color, #000);
+  .introjs-tooltip-title {
+    color: #000;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: 16px;
+    letter-spacing: 0.2px;
+  }
+
+  .introjs-tooltip-header {
+    padding-left: 18px;
+    padding-right: 18px;
+    padding-top: 18px;
+  }
+
+  .introjs-tooltiptext {
+    color: #7f7f7f;
+    font-size: 14px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 20px;
+    letter-spacing: 0.2px;
+    padding: 15px 18px;
+  }
+
+  .introjs-arrow {
+    width: 15px;
+    height: 20px;
+    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');
+    background-repeat: no-repeat;
+    background-size: contain;
+    background-position: center;
+    position: absolute;
+    border: none;
+    content: none;
   }
 
   .introjs-arrow.top {
-    border-bottom-color: var(--nile-tour-background-color, #000);
+    top: -14.5px;
+    transform: rotate(90deg);
+    clip-path: inset(0px 3px 0px 0px);
+  }
+
+  .introjs-arrow.bottom {
+    bottom: -14.5px;
+    transform: rotate(270deg);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-arrow.left {
-    border-right-color: var(--nile-tour-background-color, #000);
+    left: -11.5px;
+    transform: rotate(0);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-arrow.right {
-    border-left-color: var(--nile-tour-background-color, #000);
+    right: -12px;
+    transform: rotate(180deg);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-arrow.left-bottom {
-    border-right-color: var(--nile-tour-background-color, #000) !important;
+    transform: rotate(0);
+    clip-path: inset(0px 1px 0px 0px);
+    left: -13.5px;
+    border-right-color: var(--nile-tour-background-color, #fff) !important;
   }
 
   .introjs-arrow.right-bottom {
-    border-left-color: var(--nile-tour-background-color, #000) !important;
+    right: -12px;
+    transform: rotate(180deg);
+    clip-path: inset(0px 3px 0px 0px);
+    border-left-color: var(--nile-tour-background-color, #fff) !important;
+  }
+
+  .introjs-arrow.top-middle {
+    top: -14px;
+    left: 50%;
+    margin-left: -5px;
+    transform: rotate(90deg);
+    clip-path: inset(0px 3px 0px 0px);
   }
 
   .introjs-button {
@@ -53,26 +118,46 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: transparent;
+    background: var(--Primary-Normal, #005ea6);
     border-color: transparent;
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 12px;
+    border-radius: 4px;
   }
 
   .introjs-button:hover {
-    outline: 0;
-    text-decoration: none;
+    background: none;
+    border: none;
+    color: var(--nile-tour-text-color, #fff);
+    font-size: 14px;
+    padding: 0;
+    cursor: pointer;
+    text-shadow: none;
+    background: var(--Primary-Normal, #005ea6);
     border-color: transparent;
-    background: transparent;
-    color: white;
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 12px;
   }
 
   .introjs-button:focus {
-    outline: 0;
-    text-decoration: none;
-    border-color: transparent;
-    background: transparent;
-    color: white;
+    background: none;
     border: none;
+    color: var(--nile-tour-text-color, #fff);
+    font-size: 14px;
+    padding: 0;
+    cursor: pointer;
+    text-shadow: none;
     box-shadow: none;
+    background: var(--Primary-Normal, #005ea6);
+    border-color: transparent;
+    display: flex;
+    padding: 12px;
+    align-items: center;
+    gap: 12px;
   }
 
   .introjs-tooltipbuttons {
@@ -109,12 +194,16 @@ export const styles = css`
   }
 
   .introjs-step-counter {
-    margin-right: auto; /* Push buttons to the opposite side */
+    margin-right: auto;
     font-size: 14px;
-    color: #ffffff;
     padding: 0 10px;
     display: flex;
     align-items: center;
+    color: var(--Color-Text-Info, #1978B8);
+    font-style: normal;
+    font-weight: 400;
+    line-height: 14px;
+    letter-spacing: 0.2px;
   }
 
   @keyframes shake {
@@ -136,7 +225,7 @@ export const styles = css`
   }
 
   .introjs-shake {
-    animation: shake 0.5s ease infinite; /* Repeats continuously */
+    animation: shake 0.5s ease infinite;
   }
 `;
 

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

@@ -28,7 +28,7 @@ export class NileTour extends LitElement {
     element: string;
     title: string;
     content: string;
-    position: "top" | "left" | "right" | "bottom";
+    position: any;
     beforeChange?: () => Promise<boolean> | boolean;
     afterChange?: () => Promise<void> | void;
   }> = [];
@@ -101,13 +101,13 @@ export class NileTour extends LitElement {
         position: step.position,
         beforeChange: step.beforeChange,
         afterChange: step.afterChange,
-      }))
-      .filter((step) => step.element !== null);
+      }));
+      // .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>",
+      nextLabel: "Next",
+      prevLabel: "Prev",
       overlayOpacity: 0,
       disableInteraction: this.disableInteraction,
       showButtons: true,
@@ -157,7 +157,26 @@ export class NileTour extends LitElement {
       }
     });
 
-    this.tourInstance.start();
+
+
+    this.tourInstance.start().then(() => {
+      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}`;
+        }
+      }  }).catch(err => {
+      console.error('Error starting the tour:', err);
+  });
   }
 
   private shakeTooltip(): void {

package/vscode-html-custom-data.json

@@ -3766,11 +3766,11 @@
     },
     {
       "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\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.",
+      "description": "Nile tour component.\n\nAttributes:\n\n  * `steps` {`{ stepNo: number; element: string; title: string; content: string; position: any; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<void>) | 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: any; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<void>) | 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: "
+          "description": "`steps` {`{ stepNo: number; element: string; title: string; content: string; position: any; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<void>) | undefined; }[]`} - The steps for the tour.\n\nProperty: steps\n\nDefault: "
         },
         {
           "name": "stepsJson",