@aquera/nile-elements 0.1.18 → 0.1.19

package/package.json

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

package/src/nile-code-editor/nile-code-editor.ts

@@ -259,7 +259,7 @@ export class NileCodeEditor extends NileElement {
       extensions: [
         basicSetup({
           highlightActiveLine: false,
-          foldGutter: false,
+          foldGutter: true,
         }),
         lineNumbersExtension,
         readOnlyExtension,

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

@@ -15,13 +15,14 @@ export const styles = css`
   }
 
   .introjs-tooltip {
-    background-color: var(--nile-tour-background-color, #1978B8);
-    color: var(--nile-tour-text-color, var(--nile-colors-white-base));
+    background-color: var(--nile-tour-background-color, #1978b8);
+    color: var(--nile-tour-text-color, #fff);
     width: 300px;
     max-width: 300px;
-    border-radius: 4px;
-    border: 1px solid var(--Neutral-30, #1978B8);
-    background: var(--White-Normal, #1978B8);
+    border-radius: 12px;
+    border: 1px solid var(--Neutral-30, #1978b8);
+    background: var(--White-Normal, #1978b8);
+    /* border: 1px solid var(--Neutral-30, #C7CED4); */
 
     /* Elevation/Lifted */
     box-shadow: 0px 4px 8px 0px rgba(119, 125, 130, 0.15);
@@ -42,8 +43,12 @@ export const styles = css`
     padding-top: 18px;
   }
 
+  .introjs-progress {
+    display: none;
+  }
+
   .introjs-tooltiptext {
-    color: var(--nile-colors-white-base);
+    color: #c7ced4;
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -118,7 +123,7 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -136,7 +141,7 @@ export const styles = css`
     padding: 0;
     cursor: pointer;
     text-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -153,7 +158,7 @@ export const styles = css`
     cursor: pointer;
     text-shadow: none;
     box-shadow: none;
-    background: var(--Primary-Normal, #1978B8);
+    background: var(--Primary-Normal, #1978b8);
     border-color: transparent;
     display: flex;
     padding: 12px;
@@ -185,13 +190,8 @@ export const styles = css`
   }
 
   .introjs-helperLayer {
-    display: none;
-    pointer-events: none;
-  }
-
-  .introjs-overlay {
-    display: none;
-    pointer-events: none;
+    box-shadow: rgb(33 33 33 / 0%) 0px 0px 1px 2px,
+      rgba(33, 33, 33, 0.5) 0px 0px 0px 5000px !important;
   }
 
   .introjs-step-counter {
@@ -200,7 +200,7 @@ export const styles = css`
     padding: 0 10px;
     display: flex;
     align-items: center;
-    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.50));
+    color: var(--Color-Text-Inverted-Secondary, rgba(255, 255, 255, 0.5));
     font-style: normal;
     font-weight: 500;
     line-height: 14px;
@@ -228,6 +228,20 @@ export const styles = css`
   .introjs-shake {
     animation: shake 0.5s ease infinite;
   }
+
+  .introjs-close-btn {
+    position: absolute;
+    top: 15px;
+    right: 10px;
+    background: none;
+    border: none;
+    font-size: 16px;
+    cursor: pointer;
+  }
+
+  a[disabled='true'] {
+    display: none;
+  }
 `;
 
 export default [styles];

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

@@ -5,33 +5,14 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { LitElement, html, CSSResultArray, TemplateResult,  } from 'lit';
-import { customElement,property } from 'lit/decorators.js';
-import { styles } from './nile-tour.css';
+import { LitElement, html, css, CSSResultArray, TemplateResult } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
 import introJs from 'intro.js';
+import { styles } from './nile-tour.css';
 
-/**
- * Nile tour component.
- *
- * @tag nile-tour
- */
 @customElement('nile-tour')
 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: any;
-    beforeChange?: () => Promise<boolean> | boolean;
-    afterChange?: () => Promise<void> | void;
-  }> = [];
+  tourInstance: ReturnType<typeof introJs> | null = null;
 
   /**
    * JSON string for steps.
@@ -50,7 +31,7 @@ export class NileTour extends LitElement {
    */
   @property({ type: Boolean })
   disableInteraction: boolean = false;
-
+  
   public static get styles(): CSSResultArray {
     return [styles];
   }
@@ -63,85 +44,90 @@ export class NileTour extends LitElement {
     super();
   }
 
-  updated(changedProperties: Map<string | number | symbol, unknown>): void {
-    if (changedProperties.has('stepsJson')) {
-      this.parseStepsJson();
+  private parseSteps(): any[] {
+    if (Array.isArray(this.stepsJson)) {
+      return this.stepsJson;
     }
-    super.updated(changedProperties);
+    
+    console.error('Invalid stepsJson format');
+    return [];
   }
 
-  /**
-   * 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);
-      }
-    }
+  private async getElementWhenNeeded(step: any): Promise<any> {
+    return {
+      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,
+      disableNext: step.disableNext || false,
+      disablePrev: step.disablePrev || false
+    };
   }
 
-  /**
-   * 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);
+  public nextStep() {
+    this.tourInstance?.nextStep();
+  }
+  
+  public async startTour(): Promise<void> {
+    const steps = await Promise.all(this.parseSteps().map(step => this.getElementWhenNeeded(step)));
+
+    if (steps.length === 0) {
+      console.error('No valid steps found for the tour.');
+      return;
+    }
 
     this.tourInstance = introJs().setOptions({
-      steps: introSteps,
-      nextLabel: "Next",
-      prevLabel: "Prev",
-      overlayOpacity: 0,
+      steps: steps as any,
       disableInteraction: this.disableInteraction,
-      showButtons: true,
-      showStepNumbers: false,
+      nextLabel: 'Next',
+      prevLabel: 'Prev',
+      overlayOpacity: this.showBackdrop ? 0.5 : 0,
       exitOnOverlayClick: false,
+      showProgress: false,
+      showButtons: true
     });
 
     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;
+      const step = steps[currentStepIndex];
+      if (step && typeof step.element === 'function') {
+        const el = step.element();
+        if (el) {
+          if (this.tourInstance && this.tourInstance._introItems) {
+            this.tourInstance._introItems[currentStepIndex].element = el;
+          }
         }
       }
+      if (step.beforeChange) {
+        return await step.beforeChange();
+      }
       return true;
     });
 
     this.tourInstance.onafterchange((targetElement) => {
       const currentStepIndex = this.tourInstance?._currentStep ?? 0;
-      const currentStep = this.steps[currentStepIndex];
+      const step = steps[currentStepIndex];
+      if (step?.afterChange) {
+        step.afterChange();
+      }
 
-      if (currentStep?.afterChange) {
-        currentStep.afterChange();
+      
+      const nextBtn = document.querySelector('.introjs-nextbutton');
+      const prevBtn = document.querySelector('.introjs-prevbutton');
+
+      if (nextBtn) {
+        nextBtn.setAttribute('disabled', step.disableNext ? 'true' : 'false');
+      }
+      if (prevBtn) {
+        prevBtn.setAttribute('disabled', step.disablePrev ? 'true' : 'false');
       }
     });
 
-    // Update step counter on change
-    this.tourInstance.onchange((targetElement) => {
+    this.tourInstance.onchange(() => {
       const currentStep = this.tourInstance?._currentStep ?? 0;
-      const totalSteps = this.steps.length;
+      const totalSteps = steps.length;
       const tooltip = document.querySelector('.introjs-tooltip');
       if (tooltip) {
         const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -157,11 +143,9 @@ export class NileTour extends LitElement {
       }
     });
 
-
-
     this.tourInstance.start().then(() => {
       const currentStep = this.tourInstance?._currentStep ?? 0;
-      const totalSteps = this.steps.length;
+      const totalSteps = steps.length;
       const tooltip = document.querySelector('.introjs-tooltip');
       if (tooltip) {
         const navBar = tooltip.querySelector('.introjs-tooltipbuttons');
@@ -174,33 +158,40 @@ export class NileTour extends LitElement {
           }
           stepCounter.textContent = `${currentStep + 1} of ${totalSteps}`;
         }
-      }  }).catch(err => {
-      console.error('Error starting the tour:', err);
-  });
-  }
 
-  private shakeTooltip(): void {
-    const tooltip = document.querySelector('.introjs-tooltip');
-    if (tooltip) {
-      tooltip.classList.add('introjs-shake');
-      setTimeout(() => {
-        tooltip.classList.remove('introjs-shake');
-      }, 1500);
-    }
+        const closeButton = document.createElement('button');
+        closeButton.className = 'introjs-close-btn';
+        closeButton.innerHTML = `
+          <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <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"/>
+          </svg>`;
+        closeButton.onclick = () => this.tourInstance?.exit(true);
+        tooltip.appendChild(closeButton);
+      }
+    }).catch(err => {
+      console.error('Error starting the tour:', err);
+    });
   }
 
   public render(): TemplateResult {
     return html`
       <style>
         ${styles.cssText}
+        .introjs-close-btn {
+          position: absolute;
+          top: 5px;
+          right: 10px;
+          background: none;
+          border: none;
+          cursor: pointer;
+          padding: 0;
+        }
       </style>
       <slot></slot>
     `;
   }
 }
 
-export default NileTour;
-
 declare global {
   interface HTMLElementTagNameMap {
     'nile-tour': NileTour;

package/vscode-html-custom-data.json

@@ -3821,12 +3821,8 @@
     },
     {
       "name": "nile-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.",
+      "description": "Attributes:\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  * `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: any; beforeChange?: (() => boolean | Promise<boolean>) | undefined; afterChange?: (() => void | Promise<void>) | 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: "